@xclqmc/base-form 1.0.0

package/src/components/base/BaseDrawer.vue

@@ -0,0 +1,197 @@
+<template>
+	<!-- 遮罩层 -->
+	<transition name="drawer-mask-fade">
+		<div v-if="visible" class="drawer-right-mask" :style="{ zIndex: maskZIndex }" @click="onMaskClick"></div>
+	</transition>
+
+	<!-- 抽屉面板 -->
+	<transition name="drawer-right-slide">
+		<div v-if="visible" class="drawer-right-panel" :style="{ width: props.width, zIndex: panelZIndex }">
+			<!-- 头部 -->
+			<div class="drawer-right-header">
+				<span class="drawer-right-title">{{ props.title }}</span>
+				<button class="drawer-right-close-btn" @click="onMaskClick">
+					<svg viewBox="0 0 16 16" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+						<path
+							d="M4.354 4.354a.5.5 0 0 1 .708 0L8 7.293l2.938-2.939a.5.5 0 0 1 .708.708L8.707 8l2.939 2.938a.5.5 0 0 1-.708.708L8 8.707l-2.938 2.939a.5.5 0 0 1-.708-.708L7.293 8 4.354 5.062a.5.5 0 0 1 0-.708z"
+							fill="currentColor" />
+					</svg>
+				</button>
+			</div>
+
+			<!-- 内容 -->
+			<el-scrollbar :max-height="bodyHeight">
+				<div :style="{ padding: padding }">
+					<slot name="default"></slot>
+				</div>
+			</el-scrollbar>
+
+			<!-- 底部 -->
+			<div v-if="props.showFooter" class="drawer-right-footer">
+				<slot name="footer"> </slot>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { useZIndex } from 'element-plus';
+
+const emit = defineEmits(['update:show', 'close']);
+const props = defineProps({
+	show: {
+		type: Boolean,
+		default: false,
+	},
+	width: {
+		type: String,
+		default: '55%',
+	},
+	title: {
+		type: String,
+		default: '',
+	},
+	showFooter: {
+		type: Boolean,
+		default: false,
+	},
+	padding: {
+		type: String,
+		default: '10px 15px 0px 15px',
+	},
+	closeOnClickModal: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const visible = ref(props.show);
+const { nextZIndex } = useZIndex();
+const maskZIndex = ref(0);
+const panelZIndex = ref(0);
+
+// 内容区高度 = 容器高度 - 标题栏 - 底部栏（如果有）
+const bodyHeight = computed(() => {
+	const headerHeight = 45;
+	const footerHeight = props.showFooter ? 50 : 0;
+	return `calc(100vh  - ${headerHeight + footerHeight}px)`;
+});
+
+// 监听外部 show 变化
+watch(
+	() => props.show,
+	(newVal) => {
+		if (newVal) {
+			maskZIndex.value = nextZIndex();
+			panelZIndex.value = nextZIndex();
+			visible.value = true;
+		} else {
+			visible.value = false;
+		}
+	},
+	{ immediate: true }
+);
+
+// 点击遮罩层
+const onMaskClick = () => {
+	if (props.closeOnClickModal) {
+		emit('close');
+		emit('update:show', false);
+	}
+};
+
+</script>
+
+<style lang="scss" scoped>
+// 遮罩层
+.drawer-right-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+}
+
+// 抽屉面板
+.drawer-right-panel {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background: #fff;
+	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+	display: flex;
+	flex-direction: column;
+}
+
+// 头部
+.drawer-right-header {
+	padding: 0 15px;
+	height: 45px;
+	line-height: 45px;
+	border-bottom: 1px solid #eeeeee;
+	font-size: 16px;
+	color: #606266;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.drawer-right-title {
+	font-weight: 500;
+}
+
+.drawer-right-close-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: #909399;
+	cursor: pointer;
+	border-radius: 4px;
+
+	&:hover {
+		color: #303133;
+	}
+}
+
+// 底部
+.drawer-right-footer {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 20px;
+	height: 50px;
+	border-top: 1px solid #e4e7ed;
+	flex-shrink: 0;
+}
+
+// 遮罩层过渡动画
+.drawer-mask-fade-enter-active,
+.drawer-mask-fade-leave-active {
+	transition: opacity 0.3s ease;
+}
+
+.drawer-mask-fade-enter-from,
+.drawer-mask-fade-leave-to {
+	opacity: 0;
+}
+
+// 抽屉右滑过渡动画
+.drawer-right-slide-enter-active,
+.drawer-right-slide-leave-active {
+	transition: transform 0.3s ease;
+}
+
+.drawer-right-slide-enter-from,
+.drawer-right-slide-leave-to {
+	transform: translateX(100%);
+}
+</style>

