@befly-addon/admin 1.8.4 → 1.8.6

package/adminViews/config/system/components/edit.vue

@@ -1,5 +1,5 @@
 <template>
-    <TDialog v-model:visible="$Data.visible" :title="$Prop.actionType === 'upd' ? '编辑配置' : '添加配置'" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="10vh" @close="$Method.onClose">
+    <PageDialog v-model="dialogVisible" :title="$Prop.actionType === 'upd' ? '编辑配置' : '添加配置'" :confirm-loading="$Data.submitting" @confirm="onSubmit">
         <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
             <TFormItem label="配置名称" prop="name">
                 <TInput v-model="$Data.formData.name" placeholder="请输入配置名称" :disabled="$Data.isSystem" />
@@ -37,15 +37,14 @@
                 </TRadioGroup>
             </TFormItem>
         </TForm>
-        <template #footer>
-            <TButton @click="$Method.onClose">取消</TButton>
-            <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">确定</TButton>
-        </template>
-    </TDialog>
+    </PageDialog>
 </template>
 
 <script setup lang="ts">
-import { Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, Select as TSelect, Option as TOption, RadioGroup as TRadioGroup, Radio as TRadio, Button as TButton, MessagePlugin } from "tdesign-vue-next";
+import { computed } from "vue";
+
+import { Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, Select as TSelect, Option as TOption, RadioGroup as TRadioGroup, Radio as TRadio, MessagePlugin } from "tdesign-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 
 const $Prop = defineProps({
@@ -68,13 +67,23 @@ const $Emit = defineEmits<{
     (e: "success"): void;
 }>();
 
+type PageDialogEventContext = {
+    close: () => void;
+};
+
 // 表单引用
 const $From = $shallowRef({
     form: null
 });
 
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
 const $Data = $ref({
-    visible: false,
     submitting: false,
     isSystem: false,
     formData: {
@@ -103,72 +112,65 @@ const $Data2 = $shallowRef({
     groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
 });
 
-// 方法集合
-const $Method = {
-    async initData() {
-        $Method.onShow();
-    },
+async function initData(): Promise<void> {
+    onShow();
+}
 
-    onShow() {
-        $Data.visible = true;
-        if ($Prop.actionType === "upd" && $Prop.rowData) {
-            $Data.formData.id = $Prop.rowData.id || 0;
-            $Data.formData.name = $Prop.rowData.name || "";
-            $Data.formData.code = $Prop.rowData.code || "";
-            $Data.formData.value = $Prop.rowData.value || "";
-            $Data.formData.valueType = $Prop.rowData.valueType || "string";
-            $Data.formData.group = $Prop.rowData.group || "";
-            $Data.formData.sort = $Prop.rowData.sort || 0;
-            $Data.formData.description = $Prop.rowData.description || "";
-            $Data.formData.state = $Prop.rowData.state || 1;
-            $Data.isSystem = $Prop.rowData.isSystem === 1;
-        } else {
-            $Data.formData = {
-                id: 0,
-                name: "",
-                code: "",
-                value: "",
-                valueType: "string",
-                group: "",
-                sort: 0,
-                description: "",
-                state: 1
-            };
-            $Data.isSystem = false;
-        }
-    },
+function onShow(): void {
+    if ($Prop.actionType === "upd" && $Prop.rowData) {
+        const row = $Prop.rowData as Record<string, unknown>;
+        $Data.formData.id = (row["id"] as number) || 0;
+        $Data.formData.name = (row["name"] as string) || "";
+        $Data.formData.code = (row["code"] as string) || "";
+        $Data.formData.value = (row["value"] as string) || "";
+        $Data.formData.valueType = (row["valueType"] as string) || "string";
+        $Data.formData.group = (row["group"] as string) || "";
+        $Data.formData.sort = (row["sort"] as number) || 0;
+        $Data.formData.description = (row["description"] as string) || "";
+        $Data.formData.state = (row["state"] as number) || 1;
+        $Data.isSystem = row["isSystem"] === 1;
+    } else {
+        $Data.formData = {
+            id: 0,
+            name: "",
+            code: "",
+            value: "",
+            valueType: "string",
+            group: "",
+            sort: 0,
+            description: "",
+            state: 1
+        };
+        $Data.isSystem = false;
+    }
+}
 
-    onClose() {
-        $Data.visible = false;
-        $Emit("update:modelValue", false);
-    },
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    const valid = await $From.form?.validate();
+    if (valid !== true) return;
 
-    async onSubmit() {
-        const valid = await $From.form?.validate();
-        if (valid !== true) return;
-
-        $Data.submitting = true;
-        try {
-            const api = $Prop.actionType === "upd" ? "/addon/admin/sysConfig/upd" : "/addon/admin/sysConfig/ins";
-            const res = await $Http.post(api, $Data.formData);
-
-            if (res.code === 0) {
-                MessagePlugin.success($Prop.actionType === "upd" ? "编辑成功" : "添加成功");
-                $Emit("success");
-                $Method.onClose();
-            } else {
-                MessagePlugin.error(res.msg || "操作失败");
+    $Data.submitting = true;
+    try {
+        const api = $Prop.actionType === "upd" ? "/addon/admin/sysConfig/upd" : "/addon/admin/sysConfig/ins";
+        const res = await $Http.post(api, $Data.formData);
+
+        if (res.code === 0) {
+            MessagePlugin.success($Prop.actionType === "upd" ? "编辑成功" : "添加成功");
+            $Emit("success");
+            if (context && typeof context.close === "function") {
+                context.close();
             }
-        } catch (error) {
-            MessagePlugin.error("操作失败");
-        } finally {
-            $Data.submitting = false;
+        } else {
+            MessagePlugin.error(res.msg || "操作失败");
         }
+    } catch (error) {
+        MessagePlugin.error("操作失败");
+    } finally {
+        $Data.submitting = false;
     }
-};
+}
 
-// 该组件由父组件 v-if 控制挂载/卸载，因此无需 watch：创建时初始化一次即可
-$Method.initData();
+initData();
 </script>
 
 <style scoped lang="scss"></style>

package/adminViews/config/system/index.vue

@@ -1,19 +1,19 @@
 <template>
-    <PagedTableDetailPage class="page-sys-config page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['isSystem', 'valueType', 'state']">
+    <PagedTableDetail class="page-sys-config page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['isSystem', 'valueType', 'state']">
         <template #toolLeft="scope">
-            <TButton theme="primary" @click="$Method.onAdd">
+            <TButton theme="primary" @click="onAdd">
                 <template #icon>
                     <ILucidePlus />
                 </template>
                 新增配置
             </TButton>
-            <TSelect v-model="$Data.filter.group" placeholder="配置分组" clearable style="width: 150px" @change="$Method.handleFilter(scope.reload)">
+            <TSelect v-model="$Data.filter.group" placeholder="配置分组" clearable style="width: 150px" @change="handleFilter(scope.reload)">
                 <TOption v-for="item in $Data.groupOptions" :key="item" :label="item" :value="item" />
             </TSelect>
         </template>
 
         <template #toolRight="scope">
-            <TButton shape="circle" @click="$Method.onReload(scope.reload)">
+            <TButton shape="circle" @click="onReload(scope.reload)">
                 <template #icon>
                     <ILucideRotateCw />
                 </template>
@@ -35,7 +35,7 @@
         </template>
 
         <template #operation="{ row, deleteRow }">
-            <TDropdown trigger="click" placement="bottom-right" @click="$Method.onDropdownAction($event, row, deleteRow)">
+            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
                 <TButton theme="primary" size="small">
                     操作
                     <template #suffix><ILucideChevronDown /></template>
@@ -54,7 +54,7 @@
         </template>
 
         <template #detail="scope">
-            <DetailPanel :data="scope.currentRow" :fields="$Data.detailFields">
+            <DetailPanel :data="scope.row" :fields="$Data.columns">
                 <template #isSystem="slotScope">
                     <TTag v-if="slotScope.value === 1" shape="round" theme="warning" variant="light-outline">系统配置</TTag>
                     <TTag v-else shape="round" variant="light-outline">自定义配置</TTag>
@@ -69,9 +69,9 @@
         </template>
 
         <template #dialogs="scope">
-            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.onDialogSuccess(scope.reload)" />
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
         </template>
-    </PagedTableDetailPage>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
@@ -82,8 +82,8 @@ import ILucidePencil from "~icons/lucide/pencil";
 import ILucideTrash2 from "~icons/lucide/trash-2";
 import ILucideChevronDown from "~icons/lucide/chevron-down";
 import EditDialog from "./components/edit.vue";
-import DetailPanel from "@/components/DetailPanel.vue";
-import PagedTableDetailPage from "@/components/PagedTableDetailPage.vue";
+import DetailPanel from "@/components/detailPanel.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 // 响应式数据
@@ -97,18 +97,9 @@ const $Data = $ref({
         { colKey: "sort", title: "排序", width: 80 },
         { colKey: "isSystem", title: "类型", width: 80 },
         { colKey: "state", title: "状态", width: 80 },
-        { colKey: "operation", title: "操作", width: 100 }
+        { colKey: "operation", title: "操作", width: 100 },
+        { colKey: "description", title: "描述说明", detail: true }
     ]),
-    detailFields: [
-        { colKey: "name", title: "配置名称" },
-        { colKey: "code", title: "配置代码" },
-        { colKey: "value", title: "配置值" },
-        { colKey: "valueType", title: "值类型" },
-        { colKey: "group", title: "配置分组" },
-        { colKey: "sort", title: "排序" },
-        { colKey: "isSystem", title: "配置类型" },
-        { colKey: "description", title: "描述说明" }
-    ],
     endpoints: {
         list: {
             path: "/addon/admin/sysConfig/list",
@@ -144,46 +135,45 @@ const $Data = $ref({
     groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
 });
 
-// 方法
-const $Method = {
-    onAdd() {
-        $Method.onAction("add", {});
-    },
+function onAdd(): void {
+    onAction("add", {});
+}
 
-    handleFilter(reload) {
-        reload({ keepSelection: false, resetPage: true });
-    },
+function handleFilter(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: true });
+}
 
-    onReload(reload) {
-        reload({ keepSelection: true });
-    },
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-    onDialogSuccess(reload) {
-        reload({ keepSelection: true });
-    },
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-    onAction(command, rowData) {
-        $Data.actionType = command;
-        if (command === "add") {
-            $Data.rowData = {};
-        } else {
-            $Data.rowData = Object.assign({}, rowData);
-        }
+function onAction(command: string, rowData: Record<string, unknown>): void {
+    $Data.actionType = command;
+    if (command === "add") {
+        $Data.rowData = {};
+    } else {
+        $Data.rowData = Object.assign({}, rowData);
+    }
 
-        if (command === "add" || command === "upd") {
-            $Data.editVisible = true;
-        }
-    },
+    if (command === "add" || command === "upd") {
+        $Data.editVisible = true;
+    }
+}
 
-    onDropdownAction(data, rowData, deleteRow) {
-        const cmd = data && data.value ? String(data.value) : "";
-        if (cmd === "del") {
-            deleteRow(rowData);
-            return;
-        }
-        $Method.onAction(cmd, rowData);
+function onDropdownAction(data: unknown, rowData: Record<string, unknown>, deleteRow: (row: Record<string, unknown>) => void): void {
+    const record = data as Record<string, unknown>;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
+    if (cmd === "del") {
+        deleteRow(rowData);
+        return;
     }
-};
+    onAction(cmd, rowData);
+}
 </script>
 
 <style scoped lang="scss">

package/adminViews/index/components/userInfo.vue

@@ -22,13 +22,13 @@
             </div>
             <div v-if="$Data.userInfo.lastLoginTime" class="detail-item">
                 <ILucideClock />
-                <span>{{ $Method.formatTime($Data.userInfo.lastLoginTime) }}</span>
+                <span>{{ formatTime($Data.userInfo.lastLoginTime) }}</span>
             </div>
         </div>
 
         <!-- 仅 dev 角色显示刷新缓存按钮 -->
         <div v-if="$Data.userInfo.roleCode === 'dev'" class="user-actions">
-            <TButton theme="primary" size="mini" :loading="$Data.refreshing" @click="$Method.handleRefreshCache">
+            <TButton theme="primary" size="mini" :loading="$Data.refreshing" @click="handleRefreshCache">
                 <template #icon>
                     <ILucideRotateCw />
                 </template>
@@ -53,85 +53,75 @@ const $Data = $ref({
     refreshing: false
 });
 
-// 方法集合
-const $Method = {
-    // 获取数据
-    async fetchData() {
-        try {
-            const { data } = await $Http.post(
-                "/addon/admin/admin/detail",
-                {},
-                {
-                    dropValues: [""]
-                }
-            );
-            Object.assign($Data.userInfo, data);
-        } catch (error) {
-            MessagePlugin.error("获取用户信息失败");
-        }
-    },
-
-    // 刷新缓存
-    async handleRefreshCache() {
-        try {
-            $Data.refreshing = true;
-            const result = await $Http.post("/addon/admin/admin/cacheRefresh");
-
-            if (result.code === 0) {
-                const { apis, menus, roles } = result.data;
-                const messages = [];
-
-                if (apis.success) {
-                    messages.push(`接口缓存: ${apis.count} 个`);
-                }
-                if (menus.success) {
-                    messages.push(`菜单缓存: ${menus.count} 个`);
-                }
-                if (roles.success) {
-                    messages.push(`角色缓存: ${roles.count} 个`);
-                }
-
-                MessagePlugin.success(`缓存刷新成功！${messages.join("，")}`);
-            } else {
-                MessagePlugin.warning(result.msg || "部分缓存刷新失败");
+async function fetchData(): Promise<void> {
+    try {
+        const { data } = await $Http.post(
+            "/addon/admin/admin/detail",
+            {},
+            {
+                dropValues: [""]
             }
-        } catch (error) {
-            MessagePlugin.error("刷新缓存失败，请稍后重试");
-        } finally {
-            $Data.refreshing = false;
-        }
-    },
-
-    // 格式化时间
-    formatTime(timestamp) {
-        if (!timestamp) return "";
-        const date = new Date(Number(timestamp));
-        const now = new Date();
-        const diff = now - date;
-
-        // 小于1分钟
-        if (diff < 60000) {
-            return "刚刚";
-        }
-        // 小于1小时
-        if (diff < 3600000) {
-            return `${Math.floor(diff / 60000)}分钟前`;
-        }
-        // 小于24小时
-        if (diff < 86400000) {
-            return `${Math.floor(diff / 3600000)}小时前`;
-        }
-        // 小于7天
-        if (diff < 604800000) {
-            return `${Math.floor(diff / 86400000)}天前`;
+        );
+        Object.assign($Data.userInfo, data);
+    } catch (error) {
+        MessagePlugin.error("获取用户信息失败");
+    }
+}
+
+async function handleRefreshCache(): Promise<void> {
+    try {
+        $Data.refreshing = true;
+        const result = await $Http.post("/addon/admin/admin/cacheRefresh");
+
+        if (result.code === 0) {
+            const apis = result.data.apis;
+            const menus = result.data.menus;
+            const roles = result.data.roles;
+            const messages: string[] = [];
+
+            if (apis && apis.success) {
+                messages.push(`接口缓存: ${apis.count} 个`);
+            }
+            if (menus && menus.success) {
+                messages.push(`菜单缓存: ${menus.count} 个`);
+            }
+            if (roles && roles.success) {
+                messages.push(`角色缓存: ${roles.count} 个`);
+            }
+
+            MessagePlugin.success(`缓存刷新成功！${messages.join("，")}`);
+        } else {
+            MessagePlugin.warning(result.msg || "部分缓存刷新失败");
         }
-        // 超过7天显示具体日期
-        return `${date.getMonth() + 1}月${date.getDate()}日`;
+    } catch (error) {
+        MessagePlugin.error("刷新缓存失败，请稍后重试");
+    } finally {
+        $Data.refreshing = false;
     }
-};
+}
+
+function formatTime(timestamp: unknown): string {
+    if (!timestamp) return "";
+    const date = new Date(Number(timestamp));
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+
+    if (diff < 60000) {
+        return "刚刚";
+    }
+    if (diff < 3600000) {
+        return `${Math.floor(diff / 60000)}分钟前`;
+    }
+    if (diff < 86400000) {
+        return `${Math.floor(diff / 3600000)}小时前`;
+    }
+    if (diff < 604800000) {
+        return `${Math.floor(diff / 86400000)}天前`;
+    }
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
+}
 
-// 初始化
-$Method.fetchData();
+fetchData();
 </script>
 
 <style scoped lang="scss">