jianghu-ui 1.0.6 → 1.0.7

package/src/components/JhList/JhList.md

@@ -1,441 +0,0 @@
-# JhList 高级列表
-
-基于 Ant Design ProList 设计的高级列表组件，提供了丰富的数据展示和交互功能。
-
-## 特性
-
-- 📋 **多种布局** - 支持列表、网格等多种布局方式
-- 🎨 **灵活配置** - 通过 metas 配置快速定义数据展示
-- 🔍 **搜索过滤** - 内置搜索功能，支持客户端和服务端搜索
-- 📄 **分页支持** - 支持客户端和服务端分页
-- ✅ **行选择** - 支持单选和多选
-- 🎯 **操作按钮** - 灵活的操作按钮配置
-- 🔄 **数据刷新** - 支持手动刷新和轮询
-- 📱 **响应式** - 完美适配移动端
-- 🎭 **自定义渲染** - 支持完全自定义列表项渲染
-
-## 基础用法
-
-```vue
-<template>
-  <jh-list
-    :data-source="dataSource"
-    :metas="metas"
-    header-title="用户列表"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dataSource: [
-        {
-          id: 1,
-          name: '张三',
-          email: 'zhangsan@example.com',
-          avatar: 'https://example.com/avatar1.jpg',
-        },
-        // ...
-      ],
-      metas: {
-        title: 'name',
-        description: 'email',
-        avatar: 'avatar',
-      },
-    };
-  },
-};
-</script>
-```
-
-## Metas 配置
-
-Metas 用于定义列表项的数据映射关系：
-
-```javascript
-{
-  // 标题
-  title: 'name',  // 字符串：直接映射字段
-  // 或
-  title: { dataIndex: 'name' },  // 对象：使用 dataIndex
-  // 或
-  title: (item) => item.firstName + ' ' + item.lastName,  // 函数：自定义处理
-  
-  // 副标题
-  subTitle: 'role',
-  
-  // 描述
-  description: 'email',
-  
-  // 头像
-  avatar: 'avatarUrl',
-  
-  // 额外内容
-  extra: 'status',
-  
-  // 内容区
-  content: 'bio',
-  
-  // 操作按钮
-  actions: (item) => [
-    { text: '编辑', icon: 'mdi-pencil', color: 'primary' },
-    { text: '删除', icon: 'mdi-delete', color: 'error' },
-  ],
-}
-```
-
-## 网格布局
-
-```vue
-<template>
-  <jh-list
-    :data-source="dataSource"
-    :metas="metas"
-    :grid="grid"
-    layout="grid"
-    header-title="项目列表"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      grid: {
-        column: 12,  // 总列数
-        xs: 12,      // 超小屏：1列
-        sm: 6,       // 小屏：2列
-        md: 4,       // 中屏：3列
-        lg: 3,       // 大屏：4列
-        xl: 3,       // 超大屏：4列
-      },
-    };
-  },
-};
-</script>
-```
-
-## 服务端分页
-
-```vue
-<template>
-  <jh-list
-    :request="request"
-    :metas="metas"
-    header-title="用户列表"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      metas: {
-        title: 'name',
-        description: 'email',
-        avatar: 'avatar',
-      },
-    };
-  },
-  methods: {
-    async request(params) {
-      // params: { current, pageSize, search }
-      const response = await fetch('/api/users', {
-        method: 'POST',
-        body: JSON.stringify(params),
-      });
-      const data = await response.json();
-      
-      return {
-        success: true,
-        data: data.list,
-        total: data.total,
-      };
-    },
-  },
-};
-</script>
-```
-
-## 行选择
-
-```vue
-<template>
-  <jh-list
-    :data-source="dataSource"
-    :metas="metas"
-    :row-selection="rowSelection"
-    header-title="可选择列表"
-  >
-    <template #alert-actions="{ selectedRows }">
-      <v-btn small color="primary" @click="handleBatchEdit(selectedRows)">
-        批量编辑
-      </v-btn>
-      <v-btn small color="error" @click="handleBatchDelete(selectedRows)">
-        批量删除
-      </v-btn>
-    </template>
-  </jh-list>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      rowSelection: {
-        onChange: (selectedRowKeys, selectedRows) => {
-          console.log('选中的行:', selectedRowKeys, selectedRows);
-        },
-      },
-    };
-  },
-  methods: {
-    handleBatchEdit(rows) {
-      console.log('批量编辑:', rows);
-    },
-    handleBatchDelete(rows) {
-      console.log('批量删除:', rows);
-    },
-  },
-};
-</script>
-```
-
-## 自定义渲染
-
-```vue
-<template>
-  <jh-list
-    :data-source="dataSource"
-    :metas="metas"
-    header-title="自定义列表"
-  >
-    <template #renderItem="{ item, index }">
-      <v-card class="pa-4">
-        <div class="d-flex align-center">
-          <v-avatar size="60" color="primary">
-            <span class="white--text">{{ index + 1 }}</span>
-          </v-avatar>
-          <div class="ml-4 flex-grow-1">
-            <div class="text-h6">{{ item.title }}</div>
-            <div class="text-body-2 grey--text">{{ item.description }}</div>
-          </div>
-          <v-chip :color="item.status === 'active' ? 'success' : 'grey'">
-            {{ item.status }}
-          </v-chip>
-        </div>
-      </v-card>
-    </template>
-  </jh-list>
-</template>
-```
-
-## 插槽自定义
-
-```vue
-<template>
-  <jh-list
-    :data-source="dataSource"
-    :metas="metas"
-    header-title="项目列表"
-  >
-    <!-- 自定义标题 -->
-    <template #title="{ item }">
-      <span style="color: #1890ff; font-weight: bold;">{{ item.name }}</span>
-    </template>
-    
-    <!-- 自定义描述 -->
-    <template #description="{ item }">
-      <div>
-        <v-chip x-small>{{ item.category }}</v-chip>
-        <span class="ml-2">{{ item.description }}</span>
-      </div>
-    </template>
-    
-    <!-- 自定义额外内容 -->
-    <template #extra="{ item }">
-      <div style="text-align: right;">
-        <div style="font-size: 20px; font-weight: bold;">{{ item.progress }}%</div>
-        <v-progress-linear :value="item.progress" height="4" class="mt-1" />
-      </div>
-    </template>
-    
-    <!-- 自定义操作按钮 -->
-    <template #actions="{ item }">
-      <v-btn text x-small color="primary" @click="handleView(item)">查看</v-btn>
-      <v-btn text x-small color="success" @click="handleEdit(item)">编辑</v-btn>
-      <v-btn text x-small color="error" @click="handleDelete(item)">删除</v-btn>
-    </template>
-    
-    <!-- 工具栏左侧按钮 -->
-    <template #toolbar-actions>
-      <v-btn color="success" small>
-        <v-icon left small>mdi-plus</v-icon>
-        新增项目
-      </v-btn>
-    </template>
-    
-    <!-- 工具栏右侧额外内容 -->
-    <template #toolbar-extra>
-      <v-btn icon small>
-        <v-icon>mdi-filter</v-icon>
-      </v-btn>
-      <v-btn icon small>
-        <v-icon>mdi-download</v-icon>
-      </v-btn>
-    </template>
-  </jh-list>
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| dataSource | 数据源（客户端分页） | Array | [] |
-| request | 数据请求函数（服务端分页） | Function | null |
-| rowKey | 数据项的唯一标识字段 | String \| Function | 'id' |
-| metas | 列表项元数据配置 | Object | {} |
-| layout | 布局类型 | 'list' \| 'grid' \| 'card' | 'list' |
-| grid | 网格配置 | Object | null |
-| size | 列表尺寸 | 'small' \| 'default' \| 'large' | 'default' |
-| split | 是否显示分割线 | Boolean | true |
-| pagination | 分页配置 | Object \| Boolean | { current: 1, pageSize: 10 } |
-| rowSelection | 行选择配置 | Object \| Boolean | null |
-| checkboxColor | 复选框颜色 | String | 'primary' |
-| expandable | 展开配置 | Object \| Boolean | null |
-| headerTitle | 列表标题 | String | '' |
-| tooltip | 标题提示信息 | String | '' |
-| cardBordered | 是否显示卡片边框 | Boolean | true |
-| ghost | 幽灵模式（无边框无背景） | Boolean | false |
-| toolbar | 工具栏配置 | Object \| Boolean | { search: true, refresh: true, layout: true, size: true } |
-| search | 搜索配置 | Object \| Boolean | false |
-| loading | 加载状态 | Boolean | false |
-| polling | 轮询间隔（毫秒） | Number | 0 |
-| debounceTime | 搜索防抖时间（毫秒） | Number | 300 |
-
-### Metas 配置
-
-| 参数 | 说明 | 类型 |
-|------|------|------|
-| title | 标题 | String \| Object \| Function |
-| subTitle | 副标题 | String \| Object \| Function |
-| description | 描述 | String \| Object \| Function |
-| avatar | 头像 | String \| Object \| Function |
-| content | 内容区 | String \| Object \| Function |
-| extra | 额外内容 | String \| Object \| Function |
-| actions | 操作按钮 | String \| Object \| Function |
-
-### Grid 配置
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| column | 总列数 | Number | 12 |
-| xs | 超小屏列数 | Number | - |
-| sm | 小屏列数 | Number | - |
-| md | 中屏列数 | Number | - |
-| lg | 大屏列数 | Number | - |
-| xl | 超大屏列数 | Number | - |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| item-click | 列表项点击 | (item, index) |
-| action-click | 操作按钮点击 | (action, item) |
-| selection-change | 选择改变 | ({ selectedRowKeys, selectedRows }) |
-| page-change | 页码改变 | (page) |
-| page-size-change | 每页条数改变 | (pageSize) |
-| refresh | 刷新 | - |
-| request-error | 请求错误 | (error) |
-
-### Slots
-
-| 插槽名 | 说明 | 参数 |
-|--------|------|------|
-| header-title | 自定义标题 | - |
-| toolbar-actions | 工具栏左侧操作按钮 | - |
-| toolbar-extra | 工具栏右侧额外内容 | - |
-| alert | 自定义批量操作提示 | { selectedRowKeys, selectedRows } |
-| alert-actions | 批量操作按钮 | { selectedRowKeys, selectedRows } |
-| renderItem | 自定义列表项渲染 | { item, index } |
-| title | 自定义标题 | { item } |
-| subTitle | 自定义副标题 | { item } |
-| description | 自定义描述 | { item } |
-| content | 自定义内容区 | { item } |
-| extra | 自定义额外内容 | { item } |
-| actions | 自定义操作按钮 | { item } |
-| expandedRowRender | 自定义展开内容 | { item, index } |
-
-## 高级用法
-
-### 轮询
-
-```vue
-<jh-list
-  :request="request"
-  :metas="metas"
-  :polling="5000"
-  header-title="实时监控列表"
-/>
-```
-
-### 搜索防抖
-
-```vue
-<jh-list
-  :request="request"
-  :metas="metas"
-  :debounce-time="500"
-  header-title="搜索列表"
-/>
-```
-
-### 不同尺寸
-
-```vue
-<!-- 小尺寸 -->
-<jh-list :data-source="dataSource" :metas="metas" size="small" />
-
-<!-- 默认尺寸 -->
-<jh-list :data-source="dataSource" :metas="metas" size="default" />
-
-<!-- 大尺寸 -->
-<jh-list :data-source="dataSource" :metas="metas" size="large" />
-```
-
-### 幽灵模式
-
-```vue
-<jh-list
-  :data-source="dataSource"
-  :metas="metas"
-  ghost
-  header-title="幽灵模式列表"
-/>
-```
-
-## 最佳实践
-
-1. **使用 metas 配置** - 优先使用 metas 配置来定义数据映射，保持代码简洁
-2. **服务端分页** - 大数据量时使用 request 函数实现服务端分页
-3. **合理使用插槽** - 对于复杂的自定义需求，使用插槽而不是完全自定义渲染
-4. **响应式布局** - 使用 grid 配置实现响应式网格布局
-5. **防抖优化** - 搜索功能使用 debounceTime 避免频繁请求
-
-## 注意事项
-
-- `dataSource` 和 `request` 二选一，优先使用 `request`
-- 使用 `rowKey` 确保每个列表项有唯一标识
-- 网格布局需要配置 `grid` 属性并设置 `layout="grid"`
-- 自定义渲染时注意保持样式一致性
-
-## 与 JhTable 的区别
-
-- **JhList** 适合卡片式、图文混排的数据展示
-- **JhTable** 适合表格式、结构化的数据展示
-- JhList 基于 ProTable 实现，支持大部分 ProTable 的 API
-- 两者可以通过配置轻松切换

package/src/components/JhMarkdownEditor/JhMarkdownEditor.md

@@ -1,56 +0,0 @@
-# JhMarkdownEditor - Markdown 编辑器
-
-JhMarkdownEditor 基于 Editor.md 封装，提供全功能 Markdown 编辑、预览与 SEO HTML 输出能力。
-
-## 功能特性
-
-- ✍️ **所写即所得**：支持 watch/preview 模式，实时查看渲染结果
-- 🧰 **工具栏可配置**：`toolbarIcons` 控制显示的按钮，满足精简或全量需求
-- 📏 **尺寸可调**：通过 `height/width` 自由适配弹窗、页面等不同场景
-- 🔒 **只读模式**：`readonly` 用于详情页展示，禁用编辑能力
-- 📤 **内容输出**：`content-for-seo` 事件提供编译后的 HTML，可用于摘要
-
-## 基础用法
-
-```vue
-<template>
-  <jh-markdown-editor
-    v-model="content"
-    height="520px"
-    placeholder="请输入文章内容"
-    @content-for-seo="storeHtml"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | 双向绑定的 Markdown 文本 | string | `''` |
-| placeholder | 输入提示 | string | `请输入内容...` |
-| height | 编辑器高度 | string | `calc(100vh - 400px)` |
-| width | 编辑器宽度百分比 | number | 100 |
-| editorPath | Editor.md 静态资源路径 | string | `/public/plugins/editor.md/lib/` |
-| toolbarIcons | 工具栏图标数组 | string[] | 预置常用图标 |
-| readonly | 是否只读 | boolean | false |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | `v-model` 更新 | (value: string) |
-| change | markdown 内容变化 | (value: string) |
-| content-for-seo | 返回编译后的 HTML 片段 | (html: string) |
-
-### Slots
-
-组件无插槽。
-
-## 使用建议
-
-- 需在页面提前加载 Editor.md 依赖 (`window.editormd`)，否则组件会给出告警
-- 如果需要插入模板内容，可通过 `ref` 调用 `insertValue`
-- watch `value` 时注意避免循环：组件内部已通过 `isMDChange` 做了同步保护

