@gct-paas/core-web 0.1.6-dev.17 → 0.1.6-dev.19

package/es/components/label-design/header/test-var-modal.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,202 @@
+import { useDesigner } from "../hooks/useDesigner.mjs";
+import { GctOverlayScrollbars } from "../../overlay-scrollbars/gct-overlay-scrollbars.mjs";
+import stage_canvas_default from "../stage/stage-canvas.vue.mjs";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, withCtx } from "vue";
+import { cloneDeep } from "lodash-es";
+import { t, useModal } from "@gct-paas/core";
+//#region src/components/label-design/header/test-var-modal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex h100% w100% print" };
+var _hoisted_2 = { class: "left flex flex-col" };
+var _hoisted_3 = { class: "left-title" };
+var _hoisted_4 = { class: "right" };
+var _hoisted_5 = { class: "right-title" };
+var test_var_modal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "test-var-modal",
+	props: {
+		modal: {},
+		fieldConfig: {},
+		data: {}
+	},
+	setup(__props) {
+		const { hoveredElements, updateEgglement } = useDesigner();
+		const selectItem = ref([]);
+		const hoverItem = ref([]);
+		const containerRef = ref(null);
+		const canvasRef = ref(null);
+		const canvasSize = ref({
+			width: 0,
+			height: 0
+		});
+		const containerSize = ref({
+			width: 0,
+			height: 0
+		});
+		const FormRef = ref();
+		const varMap = ref({});
+		const defProps = __props;
+		const schema = ref();
+		const handleOk = async () => {
+			try {
+				await FormRef.value?.validate();
+				return {
+					ok: true,
+					data: { ...varMap.value }
+				};
+			} catch (err) {
+				console.warn(err);
+			}
+			return { ok: false };
+		};
+		const changeMap = async (value, id) => {
+			schema.value?.forEach((i) => {
+				if (i.type === "TEXT" && i.id === id) {
+					i.attrs.text.label = value;
+					i.attrs.text.value = value;
+				} else if (i.id === id) i.attrs.content.value = value;
+			});
+		};
+		const updatePBarcodeWidth = (payload) => {
+			const egglement = schema.value?.find((d) => d.id === payload.elId);
+			if (!egglement) return;
+			if (egglement.rotate === 90) if (payload.height !== egglement.height) updateEgglement({
+				egglement,
+				width: payload.rotateWidth,
+				height: payload.width
+			});
+			else console.log("高度不变");
+			else if (payload.width !== egglement.width) updateEgglement({
+				egglement,
+				width: payload.width
+			});
+			else console.log("长度不变");
+		};
+		const updatePQrCodeWidthAndHeight = (payload) => {
+			const egglement = schema.value?.find((d) => d.id === payload.elId);
+			if (!egglement) return;
+			if (egglement.rotate === 90) if (payload.height !== egglement.height || payload.width !== egglement.width) updateEgglement({
+				egglement,
+				width: payload.rotateWidth,
+				height: payload.rotateHeight
+			});
+			else console.log("高度不变");
+			else if (payload.width !== egglement.width || payload.height !== egglement.height) updateEgglement({
+				egglement,
+				width: payload.width,
+				height: payload.height
+			});
+			else console.log("长度不变");
+		};
+		const focus = (id) => {
+			selectItem.value = schema.value?.filter((i) => i.id === id) ?? [];
+			hoveredElements.value = [...selectItem.value, ...hoverItem.value];
+		};
+		const blur = () => {
+			selectItem.value = [];
+			hoveredElements.value = [...hoverItem.value];
+		};
+		const mouseenter = (id) => {
+			hoverItem.value = schema.value?.filter((i) => i.id === id) ?? [];
+			hoveredElements.value = [...selectItem.value, ...hoverItem.value];
+		};
+		const mouseleave = () => {
+			hoverItem.value = [];
+			hoveredElements.value = [...selectItem.value];
+		};
+		useModal(handleOk);
+		const canvasStyle = computed(() => {
+			if (!canvasSize.value.width || !canvasSize.value.height || !containerSize.value.width || !containerSize.value.height) return {};
+			const scaleX = containerSize.value.width / canvasSize.value.width;
+			const scaleY = containerSize.value.height / canvasSize.value.height;
+			const scale = Math.min(scaleX, scaleY);
+			return {
+				transform: `translate(${(containerSize.value.width - canvasSize.value.width * scale) / 2}px, ${(containerSize.value.height - canvasSize.value.height * scale) / 2}px) scale(${scale})`,
+				transformOrigin: "top left",
+				width: `${canvasSize.value.width}px`,
+				height: `${canvasSize.value.height}px`
+			};
+		});
+		onMounted(() => {
+			schema.value = cloneDeep(defProps.data);
+			if (canvasRef.value) canvasSize.value = {
+				width: canvasRef.value.$el?.offsetWidth || 0,
+				height: canvasRef.value.$el?.offsetHeight || 0
+			};
+			const resizeObserver = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					const { width, height } = entry.contentRect;
+					containerSize.value.width = width;
+					containerSize.value.height = height;
+				}
+			});
+			if (containerRef.value) resizeObserver.observe(containerRef.value);
+			onUnmounted(() => {
+				resizeObserver.disconnect();
+			});
+		});
+		return (_ctx, _cache) => {
+			const _component_a_input = resolveComponent("a-input");
+			const _component_a_form_item = resolveComponent("a-form-item");
+			const _component_a_form = resolveComponent("a-form");
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, toDisplayString(unref(t)("sys.inputVar")), 1), createVNode(unref(GctOverlayScrollbars), null, {
+				default: withCtx(() => [createVNode(_component_a_form, {
+					ref_key: "FormRef",
+					ref: FormRef,
+					model: varMap.value,
+					autocomplete: "off",
+					layout: "vertical"
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(defProps.fieldConfig, (item) => {
+						return openBlock(), createBlock(_component_a_form_item, {
+							key: item.key,
+							label: unref(t)(item.label),
+							name: item.key,
+							class: normalizeClass(["var-item", { selected: selectItem.value[0]?.id === item.key }]),
+							required: "",
+							onMouseenter: ($event) => mouseenter(item.key),
+							onMouseleave: mouseleave
+						}, {
+							default: withCtx(() => [createVNode(_component_a_input, {
+								value: varMap.value[item.key],
+								"onUpdate:value": ($event) => varMap.value[item.key] = $event,
+								placeholder: unref(t)("sys.inputText"),
+								onFocus: ($event) => focus(item.key),
+								onBlur: blur,
+								onChange: ($event) => changeMap(varMap.value[item.key], item.key)
+							}, null, 8, [
+								"value",
+								"onUpdate:value",
+								"placeholder",
+								"onFocus",
+								"onChange"
+							])]),
+							_: 2
+						}, 1032, [
+							"label",
+							"name",
+							"class",
+							"onMouseenter"
+						]);
+					}), 128))]),
+					_: 1
+				}, 8, ["model"])]),
+				_: 1
+			})]), createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("sys.simulatedPreview")), 1), createElementVNode("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "canvas-container"
+			}, [createVNode(stage_canvas_default, {
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				schema: schema.value,
+				style: normalizeStyle([{
+					"pointer-events": "none",
+					"user-select": "none"
+				}, canvasStyle.value]),
+				onUpdatePBarcodeWidth: updatePBarcodeWidth,
+				onUpdatePQrCodeWidthAndHeight: updatePQrCodeWidthAndHeight
+			}, null, 8, ["schema", "style"])], 512)])]);
+		};
+	}
+});
+//#endregion
+export { test_var_modal_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/label-design/header/test-var-modal.vue_vue_type_style_index_0_scoped_972496bb_lang.css

@@ -0,0 +1,69 @@
+.print[data-v-972496bb] {
+  min-width: 0;
+  /* 重要：防止 flex 子项溢出 */
+  min-height: 0;
+  /* 重要：防止 flex 子项溢出 */
+}
+.left[data-v-972496bb] {
+  width: 288px;
+  min-width: 288px;
+  padding: 12px 0 12px 12px;
+  border-right: 1px solid #e0e3eb;
+}
+.left .left-title[data-v-972496bb] {
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  color: #1a1d23;
+  font-size: 14px;
+  font-weight: 600;
+}
+.left .left-title[data-v-972496bb]::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  margin-right: 8px;
+  margin-left: 12px;
+  background: var(--ant-primary-color);
+  color: var(--ant-primary-color);
+}
+.right[data-v-972496bb] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  /* 重要：防止内容撑开 */
+  padding: 24px;
+  background: #f6f8fa;
+}
+.right .canvas-container[data-v-972496bb] {
+  height: calc(100% - 48px);
+}
+.right .right-title[data-v-972496bb] {
+  margin-bottom: 24px;
+  color: #1a1d23;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+}
+.var-item[data-v-972496bb] {
+  margin-right: 12px;
+  padding: 12px;
+}
+.var-item[data-v-972496bb]:hover {
+  border: 1px solid rgb(from var(--ant-primary-color) r g b / 30%);
+  border-radius: 4px;
+  background: rgb(from var(--ant-primary-color) r g b / 8%);
+}
+.var-item.selected[data-v-972496bb] {
+  border: 1px solid rgb(from var(--ant-primary-color) r g b / 30%);
+  border-radius: 4px;
+  background: rgb(from var(--ant-primary-color) r g b / 8%);
+}
+[data-v-972496bb] .ant-form .ant-form-item {
+  margin-bottom: 0;
+}
+[data-v-972496bb] .ant-input-affix-wrapper-focused {
+  border-color: var(--ant-primary-color);
+}

package/es/components/label-design/index.d.ts

@@ -1,4 +1,14 @@
+import { default as LabelParamsSelect } from './panels/widget/components/label-params-select.vue';
+import { ActionsType, ButtonTextEnum } from './type';
 export { default as StageView } from './stage/stage-view.vue';
-export { useModalPicker } from './modal/index';
+export { useModalPicker as useLabelModalPicker } from './modal/index';
+export { default as LabelDesigner } from './designer.vue';
 export type { ProjectType } from './hooks/usePage';
+export { useProp } from './hooks/useProp';
 export { setIdentify } from './identify-config';
+export { loadLabelInfo, usePage } from './hooks/usePage';
+export { default as StageCanvas } from './stage/stage-canvas.vue';
+export * from './constants/size';
+export * from './constants/CommonPrintElems';
+export { default as LabelDesignControlComps } from './panels/widget/controls';
+export { LabelParamsSelect, type ActionsType, ButtonTextEnum };

package/es/components/label-design/index.mjs

@@ -1,3 +1,12 @@
+import "./constants/CommonPrintElems.mjs";
+import "./constants/size.mjs";
+import "./hooks/usePage.mjs";
+import "./hooks/useProp.mjs";
 import "./stage/stage-view.vue.mjs";
 import "./modal/index.mjs";
+import "./stage/stage-canvas.vue.mjs";
 import "./identify-config.mjs";
+import "./panels/widget/components/label-params-select.vue.mjs";
+import "./panels/widget/controls/index.mjs";
+import "./designer.vue.mjs";
+import "./type/index.mjs";

package/es/components/label-design/modal/template.vue_vue_type_script_setup_true_lang.mjs

@@ -1,9 +1,9 @@
 import { getSpecificationsForSize } from "../constants/size.mjs";
 import { usePage } from "../hooks/usePage.mjs";
 import { useDesigner } from "../hooks/useDesigner.mjs";
+import toolkit_default from "../toolkits/toolkit.vue.mjs";
 import { useModal } from "../../../modules/global-modal/src/hooks/useModal.mjs";
 import { BasicModal } from "../../../modules/global-modal/index.mjs";
-import toolkit_default from "../toolkits/toolkit.vue.mjs";
 import stage_default from "../stage/stage.vue.mjs";
 import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, reactive, ref, unref, withCtx } from "vue";
 //#region src/components/label-design/modal/template.vue?vue&type=script&setup=true&lang.ts

