@xclqmc/base-form 1.0.0

package/src/hooks/component.ts

@@ -0,0 +1,128 @@
+// hooks/useComponentAliasRefs.ts
+import {computed, shallowRef} from 'vue'
+
+/**
+ * 使用别名管理组件引用的Hook
+ */
+export function useComponent<T = any>() {
+    // 使用 Map 存储别名到组件的映射
+    const aliasMap = shallowRef<Map<string, T>>(new Map())
+
+    // 使用对象方便模板访问
+    const aliasObject = computed(() => {
+        const obj: Record<string, T> = {}
+        aliasMap.value.forEach((value, key) => {
+            obj[key] = value
+        })
+        return obj
+    })
+
+    /**
+     * 设置组件引用（必须提供别名）
+     */
+    const setComponentRef = (el: T, alias: string) => {
+        if (!el || !alias) return
+        aliasMap.value.set(alias, el)
+    }
+
+    /**
+     * 批量设置组件引用
+     */
+    const setComponentRefs = (refs: Record<string, T>) => {
+        Object.entries(refs).forEach(([alias, el]) => {
+            if (el) {
+                aliasMap.value.set(alias, el)
+            }
+        })
+    }
+
+    /**
+     * 获取指定别名的组件引用
+     */
+    const getComponentByAlias = (alias: string): T | null => {
+        return aliasMap.value.get(alias) || null
+    }
+
+    /**
+     * 根据条件获取当前显示的组件引用
+     */
+    const getCurrentComponentRef = (
+        getCondition: () => { alias?: string | string[] }
+    ): T | T[] | null => {
+        const condition = getCondition()
+
+        if (!condition.alias) {
+            return null
+        }
+
+        if (Array.isArray(condition.alias)) {
+            // 返回多个组件
+            return condition.alias
+                .map(alias => getComponentByAlias(alias))
+                .filter(Boolean) as T[]
+        } else {
+            // 返回单个组件
+            return getComponentByAlias(condition.alias)
+        }
+    }
+
+    /**
+     * 获取所有组件引用
+     */
+    const getAllComponents = computed(() => {
+        return Array.from(aliasMap.value.values())
+    })
+
+    /**
+     * 获取所有别名
+     */
+    const getAllAliases = computed(() => {
+        return Array.from(aliasMap.value.keys())
+    })
+
+    /**
+     * 获取组件数量
+     */
+    const getComponentCount = computed(() => {
+        return aliasMap.value.size
+    })
+
+    /**
+     * 检查别名是否存在
+     */
+    const hasAlias = (alias: string) => {
+        return aliasMap.value.has(alias)
+    }
+
+    /**
+     * 移除指定别名的组件引用
+     */
+    const removeComponentByAlias = (alias: string) => {
+        aliasMap.value.delete(alias)
+    }
+
+    /**
+     * 清除所有引用
+     */
+    const clearRefs = () => {
+        aliasMap.value.clear()
+    }
+
+    return {
+        // 状态
+        aliasMap: aliasObject,
+        aliasMapRaw: aliasMap,
+
+        // 方法
+        setComponentRef,
+        setComponentRefs,
+        getComponentByAlias,
+        getCurrentComponentRef,
+        getAllComponents,
+        getAllAliases,
+        getComponentCount,
+        hasAlias,
+        removeComponentByAlias,
+        clearRefs
+    }
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './message';
+export * from './props';
+export * from './component';

package/src/hooks/message.ts

@@ -0,0 +1,97 @@
+/**
+ * 消息提示 Hook（自 pig-ui src/hooks/tool/message.ts 抽离）
+ * 相比源项目去掉了 vue-i18n 依赖，提示文案内置中文。
+ */
+import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
+import { ref } from "vue";
+
+interface MessageImplements {
+  info(title: string): void;
+  warning(title: string): void;
+  success(title: string): void;
+  error(title: string): void;
+}
+
+export function useMessage() {
+  class MessageClass implements MessageImplements {
+    // 普通提示
+    info(title: string): void {
+      ElMessage.info(title);
+    }
+
+    // 警告提示
+    warning(title: string): void {
+      ElMessage.warning(title);
+    }
+
+    // 成功提示
+    success(title: string): void {
+      ElMessage.success(title);
+    }
+
+    // 错误提示
+    error(title: string): void {
+      ElMessage.error(title);
+    }
+  }
+
+  return new MessageClass();
+}
+
+const load = ref();
+export function useMessageBox() {
+  class MessageBoxClass implements MessageImplements {
+    // 普通提示
+    info(msg: string): void {
+      ElMessageBox.alert(msg, "提示");
+    }
+
+    // 警告提示
+    warning(msg: string): void {
+      ElMessageBox.alert(msg, "提示", { type: "warning" });
+    }
+
+    // 成功提示
+    success(msg: string): void {
+      ElMessageBox.alert(msg, "提示", { type: "success" });
+    }
+
+    // 错误提示
+    error(msg: string): void {
+      ElMessageBox.alert(msg, "提示", { type: "error" });
+    }
+
+    // 确认窗体
+    confirm(msg: string) {
+      return ElMessageBox.confirm(msg, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      });
+    }
+    // 提交内容
+    prompt(msg: string) {
+      return ElMessageBox.prompt(msg, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      });
+    }
+    loading(msg: string = "Loading") {
+      load.value = ElLoading.service({
+        lock: true,
+        text: msg,
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    }
+    closeLoading() {
+      load.value.close();
+    }
+    //更新加载提示词文本
+    updateLoadingText(text: any) {
+      load.value.setText(text); // 手动更新
+    }
+  }
+
+  return new MessageBoxClass();
+}

package/src/hooks/props.ts

@@ -0,0 +1,50 @@
+import { computed } from 'vue';
+
+type SyncPropConfig = string | { prop: string; emit?: string };
+
+export function useProps(props: any, emit: any, config?: string | string[] | SyncPropConfig[]) {
+	// 默认配置
+	if (config === undefined) {
+		config = 'modelValue';
+	}
+
+	// 归一化为数组
+	let configs: (string | SyncPropConfig)[] = [];
+	if (typeof config === 'string') {
+		configs = [config];
+	} else if (Array.isArray(config)) {
+		configs = config;
+	} else {
+		// 如果传入的是单个对象（虽然类型未标，但兼容）
+		configs = [config];
+	}
+
+	const result: Record<string, any> = {};
+
+	configs.forEach((item) => {
+		let propName: string;
+		let emitName: string;
+		if (typeof item === 'string') {
+			propName = item;
+			emitName = item;
+		} else {
+			propName = item.prop;
+			emitName = item.emit || item.prop;
+		}
+		const key = `_${propName}`;
+		result[key] = computed({
+			get: () => props[propName],
+			set: (val) => emit(`update:${emitName}`, val),
+		});
+	});
+
+	// 向后兼容：如果原本是单个字符串，返回 { _value }
+	if (typeof config === 'string') {
+		// 此时 result 只有一个键，取出来封装为 _value
+		const singleKey = Object.keys(result)[0];
+		return { _value: result[singleKey] };
+	}
+
+	// 数组场景，返回所有 _prop 键
+	return result;
+}

package/src/index.ts

@@ -0,0 +1,36 @@
+// 组件
+export { default as BaseForm } from "./components/BaseForm/BaseForm.vue";
+export { default as BaseFormContent } from "./components/BaseForm/FormContent.vue";
+export { default as BasePopup } from "./components/base/BasePopup.vue";
+export { default as BaseInput } from "./components/base/BaseInput.vue";
+export { default as BaseRadio } from "./components/base/BaseRadio.vue";
+export { default as BaseSelect } from "./components/base/BaseSelect.vue";
+export { default as BaseDrawer } from "./components/base/BaseDrawer.vue";
+export { default as BaseEditor } from "./components/base/BaseEditor.vue";
+
+// 校验规则与默认配置
+export {
+  buildRules,
+  buildFieldRules,
+  PATTERNS,
+} from "./components/BaseForm/rules";
+export {
+  defaultFormOptions,
+  setDefaultFormOptions,
+} from "./components/BaseForm/types";
+export type {
+  BaseFormOptions,
+  BaseFormField,
+  BaseFormConfig,
+  BaseFormApi,
+  BaseFormComponent,
+  BaseFormEvent,
+  BaseFormOpen,
+  BaseFormSubmit,
+} from "./components/BaseForm/types";
+
+// hooks
+export { useProps, useComponent, useMessage, useMessageBox } from "./hooks";
+
+// 字段组件注入：按 type 注册自定义渲染组件，重复 type 以最后一次注入为准
+export { registerField } from "./components/base/registry";