Chore/dms kit docs

.prettierignore

@@ -1,4 +1,2 @@
 *.snap
-*.md
-**/demo/**
-**/demos/**
+*.md

packages/dms-kit/.dumirc.ts

@@ -34,6 +34,11 @@ export default defineConfig({
     `html, body {
       background: transparent;
     }`,
+    // 在base中引入了less文件，其他包括antd reset.css包含box-sizing: border-box，这里需要再重置一下
+    // 不然组件在demo中会有一些样式问题
+    `*, *::before, *::after {
+       box-sizing: border-box;
+     }`,
     `.dumi-default-toc {
       display: none !important;
     }

packages/dms-kit/docs/components.md

@@ -12,61 +12,39 @@ dms-kit 是一个基于 Ant Design 封装的业务组件库，提供统一的样
 
 ```bash
 npm install @actiontech/dms-kit
+# 或
+yarn add @actiontech/dms-kit
+# 或
+pnpm add @actiontech/dms-kit
 ```
 
-### 基础用法
+## 组件特点
 
-```tsx
-import React from 'react';
-import { ConfigProvider, BasicButton, BasicInput, BasicSelect } from '@actiontech/dms-kit';
+1. **统一样式**: 基于 Ant Design 封装，保持设计一致性
+2. **TypeScript**: 完整的类型定义，提供良好的开发体验
+3. **主题系统**: 支持亮色/暗色主题切换和自定义
+4. **国际化**: 内置中英文语言包，支持扩展
+5. **业务封装**: 针对常见业务场景提供开箱即用的解决方案
 
-const App = () => (
-  <ConfigProvider>
-    <BasicButton type="primary">按钮</BasicButton>
-    <BasicInput placeholder="请输入内容" />
-    <BasicSelect
-      placeholder="请选择"
-      options={[
-        { label: '选项1', value: '1' },
-        { label: '选项2', value: '2' }
-      ]}
-    />
-  </ConfigProvider>
-);
+## 使用注意事项
 
-export default App;
-```
-
-## 定制主题
+1. **必须使用 ConfigProvider**：所有组件都需要包裹在 ConfigProvider 中才能正常工作
+2. **版本兼容**：确保 React 版本 >= 17，Ant Design 版本与组件库匹配
+3. **按需引入**：建议使用按需引入方式，减少打包体积
+4. **类型支持**：使用 TypeScript 开发时，组件会提供完整的类型提示
+5. **样式覆盖**：如需自定义样式，建议通过主题系统或 CSS Modules 实现
 
-所有组件都支持主题系统，可通过 `ConfigProvider` 的 `theme` 和 `themeData` 属性进行配置。例如切换深色主题：
+## 最佳实践
 
-```
-import React from 'react';
-import { ConfigProvider, SupportTheme } from '@actiontech/dms-kit';
+1. **统一封装**：在项目入口统一配置 ConfigProvider，包括主题、语言等
+2. **类型安全**：充分利用 TypeScript 类型定义，避免运行时错误
+3. **样式隔离**：避免直接修改组件样式，优先使用主题系统
+4. **组件复用**：对于重复使用的业务场景，基于基础组件二次封装
+5. **性能优化**：合理使用懒加载组件，避免不必要的渲染
 
-const App = () => (
-  <ConfigProvider theme={SupportTheme.DARK}>
-    {/* 你的应用 */}
-  </ConfigProvider>
-);
-
-export default App;
-```
-
-## 国际化
-
-组件库内置中英文语言包，可通过 `ConfigProvider` 的 `language` 和 `resources` 属性进行切换和扩展。例如切换英文：
-
-```
-import React from 'react';
-import { ConfigProvider, SupportLanguage } from '@actiontech/dms-kit';
+## 相关资源
 
