npm - advance-semi-theme - Versions diffs - 1.0.0 - Mend

advance-semi-theme 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (169) hide show

package/README.md +214 -0
package/dist/antd/index.d.ts +159 -0
package/dist/antd/index.js +1378 -0
package/dist/antd/plugin.d.ts +34 -0
package/dist/antd/plugin.js +12 -0
package/dist/antd/styles/all.css +83 -0
package/dist/antd/styles/base.css +202 -0
package/dist/antd/styles/components/affix.css +7 -0
package/dist/antd/styles/components/ai.css +242 -0
package/dist/antd/styles/components/alert.css +149 -0
package/dist/antd/styles/components/anchor.css +40 -0
package/dist/antd/styles/components/app.css +9 -0
package/dist/antd/styles/components/autocomplete.css +56 -0
package/dist/antd/styles/components/avatar.css +37 -0
package/dist/antd/styles/components/backtop.css +106 -0
package/dist/antd/styles/components/badge.css +76 -0
package/dist/antd/styles/components/breadcrumb.css +37 -0
package/dist/antd/styles/components/button.css +528 -0
package/dist/antd/styles/components/calendar.css +55 -0
package/dist/antd/styles/components/card.css +113 -0
package/dist/antd/styles/components/carousel.css +57 -0
package/dist/antd/styles/components/cascader.css +99 -0
package/dist/antd/styles/components/checkableTag.css +26 -0
package/dist/antd/styles/components/checkbox.css +119 -0
package/dist/antd/styles/components/collapse.css +74 -0
package/dist/antd/styles/components/colorpicker.css +94 -0
package/dist/antd/styles/components/configprovider.css +6 -0
package/dist/antd/styles/components/datepicker.css +346 -0
package/dist/antd/styles/components/descriptions.css +63 -0
package/dist/antd/styles/components/divider.css +34 -0
package/dist/antd/styles/components/drawer.css +71 -0
package/dist/antd/styles/components/dropdown.css +94 -0
package/dist/antd/styles/components/empty.css +40 -0
package/dist/antd/styles/components/flex.css +19 -0
package/dist/antd/styles/components/floatbutton.css +65 -0
package/dist/antd/styles/components/form.css +90 -0
package/dist/antd/styles/components/grid.css +11 -0
package/dist/antd/styles/components/icon.css +18 -0
package/dist/antd/styles/components/image.css +125 -0
package/dist/antd/styles/components/input.css +459 -0
package/dist/antd/styles/components/inputnumber.css +102 -0
package/dist/antd/styles/components/layout.css +63 -0
package/dist/antd/styles/components/list.css +109 -0
package/dist/antd/styles/components/mentions.css +84 -0
package/dist/antd/styles/components/menu.css +190 -0
package/dist/antd/styles/components/message.css +68 -0
package/dist/antd/styles/components/modal.css +124 -0
package/dist/antd/styles/components/notification.css +89 -0
package/dist/antd/styles/components/pageheader.css +62 -0
package/dist/antd/styles/components/pagination.css +139 -0
package/dist/antd/styles/components/popconfirm.css +64 -0
package/dist/antd/styles/components/popover.css +40 -0
package/dist/antd/styles/components/progress.css +105 -0
package/dist/antd/styles/components/qrcode.css +43 -0
package/dist/antd/styles/components/radio.css +166 -0
package/dist/antd/styles/components/rate.css +47 -0
package/dist/antd/styles/components/result.css +63 -0
package/dist/antd/styles/components/scrollbar.css +22 -0
package/dist/antd/styles/components/segmented.css +75 -0
package/dist/antd/styles/components/select.css +282 -0
package/dist/antd/styles/components/skeleton.css +96 -0
package/dist/antd/styles/components/slider.css +119 -0
package/dist/antd/styles/components/space.css +59 -0
package/dist/antd/styles/components/spin.css +91 -0
package/dist/antd/styles/components/statistic.css +48 -0
package/dist/antd/styles/components/steps.css +176 -0
package/dist/antd/styles/components/switch.css +128 -0
package/dist/antd/styles/components/table.css +197 -0
package/dist/antd/styles/components/tabs.css +212 -0
package/dist/antd/styles/components/tag.css +286 -0
package/dist/antd/styles/components/textArea.css +40 -0
package/dist/antd/styles/components/timeline.css +106 -0
package/dist/antd/styles/components/timepicker.css +105 -0
package/dist/antd/styles/components/tooltip.css +37 -0
package/dist/antd/styles/components/tour.css +114 -0
package/dist/antd/styles/components/transfer.css +232 -0
package/dist/antd/styles/components/tree.css +143 -0
package/dist/antd/styles/components/treeselect.css +46 -0
package/dist/antd/styles/components/typography.css +184 -0
package/dist/antd/styles/components/upload.css +181 -0
package/dist/antd/styles/components/watermark.css +16 -0
package/dist/antd/styles/dark.css +533 -0
package/dist/antd/styles/index.css +115 -0
package/dist/antd/styles/overrides.css +147 -0
package/dist/antd/styles/variables.css +259 -0
package/dist/chunk-FMQWBDDZ.js +207 -0
package/dist/chunk-NGAVTDQ2.js +200 -0
package/dist/chunk-QQOB6AOA.js +213 -0
package/dist/core/index.d.ts +179 -0
package/dist/core/index.js +10 -0
package/dist/core/variables.css +258 -0
package/dist/element/index.d.ts +3 -0
package/dist/element/index.js +17 -0
package/dist/element/plugin.d.ts +34 -0
package/dist/element/plugin.js +12 -0
package/dist/element/styles/base.css +277 -0
package/dist/element/styles/components/affix.css +7 -0
package/dist/element/styles/components/alert.css +44 -0
package/dist/element/styles/components/anchor.css +34 -0
package/dist/element/styles/components/autocomplete.css +61 -0
package/dist/element/styles/components/avatar.css +31 -0
package/dist/element/styles/components/backtop.css +22 -0
package/dist/element/styles/components/badge.css +48 -0
package/dist/element/styles/components/breadcrumb.css +38 -0
package/dist/element/styles/components/button.css +193 -0
package/dist/element/styles/components/calendar.css +58 -0
package/dist/element/styles/components/card.css +29 -0
package/dist/element/styles/components/carousel.css +78 -0
package/dist/element/styles/components/cascader.css +120 -0
package/dist/element/styles/components/check-tag.css +35 -0
package/dist/element/styles/components/checkbox.css +39 -0
package/dist/element/styles/components/collapse.css +58 -0
package/dist/element/styles/components/color-picker.css +82 -0
package/dist/element/styles/components/config-provider.css +6 -0
package/dist/element/styles/components/container.css +26 -0
package/dist/element/styles/components/datepicker.css +165 -0
package/dist/element/styles/components/descriptions-item.css +6 -0
package/dist/element/styles/components/descriptions.css +51 -0
package/dist/element/styles/components/dialog.css +91 -0
package/dist/element/styles/components/divider.css +37 -0
package/dist/element/styles/components/drawer.css +33 -0
package/dist/element/styles/components/dropdown.css +30 -0
package/dist/element/styles/components/empty.css +28 -0
package/dist/element/styles/components/form.css +106 -0
package/dist/element/styles/components/image.css +59 -0
package/dist/element/styles/components/infinite-scroll.css +24 -0
package/dist/element/styles/components/input-number.css +95 -0
package/dist/element/styles/components/input.css +170 -0
package/dist/element/styles/components/link.css +73 -0
package/dist/element/styles/components/loading.css +50 -0
package/dist/element/styles/components/mention.css +49 -0
package/dist/element/styles/components/menu.css +140 -0
package/dist/element/styles/components/message.css +88 -0
package/dist/element/styles/components/notification.css +81 -0
package/dist/element/styles/components/page-header.css +41 -0
package/dist/element/styles/components/pagination.css +135 -0
package/dist/element/styles/components/popconfirm.css +35 -0
package/dist/element/styles/components/popover.css +22 -0
package/dist/element/styles/components/progress.css +28 -0
package/dist/element/styles/components/radio.css +64 -0
package/dist/element/styles/components/rate.css +33 -0
package/dist/element/styles/components/result.css +51 -0
package/dist/element/styles/components/row.css +11 -0
package/dist/element/styles/components/scrollbar.css +33 -0
package/dist/element/styles/components/segmented.css +59 -0
package/dist/element/styles/components/select.css +226 -0
package/dist/element/styles/components/skeleton.css +65 -0
package/dist/element/styles/components/slider.css +93 -0
package/dist/element/styles/components/space.css +19 -0
package/dist/element/styles/components/statistic.css +33 -0
package/dist/element/styles/components/steps.css +122 -0
package/dist/element/styles/components/switch.css +32 -0
package/dist/element/styles/components/table.css +144 -0
package/dist/element/styles/components/tabs.css +125 -0
package/dist/element/styles/components/tag.css +150 -0
package/dist/element/styles/components/text.css +50 -0
package/dist/element/styles/components/time-picker.css +106 -0
package/dist/element/styles/components/timeline.css +58 -0
package/dist/element/styles/components/tooltip.css +22 -0
package/dist/element/styles/components/tour.css +58 -0
package/dist/element/styles/components/transfer.css +181 -0
package/dist/element/styles/components/tree-select.css +28 -0
package/dist/element/styles/components/tree.css +66 -0
package/dist/element/styles/components/upload.css +96 -0
package/dist/element/styles/components/virtualized.css +75 -0
package/dist/element/styles/components/watermark.css +20 -0
package/dist/element/styles/dark.css +82 -0
package/dist/element/styles/index.css +107 -0
package/package.json +78 -0

