jianghu-ui 1.0.6 → 1.0.8

package/src/components/JhModalForm/JhModalForm.md

@@ -1,69 +0,0 @@
-# JhModalForm - 模态框表单组件
-
-JhModalForm 结合 JhForm 与模态框交互，适用于弹出式创建、编辑流程，可通过配置快速生成表单布局。
-
-## 功能特性
-
-- 🧱 **模态承载**：继承 JhModal 行为，支持宽度、全屏、粘性标题等
-- 🧩 **配置化表单**：`fields` 描述表单结构，支持多 ValueType 与联动
-- 🧽 **自动重置**：模态框打开时会重置表单值和验证状态
-- 🧯 **校验守卫**：`validateBeforeConfirm` 控制确认前是否校验
-- 🎛️ **插槽扩展**：`content` 自定义整块内容，`field-xxx` 精准覆盖单个字段
-
-## 基础用法
-
-```vue
-<template>
-  <jh-modal-form
-    v-model="dialogVisible"
-    title="新增成员"
-    :fields="fields"
-    :initial-data="form"
-    @confirm="handleSubmit"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | `v-model`，控制显隐 | boolean | false |
-| title | 弹窗标题 | string | `表单` |
-| fields | JhForm 字段配置数组 | Array | [] |
-| initialData | 表单初始值 | Object | `{}` |
-| width | 最大宽度 | number \| string | 600 |
-| fullscreen | 是否全屏 | boolean | false |
-| persistent | 是否禁止点击遮罩关闭 | boolean | true |
-| closable | 是否显示右上角关闭按钮 | boolean | true |
-| showConfirmButton | 是否显示确认按钮 | boolean | true |
-| confirmText | 确认按钮文本 | string | `确认` |
-| cancelText | 取消按钮文本 | string | `取消` |
-| formRef | 内部 JhForm ref 名称 | string | `modalForm` |
-| validateBeforeConfirm | 确认前是否自动校验 | boolean | true |
-| validationRules | 通用验证规则 | Object | 预置常用校验 |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | `v-model` 更新 | (visible: boolean) |
-| close | 弹窗关闭后触发 | - |
-| cancel | 点击取消或关闭按钮触发 | - |
-| confirm | 校验通过后触发 | (formData: object) |
-| field-change | 字段变化时触发 | ({ key, value, formData }) |
-
-### Slots
-
-| 名称 | 说明 |
-| --- | --- |
-| content | 完全自定义表单区域，默认渲染 JhForm |
-| field-`key` | 针对特定字段自定义渲染 |
-
-## 使用建议
-
-- 如果需在关闭后保留数据，可监听 `close` 事件并阻止 `resetForm`
-- 复杂布局可直接在 `content` 插槽内放置任意组件，自行控制 JhForm
-- 通过 `this.$refs.modalForm.getFormData()` 可以手动读取当前表单数据

package/src/components/JhPageContainer/JhPageContainer.md

@@ -1,409 +0,0 @@
-# JhPageContainer - 页面容器组件
-
-页面容器组件，提供统一的页面布局结构。这是与 test 目录中组件样式和功能保持一致的基础版本。
-
-## 功能特性
-
-- ✅ **统一的页面头部布局**: 标准化的页面标题区域
-- ✅ **页面标题显示**: 清晰的页面标识
-- ✅ **帮助按钮**: 可选的帮助功能入口
-- ✅ **搜索栏插槽**: 灵活的搜索过滤区域
-- ✅ **内容区域插槽**: 主要内容展示区域
-- ✅ **响应式布局**: 自动适配不同屏幕尺寸
-- ✅ **内置全局组件**: 集成 JhToast、JhMask、JhConfirmDialog
-
-## 设计理念
-
-`JhPageContainer` 是页面级的容器组件，通常与 `JhLayout` 配合使用：
-
-- **JhLayout**: 应用级布局（导航、头部、侧边栏、底部）
-- **JhPageContainer**: 页面级容器（页面标题、搜索栏、内容区域）
-
-## 基础用法
-
-```vue
-<template>
-  <jh-page-container
-    page-name="用户管理"
-    :show-help-button="true"
-    @help-click="handleHelpClick"
-  >
-    <template v-slot:search-bar>
-      <!-- 搜索栏内容 -->
-      <jh-query-filter
-        :keyword.sync="keyword"
-        :keywordFieldList.sync="keywordFieldList"
-        @search="handleSearch"
-      />
-    </template>
-
-    <template v-slot:content>
-      <!-- 主要内容 -->
-      <jh-table
-        :headers="headers"
-        :items="items"
-      />
-    </template>
-  </jh-page-container>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      keyword: '',
-      keywordFieldList: ['username', 'email'],
-      headers: [],
-      items: []
-    };
-  },
-  methods: {
-    handleHelpClick() {
-      // 显示帮助信息
-    },
-    handleSearch() {
-      // 执行搜索
-    }
-  }
-};
-</script>
-```
-
-## Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| pageName | 页面标题 | String | '页面标题' |
-| showHelpButton | 是否显示帮助按钮 | Boolean | true |
-
-## 插槽
-
-### menu
-菜单区域插槽，用于放置顶部菜单组件
-
-```vue
-<jh-page-container page-name="用户管理">
-  <template v-slot:menu>
-    <jh-menu
-      :items="menuItems"
-      @select="handleMenuSelect"
-    />
-  </template>
-</jh-page-container>
-```
-
-### search-bar
-搜索栏区域插槽，通常放置搜索过滤组件
-
-```vue
-<jh-page-container page-name="用户管理">
-  <template v-slot:search-bar>
-    <jh-query-filter
-      :keyword.sync="keyword"
-      :keywordFieldList.sync="keywordFieldList"
-      @search="handleSearch"
-    />
-  </template>
-</jh-page-container>
-```
-
-### content
-主要内容区域插槽，放置页面的主要内容
-
-```vue
-<jh-page-container page-name="用户管理">
-  <template v-slot:content>
-    <jh-table
-      :headers="headers"
-      :items="items"
-    />
-  </template>
-</jh-page-container>
-```
-
-### default
-默认插槽，用于放置其他内容（如抽屉、对话框等）
-
-```vue
-<jh-page-container page-name="用户管理">
-  <template v-slot:content>
-    <!-- 主要内容 -->
-  </template>
-
-  <!-- 默认插槽：抽屉、对话框等 -->
-  <jh-drawer v-model="drawerVisible">
-    <!-- 抽屉内容 -->
-  </jh-drawer>
-</jh-page-container>
-```
-
-## 事件
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| help-click | 点击帮助按钮时触发 | - |
-
-## 使用场景
-
-### 列表页面
-
-```vue
-<template>
-  <jh-page-container
-    page-name="用户列表"
-    @help-click="showHelp"
-  >
-    <template v-slot:search-bar>
-      <jh-query-filter
-        :keyword.sync="keyword"
-        :keywordFieldList.sync="keywordFieldList"
-        :headers="headers"
-        @search="handleSearch"
-      />
-    </template>
-
-    <template v-slot:content>
-      <jh-table
-        :headers="headers"
-        :items="users"
-        :loading="loading"
-        @create-click="handleCreate"
-        @update-click="handleUpdate"
-        @delete-click="handleDelete"
-      />
-    </template>
-  </jh-page-container>
-</template>
-```
-
-### 详情页面
-
-```vue
-<template>
-  <jh-page-container
-    page-name="用户详情"
-    :show-help-button="false"
-  >
-    <template v-slot:content>
-      <jh-descriptions
-        :columns="columns"
-        :data="userDetail"
-      />
-    </template>
-  </jh-page-container>
-</template>
-```
-
-### 表单页面
-
-```vue
-<template>
-  <jh-page-container
-    page-name="新增用户"
-    :show-help-button="false"
-  >
-    <template v-slot:content>
-      <v-card>
-        <v-card-text>
-          <v-form>
-            <v-text-field label="用户名" v-model="form.username" />
-            <v-text-field label="邮箱" v-model="form.email" />
-          </v-form>
-        </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" @click="handleSubmit">提交</v-btn>
-          <v-btn @click="handleCancel">取消</v-btn>
-        </v-card-actions>
-      </v-card>
-    </template>
-  </jh-page-container>
-</template>
-```
-
-## 与 JhLayout 配合使用
-
-推荐的完整页面结构：
-
-```vue
-<template>
-  <jh-layout
-    title="管理系统"
-    :menu-data="menuData"
-    :current-path="currentPath"
-    show-breadcrumb
-    :content-padding="false"
-    :show-page-header="false"
-  >
-    <jh-page-container
-      page-name="用户管理"
-      :show-help-button="true"
-      @help-click="handleHelpClick"
-    >
-      <template v-slot:search-bar>
-        <jh-query-filter
-          :keyword.sync="keyword"
-          :keywordFieldList.sync="keywordFieldList"
-          :headers="headers"
-          @search="handleSearch"
-        />
-      </template>
-
-      <template v-slot:content>
-        <jh-table
-          :headers="headers"
-          :items="items"
-          :loading="loading"
-        />
-      </template>
-    </jh-page-container>
-  </jh-layout>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      currentPath: '/users/list',
-      menuData: [
-        {
-          name: '用户管理',
-          path: '/users/list',
-          icon: 'mdi-account-group'
-        }
-      ],
-      keyword: '',
-      keywordFieldList: ['username', 'email'],
-      headers: [
-        { text: 'ID', value: 'id' },
-        { text: '用户名', value: 'username' },
-        { text: '邮箱', value: 'email' }
-      ],
-      items: [],
-      loading: false
-    };
-  },
-  methods: {
-    handleHelpClick() {
-      // 显示帮助信息
-    },
-    handleSearch() {
-      this.loading = true;
-      // 执行搜索逻辑
-      setTimeout(() => {
-        this.loading = false;
-      }, 1000);
-    }
-  }
-};
-</script>
-```
-
-**配置说明**：
-- `JhLayout` 的 `content-padding` 设置为 `false`，避免与 `JhPageContainer` 的内边距重复
-- `JhLayout` 的 `show-page-header` 设置为 `false`，使用 `JhPageContainer` 的页面标题
-- `JhLayout` 提供应用级导航和面包屑
-- `JhPageContainer` 提供页面级标题和搜索栏
-
-## 内置全局组件
-
-`JhPageContainer` 内置了以下全局组件，无需额外引入：
-
-- **JhToast**: 消息提示组件
-- **JhMask**: 遮罩层组件
-- **JhConfirmDialog**: 确认对话框组件
-
-这些组件可以在页面的任何地方通过事件总线或全局方法调用。
-
-## 响应式设计
-
-组件会自动适配不同屏幕尺寸：
-
-- **桌面端（>= 960px）**: 搜索栏在右侧，与标题同行
-- **移动端（< 960px）**: 搜索栏在标题下方，独占一行
-
-## 样式定制
-
-组件使用 Vuetify 的样式系统，可以通过以下方式定制：
-
-```vue
-<jh-page-container page-name="用户管理">
-  <template v-slot:search-bar>
-    <div class="custom-search-bar">
-      <!-- 自定义样式的搜索栏 -->
-    </div>
-  </template>
-</jh-page-container>
-
-<style scoped>
-.custom-search-bar {
-  /* 自定义样式 */
-}
-</style>
-```
-
-## 最佳实践
-
-1. **标题命名**: 使用清晰、简洁的页面标题，便于用户理解当前页面功能
-2. **帮助按钮**: 对于复杂页面，建议显示帮助按钮，提供操作指引
-3. **搜索栏**: 列表页面建议使用搜索栏，提供快速过滤功能
-4. **内容区域**: 主要内容建议使用卡片或表格组件，保持视觉一致性
-5. **与 JhLayout 配合**: 使用 JhLayout 时，注意避免重复的内边距和头部
-
-## 常见问题
-
-### 如何隐藏帮助按钮？
-
-设置 `show-help-button` 为 `false`：
-
-```vue
-<jh-page-container
-  page-name="用户管理"
-  :show-help-button="false"
->
-</jh-page-container>
-```
-
-### 如何自定义页面标题样式？
-
-页面标题使用 Vuetify 的 `text-body-1` 和 `font-weight-bold` 类，可以通过全局样式覆盖：
-
-```css
-.jh-page-second-bar .text-body-1 {
-  font-size: 18px !important;
-  color: #333 !important;
-}
-```
-
-### 可以不使用 JhLayout 吗？
-
-可以。`JhPageContainer` 内置了 `v-app` 和 `v-main`，可以独立使用。但推荐与 `JhLayout` 配合使用，以获得完整的应用布局。
-
-### 如何在内容区域添加多个卡片？
-
-使用 Vuetify 的栅格系统：
-
-```vue
-<jh-page-container page-name="仪表盘">
-  <template v-slot:content>
-    <v-row>
-      <v-col cols="12" md="6">
-        <v-card>
-          <!-- 卡片 1 -->
-        </v-card>
-      </v-col>
-      <v-col cols="12" md="6">
-        <v-card>
-          <!-- 卡片 2 -->
-        </v-card>
-      </v-col>
-    </v-row>
-  </template>
-</jh-page-container>
-```
-
-## 参考资料
-
-- [JhLayout - 页面布局组件](../JhLayout/JhLayout.md)
-- [JhTable - 数据表格组件](../JhTable/JhTable.md)
-- [JhQueryFilter - 查询过滤组件](../JhQueryFilter/README.md)
-- [Vuetify - Application](https://vuetifyjs.com/en/components/application/)

package/src/components/JhQueryFilter/JhQueryFilter.md

@@ -1,77 +0,0 @@
-# JhQueryFilter - 查询过滤器
-
-JhQueryFilter 用于在列表/报表场景中快速搭建多字段筛选区域，内置折叠、查询/重置按钮及字段联动逻辑。
-
-## 功能特性
-
-- 🧱 **配置化字段**：复用 JhFormFields，支持 JSON 配置与自定义插槽
-- 🔁 **折叠/展开**：根据 `defaultVisibleCount` 决定初始展示字段，支持展开全部
-- ⚡ **一键查询/重置**：内置按钮区，可插槽重写，也可在字段上配置 `realtime`
-- 🎯 **响应式布局**：`colSpan` 控制 xs/sm/md/lg 列宽，自动适配
-- 🧽 **数据清洗**：查询前自动过滤空值，并抛出 `search` 事件
-
-## 基础用法
-
-```vue
-<template>
-  <jh-query-filter
-    :fields="fields"
-    :initial-values="query"
-    :default-visible-count="4"
-    @search="handleSearch"
-    @reset="handleReset"
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| fields | 查询字段配置 | Array | [] |
-| initialValues | 初始查询数据 | Object | `{}` |
-| collapsible | 是否开启折叠 | boolean | true |
-| defaultCollapsed | 默认是否折叠 | boolean | true |
-| defaultVisibleCount | 折叠时展示的字段数 | number | 3 |
-| colSpan | 各断点的列宽设置 | Object | `{ xs:24, sm:12, md:6, lg:4 }` |
-| showLabels | 是否显示字段标签 | boolean | true |
-| dense | 输入框是否紧凑 | boolean | true |
-| filled | 输入框是否 filled | boolean | true |
-| outlined | 输入框是否 outlined | boolean | false |
-| singleLine | 标签是否单行显示 | boolean | true |
-| searchText | 查询按钮文案 | string | `查询` |
-| resetText | 重置按钮文案 | string | `重置` |
-| expandText | 折叠状态下按钮文案 | string | `展开` |
-| collapseText | 展开状态下按钮文案 | string | `收起` |
-| buttonSize | 按钮尺寸 `small/default/large` | string | `small` |
-| buttonAlign | 按钮对齐方式 | string | `left` |
-| loading | 外部 loading 状态 | boolean | false |
-| labelClass | 标签 class | string | `jh-input-label` |
-| inputClass | 输入框 class | string | `jh-v-input` |
-| rowClass | 整体行 class | string | `ma-0` |
-| buttonClass | 按钮容器 class | string | `gap-2` |
-| buttonColumnClass | 操作列 class | string | `''` |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| search | 点击查询或重置后触发，返回过滤后的数据 | (query: object) |
-| reset | 点击重置后触发 | - |
-| field-change | 字段值变化时触发 | ({ key, value, formData }) |
-| collapse-change | 折叠状态切换时触发 | (collapsed: boolean) |
-
-### Slots
-
-| 名称 | 说明 |
-| --- | --- |
-| field-`key` | 自定义某个字段的渲染 |
-| buttons | 自定义操作区，参数 `{ formData, search, reset }` |
-
-## 使用建议
-
-- 想要实时查询的字段可配置 `realtime: true`，组件会在 `field-change` 内自动触发查询
-- 对于日期范围等复杂字段，可将 `type` 设置为 `slot` 并配合插槽自定义
-- 若需要和表格联动，可在 `@search` 中直接触发 `loadTableData(query)`

