@befly-addon/admin 1.0.34 → 1.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/views/403/index.vue +4 -2
- package/views/admin/components/edit.vue +33 -32
- package/views/admin/components/role.vue +8 -7
- package/views/admin/index.vue +35 -29
- package/views/dict/components/edit.vue +31 -30
- package/views/dict/index.vue +28 -23
- package/views/index/components/environmentInfo.vue +2 -1
- package/views/index/components/performanceMetrics.vue +11 -6
- package/views/index/components/quickActions.vue +6 -3
- package/views/index/components/serviceStatus.vue +20 -11
- package/views/index/components/systemNotifications.vue +14 -7
- package/views/index/components/systemOverview.vue +8 -4
- package/views/index/components/systemResources.vue +12 -7
- package/views/index/components/userInfo.vue +13 -7
- package/views/login/components/emailLoginForm.vue +16 -13
- package/views/login/components/registerForm.vue +28 -23
- package/views/menu/components/edit.vue +25 -24
- package/views/menu/index.vue +30 -24
- package/views/role/components/api.vue +14 -12
- package/views/role/components/edit.vue +25 -24
- package/views/role/components/menu.vue +6 -5
- package/views/role/index.vue +36 -29
- package/views/news/detail/index.vue +0 -26
- package/views/news/index.vue +0 -26
- package/views/user/index.vue +0 -322
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<TDialog v-model:visible="$Data.visible" title="菜单权限" width="600px" :append-to-body="true" :show-footer="true" top="10vh" @close="$Method.onClose">
|
|
3
3
|
<div class="comp-role-menu">
|
|
4
|
-
<
|
|
4
|
+
<TTree :data="$Data.menuTreeData" node-key="id" show-checkbox default-expand-all :props="{ label: 'name' }" :ref="(el) => ($From.tree = el)" />
|
|
5
5
|
</div>
|
|
6
6
|
<template #footer>
|
|
7
|
-
<
|
|
8
|
-
<
|
|
7
|
+
<TButton @click="$Method.onClose">取消</TButton>
|
|
8
|
+
<TButton theme="primary" @click="$Method.onSubmit">保存</TButton>
|
|
9
9
|
</template>
|
|
10
|
-
</
|
|
10
|
+
</TDialog>
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<script setup>
|
|
14
14
|
import { nextTick } from 'vue';
|
|
15
|
+
import { Dialog as TDialog, Tree as TTree, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
|
|
15
16
|
import { arrayToTree } from '@/utils';
|
|
16
17
|
import { $Http } from '@/plugins/http';
|
|
17
18
|
|
package/views/role/index.vue
CHANGED
|
@@ -2,57 +2,57 @@
|
|
|
2
2
|
<div class="page-role page-table">
|
|
3
3
|
<div class="main-tool">
|
|
4
4
|
<div class="left">
|
|
5
|
-
<
|
|
5
|
+
<TButton theme="primary" @click="$Method.onAction('add', {})">
|
|
6
6
|
<template #icon>
|
|
7
|
-
<
|
|
7
|
+
<ILucidePlus />
|
|
8
8
|
</template>
|
|
9
9
|
添加角色
|
|
10
|
-
</
|
|
10
|
+
</TButton>
|
|
11
11
|
</div>
|
|
12
12
|
<div class="right">
|
|
13
|
-
<
|
|
13
|
+
<TButton @click="$Method.handleRefresh">
|
|
14
14
|
<template #icon>
|
|
15
|
-
<
|
|
15
|
+
<ILucideRotateCw />
|
|
16
16
|
</template>
|
|
17
17
|
刷新
|
|
18
|
-
</
|
|
18
|
+
</TButton>
|
|
19
19
|
</div>
|
|
20
20
|
</div>
|
|
21
21
|
<div class="main-table">
|
|
22
|
-
<
|
|
22
|
+
<TTable :data="$Data.tableData" :columns="$Data.columns" header-cell-class-name="custom-table-cell-class" size="small" height="100%" row-key="id" bordered>
|
|
23
23
|
<template #state="{ row }">
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
<
|
|
24
|
+
<TTag v-if="row.state === 1" theme="success">正常</TTag>
|
|
25
|
+
<TTag v-else-if="row.state === 2" theme="warning">禁用</TTag>
|
|
26
|
+
<TTag v-else theme="danger">已删除</TTag>
|
|
27
27
|
</template>
|
|
28
28
|
<template #operation="{ row }">
|
|
29
|
-
<
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
<
|
|
29
|
+
<TDropdown trigger="click" min-column-width="120" @click="(data) => $Method.onAction(data.value, row)">
|
|
30
|
+
<TButton variant="text" size="small">操作</TButton>
|
|
31
|
+
<TDropdownMenu slot="dropdown">
|
|
32
|
+
<TDropdownItem value="upd">
|
|
33
|
+
<ILucidePencil />
|
|
34
34
|
编辑
|
|
35
|
-
</
|
|
36
|
-
<
|
|
37
|
-
<
|
|
35
|
+
</TDropdownItem>
|
|
36
|
+
<TDropdownItem value="menu">
|
|
37
|
+
<ILucideSettings />
|
|
38
38
|
菜单权限
|
|
39
|
-
</
|
|
40
|
-
<
|
|
41
|
-
<
|
|
39
|
+
</TDropdownItem>
|
|
40
|
+
<TDropdownItem value="api">
|
|
41
|
+
<ILucideCode />
|
|
42
42
|
接口权限
|
|
43
|
-
</
|
|
44
|
-
<
|
|
45
|
-
<
|
|
43
|
+
</TDropdownItem>
|
|
44
|
+
<TDropdownItem value="del" :divider="true">
|
|
45
|
+
<ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
|
|
46
46
|
删除
|
|
47
|
-
</
|
|
48
|
-
</
|
|
49
|
-
</
|
|
47
|
+
</TDropdownItem>
|
|
48
|
+
</TDropdownMenu>
|
|
49
|
+
</TDropdown>
|
|
50
50
|
</template>
|
|
51
|
-
</
|
|
51
|
+
</TTable>
|
|
52
52
|
</div>
|
|
53
53
|
|
|
54
54
|
<div class="main-page">
|
|
55
|
-
<
|
|
55
|
+
<TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
|
|
56
56
|
</div>
|
|
57
57
|
|
|
58
58
|
<!-- 编辑对话框组件 -->
|
|
@@ -67,6 +67,13 @@
|
|
|
67
67
|
</template>
|
|
68
68
|
|
|
69
69
|
<script setup>
|
|
70
|
+
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';
|
|
71
|
+
import ILucidePlus from '~icons/lucide/plus';
|
|
72
|
+
import ILucideRotateCw from '~icons/lucide/rotate-cw';
|
|
73
|
+
import ILucidePencil from '~icons/lucide/pencil';
|
|
74
|
+
import ILucideSettings from '~icons/lucide/settings';
|
|
75
|
+
import ILucideCode from '~icons/lucide/code';
|
|
76
|
+
import ILucideTrash2 from '~icons/lucide/trash-2';
|
|
70
77
|
import EditDialog from './components/edit.vue';
|
|
71
78
|
import MenuDialog from './components/menu.vue';
|
|
72
79
|
import ApiDialog from './components/api.vue';
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="news-page">
|
|
3
|
-
<h1>新闻页面 index</h1>
|
|
4
|
-
<p>这个页面使用布局 1.vue</p>
|
|
5
|
-
<div class="news-content">
|
|
6
|
-
<p>这里是新闻内容...</p>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
</template>
|
|
10
|
-
|
|
11
|
-
<script setup>
|
|
12
|
-
// 新闻页面逻辑
|
|
13
|
-
</script>
|
|
14
|
-
|
|
15
|
-
<style scoped>
|
|
16
|
-
.news-page {
|
|
17
|
-
padding: 20px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.news-content {
|
|
21
|
-
margin-top: 20px;
|
|
22
|
-
padding: 20px;
|
|
23
|
-
background: #f5f5f5;
|
|
24
|
-
border-radius: 8px;
|
|
25
|
-
}
|
|
26
|
-
</style>
|
package/views/news/index.vue
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="news-page">
|
|
3
|
-
<h1>新闻页面</h1>
|
|
4
|
-
<p>这个页面使用布局 1.vue</p>
|
|
5
|
-
<div class="news-content">
|
|
6
|
-
<p>这里是新闻内容...</p>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
</template>
|
|
10
|
-
|
|
11
|
-
<script setup>
|
|
12
|
-
// 新闻页面逻辑
|
|
13
|
-
</script>
|
|
14
|
-
|
|
15
|
-
<style scoped>
|
|
16
|
-
.news-page {
|
|
17
|
-
padding: 20px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.news-content {
|
|
21
|
-
margin-top: 20px;
|
|
22
|
-
padding: 20px;
|
|
23
|
-
background: #f5f5f5;
|
|
24
|
-
border-radius: 8px;
|
|
25
|
-
}
|
|
26
|
-
</style>
|
package/views/user/index.vue
DELETED
|
@@ -1,322 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="user-manage">
|
|
3
|
-
<!-- 上:过滤和操作栏 -->
|
|
4
|
-
<div class="toolbar">
|
|
5
|
-
<div class="toolbar-left">
|
|
6
|
-
<t-button theme="primary" @click="$Method.handleAdd">
|
|
7
|
-
<template #icon>
|
|
8
|
-
<i-lucide:plus />
|
|
9
|
-
</template>
|
|
10
|
-
添加管理员
|
|
11
|
-
</t-button>
|
|
12
|
-
</div>
|
|
13
|
-
<div class="toolbar-right">
|
|
14
|
-
<t-space>
|
|
15
|
-
<t-input v-model="$Data.searchKeyword" placeholder="搜索用户名/邮箱" clearable style="width: 200px" @enter="$Method.handleSearch" />
|
|
16
|
-
<t-select v-model="$Data.searchState" placeholder="状态" clearable style="width: 120px" :options="$Data.stateOptions" @change="$Method.handleSearch" />
|
|
17
|
-
<t-button theme="default" @click="$Method.handleSearch">
|
|
18
|
-
<template #icon>
|
|
19
|
-
<i-lucide:search />
|
|
20
|
-
</template>
|
|
21
|
-
搜索
|
|
22
|
-
</t-button>
|
|
23
|
-
<t-button theme="default" @click="$Method.handleReset">
|
|
24
|
-
<template #icon>
|
|
25
|
-
<i-lucide:rotate-cw />
|
|
26
|
-
</template>
|
|
27
|
-
重置
|
|
28
|
-
</t-button>
|
|
29
|
-
</t-space>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
|
-
<!-- 中:数据表格 -->
|
|
34
|
-
<div class="table-wrapper">
|
|
35
|
-
<t-table :data="$Data.userList" :columns="$Data.columns" row-key="id" :loading="$Data.loading" bordered stripe hover max-height="100%">
|
|
36
|
-
<template #state="{ row }">
|
|
37
|
-
<t-tag v-if="row.state === 1" type="success">正常</t-tag>
|
|
38
|
-
<t-tag v-else-if="row.state === 2" type="warning">禁用</t-tag>
|
|
39
|
-
<t-tag v-else type="danger">已删除</t-tag>
|
|
40
|
-
</template>
|
|
41
|
-
|
|
42
|
-
<template #lastLoginTime="{ row }">
|
|
43
|
-
<span v-if="row.lastLoginTime">{{ new Date(Number(row.lastLoginTime)).toLocaleString() }}</span>
|
|
44
|
-
<span v-else>-</span>
|
|
45
|
-
</template>
|
|
46
|
-
|
|
47
|
-
<template #operation="{ row }">
|
|
48
|
-
<t-space>
|
|
49
|
-
<t-link theme="primary" @click="$Method.handleRole(row)">分配角色</t-link>
|
|
50
|
-
<t-link theme="warning" @click="$Method.handleEdit(row)">编辑</t-link>
|
|
51
|
-
<t-link theme="danger" @click="$Method.handleDelete(row)">删除</t-link>
|
|
52
|
-
</t-space>
|
|
53
|
-
</template>
|
|
54
|
-
</t-table>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<!-- 下:分页栏 -->
|
|
58
|
-
<div class="pagination-wrapper">
|
|
59
|
-
<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" />
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
<!-- 角色分配对话框 -->
|
|
63
|
-
<t-dialog v-model:visible="$Data.roleVisible" header="分配角色" width="600px" :on-confirm="$Method.handleRoleSubmit">
|
|
64
|
-
<div class="role-dialog">
|
|
65
|
-
<div class="user-info">
|
|
66
|
-
<t-tag type="primary">{{ $Data.currentUser.username }}</t-tag>
|
|
67
|
-
<span class="user-email">{{ $Data.currentUser.email }}</span>
|
|
68
|
-
</div>
|
|
69
|
-
<t-divider />
|
|
70
|
-
<t-select v-model="$Data.checkedRoleCode" :options="$Data.roleOptions" placeholder="请选择角色" />
|
|
71
|
-
</div>
|
|
72
|
-
</t-dialog>
|
|
73
|
-
</div>
|
|
74
|
-
</template>
|
|
75
|
-
|
|
76
|
-
<script setup>
|
|
77
|
-
import { $Http } from '@/plugins/http';
|
|
78
|
-
|
|
79
|
-
// 响应式数据
|
|
80
|
-
const $Data = $ref({
|
|
81
|
-
loading: false,
|
|
82
|
-
userList: [],
|
|
83
|
-
pagination: {
|
|
84
|
-
current: 1,
|
|
85
|
-
pageSize: 10,
|
|
86
|
-
total: 0
|
|
87
|
-
},
|
|
88
|
-
searchKeyword: '',
|
|
89
|
-
searchState: undefined,
|
|
90
|
-
stateOptions: [
|
|
91
|
-
{ label: '正常', value: 1 },
|
|
92
|
-
{ label: '禁用', value: 2 },
|
|
93
|
-
{ label: '已删除', value: 0 }
|
|
94
|
-
],
|
|
95
|
-
roleVisible: false,
|
|
96
|
-
currentUser: {},
|
|
97
|
-
columns: [
|
|
98
|
-
{ colKey: 'username', title: '用户名', width: 150 },
|
|
99
|
-
{ colKey: 'email', title: '邮箱', width: 200 },
|
|
100
|
-
{ colKey: 'nickname', title: '昵称', width: 150 },
|
|
101
|
-
{ colKey: 'state', title: '状态', width: 100 },
|
|
102
|
-
{ colKey: 'roleCode', title: '角色', width: 120 },
|
|
103
|
-
{ colKey: 'lastLoginTime', title: '最后登录', width: 180 },
|
|
104
|
-
{ colKey: 'operation', title: '操作', width: 200, fixed: 'right' }
|
|
105
|
-
],
|
|
106
|
-
roleOptions: [],
|
|
107
|
-
checkedRoleCode: ''
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
// 方法集合
|
|
111
|
-
const $Method = {
|
|
112
|
-
// 加载用户列表
|
|
113
|
-
async loadUserList() {
|
|
114
|
-
$Data.loading = true;
|
|
115
|
-
try {
|
|
116
|
-
const res = await $Http('/addon/admin/list', {
|
|
117
|
-
page: $Data.pagination.current,
|
|
118
|
-
limit: $Data.pagination.pageSize
|
|
119
|
-
});
|
|
120
|
-
if (res.code === 0 && res.data) {
|
|
121
|
-
// getList 返回分页对象 { list, total, page, limit, pages }
|
|
122
|
-
$Data.userList = res.data.list || [];
|
|
123
|
-
$Data.pagination.total = res.data.total || 0;
|
|
124
|
-
}
|
|
125
|
-
} catch (error) {
|
|
126
|
-
MessagePlugin.error('加载用户列表失败');
|
|
127
|
-
console.error(error);
|
|
128
|
-
} finally {
|
|
129
|
-
$Data.loading = false;
|
|
130
|
-
}
|
|
131
|
-
},
|
|
132
|
-
|
|
133
|
-
// 分页变化
|
|
134
|
-
onPageChange(pageInfo) {
|
|
135
|
-
$Data.pagination.current = pageInfo.current;
|
|
136
|
-
$Data.pagination.pageSize = pageInfo.pageSize;
|
|
137
|
-
$Method.loadUserList();
|
|
138
|
-
},
|
|
139
|
-
|
|
140
|
-
// 搜索
|
|
141
|
-
handleSearch() {
|
|
142
|
-
$Data.pagination.current = 1;
|
|
143
|
-
$Method.loadUserList();
|
|
144
|
-
},
|
|
145
|
-
|
|
146
|
-
// 重置
|
|
147
|
-
handleReset() {
|
|
148
|
-
$Data.searchKeyword = '';
|
|
149
|
-
$Data.searchState = undefined;
|
|
150
|
-
$Data.pagination.current = 1;
|
|
151
|
-
$Method.loadUserList();
|
|
152
|
-
},
|
|
153
|
-
|
|
154
|
-
// 添加管理员
|
|
155
|
-
handleAdd() {
|
|
156
|
-
MessagePlugin.info('添加管理员功能待开发');
|
|
157
|
-
},
|
|
158
|
-
|
|
159
|
-
// 编辑管理员
|
|
160
|
-
handleEdit(row) {
|
|
161
|
-
MessagePlugin.info(`编辑管理员:${row.username}`);
|
|
162
|
-
},
|
|
163
|
-
|
|
164
|
-
// 删除管理员
|
|
165
|
-
handleDelete(row) {
|
|
166
|
-
DialogPlugin.confirm({
|
|
167
|
-
header: '确认删除',
|
|
168
|
-
body: `确定要删除管理员 "${row.username}" 吗?`,
|
|
169
|
-
onConfirm: async () => {
|
|
170
|
-
try {
|
|
171
|
-
// TODO: 调用删除接口
|
|
172
|
-
MessagePlugin.success('删除成功');
|
|
173
|
-
await $Method.loadUserList();
|
|
174
|
-
} catch (error) {
|
|
175
|
-
MessagePlugin.error('删除失败');
|
|
176
|
-
console.error(error);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
});
|
|
180
|
-
},
|
|
181
|
-
|
|
182
|
-
// 加载角色列表
|
|
183
|
-
async loadRoleList() {
|
|
184
|
-
try {
|
|
185
|
-
const res = await $Http('/addon/admin/role/list', {});
|
|
186
|
-
if (res.code === 0 && res.data) {
|
|
187
|
-
// getList 返回分页对象
|
|
188
|
-
const roleList = res.data.list || res.data || [];
|
|
189
|
-
$Data.roleOptions = roleList
|
|
190
|
-
.filter((role) => role.state === 1)
|
|
191
|
-
.map((role) => ({
|
|
192
|
-
label: role.name,
|
|
193
|
-
value: role.code
|
|
194
|
-
}));
|
|
195
|
-
}
|
|
196
|
-
} catch (error) {
|
|
197
|
-
MessagePlugin.error('加载角色列表失败');
|
|
198
|
-
console.error(error);
|
|
199
|
-
}
|
|
200
|
-
},
|
|
201
|
-
|
|
202
|
-
// 打开角色分配对话框
|
|
203
|
-
async handleRole(row) {
|
|
204
|
-
$Data.currentUser = row;
|
|
205
|
-
$Data.roleVisible = true;
|
|
206
|
-
|
|
207
|
-
// 加载角色列表
|
|
208
|
-
await $Method.loadRoleList();
|
|
209
|
-
|
|
210
|
-
// 加载该用户已有的角色
|
|
211
|
-
try {
|
|
212
|
-
const res = await $Http('/addon/admin/roleDetail', { adminId: row.id });
|
|
213
|
-
if (res.code === 0 && res.data) {
|
|
214
|
-
$Data.checkedRoleCode = res.data.roleCode || '';
|
|
215
|
-
}
|
|
216
|
-
} catch (error) {
|
|
217
|
-
MessagePlugin.error('加载用户角色失败');
|
|
218
|
-
console.error(error);
|
|
219
|
-
}
|
|
220
|
-
},
|
|
221
|
-
|
|
222
|
-
// 提交角色分配
|
|
223
|
-
async handleRoleSubmit() {
|
|
224
|
-
if (!$Data.checkedRoleCode) {
|
|
225
|
-
MessagePlugin.warning('请选择角色');
|
|
226
|
-
return false;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
try {
|
|
230
|
-
const res = await $Http('/addon/admin/roleSave', {
|
|
231
|
-
adminId: $Data.currentUser.id,
|
|
232
|
-
roleCode: $Data.checkedRoleCode
|
|
233
|
-
});
|
|
234
|
-
|
|
235
|
-
if (res.code === 0) {
|
|
236
|
-
MessagePlugin.success('角色分配成功');
|
|
237
|
-
$Data.roleVisible = false;
|
|
238
|
-
await $Method.loadUserList();
|
|
239
|
-
return true;
|
|
240
|
-
} else {
|
|
241
|
-
MessagePlugin.error(res.msg || '分配失败');
|
|
242
|
-
return false;
|
|
243
|
-
}
|
|
244
|
-
} catch (error) {
|
|
245
|
-
MessagePlugin.error('分配失败');
|
|
246
|
-
console.error(error);
|
|
247
|
-
return false;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
};
|
|
251
|
-
|
|
252
|
-
// 初始化加载
|
|
253
|
-
$Method.loadUserList();
|
|
254
|
-
</script>
|
|
255
|
-
|
|
256
|
-
<style scoped lang="scss">
|
|
257
|
-
.user-manage {
|
|
258
|
-
height: 100%;
|
|
259
|
-
display: flex;
|
|
260
|
-
flex-direction: column;
|
|
261
|
-
gap: 16px;
|
|
262
|
-
padding: 16px;
|
|
263
|
-
overflow: hidden; // 防止外层滚动
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
// 上:工具栏
|
|
267
|
-
.toolbar {
|
|
268
|
-
flex-shrink: 0; // 不允许收缩
|
|
269
|
-
display: flex;
|
|
270
|
-
justify-content: space-between;
|
|
271
|
-
align-items: center;
|
|
272
|
-
padding: 16px;
|
|
273
|
-
background: $bg-color-container;
|
|
274
|
-
border-radius: $border-radius;
|
|
275
|
-
box-shadow: $shadow-card;
|
|
276
|
-
|
|
277
|
-
.toolbar-left {
|
|
278
|
-
display: flex;
|
|
279
|
-
gap: 12px;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.toolbar-right {
|
|
283
|
-
display: flex;
|
|
284
|
-
gap: 12px;
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
// 中:表格区域(撑满剩余空间并支持滚动)
|
|
289
|
-
.table-wrapper {
|
|
290
|
-
flex: 1; // 占据剩余空间
|
|
291
|
-
overflow: hidden; // 隐藏超出部分
|
|
292
|
-
display: flex;
|
|
293
|
-
flex-direction: column;
|
|
294
|
-
background: $bg-color-container;
|
|
295
|
-
border-radius: $border-radius;
|
|
296
|
-
box-shadow: $shadow-card;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
// 下:分页栏
|
|
300
|
-
.pagination-wrapper {
|
|
301
|
-
flex-shrink: 0; // 不允许收缩
|
|
302
|
-
display: flex;
|
|
303
|
-
justify-content: flex-end;
|
|
304
|
-
padding: 16px;
|
|
305
|
-
background: $bg-color-container;
|
|
306
|
-
border-radius: $border-radius;
|
|
307
|
-
box-shadow: $shadow-card;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
.role-dialog {
|
|
311
|
-
.user-info {
|
|
312
|
-
display: flex;
|
|
313
|
-
align-items: center;
|
|
314
|
-
gap: 12px;
|
|
315
|
-
margin-bottom: 16px;
|
|
316
|
-
|
|
317
|
-
.user-email {
|
|
318
|
-
color: $text-secondary;
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
</style>
|