@morya-ui/mcp 0.4.3 → 0.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +154 -154
- package/bin/morya-ui-mcp.js +2 -2
- package/data/catalog.json +23 -13
- package/data/example-coverage.json +2 -2
- package/data/golden-pages/dashboard-page.vue +161 -161
- package/data/golden-pages/detail-page.vue +147 -147
- package/data/golden-pages/empty-state.vue +56 -56
- package/data/golden-pages/form-in-dialog.vue +166 -166
- package/data/golden-pages/form-page.vue +107 -107
- package/data/golden-pages/landing-page.vue +382 -382
- package/data/golden-pages/list-page-dense.vue +168 -168
- package/data/golden-pages/list-page-rail.vue +272 -272
- package/data/golden-pages/list-page.vue +222 -222
- package/data/golden-pages/login-page.vue +244 -244
- package/data/golden-pages/result-page.vue +84 -84
- package/data/golden-pages/settings-page.vue +163 -163
- package/data/golden-pages/wizard-form.vue +167 -167
- package/dist/page-snippets.js +669 -669
- package/dist/style-shells.js +153 -153
- package/dist/tools.js +192 -192
- package/package.json +1 -1
package/data/catalog.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"generatedAt": "2026-10-10T16:01:00.709Z",
|
|
3
3
|
"library": {
|
|
4
4
|
"name": "morya-ui",
|
|
5
|
-
"version": "0.4.
|
|
5
|
+
"version": "0.4.4"
|
|
6
6
|
},
|
|
7
7
|
"mcp": {
|
|
8
8
|
"name": "@morya-ui/mcp",
|
|
9
|
-
"version": "0.4.
|
|
9
|
+
"version": "0.4.4"
|
|
10
10
|
},
|
|
11
11
|
"components": [
|
|
12
12
|
{
|
|
@@ -31855,7 +31855,7 @@
|
|
|
31855
31855
|
"zh-CN": {
|
|
31856
31856
|
"title": "快速上手",
|
|
31857
31857
|
"description": "安装依赖、引入样式，并渲染第一个组件。",
|
|
31858
|
-
"markdown": "---\ntitle: 快速上手\norder: 2\ndescription: 安装依赖、引入样式，并渲染第一个组件。\n---\n\n# 快速上手\n\n> 在线文档：[morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/) · 源码：[GitHub](https://github.com/morya-space/morya-ui) · npm：[`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## 安装\n\n
|
|
31858
|
+
"markdown": "---\ntitle: 快速上手\norder: 2\ndescription: 安装依赖、引入样式，并渲染第一个组件。\n---\n\n# 快速上手\n\n> 在线文档：[morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/) · 源码：[GitHub](https://github.com/morya-space/morya-ui) · npm：[`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## 安装\n\n**从零创建新项目（推荐）：**\n\n```bash\nnpx @morya-ui/setup --create my-app\n```\n\n脚手架 + 安装 + 完整接入一步到位。详见 [一键接入](/docs/setup)。\n\n**在已有应用项目中手动安装（npm / pnpm / yarn）：**\n\n```bash\npnpm add morya-ui\n```\n\n也可以用：\n\n```bash\nnpx @morya-ui/setup app\n```\n\n会安装依赖，并尽量在入口注入样式。更多命令与选项见 [一键接入](/docs/setup)。需要 Vue 3（推荐 3.5 及以上）。主题 token、亮暗切换与动效 API 均包含在 `morya-ui` 中。Agent Skill / MCP 见 [AI 接入](/docs/ai-setup)。\n\n## 选择使用方式\n\n本库同时支持**全量**与**按需**两种消费方式，按项目需求任选其一（同一应用内建议保持一致）。\n\n| | 全量 | 按需 |\n| --- | --- | --- |\n| 典型场景 | 组件用得较多、希望快速上手 | 打包体积敏感、只用少量组件 |\n| 组件来源 | `app.use(MoryaUI)` 或 `morya-ui` 按名导入 | `morya-ui/button` 等子路径，或 Vite 自动解析 |\n| 样式 | 入口引入 `morya-ui/styles.css` | 子路径自动带入（含 theme + 依赖组件样式） |\n| JS 体积 | 全量注册会打入完整组件；按名导入可 tree-shake | 仅打入用到的组件及其依赖 |\n\n## 全量用法\n\n### 1. 插件注册（推荐的全量方式）\n\n在应用入口引入**全量样式**，并通过插件一次注册所有组件：\n\n```ts\nimport MoryaUI from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).use(MoryaUI).mount('#app')\n```\n\n模板中可直接使用 `<MButton>`、`<MInput>` 等，无需逐个 import。\n\n### 2. 按名导入 + 全量样式\n\n不注册插件、在 SFC 中按需写 import，JS 可由构建工具 tree-shake，但样式仍需全量 CSS：\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).mount('#app')\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton, MInput } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst name = ref('')\n</script>\n\n<template>\n <div style=\"display: grid; gap: 1rem; max-width: 20rem\">\n <MInput v-model=\"name\" label=\"名称\" placeholder=\"输入名称\" />\n <MButton label=\"提交\" @click=\"() => undefined\" />\n </div>\n</template>\n```\n\n## 按需用法\n\n### 1. 子路径导入\n\n从 kebab-case 子路径导入（如 `button`、`input-password`、`tree-select`）。会带上组件 JS、类型声明、内部依赖与对应样式，**无需**再引 `morya-ui/styles.css`。Props 等类型从同一路径导入，例如 `import type { ButtonProps } from 'morya-ui/button'`。\n\n```ts\nimport { MButton } from 'morya-ui/button'\nimport { MInput } from 'morya-ui/input'\n```\n\n仅要样式时：\n\n```ts\nimport 'morya-ui/button/style'\nimport 'morya-ui/button/style.css'\n```\n\n### 2. 自动按需（Vite）\n\n安装 `unplugin-vue-components` 后，在 `vite.config.ts` 中配置解析器，模板里可直接写 `<MButton>`：\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n plugins: [\n vue(),\n Components({\n dts: 'src/components.d.ts',\n resolvers: [MoryaUIResolver()],\n }),\n ],\n})\n```\n\n`dts` 会写出组件声明，编辑器和 `vue-tsc` 据此识别模板里的组件；该文件需落在 `tsconfig.json` 的 `include` 中。按需模式下，`createMoryaUI({ components: false })` 仍可注入全局配置而不注册组件。\n\n## 可选：应用级全局配置\n\n`createMoryaUI` 会写入全局默认值，并默认注册全部组件：\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n zIndex: 1100,\n }),\n )\n .mount('#app')\n```\n\n仅配置、不注册组件时使用 `components: false`。\n\n更多说明见 [全局配置](/docs/config)。\n\n## 主题 API\n\n亮暗切换等能力从同一包引入：\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { toggleTheme } = useTheme()\n```\n\n详见 [主题](/docs/theme)。\n\n## 启动本仓库文档站\n\n```bash\npnpm --filter morya-ui dev\n# http://localhost:5182\n\n# 构建静态文档站\npnpm --filter morya-ui build:docs\n```\n",
|
|
31859
31859
|
"sections": [
|
|
31860
31860
|
{
|
|
31861
31861
|
"title": "",
|
|
@@ -31865,7 +31865,7 @@
|
|
|
31865
31865
|
{
|
|
31866
31866
|
"title": "安装",
|
|
31867
31867
|
"id": "安装",
|
|
31868
|
-
"body": "
|
|
31868
|
+
"body": "**从零创建新项目（推荐）：**\n\n```bash\nnpx @morya-ui/setup --create my-app\n```\n\n脚手架 + 安装 + 完整接入一步到位。详见 [一键接入](/docs/setup)。\n\n**在已有应用项目中手动安装（npm / pnpm / yarn）：**\n\n```bash\npnpm add morya-ui\n```\n\n也可以用：\n\n```bash\nnpx @morya-ui/setup app\n```\n\n会安装依赖，并尽量在入口注入样式。更多命令与选项见 [一键接入](/docs/setup)。需要 Vue 3（推荐 3.5 及以上）。主题 token、亮暗切换与动效 API 均包含在 `morya-ui` 中。Agent Skill / MCP 见 [AI 接入](/docs/ai-setup)。"
|
|
31869
31869
|
},
|
|
31870
31870
|
{
|
|
31871
31871
|
"title": "选择使用方式",
|
|
@@ -31902,7 +31902,7 @@
|
|
|
31902
31902
|
"en-US": {
|
|
31903
31903
|
"title": "Quick start",
|
|
31904
31904
|
"description": "Install the package, import styles, and render the first component.",
|
|
31905
|
-
"markdown": "---\ntitle: Quick start\norder: 2\ndescription: Install the package, import styles, and render the first component.\n---\n\n# Quick start\n\n> Live docs: [morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/) · Source: [GitHub](https://github.com/morya-space/morya-ui) · npm: [`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## Install\n\n**In an application (npm / pnpm / yarn):**\n\n```bash\npnpm add morya-ui\n```\n\nOr:\n\n```bash\nnpx @morya-ui/setup app\n```\n\nThis installs the dependency and tries to inject styles at the app entry. More commands and options: [One-shot setup](/docs/setup). Requires Vue 3 (3.5+ recommended). Theme tokens, color-mode switching, and motion APIs are all included in `morya-ui`. For Agent skill / MCP, see [AI setup](/docs/ai-setup).\n\nAfter cloning this repository, run `pnpm install`. The docs playground resolves source via Vite aliases (see `playground/vite.config.ts`).\n\nTo debug from another app, use `link:` / `pnpm link` plus Vite aliases. A plain npm install always resolves `dist/`.\n\n## Choose an import mode\n\nThe library supports **full** and **on-demand** usage. Pick one per app (stay consistent within a project).\n\n| | Full | On-demand |\n| --- | --- | --- |\n| Best for | Many components, fastest setup | Bundle size, few components |\n| Components | `app.use(MoryaUI)` or named imports from `morya-ui` | `morya-ui/button` subpaths, or Vite auto-resolver |\n| Styles | Import `morya-ui/styles.css` at entry | Bundled with subpath imports (theme + deps) |\n| JS size | Full plugin bundles all components; named imports tree-shake | Only used components and their deps |\n\n## Full usage\n\n### 1. Plugin registration (recommended full mode)\n\nImport the **full stylesheet** and register all components once:\n\n```ts\nimport MoryaUI from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).use(MoryaUI).mount('#app')\n```\n\nTemplates can use `<MButton>`, `<MInput>`, etc. without per-file imports.\n\n### 2. Named imports + full CSS\n\nSkip the plugin; import components in SFCs. JS can tree-shake, but styles still need the full CSS file:\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).mount('#app')\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton, MInput } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst name = ref('')\n</script>\n\n<template>\n <div style=\"display: grid; gap: 1rem; max-width: 20rem\">\n <MInput v-model=\"name\" label=\"Name\" placeholder=\"Enter a name\" />\n <MButton label=\"Submit\" @click=\"() => undefined\" />\n </div>\n</template>\n```\n\n## On-demand usage\n\n### 1. Subpath imports\n\nImport from kebab-case subpaths (e.g. `button`, `input-password`, `tree-select`). Each entry bundles component JS, type declarations, internal dependencies, and styles — **no** `morya-ui/styles.css` required. Prop types come from the same path, for example `import type { ButtonProps } from 'morya-ui/button'`.\n\n```ts\nimport { MButton } from 'morya-ui/button'\nimport { MInput } from 'morya-ui/input'\n```\n\nStyles only:\n\n```ts\nimport 'morya-ui/button/style'\nimport 'morya-ui/button/style.css'\n```\n\n### 2. Auto on-demand (Vite)\n\nWith `unplugin-vue-components`, add the resolver so templates can use `<MButton>` without manual imports:\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n plugins: [\n vue(),\n Components({\n dts: 'src/components.d.ts',\n resolvers: [MoryaUIResolver()],\n }),\n ],\n})\n```\n\n`dts` writes component declarations so the editor and `vue-tsc` can resolve components used in templates. That file must be covered by `include` in `tsconfig.json`. In on-demand mode, `createMoryaUI({ components: false })` still applies global config without registering components.\n\n## Optional: app-level defaults\n\n`createMoryaUI` applies global defaults and registers all components by default:\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n zIndex: 1100,\n }),\n )\n .mount('#app')\n```\n\nUse `components: false` for config-only install.\n\nSee [Configuration](/docs/config) for details.\n\n## Theme API\n\nColor-mode helpers come from the same package:\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { toggleTheme } = useTheme()\n```\n\nSee [Theme](/docs/theme).\n\n## Run this docs site\n\n```bash\npnpm --filter morya-ui dev\n# http://localhost:5182\n\n# Build the static docs site\npnpm --filter morya-ui build:docs\n```\n",
|
|
31905
|
+
"markdown": "---\ntitle: Quick start\norder: 2\ndescription: Install the package, import styles, and render the first component.\n---\n\n# Quick start\n\n> Live docs: [morya-space.github.io/morya-ui](https://morya-space.github.io/morya-ui/) · Source: [GitHub](https://github.com/morya-space/morya-ui) · npm: [`morya-ui`](https://www.npmjs.com/package/morya-ui)\n\n## Install\n\n**Create a new project (recommended):**\n\n```bash\nnpx @morya-ui/setup --create my-app\n```\n\nScaffold + install + full setup in one step. See [One-shot setup](/docs/setup).\n\n**In an existing application (npm / pnpm / yarn):**\n\n```bash\npnpm add morya-ui\n```\n\nOr:\n\n```bash\nnpx @morya-ui/setup app\n```\n\nThis installs the dependency and tries to inject styles at the app entry. More commands and options: [One-shot setup](/docs/setup). Requires Vue 3 (3.5+ recommended). Theme tokens, color-mode switching, and motion APIs are all included in `morya-ui`. For Agent skill / MCP, see [AI setup](/docs/ai-setup).\n\nAfter cloning this repository, run `pnpm install`. The docs playground resolves source via Vite aliases (see `playground/vite.config.ts`).\n\nTo debug from another app, use `link:` / `pnpm link` plus Vite aliases. A plain npm install always resolves `dist/`.\n\n## Choose an import mode\n\nThe library supports **full** and **on-demand** usage. Pick one per app (stay consistent within a project).\n\n| | Full | On-demand |\n| --- | --- | --- |\n| Best for | Many components, fastest setup | Bundle size, few components |\n| Components | `app.use(MoryaUI)` or named imports from `morya-ui` | `morya-ui/button` subpaths, or Vite auto-resolver |\n| Styles | Import `morya-ui/styles.css` at entry | Bundled with subpath imports (theme + deps) |\n| JS size | Full plugin bundles all components; named imports tree-shake | Only used components and their deps |\n\n## Full usage\n\n### 1. Plugin registration (recommended full mode)\n\nImport the **full stylesheet** and register all components once:\n\n```ts\nimport MoryaUI from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).use(MoryaUI).mount('#app')\n```\n\nTemplates can use `<MButton>`, `<MInput>`, etc. without per-file imports.\n\n### 2. Named imports + full CSS\n\nSkip the plugin; import components in SFCs. JS can tree-shake, but styles still need the full CSS file:\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App).mount('#app')\n```\n\n```vue\n<script setup lang=\"ts\">\nimport { MButton, MInput } from 'morya-ui'\nimport { ref } from 'vue'\n\nconst name = ref('')\n</script>\n\n<template>\n <div style=\"display: grid; gap: 1rem; max-width: 20rem\">\n <MInput v-model=\"name\" label=\"Name\" placeholder=\"Enter a name\" />\n <MButton label=\"Submit\" @click=\"() => undefined\" />\n </div>\n</template>\n```\n\n## On-demand usage\n\n### 1. Subpath imports\n\nImport from kebab-case subpaths (e.g. `button`, `input-password`, `tree-select`). Each entry bundles component JS, type declarations, internal dependencies, and styles — **no** `morya-ui/styles.css` required. Prop types come from the same path, for example `import type { ButtonProps } from 'morya-ui/button'`.\n\n```ts\nimport { MButton } from 'morya-ui/button'\nimport { MInput } from 'morya-ui/input'\n```\n\nStyles only:\n\n```ts\nimport 'morya-ui/button/style'\nimport 'morya-ui/button/style.css'\n```\n\n### 2. Auto on-demand (Vite)\n\nWith `unplugin-vue-components`, add the resolver so templates can use `<MButton>` without manual imports:\n\n```ts\nimport { MoryaUIResolver } from 'morya-ui/resolver'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n plugins: [\n vue(),\n Components({\n dts: 'src/components.d.ts',\n resolvers: [MoryaUIResolver()],\n }),\n ],\n})\n```\n\n`dts` writes component declarations so the editor and `vue-tsc` can resolve components used in templates. That file must be covered by `include` in `tsconfig.json`. In on-demand mode, `createMoryaUI({ components: false })` still applies global config without registering components.\n\n## Optional: app-level defaults\n\n`createMoryaUI` applies global defaults and registers all components by default:\n\n```ts\nimport { createMoryaUI } from 'morya-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport 'morya-ui/styles.css'\n\ncreateApp(App)\n .use(\n createMoryaUI({\n appendTo: 'body',\n size: 'small',\n zIndex: 1100,\n }),\n )\n .mount('#app')\n```\n\nUse `components: false` for config-only install.\n\nSee [Configuration](/docs/config) for details.\n\n## Theme API\n\nColor-mode helpers come from the same package:\n\n```ts\nimport { useTheme } from 'morya-ui'\n\nconst { toggleTheme } = useTheme()\n```\n\nSee [Theme](/docs/theme).\n\n## Run this docs site\n\n```bash\npnpm --filter morya-ui dev\n# http://localhost:5182\n\n# Build the static docs site\npnpm --filter morya-ui build:docs\n```\n",
|
|
31906
31906
|
"sections": [
|
|
31907
31907
|
{
|
|
31908
31908
|
"title": "",
|
|
@@ -31912,7 +31912,7 @@
|
|
|
31912
31912
|
{
|
|
31913
31913
|
"title": "Install",
|
|
31914
31914
|
"id": "install",
|
|
31915
|
-
"body": "**In an application (npm / pnpm / yarn):**\n\n```bash\npnpm add morya-ui\n```\n\nOr:\n\n```bash\nnpx @morya-ui/setup app\n```\n\nThis installs the dependency and tries to inject styles at the app entry. More commands and options: [One-shot setup](/docs/setup). Requires Vue 3 (3.5+ recommended). Theme tokens, color-mode switching, and motion APIs are all included in `morya-ui`. For Agent skill / MCP, see [AI setup](/docs/ai-setup).\n\nAfter cloning this repository, run `pnpm install`. The docs playground resolves source via Vite aliases (see `playground/vite.config.ts`).\n\nTo debug from another app, use `link:` / `pnpm link` plus Vite aliases. A plain npm install always resolves `dist/`."
|
|
31915
|
+
"body": "**Create a new project (recommended):**\n\n```bash\nnpx @morya-ui/setup --create my-app\n```\n\nScaffold + install + full setup in one step. See [One-shot setup](/docs/setup).\n\n**In an existing application (npm / pnpm / yarn):**\n\n```bash\npnpm add morya-ui\n```\n\nOr:\n\n```bash\nnpx @morya-ui/setup app\n```\n\nThis installs the dependency and tries to inject styles at the app entry. More commands and options: [One-shot setup](/docs/setup). Requires Vue 3 (3.5+ recommended). Theme tokens, color-mode switching, and motion APIs are all included in `morya-ui`. For Agent skill / MCP, see [AI setup](/docs/ai-setup).\n\nAfter cloning this repository, run `pnpm install`. The docs playground resolves source via Vite aliases (see `playground/vite.config.ts`).\n\nTo debug from another app, use `link:` / `pnpm link` plus Vite aliases. A plain npm install always resolves `dist/`."
|
|
31916
31916
|
},
|
|
31917
31917
|
{
|
|
31918
31918
|
"title": "Choose an import mode",
|
|
@@ -31959,22 +31959,27 @@
|
|
|
31959
31959
|
"zh-CN": {
|
|
31960
31960
|
"title": "一键接入",
|
|
31961
31961
|
"description": "用 @morya-ui/setup 安装组件库，并按需写入样式、Agent 配置与 MCP。",
|
|
31962
|
-
"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 规则、便携 `AGENTS.md` 与多编辑器 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n##
|
|
31962
|
+
"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 规则、便携 `AGENTS.md` 与多编辑器 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。\n\n## 快速开始\n\n### 在现有项目中配置\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n### 从零创建新项目\n\n```bash\nnpx @morya-ui/setup --create my-admin\n```\n\n会从 create-vite 脚手架出 `./my-admin`，安装依赖，然后自动执行完整接入（组件库 + AI 配置 + MCP + 样式）。\n\n### 交互模式\n\n在终端（TTY）中裸跑 `npx @morya-ui/setup`，CLI 会按顺序询问：\n\n1. **做什么** — 配置当前项目，还是创建新项目\n2. **项目名** — 仅创建时（带校验）\n3. **包管理器** — 仅创建时（标出自动探测结果）\n4. **create-vite 模板** — `vue-ts` vs `vue`\n5. **可选 Agent Skills** — `full` / `ai` 模式\n\n每个提示都有合理默认值，直接回车即可。传 `--yes`（或在 CI 等非 TTY 环境）跳过全部提示。\n\n## 命令\n\n默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、`AGENTS.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 MCP 配置（Cursor / VS Code / Zed + 根目录 `.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# 只写部分编辑器的 MCP（仍会写 .mcp.json）\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# 收窄 Skill 目标 agents（默认：cursor, github-copilot, zed, claude-code, windsurf）\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# companion 装到 skills CLI 支持的全部 agents（目录会很多）\nnpx @morya-ui/setup ai --agents=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/) 安装**最新版**，并同步到默认 5 个 skill agents。完成后若写入了 MCP，请 **重启编辑器或重载 MCP**。Zed 需信任 worktree 后才会加载项目 skills。生成页面前让 Agent 先读 `DESIGN.md`（及 `AGENTS.md`）。\n\n### 创建新项目\n\n```bash\n# 交互式：询问项目名、包管理器、模板\nnpx @morya-ui/setup --create\n\n# 显式指定\nnpx @morya-ui/setup --create my-admin\nnpx @morya-ui/setup --create my-admin --template vue\nnpx @morya-ui/setup --create my-admin --pm npm\n\n# CI / 非交互：全走默认值\nnpx @morya-ui/setup --create my-admin --yes\n```\n\n`--create` 会自动完成：create-vite 脚手架 → `<pm> install` → 完整接入流程（相当于在新项目里再跑一次 `npx @morya-ui/setup`）。\n\n## 选项\n\n| Flag | 说明 |\n| --- | --- |\n| `--create <name>` | 从 create-vite 脚手架新项目，然后执行完整接入 |\n| `--template <tpl>` | create-vite 模板：`vue-ts`（默认）或 `vue`；仅配合 `--create` |\n| `--cwd <dir>` | 目标项目根（默认当前目录）；配合 `--create` 时为父目录 |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--editors <list>` | MCP 目标：`cursor`、`vscode`、`zed` 或 `all`（默认三者；始终另写 `.mcp.json`） |\n| `--agents <list>` | Skill agents：`cursor`、`github-copilot`、`zed`、`claude-code`、`windsurf`（默认），或 `all` |\n| `--yes` / `-y` | 跳过全部交互提示，使用默认值（CI 友好） |\n| `--force` | 覆盖已有模板文件、`morya-ui` MCP 条目与 skill 目录链接 |\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.md` | 编辑器无关的常驻清单（VS Code / Zed / CLI 等） |\n| `.agents/skills/morya-ui-pages/` | 页面生成 Agent Skill（见 [Agent Skill](/docs/agent-skill)） |\n| `.agents/skills/<optional>/` | 勾选时由 skills CLI 写入的最新 companion |\n| `.claude/skills/`、`.windsurf/skills/`、`.github/skills/` | 从 `.agents/skills` 同步的镜像（Claude Code / Windsurf / Copilot） |\n| `.cursor/rules/` | Cursor 常驻规则 |\n| `scripts/check-raw-colors.mjs` | 裸色值扫描 |\n| `.cursor/mcp.json` | Cursor MCP |\n| `.vscode/mcp.json` | VS Code MCP |\n| `.zed/settings.json` | Zed `context_servers`（合并，不覆盖其它设置） |\n| `.mcp.json` | 便携 MCP（Agent Host / 跨工具发现） |\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- MCP 配置：合并其它 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",
|
|
31963
31963
|
"sections": [
|
|
31964
31964
|
{
|
|
31965
31965
|
"title": "",
|
|
31966
31966
|
"id": "overview",
|
|
31967
31967
|
"body": "# 一键接入\n\n[`@morya-ui/setup`](https://www.npmjs.com/package/@morya-ui/setup) 用于在业务 Vue 项目中接入 `morya-ui`：安装依赖、注入样式，并可一并写入 Agent Skill、Cursor 规则、便携 `AGENTS.md` 与多编辑器 MCP。手写安装见 [快速上手](/docs/quick-start)；AI 生成页面的约定见 [AI 接入](/docs/ai-setup)。"
|
|
31968
31968
|
},
|
|
31969
|
+
{
|
|
31970
|
+
"title": "快速开始",
|
|
31971
|
+
"id": "快速开始",
|
|
31972
|
+
"body": "### 在现有项目中配置\n\n在业务项目根目录执行：\n\n```bash\nnpx @morya-ui/setup\n```\n\n### 从零创建新项目\n\n```bash\nnpx @morya-ui/setup --create my-admin\n```\n\n会从 create-vite 脚手架出 `./my-admin`，安装依赖，然后自动执行完整接入（组件库 + AI 配置 + MCP + 样式）。\n\n### 交互模式\n\n在终端（TTY）中裸跑 `npx @morya-ui/setup`，CLI 会按顺序询问：\n\n1. **做什么** — 配置当前项目，还是创建新项目\n2. **项目名** — 仅创建时（带校验）\n3. **包管理器** — 仅创建时（标出自动探测结果）\n4. **create-vite 模板** — `vue-ts` vs `vue`\n5. **可选 Agent Skills** — `full` / `ai` 模式\n\n每个提示都有合理默认值，直接回车即可。传 `--yes`（或在 CI 等非 TTY 环境）跳过全部提示。"
|
|
31973
|
+
},
|
|
31969
31974
|
{
|
|
31970
31975
|
"title": "命令",
|
|
31971
31976
|
"id": "命令",
|
|
31972
|
-
"body": "
|
|
31977
|
+
"body": "默认会：\n\n1. 将 `morya-ui`（以及项目中已有的 `@morya-ui/*`，如 `@morya-ui/nuxt`）升级到 npm `latest`（按锁文件选用 pnpm / yarn / npm）\n2. 复制 `DESIGN.md`、`AGENTS.md`、Agent Skill、Cursor rules 与检查脚本\n3. 合并 MCP 配置（Cursor / VS Code / Zed + 根目录 `.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# 只写部分编辑器的 MCP（仍会写 .mcp.json）\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# 收窄 Skill 目标 agents（默认：cursor, github-copilot, zed, claude-code, windsurf）\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# companion 装到 skills CLI 支持的全部 agents（目录会很多）\nnpx @morya-ui/setup ai --agents=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/) 安装**最新版**，并同步到默认 5 个 skill agents。完成后若写入了 MCP，请 **重启编辑器或重载 MCP**。Zed 需信任 worktree 后才会加载项目 skills。生成页面前让 Agent 先读 `DESIGN.md`（及 `AGENTS.md`）。\n\n### 创建新项目\n\n```bash\n# 交互式：询问项目名、包管理器、模板\nnpx @morya-ui/setup --create\n\n# 显式指定\nnpx @morya-ui/setup --create my-admin\nnpx @morya-ui/setup --create my-admin --template vue\nnpx @morya-ui/setup --create my-admin --pm npm\n\n# CI / 非交互：全走默认值\nnpx @morya-ui/setup --create my-admin --yes\n```\n\n`--create` 会自动完成：create-vite 脚手架 → `<pm> install` → 完整接入流程（相当于在新项目里再跑一次 `npx @morya-ui/setup`）。"
|
|
31973
31978
|
},
|
|
31974
31979
|
{
|
|
31975
31980
|
"title": "选项",
|
|
31976
31981
|
"id": "选项",
|
|
31977
|
-
"body": "| Flag | 说明 |\n| --- | --- |\n| `--cwd <dir>` |
|
|
31982
|
+
"body": "| Flag | 说明 |\n| --- | --- |\n| `--create <name>` | 从 create-vite 脚手架新项目，然后执行完整接入 |\n| `--template <tpl>` | create-vite 模板：`vue-ts`（默认）或 `vue`；仅配合 `--create` |\n| `--cwd <dir>` | 目标项目根（默认当前目录）；配合 `--create` 时为父目录 |\n| `--pm pnpm\\|yarn\\|npm` | 指定包管理器 |\n| `--skills <list>` | 逗号分隔的 skill id，或 `all`（跳过交互提示） |\n| `--editors <list>` | MCP 目标：`cursor`、`vscode`、`zed` 或 `all`（默认三者；始终另写 `.mcp.json`） |\n| `--agents <list>` | Skill agents：`cursor`、`github-copilot`、`zed`、`claude-code`、`windsurf`（默认），或 `all` |\n| `--yes` / `-y` | 跳过全部交互提示，使用默认值（CI 友好） |\n| `--force` | 覆盖已有模板文件、`morya-ui` MCP 条目与 skill 目录链接 |\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```"
|
|
31978
31983
|
},
|
|
31979
31984
|
{
|
|
31980
31985
|
"title": "会落到项目里的内容",
|
|
@@ -31996,22 +32001,27 @@
|
|
|
31996
32001
|
"en-US": {
|
|
31997
32002
|
"title": "One-shot setup",
|
|
31998
32003
|
"description": "Use @morya-ui/setup to install the library and optionally write styles, Agent config, and MCP.",
|
|
31999
|
-
"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, portable `AGENTS.md`, and multi-editor MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n##
|
|
32004
|
+
"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, portable `AGENTS.md`, and multi-editor MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup).\n\n## Quick start\n\n### Configure an existing project\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\n### Create a new project from scratch\n\n```bash\nnpx @morya-ui/setup --create my-admin\n```\n\nScaffolds `./my-admin` via create-vite, installs dependencies, then applies the full setup (library + AI pack + MCP + styles) inside it.\n\n### Interactive mode\n\nRun without arguments in a terminal (TTY) and the CLI prompts for:\n\n1. **What to do** — configure current project, or create a new one\n2. **Project name** — when creating (with validation)\n3. **Package manager** — when creating (auto-detected default highlighted)\n4. **create-vite template** — `vue-ts` vs `vue`\n5. **Optional Agent skills** — `full` / `ai` modes\n\nEvery prompt has a sensible default — press Enter to accept. Pass `--yes` (or run in a non-TTY environment like CI) to skip all prompts and use defaults.\n\n## Commands\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`, `AGENTS.md`, Agent skill, Cursor rules, and check scripts\n3. Merge MCP configs (Cursor / VS Code / Zed + root `.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# Subset of MCP editor targets (still writes .mcp.json)\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# Narrow skill agents (default: cursor, github-copilot, zed, claude-code, windsurf)\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# Install companions to every skills-CLI agent (many dirs)\nnpx @morya-ui/setup ai --agents=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/) for the default five skill agents, and mirrored into agent-specific dirs. If MCP was written, **restart your editor or reload MCP**. Zed may require trusting the worktree before project skills load. Have the agent read `DESIGN.md` (and `AGENTS.md`) before generating pages.\n\n### Create a new project\n\n```bash\n# Interactive: prompts for name, package manager, template\nnpx @morya-ui/setup --create\n\n# Explicit\nnpx @morya-ui/setup --create my-admin\nnpx @morya-ui/setup --create my-admin --template vue\nnpx @morya-ui/setup --create my-admin --pm npm\n\n# CI / non-interactive: all defaults\nnpx @morya-ui/setup --create my-admin --yes\n```\n\n`--create` runs: create-vite scaffold → `<pm> install` → full setup (equivalent to running `npx @morya-ui/setup` inside the new project).\n\n## Options\n\n| Flag | Meaning |\n| --- | --- |\n| `--create <name>` | Scaffold a new project via create-vite, then run the full setup inside it |\n| `--template <tpl>` | create-vite template: `vue-ts` (default) or `vue`; only used with `--create` |\n| `--cwd <dir>` | Target project root (default: cwd); with `--create`, the parent directory |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--editors <list>` | MCP targets: `cursor`, `vscode`, `zed`, or `all` (default: all three; always also writes `.mcp.json`) |\n| `--agents <list>` | Skill agents: `cursor`, `github-copilot`, `zed`, `claude-code`, `windsurf` (default), or `all` |\n| `--yes` / `-y` | Skip all interactive prompts and use defaults (CI-friendly) |\n| `--force` | Overwrite existing template files, MCP `morya-ui` entry, and skill-dir links |\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.md` | Portable always-on checklist (VS Code / Zed / CLI agents) |\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| `.claude/skills/`, `.windsurf/skills/`, `.github/skills/` | Mirrors from `.agents/skills` (Claude Code / Windsurf / Copilot) |\n| `.cursor/rules/` | Cursor always-on rules |\n| `scripts/check-raw-colors.mjs` | Raw color scan |\n| `.cursor/mcp.json` | Cursor MCP |\n| `.vscode/mcp.json` | VS Code MCP |\n| `.zed/settings.json` | Zed `context_servers` (merged; other settings kept) |\n| `.mcp.json` | Portable MCP (Agent Host / cross-tool discovery) |\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- MCP configs: merge other servers / settings; 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",
|
|
32000
32005
|
"sections": [
|
|
32001
32006
|
{
|
|
32002
32007
|
"title": "",
|
|
32003
32008
|
"id": "overview",
|
|
32004
32009
|
"body": "# 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, portable `AGENTS.md`, and multi-editor MCP. For manual install see [Quick start](/docs/quick-start). For AI page-generation workflow see [AI setup](/docs/ai-setup)."
|
|
32005
32010
|
},
|
|
32011
|
+
{
|
|
32012
|
+
"title": "Quick start",
|
|
32013
|
+
"id": "quick-start",
|
|
32014
|
+
"body": "### Configure an existing project\n\nFrom the app project root:\n\n```bash\nnpx @morya-ui/setup\n```\n\n### Create a new project from scratch\n\n```bash\nnpx @morya-ui/setup --create my-admin\n```\n\nScaffolds `./my-admin` via create-vite, installs dependencies, then applies the full setup (library + AI pack + MCP + styles) inside it.\n\n### Interactive mode\n\nRun without arguments in a terminal (TTY) and the CLI prompts for:\n\n1. **What to do** — configure current project, or create a new one\n2. **Project name** — when creating (with validation)\n3. **Package manager** — when creating (auto-detected default highlighted)\n4. **create-vite template** — `vue-ts` vs `vue`\n5. **Optional Agent skills** — `full` / `ai` modes\n\nEvery prompt has a sensible default — press Enter to accept. Pass `--yes` (or run in a non-TTY environment like CI) to skip all prompts and use defaults."
|
|
32015
|
+
},
|
|
32006
32016
|
{
|
|
32007
32017
|
"title": "Commands",
|
|
32008
32018
|
"id": "commands",
|
|
32009
|
-
"body": "
|
|
32019
|
+
"body": "By 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`, `AGENTS.md`, Agent skill, Cursor rules, and check scripts\n3. Merge MCP configs (Cursor / VS Code / Zed + root `.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# Subset of MCP editor targets (still writes .mcp.json)\nnpx @morya-ui/setup ai --editors=cursor,vscode\n\n# Narrow skill agents (default: cursor, github-copilot, zed, claude-code, windsurf)\nnpx @morya-ui/setup ai --agents=github-copilot,zed\n\n# Install companions to every skills-CLI agent (many dirs)\nnpx @morya-ui/setup ai --agents=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/) for the default five skill agents, and mirrored into agent-specific dirs. If MCP was written, **restart your editor or reload MCP**. Zed may require trusting the worktree before project skills load. Have the agent read `DESIGN.md` (and `AGENTS.md`) before generating pages.\n\n### Create a new project\n\n```bash\n# Interactive: prompts for name, package manager, template\nnpx @morya-ui/setup --create\n\n# Explicit\nnpx @morya-ui/setup --create my-admin\nnpx @morya-ui/setup --create my-admin --template vue\nnpx @morya-ui/setup --create my-admin --pm npm\n\n# CI / non-interactive: all defaults\nnpx @morya-ui/setup --create my-admin --yes\n```\n\n`--create` runs: create-vite scaffold → `<pm> install` → full setup (equivalent to running `npx @morya-ui/setup` inside the new project)."
|
|
32010
32020
|
},
|
|
32011
32021
|
{
|
|
32012
32022
|
"title": "Options",
|
|
32013
32023
|
"id": "options",
|
|
32014
|
-
"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| `--editors <list>` | MCP targets: `cursor`, `vscode`, `zed`, or `all` (default: all three; always also writes `.mcp.json`) |\n| `--agents <list>` | Skill agents: `cursor`, `github-copilot`, `zed`, `claude-code`, `windsurf` (default), or `all` |\n| `--yes` / `-y` |
|
|
32024
|
+
"body": "| Flag | Meaning |\n| --- | --- |\n| `--create <name>` | Scaffold a new project via create-vite, then run the full setup inside it |\n| `--template <tpl>` | create-vite template: `vue-ts` (default) or `vue`; only used with `--create` |\n| `--cwd <dir>` | Target project root (default: cwd); with `--create`, the parent directory |\n| `--pm pnpm\\|yarn\\|npm` | Package manager |\n| `--skills <list>` | Comma-separated skill ids, or `all` (skips the prompt) |\n| `--editors <list>` | MCP targets: `cursor`, `vscode`, `zed`, or `all` (default: all three; always also writes `.mcp.json`) |\n| `--agents <list>` | Skill agents: `cursor`, `github-copilot`, `zed`, `claude-code`, `windsurf` (default), or `all` |\n| `--yes` / `-y` | Skip all interactive prompts and use defaults (CI-friendly) |\n| `--force` | Overwrite existing template files, MCP `morya-ui` entry, and skill-dir links |\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```"
|
|
32015
32025
|
},
|
|
32016
32026
|
{
|
|
32017
32027
|
"title": "What lands in the project",
|
|
@@ -1,161 +1,161 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
/**
|
|
3
|
-
* 黄金样例：仪表盘页
|
|
4
|
-
* @see DESIGN.md · morya-ui-pages references/page-layouts.md · visual-craft § Ops polish
|
|
5
|
-
*/
|
|
6
|
-
import {
|
|
7
|
-
MAlert,
|
|
8
|
-
MBreadcrumb,
|
|
9
|
-
MCard,
|
|
10
|
-
MConfigProvider,
|
|
11
|
-
MGrid,
|
|
12
|
-
MGridItem,
|
|
13
|
-
MLayout,
|
|
14
|
-
MLayoutContent,
|
|
15
|
-
MLayoutHeader,
|
|
16
|
-
MPageContent,
|
|
17
|
-
MEmpty,
|
|
18
|
-
MPageHeader,
|
|
19
|
-
MPageStat,
|
|
20
|
-
MStatistic,
|
|
21
|
-
MStatus,
|
|
22
|
-
MTable,
|
|
23
|
-
MTag,
|
|
24
|
-
zhCN,
|
|
25
|
-
} from 'morya-ui'
|
|
26
|
-
|
|
27
|
-
const stats = [
|
|
28
|
-
{ label: '总用户', value: '12,480', trend: '+8.2%', trendDirection: 'up' as const, trendLabel: '较上月', icon: 'users' },
|
|
29
|
-
{ label: '今日活跃', value: '1,926', trend: '+3.1%', trendDirection: 'up' as const, trendLabel: '较昨日', icon: 'activity' },
|
|
30
|
-
{ label: '待处理工单', value: '47', trend: '-12%', trendDirection: 'down' as const, trendLabel: '较上周', trendType: 'warning' as const, icon: 'clipboard' },
|
|
31
|
-
{ label: '系统健康', value: '99.9%', trend: '稳定', trendType: 'secondary' as const, icon: 'heart' },
|
|
32
|
-
]
|
|
33
|
-
|
|
34
|
-
const recentColumns = [
|
|
35
|
-
{ key: 'id', label: '工单号', width: 96 },
|
|
36
|
-
{ key: 'title', label: '标题' },
|
|
37
|
-
{ key: 'priority', label: '优先级', width: 96 },
|
|
38
|
-
{ key: 'status', label: '状态', width: 110 },
|
|
39
|
-
]
|
|
40
|
-
|
|
41
|
-
const recentRows = [
|
|
42
|
-
{ id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
|
|
43
|
-
{ id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
|
|
44
|
-
{ id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
|
|
45
|
-
]
|
|
46
|
-
|
|
47
|
-
function priorityType(p: string) {
|
|
48
|
-
if (p === 'high') return 'danger'
|
|
49
|
-
if (p === 'medium') return 'warning'
|
|
50
|
-
return 'secondary'
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function priorityLabel(p: string) {
|
|
54
|
-
if (p === 'high') return '高'
|
|
55
|
-
if (p === 'medium') return '中'
|
|
56
|
-
return '低'
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function statusLabel(s: string) {
|
|
60
|
-
if (s === 'open') return '待处理'
|
|
61
|
-
if (s === 'progress') return '进行中'
|
|
62
|
-
return '已完成'
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function statusType(s: string) {
|
|
66
|
-
if (s === 'open') return 'warning'
|
|
67
|
-
if (s === 'progress') return 'info'
|
|
68
|
-
return 'success'
|
|
69
|
-
}
|
|
70
|
-
</script>
|
|
71
|
-
|
|
72
|
-
<template>
|
|
73
|
-
<MConfigProvider :locale="zhCN">
|
|
74
|
-
<MLayout fill-viewport>
|
|
75
|
-
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
76
|
-
<MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
|
|
77
|
-
</MLayoutHeader>
|
|
78
|
-
|
|
79
|
-
<MLayoutContent>
|
|
80
|
-
<MPageContent density="spacious">
|
|
81
|
-
<MPageHeader
|
|
82
|
-
title="运营概览"
|
|
83
|
-
description="关注今日活跃与待处理工单，异常优先下钻。"
|
|
84
|
-
/>
|
|
85
|
-
|
|
86
|
-
<MAlert
|
|
87
|
-
type="info"
|
|
88
|
-
title="报表管道延迟约 15 分钟"
|
|
89
|
-
description="实时告警仍可用；看板数字以管道落库为准。"
|
|
90
|
-
closable
|
|
91
|
-
/>
|
|
92
|
-
|
|
93
|
-
<MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
|
|
94
|
-
<MGridItem v-for="item in stats" :key="item.label" :span="1">
|
|
95
|
-
<MPageStat
|
|
96
|
-
:label="item.label"
|
|
97
|
-
:value="item.value"
|
|
98
|
-
:trend="item.trend"
|
|
99
|
-
:trend-type="item.trendType ?? 'primary'"
|
|
100
|
-
:trend-direction="item.trendDirection"
|
|
101
|
-
:trend-label="item.trendLabel"
|
|
102
|
-
:icon="item.icon"
|
|
103
|
-
/>
|
|
104
|
-
</MGridItem>
|
|
105
|
-
</MGrid>
|
|
106
|
-
|
|
107
|
-
<MGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen">
|
|
108
|
-
<MGridItem :span="1">
|
|
109
|
-
<MCard title="趋势概览" shadow="always">
|
|
110
|
-
<MEmpty
|
|
111
|
-
title="还没有趋势数据"
|
|
112
|
-
description="接入图表后将展示近 7 日活跃与转化。"
|
|
113
|
-
illustration="activity-low"
|
|
114
|
-
/>
|
|
115
|
-
</MCard>
|
|
116
|
-
</MGridItem>
|
|
117
|
-
<MGridItem :span="1">
|
|
118
|
-
<MCard title="最近工单" shadow="always">
|
|
119
|
-
<div class="dashboard-plain-stats">
|
|
120
|
-
<MStatistic title="本周新建" :value="128" />
|
|
121
|
-
<MStatistic title="平均处理时长" :value="2.4" suffix="h" :precision="1" />
|
|
122
|
-
</div>
|
|
123
|
-
<MTable
|
|
124
|
-
:columns="recentColumns"
|
|
125
|
-
:rows="recentRows"
|
|
126
|
-
size="small"
|
|
127
|
-
:paginator="false"
|
|
128
|
-
bordered
|
|
129
|
-
row-key="id"
|
|
130
|
-
aria-label="最近工单"
|
|
131
|
-
>
|
|
132
|
-
<template #cell-priority="{ value }">
|
|
133
|
-
<MTag
|
|
134
|
-
:value="priorityLabel(String(value))"
|
|
135
|
-
:type="priorityType(String(value))"
|
|
136
|
-
/>
|
|
137
|
-
</template>
|
|
138
|
-
<template #cell-status="{ value }">
|
|
139
|
-
<MStatus
|
|
140
|
-
:label="statusLabel(String(value))"
|
|
141
|
-
:type="statusType(String(value))"
|
|
142
|
-
/>
|
|
143
|
-
</template>
|
|
144
|
-
</MTable>
|
|
145
|
-
</MCard>
|
|
146
|
-
</MGridItem>
|
|
147
|
-
</MGrid>
|
|
148
|
-
</MPageContent>
|
|
149
|
-
</MLayoutContent>
|
|
150
|
-
</MLayout>
|
|
151
|
-
</MConfigProvider>
|
|
152
|
-
</template>
|
|
153
|
-
|
|
154
|
-
<style scoped>
|
|
155
|
-
.dashboard-plain-stats {
|
|
156
|
-
display: flex;
|
|
157
|
-
flex-wrap: wrap;
|
|
158
|
-
gap: var(--m-space-6);
|
|
159
|
-
margin-bottom: var(--m-space-4);
|
|
160
|
-
}
|
|
161
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* 黄金样例：仪表盘页
|
|
4
|
+
* @see DESIGN.md · morya-ui-pages references/page-layouts.md · visual-craft § Ops polish
|
|
5
|
+
*/
|
|
6
|
+
import {
|
|
7
|
+
MAlert,
|
|
8
|
+
MBreadcrumb,
|
|
9
|
+
MCard,
|
|
10
|
+
MConfigProvider,
|
|
11
|
+
MGrid,
|
|
12
|
+
MGridItem,
|
|
13
|
+
MLayout,
|
|
14
|
+
MLayoutContent,
|
|
15
|
+
MLayoutHeader,
|
|
16
|
+
MPageContent,
|
|
17
|
+
MEmpty,
|
|
18
|
+
MPageHeader,
|
|
19
|
+
MPageStat,
|
|
20
|
+
MStatistic,
|
|
21
|
+
MStatus,
|
|
22
|
+
MTable,
|
|
23
|
+
MTag,
|
|
24
|
+
zhCN,
|
|
25
|
+
} from 'morya-ui'
|
|
26
|
+
|
|
27
|
+
const stats = [
|
|
28
|
+
{ label: '总用户', value: '12,480', trend: '+8.2%', trendDirection: 'up' as const, trendLabel: '较上月', icon: 'users' },
|
|
29
|
+
{ label: '今日活跃', value: '1,926', trend: '+3.1%', trendDirection: 'up' as const, trendLabel: '较昨日', icon: 'activity' },
|
|
30
|
+
{ label: '待处理工单', value: '47', trend: '-12%', trendDirection: 'down' as const, trendLabel: '较上周', trendType: 'warning' as const, icon: 'clipboard' },
|
|
31
|
+
{ label: '系统健康', value: '99.9%', trend: '稳定', trendType: 'secondary' as const, icon: 'heart' },
|
|
32
|
+
]
|
|
33
|
+
|
|
34
|
+
const recentColumns = [
|
|
35
|
+
{ key: 'id', label: '工单号', width: 96 },
|
|
36
|
+
{ key: 'title', label: '标题' },
|
|
37
|
+
{ key: 'priority', label: '优先级', width: 96 },
|
|
38
|
+
{ key: 'status', label: '状态', width: 110 },
|
|
39
|
+
]
|
|
40
|
+
|
|
41
|
+
const recentRows = [
|
|
42
|
+
{ id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
|
|
43
|
+
{ id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
|
|
44
|
+
{ id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
|
|
45
|
+
]
|
|
46
|
+
|
|
47
|
+
function priorityType(p: string) {
|
|
48
|
+
if (p === 'high') return 'danger'
|
|
49
|
+
if (p === 'medium') return 'warning'
|
|
50
|
+
return 'secondary'
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function priorityLabel(p: string) {
|
|
54
|
+
if (p === 'high') return '高'
|
|
55
|
+
if (p === 'medium') return '中'
|
|
56
|
+
return '低'
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function statusLabel(s: string) {
|
|
60
|
+
if (s === 'open') return '待处理'
|
|
61
|
+
if (s === 'progress') return '进行中'
|
|
62
|
+
return '已完成'
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function statusType(s: string) {
|
|
66
|
+
if (s === 'open') return 'warning'
|
|
67
|
+
if (s === 'progress') return 'info'
|
|
68
|
+
return 'success'
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
<template>
|
|
73
|
+
<MConfigProvider :locale="zhCN">
|
|
74
|
+
<MLayout fill-viewport>
|
|
75
|
+
<MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
|
|
76
|
+
<MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
|
|
77
|
+
</MLayoutHeader>
|
|
78
|
+
|
|
79
|
+
<MLayoutContent>
|
|
80
|
+
<MPageContent density="spacious">
|
|
81
|
+
<MPageHeader
|
|
82
|
+
title="运营概览"
|
|
83
|
+
description="关注今日活跃与待处理工单，异常优先下钻。"
|
|
84
|
+
/>
|
|
85
|
+
|
|
86
|
+
<MAlert
|
|
87
|
+
type="info"
|
|
88
|
+
title="报表管道延迟约 15 分钟"
|
|
89
|
+
description="实时告警仍可用；看板数字以管道落库为准。"
|
|
90
|
+
closable
|
|
91
|
+
/>
|
|
92
|
+
|
|
93
|
+
<MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
|
|
94
|
+
<MGridItem v-for="item in stats" :key="item.label" :span="1">
|
|
95
|
+
<MPageStat
|
|
96
|
+
:label="item.label"
|
|
97
|
+
:value="item.value"
|
|
98
|
+
:trend="item.trend"
|
|
99
|
+
:trend-type="item.trendType ?? 'primary'"
|
|
100
|
+
:trend-direction="item.trendDirection"
|
|
101
|
+
:trend-label="item.trendLabel"
|
|
102
|
+
:icon="item.icon"
|
|
103
|
+
/>
|
|
104
|
+
</MGridItem>
|
|
105
|
+
</MGrid>
|
|
106
|
+
|
|
107
|
+
<MGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen">
|
|
108
|
+
<MGridItem :span="1">
|
|
109
|
+
<MCard title="趋势概览" shadow="always">
|
|
110
|
+
<MEmpty
|
|
111
|
+
title="还没有趋势数据"
|
|
112
|
+
description="接入图表后将展示近 7 日活跃与转化。"
|
|
113
|
+
illustration="activity-low"
|
|
114
|
+
/>
|
|
115
|
+
</MCard>
|
|
116
|
+
</MGridItem>
|
|
117
|
+
<MGridItem :span="1">
|
|
118
|
+
<MCard title="最近工单" shadow="always">
|
|
119
|
+
<div class="dashboard-plain-stats">
|
|
120
|
+
<MStatistic title="本周新建" :value="128" />
|
|
121
|
+
<MStatistic title="平均处理时长" :value="2.4" suffix="h" :precision="1" />
|
|
122
|
+
</div>
|
|
123
|
+
<MTable
|
|
124
|
+
:columns="recentColumns"
|
|
125
|
+
:rows="recentRows"
|
|
126
|
+
size="small"
|
|
127
|
+
:paginator="false"
|
|
128
|
+
bordered
|
|
129
|
+
row-key="id"
|
|
130
|
+
aria-label="最近工单"
|
|
131
|
+
>
|
|
132
|
+
<template #cell-priority="{ value }">
|
|
133
|
+
<MTag
|
|
134
|
+
:value="priorityLabel(String(value))"
|
|
135
|
+
:type="priorityType(String(value))"
|
|
136
|
+
/>
|
|
137
|
+
</template>
|
|
138
|
+
<template #cell-status="{ value }">
|
|
139
|
+
<MStatus
|
|
140
|
+
:label="statusLabel(String(value))"
|
|
141
|
+
:type="statusType(String(value))"
|
|
142
|
+
/>
|
|
143
|
+
</template>
|
|
144
|
+
</MTable>
|
|
145
|
+
</MCard>
|
|
146
|
+
</MGridItem>
|
|
147
|
+
</MGrid>
|
|
148
|
+
</MPageContent>
|
|
149
|
+
</MLayoutContent>
|
|
150
|
+
</MLayout>
|
|
151
|
+
</MConfigProvider>
|
|
152
|
+
</template>
|
|
153
|
+
|
|
154
|
+
<style scoped>
|
|
155
|
+
.dashboard-plain-stats {
|
|
156
|
+
display: flex;
|
|
157
|
+
flex-wrap: wrap;
|
|
158
|
+
gap: var(--m-space-6);
|
|
159
|
+
margin-bottom: var(--m-space-4);
|
|
160
|
+
}
|
|
161
|
+
</style>
|