package/es/components/label-design/panels/panel.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { useDesigner } from "../hooks/useDesigner.mjs";
+import panelComps from "./index.mjs";
 import { useModal } from "../../../modules/global-modal/src/hooks/useModal.mjs";
 import "../../../modules/global-modal/index.mjs";
-import panelComps from "./index.mjs";
 import diff_modal_default from "./modals/diff-modal.vue.mjs";
 import { computed, createBlock, createElementBlock, createVNode, defineComponent, openBlock, provide, resolveDynamicComponent, unref } from "vue";
 //#region src/components/label-design/panels/panel.vue?vue&type=script&setup=true&lang.ts

package/es/components/label-design/panels/widget/components/label-params-select.vue.d.ts

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    modelValue?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    /**
+     * 获取选项数据（如果为空则重新加载）
+     */
+    getOptions: () => Promise<{
+        label: string;
+        value: string;
+        _item: IObject;
+        id: string;
+        name: string;
+        type: string;
+    }[]>;
+    /**
+     * 直接获取 paramsData 的当前值
+     * @returns 标签参数模型的数据数组
+     */
+    getParamsData: () => {
+        label: string;
+        value: string;
+        _item: IObject;
+        id: string;
+        name: string;
+        type: string;
+    }[];
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/label-design/panels/widget/controls/VariableSelect.vue_vue_type_script_setup_true_name_variable-select_lang.mjs

