befly-admin 3.12.4 → 3.12.6

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "befly-admin",
-    "version": "3.12.4",
-    "gitHead": "9823cc29996ba9950dd08bfd72856e3b65815039",
+    "version": "3.12.6",
+    "gitHead": "607fe5ea9c06653ec6da8a9e4175d1f9c7b98c13",
     "private": false,
     "description": "Befly Admin - 基于 Vue3 + TDesign Vue Next 的后台管理系统",
     "files": [
@@ -28,17 +28,16 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@befly-addon/admin": "^1.8.4",
-        "@iconify-json/lucide": "^1.2.85",
+        "@befly-addon/admin": "^1.8.5",
+        "@iconify-json/lucide": "^1.2.86",
         "axios": "^1.13.2",
-        "befly-shared": "1.4.3",
-        "befly-vite": "^1.4.6",
+        "befly-shared": "^1.4.5",
+        "befly-vite": "^1.4.8",
         "pinia": "^3.0.4",
         "tdesign-vue-next": "^1.18.0",
-        "unplugin-vue-router": "^0.19.2",
         "vite": "^8.0.0-beta.8",
-        "vue": "^3.5.26",
-        "vue-router": "^4.6.4"
+        "vue": "^3.5.27",
+        "vue-router": "^5.0.0-beta.0"
     },
     "engines": {
         "bun": ">=1.3.0",

package/src/App.vue

@@ -1,14 +1,12 @@
 <template>
-    <ConfigProvider :global-config="globalConfig">
+    <t-config-provider :global-config="globalConfig">
         <div id="app">
             <RouterView />
         </div>
-    </ConfigProvider>
+    </t-config-provider>
 </template>
 
 <script setup lang="ts">
-import { ConfigProvider } from "tdesign-vue-next";
-
 const globalConfig = {
     dialog: {
         closeOnOverlayClick: false

package/src/components/{DetailPanel.vue → detailPanel.vue}

@@ -2,22 +2,22 @@
     <div class="detail-panel">
         <div class="detail-content">
             <div v-if="data">
-                <div v-for="field in normalizedFields" :key="field.key" class="detail-item">
-                    <div class="detail-label">{{ field.label }}</div>
+                <div v-for="field in normalizedFields" :key="field.colKey" class="detail-item">
+                    <div class="detail-label">{{ field.title }}</div>
                     <div class="detail-value">
                         <!-- 状态字段特殊处理 -->
-                        <template v-if="field.key === 'state'">
+                        <template v-if="field.colKey === 'state'">
                             <TTag v-if="data.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
                             <TTag v-else-if="data.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
                             <TTag v-else-if="data.state === 0" shape="round" theme="danger" variant="light-outline">已删除</TTag>
                         </template>
                         <!-- 自定义插槽 -->
-                        <template v-else-if="$slots[field.key]">
-                            <slot :name="field.key" :value="data[field.key]" :row="data"></slot>
+                        <template v-else-if="$slots[field.colKey]">
+                            <slot :name="field.colKey" :value="data[field.colKey]" :row="data"></slot>
                         </template>
                         <!-- 默认显示 -->
                         <template v-else>
-                            {{ formatValue(data[field.key], field) }}
+                            {{ formatValue(data[field.colKey], field) }}
                         </template>
                     </div>
                 </div>
@@ -31,8 +31,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { Tag as TTag } from "tdesign-vue-next";
+type DetailPanelFieldInput = {
+    colKey?: string;
+    title?: string;
+    default?: string;
+    formatter?: (value: unknown) => unknown;
+};
+
+type DetailPanelFieldNormalized = {
+    colKey: string;
+    title: string;
+    default?: string;
+    formatter?: (value: unknown) => unknown;
+};
 
 const props = defineProps({
     /**
@@ -43,9 +54,7 @@ const props = defineProps({
         default: null
     },
     /**
-     * 字段配置，支持两种格式：
-     * 1. fields 格式: [{ key: 'id', label: 'ID' }]
-     * 2. columns 格式: [{ colKey: 'id', title: 'ID' }]
+     * 字段配置（columns 格式）：[{ colKey: 'id', title: 'ID' }]
      * 自动过滤 row-select、operation 等非数据列
      */
     fields: {
@@ -69,50 +78,76 @@ const props = defineProps({
 });
 
 /**
- * 标准化字段配置，支持 columns 和 fields 两种格式
+ * 标准化字段配置（仅 columns：colKey/title）
+ * 注意：模板对“嵌套 ref（对象属性里的 computed/ref）”不会自动解包，
+ * 所以这里必须暴露为顶层 computed，避免 v-for 误迭代 computed 对象本身。
  */
 const normalizedFields = computed(() => {
-    const dataId = props.data && typeof props.data.id !== "undefined" ? props.data.id : undefined;
+    const row = props.data as Record<string, unknown> | null;
+    const dataId = row && Object.hasOwn(row, "id") ? row.id : undefined;
 
-    const fields = props.fields
-        .filter((item) => {
-            const key = item.colKey || item.key;
-            return key && !props.excludeKeys.includes(key);
+    const rawFields = props.fields as unknown;
+    const inputFields = Array.isArray(rawFields) ? rawFields : [];
+    const excludeKeys = props.excludeKeys as Array<string>;
+
+    const fields = inputFields
+        .filter((item): item is DetailPanelFieldInput => {
+            return Boolean(item) && typeof item === "object";
+        })
+        .map((item): DetailPanelFieldNormalized | null => {
+            const colKey = typeof item.colKey === "string" ? item.colKey : "";
+            if (colKey.length === 0) {
+                return null;
+            }
+            if (excludeKeys.includes(colKey)) {
+                return null;
+            }
+
+            const titleRaw = item.title;
+            const title = typeof titleRaw === "string" && titleRaw.length > 0 ? titleRaw : colKey;
+
+            return {
+                colKey: colKey,
+                title: title,
+                default: item.default,
+                formatter: item.formatter
+            };
         })
-        .map((item) => ({
-            key: item.colKey || item.key,
-            label: item.title || item.label,
-            default: item.default,
-            formatter: item.formatter
-        }));
+        .filter((item): item is DetailPanelFieldNormalized => {
+            return Boolean(item);
+        });
 
     // 约定：页面表格不展示 id，但右侧详情始终展示 id（如果 data.id 存在）
-    if (typeof dataId !== "undefined" && !fields.some((f) => f.key === "id")) {
+    if (typeof dataId !== "undefined" && !fields.some((f) => f.colKey === "id")) {
         fields.unshift({
-            key: "id",
-            label: "ID",
+            colKey: "id",
+            title: "ID",
             default: "-",
             formatter: undefined
         });
     }
 
-    return fields;
+    const safeFields = fields.filter((item) => {
+        if (!item || typeof item !== "object") {
+            return false;
+        }
+        const record = item as unknown as Record<string, unknown>;
+        const colKey = record["colKey"];
+        return typeof colKey === "string" && colKey.length > 0;
+    });
+
+    return safeFields;
 });
 
-/**
- * 格式化字段值
- * @param {any} value - 字段值
- * @param {Object} field - 字段配置
- * @returns {string} 格式化后的值
- */
-function formatValue(value, field) {
+function formatValue(value: unknown, field: DetailPanelFieldNormalized) {
     if (value === null || value === undefined || value === "") {
         return field.default || "-";
     }
     if (field.formatter) {
-        return field.formatter(value);
+        const result = field.formatter(value);
+        return typeof result === "string" ? result : String(result);
     }
-    return value;
+    return typeof value === "string" ? value : String(value);
 }
 </script>
 

package/src/components/pageDialog.vue

@@ -0,0 +1,223 @@
+<template>
+    <TDialog
+        v-model:visible="innerVisible"
+        :header="props.title === '' ? true : props.title"
+        :width="props.width"
+        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"
+    >
+        <template #footer>
+            <div class="dialog-footer">
+                <TButton variant="outline" @click="onFooterClose">关闭</TButton>
+                <TPopconfirm v-if="props.isConfirm" content="确定要提交吗？" :disabled="props.confirmLoading" @confirm="onFooterConfirm">
+                    <TButton theme="primary" :loading="props.confirmLoading">确定</TButton>
+                </TPopconfirm>
+            </div>
+        </template>
+        <div class="dialog-wrapper">
+            <slot :visible="innerVisible" :open="open" :close="close" :toggle="toggle" />
+        </div>
+    </TDialog>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+import { Button as TButton, Dialog as TDialog, Popconfirm as TPopconfirm } from "tdesign-vue-next";
+
+defineOptions({
+    inheritAttrs: false
+});
+
+type DialogTrigger = "close" | "confirm" | "cancel";
+
+type PageDialogEventContext = {
+    trigger: DialogTrigger;
+    visible: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    getVisible: () => boolean;
+};
+
+const openDelay = 100;
+const closeDelay = 300;
+
+const props = withDefaults(
+    defineProps<{
+        // 受控模式：传 v-model / modelValue 时由上层控制；组件会帮你处理关闭时的 update
+        modelValue?: boolean;
+        title?: string;
+        width?: string;
+        confirmLoading?: boolean;
+        isConfirm?: boolean;
+    }>(),
+    {
+        title: "",
+        width: "600px",
+        confirmLoading: false,
+        isConfirm: true
+    }
+);
+
+const emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "close", context: PageDialogEventContext): void;
+    (e: "confirm", context: PageDialogEventContext): void;
+    (e: "cancel", context: PageDialogEventContext): void;
+}>();
+
+let openDelayTimer: ReturnType<typeof setTimeout> | null = null;
+let closeDelayTimer: ReturnType<typeof setTimeout> | null = null;
+
+function clearTimer(timer: ReturnType<typeof setTimeout> | null): null {
+    if (timer) {
+        clearTimeout(timer);
+    }
+    return null;
+}
+
+// 所有弹框约定：始终使用 v-if + v-model(modelValue)
+const innerVisible = ref<boolean>(false);
+
+function open(): void {
+    emit("update:modelValue", true);
+}
+
+function close(): void {
+    openDelayTimer = clearTimer(openDelayTimer);
+    closeDelayTimer = clearTimer(closeDelayTimer);
+
+    innerVisible.value = false;
+    // 延迟通知上层关闭：配合 v-if，保证离场动画播完再卸载
+    closeDelayTimer = setTimeout(() => {
+        emit("update:modelValue", false);
+        closeDelayTimer = null;
+    }, closeDelay);
+}
+
+function toggle(): void {
+    if (innerVisible.value) {
+        close();
+        return;
+    }
+    open();
+}
+
+function createEventContext(trigger: DialogTrigger): PageDialogEventContext {
+    return {
+        trigger: trigger,
+        visible: innerVisible.value,
+        open: open,
+        close: close,
+        toggle: toggle,
+        getVisible: () => innerVisible.value
+    };
+}
+
+function applyModelValue(value: boolean): void {
+    if (value) {
+        // 关键点：先渲染为 false，再延迟 true，保证 v-if + 初次 visible=true 时也能触发进入动画
+        openDelayTimer = clearTimer(openDelayTimer);
+        innerVisible.value = false;
+        openDelayTimer = setTimeout(() => {
+            innerVisible.value = true;
+            openDelayTimer = null;
+        }, openDelay);
+        return;
+    }
+
+    openDelayTimer = clearTimer(openDelayTimer);
+    innerVisible.value = false;
+}
+
+onMounted(() => {
+    if (props.modelValue === true) {
+        applyModelValue(true);
+    }
+});
+
+onBeforeUnmount(() => {
+    openDelayTimer = clearTimer(openDelayTimer);
+    closeDelayTimer = clearTimer(closeDelayTimer);
+});
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (value !== true && value !== false) {
+            return;
+        }
+
+        applyModelValue(value);
+    },
+    { immediate: false }
+);
+
+function closeByTrigger(trigger: DialogTrigger): void {
+    // 固定交互：confirm 不自动关闭（等待异步提交成功后由调用侧 context.close() 决定关闭）
+    if (trigger === "confirm") {
+        return;
+    }
+    // cancel/close 自动关闭
+    close();
+}
+
+function onDialogClose(): void {
+    const context = createEventContext("close");
+    closeByTrigger("close");
+    emit("close", context);
+}
+
+function onDialogConfirm(): void {
+    const context = createEventContext("confirm");
+    emit("confirm", context);
+    closeByTrigger("confirm");
+}
+
+function onDialogCancel(): void {
+    const context = createEventContext("cancel");
+    emit("cancel", context);
+    closeByTrigger("cancel");
+}
+
+function onFooterConfirm(): void {
+    const context = createEventContext("confirm");
+    emit("confirm", context);
+    closeByTrigger("confirm");
+}
+
+function onFooterClose(): void {
+    const context = createEventContext("cancel");
+    emit("cancel", context);
+    closeByTrigger("cancel");
+}
+
+defineExpose({
+    open: open,
+    close: close,
+    toggle: toggle,
+    getVisible: () => innerVisible.value
+});
+</script>
+
+<style lang="scss" scoped>
+.dialog-wrapper {
+    background-color: var(--bg-color-page);
+    padding: var(--spacing-md);
+    border-radius: var(--border-radius);
+}
+.dialog-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+</style>