@morya-ui/mcp 0.3.4 → 0.3.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 -0
- package/bin/morya-ui-mcp.js +0 -0
- package/data/catalog.json +31 -31
- package/data/example-coverage.json +2 -2
- package/data/golden-pages/list-page-dense.vue +3 -1
- package/data/golden-pages/list-page-rail.vue +3 -1
- package/data/golden-pages/list-page.vue +3 -1
- package/dist/__tests__/page-snippets.test.js +29 -0
- package/dist/__tests__/tools.test.js +40 -22
- package/dist/decisions.d.ts +2 -0
- package/dist/decisions.js +34 -6
- package/dist/golden-pages.d.ts +6 -1
- package/dist/golden-pages.js +34 -33
- package/dist/index.js +8 -8
- package/dist/page-snippets.js +712 -38
- package/dist/patterns.d.ts +4 -2
- package/dist/patterns.js +35 -6
- package/dist/style-presets.d.ts +13 -32
- package/dist/style-presets.js +100 -291
- package/dist/tools.d.ts +3 -11
- package/dist/tools.js +59 -77
- package/package.json +11 -13
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
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.
|
package/bin/morya-ui-mcp.js
CHANGED
|
File without changes
|
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-09-
|
|
2
|
+
"generatedAt": "2026-09-25T05:07:42.993Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.3.
|
|
5
|
+
"version": "0.3.5"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.3.
|
|
9
|
+
"version": "0.3.5"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -15276,7 +15276,7 @@
|
|
|
15276
15276
|
{
|
|
15277
15277
|
"name": "collapsible",
|
|
15278
15278
|
"type": "boolean",
|
|
15279
|
-
"description": "为 true 且提供 `#advanced`
|
|
15279
|
+
"description": "为 true 且提供 `#advanced` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 chevron）。"
|
|
15280
15280
|
},
|
|
15281
15281
|
{
|
|
15282
15282
|
"name": "expanded",
|
|
@@ -15375,6 +15375,10 @@
|
|
|
15375
15375
|
"name": "default",
|
|
15376
15376
|
"description": "自定义说明内容。"
|
|
15377
15377
|
},
|
|
15378
|
+
{
|
|
15379
|
+
"name": "actions",
|
|
15380
|
+
"description": "标题行右侧操作区。"
|
|
15381
|
+
},
|
|
15378
15382
|
{
|
|
15379
15383
|
"name": "advanced",
|
|
15380
15384
|
"description": "折叠区（需 `collapsible`）。"
|
|
@@ -15383,10 +15387,6 @@
|
|
|
15383
15387
|
"name": "active",
|
|
15384
15388
|
"description": "可选；已选摘要（更常见是下方 `MPageFilterChips`）。"
|
|
15385
15389
|
},
|
|
15386
|
-
{
|
|
15387
|
-
"name": "actions",
|
|
15388
|
-
"description": "标题行右侧操作区。"
|
|
15389
|
-
},
|
|
15390
15390
|
{
|
|
15391
15391
|
"name": "breadcrumb",
|
|
15392
15392
|
"description": "标题上方的面包屑（放 `MBreadcrumb`）。"
|
|
@@ -15421,7 +15421,7 @@
|
|
|
15421
15421
|
"sectionId": "列表页组合",
|
|
15422
15422
|
"lang": "vue",
|
|
15423
15423
|
"preview": true,
|
|
15424
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilters,\n MPageHeader,\n MPageToolbar,\n MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent>\n <MPageHeader title=\"用户管理\" description=\"维护账号与角色。\">\n <template #actions>\n <MButton severity=\"primary\">\n 新建\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters aria-label=\"筛选\" variant=\"filled\">\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"搜索\" clearable class=\"w-48\" />\n <MButton severity=\"secondary\">\n 查询\n </MButton>\n </
|
|
15424
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilters,\n MPageHeader,\n MPageToolbar,\n MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent>\n <MPageHeader title=\"用户管理\" description=\"维护账号与角色。\">\n <template #actions>\n <MButton severity=\"primary\">\n 新建\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters aria-label=\"筛选\" variant=\"filled\">\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"搜索\" clearable class=\"w-48\" />\n </MSpace>\n <template #actions>\n <MButton severity=\"secondary\">\n 查询\n </MButton>\n </template>\n </MPageFilters>\n <MPageToolbar>\n <span style=\"color:var(--m-color-text-muted);font-size:var(--m-font-size-sm)\">已选 0 项</span>\n <template #actions>\n <MButton severity=\"secondary\" text>\n 导出\n </MButton>\n <MButton severity=\"danger\" text>\n 删除\n </MButton>\n </template>\n </MPageToolbar>\n </MPageContent>\n </div>\n</template>",
|
|
15425
15425
|
"locale": "zh-CN"
|
|
15426
15426
|
},
|
|
15427
15427
|
{
|
|
@@ -15430,7 +15430,7 @@
|
|
|
15430
15430
|
"sectionId": "列表页组合",
|
|
15431
15431
|
"lang": "vue",
|
|
15432
15432
|
"preview": true,
|
|
15433
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MSelect,\n MSpace,\n MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n const items: Array<{ key: string; label: string }> = []\n if (keyword.value.trim()) {\n items.push({ key: 'keyword', label: `关键词：${keyword.value.trim()}` })\n }\n if (status.value && status.value !== 'all') {\n items.push({ key: 'status', label: `状态：${status.value === 'active' ? '启用' : '停用'}` })\n }\n if (department.value) {\n items.push({ key: 'department', label: `部门：${department.value}` })\n }\n return items\n})\n\nfunction clearFilter(key: string) {\n if (key === 'keyword') keyword.value = ''\n if (key === 'status') status.value = 'all'\n if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n keyword.value = ''\n status.value = 'all'\n department.value = null\n}\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent>\n <MPageHeader title=\"用户管理\" description=\"
|
|
15433
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MSelect,\n MSpace,\n MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n const items: Array<{ key: string; label: string }> = []\n if (keyword.value.trim()) {\n items.push({ key: 'keyword', label: `关键词：${keyword.value.trim()}` })\n }\n if (status.value && status.value !== 'all') {\n items.push({ key: 'status', label: `状态：${status.value === 'active' ? '启用' : '停用'}` })\n }\n if (department.value) {\n items.push({ key: 'department', label: `部门：${department.value}` })\n }\n return items\n})\n\nfunction clearFilter(key: string) {\n if (key === 'keyword') keyword.value = ''\n if (key === 'status') status.value = 'all'\n if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n keyword.value = ''\n status.value = 'all'\n department.value = null\n}\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent>\n <MPageHeader title=\"用户管理\" description=\"折叠高级筛选（chevron + 收起），查询/重置放 #actions。\">\n <template #actions>\n <MButton severity=\"primary\">\n 新建\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters\n v-model:expanded=\"filtersExpanded\"\n aria-label=\"筛选\"\n variant=\"filled\"\n collapsible\n >\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"搜索名称\" clearable style=\"width: 14rem\" />\n <MSelect\n v-model=\"status\"\n :options=\"[\n { label: '全部', value: 'all' },\n { label: '启用', value: 'active' },\n { label: '停用', value: 'inactive' },\n ]\"\n placeholder=\"状态\"\n style=\"width: 10rem\"\n />\n </MSpace>\n <template #actions>\n <MButton severity=\"secondary\">\n 查询\n </MButton>\n <MButton severity=\"secondary\" text @click=\"resetAll\">\n 重置\n </MButton>\n </template>\n <template #advanced>\n <MSpace wrap>\n <MSelect\n v-model=\"department\"\n :options=\"[\n { label: '研发', value: '研发' },\n { label: '运营', value: '运营' },\n ]\"\n placeholder=\"部门\"\n clearable\n style=\"width: 10rem\"\n />\n </MSpace>\n </template>\n </MPageFilters>\n <MPageFilterChips v-if=\"activeFilters.length\" label=\"已选\" aria-label=\"已选筛选\">\n <MTag\n v-for=\"item in activeFilters\"\n :key=\"item.key\"\n :value=\"item.label\"\n size=\"small\"\n bordered\n closable\n @close=\"clearFilter(item.key)\"\n />\n </MPageFilterChips>\n </MPageContent>\n </div>\n</template>",
|
|
15434
15434
|
"locale": "zh-CN"
|
|
15435
15435
|
},
|
|
15436
15436
|
{
|
|
@@ -15475,7 +15475,7 @@
|
|
|
15475
15475
|
"sectionId": "list-page-stack",
|
|
15476
15476
|
"lang": "vue",
|
|
15477
15477
|
"preview": true,
|
|
15478
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilters,\n MPageHeader,\n MPageToolbar,\n MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent>\n <MPageHeader title=\"Users\" description=\"Manage accounts and roles.\">\n <template #actions>\n <MButton severity=\"primary\">\n Create\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters aria-label=\"Filters\" variant=\"filled\">\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"Search\" clearable class=\"w-48\" />\n <MButton severity=\"secondary\">\n Search\n </MButton>\n </
|
|
15478
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilters,\n MPageHeader,\n MPageToolbar,\n MSpace,\n} from 'morya-ui'\nimport { ref } from 'vue'\n\nconst keyword = ref('')\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent>\n <MPageHeader title=\"Users\" description=\"Manage accounts and roles.\">\n <template #actions>\n <MButton severity=\"primary\">\n Create\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters aria-label=\"Filters\" variant=\"filled\">\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"Search\" clearable class=\"w-48\" />\n </MSpace>\n <template #actions>\n <MButton severity=\"secondary\">\n Search\n </MButton>\n </template>\n </MPageFilters>\n <MPageToolbar>\n <span style=\"color:var(--m-color-text-muted);font-size:var(--m-font-size-sm)\">0 selected</span>\n <template #actions>\n <MButton severity=\"secondary\" text>\n Export\n </MButton>\n <MButton severity=\"danger\" text>\n Delete\n </MButton>\n </template>\n </MPageToolbar>\n </MPageContent>\n </div>\n</template>",
|
|
15479
15479
|
"locale": "en-US"
|
|
15480
15480
|
},
|
|
15481
15481
|
{
|
|
@@ -15484,7 +15484,7 @@
|
|
|
15484
15484
|
"sectionId": "list-page-stack",
|
|
15485
15485
|
"lang": "vue",
|
|
15486
15486
|
"preview": true,
|
|
15487
|
-
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MSelect,\n MSpace,\n MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n const items: Array<{ key: string; label: string }> = []\n if (keyword.value.trim()) {\n items.push({ key: 'keyword', label: `Keyword: ${keyword.value.trim()}` })\n }\n if (status.value && status.value !== 'all') {\n items.push({\n key: 'status',\n label: `Status: ${status.value === 'active' ? 'Active' : 'Inactive'}`,\n })\n }\n if (department.value) {\n items.push({ key: 'department', label: `Department: ${department.value}` })\n }\n return items\n})\n\nfunction clearFilter(key: string) {\n if (key === 'keyword') keyword.value = ''\n if (key === 'status') status.value = 'all'\n if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n keyword.value = ''\n status.value = 'all'\n department.value = null\n}\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent>\n <MPageHeader title=\"Users\" description=\"Collapsible advanced filters
|
|
15487
|
+
"code": "<script setup lang=\"ts\">\nimport {\n MButton,\n MInput,\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MSelect,\n MSpace,\n MTag,\n} from 'morya-ui'\nimport { computed, ref } from 'vue'\n\nconst keyword = ref('')\nconst status = ref<string | null>('active')\nconst filtersExpanded = ref(false)\nconst department = ref<string | null>(null)\n\nconst activeFilters = computed(() => {\n const items: Array<{ key: string; label: string }> = []\n if (keyword.value.trim()) {\n items.push({ key: 'keyword', label: `Keyword: ${keyword.value.trim()}` })\n }\n if (status.value && status.value !== 'all') {\n items.push({\n key: 'status',\n label: `Status: ${status.value === 'active' ? 'Active' : 'Inactive'}`,\n })\n }\n if (department.value) {\n items.push({ key: 'department', label: `Department: ${department.value}` })\n }\n return items\n})\n\nfunction clearFilter(key: string) {\n if (key === 'keyword') keyword.value = ''\n if (key === 'status') status.value = 'all'\n if (key === 'department') department.value = null\n}\n\nfunction resetAll() {\n keyword.value = ''\n status.value = 'all'\n department.value = null\n}\n</script>\n\n<template>\n <div\n class=\"doc-demo-frame\"\n style=\"border:1px solid var(--m-color-border);border-radius:var(--m-radius-md);overflow:visible;background:var(--m-color-surface)\"\n >\n <MPageContent>\n <MPageHeader title=\"Users\" description=\"Collapsible advanced filters (chevron + Collapse); query/reset in #actions.\">\n <template #actions>\n <MButton severity=\"primary\">\n Create\n </MButton>\n </template>\n </MPageHeader>\n <MPageFilters\n v-model:expanded=\"filtersExpanded\"\n aria-label=\"Filters\"\n variant=\"filled\"\n collapsible\n >\n <MSpace wrap>\n <MInput v-model=\"keyword\" placeholder=\"Search name\" clearable style=\"width: 14rem\" />\n <MSelect\n v-model=\"status\"\n :options=\"[\n { label: 'All', value: 'all' },\n { label: 'Active', value: 'active' },\n { label: 'Inactive', value: 'inactive' },\n ]\"\n placeholder=\"Status\"\n style=\"width: 10rem\"\n />\n </MSpace>\n <template #actions>\n <MButton severity=\"secondary\">\n Search\n </MButton>\n <MButton severity=\"secondary\" text @click=\"resetAll\">\n Reset\n </MButton>\n </template>\n <template #advanced>\n <MSpace wrap>\n <MSelect\n v-model=\"department\"\n :options=\"[\n { label: 'Engineering', value: 'Engineering' },\n { label: 'Operations', value: 'Operations' },\n ]\"\n placeholder=\"Department\"\n clearable\n style=\"width: 10rem\"\n />\n </MSpace>\n </template>\n </MPageFilters>\n <MPageFilterChips v-if=\"activeFilters.length\" label=\"Active\" aria-label=\"Active filters\">\n <MTag\n v-for=\"item in activeFilters\"\n :key=\"item.key\"\n :value=\"item.label\"\n size=\"small\"\n bordered\n closable\n @close=\"clearFilter(item.key)\"\n />\n </MPageFilterChips>\n </MPageContent>\n </div>\n</template>",
|
|
15488
15488
|
"locale": "en-US"
|
|
15489
15489
|
},
|
|
15490
15490
|
{
|
|
@@ -15515,7 +15515,7 @@
|
|
|
15515
15515
|
{
|
|
15516
15516
|
"id": "列表页组合",
|
|
15517
15517
|
"title": "列表页组合",
|
|
15518
|
-
"body": "`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n**列表高度（按需）**：仅当这是 `MLayout fillViewport` 下的**后台主列表**、表格是页面主任务时，再用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）。嵌入表、短页、整页文档滚动不要硬套 `fill`。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced`
|
|
15518
|
+
"body": "`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n**列表高度（按需）**：仅当这是 `MLayout fillViewport` 下的**后台主列表**、表格是页面主任务时，再用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）。嵌入表、短页、整页文档滚动不要硬套 `fill`。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；查询/重置放 `#actions`（与「高级筛选」chevron 切换同列）；已选条件用 `MPageFilterChips` 包一层 `MTag closable`（不要用自定义 dashed 壳）。\n\n```vue preview src=\"./demos/ListFiltersAdvanced.zh.vue\"\n```\n\n**面包屑**：路由级 trail 放在 `MLayoutHeader` 的 `MBreadcrumb`；若页内还需要上下文，用 `MPageHeader` 的 `#breadcrumb` 插槽——**不要**在 Layout 与 Page 各写一遍相同标题链。"
|
|
15519
15519
|
},
|
|
15520
15520
|
{
|
|
15521
15521
|
"id": "表单页组合",
|
|
@@ -15535,10 +15535,10 @@
|
|
|
15535
15535
|
{
|
|
15536
15536
|
"id": "api",
|
|
15537
15537
|
"title": "API",
|
|
15538
|
-
"body": "### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n| `fill` | `boolean` | `false` | 撑满 `MLayoutContent` 剩余高度；仅全视口主列表与 `MTable fill` 联用。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced`
|
|
15538
|
+
"body": "### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n| `fill` | `boolean` | `false` | 撑满 `MLayoutContent` 剩余高度；仅全视口主列表与 `MTable fill` 联用。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 chevron）。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件（Input / Select 等）。 |\n| `actions` | 查询/重置等操作，与折叠切换组成右侧尾部簇（推荐）。 |\n| `advanced` | 折叠区（需 `collapsible`）。 |\n| `active` | 可选；已选摘要（更常见是下方 `MPageFilterChips`）。 |\n\n### MPageFilterChips\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 弱前缀，如「已选」。 |\n| `ariaLabel` | `string` | — | 已选条件列表的无障碍名称。 |\n\n默认插槽放 `MTag closable` 或同类可移除标记。\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 操作条组名（`--m-font-size-md`），不是页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题（`--m-font-size-xl`）。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `breadcrumb` | 标题上方的面包屑（放 `MBreadcrumb`）。 |\n| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |"
|
|
15539
15539
|
}
|
|
15540
15540
|
],
|
|
15541
|
-
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: 业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。\n---\n\n# Page\n\n业务页面组合组件。与 `MLayout` 搭配使用，把列表页筛选区、工具栏、表单分组、KPI 卡片等常见区块的间距和边框内聚到组件内，**优先用 Page 组件拼装页面，而不是每页手写 scoped CSS**。\n\n## 引入\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## 列表页组合\n\n`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n**列表高度（按需）**：仅当这是 `MLayout fillViewport` 下的**后台主列表**、表格是页面主任务时，再用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）。嵌入表、短页、整页文档滚动不要硬套 `fill`。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced`
|
|
15541
|
+
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: 业务页面组合区块，封装间距、边框与标题层级，少写或不写页面 CSS。\n---\n\n# Page\n\n业务页面组合组件。与 `MLayout` 搭配使用，把列表页筛选区、工具栏、表单分组、KPI 卡片等常见区块的间距和边框内聚到组件内，**优先用 Page 组件拼装页面，而不是每页手写 scoped CSS**。\n\n## 引入\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## 列表页组合\n\n`MPageContent` 负责内容区 **padding**（默认 `--m-space-6`）与子区块 **gap**（默认 `--m-space-4`），文档预览中外框仅模拟 `MLayoutContent` 边界。\n\n**列表高度（按需）**：仅当这是 `MLayout fillViewport` 下的**后台主列表**、表格是页面主任务时，再用 `MPageContent fill` + `MTable fill paginator`（表体滚动、分页贴底）。嵌入表、短页、整页文档滚动不要硬套 `fill`。\n\n`MPageFilters` 默认是 **无框的控件行**（`variant=\"plain\"`）；需要一条可辨识的工具带时再用 `variant=\"filled\"`（与 Table header 相同的 `--m-color-fill-light`，无圆角）。`MPageHeader` 是页面身份（约 `--m-font-size-xl`）；`MPageToolbar` 是列表操作条（`--m-font-size-md`），不要当成第二页头。\n\n```vue preview src=\"./demos/ListPageStack.zh.vue\"\n```\n\n字段较多时：`MPageFilters collapsible` + `#advanced` 折叠高级项；查询/重置放 `#actions`（与「高级筛选」chevron 切换同列）；已选条件用 `MPageFilterChips` 包一层 `MTag closable`（不要用自定义 dashed 壳）。\n\n```vue preview src=\"./demos/ListFiltersAdvanced.zh.vue\"\n```\n\n**面包屑**：路由级 trail 放在 `MLayoutHeader` 的 `MBreadcrumb`；若页内还需要上下文，用 `MPageHeader` 的 `#breadcrumb` 插槽——**不要**在 Layout 与 Page 各写一遍相同标题链。\n\n## 表单页组合\n\n`MPageContent width=\"narrow\"` 限制表单宽度；`MPageSection variant=\"form\"` 提供表单表面；`variant=\"actions\"` 用于底栏操作。\n\n```vue preview src=\"./demos/Demo2.vue\"\n```\n\n## 仪表盘 KPI\n\n默认 `MPageStat` 为 Card 表面；密集条带可用 `layout=\"plain\"` + `orientation=\"inline\"` + `density=\"compact\"`。\n\n```vue preview src=\"./demos/Kpi.vue\"\n```\n\n```vue preview src=\"./demos/StatVariants.zh.vue\"\n```\n\n## 组合规则\n\n| 场景 | 推荐组件 | 避免 |\n| --- | --- | --- |\n| 内容区垂直堆叠 | `MPageContent` | 手写 `gap` / `padding` |\n| 筛选区 | `MPageFilters` + `MSpace` / `MFlex` | 额外包一层 `MCard` |\n| 页面身份 + 页级操作 | `MPageHeader` | 无层级的裸 `h1` |\n| 列表操作条 | `MPageToolbar` | 把 Toolbar 当成第二页头 |\n| 表单主体 | `MPageSection variant=\"form\"`（内部即 `MCard` 表面） | 再包一层 `MCard` |\n| 列表表格 | 直接放 `MTable` | `MCard` 再包 `MTable bordered` |\n| KPI | `MPageStat` | 每页自定义 stat CSS |\n| 图表占位 | `MPagePlaceholder` 或 `MCard` + `MEmpty` | 虚线框 / 光晕手写样式 |\n\n完整黄金样例用 MCP `get_golden_page`。**局部修改**时用 MCP `get_page_snippet`（如 `filters`、`toolbar`、`form-actions`）。\n\n## API\n\n### MPageContent\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `density` | `'default' \\| 'compact' \\| 'spacious'` | `'default'` | 子区块垂直间距。 |\n| `width` | `'full' \\| 'narrow'` | `'full'` | `narrow` 约 42rem，适合表单页。 |\n| `bands` | `'auto' \\| 'uniform'` | `'auto'` | `auto` 收紧 Header/筛选/Toolbar 与表格之间的 band；`uniform` 仅用 `gap`。 |\n| `fill` | `boolean` | `false` | 撑满 `MLayoutContent` 剩余高度；仅全视口主列表与 `MTable fill` 联用。 |\n\n`bands=\"auto\"` 时可通过 CSS 变量微调：`--m-page-content-body-lead`、`--m-page-content-tools-pull`（见 `styles.css`）。\n\n### MPageFilters\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `ariaLabel` | `string` | — | 筛选区无障碍名称。 |\n| `variant` | `'plain' \\| 'filled'` | `'plain'` | 表面处理；`filled` 与 Table header 同色浅底，无圆角。 |\n| `collapsible` | `boolean` | `false` | 为 true 且提供 `#advanced` 时显示展开/收起（默认文案「高级筛选」/「收起」，右侧 chevron）。 |\n| `expanded` | `boolean` | `false` | 高级区展开状态（`v-model:expanded`）。 |\n| `expandLabel` / `collapseLabel` | `string` | — | 覆盖默认展开/收起文案。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 常用筛选控件（Input / Select 等）。 |\n| `actions` | 查询/重置等操作，与折叠切换组成右侧尾部簇（推荐）。 |\n| `advanced` | 折叠区（需 `collapsible`）。 |\n| `active` | 可选；已选摘要（更常见是下方 `MPageFilterChips`）。 |\n\n### MPageFilterChips\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 弱前缀，如「已选」。 |\n| `ariaLabel` | `string` | — | 已选条件列表的无障碍名称。 |\n\n默认插槽放 `MTag closable` 或同类可移除标记。\n\n### MPageToolbar\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 操作条组名（`--m-font-size-md`），不是页面标题。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 无 `title` 时的左侧内容。 |\n| `actions` | 右侧操作区。 |\n\n### MPageHeader\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `title` | `string` | — | 页面标题（`--m-font-size-xl`）。 |\n| `description` | `string` | — | 副标题/说明。 |\n| `headingLevel` | `1–6` | `1` | 标题层级。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `breadcrumb` | 标题上方的面包屑（放 `MBreadcrumb`）。 |\n| `tags` | 标题右侧的状态/分类标记（放 `MTag` / `MStatus`）。 |\n| `actions` | 右侧操作。 |\n\n### MPageSection\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `variant` | `'default' \\| 'muted' \\| 'form' \\| 'actions'` | `'default'` | 视觉变体；`muted` 与 Table header 同色浅底；`form` 渲染为 `MCard` 表面。 |\n| `title` | `string` | — | 可选分组标题。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `actions` | 标题行右侧操作区。 |\n\n### MPageStat\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `label` | `string` | — | 指标名称。 |\n| `value` | `string \\| number` | — | 主数值（等宽数字）。 |\n| `trend` | `string` | — | 变化量，渲染为与 `MStatus` 同色的文本。 |\n| `trendSeverity` | `'primary' \\| 'success' \\| 'warn' \\| 'danger' \\| 'secondary'` | `'primary'` | 趋势色。 |\n| `trendDirection` | `'up' \\| 'down'` | — | 在趋势旁显示升/降箭头。 |\n| `trendLabel` | `string` | — | 趋势后的弱说明，如「较上月」。 |\n| `icon` | `string` | — | 右侧弱化图标名。 |\n| `loading` | `boolean` | `false` | 用骨架屏代替数值与趋势。 |\n| `shadow` | `'never' \\| 'hover' \\| 'always'` | `'always'` | 透传 `MCard.shadow`（`layout=\"plain\"` 时无效）。 |\n| `layout` | `'card' \\| 'plain'` | `'card'` | `plain` 无 Card 壳，适合横排 KPI 条。 |\n| `density` | `'default' \\| 'compact'` | `'default'` | `compact` 缩小主数值字号。 |\n| `orientation` | `'stacked' \\| 'inline'` | `'stacked'` | `inline` 标签与数值同一行。 |\n\n### MPagePlaceholder\n\n内部组合 `MEmpty`：默认展示空态插画与说明，可通过默认插槽自定义内容、`#icon` 自定义图标、`#extra` 放置下一步操作。\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `description` | `string` | — | 占位说明。 |\n| `ariaLabel` | `string` | `'Placeholder'` | 无障碍标签。 |\n| `minHeight` | `number \\| string` | `'12rem'` | 最小高度。 |\n\n| Slot | 说明 |\n| --- | --- |\n| `default` | 自定义说明内容。 |\n| `icon` | 自定义图标/插画。 |\n| `extra` | 下一步操作区（如按钮）。 |\n"
|
|
15542
15542
|
},
|
|
15543
15543
|
"en-US": {
|
|
15544
15544
|
"title": "Page",
|
|
@@ -15557,7 +15557,7 @@
|
|
|
15557
15557
|
{
|
|
15558
15558
|
"id": "list-page-stack",
|
|
15559
15559
|
"title": "List page stack",
|
|
15560
|
-
"body": "`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n**List height (when it fits):** only for a **full-viewport admin main list** under `MLayout fillViewport`, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded, short, or whole-page-scroll tables.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles."
|
|
15560
|
+
"body": "`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n**List height (when it fits):** only for a **full-viewport admin main list** under `MLayout fillViewport`, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded, short, or whole-page-scroll tables.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; put query/reset in `#actions` (trailing cluster with the chevron toggle); show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles."
|
|
15561
15561
|
},
|
|
15562
15562
|
{
|
|
15563
15563
|
"id": "dashboard-kpi",
|
|
@@ -15575,7 +15575,7 @@
|
|
|
15575
15575
|
"body": "| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`."
|
|
15576
15576
|
}
|
|
15577
15577
|
],
|
|
15578
|
-
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: Composable page sections for spacing, borders, and headings with little or no custom CSS.\n---\n\n# Page\n\nPage composition components. Use them with `MLayout` to encode filter bars, toolbars, form surfaces, KPI cards, and other admin-page blocks **without rewriting scoped CSS on every page**.\n\n## Import\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## List page stack\n\n`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n**List height (when it fits):** only for a **full-viewport admin main list** under `MLayout fillViewport`, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded, short, or whole-page-scroll tables.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles.\n\n## Dashboard KPI\n\nDefault `MPageStat` uses a Card surface; dense strips can use `layout=\"plain\"`, `orientation=\"inline\"`, and `density=\"compact\"`.\n\n```vue preview src=\"./demos/StatVariants.en.vue\"\n```\n\n## Form page stack\n\nUse `MPageContent width=\"narrow\"`, `MPageSection variant=\"form\"`, and `variant=\"actions\"` for the footer.\n\n## Composition rules\n\n| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`.\n"
|
|
15578
|
+
"markdown": "---\ntitle: Page\ncategory: 06 / LAYOUT\ndescription: Composable page sections for spacing, borders, and headings with little or no custom CSS.\n---\n\n# Page\n\nPage composition components. Use them with `MLayout` to encode filter bars, toolbars, form surfaces, KPI cards, and other admin-page blocks **without rewriting scoped CSS on every page**.\n\n## Import\n\n```ts\nimport {\n MPageContent,\n MPageFilterChips,\n MPageFilters,\n MPageHeader,\n MPagePlaceholder,\n MPageSection,\n MPageStat,\n MPageToolbar,\n} from 'morya-ui'\n```\n\n## List page stack\n\n`MPageContent` owns content **padding** (default `--m-space-6`) and section **gap** (default `--m-space-4`). The bordered frame in previews simulates `MLayoutContent` only.\n\n**List height (when it fits):** only for a **full-viewport admin main list** under `MLayout fillViewport`, use `MPageContent fill` + `MTable fill paginator`. Skip `fill` for embedded, short, or whole-page-scroll tables.\n\n`MPageFilters` defaults to a borderless control row (`variant=\"plain\"`); `variant=\"filled\"` uses the same `--m-color-fill-light` as the Table header, with no radius. `MPageHeader` is page identity (`--m-font-size-xl`); `MPageToolbar` is a list action row (`--m-font-size-md`), not a second page title. `MPageStat` supports `trendDirection`, `trendLabel`, `loading`, and `shadow` (defaults to `always`).\n\n```vue preview src=\"./demos/ListPageStack.en.vue\"\n```\n\nUse `MPageFilters collapsible` + `#advanced` for secondary fields; put query/reset in `#actions` (trailing cluster with the chevron toggle); show active criteria with `MPageFilterChips` and closable `MTag`.\n\n```vue preview src=\"./demos/ListFiltersAdvanced.en.vue\"\n```\n\nPut the route trail in `MLayoutHeader` (`MBreadcrumb`) **or** in `MPageHeader` `#breadcrumb` — not both with duplicate titles.\n\n## Dashboard KPI\n\nDefault `MPageStat` uses a Card surface; dense strips can use `layout=\"plain\"`, `orientation=\"inline\"`, and `density=\"compact\"`.\n\n```vue preview src=\"./demos/StatVariants.en.vue\"\n```\n\n## Form page stack\n\nUse `MPageContent width=\"narrow\"`, `MPageSection variant=\"form\"`, and `variant=\"actions\"` for the footer.\n\n## Composition rules\n\n| Scenario | Use | Avoid |\n| --- | --- | --- |\n| Vertical page stack | `MPageContent` | Hand-written `gap` / `padding` |\n| Filters | `MPageFilters` | Extra bordered `MCard` wrapper |\n| Page identity + page actions | `MPageHeader` | Raw `h1` with no hierarchy |\n| List action row | `MPageToolbar` | Using Toolbar as a second page title |\n| Form surface | `MPageSection variant=\"form\"` | Nested bordered cards |\n| Data table | `MTable` directly | `MCard` around bordered table |\n| KPI metric | `MPageStat` | Custom stat CSS per page |\n\nGolden references: MCP `get_golden_page`.\n"
|
|
15579
15579
|
}
|
|
15580
15580
|
}
|
|
15581
15581
|
},
|
|
@@ -27016,7 +27016,7 @@
|
|
|
27016
27016
|
"zh-CN": {
|
|
27017
27017
|
"title": "一键接入",
|
|
27018
27018
|
"description": "用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。",
|
|
27019
|
-
"markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则与 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1.
|
|
27019
|
+
"markdown": "---\ntitle: 一键接入\norder: 3\ndescription: 用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。\n---\n\n# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则与 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 命令\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只升级依赖并注入样式\nnpx @morya-ui/setup app\n\n# 升级依赖 + 写入 AI 配置与 MCP（不注入样式）\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# 只刷新 AI 模板 / MCP，不改动依赖\nnpx @morya-ui/setup ai --skip-install\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。\n\n## 选项\n\n| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装 / 升级 `morya-ui` 与 `@morya-ui/*` |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。执行时默认会把相关依赖升到最新；需要跳过时加 `--skip-install`。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## 会落到项目里的内容\n\n| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp@latest`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。\n\n## 冲突策略\n\n- 依赖：默认将 `morya-ui@latest` 以及项目中已有的 `@morya-ui/*` 升到最新（可用 `--skip-install` 跳过）\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）；新建或强制覆盖时使用 `@morya-ui/mcp@latest`\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入\n\n## 下一步\n\n- [快速上手](/docs/quick-start)：组件用法与最小示例 \n- [AI 接入](/docs/ai-setup)：用 AI 生成业务页面时如何配合 Skill / MCP \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp) \n- [组件](/components)：浏览 API 与预览\n",
|
|
27020
27020
|
"sections": [
|
|
27021
27021
|
{
|
|
27022
27022
|
"title": "",
|
|
@@ -27026,22 +27026,22 @@
|
|
|
27026
27026
|
{
|
|
27027
27027
|
"title": "命令",
|
|
27028
27028
|
"id": "命令",
|
|
27029
|
-
"body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1.
|
|
27029
|
+
"body": "在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 `.cursor/mcp.json`，接入 [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. 尝试在入口注入 `import 'morya-ui/styles.css'`\n5. 若缺失则追加 `check:colors` 脚本\n\n也可以按场景选用：\n\n```bash\n# 只升级依赖并注入样式\nnpx @morya-ui/setup app\n\n# 升级依赖 + 写入 AI 配置与 MCP（不注入样式）\nnpx @morya-ui/setup ai\n\n# 非交互：默认 skill / 指定 / 全部\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# 只刷新 AI 模板 / MCP，不改动依赖\nnpx @morya-ui/setup ai --skip-install\n```\n\n在 TTY 下，`full` / `ai` 会提示勾选可选 Agent Skill（必选 `morya-ui-pages` 始终写入）。可选 companion 通过 [skills CLI](https://skills.sh/) 安装**最新版**。完成后若写入了 MCP，请 **重启 Cursor**（或重载 MCP）。生成页面前让 Agent 先读 `DESIGN.md`。"
|
|
27030
27030
|
},
|
|
27031
27031
|
{
|
|
27032
27032
|
"title": "选项",
|
|
27033
27033
|
"id": "选项",
|
|
27034
|
-
"body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` |
|
|
27034
|
+
"body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` | 目标项目根（默认当前目录） |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--yes` / `-y` | 使用默认 skill，不提示 |\n| `--force` | 覆盖已有模板文件与 `morya-ui` MCP 条目 |\n| `--dry-run` | 只打印将要执行的操作 |\n| `--skip-install` | 不安装 / 升级 `morya-ui` 与 `@morya-ui/*` |\n| `--skip-template` | 不复制 skill / rules / docs（也不装 companion） |\n| `--skip-mcp` | 不写 MCP 配置 |\n| `--skip-styles` | 不注入样式 import |\n| `--skip-scripts` | 不改 `package.json` scripts |\n\n模板文件默认 **不覆盖**；只有 `--force` 才会覆盖模板与 MCP 条目。勾选的 companion skill 会始终拉取最新版。执行时默认会把相关依赖升到最新；需要跳过时加 `--skip-install`。\n\n### Skills\n\n| Id | 默认 | 安装方式 | 作用 |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | 必选 | 包内 template | 用 `M*` + 黄金布局生成页面 |\n| `frontend-design` | 可选 | skills CLI（`anthropics/skills` 最新） | Express / 品牌向视觉味觉 |\n| `fixing-accessibility` | 可选 | skills CLI（`ibelick/ui-skills` 最新） | 无障碍审计与定向修复 |\n| `impeccable` | 可选 | skills CLI（`pbakaus/impeccable` 最新） | 命名化 polish / 审计 / 改版 |\n\n目录：[`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json)。\n\n示例：只补 MCP：\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
|
|
27035
27035
|
},
|
|
27036
27036
|
{
|
|
27037
27037
|
"title": "会落到项目里的内容",
|
|
27038
27038
|
"id": "会落到项目里的内容",
|
|
27039
|
-
"body": "| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。"
|
|
27039
|
+
"body": "| 路径 | 作用 |\n| --- | --- |\n| `DESIGN.md` | AI 设计第一信源（原则、应用根、令牌摘要、禁止项） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP（`npx -y @morya-ui/mcp@latest`） |\n\n模板源在仓库 [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit)。CLI 不调用 `app.use(MoryaUI)`，也不改 `App.vue`。"
|
|
27040
27040
|
},
|
|
27041
27041
|
{
|
|
27042
27042
|
"title": "冲突策略",
|
|
27043
27043
|
"id": "冲突策略",
|
|
27044
|
-
"body": "- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force
|
|
27044
|
+
"body": "- 依赖：默认将 `morya-ui@latest` 以及项目中已有的 `@morya-ui/*` 升到最新（可用 `--skip-install` 跳过）\n- 模板文件与 `.cursor/rules/*`：目标已存在则跳过（除非 `--force`）\n- Companion skills（skills CLI）：勾选时始终安装/更新为最新版\n- `.cursor/mcp.json`：合并其它 server；已有 `morya-ui` 条目则跳过（除非 `--force`）；新建或强制覆盖时使用 `@morya-ui/mcp@latest`\n- `check:colors`：仅在缺失时追加（除非 `--force`）\n- 样式：找到入口且尚未引入时才注入"
|
|
27045
27045
|
},
|
|
27046
27046
|
{
|
|
27047
27047
|
"title": "下一步",
|
|
@@ -27053,7 +27053,7 @@
|
|
|
27053
27053
|
"en-US": {
|
|
27054
27054
|
"title": "One-shot setup",
|
|
27055
27055
|
"description": "Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.",
|
|
27056
|
-
"markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, and MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n#
|
|
27056
|
+
"markdown": "---\ntitle: One-shot setup\norder: 3\ndescription: Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.\n---\n\n# One-shot setup\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) onboards a consumer Vue app to `morya-ui`: install the dependency, inject styles, and optionally write the Agent skill, Cursor rules, and MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Commands\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install / upgrade `morya-ui` and any existing `@morya-ui/*` (e.g. `@morya-ui/nuxt`) to npm `latest` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Upgrade deps + styles only\nnpx @morya-ui/setup app\n\n# Upgrade deps + AI config + MCP (skips styles injection)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# Refresh AI template / MCP without touching dependencies\nnpx @morya-ui/setup ai --skip-install\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages.\n\n## Options\n\n| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip install / upgrade of `morya-ui` and `@morya-ui/*` |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest. Dependencies are bumped to latest by default; pass `--skip-install` to leave them alone.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```\n\n## What lands in the project\n\n| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp@latest`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`.\n\n## Conflict policy\n\n- Dependencies: always install / upgrade `morya-ui@latest` and any existing `@morya-ui/*` to `@latest` unless `--skip-install`\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`; new or forced entries use `@morya-ui/mcp@latest`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present\n\n## Next steps\n\n- [Quick start](/docs/quick-start): component usage and a minimal example \n- [AI setup](/docs/ai-setup): how setup relates to Skill / MCP for AI page generation \n- [Agent Skill](/docs/agent-skill) · [Agent MCP](/docs/mcp) \n- [Components](/components): browse APIs and previews\n",
|
|
27057
27057
|
"sections": [
|
|
27058
27058
|
{
|
|
27059
27059
|
"title": "",
|
|
@@ -27063,22 +27063,22 @@
|
|
|
27063
27063
|
{
|
|
27064
27064
|
"title": "Commands",
|
|
27065
27065
|
"id": "commands",
|
|
27066
|
-
"body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install `morya-ui` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n#
|
|
27066
|
+
"body": "From the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\nBy default this will:\n\n1. Install / upgrade `morya-ui` and any existing `@morya-ui/*` (e.g. `@morya-ui/nuxt`) to npm `latest` (pnpm / yarn / npm from the lockfile)\n2. Copy `DESIGN.md`, Agent skill, Cursor rules, and check scripts\n3. Merge `.cursor/mcp.json` for [`@morya-ui/mcp@latest`](https://www.npmjs.com/package/@morya-ui/mcp)\n4. Try to inject `import 'morya-ui/styles.css'`\n5. Add a `check:colors` script when missing\n\nOther common commands:\n\n```bash\n# Upgrade deps + styles only\nnpx @morya-ui/setup app\n\n# Upgrade deps + AI config + MCP (skips styles injection)\nnpx @morya-ui/setup ai\n\n# Non-interactive skill selection\nnpx @morya-ui/setup ai --yes\nnpx @morya-ui/setup ai --skills=morya-ui-pages,frontend-design,impeccable\nnpx @morya-ui/setup ai --skills=all\n\n# Refresh AI template / MCP without touching dependencies\nnpx @morya-ui/setup ai --skip-install\n```\n\nOn a TTY, `full` / `ai` prompts for optional Agent skills (required `morya-ui-pages` is always included). Optional companions are installed at **latest** via the [skills CLI](https://skills.sh/). If MCP was written, **restart Cursor** (or reload MCP). Have the agent read `DESIGN.md` before generating pages."
|
|
27067
27067
|
},
|
|
27068
27068
|
{
|
|
27069
27069
|
"title": "Options",
|
|
27070
27070
|
"id": "options",
|
|
27071
|
-
"body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip
|
|
27071
|
+
"body": "| Flag | Meaning |\n| --- | --- |\n| `--cwd <dir>` | Target project root (default: cwd) |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--yes` / `-y` | Use default skills without prompting |\n| `--force` | Overwrite existing template files and the `morya-ui` MCP entry |\n| `--dry-run` | Print actions only |\n| `--skip-install` | Skip install / upgrade of `morya-ui` and `@morya-ui/*` |\n| `--skip-template` | Skip copying skill / rules / docs (also skips companion install) |\n| `--skip-mcp` | Skip writing MCP config |\n| `--skip-styles` | Skip styles import injection |\n| `--skip-scripts` | Skip `package.json` scripts |\n\nTemplate files are **not** overwritten by default; use `--force` for templates and the MCP entry. Selected companion skills always refresh to latest. Dependencies are bumped to latest by default; pass `--skip-install` to leave them alone.\n\n### Skills\n\n| Id | Default | Install | Role |\n| --- | --- | --- | --- |\n| `morya-ui-pages` | required | package template | Page generation with `M*` + golden layouts |\n| `frontend-design` | optional | skills CLI (`anthropics/skills`, latest) | Express / brand visual taste |\n| `fixing-accessibility` | optional | skills CLI (`ibelick/ui-skills`, latest) | A11y audit and targeted fixes |\n| `impeccable` | optional | skills CLI (`pbakaus/impeccable`, latest) | Named polish / audit / redesign |\n\nCatalog: [`packages/setup/catalog/skills.json`](https://github.com/morya-space/morya-ui/blob/main/packages/setup/catalog/skills.json).\n\nExample: MCP only:\n\n```bash\nnpx @morya-ui/setup ai --skip-template --skip-scripts\n```"
|
|
27072
27072
|
},
|
|
27073
27073
|
{
|
|
27074
27074
|
"title": "What lands in the project",
|
|
27075
27075
|
"id": "what-lands-in-the-project",
|
|
27076
|
-
"body": "| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`."
|
|
27076
|
+
"body": "| Path | Role |\n| --- | --- |\n| `DESIGN.md` | Primary design brief (principles, app root, token summary, bans) |\n| `.agents/skills/morya-ui-pages/` | Page-generation Agent skill (see [Agent Skill](/docs/agent-skill)) |\n| `.agents/skills/<optional>/` | Latest companion skills via skills CLI when selected |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP (`npx -y @morya-ui/mcp@latest`) |\n\nTemplate source: [`design-kit/`](https://github.com/morya-space/morya-ui/tree/main/design-kit). The CLI does not call `app.use(MoryaUI)` or edit `App.vue`."
|
|
27077
27077
|
},
|
|
27078
27078
|
{
|
|
27079
27079
|
"title": "Conflict policy",
|
|
27080
27080
|
"id": "conflict-policy",
|
|
27081
|
-
"body": "- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present"
|
|
27081
|
+
"body": "- Dependencies: always install / upgrade `morya-ui@latest` and any existing `@morya-ui/*` to `@latest` unless `--skip-install`\n- Template files and `.cursor/rules/*`: skip if the destination exists (unless `--force`)\n- Companion skills (skills CLI): always install/update to latest when selected\n- `.cursor/mcp.json`: merge other servers; skip an existing `morya-ui` entry unless `--force`; new or forced entries use `@morya-ui/mcp@latest`\n- `check:colors`: add only if missing (unless `--force`)\n- Styles: inject only when an entry is found and the import is not already present"
|
|
27082
27082
|
},
|
|
27083
27083
|
{
|
|
27084
27084
|
"title": "Next steps",
|
|
@@ -27812,7 +27812,7 @@
|
|
|
27812
27812
|
"zh-CN": {
|
|
27813
27813
|
"title": "AI 接入",
|
|
27814
27814
|
"description": "用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。",
|
|
27815
|
-
"markdown": "---\ntitle: AI 接入\norder: 12\ndescription: 用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。\n---\n\n# AI 接入\n\n面向 **用 AI 生成业务页面** 的业务项目。先用 [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 把库与 AI 配置装进项目（命令与选项见 [一键接入](/docs/setup)），再按本文约定生成页面。\n\n日常手写代码仍可只 `pnpm add morya-ui`，见 [快速上手](/docs/quick-start)。\n\n## 推荐流程\n\n1. 在业务项目根目录执行 `npx @morya-ui/setup
|
|
27815
|
+
"markdown": "---\ntitle: AI 接入\norder: 12\ndescription: 用 AI 生成业务页面时，如何配合 @morya-ui/setup、Agent Skill 与 MCP。\n---\n\n# AI 接入\n\n面向 **用 AI 生成业务页面** 的业务项目。先用 [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 把库与 AI 配置装进项目（命令与选项见 [一键接入](/docs/setup)），再按本文约定生成页面。\n\n日常手写代码仍可只 `pnpm add morya-ui`，见 [快速上手](/docs/quick-start)。\n\n## 推荐流程\n\n1. 在业务项目根目录执行 `npx @morya-ui/setup`（会把 `morya-ui` / 已有 `@morya-ui/*` 升到最新；只要写 AI 配置可用 `npx @morya-ui/setup ai`）\n2. **重启 Cursor**（或重载 MCP）\n3. 生成页面前让 Agent 先读 `DESIGN.md`，需要时再读黄金样例与 [Agent Skill](/docs/agent-skill)\n4. 不确定组件 API 时走 [Agent MCP](/docs/mcp)，不要臆造 props\n\n## 与 Skill / MCP 的关系\n\n- **[一键接入](/docs/setup)**：把库与 AI 配置写入项目 \n- **[Agent Skill](/docs/agent-skill)**：按需指导如何用 `morya-ui` 做页面 \n- **MCP**：运行时检索真实组件 API / 示例 \n\n工具列表与多客户端配置见 [Agent MCP](/docs/mcp)。也可以不跑 setup，按该页手写 MCP。\n\n## 下一步\n\n- [一键接入](/docs/setup)：`@morya-ui/setup` 命令与落地文件 \n- [Agent Skill](/docs/agent-skill)：`morya-ui-pages` 何时用、表面地图 \n- [Agent MCP](/docs/mcp)：工具与客户端配置 \n- [快速上手](/docs/quick-start)：手写安装与最小示例 \n- [组件](/components)：浏览 API 与预览\n",
|
|
27816
27816
|
"sections": [
|
|
27817
27817
|
{
|
|
27818
27818
|
"title": "",
|
|
@@ -27822,7 +27822,7 @@
|
|
|
27822
27822
|
{
|
|
27823
27823
|
"title": "推荐流程",
|
|
27824
27824
|
"id": "推荐流程",
|
|
27825
|
-
"body": "1. 在业务项目根目录执行 `npx @morya-ui/setup
|
|
27825
|
+
"body": "1. 在业务项目根目录执行 `npx @morya-ui/setup`（会把 `morya-ui` / 已有 `@morya-ui/*` 升到最新；只要写 AI 配置可用 `npx @morya-ui/setup ai`）\n2. **重启 Cursor**（或重载 MCP）\n3. 生成页面前让 Agent 先读 `DESIGN.md`，需要时再读黄金样例与 [Agent Skill](/docs/agent-skill)\n4. 不确定组件 API 时走 [Agent MCP](/docs/mcp)，不要臆造 props"
|
|
27826
27826
|
},
|
|
27827
27827
|
{
|
|
27828
27828
|
"title": "与 Skill / MCP 的关系",
|
|
@@ -27839,7 +27839,7 @@
|
|
|
27839
27839
|
"en-US": {
|
|
27840
27840
|
"title": "AI setup",
|
|
27841
27841
|
"description": "How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.",
|
|
27842
|
-
"markdown": "---\ntitle: AI setup\norder: 12\ndescription: How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.\n---\n\n# AI setup\n\nFor **AI-assisted page generation** in consumer apps. Install the library and AI config with [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) (commands and options: [One-shot setup](/docs/setup)), then follow this page when generating pages.\n\nHand-written apps can still use only `pnpm add morya-ui` — see [Quick start](/docs/quick-start).\n\n## Recommended flow\n\n1. From the app root run `npx @morya-ui/setup` (
|
|
27842
|
+
"markdown": "---\ntitle: AI setup\norder: 12\ndescription: How @morya-ui/setup, Agent skill, and MCP work together for AI-assisted pages.\n---\n\n# AI setup\n\nFor **AI-assisted page generation** in consumer apps. Install the library and AI config with [`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) (commands and options: [One-shot setup](/docs/setup)), then follow this page when generating pages.\n\nHand-written apps can still use only `pnpm add morya-ui` — see [Quick start](/docs/quick-start).\n\n## Recommended flow\n\n1. From the app root run `npx @morya-ui/setup` (upgrades `morya-ui` / existing `@morya-ui/*` to latest; use `npx @morya-ui/setup ai` when you mainly need the AI pack)\n2. **Restart Cursor** (or reload MCP)\n3. Have the agent read `DESIGN.md` before generating pages; use golden pages and [Agent Skill](/docs/agent-skill) as needed\n4. Look up real APIs via [Agent MCP](/docs/mcp) — do not invent props\n\n## Relation to Skill / MCP\n\n- **[One-shot setup](/docs/setup)**: write the library and AI config into the project \n- **[Agent Skill](/docs/agent-skill)**: on-demand guidance for building pages with `morya-ui` \n- **MCP**: runtime doc lookup for AI clients \n\nTools and multi-client configs: [Agent MCP](/docs/mcp). You can configure MCP by hand from that page without running setup.\n\n## Next steps\n\n- [One-shot setup](/docs/setup): `@morya-ui/setup` commands and files \n- [Agent Skill](/docs/agent-skill): when to use `morya-ui-pages`, surface map \n- [Agent MCP](/docs/mcp): tools and client config \n- [Quick start](/docs/quick-start): manual install and a minimal example \n- [Components](/components): browse APIs and previews\n",
|
|
27843
27843
|
"sections": [
|
|
27844
27844
|
{
|
|
27845
27845
|
"title": "",
|
|
@@ -27849,7 +27849,7 @@
|
|
|
27849
27849
|
{
|
|
27850
27850
|
"title": "Recommended flow",
|
|
27851
27851
|
"id": "recommended-flow",
|
|
27852
|
-
"body": "1. From the app root run `npx @morya-ui/setup` (
|
|
27852
|
+
"body": "1. From the app root run `npx @morya-ui/setup` (upgrades `morya-ui` / existing `@morya-ui/*` to latest; use `npx @morya-ui/setup ai` when you mainly need the AI pack)\n2. **Restart Cursor** (or reload MCP)\n3. Have the agent read `DESIGN.md` before generating pages; use golden pages and [Agent Skill](/docs/agent-skill) as needed\n4. Look up real APIs via [Agent MCP](/docs/mcp) — do not invent props"
|
|
27853
27853
|
},
|
|
27854
27854
|
{
|
|
27855
27855
|
"title": "Relation to Skill / MCP",
|
|
@@ -111,13 +111,15 @@ const rows = [
|
|
|
111
111
|
size="small"
|
|
112
112
|
style="width: 8rem"
|
|
113
113
|
/>
|
|
114
|
+
</MSpace>
|
|
115
|
+
<template #actions>
|
|
114
116
|
<MButton severity="secondary" size="small">
|
|
115
117
|
查询
|
|
116
118
|
</MButton>
|
|
117
119
|
<MButton severity="secondary" size="small" text @click="resetFilters">
|
|
118
120
|
重置
|
|
119
121
|
</MButton>
|
|
120
|
-
</
|
|
122
|
+
</template>
|
|
121
123
|
</MPageFilters>
|
|
122
124
|
|
|
123
125
|
<MTable
|
|
@@ -147,13 +147,15 @@ const rows = [
|
|
|
147
147
|
clearable
|
|
148
148
|
style="width: 10rem"
|
|
149
149
|
/>
|
|
150
|
+
</MSpace>
|
|
151
|
+
<template #actions>
|
|
150
152
|
<MButton severity="secondary">
|
|
151
153
|
查询
|
|
152
154
|
</MButton>
|
|
153
155
|
<MButton severity="secondary" text @click="resetFilters">
|
|
154
156
|
重置
|
|
155
157
|
</MButton>
|
|
156
|
-
</
|
|
158
|
+
</template>
|
|
157
159
|
<template #advanced>
|
|
158
160
|
<MSpace wrap>
|
|
159
161
|
<MSelect
|
|
@@ -139,13 +139,15 @@ const rows = [
|
|
|
139
139
|
clearable
|
|
140
140
|
style="width: 10rem"
|
|
141
141
|
/>
|
|
142
|
+
</MSpace>
|
|
143
|
+
<template #actions>
|
|
142
144
|
<MButton severity="secondary">
|
|
143
145
|
查询
|
|
144
146
|
</MButton>
|
|
145
147
|
<MButton severity="secondary" text @click="resetFilters">
|
|
146
148
|
重置
|
|
147
149
|
</MButton>
|
|
148
|
-
</
|
|
150
|
+
</template>
|
|
149
151
|
<template #advanced>
|
|
150
152
|
<MSpace wrap>
|
|
151
153
|
<MSelect
|
|
@@ -1,6 +1,35 @@
|
|
|
1
1
|
import { describe, expect, it } from 'vitest';
|
|
2
2
|
import { filterPageSnippets, findPageSnippet, scorePageSnippet } from '../page-snippets.js';
|
|
3
3
|
describe('page snippets catalog', () => {
|
|
4
|
+
it('finds composition-first snippets by id', () => {
|
|
5
|
+
for (const id of [
|
|
6
|
+
'form-in-dialog',
|
|
7
|
+
'form-in-drawer',
|
|
8
|
+
'confirm-delete',
|
|
9
|
+
'row-actions-menu',
|
|
10
|
+
'wizard-steps',
|
|
11
|
+
'auth-split-shell',
|
|
12
|
+
'page-header-actions',
|
|
13
|
+
'list-filters-stack',
|
|
14
|
+
'list-filters-dense',
|
|
15
|
+
]) {
|
|
16
|
+
expect(findPageSnippet(id)?.id).toBe(id);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
it('list-filters-stack includes chips, advanced, and #actions', () => {
|
|
20
|
+
const stack = findPageSnippet('list-filters-stack');
|
|
21
|
+
expect(stack.template).toContain('MPageFilterChips');
|
|
22
|
+
expect(stack.template).toContain('#advanced');
|
|
23
|
+
expect(stack.template).toContain('#actions');
|
|
24
|
+
expect(stack.template).toContain('collapsible');
|
|
25
|
+
expect(stack.scriptSetup).toContain('activeFilters');
|
|
26
|
+
expect(stack.scriptSetup).toContain('resetFilters');
|
|
27
|
+
});
|
|
28
|
+
it('scores filter stack keywords', () => {
|
|
29
|
+
const stack = findPageSnippet('list-filters-stack');
|
|
30
|
+
expect(scorePageSnippet(stack, '筛选组合')).toBeGreaterThan(0);
|
|
31
|
+
expect(scorePageSnippet(stack, 'filter stack')).toBeGreaterThan(0);
|
|
32
|
+
});
|
|
4
33
|
it('finds snippet by exact id', () => {
|
|
5
34
|
expect(findPageSnippet('form-actions')?.id).toBe('form-actions');
|
|
6
35
|
});
|