jianghu-ui 1.0.1

package/src/components/JhDrawer/JhDrawer.vue

@@ -0,0 +1,281 @@
+<template>
+  <v-navigation-drawer
+    v-model="isShownInternal"
+    :permanent="isShownInternal"
+    fixed
+    temporary
+    :right="position === 'right'"
+    :left="position === 'left'"
+    :bottom="isBottomPosition"
+    :width="drawerWidth"
+    :height="drawerHeight"
+    v-bind="mergedDrawerProps"
+    v-on="drawerListeners"
+    :class="drawerClasses"
+    :style="drawerStyles"
+  >
+    <!-- 抽屉标题 -->
+    <v-row v-if="title" 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>
+
+      <!-- 操作按钮组 -->
+      <div class="jh-drawer-action-btn-group">
+        <!-- 自定义操作按钮插槽 -->
+        <slot name="actions">
+          <!-- 默认按钮组 -->
+          <v-btn
+            v-if="showCancelButton"
+            class="elevation-0 grey lighten-4"
+            @click="handleCancel"
+            small
+          >
+            {{ cancelText }}
+          </v-btn>
+          
+          <v-btn
+            v-if="showConfirmButton"
+            color="success"
+            class="ml-2"
+            small
+            @click="handleConfirm"
+          >
+            {{ confirmText }}
+          </v-btn>
+        </slot>
+      </div>
+    </v-row>
+
+    <v-divider class="jh-divider"></v-divider>
+
+    <!-- 抽屉内容 -->
+    <div class="pa-4">
+      <!-- 完全自定义内容插槽 -->
+      <slot></slot>
+    </div>
+
+    <!-- 抽屉关闭按钮 -->
+    <v-btn
+      v-if="shouldRenderCloseButton"
+      elevation="0"
+      color="success"
+      fab
+      absolute
+      top
+      left
+      small
+      tile
+      class="drawer-close-float-btn"
+      @click="handleCancel"
+    >
+      <v-icon>mdi-close</v-icon>
+    </v-btn>
+  </v-navigation-drawer>
+</template>
+
+<script>
+export default {
+  name: 'JhDrawer',
+  inheritAttrs: false,
+
+  props: {
+    // 抽屉显示状态
+    value: {
+      type: Boolean,
+      default: false
+    },
+
+    // 抽屉标题
+    title: {
+      type: String,
+      default: ''
+    },
+
+    // 抽屉位置
+    position: {
+      type: String,
+      default: 'right',
+      validator: (v) => ['left', 'right', 'bottom'].includes(v)
+    },
+
+    // 抽屉宽度
+    width: {
+      type: [String, Number],
+      default: '90%'
+    },
+
+    // 底部抽屉高度
+    height: {
+      type: [String, Number],
+      default: '60vh'
+    },
+
+    // 按钮配置
+    showConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: true
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
+    confirmText: {
+      type: String,
+      default: '确认'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+  },
+
+  data() {
+    return {
+      isShownInternal: this.value,
+    };
+  },
+  computed: {
+    isBottomPosition() {
+      return this.position === 'bottom';
+    },
+    drawerWidth() {
+      return this.isBottomPosition ? '100%' : this.width;
+    },
+    drawerHeight() {
+      return this.isBottomPosition ? this.height : undefined;
+    },
+    shouldRenderCloseButton() {
+      return this.showCloseButton && !this.isBottomPosition;
+    },
+    drawerClasses() {
+      return [
+        'elevation-24',
+        { 'jh-drawer-bottom': this.isBottomPosition },
+        this.$attrs.class
+      ];
+    },
+    drawerStyles() {
+      const attrsStyle = this.$attrs ? this.$attrs.style : null;
+      if (!this.isBottomPosition) {
+        return attrsStyle || null;
+      }
+      const baseStyle = {
+        borderTopLeftRadius: '16px',
+        borderTopRightRadius: '16px',
+        top: 'auto',
+        bottom: '0',
+        left: '0',
+        right: '0'
+      };
+      return attrsStyle ? [baseStyle, attrsStyle] : baseStyle;
+    },
+    // 合并透传属性，只排除组件内部明确处理的属性
+    mergedDrawerProps() {
+      // 只排除组件内部明确处理的属性，其他所有属性都透传给 v-navigation-drawer
+      const excludedAttrs = [
+        'class', 'style',
+        // 这些属性在组件内部有特殊处理
+        'value', 'modelValue', 'permanent', 'fixed', 'temporary', 'right', 'left', 'bottom', 'width', 'height',
+        // JhDrawer 特有的 props（不在 v-navigation-drawer 中）
+        'title', 'position', 'showConfirmButton', 'showCancelButton', 'showCloseButton',
+        'confirmText', 'cancelText'
+      ];
+      
+      const { class: cls, style, ...rest } = this.$attrs || {};
+      const filteredAttrs = {};
+      
+      Object.keys(rest).forEach(key => {
+        const keyKebab = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        // 只排除明确处理的属性，其他都透传
+        if (!excludedAttrs.includes(key) && !excludedAttrs.includes(keyKebab)) {
+          filteredAttrs[key] = rest[key];
+        }
+      });
+      
+      return filteredAttrs;
+    },
+    // 透传所有事件，只排除组件内部明确处理的事件
+    drawerListeners() {
+      // 只排除组件内部明确处理的事件，其他所有事件都透传给 v-navigation-drawer
+      const excludedEvents = [
+        // JhDrawer 特有的事件（不在 v-navigation-drawer 中）
+        'open', 'close', 'confirm', 'cancel'
+      ];
+      
+      const listeners = { ...this.$listeners || {} };
+      const filteredListeners = {};
+      
+      Object.keys(listeners).forEach(key => {
+        // 只排除明确处理的事件，其他都透传
+        if (!excludedEvents.includes(key)) {
+          filteredListeners[key] = listeners[key];
+        }
+      });
+      
+      return filteredListeners;
+    }
+  },
+
+  watch: {
+    value(val) {
+      this.isShownInternal = val;
+      if (val) {
+        this.$emit('open');
+      }
+    },
+    isShownInternal(val) {
+      if (!val) {
+        this.$emit('input', false);
+        this.$emit('close');
+      }
+    }
+  },
+
+  methods: {
+    // 处理取消
+    handleCancel() {
+      this.$emit('cancel');
+      this.isShownInternal = false;
+    },
+
+    // 处理确认
+    handleConfirm() {
+      this.$emit('confirm');
+    },
+
+    // 打开抽屉
+    open() {
+      this.isShownInternal = true;
+    },
+
+    // 关闭抽屉
+    close() {
+      this.isShownInternal = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.jh-drawer-header {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.jh-drawer-action-btn-group {
+  display: flex;
+  align-items: center;
+}
+
+.jh-drawer-bottom {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+.drawer-close-float-btn {
+  z-index: 1000;
+}
+</style>

package/src/components/JhDrawerForm/JhDrawerForm.md

@@ -0,0 +1,69 @@
+# JhDrawerForm - 抽屉表单组件
+
+JhDrawerForm 结合 JhForm 与抽屉交互，提供一站式的复杂表单容器，适用于创建、编辑、批量配置等场景。
+
+## 功能特性
+
+- 🧱 **抽屉展示**：继承 JhDrawer 交互，支持左右滑出、头部按钮、浮动关闭
+- 🧩 **JSON 配置渲染**：内置 JhForm，可通过字段配置快速生成表单
+- 🔁 **自动重置**：抽屉打开时自动重置表单与校验状态
+- 🧯 **表单方法透出**：提供 `getFormData`、`validate` 等方法，方便父组件调用
+- 🎛️ **插槽灵活**：支持 `field-xxx` 自定义字段、`actions` 重写按钮区
+
+## 基础用法
+
+```vue
+<template>
+  <jh-drawer-form
+    v-model="drawerVisible"
+    title="编辑商品"
+    :fields="formFields"
+    :initial-data="formData"
+    @confirm="submit"
+  />
+</template>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | v-model，抽屉显隐 | boolean | false |
+| title | 抽屉标题 | string | `表单` |
+| position | 抽屉位置 `left/right` | string | `right` |
+| width | 抽屉宽度 | string | `90%` |
+| showConfirmButton | 是否显示确认按钮 | boolean | true |
+| confirmText | 确认按钮文本 | string | `确认` |
+| cancelText | 取消按钮文本 | string | `取消` |
+| formRef | 内部 JhForm 的 ref 名称 | string | `drawerForm` |
+| validateBeforeConfirm | 点击确认时是否先校验 | boolean | true |
+| fields | JhForm 字段配置数组 | Array | [] |
+| initialData | 初始表单数据 | Object | `{}` |
+| rowClass | 自定义行 class | string | `mt-0` |
+| validationRules | 通用验证规则 | Object | 预置常用规则 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| input | `v-model` 更新事件 | (visible: boolean) |
+| close | 抽屉关闭时触发 | - |
+| confirm | 校验通过后触发 | (formData: object) |
+| cancel | 点击取消/浮动按钮时触发 | - |
+| field-change | JhForm 字段变化时触发 | ({ key, value, formData }) |
+
+### Slots
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 覆盖整个内容区域，自行渲染 | 
+| actions | 自定义头部按钮区 |
+| field-`key` | 针对某个字段自定义渲染，`key` 为字段 `key` 值 |
+
+## 常用技巧
+
+- 通过 `this.$refs.drawerForm.getFormData()` 可在外层随时读取当前表单
+- 如果需要在关闭后保留数据，可在外部监听 `close` 再决定是否重置
+- 表单字段中可结合 `type: 'slot'` 与 `field-xxx` 插槽编写自定义组件