@morya-ui/setup 0.2.8 → 0.2.9
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 +22 -33
- package/catalog/skills.json +28 -0
- package/package.json +2 -1
- package/src/cli.mjs +58 -12
- package/src/skills.mjs +154 -0
- package/template/.agents/skills/fixing-accessibility/SKILL.md +138 -0
- package/template/.agents/skills/frontend-design/LICENSE.txt +177 -0
- package/template/.agents/skills/frontend-design/SKILL.md +57 -0
- package/template/.agents/skills/morya-ui-pages/SKILL.md +16 -13
- package/template/.agents/skills/morya-ui-pages/evals/evals.json +18 -12
- package/template/.agents/skills/morya-ui-pages/references/component-index.md +24 -8
- package/template/.agents/skills/morya-ui-pages/references/design-system.md +4 -2
- package/template/.agents/skills/morya-ui-pages/references/feedback.md +1 -1
- package/template/.agents/skills/morya-ui-pages/references/optional-companions.md +17 -12
- package/template/.agents/skills/morya-ui-pages/references/page-layouts.md +17 -7
- package/template/.agents/skills/morya-ui-pages/references/review-checklist.md +14 -2
- package/template/.agents/skills/morya-ui-pages/references/surfaces.md +3 -3
- package/template/.agents/skills/morya-ui-pages/references/visual-craft.md +121 -6
- package/template/.cursor/rules/component-usage.mdc +2 -2
- package/template/.cursor/rules/design-system.mdc +1 -1
- package/template/DESIGN.md +29 -106
- package/LICENSE +0 -21
|
@@ -7,25 +7,37 @@
|
|
|
7
7
|
- [ ] `MConfigProvider` at a sensible root when building a full screen
|
|
8
8
|
- [ ] No invented props / events / slots (MCP or docs checked)
|
|
9
9
|
- [ ] Select vs Dropdown roles correct
|
|
10
|
+
- [ ] `MTable` uses `rows` (not `data`)
|
|
10
11
|
- [ ] One-line results use `message`; summary+detail / async use `toast`
|
|
11
12
|
- [ ] Destructive flows use confirm dialogs
|
|
12
13
|
|
|
14
|
+
## Craft (all lanes — default pass)
|
|
15
|
+
|
|
16
|
+
- [ ] Lane craft from [visual-craft.md](visual-craft.md) applied (Ops polish and/or atmosphere)
|
|
17
|
+
- [ ] At most one primary filled button in the main viewport
|
|
18
|
+
- [ ] Copy is domain-real; empty / error states say what to do next
|
|
19
|
+
- [ ] No AI-default look clusters unless the brief asked for them
|
|
20
|
+
- [ ] Motion (if any) is 1–3 intentional moments and respects `prefers-reduced-motion`
|
|
21
|
+
|
|
13
22
|
## Ops
|
|
14
23
|
|
|
15
24
|
- [ ] Matches golden / [page-layouts.md](page-layouts.md) block order
|
|
16
25
|
- [ ] `MPage*` used instead of ad-hoc page chrome where applicable
|
|
17
26
|
- [ ] Tables not wrapped in decorative `MCard` solely for borders
|
|
18
27
|
- [ ] Filters / toolbar / form actions follow documented patterns
|
|
28
|
+
- [ ] Sider `MMenu` items have icons; status cells use `MStatus` (not decorative `MTag`)
|
|
29
|
+
- [ ] Empty table uses `MEmpty` (or equivalent next-action empty)
|
|
19
30
|
- [ ] No marketing hero bolted onto a CRUD shell
|
|
20
31
|
|
|
21
32
|
## Account / Flow / System
|
|
22
33
|
|
|
23
34
|
- [ ] Primary CTA obvious; escape paths present (back / home / support)
|
|
24
|
-
- [ ] Auth errors
|
|
35
|
+
- [ ] Auth errors stay on the form via field `errorMessage` or a token `role="alert"` (`<MMessage>` is the message host, not an inline alert)
|
|
25
36
|
- [ ] Empty uses `MEmpty` (or table `#empty` with `MEmpty`); success / HTTP errors use `MResult`
|
|
26
37
|
- [ ] Empty / success states tell the user the next action
|
|
27
38
|
- [ ] Inline status prefers `MStatus`; chip-like labels use `MTag`
|
|
28
39
|
- [ ] Wizard steps: one job each; actions labeled clearly
|
|
40
|
+
- [ ] Brand / empty atmosphere uses token-only CSS (see visual-craft recipes)
|
|
29
41
|
|
|
30
42
|
## Express
|
|
31
43
|
|
|
@@ -37,7 +49,7 @@
|
|
|
37
49
|
|
|
38
50
|
## Tokens, a11y, responsive
|
|
39
51
|
|
|
40
|
-
- [ ] No raw hex/rgb theme colors in new CSS (control widths OK inline)
|
|
52
|
+
- [ ] No raw hex/rgb theme colors in new CSS (control widths OK inline; `color-mix` from `--m-*` OK)
|
|
41
53
|
- [ ] Labels visible; icon buttons have `aria-label`
|
|
42
54
|
- [ ] Usable on a narrow viewport
|
|
43
55
|
- [ ] Focus visible on interactive elements
|
|
@@ -17,7 +17,7 @@ Pick a lane, then a surface. Prefer project golden pages for **Ops**; use the re
|
|
|
17
17
|
|
|
18
18
|
| Surface | Job | Recipe |
|
|
19
19
|
| --- | --- | --- |
|
|
20
|
-
| Login / register | Authenticate with trust | Golden: MCP `get_golden_page` `login-page` — split brand + `MForm` (`MInput`, `MInputPassword`); form-level errors via token `role="alert"` (not Toast) |
|
|
20
|
+
| Login / register | Authenticate with trust | Golden: MCP `get_golden_page` `login-page` — split brand + `MForm` (`MInput`, `MInputPassword`); form-level errors via token `role="alert"` (not Toast). Brand wash: [visual-craft.md](visual-craft.md) § Atmosphere |
|
|
21
21
|
| Invite / accept | Join org | Same shell; show org name clearly |
|
|
22
22
|
| Forgot / reset | Recover access | Short form + success state with next step |
|
|
23
23
|
| Profile / account | Edit self | Settings-like sections; avatar via `MAvatar` |
|
|
@@ -28,7 +28,7 @@ Keep credential forms quiet: one primary CTA, clear labels, no decorative noise
|
|
|
28
28
|
|
|
29
29
|
| Surface | Job | Recipe |
|
|
30
30
|
| --- | --- | --- |
|
|
31
|
-
| Empty state | Invite first action | Golden: MCP `get_golden_page` `empty-state` — `MEmpty` + primary/secondary `MButton` in `#extra
|
|
31
|
+
| Empty state | Invite first action | Golden: MCP `get_golden_page` `empty-state` — `MEmpty` + primary/secondary `MButton` in `#extra`; dashed shell + radial wash from visual-craft |
|
|
32
32
|
| Onboarding | Teach the product path | `MStepper` or paced cards; one decision per step; finish → Ops home |
|
|
33
33
|
| Wizard | Multi-step create | `MStepper` + `MForm` per step + sticky actions (`上一步` / `下一步` / `提交`) |
|
|
34
34
|
| Success / result | Confirm completion | `MResult` (`status="success"` / `error` …) + next actions (`查看详情` / `返回列表`) |
|
|
@@ -41,7 +41,7 @@ Copy must tell the user **what to do next**, not celebrate the system.
|
|
|
41
41
|
| --- | --- | --- |
|
|
42
42
|
| 404 / not found | Reorient | `MResult status="404"` + `返回首页` / `返回上一页` |
|
|
43
43
|
| Permission denied | Explain + escape | `MResult status="403"` + request access / switch account / go home |
|
|
44
|
-
| Maintenance / error | Honest status | `MResult status="500"
|
|
44
|
+
| Maintenance / error | Honest status | `MResult status="500"`; what happened + retry + support. Persistent form errors: field `errorMessage` or a token `role="alert"`, not `<MMessage>` as an alert |
|
|
45
45
|
|
|
46
46
|
Avoid witty 404 essays that hide the exit paths.
|
|
47
47
|
|
|
@@ -4,11 +4,13 @@ Portable craft for morya-ui consumers. Inspired by **Frontend Design**, **Impecc
|
|
|
4
4
|
|
|
5
5
|
## When to lean on craft
|
|
6
6
|
|
|
7
|
-
| Lane | Craft intensity |
|
|
8
|
-
| --- | --- |
|
|
9
|
-
| Ops CRUD | Low — clarity, density, golden structure |
|
|
10
|
-
| Account / Flow / System | Medium — trust, hierarchy, one calm brand cue |
|
|
11
|
-
| Express | High — design plan + one signature risk |
|
|
7
|
+
| Lane | Craft intensity | Default pass |
|
|
8
|
+
| --- | --- | --- |
|
|
9
|
+
| Ops CRUD | Low — clarity, density, golden structure | **Always** run § Ops polish |
|
|
10
|
+
| Account / Flow / System | Medium — trust, hierarchy, one calm brand cue | **Always** run § Atmosphere recipes when relevant |
|
|
11
|
+
| Express | High — design plan + one signature risk | **Always** run design plan + anti-defaults |
|
|
12
|
+
|
|
13
|
+
Do **not** skip craft because the page is “just admin”. Polished Ops is quiet, aligned, and specific — not decorative.
|
|
12
14
|
|
|
13
15
|
## Design plan (Express & branded moments)
|
|
14
16
|
|
|
@@ -21,6 +23,23 @@ Before code, decide:
|
|
|
21
23
|
|
|
22
24
|
Critique the plan: if it looks like the plan you would write for *any* SaaS, revise until it fits **this** subject.
|
|
23
25
|
|
|
26
|
+
## Ops polish (default — every Ops page)
|
|
27
|
+
|
|
28
|
+
Apply after the golden block order is correct. These are **required**, not optional taste:
|
|
29
|
+
|
|
30
|
+
1. **One primary** — exactly one filled `severity="primary"` in the main viewport (usually toolbar create / form save). Query can be primary; reset stays secondary.
|
|
31
|
+
2. **Sider icons** — every top-level `MMenu` item has an `icon`; icons come from one set (built-in Tabler names). No random emoji.
|
|
32
|
+
3. **Status cells** — row business state → `MStatus` (dot + label). `MTag` only for categories, filters, or closable chips.
|
|
33
|
+
4. **Row actions** — secondary `text` / `outlined` / `size="small"`; danger only on destructive. Prefer `MSpace` with a consistent gap; avoid a wall of filled buttons.
|
|
34
|
+
5. **Filter rhythm** — search ~`14rem`, compact selects ~`10–12rem`; wrap with `MSpace wrap`. Do not stretch filters full-bleed.
|
|
35
|
+
6. **Empty is designed** — `MEmpty` (or table `#empty` with `MEmpty`) with a next action; never a silent blank table or a lone muted sentence.
|
|
36
|
+
7. **No extra cards** — do not wrap `MPageFilters` / `MTable` in decorative `MCard` “for polish”. Dashboard chart/detail modules may use `MCard`.
|
|
37
|
+
8. **Domain copy** — column labels, placeholders, and empty titles use product vernacular, not “Name / Status / No data”.
|
|
38
|
+
9. **Density** — prefer theme default; use `size="small"` on dense tables inside cards. Do not invent a second spacing scale.
|
|
39
|
+
10. **Quiet chrome** — breadcrumb + toolbar title are enough hierarchy; skip marketing heroes, pill-stat strips, and glow on Ops shells.
|
|
40
|
+
|
|
41
|
+
Ops beauty = **alignment + semantics + restraint**, not gradients.
|
|
42
|
+
|
|
24
43
|
## Anti-default looks (AI clusters)
|
|
25
44
|
|
|
26
45
|
Avoid spending free axes on these unless the brief asks:
|
|
@@ -41,6 +60,99 @@ Also avoid: Inter/Roboto/Arial as the *expressive* display choice on Express sur
|
|
|
41
60
|
- **Motion**: orchestrate 2–3 intentional moments max; respect `prefers-reduced-motion`. Prefer transform/opacity over layout thrash.
|
|
42
61
|
- **Density**: Ops may be compact; Express needs breathing room — match the lane.
|
|
43
62
|
|
|
63
|
+
## Atmosphere recipes (token-only)
|
|
64
|
+
|
|
65
|
+
Copy patterns, remap brand copy. **No hex.** Prefer `color-mix` / gradients from `--m-*`. See golden pages `login-page`, `landing-page`, `empty-state`.
|
|
66
|
+
|
|
67
|
+
### Account — split brand panel
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
.login-brand {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
justify-content: flex-end;
|
|
74
|
+
gap: var(--m-space-4);
|
|
75
|
+
padding: clamp(2rem, 6vw, 4.5rem);
|
|
76
|
+
background:
|
|
77
|
+
radial-gradient(
|
|
78
|
+
80% 60% at 10% 20%,
|
|
79
|
+
color-mix(in srgb, var(--m-color-primary) 22%, transparent),
|
|
80
|
+
transparent 55%
|
|
81
|
+
),
|
|
82
|
+
linear-gradient(
|
|
83
|
+
165deg,
|
|
84
|
+
color-mix(in srgb, var(--m-color-primary) 16%, var(--m-color-surface)) 0%,
|
|
85
|
+
var(--m-color-surface) 55%,
|
|
86
|
+
color-mix(in srgb, var(--m-color-border) 35%, var(--m-color-surface)) 100%
|
|
87
|
+
);
|
|
88
|
+
border-right: 1px solid var(--m-color-border);
|
|
89
|
+
}
|
|
90
|
+
.login-brand__title {
|
|
91
|
+
margin: 0;
|
|
92
|
+
max-width: 12em;
|
|
93
|
+
font-size: clamp(2rem, 4vw, 3rem);
|
|
94
|
+
font-weight: 650;
|
|
95
|
+
line-height: 1.15;
|
|
96
|
+
letter-spacing: -0.03em;
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Form side stays calm: one panel ~`22rem`, token `role="alert"` for form-level errors (not Toast, not `<MMessage severity>`).
|
|
101
|
+
|
|
102
|
+
### Express — hero plane
|
|
103
|
+
|
|
104
|
+
Full-bleed thesis: brand mark (small) → one headline → one lead → CTA group → **one** dominant visual (timeline, product artifact, or edge-to-edge wash). Atmosphere:
|
|
105
|
+
|
|
106
|
+
```css
|
|
107
|
+
.landing-hero__visual {
|
|
108
|
+
margin-top: var(--m-space-5);
|
|
109
|
+
padding: var(--m-space-5);
|
|
110
|
+
border: 1px solid var(--m-color-border);
|
|
111
|
+
border-radius: var(--m-radius-md);
|
|
112
|
+
background:
|
|
113
|
+
linear-gradient(
|
|
114
|
+
135deg,
|
|
115
|
+
color-mix(in srgb, var(--m-color-primary) 12%, var(--m-color-surface)),
|
|
116
|
+
var(--m-color-surface) 60%
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Optional micro-motion (one signature only):
|
|
122
|
+
|
|
123
|
+
```css
|
|
124
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
125
|
+
.landing-hero__track span {
|
|
126
|
+
animation: m-craft-fade-up 480ms ease both;
|
|
127
|
+
}
|
|
128
|
+
.landing-hero__track span:nth-child(2) { animation-delay: 60ms; }
|
|
129
|
+
.landing-hero__track span:nth-child(3) { animation-delay: 120ms; }
|
|
130
|
+
.landing-hero__track span:nth-child(4) { animation-delay: 180ms; }
|
|
131
|
+
}
|
|
132
|
+
@keyframes m-craft-fade-up {
|
|
133
|
+
from { opacity: 0; transform: translateY(0.4rem); }
|
|
134
|
+
to { opacity: 1; transform: translateY(0); }
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Flow — empty state shell
|
|
139
|
+
|
|
140
|
+
```css
|
|
141
|
+
.empty-state-shell {
|
|
142
|
+
border: 1px dashed color-mix(in srgb, var(--m-color-border) 80%, var(--m-color-primary));
|
|
143
|
+
border-radius: var(--m-radius-md);
|
|
144
|
+
background:
|
|
145
|
+
radial-gradient(
|
|
146
|
+
120% 80% at 50% 0%,
|
|
147
|
+
color-mix(in srgb, var(--m-color-primary) 10%, transparent),
|
|
148
|
+
transparent 55%
|
|
149
|
+
),
|
|
150
|
+
var(--m-color-surface);
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
Pair with `MEmpty` + primary next step + optional secondary text button. One memory cue (icon / wash) — no emoji collage.
|
|
155
|
+
|
|
44
156
|
## UX writing
|
|
45
157
|
|
|
46
158
|
- Name controls by user intent (`保存更改`), not system guts (`提交表单实体`).
|
|
@@ -51,7 +163,9 @@ Also avoid: Inter/Roboto/Arial as the *expressive* display choice on Express sur
|
|
|
51
163
|
|
|
52
164
|
## Polish modes (Impeccable-inspired)
|
|
53
165
|
|
|
54
|
-
|
|
166
|
+
**Default:** after compose, run a lane-appropriate light pass (§ Ops polish and/or atmosphere).
|
|
167
|
+
|
|
168
|
+
When the user asks to improve an existing surface, pick a named mode:
|
|
55
169
|
|
|
56
170
|
| Mode | Intent |
|
|
57
171
|
| --- | --- |
|
|
@@ -81,3 +195,4 @@ For Express briefs that only say “modern / professional / playful”:
|
|
|
81
195
|
- Keyboard reaches primary actions
|
|
82
196
|
- No raw theme colors that break dark mode when the app supports it
|
|
83
197
|
- Icons decorative vs informative handled correctly (`aria-hidden` vs `aria-label`)
|
|
198
|
+
- Craft pass completed for the lane (Ops polish and/or atmosphere) before delivery
|
|
@@ -17,12 +17,12 @@ import { MButton, MInput } from 'morya-ui'
|
|
|
17
17
|
## 必选模式
|
|
18
18
|
|
|
19
19
|
- 表单:`MForm` + `MFormItem` + 字段组件;提交用 `@submit` + `type="submit"`。
|
|
20
|
-
- 表格:`MTable` 的 `columns` + `
|
|
20
|
+
- 表格:`MTable` 的 `columns` + `rows` + `row-key`;单元格用 `#cell-{key}` 插槽。没有 `data` prop。
|
|
21
21
|
- 浮层:详情/编辑 `MDialog`;侧栏 `MDrawer`;删除确认 `MConfirmDialog`。
|
|
22
22
|
- 反馈(**默认 Message**):
|
|
23
23
|
- 单行操作结果 → `message.success/info/warn/error('…')`
|
|
24
24
|
- 有标题 + 详情 / 异步通知 → `toast.*({ summary, detail })`
|
|
25
|
-
- 表单区常驻错误 →
|
|
25
|
+
- 表单区常驻错误 → 字段 `errorMessage`,或 token 样式的 `role="alert"`(`<MMessage>` 只是 message 宿主,不是内嵌 Alert)
|
|
26
26
|
- 详见 skill `references/feedback.md`
|
|
27
27
|
|
|
28
28
|
## Props 约定
|
|
@@ -12,6 +12,6 @@ alwaysApply: true
|
|
|
12
12
|
5. **表单选项** 用 `MSelect` / `MTreeSelect`;**动作菜单** 用 `MDropdown`。
|
|
13
13
|
6. 不确定 API 时查文档站或 MCP,**禁止臆造 prop**。
|
|
14
14
|
7. 根节点用 `MConfigProvider`;后台布局用 `MLayout` 系列。
|
|
15
|
-
8. **操作反馈默认 `message` API**;仅 `summary + detail` 或异步通知用 `toast
|
|
15
|
+
8. **操作反馈默认 `message` API**;仅 `summary + detail` 或异步通知用 `toast`;表单常驻错误用字段 `errorMessage` 或 token 样式的 `role="alert"`(`<MMessage>` 只是 message 宿主)。见 skill `references/feedback.md`。
|
|
16
16
|
|
|
17
17
|
Token 参考:MCP `get_design_rules`(运行时以 `morya-ui/styles.css` 为准)
|
package/template/DESIGN.md
CHANGED
|
@@ -1,98 +1,25 @@
|
|
|
1
1
|
# Morya UI 设计系统(AI 第一信源)
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> 生成或审查使用 `morya-ui` 的界面时,**必须先遵守本文**。
|
|
4
|
+
> 本文只写与页面类型无关的契约。某一类页面怎么拼、用哪个组件,见 `morya-ui-pages` skill 与 MCP,不要从本文推断出唯一布局。
|
|
4
5
|
|
|
5
6
|
## 1. 设计原则
|
|
6
7
|
|
|
7
|
-
1.
|
|
8
|
-
2. **令牌优先**:颜色、间距、圆角、阴影、动效使用 `--m
|
|
9
|
-
3. **语义一致**:主操作 `
|
|
10
|
-
4.
|
|
11
|
-
5.
|
|
8
|
+
1. **组件优先**:交互与布局使用库内 `M*`,不手写等价 DOM。
|
|
9
|
+
2. **令牌优先**:颜色、间距、圆角、阴影、动效使用 `--m-*`;禁止裸 `#hex` / `rgb()`(`scripts/check-raw-colors.mjs` 可扫描)。
|
|
10
|
+
3. **语义一致**:主操作 `severity="primary"`;破坏性操作用 `severity="danger"` 或确认。
|
|
11
|
+
4. **可访问性**:控件有可访问名称;仅图标的按钮带 `aria-label`;浮层可键盘关闭。
|
|
12
|
+
5. **单一事实源**:组件 API 以 MCP / 文档为准,禁止臆造 prop、event、slot。
|
|
12
13
|
|
|
13
|
-
## 2.
|
|
14
|
+
## 2. 应用根
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
import 'morya-ui/styles.css'
|
|
19
|
-
</script>
|
|
16
|
+
- 入口引入 `morya-ui/styles.css`(或按需子路径样式)。
|
|
17
|
+
- 应用根使用 `MConfigProvider`,统一 locale、主题、密度与浮层挂载。
|
|
18
|
+
- 外壳随场景选择,不要把侧栏后台当成所有页面的默认结构。
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
<MConfigProvider :locale="zhCN">
|
|
23
|
-
<MLayout has-sider fill-viewport>
|
|
24
|
-
<MLayoutSider bordered>
|
|
25
|
-
<MMenu
|
|
26
|
-
:model="[
|
|
27
|
-
{ key: 'users', label: '用户管理', icon: 'user', to: '/users' },
|
|
28
|
-
{ key: 'roles', label: '角色管理', icon: 'shield', to: '/roles' },
|
|
29
|
-
]"
|
|
30
|
-
/>
|
|
31
|
-
</MLayoutSider>
|
|
32
|
-
<MLayout>
|
|
33
|
-
<MLayoutHeader>...</MLayoutHeader>
|
|
34
|
-
<MLayoutContent>...</MLayoutContent>
|
|
35
|
-
</MLayout>
|
|
36
|
-
</MLayout>
|
|
37
|
-
</MConfigProvider>
|
|
38
|
-
</template>
|
|
39
|
-
```
|
|
20
|
+
## 3. 设计令牌(摘要)
|
|
40
21
|
|
|
41
|
-
|
|
42
|
-
- 侧栏导航:`MMenu`
|
|
43
|
-
- 页面内容堆叠:`MPageContent`(内置于 `MLayoutContent`)
|
|
44
|
-
- 列表筛选 / 工具栏:`MPageFilters` + `MPageToolbar`
|
|
45
|
-
- 表单引导 / 表面:`MPageHeader` + `MPageSection variant="form|actions"`
|
|
46
|
-
- 仪表盘 KPI / 占位:`MPageStat` + `MPagePlaceholder`
|
|
47
|
-
- 其他分区:`MCard`(图表/明细模块)/ `MPanel` / `MFieldset`
|
|
48
|
-
- 栅格:`MGrid` + `MGridItem` 或 `MFlex` + `MSpace`
|
|
49
|
-
|
|
50
|
-
## 3. 页面类型与黄金样例
|
|
51
|
-
|
|
52
|
-
| 类型 | MCP `get_golden_page` | 必备区块 |
|
|
53
|
-
| --- | --- | --- |
|
|
54
|
-
| 列表页 | `list-page` | 面包屑、筛选区、工具栏、表格、分页 |
|
|
55
|
-
| 表单页 | `form-page` | 面包屑、分组表单、`MForm` / `MFormItem`、提交/取消 |
|
|
56
|
-
| 仪表盘 | `dashboard-page` | 统计卡片栅格、图表区占位、快捷入口 / 最近列表 |
|
|
57
|
-
| 登录页 | `login-page` | 品牌区 + `MForm` / `MInputPassword`;表单级错误用 token 告警条 |
|
|
58
|
-
| 营销落地 | `landing-page` | 单任务首屏、分节、`MButton` / `MTag` / `MAccordion` |
|
|
59
|
-
| 空状态 | `empty-state` | `MEmpty` + 说明 + 主 CTA;可嵌列表 `#empty` |
|
|
60
|
-
|
|
61
|
-
生成 **Ops** 页面时:结构对齐对应黄金样例,用 `MPage*` 拼装,尽量少写 scoped CSS。
|
|
62
|
-
生成 **Account / Express / Flow** 页面时:对齐上表样例;允许有节制的 scoped 布局,但颜色/间距仍用 `--m-*`。
|
|
63
|
-
|
|
64
|
-
## 4. 表单约定
|
|
65
|
-
|
|
66
|
-
- 使用 `MForm` + `MFormItem`,`name` 与校验规则对应。
|
|
67
|
-
- **从列表新建/编辑(字段约 ≤8、单段表单)默认用 `MDialog` + `MForm`,不要为每个实体再开独立路由表单页。**
|
|
68
|
-
- 多分组、长流程、向导式录入再用独立表单页(MCP `get_golden_page` `form-page`)或 `MDrawer`。
|
|
69
|
-
- 字段组件自带 `label` / `invalid` / `helpText` 时优先用组件 prop(如 `MInput`、`MSelect`),复杂表单再用 `MFormItem` 包一层。
|
|
70
|
-
- 尺寸:默认 medium;密集后台可 `size="small"` 或 ConfigProvider `globalDensity`。
|
|
71
|
-
- 宽度:筛选项 `fluid` 慎用;独立表单页主栏 `max-width: 40rem` 左右。
|
|
72
|
-
|
|
73
|
-
## 5. 数据展示
|
|
74
|
-
|
|
75
|
-
- 表格:`MTable` + 列定义;行操作放 `MButton` text/link 或 `MDropdown`。
|
|
76
|
-
- 分页:`MPagination` 与表格同级,右对齐或居中。
|
|
77
|
-
- 空态:表格 `emptyMessage` 或自定义 `#empty` 插槽;禁止空白区域无提示。
|
|
78
|
-
|
|
79
|
-
## 6. 浮层与反馈
|
|
80
|
-
|
|
81
|
-
| 场景 | 组件 |
|
|
82
|
-
| --- | --- |
|
|
83
|
-
| 确认删除 | `MConfirmDialog` 或 `MConfirmPopup` |
|
|
84
|
-
| 详情 / 编辑弹窗 | `MDialog` |
|
|
85
|
-
| 侧滑筛选 / 详情 | `MDrawer` |
|
|
86
|
-
| **操作结果(默认)** | **`message` API**(单行:已保存 / 已删除) |
|
|
87
|
-
| 标题 + 详情 / 异步通知 | `toast` API(`summary` + `detail`) |
|
|
88
|
-
| 表单区常驻错误 | token 告警条 / 字段 `errorMessage` |
|
|
89
|
-
| 字段说明 | `MTooltip` |
|
|
90
|
-
|
|
91
|
-
**选型细则见 `morya-ui-pages` skill 的 `references/feedback.md`。AI 生成代码时:无 `detail` 的操作回执一律用 `message`,不要默认 Toast。**
|
|
92
|
-
|
|
93
|
-
## 7. 设计令牌(摘要)
|
|
94
|
-
|
|
95
|
-
完整定义见 MCP `get_design_rules`。运行时以 `morya-ui/styles.css` 为准。
|
|
22
|
+
完整定义见 MCP `get_design_rules`。运行时以已安装的 `morya-ui/styles.css` 为准。
|
|
96
23
|
|
|
97
24
|
| 用途 | 变量 |
|
|
98
25
|
| --- | --- |
|
|
@@ -103,29 +30,25 @@ import 'morya-ui/styles.css'
|
|
|
103
30
|
| 品牌 / 链接 | `--m-color-primary` |
|
|
104
31
|
| 错误 | `--m-color-danger` |
|
|
105
32
|
| 区块间距 | `--m-space-4` / `--m-space-6` |
|
|
106
|
-
|
|
|
107
|
-
| 卡片阴影 | `--m-shadow-md` |
|
|
33
|
+
| 圆角 / 阴影 | `--m-radius-md` / `--m-shadow-md` |
|
|
108
34
|
|
|
109
|
-
##
|
|
35
|
+
## 4. 禁止项
|
|
110
36
|
|
|
111
|
-
-
|
|
112
|
-
-
|
|
113
|
-
-
|
|
114
|
-
-
|
|
115
|
-
-
|
|
37
|
+
- 禁止同一界面混用第二套 UI 库。
|
|
38
|
+
- 禁止业务 CSS 写死主题色;暗色须能随 `[data-theme="dark"]` 生效。
|
|
39
|
+
- 禁止用不可聚焦的容器冒充按钮。
|
|
40
|
+
- 禁止跳过样式入口。
|
|
41
|
+
- 禁止把某一类页面的配方写成所有页面的默认结构。
|
|
116
42
|
|
|
117
|
-
##
|
|
43
|
+
## 5. AI 工作流
|
|
118
44
|
|
|
119
|
-
1.
|
|
120
|
-
2.
|
|
121
|
-
3. 用 MCP
|
|
122
|
-
4.
|
|
123
|
-
5. 完成后运行 `pnpm check:colors`(若已配置)。
|
|
124
|
-
6. 操作反馈见 skill `references/feedback.md`:**默认 `message`,有 detail 才用 `toast`**。
|
|
45
|
+
1. 读本文,确认契约。
|
|
46
|
+
2. 加载 `morya-ui-pages`,由 skill 选定表面与布局;可选 companion 只补充视觉或无障碍,冲突时本文 + skill + MCP 优先。
|
|
47
|
+
3. 用 MCP 查真实 API 与样例后再写代码。
|
|
48
|
+
4. 完成后可运行 `pnpm check:colors`(若已配置)。
|
|
125
49
|
|
|
126
|
-
##
|
|
50
|
+
## 6. 相关资源
|
|
127
51
|
|
|
128
|
-
-
|
|
129
|
-
-
|
|
130
|
-
-
|
|
131
|
-
- 主题 API:`useTheme` / `useDensity` / `useMotion`(同包导出)
|
|
52
|
+
- 包:`morya-ui` · 样式:`morya-ui/styles.css`
|
|
53
|
+
- 页面配方:`.agents/skills/morya-ui-pages/`(及 setup 时勾选的 companion)
|
|
54
|
+
- 主题 API:`useTheme` / `useDensity` / `useMotion`
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 Morya UI contributors
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|