jianghu-ui 1.0.6 → 1.0.7

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` 等查询组件可以统一触发搜索逻辑