befly-admin-ui 1.8.14

package/views/permission/api/index.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="page-api page-table">
+        <div class="main-tool">
+            <div class="left">
+                <TInput v-model="$Data.searchKeyword" placeholder="搜索接口名称或路径" clearable style="width: 300px" @enter="handleSearch" @clear="handleSearch">
+                    <template #suffix-icon>
+                        <SearchIcon />
+                    </template>
+                </TInput>
+                <span style="margin-left: 16px; color: var(--text-secondary); font-size: 13px">共 {{ $Data.allData.length }} 个接口</span>
+            </div>
+            <div class="right">
+                <TButton shape="circle" @click="handleRefresh">
+                    <template #icon>
+                        <RefreshIcon />
+                    </template>
+                </TButton>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="main-table">
+                <TTable :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" row-key="id" height="calc(100vh - var(--search-height) - var(--layout-gap) * 2)" active-row-type="single" @active-change="onActiveChange">
+                    <template #method="{ row }">
+                        <TTag v-if="row.method === 'GET'" shape="round" theme="success" variant="light-outline">GET</TTag>
+                        <TTag v-else-if="row.method === 'POST'" shape="round" theme="primary" variant="light-outline">POST</TTag>
+                        <TTag v-else-if="row.method === 'PUT'" shape="round" theme="warning" variant="light-outline">PUT</TTag>
+                        <TTag v-else-if="row.method === 'DELETE'" shape="round" theme="danger" variant="light-outline">DELETE</TTag>
+                        <TTag v-else shape="round" variant="light-outline">{{ row.method }}</TTag>
+                    </template>
+                    <template #auth="{ row }">
+                        <TTag v-if="row.auth === 0" shape="round" theme="success" variant="light-outline">免登录</TTag>
+                        <TTag v-else shape="round" theme="warning" variant="light-outline">需登录</TTag>
+                    </template>
+                    <template #addonName="{ row }">
+                        <TTag v-if="row.addonName" shape="round" variant="light-outline">{{ row.addonTitle || row.addonName }}</TTag>
+                        <span v-else>项目</span>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.columns">
+                    <template #method="{ value }">
+                        <TTag v-if="value === 'GET'" shape="round" theme="success" variant="light-outline">GET</TTag>
+                        <TTag v-else-if="value === 'POST'" shape="round" theme="primary" variant="light-outline">POST</TTag>
+                        <TTag v-else-if="value === 'PUT'" shape="round" theme="warning" variant="light-outline">PUT</TTag>
+                        <TTag v-else-if="value === 'DELETE'" shape="round" theme="danger" variant="light-outline">DELETE</TTag>
+                        <TTag v-else shape="round" variant="light-outline">{{ value }}</TTag>
+                    </template>
+                    <template #auth="{ value }">
+                        <TTag v-if="value === 0" shape="round" theme="success" variant="light-outline">免登录</TTag>
+                        <TTag v-else shape="round" theme="warning" variant="light-outline">需登录</TTag>
+                    </template>
+                </DetailPanel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Button as TButton, Table as TTable, Tag as TTag, Input as TInput, MessagePlugin } from "tdesign-vue-next";
+import { RefreshIcon, SearchIcon } from "tdesign-icons-vue-next";
+import DetailPanel from "@/components/detailPanel.vue";
+import { $Http } from "@/plugins/http";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+// 响应式数据
+const $Data = reactive({
+    tableData: [],
+    allData: [],
+    loading: false,
+    searchKeyword: "",
+    columns: withDefaultColumns([
+        { colKey: "name", title: "接口名称" },
+        { colKey: "auth", title: "登录" },
+        { colKey: "path", title: "接口路径" },
+        { colKey: "method", title: "请求方法" },
+        { colKey: "addonName", title: "所属组件" }
+    ]),
+    currentRow: null,
+    activeRowKeys: []
+});
+
+async function initData(): Promise<void> {
+    await loadApiAll();
+}
+
+async function loadApiAll(): Promise<void> {
+    $Data.loading = true;
+    try {
+        const res = await $Http.post(
+            "/core/api/all",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        const list = res.data?.lists || [];
+        $Data.allData = list;
+        $Data.tableData = list;
+
+        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;
+    }
+}
+
+function handleRefresh(): void {
+    loadApiAll();
+}
+
+function handleSearch(): void {
+    if (!$Data.searchKeyword) {
+        $Data.tableData = $Data.allData;
+        return;
+    }
+    const keyword = String($Data.searchKeyword).toLowerCase();
+    $Data.tableData = $Data.allData.filter((item) => item.name?.toLowerCase().includes(keyword) || item.path?.toLowerCase().includes(keyword));
+}
+
+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;
+    }
+}
+
+initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/permission/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <RouterView />
+</template>

