befly-admin-ui 1.8.37 → 1.9.1

package/jsconfig.json

@@ -1,12 +1,25 @@
 {
-    "extends": "../../jsconfig.base.json",
     "compilerOptions": {
         "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "lib": ["ESNext"],
+        "noEmit": true,
         "strict": false,
+        "useUnknownInCatchVariables": false,
+        "noUncheckedIndexedAccess": false,
         "exactOptionalPropertyTypes": false,
+        "noPropertyAccessFromIndexSignature": false,
         "noImplicitReturns": false,
         "noFallthroughCasesInSwitch": false,
-        "noImplicitOverride": false
+        "noImplicitOverride": false,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "allowImportingTsExtensions": false,
+        "allowJs": true
     },
     "include": ["apis/**/*.js", "libs/**/*.js", "plugins/**/*.js", "utils/**/*.js", "configs/**/*.json"],
     "exclude": ["node_modules", "dist", "logs", "temp", "tests"]

package/layouts/default.vue

@@ -86,7 +86,7 @@ import { $Config } from "@/plugins/config.js";
 
 const router = useRouter();
 const route = useRoute();
-const uploadHeaders = { Authorization: localStorage.getItem($Config.tokenName) || "" };
+const uploadHeaders = { Authorization: `Bearer ${localStorage.getItem($Config.tokenName) || ""}` };
 
 function isString(value) {
     return typeof value === "string";
@@ -134,6 +134,29 @@ const $Data = reactive({
     }
 });
 
+function normalizeAvatarUrl(value) {
+    if (!isString(value) || value.length === 0) {
+        return "";
+    }
+
+    return value;
+}
+
+async function fetchUserInfo() {
+    try {
+        const res = await $Http("/core/admin/detail", {}, [""]);
+        const userInfo = res?.data && typeof res.data === "object" ? res.data : {};
+
+        $Data.userInfo.nickname = userInfo.nickname || "管理员";
+        $Data.userInfo.role = userInfo.roleCode || userInfo.roleType || "超级管理员";
+        $Data.userInfo.avatar = normalizeAvatarUrl(userInfo.avatar);
+        $Data.userInfo.id = userInfo.id || 0;
+        $Data.userInfo.roleCode = userInfo.roleCode || "";
+    } catch (error) {
+        MessagePlugin.error(error.msg || error.message || "获取管理员信息失败");
+    }
+}
+
 async function fetchUserMenus() {
     try {
         const { data } = await $Http("/core/menu/all");
@@ -243,14 +266,28 @@ function handleSettings() {
     router.push("/core/settings");
 }
 
-function onAvatarUploadSuccess(res) {
+async function onAvatarUploadSuccess(res) {
     if (res.response?.code === 0 && res.response?.data?.url) {
-        $Data.userInfo.avatar = res.response.data.url;
-        MessagePlugin.success("头像上传成功");
+        const avatarUrl = res.response.data.url;
+
+        try {
+            if ($Data.userInfo.id) {
+                await $Http("/core/admin/upd", {
+                    id: $Data.userInfo.id,
+                    avatar: avatarUrl
+                });
+            }
+
+            $Data.userInfo.avatar = avatarUrl;
+            MessagePlugin.success("头像上传成功");
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "头像保存失败");
+        }
     }
 }
 
 fetchUserMenus();
+fetchUserInfo();
 
 watch(
     () => route.path,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "befly-admin-ui",
-    "version": "1.8.37",
-    "gitHead": "96067cc5c780c97ab6eb8c37c54d938739f71bbd",
+    "version": "1.9.1",
+    "gitHead": "fdeb630232962a7f6d023d368f90fd9a91ea20a0",
     "private": false,
     "description": "Befly - 管理后台功能组件",
     "keywords": [

package/views/jsconfig.json

@@ -1,15 +1,34 @@
 {
-    "extends": "../../../jsconfig.base.json",
+    "$schema": "https://json.schemastore.org/jsconfig",
     "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "useDefineForClassFields": true,
+        "moduleDetection": "force",
+        "strict": true,
         "noEmit": true,
-        "verbatimModuleSyntax": true,
+        "isolatedModules": true,
+        "noImplicitReturns": true,
+        "noImplicitOverride": true,
+        "noUncheckedSideEffectImports": true,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "noFallthroughCasesInSwitch": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
         "allowJs": true,
-        "types": ["vite/client"],
-        "baseUrl": ".",
+        "checkJs": false,
+        "lib": ["ESNext"],
+        "noImplicitAny": false,
         "paths": {
-            "@/*": ["../../admin/src/*"]
+            "@/*": ["./*"],
+            "*": ["./*"]
         }
     },
-    "include": ["**/*.vue", "**/*.js"],
-    "exclude": ["node_modules", "dist", "logs", "temp"]
+    "include": ["**/*.js"],
+    "exclude": ["node_modules", "dist", "**/*.test.js"]
 }

package/views/resource/gallery/index.vue

@@ -0,0 +1,271 @@
+<template>
+    <PageTableDetail class="page-gallery page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['thumbnail', 'fileSize', 'isImage', 'createdAt', 'updatedAt']">
+        <template #toolLeft="scope">
+            <TUpload :action="$Config.uploadPath" :headers="uploadHeaders" :show-image-file-name="false" :file-list-display="() => null" accept="image/*" @success="onUploadSuccess($event, scope.reload)">
+                <TButton theme="primary">
+                    <template #icon>
+                        <UploadIcon />
+                    </template>
+                    上传图片
+                </TButton>
+            </TUpload>
+        </template>
+
+        <template #toolRight="scope">
+            <TInput v-model="$Data.keyword" placeholder="搜索图片名称" clearable @enter="handleSearch(scope.reload)" @clear="handleSearch(scope.reload)">
+                <template #suffix-icon>
+                    <SearchIcon />
+                </template>
+            </TInput>
+            <TButton shape="circle" @click="handleRefresh(scope.reload)">
+                <template #icon>
+                    <RefreshIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #thumbnail="{ row }">
+            <div class="image-cell">
+                <TImage class="image-thumb" :src="row.url" :alt="row.fileName" fit="cover" gallery overlay-trigger="hover" />
+            </div>
+        </template>
+
+        <template #fileSize="{ row }">
+            {{ formatFileSize(row.fileSize) }}
+        </template>
+
+        <template #isImage="{ row }">
+            <TTag v-if="row.isImage === 1" shape="round" theme="success" variant="light-outline">图片</TTag>
+            <TTag v-else shape="round" variant="light-outline">文件</TTag>
+        </template>
+
+        <template #createdAt="{ row }">
+            {{ formatDateTime(row.createdAt) }}
+        </template>
+
+        <template #updatedAt="{ row }">
+            {{ formatDateTime(row.updatedAt) }}
+        </template>
+
+        <template #detail="scope">
+            <div class="gallery-detail" v-if="scope.row">
+                <div class="detail-actions">
+                    <TButton variant="outline" size="small" @click="copyUrl(scope.row.url)">复制链接</TButton>
+                </div>
+
+                <DetailPanel :data="scope.row" :fields="$Data.columns">
+                    <template #thumbnail="slotScope">
+                        <div class="detail-thumb-wrap">
+                            <TImage class="detail-thumb" :src="slotScope.row.url" :alt="slotScope.row.fileName" fit="cover" gallery overlay-trigger="hover" />
+                        </div>
+                    </template>
+                    <template #fileSize="slotScope">
+                        {{ formatFileSize(slotScope.value) }}
+                    </template>
+                    <template #isImage="slotScope">
+                        <TTag v-if="slotScope.value === 1" shape="round" theme="success" variant="light-outline">图片</TTag>
+                        <TTag v-else shape="round" variant="light-outline">文件</TTag>
+                    </template>
+                    <template #createdAt="slotScope">
+                        {{ formatDateTime(slotScope.value) }}
+                    </template>
+                    <template #updatedAt="slotScope">
+                        {{ formatDateTime(slotScope.value) }}
+                    </template>
+                    <template #url="slotScope">
+                        <a class="detail-link" :href="slotScope.value" target="_blank" rel="noreferrer">{{ slotScope.value }}</a>
+                    </template>
+                </DetailPanel>
+            </div>
+            <div v-else class="gallery-detail-empty">请选择一张图片查看详情</div>
+        </template>
+    </PageTableDetail>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { Button as TButton, Image as TImage, Input as TInput, MessagePlugin, Tag as TTag, Upload as TUpload } from "tdesign-vue-next";
+import { RefreshIcon, SearchIcon, UploadIcon } from "tdesign-icons-vue-next";
+
+import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
+import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+import { $Config } from "@/plugins/config.js";
+
+const uploadHeaders = {
+    Authorization: `Bearer ${localStorage.getItem($Config.tokenName) || ""}`
+};
+
+const $Data = reactive({
+    keyword: "",
+    columns: withDefaultColumns([
+        { colKey: "thumbnail", title: "缩略图", width: 96 },
+        { colKey: "fileName", title: "文件名", fixed: "left", minWidth: 220 },
+        { colKey: "fileExt", title: "扩展名", width: 100, format: formatFileExt },
+        { colKey: "fileSize", title: "大小", width: 110 },
+        { colKey: "isImage", title: "类型", width: 90 },
+        { colKey: "createdAt", title: "创建时间", width: 170 },
+        { colKey: "updatedAt", title: "更新时间", width: 170 },
+        { colKey: "userId", title: "上传人", detail: true },
+        { colKey: "fileType", title: "文件类型值", detail: true },
+        { colKey: "fileKey", title: "文件标识", detail: true },
+        { colKey: "filePath", title: "访问路径", detail: true },
+        { colKey: "url", title: "完整地址", detail: true }
+    ]),
+    endpoints: {
+        list: {
+            path: "/core/source/imageList",
+            dropValues: [""],
+            dropKeyValue: {
+                keyword: [""]
+            },
+            buildData: () => {
+                return {
+                    keyword: $Data.keyword
+                };
+            }
+        }
+    }
+});
+
+function handleSearch(reload) {
+    reload({ keepSelection: false, resetPage: true });
+}
+
+function handleRefresh(reload) {
+    reload({ keepSelection: true });
+}
+
+async function copyUrl(url) {
+    try {
+        await navigator.clipboard.writeText(url);
+        MessagePlugin.success("图片链接已复制");
+    } catch (error) {
+        MessagePlugin.error(error?.message || "复制失败");
+    }
+}
+
+function formatFileSize(fileSize) {
+    if (!Number.isFinite(fileSize) || fileSize <= 0) {
+        return "0 B";
+    }
+
+    if (fileSize < 1024) {
+        return `${fileSize} B`;
+    }
+
+    if (fileSize < 1024 * 1024) {
+        return `${(fileSize / 1024).toFixed(1)} KB`;
+    }
+
+    return `${(fileSize / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function formatFileExt(fileExt) {
+    if (typeof fileExt !== "string" || fileExt.length === 0) {
+        return "未知格式";
+    }
+
+    return fileExt.replace(/^\./, "").toUpperCase();
+}
+
+function formatDateTime(value) {
+    if (!value) {
+        return "-";
+    }
+
+    const date = new Date(value);
+    if (!Number.isFinite(date.getTime())) {
+        return value;
+    }
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+function onUploadSuccess(res, reload) {
+    if (res.response?.code !== 0 || res.response?.data?.isImage !== 1) {
+        MessagePlugin.error(res.response?.msg || "上传失败");
+        return;
+    }
+
+    MessagePlugin.success("上传成功");
+    reload({ keepSelection: false, resetPage: true });
+}
+</script>
+
+<style scoped lang="scss">
+.page-gallery {
+    :deep(.main-tool .left),
+    :deep(.main-tool .right) {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    :deep(.main-tool .right .t-input) {
+        width: 280px;
+    }
+}
+
+.image-cell {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.image-thumb {
+    width: 100%;
+    height: 56px;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #f3f6fb;
+}
+
+.gallery-detail {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    height: 100%;
+    padding: 12px;
+    overflow: auto;
+    background: var(--bg-color-container);
+}
+
+.detail-actions {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.detail-thumb-wrap {
+    display: flex;
+    width: 100%;
+}
+
+.detail-thumb {
+    width: 100%;
+    height: 180px;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #f3f6fb;
+}
+
+.detail-link {
+    color: var(--primary-color);
+    word-break: break-all;
+}
+
+.gallery-detail-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-placeholder);
+    background: var(--bg-color-container);
+}
+</style>