package/src/components/JhMask/JhMask.md

@@ -1,62 +0,0 @@
-# JhMask - 遮罩层组件
-
-JhMask 基于 Vuetify `v-overlay` 封装，可用于页面 loading、全屏提示或阻断操作等场景。
-
-## 功能特性
-
-- 🌗 **背景可配**：颜色、透明度、zIndex 均可通过 props 设置
-- ⏱️ **自动超时**：`timeout` 到期自动关闭并触发事件
-- 🔁 **loading 集成**：内置进度环，也可通过插槽放置自定义内容
-- 🖱️ **点击交互**：`closeOnClick` 允许点击遮罩直接关闭
-- 🔒 **受控显示**：`v-model` 与父组件保持同步
-
-## 基础用法
-
-```vue
-<template>
-  <jh-mask
-    v-model="maskVisible"
-    :show-loading="true"
-    loading-color="success"
-    :timeout="10000"
-    @timeout="handleTimeout"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | `v-model`，控制是否显示 | boolean | false |
-| color | 背景色 | string | `#e3e3e3` |
-| opacity | 透明度 0-1 | number \| string | 0.8 |
-| zIndex | 遮罩层层级 | number \| string | 300 |
-| showLoading | 是否显示内置 loading | boolean | false |
-| loadingSize | loading 直径 | number \| string | 64 |
-| loadingWidth | loading 线宽 | number \| string | 7 |
-| loadingColor | loading 颜色 | string | `primary` |
-| closeOnClick | 点击遮罩是否关闭 | boolean | false |
-| timeout | 自动关闭时间（ms），0 表示不自动关闭 | number | 0 |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | `v-model` 更新事件 | (visible: boolean) |
-| click | 在 `closeOnClick`=true 且被点击时触发 | - |
-| timeout | 达到超时时间自动触发 | - |
-
-### Slots
-
-| 名称 | 说明 |
-| --- | --- |
-| default | 自定义遮罩内容，可放置提示文案或自定义 loading |
-
-## 使用建议
-
-- 需要阻断用户操作时建议 `closeOnClick=false` 并增加提示文案
-- 当与异步任务绑定时，可在任务完成后手动将 `value` 设为 false 以取消遮罩
-- 通过插槽配合 `JhToast` 等组件可以快速实现“处理中”提示

