@morya-ui/mcp 0.4.4 → 0.4.5
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 +949 -172
- package/data/example-coverage.json +30 -37
- 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/page-snippets.js +669 -669
- package/dist/style-shells.js +153 -153
- package/dist/tools.js +192 -192
- package/package.json +1 -1
|
@@ -1,147 +1,147 @@
|
|
|
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
|
-
MDescriptions,
|
|
12
|
-
MDescriptionsItem,
|
|
13
|
-
MDivider,
|
|
14
|
-
MLayout,
|
|
15
|
-
MLayoutContent,
|
|
16
|
-
MLayoutHeader,
|
|
17
|
-
MList,
|
|
18
|
-
MListItem,
|
|
19
|
-
MListItemMeta,
|
|
20
|
-
MPageContent,
|
|
21
|
-
MPageHeader,
|
|
22
|
-
MPageSection,
|
|
23
|
-
MSpace,
|
|
24
|
-
MStatus,
|
|
25
|
-
MTag,
|
|
26
|
-
zhCN,
|
|
27
|
-
} from 'morya-ui'
|
|
28
|
-
|
|
29
|
-
const profile = {
|
|
30
|
-
name: '林晓',
|
|
31
|
-
email: 'linxiao@example.com',
|
|
32
|
-
role: '成员',
|
|
33
|
-
dept: '产品设计',
|
|
34
|
-
joinedAt: '2025-03-12',
|
|
35
|
-
status: 'active' as const,
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const activityRows = [
|
|
39
|
-
{ id: '1', time: '2026-09-20 14:22', action: '更新了个人资料', channel: 'Web' },
|
|
40
|
-
{ id: '2', time: '2026-09-18 09:05', action: '重置了登录密码', channel: 'Web' },
|
|
41
|
-
{ id: '3', time: '2026-09-12 18:41', action: '加入「产品设计」部门', channel: 'Admin' },
|
|
42
|
-
]
|
|
43
|
-
</script>
|
|
44
|
-
|
|
45
|
-
<template>
|
|
46
|
-
<MConfigProvider :locale="zhCN">
|
|
47
|
-
<MLayout fill-viewport>
|
|
48
|
-
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
49
|
-
<MBreadcrumb
|
|
50
|
-
:model="[
|
|
51
|
-
{ label: '首页', to: '/' },
|
|
52
|
-
{ label: '用户管理', to: '/users' },
|
|
53
|
-
{ label: profile.name },
|
|
54
|
-
]"
|
|
55
|
-
/>
|
|
56
|
-
</MLayoutHeader>
|
|
57
|
-
|
|
58
|
-
<MLayoutContent>
|
|
59
|
-
<MPageContent>
|
|
60
|
-
<MPageHeader
|
|
61
|
-
:title="profile.name"
|
|
62
|
-
description="查看账号摘要、属性与近期活动。编辑走同页弹窗或独立表单页,勿做成营销落地。"
|
|
63
|
-
>
|
|
64
|
-
<template #actions>
|
|
65
|
-
<MSpace>
|
|
66
|
-
<MStatus
|
|
67
|
-
:label="profile.status === 'active' ? '启用' : '停用'"
|
|
68
|
-
:type="profile.status === 'active' ? 'success' : 'secondary'"
|
|
69
|
-
/>
|
|
70
|
-
<MButton type="primary">
|
|
71
|
-
编辑
|
|
72
|
-
</MButton>
|
|
73
|
-
<MButton>
|
|
74
|
-
返回
|
|
75
|
-
</MButton>
|
|
76
|
-
<MButton type="text" danger>
|
|
77
|
-
删除
|
|
78
|
-
</MButton>
|
|
79
|
-
</MSpace>
|
|
80
|
-
</template>
|
|
81
|
-
</MPageHeader>
|
|
82
|
-
|
|
83
|
-
<MPageSection title="摘要">
|
|
84
|
-
<MSpace wrap style="gap: var(--m-space-2)">
|
|
85
|
-
<MTag :value="profile.role" />
|
|
86
|
-
<MTag :value="profile.dept" type="info" />
|
|
87
|
-
</MSpace>
|
|
88
|
-
<p class="detail-lead">
|
|
89
|
-
工作邮箱 {{ profile.email }} · 入职 {{ profile.joinedAt }}
|
|
90
|
-
</p>
|
|
91
|
-
</MPageSection>
|
|
92
|
-
|
|
93
|
-
<MDescriptions title="基本信息" bordered :column="2">
|
|
94
|
-
<MDescriptionsItem label="姓名">
|
|
95
|
-
{{ profile.name }}
|
|
96
|
-
</MDescriptionsItem>
|
|
97
|
-
<MDescriptionsItem label="邮箱">
|
|
98
|
-
{{ profile.email }}
|
|
99
|
-
</MDescriptionsItem>
|
|
100
|
-
<MDescriptionsItem label="角色">
|
|
101
|
-
{{ profile.role }}
|
|
102
|
-
</MDescriptionsItem>
|
|
103
|
-
<MDescriptionsItem label="部门">
|
|
104
|
-
{{ profile.dept }}
|
|
105
|
-
</MDescriptionsItem>
|
|
106
|
-
<MDescriptionsItem label="入职日期">
|
|
107
|
-
{{ profile.joinedAt }}
|
|
108
|
-
</MDescriptionsItem>
|
|
109
|
-
<MDescriptionsItem label="状态">
|
|
110
|
-
<MStatus
|
|
111
|
-
:label="profile.status === 'active' ? '启用' : '停用'"
|
|
112
|
-
:type="profile.status === 'active' ? 'success' : 'secondary'"
|
|
113
|
-
/>
|
|
114
|
-
</MDescriptionsItem>
|
|
115
|
-
</MDescriptions>
|
|
116
|
-
|
|
117
|
-
<MDivider />
|
|
118
|
-
|
|
119
|
-
<MCard title="近期活动">
|
|
120
|
-
<MList
|
|
121
|
-
:items="activityRows"
|
|
122
|
-
row-key="id"
|
|
123
|
-
size="small"
|
|
124
|
-
>
|
|
125
|
-
<template #item="{ item }">
|
|
126
|
-
<MListItem>
|
|
127
|
-
<MListItemMeta
|
|
128
|
-
:title="item.action"
|
|
129
|
-
:description="`${item.time} · ${item.channel}`"
|
|
130
|
-
/>
|
|
131
|
-
</MListItem>
|
|
132
|
-
</template>
|
|
133
|
-
</MList>
|
|
134
|
-
</MCard>
|
|
135
|
-
</MPageContent>
|
|
136
|
-
</MLayoutContent>
|
|
137
|
-
</MLayout>
|
|
138
|
-
</MConfigProvider>
|
|
139
|
-
</template>
|
|
140
|
-
|
|
141
|
-
<style scoped>
|
|
142
|
-
.detail-lead {
|
|
143
|
-
margin: var(--m-space-3) 0 0;
|
|
144
|
-
color: var(--m-color-text-muted);
|
|
145
|
-
font-size: var(--m-font-size-sm);
|
|
146
|
-
}
|
|
147
|
-
</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
|
+
MDescriptions,
|
|
12
|
+
MDescriptionsItem,
|
|
13
|
+
MDivider,
|
|
14
|
+
MLayout,
|
|
15
|
+
MLayoutContent,
|
|
16
|
+
MLayoutHeader,
|
|
17
|
+
MList,
|
|
18
|
+
MListItem,
|
|
19
|
+
MListItemMeta,
|
|
20
|
+
MPageContent,
|
|
21
|
+
MPageHeader,
|
|
22
|
+
MPageSection,
|
|
23
|
+
MSpace,
|
|
24
|
+
MStatus,
|
|
25
|
+
MTag,
|
|
26
|
+
zhCN,
|
|
27
|
+
} from 'morya-ui'
|
|
28
|
+
|
|
29
|
+
const profile = {
|
|
30
|
+
name: '林晓',
|
|
31
|
+
email: 'linxiao@example.com',
|
|
32
|
+
role: '成员',
|
|
33
|
+
dept: '产品设计',
|
|
34
|
+
joinedAt: '2025-03-12',
|
|
35
|
+
status: 'active' as const,
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const activityRows = [
|
|
39
|
+
{ id: '1', time: '2026-09-20 14:22', action: '更新了个人资料', channel: 'Web' },
|
|
40
|
+
{ id: '2', time: '2026-09-18 09:05', action: '重置了登录密码', channel: 'Web' },
|
|
41
|
+
{ id: '3', time: '2026-09-12 18:41', action: '加入「产品设计」部门', channel: 'Admin' },
|
|
42
|
+
]
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<template>
|
|
46
|
+
<MConfigProvider :locale="zhCN">
|
|
47
|
+
<MLayout fill-viewport>
|
|
48
|
+
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
49
|
+
<MBreadcrumb
|
|
50
|
+
:model="[
|
|
51
|
+
{ label: '首页', to: '/' },
|
|
52
|
+
{ label: '用户管理', to: '/users' },
|
|
53
|
+
{ label: profile.name },
|
|
54
|
+
]"
|
|
55
|
+
/>
|
|
56
|
+
</MLayoutHeader>
|
|
57
|
+
|
|
58
|
+
<MLayoutContent>
|
|
59
|
+
<MPageContent>
|
|
60
|
+
<MPageHeader
|
|
61
|
+
:title="profile.name"
|
|
62
|
+
description="查看账号摘要、属性与近期活动。编辑走同页弹窗或独立表单页,勿做成营销落地。"
|
|
63
|
+
>
|
|
64
|
+
<template #actions>
|
|
65
|
+
<MSpace>
|
|
66
|
+
<MStatus
|
|
67
|
+
:label="profile.status === 'active' ? '启用' : '停用'"
|
|
68
|
+
:type="profile.status === 'active' ? 'success' : 'secondary'"
|
|
69
|
+
/>
|
|
70
|
+
<MButton type="primary">
|
|
71
|
+
编辑
|
|
72
|
+
</MButton>
|
|
73
|
+
<MButton>
|
|
74
|
+
返回
|
|
75
|
+
</MButton>
|
|
76
|
+
<MButton type="text" danger>
|
|
77
|
+
删除
|
|
78
|
+
</MButton>
|
|
79
|
+
</MSpace>
|
|
80
|
+
</template>
|
|
81
|
+
</MPageHeader>
|
|
82
|
+
|
|
83
|
+
<MPageSection title="摘要">
|
|
84
|
+
<MSpace wrap style="gap: var(--m-space-2)">
|
|
85
|
+
<MTag :value="profile.role" />
|
|
86
|
+
<MTag :value="profile.dept" type="info" />
|
|
87
|
+
</MSpace>
|
|
88
|
+
<p class="detail-lead">
|
|
89
|
+
工作邮箱 {{ profile.email }} · 入职 {{ profile.joinedAt }}
|
|
90
|
+
</p>
|
|
91
|
+
</MPageSection>
|
|
92
|
+
|
|
93
|
+
<MDescriptions title="基本信息" bordered :column="2">
|
|
94
|
+
<MDescriptionsItem label="姓名">
|
|
95
|
+
{{ profile.name }}
|
|
96
|
+
</MDescriptionsItem>
|
|
97
|
+
<MDescriptionsItem label="邮箱">
|
|
98
|
+
{{ profile.email }}
|
|
99
|
+
</MDescriptionsItem>
|
|
100
|
+
<MDescriptionsItem label="角色">
|
|
101
|
+
{{ profile.role }}
|
|
102
|
+
</MDescriptionsItem>
|
|
103
|
+
<MDescriptionsItem label="部门">
|
|
104
|
+
{{ profile.dept }}
|
|
105
|
+
</MDescriptionsItem>
|
|
106
|
+
<MDescriptionsItem label="入职日期">
|
|
107
|
+
{{ profile.joinedAt }}
|
|
108
|
+
</MDescriptionsItem>
|
|
109
|
+
<MDescriptionsItem label="状态">
|
|
110
|
+
<MStatus
|
|
111
|
+
:label="profile.status === 'active' ? '启用' : '停用'"
|
|
112
|
+
:type="profile.status === 'active' ? 'success' : 'secondary'"
|
|
113
|
+
/>
|
|
114
|
+
</MDescriptionsItem>
|
|
115
|
+
</MDescriptions>
|
|
116
|
+
|
|
117
|
+
<MDivider />
|
|
118
|
+
|
|
119
|
+
<MCard title="近期活动">
|
|
120
|
+
<MList
|
|
121
|
+
:items="activityRows"
|
|
122
|
+
row-key="id"
|
|
123
|
+
size="small"
|
|
124
|
+
>
|
|
125
|
+
<template #item="{ item }">
|
|
126
|
+
<MListItem>
|
|
127
|
+
<MListItemMeta
|
|
128
|
+
:title="item.action"
|
|
129
|
+
:description="`${item.time} · ${item.channel}`"
|
|
130
|
+
/>
|
|
131
|
+
</MListItem>
|
|
132
|
+
</template>
|
|
133
|
+
</MList>
|
|
134
|
+
</MCard>
|
|
135
|
+
</MPageContent>
|
|
136
|
+
</MLayoutContent>
|
|
137
|
+
</MLayout>
|
|
138
|
+
</MConfigProvider>
|
|
139
|
+
</template>
|
|
140
|
+
|
|
141
|
+
<style scoped>
|
|
142
|
+
.detail-lead {
|
|
143
|
+
margin: var(--m-space-3) 0 0;
|
|
144
|
+
color: var(--m-color-text-muted);
|
|
145
|
+
font-size: var(--m-font-size-sm);
|
|
146
|
+
}
|
|
147
|
+
</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 type="primary">
|
|
33
|
-
新建课程
|
|
34
|
-
</MButton>
|
|
35
|
-
</template>
|
|
36
|
-
</MPageHeader>
|
|
37
|
-
|
|
38
|
-
<MEmpty
|
|
39
|
-
title="还没有课程"
|
|
40
|
-
description="创建第一门课程后,学员就能在目录里看到它。也可以稍后从模板导入。"
|
|
41
|
-
illustration="no-content"
|
|
42
|
-
>
|
|
43
|
-
<template #extra>
|
|
44
|
-
<MButton type="primary">
|
|
45
|
-
创建第一门课程
|
|
46
|
-
</MButton>
|
|
47
|
-
<MButton type="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 type="primary">
|
|
33
|
+
新建课程
|
|
34
|
+
</MButton>
|
|
35
|
+
</template>
|
|
36
|
+
</MPageHeader>
|
|
37
|
+
|
|
38
|
+
<MEmpty
|
|
39
|
+
title="还没有课程"
|
|
40
|
+
description="创建第一门课程后,学员就能在目录里看到它。也可以稍后从模板导入。"
|
|
41
|
+
illustration="no-content"
|
|
42
|
+
>
|
|
43
|
+
<template #extra>
|
|
44
|
+
<MButton type="primary">
|
|
45
|
+
创建第一门课程
|
|
46
|
+
</MButton>
|
|
47
|
+
<MButton type="text">
|
|
48
|
+
从模板导入
|
|
49
|
+
</MButton>
|
|
50
|
+
</template>
|
|
51
|
+
</MEmpty>
|
|
52
|
+
</MPageContent>
|
|
53
|
+
</MLayoutContent>
|
|
54
|
+
</MLayout>
|
|
55
|
+
</MConfigProvider>
|
|
56
|
+
</template>
|