package/views/permission/menu/index.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="page-menu page-table">
+        <div class="main-tool">
+            <div class="left"></div>
+            <div class="right">
+                <TButton shape="circle" @click="handleRefresh">
+                    <template #icon>
+                        <RefreshIcon />
+                    </template>
+                </TButton>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="main-table">
+                <TTable :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" row-key="id" height="calc(100vh - var(--search-height) - var(--layout-gap) * 2)" active-row-type="single" :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0, defaultExpandAll: true }" @active-change="onActiveChange">
+                    <template #state="{ row }">
+                        <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
+                        <TTag v-else-if="row.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
+                        <TTag v-else-if="row.state === 0" shape="round" theme="danger" variant="light-outline">删除</TTag>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.columns" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Button as TButton, Table as TTable, Tag as TTag, MessagePlugin } from "tdesign-vue-next";
+import { RefreshIcon } from "tdesign-icons-vue-next";
+import DetailPanel from "@/components/detailPanel.vue";
+import { $Http } from "@/plugins/http";
+import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+// 响应式数据
+const $Data = reactive({
+    tableData: [],
+    loading: false,
+    columns: withDefaultColumns([
+        { colKey: "name", title: "菜单名称" },
+        { colKey: "path", title: "路由路径" },
+        { colKey: "parentPath", title: "父级路径" },
+        { colKey: "sort", title: "排序" },
+        { colKey: "state", title: "状态" }
+    ]),
+    currentRow: null,
+    activeRowKeys: []
+});
+
+async function initData(): Promise<void> {
+    await apiMenuList();
+}
+
+async function apiMenuList(): Promise<void> {
+    $Data.loading = true;
+    try {
+        const res = await $Http.post(
+            "/core/menu/all",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+
+        const treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
+
+        $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;
+    }
+}
+
+function handleRefresh(): void {
+    apiMenuList();
+}
+
+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;
+    }
+}
+
+initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/permission/role/components/api.vue

@@ -0,0 +1,371 @@
+<template>
+    <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="onSearch">
+                    <template #prefix-icon>
+                        <SearchIcon />
+                    </template>
+                </TInput>
+            </div>
+
+            <!-- 接口分组列表 -->
+            <div class="api-container">
+                <TCheckboxGroup v-model="$Data.checkedApiPaths">
+                    <div class="api-group" v-for="group in $Data.filteredApiData" :key="group.name">
+                        <div class="group-header">{{ group.title }}</div>
+                        <div class="api-checkbox-list">
+                            <TCheckbox v-for="api in group.apis" :key="api.value" :value="api.value">
+                                <div class="api-checkbox-label">
+                                    <div class="api-label-main">
+                                        <div class="api-name" :title="api.path ? `${api.name}\n${api.path}` : api.name">{{ api.name }}</div>
+                                    </div>
+                                </div>
+                            </TCheckbox>
+                        </div>
+                    </div>
+                </TCheckboxGroup>
+            </div>
+        </div>
+    </PageDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from "vue";
+
+import { Input as TInput, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, MessagePlugin } from "tdesign-vue-next";
+import { SearchIcon } from "tdesign-icons-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
+import { $Http } from "@/plugins/http";
+
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    rowData: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+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 = reactive({
+    submitting: false,
+    apiData: [],
+    filteredApiData: [],
+    searchText: "",
+    checkedApiPaths: []
+});
+
+async function initData(): Promise<void> {
+    await Promise.all([apiApiAll(), apiRoleApiDetail()]);
+
+    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 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) as never;
+    $Data.filteredApiData = $Data.apiData;
+}
+
+async function apiApiAll(): Promise<void> {
+    try {
+        const res = await $Http.post(
+            "/core/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 || "(未分组)";
+
+            if (!apiMap.has(groupKey)) {
+                apiMap.set(groupKey, {
+                    name: groupKey,
+                    title: groupKey,
+                    apis: []
+                });
+            }
+
+            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
+            });
+        }
+
+        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);
+            });
+        }
+
+        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.apiData = groups as never;
+    } catch (_error) {
+        MessagePlugin.error("加载接口失败");
+    }
+}
+
+async function apiRoleApiDetail(): Promise<void> {
+    if (!$Prop.rowData.id) return;
+
+    try {
+        const res = await $Http.post(
+            "/core/role/apis",
+            {
+                roleCode: $Prop.rowData.code
+            },
+            {
+                dropValues: [""]
+            }
+        );
+
+        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("加载数据失败");
+    }
+}
+
+function onSearch(): void {
+    if (!$Data.searchText) {
+        $Data.filteredApiData = $Data.apiData;
+        return;
+    }
+
+    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;
+
+        const res = await $Http.post("/core/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();
+            }
+        } else {
+            MessagePlugin.error(res.msg || "保存失败");
+        }
+    } catch (_error) {
+        MessagePlugin.error("保存失败");
+    } finally {
+        $Data.submitting = false;
+    }
+}
+
+initData();
+</script>
+
+<style scoped lang="scss">
+.comp-role-api {
+    height: 60vh;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .api-container {
+        flex: 1;
+        overflow-y: auto;
+
+        /* CheckboxGroup 默认可能是 inline 布局，容易被内容撑开；这里强制占满容器宽度 */
+        :deep(.t-checkbox-group) {
+            display: block;
+            width: 100%;
+        }
+
+        .api-group {
+            margin-bottom: 16px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius-small);
+            overflow: hidden;
+
+            .api-checkbox-list {
+                padding: 12px 16px;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 12px;
+
+                :deep(.t-checkbox) {
+                    margin: 0;
+                    flex: 0 0 calc(33.333% - 8px);
+                    min-width: 0;
+
+                    .t-checkbox__label {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .group-header {
+                padding: 12px 16px;
+                background-color: var(--primary-color-light);
+                font-weight: 500;
+                font-size: var(--font-size-sm);
+                color: var(--text-primary);
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                &::before {
+                    content: "";
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 50%;
+                    background-color: var(--primary-color);
+                    box-shadow: 0 0 0 2px var(--bg-color-container);
+                    flex-shrink: 0;
+                }
+            }
+
+            .api-item {
+                padding: 8px 16px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+                background-color: var(--bg-color-container);
+
+                :deep(.t-checkbox-group) {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 12px;
+                    width: 100%;
+                }
+
+                :deep(.t-checkbox) {
+                    flex: 0 0 calc(33.333% - 8px);
+                    margin: 0;
+
+                    .t-checkbox__label {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.api-checkbox-label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.api-label-main {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.api-name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dialog-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+</style>