@fox-js/foxui-pad 4.1.5 → 4.1.7

package/dist/theme/index.scss

@@ -0,0 +1,162 @@
+@use 'sass:map';
+@use './common/color' as *;
+@use './common/typography' as *;
+@use './common/border' as *;
+@use './common/fill' as *;
+@use './common/shadow' as *;
+@use './common/base' as *;
+@use './mixins/css-var' as *;
+@use './components/actionsheet' as *;
+@use './components/buttons-item' as *;
+@use './components/calendar' as *;
+@use './components/cascader' as *;
+@use './components/content' as *;
+@use './components/dialog' as *;
+@use './components/floating-button' as *;
+@use './components/floating-window' as *;
+@use './components/footer-bar' as *;
+@use './components/group' as *;
+@use './components/header-bar' as *;
+@use './components/hint-text' as *;
+@use './components/infiniteloading' as *;
+@use './components/input' as *;
+@use './components/input-item' as *;
+@use './components/input-number-item' as *;
+@use './components/link-item' as *;
+@use './components/messagebox' as *;
+@use './components/numberkeyboard' as *;
+@use './components/picker' as *;
+@use './components/popover-dialog' as *;
+@use './components/popup' as *;
+@use './components/popup-wrapper' as *;
+@use './components/price' as *;
+@use './components/radio' as *;
+@use './components/row-item' as *;
+@use './components/searchbar' as *;
+@use './components/shortpassword' as *;
+@use './components/slot-item' as *;
+@use './components/steps-bar' as *;
+@use './components/switch-item' as *;
+@use './components/tabs-bar' as *;
+@use './components/tabs-frame' as *;
+@use './components/text' as *;
+@use './components/toast' as *;
+
+// foxui-desktop 主题入口
+// 生成 :root 下的 fox CSS 自定义属性, 基础 token 委托 element-plus 变量,
+// element-plus 主题(含暗黑模式)变化时 fox 主题自动跟随
+:root {
+  // ---- 颜色 ----
+  @include gen-color-css-vars($colors);
+  // 补充简写形式的基础色变量
+  --fox-color-primary: #{$color-primary};
+  --fox-color-success: #{$color-success};
+  --fox-color-warning: #{$color-warning};
+  --fox-color-danger: #{$color-danger};
+  --fox-color-info: #{$color-info};
+
+  // ---- 文字颜色 ----
+  @each $type, $value in $text-color {
+    --fox-text-color-#{$type}: #{$value};
+  }
+  --fox-title-color: #{$title-color};
+  --fox-title-color-secondary: #{$title-color-secondary};
+  --fox-text-color-regular: #{$text-color-regular};
+  --fox-text-color-secondary: #{$text-color-secondary};
+  --fox-disabled-color: #{$disabled-color};
+  --fox-readonly-color: #{$readonly-color};
+  --fox-required-color: #{$required-color};
+
+  // ---- 边框颜色 ----
+  @each $type, $value in $border-color {
+    --fox-border-color-#{$type}: #{$value};
+  }
+
+  // ---- 填充色 ----
+  @each $type, $value in $fill-color {
+    --fox-fill-color-#{$type}: #{$value};
+  }
+
+  // ---- 背景色 ----
+  @each $type, $value in $bg-color {
+    --fox-bg-color-#{$type}: #{$value};
+  }
+  --fox-background-color: #{$background-color};
+
+  // ---- 黑白 ----
+  --fox-white: #{$white};
+  --fox-black: #{$black};
+
+  // ---- 字体 ----
+  --fox-font-size-extra-small: #{$font-size-extra-small};
+  --fox-font-size-small: #{$font-size-small};
+  --fox-font-size-base: #{$font-size-base};
+  --fox-font-size-medium: #{$font-size-medium};
+  --fox-font-size-large: #{$font-size-large};
+  --fox-font-size-extra-large: #{$font-size-extra-large};
+  --fox-font-weight-bold: #{$font-weight-bold};
+  --fox-line-height-base: #{$line-height-base};
+  --fox-font-family: #{$font-family};
+
+  // ---- 动画 ----
+  --fox-animation-duration: #{$animation-duration};
+  --fox-animation-timing-fun: #{$animation-timing-fun};
+
+  // ---- 阴影 ----
+  --fox-box-shadow: #{$box-shadow};
+  --fox-box-shadow-light: #{$box-shadow-light};
+  --fox-box-shadow-lighter: #{$box-shadow-lighter};
+  --fox-box-shadow-dark: #{$box-shadow-dark};
+
+  // ---- 遮罩 ----
+  --fox-overlay-bg-color: #{$overlay-bg-color};
+  --fox-overlay-text-bg-color: #{$overlay-text-bg-color};
+
+  // ---- 暗黑风格(fox 独有) ----
+  --fox-dark-background: #{$dark-background};
+  --fox-dark-background-2: #{$dark-background-2};
+  --fox-dark-background-3: #{$dark-background-3};
+  --fox-dark-background-4: #{$dark-background-4};
+  --fox-dark-background-5: #{$dark-background-5};
+  --fox-dark-color: #{$dark-color};
+  --fox-dark-color-2: #{$dark-color-2};
+  --fox-dark-color-gray: #{$dark-color-gray};
+  --fox-dark-calendar-choose-color: #{$dark-calendar-choose-color};
+
+  // ---- 组件 Design Token ----
+  @include gen-component-css-vars('actionsheet', $actionsheet);
+  @include gen-component-css-vars('buttons-item', $buttons-item);
+  @include gen-component-css-vars('calendar', $calendar);
+  @include gen-component-css-vars('cascader', $cascader);
+  @include gen-component-css-vars('content', $content);
+  @include gen-component-css-vars('dialog', $dialog);
+  @include gen-component-css-vars('floating-button', $floating-button);
+  @include gen-component-css-vars('floating-window', $floating-window);
+  @include gen-component-css-vars('footer-bar', $footer-bar);
+  @include gen-component-css-vars('group', $group);
+  @include gen-component-css-vars('header-bar', $header-bar);
+  @include gen-component-css-vars('hint-text', $hint-text);
+  @include gen-component-css-vars('infiniteloading', $infiniteloading);
+  @include gen-component-css-vars('input', $input);
+  @include gen-component-css-vars('input-item', $input-item);
+  @include gen-component-css-vars('input-number-item', $input-number-item);
+  @include gen-component-css-vars('link-item', $link-item);
+  @include gen-component-css-vars('messagebox', $messagebox);
+  @include gen-component-css-vars('numberkeyboard', $numberkeyboard);
+  @include gen-component-css-vars('picker', $picker);
+  @include gen-component-css-vars('popover-dialog', $popover-dialog);
+  @include gen-component-css-vars('popup', $popup);
+  @include gen-component-css-vars('popup-wrapper', $popup-wrapper);
+  @include gen-component-css-vars('price', $price);
+  @include gen-component-css-vars('radio', $radio);
+  @include gen-component-css-vars('row-item', $row-item);
+  @include gen-component-css-vars('searchbar', $searchbar);
+  @include gen-component-css-vars('shortpassword', $shortpassword);
+  @include gen-component-css-vars('slot-item', $slot-item);
+  @include gen-component-css-vars('steps-bar', $steps-bar);
+  @include gen-component-css-vars('switch-item', $switch-item);
+  @include gen-component-css-vars('tabs-bar', $tabs-bar);
+  @include gen-component-css-vars('tabs-frame', $tabs-frame);
+  @include gen-component-css-vars('text', $text);
+  @include gen-component-css-vars('toast', $toast);
+}