package/src/components/JhScene/JhScene.md

@@ -1,64 +0,0 @@
-# JhScene - 场景切换组件
-
-JhScene 用于保存并切换用户的查询/配置场景，支持本地存储、场景管理弹窗，适用于列表筛选方案、仪表盘布局等。
-
-## 功能特性
-
-- 🧭 **快速切换**：通过按钮组切换系统场景或自定义场景
-- 🧺 **场景管理**：内置新增、删除弹窗，可管理自定义场景列表
-- 💾 **持久化**：可选择写入 localStorage，刷新后仍保存
-- 🧱 **外部联动**：切换后会将场景对象回传，父组件可更新查询条件
-- 🧩 **可插槽扩展**：提供 `form` 插槽以渲染自定义筛选表单
-
-## 基础用法
-
-```vue
-<template>
-  <jh-scene
-    :scenes="defaultScenes"
-    :init-form-data="query"
-    storage-key="customer-scene"
-    :use-local-storage="true"
-    @scene-change="applyScene"
-    @scene-created="saveScene"
-  >
-    <template #form="{ form }">
-      <customer-filter v-model="form" />
-    </template>
-  </jh-scene>
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| initFormData | 新建场景时复制的初始表单数据 | object | `{}` |
-| storageKey | 使用 localStorage 时的键名 | string | `jh-scene-list` |
-| scenes | 系统内置场景列表 | Array | [] |
-| currentSceneId | 默认选中的场景 id | string | null |
-| showActionBtn | 是否显示“新建/管理”动作按钮 | boolean | true |
-| useLocalStorage | 是否启用 localStorage 持久化 | boolean | false |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| scene-change | 切换场景后触发 | (scene: object) |
-| scene-created | 新建场景成功时触发 | (scene: object) |
-| scene-deleted | 删除场景时触发 | (scene: object) |
-| error | 创建失败（如重名）时触发 | (message: string) |
-
-### Slots
-
-| 名称 | 说明 |
-| --- | --- |
-| form | 新建场景弹窗中的“筛选条件”区域，参数 `{ form }` |
-
-## 使用建议
-
-- 每个场景对象建议包含 `{ id, name, form, system, default }` 等字段，方便控制默认场景
-- 当 `useLocalStorage` 为 true 时，组件自动将所有场景写入浏览器存储
-- 切换场景时会将完整对象抛出，可直接将其 form 数据写回查询条件