jianghu-ui 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jianghu-ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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/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 },

package/src/components/JhForm/JhForm.vue

@@ -166,7 +166,7 @@ export default {
     // 隐藏详情信息
     hideDetails: {
       type: [Boolean, String],
-      default: false,
+      default: true,
     },
 
     // 自定义标签样式类
@@ -251,6 +251,9 @@ export default {
   data() {
     return {
       formData: {},
+      // 表单提交状态
+      submitLoading: false,
+      submitError: null,
     };
   },
 
@@ -350,7 +353,7 @@ export default {
       // 只排除组件内部明确处理的事件，其他所有事件都透传给 v-form
       const excludedEvents = [
         // JhForm 特有的事件（不在 v-form 中）
-        'submit', 'reset', 'validate', 'input', 'change', 'blur', 'field-change'
+        'field-change'
       ];
       
       const listeners = { ...this.$listeners || {} };
@@ -456,6 +459,27 @@ export default {
     getForm() {
       return this.$refs[this.formRef];
     },
+    
+    // 转发 v-form 的所有方法
+    ...(() => {
+      const methods = {};
+      // 定义需要转发的 v-form 方法
+      const formMethods = ['validate', 'reset', 'resetValidation'];
+      
+      formMethods.forEach(methodName => {
+        methods[methodName] = function(...args) {
+          const form = this.$refs[this.formRef];
+          if (form && typeof form[methodName] === 'function') {
+            return form[methodName](...args);
+          }
+          // 如果 v-form 不存在或方法不存在，返回默认值
+          if (methodName === 'validate') return true;
+          return undefined;
+        };
+      });
+      
+      return methods;
+    })(),
 
     // 获取表单数据
     getFormData() {
@@ -518,28 +542,97 @@ export default {
       return true;
     },
 
-    // 提交表单
-    async submit() {
-      const isValid = await this.validate();
-      if (isValid) {
-        const transformedData = this.getTransformedData();
+    // 提交表单（增强版，支持加载状态和错误处理）
+    async submit(options = {}) {
+      const {
+        validate = true,
+        transform = true,
+        showLoading = false,
+        resetError = true
+      } = options;
+      
+      // 重置错误
+      if (resetError) {
+        this.submitError = null;
+      }
+      
+      // 显示加载状态
+      if (showLoading) {
+        this.submitLoading = true;
+      }
+      
+      try {
+        // 验证表单
+        if (validate) {
+          const isValid = await this.validate();
+          if (!isValid) {
+            // 调用 onFinishFailed 回调
+            if (this.onFinishFailed) {
+              this.onFinishFailed(this.formData);
+            }
+            return false;
+          }
+        }
+        
+        // 转换数据
+        const transformedData = transform ? this.getTransformedData() : { ...this.formData };
+        
+        // 触发 submit 事件
         this.$emit('submit', transformedData);
         
         // 调用 onFinish 回调
         if (this.onFinish) {
-          try {
-            await this.onFinish(transformedData);
-          } catch (error) {
-            console.error('Form submit error:', error);
-          }
+          await this.onFinish(transformedData);
         }
-      } else {
-        // 调用 onFinishFailed 回调
-        if (this.onFinishFailed) {
-          this.onFinishFailed(this.formData);
+        
+        return true;
+      } catch (error) {
+        console.error('Form submit error:', error);
+        this.submitError = error.message || '提交失败';
+        this.$emit('submit-error', error);
+        return false;
+      } finally {
+        // 隐藏加载状态
+        if (showLoading) {
+          this.submitLoading = false;
         }
       }
-      return isValid;
+    },
+    
+    // 验证单个字段（增强版）
+    async validateField(fieldName) {
+      // 首先尝试通过 v-form 验证
+      const form = this.$refs[this.formRef];
+      if (form && form.validate) {
+        // v-form 的 validate 方法会验证所有字段
+        // 这里我们返回整体验证结果
+        return await this.validate();
+      }
+      
+      // 如果 v-form 不存在，返回 true
+      return true;
+    },
+    
+    // 获取表单状态
+    getFormState() {
+      return {
+        submitLoading: this.submitLoading,
+        submitError: this.submitError,
+        formData: { ...this.formData }
+      };
+    },
+    
+    // 清除提交错误
+    clearSubmitError() {
+      this.submitError = null;
+    },
+    
+    // 批量更新字段值
+    batchUpdateFields(values) {
+      Object.keys(values).forEach(key => {
+        this.$set(this.formData, key, values[key]);
+        this.handleFieldChange({ key, value: values[key] });
+      });
     },
 
     // 获取转换后的数据
@@ -604,10 +697,44 @@ export default {
 }
 
 /* 只读模式 */
-.jh-form--readonly .jh-form-readonly-text {
-  padding: 8px 0;
-  min-height: 40px;
-  color: rgba(0, 0, 0, 0.87);
+.jh-form--readonly {
+  /* 只读模式整体样式 */
+  .jh-field-label {
+    /* 只读模式下的标签样式 */
+    color: rgba(0, 0, 0, 0.65);
+    font-weight: 500;
+  }
+  
+  .jh-form-readonly-text {
+    /* 只读模式下的文本样式 */
+    padding: 6px 12px;
+    color: rgba(0, 0, 0, 0.87);
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    line-height: 1.5;
+    transition: all 0.2s ease;
+  }
+  
+  /* 水平布局下的调整 */
+  &.jh-form--horizontal {
+    .jh-field-wrapper {
+      margin-bottom: 16px;
+    }
+  }
+  
+  /* 垂直布局下的调整 */
+  &.jh-form--vertical {
+    .jh-field-wrapper {
+      margin-bottom: 16px;
+    }
+  }
+  
+  /* 网格布局下的调整 */
+  &.jh-form--grid {
+    .jh-field-wrapper {
+      margin-bottom: 16px;
+    }
+  }
 }
 
 /* 字段标签 */

package/src/components/JhFormFields/JhFormFields.vue

@@ -74,11 +74,6 @@
                 </v-tooltip>
               </div>
 
-              <!-- 额外提示信息 -->
-              <div v-if="field.extra" class="jh-field-extra text-caption grey--text mb-2">
-                {{ field.extra }}
-              </div>
-
               <!-- 只读模式展示 -->
               <div v-if="isFieldReadonly(field)" class="jh-form-readonly-text">
                 {{ getReadonlyValue(field) }}
@@ -168,6 +163,7 @@
                   :multiple="field.multiple"
                   :chips="field.chips"
                   :hide-details="field.hideDetails || hideDetails"
+                  small-chips
                   v-bind="field.props"
                   @change="handleChange(field.key, $event)"
                   @blur="handleBlur(field.key, $event)"
@@ -912,7 +908,7 @@ export default {
 .jh-form-fields--bordered {
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 4px;
-  padding: 16px;
+  padding: 15px 16px 30px;
 }
 
 .jh-form-fields-header {
@@ -943,10 +939,37 @@ export default {
   margin-bottom: 0 !important;
 }
 
-.jh-form-fields--readonly .jh-form-readonly-text {
-  padding: 8px 0;
-  min-height: 40px;
-  color: rgba(0, 0, 0, 0.87);
+.jh-form-fields--readonly {
+  /* 只读模式整体样式 */
+  .jh-field-label {
+    /* 只读模式下的标签样式 */
+    color: rgba(0, 0, 0, 0.65);
+    font-weight: 500;
+  }
+  
+  .jh-form-readonly-text {
+    /* 只读模式下的文本样式 */
+    padding: 6px 12px;
+    color: rgba(0, 0, 0, 0.87);
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    line-height: 1.5;
+    transition: all 0.2s ease;
+  }
+  
+  /* 水平布局下的调整 */
+  &.jh-form-fields--horizontal {
+    .jh-field-wrapper {
+      margin-bottom: 16px;
+    }
+  }
+  
+  /* 垂直布局下的调整 */
+  &.jh-form-fields--vertical {
+    .jh-field-wrapper {
+      margin-bottom: 16px;
+    }
+  }
 }
 
 .jh-field-label {
@@ -983,10 +1006,6 @@ export default {
   word-break: break-word;
 }
 
-.jh-field-extra {
-  margin-top: -8px;
-  line-height: 1.5;
-}
 
 .jh-color-preview {
   display: inline-block;

package/src/components/JhModal/JhModal.stories.js

@@ -119,7 +119,7 @@ export default {
 };
 
 // 基础用法
-export const Basic = {
+export const 基础用法 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -194,7 +194,7 @@ export const Basic = {
 };
 
 // 全屏弹窗
-export const Fullscreen = {
+export const 全屏弹窗 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -260,7 +260,7 @@ export const Fullscreen = {
 };
 
 // 自定义操作按钮
-export const CustomActions = {
+export const 自定义操作按钮 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -352,7 +352,7 @@ export const CustomActions = {
 };
 
 // 无操作区域
-export const NoActions = {
+export const 无操作区域 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -416,7 +416,7 @@ export const NoActions = {
 };
 
 // 不同尺寸
-export const DifferentSizes = {
+export const 不同尺寸 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -525,7 +525,7 @@ export const DifferentSizes = {
 };
 
 // 非持久化弹窗
-export const NonPersistent = {
+export const 非持久化弹窗 = {
   render: (args) => ({
     components: { JhModal },
     data() {

package/src/components/JhModal/JhModal.vue

@@ -10,7 +10,7 @@
   >
     <v-card>
       <!-- 标题栏 -->
-      <v-card-title class="d-flex align-center justify-space-between pa-4  sticky top-0 z-10 bg-white darken-1">
+      <v-card-title class="d-flex align-center justify-space-between pa-4 sticky top-0 z-10 bg-white darken-1">
         <span class="text-h6">{{ title }}</span>
         <v-btn
           v-if="closable"

package/src/components/JhModalForm/JhModalForm.vue

@@ -8,7 +8,7 @@
   >
     <v-card>
       <!-- 标题栏 -->
-      <v-card-title class="d-flex align-center justify-space-between pa-4">
+      <v-card-title class="d-flex align-center justify-space-between pa-4 sticky top-0 z-10 bg-white darken-1">
         <span class="text-h6">{{ title }}</span>
         <v-btn
           v-if="closable"