package/dist/theme/mixins/_css-var.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+// 生成颜色系统 CSS 变量
+// ('primary': ('base': xxx, 'light-1': xxx)) => --fox-color-primary-base / --fox-color-primary-light-1
+// ('white': xxx) => --fox-color-white
+@mixin gen-color-css-vars($colors-map, $prefix: 'fox') {
+  @each $type, $variants in $colors-map {
+    @if meta.type-of($variants) == 'map' {
+      @each $level, $value in $variants {
+        --#{$prefix}-color-#{$type}-#{$level}: #{$value};
+      }
+    } @else {
+      --#{$prefix}-color-#{$type}: #{$variants};
+    }
+  }
+}
+
+// 生成基础模块 CSS 变量
+// ('key': ('sub': xxx)) => --fox-key-sub
+// ('key': xxx) => --fox-key
+@mixin gen-css-vars($map, $prefix: 'fox') {
+  @each $key, $value in $map {
+    @if meta.type-of($value) == 'map' {
+      @each $sub-key, $sub-value in $value {
+        --#{$prefix}-#{$key}-#{$sub-key}: #{$sub-value};
+      }
+    } @else {
+      --#{$prefix}-#{$key}: #{$value};
+    }
+  }
+}
+
+// 生成组件 CSS 变量
+// ('key': ('sub': xxx)) => --fox-{component}-key-sub
+// ('key': xxx) => --fox-{component}-key
+@mixin gen-component-css-vars($component-name, $map, $prefix: 'fox') {
+  @each $key, $value in $map {
+    @if meta.type-of($value) == 'map' {
+      @each $sub-key, $sub-value in $value {
+        --#{$prefix}-#{$component-name}-#{$key}-#{$sub-key}: #{$sub-value};
+      }
+    } @else {
+      --#{$prefix}-#{$component-name}-#{$key}: #{$value};
+    }
+  }
+}

