@befly-addon/admin 1.0.20 → 1.0.21
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 +5 -3
- package/views/admin/components/edit.vue +32 -31
- package/views/admin/components/role.vue +8 -7
- package/views/admin/index.vue +43 -39
- package/views/dict/components/edit.vue +32 -31
- package/views/dict/index.vue +40 -35
- package/views/index/components/addonList.vue +6 -4
- package/views/index/components/environmentInfo.vue +2 -2
- package/views/index/components/operationLogs.vue +5 -4
- package/views/index/components/performanceMetrics.vue +11 -7
- package/views/index/components/quickActions.vue +6 -3
- package/views/index/components/serviceStatus.vue +22 -12
- package/views/index/components/systemNotifications.vue +15 -8
- package/views/index/components/systemOverview.vue +9 -5
- package/views/index/components/systemResources.vue +12 -8
- package/views/index/components/userInfo.vue +13 -8
- package/views/login/components/emailLoginForm.vue +18 -16
- package/views/login/components/registerForm.vue +29 -24
- package/views/login/index_1.vue +0 -2
- package/views/menu/components/edit.vue +26 -26
- package/views/menu/index.vue +39 -35
- package/views/news/index.vue +2 -0
- package/views/role/components/api.vue +11 -12
- package/views/role/components/edit.vue +26 -26
- package/views/role/components/menu.vue +7 -7
- package/views/role/index.vue +44 -37
- package/views/user/index.vue +11 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@befly-addon/admin",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.21",
|
|
4
4
|
"description": "Befly - 管理后台功能组件",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"url": "https://github.com/chenbimo/befly.git",
|
|
40
40
|
"directory": "packages/addon-admin"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "78e963d8659b9f517058145b6baf2678e13eabe5",
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"befly": "3.8.11"
|
|
45
45
|
}
|
package/views/403/index.vue
CHANGED
|
@@ -5,14 +5,16 @@
|
|
|
5
5
|
<h1 class="error-title">无权限访问</h1>
|
|
6
6
|
<p class="error-description">抱歉，您没有访问该页面的权限</p>
|
|
7
7
|
<div class="error-actions">
|
|
8
|
-
<
|
|
9
|
-
<
|
|
8
|
+
<TinyButton type="primary" @click="$Method.goHome">返回首页</TinyButton>
|
|
9
|
+
<TinyButton @click="$Method.goBack">返回上一页</TinyButton>
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
</div>
|
|
13
13
|
</template>
|
|
14
14
|
|
|
15
|
-
<script setup
|
|
15
|
+
<script setup>
|
|
16
|
+
import { useRouter, useRoute } from 'vue-router';
|
|
17
|
+
import { Button as TinyButton } from '@opentiny/vue';
|
|
16
18
|
import { useRouter } from 'vue-router';
|
|
17
19
|
|
|
18
20
|
const router = useRouter();
|
|
@@ -1,40 +1,41 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
</
|
|
7
|
-
<
|
|
8
|
-
<
|
|
9
|
-
</
|
|
10
|
-
<
|
|
11
|
-
<
|
|
12
|
-
</
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
</
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
</
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
</
|
|
22
|
-
<
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
</
|
|
27
|
-
</
|
|
28
|
-
</
|
|
2
|
+
<TinyDialogBox 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">
|
|
3
|
+
<TinyForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
|
|
4
|
+
<TinyFormItem label="用户名" prop="username">
|
|
5
|
+
<TinyInput v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
|
|
6
|
+
</TinyFormItem>
|
|
7
|
+
<TinyFormItem label="邮箱" prop="email">
|
|
8
|
+
<TinyInput v-model="$Data.formData.email" placeholder="请输入邮箱" />
|
|
9
|
+
</TinyFormItem>
|
|
10
|
+
<TinyFormItem v-if="$Prop.actionType === 'add'" label="密码" prop="password">
|
|
11
|
+
<TinyInput v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
|
|
12
|
+
</TinyFormItem>
|
|
13
|
+
<TinyFormItem label="姓名" prop="name">
|
|
14
|
+
<TinyInput v-model="$Data.formData.name" placeholder="请输入姓名" />
|
|
15
|
+
</TinyFormItem>
|
|
16
|
+
<TinyFormItem label="昵称" prop="nickname">
|
|
17
|
+
<TinyInput v-model="$Data.formData.nickname" placeholder="请输入昵称" />
|
|
18
|
+
</TinyFormItem>
|
|
19
|
+
<TinyFormItem label="手机号" prop="phone">
|
|
20
|
+
<TinyInput v-model="$Data.formData.phone" placeholder="请输入手机号" />
|
|
21
|
+
</TinyFormItem>
|
|
22
|
+
<TinyFormItem v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
|
|
23
|
+
<TinyRadioGroup v-model="$Data.formData.state">
|
|
24
|
+
<TinyRadio :label="1">正常</TinyRadio>
|
|
25
|
+
<TinyRadio :label="2">禁用</TinyRadio>
|
|
26
|
+
</TinyRadioGroup>
|
|
27
|
+
</TinyFormItem>
|
|
28
|
+
</TinyForm>
|
|
29
29
|
<template #footer>
|
|
30
|
-
<
|
|
31
|
-
<
|
|
30
|
+
<TinyButton @click="$Method.onClose">取消</TinyButton>
|
|
31
|
+
<TinyButton type="primary" @click="$Method.onSubmit">确定</TinyButton>
|
|
32
32
|
</template>
|
|
33
|
-
</
|
|
33
|
+
</TinyDialogBox>
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
36
|
<script setup>
|
|
37
|
-
import {
|
|
37
|
+
import { shallowRef } from 'vue';
|
|
38
|
+
import { Button as TinyButton, DialogBox as TinyDialogBox, Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Radio as TinyRadio, RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue';
|
|
38
39
|
import { Modal } from '@opentiny/vue';
|
|
39
40
|
|
|
40
41
|
const $Prop = defineProps({
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<TinyDialogBox v-model:visible="$Data.visible" title="分配角色" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="20vh" @close="$Method.onClose">
|
|
3
3
|
<div class="role-dialog">
|
|
4
4
|
<div class="user-info">
|
|
5
|
-
<
|
|
5
|
+
<TinyTag type="info">{{ $Prop.rowData.username }}</TinyTag>
|
|
6
6
|
<span class="user-email">{{ $Prop.rowData.email }}</span>
|
|
7
7
|
</div>
|
|
8
8
|
<tiny-divider />
|
|
9
|
-
<
|
|
9
|
+
<TinySelect v-model="$Data.checkedRoleCode" :options="$Data.roleOptions" placeholder="请选择角色" />
|
|
10
10
|
</div>
|
|
11
11
|
<template #footer>
|
|
12
|
-
<
|
|
13
|
-
<
|
|
12
|
+
<TinyButton @click="$Method.onClose">取消</TinyButton>
|
|
13
|
+
<TinyButton type="primary" @click="$Method.onSubmit">确定</TinyButton>
|
|
14
14
|
</template>
|
|
15
|
-
</
|
|
15
|
+
</TinyDialogBox>
|
|
16
16
|
</template>
|
|
17
17
|
|
|
18
18
|
<script setup>
|
|
19
|
-
import {
|
|
19
|
+
import { shallowRef } from 'vue';
|
|
20
|
+
import { Button as TinyButton, DialogBox as TinyDialogBox, Select as TinySelect, Tag as TinyTag, Modal } from '@opentiny/vue';
|
|
20
21
|
import { Modal } from '@opentiny/vue';
|
|
21
22
|
|
|
22
23
|
const $Prop = defineProps({
|
package/views/admin/index.vue
CHANGED
|
@@ -2,71 +2,71 @@
|
|
|
2
2
|
<div class="page-admin page-table">
|
|
3
3
|
<div class="main-tool">
|
|
4
4
|
<div class="left">
|
|
5
|
-
<
|
|
5
|
+
<TinyButton type="primary" @click="$Method.onAction('add', {})">
|
|
6
6
|
<template #icon>
|
|
7
|
-
<
|
|
7
|
+
<IconLucidePlus />
|
|
8
8
|
</template>
|
|
9
9
|
添加管理员
|
|
10
|
-
</
|
|
10
|
+
</TinyButton>
|
|
11
11
|
</div>
|
|
12
12
|
<div class="right">
|
|
13
|
-
<
|
|
13
|
+
<TinyButton @click="$Method.handleRefresh">
|
|
14
14
|
<template #icon>
|
|
15
|
-
<
|
|
15
|
+
<IconLucideRotateCw />
|
|
16
16
|
</template>
|
|
17
|
-
</
|
|
17
|
+
</TinyButton>
|
|
18
18
|
</div>
|
|
19
19
|
<div class="right">
|
|
20
|
-
<
|
|
20
|
+
<TinyButton @click="$Method.handleRefresh">
|
|
21
21
|
<template #icon>
|
|
22
|
-
<
|
|
22
|
+
<IconLucideRotateCw />
|
|
23
23
|
</template>
|
|
24
24
|
刷新
|
|
25
|
-
</
|
|
25
|
+
</TinyButton>
|
|
26
26
|
</div>
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
<div class="main-table">
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
<
|
|
30
|
+
<TinyGrid :data="$Data.tableData" header-cell-class-name="custom-table-cell-class" size="small" height="100%" seq-serial>
|
|
31
|
+
<TinyGridColumn type="index" title="序号" :width="60" />
|
|
32
|
+
<TinyGridColumn field="username" title="用户名" />
|
|
33
|
+
<TinyGridColumn field="email" title="邮箱" :width="200" />
|
|
34
|
+
<TinyGridColumn field="nickname" title="昵称" :width="150" />
|
|
35
|
+
<TinyGridColumn field="roleCode" title="角色" :width="120" />
|
|
36
|
+
<TinyGridColumn field="state" title="状态" :width="100">
|
|
37
37
|
<template #default="{ row }">
|
|
38
|
-
<
|
|
39
|
-
<
|
|
40
|
-
<
|
|
38
|
+
<TinyTag v-if="row.state === 1" type="success">正常</TinyTag>
|
|
39
|
+
<TinyTag v-else-if="row.state === 2" type="warning">禁用</TinyTag>
|
|
40
|
+
<TinyTag v-else type="danger">已删除</TinyTag>
|
|
41
41
|
</template>
|
|
42
|
-
</
|
|
43
|
-
<
|
|
42
|
+
</TinyGridColumn>
|
|
43
|
+
<TinyGridColumn title="操作" :width="120" align="right">
|
|
44
44
|
<template #default="{ row }">
|
|
45
|
-
<
|
|
45
|
+
<TinyDropdown title="操作" trigger="click" size="small" border visible-arrow @item-click="(data) => $Method.onAction(data.itemData.command, row)">
|
|
46
46
|
<template #dropdown>
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
<
|
|
47
|
+
<TinyDropdownMenu>
|
|
48
|
+
<TinyDropdownItem :item-data="{ command: 'role' }">
|
|
49
|
+
<IconLucideUser />
|
|
50
50
|
分配角色
|
|
51
|
-
</
|
|
52
|
-
<
|
|
53
|
-
<
|
|
51
|
+
</TinyDropdownItem>
|
|
52
|
+
<TinyDropdownItem :item-data="{ command: 'upd' }">
|
|
53
|
+
<IconLucidePencil />
|
|
54
54
|
编辑
|
|
55
|
-
</
|
|
56
|
-
<
|
|
57
|
-
<
|
|
55
|
+
</TinyDropdownItem>
|
|
56
|
+
<TinyDropdownItem :item-data="{ command: 'del' }" divided>
|
|
57
|
+
<IconLucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
|
|
58
58
|
删除
|
|
59
|
-
</
|
|
60
|
-
</
|
|
59
|
+
</TinyDropdownItem>
|
|
60
|
+
</TinyDropdownMenu>
|
|
61
61
|
</template>
|
|
62
|
-
</
|
|
62
|
+
</TinyDropdown>
|
|
63
63
|
</template>
|
|
64
|
-
</
|
|
65
|
-
</
|
|
64
|
+
</TinyGridColumn>
|
|
65
|
+
</TinyGrid>
|
|
66
66
|
</div>
|
|
67
67
|
|
|
68
68
|
<div class="main-page">
|
|
69
|
-
<
|
|
69
|
+
<TinyPager :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
|
|
70
70
|
</div>
|
|
71
71
|
|
|
72
72
|
<!-- 编辑对话框组件 -->
|
|
@@ -78,8 +78,12 @@
|
|
|
78
78
|
</template>
|
|
79
79
|
|
|
80
80
|
<script setup>
|
|
81
|
-
import {
|
|
82
|
-
import
|
|
81
|
+
import { Button as TinyButton, Grid as TinyGrid, GridColumn as TinyGridColumn, Tag as TinyTag, Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, DropdownItem as TinyDropdownItem, Pager as TinyPager, Modal } from '@opentiny/vue';
|
|
82
|
+
import IconLucidePlus from '~icons/lucide/plus';
|
|
83
|
+
import IconLucideRotateCw from '~icons/lucide/rotate-cw';
|
|
84
|
+
import IconLucidePencil from '~icons/lucide/pencil';
|
|
85
|
+
import IconLucideUser from '~icons/lucide/user';
|
|
86
|
+
import IconLucideTrash2 from '~icons/lucide/trash-2';
|
|
83
87
|
|
|
84
88
|
import EditDialog from './components/edit.vue';
|
|
85
89
|
import RoleDialog from './components/role.vue';
|
|
@@ -1,40 +1,41 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
</
|
|
7
|
-
<
|
|
8
|
-
<
|
|
9
|
-
</
|
|
10
|
-
<
|
|
11
|
-
<
|
|
12
|
-
</
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
</
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
</
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
</
|
|
22
|
-
<
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
</
|
|
27
|
-
</
|
|
28
|
-
</
|
|
2
|
+
<TinyDialogBox 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">
|
|
3
|
+
<TinyForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
|
|
4
|
+
<TinyFormItem label="字典名称" prop="name">
|
|
5
|
+
<TinyInput v-model="$Data.formData.name" placeholder="请输入字典名称" />
|
|
6
|
+
</TinyFormItem>
|
|
7
|
+
<TinyFormItem label="字典代码" prop="code">
|
|
8
|
+
<TinyInput v-model="$Data.formData.code" placeholder="请输入字典代码，如：gender" />
|
|
9
|
+
</TinyFormItem>
|
|
10
|
+
<TinyFormItem label="字典值" prop="value">
|
|
11
|
+
<TinyInput v-model="$Data.formData.value" placeholder="请输入字典值" />
|
|
12
|
+
</TinyFormItem>
|
|
13
|
+
<TinyFormItem label="父级ID" prop="pid">
|
|
14
|
+
<TinyNumeric v-model="$Data.formData.pid" :min="0" :max="999999999999999" />
|
|
15
|
+
</TinyFormItem>
|
|
16
|
+
<TinyFormItem label="排序" prop="sort">
|
|
17
|
+
<TinyNumeric v-model="$Data.formData.sort" :min="0" :max="9999" />
|
|
18
|
+
</TinyFormItem>
|
|
19
|
+
<TinyFormItem label="描述" prop="description">
|
|
20
|
+
<TinyInput v-model="$Data.formData.description" type="textarea" placeholder="请输入描述" :rows="3" />
|
|
21
|
+
</TinyFormItem>
|
|
22
|
+
<TinyFormItem label="状态" prop="state">
|
|
23
|
+
<TinyRadioGroup v-model="$Data.formData.state">
|
|
24
|
+
<TinyRadio :label="1">正常</TinyRadio>
|
|
25
|
+
<TinyRadio :label="2">禁用</TinyRadio>
|
|
26
|
+
</TinyRadioGroup>
|
|
27
|
+
</TinyFormItem>
|
|
28
|
+
</TinyForm>
|
|
29
29
|
<template #footer>
|
|
30
|
-
<
|
|
31
|
-
<
|
|
30
|
+
<TinyButton @click="$Method.onClose">取消</TinyButton>
|
|
31
|
+
<TinyButton type="primary" @click="$Method.onSubmit">确定</TinyButton>
|
|
32
32
|
</template>
|
|
33
|
-
</
|
|
33
|
+
</TinyDialogBox>
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
36
|
<script setup>
|
|
37
|
-
import {
|
|
37
|
+
import { watch, shallowRef } from 'vue';
|
|
38
|
+
import { Button as TinyButton, DialogBox as TinyDialogBox, Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Numeric as TinyNumeric, Radio as TinyRadio, RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue';
|
|
38
39
|
import { Modal } from '@opentiny/vue';
|
|
39
40
|
|
|
40
41
|
const $Prop = defineProps({
|
package/views/dict/index.vue
CHANGED
|
@@ -2,61 +2,61 @@
|
|
|
2
2
|
<div class="page-dict page-table">
|
|
3
3
|
<div class="main-tool">
|
|
4
4
|
<div class="left">
|
|
5
|
-
<
|
|
5
|
+
<TinyButton type="primary" @click="$Method.onAction('add', {})">
|
|
6
6
|
<template #icon>
|
|
7
|
-
<
|
|
7
|
+
<IconLucidePlus />
|
|
8
8
|
</template>
|
|
9
9
|
添加字典
|
|
10
|
-
</
|
|
10
|
+
</TinyButton>
|
|
11
11
|
</div>
|
|
12
12
|
<div class="right">
|
|
13
|
-
<
|
|
13
|
+
<TinyButton @click="$Method.handleRefresh">
|
|
14
14
|
<template #icon>
|
|
15
|
-
<
|
|
15
|
+
<IconLucideRotateCw />
|
|
16
16
|
</template>
|
|
17
17
|
刷新
|
|
18
|
-
</
|
|
18
|
+
</TinyButton>
|
|
19
19
|
</div>
|
|
20
20
|
</div>
|
|
21
21
|
<div class="main-table">
|
|
22
|
-
<
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
<
|
|
30
|
-
<
|
|
22
|
+
<TinyGrid :data="$Data.dictList" header-cell-class-name="custom-table-cell-class" size="small" height="100%" seq-serial>
|
|
23
|
+
<TinyGridColumn type="index" title="序号" :width="60" />
|
|
24
|
+
<TinyGridColumn field="name" title="字典名称" />
|
|
25
|
+
<TinyGridColumn field="code" title="字典代码" :width="150" />
|
|
26
|
+
<TinyGridColumn field="value" title="字典值" :width="200" />
|
|
27
|
+
<TinyGridColumn field="pid" title="父级ID" :width="100" />
|
|
28
|
+
<TinyGridColumn field="sort" title="排序" :width="80" />
|
|
29
|
+
<TinyGridColumn field="description" title="描述" />
|
|
30
|
+
<TinyGridColumn field="state" title="状态" :width="100">
|
|
31
31
|
<template #default="{ row }">
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
<
|
|
32
|
+
<TinyTag v-if="row.state === 1" type="success">正常</TinyTag>
|
|
33
|
+
<TinyTag v-else-if="row.state === 2" type="warning">禁用</TinyTag>
|
|
34
|
+
<TinyTag v-else type="danger">已删除</TinyTag>
|
|
35
35
|
</template>
|
|
36
|
-
</
|
|
37
|
-
<
|
|
36
|
+
</TinyGridColumn>
|
|
37
|
+
<TinyGridColumn title="操作" :width="120" align="right">
|
|
38
38
|
<template #default="{ row }">
|
|
39
|
-
<
|
|
39
|
+
<TinyDropdown title="操作" trigger="click" size="small" border visible-arrow @item-click="(data) => $Method.onAction(data.itemData.command, row)">
|
|
40
40
|
<template #dropdown>
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
<
|
|
41
|
+
<TinyDropdownMenu>
|
|
42
|
+
<TinyDropdownItem :item-data="{ command: 'upd' }">
|
|
43
|
+
<IconLucidePencil />
|
|
44
44
|
编辑
|
|
45
|
-
</
|
|
46
|
-
<
|
|
47
|
-
<
|
|
45
|
+
</TinyDropdownItem>
|
|
46
|
+
<TinyDropdownItem :item-data="{ command: 'del' }" divided>
|
|
47
|
+
<IconLucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
|
|
48
48
|
删除
|
|
49
|
-
</
|
|
50
|
-
</
|
|
49
|
+
</TinyDropdownItem>
|
|
50
|
+
</TinyDropdownMenu>
|
|
51
51
|
</template>
|
|
52
|
-
</
|
|
52
|
+
</TinyDropdown>
|
|
53
53
|
</template>
|
|
54
|
-
</
|
|
55
|
-
</
|
|
54
|
+
</TinyGridColumn>
|
|
55
|
+
</TinyGrid>
|
|
56
56
|
</div>
|
|
57
57
|
|
|
58
58
|
<div class="main-page">
|
|
59
|
-
<
|
|
59
|
+
<TinyPager :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
|
|
60
60
|
</div>
|
|
61
61
|
|
|
62
62
|
<!-- 编辑对话框组件 -->
|
|
@@ -65,8 +65,13 @@
|
|
|
65
65
|
</template>
|
|
66
66
|
|
|
67
67
|
<script setup>
|
|
68
|
-
import {
|
|
69
|
-
import
|
|
68
|
+
import { Button as TinyButton, Grid as TinyGrid, GridColumn as TinyGridColumn, Tag as TinyTag, Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, DropdownItem as TinyDropdownItem, Pager as TinyPager, Modal } from '@opentiny/vue';
|
|
69
|
+
import IconLucidePlus from '~icons/lucide/plus';
|
|
70
|
+
import IconLucideRotateCw from '~icons/lucide/rotate-cw';
|
|
71
|
+
import IconLucidePencil from '~icons/lucide/pencil';
|
|
72
|
+
import IconLucideTrash2 from '~icons/lucide/trash-2';
|
|
73
|
+
|
|
74
|
+
import EditDialog from './components/edit.vue';
|
|
70
75
|
|
|
71
76
|
import EditDialog from './components/edit.vue';
|
|
72
77
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="section-block">
|
|
3
3
|
<div class="section-header flex items-center gap-2">
|
|
4
|
-
<
|
|
4
|
+
<IconLucidePackage />
|
|
5
5
|
<h2>已安装插件</h2>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="section-content">
|
|
8
8
|
<div class="addon-list">
|
|
9
9
|
<div v-for="addon in addonList" :key="addon.name" class="addon-item">
|
|
10
10
|
<div class="addon-icon">
|
|
11
|
-
<
|
|
11
|
+
<IconLucideBox />
|
|
12
12
|
</div>
|
|
13
13
|
<div class="addon-info">
|
|
14
14
|
<div class="addon-title">
|
|
15
15
|
<span class="addon-name">{{ addon.title }}</span>
|
|
16
|
-
<
|
|
16
|
+
<TinyTag type="success" size="small">{{ addon.version }}</TinyTag>
|
|
17
17
|
</div>
|
|
18
18
|
<div class="addon-desc">{{ addon.description }}</div>
|
|
19
19
|
</div>
|
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
</template>
|
|
25
25
|
|
|
26
26
|
<script setup>
|
|
27
|
-
import
|
|
27
|
+
import IconLucideBox from '~icons/lucide/box';
|
|
28
|
+
import { Tag as TinyTag } from '@opentiny/vue';
|
|
29
|
+
import IconLucidePackage from '~icons/lucide/package';
|
|
28
30
|
|
|
29
31
|
// 组件内部数据
|
|
30
32
|
const addonList = $ref([]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="section-block">
|
|
3
3
|
<div class="section-header flex items-center gap-2">
|
|
4
|
-
<
|
|
4
|
+
<IconLucideServer />
|
|
5
5
|
<h2>运行环境</h2>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="section-content">
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
</template>
|
|
37
37
|
|
|
38
38
|
<script setup>
|
|
39
|
-
import
|
|
39
|
+
import IconLucideServer from '~icons/lucide/server';
|
|
40
40
|
|
|
41
41
|
// 组件内部数据
|
|
42
42
|
const environmentInfo = $ref({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="section-block">
|
|
3
3
|
<div class="section-header flex items-center gap-2">
|
|
4
|
-
<
|
|
4
|
+
<IconLucideFileText />
|
|
5
5
|
<h2>操作日志</h2>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="section-content">
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
<span class="col-module">{{ log.module }}</span>
|
|
23
23
|
<span class="col-ip">{{ log.ip }}</span>
|
|
24
24
|
<span class="col-status">
|
|
25
|
-
<
|
|
25
|
+
<TinyTag :type="log.status === 'success' ? 'success' : 'danger'" size="small">
|
|
26
26
|
{{ log.status === 'success' ? '成功' : '失败' }}
|
|
27
|
-
</
|
|
27
|
+
</TinyTag>
|
|
28
28
|
</span>
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
@@ -34,7 +34,8 @@
|
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
36
|
<script setup>
|
|
37
|
-
import {
|
|
37
|
+
import { Tag as TinyTag } from '@opentiny/vue';
|
|
38
|
+
import IconLucideFileText from '~icons/lucide/file-text';
|
|
38
39
|
|
|
39
40
|
// 组件内部数据
|
|
40
41
|
const operationLogs = $ref([
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="section-block">
|
|
3
3
|
<div class="section-header flex items-center gap-2">
|
|
4
|
-
<
|
|
4
|
+
<IconLucideActivity />
|
|
5
5
|
<h2>性能指标</h2>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="section-content">
|
|
8
8
|
<div class="performance-grid">
|
|
9
9
|
<div class="perf-metric">
|
|
10
10
|
<div class="perf-icon">
|
|
11
|
-
<
|
|
11
|
+
<IconLucideClock />
|
|
12
12
|
</div>
|
|
13
13
|
<div class="perf-info">
|
|
14
14
|
<div class="perf-label">平均响应</div>
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
</div>
|
|
18
18
|
<div class="perf-metric">
|
|
19
19
|
<div class="perf-icon">
|
|
20
|
-
<
|
|
20
|
+
<IconLucideTrendingUp />
|
|
21
21
|
</div>
|
|
22
22
|
<div class="perf-info">
|
|
23
23
|
<div class="perf-label">QPS</div>
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
</div>
|
|
27
27
|
<div class="perf-metric">
|
|
28
28
|
<div class="perf-icon">
|
|
29
|
-
<
|
|
29
|
+
<IconLucideAlertCircle />
|
|
30
30
|
</div>
|
|
31
31
|
<div class="perf-info">
|
|
32
32
|
<div class="perf-label">错误率</div>
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
</div>
|
|
36
36
|
<div class="perf-metric">
|
|
37
37
|
<div class="perf-icon">
|
|
38
|
-
<
|
|
38
|
+
<IconLucideActivity />
|
|
39
39
|
</div>
|
|
40
40
|
<div class="perf-info">
|
|
41
41
|
<div class="perf-label">活跃连接</div>
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
</div>
|
|
46
46
|
<!-- 最慢接口提示 -->
|
|
47
47
|
<div v-if="performanceMetrics.slowestApi" class="perf-slowest">
|
|
48
|
-
<
|
|
48
|
+
<IconLucideAlertTriangle />
|
|
49
49
|
<span>最慢接口: {{ performanceMetrics.slowestApi.path }} ({{ performanceMetrics.slowestApi.time }}ms)</span>
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
@@ -53,7 +53,11 @@
|
|
|
53
53
|
</template>
|
|
54
54
|
|
|
55
55
|
<script setup>
|
|
56
|
-
import
|
|
56
|
+
import IconLucideActivity from '~icons/lucide/activity';
|
|
57
|
+
import IconLucideTrendingUp from '~icons/lucide/trending-up';
|
|
58
|
+
import IconLucideAlertCircle from '~icons/lucide/alert-circle';
|
|
59
|
+
import IconLucideClock from '~icons/lucide/clock';
|
|
60
|
+
import IconLucideAlertTriangle from '~icons/lucide/alert-triangle';
|
|
57
61
|
|
|
58
62
|
// 组件内部数据
|
|
59
63
|
const performanceMetrics = $ref({
|