jianghu-ui 1.0.6 → 1.0.8

package/src/components/JhCard/JhCard.md

@@ -1,246 +0,0 @@
-# JhCard - 高级卡片组件
-
-高级卡片组件，完全参考 [Ant Design ProCard](https://procomponents.ant.design/components/card/) 设计规范。
-
-## 功能特性
-
-- ✅ **标题和提示**: 支持标题、副标题、tooltip 提示信息
-- ✅ **额外内容**: 支持右上角额外内容区域
-- ✅ **边框控制**: 支持边框和标题分割线
-- ✅ **幽灵模式**: 可取消背景色和 padding，适合页面布局
-- ✅ **折叠功能**: 支持卡片内容折叠/展开
-- ✅ **尺寸控制**: 支持 default 和 small 两种尺寸
-- ✅ **加载状态**: 内置 loading 状态展示
-- ✅ **操作项**: 底部操作按钮区域，自动分割线
-- ✅ **布局模式**: 支持居中布局
-- ✅ **分栏布局**: 支持垂直和水平分栏，自动分割线
-- ✅ **栅格布局**: 支持 24 栅格系统，支持数字、像素、百分比
-- ✅ **间距控制**: 支持 gutter 设置栅格间距
-- ✅ **Flex 布局**: 支持 direction 控制 flex 方向
-- ✅ **悬浮效果**: 支持鼠标悬浮阴影效果
-- ✅ **标签页**: 支持内置标签页功能
-
-## 基本用法
-
-```vue
-<template>
-  <jh-card
-    title="卡片标题"
-    tooltip="这是提示信息"
-    extra="额外内容"
-  >
-    <div>卡片内容</div>
-  </jh-card>
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| title | 标题 | string | - |
-| subTitle | 副标题 | string | - |
-| tooltip | 标题旁边的提示信息 | string | - |
-| extra | 右上角额外内容 | string | - |
-| bordered | 是否有边框 | boolean | true |
-| headerBordered | 标题和内容之间是否有分割线 | boolean | false |
-| ghost | 幽灵模式，取消背景色和 padding | boolean | false |
-| collapsible | 是否可折叠 | boolean | false |
-| defaultCollapsed | 默认是否折叠 | boolean | false |
-| size | 尺寸 | 'default' \| 'small' | 'default' |
-| loading | 加载状态 | boolean | false |
-| actions | 底部操作按钮配置 | Array | [] |
-| layout | 布局方式 | 'default' \| 'center' | 'default' |
-| direction | Flex 方向 | 'row' \| 'column' | 'row' |
-| split | 分栏模式 | '' \| 'vertical' \| 'horizontal' | '' |
-| colSpan | 栅格占比，支持数字(0-24)、像素值、百分比 | number \| string | 24 |
-| gutter | 栅格间距 | number \| [number, number] | 0 |
-| tabs | 标签页配置 | object | null |
-| hoverable | 鼠标悬浮时是否有阴影效果 | boolean | false |
-| bodyStyle | 自定义内容区样式 | object | {} |
-| headStyle | 自定义头部样式 | object | {} |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| collapse | 折叠状态改变时触发 | (collapsed: boolean) |
-| tab-change | 标签页切换时触发 | (key: string \| number) |
-
-### Slots
-
-| 名称 | 说明 |
-| --- | --- |
-| default | 卡片内容 |
-| title | 自定义标题 |
-| extra | 自定义右上角内容 |
-
-## 使用示例
-
-### 基础卡片
-
-```vue
-<jh-card
-  title="默认尺寸"
-  tooltip="这是提示"
-  extra="extra"
->
-  <div>Card content</div>
-</jh-card>
-```
-
-### 小尺寸卡片
-
-```vue
-<jh-card
-  title="小尺寸卡片"
-  size="small"
->
-  <div>Card content</div>
-</jh-card>
-```
-
-### 带分割线的标题
-
-```vue
-<jh-card
-  title="标题"
-  header-bordered
->
-  <div>Card content</div>
-</jh-card>
-```
-
-### 可折叠卡片
-
-```vue
-<jh-card
-  title="可折叠卡片"
-  collapsible
->
-  <div>Card content</div>
-</jh-card>
-```
-
-### 加载状态
-
-```vue
-<jh-card
-  title="加载中"
-  loading
->
-  <div>Card content</div>
-</jh-card>
-```
-
-### 操作项
-
-```vue
-<jh-card
-  title="Actions 操作项"
-  :actions="[
-    { icon: 'mdi-cog', text: '设置', onClick: () => {} },
-    { icon: 'mdi-pencil', text: '编辑', onClick: () => {} },
-  ]"
->
-  <div>Card content</div>
-</jh-card>
-```
-
-### 栅格布局
-
-```vue
-<jh-card :gutter="8">
-  <jh-card :col-span="12" bordered>
-    colSpan - 12
-  </jh-card>
-  <jh-card :col-span="6" bordered>
-    colSpan - 6
-  </jh-card>
-  <jh-card :col-span="6" bordered>
-    colSpan - 6
-  </jh-card>
-</jh-card>
-```
-
-### 左右分栏
-
-```vue
-<jh-card
-  title="左右分栏"
-  split="vertical"
-  bordered
->
-  <jh-card title="左侧" col-span="30%">
-    左侧内容
-  </jh-card>
-  <jh-card title="右侧">
-    右侧内容
-  </jh-card>
-</jh-card>
-```
-
-### 上下分栏
-
-```vue
-<jh-card
-  title="上下分栏"
-  split="horizontal"
-  bordered
->
-  <jh-card title="上部">
-    上部内容
-  </jh-card>
-  <jh-card title="下部">
-    下部内容
-  </jh-card>
-</jh-card>
-```
-
-### 幽灵模式
-
-```vue
-<jh-card ghost>
-  <div>无背景色和 padding</div>
-</jh-card>
-```
-
-### 居中布局
-
-```vue
-<jh-card layout="center" style="min-height: 200px;">
-  <div>内容居中</div>
-</jh-card>
-```
-
-### 悬浮效果
-
-```vue
-<jh-card hoverable>
-  <div>鼠标悬浮时有阴影</div>
-</jh-card>
-```
-
-## 设计规范
-
-本组件完全参考 Ant Design ProCard 的设计规范：
-
-1. **布局灵活**: 支持栅格、分栏、嵌套等多种布局方式
-2. **样式统一**: 遵循 Ant Design 设计语言
-3. **功能完整**: 包含标题、操作项、折叠、加载等常用功能
-4. **易于使用**: API 设计简洁，上手容易
-
-## 注意事项
-
-1. 使用分栏布局（split）时，子卡片的圆角会被设置为 0
-2. 幽灵模式（ghost）会取消背景色和 padding，适合用于页面布局
-3. colSpan 支持多种格式：数字（0-24）、像素值（如 "200px"）、百分比（如 "30%"）
-4. gutter 可以是数字或数组，数组格式为 [水平间距, 垂直间距]
-5. 嵌套使用时，组件会自动切换为 flex 弹性盒布局
-
-## 相关链接
-
-- [Ant Design ProCard](https://procomponents.ant.design/components/card/)
-- [Vuetify Card](https://vuetifyjs.com/en/components/cards/)

package/src/components/JhCheckCard/JhCheckCard.md

@@ -1,245 +0,0 @@
-# JhCheckCard 多选卡片
-
-多选卡片组件，参考 Ant Design ProComponents CheckCard 设计规范。支持单选、多选、不同尺寸、自定义内容等功能。
-
-## 基础用法
-
-```vue
-<template>
-  <jh-check-card
-    title="基础卡片"
-    description="这是一个基础的多选卡片"
-    @change="handleChange"
-  >
-    <div>卡片内容</div>
-  </jh-check-card>
-</template>
-
-<script>
-export default {
-  methods: {
-    handleChange(checked, value) {
-      console.log('选中状态:', checked, '值:', value);
-    },
-  },
-};
-</script>
-```
-
-## 多选模式
-
-```vue
-<template>
-  <div>
-    <jh-check-card
-      v-for="option in options"
-      :key="option.value"
-      :title="option.title"
-      :description="option.description"
-      :value="option.value"
-      :checked="selectedValues.includes(option.value)"
-      @change="handleMultipleChange"
-    >
-      {{ option.content }}
-    </jh-check-card>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selectedValues: ['option1'],
-      options: [
-        { value: 'option1', title: '选项一', description: '描述一', content: '内容一' },
-        { value: 'option2', title: '选项二', description: '描述二', content: '内容二' },
-        { value: 'option3', title: '选项三', description: '描述三', content: '内容三' },
-      ],
-    };
-  },
-  methods: {
-    handleMultipleChange(checked, value) {
-      if (checked) {
-        if (!this.selectedValues.includes(value)) {
-          this.selectedValues.push(value);
-        }
-      } else {
-        const index = this.selectedValues.indexOf(value);
-        if (index > -1) {
-          this.selectedValues.splice(index, 1);
-        }
-      }
-    },
-  },
-};
-</script>
-```
-
-## 单选模式
-
-```vue
-<template>
-  <div>
-    <jh-check-card
-      v-for="option in options"
-      :key="option.value"
-      :title="option.title"
-      :value="option.value"
-      :checked="selectedValue === option.value"
-      @change="handleSingleChange"
-    >
-      {{ option.content }}
-    </jh-check-card>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selectedValue: 'option1',
-      options: [
-        { value: 'option1', title: '选项一', content: '内容一' },
-        { value: 'option2', title: '选项二', content: '内容二' },
-        { value: 'option3', title: '选项三', content: '内容三' },
-      ],
-    };
-  },
-  methods: {
-    handleSingleChange(checked, value) {
-      if (checked) {
-        this.selectedValue = value;
-      }
-    },
-  },
-};
-</script>
-```
-
-## 带封面图片
-
-```vue
-<template>
-  <jh-check-card
-    title="产品名称"
-    description="产品描述"
-    cover="https://example.com/image.jpg"
-    extra="￥299"
-    @change="handleChange"
-  >
-    <div>产品详细信息</div>
-  </jh-check-card>
-</template>
-```
-
-## 自定义内容
-
-```vue
-<template>
-  <jh-check-card @change="handleChange">
-    <template #title>
-      <div style="display: flex; align-items: center;">
-        <v-icon color="primary" class="mr-2">mdi-rocket</v-icon>
-        自定义标题
-      </div>
-    </template>
-    
-    <template #description>
-      <div style="color: #52c41a;">自定义描述样式</div>
-    </template>
-    
-    <div style="text-align: center; padding: 20px;">
-      <div style="font-size: 32px; margin-bottom: 8px;">⚡</div>
-      <div>自定义内容区域</div>
-    </div>
-  </jh-check-card>
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| title | 卡片标题 | `string` | `''` |
-| description | 卡片描述 | `string` | `''` |
-| cover | 卡片封面图片URL | `string` | `''` |
-| extra | 右下角额外内容 | `string` | `''` |
-| value | 卡片值，用于多选时的标识 | `string \| number \| boolean` | `null` |
-| checked | 是否选中（受控） | `boolean` | `false` |
-| defaultChecked | 默认选中状态（非受控） | `boolean` | `false` |
-| disabled | 是否禁用 | `boolean` | `false` |
-| loading | 是否加载中 | `boolean` | `false` |
-| size | 卡片尺寸 | `'small' \| 'default' \| 'large'` | `'default'` |
-| bordered | 是否显示边框 | `boolean` | `true` |
-| hideCheckbox | 是否隐藏选择框 | `boolean` | `false` |
-| checkboxPosition | 选择框位置 | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` |
-| hoverable | 是否可悬浮 | `boolean` | `true` |
-| width | 卡片宽度 | `string \| number` | `''` |
-| height | 卡片高度 | `string \| number` | `''` |
-| bodyStyle | 自定义样式 | `object` | `{}` |
-| headStyle | 自定义头部样式 | `object` | `{}` |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| change | 选中状态改变时触发 | `(checked: boolean, value: any) => void` |
-| click | 点击卡片时触发 | `(event: Event) => void` |
-| input | 兼容 v-model，选中状态改变时触发 | `(checked: boolean) => void` |
-
-### Slots
-
-| 插槽名 | 说明 | 参数 |
-| --- | --- | --- |
-| default | 默认内容 | - |
-| title | 自定义标题 | - |
-| description | 自定义描述 | - |
-| cover | 自定义封面 | - |
-| extra | 自定义额外内容 | - |
-
-## 设计规范
-
-### 尺寸规格
-
-- **小尺寸 (small)**: 最小高度 80px，内边距 12px，标题字号 14px
-- **默认尺寸 (default)**: 最小高度 100px，内边距 16px，标题字号 16px  
-- **大尺寸 (large)**: 最小高度 120px，内边距 20px，标题字号 18px
-
-### 状态样式
-
-- **默认状态**: 灰色边框 `#d9d9d9`，白色背景
-- **悬浮状态**: 蓝色边框 `#1890ff`，轻微阴影
-- **选中状态**: 蓝色边框 `#1890ff`，蓝色阴影 `rgba(24, 144, 255, 0.2)`
-- **禁用状态**: 透明度 50%，不可交互
-- **加载状态**: 显示加载指示器，不可交互
-
-### 选择框位置
-
-选择框可以放置在卡片的四个角落：
-- `top-left`: 左上角
-- `top-right`: 右上角（默认）
-- `bottom-left`: 左下角
-- `bottom-right`: 右下角
-
-### 响应式设计
-
-组件支持响应式布局，在小屏幕设备上会自动调整内边距和字号：
-- 屏幕宽度 ≤ 768px 时，内边距调整为 12px，标题字号调整为 14px
-
-## 使用场景
-
-1. **商品选择**: 电商场景中的商品多选
-2. **套餐选择**: 会员套餐、服务套餐等单选场景
-3. **功能选择**: 产品功能、权限等多选场景
-4. **配置选择**: 系统配置项、参数设置等
-5. **内容分类**: 文章分类、标签选择等
-
-## 注意事项
-
-1. 当使用 `checked` 属性时，组件为受控模式，需要通过 `change` 事件更新状态
-2. 当不传入 `checked` 属性时，组件为非受控模式，使用内部状态管理
-3. `value` 属性用于标识卡片，在多选场景中特别重要
-4. 禁用和加载状态下，卡片不响应点击事件
-5. 建议为每个卡片设置合适的宽度，避免内容溢出

