befly-admin-ui 1.10.1 → 1.10.2

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

@@ -1,6 +1,16 @@
 <template>
-    <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="formRef">
+    <PageDialog v-model="$Computed.dialogVisible" :title="$Computed.dialogTitle" :confirm-loading="$Data.submitting" @confirm="$Method.onSubmit">
+        <TForm
+            :model="$Data.formData"
+            label-width="120px"
+            label-position="left"
+            :rules="$Const.formRules"
+            :ref="
+                (value) => {
+                    $From.formRef = value;
+                }
+            "
+        >
             <TFormItem label="配置名称" prop="name">
                 <TInput v-model="$Data.formData.name" placeholder="请输入配置名称" :disabled="$Data.isSystem" />
             </TFormItem>
@@ -21,7 +31,7 @@
             </TFormItem>
             <TFormItem label="配置分组" prop="group">
                 <TSelect v-model="$Data.formData.group" placeholder="请选择分组" clearable :disabled="$Data.isSystem">
-                    <TOption v-for="item in $Data2.groupOptions" :key="item" :label="item" :value="item" />
+                    <TOption v-for="item in $Const.groupOptions" :key="item" :label="item" :value="item" />
                 </TSelect>
             </TFormItem>
             <TFormItem label="排序" prop="sort">
@@ -41,11 +51,11 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref } from "vue";
+import { computed, reactive } 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 "befly-admin-ui/components/pageDialog.vue";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 
 const $Prop = defineProps({
     modelValue: {
@@ -64,33 +74,20 @@ const $Prop = defineProps({
 
 const $Emit = defineEmits(["update:modelValue", "success"]);
 
-// 表单引用
-const formRef = ref(null);
-
-const dialogVisible = computed({
-    get: () => $Prop.modelValue,
-    set: (value) => {
-        $Emit("update:modelValue", value);
-    }
-});
-
-const $Data = reactive({
-    submitting: false,
-    isSystem: false,
-    formData: {
-        id: 0,
-        name: "",
-        code: "",
-        value: "",
-        valueType: "string",
-        group: "",
-        sort: 0,
-        description: "",
-        state: 1
-    }
-});
-
-const $Data2 = reactive({
+const $Const = {
+    createDefaultFormData() {
+        return {
+            id: 0,
+            name: "",
+            code: "",
+            value: "",
+            valueType: "string",
+            group: "",
+            sort: 0,
+            description: "",
+            state: 1
+        };
+    },
     formRules: {
         name: [{ required: true, message: "请输入配置名称", trigger: "blur" }],
         code: [
@@ -101,69 +98,83 @@ const $Data2 = reactive({
         valueType: [{ required: true, message: "请选择值类型", trigger: "change" }]
     },
     groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
-});
+};
 
-async function initData() {
-    onShow();
-}
+const $From = {
+    formRef: null
+};
 
-function onShow() {
-    if ($Prop.actionType === "upd" && $Prop.rowData) {
-        const row = $Prop.rowData;
-        $Data.formData.id = row["id"] || 0;
-        $Data.formData.name = row["name"] || "";
-        $Data.formData.code = row["code"] || "";
-        $Data.formData.value = row["value"] || "";
-        $Data.formData.valueType = row["valueType"] || "string";
-        $Data.formData.group = row["group"] || "";
-        $Data.formData.sort = row["sort"] || 0;
-        $Data.formData.description = row["description"] || "";
-        $Data.formData.state = row["state"] || 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;
-    }
-}
+const $Data = reactive({
+    submitting: false,
+    isSystem: false,
+    formData: $Const.createDefaultFormData()
+});
 
-async function onSubmit(context) {
-    const form = formRef.value;
-    if (!form) {
-        MessagePlugin.warning("表单未就绪");
-        return;
-    }
+const $Computed = reactive({
+    dialogVisible: computed({
+        get: () => $Prop.modelValue,
+        set: (value) => {
+            $Emit("update:modelValue", value);
+        }
+    }),
+    dialogTitle: computed(() => ($Prop.actionType === "upd" ? "编辑配置" : "添加配置"))
+});
 
-    const valid = await form.validate();
-    if (valid !== true) return;
+const $Method = {
+    resetFormData() {
+        Object.assign($Data.formData, $Const.createDefaultFormData());
+        $Data.isSystem = false;
+    },
+    initData() {
+        $Method.onShow();
+    },
+    onShow() {
+        if ($Prop.actionType === "upd" && $Prop.rowData) {
+            const row = $Prop.rowData;
+            $Data.formData.id = row["id"] || 0;
+            $Data.formData.name = row["name"] || "";
+            $Data.formData.code = row["code"] || "";
+            $Data.formData.value = row["value"] || "";
+            $Data.formData.valueType = row["valueType"] || "string";
+            $Data.formData.group = row["group"] || "";
+            $Data.formData.sort = row["sort"] || 0;
+            $Data.formData.description = row["description"] || "";
+            $Data.formData.state = row["state"] || 1;
+            $Data.isSystem = row["isSystem"] === 1;
+            return;
+        }
 
-    $Data.submitting = true;
-    try {
-        const api = $Prop.actionType === "upd" ? "/core/sysConfig/update" : "/core/sysConfig/insert";
-        await $Http(api, $Data.formData);
+        $Method.resetFormData();
+    },
+    async onSubmit(context) {
+        const form = $From.formRef;
+        if (!form) {
+            MessagePlugin.warning("表单未就绪");
+            return;
+        }
 
-        MessagePlugin.success($Prop.actionType === "upd" ? "编辑成功" : "添加成功");
-        $Emit("success");
-        if (context && typeof context.close === "function") {
-            context.close();
+        const valid = await form.validate();
+        if (valid !== true) return;
+
+        $Data.submitting = true;
+        try {
+            const api = $Prop.actionType === "upd" ? "/core/sysConfig/update" : "/core/sysConfig/insert";
+            await $Http(api, $Data.formData);
+
+            MessagePlugin.success($Prop.actionType === "upd" ? "编辑成功" : "添加成功");
+            $Emit("success");
+            if (context && typeof context.close === "function") {
+                context.close();
+            }
+        } catch (error) {
+            MessagePlugin.error(error.msg || error.message || "操作失败");
+        } finally {
+            $Data.submitting = false;
         }
-    } catch (error) {
-        MessagePlugin.error(error.msg || error.message || "操作失败");
-    } finally {
-        $Data.submitting = false;
     }
-}
+};
 
-initData();
+$Method.initData();
 </script>
 
 <style scoped lang="scss"></style>

package/views/config/system/index.vue

@@ -1,13 +1,13 @@
 <template>
     <PageTableDetail 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="onAdd">
+            <TButton theme="primary" @click="$Method.onAdd">
                 <template #icon>
                     <AddIcon />
                 </template>
                 新增配置
             </TButton>
-            <TSelect v-model="$Data.filter.group" placeholder="配置分组" clearable style="width: 150px" @change="handleFilter(scope.reload)">
+            <TSelect v-model="$Data.filter.group" placeholder="配置分组" clearable style="width: 150px" @change="$Method.handleFilter(scope.reload)">
                 <TOption v-for="item in $Data.groupOptions" :key="item" :label="item" :value="item" />
             </TSelect>
         </template>
@@ -27,7 +27,7 @@
         </template>
 
         <template #operation="{ row, deleteRow }">
-            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+            <TDropdown trigger="click" placement="bottom-right" @click="$Method.onDropdownAction($event, row, deleteRow)">
                 <TButton theme="primary" size="small">
                     操作
                     <template #suffix><ChevronDownIcon /></template>
@@ -61,7 +61,7 @@
         </template>
 
         <template #dialogs="scope">
-            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.onDialogSuccess(scope.reload)" />
         </template>
     </PageTableDetail>
 </template>
@@ -124,41 +124,39 @@ const $Data = reactive({
     groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
 });
 
-function onAdd() {
-    onAction("add", {});
-}
-
-function handleFilter(reload) {
-    reload({ keepSelection: false, resetPage: true });
-}
-
-function onDialogSuccess(reload) {
-    reload({ keepSelection: true });
-}
-
-function onAction(command, rowData) {
-    $Data.actionType = command;
-    if (command === "add") {
-        $Data.rowData = {};
-    } else {
-        $Data.rowData = Object.assign({}, rowData);
-    }
-
-    if (command === "add" || command === "upd") {
-        $Data.editVisible = true;
-    }
-}
+const $Method = {
+    onAdd() {
+        $Method.onAction("add", {});
+    },
+    handleFilter(reload) {
+        reload({ keepSelection: false, resetPage: true });
+    },
+    onDialogSuccess(reload) {
+        reload({ keepSelection: true });
+    },
+    onAction(command, rowData) {
+        $Data.actionType = command;
+        if (command === "add") {
+            $Data.rowData = {};
+        } else {
+            $Data.rowData = Object.assign({}, rowData);
+        }
 
-function onDropdownAction(data, rowData, deleteRow) {
-    const record = data;
-    const rawValue = record && record["value"] ? record["value"] : "";
-    const cmd = rawValue ? String(rawValue) : "";
-    if (cmd === "del") {
-        deleteRow(rowData);
-        return;
+        if (command === "add" || command === "upd") {
+            $Data.editVisible = true;
+        }
+    },
+    onDropdownAction(data, rowData, deleteRow) {
+        const record = data;
+        const rawValue = record && record["value"] ? record["value"] : "";
+        const cmd = rawValue ? String(rawValue) : "";
+        if (cmd === "del") {
+            deleteRow(rowData);
+            return;
+        }
+        $Method.onAction(cmd, rowData);
     }
-    onAction(cmd, rowData);
-}
+};
 </script>
 
 <style scoped lang="scss">

package/views/index/components/addonList.vue

@@ -6,7 +6,7 @@
         </div>
         <div class="section-content">
             <div class="addon-list">
-                <div v-for="addon in addonList" :key="addon.name" class="addon-item">
+                <div v-for="addon in $Data.addonList" :key="addon.name" class="addon-item">
                     <div class="addon-icon">
                         <SystemStorageIcon />
                     </div>
@@ -27,22 +27,25 @@
 import { reactive } from "vue";
 import { Tag as TTag } from "tdesign-vue-next";
 import { MenuIcon, SystemStorageIcon } from "tdesign-icons-vue-next";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 
 // 组件内部数据
-const addonList = reactive([]);
+const $Data = reactive({
+    addonList: []
+});
 
-// 获取数据
-const fetchData = async () => {
-    try {
-        const res = await $Http("/core/dashboard/addonList", {}, [""]);
-        addonList.splice(0, addonList.length, ...res.data);
-    } catch (_error) {
-        // 静默失败：不阻断页面展示
+const $Method = {
+    async fetchData() {
+        try {
+            const res = await $Http("/core/dashboard/addonList", {}, [""]);
+            $Data.addonList.splice(0, $Data.addonList.length, ...res.data);
+        } catch (_error) {
+            // 静默失败：不阻断页面展示
+        }
     }
 };
 
-fetchData();
+$Method.fetchData();
 </script>
 
 <style scoped lang="scss">

package/views/index/components/environmentInfo.vue

@@ -8,27 +8,27 @@
             <div class="env-grid-compact">
                 <div class="env-compact-item">
                     <span class="env-label">操作系统</span>
-                    <span class="env-value">{{ environmentInfo.os }}</span>
+                    <span class="env-value">{{ $Data.environmentInfo.os }}</span>
                 </div>
                 <div class="env-compact-item">
                     <span class="env-label">服务器</span>
-                    <span class="env-value">{{ environmentInfo.server }}</span>
+                    <span class="env-value">{{ $Data.environmentInfo.server }}</span>
                 </div>
                 <div class="env-compact-item">
                     <span class="env-label">Node版本</span>
-                    <span class="env-value">{{ environmentInfo.nodeVersion }}</span>
+                    <span class="env-value">{{ $Data.environmentInfo.nodeVersion }}</span>
                 </div>
                 <div class="env-compact-item">
                     <span class="env-label">数据库</span>
-                    <span class="env-value">{{ environmentInfo.database }}</span>
+                    <span class="env-value">{{ $Data.environmentInfo.database }}</span>
                 </div>
                 <div class="env-compact-item">
                     <span class="env-label">缓存</span>
-                    <span class="env-value">{{ environmentInfo.cache }}</span>
+                    <span class="env-value">{{ $Data.environmentInfo.cache }}</span>
                 </div>
                 <div class="env-compact-item">
                     <span class="env-label">时区</span>
-                    <span class="env-value">{{ environmentInfo.timezone }}</span>
+                    <span class="env-value">{{ $Data.environmentInfo.timezone }}</span>
                 </div>
             </div>
         </div>
@@ -38,29 +38,32 @@
 <script setup>
 import { reactive } from "vue";
 import { ServerIcon } from "tdesign-icons-vue-next";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 
 // 组件内部数据
-const environmentInfo = reactive({
-    os: "",
-    server: "",
-    nodeVersion: "",
-    database: "",
-    cache: "",
-    timezone: ""
+const $Data = reactive({
+    environmentInfo: {
+        os: "",
+        server: "",
+        nodeVersion: "",
+        database: "",
+        cache: "",
+        timezone: ""
+    }
 });
 
-// 获取数据
-const fetchData = async () => {
-    try {
-        const res = await $Http("/core/dashboard/environmentInfo", {}, [""]);
-        Object.assign(environmentInfo, res.data);
-    } catch (_error) {
-        // 静默失败：不阻断页面展示
+const $Method = {
+    async fetchData() {
+        try {
+            const res = await $Http("/core/dashboard/environmentInfo", {}, [""]);
+            Object.assign($Data.environmentInfo, res.data);
+        } catch (_error) {
+            // 静默失败：不阻断页面展示
+        }
     }
 };
 
-fetchData();
+$Method.fetchData();
 </script>
 
 <style scoped lang="scss">

package/views/index/components/operationLogs.vue

@@ -15,8 +15,8 @@
                     <span class="col-status">状态</span>
                 </div>
                 <div class="operation-body">
-                    <div v-for="log in operationLogs" :key="log.id" class="operation-row">
-                        <span class="col-time">{{ formatTime(log.createdAt) }}</span>
+                    <div v-for="log in $Const.operationLogs" :key="log.id" class="operation-row">
+                        <span class="col-time">{{ $Method.formatTime(log.createdAt) }}</span>
                         <span class="col-user">{{ log.userName }}</span>
                         <span class="col-action">{{ log.action }}</span>
                         <span class="col-module">{{ log.module }}</span>
@@ -39,21 +39,25 @@ import { Tag as TTag } from "tdesign-vue-next";
 import { CodeIcon } from "tdesign-icons-vue-next";
 
 // 组件内部数据
-const operationLogs = reactive([
-    { id: 1, userName: "管理员", action: "创建角色", module: "权限管理", ip: "192.168.1.100", status: "success", createdAt: Date.now() - 120000 },
-    { id: 2, userName: "张三", action: "修改菜单", module: "系统设置", ip: "192.168.1.101", status: "success", createdAt: Date.now() - 900000 },
-    { id: 3, userName: "李四", action: "删除接口", module: "接口管理", ip: "192.168.1.102", status: "failed", createdAt: Date.now() - 3600000 },
-    { id: 4, userName: "管理员", action: "同步数据库", module: "数据库", ip: "192.168.1.100", status: "success", createdAt: Date.now() - 7200000 },
-    { id: 5, userName: "王五", action: "登录系统", module: "系统", ip: "192.168.1.103", status: "success", createdAt: Date.now() - 10800000 }
-]);
+const $Const = {
+    operationLogs: [
+        { id: 1, userName: "管理员", action: "创建角色", module: "权限管理", ip: "192.168.1.100", status: "success", createdAt: Date.now() - 120000 },
+        { id: 2, userName: "张三", action: "修改菜单", module: "系统设置", ip: "192.168.1.101", status: "success", createdAt: Date.now() - 900000 },
+        { id: 3, userName: "李四", action: "删除接口", module: "接口管理", ip: "192.168.1.102", status: "failed", createdAt: Date.now() - 3600000 },
+        { id: 4, userName: "管理员", action: "同步数据库", module: "数据库", ip: "192.168.1.100", status: "success", createdAt: Date.now() - 7200000 },
+        { id: 5, userName: "王五", action: "登录系统", module: "系统", ip: "192.168.1.103", status: "success", createdAt: Date.now() - 10800000 }
+    ]
+};
 
-const formatTime = (timestamp) => {
-    const date = new Date(timestamp);
-    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");
-    return `${month}-${day} ${hours}:${minutes}`;
+const $Method = {
+    formatTime(timestamp) {
+        const date = new Date(timestamp);
+        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");
+        return `${month}-${day} ${hours}:${minutes}`;
+    }
 };
 </script>
 

package/views/index/components/performanceMetrics.vue

@@ -9,32 +9,32 @@
                 <div class="perf-metric">
                     <div class="perf-info">
                         <div class="perf-label">平均响应</div>
-                        <div class="perf-value">{{ performanceMetrics.avgResponseTime }}ms</div>
+                        <div class="perf-value">{{ $Data.performanceMetrics.avgResponseTime }}ms</div>
                     </div>
                 </div>
                 <div class="perf-metric">
                     <div class="perf-info">
                         <div class="perf-label">QPS</div>
-                        <div class="perf-value">{{ performanceMetrics.qps }}/s</div>
+                        <div class="perf-value">{{ $Data.performanceMetrics.qps }}/s</div>
                     </div>
                 </div>
                 <div class="perf-metric">
                     <div class="perf-info">
                         <div class="perf-label">错误率</div>
-                        <div class="perf-value">{{ performanceMetrics.errorRate }}%</div>
+                        <div class="perf-value">{{ $Data.performanceMetrics.errorRate }}%</div>
                     </div>
                 </div>
                 <div class="perf-metric">
                     <div class="perf-info">
                         <div class="perf-label">活跃连接</div>
-                        <div class="perf-value">{{ performanceMetrics.activeConnections }}</div>
+                        <div class="perf-value">{{ $Data.performanceMetrics.activeConnections }}</div>
                     </div>
                 </div>
             </div>
             <!-- 最慢接口提示 -->
-            <div v-if="performanceMetrics.slowestApi" class="perf-slowest">
+            <div v-if="$Data.performanceMetrics.slowestApi" class="perf-slowest">
                 <ErrorTriangleIcon />
-                <span>最慢接口: {{ performanceMetrics.slowestApi.path }} ({{ performanceMetrics.slowestApi.time }}ms)</span>
+                <span>最慢接口: {{ $Data.performanceMetrics.slowestApi.path }} ({{ $Data.performanceMetrics.slowestApi.time }}ms)</span>
             </div>
         </div>
     </div>
@@ -43,28 +43,31 @@
 <script setup>
 import { reactive } from "vue";
 import { ChartIcon, ErrorTriangleIcon } from "tdesign-icons-vue-next";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 
 // 组件内部数据
-const performanceMetrics = reactive({
-    avgResponseTime: 0,
-    qps: 0,
-    errorRate: 0,
-    activeConnections: 0,
-    slowestApi: null
+const $Data = reactive({
+    performanceMetrics: {
+        avgResponseTime: 0,
+        qps: 0,
+        errorRate: 0,
+        activeConnections: 0,
+        slowestApi: null
+    }
 });
 
-// 获取数据
-const fetchData = async () => {
-    try {
-        const res = await $Http("/core/dashboard/performanceMetrics", {}, [""]);
-        Object.assign(performanceMetrics, res.data);
-    } catch (_error) {
-        // 静默失败：不阻断页面展示
+const $Method = {
+    async fetchData() {
+        try {
+            const res = await $Http("/core/dashboard/performanceMetrics", {}, [""]);
+            Object.assign($Data.performanceMetrics, res.data);
+        } catch (_error) {
+            // 静默失败：不阻断页面展示
+        }
     }
 };
 
-fetchData();
+$Method.fetchData();
 </script>
 
 <style scoped lang="scss">