@@ -4,8 +4,8 @@ import FieldCascader_default from "../../../../field-cascader/src/FieldCascader.
 import { CONTENT_TYPE } from "../../../constants/CommonPrintElems.mjs";
 import { usePage } from "../../../hooks/usePage.mjs";
 import { identify } from "../../../identify-config.mjs";
-import "../../../../index.mjs";
 import label_params_select_default from "../components/label-params-select.vue.mjs";
+import "../../../../index.mjs";
 import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, resolveComponent, toDisplayString, unref, withCtx } from "vue";
 import { ExpressionModeEnum, ExpressionTabEnum, FIELD_TYPE, t } from "@gct-paas/core";
 //#region src/components/label-design/panels/widget/controls/VariableSelect.vue?vue&type=script&setup=true&name=variable-select&lang.ts

package/es/components/label-design/stage/stage.vue_vue_type_script_setup_true_lang.mjs

@@ -1,8 +1,8 @@
 import { loadLabelInfo } from "../hooks/usePage.mjs";
 import { PanelEnum, useDesigner } from "../hooks/useDesigner.mjs";
+import stage_canvas_default from "./stage-canvas.vue.mjs";
 import { ActionBar } from "../components/action-bar/action-bar.mjs";
 import panel_default from "../panels/panel.vue.mjs";