package/src/components/base/BaseEditor.vue

@@ -0,0 +1,215 @@
+<template>
+  <div
+    ref="wrapRef"
+    class="flex flex-col border border-br"
+    :style="styles"
+    @click="(e: any) => emit('click', e)"
+  >
+    <!-- 仅当容器真实可见（有尺寸）时才挂载编辑器：隐藏即卸载并销毁实例，再次显示重建全新实例，
+		     从机制上规避 wangEditor 在隐藏容器中初始化 / 复用已销毁实例导致的"假死 / 无法交互" -->
+    <template v-if="mounted">
+      <Toolbar class="border-b border-br" :editor="editorRef" :mode="mode" />
+      <Editor
+        class="flex-1 overflow-y-auto"
+        :mode="mode"
+        :defaultConfig="state.editorConfig"
+        :modelValue="modelValue"
+        @onCreated="handleCreated"
+        @onChange="handleChange"
+        @onDestroyed="handleDestroyed"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts" name="wngEditor">
+import "@wangeditor/editor/dist/css/style.css";
+import {
+  reactive,
+  shallowRef,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+  ref,
+  CSSProperties,
+} from "vue";
+// @ts-ignore
+import { IDomEditor } from "@wangeditor/editor";
+import { Toolbar, Editor } from "@wangeditor/editor-for-vue";
+
+// 定义父组件传过来的值
+const props = defineProps({
+  // 是否禁用
+  disable: {
+    type: Boolean,
+    default: () => false,
+  },
+  // 内容框默认 placeholder
+  placeholder: {
+    type: String,
+    default: () => "请输入内容...",
+  },
+  // https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
+  // 模式，可选 <default|simple>，默认 default
+  mode: {
+    type: String,
+    default: () => "default",
+  },
+  // 高度
+  height: {
+    type: String,
+    default: () => "310",
+  },
+  // 宽度
+  width: {
+    type: String,
+    default: () => "100%",
+  },
+  // 双向绑定，用于获取 editor.modelValue()
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  // 上传地址
+  uploadFileUrl: {
+    type: String,
+    default: "",
+  },
+  // 上传请求头（如鉴权 token 由宿主注入：{ Authorization: 'Bearer xxx' }）
+  headers: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 上传接口前缀（默认取宿主环境变量 VITE_API_URL，未配置时走同域相对路径）
+  baseURL: {
+    type: String,
+    default:  "/",
+  },
+});
+
+// 定义子组件向父组件传值/事件（change=内容变化，值为 HTML；click=容器点击，入参为原生事件对象）
+const emit = defineEmits(["update:modelValue", "change", "click"]);
+
+//============================================================================数据
+// 是否挂载编辑器：容器真实可见（尺寸 > 0）才为 true，隐藏即置 false 并销毁
+const mounted = ref(false);
+// 编辑器实例（shallowRef：只需持有引用，无需深层响应）
+const editorRef = shallowRef<IDomEditor | null>(null);
+// 容器引用：用 ResizeObserver 监听尺寸判断真实可见性（display:none 的祖先会让尺寸归零）
+const wrapRef = ref<HTMLElement | null>(null);
+// 尺寸监听器
+let resizeObserver: ResizeObserver | null = null;
+// 上传需要的字段信息
+const uploadAttr = reactive({
+  fieldName: "file",
+  server: props.baseURL + props.uploadFileUrl,
+  headers: props.headers,
+  meta: {
+    isDelete: "0",
+  },
+  customInsert(res: any, insertFn: any) {
+    insertFn(res.data.url);
+  },
+});
+// 编辑器配置
+const state = reactive({
+  editorConfig: {
+    placeholder: props.placeholder,
+    MENU_CONF: {
+      uploadImage: uploadAttr,
+      uploadVideo: uploadAttr,
+    },
+  },
+});
+// 单位拼接：'310' → '310px'，'100%' 等自带单位的原样返回
+const addUnit = (value: string | number, unit = "px") => {
+  return !Object.is(Number(value), NaN) ? `${value}${unit}` : value;
+};
+// 容器尺寸样式
+const styles = computed<CSSProperties>(() => ({
+  height: addUnit(props.height),
+  width: addUnit(props.width),
+}));
+
+//============================================================================方法
+// 把外部值写入编辑器：内容一致时不写入，避免打断输入 / 触发无谓的 onChange 回环
+const setEditorHtml = (html?: string) => {
+  const editor = editorRef.value;
+  if (!editor) return;
+  const value = html ?? "";
+  if (value !== editor.getHtml()) editor.setHtml(value);
+};
+
+// 销毁编辑器实例并清空引用（editor-for-vue 不会自动销毁，必须在隐藏 / 卸载时手动销毁）
+const destroyEditor = () => {
+  const editor = editorRef.value;
+  editorRef.value = null;
+  if (editor) editor.destroy();
+};
+
+// 容器尺寸变化：真实可见则挂载、隐藏则卸载并销毁
+const handleResize = (entries: ResizeObserverEntry[]) => {
+  const rect = entries[0]?.contentRect;
+  const visible = !!rect && rect.width > 0 && rect.height > 0;
+  if (visible === mounted.value) return;
+  mounted.value = visible;
+  if (!visible) destroyEditor();
+};
+
+// 编辑器创建完成：记录实例、回填最新内容、同步禁用态
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value = editor;
+  setEditorHtml(props.modelValue);
+  if (props.disable) editor.disable();
+};
+
+// 编辑器销毁完成：清空引用
+const handleDestroyed = () => {
+  editorRef.value = null;
+};
+
+// 编辑器内容变化：回写父组件并派发 change（入参为最新 HTML）
+const handleChange = (editor: IDomEditor) => {
+  if (!editorRef.value) return;
+  const html = editor.getHtml();
+  emit("update:modelValue", html);
+  emit("change", html);
+};
+
+//============================================================================监听
+// 外部值变化 → 同步进编辑器（覆盖"弹窗打开后异步载入详情"的回显竞态）
+watch(
+  () => props.modelValue,
+  (val) => setEditorHtml(val),
+);
+// 监听是否禁用改变
+watch(
+  () => props.disable,
+  (bool) => {
+    const editor = editorRef.value;
+    if (!editor) return;
+    bool ? editor.disable() : editor.enable();
+  },
+  {
+    deep: true,
+  },
+);
+
+//============================================================================生命周期
+onMounted(() => {
+  // 不支持 ResizeObserver 时退化为始终挂载，保证老环境可用
+  if (typeof ResizeObserver === "undefined" || !wrapRef.value) {
+    mounted.value = true;
+    return;
+  }
+  resizeObserver = new ResizeObserver(handleResize);
+  resizeObserver.observe(wrapRef.value);
+});
+// 卸载时断开监听并销毁编辑器，避免残留实例
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  destroyEditor();
+});
+</script>

package/src/components/base/BaseInput.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-input
+    v-model="valueCopy"
+    :type="format"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @change="(v: any) => emit('change', v)"
+    @click="(e: any) => emit('click', e)"
+  />
+</template>
+<script setup lang="ts">
+/** 文本输入控件（内置字段组件，type='input'）：包装 el-input，与 BaseRadio/BaseSelect/BaseEditor 对齐注册进 registry */
+import { computed } from "vue";
+
+const emit = defineEmits(["update:modelValue", "change", "click"]);
+
+//==============================================================================数据
+const props = defineProps({
+  //输入值
+  modelValue: {
+    type: [String, Number],
+    default: null,
+  },
+  //输入框类型：text/textarea/number 等（BaseForm 里直接取自 field.format）
+  format: {
+    type: String,
+    default: "text",
+  },
+  //提示信息
+  placeholder: {
+    type: String,
+    default: "请输入",
+  },
+  //是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+//==============================================================================双向绑定
+// computed 透传：逐键同步（el-input 的 update:modelValue 输入即触发），与直接 v-model 到 el-input 行为一致
+const valueCopy = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+});
+</script>