@morya-ui/mcp 0.4.4 → 0.5.0
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/LICENSE +21 -21
- package/README.md +154 -154
- package/bin/morya-ui-mcp.js +2 -2
- package/data/catalog.json +1368 -413
- package/data/example-coverage.json +78 -73
- package/data/golden-pages/dashboard-page.vue +161 -161
- package/data/golden-pages/detail-page.vue +147 -147
- package/data/golden-pages/empty-state.vue +56 -56
- package/data/golden-pages/form-in-dialog.vue +166 -166
- package/data/golden-pages/form-page.vue +107 -107
- package/data/golden-pages/landing-page.vue +382 -382
- package/data/golden-pages/list-page-dense.vue +168 -168
- package/data/golden-pages/list-page-rail.vue +272 -272
- package/data/golden-pages/list-page.vue +222 -222
- package/data/golden-pages/login-page.vue +244 -244
- package/data/golden-pages/result-page.vue +84 -84
- package/data/golden-pages/settings-page.vue +163 -163
- package/data/golden-pages/wizard-form.vue +167 -167
- package/dist/decisions.js +1299 -6
- package/dist/page-snippets.js +669 -669
- package/dist/style-shells.js +153 -153
- package/dist/tools.js +192 -192
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-10-
|
|
3
|
-
"catalogGeneratedAt": "2026-10-
|
|
2
|
+
"generatedAt": "2026-10-13T08:59:00.584Z",
|
|
3
|
+
"catalogGeneratedAt": "2026-10-13T08:55:20.652Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"id": "Accordion",
|
|
@@ -566,6 +566,54 @@
|
|
|
566
566
|
"missing": []
|
|
567
567
|
}
|
|
568
568
|
},
|
|
569
|
+
{
|
|
570
|
+
"id": "ColorPicker",
|
|
571
|
+
"exportName": "MColorPicker",
|
|
572
|
+
"examples": 12,
|
|
573
|
+
"props": {
|
|
574
|
+
"total": 17,
|
|
575
|
+
"covered": 5,
|
|
576
|
+
"missing": [
|
|
577
|
+
"disabled",
|
|
578
|
+
"disabledAlpha",
|
|
579
|
+
"format",
|
|
580
|
+
"size",
|
|
581
|
+
"placement",
|
|
582
|
+
"teleport",
|
|
583
|
+
"appendTo",
|
|
584
|
+
"transition",
|
|
585
|
+
"pt",
|
|
586
|
+
"label",
|
|
587
|
+
"colors",
|
|
588
|
+
"defaultOpen"
|
|
589
|
+
]
|
|
590
|
+
},
|
|
591
|
+
"events": {
|
|
592
|
+
"total": 5,
|
|
593
|
+
"covered": 0,
|
|
594
|
+
"missing": [
|
|
595
|
+
"update:modelValue",
|
|
596
|
+
"change",
|
|
597
|
+
"clear",
|
|
598
|
+
"show",
|
|
599
|
+
"hide"
|
|
600
|
+
]
|
|
601
|
+
},
|
|
602
|
+
"slots": {
|
|
603
|
+
"total": 0,
|
|
604
|
+
"covered": 0,
|
|
605
|
+
"missing": []
|
|
606
|
+
},
|
|
607
|
+
"methods": {
|
|
608
|
+
"total": 3,
|
|
609
|
+
"covered": 0,
|
|
610
|
+
"missing": [
|
|
611
|
+
"open",
|
|
612
|
+
"close",
|
|
613
|
+
"toggle"
|
|
614
|
+
]
|
|
615
|
+
}
|
|
616
|
+
},
|
|
569
617
|
{
|
|
570
618
|
"id": "CommandMenu",
|
|
571
619
|
"exportName": "MCommandMenu",
|
|
@@ -794,17 +842,13 @@
|
|
|
794
842
|
{
|
|
795
843
|
"id": "DatePicker",
|
|
796
844
|
"exportName": "MDatePicker",
|
|
797
|
-
"examples":
|
|
845
|
+
"examples": 50,
|
|
798
846
|
"props": {
|
|
799
|
-
"total":
|
|
800
|
-
"covered":
|
|
847
|
+
"total": 25,
|
|
848
|
+
"covered": 21,
|
|
801
849
|
"missing": [
|
|
802
|
-
"showSeconds",
|
|
803
|
-
"format",
|
|
804
850
|
"clearable",
|
|
805
|
-
"teleport",
|
|
806
851
|
"transition",
|
|
807
|
-
"errorMessage",
|
|
808
852
|
"id",
|
|
809
853
|
"pt"
|
|
810
854
|
]
|
|
@@ -821,11 +865,9 @@
|
|
|
821
865
|
]
|
|
822
866
|
},
|
|
823
867
|
"slots": {
|
|
824
|
-
"total":
|
|
825
|
-
"covered":
|
|
826
|
-
"missing": [
|
|
827
|
-
"trigger"
|
|
828
|
-
]
|
|
868
|
+
"total": 3,
|
|
869
|
+
"covered": 3,
|
|
870
|
+
"missing": []
|
|
829
871
|
},
|
|
830
872
|
"methods": {
|
|
831
873
|
"total": 0,
|
|
@@ -1551,42 +1593,6 @@
|
|
|
1551
1593
|
]
|
|
1552
1594
|
}
|
|
1553
1595
|
},
|
|
1554
|
-
{
|
|
1555
|
-
"id": "InputColor",
|
|
1556
|
-
"exportName": "MInputColor",
|
|
1557
|
-
"examples": 6,
|
|
1558
|
-
"props": {
|
|
1559
|
-
"total": 8,
|
|
1560
|
-
"covered": 2,
|
|
1561
|
-
"missing": [
|
|
1562
|
-
"disabled",
|
|
1563
|
-
"id",
|
|
1564
|
-
"invalid",
|
|
1565
|
-
"label",
|
|
1566
|
-
"size",
|
|
1567
|
-
"pt"
|
|
1568
|
-
]
|
|
1569
|
-
},
|
|
1570
|
-
"events": {
|
|
1571
|
-
"total": 1,
|
|
1572
|
-
"covered": 0,
|
|
1573
|
-
"missing": [
|
|
1574
|
-
"update:modelValue"
|
|
1575
|
-
]
|
|
1576
|
-
},
|
|
1577
|
-
"slots": {
|
|
1578
|
-
"total": 1,
|
|
1579
|
-
"covered": 0,
|
|
1580
|
-
"missing": [
|
|
1581
|
-
"trigger"
|
|
1582
|
-
]
|
|
1583
|
-
},
|
|
1584
|
-
"methods": {
|
|
1585
|
-
"total": 0,
|
|
1586
|
-
"covered": 0,
|
|
1587
|
-
"missing": []
|
|
1588
|
-
}
|
|
1589
|
-
},
|
|
1590
1596
|
{
|
|
1591
1597
|
"id": "InputGroup",
|
|
1592
1598
|
"exportName": "MInputGroup",
|
|
@@ -2237,12 +2243,12 @@
|
|
|
2237
2243
|
{
|
|
2238
2244
|
"id": "OrderList",
|
|
2239
2245
|
"exportName": "MOrderList",
|
|
2240
|
-
"examples":
|
|
2246
|
+
"examples": 8,
|
|
2241
2247
|
"props": {
|
|
2242
|
-
"total":
|
|
2243
|
-
"covered":
|
|
2248
|
+
"total": 8,
|
|
2249
|
+
"covered": 3,
|
|
2244
2250
|
"missing": [
|
|
2245
|
-
"
|
|
2251
|
+
"selection",
|
|
2246
2252
|
"listStyle",
|
|
2247
2253
|
"dragdrop",
|
|
2248
2254
|
"emptyMessage",
|
|
@@ -2250,18 +2256,18 @@
|
|
|
2250
2256
|
]
|
|
2251
2257
|
},
|
|
2252
2258
|
"events": {
|
|
2253
|
-
"total":
|
|
2259
|
+
"total": 3,
|
|
2254
2260
|
"covered": 0,
|
|
2255
2261
|
"missing": [
|
|
2256
2262
|
"update:modelValue",
|
|
2263
|
+
"update:selection",
|
|
2257
2264
|
"reorder"
|
|
2258
2265
|
]
|
|
2259
2266
|
},
|
|
2260
2267
|
"slots": {
|
|
2261
2268
|
"total": 2,
|
|
2262
|
-
"covered":
|
|
2269
|
+
"covered": 1,
|
|
2263
2270
|
"missing": [
|
|
2264
|
-
"item",
|
|
2265
2271
|
"empty"
|
|
2266
2272
|
]
|
|
2267
2273
|
},
|
|
@@ -3241,10 +3247,10 @@
|
|
|
3241
3247
|
{
|
|
3242
3248
|
"id": "Table",
|
|
3243
3249
|
"exportName": "MTable",
|
|
3244
|
-
"examples":
|
|
3250
|
+
"examples": 56,
|
|
3245
3251
|
"props": {
|
|
3246
|
-
"total":
|
|
3247
|
-
"covered":
|
|
3252
|
+
"total": 80,
|
|
3253
|
+
"covered": 35,
|
|
3248
3254
|
"missing": [
|
|
3249
3255
|
"fit",
|
|
3250
3256
|
"selectedItem",
|
|
@@ -3252,19 +3258,22 @@
|
|
|
3252
3258
|
"showHeader",
|
|
3253
3259
|
"showRowsPerPage",
|
|
3254
3260
|
"fill",
|
|
3255
|
-
"
|
|
3261
|
+
"virtualOverscan",
|
|
3256
3262
|
"expandConfig",
|
|
3257
3263
|
"radioConfig",
|
|
3258
3264
|
"rowHover",
|
|
3259
3265
|
"sortField",
|
|
3260
3266
|
"sortOrder",
|
|
3267
|
+
"multiSort",
|
|
3268
|
+
"mustSort",
|
|
3261
3269
|
"sortMode",
|
|
3262
3270
|
"searchField",
|
|
3263
3271
|
"searchValue",
|
|
3264
3272
|
"filterOptions",
|
|
3273
|
+
"filterModel",
|
|
3274
|
+
"filters",
|
|
3265
3275
|
"showOverflowTooltip",
|
|
3266
3276
|
"rowKey",
|
|
3267
|
-
"size",
|
|
3268
3277
|
"ariaLabel",
|
|
3269
3278
|
"bodyExpandRowClassName",
|
|
3270
3279
|
"bodyItemClassName",
|
|
@@ -3274,7 +3283,6 @@
|
|
|
3274
3283
|
"clickRowToExpand",
|
|
3275
3284
|
"currentRowKey",
|
|
3276
3285
|
"expandColumnWidth",
|
|
3277
|
-
"filters",
|
|
3278
3286
|
"fixedCheckbox",
|
|
3279
3287
|
"fixedExpand",
|
|
3280
3288
|
"fixedHeader",
|
|
@@ -3283,8 +3291,6 @@
|
|
|
3283
3291
|
"headerItemClassName",
|
|
3284
3292
|
"headerTextDirection",
|
|
3285
3293
|
"indexColumnWidth",
|
|
3286
|
-
"multiSort",
|
|
3287
|
-
"mustSort",
|
|
3288
3294
|
"showIndex",
|
|
3289
3295
|
"showIndexSymbol",
|
|
3290
3296
|
"tableClassName",
|
|
@@ -3295,9 +3301,11 @@
|
|
|
3295
3301
|
},
|
|
3296
3302
|
"events": {
|
|
3297
3303
|
"total": 20,
|
|
3298
|
-
"covered":
|
|
3304
|
+
"covered": 7,
|
|
3299
3305
|
"missing": [
|
|
3300
|
-
"sort",
|
|
3306
|
+
"sort-change",
|
|
3307
|
+
"filter-change",
|
|
3308
|
+
"expand-change",
|
|
3301
3309
|
"row-click",
|
|
3302
3310
|
"row-dblclick",
|
|
3303
3311
|
"row-contextmenu",
|
|
@@ -3305,12 +3313,9 @@
|
|
|
3305
3313
|
"deselect-row",
|
|
3306
3314
|
"select-all",
|
|
3307
3315
|
"current-change",
|
|
3308
|
-
"expand",
|
|
3309
3316
|
"update:current-row-key",
|
|
3310
|
-
"filter",
|
|
3311
|
-
"update:
|
|
3312
|
-
"update:columnOrder",
|
|
3313
|
-
"update:selectedItem"
|
|
3317
|
+
"update:filter-model",
|
|
3318
|
+
"update:selected-item"
|
|
3314
3319
|
]
|
|
3315
3320
|
},
|
|
3316
3321
|
"slots": {
|
|
@@ -4004,6 +4009,6 @@
|
|
|
4004
4009
|
"summary": {
|
|
4005
4010
|
"components": 107,
|
|
4006
4011
|
"componentsWithMissingCoverage": 106,
|
|
4007
|
-
"totalExamples":
|
|
4012
|
+
"totalExamples": 1013
|
|
4008
4013
|
}
|
|
4009
4014
|
}
|
|
@@ -1,161 +1,161 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
/**
|
|
3
|
-
* 黄金样例:仪表盘页
|
|
4
|
-
* @see DESIGN.md · morya-ui-pages references/page-layouts.md · visual-craft § Ops polish
|
|
5
|
-
*/
|
|
6
|
-
import {
|
|
7
|
-
MAlert,
|
|
8
|
-
MBreadcrumb,
|
|
9
|
-
MCard,
|
|
10
|
-
MConfigProvider,
|
|
11
|
-
MGrid,
|
|
12
|
-
MGridItem,
|
|
13
|
-
MLayout,
|
|
14
|
-
MLayoutContent,
|
|
15
|
-
MLayoutHeader,
|
|
16
|
-
MPageContent,
|
|
17
|
-
MEmpty,
|
|
18
|
-
MPageHeader,
|
|
19
|
-
MPageStat,
|
|
20
|
-
MStatistic,
|
|
21
|
-
MStatus,
|
|
22
|
-
MTable,
|
|
23
|
-
MTag,
|
|
24
|
-
zhCN,
|
|
25
|
-
} from 'morya-ui'
|
|
26
|
-
|
|
27
|
-
const stats = [
|
|
28
|
-
{ label: '总用户', value: '12,480', trend: '+8.2%', trendDirection: 'up' as const, trendLabel: '较上月', icon: 'users' },
|
|
29
|
-
{ label: '今日活跃', value: '1,926', trend: '+3.1%', trendDirection: 'up' as const, trendLabel: '较昨日', icon: 'activity' },
|
|
30
|
-
{ label: '待处理工单', value: '47', trend: '-12%', trendDirection: 'down' as const, trendLabel: '较上周', trendType: 'warning' as const, icon: 'clipboard' },
|
|
31
|
-
{ label: '系统健康', value: '99.9%', trend: '稳定', trendType: 'secondary' as const, icon: 'heart' },
|
|
32
|
-
]
|
|
33
|
-
|
|
34
|
-
const recentColumns = [
|
|
35
|
-
{ key: 'id', label: '工单号', width: 96 },
|
|
36
|
-
{ key: 'title', label: '标题' },
|
|
37
|
-
{ key: 'priority', label: '优先级', width: 96 },
|
|
38
|
-
{ key: 'status', label: '状态', width: 110 },
|
|
39
|
-
]
|
|
40
|
-
|
|
41
|
-
const recentRows = [
|
|
42
|
-
{ id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
|
|
43
|
-
{ id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
|
|
44
|
-
{ id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
|
|
45
|
-
]
|
|
46
|
-
|
|
47
|
-
function priorityType(p: string) {
|
|
48
|
-
if (p === 'high') return 'danger'
|
|
49
|
-
if (p === 'medium') return 'warning'
|
|
50
|
-
return 'secondary'
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function priorityLabel(p: string) {
|
|
54
|
-
if (p === 'high') return '高'
|
|
55
|
-
if (p === 'medium') return '中'
|
|
56
|
-
return '低'
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function statusLabel(s: string) {
|
|
60
|
-
if (s === 'open') return '待处理'
|
|
61
|
-
if (s === 'progress') return '进行中'
|
|
62
|
-
return '已完成'
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function statusType(s: string) {
|
|
66
|
-
if (s === 'open') return 'warning'
|
|
67
|
-
if (s === 'progress') return 'info'
|
|
68
|
-
return 'success'
|
|
69
|
-
}
|
|
70
|
-
</script>
|
|
71
|
-
|
|
72
|
-
<template>
|
|
73
|
-
<MConfigProvider :locale="zhCN">
|
|
74
|
-
<MLayout fill-viewport>
|
|
75
|
-
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
76
|
-
<MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
|
|
77
|
-
</MLayoutHeader>
|
|
78
|
-
|
|
79
|
-
<MLayoutContent>
|
|
80
|
-
<MPageContent density="spacious">
|
|
81
|
-
<MPageHeader
|
|
82
|
-
title="运营概览"
|
|
83
|
-
description="关注今日活跃与待处理工单,异常优先下钻。"
|
|
84
|
-
/>
|
|
85
|
-
|
|
86
|
-
<MAlert
|
|
87
|
-
type="info"
|
|
88
|
-
title="报表管道延迟约 15 分钟"
|
|
89
|
-
description="实时告警仍可用;看板数字以管道落库为准。"
|
|
90
|
-
closable
|
|
91
|
-
/>
|
|
92
|
-
|
|
93
|
-
<MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
|
|
94
|
-
<MGridItem v-for="item in stats" :key="item.label" :span="1">
|
|
95
|
-
<MPageStat
|
|
96
|
-
:label="item.label"
|
|
97
|
-
:value="item.value"
|
|
98
|
-
:trend="item.trend"
|
|
99
|
-
:trend-type="item.trendType ?? 'primary'"
|
|
100
|
-
:trend-direction="item.trendDirection"
|
|
101
|
-
:trend-label="item.trendLabel"
|
|
102
|
-
:icon="item.icon"
|
|
103
|
-
/>
|
|
104
|
-
</MGridItem>
|
|
105
|
-
</MGrid>
|
|
106
|
-
|
|
107
|
-
<MGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen">
|
|
108
|
-
<MGridItem :span="1">
|
|
109
|
-
<MCard title="趋势概览" shadow="always">
|
|
110
|
-
<MEmpty
|
|
111
|
-
title="还没有趋势数据"
|
|
112
|
-
description="接入图表后将展示近 7 日活跃与转化。"
|
|
113
|
-
illustration="activity-low"
|
|
114
|
-
/>
|
|
115
|
-
</MCard>
|
|
116
|
-
</MGridItem>
|
|
117
|
-
<MGridItem :span="1">
|
|
118
|
-
<MCard title="最近工单" shadow="always">
|
|
119
|
-
<div class="dashboard-plain-stats">
|
|
120
|
-
<MStatistic title="本周新建" :value="128" />
|
|
121
|
-
<MStatistic title="平均处理时长" :value="2.4" suffix="h" :precision="1" />
|
|
122
|
-
</div>
|
|
123
|
-
<MTable
|
|
124
|
-
:columns="recentColumns"
|
|
125
|
-
:rows="recentRows"
|
|
126
|
-
size="small"
|
|
127
|
-
:paginator="false"
|
|
128
|
-
bordered
|
|
129
|
-
row-key="id"
|
|
130
|
-
aria-label="最近工单"
|
|
131
|
-
>
|
|
132
|
-
<template #cell-priority="{ value }">
|
|
133
|
-
<MTag
|
|
134
|
-
:value="priorityLabel(String(value))"
|
|
135
|
-
:type="priorityType(String(value))"
|
|
136
|
-
/>
|
|
137
|
-
</template>
|
|
138
|
-
<template #cell-status="{ value }">
|
|
139
|
-
<MStatus
|
|
140
|
-
:label="statusLabel(String(value))"
|
|
141
|
-
:type="statusType(String(value))"
|
|
142
|
-
/>
|
|
143
|
-
</template>
|
|
144
|
-
</MTable>
|
|
145
|
-
</MCard>
|
|
146
|
-
</MGridItem>
|
|
147
|
-
</MGrid>
|
|
148
|
-
</MPageContent>
|
|
149
|
-
</MLayoutContent>
|
|
150
|
-
</MLayout>
|
|
151
|
-
</MConfigProvider>
|
|
152
|
-
</template>
|
|
153
|
-
|
|
154
|
-
<style scoped>
|
|
155
|
-
.dashboard-plain-stats {
|
|
156
|
-
display: flex;
|
|
157
|
-
flex-wrap: wrap;
|
|
158
|
-
gap: var(--m-space-6);
|
|
159
|
-
margin-bottom: var(--m-space-4);
|
|
160
|
-
}
|
|
161
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* 黄金样例:仪表盘页
|
|
4
|
+
* @see DESIGN.md · morya-ui-pages references/page-layouts.md · visual-craft § Ops polish
|
|
5
|
+
*/
|
|
6
|
+
import {
|
|
7
|
+
MAlert,
|
|
8
|
+
MBreadcrumb,
|
|
9
|
+
MCard,
|
|
10
|
+
MConfigProvider,
|
|
11
|
+
MGrid,
|
|
12
|
+
MGridItem,
|
|
13
|
+
MLayout,
|
|
14
|
+
MLayoutContent,
|
|
15
|
+
MLayoutHeader,
|
|
16
|
+
MPageContent,
|
|
17
|
+
MEmpty,
|
|
18
|
+
MPageHeader,
|
|
19
|
+
MPageStat,
|
|
20
|
+
MStatistic,
|
|
21
|
+
MStatus,
|
|
22
|
+
MTable,
|
|
23
|
+
MTag,
|
|
24
|
+
zhCN,
|
|
25
|
+
} from 'morya-ui'
|
|
26
|
+
|
|
27
|
+
const stats = [
|
|
28
|
+
{ label: '总用户', value: '12,480', trend: '+8.2%', trendDirection: 'up' as const, trendLabel: '较上月', icon: 'users' },
|
|
29
|
+
{ label: '今日活跃', value: '1,926', trend: '+3.1%', trendDirection: 'up' as const, trendLabel: '较昨日', icon: 'activity' },
|
|
30
|
+
{ label: '待处理工单', value: '47', trend: '-12%', trendDirection: 'down' as const, trendLabel: '较上周', trendType: 'warning' as const, icon: 'clipboard' },
|
|
31
|
+
{ label: '系统健康', value: '99.9%', trend: '稳定', trendType: 'secondary' as const, icon: 'heart' },
|
|
32
|
+
]
|
|
33
|
+
|
|
34
|
+
const recentColumns = [
|
|
35
|
+
{ key: 'id', label: '工单号', width: 96 },
|
|
36
|
+
{ key: 'title', label: '标题' },
|
|
37
|
+
{ key: 'priority', label: '优先级', width: 96 },
|
|
38
|
+
{ key: 'status', label: '状态', width: 110 },
|
|
39
|
+
]
|
|
40
|
+
|
|
41
|
+
const recentRows = [
|
|
42
|
+
{ id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
|
|
43
|
+
{ id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
|
|
44
|
+
{ id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
|
|
45
|
+
]
|
|
46
|
+
|
|
47
|
+
function priorityType(p: string) {
|
|
48
|
+
if (p === 'high') return 'danger'
|
|
49
|
+
if (p === 'medium') return 'warning'
|
|
50
|
+
return 'secondary'
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function priorityLabel(p: string) {
|
|
54
|
+
if (p === 'high') return '高'
|
|
55
|
+
if (p === 'medium') return '中'
|
|
56
|
+
return '低'
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function statusLabel(s: string) {
|
|
60
|
+
if (s === 'open') return '待处理'
|
|
61
|
+
if (s === 'progress') return '进行中'
|
|
62
|
+
return '已完成'
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function statusType(s: string) {
|
|
66
|
+
if (s === 'open') return 'warning'
|
|
67
|
+
if (s === 'progress') return 'info'
|
|
68
|
+
return 'success'
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
<template>
|
|
73
|
+
<MConfigProvider :locale="zhCN">
|
|
74
|
+
<MLayout fill-viewport>
|
|
75
|
+
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
76
|
+
<MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
|
|
77
|
+
</MLayoutHeader>
|
|
78
|
+
|
|
79
|
+
<MLayoutContent>
|
|
80
|
+
<MPageContent density="spacious">
|
|
81
|
+
<MPageHeader
|
|
82
|
+
title="运营概览"
|
|
83
|
+
description="关注今日活跃与待处理工单,异常优先下钻。"
|
|
84
|
+
/>
|
|
85
|
+
|
|
86
|
+
<MAlert
|
|
87
|
+
type="info"
|
|
88
|
+
title="报表管道延迟约 15 分钟"
|
|
89
|
+
description="实时告警仍可用;看板数字以管道落库为准。"
|
|
90
|
+
closable
|
|
91
|
+
/>
|
|
92
|
+
|
|
93
|
+
<MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
|
|
94
|
+
<MGridItem v-for="item in stats" :key="item.label" :span="1">
|
|
95
|
+
<MPageStat
|
|
96
|
+
:label="item.label"
|
|
97
|
+
:value="item.value"
|
|
98
|
+
:trend="item.trend"
|
|
99
|
+
:trend-type="item.trendType ?? 'primary'"
|
|
100
|
+
:trend-direction="item.trendDirection"
|
|
101
|
+
:trend-label="item.trendLabel"
|
|
102
|
+
:icon="item.icon"
|
|
103
|
+
/>
|
|
104
|
+
</MGridItem>
|
|
105
|
+
</MGrid>
|
|
106
|
+
|
|
107
|
+
<MGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen">
|
|
108
|
+
<MGridItem :span="1">
|
|
109
|
+
<MCard title="趋势概览" shadow="always">
|
|
110
|
+
<MEmpty
|
|
111
|
+
title="还没有趋势数据"
|
|
112
|
+
description="接入图表后将展示近 7 日活跃与转化。"
|
|
113
|
+
illustration="activity-low"
|
|
114
|
+
/>
|
|
115
|
+
</MCard>
|
|
116
|
+
</MGridItem>
|
|
117
|
+
<MGridItem :span="1">
|
|
118
|
+
<MCard title="最近工单" shadow="always">
|
|
119
|
+
<div class="dashboard-plain-stats">
|
|
120
|
+
<MStatistic title="本周新建" :value="128" />
|
|
121
|
+
<MStatistic title="平均处理时长" :value="2.4" suffix="h" :precision="1" />
|
|
122
|
+
</div>
|
|
123
|
+
<MTable
|
|
124
|
+
:columns="recentColumns"
|
|
125
|
+
:rows="recentRows"
|
|
126
|
+
size="small"
|
|
127
|
+
:paginator="false"
|
|
128
|
+
bordered
|
|
129
|
+
row-key="id"
|
|
130
|
+
aria-label="最近工单"
|
|
131
|
+
>
|
|
132
|
+
<template #cell-priority="{ value }">
|
|
133
|
+
<MTag
|
|
134
|
+
:value="priorityLabel(String(value))"
|
|
135
|
+
:type="priorityType(String(value))"
|
|
136
|
+
/>
|
|
137
|
+
</template>
|
|
138
|
+
<template #cell-status="{ value }">
|
|
139
|
+
<MStatus
|
|
140
|
+
:label="statusLabel(String(value))"
|
|
141
|
+
:type="statusType(String(value))"
|
|
142
|
+
/>
|
|
143
|
+
</template>
|
|
144
|
+
</MTable>
|
|
145
|
+
</MCard>
|
|
146
|
+
</MGridItem>
|
|
147
|
+
</MGrid>
|
|
148
|
+
</MPageContent>
|
|
149
|
+
</MLayoutContent>
|
|
150
|
+
</MLayout>
|
|
151
|
+
</MConfigProvider>
|
|
152
|
+
</template>
|
|
153
|
+
|
|
154
|
+
<style scoped>
|
|
155
|
+
.dashboard-plain-stats {
|
|
156
|
+
display: flex;
|
|
157
|
+
flex-wrap: wrap;
|
|
158
|
+
gap: var(--m-space-6);
|
|
159
|
+
margin-bottom: var(--m-space-4);
|
|
160
|
+
}
|
|
161
|
+
</style>
|