@yqg/slimfit 0.0.1 → 0.0.2

package/README.md

@@ -10,6 +10,51 @@ SlimFit 是一个现代化的 React 组件库，专为企业级应用设计，
 - 完善的类型定义和开发体验
 - 详细的文档和示例
 
+## 新功能：FormMode 表单模式
+
+新增了表单模式功能，支持在 `edit` 和 `read` 两种模式之间切换：
+
+### 基础用法
+
+```tsx
+import { Form, Input, Select } from '@yqg/slimfit';
+
+// 只读模式
+<Form mode="read">
+  <Form.Item label="用户名" name="username">
+    <Input value="john_doe" />
+  </Form.Item>
+  <Form.Item label="角色" name="role">
+    <Select value="admin" options={roleOptions} />
+  </Form.Item>
+</Form>
+
+// 编辑模式（默认）
+<Form mode="edit">
+  <Form.Item label="用户名" name="username">
+    <Input placeholder="请输入用户名" />
+  </Form.Item>
+</Form>
+```
+
+### 特性
+
+- 🔄 **模式切换**：支持 edit 和 read 两种模式
+- 📝 **智能渲染**：根据组件类型自动选择合适的只读渲染方式
+- 🌍 **国际化支持**：集成 Ant Design 的国际化体系
+- 🎨 **样式一致**：保持与编辑模式的布局一致性
+- 🔧 **可扩展**：支持自定义只读渲染器
+
+### 支持的组件
+
+- **Input**: Input, Input.TextArea, Input.Password, Input.Search
+- **Select**: Select
+- **Date**: DatePicker, DatePicker.RangePicker
+- **Choice**: Radio, Radio.Group
+- **其他**: 可通过 HOC 扩展更多组件
+
+详细文档请查看 [FormMode 文档](./components/form-mode/index.md)
+
 ## 安装
 
 ```bash
@@ -29,13 +74,42 @@ pnpm add @yqg/slimfit
 import React from 'react';
 import { Button } from '@yqg/slimfit';
 
-const App = () => (
-  <Button type="primary">SlimFit Button</Button>
-);
+const App = () => <Button type='primary'>SlimFit Button</Button>;
 
 export default App;
 ```
 
+## 项目目录结构
+
+```
+slimfit/
+├── components/           # 组件源码
+│   ├── button/           # 按钮组件
+│   ├── input/            # 输入框组件
+│   ├── ...               # 其他组件
+│   ├── style/            # 全局样式
+│   │   ├── index.css     # 主样式入口
+│   │   └── theme-vars.css # 自动生成的主题变量
+│   └── themes/           # 主题配置
+│       ├── index.ts      # 主题导出
+│       ├── token.ts      # 全局 Design Token
+│       ├── button.ts     # 按钮组件 Token
+│       └── input.ts      # 输入框组件 Token
+├── constant/             # 全局常量
+│   └── colors.ts         # 颜色常量定义
+├── docs/                 # 文档目录
+│   ├── guide/            # 指南文档
+│   └── rules/            # 规范文档
+├── scripts/              # 构建和开发脚本
+│   ├── generate-css-vars.js # 生成CSS变量脚本
+│   ├── generate-exports.js  # 生成组件导出脚本
+│   └── test-setup.ts     # 测试环境设置
+├── dist/                 # 构建输出目录
+│   └── esm/              # ES 模块格式
+├── .max-docs/            # 文档生成配置
+└── .husky/               # Git 钩子配置
+```
+
 ## 组件目录结构
 
 每个组件遵循以下结构（以 Button 为例）：
@@ -43,13 +117,75 @@ export default App;
 ```
 components/button/
 ├── button.tsx           # 主要组件实现
-├── button.test.tsx      # 组件单元测试（计划中）
+├── button.test.tsx      # 组件单元测试
 ├── index.ts             # 导出文件
 ├── index.md             # 组件文档
+├── style.css            # 组件特定样式（如需）
 └── demo/                # 组件演示
     └── index.tsx        # 基础用法示例
 ```
 
