@befly-addon/admin 1.0.36 → 1.0.38

package/views/admin/components/edit.vue

@@ -1,41 +1,59 @@
 <template>
-    <TDialog v-model:visible="$Data.visible" :title="$Prop.actionType === 'upd' ? '编辑管理员' : '添加管理员'" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="10vh" @close="$Method.onClose">
-        <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
-            <TFormItem label="用户名" prop="username">
-                <TInput v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
-            </TFormItem>
-            <TFormItem label="邮箱" prop="email">
-                <TInput v-model="$Data.formData.email" placeholder="请输入邮箱" />
-            </TFormItem>
-            <TFormItem v-if="$Prop.actionType === 'add'" label="密码" prop="password">
-                <TInput v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
-            </TFormItem>
-            <TFormItem label="姓名" prop="name">
-                <TInput v-model="$Data.formData.name" placeholder="请输入姓名" />
-            </TFormItem>
-            <TFormItem label="昵称" prop="nickname">
-                <TInput v-model="$Data.formData.nickname" placeholder="请输入昵称" />
-            </TFormItem>
-            <TFormItem label="手机号" prop="phone">
-                <TInput v-model="$Data.formData.phone" placeholder="请输入手机号" />
-            </TFormItem>
-            <TFormItem v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
-                <TRadioGroup v-model="$Data.formData.state">
-                    <TRadio :label="1">正常</TRadio>
-                    <TRadio :label="2">禁用</TRadio>
-                </TRadioGroup>
-            </TFormItem>
-        </TForm>
+    <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">
+        <div class="dialog-wrapper">
+            <TForm :model="$Data.formData" label-width="80px" label-position="left" label-align="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
+                <TFormItem label="角色" prop="roleId">
+                    <TSelect v-model="$Data.formData.roleId" :options="$Data.roleOptions" placeholder="请选择角色" />
+                </TFormItem>
+                <TFormItem label="用户名" prop="username">
+                    <TInput v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
+                </TFormItem>
+                <TFormItem label="邮箱" prop="email">
+                    <TInput v-model="$Data.formData.email" placeholder="请输入邮箱" />
+                </TFormItem>
+                <TFormItem v-if="$Prop.actionType === 'add'" label="密码" prop="password">
+                    <TInput v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
+                </TFormItem>
+                <TFormItem label="昵称" prop="nickname">
+                    <TInput v-model="$Data.formData.nickname" placeholder="请输入昵称" />
+                </TFormItem>
+                <TFormItem label="手机号" prop="phone">
+                    <TInput v-model="$Data.formData.phone" placeholder="请输入手机号" />
+                </TFormItem>
+                <TFormItem v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
+                    <TRadioGroup v-model="$Data.formData.state">
+                        <TRadio :label="1">正常</TRadio>
+                        <TRadio :label="2">禁用</TRadio>
+                    </TRadioGroup>
+                </TFormItem>
+            </TForm>
+        </div>
         <template #footer>
-            <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" @click="$Method.onSubmit">确定</TButton>
+                </t-space>
+            </div>
         </template>
     </TDialog>
 </template>
 
 <script setup>
