advance-semi-theme 1.0.0

package/dist/antd/plugin.d.ts

@@ -0,0 +1,34 @@
+import { Plugin } from 'vue';
+import { SemiThemeOptions } from '../core/index.js';
+
+/**
+ * Semi Theme for Ant Design Vue
+ *
+ * 支持三种使用方式：
+ *
+ * 1. 全局模式（默认）- 所有组件都应用 Semi 样式
+ *    app.use(createSemiTheme())
+ *
+ * 2. 组件模式 - 只对指定组件应用 Semi 样式
+ *    app.use(createSemiTheme({ components: ['Button', 'Input'] }))
+ *
+ * 3. 排除模式 - 排除指定组件，其他都应用
+ *    app.use(createSemiTheme({ exclude: ['Table'] }))
+ */
+
+declare const SUPPORTED_COMPONENTS: readonly ["Button", "Input", "Select", "Checkbox", "Radio", "Switch", "Slider", "Rate", "DatePicker", "TimePicker", "Upload", "Transfer", "Tree", "TreeSelect", "Form", "Table", "Card", "Tag", "Tabs", "Collapse", "List", "Avatar", "Badge", "Timeline", "Modal", "Drawer", "Message", "Notification", "Tooltip", "Popover", "Popconfirm", "Progress", "Alert", "Steps", "Pagination", "Menu", "Dropdown", "Breadcrumb", "Anchor", "BackTop", "Spin", "Skeleton", "Empty", "Result", "Image", "Carousel", "Calendar", "Descriptions", "Statistic", "Divider", "Space", "Cascader", "Mentions", "AutoComplete", "InputNumber", "Segmented", "FloatButton", "Tour", "Watermark", "Typography", "Layout", "Grid", "Affix"];
+type AntdSupportedComponent = typeof SUPPORTED_COMPONENTS[number];
+interface AntdSemiThemeOptions extends SemiThemeOptions {
+    components?: AntdSupportedComponent[];
+    exclude?: AntdSupportedComponent[];
+}
+/**
+ * 创建 Semi 主题插件 (Ant Design Vue)
+ */
+declare function createSemiTheme(options?: AntdSemiThemeOptions): Plugin;
+/**
+ * 默认导出 - 全局模式插件
+ */
+declare const SemiThemePlugin: Plugin;
+
+export { type AntdSemiThemeOptions, type AntdSupportedComponent, SUPPORTED_COMPONENTS, SemiThemePlugin, createSemiTheme, createSemiTheme as default };

package/dist/antd/plugin.js

@@ -0,0 +1,12 @@
+import {
+  SUPPORTED_COMPONENTS,
+  SemiThemePlugin,
+  createSemiTheme,
+  plugin_default
+} from "../chunk-FMQWBDDZ.js";
+export {
+  SUPPORTED_COMPONENTS,
+  SemiThemePlugin,
+  createSemiTheme,
+  plugin_default as default
+};

package/dist/antd/styles/all.css

@@ -0,0 +1,83 @@
+/**
+ * antd-semi-theme 完整 CSS 样式
+ * 
+ * 包含所有组件的 CSS 覆盖样式
+ * 适用于需要完全 CSS 控制的场景（不使用 Token）
+ * 
+ * 注意：如果已使用 Token，大部分样式会重复
+ * 推荐只使用 'antd-semi-theme/styles' 而非此文件
+ * 
+ * @example
+ * import 'antd-semi-theme/styles/all'  // 完整 CSS
+ */
+
+/* ========== 变量和基础 ========== */
+@import './variables.css';
+@import './base.css';
+
+/* ========== 通用组件 ========== */
+@import './components/button.css';
+
+/* ========== 数据录入 ========== */
+@import './components/input.css';
+@import './components/select.css';
+@import './components/checkbox.css';
+@import './components/radio.css';
+@import './components/switch.css';
+@import './components/slider.css';
+@import './components/rate.css';
+@import './components/datepicker.css';
+@import './components/upload.css';
+@import './components/transfer.css';
+@import './components/form.css';
+
+/* ========== 数据展示 ========== */
+@import './components/table.css';
+@import './components/card.css';
+@import './components/tag.css';
+@import './components/collapse.css';
+@import './components/list.css';
+@import './components/tree.css';
+@import './components/avatar.css';
+@import './components/badge.css';
+@import './components/timeline.css';
+@import './components/descriptions.css';
+@import './components/statistic.css';
+@import './components/empty.css';
+@import './components/image.css';
+@import './components/carousel.css';
+@import './components/calendar.css';
+@import './components/skeleton.css';
+
+/* ========== 导航 ========== */
+@import './components/tabs.css';
+@import './components/breadcrumb.css';
+@import './components/pagination.css';
+@import './components/steps.css';
+@import './components/menu.css';
+@import './components/dropdown.css';
+@import './components/anchor.css';
+@import './components/backtop.css';
+
+/* ========== 反馈 ========== */
+@import './components/modal.css';
+@import './components/drawer.css';
+@import './components/message.css';
+@import './components/notification.css';
+@import './components/tooltip.css';
+@import './components/popover.css';
+@import './components/popconfirm.css';
+@import './components/progress.css';
+@import './components/alert.css';
+@import './components/spin.css';
+@import './components/result.css';
+
+/* ========== 布局 ========== */
+@import './components/divider.css';
+@import './components/space.css';
+
+/* ========== AI 组件 ========== */
+@import './components/ai.css';
+
+/* ========== 特殊效果 ========== */
+@import './overrides.css';

