@befly-addon/admin 1.0.54 → 1.0.56

package/views/{admin → people/admin}/index.vue

@@ -19,7 +19,7 @@
 
         <div class="main-content">
             <div class="main-table">
-                <TTable :data="$Data.tableData" :columns="$Data.columns" row-key="id" :selected-row-keys="$Data.selectedRowKeys" active-row-type="single" :active-row-keys="$Data.activeRowKeys" @select-change="$Method.onSelectChange" @active-change="$Method.onActiveChange">
+                <TTable :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" row-key="id" height="calc(100vh - 94px)" active-row-type="single" @active-change="$Method.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>
@@ -27,7 +27,10 @@
                     </template>
                     <template #operation="{ row }">
                         <TDropdown trigger="click" placement="bottom-right" @click="(data) => $Method.onAction(data.value, row)">
-                            <TButton theme="primary" size="small">操作</TButton>
+                            <TButton theme="primary" size="small">
+                                操作
+                                <template #suffix> <t-icon name="chevron-down" size="16" /></template>
+                            </TButton>
                             <TDropdownMenu slot="dropdown">
                                 <TDropdownItem value="upd">
                                     <ILucidePencil />
@@ -44,45 +47,12 @@
             </div>
 
             <div class="main-detail">
-                <div class="detail-content">
-                    <div v-if="$Data.currentRow">
-                        <div style="margin-bottom: 16px">
-                            <div style="color: var(--text-secondary); margin-bottom: 4px">ID</div>
-                            <div>{{ $Data.currentRow.id }}</div>
-                        </div>
-                        <div style="margin-bottom: 16px">
-                            <div style="color: var(--text-secondary); margin-bottom: 4px">用户名</div>
-                            <div>{{ $Data.currentRow.username }}</div>
-                        </div>
-                        <div style="margin-bottom: 16px">
-                            <div style="color: var(--text-secondary); margin-bottom: 4px">邮箱</div>
-                            <div>{{ $Data.currentRow.email }}</div>
-                        </div>
-                        <div style="margin-bottom: 16px">
-                            <div style="color: var(--text-secondary); margin-bottom: 4px">昵称</div>
-                            <div>{{ $Data.currentRow.nickname || '-' }}</div>
-                        </div>
-                        <div style="margin-bottom: 16px">
-                            <div style="color: var(--text-secondary); margin-bottom: 4px">角色</div>
-                            <div>{{ $Data.currentRow.roleCode || '-' }}</div>
-                        </div>
-                        <div style="margin-bottom: 16px">
-                            <div style="color: var(--text-secondary); margin-bottom: 4px">状态</div>
-                            <TTag v-if="$Data.currentRow.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
-                            <TTag v-else-if="$Data.currentRow.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
-                            <TTag v-else-if="$Data.currentRow.state === 0" shape="round" theme="danger" variant="light-outline">已删除</TTag>
-                        </div>
-                    </div>
-                    <div v-else style="text-align: center; padding: 48px 0; color: var(--text-placeholder)">
-                        <div style="font-size: 48px; margin-bottom: 8px">📋</div>
-                        <div>暂无数据</div>
-                    </div>
-                </div>
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.columns" />
             </div>
         </div>
 
         <div class="main-page">
-            <TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
+            <TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.limit" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @page-size-change="$Method.handleSizeChange" />
         </div>
 
         <!-- 编辑对话框组件 -->
@@ -97,30 +67,25 @@ import ILucideRotateCw from '~icons/lucide/rotate-cw';
 import ILucidePencil from '~icons/lucide/pencil';
 import ILucideTrash2 from '~icons/lucide/trash-2';
 import EditDialog from './components/edit.vue';
+import DetailPanel from '@/components/DetailPanel.vue';
 import { $Http } from '@/plugins/http';