+## 主题系统
+
+SlimFit 使用分层的主题系统，基于 Ant Design 的 Token 系统构建：
+
+```tsx
+// 使用主题
+import { Theme } from '@yqg/slimfit';
+import { ConfigProvider } from 'antd';
+
+const App = () => (
+  <ConfigProvider theme={Theme}>
+    <YourApp />
+  </ConfigProvider>
+);
+```
+
+### 颜色系统
+
+SlimFit 提供了全面的颜色系统，可以通过多种方式使用：
+
+#### 1. 在样式中使用
+
+所有颜色都已注入为 CSS 变量，可以直接在样式中使用：
+
+```css
+.highlight {
+  color: var(--color-fi-600);
+  background-color: var(--color-neutral-50);
+}
+```
+
+这些变量在构建过程中自动从 `constant/colors.ts` 生成，并注入到全局样式中。
+
+#### 2. 与 Tailwind CSS 集成
+
+SlimFit 的颜色系统可以与 Tailwind CSS 无缝集成：
+
+```js
+// tailwind.config.js
+const colors = require('@yqg/slimfit/constant/colors').default;
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: colors,
+    },
+  },
+};
+```
+
+这样就可以在 Tailwind 中直接使用 SlimFit 的颜色系统：
+
+```html
+<div class="text-fi-600 bg-neutral-50">品牌色文本，浅色背景</div>
+
+<div class="text-neutral-950 bg-fi-100">深色文本，品牌浅色背景</div>
+
+<!-- 使用语义化颜色 -->
+<div class="text-semantic-primary bg-semantic-primaryLight">使用语义化颜色</div>
+```
+
 ## 开发指南
 
 ### 技术栈
@@ -66,11 +202,101 @@ components/button/
 ### 开发规范
 
 - 文件命名使用小写字母和连字符（例如：`card-list.tsx`）
-- 使用 Prettier 保持一致的代码风格（2空格缩进）
+- 使用 Prettier 保持一致的代码风格（2 空格缩进）
 - 为 props 和 state 定义完整的 TypeScript 接口
 - 每个组件必须包含文档和演示示例
 - 遵循 Ant Design 组件模式和 API 设计
 
+### 开发脚本
+
+SlimFit 提供了几个开发脚本来自动化常见任务：
+
+#### generate-css-vars.js
+
+自动从 `constant/colors.ts` 中的颜色定义生成 CSS 变量文件 `components/style/theme-vars.css`。
+
+**功能特点：**
+
+- 解析 `colors` 对象，为每个颜色级别生成对应的 CSS 变量（如 `--color-fi-600`）
+- 解析 `semantic` 对象，生成语义化颜色变量（如 `--color-primary`）
+- 自动将驼峰命名转换为连字符命名（如 `primaryLight` → `primary-light`）
+- 在构建过程中自动执行，确保 CSS 变量与颜色定义保持同步
+
+**使用场景：**
+
+- 修改 `constant/colors.ts` 后需要更新 CSS 变量时
+- 添加新颜色或语义化颜色时
+
+#### generate-exports.js
+
+自动扫描 `components` 目录，为包含 `index.ts` 的组件目录生成统一的导出文件。
+
+**功能特点：**
+
+- 自动发现所有组件目录并检查是否包含 `index.ts`
+- 按字母顺序排序组件导出，特殊目录（如 `themes`）放在最后
+- 生成命名导出语句以支持 Tree Shaking
+- 确保组件库的导出结构保持一致
+
+**使用场景：**
+
+- 添加新组件后需要更新主导出文件时
+- 重新组织组件结构后需要同步导出时
+
+**运行脚本：**
+
+```bash
+# 生成 CSS 变量
+node scripts/generate-css-vars.js
+
+# 生成组件导出
+node scripts/generate-exports.js
+```
+
+### 测试策略
+
+SlimFit 的组件测试分为三类：
+
+1. **直接导出的 Ant Design 组件**：
+
+   - 基本快照测试验证渲染
+   - 无需测试 Ant Design 已覆盖的功能
+
+2. **增强型 Ant Design 组件**：
+
+   - 测试新增功能和自定义内容
+   - 验证样式覆盖和自定义属性
+
+3. **自定义组件**：
+   - 全面测试所有功能和边界情况
+   - 测试用户交互和错误状态
+
+### 测试命令
+
+```bash
+# 运行所有测试
+pnpm test
+
+# 监听模式运行测试
+pnpm test:watch
+
+# 生成测试覆盖率报告
+pnpm test:coverage
+
+# 更新所有快照
+pnpm test -- -u
+
+# 更新特定文件的快照
+pnpm test -- -u path/to/component.test.tsx
+```
+
+### 快照测试最佳实践
+
+- 保持快照小而聚焦
+- 只快照必要的组件树
+- 代码审查时检查快照差异
+- 对于有动态数据的组件，使用自定义序列化器或模拟数据
+
 ## 许可证
 
 MIT

package/lib/esm/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,15 @@
+import { type BreadcrumbProps as AntdBreadcrumbProps } from 'antd';
+import React from 'react';
+import './style.less';
+type AntdBreadcrumbItemProps = NonNullable<AntdBreadcrumbProps['items']>[number];
+export interface BreadcrumbItemProps extends AntdBreadcrumbItemProps {
+    current?: boolean;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}
+export interface BreadcrumbProps extends Omit<AntdBreadcrumbProps, 'items'> {
+    items?: BreadcrumbItemProps[];
+    maxItems?: number;
+}
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export default Breadcrumb;