-import stage_canvas_default from "./stage-canvas.vue.mjs";
 import stage_header_default from "./stage-header.vue.mjs";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, unref, watch, withCtx, withModifiers } from "vue";
 import { useDebounceFn, useResizeObserver } from "@vueuse/core";

package/es/components/label-design/type/index.d.ts

@@ -0,0 +1,15 @@
+export type ButtonType = 'primary' | 'default' | 'ghost' | 'dashed' | 'link' | 'text' | 'error';
+export declare enum ButtonTextEnum {
+    DETAIL = "viewDetails",
+    PREVIEW = "preview",
+    DELETE = "delete",
+    EDIT = "edit",
+    DESIGN = "design"
+}
+export interface ActionsType {
+    type?: ButtonType;
+    text: ButtonTextEnum;
+    icon: string;
+    ghost?: boolean;
+    danger?: boolean;
+}

package/es/components/label-design/type/index.mjs

@@ -0,0 +1,11 @@
+//#region src/components/label-design/type/index.ts
+var ButtonTextEnum = /* @__PURE__ */ function(ButtonTextEnum) {
+	ButtonTextEnum["DETAIL"] = "viewDetails";
+	ButtonTextEnum["PREVIEW"] = "preview";
+	ButtonTextEnum["DELETE"] = "delete";
+	ButtonTextEnum["EDIT"] = "edit";
+	ButtonTextEnum["DESIGN"] = "design";
+	return ButtonTextEnum;
+}({});
+//#endregion
+export { ButtonTextEnum };

package/es/components/modal-name-editor/modal-name-editor.css

@@ -0,0 +1,117 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-modal-name-editor__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+}
+
+.gct-modal-name-editor.is-edit {
+  cursor: default;
+}
+
+.gct-modal-name-editor__input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.gct-modal-name-editor__input .anticon-loading {
+  margin-right: var(--gct-spacing-4);
+}
+.gct-modal-name-editor__input .ant-input.ant-input-sm {
+  padding: 0;
+  color: rgb(var(--gct-color-text-1));
+}
+.gct-modal-name-editor__input .ant-input.ant-input-sm.ant-input-disabled {
+  background-color: transparent;
+}
+.gct-modal-name-editor__input .ant-input[disabled] {
+  color: rgb(var(--gct-color-text-1));
+}
+
+.gct-modal-name-editor__error-info {
+  font-size: 12px;
+  line-height: 16px;
+  position: absolute;
+  top: 24px;
+  z-index: 10000;
+  padding: var(--gct-padding-2);
+  color: var(--gct-color-danger-hover);
+  background-color: var(--gct-color-danger-light-hover);
+  border-radius: var(--gct-border-radius-s);
+}
+
+.gct-modal-name-editor__edit {
+  margin-left: var(--gct-spacing-4);
+  color: rgb(var(--gct-colo-text-1));
+}
+
+.gct-modal-name-editor {
+  display: flex;
+  align-items: center;
+  height: 22px;
+  cursor: pointer;
+}