package/src/components/JhConfirmDialog/JhConfirmDialog.md

@@ -1,70 +0,0 @@
-# JhConfirmDialog - 确认对话框组件
-
-JhConfirmDialog 基于 Vuetify `v-dialog` 实现，提供统一的确认/取消交互体验，支持异步校验、loading 状态和完全自定义内容，适用于删除、提交、状态切换等需要最终确认的场景。
-
-## 功能特性
-
-- ✅ **标题与内容自定义**：支持传入纯文本、HTML 或通过插槽渲染自定义结构
-- ✅ **确认/取消按钮可配置**：文字、颜色、显隐均可通过 props 控制
-- ✅ **异步拦截**：`beforeConfirm`、`beforeCancel` 支持返回 `false` 阻断关闭，方便做表单校验
-- ✅ **loading 态**：配合 `loading` 属性即可在确认阶段展示加载动画
-- ✅ **行为事件齐全**：支持 confirm/cancel/click-outside 等事件，方便接入埋点
-
-## 基础用法
-
-```vue
-<template>
-  <jh-confirm-dialog
-    v-model="visible"
-    title="删除确认"
-    content="确定要删除这条记录吗？此操作不可恢复。"
-    :before-confirm="handleBeforeConfirm"
-    :loading="submitting"
-    @confirm="handleConfirm"
-    @cancel="handleCancel"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | v-model，控制对话框显示 | boolean | false |
-| title | 标题文本 | string | `提示` |
-| content | 内容文本（可包含 HTML） | string | `''` |
-| contentClass | 内容区域 class | string | `pa-6 text-pre-line` |
-| maxWidth | 最大宽度 | number \| string | 420 |
-| showCancelButton | 是否展示取消按钮 | boolean | true |
-| confirmButtonText | 确认按钮文案 | string | `确定` |
-| cancelButtonText | 取消按钮文案 | string | `取消` |
-| confirmButtonColor | 确认按钮颜色 | string | `primary` |
-| cancelButtonColor | 取消按钮颜色 | string | `default` |
-| persistent | 是否禁止点击遮罩关闭 | boolean | false |
-| loading | 确认按钮 loading 状态 | boolean | false |
-| beforeConfirm | 确认前钩子，返回 false 阻断关闭 | Function | null |
-| beforeCancel | 取消前钩子，返回 false 阻断关闭 | Function | null |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | `v-model` 双向绑定事件 | (visible: boolean) |
-| confirm | 点击确认后触发 | - |
-| cancel | 点击取消或遮罩关闭时触发 | - |
-| click-outside | 点击遮罩区域触发 | - |
-
-### Slots
-
-| 名称 | 说明 |
-| --- | --- |
-| title | 自定义标题内容 |
-| default | 自定义内容区域 |
-
-## 使用建议
-
-- 需要异步确认时让 `beforeConfirm` 返回 `false`，待操作成功后再手动关闭
-- 在危险操作上将 `persistent` 设为 `true`，避免误触关闭
-- 自定义内容时可通过插槽输出复杂表单、列表或高亮提示

package/src/components/JhDateRangePicker/JhDateRangePicker.md

@@ -1,56 +0,0 @@
-# JhDateRangePicker - 日期范围选择器
-
-JhDateRangePicker 集成快捷日期面板与 `v-date-picker`，可通过一个输入框完成常见时间段选择，适用于报表、统计筛选等场景。
-
-## 功能特性
-
-- 📆 **快捷选择**：内置最近 7/30/90 天、本月、上月、最近一年等常用区间
-- 🧭 **所见即所得**：左侧快捷列表 + 右侧日历联动，选择即高亮
-- 🧹 **一键清除**：输入框支持 `clearable`，可快速清空区间
-- 🧱 **受控组件**：通过 `v-model` 保持外部状态同步，支持 `input/change` 事件
-- 🎨 **风格统一**：继承 Vuetify 文本框交互，可配置 `filled/dense/outlined` 等外观
-
-## 基础用法
-
-```vue
-<template>
-  <jh-date-range-picker
-    v-model="dateRange"
-    prefix="时间："
-    :filled="false"
-    outlined
-    @change="reload"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | v-model 绑定的日期数组，长度为 2 | string[] | [] |
-| prefix | 输入框前缀文本 | string | `''` |
-| filled | 是否使用 filled 风格 | boolean | true |
-| dense | 是否紧凑 | boolean | true |
-| outlined | 是否使用 outlined 风格 | boolean | false |
-| hideDetails | 是否隐藏 `v-text-field` 底部提示 | boolean | true |
-| clearable | 是否展示清空图标 | boolean | true |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | `v-model` 值变化 | (value: string[]) |
-| change | 用户确认或清空时触发 | (value: string[]) |
-
-### Slots
-
-当前组件不提供插槽。
-
-## 使用建议
-
-- 如果需要自定义默认区间，可在父组件中传入初始 `value` 或监听 `menu` 打开后赋值
-- 组件默认返回 `YYYY-MM-DD` 字符串，如需传时间戳可在外层自行转换
-- 结合 `JhQueryFilter` 等查询组件可以统一触发搜索逻辑