package/lib/esm/breadcrumb/breadcrumb.js

@@ -0,0 +1,98 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["items", "maxItems", "separator", "className", "style"];
+import { Breadcrumb as AntdBreadcrumb } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { IconChevronRight, IconMore } from "../icon";
+import { Popover } from "../popover";
+import "./style.less";
+
+// 从 AntdBreadcrumbProps 的 items 属性中提取类型
+import { jsx as _jsx } from "react/jsx-runtime";
+var Breadcrumb = /*#__PURE__*/React.memo(function (_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$maxItems = _ref.maxItems,
+    maxItems = _ref$maxItems === void 0 ? 4 : _ref$maxItems,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? /*#__PURE__*/_jsx(IconChevronRight, {}) : _ref$separator,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // 处理省略逻辑
+  var processedItems = React.useMemo(function () {
+    // 如果项目数不超过 maxItems，直接返回所有项
+    if (items.length <= maxItems) {
+      return items;
+    }
+    var firstItem = items[0];
+    var middleItems = items.slice(1, -2);
+    var lastItems = items.slice(-2); // 保留最后两项
+
+    var ellipsisAntdItems = middleItems.map(function (item) {
+      var isCurrent = false;
+      return _objectSpread(_objectSpread({}, item), {}, {
+        title: /*#__PURE__*/_jsx("span", {
+          className: classNames('slimfit-breadcrumb-item', {
+            'slimfit-breadcrumb-item-current': isCurrent,
+            'slimfit-breadcrumb-item-disabled': item.disabled
+          }),
+          onClick: item.disabled ? undefined : item.onClick,
+          style: item.style,
+          children: /*#__PURE__*/_jsx("span", {
+            className: "slimfit-breadcrumb-item-title",
+            children: item.title
+          })
+        })
+      });
+    });
+    var ellipsisContent = /*#__PURE__*/_jsx(AntdBreadcrumb, {
+      className: classNames('slimfit-breadcrumb', 'slimfit-breadcrumb-ellipsis-content'),
+      items: ellipsisAntdItems,
+      separator: separator
+    });
+    var ellipsisItem = {
+      // 使用 Popover 包裹 ...
+      title: /*#__PURE__*/_jsx(Popover, {
+        content: ellipsisContent,
+        trigger: ['hover', 'click'],
+        placement: "bottom",
+        arrow: false,
+        children: /*#__PURE__*/_jsx(IconMore, {})
+      }),
+      disabled: false,
+      className: 'slimfit-breadcrumb-ellipsis-item'
+    };
+    return [firstItem, ellipsisItem].concat(_toConsumableArray(lastItems));
+  }, [items, maxItems, separator]);
+
+  // 转换为 Ant Design 格式
+  var antdItems = React.useMemo(function () {
+    return processedItems.map(function (item, index) {
+      var isLast = index === processedItems.length - 1;
+      var isCurrent = item.current || isLast;
+      return _objectSpread(_objectSpread({}, item), {}, {
+        title: /*#__PURE__*/_jsx("span", {
+          className: classNames('slimfit-breadcrumb-item', {
+            'slimfit-breadcrumb-item-current': isCurrent,
+            'slimfit-breadcrumb-item-disabled': item.disabled
+          }),
+          onClick: item.disabled ? undefined : item.onClick,
+          style: item.style,
+          children: /*#__PURE__*/_jsx("span", {
+            className: "slimfit-breadcrumb-item-title",
+            children: item.title
+          })
+        })
+      });
+    });
+  }, [processedItems]);
+  return /*#__PURE__*/_jsx(AntdBreadcrumb, _objectSpread({
+    className: classNames('slimfit-breadcrumb', className),
+    items: antdItems
+  }, props));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+export default Breadcrumb;

package/lib/esm/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './breadcrumb';
+export type { BreadcrumbItemProps, BreadcrumbProps } from './breadcrumb';

package/lib/esm/breadcrumb/index.js

@@ -0,0 +1 @@
+export { default } from "./breadcrumb";

package/lib/esm/breadcrumb/style.less

@@ -0,0 +1,240 @@
+@import '../style/theme-vars.css';
+
+.slimfit-breadcrumb {
+  // 确保容器和所有子元素垂直居中对齐
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  line-height: 1.5;
+
+  // Ant Design 的列表项和分隔符对齐
+  > li {
+    display: flex;
+    align-items: center;
+    line-height: 1.5;
+  }
+
+  // 分隔符对齐
+  .ant-breadcrumb-separator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 4px;
+    color: var(--color-neutral-500);
+    line-height: 1.5;
+    vertical-align: middle;
+
+    // 分隔符内的图标对齐
+    > svg,
+    > [class*='anticon'],
+    > [class*='icon'] {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      line-height: 1;
+    }
+  }
+
+  // 链接容器对齐
+  .ant-breadcrumb-link {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1.5;
+    vertical-align: middle;
+  }
+
+  // 面包屑项样式
+  .slimfit-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 4px;
+    border-radius: 2px;
+    color: var(--color-neutral-500);
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+    line-height: 1.5;
+    vertical-align: middle;
+    height: auto;
+
+    // 文本样式
+    .slimfit-breadcrumb-item-title {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: 1.5;
+      vertical-align: middle;
+      height: auto;
+
+      // title 中可能包含的图标样式（title 原生支持 ReactNode，可直接包含 icon）
+      // 直接子元素中的图标
+      > svg {
+        flex-shrink: 0;
+        color: inherit;
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        line-height: 1;
+      }
+
+      // Ant Design Icon 组件（通常是一个 span 包装 svg）
+      > [class*='anticon'] {
+        flex-shrink: 0;
+        color: inherit;
+        display: inline-flex !important;
+        align-items: center !important;
+        vertical-align: middle;
+        line-height: 1;
+
+        // Icon 内部的 svg
+        svg {
+          display: inline-flex;
+          align-items: center;
+          vertical-align: middle;
+          line-height: 1;
+        }
+      }
+
+      // 自定义图标组件
+      > [class*='icon']:not([class*='anticon']) {
+        flex-shrink: 0;
+        color: inherit;
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        line-height: 1;
+      }
+
+      // 文本节点对齐（确保文本和图标在同一基线上）
+      > *:not(svg):not([class*='anticon']):not([class*='icon']) {
+        display: inline;
+        vertical-align: middle;
+        line-height: 1.5;
+      }
+
+      // 纯文本节点（React Fragment 中的文本）
+      text {
+        vertical-align: middle;
+      }
+    }
+
+    // 悬停状态（排除禁用和当前项）
+    &:hover:not(.slimfit-breadcrumb-item-disabled):not(
+        .slimfit-breadcrumb-item-current
+      ) {
+      color: var(--color-fi-600);
+    }
+
+    // 当前页面状态
+    &.slimfit-breadcrumb-item-current {
+      color: var(--color-neutral-800);
+      font-weight: 500;
+      cursor: default;
+
+      // 当前项不应该有 hover 效果
+      &:hover {
+        color: var(--color-neutral-800);
+      }
+    }
+
+    // 禁用状态
+    &.slimfit-breadcrumb-item-disabled {
+      color: var(--color-neutral-400);
+      cursor: not-allowed;
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .slimfit-breadcrumb-item {
+      gap: 2px;
+      padding: 0 2px;
+    }
+  }
+
+  // 省略项触发器
+  .slimfit-breadcrumb-ellipsis {
+    color: var(--color-neutral-500);
+    &:hover {
+      color: var(--color-fi-600);
+      background-color: var(--color-fill-300);
+    }
+  }
+
+  // Popover 内容样式
+  .slimfit-breadcrumb-ellipsis-content {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 6px 8px;
+    line-height: 1.5;
+
+    // 确保 Popover 内的面包屑容器也使用相同的对齐
+    &.slimfit-breadcrumb {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      line-height: 1.5;
+    }
+
+    // Ant Design 的列表项和分隔符对齐
+    > li {
+      display: flex;
+      align-items: center;
+      line-height: 1.5;
+    }
+
+    // 分隔符对齐
+    .ant-breadcrumb-separator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 4px;
+      color: var(--color-neutral-500);
+      line-height: 1.5;
+      vertical-align: middle;
+
+      // 分隔符内的图标对齐
+      > svg,
+      > [class*='anticon'],
+      > [class*='icon'] {
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        line-height: 1;
+      }
+    }
+
+    // 链接容器对齐
+    .ant-breadcrumb-link {
+      display: inline-flex;
+      align-items: center;
+      line-height: 1.5;
+      vertical-align: middle;
+    }
+
+    // 与面包屑项保持一致的样式和间距
+    .slimfit-breadcrumb-item {
+      padding: 0 4px;
+      display: inline-flex;
+      align-items: center;
+      line-height: 1.5;
+      vertical-align: middle;
+      height: auto;
+    }
+
+    // 链接包裹点击区样式
+    a {
+      display: inline-flex;
+      align-items: center;
+      line-height: 1.5;
+      vertical-align: middle;
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}

package/{dist → lib}/esm/button/button.d.ts

@@ -1,4 +1,5 @@
 import { type ButtonProps as AntdButtonProps } from 'antd';
+import './style.css';
 export interface ButtonProps extends AntdButtonProps {
 }
-export declare const Button: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;