@befly-addon/admin 1.0.52 → 1.0.55

package/views/role/index.vue

@@ -16,41 +16,57 @@
                 </TButton>
             </div>
         </div>
-        <div class="main-table">
-            <TTable :data="$Data.tableData" :columns="$Data.columns" header-cell-class-name="custom-table-cell-class" size="small" height="100%" row-key="id" bordered>
-                <template #state="{ row }">
-                    <TTag v-if="row.state === 1" theme="success">正常</TTag>
-                    <TTag v-else-if="row.state === 2" theme="warning">禁用</TTag>
-                    <TTag v-else theme="danger">已删除</TTag>
-                </template>
-                <template #operation="{ row }">
-                    <TDropdown trigger="click" min-column-width="120" @click="(data) => $Method.onAction(data.value, row)">
-                        <TButton variant="text" size="small">操作</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 class="main-content">
+            <div class="main-table">
+                <TTable v-bind="withTableProps()" :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" @active-change="$Method.onActiveChange">
+                    <template #state="{ row }">
+                        <TTag v-if="row.state === 1" theme="success">正常</TTag>
+                        <TTag v-else-if="row.state === 2" theme="warning">禁用</TTag>
+                        <TTag v-else theme="danger">已删除</TTag>
+                    </template>
+                    <template #operation="{ row }">
+                        <TDropdown trigger="click" min-column-width="120" @click="(data) => $Method.onAction(data.value, row)">
+                            <TButton variant="text" size="small">操作</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="[
+                        { key: 'id', label: 'ID' },
+                        { key: 'name', label: '角色名称' },
+                        { key: 'code', label: '角色代码' },
+                        { key: 'description', label: '描述' },
+                        { key: 'sort', label: '排序' },
+                        { key: 'state', label: '状态' }
+                    ]"
+                />
+            </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>
 
         <!-- 编辑对话框组件 -->
