@befly-addon/admin 1.8.4 → 1.8.6

package/adminViews/permission/menu/index.vue

@@ -3,7 +3,7 @@
         <div class="main-tool">
             <div class="left"></div>
             <div class="right">
-                <TButton shape="circle" @click="$Method.handleRefresh">
+                <TButton shape="circle" @click="handleRefresh">
                     <template #icon>
                         <ILucideRotateCw />
                     </template>
@@ -22,7 +22,7 @@
                     height="calc(100vh - var(--search-height) - var(--layout-gap) * 2)"
                     active-row-type="single"
                     :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0, defaultExpandAll: true }"
-                    @active-change="$Method.onActiveChange"
+                    @active-change="onActiveChange"
                 >
                     <template #state="{ row }">
                         <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
@@ -42,7 +42,7 @@
 <script setup lang="ts">
 import { Button as TButton, Table as TTable, Tag as TTag, MessagePlugin } from "tdesign-vue-next";
 import ILucideRotateCw from "~icons/lucide/rotate-cw";
-import DetailPanel from "@/components/DetailPanel.vue";
+import DetailPanel from "@/components/detailPanel.vue";
 import { $Http } from "@/plugins/http";
 import { arrayToTree } from "befly-shared/utils/arrayToTree";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
@@ -62,65 +62,55 @@ const $Data = $ref({
     activeRowKeys: []
 });
 
-// 方法
-const $Method = {
-    async initData() {
-        await $Method.apiMenuList();
-    },
+async function initData(): Promise<void> {
+    await apiMenuList();
+}
 
-    // 加载菜单列表（树形结构）
-    async apiMenuList() {
-        $Data.loading = true;
-        try {
-            const res = await $Http.post(
-                "/addon/admin/menu/all",
-                {},
-                {
-                    dropValues: [""]
-                }
-            );
-            const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+async function apiMenuList(): Promise<void> {
+    $Data.loading = true;
+    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 treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
 
-            // 构建树形结构（TTable tree）
-            $Data.tableData = treeResult.tree;
+        $Data.tableData = treeResult.tree;
 
-            // 自动高亮第一行
-            if ($Data.tableData.length > 0) {
-                $Data.currentRow = $Data.tableData[0];
-                $Data.activeRowKeys = [$Data.tableData[0].id];
-            } else {
-                $Data.currentRow = null;
-                $Data.activeRowKeys = [];
-            }
-        } catch (error) {
-            MessagePlugin.error("加载数据失败");
-        } finally {
-            $Data.loading = false;
+        if ($Data.tableData.length > 0) {
+            $Data.currentRow = $Data.tableData[0];
+            $Data.activeRowKeys = [$Data.tableData[0].id];
+        } else {
+            $Data.currentRow = null;
+            $Data.activeRowKeys = [];
         }
-    },
+    } catch (error) {
+        MessagePlugin.error("加载数据失败");
+    } finally {
+        $Data.loading = false;
+    }
+}
 
-    // 刷新
-    handleRefresh() {
-        $Method.apiMenuList();
-    },
+function handleRefresh(): void {
+    apiMenuList();
+}
 
-    // 高亮行变化
-    onActiveChange(value, context) {
-        // 禁止取消高亮：如果新值为空，保持当前选中
-        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
-            return;
-        }
-        $Data.activeRowKeys = value;
-        // 更新当前高亮的行数据
-        if (context.activeRowList && context.activeRowList.length > 0) {
-            $Data.currentRow = context.activeRowList[0].row;
-        }
+function onActiveChange(value: unknown[], context: { activeRowList?: Array<{ row: unknown }> }): void {
+    if (value.length === 0 && $Data.activeRowKeys.length > 0) {
+        return;
+    }
+    $Data.activeRowKeys = value;
+    if (context.activeRowList && context.activeRowList.length > 0) {
+        $Data.currentRow = context.activeRowList[0].row as never;
     }
-};
+}
 
-$Method.initData();
+initData();
 </script>
 
 <style scoped lang="scss">

package/adminViews/permission/role/components/api.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-api">
             <!-- 搜索框 -->
             <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>
@@ -28,21 +28,15 @@
                 </TCheckboxGroup>
             </div>
         </div>
