@befly-addon/admin 1.0.33 → 1.0.35

package/views/role/components/api.vue

@@ -1,9 +1,13 @@
-<template>
-    <t-dialog v-model:visible="$Data.visible" title="接口权限" width="900px" :append-to-body="true" :show-footer="true" top="5vh" @close="$Method.onClose">
+<template>
+    <TDialog v-model:visible="$Data.visible" title="接口权限" width="900px" :append-to-body="true" :show-footer="true" top="5vh" @close="$Method.onClose">
         <div class="comp-role-api">
             <!-- 搜索框 -->
             <div class="search-box">
-                <TinySearch v-model="$Data.searchText" placeholder="搜索接口名称或路径" clearable @update:modelValue="$Method.onSearch" />
+                <TInput v-model="$Data.searchText" placeholder="搜索接口名称或路径" clearable @change="$Method.onSearch">
+                    <template #prefix-icon>
+                        <ILucideSearch />
+                    </template>
+                </TInput>
             </div>
 
             <!-- 接口分组列表 -->
@@ -11,9 +15,9 @@
                 <div v-for="group in $Data.filteredApiData" :key="group.name" class="api-group">
                     <div class="group-header">{{ group.title }}</div>
                     <div class="api-checkbox-list">
-                        <TinyCheckboxGroup v-model="$Data.checkedApiIds">
-                            <TinyCheckbox v-for="api in group.apis" :key="api.id" :label="api.id"> {{ api.label }} </TinyCheckbox>
-                        </TinyCheckboxGroup>
+                        <TCheckboxGroup v-model="$Data.checkedApiIds">
+                            <TCheckbox v-for="api in group.apis" :key="api.id" :value="api.id"> {{ api.label }} </TCheckbox>
+                        </TCheckboxGroup>
                     </div>
                 </div>
             </div>
@@ -21,18 +25,20 @@
 
         <template #footer>
             <div class="footer-left">
-                <t-button size="small" @click="$Method.onCheckAll">全选</t-button>
-                <t-button size="small" @click="$Method.onUncheckAll">取消全选</t-button>
+                <TButton size="small" @click="$Method.onCheckAll">全选</TButton>
+                <TButton size="small" @click="$Method.onUncheckAll">取消全选</TButton>
             </div>
             <div class="footer-right">
-                <t-button @click="$Method.onClose">取消</t-button>
-                <t-button type="primary" @click="$Method.onSubmit">保存</t-button>
+                <TButton @click="$Method.onClose">取消</TButton>
+                <TButton theme="primary" @click="$Method.onSubmit">保存</TButton>
             </div>
         </template>
-    </t-dialog>
+    </TDialog>
 </template>
 
 <script setup>