package/README.md ADDED Viewed

@@ -0,0 +1,214 @@
+# semi-theme
+> 将 Ant Design Vue / Element Plus 组件一键转换为 Semi Design 视觉风格
+[![npm version](https://img.shields.io/npm/v/semi-theme.svg)](https://www.npmjs.com/package/semi-theme)
+[![license](https://img.shields.io/npm/l/semi-theme.svg)](https://github.com/advance-hub/semi-theme/blob/main/LICENSE)
+## 为什么用 semi-theme？
+- **零改造成本**：不改一行业务代码，不替换任何组件，直接用原生 API
+- **即插即用**：3 行代码完成接入，所有组件自动获得 Semi Design 风格
+- **组件级控制**：支持全局 / 按需 / 排除三种模式，灵活控制主题范围
+- **深色模式**：内置暗色主题，一行代码切换
+- **70+ 组件**：覆盖 Button、Input、Select、Table、Form 等全部常用组件
+## 安装
+```bash
+npm install semi-theme
+# or
+pnpm add semi-theme
+# or
+yarn add semi-theme
+```
+## 快速开始
+### 用于 Ant Design Vue
+```ts
+// main.ts
+import { createApp } from 'vue'
+import Antd from 'ant-design-vue'
+import { createSemiTheme } from 'semi-theme/antd'
+import 'ant-design-vue/dist/reset.css'
+import 'semi-theme/antd/styles'
+const app = createApp(App)
+app.use(Antd)
+app.use(createSemiTheme())  // 就这一行，所有组件变成 Semi 风格
+app.mount('#app')
+```
+### 用于 Element Plus
+```ts
+// main.ts
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import { createSemiTheme } from 'semi-theme/element'
+import 'element-plus/dist/index.css'
+import 'semi-theme/element/styles'
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(createSemiTheme())  // 就这一行，所有组件变成 Semi 风格
+app.mount('#app')
+```
+然后正常写代码就行了，**不需要改任何组件用法**：
+```vue
+<template>
+  <!-- 原生 Ant Design Vue / Element Plus 写法，自动变成 Semi 风格 -->
+  <a-button type="primary">Semi 风格按钮</a-button>
+  <a-input placeholder="Semi 风格输入框" />
+  <a-select placeholder="Semi 风格选择器">
+    <a-select-option value="1">选项一</a-select-option>
+  </a-select>
+</template>
+```
+## 进阶用法
+### 只对部分组件应用主题
+```ts
+app.use(createSemiTheme({
+  components: ['Button', 'Input', 'Select', 'Table']
+  // 只有这 4 个组件会变成 Semi 风格，其他保持原样
+}))
+```
+### 排除某些组件
+```ts
+app.use(createSemiTheme({
+  exclude: ['Table', 'Form']
+  // Table 和 Form 保持原样，其他全变成 Semi 风格
+}))
+```
+### 深色模式
+```ts
+// 方式一：初始化时指定
+app.use(createSemiTheme({ dark: true }))
+// 方式二：运行时动态切换
+import { getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()!
+proxy.$semiTheme.setDark(true)   // 切换到深色
+proxy.$semiTheme.setDark(false)  // 切换到浅色
+```
+### 运行时开关组件主题
+```ts
+const { proxy } = getCurrentInstance()!
+proxy.$semiTheme.toggle('Table', false)  // 关闭 Table 的 Semi 主题
+proxy.$semiTheme.toggle('Table', true)   // 重新开启
+```
+## 工作原理
+semi-theme 的核心设计是 **纯 CSS 覆盖 + 自动类名注入**：
+1. `createSemiTheme()` 插件在 `<body>` 上添加 `.semi` 类名和 `data-semi` 属性
+2. 所有样式通过高优先级的 CSS 选择器（如 `.semi .ant-btn`、`body.semi .el-button`）覆盖原有样式
+3. 对于 Portal/Teleport 组件（下拉菜单、对话框等），使用 `body.semi` 选择器确保样式生效
+4. 组件级控制通过 `data-semi-{component}` 属性 + CSS `:where()` 选择器实现
+**你不需要**：
+- 修改任何组件的类名
+- 添加任何自定义属性
+- 包裹任何额外的容器
+## 覆盖的组件列表
+<details>
+<summary>Ant Design Vue（75 个组件）</summary>
+| 类别 | 组件 |
+|------|------|
+| 通用 | Button, Icon, Typography, Divider, Space |
+| 布局 | Grid, Layout, Flex |
+| 数据录入 | Input, InputNumber, Select, Cascader, AutoComplete, Mentions, Checkbox, Radio, Switch, Slider, Rate, DatePicker, TimePicker, ColorPicker, Upload, Transfer, TreeSelect, Form |
+| 数据展示 | Table, Card, Tag, Tabs, Collapse, List, Avatar, Badge, Timeline, Tree, Tooltip, Popover, Popconfirm, Descriptions, Statistic, Empty, Skeleton, Image, Carousel, Calendar, Segmented, QRCode, Tour |
+| 反馈 | Modal, Drawer, Message, Notification, Progress, Alert, Spin, Result |
+| 导航 | Steps, Pagination, Menu, Dropdown, Breadcrumb, Anchor, BackTop, PageHeader, Affix |
+| 其他 | App, ConfigProvider, FloatButton, Watermark |
+</details>
+<details>
+<summary>Element Plus（70 个组件）</summary>
+| 类别 | 组件 |
+|------|------|
+| 通用 | Button, Divider, Space, Link, Text |
+| 数据录入 | Input, InputNumber, Select, Cascader, Autocomplete, Mention, Checkbox, Radio, Switch, Slider, Rate, DatePicker, TimePicker, ColorPicker, Upload, Transfer, TreeSelect, Form |
+| 数据展示 | Table, Card, Tag, CheckTag, Tabs, Collapse, Avatar, Badge, Timeline, Tree, Tooltip, Popover, Descriptions, Statistic, Empty, Skeleton, Image, Carousel, Calendar, Segmented |
+| 反馈 | Dialog, Drawer, Message, Notification, Progress, Alert, Loading, Result, Popconfirm, Tour |
+| 导航 | Steps, Pagination, Menu, Dropdown, Breadcrumb, Backtop, PageHeader |
+| 其他 | Affix, Anchor, Scrollbar, Container, Row, Watermark, InfiniteScroll, VirtualizedList |
+</details>
+## API 参考
+### `createSemiTheme(options?)`
+创建 Vue 插件实例。
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `components` | `string[]` | — | 指定要应用主题的组件列表 |
+| `exclude` | `string[]` | — | 指定不应用主题的组件列表 |
+| `dark` | `boolean` | `false` | 是否启用深色模式 |
+| `target` | `string` | `'body'` | 挂载目标选择器 |
+### 全局方法 `$semiTheme`
+安装插件后，可通过 `$semiTheme` 访问以下方法：
+| 方法 | 说明 |
+|------|------|
+| `setDark(isDark: boolean)` | 切换深色/浅色模式 |
+| `toggle(component: string, enabled: boolean)` | 开关指定组件的主题 |
+## 包导出
+```
+semi-theme/
+├── antd                        # Ant Design Vue 主题插件
+├── antd/styles                 # Ant Design Vue 完整样式
+├── antd/styles/base            # 基础样式（不含组件）
+├── antd/styles/dark            # 深色模式样式
+├── antd/styles/components/*    # 单组件样式（按需引入）
+├── element                     # Element Plus 主题插件
+├── element/styles              # Element Plus 完整样式
+├── element/styles/base         # 基础样式（不含组件）
+├── element/styles/dark         # 深色模式样式
+├── element/styles/components/* # 单组件样式（按需引入）
+├── core                        # 共享核心模块
+└── core/variables.css          # Semi Design CSS 变量
+```
+## 按需引入样式
+如果你不想引入全部组件样式，可以只引入需要的：
+```ts
+// 只引入基础样式 + 需要的组件
+import 'semi-theme/antd/styles/base'
+import 'semi-theme/antd/styles/components/button'
+import 'semi-theme/antd/styles/components/input'
+import 'semi-theme/antd/styles/components/select'
+```
+## License
+MIT

package/dist/antd/index.d.ts ADDED Viewed

@@ -0,0 +1,159 @@
+export { AntdSemiThemeOptions, AntdSupportedComponent, SUPPORTED_COMPONENTS, SemiThemePlugin, createSemiTheme, createSemiTheme as default } from './plugin.js';
+export { semiColors as coreColors, semiColorsRGB } from '../core/index.js';
+import 'vue';
+/**
+ * Semi Design Theme Configuration for Ant Design Vue
+ * Complete theme configuration including tokens and component styles
+ */
+type ThemeConfig$1 = Record<string, any>;
+/**
+ * Semi Design Light Theme
+ */
+declare const semiTheme: ThemeConfig$1;
+/**
+ * Semi Design Dark Theme
+ */
+declare const semiThemeDark: ThemeConfig$1;
+/**
+ * Semi Design Token Definitions
+ * 完整适配 Semi Design 80+ 组件的设计规范
+ *
+ * 关键参数：
+ * - 字重: 600 (bold) / 400 (regular)
+ * - 圆角: 3px (small) / 6px (medium) / 12px (large)
+ * - 填充色: fill-0 (5%) / fill-1 (9%) / fill-2 (13%)
+ */
+type AliasToken = Record<string, any>;
+declare const semiColors: {
+    blue: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    lightBlue: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    green: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    red: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    orange: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    yellow: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    grey: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    aiPurple: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    cyan: {
+        5: string;
+        6: string;
+        7: string;
+    };
+    teal: {
+        5: string;
+        6: string;
+        7: string;
+    };
+    pink: {
+        5: string;
+        6: string;
+        7: string;
+    };
+    indigo: {
+        5: string;
+        6: string;
+        7: string;
+    };
+};
+declare const semiTokens: Partial<AliasToken>;
+declare const semiTokensDark: Partial<AliasToken>;
+/**
+ * Semi Design Component Token Definitions
+ * Complete component-level customization for all Ant Design Vue components
+ */
+type ThemeConfig = Record<string, any>;
+type ComponentsConfig = ThemeConfig['components'];
+declare const componentTokens: ComponentsConfig;
+declare const componentTokensDark: ComponentsConfig;
+export { componentTokens, componentTokensDark, semiColors, semiTheme, semiThemeDark, semiTokens, semiTokensDark };