@@ -75,23 +91,28 @@ 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, withTableProps } from '@/utils';
 
 // 响应式数据
 const $Data = $ref({
     tableData: [],
-    columns: [
+    loading: false,
+    activeRowKeys: [],
+    currentRow: null,
+    columns: withDefaultColumns([
         { colKey: 'index', title: '序号', width: 100, align: 'center' },
         { colKey: 'name', title: '角色名称', width: 150 },
         { colKey: 'code', title: '角色代码', width: 150 },
-        { colKey: 'description', title: '描述', minWidth: 150, ellipsis: true },
+        { colKey: 'description', title: '描述', minWidth: 150 },
         { colKey: 'sort', title: '排序', width: 80, align: 'center' },
-        { colKey: 'state', title: '状态', width: 100, align: 'center' },
-        { colKey: 'operation', title: '操作', width: 120, align: 'center', fixed: 'right' }
-    ],
+        { colKey: 'state', title: '状态', width: 100, align: 'center', ellipsis: false },
+        { colKey: 'operation', title: '操作', width: 120, align: 'center', fixed: 'right', ellipsis: false }
+    ]),
     pagerConfig: {
         currentPage: 1,
-        pageSize: 30,
+        limit: 30,
         total: 0,
         align: 'right',
         layout: 'total, prev, pager, next, jumper'
@@ -110,6 +131,7 @@ const $Method = {
     },
     // 加载角色列表
     async apiRoleList() {
+        $Data.loading = true;
         try {
             const res = await $Http('/addon/admin/role/list', {
                 page: $Data.pagerConfig.currentPage,
@@ -117,12 +139,20 @@ const $Method = {
             });
             $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.info({
-                message: '加载数据失败',
-                status: 'error'
-            });
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
         }
     },
 
@@ -130,20 +160,20 @@ const $Method = {
     async apiRoleDel(row) {
         DialogPlugin.confirm({
             header: '确认删除',
-            body: `确定要删除角色"${row.name}" 吗？`,
+            body: `确定要删除角色“${row.name}” 吗？`,
             status: 'warning'
         }).then(async () => {
             try {
                 const res = await $Http('/addon/admin/role/del', { id: row.id });
                 if (res.code === 0) {
-                    MessagePlugin.info({ message: '删除成功', status: 'success' });
+                    MessagePlugin.success('删除成功');
                     $Method.apiRoleList();
                 } else {
-                    MessagePlugin.info({ message: res.msg || '删除失败', status: 'error' });
+                    MessagePlugin.error(res.msg || '删除失败');
                 }
             } catch (error) {
                 console.error('删除失败:', error);
-                MessagePlugin.info({ message: '删除失败', status: 'error' });
+                MessagePlugin.error('删除失败');
             }
         });
     },
@@ -159,6 +189,28 @@ const $Method = {
         $Method.apiRoleList();
     },
 
+    // 每页条数改变
+    handleSizeChange({ pageSize }) {
+        $Data.pagerConfig.limit = pageSize;
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiRoleList();
+    },
+
+    // 高亮行变化（点击行选中）
+    onActiveChange(value, { activeRowData }) {
+        $Data.activeRowKeys = value;
+        // 更新当前高亮的行数据
+        if (activeRowData && activeRowData.length > 0) {
+            $Data.currentRow = activeRowData[0];
+        } else if ($Data.tableData.length > 0) {
+            // 如果取消高亮，默认显示第一行
+            $Data.currentRow = $Data.tableData[0];
+            $Data.activeRowKeys = [$Data.tableData[0].id];
+        } else {
+            $Data.currentRow = null;
+        }
+    },
+
     // 操作菜单点击
     onAction(command, rowData) {
         $Data.actionType = command;

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('操作失败');
-        }
-    }
-};

package/views/menu/components/edit.vue

@@ -1,145 +0,0 @@
-<template>
-    <TDialog v-model:visible="$Data.visible" :title="$Prop.actionType === 'add' ? '添加菜单' : '编辑菜单'" width="600px" :append-to-body="true" :show-footer="true" top="10vh">
-        <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
-            <TFormItem label="菜单名称" prop="name">
-                <TInput v-model="$Data.formData.name" placeholder="请输入菜单名称" />
-            </TFormItem>
-            <TFormItem label="菜单路径" prop="path">
-                <TInput v-model="$Data.formData.path" placeholder="请输入菜单路径，如：/user" />
-            </TFormItem>
-            <TFormItem label="图标" prop="icon">
-                <TInput v-model="$Data.formData.icon" placeholder="请输入图标名称，如：User" />
-            </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>
-                </TRadioGroup>
-            </TFormItem>
-        </TForm>
-        <template #footer>
-            <TButton @click="$Method.onClose">取消</TButton>
-            <TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
-        </template>
-    </TDialog>
-</template>
-
-<script setup>
-import { watch } from 'vue';
-import { Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, InputNumber as TInputNumber, RadioGroup as TRadioGroup, Radio as TRadio, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
-import { $Http } from '@/plugins/http';
-
-const $Prop = defineProps({
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    actionType: {
-        type: String,
-        default: 'add'
-    },
-    rowData: {
-        type: Object,
-        default: {}
-    }
-});
-
-const $Emit = defineEmits(['update:modelValue', 'success']);
-
-// 表单引用
-const $From = $shallowRef({
-    form: null
-});
-
-const $Data = $ref({
-    visible: false,
-    formData: {
-        id: 0,
-        name: '',
-        path: '',
-        icon: '',
-        sort: 0,
-        pid: 0,
-        state: 1
-    }
-});
-
-const $Data2 = $shallowRef({
-    formRules: {
-        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
-        path: [{ required: true, message: '请输入菜单路径', trigger: 'blur' }]
-    }
-});
-
-// 方法集合
-const $Method = {
-    async initData() {
-        $Method.onShow();
-    },
-
-    onShow() {
-        $Data.visible = true;
-        if ($Prop.actionType === 'upd' && $Prop.rowData) {
-            $Data.formData.id = $Prop.rowData.id || 0;
-            $Data.formData.name = $Prop.rowData.name || '';
-            $Data.formData.path = $Prop.rowData.path ?? '';
-            $Data.formData.icon = $Prop.rowData.icon ?? '';
-            $Data.formData.sort = $Prop.rowData.sort ?? 0;
-            $Data.formData.state = $Prop.rowData.state ?? 1;
-        } else {
-            // 重置表单
-            $Data.formData.id = 0;
-            $Data.formData.name = '';
-            $Data.formData.path = '';
-            $Data.formData.icon = '';
-            $Data.formData.sort = 0;
-            $Data.formData.state = 1;
-        }
-    },
-
-    onClose() {
-        $Data.visible = false;
-        setTimeout(() => {
-            $Emit('update:modelValue', false);
-        }, 300);
-    },
-
-    async onSubmit() {
-        try {
-            const valid = await $From.form.validate();
-            if (!valid) return;
-
-            const res = await $Http($Prop.actionType === 'add' ? '/addon/admin/menuIns' : '/addon/admin/menuUpd', $Data.formData);
-
-            MessagePlugin.info({
-                message: $Prop.actionType === 'add' ? '添加成功' : '编辑成功',
-                status: 'success'
-            });
-            $Method.onClose();
-            $Emit('success');
-        } catch (error) {
-            console.error('提交失败:', error);
-        }
-    }
-};
-
-// 监听 modelValue 变化
-watch(
-    () => $Prop.modelValue,
-    (val) => {
-        if (val && !$Data.visible) {
-            $Method.initData();
-        } else if (!val && $Data.visible) {
-            $Data.visible = false;
-        }
-    },
-    { immediate: true }
-);
-</script>
-
-<style scoped lang="scss">
-// 可根据需要添加样式
-</style>