package/dist/theme/mixins/index.scss

@@ -0,0 +1 @@
+@forward 'css-var';

package/dist/theme/readme.md

@@ -0,0 +1,244 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-09-06
+-->
+
+# FoxUI Desktop 主题 Design 系统
+
+FoxUI Desktop 主题 Design 系统用于替代 `ui/foxui-desktop/src/styles/variables.scss`，采用 Design Token 架构，将变量从扁平的 Sass 变量重构为结构化的 Map 体系，并自动生成 CSS 自定义属性（CSS Custom Properties），实现运行时主题切换能力。
+
+与移动端 `foxui` 主题系统的核心差异：**基础 Token 全部委托 Element Plus 变量**（`var(--el-*)`），Element Plus 主题（含暗黑模式）变化时 Fox 主题自动跟随，避免两套变量体系不一致。
+
+## 目录结构
+
+```
+theme/
+├── index.scss              # 主入口，生成 :root 下的 CSS 自定义属性
+├── readme.md
+├── common/                 # 基础 Design Token
+│   ├── var.scss            # 基础变量统一导出
+│   ├── color.scss          # 颜色系统（委托 element-plus 颜色变量）
+│   ├── typography.scss     # 排版系统（文字颜色、字号、字重）
+│   ├── border.scss         # 边框系统
+│   ├── fill.scss           # 填充色系统
+│   ├── shadow.scss         # 阴影系统
+│   └── base.scss           # 其他基础变量（动画、遮罩、暗黑、字体等）
+├── components/             # 组件 Design Token
+│   ├── index.scss          # 组件变量统一导出
+│   ├── actionsheet.scss    # 动作面板组件变量
+│   ├── buttons-item.scss  # 按钮容器组件变量
+│   ├── calendar.scss       # 日历组件变量
+│   ├── cascader.scss       # 级联选择组件变量
+│   ├── content.scss        # 内容容器组件变量
+│   ├── dialog.scss         # 对话框组件变量
+│   ├── floating-button.scss # 悬浮按钮组件变量
+│   ├── floating-window.scss # 悬浮窗组件变量
+│   ├── footer-bar.scss     # 底部栏组件变量
+│   ├── group.scss          # 分组容器组件变量
+│   ├── header-bar.scss     # 头部栏组件变量
+│   ├── hint-text.scss      # 提示文本组件变量
+│   ├── infiniteloading.scss # 无限加载组件变量
+│   ├── input.scss          # 输入框组件变量
+│   ├── input-item.scss     # 表单输入组件变量
+│   ├── input-number-item.scss # 数字输入组件变量
+│   ├── link-item.scss      # 链接组件变量
+│   ├── messagebox.scss     # 消息框组件变量
+│   ├── numberkeyboard.scss # 数字键盘组件变量
+│   ├── picker.scss         # 选择器组件变量
+│   ├── popover-dialog.scss # 气泡弹层组件变量
+│   ├── popup.scss          # 弹出层组件变量
+│   ├── popup-wrapper.scss  # 弹出层容器组件变量
+│   ├── price.scss          # 价格组件变量
+│   ├── radio.scss          # 单选组件变量
+│   ├── row-item.scss       # 行容器组件变量
+│   ├── searchbar.scss      # 搜索栏组件变量
+│   ├── shortpassword.scss  # 密码输入组件变量
+│   ├── slot-item.scss      # 插槽容器组件变量
+│   ├── steps-bar.scss      # 步骤条栏组件变量
+│   ├── switch-item.scss    # 开关组件变量
+│   ├── tabs-bar.scss       # 标签栏组件变量
+│   ├── tabs-frame.scss     # 标签框架组件变量
+│   ├── text.scss           # 文本组件变量
+│   └── toast.scss          # 轻提示组件变量
+├── dark/                   # 暗黑模式
+│   ├── var.scss            # 暗黑模式变量定义
+│   └── css-vars.scss       # 暗黑模式 CSS 自定义属性生成（html.dark）
+└── mixins/                 # 混入工具
+    ├── index.scss          # 混入统一导出
+    └── _css-var.scss       # CSS 变量生成混入
+```
+
+## 核心设计
+
+### 1. Map 结构替代扁平变量
+
+**旧方式（variables.scss）：**
+```scss
+$messagebox-width: 80% !default;
+$messagebox-height: auto !default;
+$messagebox-font-size: $font-size-base !default;
+// ... 每个属性一个变量，数百个扁平变量
+```
+
+**新方式（theme 系统）：**
+```scss
+$messagebox: () !default;
+$messagebox: map.deep-merge(
+  (
+    'z-index': 3000,
+    'width': 80%,
+    'height': auto,
+    'font-size': $font-size-base,
+    'header': (
+      'title-font-size': $font-size-medium,
+      'title-color': $title-color
+    )
+  ),
+  $messagebox
+);
+```
+
+### 2. 自动生成 CSS 自定义属性
+
+通过 `gen-component-css-vars` 混入，将 Map 结构自动展开为 CSS 自定义属性：
+
+```scss
+@include gen-component-css-vars('messagebox', $messagebox);
+// 生成：
+// --fox-messagebox-z-index: 3000;
+// --fox-messagebox-width: 80%;
+// --fox-messagebox-height: auto;
+// --fox-messagebox-font-size: var(--el-font-size-base);
+// --fox-messagebox-header-title-font-size: var(--el-font-size-medium);
+// --fox-messagebox-header-title-color: var(--el-text-color-primary);
+```
+
+### 3. CSS 变量生成规则
+
+| Map 结构 | 生成的 CSS 变量 |
+|---|---|
+| `'key': value` | `--fox-{component}-key: value` |
+| `'key': ('sub': value)` | `--fox-{component}-key-sub: value` |
+
+**注意**：Map key 不应包含组件名前缀。例如 `tabs-bar` 组件的 key 应为 `'icon-size'` 而非 `'bar-icon-size'`，否则会生成重复的 `--fox-tabs-bar-bar-icon-size`。
+
+### 4. 委托 Element Plus 变量
+
+基础 Token（颜色、文字、边框、填充、阴影、字体）全部委托 Element Plus：
+
+```scss
+// common/color.scss
+$colors: (
+  'primary': (
+    'base': var(--el-color-primary),
+    'light-1': var(--el-color-primary-light-1),
+    // ...
+    'dark-2': var(--el-color-primary-dark-2)
+  )
+);
+
+// common/typography.scss
+$text-color: (
+  'primary': var(--el-text-color-primary),
+  'regular': var(--el-text-color-regular),
+  // ...
+  'readonly': #808080,  // fox 独有，无 element-plus 对应
+  'required': var(--el-color-error)
+);
+```
+
+生成结果：
+
+```css
+:root {
+  --fox-color-primary: var(--el-color-primary);
+  --fox-text-color-primary: var(--el-text-color-primary);
+  --fox-readonly-color: #808080;
+}
+```
+
+Element Plus 切换主题（含暗黑模式）时，Fox 主题自动跟随，无需额外处理。
+
+## 使用方式
+
+### 基本使用
+
+```scss
+// 在项目入口引入（以 @fox-js/foxui-pc 为例，pad 同理）
+@use '@fox-js/foxui-pc/dist/theme/index.scss' as *;
+```
+
+### 暗黑模式
+
+基础 Token 已委托 Element Plus，`html.dark` 下自动跟随。如需覆盖 fox 独有变量：
+
+```scss
+@use '@fox-js/foxui-pc/dist/theme/dark/css-vars.scss' as *;
+```
+
+暗黑模式会在 `html.dark` 选择器下覆盖 CSS 自定义属性：
+
+- fox 独有变量（如 `--fox-readonly-color`）
+- 亮色下写死为白色/浅色的组件背景变量（切换为 `var(--el-bg-color-overlay)`）
+
+### 自定义主题
+
+由于基础 Token 委托 Element Plus，推荐直接覆盖 Element Plus 变量：
+
+```scss
+:root {
+  --el-color-primary: #1890ff;
+}
+// fox 主题自动跟随
+```
+
+也可通过 `@forward ... with` 覆盖 fox 的 Design Token（适用于 fox 独有变量）：
+
+```scss
+@forward '@fox-js/foxui-pc/dist/theme/dark/var.scss' with (
+  $dark-readonly-color: #b1b3b8
+);
+
+@use '@fox-js/foxui-pc/dist/theme/dark/css-vars.scss' as *;
+```
+
+### 在组件中使用变量
+
+```scss
+// 通过 CSS 变量引用（推荐，支持运行时切换）
+.messagebox {
+  width: var(--fox-messagebox-width);
+  font-size: var(--fox-messagebox-font-size);
+}
+
+// 通过 Sass 变量引用（编译时确定）
+@use '@fox-js/foxui-pc/dist/theme/common/var' as *;
+
+.messagebox {
+  font-size: map.get($messagebox, 'font-size');
+}
+```
+
+## 与 variables.scss 的对比
+
+| 特性 | variables.scss | theme 系统 |
+|---|---|---|
+| 变量结构 | 扁平变量（900+） | 结构化 Map |
+| CSS 变量生成 | 手动 var() 声明 | 自动生成 |
+| 运行时切换 | 部分（逐个声明） | 支持（全量生成） |
+| 主题定制 | 逐个覆盖变量 | 委托 element-plus + Map 合并覆盖 |
+| 暗黑模式 | 需手动定义 | 内置支持，自动跟随 element-plus |
+| 组件变量数 | 35 个组件 | 35 个组件 |
+
+## 迁移指南
+
+从 `variables.scss` 迁移到 theme 系统：
+
+1. **替换入口引用**：将 `@use '@/styles/variables.scss'` 替换为 `@use '@/theme/common/var'`
+2. **组件变量访问**：将 `$messagebox-width` 替换为 `map.get($messagebox, 'width')`
+3. **CSS 变量使用**：推荐直接使用 `var(--fox-messagebox-width)`，无需修改
+4. **主题定制**：覆盖 `--el-*` 变量（element-plus 部分）或使用 `@forward ... with`（fox 独有部分）
+
+## 打包说明
+
+`scripts/fox-generate/pack-foxui.cjs` 会将 `src/theme` 完整拷贝到 release 的 `dist/theme` 目录，发布后通过 `@fox-js/foxui-pc/dist/theme/index.scss`（或 `@fox-js/foxui-pad/dist/theme/index.scss`）引用。

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fox-js/foxui-pad",
   "type": "module",
-  "version": "4.1.5",
+  "version": "4.1.7",
   "description": "FoxUI PAD端组件库",
   "author": "jiangcheng",
   "main": "./dist/index.umd.js",