befly-admin-ui 1.10.1 → 1.10.2

package/components/detailPanel.vue

@@ -2,7 +2,7 @@
     <div class="detail-panel">
         <div class="detail-content">
             <div v-if="data">
-                <div v-for="field in normalizedFields" :key="field.colKey" class="detail-item">
+                <div v-for="field in $Computed.normalizedFields" :key="field.colKey" class="detail-item">
                     <div class="detail-label">{{ field.title }}</div>
                     <div class="detail-value">
                         <!-- 状态字段特殊处理 -->
@@ -31,11 +31,11 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, reactive } from "vue";
 import { Tag as TTag } from "tdesign-vue-next";
 import { formatFieldValue } from "../utils/formatFieldValue.js";
 
-const props = defineProps({
+const $Prop = defineProps({
     /**
      * 当前行数据
      */
@@ -67,61 +67,59 @@ const props = defineProps({
     }
 });
 
-/**
- * 标准化字段配置（仅 columns：colKey/title）
- * 注意：模板对“嵌套 ref（对象属性里的 computed/ref）”不会自动解包，
- * 所以这里必须暴露为顶层 computed，避免 v-for 误迭代 computed 对象本身。
- */
-const normalizedFields = computed(() => {
-    const row = props.data && typeof props.data === "object" ? props.data : null;
-    const dataId = row && Object.hasOwn(row, "id") ? row.id : undefined;
-
-    const rawFields = props.fields;
-    const inputFields = Array.isArray(rawFields) ? rawFields : [];
-    const excludeKeys = Array.isArray(props.excludeKeys) ? props.excludeKeys : [];
-
-    const fields = inputFields
-        .filter((item) => {
-            return Boolean(item) && typeof item === "object";
-        })
-        .map((item) => {
-            const colKey = item.colKey;
-            if (item.colKey.length === 0) {
-                return null;
-            }
-            if (excludeKeys.includes(item.colKey)) {
-                return null;
-            }
-
-            return {
-                colKey: item.colKey,
-                title: item.title || item.colKey,
-                default: item.default,
-                format: item.format
-            };
-        })
-        .filter((item) => {
-            return Boolean(item);
-        });
+const $Method = {
+    buildNormalizedFields() {
+        const row = $Prop.data && typeof $Prop.data === "object" ? $Prop.data : null;
+        const dataId = row && Object.hasOwn(row, "id") ? row.id : undefined;
+
+        const rawFields = $Prop.fields;
+        const inputFields = Array.isArray(rawFields) ? rawFields : [];
+        const excludeKeys = Array.isArray($Prop.excludeKeys) ? $Prop.excludeKeys : [];
+
+        const fields = inputFields
+            .filter((item) => {
+                return Boolean(item) && typeof item === "object";
+            })
+            .map((item) => {
+                const colKey = item.colKey;
+                if (item.colKey.length === 0) {
+                    return null;
+                }
+                if (excludeKeys.includes(item.colKey)) {
+                    return null;
+                }
+
+                return {
+                    colKey: item.colKey,
+                    title: item.title || item.colKey,
+                    default: item.default,
+                    format: item.format
+                };
+            })
+            .filter((item) => {
+                return Boolean(item);
+            });
+
+        if (typeof dataId !== "undefined" && !fields.some((field) => field.colKey === "id")) {
+            fields.unshift({
+                colKey: "id",
+                title: "ID",
+                default: "-",
+                format: undefined
+            });
+        }
 
-    // 约定：页面表格不展示 id，但右侧详情始终展示 id（如果 data.id 存在）
-    if (typeof dataId !== "undefined" && !fields.some((f) => f.colKey === "id")) {
-        fields.unshift({
-            colKey: "id",
-            title: "ID",
-            default: "-",
-            format: undefined
+        return fields.filter((item) => {
+            if (!item || typeof item !== "object") {
+                return false;
+            }
+            return item.colKey?.length > 0;
         });
     }
+};
 
-    const safeFields = fields.filter((item) => {
-        if (!item || typeof item !== "object") {
-            return false;
-        }
-        return item.colKey?.length > 0;
-    });
-
-    return safeFields;
+const $Computed = reactive({
+    normalizedFields: computed(() => $Method.buildNormalizedFields())
 });
 </script>
 

package/components/pageDialog.vue

@@ -1,19 +1,34 @@
 <template>
-    <TDialog v-model:visible="innerVisible" :header="props.title === '' ? true : props.title" :width="props.width" :dialog-class-name="props.dialogClassName" placement="center" attach="body" :close-btn="false" :footer="true" :confirm-loading="props.confirmLoading" :close-on-overlay-click="false" :close-on-esc-keydown="false" @close="onDialogClose" @confirm="onDialogConfirm" @cancel="onDialogCancel">
+    <TDialog
+        v-model:visible="$Data.innerVisible"
+        :header="$Prop.title === '' ? true : $Prop.title"
+        :width="$Prop.width"
+        :dialog-class-name="$Prop.dialogClassName"
+        placement="center"
+        attach="body"
+        :close-btn="false"
+        :footer="true"
+        :confirm-loading="$Prop.confirmLoading"
+        :close-on-overlay-click="false"
+        :close-on-esc-keydown="false"
+        @close="$Method.onDialogClose"
+        @confirm="$Method.onDialogConfirm"
+        @cancel="$Method.onDialogCancel"
+    >
         <template #footer>
             <div class="dialog-footer">
-                <TButton variant="outline" @click="onFooterClose">关闭</TButton>
-                <TButton v-if="props.isConfirm" theme="primary" :loading="props.confirmLoading" @click="onFooterConfirm">确定</TButton>
+                <TButton variant="outline" @click="$Method.onFooterClose">关闭</TButton>
+                <TButton v-if="$Prop.isConfirm" theme="primary" :loading="$Prop.confirmLoading" @click="$Method.onFooterConfirm">确定</TButton>
             </div>
         </template>
         <div class="dialog-wrapper">
-            <slot :visible="innerVisible" :open="open" :close="close" :toggle="toggle" />
+            <slot :visible="$Data.innerVisible" :open="$Method.open" :close="$Method.close" :toggle="$Method.toggle" />
         </div>
     </TDialog>
 </template>
 
 <script setup>
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { onBeforeUnmount, onMounted, reactive, watch } from "vue";
 
 import { Button as TButton, Dialog as TDialog } from "tdesign-vue-next";
 
@@ -21,10 +36,12 @@ defineOptions({
     inheritAttrs: false
 });
 
-const openDelay = 100;
-const closeDelay = 300;
+const $Const = {
+    openDelay: 100,
+    closeDelay: 300
+};
 
-const props = defineProps({
+const $Prop = defineProps({
     modelValue: {
         type: Boolean,
         default: undefined
@@ -51,139 +68,136 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(["update:modelValue", "close", "confirm", "cancel"]);
+const $Emit = defineEmits(["update:modelValue", "close", "confirm", "cancel"]);
 
-let openDelayTimer = null;
-let closeDelayTimer = null;
+const $From = {
+    openDelayTimer: null,
+    closeDelayTimer: null
+};
 
-function clearTimer(timer) {
-    if (timer) {
-        clearTimeout(timer);
-    }
-    return null;
-}
-
-// 所有弹框约定：始终使用 v-if + v-model(modelValue)
-const innerVisible = ref(false);
-
-function open() {
-    emit("update:modelValue", true);
-}
-
-function close() {
-    openDelayTimer = clearTimer(openDelayTimer);
-    closeDelayTimer = clearTimer(closeDelayTimer);
-
-    innerVisible.value = false;
-    // 延迟通知上层关闭：配合 v-if，保证离场动画播完再卸载
-    closeDelayTimer = setTimeout(() => {
-        emit("update:modelValue", false);
-        closeDelayTimer = null;
-    }, closeDelay);
-}
-
-function toggle() {
-    if (innerVisible.value) {
-        close();
-        return;
-    }
-    open();
-}
+const $Data = reactive({
+    innerVisible: false
+});
 
-function createEventContext(trigger) {
-    return {
-        trigger: trigger,
-        visible: innerVisible.value,
-        open: open,
-        close: close,
-        toggle: toggle,
-        getVisible: () => innerVisible.value
-    };
-}
+const $Method = {
+    clearTimer(timer) {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        return null;
+    },
+    open() {
+        $Emit("update:modelValue", true);
+    },
+    close() {
+        $From.openDelayTimer = $Method.clearTimer($From.openDelayTimer);
+        $From.closeDelayTimer = $Method.clearTimer($From.closeDelayTimer);
+
+        $Data.innerVisible = false;
+        // 延迟通知上层关闭：配合 v-if，保证离场动画播完再卸载
+        $From.closeDelayTimer = setTimeout(() => {
+            $Emit("update:modelValue", false);
+            $From.closeDelayTimer = null;
+        }, $Const.closeDelay);
+    },
+    toggle() {
+        if ($Data.innerVisible) {
+            $Method.close();
+            return;
+        }
+        $Method.open();
+    },
+    createEventContext(trigger) {
+        return {
+            trigger: trigger,
+            visible: $Data.innerVisible,
+            open: $Method.open,
+            close: $Method.close,
+            toggle: $Method.toggle,
+            getVisible: () => $Data.innerVisible
+        };
+    },
+    applyModelValue(value) {
+        if (value) {
+            // 关键点：先渲染为 false，再延迟 true，保证 v-if + 初次 visible=true 时也能触发进入动画
+            $From.openDelayTimer = $Method.clearTimer($From.openDelayTimer);
+            $Data.innerVisible = false;
+            $From.openDelayTimer = setTimeout(() => {
+                $Data.innerVisible = true;
+                $From.openDelayTimer = null;
+            }, $Const.openDelay);
+            return;
+        }
 
-function applyModelValue(value) {
-    if (value) {
-        // 关键点：先渲染为 false，再延迟 true，保证 v-if + 初次 visible=true 时也能触发进入动画
-        openDelayTimer = clearTimer(openDelayTimer);
-        innerVisible.value = false;
-        openDelayTimer = setTimeout(() => {
-            innerVisible.value = true;
-            openDelayTimer = null;
-        }, openDelay);
-        return;
+        $From.openDelayTimer = $Method.clearTimer($From.openDelayTimer);
+        $Data.innerVisible = false;
+    },
+    closeByTrigger(trigger) {
+        // 固定交互：confirm 不自动关闭（等待异步提交成功后由调用侧 context.close() 决定关闭）
+        if (trigger === "confirm") {
+            return;
+        }
+        // cancel/close 自动关闭
+        $Method.close();
+    },
+    onDialogClose() {
+        const context = $Method.createEventContext("close");
+        $Method.closeByTrigger("close");
+        $Emit("close", context);
+    },
+    onDialogConfirm() {
+        const context = $Method.createEventContext("confirm");
+        $Emit("confirm", context);
+        $Method.closeByTrigger("confirm");
+    },
+    onDialogCancel() {
+        const context = $Method.createEventContext("cancel");
+        $Emit("cancel", context);
+        $Method.closeByTrigger("cancel");
+    },
+    onFooterConfirm() {
+        const context = $Method.createEventContext("confirm");
+        $Emit("confirm", context);
+        $Method.closeByTrigger("confirm");
+    },
+    onFooterClose() {
+        const context = $Method.createEventContext("cancel");
+        $Emit("cancel", context);
+        $Method.closeByTrigger("cancel");
+    },
+    getVisible() {
+        return $Data.innerVisible;
     }
-
-    openDelayTimer = clearTimer(openDelayTimer);
-    innerVisible.value = false;
-}
+};
 
 onMounted(() => {
-    if (props.modelValue === true) {
-        applyModelValue(true);
+    if ($Prop.modelValue === true) {
+        $Method.applyModelValue(true);
     }
 });
 
 onBeforeUnmount(() => {
-    openDelayTimer = clearTimer(openDelayTimer);
-    closeDelayTimer = clearTimer(closeDelayTimer);
+    $From.openDelayTimer = $Method.clearTimer($From.openDelayTimer);
+    $From.closeDelayTimer = $Method.clearTimer($From.closeDelayTimer);
 });
 
 watch(
-    () => props.modelValue,
+    () => $Prop.modelValue,
     (value) => {
         if (value !== true && value !== false) {
             return;
         }
 
-        applyModelValue(value);
+        $Method.applyModelValue(value);
     },
     { immediate: false }
 );
 
-function closeByTrigger(trigger) {
-    // 固定交互：confirm 不自动关闭（等待异步提交成功后由调用侧 context.close() 决定关闭）
-    if (trigger === "confirm") {
-        return;
-    }
-    // cancel/close 自动关闭
-    close();
-}
-
-function onDialogClose() {
-    const context = createEventContext("close");
-    closeByTrigger("close");
-    emit("close", context);
-}
-
-function onDialogConfirm() {
-    const context = createEventContext("confirm");
-    emit("confirm", context);
-    closeByTrigger("confirm");
-}
-
-function onDialogCancel() {
-    const context = createEventContext("cancel");
-    emit("cancel", context);
-    closeByTrigger("cancel");
-}
-
-function onFooterConfirm() {
-    const context = createEventContext("confirm");
-    emit("confirm", context);
-    closeByTrigger("confirm");
-}
-
-function onFooterClose() {
-    const context = createEventContext("cancel");
-    emit("cancel", context);
-    closeByTrigger("cancel");
-}
-
 defineExpose({
-    open: open,
-    close: close,
-    toggle: toggle,
-    getVisible: () => innerVisible.value
+    open: $Method.open,
+    close: $Method.close,
+    toggle: $Method.toggle,
+    getVisible: $Method.getVisible
 });
 </script>