-
-        <template #footer>
-            <div class="dialog-footer">
-                <TSpace>
-                    <TButton theme="default" @click="$Method.onClose">取消</TButton>
-                    <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">保存</TButton>
-                </TSpace>
-            </div>
-        </template>
-    </TDialog>
+    </PageDialog>
 </template>
 
 <script setup lang="ts">
-import { Dialog as TDialog, Input as TInput, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Button as TButton, Space as TSpace, MessagePlugin } from "tdesign-vue-next";
+import { computed } from "vue";
+
+import { Input as TInput, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, MessagePlugin } from "tdesign-vue-next";
 import ILucideSearch from "~icons/lucide/search";
+import PageDialog from "@/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 
 const $Prop = defineProps({
@@ -61,8 +55,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,
     apiData: [],
     filteredApiData: [],
@@ -70,184 +74,176 @@ const $Data = $ref({
     checkedApiPaths: []
 });
 
-// 方法集合
-const $Method = {
-    async initData() {
-        $Method.onShow();
-        await Promise.all([$Method.apiApiAll(), $Method.apiRoleApiDetail()]);
+async function initData(): Promise<void> {
+    await Promise.all([apiApiAll(), apiRoleApiDetail()]);
 
-        // auth=0（免登录）接口默认选中：与角色已有权限做并集，不覆盖。
-        const merged = new Set();
-        const current = Array.isArray($Data.checkedApiPaths) ? $Data.checkedApiPaths : [];
-        for (const p of current) {
+    const merged = new Set<string>();
+    const current = Array.isArray($Data.checkedApiPaths) ? $Data.checkedApiPaths : [];
+    for (const p of current) {
+        if (typeof p === "string") {
             merged.add(p);
         }
+    }
 
-        const groups = Array.isArray($Data.apiData) ? $Data.apiData : [];
-        for (const group of groups) {
-            const apis = group && group.apis;
-            const list = Array.isArray(apis) ? apis : [];
-            for (const api of list) {
-                const isPublic = api && (api.auth === 0 || api.auth === "0" || api.auth === false);
-                if (isPublic && typeof api.value === "string" && api.value) {
-                    merged.add(api.value);
-                }
+    const groups = Array.isArray($Data.apiData) ? ($Data.apiData as unknown[]) : [];
+    for (const group of groups) {
+        const groupRecord = group && typeof group === "object" ? (group as Record<string, unknown>) : null;
+        const apis = groupRecord && Array.isArray(groupRecord["apis"]) ? (groupRecord["apis"] as unknown[]) : [];
+        for (const api of apis) {
+            const apiRecord = api && typeof api === "object" ? (api as Record<string, unknown>) : null;
+            const authValue = apiRecord ? apiRecord["auth"] : undefined;
+            const isPublic = authValue === 0 || authValue === "0" || authValue === false;
+            const value = apiRecord && typeof apiRecord["value"] === "string" ? String(apiRecord["value"]) : "";
+            if (isPublic && value) {
+                merged.add(value);
             }
         }
+    }
 
-        $Data.checkedApiPaths = Array.from(merged);
-        $Data.filteredApiData = $Data.apiData;
-    },
-
-    onShow() {
-        setTimeout(() => {
-            $Data.visible = $Prop.modelValue;
-        }, 100);
-    },
-
-    onClose() {
-        $Data.visible = false;
-        setTimeout(() => {
-            $Emit("update:modelValue", false);
-        }, 300);
-    },
-
-    // 加载所有接口
-    async apiApiAll() {
-        try {
-            const res = await $Http.post(
-                "/addon/admin/api/all",
-                {},
-                {
-                    dropValues: [""]
-                }
-            );
-
-            // 将接口列表按 parentPath 分组展示（routePath 已迁移为 path）
-            const apiMap = new Map();
-
-            const lists = res && res.data && Array.isArray(res.data.lists) ? res.data.lists : [];
-            for (const api of lists) {
-                const apiPath = api && typeof api.path === "string" ? api.path : "";
-                if (!apiPath) {
-                    continue;
-                }
-
-                const parentPath = api && typeof api.parentPath === "string" ? api.parentPath : "";
-                const groupKey = parentPath || "(未分组)";
-
-                if (!apiMap.has(groupKey)) {
-                    apiMap.set(groupKey, {
-                        name: groupKey,
-                        title: groupKey,
-                        apis: []
-                    });
-                }
+    $Data.checkedApiPaths = Array.from(merged) as never;
+    $Data.filteredApiData = $Data.apiData;
+}
 
-                apiMap.get(groupKey).apis.push({
-                    value: apiPath,
-                    name: (api && typeof api.name === "string" ? api.name : "") || apiPath,
-                    path: apiPath,
-                    label: `${(api && typeof api.name === "string" ? api.name : "") || ""} ${apiPath ? `(${apiPath})` : ""}`.trim(),
-                    description: api ? api.description : undefined,
-                    auth: api ? api.auth : undefined,
-                    parentPath: parentPath
-                });
+async function apiApiAll(): Promise<void> {
+    try {
+        const res = await $Http.post(
+            "/addon/admin/api/all",
+            {},
+            {
+                dropValues: [""]
             }
+        );
+
+        const apiMap = new Map<string, { name: string; title: string; apis: unknown[] }>();
+
+        const resRecord = res && typeof res === "object" ? (res as Record<string, unknown>) : null;
+        const resData = resRecord && resRecord["data"] && typeof resRecord["data"] === "object" ? (resRecord["data"] as Record<string, unknown>) : null;
+        const lists = resData && Array.isArray(resData["lists"]) ? (resData["lists"] as unknown[]) : [];
+        for (const api of lists) {
+            const apiRecord = api && typeof api === "object" ? (api as Record<string, unknown>) : null;
+            const apiPath = apiRecord && typeof apiRecord["path"] === "string" ? String(apiRecord["path"]) : "";
+            if (!apiPath) {
+                continue;
+            }
+
+            const parentPath = apiRecord && typeof apiRecord["parentPath"] === "string" ? String(apiRecord["parentPath"]) : "";
+            const groupKey = parentPath || "(未分组)";
 
-            const groups = Array.from(apiMap.values());
-            for (const group of groups) {
-                group.apis.sort((a, b) => {
-                    const ap = typeof a.path === "string" ? a.path : "";
-                    const bp = typeof b.path === "string" ? b.path : "";
-                    return ap.localeCompare(bp);
+            if (!apiMap.has(groupKey)) {
+                apiMap.set(groupKey, {
+                    name: groupKey,
+                    title: groupKey,
+                    apis: []
                 });
             }
 
-            groups.sort((a, b) => {
-                const at = typeof a.title === "string" ? a.title : "";
-                const bt = typeof b.title === "string" ? b.title : "";
-                return at.localeCompare(bt);
+            apiMap.get(groupKey)?.apis.push({
+                value: apiPath,
+                name: (apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "") || apiPath,
+                path: apiPath,
+                label: `${(apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "") || ""} ${apiPath ? `(${apiPath})` : ""}`.trim(),
+                description: apiRecord ? apiRecord["description"] : undefined,
+                auth: apiRecord ? apiRecord["auth"] : undefined,
+                parentPath: parentPath
             });
+        }
 
-            $Data.apiData = groups;
-        } catch (error) {
-            MessagePlugin.error("加载接口失败");
+        const groups = Array.from(apiMap.values());
+        for (const group of groups) {
+            group.apis.sort((a, b) => {
+                const ap = typeof a.path === "string" ? a.path : "";
+                const bp = typeof b.path === "string" ? b.path : "";
+                return ap.localeCompare(bp);
+            });
         }
-    },
 
-    // 加载该角色已分配的接口
-    async apiRoleApiDetail() {
-        if (!$Prop.rowData.id) return;
-
-        try {
-            const res = await $Http.post(
-                "/addon/admin/role/apis",
-                {
-                    roleCode: $Prop.rowData.code
-                },
-                {
-                    dropValues: [""]
-                }
-            );
+        groups.sort((a, b) => {
+            const at = typeof a.title === "string" ? a.title : "";
+            const bt = typeof b.title === "string" ? b.title : "";
+            return at.localeCompare(bt);
+        });
 
-            $Data.checkedApiPaths = res.data.apiPaths || [];
-        } catch (error) {
-            MessagePlugin.error("加载数据失败");
-        }
-    },
+        $Data.apiData = groups as never;
+    } catch (error) {
+        MessagePlugin.error("加载接口失败");
+    }
+}
 
-    // 搜索过滤
-    onSearch() {
-        if (!$Data.searchText) {
-            $Data.filteredApiData = $Data.apiData;
-            return;
-        }
+async function apiRoleApiDetail(): Promise<void> {
+    if (!$Prop.rowData.id) return;
+
+    try {
+        const res = await $Http.post(
+            "/addon/admin/role/apis",
+            {
+                roleCode: $Prop.rowData.code
+            },
+            {
+                dropValues: [""]
+            }
+        );
 
-        const searchLower = $Data.searchText.toLowerCase();
-        $Data.filteredApiData = $Data.apiData
-            .map((group) => {
-                const apis = group.apis.filter((api) => {
-                    const label = api && typeof api.label === "string" ? api.label : "";
-                    const name = api && typeof api.name === "string" ? api.name : "";
-                    const path = api && typeof api.path === "string" ? api.path : "";
-                    return label.toLowerCase().includes(searchLower) || name.toLowerCase().includes(searchLower) || path.toLowerCase().includes(searchLower);
-                });
-                return {
-                    name: group.name,
-                    title: group.title,
-                    apis: apis
-                };
-            })
-            .filter((group) => group.apis.length > 0);
-    },
+        const resRecord = res && typeof res === "object" ? (res as Record<string, unknown>) : null;
+        const resData = resRecord && resRecord["data"] && typeof resRecord["data"] === "object" ? (resRecord["data"] as Record<string, unknown>) : null;
+        $Data.checkedApiPaths = resData && Array.isArray(resData["apiPaths"]) ? (resData["apiPaths"] as never) : ([] as never);
+    } catch (error) {
+        MessagePlugin.error("加载数据失败");
+    }
+}
 
-    // 提交表单
-    async onSubmit() {
-        try {
-            $Data.submitting = true;
+function onSearch(): void {
+    if (!$Data.searchText) {
+        $Data.filteredApiData = $Data.apiData;
+        return;
+    }
 
-            const res = await $Http.post("/addon/admin/role/apiSave", {
-                roleCode: $Prop.rowData.code,
-                apiPaths: $Data.checkedApiPaths
+    const searchLower = String($Data.searchText).toLowerCase();
+    $Data.filteredApiData = ($Data.apiData as unknown[])
+        .map((group) => {
+            const groupRecord = group && typeof group === "object" ? (group as Record<string, unknown>) : null;
+            const groupApis = groupRecord && Array.isArray(groupRecord["apis"]) ? (groupRecord["apis"] as unknown[]) : [];
+            const apis = groupApis.filter((api) => {
+                const apiRecord = api && typeof api === "object" ? (api as Record<string, unknown>) : null;
+                const label = apiRecord && typeof apiRecord["label"] === "string" ? String(apiRecord["label"]) : "";
+                const name = apiRecord && typeof apiRecord["name"] === "string" ? String(apiRecord["name"]) : "";
+                const path = apiRecord && typeof apiRecord["path"] === "string" ? String(apiRecord["path"]) : "";
+                return label.toLowerCase().includes(searchLower) || name.toLowerCase().includes(searchLower) || path.toLowerCase().includes(searchLower);
             });
+            return {
+                name: groupRecord && typeof groupRecord["name"] === "string" ? String(groupRecord["name"]) : "",
+                title: groupRecord && typeof groupRecord["title"] === "string" ? String(groupRecord["title"]) : "",
+                apis: apis
+            };
+        })
+        .filter((group) => group.apis.length > 0) as never;
+}
+
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    try {
+        $Data.submitting = true;
 
-            if (res.code === 0) {
-                MessagePlugin.success("保存成功");
-                $Data.visible = false;
-                $Emit("success");
-            } else {
-                MessagePlugin.error(res.msg || "保存失败");
+        const res = await $Http.post("/addon/admin/role/apiSave", {
+            roleCode: $Prop.rowData.code,
+            apiPaths: $Data.checkedApiPaths
+        });
+
+        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">
@@ -298,7 +294,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);
@@ -308,11 +304,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;
                 }
             }