jianghu-ui 1.0.6 → 1.0.8

package/src/components/JhTableAttachment/JhTableAttachment.md

@@ -1,70 +0,0 @@
-# JhTableAttachment - 附件分组面板
-
-JhTableAttachment 专注于以卡片方式呈现附件列表，内置分组、搜索、预览、下载、删除等能力，可作为表格附件详情的补充。
-
-## 功能特性
-
-- 🗂️ **分组展示**：按 `groupBy` 字段将附件划分多个卡片区域
-- 🔍 **内置搜索**：顶部输入框可实时过滤文件名/类型
-- 👀 **预览能力**：图片类附件支持放大预览，其他类型显示文件图标
-- 📥 **下载/删除事件**：提供 download/delete 事件，方便接入后台接口
-- ➕ **新增入口**：可展示“新增附件”按钮，自定义上传流程
-
-## 基础用法
-
-```vue
-<template>
-  <jh-table-attachment
-    :attachments="attachmentList"
-    group-by="category"
-    :show-create-button="canEdit"
-    @create-click="openUploader"
-    @delete="removeAttachment"
-    @download="downloadAttachment"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| attachments | 附件数组 | Array | [] |
-| showCreateButton | 是否显示“新增附件”按钮 | boolean | true |
-| readonly | 是否只读（隐藏删除按钮） | boolean | false |
-| groupBy | 分组字段名 | string | `fileType` |
-| previewPrefix | 预览地址前缀，拼接 `downloadPath` | string | `/upload/` |
-| loading | 是否展示 loading 遮罩 | boolean | false |
-
-附件对象推荐结构：
-
-```js
-{
-  id: 1,
-  filename: '合同.pdf',
-  downloadPath: '2023/contract.pdf',
-  fileType: '合同',
-  fileSubtype: 'pdf'
-}
-```
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| create-click | 点击新增附件按钮 | - |
-| preview | 点击预览按钮 | (item) |
-| download | 点击下载按钮 | (item) |
-| delete | 点击删除按钮 | (item) |
-
-### Slots
-
-组件暂未开放插槽，如需扩展可 fork 组件进行定制。
-
-## 使用建议
-
-- 需要与上传接口联动时，可在 `create-click` 中打开上传抽屉，完成后刷新 `attachments`
-- 若后端已返回文件完整 URL，可把 `previewPrefix` 设为空字符串
-- 通过 `readonly` 控制权限，避免无权限用户看到删除按钮

package/src/components/JhToast/JhToast.md

@@ -1,67 +0,0 @@
-# JhToast - 全局提示组件
-
-JhToast 基于 `v-snackbar` 封装，提供成功/错误/警告/信息/加载等多种提示效果，可用于全局消息通知。
-
-## 功能特性
-
-- ⚡ **多状态**：内置 success、error、warning、info、loading 五种风格
-- 📍 **自由定位**：通过 `position` 控制四角/上下等位置
-- 🧭 **按钮扩展**：可同时显示关闭按钮和自定义操作按钮
-- ⏱️ **超时控制**：不同类型可以设置不同的超时时间，loading 默认不自动关闭
-- ✨ **图标自定义**：可传入 icon/iconColor，也可完全隐藏
-
-## 基础用法
-
-```vue
-<template>
-  <jh-toast
-    v-model="toast.visible"
-    :message="toast.message"
-    :type="toast.type"
-    position="bottom-right"
-    action-text="撤销"
-    @action="undo"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | `v-model`，控制显隐 | boolean | false |
-| message | 提示文案 | string | `''` |
-| type | 提示类型 `success/error/warning/info/loading` | string | `success` |
-| position | 显示位置 | string | `top` |
-| timeout | 自动关闭时间（ms），-1 表示常驻 | number | 3000 |
-| color | 自定义背景色 | string | `''` |
-| icon | 自定义图标 | string | `''` |
-| iconColor | 图标颜色 | string | `white` |
-| showCloseButton | 是否显示关闭按钮 | boolean | true |
-| closeButtonText | 关闭按钮文案 | string | `关闭` |
-| closeButtonColor | 关闭按钮颜色 | string | `white` |
-| actionText | 操作按钮文本 | string | `''` |
-| actionButtonColor | 操作按钮颜色 | string | `white` |
-| vertical | 是否垂直布局 | boolean | false |
-| elevation | 阴影高度 | number \| string | 24 |
-| maxLength | 文案裁剪长度 | number | 100 |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | `v-model` 更新 | (visible: boolean) |
-| close | Toast 消失时触发 | - |
-| action | 点击操作按钮时触发 | - |
-
-### Slots
-
-组件不提供插槽。
-
-## 使用建议
-
-- 业务中可封装 store 或 composable，集中管理 `message/type/visible`
-- 加载状态时 `timeout` 会自动变为 `-1`，需手动关闭
-- 若需多实例并存，可在父组件中渲染多个 JhToast 或改用队列