+import { withDefaultColumns } from '@/utils';
 
 // 响应式数据
 const $Data = $ref({
     tableData: [],
-    columns: [
-        {
-            colKey: 'row-select',
-            type: 'single',
-            width: 50,
-            fixed: 'left',
-            checkProps: { allowUncheck: true }
-        },
-        { colKey: 'username', title: '用户名', width: 150, fixed: 'left' },
-        { colKey: 'id', title: '序号', width: 150, align: 'center' },
-        { colKey: 'email', title: '邮箱', width: 200 },
-        { colKey: 'nickname', title: '昵称', width: 150 },
-        { colKey: 'roleCode', title: '角色', width: 120 },
-        { colKey: 'state', title: '状态', width: 100 },
-        { colKey: 'operation', title: '操作', width: 80, align: 'center', fixed: 'right' }
-    ],
+    loading: false,
+    columns: withDefaultColumns([
+        { colKey: 'username', title: '用户名', fixed: 'left' },
+        { colKey: 'id', title: '序号' },
+        { colKey: 'nickname', title: '昵称' },
+        { colKey: 'roleCode', title: '角色' },
+        { colKey: 'state', title: '状态' },
+        { colKey: 'operation', title: '操作' }
+    ]),
     pagerConfig: {
         currentPage: 1,
-        pageSize: 30,
+        limit: 30,
         total: 0,
         align: 'right',
         layout: 'total, prev, pager, next, jumper'
@@ -129,7 +94,6 @@ const $Data = $ref({
     actionType: 'add',
     rowData: {},
     currentRow: null,
-    selectedRowKeys: [],
     activeRowKeys: []
 });
 
@@ -141,30 +105,28 @@ const $Method = {
 
     // 加载管理员列表
     async apiAdminList() {
+        $Data.loading = true;
         try {
             const res = await $Http('/addon/admin/admin/list', {
                 page: $Data.pagerConfig.currentPage,
-                limit: $Data.pagerConfig.pageSize
+                limit: $Data.pagerConfig.limit
             });
             $Data.tableData = res.data.lists || [];
             $Data.pagerConfig.total = res.data.total || 0;
 
-            // 自动选中并高亮第一行
+            // 自动高亮第一行
             if ($Data.tableData.length > 0) {
                 $Data.currentRow = $Data.tableData[0];
-                $Data.selectedRowKeys = [$Data.tableData[0].id];
                 $Data.activeRowKeys = [$Data.tableData[0].id];
             } else {
                 $Data.currentRow = null;
-                $Data.selectedRowKeys = [];
                 $Data.activeRowKeys = [];
             }
         } catch (error) {
             console.error('加载管理员列表失败:', error);
-            MessagePlugin.info({
-                message: '加载数据失败',
-                status: 'error'
-            });
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
         }
     },
 
@@ -172,20 +134,20 @@ const $Method = {
     async apiAdminDel(row) {
         DialogPlugin.confirm({
             header: '确认删除',
-            body: `确定要删除管理员"${row.username}" 吗？`,
+            body: `确定要删除管理员“${row.username}” 吗？`,
             status: 'warning'
         }).then(async () => {
             try {
                 const res = await $Http('/addon/admin/admin/del', { id: row.id });
                 if (res.code === 0) {
-                    MessagePlugin.info({ message: '删除成功', status: 'success' });
+                    MessagePlugin.success('删除成功');
                     $Method.apiAdminList();
                 } else {
-                    MessagePlugin.info({ message: res.msg || '删除失败', status: 'error' });
+                    MessagePlugin.error(res.msg || '删除失败');
                 }
             } catch (error) {
                 console.error('删除失败:', error);
-                MessagePlugin.info({ message: '删除失败', status: 'error' });
+                MessagePlugin.error('删除失败');
             }
         });
     },
@@ -203,42 +165,21 @@ const $Method = {
 
     // 每页条数改变
     handleSizeChange({ pageSize }) {
-        $Data.pagerConfig.pageSize = pageSize;
+        $Data.pagerConfig.limit = pageSize;
         $Data.pagerConfig.currentPage = 1;
         $Method.apiAdminList();
     },
 
-    // 单选变化
-    onSelectChange(value, { selectedRowData }) {
-        $Data.selectedRowKeys = value;
-        $Data.activeRowKeys = value;
-        // 更新当前选中的行数据
-        if (selectedRowData && selectedRowData.length > 0) {
-            $Data.currentRow = selectedRowData[0];
-        } else if ($Data.tableData.length > 0) {
-            // 如果取消选中，默认显示第一行
-            $Data.currentRow = $Data.tableData[0];
-            $Data.selectedRowKeys = [$Data.tableData[0].id];
-            $Data.activeRowKeys = [$Data.tableData[0].id];
-        } else {
-            $Data.currentRow = null;
-        }
-    },
-
     // 高亮行变化
-    onActiveChange(value, { activeRowData }) {
+    onActiveChange(value, context) {
+        // 禁止取消高亮：如果新值为空，保持当前选中
+        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
+            return;
+        }
         $Data.activeRowKeys = value;
-        $Data.selectedRowKeys = value;
         // 更新当前高亮的行数据
-        if (activeRowData && activeRowData.length > 0) {
-            $Data.currentRow = activeRowData[0];
-        } else if ($Data.tableData.length > 0) {
-            // 如果取消高亮，默认显示第一行
-            $Data.currentRow = $Data.tableData[0];
-            $Data.selectedRowKeys = [$Data.tableData[0].id];
-            $Data.activeRowKeys = [$Data.tableData[0].id];
-        } else {
-            $Data.currentRow = null;
+        if (context.activeRowList && context.activeRowList.length > 0) {
+            $Data.currentRow = context.activeRowList[0].row;
         }
     },
 

package/views/people/admin/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "管理员",
+    "order": 1
+}

package/views/people/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "人员管理",
+    "order": 10
+}

package/views/permission/api/index.vue

@@ -0,0 +1,143 @@
+<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="$Method.handleSearch" @clear="$Method.handleSearch">
+                    <template #suffix-icon>
+                        <ILucideSearch />
+                    </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="$Method.handleRefresh">
+                    <template #icon>
+                        <ILucideRotateCw />
+                    </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 - 94px)" active-row-type="single" @active-change="$Method.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 #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>
+                </DetailPanel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton, Table as TTable, Tag as TTag, Input as TInput, MessagePlugin } from 'tdesign-vue-next';
+import ILucideRotateCw from '~icons/lucide/rotate-cw';
+import ILucideSearch from '~icons/lucide/search';
+import { $Http } from '@/plugins/http';
+import { withDefaultColumns } from '@/utils';
+import DetailPanel from '@/components/DetailPanel.vue';
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    allData: [],
+    loading: false,
+    searchKeyword: '',
+    columns: withDefaultColumns([
+        { colKey: 'name', title: '接口名称' },
+        { colKey: 'id', title: '序号' },
+        { colKey: 'path', title: '接口路径' },
+        { colKey: 'method', title: '请求方法' },
+        { colKey: 'addonName', title: '所属组件' }
+    ]),
+    currentRow: null,
+    activeRowKeys: []
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.loadApiAll();
+    },
+
+    // 加载全部接口
+    async loadApiAll() {
+        $Data.loading = true;
+        try {
+            const res = await $Http('/addon/admin/api/all');
+            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) {
+            console.error('加载接口列表失败:', error);
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
+        }
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.loadApiAll();
+    },
+
+    // 搜索
+    handleSearch() {
+        if (!$Data.searchKeyword) {
+            $Data.tableData = $Data.allData;
+            return;
+        }
+        const keyword = $Data.searchKeyword.toLowerCase();
+        $Data.tableData = $Data.allData.filter((item) => item.name?.toLowerCase().includes(keyword) || item.path?.toLowerCase().includes(keyword));
+    },
+
+    // 高亮行变化
+    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;
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/permission/api/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "接口列表",
+    "order": 3
+}

package/views/permission/menu/index.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="page-menu page-table">
+        <div class="main-tool">
+            <div class="left"></div>
+            <div class="right">
+                <TButton shape="circle" @click="$Method.handleRefresh">
+                    <template #icon>
+                        <ILucideRotateCw />
+                    </template>
+                </TButton>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="main-table">
+                <TTable v-bind="withTreeTableProps()" :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" row-key="id" height="calc(100vh - 94px)" active-row-type="single" @active-change="$Method.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>
+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 { $Http } from '@/plugins/http';
+import { withDefaultColumns, withTreeTableProps } from '@/utils';
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    loading: false,
+    columns: withDefaultColumns([
+        { colKey: 'name', title: '菜单名称', fixed: 'left' },
+        { colKey: 'id', title: '序号' },
+        { colKey: 'path', title: '路由路径' },
+        { colKey: 'icon', title: '图标' },
+        { colKey: 'sort', title: '排序' },
+        { colKey: 'state', title: '状态' }
+    ]),
+    currentRow: null,
+    activeRowKeys: []
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.apiMenuList();
+    },
+
+    // 加载菜单列表（树形结构）
+    async apiMenuList() {
+        $Data.loading = true;
+        try {
+            const res = await $Http('/addon/admin/menu/list');
+            // 构建树形结构
+            $Data.tableData = $Method.buildTree(res.data || []);
+
+            // 自动高亮第一行
+            if ($Data.tableData.length > 0) {
+                $Data.currentRow = $Data.tableData[0];
+                $Data.activeRowKeys = [$Data.tableData[0].id];
+            } else {
+                $Data.currentRow = null;
+                $Data.activeRowKeys = [];
+            }
+        } catch (error) {
+            console.error('加载菜单列表失败:', error);
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
+        }
+    },
+
+    // 构建树形结构
+    buildTree(list) {
+        const map = {};
+        const roots = [];
+
+        // 先创建所有节点的映射
+        for (const item of list) {
+            map[item.id] = { ...item, children: [] };
+        }
+
+        // 构建树形结构
+        for (const item of list) {
+            const node = map[item.id];
+            if (item.pid === 0) {
+                roots.push(node);
+            } else if (map[item.pid]) {
+                map[item.pid].children.push(node);
+            } else {
+                roots.push(node);
+            }
+        }
+
+        // 移除空的 children 数组
+        const removeEmptyChildren = (nodes) => {
+            for (const node of nodes) {
+                if (node.children.length === 0) {
+                    delete node.children;
+                } else {
+                    removeEmptyChildren(node.children);
+                }
+            }
+        };
+        removeEmptyChildren(roots);
+
+        return roots;
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.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;
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/permission/menu/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "菜单列表",
+    "order": 2
+}

package/views/permission/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "权限设置",
+    "order": 20
+}