@morya-ui/mcp 0.3.5 → 0.3.7
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 -151
- package/bin/morya-ui-mcp.js +2 -2
- package/data/catalog.json +487 -389
- package/data/example-coverage.json +56 -74
- 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 +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 +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__/fidelity.test.d.ts +1 -0
- package/dist/__tests__/fidelity.test.js +88 -0
- package/dist/__tests__/page-snippets.test.js +13 -5
- package/dist/__tests__/tools.test.js +10 -8
- package/dist/decisions.js +6 -16
- package/dist/index.js +46 -3
- package/dist/page-snippets.js +722 -635
- package/dist/reference-brief.d.ts +55 -0
- package/dist/reference-brief.js +468 -0
- package/dist/style-shells.d.ts +20 -0
- package/dist/style-shells.js +249 -0
- package/dist/tools.d.ts +26 -0
- package/dist/tools.js +471 -374
- package/package.json +1 -1
|
@@ -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>
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
/**
|
|
3
|
-
* 黄金样例:列表空状态(Flow)
|
|
4
|
-
* @see DESIGN.md · page-layouts.md · surfaces § Flow
|
|
5
|
-
* 可嵌在列表页 MPageContent / MTable #empty 中;此处给出完整可运行骨架。
|
|
6
|
-
*/
|
|
7
|
-
import {
|
|
8
|
-
MBreadcrumb,
|
|
9
|
-
MButton,
|
|
10
|
-
MConfigProvider,
|
|
11
|
-
MEmpty,
|
|
12
|
-
MLayout,
|
|
13
|
-
MLayoutContent,
|
|
14
|
-
MLayoutHeader,
|
|
15
|
-
MPageContent,
|
|
16
|
-
MPageHeader,
|
|
17
|
-
zhCN,
|
|
18
|
-
} from 'morya-ui'
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<template>
|
|
22
|
-
<MConfigProvider :locale="zhCN">
|
|
23
|
-
<MLayout fill-viewport>
|
|
24
|
-
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
25
|
-
<MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '课程' }]" />
|
|
26
|
-
</MLayoutHeader>
|
|
27
|
-
|
|
28
|
-
<MLayoutContent>
|
|
29
|
-
<MPageContent>
|
|
30
|
-
<MPageHeader title="课程" description="管理目录与可见性。">
|
|
31
|
-
<template #actions>
|
|
32
|
-
<MButton severity="primary">
|
|
33
|
-
新建课程
|
|
34
|
-
</MButton>
|
|
35
|
-
</template>
|
|
36
|
-
</MPageHeader>
|
|
37
|
-
|
|
38
|
-
<MEmpty
|
|
39
|
-
title="还没有课程"
|
|
40
|
-
description="创建第一门课程后,学员就能在目录里看到它。也可以稍后从模板导入。"
|
|
41
|
-
icon="book"
|
|
42
|
-
>
|
|
43
|
-
<template #extra>
|
|
44
|
-
<MButton severity="primary">
|
|
45
|
-
创建第一门课程
|
|
46
|
-
</MButton>
|
|
47
|
-
<MButton severity="secondary" text>
|
|
48
|
-
从模板导入
|
|
49
|
-
</MButton>
|
|
50
|
-
</template>
|
|
51
|
-
</MEmpty>
|
|
52
|
-
</MPageContent>
|
|
53
|
-
</MLayoutContent>
|
|
54
|
-
</MLayout>
|
|
55
|
-
</MConfigProvider>
|
|
56
|
-
</template>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* 黄金样例:列表空状态(Flow)
|
|
4
|
+
* @see DESIGN.md · page-layouts.md · surfaces § Flow
|
|
5
|
+
* 可嵌在列表页 MPageContent / MTable #empty 中;此处给出完整可运行骨架。
|
|
6
|
+
*/
|
|
7
|
+
import {
|
|
8
|
+
MBreadcrumb,
|
|
9
|
+
MButton,
|
|
10
|
+
MConfigProvider,
|
|
11
|
+
MEmpty,
|
|
12
|
+
MLayout,
|
|
13
|
+
MLayoutContent,
|
|
14
|
+
MLayoutHeader,
|
|
15
|
+
MPageContent,
|
|
16
|
+
MPageHeader,
|
|
17
|
+
zhCN,
|
|
18
|
+
} from 'morya-ui'
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<MConfigProvider :locale="zhCN">
|
|
23
|
+
<MLayout fill-viewport>
|
|
24
|
+
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
25
|
+
<MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '课程' }]" />
|
|
26
|
+
</MLayoutHeader>
|
|
27
|
+
|
|
28
|
+
<MLayoutContent>
|
|
29
|
+
<MPageContent>
|
|
30
|
+
<MPageHeader title="课程" description="管理目录与可见性。">
|
|
31
|
+
<template #actions>
|
|
32
|
+
<MButton severity="primary">
|
|
33
|
+
新建课程
|
|
34
|
+
</MButton>
|
|
35
|
+
</template>
|
|
36
|
+
</MPageHeader>
|
|
37
|
+
|
|
38
|
+
<MEmpty
|
|
39
|
+
title="还没有课程"
|
|
40
|
+
description="创建第一门课程后,学员就能在目录里看到它。也可以稍后从模板导入。"
|
|
41
|
+
icon="book"
|
|
42
|
+
>
|
|
43
|
+
<template #extra>
|
|
44
|
+
<MButton severity="primary">
|
|
45
|
+
创建第一门课程
|
|
46
|
+
</MButton>
|
|
47
|
+
<MButton severity="secondary" text>
|
|
48
|
+
从模板导入
|
|
49
|
+
</MButton>
|
|
50
|
+
</template>
|
|
51
|
+
</MEmpty>
|
|
52
|
+
</MPageContent>
|
|
53
|
+
</MLayoutContent>
|
|
54
|
+
</MLayout>
|
|
55
|
+
</MConfigProvider>
|
|
56
|
+
</template>
|