-const App = () => (
-  <ConfigProvider language={SupportLanguage.enUS}>
-    {/* 你的应用 */}
-  </ConfigProvider>
-);
+- [Ant Design 官方文档](https://ant.design/components/overview-cn)
+- [React 官方文档](https://react.dev/)
+- [TypeScript 官方文档](https://www.typescriptlang.org/)
 
-export default App;
-```

packages/dms-kit/src/components/ActionButton/README.md

@@ -1,14 +1,80 @@
 ---
-title: 对一些常见的带有其他功能按钮的封装
-category: business
+group:
+  title: 业务组件
+  order: 3
 ---
 
-## Example
+# ActionButton 操作按钮
 
-```
-TODO
+基于 BasicButton 封装，提供确认框、提示框等常见功能的按钮组件。
 
-暂时先与 shared 中的 ActionButton 共存，此版本为移除了 link 相关功能的版本。主要为了解除与 react router 的耦合。
+## 何时使用
 
-base、sqle 中仍然先使用 shared 中的版本，后续进行迁移并调整 link 功能的实现。
-```
+- 需要在按钮点击时显示确认框
+- 需要为禁用的按钮显示提示信息
+- 需要批量渲染多个操作按钮
+
+## 代码演示
+
+### 基础用法
+
+<code src="./demo/basic.tsx"></code>
+
+### 按钮组
+
+<code src="./demo/group.tsx"></code>
+
+## API
+
+### ActionButton
+
+ActionButton 基于 BasicButton 封装，继承所有 BasicButton 属性。
+
+#### 通用属性
+
+| 参数 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| text | 按钮文本 | `ReactNode` | - | - |
+| actionType | 按钮类型 | `'confirm' \| 'tooltip'` | - | - |
+
+#### actionType='confirm' 时
+
+| 参数 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| confirm | 确认框配置 | `PopconfirmProps` | - | ✅ |
+
+#### actionType='tooltip' 时
+
+| 参数 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| tooltip | 提示框配置 | `BasicTooltipProps` | - | ✅ |
+
+### ActionButtonGroup
+
+| 参数 | 说明 | 类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| actions | 按钮配置数组 | `Array<ActionButtonProps & { key: Key }>` | - | ✅ |
+
+继承 Ant Design Space 的所有其他属性（如 `size`、`direction` 等）。
+
+## 组件特点
+
+1. **统一样式规范** → 自动应用项目主题系统的样式
+2. **确认框支持** → actionType='confirm' 时显示确认弹窗
+3. **提示框支持** → actionType='tooltip' 时显示提示信息
+4. **批量渲染** → ActionButtonGroup 支持批量渲染多个按钮
+5. **完全兼容** → 继承 BasicButton 和 Space 所有功能
+
+## 注意事项
+
+1. 组件需要包裹在 `ConfigProvider` 中确保主题正常工作
+2. `actionType='confirm'` 时，`confirm` 属性为必填
+3. `actionType='tooltip'` 时，`tooltip` 属性为必填
+4. ActionButtonGroup 中的每个按钮必须提供唯一的 `key`
+
+## 最佳实践
+
+1. **删除操作**：使用 `actionType='confirm'` 和 `danger` 属性
+2. **禁用按钮**：配合 `actionType='tooltip'` 说明禁用原因
+3. **按钮组**：使用 ActionButtonGroup 统一管理表格或列表的操作按钮
+4. **确认文案**：为重要操作提供清晰的确认文案

packages/dms-kit/src/components/ActionButton/demo/basic.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { ActionButton, ConfigProvider } from '@actiontech/dms-kit';
+import { Space, Typography } from 'antd';
+import { CloseCircleOutlined, SearchOutlined } from '@actiontech/icons';
+
+const { Text } = Typography;
+
+const ActionButtonBasicDemo = () => {
+  const handleEdit = () => {
+    console.log('编辑操作');
+  };
+
+  const handleDelete = () => {
+    console.log('删除操作');
+  };
+
+  return (
+    <ConfigProvider>
+      <Space direction="vertical" size="large" style={{ width: '100%' }}>
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            普通按钮：
+          </Text>
+          <Space>
+            <ActionButton type="primary" text="主要按钮" onClick={handleEdit} />
+            <ActionButton text="次要按钮" onClick={handleEdit} />
+            <ActionButton type="link" text="链接按钮" onClick={handleEdit} />
+          </Space>
+        </div>
+
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            确认按钮（actionType='confirm'）：
+          </Text>
+          <Space>
+            <ActionButton
+              actionType="confirm"
+              danger
+              text="删除"
+              icon={<CloseCircleOutlined />}
+              confirm={{
+                title: '确定要删除这条记录吗？',
+                onConfirm: handleDelete
+              }}
+            />
+            <ActionButton
+              actionType="confirm"
+              text="重置"
+              confirm={{
+                title: '确定要重置所有配置吗？此操作不可恢复',
+                onConfirm: () => console.log('重置操作')
+              }}
+            />
+          </Space>
+        </div>
+
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            提示按钮（actionType='tooltip'）：
+          </Text>
+          <Space>
+            <ActionButton
+              actionType="tooltip"
+              text="搜索"
+              icon={<SearchOutlined />}
+              disabled
+              tooltip={{
+                title: '没有搜索权限'
+              }}
+            />
+            <ActionButton
+              actionType="tooltip"
+              text="导出"
+              disabled
+              tooltip={{
+                title: '数据加载中，请稍后再试'
+              }}
+            />
+          </Space>
+        </div>
+      </Space>
+    </ConfigProvider>
+  );
+};
+
+export default ActionButtonBasicDemo;

packages/dms-kit/src/components/ActionButton/demo/group.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { ActionButtonGroup, ConfigProvider } from '@actiontech/dms-kit';
+import { Space, Typography } from 'antd';
+import {
+  SearchOutlined,
+  CloseCircleOutlined,
+  CheckCircleOutlined
+} from '@actiontech/icons';
+
+const { Text } = Typography;
+
+const ActionButtonGroupDemo = () => {
+  const handleEdit = () => {
+    console.log('编辑');
+  };
+
+  const handleDelete = () => {
+    console.log('删除');
+  };
+
+  const handleCopy = () => {
+    console.log('复制');
+  };
+
+  const actions = [
+    {
+      key: 'edit',
+      text: '查看',
+      icon: <SearchOutlined />,
+      onClick: handleEdit
+    },
+    {
+      key: 'copy',
+      text: '通过',
+      icon: <CheckCircleOutlined />,
+      onClick: handleCopy
+    },
+    {
+      key: 'delete',
+      actionType: 'confirm' as const,
+      text: '拒绝',
+      icon: <CloseCircleOutlined />,
+      danger: true,
+      confirm: {
+        title: '确定要拒绝这条记录吗？',
+        onConfirm: handleDelete
+      }
+    }
+  ];
+
+  const disabledActions = [
+    {
+      key: 'edit',
+      actionType: 'tooltip' as const,
+      text: '查看',
+      icon: <SearchOutlined />,
+      disabled: true,
+      tooltip: {
+        title: '没有查看权限'
+      }
+    },
+    {
+      key: 'delete',
+      actionType: 'tooltip' as const,
+      text: '拒绝',
+      icon: <CloseCircleOutlined />,
+      disabled: true,
+      tooltip: {
+        title: '没有拒绝权限'
+      }
+    }
+  ];
+
+  return (
+    <ConfigProvider>
+      <Space direction="vertical" size="large" style={{ width: '100%' }}>
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            操作按钮组：
+          </Text>
+          <ActionButtonGroup actions={actions} />
+        </div>
+
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            禁用状态（带 Tooltip）：
+          </Text>
+          <ActionButtonGroup actions={disabledActions} />
+        </div>
+
+        <div>
+          <Text strong style={{ display: 'block', marginBottom: 8 }}>
+            自定义间距：
+          </Text>
+          <ActionButtonGroup actions={actions} size="large" />
+        </div>
+      </Space>
+    </ConfigProvider>
+  );
+};
+
+export default ActionButtonGroupDemo;