@befly-addon/admin 1.8.2 → 1.8.5

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({
@@ -56,10 +50,23 @@ const $Prop = defineProps({
     }
 });
 
-const $Emit = defineEmits(["update:modelValue", "success"]);
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (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: [],
@@ -67,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">
@@ -295,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);
@@ -305,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;
                 }
             }

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";
 
@@ -60,7 +58,14 @@ const $Prop = defineProps({
     }
 });
 
-const $Emit = defineEmits(["update:modelValue", "success"]);
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
+
+type PageDialogEventContext = {
+    close: () => void;
+};
 
 // 表单引用
 const $From = $shallowRef({
@@ -70,7 +75,6 @@ const $From = $shallowRef({
 const $Computed = {};
 
 const $Data = $ref({
-    visible: false,
     submitting: false,
     formData: {
         id: 0,
@@ -93,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>