package/src/components/JhMenu/JhMenu.md

@@ -1,85 +0,0 @@
-# JhMenu - 响应式导航菜单
-
-JhMenu 提供桌面/移动端统一的导航栏，集成多级菜单、右侧自定义菜单及用户头像菜单，适合后台管理与工作台场景。
-
-## 功能特性
-
-- 📱 **响应式布局**：自动在移动端显示抽屉菜单与头像抽屉
-- 🌲 **多级菜单**：支持至多三级结构，含折叠/展开交互
-- 🧭 **多入口组合**：左侧主菜单、右侧快捷菜单、头像下拉菜单可同时存在
-- 🔔 **状态同步**：通过 `activeMenuIndex/activeSecondMenuId` 控制当前高亮
-- 🔒 **账号信息展示**：内置用户名、角色标签、登出操作
-
-## 基础用法
-
-```vue
-<template>
-  <jh-menu
-    :app-title="'工作台'"
-    :menu-list="menus"
-    :right-menu-list="[{ title: '帮助', icon: 'mdi-help-circle' }]"
-    :avatar-menu-list="[{ title: '个人设置', id: 'profile' }]"
-    :user-info="user"
-    @menu-click="handleMenu"
-    @logout="logout"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| appTitle | 应用标题 | string | `JianghuJS` |
-| menuList | 左侧多级菜单数据 | Array | [] |
-| rightMenuList | 顶部右侧快捷菜单数据 | Array | [] |
-| avatarMenuList | 头像下拉菜单数据 | Array | [] |
-| userInfo | 用户信息 `{ username,userId,roles }` | Object | `{ username: 'Guest', userId: '', roles: [] }` |
-| showAvatar | 是否展示头像区域 | boolean | true |
-| activeMenuIndex | 当前激活的一级菜单索引 | number | -1 |
-| activeSecondMenuId | 当前激活的二级/三级菜单 id | string | null |
-| temporary | 移动端抽屉是否点击遮罩关闭 | boolean | true |
-| hideDrawers | Storybook 模式下隐藏抽屉 | boolean | false |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| menu-click | 任意菜单被点击时触发 | (menuItem: object, index?: number) |
-| logout | 点击登出按钮时触发 | - |
-
-### Slots
-
-该组件不暴露插槽，如需扩展请在 `menuList/rightMenuList` 数据中配置。
-
-## 数据结构示例
-
-```js
-const menus = [
-  {
-    title: '首页',
-    id: 'home',
-    path: '/dashboard'
-  },
-  {
-    title: '系统管理',
-    children: [
-      { title: '用户管理', id: 'user', path: '/user' },
-      {
-        title: '审批',
-        children: [
-          { title: '流程列表', id: 'flow', path: '/flow' }
-        ]
-      }
-    ]
-  }
-];
-```
-
-## 使用建议
-
-- 通过 `menu-item.active` 字段可默认展开某个有子级的菜单
-- 所有菜单项建议带上唯一 `id`，方便与二级高亮、埋点等逻辑关联
-- 移动端建议搭配 `temporary=true`，以便点击遮罩快速收起抽屉

package/src/components/JhModal/JhModal.md

@@ -1,68 +0,0 @@
-# JhModal - 通用模态框
-
-JhModal 基于 Vuetify `v-dialog`，提供标题、内容、操作区的统一模态框样式，适用于查看详情、信息提示、二次确认等场景。
-
-## 功能特性
-
-- 📦 **标准布局**：包含标题区、内容区、底部操作区，并支持粘性头部
-- 🧲 **受控显示**：`v-model` 控制显隐，自动派发 open/close
-- 🧩 **操作插槽**：`actions` 插槽可完全替换底部按钮
-- 🖥️ **全屏/宽度**：通过 `fullscreen` 与 `width` 适配桌面或移动端
-- 🔒 **安全交互**：`persistent` 控制遮罩点击行为，避免误关闭
-
-## 基础用法
-
-```vue
-<template>
-  <jh-modal
-    v-model="visible"
-    title="订单详情"
-    width="720"
-    :persistent="false"
-    @confirm="handleSave"
-  >
-    <order-detail />
-  </jh-modal>
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | `v-model`，模态框显隐 | boolean | false |
-| title | 标题文本 | string | `弹窗` |
-| width | 最大宽度(px) | number \| string | 600 |
-| fullscreen | 是否全屏展示 | boolean | false |
-| persistent | 是否禁止点击遮罩关闭 | boolean | true |
-| closable | 是否显示右上角关闭按钮 | boolean | true |
-| showActions | 是否显示底部按钮区 | boolean | true |
-| showConfirmButton | 是否显示确认按钮 | boolean | true |
-| showCancelButton | 是否显示取消按钮 | boolean | true |
-| confirmText | 确认按钮文本 | string | `确认` |
-| cancelText | 取消按钮文本 | string | `取消` |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | `v-model` 更新事件 | (visible: boolean) |
-| open | 弹窗打开时触发 | - |
-| close | 弹窗关闭后触发 | - |
-| confirm | 点击确认按钮 | - |
-| cancel | 点击取消/关闭按钮 | - |
-
-### Slots
-
-| 名称 | 说明 |
-| --- | --- |
-| default | 弹窗主体内容 |
-| actions | 覆盖底部按钮区 |
-
-## 使用建议
-
-- 表单类模态框可以关闭 `persistent` 以允许点击遮罩取消
-- 需要长列表滚动时，可在插槽内包裹自定义滚动容器
-- 若不需要按钮区，直接将 `showActions` 设为 false，并自行提供底部内容