package/dist/antd/styles/base.css

@@ -0,0 +1,202 @@
+/**
+ * Semi Theme for Ant Design Vue - 基础样式
+ * 
+ * 包含：
+ * - CSS 变量定义
+ * - 全局基础样式
+ * 
+ * 使用方式：
+ * import 'semi-theme/antd/styles/base'
+ */
+
+/* ========== Semi Design 颜色变量 ========== */
+:root {
+  /* 品牌色 - Primary */
+  --semi-color-primary: #0064FA;
+  --semi-color-primary-hover: #0050D0;
+  --semi-color-primary-active: #003DA8;
+  --semi-color-primary-disabled: rgba(0, 100, 250, 0.4);
+  --semi-color-primary-light-default: rgba(0, 100, 250, 0.08);
+  --semi-color-primary-light-hover: rgba(0, 100, 250, 0.12);
+  --semi-color-primary-light-active: rgba(0, 100, 250, 0.16);
+
+  /* 次要色 - Secondary */
+  --semi-color-secondary: #0095EE;
+  --semi-color-secondary-hover: #007ACC;
+  --semi-color-secondary-active: #0060AA;
+  --semi-color-secondary-light-default: rgba(0, 149, 238, 0.08);
+  --semi-color-secondary-light-hover: rgba(0, 149, 238, 0.12);
+
+  /* 第三色 - Tertiary */
+  --semi-color-tertiary: rgba(46, 50, 56, 0.55);
+  --semi-color-tertiary-hover: rgba(46, 50, 56, 0.65);
+  --semi-color-tertiary-active: rgba(46, 50, 56, 0.75);
+  --semi-color-tertiary-light-default: rgba(46, 50, 56, 0.05);
+  --semi-color-tertiary-light-hover: rgba(46, 50, 56, 0.09);
+  --semi-color-tertiary-light-active: rgba(46, 50, 56, 0.13);
+
+  /* 成功色 - Success */
+  --semi-color-success: #3BB346;
+  --semi-color-success-hover: #2E9E39;
+  --semi-color-success-active: #22892C;
+  --semi-color-success-light-default: rgba(59, 179, 70, 0.08);
+  --semi-color-success-light-hover: rgba(59, 179, 70, 0.12);
+  --semi-color-success-light-active: rgba(59, 179, 70, 0.16);
+
+  /* 警告色 - Warning */
+  --semi-color-warning: #FC8800;
+  --semi-color-warning-hover: #E07800;
+  --semi-color-warning-active: #C46800;
+  --semi-color-warning-light-default: rgba(252, 136, 0, 0.08);
+  --semi-color-warning-light-hover: rgba(252, 136, 0, 0.12);
+  --semi-color-warning-light-active: rgba(252, 136, 0, 0.16);
+
+  /* 危险色 - Danger */
+  --semi-color-danger: #F93920;
+  --semi-color-danger-hover: #DD2C15;
+  --semi-color-danger-active: #C1200A;
+  --semi-color-danger-light-default: rgba(249, 57, 32, 0.08);
+  --semi-color-danger-light-hover: rgba(249, 57, 32, 0.12);
+  --semi-color-danger-light-active: rgba(249, 57, 32, 0.16);
+
+  /* 信息色 - Info */
+  --semi-color-info: #0064FA;
+  --semi-color-info-light-default: rgba(0, 100, 250, 0.08);
+
+  /* 文字颜色 */
+  --semi-color-text-0: rgba(28, 31, 35, 1);
+  --semi-color-text-1: rgba(28, 31, 35, 0.8);
+  --semi-color-text-2: rgba(28, 31, 35, 0.62);
+  --semi-color-text-3: rgba(28, 31, 35, 0.35);
+
+  /* 填充色 */
+  --semi-color-fill-0: rgba(46, 50, 56, 0.05);
+  --semi-color-fill-1: rgba(46, 50, 56, 0.09);
+  --semi-color-fill-2: rgba(46, 50, 56, 0.13);
+
+  /* 边框色 */
+  --semi-color-border: rgba(28, 31, 35, 0.08);
+  --semi-color-border-hover: rgba(28, 31, 35, 0.12);
+  --semi-color-focus-border: #0064FA;
+
+  /* 禁用状态 */
+  --semi-color-disabled-fill: rgba(46, 50, 56, 0.04);
+  --semi-color-disabled-text: rgba(28, 31, 35, 0.35);
+  --semi-color-disabled-border: transparent;
+  --semi-color-disabled-bg: rgba(46, 50, 56, 0.04);
+
+  /* 背景色 */
+  --semi-color-bg-0: #fff;
+  --semi-color-bg-1: rgba(46, 50, 56, 0.02);
+  --semi-color-bg-2: rgba(46, 50, 56, 0.05);
+  --semi-color-bg-3: rgba(46, 50, 56, 0.08);
+
+  /* 圆角 */
+  --semi-border-radius-extra-small: 3px;
+  --semi-border-radius-small: 3px;
+  --semi-border-radius-medium: 6px;
+  --semi-border-radius-large: 8px;
+  --semi-border-radius-full: 9999px;
+
+  /* 字体大小 */
+  --semi-font-size-extra-small: 12px;
+  --semi-font-size-small: 12px;
+  --semi-font-size-regular: 14px;
+  --semi-font-size-large: 16px;
+  --semi-font-size-extra-large: 20px;
+
+  /* 阴影 */
+  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
+  --semi-shadow-floating: 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* 过渡 */
+  --semi-transition-duration: 0.15s;
+  --semi-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* AI 渐变色 */
+  --semi-color-ai-start: #A647FF;
+  --semi-color-ai-middle: #0064FA;
+  --semi-color-ai-end: #0095EE;
+  --semi-gradient-ai: linear-gradient(135deg, var(--semi-color-ai-start) 0%, var(--semi-color-ai-middle) 50%, var(--semi-color-ai-end) 100%);
+}
+
+/* ========== 深色模式变量 ========== */
+.semi-dark,
+.semi.dark,
+[data-theme="dark"] .semi,
+[theme-mode="dark"] .semi {
+  /* 品牌色 - Primary (深色模式更亮) */
+  --semi-color-primary: #54A9FF;
+  --semi-color-primary-hover: #78BBFF;
+  --semi-color-primary-active: #3D9BFF;
+  --semi-color-primary-light-default: rgba(84, 169, 255, 0.15);
+  --semi-color-primary-light-hover: rgba(84, 169, 255, 0.2);
+  --semi-color-primary-light-active: rgba(84, 169, 255, 0.25);
+
+  /* 次要色 */
+  --semi-color-secondary: #6BC5FF;
+  --semi-color-secondary-light-default: rgba(107, 197, 255, 0.15);
+
+  /* 成功色 */
+  --semi-color-success: #5DC264;
+  --semi-color-success-hover: #70CC76;
+  --semi-color-success-light-default: rgba(93, 194, 100, 0.15);
+
+  /* 警告色 */
+  --semi-color-warning: #FFA633;
+  --semi-color-warning-hover: #FFB54D;
+  --semi-color-warning-light-default: rgba(255, 166, 51, 0.15);
+
+  /* 危险色 */
+  --semi-color-danger: #FC7266;
+  --semi-color-danger-hover: #FD8A80;
+  --semi-color-danger-light-default: rgba(252, 114, 102, 0.15);
+
+  /* 文字颜色 */
+  --semi-color-text-0: rgba(249, 249, 249, 1);
+  --semi-color-text-1: rgba(249, 249, 249, 0.8);
+  --semi-color-text-2: rgba(249, 249, 249, 0.62);
+  --semi-color-text-3: rgba(249, 249, 249, 0.35);
+
+  /* 填充色 */
+  --semi-color-fill-0: rgba(255, 255, 255, 0.08);
+  --semi-color-fill-1: rgba(255, 255, 255, 0.12);
+  --semi-color-fill-2: rgba(255, 255, 255, 0.16);
+
+  /* 边框色 */
+  --semi-color-border: rgba(255, 255, 255, 0.08);
+  --semi-color-border-hover: rgba(255, 255, 255, 0.12);
+  --semi-color-focus-border: #54A9FF;
+
+  /* 禁用状态 */
+  --semi-color-disabled-fill: rgba(255, 255, 255, 0.04);
+  --semi-color-disabled-text: rgba(249, 249, 249, 0.35);
+  --semi-color-disabled-border: transparent;
+  --semi-color-disabled-bg: rgba(255, 255, 255, 0.04);
+
+  /* 背景色 */
+  --semi-color-bg-0: #16161A;
+  --semi-color-bg-1: #232429;
+  --semi-color-bg-2: #2E3035;
+  --semi-color-bg-3: #3A3D42;
+
+  /* 第三色 */
+  --semi-color-tertiary: rgba(255, 255, 255, 0.55);
+  --semi-color-tertiary-hover: rgba(255, 255, 255, 0.65);
+  --semi-color-tertiary-light-default: rgba(255, 255, 255, 0.08);
+  --semi-color-tertiary-light-hover: rgba(255, 255, 255, 0.12);
+
+  /* 阴影 */
+  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.25);
+  --semi-shadow-floating: 0 0 1px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* ========== 全局基础样式重置 ========== */
+.semi {
+  color: var(--semi-color-text-0);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: var(--semi-font-size-regular);
+  line-height: 1.5715;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/antd/styles/components/affix.css

@@ -0,0 +1,7 @@
+/**
+ * Affix 固钉 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-affix]) .ant-affix {
+  z-index: 10;
+}

package/dist/antd/styles/components/ai.css

@@ -0,0 +1,242 @@
+/**
+ * AI 组件样式
+ * Semi Design AI 渐变色规范
+ * 
+ * 使用方式：
+ * 1. data 属性（推荐）：<a-button data-ai>AI 按钮</a-button>
+ * 2. 类名（兼容）：<a-button class="semi-btn-ai">AI 按钮</a-button>
+ */
+
+/* ========== AI 变量 ========== */
+:root {
+  --semi-color-ai-start: #A647FF;
+  --semi-color-ai-middle: #0064FA;
+  --semi-color-ai-end: #0095EE;
+  --semi-color-ai-general: linear-gradient(135deg, var(--semi-color-ai-start) 0%, var(--semi-color-ai-middle) 50%, var(--semi-color-ai-end) 100%);
+  --semi-ai-purple-5: 166, 71, 255;
+  --semi-ai-general-5-2: 0, 100, 250;
+  --semi-ai-general-5-3: 0, 149, 238;
+}
+
+/* ========== AI 按钮 ========== */
+/* data-ai 属性方式（推荐） */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai],
+.ant-btn.semi-btn-ai {
+  background: var(--semi-color-ai-general);
+  border: none;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai]:hover,
+.ant-btn.semi-btn-ai:hover {
+  filter: brightness(1.1);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai]:active,
+.ant-btn.semi-btn-ai:active {
+  filter: brightness(0.95);
+}
+
+/* AI 按钮 Light */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai][data-theme="light"],
+.ant-btn.semi-btn-ai-light {
+  background: rgba(var(--semi-ai-purple-5), 0.1);
+  border: none;
+  color: rgb(var(--semi-ai-purple-5));
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai][data-theme="light"]:hover,
+.ant-btn.semi-btn-ai-light:hover {
+  background: rgba(var(--semi-ai-purple-5), 0.15);
+}
+
+/* AI 按钮 Outline */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai][data-theme="outline"],
+.ant-btn.semi-btn-ai-outline {
+  background: transparent;
+  border: 1px solid rgb(var(--semi-ai-purple-5));
+  color: rgb(var(--semi-ai-purple-5));
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai][data-theme="outline"]:hover,
+.ant-btn.semi-btn-ai-outline:hover {
+  background: rgba(var(--semi-ai-purple-5), 0.08);
+}
+
+/* AI 按钮 Borderless */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai][data-theme="borderless"],
+.ant-btn.semi-btn-ai-borderless {
+  background: transparent;
+  border: none;
+  color: rgb(var(--semi-ai-purple-5));
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-ai][data-theme="borderless"]:hover,
+.ant-btn.semi-btn-ai-borderless:hover {
+  background: rgba(var(--semi-ai-purple-5), 0.08);
+}
+
+/* ========== AI 输入框 ========== */
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input[data-ai],
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper[data-ai],
+.ant-input.semi-input-ai,
+.ant-input-affix-wrapper.semi-input-ai {
+  border: 1px solid transparent;
+  background: 
+    linear-gradient(var(--semi-color-bg-0), var(--semi-color-bg-0)) padding-box,
+    var(--semi-color-ai-general) border-box;
+}
+
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input[data-ai]:focus,
+.semi:where([data-semi="all"], [data-semi-input]) .ant-input-affix-wrapper[data-ai]:focus-within,
+.ant-input.semi-input-ai:focus,
+.ant-input-affix-wrapper.semi-input-ai:focus-within {
+  box-shadow: 0 0 0 2px rgba(var(--semi-ai-purple-5), 0.2);
+  outline: none;
+}
+
+/* ========== AI 标签 ========== */
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[data-ai],
+.ant-tag.semi-tag-ai {
+  background: var(--semi-color-ai-general);
+  color: #fff;
+  border: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-tag]) .ant-tag[data-ai][data-theme="light"],
+.ant-tag.semi-tag-ai-light {
+  background: rgba(var(--semi-ai-purple-5), 0.1);
+  color: rgb(var(--semi-ai-purple-5));
+}
+
+/* ========== AI 文本 ========== */
+.semi-text-ai,
+[data-ai-text] {
+  background: var(--semi-color-ai-general);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ========== AI 进度条 ========== */
+.semi:where([data-semi="all"], [data-semi-progress]) .ant-progress[data-ai] .ant-progress-bg,
+.semi-progress-ai .ant-progress-bg {
+  background: var(--semi-color-ai-general);
+}
+
+.semi:where([data-semi="all"], [data-semi-progress]) .ant-progress[data-ai] .ant-progress-circle-path,
+.semi-progress-ai .ant-progress-circle-path {
+  stroke: url(#ai-gradient);
+}
+
+/* ========== AI 头像 ========== */
+.semi:where([data-semi="all"], [data-semi-avatar]) .ant-avatar[data-ai],
+.semi-avatar-ai {
+  background: var(--semi-color-ai-general);
+  color: #fff;
+}
+
+/* ========== AI 卡片 ========== */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card[data-ai],
+.semi-card-ai {
+  position: relative;
+  border: 1px solid transparent;
+  background: 
+    linear-gradient(var(--semi-color-bg-0), var(--semi-color-bg-0)) padding-box,
+    var(--semi-color-ai-general) border-box;
+}
+
+/* AI 卡片动态边框 */
+.semi-card-ai-animated,
+.ant-card[data-ai-animated] {
+  position: relative;
+  overflow: hidden;
+}
+
+.semi-card-ai-animated::before,
+.ant-card[data-ai-animated]::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  background: var(--semi-color-ai-general);
+  border-radius: inherit;
+  z-index: -1;
+  animation: ai-border-rotate 3s linear infinite;
+}
+
+@keyframes ai-border-rotate {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+/* ========== AI 开关 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch[data-ai].ant-switch-checked,
+.semi-switch-ai.ant-switch-checked {
+  background: var(--semi-color-ai-general);
+}
+
+/* ========== AI 步骤条 ========== */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps[data-ai] .ant-steps-item-process .ant-steps-item-icon,
+.semi-steps-ai .ant-steps-item-process .ant-steps-item-icon {
+  background: var(--semi-color-ai-general);
+  border: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps[data-ai] .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon,
+.semi-steps-ai .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps[data-ai] .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon,
+.semi-steps-ai .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
+  color: rgb(var(--semi-ai-purple-5));
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps[data-ai] .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after,
+.semi-steps-ai .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
+  background: var(--semi-color-ai-general);
+}
+
+/* ========== AI 时间线 ========== */
+.semi:where([data-semi="all"], [data-semi-timeline]) .ant-timeline[data-ai] .ant-timeline-item-head,
+.semi-timeline-ai .ant-timeline-item-head {
+  background: var(--semi-color-ai-general);
+  border: none;
+}
+
+/* ========== AI 光晕效果 ========== */
+.semi-glow-ai,
+[data-ai-glow] {
+  box-shadow: 
+    0 0 20px rgba(var(--semi-ai-purple-5), 0.3),
+    0 0 40px rgba(var(--semi-ai-general-5-2), 0.2),
+    0 0 60px rgba(var(--semi-ai-general-5-3), 0.1);
+}
+
+/* ========== AI 边框动画 ========== */
+.semi-border-ai-animated,
+[data-ai-border-animated] {
+  position: relative;
+}
+
+.semi-border-ai-animated::after,
+[data-ai-border-animated]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--semi-color-ai-general);
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}