oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260720172840

Browse Source
This commit is contained in:
oneao committed 2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
3117 files changed
+201407 -1236
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/.claude/skills/antdv-next/references/components/alert/demo/_semantic.md
+53
View File
@@ -0,0 +1,53 @@
# _semantic
## Source
```vue
<script setup lang="ts">
import { computed } from 'vue'
import { SemanticPreview } from '@/components/semantic'
import { useComponentLocale } from '@/composables/use-locale'
import { locales } from '../locales'
const { t } = useComponentLocale(locales)
const semantics = computed(() => [
{ name: 'root', desc: t('root'), version: '1.0.0' },
{ name: 'icon', desc: t('icon'), version: '1.0.0' },
{ name: 'section', desc: t('section'), version: '1.0.0' },
{ name: 'title', desc: t('title'), version: '1.0.0' },
{ name: 'description', desc: t('description'), version: '1.0.0' },
{ name: 'actions', desc: t('actions'), version: '1.0.0' },
{ name: 'close', desc: t('close'), version: '1.0.0' },
])
</script>
<template>
<SemanticPreview
component-name="Alert"
:semantics="semantics"
>
<template #default="{ classes }">
<a-alert
closable
title="Info Text"
show-icon
description="Info Description Info Description Info Description Info Description"
type="info"
:classes="classes"
>
<template #action>
<a-flex vertical gap="small" :style="{ minWidth: '80px' }">
<a-button size="small" type="primary" block>
Accept
</a-button>
<a-button size="small" danger ghost block>
Decline
</a-button>
</a-flex>
</template>
</a-alert>
</template>
</SemanticPreview>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/action.md
+67
View File
@@ -0,0 +1,67 @@
# Custom action
## Description (en-US)
Custom action.
## Source
```vue
<template>
<a-alert
title="Success Tips"
type="success"
show-icon
closable
>
<template #action>
<a-button type="text" size="small">
UNDO
</a-button>
</template>
</a-alert>
<br>
<a-alert
title="Error Text"
show-icon
description="Error Description Error Description Error Description Error Description"
type="error"
>
<template #action>
<a-button size="small" danger>
Detail
</a-button>
</template>
</a-alert>
<br>
<a-alert
title="Warning Text"
type="warning"
closable
>
<template #action>
<a-button size="small" type="text">
Done
</a-button>
</template>
</a-alert>
<br>
<a-alert
title="Info Text"
description="Info Description Info Description Info Description Info Description"
type="info"
closable
>
<template #action>
<a-flex vertical gap="small" :style="{ minWidth: '80px' }">
<a-button size="small" type="primary" block>
Accept
</a-button>
<a-button size="small" danger ghost block>
Decline
</a-button>
</a-flex>
</template>
</a-alert>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/banner.md
+23
View File
@@ -0,0 +1,23 @@
# Banner
## Description (en-US)
Display Alert as a banner at top of page.
## Source
```vue
<template>
<a-alert title="Warning text" banner />
<br>
<a-alert
title="Very long warning text warning text text text text text text text"
banner
closable
/>
<br>
<a-alert :show-icon="false" title="Warning text without icon" banner />
<br>
<a-alert type="error" title="Error text" banner />
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/basic.md
+13
View File
@@ -0,0 +1,13 @@
# Basic
## Description (en-US)
The simplest usage for short messages.
## Source
```vue
<template>
<a-alert title="Success Text" type="success" />
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/closable.md
+45
View File
@@ -0,0 +1,45 @@
# Closable
## Description (en-US)
To show close button.
## Source
```vue
<script setup lang="ts">
function onClose(e: MouseEvent) {
console.log(e, 'I was closed.')
}
</script>
<template>
<a-alert
title="Warning Title"
type="warning"
:closable="{ 'aria-label': 'close' }"
@close="onClose"
/>
<br>
<a-alert
title="Success Title"
type="success"
:closable="{ 'aria-label': 'close' }"
@close="onClose"
/>
<br>
<a-alert
title="Info Title"
type="info"
:closable="{ 'aria-label': 'close' }"
@close="onClose"
/>
<br>
<a-alert
title="Error Title"
type="error"
:closable="{ 'aria-label': 'close' }"
@close="onClose"
/>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/component-token.md
+37
View File
@@ -0,0 +1,37 @@
# Component Token
## Description (en-US)
Custom component token.
## Source
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import { h } from 'vue'
const icon = () => h(SmileOutlined)
</script>
<template>
<a-config-provider
:theme="{
components: {
Alert: {
withDescriptionIconSize: 32,
withDescriptionPadding: 16,
},
},
}"
>
<a-alert
:icon="icon"
title="Success Tips"
description="Detailed description and advice about successful copywriting."
type="success"
show-icon
/>
</a-config-provider>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/custom-icon.md
+60
View File
@@ -0,0 +1,60 @@
# Custom Icon
## Description (en-US)
A relevant icon makes information clearer and more friendly.
## Source
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import { h } from 'vue'
const icon = () => h(SmileOutlined)
</script>
<template>
<a-alert :icon="icon" title="showIcon = false" type="success" />
<br>
<a-alert :icon="icon" title="Success Tips" type="success" show-icon />
<br>
<a-alert :icon="icon" title="Informational Notes" type="info" show-icon />
<br>
<a-alert :icon="icon" title="Warning" type="warning" show-icon />
<br>
<a-alert :icon="icon" title="Error" type="error" show-icon />
<br>
<a-alert
:icon="icon"
title="Success Tips"
description="Detailed description and advice about successful copywriting."
type="success"
show-icon
/>
<br>
<a-alert
:icon="icon"
title="Informational Notes"
description="Additional description and information about copywriting."
type="info"
show-icon
/>
<br>
<a-alert
:icon="icon"
title="Warning"
description="This is a warning notice about copywriting."
type="warning"
show-icon
/>
<br>
<a-alert
:icon="icon"
title="Error"
description="This is an error message about copywriting."
type="error"
show-icon
/>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/description.md
+35
View File
@@ -0,0 +1,35 @@
# Description
## Description (en-US)
Additional description for alert message.
## Source
```vue
<template>
<a-alert
title="Success Text"
description="Success Description Success Description Success Description"
type="success"
/>
<br>
<a-alert
title="Info Text"
description="Info Description Info Description Info Description Info Description"
type="info"
/>
<br>
<a-alert
title="Warning Text"
description="Warning Description Warning Description Warning Description Warning Description"
type="warning"
/>
<br>
<a-alert
title="Error Text"
description="Error Description Error Description Error Description Error Description"
type="error"
/>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/icon.md
+48
View File
@@ -0,0 +1,48 @@
# Icon
## Description (en-US)
A relevant icon will make information clearer and more friendly.
## Source
```vue
<template>
<a-alert title="Success Tips" type="success" show-icon />
<br>
<a-alert title="Informational Notes" type="info" show-icon />
<br>
<a-alert title="Warning" type="warning" show-icon closable />
<br>
<a-alert title="Error" type="error" show-icon />
<br>
<a-alert
title="Success Tips"
description="Detailed description and advice about successful copywriting."
type="success"
show-icon
/>
<br>
<a-alert
title="Informational Notes"
description="Additional description and information about copywriting."
type="info"
show-icon
/>
<br>
<a-alert
title="Warning"
description="This is a warning notice about copywriting."
type="warning"
show-icon
closable
/>
<br>
<a-alert
title="Error"
description="This is an error message about copywriting."
type="error"
show-icon
/>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/loop-banner.md
+47
View File
@@ -0,0 +1,47 @@
# Loop Banner
## Description (en-US)
Use CSS animation to create a loop banner.
## Source
```vue
<template>
<a-alert banner>
<template #title>
<div class="alert-marquee">
<div class="alert-marquee__content">
I can be a Vue component, multiple components, or just some text.
</div>
</div>
</template>
</a-alert>
</template>
<style scoped>
.alert-marquee {
overflow: hidden;
white-space: nowrap;
}
.alert-marquee__content {
display: inline-block;
min-width: 100%;
animation: alert-marquee 12s linear infinite;
}
.alert-marquee:hover .alert-marquee__content {
animation-play-state: paused;
}
@keyframes alert-marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/smooth-closed.md
+31
View File
@@ -0,0 +1,31 @@
# Smoothly Unmount
## Description (en-US)
Smoothly unmount Alert upon close.
## Source
```vue
<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(true)
function handleAfterClose() {
visible.value = false
}
</script>
<template>
<a-alert
v-if="visible"
title="Alert Message Text"
type="success"
closable
:after-close="handleAfterClose"
/>
<p>click the close button to see the effect</p>
<a-switch v-model:checked="visible" :disabled="visible" />
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/style-class.md
+86
View File
@@ -0,0 +1,86 @@
# Custom semantic dom styling
## Description (en-US)
## Source
```vue
<script setup lang="ts">
import type { AlertProps } from 'antdv-next'
import { theme } from 'antdv-next'
const { token } = theme.useToken()
const classes: AlertProps['classes'] = {
root: 'demo-alert-root',
}
const stylesObject: AlertProps['styles'] = {
icon: {
fontSize: '18px',
},
section: {
fontWeight: 500,
},
}
const stylesFn: AlertProps['styles'] = (info) => {
if (info?.props?.type === 'success') {
return {
root: {
backgroundColor: 'rgba(82, 196, 26, 0.1)',
borderColor: '#b7eb8f',
},
icon: {
color: '#52c41a',
},
}
}
if (info?.props?.type === 'warning') {
return {
root: {
backgroundColor: 'rgba(250, 173, 20, 0.1)',
borderColor: '#ffe58f',
},
icon: {
color: '#faad14',
},
}
}
return {}
}
</script>
<template>
<a-flex vertical gap="small">
<a-alert
title="Object styles"
type="info"
show-icon
:classes="classes"
:styles="stylesObject"
>
<template #action>
<a-button size="small">
Action
</a-button>
</template>
</a-alert>
<a-alert
title="Function styles"
type="success"
show-icon
:classes="classes"
:styles="stylesFn"
/>
</a-flex>
</template>
<style>
.demo-alert-root {
border: 2px dashed v-bind('token.colorBorder');
border-radius: v-bind('`${token.borderRadius}px`');
padding: v-bind('`${token.paddingXS}px`');
}
</style>
```
code/fms/.claude/skills/antdv-next/references/components/alert/demo/style.md
+19
View File
@@ -0,0 +1,19 @@
# More types
## Description (en-US)
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
## Source
```vue
<template>
<a-alert title="Success Text" type="success" />
<br>
<a-alert title="Info Text" type="info" />
<br>
<a-alert title="Warning Text" type="warning" />
<br>
<a-alert title="Error Text" type="error" />
</template>
```
code/fms/.claude/skills/antdv-next/references/components/alert/docs.md
+74
View File
@@ -0,0 +1,74 @@
---
title: Alert
description: Display warning messages that require attention.
---
## When To Use
- When you need to show alert messages to users.
- When you need a persistent static container which is closable by user actions.
## Demos
| Demo | Path |
| --- | --- |
| Basic | demo/basic.md |
| More types | demo/style.md |
| Closable | demo/closable.md |
| Description | demo/description.md |
| Icon | demo/icon.md |
| Banner | demo/banner.md |
| Loop Banner | demo/loop-banner.md |
| Smoothly Unmount | demo/smooth-closed.md |
| Custom Icon | demo/custom-icon.md |
| Custom action | demo/action.md |
| Component Token | demo/component-token.md |
| Custom semantic dom styling | demo/style-class.md |
## API
### Props
Common props ref：[Common props](../../docs/vue/common-props.md)
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
| --- | --- | --- | --- | --- | --- |
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | 'success' \| 'info' \| 'warning' \| 'error' | `info`, in `banner` mode default is `warning` | - | × |
| closable | The config of closable, &gt;=5.15.0: support `aria-*` | ClosableType | `false` | - | ✓ |
| title | Content of Alert | VueNode | - | - | × |
| message | Content of Alert, please use `title` instead | VueNode | - | - | × |
| description | Additional content of Alert | VueNode | - | - | × |
| afterClose | Called when close animation is finished, please use `closable.afterClose` instead | () =&gt; void | - | - | × |
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | - | × |
| role | https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute | string | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | AlertClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | AlertStylesType | - | - | ✓ |
| banner | Whether to show as banner | boolean | false | - | × |
| icon | Custom icon, effective when `showIcon` is true | VueNode | - | - | × |
| successIcon | (Only supports global configuration) Custom success icon in Alert icon | VueNode | - | - | ✓ |
| infoIcon | (Only supports global configuration) Custom info icon in Alert icon | VueNode | - | - | ✓ |
| warningIcon | (Only supports global configuration) Custom warning icon in Alert icon | VueNode | - | - | ✓ |
| errorIcon | (Only supports global configuration) Custom error icon in Alert icon | VueNode | - | - | ✓ |
| closeIcon | - | VueNode | - | - | ✓ |
| action | The action of Alert | VueNode | - | 4.9.0 | × |
| id | - | string | - | - | × |
### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| close | Callback when close Alert | (e: any) =&gt; any | - |
| mouseenter | - | (e: any) =&gt; any | - |
| mouseleave | - | (e: any) =&gt; any | - |
| click | - | (e: any) =&gt; any | - |
### Slots
| Slot | Description | Type | Version |
|-------------| --- | --- | --- |
| message | Content of Alert, please use `title` instead | () =&gt; any | - |
| title | Content of Alert| () =&gt; any | - |
| description | Additional content of Alert | () =&gt; any | - |
| icon | Custom icon, effective when `showIcon` is true | () =&gt; any | - |
| closeIcon | - | () =&gt; any | - |
| action | The action of Alert | () =&gt; any | 4.9.0 |
## Semantic DOM
| _semantic | demo/_semantic.md |
code/fms/.claude/skills/antdv-next/references/components/alert/token.md
+28
View File
@@ -0,0 +1,28 @@
# alert Token
Use these variables through `theme.components.Alert`. This document lists definitions only and does not include values.
```vue
<a-config-provider
:theme="{
token: {
// Global token configuration
},
components: {
Alert: {
// Token name: value
},
},
}"
>
...
</a-config-provider>
```
## Token List
| Token | Type | Description |
| --- | --- | --- |
| `defaultPadding` | `CSSProperties` | Default padding |
| `withDescriptionPadding` | `CSSProperties` | Padding with description |
| `withDescriptionIconSize` | `string \| number` | Icon size with description |