@befly-addon/admin 1.0.33 → 1.0.35
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 +9 -8
- package/views/admin/index.vue +35 -29
- package/views/dict/components/edit.vue +32 -31
- package/views/dict/index.vue +28 -23
- package/views/index/components/addonList.vue +2 -2
- package/views/index/components/environmentInfo.vue +2 -1
- package/views/index/components/operationLogs.vue +1 -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 +28 -28
- package/views/index/components/systemResources.vue +12 -7
- package/views/index/components/userInfo.vue +16 -19
- package/views/login/components/emailLoginForm.vue +20 -17
- package/views/login/components/registerForm.vue +32 -27
- package/views/menu/components/edit.vue +26 -25
- package/views/menu/index.vue +30 -24
- package/views/role/components/api.vue +21 -15
- package/views/role/components/edit.vue +26 -25
- package/views/role/components/menu.vue +7 -6
- 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
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@befly-addon/admin",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.35",
|
|
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": "64fb7803b4ff57b2f1e5559cfd4fc428ebeb083e",
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"befly": "3.8.12"
|
|
45
45
|
}
|
package/views/403/index.vue
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
<template>
|
|
1
|
+
<template>
|
|
2
2
|
<div class="error-page">
|
|
3
3
|
<div class="error-content">
|
|
4
4
|
<div class="error-code">403</div>
|
|
5
5
|
<h1 class="error-title">无权限访问</h1>
|
|
6
6
|
<p class="error-description">抱歉，您没有访问该页面的权限</p>
|
|
7
7
|
<div class="error-actions">
|
|
8
|
-
<
|
|
9
|
-
<
|
|
8
|
+
<TButton theme="primary" @click="$Method.goHome">返回首页</TButton>
|
|
9
|
+
<TButton @click="$Method.goBack">返回上一页</TButton>
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
</div>
|
|
13
13
|
</template>
|
|
14
14
|
|
|
15
15
|
<script setup>
|
|
16
|
+
import { Button as TButton } from 'tdesign-vue-next';
|
|
17
|
+
|
|
16
18
|
const router = useRouter();
|
|
17
19
|
|
|
18
20
|
const $Method = {
|
|
@@ -1,39 +1,40 @@
|
|
|
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
|
-
</
|
|
1
|
+
<template>
|
|
2
|
+
<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">
|
|
3
|
+
<TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
|
|
4
|
+
<TFormItem label="用户名" prop="username">
|
|
5
|
+
<TInput v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
|
|
6
|
+
</TFormItem>
|
|
7
|
+
<TFormItem label="邮箱" prop="email">
|
|
8
|
+
<TInput v-model="$Data.formData.email" placeholder="请输入邮箱" />
|
|
9
|
+
</TFormItem>
|
|
10
|
+
<TFormItem v-if="$Prop.actionType === 'add'" label="密码" prop="password">
|
|
11
|
+
<TInput v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
|
|
12
|
+
</TFormItem>
|
|
13
|
+
<TFormItem label="姓名" prop="name">
|
|
14
|
+
<TInput v-model="$Data.formData.name" placeholder="请输入姓名" />
|
|
15
|
+
</TFormItem>
|
|
16
|
+
<TFormItem label="昵称" prop="nickname">
|
|
17
|
+
<TInput v-model="$Data.formData.nickname" placeholder="请输入昵称" />
|
|
18
|
+
</TFormItem>
|
|
19
|
+
<TFormItem label="手机号" prop="phone">
|
|
20
|
+
<TInput v-model="$Data.formData.phone" placeholder="请输入手机号" />
|
|
21
|
+
</TFormItem>
|
|
22
|
+
<TFormItem v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
|
|
23
|
+
<TRadioGroup v-model="$Data.formData.state">
|
|
24
|
+
<TRadio :label="1">正常</TRadio>
|
|
25
|
+
<TRadio :label="2">禁用</TRadio>
|
|
26
|
+
</TRadioGroup>
|
|
27
|
+
</TFormItem>
|
|
28
|
+
</TForm>
|
|
29
29
|
<template #footer>
|
|
30
|
-
<
|
|
31
|
-
<
|
|
30
|
+
<TButton @click="$Method.onClose">取消</TButton>
|
|
31
|
+
<TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
|
|
32
32
|
</template>
|
|
33
|
-
</
|
|
33
|
+
</TDialog>
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
36
|
<script setup>
|
|
37
|
+
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';
|
|
37
38
|
import { $Http } from '@/plugins/http';
|
|
38
39
|
|
|
39
40
|
const $Prop = defineProps({
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<
|
|
1
|
+
<template>
|
|
2
|
+
<TDialog 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
|
+
<TTag type="info">{{ $Prop.rowData.username }}</TTag>
|
|
6
6
|
<span class="user-email">{{ $Prop.rowData.email }}</span>
|
|
7
7
|
</div>
|
|
8
|
-
<
|
|
9
|
-
<
|
|
8
|
+
<TDivider />
|
|
9
|
+
<TSelect v-model="$Data.checkedRoleCode" :options="$Data.roleOptions" placeholder="请选择角色" />
|
|
10
10
|
</div>
|
|
11
11
|
<template #footer>
|
|
12
|
-
<
|
|
13
|
-
<
|
|
12
|
+
<TButton @click="$Method.onClose">取消</TButton>
|
|
13
|
+
<TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
|
|
14
14
|
</template>
|
|
15
|
-
</
|
|
15
|
+
</TDialog>
|
|
16
16
|
</template>
|
|
17
17
|
|
|
18
18
|
<script setup>
|
|
19
|
+
import { Dialog as TDialog, Tag as TTag, Divider as TDivider, Select as TSelect, Button as TButton, MessagePlugin } from 'tdesign-vue-next';
|
|
19
20
|
import { $Http } from '@/plugins/http';
|
|
20
21
|
|
|
21
22
|
const $Prop = defineProps({
|
package/views/admin/index.vue
CHANGED
|
@@ -2,61 +2,61 @@
|
|
|
2
2
|
<div class="page-admin 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
|
+
</TButton>
|
|
18
18
|
</div>
|
|
19
19
|
<div class="right">
|
|
20
|
-
<
|
|
20
|
+
<TButton @click="$Method.handleRefresh">
|
|
21
21
|
<template #icon>
|
|
22
|
-
<
|
|
22
|
+
<ILucideRotateCw />
|
|
23
23
|
</template>
|
|
24
24
|
刷新
|
|
25
|
-
</
|
|
25
|
+
</TButton>
|
|
26
26
|
</div>
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
<div class="main-table">
|
|
30
|
-
<
|
|
30
|
+
<TTable :data="$Data.tableData" :columns="$Data.columns" header-cell-class-name="custom-table-cell-class" size="small" height="100%" row-key="id">
|
|
31
31
|
<template #state="{ row }">
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
<
|
|
32
|
+
<TTag v-if="row.state === 1" theme="success">正常</TTag>
|
|
33
|
+
<TTag v-else-if="row.state === 2" theme="warning">禁用</TTag>
|
|
34
|
+
<TTag v-else theme="danger">已删除</TTag>
|
|
35
35
|
</template>
|
|
36
36
|
<template #operation="{ row }">
|
|
37
|
-
<
|
|
38
|
-
<
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
<
|
|
37
|
+
<TDropdown trigger="click" min-column-width="120" @click="(data) => $Method.onAction(data.value, row)">
|
|
38
|
+
<TButton variant="text" size="small">操作</TButton>
|
|
39
|
+
<TDropdownMenu slot="dropdown">
|
|
40
|
+
<TDropdownItem value="role">
|
|
41
|
+
<ILucideUser />
|
|
42
42
|
分配角色
|
|
43
|
-
</
|
|
44
|
-
<
|
|
45
|
-
<
|
|
43
|
+
</TDropdownItem>
|
|
44
|
+
<TDropdownItem value="upd">
|
|
45
|
+
<ILucidePencil />
|
|
46
46
|
编辑
|
|
47
|
-
</
|
|
48
|
-
<
|
|
49
|
-
<
|
|
47
|
+
</TDropdownItem>
|
|
48
|
+
<TDropdownItem value="del" :divider="true">
|
|
49
|
+
<ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
|
|
50
50
|
删除
|
|
51
|
-
</
|
|
52
|
-
</
|
|
53
|
-
</
|
|
51
|
+
</TDropdownItem>
|
|
52
|
+
</TDropdownMenu>
|
|
53
|
+
</TDropdown>
|
|
54
54
|
</template>
|
|
55
|
-
</
|
|
55
|
+
</TTable>
|
|
56
56
|
</div>
|
|
57
57
|
|
|
58
58
|
<div class="main-page">
|
|
59
|
-
<
|
|
59
|
+
<TPagination :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
|
<!-- 编辑对话框组件 -->
|
|
@@ -68,6 +68,12 @@
|
|
|
68
68
|
</template>
|
|
69
69
|
|
|
70
70
|
<script setup>
|
|
71
|
+
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';
|
|
72
|
+
import ILucidePlus from '~icons/lucide/plus';
|
|
73
|
+
import ILucideRotateCw from '~icons/lucide/rotate-cw';
|
|
74
|
+
import ILucideUser from '~icons/lucide/user';
|
|
75
|
+
import ILucidePencil from '~icons/lucide/pencil';
|
|
76
|
+
import ILucideTrash2 from '~icons/lucide/trash-2';
|
|
71
77
|
import EditDialog from './components/edit.vue';
|
|
72
78
|
import RoleDialog from './components/role.vue';
|
|
73
79
|
import { $Http } from '@/plugins/http';
|
|
@@ -1,40 +1,41 @@
|
|
|
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
|
-
</
|
|
1
|
+
<template>
|
|
2
|
+
<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">
|
|
3
|
+
<TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
|
|
4
|
+
<TFormItem label="字典名称" prop="name">
|
|
5
|
+
<TInput v-model="$Data.formData.name" placeholder="请输入字典名称" />
|
|
6
|
+
</TFormItem>
|
|
7
|
+
<TFormItem label="字典代码" prop="code">
|
|
8
|
+
<TInput v-model="$Data.formData.code" placeholder="请输入字典代码，如：gender" />
|
|
9
|
+
</TFormItem>
|
|
10
|
+
<TFormItem label="字典值" prop="value">
|
|
11
|
+
<TInput v-model="$Data.formData.value" placeholder="请输入字典值" />
|
|
12
|
+
</TFormItem>
|
|
13
|
+
<TFormItem label="父级ID" prop="pid">
|
|
14
|
+
<TInputNumber v-model="$Data.formData.pid" :min="0" :max="999999999999999" />
|
|
15
|
+
</TFormItem>
|
|
16
|
+
<TFormItem label="排序" prop="sort">
|
|
17
|
+
<TInputNumber v-model="$Data.formData.sort" :min="0" :max="9999" />
|
|
18
|
+
</TFormItem>
|
|
19
|
+
<TFormItem label="描述" prop="description">
|
|
20
|
+
<TInput v-model="$Data.formData.description" type="textarea" placeholder="请输入描述" :rows="3" />
|
|
21
|
+
</TFormItem>
|
|
22
|
+
<TFormItem label="状态" prop="state">
|
|
23
|
+
<TRadioGroup v-model="$Data.formData.state">
|
|
24
|
+
<TRadio :label="1">正常</TRadio>
|
|
25
|
+
<TRadio :label="2">禁用</TRadio>
|
|
26
|
+
</TRadioGroup>
|
|
27
|
+
</TFormItem>
|
|
28
|
+
</TForm>
|
|
29
29
|
<template #footer>
|
|
30
|
-
<
|
|
31
|
-
<
|
|
30
|
+
<TButton @click="$Method.onClose">取消</TButton>
|
|
31
|
+
<TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
|
|
32
32
|
</template>
|
|
33
|
-
</
|
|
33
|
+
</TDialog>
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
36
|
<script setup>
|
|
37
37
|
import { watch } from 'vue';
|
|
38
|
+
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';
|
|
38
39
|
import { $Http } from '@/plugins/http';
|
|
39
40
|
|
|
40
41
|
const $Prop = defineProps({
|
package/views/dict/index.vue
CHANGED
|
@@ -2,49 +2,49 @@
|
|
|
2
2
|
<div class="page-dict 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.dictList" :columns="$Data.columns" header-cell-class-name="custom-table-cell-class" size="small" height="100%" row-key="id">
|
|
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="del" :divider="true">
|
|
37
|
+
<ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
|
|
38
38
|
删除
|
|
39
|
-
</
|
|
40
|
-
</
|
|
41
|
-
</
|
|
39
|
+
</TDropdownItem>
|
|
40
|
+
</TDropdownMenu>
|
|
41
|
+
</TDropdown>
|
|
42
42
|
</template>
|
|
43
|
-
</
|
|
43
|
+
</TTable>
|
|
44
44
|
</div>
|
|
45
45
|
|
|
46
46
|
<div class="main-page">
|
|
47
|
-
<
|
|
47
|
+
<TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
|
|
48
48
|
</div>
|
|
49
49
|
|
|
50
50
|
<!-- 编辑对话框组件 -->
|
|
@@ -53,6 +53,11 @@
|
|
|
53
53
|
</template>
|
|
54
54
|
|
|
55
55
|
<script setup>
|
|
56
|
+
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';
|
|
57
|
+
import ILucidePlus from '~icons/lucide/plus';
|
|
58
|
+
import ILucideRotateCw from '~icons/lucide/rotate-cw';
|
|
59
|
+
import ILucidePencil from '~icons/lucide/pencil';
|
|
60
|
+
import ILucideTrash2 from '~icons/lucide/trash-2';
|
|
56
61
|
import EditDialog from './components/edit.vue';
|
|
57
62
|
import { $Http } from '@/plugins/http';
|
|
58
63
|
|
|
@@ -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
|
+
<i-lucide:package />
|
|
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
|
+
<i-lucide:box />
|
|
12
12
|
</div>
|
|
13
13
|
<div class="addon-info">
|
|
14
14
|
<div class="addon-title">
|
|
@@ -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
|
+
<ILucideServer />
|
|
5
5
|
<h2>运行环境</h2>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="section-content">
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
</template>
|
|
37
37
|
|
|
38
38
|
<script setup>
|
|
39
|
+
import ILucideServer from '~icons/lucide/server';
|
|
39
40
|
import { $Http } from '@/plugins/http';
|
|
40
41
|
|
|
41
42
|
// 组件内部数据
|
|
@@ -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
|
+
<ILucideActivity />
|
|
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
|
+
<ILucideClock />
|
|
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
|
+
<ILucideTrendingUp />
|
|
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
|
+
<ILucideAlertCircle />
|
|
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
|
+
<ILucideActivity />
|
|
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
|
+
<ILucideAlertTriangle />
|
|
49
49
|
<span>最慢接口: {{ performanceMetrics.slowestApi.path }} ({{ performanceMetrics.slowestApi.time }}ms)</span>
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
@@ -53,6 +53,11 @@
|
|
|
53
53
|
</template>
|
|
54
54
|
|
|
55
55
|
<script setup>
|
|
56
|
+
import ILucideActivity from '~icons/lucide/activity';
|
|
57
|
+
import ILucideClock from '~icons/lucide/clock';
|
|
58
|
+
import ILucideTrendingUp from '~icons/lucide/trending-up';
|
|
59
|
+
import ILucideAlertCircle from '~icons/lucide/alert-circle';
|
|
60
|
+
import ILucideAlertTriangle from '~icons/lucide/alert-triangle';
|
|
56
61
|
import { $Http } from '@/plugins/http';
|
|
57
62
|
|
|
58
63
|
// 组件内部数据
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="section-block">
|
|
3
3
|
<div class="section-content">
|
|
4
|
-
<
|
|
4
|
+
<TButton theme="primary" size="large" @click="handleClearCache">
|
|
5
5
|
<template #prefix>
|
|
6
|
-
<
|
|
6
|
+
<ILucideRotateCw />
|
|
7
7
|
</template>
|
|
8
8
|
刷新缓存
|
|
9
|
-
</
|
|
9
|
+
</TButton>
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
</template>
|
|
13
13
|
|
|
14
14
|
<script setup>
|
|
15
|
+
import { Button as TButton } from 'tdesign-vue-next';
|
|
16
|
+
import ILucideRotateCw from '~icons/lucide/rotate-cw';
|
|
17
|
+
|
|
15
18
|
const handleClearCache = () => {
|
|
16
19
|
console.log('刷新缓存');
|
|
17
20
|
};
|
|
@@ -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
|
+
<ILucideCheckCircle />
|
|
5
5
|
<h2>服务状态</h2>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="section-content">
|
|
8
8
|
<div class="config-grid">
|
|
9
9
|
<div v-for="service in services" :key="service.name" class="config-card" :class="`config-${service.status}`">
|
|
10
10
|
<div class="config-icon">
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
<
|
|
11
|
+
<ILucideDatabase v-if="service.name === '数据库'" style="width: 20px; height: 20px" />
|
|
12
|
+
<ILucideZap v-else-if="service.name === 'Redis'" style="width: 20px; height: 20px" />
|
|
13
|
+
<ILucideHardDrive v-else-if="service.name === '文件系统'" style="width: 20px; height: 20px" />
|
|
14
|
+
<ILucideMail v-else-if="service.name === '邮件服务'" style="width: 20px; height: 20px" />
|
|
15
|
+
<ILucideCloud v-else-if="service.name === 'OSS存储'" style="width: 20px; height: 20px" />
|
|
16
|
+
<ILucideCircle v-else style="width: 20px; height: 20px" />
|
|
17
17
|
</div>
|
|
18
18
|
<div class="config-info">
|
|
19
19
|
<div class="config-name">{{ service.name }}</div>
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
</div>
|
|
24
24
|
</div>
|
|
25
25
|
<div class="config-badge">
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
<
|
|
26
|
+
<ILucideCheckCircle v-if="service.status === 'running'" style="width: 32px; height: 32px" />
|
|
27
|
+
<ILucideXCircle v-else-if="service.status === 'stopped'" style="width: 32px; height: 32px" />
|
|
28
|
+
<ILucideAlertCircle v-else-if="service.status === 'unconfigured'" style="width: 32px; height: 32px" />
|
|
29
|
+
<ILucideCircle v-else style="width: 32px; height: 32px" />
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
@@ -35,6 +35,15 @@
|
|
|
35
35
|
</template>
|
|
36
36
|
|
|
37
37
|
<script setup>
|
|
38
|
+
import ILucideCheckCircle from '~icons/lucide/check-circle';
|
|
39
|
+
import ILucideDatabase from '~icons/lucide/database';
|
|
40
|
+
import ILucideZap from '~icons/lucide/zap';
|
|
41
|
+
import ILucideHardDrive from '~icons/lucide/hard-drive';
|
|
42
|
+
import ILucideMail from '~icons/lucide/mail';
|
|
43
|
+
import ILucideCloud from '~icons/lucide/cloud';
|
|
44
|
+
import ILucideCircle from '~icons/lucide/circle';
|
|
45
|
+
import ILucideXCircle from '~icons/lucide/x-circle';
|
|
46
|
+
import ILucideAlertCircle from '~icons/lucide/alert-circle';
|
|
38
47
|
import { $Http } from '@/plugins/http';
|
|
39
48
|
|
|
40
49
|
// 组件内部数据
|