-import { Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, RadioGroup as TRadioGroup, Radio as TRadio, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
+import {
+    //
+    Dialog as TDialog,
+    Form as TForm,
+    FormItem as TFormItem,
+    Input as TInput,
+    Select as TSelect,
+    RadioGroup as TRadioGroup,
+    Radio as TRadio,
+    Button as TButton,
+    MessagePlugin
+} from 'tdesign-vue-next';
 import { $Http } from '@/plugins/http';
+import { fieldClear } from 'befly-util/fieldClear';
 
 const $Prop = defineProps({
     modelValue: {
@@ -61,6 +79,7 @@ const $From = $shallowRef({
 
 const $Data = $ref({
     visible: false,
+    roleOptions: [],
     formData: {
         id: 0,
         username: '',
@@ -69,6 +88,7 @@ const $Data = $ref({
         name: '',
         nickname: '',
         phone: '',
+        roleId: 0,
         state: 1
     }
 });
@@ -84,6 +104,7 @@ const $Data2 = $shallowRef({
             { required: true, message: '请输入密码', trigger: 'blur' },
             { min: 6, message: '密码至少6位', trigger: 'blur' }
         ],
+        roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
         name: [{ min: 2, max: 50, message: '姓名长度在 2 到 50 个字符', trigger: 'blur' }],
         nickname: [{ min: 2, max: 50, message: '昵称长度在 2 到 50 个字符', trigger: 'blur' }],
         phone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }]
@@ -94,15 +115,10 @@ const $Data2 = $shallowRef({
 const $Method = {
     async initData() {
         $Method.onShow();
+        await $Method.loadRoles();
         if ($Prop.actionType === 'upd' && $Prop.rowData.id) {
-            // 编辑模式：复制数据
-            $Data.formData.id = $Prop.rowData.id || 0;
-            $Data.formData.username = $Prop.rowData.username || '';
-            $Data.formData.email = $Prop.rowData.email || '';
-            $Data.formData.name = $Prop.rowData.name || '';
-            $Data.formData.nickname = $Prop.rowData.nickname || '';
-            $Data.formData.phone = $Prop.rowData.phone || '';
-            $Data.formData.state = $Prop.rowData.state ?? 1;
+            // 编辑模式：直接赋值
+            $Data.formData = { ...$Prop.rowData };
         }
     },
 
@@ -119,25 +135,34 @@ const $Method = {
         }, 300);
     },
 
+    async loadRoles() {
+        try {
+            const result = await $Http('/addon/admin/role/all');
+            $Data.roleOptions = result
+                .filter((role) => role.state === 1)
+                .map((role) => ({
+                    label: role.name,
+                    value: role.id
+                }));
+        } catch (error) {
+            MessagePlugin.error(error.msg || '加载角色列表失败');
+        }
+    },
+
     async onSubmit() {
         try {
             const valid = await $From.form.validate();
             if (!valid) return;
 
-            const res = await $Http($Prop.actionType === 'upd' ? '/addon/admin/admin/upd' : '/addon/admin/admin/ins', $Data.formData);
+            const submitData = $Prop.actionType === 'add' ? fieldClear($Data.formData, { omitKeys: ['id', 'state'] }) : fieldClear($Data.formData, { omitKeys: ['password'] });
+
+            await $Http($Prop.actionType === 'upd' ? '/addon/admin/admin/upd' : '/addon/admin/admin/ins', submitData);
 
-            MessagePlugin.info({
-                message: $Prop.actionType === 'upd' ? '编辑成功' : '添加成功',
-                status: 'success'
-            });
+            MessagePlugin.success($Prop.actionType === 'upd' ? '编辑成功' : '添加成功');
             $Emit('success');
             $Method.onClose();
         } catch (error) {
-            console.error('提交失败:', error);
-            MessagePlugin.info({
-                message: '提交失败',
-                status: 'error'
-            });
+            MessagePlugin.error(error.msg || '提交失败');
         }
     }
 };

package/views/admin/index.vue

@@ -6,53 +6,79 @@
                     <template #icon>
                         <ILucidePlus />
                     </template>
-                    添加管理员
                 </TButton>
             </div>
             <div class="right">
-                <TButton @click="$Method.handleRefresh">
+                <TButton shape="circle" @click="$Method.handleRefresh">
                     <template #icon>
                         <ILucideRotateCw />
                     </template>
                 </TButton>
             </div>
-            <div class="right">
-                <TButton @click="$Method.handleRefresh">
-                    <template #icon>
-                        <ILucideRotateCw />
+        </div>
+
+        <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">
+                    <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>
-                    刷新
-                </TButton>
+                    <template #operation="{ row }">
+                        <TDropdown trigger="click" placement="bottom-right" @click="(data) => $Method.onAction(data.value, row)">
+                            <TButton theme="primary" size="small">操作</TButton>
+                            <TDropdownMenu slot="dropdown">
+                                <TDropdownItem value="upd">
+                                    <ILucidePencil />
+                                    编辑
+                                </TDropdownItem>
+                                <TDropdownItem value="del" :divider="true">
+                                    <ILucideTrash2 />
+                                    删除
+                                </TDropdownItem>
+                            </TDropdownMenu>
+                        </TDropdown>
+                    </template>
+                </TTable>
             </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">
-                <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="role">
-                                <ILucideUser />
-                                分配角色
-                            </TDropdownItem>
-                            <TDropdownItem value="upd">
-                                <ILucidePencil />
-                                编辑
-                            </TDropdownItem>
-                            <TDropdownItem value="del" :divider="true">
-                                <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
-                                删除
-                            </TDropdownItem>
-                        </TDropdownMenu>
-                    </TDropdown>
-                </template>
-            </TTable>
+            <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>
+            </div>
         </div>
 
         <div class="main-page">
@@ -61,9 +87,6 @@
 
         <!-- 编辑对话框组件 -->
         <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.apiAdminList" />
-
-        <!-- 角色分配对话框组件 -->
-        <RoleDialog v-if="$Data.roleVisible" v-model="$Data.roleVisible" :row-data="$Data.rowData" @success="$Method.apiAdminList" />
     </div>
 </template>
 
@@ -71,24 +94,29 @@
 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 ILucideUser from '~icons/lucide/user';
 import ILucidePencil from '~icons/lucide/pencil';
 import ILucideTrash2 from '~icons/lucide/trash-2';
 import EditDialog from './components/edit.vue';
-import RoleDialog from './components/role.vue';
 import { $Http } from '@/plugins/http';
 
 // 响应式数据
 const $Data = $ref({
     tableData: [],
     columns: [
-        { colKey: 'index', title: '序号', width: 60, align: 'center' },
-        { colKey: 'username', title: '用户名' },
+        {
+            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: 120, align: 'right' }
+        { colKey: 'operation', title: '操作', width: 80, align: 'center', fixed: 'right' }
     ],
     pagerConfig: {
         currentPage: 1,
@@ -98,9 +126,11 @@ const $Data = $ref({
         layout: 'total, prev, pager, next, jumper'
     },
     editVisible: false,
-    roleVisible: false,
     actionType: 'add',
-    rowData: {}
+    rowData: {},
+    currentRow: null,
+    selectedRowKeys: [],
+    activeRowKeys: []
 });
 
 // 方法
@@ -118,6 +148,17 @@ 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.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({
@@ -160,14 +201,53 @@ const $Method = {
         $Method.apiAdminList();
     },
 
+    // 每页条数改变
+    handleSizeChange({ pageSize }) {
+        $Data.pagerConfig.pageSize = 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 }) {
+        $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;
+        }
+    },
+
     // 操作菜单点击
     onAction(command, rowData) {
         $Data.actionType = command;
         $Data.rowData = rowData;
         if (command === 'add' || command === 'upd') {
             $Data.editVisible = true;
-        } else if (command === 'role') {
-            $Data.roleVisible = true;
         } else if (command === 'del') {
             $Method.apiAdminDel(rowData);
         }

package/views/dict/index.vue

@@ -6,7 +6,6 @@
                     <template #icon>
                         <ILucidePlus />
                     </template>
-                    添加字典
                 </TButton>
             </div>
             <div class="right">
@@ -14,7 +13,6 @@
                     <template #icon>
                         <ILucideRotateCw />
                     </template>
-                    刷新
                 </TButton>
             </div>
         </div>

package/views/index/components/addonList.vue

@@ -50,10 +50,10 @@ fetchData();
 
     .addon-item {
         position: relative;
-        background: $bg-color-container;
-        border: 1px solid $border-color;
-        border-left: 3px solid $primary-color;
-        border-radius: $border-radius-small;
+        background: var(--bg-color-container);
+        border: 1px solid var(--border-color);
+        border-left: 3px solid var(--primary-color);
+        border-radius: var(--border-radius-small);
         padding: 10px 12px;
         display: flex;
         align-items: center;
@@ -61,7 +61,7 @@ fetchData();
         transition: all 0.3s;
 
         &:hover {
-            border-left-color: $success-color;
+            border-left-color: var(--success-color);
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
             transform: translateY(-2px);
         }
@@ -73,20 +73,26 @@ fetchData();
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: $text-disabled;
+            background: var(--text-disabled);
             transition: all 0.3s;
 
-            &.active {
-                background: $success-color;
-                box-shadow: 0 0 0 2px rgba($success-color, 0.2);
-            }
+            &::after {
+                content: '';
+                position: absolute;
+                top: -2px;
+                right: -2px;
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: var(--success-color);
+                box-shadow: 0 0 0 2px rgba(var(--success-color-rgb), 0.2);
         }
 
         .addon-icon {
             width: 32px;
             height: 32px;
-            background: linear-gradient(135deg, $primary-color, #764ba2);
-            border-radius: $border-radius-small;
+            background: linear-gradient(135deg, var(--primary-color), #764ba2);
+            border-radius: var(--border-radius-small);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -108,13 +114,13 @@ fetchData();
                 .addon-name {
                     font-size: 14px;
                     font-weight: 600;
-                    color: $text-primary;
+                    color: var(--text-primary);
                 }
             }
 
             .addon-desc {
                 font-size: 14px;
-                color: $text-secondary;
+                color: var(--text-secondary);
                 line-height: 1.3;
                 overflow: hidden;
                 text-overflow: ellipsis;

package/views/index/components/environmentInfo.vue

@@ -73,25 +73,25 @@ fetchData();
         justify-content: space-between;
         align-items: center;
         padding: 10px 12px;
-        background: $bg-color-container;
+        background: var(--bg-color-container);
         border-radius: 6px;
-        border: 1px solid $border-color;
+        border: 1px solid var(--border-color);
         transition: all 0.2s ease;
 
         &:hover {
-            background: rgba($primary-color, 0.03);
-            border-color: rgba($primary-color, 0.2);
+            background: rgba(var(--primary-color-rgb), 0.03);
+            border-color: rgba(var(--primary-color-rgb), 0.2);
         }
 
         .env-label {
             font-size: 14px;
-            color: $text-secondary;
+            color: var(--text-secondary);
             font-weight: 500;
         }
 
         .env-value {
             font-size: 14px;
-            color: $text-primary;
+            color: var(--text-primary);
             font-weight: 600;
             text-align: right;
         }

package/views/index/components/operationLogs.vue

@@ -65,11 +65,11 @@ const formatTime = (timestamp) => {
 
     .operation-header {
         padding: 10px 12px;
-        background: linear-gradient(135deg, rgba($primary-color, 0.05) 0%, rgba($primary-color, 0.02) 100%);
+        background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
         border-radius: 6px;
         font-size: 14px;
         font-weight: 600;
-        color: $text-secondary;
+        color: var(--text-secondary);
         margin-bottom: 6px;
     }
 
@@ -80,20 +80,20 @@ const formatTime = (timestamp) => {
     }
 
     .operation-row {
-        padding: 10px 12px;
-        background: $bg-color-container;
+        padding: 6px 12px;
+        background: var(--bg-color-container);
         border-radius: 6px;
-        border: 1px solid $border-color;
+        border: 1px solid var(--border-color);
         font-size: 14px;
         transition: all 0.2s ease;
 
         &:hover {
-            background: rgba($primary-color, 0.02);
-            border-color: rgba($primary-color, 0.2);
+            background: rgba(var(--primary-color-rgb), 0.02);
+            border-color: rgba(var(--primary-color-rgb), 0.2);
         }
 
         .col-time {
-            color: $text-secondary;
+            color: var(--text-secondary);
             font-size: 14px;
         }
 
@@ -101,7 +101,7 @@ const formatTime = (timestamp) => {
         .col-action,
         .col-module,
         .col-ip {
-            color: $text-primary;
+            color: var(--text-primary);
         }
 
         .col-action {