package/src/components/JhTreeSelect/JhTreeSelect.md

@@ -1,82 +0,0 @@
-# JhTreeSelect - 树形选择器
-
-JhTreeSelect 提供多选/单选树对话框，集成搜索、全选、移动端适配和已选列表，适用于组织、权限、分类等层级数据的选择。
-
-## 功能特性
-
-- 🌳 **多模式**：支持 `multiple`/`single` 两种模式，可选择节点或仅选择叶子
-- 🔍 **即时搜索**：关键字过滤树节点，并支持“全选当前搜索结果”
-- 📱 **响应式**：小屏自动切换全屏弹窗，已选区域在移动端折叠展示
-- 🧺 **批量操作**：内置全选、清除、批量删除已选项
-- 🔁 **受控对话框**：`visible` + `v-model` 统一控制，确认再回传
-
-## 基础用法
-
-```vue
-<template>
-  <jh-tree-select
-    v-model="selectedNodes"
-    :visible.sync="dialogVisible"
-    :data="treeData"
-    mode="multiple"
-    :allow-select-node="true"
-    title="选择部门"
-    @confirm="handleConfirm"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | `v-model`，选中节点数组 | Array | [] |
-| visible | 弹窗是否显示 | boolean | false |
-| mode | 选择模式 `multiple/single` | string | `multiple` |
-| title | 对话框标题 | string | `选择节点` |
-| placeholder | 搜索框占位符 | string | `搜索节点` |
-| maxWidth | 弹窗最大宽度 | string | `1000px` |
-| data | 树形数据源 | Array | [] |
-| nodeKey | 节点唯一 key 字段名 | string | `id` |
-| nodeLabel | 节点显示字段名 | string | `label` |
-| nodeChildren | 子节点字段名 | string | `children` |
-| allowSelectNode | 是否允许点击节点本身选择 | boolean | false |
-| showSearch | 是否展示搜索框 | boolean | true |
-| showSelectAll | 是否展示全选按钮（仅 multiple） | boolean | true |
-| loading | 数据加载状态 | boolean | false |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | `v-model` 更新，返回选中节点数组 | (nodes: Array) |
-| update:visible | 同步弹窗开关 | (visible: boolean) |
-| confirm | 点击“确定”后触发 | (nodes: Array) |
-| cancel | 点击“取消”或关闭图标后触发 | - |
-
-### Slots
-
-组件暂未开放插槽。
-
-## 数据结构示例
-
-```js
-const treeData = [
-  {
-    id: 'dept-1',
-    label: '总部',
-    children: [
-      { id: 'dept-1-1', label: '技术部' },
-      { id: 'dept-1-2', label: '运营部' }
-    ]
-  }
-];
-```
-
-## 使用建议
-
-- 如果只允许选择叶子节点，可将 `allowSelectNode` 设为 false，并在 `toggleNode` 中自定义策略
-- 需要默认展开其他层级时，可修改组件数据或 fork 组件以暴露更多控制属性
-- 回传的数据为节点对象，包含原始字段，可直接提交给后端或提取 ID

package/src/components/JhWaterMark/JhWaterMark.md

@@ -1,190 +0,0 @@
-# JhWaterMark 水印
-
-水印组件，参考 Ant Design WaterMark 设计规范。给页面的某个区域加上水印，适用于防止信息盗用。
-
-## 何时使用
-
-- 页面需要添加水印标识版权时
-- 适用于防止信息盗用的场景
-- 保护敏感数据和机密文档
-
-## 基本用法
-
-```vue
-<template>
-  <jh-water-mark content="江湖 JiangHu">
-    <div style="height: 400px;">
-      <!-- 你的内容 -->
-    </div>
-  </jh-water-mark>
-</template>
-```
-
-## 多行文本
-
-```vue
-<template>
-  <jh-water-mark :content="['江湖 JiangHu', 'Watermark Demo']">
-    <div style="height: 400px;">
-      <!-- 你的内容 -->
-    </div>
-  </jh-water-mark>
-</template>
-```
-
-## 图片水印
-
-```vue
-<template>
-  <jh-water-mark
-    :width="130"
-    :height="30"
-    image="https://example.com/logo.png"
-  >
-    <div style="height: 400px;">
-      <!-- 你的内容 -->
-    </div>
-  </jh-water-mark>
-</template>
-```
-
-## 自定义配置
-
-```vue
-<template>
-  <jh-water-mark
-    content="江湖 JiangHu"
-    :width="150"
-    :height="80"
-    :rotate="-30"
-    :gap-x="100"
-    :gap-y="100"
-    :font="{
-      color: 'rgba(0, 0, 0, 0.25)',
-      fontSize: 20,
-      fontWeight: 'bold'
-    }"
-  >
-    <div style="height: 400px;">
-      <!-- 你的内容 -->
-    </div>
-  </jh-water-mark>
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| content | 水印文字内容，支持字符串数组实现多行文本 | `string \| string[]` | `''` |
-| image | 图片源，建议导出 2 倍或 3 倍图，优先级高于文字 | `string` | `''` |
-| width | 水印整体宽度 | `number` | `120` |
-| height | 水印整体高度 | `number` | `64` |
-| rotate | 水印旋转角度 | `number` | `-22` |
-| gapX | 水印之间的水平间距 | `number` | `212` |
-| gapY | 水印之间的垂直间距 | `number` | `222` |
-| offsetX | 水印在 canvas 画布上绘制的水平偏移量，正常情况下，水印绘制在中间位置，即 offsetX = gapX / 2 | `number` | `gapX / 2` |
-| offsetY | 水印在 canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置，即 offsetY = gapY / 2 | `number` | `gapY / 2` |
-| font | 字体配置，详见下方 Font 配置 | `object` | 见下方 |
-| zIndex | 水印层的 z-index | `number` | `9` |
-| getContainer | 追加的水印元素的根节点 | `() => HTMLElement` | `undefined` |
-
-### Font 配置
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| color | 字体颜色 | `string` | `'rgba(0, 0, 0, 0.15)'` |
-| fontSize | 字体大小 | `number` | `16` |
-| fontWeight | 字体粗细 | `string \| number` | `'normal'` |
-| fontFamily | 字体类型 | `string` | `'sans-serif'` |
-| fontStyle | 字体样式 | `'none' \| 'normal' \| 'italic' \| 'oblique'` | `'normal'` |
-| textAlign | 文字对齐 | `string` | `'center'` |
-
-## 特性
-
-### 防删除保护
-
-水印组件内置了防删除和防修改机制，使用 `MutationObserver` 监听 DOM 变化：
-
-- 即使通过开发者工具删除水印元素，也会自动恢复
-- 即使修改水印元素的样式，也会自动恢复
-- 保证水印始终存在，有效防止信息泄露
-
-### Canvas 渲染
-
-使用 Canvas 绘制水印，具有以下优势：
-
-- 性能优秀，不影响页面渲染
-- 支持文字和图片两种水印类型
-- 支持自定义旋转角度和间距
-- 生成 base64 图片作为背景，浏览器兼容性好
-
-### 响应式
-
-水印会自动填充整个容器区域，适应不同尺寸的容器。
-
-## 使用场景
-
-### 文档保护
-
-```vue
-<template>
-  <jh-water-mark content="机密文档">
-    <div class="document">
-      <h3>机密文档</h3>
-      <p>文档内容...</p>
-    </div>
-  </jh-water-mark>
-</template>
-```
-
-### 数据表格
-
-```vue
-<template>
-  <jh-water-mark content="内部数据" :font="{ color: 'rgba(0, 0, 0, 0.1)' }">
-    <v-data-table :items="items" :headers="headers" />
-  </jh-water-mark>
-</template>
-```
-
-### 图片预览
-
-```vue
-<template>
-  <jh-water-mark :content="['设计稿', '仅供预览']">
-    <img src="design.png" style="width: 100%;" />
-  </jh-water-mark>
-</template>
-```
-
-## 注意事项
-
-1. **图片水印**：建议使用 2 倍或 3 倍图以保证清晰度
-2. **颜色选择**：建议使用半透明颜色，避免影响内容阅读
-3. **尺寸调整**：较大的字体需要相应增加 width 和 height
-4. **性能考虑**：水印使用 Canvas 渲染，性能优秀，但在极大容器中可能需要注意
-5. **跨域图片**：使用图片水印时，如果图片跨域，需要服务器配置 CORS
-
-## 设计规范
-
-本组件完全参考 Ant Design WaterMark 设计规范：
-
-- 默认旋转角度：-22°
-- 默认水平间距：212px
-- 默认垂直间距：222px
-- 默认字体颜色：rgba(0, 0, 0, 0.15)
-- 默认字体大小：16px
-- 水印层级：z-index: 9
-
-## 浏览器兼容性
-
-- 现代浏览器（Chrome、Firefox、Safari、Edge）
-- IE 11+（需要 MutationObserver polyfill）
-
-## 相关链接
-
-- [Ant Design WaterMark](https://ant.design/components/watermark/)
-- [Ant Design ProComponents](https://procomponents.ant.design/)

package/src/components/README.md

@@ -1,52 +0,0 @@
-# JianghuJS UI 组件
-
-这里包含所有的 UI 组件。每个组件都有自己的文件夹，包含：
-- `.vue` 文件：组件实现
-- `.stories.js` 文件：Storybook 故事
-- `.md` 文件：组件文档（可选）
-
-## 组件列表
-
-### 布局组件
-- **JhLayout**: 页面布局组件 - 基于 Ant Design Pro 的 ProLayout，提供侧边、顶部、混合三种布局模式
-- **JhPageContainer**: 页面容器组件 - 提供统一的页面头部和内容区域
-- **JhMenu**: 菜单组件 - 支持多级菜单和响应式设计
-- **JhCard**: 高级卡片组件 - 参考 Ant Design ProCard，支持标题、分栏、栅格、标签页等多种布局功能
-
-### 基础组件
-- **JhButton**: 按钮组件
-
-### 数据展示
-- **JhTable**: 表格组件
-- **JhEditableTable**: 可编辑表格组件
-- **JhTableAttachment**: 附件表格组件
-- **JhDescriptions**: 描述列表组件 - 基于 Ant Design ProDescriptions，支持水平/垂直布局、可编辑、多种 ValueType
-- **JhList**: 列表组件
-- **JhStatisticCard**: 统计卡片组件
-- **JhCheckCard**: 多选卡片组件
-- **JhWaterMark**: 水印组件
-
-### 表单组件
-- **JhForm**: 表单组件
-- **JhFormFields**: 表单字段集组件 - 基于 Ant Design ProComponents FieldSet，支持字段依赖和动态联动
-- **JhFormList**: 表单列表组件
-- **JhQueryFilter**: 查询过滤组件
-- **JhStepsForm**: 分步表单组件
-- **JhFileInput**: 文件上传组件
-- **JhDateRangePicker**: 日期范围选择器
-- **JhTreeSelect**: 树形选择器
-- **JhJsonEditor**: JSON 编辑器
-- **JhMarkdownEditor**: Markdown 编辑器
-
-### 反馈组件
-- **JhModal**: 模态框组件
-- **JhModalForm**: 模态框表单组件
-- **JhDrawer**: 抽屉组件
-- **JhDrawerForm**: 抽屉表单组件
-- **JhToast**: 提示组件
-- **JhMask**: 遮罩组件
-- **JhConfirmDialog**: 确认对话框组件
-
-### 其他组件
-- **JhDraggable**: 拖拽组件
-- **JhScene**: 场景组件