jianghu-ui 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jianghu-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "JianghuJS UI Component Library with Storybook, Vue 2, and Vuetify 2",
   "main": "src/index.js",
   "scripts": {

package/src/components/JhDrawer/JhDrawer.stories.js

@@ -115,7 +115,7 @@ export default {
 };
 
 // 基础用法
-export const Basic = {
+export const 基础用法 = {
   render: (args) => ({
     components: { JhDrawer },
     data() {
@@ -188,7 +188,7 @@ export const Basic = {
 };
 
 // 左侧抽屉
-export const LeftDrawer = {
+export const 左侧抽屉 = {
   render: (args) => ({
     components: { JhDrawer },
     data() {
@@ -230,7 +230,7 @@ export const LeftDrawer = {
 };
 
 // 底部抽屉
-export const BottomDrawer = {
+export const 底部抽屉 = {
   render: (args) => ({
     components: { JhDrawer },
     data() {
@@ -282,7 +282,7 @@ export const BottomDrawer = {
 };
 
 // 自定义操作按钮
-export const CustomActions = {
+export const 自定义操作按钮 = {
   render: (args) => ({
     components: { JhDrawer },
     data() {
@@ -369,7 +369,7 @@ export const CustomActions = {
 };
 
 // 无按钮抽屉
-export const NoButtons = {
+export const 无按钮抽屉 = {
   render: (args) => ({
     components: { JhDrawer },
     data() {
@@ -416,7 +416,7 @@ export const NoButtons = {
 };
 
 // 宽度配置
-export const WidthConfig = {
+export const 宽度配置 = {
   render: (args) => ({
     components: { JhDrawer },
     data() {

package/src/components/JhDrawer/JhDrawer.vue

@@ -49,7 +49,7 @@
     <v-divider class="jh-divider"></v-divider>
 
     <!-- 抽屉内容 -->
-    <div class="pa-4">
+    <div :class="drawerContentClass">
       <!-- 完全自定义内容插槽 -->
       <slot></slot>
     </div>
@@ -131,6 +131,12 @@ export default {
       type: String,
       default: '取消'
     },
+
+    // 抽屉内容class
+    drawerContentClass: {
+      type: String,
+      default: 'pa-4',
+    },
   },
 
   data() {

package/src/components/JhDrawerForm/JhDrawerForm.stories.js

@@ -490,3 +490,164 @@ export const 自定义验证 = {
     },
   }),
 };
+
+// 初始化表单数据
+export const 初始化表单数据 = {
+  render: () => ({
+    components: { JhDrawerForm },
+    data() {
+      return {
+        visible: false,
+        fields: [
+          {
+            key: 'username',
+            label: '用户名',
+            type: 'text',
+            rules: 'require',
+            placeholder: '请输入用户名',
+            cols: 12,
+          },
+          {
+            key: 'email',
+            label: '邮箱',
+            type: 'text',
+            rules: 'require|email',
+            placeholder: '请输入邮箱',
+            cols: 12,
+          },
+          {
+            key: 'phone',
+            label: '手机号',
+            type: 'text',
+            rules: 'phone',
+            placeholder: '请输入手机号',
+            cols: 12,
+          },
+          {
+            key: 'role',
+            label: '角色',
+            type: 'select',
+            rules: 'require',
+            options: [
+              { text: '管理员', value: 'admin' },
+              { text: '普通用户', value: 'user' },
+              { text: '访客', value: 'guest' },
+            ],
+            cols: 12,
+          },
+        ],
+        initialData: {
+          username: '默认用户名',
+          email: 'default@example.com',
+          phone: '13800138000',
+          role: 'user',
+        },
+      };
+    },
+    template: `
+      <div>
+        <v-btn color="primary" @click="visible = true">
+          打开表单（带初始数据）
+        </v-btn>
+        <jh-drawer-form
+          v-model="visible"
+          title="用户信息"
+          :fields="fields"
+          :initial-data="initialData"
+          @confirm="handleConfirm"
+        />
+      </div>
+    `,
+    methods: {
+      handleConfirm(data) {
+        console.log('表单数据:', data);
+        alert('提交成功！\n' + JSON.stringify(data, null, 2));
+        this.visible = false;
+      },
+    },
+  }),
+};
+
+// 异步填充数据
+export const 异步填充数据 = {
+  render: () => ({
+    components: { JhDrawerForm },
+    data() {
+      return {
+        visible: false,
+        fields: [
+          {
+            key: 'userId',
+            label: '用户ID',
+            type: 'text',
+            rules: 'require',
+            placeholder: '请输入用户ID',
+            cols: 12,
+          },
+          {
+            key: 'username',
+            label: '用户名',
+            type: 'text',
+            rules: 'require',
+            placeholder: '请输入用户名',
+            cols: 12,
+          },
+          {
+            key: 'email',
+            label: '邮箱',
+            type: 'text',
+            rules: 'require|email',
+            placeholder: '请输入邮箱',
+            cols: 12,
+          },
+          {
+            key: 'phone',
+            label: '手机号',
+            type: 'text',
+            rules: 'phone',
+            placeholder: '请输入手机号',
+            cols: 12,
+          },
+        ],
+      };
+    },
+    template: `
+      <div>
+        <v-btn color="primary" @click="openDrawer">
+          打开表单（异步填充数据）
+        </v-btn>
+        <jh-drawer-form
+          ref="drawerForm"
+          v-model="visible"
+          title="用户信息"
+          :fields="fields"
+          @confirm="handleConfirm"
+        />
+      </div>
+    `,
+    methods: {
+      // 打开抽屉并异步填充数据
+      openDrawer() {
+        this.visible = true;
+        
+        // 模拟异步请求获取数据
+        setTimeout(() => {
+          // 等待抽屉完全打开后设置数据
+          this.$nextTick(() => {
+            this.$refs.drawerForm.setFieldsValue({
+              userId: '1001',
+              username: '异步获取的用户名',
+              email: 'async@example.com',
+              phone: '13900139000',
+            });
+          });
+        }, 1000); // 模拟1秒的网络延迟
+      },
+      handleConfirm(data) {
+        console.log('表单数据:', data);
+        alert('提交成功！\n' + JSON.stringify(data, null, 2));
+        this.visible = false;
+      },
+    },
+  }),
+};

package/src/components/JhDrawerForm/JhDrawerForm.vue

@@ -9,7 +9,7 @@
     class="elevation-24"
   >
     <!-- 抽屉标题 -->
-    <v-row class="jh-drawer-header px-4 bg-white" no-gutters align="center">
+    <v-row class="jh-drawer-header px-4 bg-white sticky top-0 z-10" no-gutters align="center">
       <span class="text-h7 font-weight-bold py-4">{{ title }}</span>
       <v-spacer></v-spacer>
 

package/src/components/JhForm/JhForm.stories.js

@@ -301,8 +301,8 @@ export const Grid栅格布局 = {
     template: `
       <JhForm v-bind="args">
         <template #actions="{ validate, resetForm }">
-          <v-btn class="mr-2" text @click="resetForm">重置</v-btn>
-          <v-btn color="primary" @click="validate">提交</v-btn>
+          <v-btn class="mr-2 mt-4" text @click="resetForm">重置</v-btn>
+          <v-btn color="primary mt-4" @click="validate">提交</v-btn>
         </template>
       </JhForm>
     `,
@@ -656,8 +656,8 @@ export const 行内布局 = {
       <div>
         <JhForm v-bind="args">
           <template #actions="{ validate, resetForm }">
-            <v-btn color="primary" class="ml-2" @click="validate">查询</v-btn>
-            <v-btn text class="ml-2" @click="resetForm">重置</v-btn>
+            <v-btn color="primary" class="ml-2 mt-4" @click="validate">查询</v-btn>
+            <v-btn text class="ml-2 mt-4" @click="resetForm">重置</v-btn>
           </template>
         </JhForm>
       </div>
@@ -1059,97 +1059,6 @@ export const 数据转换 = {
   }),
 };
 
-// onFinish 回调示例
-export const 提交回调 = {
-  args: {
-    fields: [
-      {
-        key: 'title',
-        label: '标题',
-        type: 'text',
-        placeholder: '请输入标题',
-        required: true,
-      },
-      {
-        key: 'content',
-        label: '内容',
-        type: 'textarea',
-        placeholder: '请输入内容',
-        required: true,
-        rows: 4,
-        cols: { md: 12 },
-      },
-    ],
-    initialData: {
-      title: '',
-      content: '',
-    },
-  },
-  render: (args) => ({
-    components: { JhForm },
-    data() {
-      return {
-        args: {
-          ...args,
-          onFinish: this.handleFinish,
-          onFinishFailed: this.handleFinishFailed,
-        },
-        loading: false,
-      };
-    },
-    template: `
-      <div>
-        <JhForm v-bind="args">
-          <template #actions="{ validate, resetForm }">
-            <v-row class="mt-4">
-              <v-col cols="12" class="text-right">
-                <v-btn class="mr-2" @click="resetForm" :disabled="loading">重置</v-btn>
-                <v-btn 
-                  color="success" 
-                  @click="validate" 
-                  :loading="loading"
-                >
-                  提交
-                </v-btn>
-              </v-col>
-            </v-row>
-          </template>
-        </JhForm>
-        <v-alert v-if="submitResult" :type="submitResult.type" class="mt-4">
-          {{ submitResult.message }}
-        </v-alert>
-      </div>
-    `,
-    data() {
-      return {
-        submitResult: null,
-      };
-    },
-    methods: {
-      async handleFinish(values) {
-        this.loading = true;
-        this.submitResult = null;
-        
-        // 模拟 API 调用
-        await new Promise(resolve => setTimeout(resolve, 1500));
-        
-        console.log('提交成功:', values);
-        this.submitResult = {
-          type: 'success',
-          message: '提交成功! 数据: ' + JSON.stringify(values),
-        };
-        this.loading = false;
-      },
-      handleFinishFailed(values) {
-        console.log('验证失败:', values);
-        this.submitResult = {
-          type: 'error',
-          message: '表单验证失败,请检查必填项',
-        };
-      },
-    },
-  }),
-};
 
 // 只读模式示例
 export const 只读模式 = {
@@ -1227,6 +1136,116 @@ export const 只读模式 = {
   },
 };
 
+// 增强版提交功能示例
+export const 增强版提交功能 = {
+  args: {
+    fields: [
+      {
+        key: 'name',
+        label: '姓名',
+        type: 'text',
+        placeholder: '请输入姓名',
+        required: true,
+        cols: { md: 6 },
+      },
+      {
+        key: 'email',
+        label: '邮箱',
+        type: 'text',
+        placeholder: '请输入邮箱',
+        rules: 'email',
+        required: true,
+        cols: { md: 6 },
+      },
+      {
+        key: 'phone',
+        label: '手机号',
+        type: 'text',
+        placeholder: '请输入手机号',
+        rules: 'phone',
+        required: true,
+        cols: { md: 12 },
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { JhForm },
+    data() {
+      return {
+        args,
+        submitResult: null,
+      };
+    },
+    template: `
+      <div>
+        <JhForm v-bind="args" ref="form" @submit-error="handleSubmitError">
+          <template #actions="{ validate, resetForm }">
+            <v-row class="mt-4">
+              <v-col cols="12" class="text-right">
+                <v-btn class="mr-2" @click="resetForm">重置</v-btn>
+                <v-btn 
+                  color="success" 
+                  @click="handleSubmit" 
+                  :loading="$refs.form?.submitLoading"
+                >
+                  提交（增强版）
+                </v-btn>
+              </v-col>
+            </v-row>
+          </template>
+        </JhForm>
+        <v-alert 
+          v-if="submitResult" 
+          :type="submitResult.type" 
+          class="mt-4"
+        >
+          {{ submitResult.message }}
+        </v-alert>
+        <v-alert 
+          v-if="$refs.form?.submitError" 
+          type="error" 
+          class="mt-4"
+        >
+          提交错误: {{ $refs.form.submitError }}
+        </v-alert>
+        <div class="mt-4">
+          <v-btn text @click="showFormState">查看表单状态</v-btn>
+        </div>
+      </div>
+    `,
+    methods: {
+      async handleSubmit() {
+        this.submitResult = null;
+        
+        const result = await this.$refs.form.submit({
+          showLoading: true,
+          resetError: true
+        });
+        
+        if (result) {
+          this.submitResult = {
+            type: 'success',
+            message: '提交成功！',
+          };
+        } else {
+          this.submitResult = {
+            type: 'error',
+            message: '提交失败，请检查表单',
+          };
+        }
+      },
+      handleSubmitError(error) {
+        console.error('提交错误:', error);
+      },
+      showFormState() {
+        const state = this.$refs.form.getFormState();
+        console.log('表单状态:', state);
+        alert('表单状态已打印到控制台，请查看');
+      },
+    },
+  }),
+};
+
 // 使用 JhFormFields 组合表单
 export const 使用JhFormFields组合 = () => ({
   components: { JhFormFields },