jianghu-ui 1.0.6 → 1.0.7

package/src/components/JhAddressSelect/JhAddressSelect.md

@@ -1,267 +0,0 @@
-# JhAddressSelect - 省市区选择组件
-
-省市区三级联动选择组件，支持自定义显示层级、标签文本和数据源。
-
-- ✅ **四级联动**: 支持省、市、区、镇四级联动选择
-- ✅ **自定义层级**: 可配置显示 1-4 级（仅省份、省市、省市区、省市区镇）
-- ✅ **自定义标签**: 支持自定义各级别的显示文本
-- ✅ **自定义数据**: 支持传入自定义省市区数据源
-- ✅ **样式透传**: 支持 Vuetify 的 outlined、dense、loading 等样式
-- ✅ **双向绑定**: 支持 v-model 双向数据绑定
-- ✅ **事件触发**: change 事件在值变化时触发
-- ✅ **清除功能**: 支持清除已选值
-- ✅ **返回完整信息**: 事件返回包�� code 和 name 的完整对象
-- ✅ **多种模式**: 支持普通联动选择 (select) 和级联选择 (cascader) 两种模式
-
-## 基本用法
-
-```vue
-<template>
-  <jh-address-select
-    v-model="address"
-    :data="addressData"
-    @change="handleAddressChange"
-  ></jh-address-select>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      address: { province: null, city: null, district: null, town: null },
-      addressData: [
-        { code: '110000', name: '北京市', children: [...] },
-        { code: '440000', name: '广东省', children: [...] }
-      ]
-    };
-  },
-  methods: {
-    handleAddressChange(value) {
-      console.log('省份:', value.province?.name, value.province?.code);
-      console.log('城市:', value.city?.name, value.city?.code);
-      console.log('区县:', value.district?.name, value.district?.code);
-      console.log('乡镇:', value.town?.name, value.town?.code);
-    }
-  }
-};
-</script>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value / v-model | 绑定值，返回包含 code 和 name 的对象 | object | { province: null, city: null, district: null } |
-| level | 显示层级：1-仅省份，2-省市，3-省市区，4-省市区镇 | number | 3 |
-| type | 显示模式：'select' (默认) 或 'cascader' | string | 'select' |
-| label | 级联模式下的输入框标签 | string | '请选择地区' |
-| outlined | 是否使用 outlined 样式 | boolean | true |
-| dense | 是否使用紧凑模式 | boolean | false |
-| loading | 是否显示加载状态 | boolean | false |
-| labels | 自定义标签文本 | object | { province: '省份', city: '城市', district: '区/县', town: '乡镇' } |
-| data | 省市区数据源 | array | 内置示例数据 |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | 值变化时触发（v-model） | (value: object) |
-| change | 值变化时触发 | (value: object) |
-
-### 返回值格式
-
-v-model 绑定值和事件回调参数的格式：
-
-```javascript
-{
-  province: { code: '440000', name: '广东省' },
-  city: { code: '440300', name: '深圳市' },
-  district: { code: '440305', name: '南山区' },
-  town: { code: '440305001', name: '南头街道' }  // level=4 时存在
-}
-```
-
-每个字段都是一个对象，包含 `code`（编码）和 `name`（名称）两个属性。未选择时为 `null`。
-
-### 数据格式
-
-data 属性需要符合以下格式：
-
-```javascript
-[
-  {
-    code: '110000',  // 省份编码
-    name: '北京市',   // 省份名称
-    children: [      // 城市列表
-      {
-        code: '110100',  // 城市编码
-        name: '市辖区',   // 城市名称
-        children: [      // 区县列表
-          {
-            code: '110101',  // 区县编码
-            name: '东城区'   // 区县名称
-          }
-        ]
-      }
-    ]
-  }
-]
-```
-
-## 使用示例
-
-### 默认三级联动
-
-```vue
-<jh-address-select
-  v-model="address"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 级联选择模式
-
-使用 `type="cascader"` 开启级联选择模式。
-
-```vue
-<jh-address-select
-  v-model="address"
-  type="cascader"
-  label="收货地址"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 仅选择到城市
-
-```vue
-<jh-address-select
-  v-model="address"
-  :level="2"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 仅选择省份
-
-```vue
-<jh-address-select
-  v-model="address"
-  :level="1"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 四级联动（省市区镇）
-
-```vue
-<jh-address-select
-  v-model="address"
-  :level="4"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 四级联动（带初始值）
-
-```vue
-<jh-address-select
-  v-model="address"
-  :level="4"
-  :data="addressData"
-></jh-address-select>
-
-<script>
-export default {
-  data() {
-    return {
-      address: {
-        province: { code: '440000', name: '广东省' },
-        city: { code: '440300', name: '深圳市' },
-        district: { code: '440305', name: '南山区' },
-        town: { code: '440305001', name: '南头街道' }
-      }
-    };
-  }
-};
-</script>
-```
-
-### 紧凑模式
-
-```vue
-<jh-address-select
-  v-model="address"
-  dense
-  :data="addressData"
-></jh-address-select>
-```
-
-### 自定义标签文本
-
-```vue
-<jh-address-select
-  v-model="address"
-  :labels="{ province: '所在省份', city: '所在城市', district: '所在区县' }"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 加载状态
-
-```vue
-<jh-address-select
-  v-model="address"
-  :loading="isLoading"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 使用 filled 样式
-
-```vue
-<jh-address-select
-  v-model="address"
-  :outlined="false"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 监听变化
-
-```vue
-<template>
-  <jh-address-select
-    v-model="address"
-    :data="addressData"
-    @change="handleAddressChange"
-  ></jh-address-select>
-</template>
-
-<script>
-export default {
-  methods: {
-    handleAddressChange(value) {
-      console.log('地址变化:', value);
-    }
-  }
-};
-</script>
-```
-
-## 注意事项
-
-1. **数据格式**: data 属性必须符合指定的嵌套格式，包含 code 和 name 字段
-2. **层级控制**: level 属性控制显示的级数，设置为 1 时只显示省份，2 时显示省市，3 时显示省市区，4 时显示省市区镇
-3. **联动逻辑**: 选择省份后会清空城市、区县和乡镇，选择城市后会清空区县和乡镇，选择区县后会清空乡镇
-4. **禁用状态**: 未选择上级时，下级选择器会自动禁用
-5. **响应式布局**: 组件会根据 level 自动调整栅格布局（level=1 时占 12 列，level=2 时占 6 列，level=3 时占 4 列，level=4 时占 3 列）
-6. **返回值格式**: v-model 和事件返回的值包含 code 和 name 两个字段，方便获取编码和名称
-7. **级联模式**: 在 cascader 模式下，点击省份/城市/区县会展示下一级列表，直到选择完指定 level 级数后自动收起菜单
-
-## 相关链接
-
-- [Vuetify Autocomplete](https://vuetifyjs.com/en/components/autocompletes/)
-- [中国行政区划代码](http://www.mca.gov.cn/article/sj/xzqh/)

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/)