jianghu-ui 1.0.1

package/src/components/JhPageContainer/JhPageContainer.stories.js

@@ -0,0 +1,209 @@
+import JhPageContainer from './JhPageContainer.vue';
+import JhQueryFilter from '../JhQueryFilter/JhQueryFilter.vue';
+import JhTable from '../JhTable/JhTable.vue';
+import JhMenu from '../JhMenu/JhMenu.vue';
+
+// 示例数据
+const sampleHeaders = [
+  { text: 'ID', value: 'id' },
+  { text: '用户名', value: 'username' },
+  { text: '邮箱', value: 'email' },
+  { text: '状态', value: 'status' },
+  { text: '创建时间', value: 'createdAt' },
+  { text: '操作', value: 'action', width: '150px', sortable: false },
+];
+
+const sampleItems = [
+  { id: 1, username: '张三', email: 'zhangsan@example.com', status: '启用', createdAt: '2024-01-01' },
+  { id: 2, username: '李四', email: 'lisi@example.com', status: '启用', createdAt: '2024-01-02' },
+  { id: 3, username: '王五', email: 'wangwu@example.com', status: '禁用', createdAt: '2024-01-03' },
+];
+
+export default {
+  title: '布局/JhPageContainer - 页容器',
+  component: JhPageContainer,
+  tags: ['autodocs'],
+  argTypes: {
+    pageName: {
+      control: 'text',
+      description: '页面标题',
+    },
+    showHelpButton: {
+      control: 'boolean',
+      description: '是否显示帮助按钮',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+
+页面容器组件，提供统一的页面布局结构。这是与 test 目录中组件样式和功能保持一致的基础版本。
+
+## 功能特性
+
+- 统一的页面头部布局
+- 页面标题显示
+- 帮助按钮
+- 搜索栏插槽
+- 内容区域插槽
+- 响应式布局
+
+## 使用场景
+
+适用于所有标准页面布局，提供统一的外观和体验：
+- 列表页面
+- 详情页面
+- 表单页面
+
+## 事件
+
+- \`help-click\`: 点击帮助按钮时触发
+
+## 插槽
+
+- \`search-bar\`: 搜索栏区域
+- \`content\`: 主要内容区域
+- \`default\`: 其他内容（如抽屉、对话框等）
+        `,
+      },
+    },
+  },
+};
+
+
+// 基础示例
+export const 基础示例 = {
+  args: {
+    pageName: '用户管理',
+    showHelpButton: true,
+  },
+  render: (args) => ({
+    components: { JhPageContainer, JhQueryFilter, JhTable, JhMenu },
+    data() {
+      return {
+        args,
+        keyword: '',
+        keywordFieldList: ['username', 'email'],
+        headers: sampleHeaders,
+        items: sampleItems,
+        loading: false,
+        menuItems: [
+          { text: '用户管理', value: 'user', icon: 'mdi-account' },
+          { text: '角色管理', value: 'role', icon: 'mdi-shield-account' },
+          { text: '权限管理', value: 'permission', icon: 'mdi-key' },
+        ],
+      };
+    },
+    template: `
+      <jh-page-container
+        v-bind="args"
+        @help-click="handleHelpClick"
+      >
+        <template v-slot:menu>
+          <jh-menu
+            :items="menuItems"
+            @select="handleMenuSelect"
+          />
+        </template>
+        <template v-slot:search-bar>
+          <jh-query-filter
+            class="pa-0"
+            :keyword.sync="keyword"
+            :keywordFieldList.sync="keywordFieldList"
+            :headers="headers"
+            @search="handleSearch"
+          />
+        </template>
+
+        <template v-slot:content>
+          <jh-table
+            :headers="headers"
+            :items="items"
+            :loading="loading"
+            @create-click="handleCreate"
+            @update-click="handleUpdate"
+            @delete-click="handleDelete"
+          />
+        </template>
+      </jh-page-container>
+    `,
+    methods: {
+      handleHelpClick() {
+        alert('帮助按钮被点击');
+      },
+      handleMenuSelect(item) {
+        alert('切换菜单：' + item.text);
+      },
+      handleSearch() {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+        }, 1000);
+      },
+      handleCreate() {
+        alert('新增用户');
+      },
+      handleUpdate(item) {
+        alert('详情：' + item.username);
+      },
+      handleDelete(item) {
+        alert('删除：' + item.username);
+      },
+    },
+  }),
+};
+
+// 无帮助按钮
+export const 无帮助按钮 = {
+  args: {
+    ...基础示例.args,
+    showHelpButton: false,
+  },
+  render: 基础示例.render,
+};
+
+// 自定义标题
+export const 自定义标题 = {
+  args: {
+    ...基础示例.args,
+    pageName: '订单管理系统',
+  },
+  render: 基础示例.render,
+};
+
+// 空内容
+export const 空内容 = {
+  args: {
+    ...基础示例.args,
+  },
+  render: (args) => ({
+    components: { JhPageContainer },
+    data() {
+      return {
+        args,
+      };
+    },
+    template: `
+      <jh-page-container
+        v-bind="args"
+        @help-click="handleHelpClick"
+      >
+        <template v-slot:content>
+          <v-card outlined>
+            <v-card-text class="text-center pa-8">
+              <v-icon size="64" color="grey lighten-1">mdi-inbox</v-icon>
+              <div class="text-h6 grey--text mt-4">暂无数据</div>
+              <div class="grey--text text--lighten-1 mt-2">请点击"新增"按钮添加数据</div>
+            </v-card-text>
+          </v-card>
+        </template>
+      </jh-page-container>
+    `,
+    methods: {
+      handleHelpClick() {
+        alert('帮助按钮被点击');
+      },
+    },
+  }),
+};

package/src/components/JhPageContainer/JhPageContainer.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <v-app mobile-breakpoint="sm">
+  <slot name="menu"></slot>
+  <v-main class="mt-15">
+    <!-- 头部内容 -->
+    <div class="jh-page-second-bar px-3 px-sm-8">
+      <v-row class="align-center" no-gutters>
+        <!-- 页面标题 -->
+        <v-col cols="12" sm="12" md="4" xl="3">
+          <div class="py-4 text-body-1 font-weight-bold align-center d-flex align-center">
+            {{ pageName }}
+            <!-- 帮助页按钮 -->
+            <v-icon
+              v-if="showHelpButton"
+              size="15"
+              class="black--text ml-1"
+              @click="$emit('help-click')"
+            >
+              mdi-help-circle
+            </v-icon>
+          </div>
+        </v-col>
+
+        <!-- 搜索栏插槽 -->
+        <v-spacer></v-spacer>
+        <v-col cols="12" xs="12" sm="12" md="8" xl="9" class="pl-md-2 mb-2 mb-md-0 flex justify-end">
+          <slot name="search-bar"></slot>
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- 页面内容 -->
+    <div class="jh-page-body-container px-sm-8">
+      <v-row class="pa-0 ma-0">
+        <v-col class="pa-0" :cols="12">
+          <slot name="content"></slot>
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- 其他插槽（如抽屉等） -->
+    <slot></slot>
+
+    
+   </v-main>
+</v-app>
+
+<jh-toast />
+<jh-mask />
+<jh-confirm-dialog />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JhPageContainer',
+  props: {
+    // 页面主标题，显示在顶部 Title 区域
+    pageName: {
+      type: String,
+      required: true,
+      default: '页面标题'
+    },
+    // 是否展示右上角的帮助按钮
+    showHelpButton: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>

package/src/components/JhQueryFilter/JhQueryFilter.md

@@ -0,0 +1,77 @@
+# 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)`