@befly-addon/admin 1.8.4 → 1.8.6

package/adminViews/permission/role/components/edit.vue

@@ -1,5 +1,5 @@
 <template>
-    <TDialog v-model:visible="$Data.visible" :header="$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">
         <div class="comp-role-edit">
             <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
                 <TFormItem label="角色名称" prop="name">
@@ -22,17 +22,14 @@
                 </TFormItem>
             </TForm>
         </div>
-        <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 { computed } from "vue";
+
 import {
     //
-    Dialog as TDialog,
     Form as TForm,
     FormItem as TFormItem,
     Input as TInput,
@@ -42,6 +39,7 @@ import {
     Button as TButton,
     MessagePlugin
 } from "tdesign-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 import { fieldClear } from "befly-shared/utils/fieldClear";
 
@@ -65,6 +63,10 @@ const $Emit = defineEmits<{
     (e: "success"): void;
 }>();
 
+type PageDialogEventContext = {
+    close: () => void;
+};
+
 // 表单引用
 const $From = $shallowRef({
     form: null
@@ -73,7 +75,6 @@ const $From = $shallowRef({
 const $Computed = {};
 
 const $Data = $ref({
-    visible: false,
     submitting: false,
     formData: {
         id: 0,
@@ -96,45 +97,39 @@ const $Data2 = $shallowRef({
     }
 });
 
-// 方法集合
-const $Method = {
-    async initData() {
-        if ($Prop.actionType === "upd" && $Prop.rowData.id) {
-            $Data.formData = Object.assign({}, $Prop.rowData);
-        }
-        $Method.onShow();
-    },
-    onShow() {
-        setTimeout(() => {
-            $Data.visible = $Prop.modelValue;
-        }, 100);
-    },
-    // 关闭抽屉事件
-    onClose() {
-        $Data.visible = false;
-        setTimeout(() => {
-            $Emit("update:modelValue", false);
-        }, 300);
-    },
-    async onSubmit() {
-        try {
-            const valid = await $From.form.validate();
-            if (!valid) return;
+async function initData(): Promise<void> {
+    if ($Prop.actionType === "upd" && $Prop.rowData.id) {
+        $Data.formData = Object.assign({}, $Prop.rowData);
+    }
+}
+
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    try {
+        const valid = await $From.form.validate();
+        if (!valid) return;
 
-            $Data.submitting = true;
-            const formData = $Prop.actionType === "add" ? fieldClear($Data.formData, { omitKeys: ["id", "state"] }) : $Data.formData;
-            const res = await $Http.post($Prop.actionType === "upd" ? "/addon/admin/role/upd" : "/addon/admin/role/ins", formData);
+        $Data.submitting = true;
+        const formData = $Prop.actionType === "add" ? fieldClear($Data.formData, { omitKeys: ["id", "state"] }) : $Data.formData;
+        const res = await $Http.post($Prop.actionType === "upd" ? "/addon/admin/role/upd" : "/addon/admin/role/ins", formData);
 
-            MessagePlugin.success(res.msg);
-            $Emit("success");
-            $Method.onClose();
-        } catch (error) {
-            MessagePlugin.error(error.msg || "提交失败");
-        } finally {
-            $Data.submitting = false;
+        MessagePlugin.success(res.msg);
+        $Emit("success");
+        if (context && typeof context.close === "function") {
+            context.close();
         }
+    } catch (error) {
+        MessagePlugin.error((error as { msg?: string }).msg || "提交失败");
+    } finally {
+        $Data.submitting = false;
     }
-};
+}
 
-$Method.initData();
+initData();
 </script>

package/adminViews/permission/role/components/menu.vue

@@ -1,9 +1,9 @@
 <template>
-    <TDialog v-model:visible="$Data.visible" title="菜单权限" width="900px" :append-to-body="true" :show-footer="true" top="5vh" @close="$Method.onClose">
+    <PageDialog v-model="dialogVisible" title="菜单权限" width="900px" :confirm-loading="$Data.submitting" @confirm="onSubmit">
         <div class="comp-role-menu">
             <!-- 搜索框 -->
             <div class="search-box">
-                <TInput v-model="$Data.searchText" placeholder="搜索菜单名称或路径" clearable @change="$Method.onSearch">
+                <TInput v-model="$Data.searchText" placeholder="搜索菜单名称或路径" clearable @change="onSearch">
                     <template #prefix-icon>
                         <ILucideSearch />
                     </template>
@@ -29,20 +29,15 @@
                 </div>
             </div>
         </div>
-        <template #footer>
-            <div class="dialog-footer">
-                <t-space>
-                    <TButton theme="default" @click="$Method.onClose">取消</TButton>
-                    <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">保存</TButton>
-                </t-space>
-            </div>
-        </template>
-    </TDialog>
+    </PageDialog>
 </template>
 
 <script setup lang="ts">
-import { Dialog as TDialog, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Button as TButton, Input as TInput, MessagePlugin } from "tdesign-vue-next";
+import { computed } from "vue";
+
+import { CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Input as TInput, MessagePlugin } from "tdesign-vue-next";
 import ILucideSearch from "~icons/lucide/search";
+import PageDialog from "@/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 import { arrayToTree } from "befly-shared/utils/arrayToTree";
 
@@ -62,8 +57,18 @@ const $Emit = defineEmits<{
     (e: "success"): void;
 }>();
 
+type PageDialogEventContext = {
+    close: () => void;
+};
+
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
 const $Data = $ref({
-    visible: false,
     submitting: false,
     searchText: "",
     menuGroups: [],
@@ -71,158 +76,142 @@ const $Data = $ref({
     checkedMenuPaths: []
 });
 
-// 方法集合
-const $Method = {
-    async initData() {
-        await Promise.all([$Method.apiMenuAll(), $Method.apiRoleMenuDetail()]);
-        $Data.filteredMenuGroups = $Data.menuGroups;
-        $Method.onShow();
-    },
-
-    onShow() {
-        setTimeout(() => {
-            $Data.visible = $Prop.modelValue;
-        }, 100);
-    },
-
-    onClose() {
-        $Data.visible = false;
-        setTimeout(() => {
-            $Emit("update:modelValue", false);
-        }, 300);
-    },
+async function initData(): Promise<void> {
+    await Promise.all([apiMenuAll(), apiRoleMenuDetail()]);
+    $Data.filteredMenuGroups = $Data.menuGroups;
+}
 
-    // 加载菜单树（用于配置权限）
-    async apiMenuAll() {
-        try {
-            const res = await $Http.post(
-                "/addon/admin/menu/all",
-                {},
-                {
-                    dropValues: [""]
+async function apiMenuAll(): Promise<void> {
+    try {
+        const res = await $Http.post(
+            "/addon/admin/menu/all",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+
+        const treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
+        const roots = Array.isArray(treeResult?.tree) ? treeResult.tree : [];
+
+        const groups: Array<{ name: string; title: string; menus: unknown[] }> = [];
+        for (const root of roots) {
+            const rootPath = typeof root?.path === "string" ? root.path : "";
+            const rootName = typeof root?.name === "string" ? root.name : "";
+
+            const menus: unknown[] = [];
+
+            const walk = (node: Record<string, unknown>, depth: number): void => {
+                const name = typeof node["name"] === "string" ? String(node["name"]) : "";
+                const path = typeof node["path"] === "string" ? String(node["path"]) : "";
+                if (path.length > 0) {
+                    menus.push({
+                        value: path,
+                        name: name,
+                        path: path,
+                        depth: depth,
+                        label: `${name} ${path}`.trim()
+                    });
                 }
-            );
-            const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
-
-            const treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
-            const roots = Array.isArray(treeResult?.tree) ? treeResult.tree : [];
-
-            const groups = [];
-            for (const root of roots) {
-                const rootPath = typeof root?.path === "string" ? root.path : "";
-                const rootName = typeof root?.name === "string" ? root.name : "";
-
-                const menus = [];
-
-                const walk = (node, depth) => {
-                    const name = typeof node?.name === "string" ? node.name : "";
-                    const path = typeof node?.path === "string" ? node.path : "";
-                    if (path.length > 0) {
-                        menus.push({
-                            value: path,
-                            name: name,
-                            path: path,
-                            depth: depth,
-                            label: `${name} ${path}`.trim()
-                        });
-                    }
 
-                    const children = Array.isArray(node?.children) ? node.children : [];
-                    for (const child of children) {
-                        walk(child, depth + 1);
+                const children = Array.isArray(node["children"]) ? (node["children"] as unknown[]) : [];
+                for (const child of children) {
+                    if (child && typeof child === "object") {
+                        walk(child as Record<string, unknown>, depth + 1);
                     }
-                };
+                }
+            };
 
-                walk(root, 0);
+            walk(root as Record<string, unknown>, 0);
 
-                const groupTitle = rootName.length > 0 ? rootName : rootPath;
-                groups.push({
-                    name: rootPath.length > 0 ? rootPath : groupTitle,
-                    title: groupTitle.length > 0 ? groupTitle : "未命名菜单",
-                    menus: menus
-                });
-            }
-
-            $Data.menuGroups = groups;
-        } catch (error) {
-            MessagePlugin.error("加载菜单失败");
+            const groupTitle = rootName.length > 0 ? rootName : rootPath;
+            groups.push({
+                name: rootPath.length > 0 ? rootPath : groupTitle,
+                title: groupTitle.length > 0 ? groupTitle : "未命名菜单",
+                menus: menus
+            });
         }
-    },
 
-    // 加载该角色已分配的菜单
-    async apiRoleMenuDetail() {
-        if (!$Prop.rowData.id) return;
-
-        try {
-            const res = await $Http.post(
-                "/addon/admin/role/menus",
-                {
-                    roleCode: $Prop.rowData.code
-                },
-                {
-                    dropValues: [""]
-                }
-            );
+        $Data.menuGroups = groups as never;
+    } catch (error) {
+        MessagePlugin.error("加载菜单失败");
+    }
+}
 
-            // menus 返回的 data 直接就是菜单 path 数组
-            $Data.checkedMenuPaths = Array.isArray(res.data) ? res.data : [];
-        } catch (error) {
-            MessagePlugin.error("加载数据失败");
-        }
-    },
+async function apiRoleMenuDetail(): Promise<void> {
+    if (!$Prop.rowData.id) return;
+
+    try {
+        const res = await $Http.post(
+            "/addon/admin/role/menus",
+            {
+                roleCode: $Prop.rowData.code
+            },
+            {
+                dropValues: [""]
+            }
+        );
 
-    // 搜索过滤（按“名称 + 路径”匹配；展示结构与接口弹框一致）
-    onSearch() {
-        const kw = typeof $Data.searchText === "string" ? $Data.searchText.trim().toLowerCase() : "";
-        if (kw.length === 0) {
-            $Data.filteredMenuGroups = $Data.menuGroups;
-            return;
-        }
+        $Data.checkedMenuPaths = Array.isArray(res.data) ? res.data : [];
+    } catch (error) {
+        MessagePlugin.error("加载数据失败");
+    }
+}
 
-        $Data.filteredMenuGroups = $Data.menuGroups
-            .map((group) => {
-                const menus = Array.isArray(group?.menus)
-                    ? group.menus.filter((menu) => {
-                          const label = typeof menu?.label === "string" ? menu.label : "";
-                          return label.toLowerCase().includes(kw);
-                      })
-                    : [];
-
-                return {
-                    name: group.name,
-                    title: group.title,
-                    menus: menus
-                };
-            })
-            .filter((group) => Array.isArray(group.menus) && group.menus.length > 0);
-    },
+function onSearch(): void {
+    const kw = typeof $Data.searchText === "string" ? $Data.searchText.trim().toLowerCase() : "";
+    if (kw.length === 0) {
+        $Data.filteredMenuGroups = $Data.menuGroups;
+        return;
+    }
 
-    // 提交表单
-    async onSubmit() {
-        try {
-            $Data.submitting = true;
+    $Data.filteredMenuGroups = ($Data.menuGroups as unknown[])
+        .map((group) => {
+            const groupRecord = group && typeof group === "object" ? (group as Record<string, unknown>) : null;
+            const groupMenus = groupRecord && Array.isArray(groupRecord["menus"]) ? (groupRecord["menus"] as unknown[]) : [];
 
-            const res = await $Http.post("/addon/admin/role/menuSave", {
-                roleCode: $Prop.rowData.code,
-                menuPaths: $Data.checkedMenuPaths
+            const menus = groupMenus.filter((menu) => {
+                const menuRecord = menu && typeof menu === "object" ? (menu as Record<string, unknown>) : null;
+                const label = menuRecord && typeof menuRecord["label"] === "string" ? String(menuRecord["label"]) : "";
+                return label.toLowerCase().includes(kw);
             });
 
-            if (res.code === 0) {
-                MessagePlugin.success("保存成功");
-                $Data.visible = false;
-                $Emit("success");
-            } else {
-                MessagePlugin.error(res.msg || "保存失败");
+            return {
+                name: groupRecord && typeof groupRecord["name"] === "string" ? String(groupRecord["name"]) : "",
+                title: groupRecord && typeof groupRecord["title"] === "string" ? String(groupRecord["title"]) : "",
+                menus: menus
+            };
+        })
+        .filter((group) => group.menus.length > 0) as never;
+}
+
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    try {
+        $Data.submitting = true;
+
+        const res = await $Http.post("/addon/admin/role/menuSave", {
+            roleCode: $Prop.rowData.code,
+            menuPaths: $Data.checkedMenuPaths
+        });
+
+        if (res.code === 0) {
+            MessagePlugin.success("保存成功");
+            $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;
     }
-};
+}
 
-$Method.initData();
+initData();
 </script>
 
 <style scoped lang="scss">
@@ -248,7 +237,7 @@ $Method.initData();
 
             .group-header {
                 padding: 12px 16px;
-                background-color: var(--bg-color-hover);
+                background-color: var(--primary-color-light);
                 font-weight: 500;
                 font-size: var(--font-size-sm);
                 color: var(--text-primary);
@@ -258,11 +247,11 @@ $Method.initData();
 
                 &::before {
                     content: "";
-                    width: 8px;
-                    height: 8px;
+                    width: 12px;
+                    height: 12px;
                     border-radius: 50%;
                     background-color: var(--primary-color);
-                    opacity: 0.3;
+                    box-shadow: 0 0 0 2px var(--bg-color-container);
                     flex-shrink: 0;
                 }
             }

package/adminViews/permission/role/index.vue

@@ -1,7 +1,7 @@
 <template>
-    <PagedTableDetailPage class="page-role page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['state', 'menuCount', 'apiCount']">
+    <PagedTableDetail class="page-role page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['state', 'menuCount', 'apiCount']">
         <template #toolLeft>
-            <TButton theme="primary" @click="$Method.onAdd">
+            <TButton theme="primary" @click="onAdd">
                 <template #icon>
                     <ILucidePlus />
                 </template>
@@ -9,7 +9,7 @@
         </template>
 
         <template #toolRight="scope">
-            <TButton shape="circle" @click="$Method.onReload(scope.reload)">
+            <TButton shape="circle" @click="onReload(scope.reload)">
                 <template #icon>
                     <ILucideRotateCw />
                 </template>
@@ -23,15 +23,15 @@
         </template>
 
         <template #menuCount="{ row }">
-            {{ $Method.getPathCount(row.menus) }}
+            {{ getPathCount(row.menus) }}
         </template>
 
         <template #apiCount="{ row }">
-            {{ $Method.getPathCount(row.apis) }}
+            {{ getPathCount(row.apis) }}
         </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>
@@ -59,15 +59,15 @@
 
         <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)" />
 
             <!-- 菜单权限对话框组件 -->
-            <MenuDialog v-if="$Data.menuVisible" v-model="$Data.menuVisible" :row-data="$Data.rowData" @success="$Method.onDialogSuccess(scope.reload)" />
+            <MenuDialog v-if="$Data.menuVisible" v-model="$Data.menuVisible" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
 
             <!-- 接口权限对话框组件 -->
-            <ApiDialog v-if="$Data.apiVisible" v-model="$Data.apiVisible" :row-data="$Data.rowData" @success="$Method.onDialogSuccess(scope.reload)" />
+            <ApiDialog v-if="$Data.apiVisible" v-model="$Data.apiVisible" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
         </template>
-    </PagedTableDetailPage>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
@@ -82,7 +82,7 @@ import ILucideChevronDown from "~icons/lucide/chevron-down";
 import EditDialog from "./components/edit.vue";
 import MenuDialog from "./components/menu.vue";
 import ApiDialog from "./components/api.vue";
-import PagedTableDetailPage from "@/components/PagedTableDetailPage.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 // 响应式数据
@@ -122,57 +122,57 @@ const $Data = $ref({
     rowData: {}
 });
 
-// 方法
-const $Method = {
-    onAdd() {
-        $Method.onAction("add", {});
-    },
+function onAdd(): void {
+    onAction("add", {});
+}
 
-    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 });
+}
 
-    getPathCount(value) {
-        if (!Array.isArray(value)) return 0;
-        return value.filter((p) => typeof p === "string" && p.trim().length > 0).length;
-    },
-    onAction(command, rowData) {
-        $Data.actionType = command;
+function getPathCount(value: unknown): number {
+    if (!Array.isArray(value)) return 0;
+    return value.filter((p) => typeof p === "string" && p.trim().length > 0).length;
+}
 
-        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" || command === "upd") {
-            $Data.editVisible = true;
-            return;
-        }
+    if (command === "add") {
+        $Data.rowData = {};
+    } else {
+        $Data.rowData = Object.assign({}, rowData);
+    }
 
-        if (command === "menu") {
-            $Data.menuVisible = true;
-            return;
-        }
+    if (command === "add" || command === "upd") {
+        $Data.editVisible = true;
+        return;
+    }
 
-        if (command === "api") {
-            $Data.apiVisible = true;
-        }
-    },
+    if (command === "menu") {
+        $Data.menuVisible = true;
+        return;
+    }
 
-    onDropdownAction(data, rowData, deleteRow) {
-        const cmd = data && data.value ? String(data.value) : "";
-        if (cmd === "del") {
-            deleteRow(rowData);
-            return;
-        }
-        $Method.onAction(cmd, rowData);
+    if (command === "api") {
+        $Data.apiVisible = true;
+    }
+}
+
+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/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "noEmit": true,
+        "allowJs": true,
+        "types": ["vite/client", "unplugin-icons/types/vue"],
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["../../admin/src/*"]
+        }
+    },
+    "include": ["**/*.vue", "**/*.ts", "**/*.d.ts"],
+    "exclude": ["node_modules", "dist", "logs", "temp"]
+}