befly-admin-ui 1.10.1 → 1.10.2

package/views/resource/gallery/index.vue

@@ -1,7 +1,7 @@
 <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)">
+            <TUpload :action="$Config.uploadPath" :headers="$Const.uploadHeaders" :show-image-file-name="false" :file-list-display="() => null" accept="image/*" @success="$Method.onUploadSuccess($event, scope.reload)">
                 <TButton theme="primary">
                     <template #icon>
                         <UploadIcon />
@@ -12,7 +12,7 @@
         </template>
 
         <template #toolRight="scope">
-            <TInput v-model="$Data.keyword" placeholder="搜索图片名称" clearable @enter="handleSearch(scope.reload)" @clear="handleSearch(scope.reload)">
+            <TInput v-model="$Data.keyword" placeholder="搜索图片名称" clearable @enter="$Method.handleSearch(scope.reload)" @clear="$Method.handleSearch(scope.reload)">
                 <template #suffix-icon>
                     <SearchIcon />
                 </template>
@@ -24,7 +24,7 @@
         </template>
 
         <template #fileSize="{ row }">
-            {{ formatFileSize(row.fileSize) }}
+            {{ $Method.formatFileSize(row.fileSize) }}
         </template>
 
         <template #isImage="{ row }">
@@ -33,17 +33,17 @@
         </template>
 
         <template #createdAt="{ row }">
-            {{ formatDateTime(row.createdAt) }}
+            {{ $Method.formatDateTime(row.createdAt) }}
         </template>
 
         <template #updatedAt="{ row }">
-            {{ formatDateTime(row.updatedAt) }}
+            {{ $Method.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>
+                    <TButton variant="outline" size="small" @click="$Method.copyUrl(scope.row.url)">复制链接</TButton>
                 </div>
 
                 <DetailPanel :data="scope.row" :fields="$Data.columns">
@@ -53,17 +53,17 @@
                         </div>
                     </template>
                     <template #fileSize="slotScope">
-                        {{ formatFileSize(slotScope.value) }}
+                        {{ $Method.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) }}
+                        {{ $Method.formatDateTime(slotScope.value) }}
                     </template>
                     <template #updatedAt="slotScope">
-                        {{ formatDateTime(slotScope.value) }}
+                        {{ $Method.formatDateTime(slotScope.value) }}
                     </template>
                     <template #url="slotScope">
                         <a class="detail-link" :href="slotScope.value" target="_blank" rel="noreferrer">{{ slotScope.value }}</a>
@@ -86,8 +86,73 @@ import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 import { $Config } from "@/plugins/config.js";
 import { $Store } from "@/plugins/store.js";
 
-const uploadHeaders = {
-    Authorization: `Bearer ${$Store.local.get($Config.tokenName, "")}`
+const $Const = {
+    uploadHeaders: {
+        Authorization: `Bearer ${$Store.local.get($Config.tokenName, "")}`
+    }
+};
+
+const $Method = {
+    handleSearch(reload) {
+        reload({ keepSelection: false, resetPage: true });
+    },
+    async copyUrl(url) {
+        try {
+            await navigator.clipboard.writeText(url);
+            MessagePlugin.success("图片链接已复制");
+        } catch (error) {
+            MessagePlugin.error(error?.message || "复制失败");
+        }
+    },
+    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`;
+    },
+    formatFileExt(fileExt) {
+        if (typeof fileExt !== "string" || fileExt.length === 0) {
+            return "未知格式";
+        }
+
+        return fileExt.replace(/^\./, "").toUpperCase();
+    },
+    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}`;
+    },
+    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 });
+    }
 };
 
 const $Data = reactive({
@@ -95,7 +160,7 @@ const $Data = reactive({
     columns: withDefaultColumns([
         { colKey: "thumbnail", title: "缩略图", width: 96 },
         { colKey: "fileName", title: "文件名" },
-        { colKey: "fileExt", title: "扩展名", width: 100, format: formatFileExt },
+        { colKey: "fileExt", title: "扩展名", width: 100, format: $Method.formatFileExt },
         { colKey: "fileSize", title: "大小", width: 110 },
         { colKey: "isImage", title: "类型", width: 90 },
         { colKey: "createdAt", title: "创建时间", width: 170 },
@@ -121,72 +186,6 @@ const $Data = reactive({
         }
     }
 });
-
-function handleSearch(reload) {
-    reload({ keepSelection: false, resetPage: 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">