@befly-addon/admin 1.0.54 → 1.0.56

package/views/{role → permission/role}/components/api.vue

@@ -12,7 +12,7 @@
 
             <!-- 接口分组列表 -->
             <div class="api-container">
-                <div v-for="group in $Data.filteredApiData" :key="group.name" class="api-group">
+                <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">
                         <TCheckboxGroup v-model="$Data.checkedApiIds">
@@ -24,13 +24,11 @@
         </div>
 
         <template #footer>
-            <div class="footer-left">
-                <TButton size="small" @click="$Method.onCheckAll">全选</TButton>
-                <TButton size="small" @click="$Method.onUncheckAll">取消全选</TButton>
-            </div>
-            <div class="footer-right">
-                <TButton @click="$Method.onClose">取消</TButton>
-                <TButton theme="primary" @click="$Method.onSubmit">保存</TButton>
+            <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>
@@ -56,6 +54,7 @@ const $Emit = defineEmits(['update:modelValue', 'success']);
 
 const $Data = $ref({
     visible: false,
+    submitting: false,
     apiData: [],
     filteredApiData: [],
     searchText: '',
@@ -113,7 +112,7 @@ const $Method = {
             $Data.apiData = Array.from(apiMap.values());
         } catch (error) {
             console.error('加载接口失败:', error);
-            MessagePlugin.info({ message: '加载接口失败', status: 'error' });
+            MessagePlugin.error('加载接口失败');
         }
     },
 
@@ -148,49 +147,28 @@ const $Method = {
             .filter((group) => group.apis.length > 0);
     },
 
-    // 全选
-    onCheckAll() {
-        const allApiIds = [];
-        $Data.apiData.forEach((group) => {
-            group.apis.forEach((api) => {
-                allApiIds.push(api.id);
-            });
-        });
-        $Data.checkedApiIds = allApiIds;
-    },
-
-    // 取消全选
-    onUncheckAll() {
-        $Data.checkedApiIds = [];
-    },
-
     // 提交表单
     async onSubmit() {
         try {
+            $Data.submitting = true;
+
             const res = await $Http('/addon/admin/role/apiSave', {
                 roleId: $Prop.rowData.id,
                 apiIds: $Data.checkedApiIds
             });
 
             if (res.code === 0) {
-                MessagePlugin.info({
-                    message: '保存成功',
-                    status: 'success'
-                });
+                MessagePlugin.success('保存成功');
                 $Data.visible = false;
                 $Emit('success');
             } else {
-                MessagePlugin.info({
-                    message: res.msg || '保存失败',
-                    status: 'error'
-                });
+                MessagePlugin.error(res.msg || '保存失败');
             }
         } catch (error) {
             console.error('保存失败:', error);
-            MessagePlugin.info({
-                message: '保存失败',
-                status: 'error'
-            });
+            MessagePlugin.error('保存失败');
+        } finally {
+            $Data.submitting = false;
         }
     }
 };
@@ -218,6 +196,10 @@ $Method.initData();
             border-radius: var(--border-radius-small);
             overflow: hidden;
 
+            .api-checkbox-list {
+                padding: 10px;
+            }
+
             &:last-child {
                 margin-bottom: 0;
             }
@@ -271,20 +253,9 @@ $Method.initData();
     }
 }
 