+import { Dialog as TDialog, Input as TInput, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
+import ILucideSearch from '~icons/lucide/search';
 import { $Http } from '@/plugins/http';
 
 const $Prop = defineProps({
@@ -241,18 +247,18 @@ $Method.initData();
                 padding: 16px;
                 background-color: $bg-color-container;
 
-                :deep(.tiny-checkbox-group) {
+                :deep(.t-checkbox-group) {
                     display: flex;
                     flex-wrap: wrap;
                     gap: 12px;
                     width: 100%;
                 }
 
-                :deep(.tiny-checkbox) {
+                :deep(.t-checkbox) {
                     flex: 0 0 calc(33.333% - 8px);
                     margin: 0;
 
-                    .tiny-checkbox__label {
+                    .t-checkbox__label {
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
@@ -264,7 +270,7 @@ $Method.initData();
 }
 
 // 底部操作栏布局
-:deep(.tiny-dialog-box__footer) {
+:deep(.t-dialog__footer) {
     display: flex;
     justify-content: space-between;
     align-items: center;

package/views/role/components/edit.vue

@@ -1,35 +1,36 @@
-<template>
-    <t-dialog 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">
+<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">
         <div class="comp-role-edit">
-            <t-form :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
-                <t-form-item label="角色名称" prop="name">
-                    <t-input v-model="$Data.formData.name" placeholder="请输入角色名称" />
-                </t-form-item>
-                <t-form-item label="角色代码" prop="code">
-                    <t-input v-model="$Data.formData.code" placeholder="请输入角色代码，如：admin" />
-                </t-form-item>
-                <t-form-item label="角色描述" prop="description">
-                    <t-input v-model="$Data.formData.description" type="textarea" placeholder="请输入角色描述" :rows="3" />
-                </t-form-item>
-                <t-form-item label="排序" prop="sort">
-                    <t-input-number v-model="$Data.formData.sort" :min="0" :max="9999" />
-                </t-form-item>
-                <t-form-item label="状态" prop="state">
-                    <t-radio-group v-model="$Data.formData.state">
-                        <t-radio :label="1">正常</t-radio>
-                        <t-radio :label="2">禁用</t-radio>
-                    </t-radio-group>
-                </t-form-item>
-            </t-form>
+            <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="code">
+                    <TInput v-model="$Data.formData.code" placeholder="请输入角色代码，如：admin" />
+                </TFormItem>
+                <TFormItem label="角色描述" prop="description">
+                    <TInput v-model="$Data.formData.description" type="textarea" placeholder="请输入角色描述" :rows="3" />
+                </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>
         </div>
         <template #footer>
-            <t-button @click="$Method.onClose">取消</t-button>
-            <t-button type="primary" @click="$Method.onSubmit">确定</t-button>
+            <TButton @click="$Method.onClose">取消</TButton>
+            <TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
         </template>
-    </t-dialog>
+    </TDialog>
 </template>
 
 <script setup>
+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({

package/views/role/components/menu.vue

@@ -1,17 +1,18 @@
-<template>
-    <t-dialog v-model:visible="$Data.visible" title="菜单权限" width="600px" :append-to-body="true" :show-footer="true" top="10vh" @close="$Method.onClose">
+<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">
-            <t-tree :data="$Data.menuTreeData" node-key="id" show-checkbox default-expand-all :props="{ label: 'name' }" :ref="(el) => ($From.tree = el)" />
+            <TTree :data="$Data.menuTreeData" node-key="id" show-checkbox default-expand-all :props="{ label: 'name' }" :ref="(el) => ($From.tree = el)" />
         </div>
         <template #footer>
-            <t-button @click="$Method.onClose">取消</t-button>
-            <t-button type="primary" @click="$Method.onSubmit">保存</t-button>
+            <TButton @click="$Method.onClose">取消</TButton>
+            <TButton theme="primary" @click="$Method.onSubmit">保存</TButton>
         </template>
-    </t-dialog>
+    </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';
 

package/views/role/index.vue

@@ -2,57 +2,57 @@
     <div class="page-role page-table">
         <div class="main-tool">
             <div class="left">
-                <t-button type="primary" @click="$Method.onAction('add', {})">
+                <TButton theme="primary" @click="$Method.onAction('add', {})">
                     <template #icon>
-                        <IconLucidePlus />
+                        <ILucidePlus />
                     </template>
                     添加角色
-                </t-button>
+                </TButton>
             </div>
             <div class="right">
-                <t-button @click="$Method.handleRefresh">
+                <TButton @click="$Method.handleRefresh">
                     <template #icon>
-                        <IconLucideRotateCw />
+                        <ILucideRotateCw />
                     </template>
                     刷新
-                </t-button>
+                </TButton>
             </div>
         </div>
         <div class="main-table">
-            <t-table :data="$Data.tableData" :columns="$Data.columns" header-cell-class-name="custom-table-cell-class" size="small" height="100%" row-key="id" bordered>
+            <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 }">
-                    <t-tag v-if="row.state === 1" theme="success">正常</t-tag>
-                    <t-tag v-else-if="row.state === 2" theme="warning">禁用</t-tag>
-                    <t-tag v-else theme="danger">已删除</t-tag>
+                    <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 }">
-                    <t-dropdown trigger="click" min-column-width="120" @click="(data) => $Method.onAction(data.value, row)">
-                        <t-button variant="text" size="small">操作</t-button>
-                        <t-dropdown-menu slot="dropdown">
-                            <t-dropdown-item value="upd">
-                                <IconLucidePencil />
+                    <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 />
                                 编辑
-                            </t-dropdown-item>
-                            <t-dropdown-item value="menu">
-                                <IconLucideSettings />
+                            </TDropdownItem>
+                            <TDropdownItem value="menu">
+                                <ILucideSettings />
                                 菜单权限
-                            </t-dropdown-item>
-                            <t-dropdown-item value="api">
-                                <IconLucideCode />
+                            </TDropdownItem>
+                            <TDropdownItem value="api">
+                                <ILucideCode />
                                 接口权限
-                            </t-dropdown-item>
-                            <t-dropdown-item value="del" :divider="true">
-                                <IconLucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                            </TDropdownItem>
+                            <TDropdownItem value="del" :divider="true">
+                                <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
                                 删除
-                            </t-dropdown-item>
-                        </t-dropdown-menu>
-                    </t-dropdown>
+                            </TDropdownItem>
+                        </TDropdownMenu>
+                    </TDropdown>
                 </template>
-            </t-table>
+            </TTable>
         </div>
 
         <div class="main-page">
-            <t-pagination :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.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
         </div>
 
         <!-- 编辑对话框组件 -->
@@ -67,6 +67,13 @@
 </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';

package/views/news/detail/index.vue

@@ -1,26 +0,0 @@
-<template>
-    <div class="news-page">
-        <h1>新闻页面 index</h1>
-        <p>这个页面使用布局 1.vue</p>
-        <div class="news-content">
-            <p>这里是新闻内容...</p>
-        </div>
-    </div>
-</template>
-
-<script setup>
-// 新闻页面逻辑
-</script>
-
-<style scoped>
-.news-page {
-    padding: 20px;
-}
-
-.news-content {
-    margin-top: 20px;
-    padding: 20px;
-    background: #f5f5f5;
-    border-radius: 8px;
-}
-</style>

package/views/news/index.vue

@@ -1,26 +0,0 @@
-<template>
-    <div class="news-page">
-        <h1>新闻页面</h1>
-        <p>这个页面使用布局 1.vue</p>
-        <div class="news-content">
-            <p>这里是新闻内容...</p>
-        </div>
-    </div>
-</template>
-
-<script setup>
-// 新闻页面逻辑
-</script>
-
-<style scoped>
-.news-page {
-    padding: 20px;
-}
-
-.news-content {
-    margin-top: 20px;
-    padding: 20px;
-    background: #f5f5f5;
-    border-radius: 8px;
-}
-</style>

package/views/user/index.vue

@@ -1,322 +0,0 @@
-<template>
-    <div class="user-manage">
-        <!-- 上：过滤和操作栏 -->
-        <div class="toolbar">
-            <div class="toolbar-left">
-                <t-button theme="primary" @click="$Method.handleAdd">
-                    <template #icon>
-                        <IconLucidePlus />
-                    </template>
-                    添加管理员
-                </t-button>
-            </div>
-            <div class="toolbar-right">
-                <t-space>
-                    <t-input v-model="$Data.searchKeyword" placeholder="搜索用户名/邮箱" clearable style="width: 200px" @enter="$Method.handleSearch" />
-                    <t-select v-model="$Data.searchState" placeholder="状态" clearable style="width: 120px" :options="$Data.stateOptions" @change="$Method.handleSearch" />
-                    <t-button theme="default" @click="$Method.handleSearch">
-                        <template #icon>
-                            <IconLucideSearch />
-                        </template>
-                        搜索
-                    </t-button>
-                    <t-button theme="default" @click="$Method.handleReset">
-                        <template #icon>
-                            <IconLucideRotateCw />
-                        </template>
-                        重置
-                    </t-button>
-                </t-space>
-            </div>
-        </div>
-
-        <!-- 中：数据表格 -->
-        <div class="table-wrapper">
-            <t-table :data="$Data.userList" :columns="$Data.columns" row-key="id" :loading="$Data.loading" bordered stripe hover max-height="100%">
-                <template #state="{ row }">
-                    <t-tag v-if="row.state === 1" type="success">正常</t-tag>
-                    <t-tag v-else-if="row.state === 2" type="warning">禁用</t-tag>
-                    <t-tag v-else type="danger">已删除</t-tag>
-                </template>
-
-                <template #lastLoginTime="{ row }">
-                    <span v-if="row.lastLoginTime">{{ new Date(Number(row.lastLoginTime)).toLocaleString() }}</span>
-                    <span v-else>-</span>
-                </template>
-
-                <template #operation="{ row }">
-                    <t-space>
-                        <t-link theme="primary" @click="$Method.handleRole(row)">分配角色</t-link>
-                        <t-link theme="warning" @click="$Method.handleEdit(row)">编辑</t-link>
-                        <t-link theme="danger" @click="$Method.handleDelete(row)">删除</t-link>
-                    </t-space>
-                </template>
-            </t-table>
-        </div>
-
-        <!-- 下：分页栏 -->
-        <div class="pagination-wrapper">
-            <t-pagination v-model="$Data.pagination.current" v-model:page-size="$Data.pagination.pageSize" :total="$Data.pagination.total" :page-size-options="[10, 20, 50, 100]" show-jumper show-page-size @change="$Method.onPageChange" />
-        </div>
-
-        <!-- 角色分配对话框 -->
-        <t-dialog v-model:visible="$Data.roleVisible" header="分配角色" width="600px" :on-confirm="$Method.handleRoleSubmit">
-            <div class="role-dialog">
-                <div class="user-info">
-                    <t-tag type="primary">{{ $Data.currentUser.username }}</t-tag>
-                    <span class="user-email">{{ $Data.currentUser.email }}</span>
-                </div>
-                <t-divider />
-                <t-select v-model="$Data.checkedRoleCode" :options="$Data.roleOptions" placeholder="请选择角色" />
-            </div>
-        </t-dialog>
-    </div>
-</template>
-
-<script setup>
-import { $Http } from '@/plugins/http';
-
-// 响应式数据
-const $Data = $ref({
-    loading: false,
-    userList: [],
-    pagination: {
-        current: 1,
-        pageSize: 10,
-        total: 0
-    },
-    searchKeyword: '',
-    searchState: undefined,
-    stateOptions: [
-        { label: '正常', value: 1 },
-        { label: '禁用', value: 2 },
-        { label: '已删除', value: 0 }
-    ],
-    roleVisible: false,
-    currentUser: {},
-    columns: [
-        { colKey: 'username', title: '用户名', width: 150 },
-        { colKey: 'email', title: '邮箱', width: 200 },
-        { colKey: 'nickname', title: '昵称', width: 150 },
-        { colKey: 'state', title: '状态', width: 100 },
-        { colKey: 'roleCode', title: '角色', width: 120 },
-        { colKey: 'lastLoginTime', title: '最后登录', width: 180 },
-        { colKey: 'operation', title: '操作', width: 200, fixed: 'right' }
-    ],
-    roleOptions: [],
-    checkedRoleCode: ''
-});
-
-// 方法集合
-const $Method = {
-    // 加载用户列表
-    async loadUserList() {
-        $Data.loading = true;
-        try {
-            const res = await $Http('/addon/admin/list', {
-                page: $Data.pagination.current,
-                limit: $Data.pagination.pageSize
-            });
-            if (res.code === 0 && res.data) {
-                // getList 返回分页对象 { list, total, page, limit, pages }
-                $Data.userList = res.data.list || [];
-                $Data.pagination.total = res.data.total || 0;
-            }
-        } catch (error) {
-            MessagePlugin.error('加载用户列表失败');
-            console.error(error);
-        } finally {
-            $Data.loading = false;
-        }
-    },
-
-    // 分页变化
-    onPageChange(pageInfo) {
-        $Data.pagination.current = pageInfo.current;
-        $Data.pagination.pageSize = pageInfo.pageSize;
-        $Method.loadUserList();
-    },
-
-    // 搜索
-    handleSearch() {
-        $Data.pagination.current = 1;
-        $Method.loadUserList();
-    },
-
-    // 重置
-    handleReset() {
-        $Data.searchKeyword = '';
-        $Data.searchState = undefined;
-        $Data.pagination.current = 1;
-        $Method.loadUserList();
-    },
-
-    // 添加管理员
-    handleAdd() {
-        MessagePlugin.info('添加管理员功能待开发');
-    },
-
-    // 编辑管理员
-    handleEdit(row) {
-        MessagePlugin.info(`编辑管理员：${row.username}`);
-    },
-
-    // 删除管理员
-    handleDelete(row) {
-        DialogPlugin.confirm({
-            header: '确认删除',
-            body: `确定要删除管理员 "${row.username}" 吗？`,
-            onConfirm: async () => {
-                try {
-                    // TODO: 调用删除接口
-                    MessagePlugin.success('删除成功');
-                    await $Method.loadUserList();
-                } catch (error) {
-                    MessagePlugin.error('删除失败');
-                    console.error(error);
-                }
-            }
-        });
-    },
-
-    // 加载角色列表
-    async loadRoleList() {
-        try {
-            const res = await $Http('/addon/admin/role/list', {});
-            if (res.code === 0 && res.data) {
-                // getList 返回分页对象
-                const roleList = res.data.list || res.data || [];
-                $Data.roleOptions = roleList
-                    .filter((role) => role.state === 1)
-                    .map((role) => ({
-                        label: role.name,
-                        value: role.code
-                    }));
-            }
-        } catch (error) {
-            MessagePlugin.error('加载角色列表失败');
-            console.error(error);
-        }
-    },
-
-    // 打开角色分配对话框
-    async handleRole(row) {
-        $Data.currentUser = row;
-        $Data.roleVisible = true;
-
-        // 加载角色列表
-        await $Method.loadRoleList();
-
-        // 加载该用户已有的角色
-        try {
-            const res = await $Http('/addon/admin/roleDetail', { adminId: row.id });
-            if (res.code === 0 && res.data) {
-                $Data.checkedRoleCode = res.data.roleCode || '';
-            }
-        } catch (error) {
-            MessagePlugin.error('加载用户角色失败');
-            console.error(error);
-        }
-    },
-
-    // 提交角色分配
-    async handleRoleSubmit() {
-        if (!$Data.checkedRoleCode) {
-            MessagePlugin.warning('请选择角色');
-            return false;
-        }
-
-        try {
-            const res = await $Http('/addon/admin/roleSave', {
-                adminId: $Data.currentUser.id,
-                roleCode: $Data.checkedRoleCode
-            });
-
-            if (res.code === 0) {
-                MessagePlugin.success('角色分配成功');
-                $Data.roleVisible = false;
-                await $Method.loadUserList();
-                return true;
-            } else {
-                MessagePlugin.error(res.msg || '分配失败');
-                return false;
-            }
-        } catch (error) {
-            MessagePlugin.error('分配失败');
-            console.error(error);
-            return false;
-        }
-    }
-};
-
-// 初始化加载
-$Method.loadUserList();
-</script>
-
-<style scoped lang="scss">
-.user-manage {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding: 16px;
-    overflow: hidden; // 防止外层滚动
-}
-
-// 上：工具栏
-.toolbar {
-    flex-shrink: 0; // 不允许收缩
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-    background: $bg-color-container;
-    border-radius: $border-radius;
-    box-shadow: $shadow-card;
-
-    .toolbar-left {
-        display: flex;
-        gap: 12px;
-    }
-
-    .toolbar-right {
-        display: flex;
-        gap: 12px;
-    }
-}
-
-// 中：表格区域（撑满剩余空间并支持滚动）
-.table-wrapper {
-    flex: 1; // 占据剩余空间
-    overflow: hidden; // 隐藏超出部分
-    display: flex;
-    flex-direction: column;
-    background: $bg-color-container;
-    border-radius: $border-radius;
-    box-shadow: $shadow-card;
-}
-
-// 下：分页栏
-.pagination-wrapper {
-    flex-shrink: 0; // 不允许收缩
-    display: flex;
-    justify-content: flex-end;
-    padding: 16px;
-    background: $bg-color-container;
-    border-radius: $border-radius;
-    box-shadow: $shadow-card;
-}
-
-.role-dialog {
-    .user-info {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-bottom: 16px;
-
-        .user-email {
-            color: $text-secondary;
-        }
-    }
-}
-</style>