package/es/components/modal-name-editor/modal-name-editor.d.ts

@@ -0,0 +1,34 @@
+export declare const ModalNameEditor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultName: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:value")[], "change" | "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultName: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    defaultName: string;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/modal-name-editor/modal-name-editor.mjs

@@ -0,0 +1,124 @@
+import './modal-name-editor.css';/* empty css                        */
+import { computed, createVNode, defineComponent, nextTick, ref, resolveComponent, watch } from "vue";
+import { useNamespace } from "@gct-paas/core";
+import { onClickOutside } from "@vueuse/core";
+//#region src/components/modal-name-editor/modal-name-editor.tsx
+var ModalNameEditor = /* @__PURE__ */ defineComponent({
+	name: "ModalNameEditor",
+	props: {
+		value: {
+			type: String,
+			default: "未命名"
+		},
+		defaultName: {
+			type: String,
+			default: "未命名名称"
+		},
+		max: {
+			type: Number,
+			default: 100
+		}
+	},
+	emits: ["update:value", "change"],
+	setup(props, { emit }) {
+		const ns = useNamespace("modal-name-editor");
+		const isEdit = ref(false);
+		const nameInputRef = ref();
+		const name = ref(props.value);
+		const displayName = computed(() => {
+			return name.value || props.defaultName;
+		});
+		const isError = computed(() => {
+			if (displayName.value.length > props.max) return true;
+			return false;
+		});
+		watch(() => props.value, () => {
+			if (name.value !== props.value) name.value = props.value;
+		});
+		const isSaving = ref(false);
+		const hasUserModified = ref(false);
+		const val = computed({
+			get() {
+				if (isEdit.value && hasUserModified.value) return name.value;
+				return displayName.value;
+			},
+			set(val) {
+				hasUserModified.value = true;
+				const trimmedVal = val.trim();
+				if (name.value !== trimmedVal) {
+					name.value = trimmedVal;
+					emit("update:value", trimmedVal);
+				}
+			}
+		});
+		const onEditName = () => {
+			isEdit.value = true;
+			hasUserModified.value = false;
+			nextTick(() => {
+				nameInputRef.value.focus();
+				nameInputRef.value.select();
+			});
+		};
+		const onSaveName = async () => {
+			if (name.value && name.value.trim()) {
+				isSaving.value = true;
+				try {
+					emit("update:value", name.value);
+				} finally {
+					isSaving.value = false;
+				}
+			}
+			isEdit.value = false;
+			hasUserModified.value = false;
+		};
+		const onBlurOrEnter = () => {
+			if (isEdit.value) {
+				if (isError.value === true) {
+					nextTick(() => {
+						nameInputRef.value.focus();
+						nameInputRef.value.select();
+					});
+					return;
+				}
+				onSaveName();
+				isEdit.value = false;
+			}
+		};
+		onClickOutside(nameInputRef, async () => {
+			onBlurOrEnter();
+		});
+		const onChange = () => {
+			emit("change");
+		};
+		return () => {
+			return createVNode("div", { "class": ns.b() }, [
+				createVNode("div", {
+					"class": [ns.e("name"), ns.is("hidden", isEdit.value)],
+					"title": val.value,
+					"onDblclick": onEditName
+				}, [val.value]),
+				createVNode("div", { "class": [ns.e("input"), ns.is("hidden", !isEdit.value)] }, [
+					isSaving.value ? createVNode(resolveComponent("loading-outlined"), null, null) : null,
+					createVNode(resolveComponent("a-input"), {
+						"value": val.value,
+						"onUpdate:value": ($event) => val.value = $event,
+						"ref": nameInputRef,
+						"size": "small",
+						"bordered": false,
+						"onBlur": onBlurOrEnter,
+						"onPressEnter": onBlurOrEnter,
+						"disabled": isSaving.value,
+						"onChange": onChange
+					}, null),
+					createVNode("div", { "class": [ns.e("error-info"), ns.is("hidden", !isError.value)] }, [`最大${props.max}字`])
+				]),
+				createVNode("div", {
+					"class": [ns.e("edit"), ns.is("hidden", isEdit.value)],
+					"onClick": onEditName
+				}, [createVNode("i", { "class": "iconfont icon-bianji" }, null)])
+			]);
+		};
+	}
+});
+//#endregion
+export { ModalNameEditor };