-// 底部操作栏布局
-:deep(.t-dialog__footer) {
+.dialog-footer {
+    width: 100%;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .footer-left {
-        display: flex;
-        gap: 8px;
-    }
-
-    .footer-right {
-        display: flex;
-        gap: 8px;
-    }
+    justify-content: center;
 }
 </style>

package/views/{role → permission/role}/components/edit.vue

@@ -9,22 +9,22 @@
                     <TInput v-model="$Data.formData.code" placeholder="请输入角色代码，如：admin" />
                 </TFormItem>
                 <TFormItem label="角色描述" prop="description">
-                    <TInput v-model="$Data.formData.description" type="textarea" placeholder="请输入角色描述" :rows="3" />
+                    <TInput v-model="$Data.formData.description" placeholder="请输入角色描述" />
                 </TFormItem>
                 <TFormItem label="排序" prop="sort">
                     <TInputNumber v-model="$Data.formData.sort" :min="0" :max="9999" />
                 </TFormItem>
                 <TFormItem label="状态" prop="state">
                     <TRadioGroup v-model="$Data.formData.state">
-                        <TRadio :label="1">正常</TRadio>
-                        <TRadio :label="2">禁用</TRadio>
+                        <TRadio :value="1">正常</TRadio>
+                        <TRadio :value="2">禁用</TRadio>
                     </TRadioGroup>
                 </TFormItem>
             </TForm>
         </div>
         <template #footer>
             <TButton @click="$Method.onClose">取消</TButton>
-            <TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
+            <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">确定</TButton>
         </template>
     </TDialog>
 </template>
@@ -42,6 +42,7 @@ import {
     Button as TButton,
     MessagePlugin
 } from 'tdesign-vue-next';
+import { fieldClear } from 'befly-shared/fieldClear';
 import { $Http } from '@/plugins/http';
 
 const $Prop = defineProps({
@@ -70,6 +71,7 @@ const $Computed = {};
 
 const $Data = $ref({
     visible: false,
+    submitting: false,
     formData: {
         id: 0,
         name: '',
@@ -116,20 +118,17 @@ const $Method = {
             const valid = await $From.form.validate();
             if (!valid) return;
 
-            const res = await $Http($Prop.actionType === 'upd' ? '/addon/admin/roleUpd' : '/addon/admin/roleIns', $Data.formData);
+            $Data.submitting = true;
+            const formData = $Prop.actionType === 'add' ? fieldClear($Data.formData, { omitKeys: ['id', 'state'] }) : $Data.formData;
+            const res = await $Http($Prop.actionType === 'upd' ? '/addon/admin/role/upd' : '/addon/admin/role/ins', formData);
 
-            MessagePlugin.info({
-                message: $Prop.actionType === 'upd' ? '更新成功' : '添加成功',
-                status: 'success'
-            });
-            $Data.visible = false;
+            MessagePlugin.success(res.msg);
             $Emit('success');
+            $Method.onClose();
         } catch (error) {
-            console.error('提交失败:', error);
-            MessagePlugin.info({
-                message: '提交失败',
-                status: 'error'
-            });
+            MessagePlugin.error(error.msg || '提交失败');
+        } finally {
+            $Data.submitting = false;
         }
     }
 };

package/views/{role → permission/role}/components/menu.vue

@@ -1,17 +1,16 @@
 <template>
     <TDialog v-model:visible="$Data.visible" title="菜单权限" width="600px" :append-to-body="true" :show-footer="true" top="10vh" @close="$Method.onClose">
         <div class="comp-role-menu">
-            <TTree :data="$Data.menuTreeData" node-key="id" show-checkbox default-expand-all :props="{ label: 'name' }" :ref="(el) => ($From.tree = el)" />
+            <TTree v-model:value="$Data.menuTreeCheckedKeys" :data="$Data.menuTreeData" value-mode="all" :keys="{ value: 'id', label: 'name', children: 'children' }" checkable expand-all />
         </div>
         <template #footer>
             <TButton @click="$Method.onClose">取消</TButton>
-            <TButton theme="primary" @click="$Method.onSubmit">保存</TButton>
+            <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">保存</TButton>
         </template>
     </TDialog>
 </template>
 
 <script setup>
-import { nextTick } from 'vue';
 import { Dialog as TDialog, Tree as TTree, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
 import { arrayToTree } from '@/utils';
 import { $Http } from '@/plugins/http';
@@ -29,13 +28,9 @@ const $Prop = defineProps({
 
 const $Emit = defineEmits(['update:modelValue', 'success']);
 
-// 表单引用
-const $From = $shallowRef({
-    tree: null
-});
-
 const $Data = $ref({
     visible: false,
+    submitting: false,
     menuTreeData: [],
     menuTreeCheckedKeys: []
 });
@@ -69,7 +64,7 @@ const $Method = {
             $Data.menuTreeData = arrayToTree(menuList);
         } catch (error) {
             console.error('加载菜单失败:', error);
-            MessagePlugin.info({ message: '加载菜单失败', status: 'error' });
+            MessagePlugin.error('加载菜单失败');
         }
     },
 
@@ -84,13 +79,6 @@ const $Method = {
 
             // roleMenuDetail 返回的 data 直接就是菜单 ID 数组
             $Data.menuTreeCheckedKeys = Array.isArray(res.data) ? res.data : [];
-
-            // 等待树渲染完成后设置选中状态
-            nextTick(() => {
-                if ($From.tree && $Data.menuTreeCheckedKeys.length > 0) {
-                    $From.tree.setCheckedKeys($Data.menuTreeCheckedKeys);
-                }
-            });
         } catch (error) {
             console.error('加载角色菜单失败:', error);
         }
@@ -99,40 +87,25 @@ const $Method = {
     // 提交表单
     async onSubmit() {
         try {
-            if (!$From.tree) {
-                MessagePlugin.info({ message: '菜单树未初始化', status: 'error' });
-                return;
-            }
-
-            // 获取选中的节点（包括半选中的父节点）
-            const checkedKeys = $From.tree.getCheckedKeys();
-            const halfCheckedKeys = $From.tree.getHalfCheckedKeys();
-            const menuIds = [...checkedKeys, ...halfCheckedKeys];
+            $Data.submitting = true;
 
             const res = await $Http('/addon/admin/role/menuSave', {
                 roleId: $Prop.rowData.id,
-                menuIds
+                menuIds: $Data.menuTreeCheckedKeys
             });
 
             if (res.code === 0) {
-                MessagePlugin.info({
-                    message: '保存成功',
-                    status: 'success'
-                });
+                MessagePlugin.success('保存成功');
                 $Data.visible = false;
                 $Emit('success');
             } else {
-                MessagePlugin.info({
-                    message: res.msg || '保存失败',
-                    status: 'error'
-                });
+                MessagePlugin.error(res.msg || '保存失败');
             }
         } catch (error) {
             console.error('保存失败:', error);
-            MessagePlugin.info({
-                message: '保存失败',
-                status: 'error'
-            });
+            MessagePlugin.error('保存失败');
+        } finally {
+            $Data.submitting = false;
         }
     }
 };

package/views/permission/role/index.vue

@@ -0,0 +1,227 @@
+<template>
+    <div class="page-role page-table">
+        <div class="main-tool">
+            <div class="left">
+                <TButton theme="primary" @click="$Method.onAction('add', {})">
+                    <template #icon>
+                        <ILucidePlus />
+                    </template>
+                </TButton>
+            </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 #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 shape="round" theme="danger" variant="light-outline">已删除</TTag>
+                    </template>
+                    <template #operation="{ row }">
+                        <TDropdown trigger="click" placement="bottom-right" @click="(data) => $Method.onAction(data.value, row)">
+                            <TButton theme="primary" size="small">
+                                操作
+                                <template #suffix> <t-icon name="chevron-down" size="16" /></template>
+                            </TButton>
+                            <TDropdownMenu slot="dropdown">
+                                <TDropdownItem value="upd">
+                                    <ILucidePencil />
+                                    编辑
+                                </TDropdownItem>
+                                <TDropdownItem value="menu">
+                                    <ILucideSettings />
+                                    菜单权限
+                                </TDropdownItem>
+                                <TDropdownItem value="api">
+                                    <ILucideCode />
+                                    接口权限
+                                </TDropdownItem>
+                                <TDropdownItem value="del" :divider="true">
+                                    <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                                    删除
+                                </TDropdownItem>
+                            </TDropdownMenu>
+                        </TDropdown>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.columns" />
+            </div>
+        </div>
+
+        <div class="main-page">
+            <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>
+
+        <!-- 编辑对话框组件 -->
+        <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.apiRoleList" />
+
+        <!-- 菜单权限对话框组件 -->
+        <MenuDialog v-if="$Data.menuVisible" v-model="$Data.menuVisible" :row-data="$Data.rowData" @success="$Method.apiRoleList" />
+
+        <!-- 接口权限对话框组件 -->
+        <ApiDialog v-if="$Data.apiVisible" v-model="$Data.apiVisible" :row-data="$Data.rowData" @success="$Method.apiRoleList" />
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton, Table as TTable, Tag as TTag, Dropdown as TDropdown, DropdownMenu as TDropdownMenu, DropdownItem as TDropdownItem, Pagination as TPagination, MessagePlugin, DialogPlugin } from 'tdesign-vue-next';
+import ILucidePlus from '~icons/lucide/plus';
+import ILucideRotateCw from '~icons/lucide/rotate-cw';
+import ILucidePencil from '~icons/lucide/pencil';
+import ILucideSettings from '~icons/lucide/settings';
+import ILucideCode from '~icons/lucide/code';
+import ILucideTrash2 from '~icons/lucide/trash-2';
+import EditDialog from './components/edit.vue';
+import MenuDialog from './components/menu.vue';
+import ApiDialog from './components/api.vue';
+import DetailPanel from '@/components/DetailPanel.vue';
+import { $Http } from '@/plugins/http';
+import { withDefaultColumns } from '@/utils';
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    loading: false,
+    activeRowKeys: [],
+    currentRow: null,
+    columns: withDefaultColumns([
+        { colKey: 'id', title: 'ID' },
+        { colKey: 'name', title: '角色名称' },
+        { colKey: 'code', title: '角色代码' },
+        { colKey: 'description', title: '描述' },
+        { colKey: 'sort', title: '排序' },
+        { colKey: 'state', title: '状态' },
+        { colKey: 'operation', title: '操作' }
+    ]),
+    pagerConfig: {
+        currentPage: 1,
+        limit: 30,
+        total: 0,
+        align: 'right',
+        layout: 'total, prev, pager, next, jumper'
+    },
+    editVisible: false,
+    menuVisible: false,
+    apiVisible: false,
+    actionType: 'add',
+    rowData: {}
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.apiRoleList();
+    },
+    // 加载角色列表
+    async apiRoleList() {
+        $Data.loading = true;
+        try {
+            const res = await $Http('/addon/admin/role/list', {
+                page: $Data.pagerConfig.currentPage,
+                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.activeRowKeys = [$Data.tableData[0].id];
+            } else {
+                $Data.currentRow = null;
+                $Data.activeRowKeys = [];
+            }
+        } catch (error) {
+            console.error('加载角色列表失败:', error);
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
+        }
+    },
+
+    // 删除角色
+    async apiRoleDel(row) {
+        DialogPlugin.confirm({
+            header: '确认删除',
+            body: `确定要删除角色“${row.name}” 吗？`,
+            status: 'warning'
+        }).then(async () => {
+            try {
+                const res = await $Http('/addon/admin/role/del', { id: row.id });
+                if (res.code === 0) {
+                    MessagePlugin.success('删除成功');
+                    $Method.apiRoleList();
+                } else {
+                    MessagePlugin.error(res.msg || '删除失败');
+                }
+            } catch (error) {
+                console.error('删除失败:', error);
+                MessagePlugin.error('删除失败');
+            }
+        });
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.apiRoleList();
+    },
+
+    // 分页改变
+    onPageChange({ currentPage }) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiRoleList();
+    },
+
+    // 每页条数改变
+    handleSizeChange({ pageSize }) {
+        $Data.pagerConfig.limit = pageSize;
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiRoleList();
+    },
+
+    // 高亮行变化
+    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;
+        }
+    },
+
+    // 操作菜单点击
+    onAction(command, rowData) {
+        $Data.actionType = command;
+        $Data.rowData = rowData;
+        if (command === 'add' || command === 'upd') {
+            $Data.editVisible = true;
+        } else if (command === 'menu') {
+            $Data.menuVisible = true;
+        } else if (command === 'api') {
+            $Data.apiVisible = true;
+        } else if (command === 'del') {
+            $Method.apiRoleDel(rowData);
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+.page-role {
+}
+</style>

package/views/permission/role/meta.json

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

package/apis/menu/del.ts

@@ -1,31 +0,0 @@
-export default {
-    name: '删除菜单',
-    handler: async (befly, ctx) => {
-        try {
-            // 检查是否有子菜单（使用 getList 代替 getAll）
-            const childrenList = await befly.db.getList({
-                table: 'addon_admin_menu',
-                where: { pid: ctx.body.id }
-            });
-
-            if (childrenList.total > 0) {
-                return befly.tool.No('该菜单下有子菜单，无法删除');
-            }
-
-            // 删除菜单
-            await befly.db.delData({
-                table: 'addon_admin_menu',
-                where: { id: ctx.body.id }
-            });
-
-            // 注意：菜单权限现在存储在 role.menus 字段中
-            // 如果需要从角色权限中移除此菜单，需要额外处理
-            // 这里暂时不处理，由管理员在角色管理界面手动调整
-
-            return befly.tool.Yes('操作成功');
-        } catch (error) {
-            befly.logger.error('删除菜单失败:', error);
-            return befly.tool.No('操作失败');
-        }
-    }
-};

package/apis/menu/ins.ts

@@ -1,19 +0,0 @@
-import adminMenuTable from '../../tables/menu.json';
-
-export default {
-    name: '创建菜单',
-    fields: adminMenuTable,
-    handler: async (befly, ctx) => {
-        try {
-            const menuId = await befly.db.insData({
-                table: 'addon_admin_menu',
-                data: ctx.body
-            });
-
-            return befly.tool.Yes('操作成功', { id: menuId });
-        } catch (error) {
-            befly.logger.error('创建菜单失败:', error);
-            return befly.tool.No('操作失败');
-        }
-    }
-};

package/apis/menu/upd.ts

@@ -1,27 +0,0 @@
-import adminMenuTable from '../../tables/menu.json';
-
-export default {
-    name: '更新菜单',
-    fields: adminMenuTable,
-    handler: async (befly, ctx) => {
-        try {
-            await befly.db.updData({
-                table: 'addon_admin_menu',
-                where: { id: ctx.body.id },
-                data: {
-                    name: ctx.body.name,
-                    path: ctx.body.path,
-                    icon: ctx.body.icon,
-                    sort: ctx.body.sort,
-                    pid: ctx.body.pid
-                    // state 字段不在此处更新，需要禁用/启用时单独处理
-                }
-            });
-
-            return befly.tool.Yes('操作成功');
-        } catch (error) {
-            befly.logger.error('更新菜单失败:', error);
-            return befly.tool.No('操作失败');
-        }
-    }
-};