@morya-ui/mcp 0.3.3 → 0.3.4
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/README.md +151 -151
- package/bin/morya-ui-mcp.js +2 -2
- package/data/catalog.json +39 -28
- package/data/example-coverage.json +6 -4
- package/data/golden-pages/dashboard-page.vue +138 -138
- package/data/golden-pages/detail-page.vue +178 -178
- 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 +358 -358
- package/data/golden-pages/list-page-dense.vue +166 -0
- package/data/golden-pages/list-page-rail.vue +270 -0
- package/data/golden-pages/list-page.vue +220 -216
- package/data/golden-pages/login-page.vue +231 -231
- 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 +182 -182
- package/dist/__tests__/tools.test.js +76 -1
- package/dist/decisions.js +42 -1
- package/dist/golden-pages.d.ts +13 -0
- package/dist/golden-pages.js +55 -2
- package/dist/index.js +9 -3
- package/dist/page-snippets.js +254 -225
- package/dist/patterns.d.ts +2 -2
- package/dist/patterns.js +20 -9
- package/dist/style-presets.d.ts +52 -0
- package/dist/style-presets.js +322 -0
- package/dist/tools.d.ts +20 -0
- package/dist/tools.js +313 -204
- package/package.json +13 -11
- package/LICENSE +0 -21
|
@@ -1,138 +1,138 @@
|
|
|
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
|
-
MBreadcrumb,
|
|
8
|
-
MCard,
|
|
9
|
-
MConfigProvider,
|
|
10
|
-
MGrid,
|
|
11
|
-
MGridItem,
|
|
12
|
-
MLayout,
|
|
13
|
-
MLayoutContent,
|
|
14
|
-
MLayoutHeader,
|
|
15
|
-
MPageContent,
|
|
16
|
-
MEmpty,
|
|
17
|
-
MPageHeader,
|
|
18
|
-
MPageStat,
|
|
19
|
-
MStatus,
|
|
20
|
-
MTable,
|
|
21
|
-
MTag,
|
|
22
|
-
zhCN,
|
|
23
|
-
} from 'morya-ui'
|
|
24
|
-
|
|
25
|
-
const stats = [
|
|
26
|
-
{ label: '总用户', value: '12,480', trend: '+8.2%', trendDirection: 'up' as const, trendLabel: '较上月', icon: 'users' },
|
|
27
|
-
{ label: '今日活跃', value: '1,926', trend: '+3.1%', trendDirection: 'up' as const, trendLabel: '较昨日', icon: 'activity' },
|
|
28
|
-
{ label: '待处理工单', value: '47', trend: '-12%', trendDirection: 'down' as const, trendLabel: '较上周', trendSeverity: 'warn' as const, icon: 'clipboard' },
|
|
29
|
-
{ label: '系统健康', value: '99.9%', trend: '稳定', trendSeverity: 'secondary' as const, icon: 'heart' },
|
|
30
|
-
]
|
|
31
|
-
|
|
32
|
-
const recentColumns = [
|
|
33
|
-
{ key: 'id', label: '工单号', width: 96 },
|
|
34
|
-
{ key: 'title', label: '标题' },
|
|
35
|
-
{ key: 'priority', label: '优先级', width: 96 },
|
|
36
|
-
{ key: 'status', label: '状态', width: 110 },
|
|
37
|
-
]
|
|
38
|
-
|
|
39
|
-
const recentRows = [
|
|
40
|
-
{ id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
|
|
41
|
-
{ id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
|
|
42
|
-
{ id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
|
|
43
|
-
]
|
|
44
|
-
|
|
45
|
-
function prioritySeverity(p: string) {
|
|
46
|
-
if (p === 'high') return 'danger'
|
|
47
|
-
if (p === 'medium') return 'warn'
|
|
48
|
-
return 'secondary'
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function priorityLabel(p: string) {
|
|
52
|
-
if (p === 'high') return '高'
|
|
53
|
-
if (p === 'medium') return '中'
|
|
54
|
-
return '低'
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function statusLabel(s: string) {
|
|
58
|
-
if (s === 'open') return '待处理'
|
|
59
|
-
if (s === 'progress') return '进行中'
|
|
60
|
-
return '已完成'
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function statusSeverity(s: string) {
|
|
64
|
-
if (s === 'open') return 'warn'
|
|
65
|
-
if (s === 'progress') return 'info'
|
|
66
|
-
return 'success'
|
|
67
|
-
}
|
|
68
|
-
</script>
|
|
69
|
-
|
|
70
|
-
<template>
|
|
71
|
-
<MConfigProvider :locale="zhCN">
|
|
72
|
-
<MLayout fill-viewport>
|
|
73
|
-
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
74
|
-
<MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
|
|
75
|
-
</MLayoutHeader>
|
|
76
|
-
|
|
77
|
-
<MLayoutContent>
|
|
78
|
-
<MPageContent density="spacious">
|
|
79
|
-
<MPageHeader
|
|
80
|
-
title="运营概览"
|
|
81
|
-
description="关注今日活跃与待处理工单,异常优先下钻。"
|
|
82
|
-
/>
|
|
83
|
-
|
|
84
|
-
<MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
|
|
85
|
-
<MGridItem v-for="item in stats" :key="item.label" :span="1">
|
|
86
|
-
<MPageStat
|
|
87
|
-
:label="item.label"
|
|
88
|
-
:value="item.value"
|
|
89
|
-
:trend="item.trend"
|
|
90
|
-
:trend-severity="item.trendSeverity ?? 'primary'"
|
|
91
|
-
:trend-direction="item.trendDirection"
|
|
92
|
-
:trend-label="item.trendLabel"
|
|
93
|
-
:icon="item.icon"
|
|
94
|
-
/>
|
|
95
|
-
</MGridItem>
|
|
96
|
-
</MGrid>
|
|
97
|
-
|
|
98
|
-
<MGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen">
|
|
99
|
-
<MGridItem :span="1">
|
|
100
|
-
<MCard title="趋势概览" shadow="always">
|
|
101
|
-
<MEmpty
|
|
102
|
-
description="接入图表组件后展示近 7 日活跃与转化。"
|
|
103
|
-
icon="chart-bar"
|
|
104
|
-
/>
|
|
105
|
-
</MCard>
|
|
106
|
-
</MGridItem>
|
|
107
|
-
<MGridItem :span="1">
|
|
108
|
-
<MCard title="最近工单" shadow="always">
|
|
109
|
-
<MTable
|
|
110
|
-
:columns="recentColumns"
|
|
111
|
-
:rows="recentRows"
|
|
112
|
-
size="small"
|
|
113
|
-
:paginator="false"
|
|
114
|
-
bordered
|
|
115
|
-
row-key="id"
|
|
116
|
-
aria-label="最近工单"
|
|
117
|
-
>
|
|
118
|
-
<template #cell-priority="{ value }">
|
|
119
|
-
<MTag
|
|
120
|
-
:value="priorityLabel(String(value))"
|
|
121
|
-
:severity="prioritySeverity(String(value))"
|
|
122
|
-
/>
|
|
123
|
-
</template>
|
|
124
|
-
<template #cell-status="{ value }">
|
|
125
|
-
<MStatus
|
|
126
|
-
:label="statusLabel(String(value))"
|
|
127
|
-
:severity="statusSeverity(String(value))"
|
|
128
|
-
/>
|
|
129
|
-
</template>
|
|
130
|
-
</MTable>
|
|
131
|
-
</MCard>
|
|
132
|
-
</MGridItem>
|
|
133
|
-
</MGrid>
|
|
134
|
-
</MPageContent>
|
|
135
|
-
</MLayoutContent>
|
|
136
|
-
</MLayout>
|
|
137
|
-
</MConfigProvider>
|
|
138
|
-
</template>
|
|
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
|
+
MBreadcrumb,
|
|
8
|
+
MCard,
|
|
9
|
+
MConfigProvider,
|
|
10
|
+
MGrid,
|
|
11
|
+
MGridItem,
|
|
12
|
+
MLayout,
|
|
13
|
+
MLayoutContent,
|
|
14
|
+
MLayoutHeader,
|
|
15
|
+
MPageContent,
|
|
16
|
+
MEmpty,
|
|
17
|
+
MPageHeader,
|
|
18
|
+
MPageStat,
|
|
19
|
+
MStatus,
|
|
20
|
+
MTable,
|
|
21
|
+
MTag,
|
|
22
|
+
zhCN,
|
|
23
|
+
} from 'morya-ui'
|
|
24
|
+
|
|
25
|
+
const stats = [
|
|
26
|
+
{ label: '总用户', value: '12,480', trend: '+8.2%', trendDirection: 'up' as const, trendLabel: '较上月', icon: 'users' },
|
|
27
|
+
{ label: '今日活跃', value: '1,926', trend: '+3.1%', trendDirection: 'up' as const, trendLabel: '较昨日', icon: 'activity' },
|
|
28
|
+
{ label: '待处理工单', value: '47', trend: '-12%', trendDirection: 'down' as const, trendLabel: '较上周', trendSeverity: 'warn' as const, icon: 'clipboard' },
|
|
29
|
+
{ label: '系统健康', value: '99.9%', trend: '稳定', trendSeverity: 'secondary' as const, icon: 'heart' },
|
|
30
|
+
]
|
|
31
|
+
|
|
32
|
+
const recentColumns = [
|
|
33
|
+
{ key: 'id', label: '工单号', width: 96 },
|
|
34
|
+
{ key: 'title', label: '标题' },
|
|
35
|
+
{ key: 'priority', label: '优先级', width: 96 },
|
|
36
|
+
{ key: 'status', label: '状态', width: 110 },
|
|
37
|
+
]
|
|
38
|
+
|
|
39
|
+
const recentRows = [
|
|
40
|
+
{ id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
|
|
41
|
+
{ id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
|
|
42
|
+
{ id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
|
|
43
|
+
]
|
|
44
|
+
|
|
45
|
+
function prioritySeverity(p: string) {
|
|
46
|
+
if (p === 'high') return 'danger'
|
|
47
|
+
if (p === 'medium') return 'warn'
|
|
48
|
+
return 'secondary'
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function priorityLabel(p: string) {
|
|
52
|
+
if (p === 'high') return '高'
|
|
53
|
+
if (p === 'medium') return '中'
|
|
54
|
+
return '低'
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function statusLabel(s: string) {
|
|
58
|
+
if (s === 'open') return '待处理'
|
|
59
|
+
if (s === 'progress') return '进行中'
|
|
60
|
+
return '已完成'
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function statusSeverity(s: string) {
|
|
64
|
+
if (s === 'open') return 'warn'
|
|
65
|
+
if (s === 'progress') return 'info'
|
|
66
|
+
return 'success'
|
|
67
|
+
}
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<template>
|
|
71
|
+
<MConfigProvider :locale="zhCN">
|
|
72
|
+
<MLayout fill-viewport>
|
|
73
|
+
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
74
|
+
<MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
|
|
75
|
+
</MLayoutHeader>
|
|
76
|
+
|
|
77
|
+
<MLayoutContent>
|
|
78
|
+
<MPageContent density="spacious">
|
|
79
|
+
<MPageHeader
|
|
80
|
+
title="运营概览"
|
|
81
|
+
description="关注今日活跃与待处理工单,异常优先下钻。"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
|
|
85
|
+
<MGridItem v-for="item in stats" :key="item.label" :span="1">
|
|
86
|
+
<MPageStat
|
|
87
|
+
:label="item.label"
|
|
88
|
+
:value="item.value"
|
|
89
|
+
:trend="item.trend"
|
|
90
|
+
:trend-severity="item.trendSeverity ?? 'primary'"
|
|
91
|
+
:trend-direction="item.trendDirection"
|
|
92
|
+
:trend-label="item.trendLabel"
|
|
93
|
+
:icon="item.icon"
|
|
94
|
+
/>
|
|
95
|
+
</MGridItem>
|
|
96
|
+
</MGrid>
|
|
97
|
+
|
|
98
|
+
<MGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen">
|
|
99
|
+
<MGridItem :span="1">
|
|
100
|
+
<MCard title="趋势概览" shadow="always">
|
|
101
|
+
<MEmpty
|
|
102
|
+
description="接入图表组件后展示近 7 日活跃与转化。"
|
|
103
|
+
icon="chart-bar"
|
|
104
|
+
/>
|
|
105
|
+
</MCard>
|
|
106
|
+
</MGridItem>
|
|
107
|
+
<MGridItem :span="1">
|
|
108
|
+
<MCard title="最近工单" shadow="always">
|
|
109
|
+
<MTable
|
|
110
|
+
:columns="recentColumns"
|
|
111
|
+
:rows="recentRows"
|
|
112
|
+
size="small"
|
|
113
|
+
:paginator="false"
|
|
114
|
+
bordered
|
|
115
|
+
row-key="id"
|
|
116
|
+
aria-label="最近工单"
|
|
117
|
+
>
|
|
118
|
+
<template #cell-priority="{ value }">
|
|
119
|
+
<MTag
|
|
120
|
+
:value="priorityLabel(String(value))"
|
|
121
|
+
:severity="prioritySeverity(String(value))"
|
|
122
|
+
/>
|
|
123
|
+
</template>
|
|
124
|
+
<template #cell-status="{ value }">
|
|
125
|
+
<MStatus
|
|
126
|
+
:label="statusLabel(String(value))"
|
|
127
|
+
:severity="statusSeverity(String(value))"
|
|
128
|
+
/>
|
|
129
|
+
</template>
|
|
130
|
+
</MTable>
|
|
131
|
+
</MCard>
|
|
132
|
+
</MGridItem>
|
|
133
|
+
</MGrid>
|
|
134
|
+
</MPageContent>
|
|
135
|
+
</MLayoutContent>
|
|
136
|
+
</MLayout>
|
|
137
|
+
</MConfigProvider>
|
|
138
|
+
</template>
|
|
@@ -1,178 +1,178 @@
|
|
|
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
|
-
MBreadcrumb,
|
|
8
|
-
MButton,
|
|
9
|
-
MCard,
|
|
10
|
-
MConfigProvider,
|
|
11
|
-
MDivider,
|
|
12
|
-
MLayout,
|
|
13
|
-
MLayoutContent,
|
|
14
|
-
MLayoutHeader,
|
|
15
|
-
MPageContent,
|
|
16
|
-
MPageHeader,
|
|
17
|
-
MPageSection,
|
|
18
|
-
MSpace,
|
|
19
|
-
MStatus,
|
|
20
|
-
MTable,
|
|
21
|
-
MTag,
|
|
22
|
-
zhCN,
|
|
23
|
-
} from 'morya-ui'
|
|
24
|
-
|
|
25
|
-
const profile = {
|
|
26
|
-
name: '林晓',
|
|
27
|
-
email: 'linxiao@example.com',
|
|
28
|
-
role: '成员',
|
|
29
|
-
dept: '产品设计',
|
|
30
|
-
joinedAt: '2025-03-12',
|
|
31
|
-
status: 'active' as const,
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
const activityColumns = [
|
|
35
|
-
{ key: 'time', label: '时间', width: 160 },
|
|
36
|
-
{ key: 'action', label: '动作' },
|
|
37
|
-
{ key: 'channel', label: '来源', width: 100 },
|
|
38
|
-
]
|
|
39
|
-
|
|
40
|
-
const activityRows = [
|
|
41
|
-
{ id: '1', time: '2026-09-20 14:22', action: '更新了个人资料', channel: 'Web' },
|
|
42
|
-
{ id: '2', time: '2026-09-18 09:05', action: '重置了登录密码', channel: 'Web' },
|
|
43
|
-
{ id: '3', time: '2026-09-12 18:41', action: '加入「产品设计」部门', channel: 'Admin' },
|
|
44
|
-
]
|
|
45
|
-
</script>
|
|
46
|
-
|
|
47
|
-
<template>
|
|
48
|
-
<MConfigProvider :locale="zhCN">
|
|
49
|
-
<MLayout fill-viewport>
|
|
50
|
-
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
51
|
-
<MBreadcrumb
|
|
52
|
-
:model="[
|
|
53
|
-
{ label: '首页', to: '/' },
|
|
54
|
-
{ label: '用户管理', to: '/users' },
|
|
55
|
-
{ label: profile.name },
|
|
56
|
-
]"
|
|
57
|
-
/>
|
|
58
|
-
</MLayoutHeader>
|
|
59
|
-
|
|
60
|
-
<MLayoutContent>
|
|
61
|
-
<MPageContent>
|
|
62
|
-
<MPageHeader
|
|
63
|
-
:title="profile.name"
|
|
64
|
-
description="查看账号摘要、属性与近期活动。编辑走同页弹窗或独立表单页,勿做成营销落地。"
|
|
65
|
-
>
|
|
66
|
-
<template #actions>
|
|
67
|
-
<MSpace>
|
|
68
|
-
<MStatus
|
|
69
|
-
:label="profile.status === 'active' ? '启用' : '停用'"
|
|
70
|
-
:severity="profile.status === 'active' ? 'success' : 'secondary'"
|
|
71
|
-
/>
|
|
72
|
-
<MButton severity="primary">
|
|
73
|
-
编辑
|
|
74
|
-
</MButton>
|
|
75
|
-
<MButton severity="secondary">
|
|
76
|
-
返回
|
|
77
|
-
</MButton>
|
|
78
|
-
<MButton severity="danger" text>
|
|
79
|
-
删除
|
|
80
|
-
</MButton>
|
|
81
|
-
</MSpace>
|
|
82
|
-
</template>
|
|
83
|
-
</MPageHeader>
|
|
84
|
-
|
|
85
|
-
<MPageSection title="摘要">
|
|
86
|
-
<MSpace wrap style="gap: var(--m-space-2)">
|
|
87
|
-
<MTag :value="profile.role" />
|
|
88
|
-
<MTag :value="profile.dept" severity="info" />
|
|
89
|
-
</MSpace>
|
|
90
|
-
<p class="detail-lead">
|
|
91
|
-
工作邮箱 {{ profile.email }} · 入职 {{ profile.joinedAt }}
|
|
92
|
-
</p>
|
|
93
|
-
</MPageSection>
|
|
94
|
-
|
|
95
|
-
<MCard title="基本信息">
|
|
96
|
-
<dl class="detail-props">
|
|
97
|
-
<div>
|
|
98
|
-
<dt>姓名</dt>
|
|
99
|
-
<dd>{{ profile.name }}</dd>
|
|
100
|
-
</div>
|
|
101
|
-
<div>
|
|
102
|
-
<dt>邮箱</dt>
|
|
103
|
-
<dd>{{ profile.email }}</dd>
|
|
104
|
-
</div>
|
|
105
|
-
<div>
|
|
106
|
-
<dt>角色</dt>
|
|
107
|
-
<dd>{{ profile.role }}</dd>
|
|
108
|
-
</div>
|
|
109
|
-
<div>
|
|
110
|
-
<dt>部门</dt>
|
|
111
|
-
<dd>{{ profile.dept }}</dd>
|
|
112
|
-
</div>
|
|
113
|
-
<div>
|
|
114
|
-
<dt>入职日期</dt>
|
|
115
|
-
<dd>{{ profile.joinedAt }}</dd>
|
|
116
|
-
</div>
|
|
117
|
-
<div>
|
|
118
|
-
<dt>状态</dt>
|
|
119
|
-
<dd>
|
|
120
|
-
<MStatus
|
|
121
|
-
:label="profile.status === 'active' ? '启用' : '停用'"
|
|
122
|
-
:severity="profile.status === 'active' ? 'success' : 'secondary'"
|
|
123
|
-
/>
|
|
124
|
-
</dd>
|
|
125
|
-
</div>
|
|
126
|
-
</dl>
|
|
127
|
-
</MCard>
|
|
128
|
-
|
|
129
|
-
<MDivider />
|
|
130
|
-
|
|
131
|
-
<MCard title="近期活动">
|
|
132
|
-
<MTable
|
|
133
|
-
:columns="activityColumns"
|
|
134
|
-
:rows="activityRows"
|
|
135
|
-
row-key="id"
|
|
136
|
-
striped
|
|
137
|
-
bordered
|
|
138
|
-
aria-label="近期活动"
|
|
139
|
-
/>
|
|
140
|
-
</MCard>
|
|
141
|
-
</MPageContent>
|
|
142
|
-
</MLayoutContent>
|
|
143
|
-
</MLayout>
|
|
144
|
-
</MConfigProvider>
|
|
145
|
-
</template>
|
|
146
|
-
|
|
147
|
-
<style scoped>
|
|
148
|
-
.detail-lead {
|
|
149
|
-
margin: var(--m-space-3) 0 0;
|
|
150
|
-
color: var(--m-color-text-muted);
|
|
151
|
-
font-size: var(--m-font-size-sm);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.detail-props {
|
|
155
|
-
display: grid;
|
|
156
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
157
|
-
gap: var(--m-space-4) var(--m-space-6);
|
|
158
|
-
margin: 0;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.detail-props dt {
|
|
162
|
-
margin: 0 0 var(--m-space-1);
|
|
163
|
-
color: var(--m-color-text-muted);
|
|
164
|
-
font-size: var(--m-font-size-xs);
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.detail-props dd {
|
|
168
|
-
margin: 0;
|
|
169
|
-
color: var(--m-color-text);
|
|
170
|
-
font-size: var(--m-font-size-md);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
@media (max-width: 640px) {
|
|
174
|
-
.detail-props {
|
|
175
|
-
grid-template-columns: 1fr;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
</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
|
+
MBreadcrumb,
|
|
8
|
+
MButton,
|
|
9
|
+
MCard,
|
|
10
|
+
MConfigProvider,
|
|
11
|
+
MDivider,
|
|
12
|
+
MLayout,
|
|
13
|
+
MLayoutContent,
|
|
14
|
+
MLayoutHeader,
|
|
15
|
+
MPageContent,
|
|
16
|
+
MPageHeader,
|
|
17
|
+
MPageSection,
|
|
18
|
+
MSpace,
|
|
19
|
+
MStatus,
|
|
20
|
+
MTable,
|
|
21
|
+
MTag,
|
|
22
|
+
zhCN,
|
|
23
|
+
} from 'morya-ui'
|
|
24
|
+
|
|
25
|
+
const profile = {
|
|
26
|
+
name: '林晓',
|
|
27
|
+
email: 'linxiao@example.com',
|
|
28
|
+
role: '成员',
|
|
29
|
+
dept: '产品设计',
|
|
30
|
+
joinedAt: '2025-03-12',
|
|
31
|
+
status: 'active' as const,
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const activityColumns = [
|
|
35
|
+
{ key: 'time', label: '时间', width: 160 },
|
|
36
|
+
{ key: 'action', label: '动作' },
|
|
37
|
+
{ key: 'channel', label: '来源', width: 100 },
|
|
38
|
+
]
|
|
39
|
+
|
|
40
|
+
const activityRows = [
|
|
41
|
+
{ id: '1', time: '2026-09-20 14:22', action: '更新了个人资料', channel: 'Web' },
|
|
42
|
+
{ id: '2', time: '2026-09-18 09:05', action: '重置了登录密码', channel: 'Web' },
|
|
43
|
+
{ id: '3', time: '2026-09-12 18:41', action: '加入「产品设计」部门', channel: 'Admin' },
|
|
44
|
+
]
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<template>
|
|
48
|
+
<MConfigProvider :locale="zhCN">
|
|
49
|
+
<MLayout fill-viewport>
|
|
50
|
+
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
51
|
+
<MBreadcrumb
|
|
52
|
+
:model="[
|
|
53
|
+
{ label: '首页', to: '/' },
|
|
54
|
+
{ label: '用户管理', to: '/users' },
|
|
55
|
+
{ label: profile.name },
|
|
56
|
+
]"
|
|
57
|
+
/>
|
|
58
|
+
</MLayoutHeader>
|
|
59
|
+
|
|
60
|
+
<MLayoutContent>
|
|
61
|
+
<MPageContent>
|
|
62
|
+
<MPageHeader
|
|
63
|
+
:title="profile.name"
|
|
64
|
+
description="查看账号摘要、属性与近期活动。编辑走同页弹窗或独立表单页,勿做成营销落地。"
|
|
65
|
+
>
|
|
66
|
+
<template #actions>
|
|
67
|
+
<MSpace>
|
|
68
|
+
<MStatus
|
|
69
|
+
:label="profile.status === 'active' ? '启用' : '停用'"
|
|
70
|
+
:severity="profile.status === 'active' ? 'success' : 'secondary'"
|
|
71
|
+
/>
|
|
72
|
+
<MButton severity="primary">
|
|
73
|
+
编辑
|
|
74
|
+
</MButton>
|
|
75
|
+
<MButton severity="secondary">
|
|
76
|
+
返回
|
|
77
|
+
</MButton>
|
|
78
|
+
<MButton severity="danger" text>
|
|
79
|
+
删除
|
|
80
|
+
</MButton>
|
|
81
|
+
</MSpace>
|
|
82
|
+
</template>
|
|
83
|
+
</MPageHeader>
|
|
84
|
+
|
|
85
|
+
<MPageSection title="摘要">
|
|
86
|
+
<MSpace wrap style="gap: var(--m-space-2)">
|
|
87
|
+
<MTag :value="profile.role" />
|
|
88
|
+
<MTag :value="profile.dept" severity="info" />
|
|
89
|
+
</MSpace>
|
|
90
|
+
<p class="detail-lead">
|
|
91
|
+
工作邮箱 {{ profile.email }} · 入职 {{ profile.joinedAt }}
|
|
92
|
+
</p>
|
|
93
|
+
</MPageSection>
|
|
94
|
+
|
|
95
|
+
<MCard title="基本信息">
|
|
96
|
+
<dl class="detail-props">
|
|
97
|
+
<div>
|
|
98
|
+
<dt>姓名</dt>
|
|
99
|
+
<dd>{{ profile.name }}</dd>
|
|
100
|
+
</div>
|
|
101
|
+
<div>
|
|
102
|
+
<dt>邮箱</dt>
|
|
103
|
+
<dd>{{ profile.email }}</dd>
|
|
104
|
+
</div>
|
|
105
|
+
<div>
|
|
106
|
+
<dt>角色</dt>
|
|
107
|
+
<dd>{{ profile.role }}</dd>
|
|
108
|
+
</div>
|
|
109
|
+
<div>
|
|
110
|
+
<dt>部门</dt>
|
|
111
|
+
<dd>{{ profile.dept }}</dd>
|
|
112
|
+
</div>
|
|
113
|
+
<div>
|
|
114
|
+
<dt>入职日期</dt>
|
|
115
|
+
<dd>{{ profile.joinedAt }}</dd>
|
|
116
|
+
</div>
|
|
117
|
+
<div>
|
|
118
|
+
<dt>状态</dt>
|
|
119
|
+
<dd>
|
|
120
|
+
<MStatus
|
|
121
|
+
:label="profile.status === 'active' ? '启用' : '停用'"
|
|
122
|
+
:severity="profile.status === 'active' ? 'success' : 'secondary'"
|
|
123
|
+
/>
|
|
124
|
+
</dd>
|
|
125
|
+
</div>
|
|
126
|
+
</dl>
|
|
127
|
+
</MCard>
|
|
128
|
+
|
|
129
|
+
<MDivider />
|
|
130
|
+
|
|
131
|
+
<MCard title="近期活动">
|
|
132
|
+
<MTable
|
|
133
|
+
:columns="activityColumns"
|
|
134
|
+
:rows="activityRows"
|
|
135
|
+
row-key="id"
|
|
136
|
+
striped
|
|
137
|
+
bordered
|
|
138
|
+
aria-label="近期活动"
|
|
139
|
+
/>
|
|
140
|
+
</MCard>
|
|
141
|
+
</MPageContent>
|
|
142
|
+
</MLayoutContent>
|
|
143
|
+
</MLayout>
|
|
144
|
+
</MConfigProvider>
|
|
145
|
+
</template>
|
|
146
|
+
|
|
147
|
+
<style scoped>
|
|
148
|
+
.detail-lead {
|
|
149
|
+
margin: var(--m-space-3) 0 0;
|
|
150
|
+
color: var(--m-color-text-muted);
|
|
151
|
+
font-size: var(--m-font-size-sm);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.detail-props {
|
|
155
|
+
display: grid;
|
|
156
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
157
|
+
gap: var(--m-space-4) var(--m-space-6);
|
|
158
|
+
margin: 0;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.detail-props dt {
|
|
162
|
+
margin: 0 0 var(--m-space-1);
|
|
163
|
+
color: var(--m-color-text-muted);
|
|
164
|
+
font-size: var(--m-font-size-xs);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.detail-props dd {
|
|
168
|
+
margin: 0;
|
|
169
|
+
color: var(--m-color-text);
|
|
170
|
+
font-size: var(--m-font-size-md);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
@media (max-width: 640px) {
|
|
174
|
+
.detail-props {
|
|
175
|
+
grid-template-columns: 1fr;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
</style>
|