befly-admin-ui 1.8.20 → 1.8.22

package/components/detailPanel.vue

@@ -17,7 +17,7 @@
                         </template>
                         <!-- 默认显示 -->
                         <template v-else>
-                            {{ formatValue(data[field.colKey], field) }}
+                            {{ formatFieldValue(data[field.colKey], field) }}
                         </template>
                     </div>
                 </div>
@@ -33,6 +33,7 @@
 <script setup>
 import { computed } from "vue";
 import { Tag as TTag } from "tdesign-vue-next";
+import { formatFieldValue } from "../utils/formatFieldValue.js";
 
 const props = defineProps({
     /**
@@ -96,7 +97,7 @@ const normalizedFields = computed(() => {
                 colKey: item.colKey,
                 title: item.title || item.colKey,
                 default: item.default,
-                formatter: item.formatter
+                format: item.format
             };
         })
         .filter((item) => {
@@ -109,7 +110,7 @@ const normalizedFields = computed(() => {
             colKey: "id",
             title: "ID",
             default: "-",
-            formatter: undefined
+            format: undefined
         });
     }
 
@@ -122,17 +123,6 @@ const normalizedFields = computed(() => {
 
     return safeFields;
 });
-
-function formatValue(value, field) {
-    if (value === null || value === undefined || value === "") {
-        return field.default || "-";
-    }
-    if (field.formatter) {
-        const result = field.formatter(value);
-        return result;
-    }
-    return value;
-}
 </script>
 
 <style scoped lang="scss">

package/components/{pagedTableDetail.vue → pageTableDetail.vue}

@@ -16,8 +16,11 @@
                         <slot name="operation" v-bind="buildOperationSlotProps(scope)"></slot>
                     </template>
 
-                    <template v-for="name in forwardedTableSlotNames" :key="name" v-slot:[name]="scope">
-                        <slot :name="name" v-bind="scope"></slot>
+                    <template v-for="name in tableRenderSlotNames" :key="name" v-slot:[name]="scope">
+                        <slot v-if="$slots[name]" :name="name" v-bind="scope"></slot>
+                        <template v-else>
+                            {{ formatTableCell(scope.row, name) }}
+                        </template>
                     </template>
                 </TTable>
             </div>
@@ -42,6 +45,7 @@ import { computed, onMounted, reactive, useSlots } from "vue";
 import { DialogPlugin, MessagePlugin, Pagination as TPagination, Table as TTable } from "tdesign-vue-next";
 import DetailPanel from "./detailPanel.vue";
 import { $Http } from "@/plugins/http";
+import { formatFieldValue } from "../utils/formatFieldValue.js";
 
 const props = defineProps({
     columns: {
@@ -151,41 +155,51 @@ function mergeDetailColumns(mainColumns, extraColumns) {
     return out;
 }
 
-function isDetail(col) {
-    const record = col;
-    if (record["detail"] === true) return true;
-    return false;
-}
-
-const tableColumns = computed(() => {
-    const out = [];
-    const cols = filterValidColumns(props.columns);
-    for (const col of cols) {
-        if (isDetail(col)) continue;
-        out.push(col);
-    }
-    return out;
-});
-
-const detailFields = computed(() => {
+const columnsMeta = computed(() => {
     // 只维护一个 columns：
     // - detail: false（默认）=> 表格展示（同时也会出现在详情里，且顺序靠前）
     // - detail: true          => 仅在详情展示（顺序靠后）
-    const extras = [];
+    const tableColumns = [];
+    const extraDetailColumns = [];
+    const tableColumnMap = {};
+    const formatKeys = [];
+
     const cols = filterValidColumns(props.columns);
     for (const col of cols) {
-        if (!isDetail(col)) continue;
-        extras.push(col);
-    }
+        if (col?.detail === true) {
+            extraDetailColumns.push(col);
+            continue;
+        }
+
+        tableColumns.push(col);
+
+        const key = getColKey(col);
+        if (!key) {
+            continue;
+        }
+
+        tableColumnMap[key] = col;
 
-    if (extras.length > 0) {
-        return mergeDetailColumns(tableColumns.value, extras);
+        const format = col.format;
+        if ((typeof format === "string" && format.trim().length > 0) || typeof format === "function") {
+            formatKeys.push(key);
+        }
     }
 
-    // 默认复用表格列
-    return tableColumns.value;
+    const detailFields = extraDetailColumns.length > 0 ? mergeDetailColumns(tableColumns, extraDetailColumns) : tableColumns;
+
+    return {
+        tableColumns: tableColumns,
+        detailFields: detailFields,
+        tableColumnMap: tableColumnMap,
+        formatKeys: formatKeys
+    };
 });
 
+const tableColumns = computed(() => columnsMeta.value.tableColumns);
+
+const detailFields = computed(() => columnsMeta.value.detailFields);
+
 const forwardedTableSlotNames = computed(() => {
     if (Array.isArray(props.tableSlotNames) && props.tableSlotNames.length > 0) {
         const out = [];
@@ -212,6 +226,36 @@ const forwardedTableSlotNames = computed(() => {
     return names;
 });
 
+const tableRenderSlotNames = computed(() => {
+    const out = [];
+    const set = new Set();
+
+    for (const name of forwardedTableSlotNames.value) {
+        if (!name || set.has(name)) {
+            continue;
+        }
+        set.add(name);
+        out.push(name);
+    }
+
+    for (const key of columnsMeta.value.formatKeys) {
+        if (!key || set.has(key)) {
+            continue;
+        }
+        set.add(key);
+        out.push(key);
+    }
+
+    return out;
+});
+
+function formatTableCell(row, colKey) {
+    const record = row && typeof row === "object" ? row : {};
+    const value = record[colKey];
+    const field = columnsMeta.value.tableColumnMap[colKey] || {};
+    return formatFieldValue(value, field);
+}
+
 function setCurrentRow(row) {
     $Data.currentRow = row;
     emit("row-change", { row: row });

package/layouts/default.vue

@@ -7,7 +7,7 @@
                 <div class="logo-icon">
                     <AppIcon style="width: 24px; height: 24px; color: var(--primary-color)" />
                 </div>
-                <h2>{{ $Config.appTitle }}</h2>
+                <h2>{{ appTitle }}</h2>
             </div>
 
             <!-- 菜单区域 -->
@@ -45,7 +45,7 @@
                     <span>系统设置</span>
                 </div>
                 <div class="footer-user">
-                    <t-upload :action="$Config.uploadUrl" :headers="uploadHeaders" :show-upload-list="false" accept="image/*" @success="onAvatarUploadSuccess">
+                    <t-upload :action="uploadPath" :headers="uploadHeaders" :show-upload-list="false" accept="image/*" @success="onAvatarUploadSuccess">
                         <div class="user-avatar" :class="{ 'has-avatar': $Data.userInfo.avatar }">
                             <img v-if="$Data.userInfo.avatar" :src="$Data.userInfo.avatar" alt="avatar" />
                             <UserIcon v-else style="width: 16px; height: 16px; color: #fff" />
@@ -81,7 +81,6 @@ import { CloudIcon, CloseCircleIcon, CodeIcon, LinkIcon, MenuIcon, SettingIcon,
 
 import { reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { $Config } from "@/plugins/config.js";
 import { $Http } from "@/plugins/http.js";
 
 const router = useRouter();
@@ -89,6 +88,8 @@ const route = useRoute();
 const uploadHeaders = { Authorization: localStorage.getItem("yicode-token") || "" };
 
 const loginPath = "/core/login";
+const appTitle = import.meta.env.VITE_APP_TITLE;
+const uploadPath = import.meta.env.VITE_UPLOAD_PATH;
 
 function isString(value) {
     return typeof value === "string";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "befly-admin-ui",
-    "version": "1.8.20",
-    "gitHead": "f22486b763b5f436a8930e108c385bfb0a79f429",
+    "version": "1.8.22",
+    "gitHead": "757e491f7d2d22339b35ffd577c14778203e5757",
     "private": false,
     "description": "Befly - 管理后台功能组件",
     "keywords": [

package/utils/formatFieldValue.js

@@ -0,0 +1,106 @@
+function toDate(value) {
+    if (value instanceof Date) {
+        return Number.isFinite(value.getTime()) ? value : null;
+    }
+
+    if (typeof value === "number") {
+        if (!Number.isFinite(value)) {
+            return null;
+        }
+        const ms = Math.abs(value) < 1000000000000 ? value * 1000 : value;
+        const date = new Date(ms);
+        return Number.isFinite(date.getTime()) ? date : null;
+    }
+
+    if (typeof value === "string") {
+        const text = value.trim();
+        if (text.length === 0) {
+            return null;
+        }
+
+        if (/^\d+$/.test(text)) {
+            const num = Number(text);
+            if (!Number.isFinite(num)) {
+                return null;
+            }
+            const ms = Math.abs(num) < 1000000000000 ? num * 1000 : num;
+            const date = new Date(ms);
+            return Number.isFinite(date.getTime()) ? date : null;
+        }
+
+        const date = new Date(text);
+        return Number.isFinite(date.getTime()) ? date : null;
+    }
+
+    return null;
+}
+
+function getDateParts(value) {
+    const date = toDate(value);
+    if (!date) {
+        return null;
+    }
+
+    return {
+        year: date.getFullYear(),
+        month: String(date.getMonth() + 1).padStart(2, "0"),
+        day: String(date.getDate()).padStart(2, "0"),
+        hours: String(date.getHours()).padStart(2, "0"),
+        minutes: String(date.getMinutes()).padStart(2, "0"),
+        seconds: String(date.getSeconds()).padStart(2, "0")
+    };
+}
+
+function formatDateTime(value) {
+    const parts = getDateParts(value);
+    if (!parts) {
+        return value;
+    }
+
+    return `${parts.year}-${parts.month}-${parts.day} ${parts.hours}:${parts.minutes}:${parts.seconds}`;
+}
+
+function formatDate(value) {
+    const parts = getDateParts(value);
+    if (!parts) {
+        return value;
+    }
+
+    return `${parts.year}-${parts.month}-${parts.day}`;
+}
+
+function formatTime(value) {
+    const parts = getDateParts(value);
+    if (!parts) {
+        return value;
+    }
+
+    return `${parts.hours}:${parts.minutes}:${parts.seconds}`;
+}
+
+export function formatFieldValue(value, field = {}) {
+    if (value === null || value === undefined || value === "") {
+        return field.default || "-";
+    }
+
+    const format = field.format;
+
+    if (typeof format === "function") {
+        return format(value);
+    }
+
+    if (typeof format === "string") {
+        const normalized = format.trim();
+        if (normalized === "date") {
+            return formatDate(value);
+        }
+        if (normalized === "date-time") {
+            return formatDateTime(value);
+        }
+        if (normalized === "time") {
+            return formatTime(value);
+        }
+    }
+
+    return value;
+}

package/views/config/dict/index.vue

@@ -56,7 +56,7 @@ import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem
 import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon, SearchIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
 import { $Http } from "@/plugins/http";
-import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 const $Data = reactive({

package/views/config/dictType/index.vue

@@ -51,7 +51,7 @@ import { reactive } from "vue";
 import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Input as TInput } from "tdesign-vue-next";
 import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon, SearchIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
-import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 const $Data = reactive({

package/views/config/system/index.vue

@@ -80,7 +80,7 @@ import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem
 import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
-import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 // 响应式数据

package/views/log/email/index.vue

@@ -75,7 +75,7 @@ import { CheckCircleIcon, RefreshIcon, SendIcon } from "tdesign-icons-vue-next";
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import { $Http } from "@/plugins/http";
-import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 const sendFormRef = ref(null);
 

package/views/log/login/index.vue

@@ -43,7 +43,7 @@ import { reactive } from "vue";
 import { Button as TButton, Tag as TTag } from "tdesign-vue-next";
 import { RefreshIcon } from "tdesign-icons-vue-next";
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
-import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 // 响应式数据
@@ -54,8 +54,9 @@ const $Data = reactive({
         { colKey: "browserName", title: "浏览器" },
         { colKey: "osName", title: "操作系统" },
         { colKey: "deviceType", title: "设备类型" },
-        { colKey: "loginTime", title: "登录时间" },
+        { colKey: "createdAt", title: "登录时间", format: "date-time" },
         { colKey: "loginResult", title: "登录结果" },
+        // 详情面板
         { colKey: "nickname", title: "昵称", detail: true },
         { colKey: "browserVersion", title: "浏览器版本", detail: true },
         { colKey: "osVersion", title: "系统版本", detail: true },

package/views/log/operate/index.vue

@@ -66,7 +66,7 @@ import { reactive } from "vue";
 import { Button as TButton, Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
 import { RefreshIcon } from "tdesign-icons-vue-next";
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
-import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 // 响应式数据

package/views/people/admin/index.vue

@@ -52,7 +52,7 @@ import { reactive } from "vue";
 import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Tag as TTag } from "tdesign-vue-next";
 import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
-import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 // 响应式数据

package/views/permission/role/index.vue

@@ -77,7 +77,7 @@ import { AddIcon, ChevronDownIcon, CodeIcon, DeleteIcon, EditIcon, RefreshIcon,
 import EditDialog from "./components/edit.vue";
 import MenuDialog from "./components/menu.vue";
 import ApiDialog from "./components/api.vue";
-import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 // 响应式数据