jianghu-ui 1.0.1

package/src/components/JhModal/JhModal.vue

@@ -0,0 +1,235 @@
+<template>
+  <v-dialog
+    v-model="isShownInternal"
+    :max-width="width"
+    :persistent="persistent"
+    :fullscreen="fullscreen"
+    v-bind="mergedDialogProps"
+    v-on="dialogListeners"
+    @keydown.esc="handleCancel"
+  >
+    <v-card>
+      <!-- 标题栏 -->
+      <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"
+          icon
+          small
+          @click="handleCancel"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-divider />
+
+      <!-- 弹窗内容 -->
+      <v-card-text class="pa-6">
+        <!-- 完全自定义内容插槽 -->
+        <slot></slot>
+      </v-card-text>
+
+      <!-- 底部按钮 -->
+      <template v-if="showActions">
+        <v-divider />
+        <v-card-actions class="pa-4">
+          <!-- 自定义操作按钮插槽 -->
+          <slot name="actions">
+            <!-- 默认按钮组 -->
+            <v-spacer />
+            <v-btn
+              v-if="showCancelButton"
+              text
+              @click="handleCancel"
+            >
+              {{ cancelText }}
+            </v-btn>
+            <v-btn
+              v-if="showConfirmButton"
+              color="success"
+              @click="handleConfirm"
+            >
+              {{ confirmText }}
+            </v-btn>
+          </slot>
+        </v-card-actions>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'JhModal',
+  inheritAttrs: false,
+
+  props: {
+    // v-model 控制显示/隐藏
+    value: {
+      type: Boolean,
+      default: false,
+    },
+
+    // 标题
+    title: {
+      type: String,
+      default: '弹窗',
+    },
+
+    // 弹窗宽度
+    width: {
+      type: [Number, String],
+      default: 600,
+    },
+
+    // 是否全屏
+    fullscreen: {
+      type: Boolean,
+      default: false,
+    },
+
+    // 是否持久化（点击外部不关闭）
+    persistent: {
+      type: Boolean,
+      default: true,
+    },
+
+    // 是否显示关闭按钮
+    closable: {
+      type: Boolean,
+      default: true,
+    },
+
+    // 是否显示底部操作区域
+    showActions: {
+      type: Boolean,
+      default: true,
+    },
+
+    // 按钮配置
+    showConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: true
+    },
+    confirmText: {
+      type: String,
+      default: '确认'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    }
+  },
+
+  data() {
+    return {
+      isShownInternal: this.value,
+    };
+  },
+  computed: {
+    // 合并透传属性，只排除组件内部明确处理的属性
+    mergedDialogProps() {
+      // 只排除组件内部明确处理的属性，其他所有属性都透传给 v-dialog
+      const excludedAttrs = [
+        'class', 'style',
+        // 这些属性在组件内部有特殊处理
+        'value', 'modelValue', 'max-width', 'maxWidth', 'persistent', 'fullscreen',
+        // JhModal 特有的 props（不在 v-dialog 中）
+        'title', 'width', 'closable', 'showActions', 'showConfirmButton',
+        'showCancelButton', '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;
+    },
+    // 透传所有事件，只排除组件内部明确处理的事件
+    dialogListeners() {
+      // 只排除组件内部明确处理的事件，其他所有事件都透传给 v-dialog
+      const excludedEvents = [
+        // JhModal 特有的事件（不在 v-dialog 中）
+        '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-input-label {
+  display: block;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 4px;
+}
+
+/* 输入框样式 */
+.jh-v-input {
+  margin-top: 0;
+}
+</style>

package/src/components/JhModalForm/JhModalForm.md

@@ -0,0 +1,69 @@
+# 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()` 可以手动读取当前表单数据