@morya-ui/mcp 0.4.4 → 0.4.5

package/data/golden-pages/login-page.vue

@@ -1,244 +1,244 @@
-<script setup lang="ts">
-/**
- * 黄金样例：登录页（Account + 轻量品牌）
- * @see DESIGN.md · surfaces § Account · visual-craft § Atmosphere
- */
-import {
-  MButton,
-  MConfigProvider,
-  MForm,
-  MFormItem,
-  MInput,
-  MInputPassword,
-  MParagraph,
-  MSpace,
-  MTitle,
-  zhCN,
-} from 'morya-ui'
-import { reactive, ref } from 'vue'
-
-const submitting = ref(false)
-const formError = ref('')
-
-const model = reactive({
-  email: '',
-  password: '',
-})
-
-/** Brand seed for Account surfaces — prefer themeConfig over page-level hex. */
-const themeConfig = {
-  seed: { colorPrimary: '#0b6e4f' },
-}
-
-async function onSubmit() {
-  formError.value = ''
-  submitting.value = true
-  try {
-    // await api.login(model)
-    if (!model.email || !model.password) {
-      formError.value = '请输入邮箱和密码后再试。'
-      return
-    }
-  } finally {
-    submitting.value = false
-  }
-}
-</script>
-
-<template>
-  <MConfigProvider
-    :locale="zhCN"
-    input-variant="filled"
-    :theme-config="themeConfig"
-  >
-    <div class="login-shell">
-      <aside class="login-brand" aria-label="品牌">
-        <p class="login-brand__mark">青禾书房</p>
-        <h1 class="login-brand__title">把好书留在手边</h1>
-        <p class="login-brand__lead">
-          店员与会员共用同一套账户。登录后继续进货、上架与会员服务。
-        </p>
-      </aside>
-
-      <main class="login-main">
-        <div class="login-panel">
-          <header class="login-panel__header">
-            <MTitle :level="3">
-              登录
-            </MTitle>
-            <MParagraph type="secondary">
-              使用工作邮箱进入后台。
-            </MParagraph>
-          </header>
-
-          <p v-if="formError" class="login-alert" role="alert">
-            {{ formError }}
-          </p>
-
-          <MForm @submit="onSubmit">
-            <MFormItem label="邮箱" name="email" required>
-              <MInput
-                v-model="model.email"
-                type="email"
-                placeholder="name@qinghe.example"
-                autocomplete="username"
-                fluid
-              />
-            </MFormItem>
-
-            <MFormItem label="密码" name="password" required>
-              <MInputPassword
-                v-model="model.password"
-                placeholder="请输入密码"
-                autocomplete="current-password"
-                fluid
-              />
-            </MFormItem>
-
-            <MSpace style="margin-top: var(--m-space-2)" alignment="center">
-              <MButton type="primary" html-type="submit" label="登录" :loading="submitting" />
-              <MButton type="text" label="忘记密码" />
-            </MSpace>
-          </MForm>
-        </div>
-      </main>
-    </div>
-  </MConfigProvider>
-</template>
-
-<style scoped>
-.login-shell {
-  display: grid;
-  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
-  min-height: 100vh;
-  background: var(--m-color-surface);
-  color: var(--m-color-text);
-}
-
-.login-brand {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: var(--m-space-4);
-  padding: clamp(2rem, 6vw, 4.5rem);
-  overflow: hidden;
-  background:
-    radial-gradient(
-      80% 60% at 10% 20%,
-      color-mix(in srgb, var(--m-color-primary) 22%, transparent),
-      transparent 55%
-    ),
-    linear-gradient(
-      165deg,
-      color-mix(in srgb, var(--m-color-primary) 16%, var(--m-color-surface)) 0%,
-      var(--m-color-surface) 55%,
-      color-mix(in srgb, var(--m-color-border) 35%, var(--m-color-surface)) 100%
-    );
-  border-right: 1px solid var(--m-color-border);
-}
-
-.login-brand::after {
-  content: '';
-  position: absolute;
-  inset: auto -10% -20% 40%;
-  height: 55%;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--m-color-primary) 12%, transparent);
-  pointer-events: none;
-}
-
-.login-brand__mark,
-.login-brand__title,
-.login-brand__lead {
-  position: relative;
-  z-index: 1;
-}
-
-.login-brand__mark {
-  margin: 0;
-  font-size: 0.8125rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--m-color-text-muted);
-}
-
-.login-brand__title {
-  margin: 0;
-  max-width: 12em;
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 650;
-  line-height: 1.15;
-  letter-spacing: -0.03em;
-}
-
-.login-brand__lead {
-  margin: 0;
-  max-width: 28rem;
-  color: var(--m-color-text-muted);
-  line-height: 1.6;
-}
-
-.login-main {
-  display: grid;
-  place-items: center;
-  padding: var(--m-space-6);
-}
-
-.login-panel {
-  width: min(100%, 22rem);
-}
-
-.login-panel__header {
-  margin-bottom: var(--m-space-5);
-}
-
-.login-panel__header :deep(.m-typography-title),
-.login-panel__header :deep(.m-typography) {
-  margin: 0;
-}
-
-.login-panel__header :deep(.m-typography-title) {
-  margin-bottom: var(--m-space-2);
-}
-
-.login-alert {
-  margin: 0 0 var(--m-space-4);
-  padding: var(--m-space-3) var(--m-space-4);
-  border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
-  border-radius: var(--m-radius-md);
-  background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
-  color: var(--m-color-danger);
-  font-size: 0.875rem;
-  line-height: 1.45;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .login-panel {
-    animation: login-panel-in 420ms ease both;
-  }
-}
-
-@keyframes login-panel-in {
-  from {
-    opacity: 0;
-    transform: translateY(0.5rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 768px) {
-  .login-shell {
-    grid-template-columns: 1fr;
-  }
-
-  .login-brand {
-    border-right: 0;
-    border-bottom: 1px solid var(--m-color-border);
-    min-height: 12rem;
-  }
-}
-</style>
+<script setup lang="ts">
+/**
+ * 黄金样例：登录页（Account + 轻量品牌）
+ * @see DESIGN.md · surfaces § Account · visual-craft § Atmosphere
+ */
+import {
+  MButton,
+  MConfigProvider,
+  MForm,
+  MFormItem,
+  MInput,
+  MInputPassword,
+  MParagraph,
+  MSpace,
+  MTitle,
+  zhCN,
+} from 'morya-ui'
+import { reactive, ref } from 'vue'
+
+const submitting = ref(false)
+const formError = ref('')
+
+const model = reactive({
+  email: '',
+  password: '',
+})
+
+/** Brand seed for Account surfaces — prefer themeConfig over page-level hex. */
+const themeConfig = {
+  seed: { colorPrimary: '#0b6e4f' },
+}
+
+async function onSubmit() {
+  formError.value = ''
+  submitting.value = true
+  try {
+    // await api.login(model)
+    if (!model.email || !model.password) {
+      formError.value = '请输入邮箱和密码后再试。'
+      return
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <MConfigProvider
+    :locale="zhCN"
+    input-variant="filled"
+    :theme-config="themeConfig"
+  >
+    <div class="login-shell">
+      <aside class="login-brand" aria-label="品牌">
+        <p class="login-brand__mark">青禾书房</p>
+        <h1 class="login-brand__title">把好书留在手边</h1>
+        <p class="login-brand__lead">
+          店员与会员共用同一套账户。登录后继续进货、上架与会员服务。
+        </p>
+      </aside>
+
+      <main class="login-main">
+        <div class="login-panel">
+          <header class="login-panel__header">
+            <MTitle :level="3">
+              登录
+            </MTitle>
+            <MParagraph type="secondary">
+              使用工作邮箱进入后台。
+            </MParagraph>
+          </header>
+
+          <p v-if="formError" class="login-alert" role="alert">
+            {{ formError }}
+          </p>
+
+          <MForm @submit="onSubmit">
+            <MFormItem label="邮箱" name="email" required>
+              <MInput
+                v-model="model.email"
+                type="email"
+                placeholder="name@qinghe.example"
+                autocomplete="username"
+                fluid
+              />
+            </MFormItem>
+
+            <MFormItem label="密码" name="password" required>
+              <MInputPassword
+                v-model="model.password"
+                placeholder="请输入密码"
+                autocomplete="current-password"
+                fluid
+              />
+            </MFormItem>
+
+            <MSpace style="margin-top: var(--m-space-2)" alignment="center">
+              <MButton type="primary" html-type="submit" label="登录" :loading="submitting" />
+              <MButton type="text" label="忘记密码" />
+            </MSpace>
+          </MForm>
+        </div>
+      </main>
+    </div>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.login-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  min-height: 100vh;
+  background: var(--m-color-surface);
+  color: var(--m-color-text);
+}
+
+.login-brand {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: var(--m-space-4);
+  padding: clamp(2rem, 6vw, 4.5rem);
+  overflow: hidden;
+  background:
+    radial-gradient(
+      80% 60% at 10% 20%,
+      color-mix(in srgb, var(--m-color-primary) 22%, transparent),
+      transparent 55%
+    ),
+    linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--m-color-primary) 16%, var(--m-color-surface)) 0%,
+      var(--m-color-surface) 55%,
+      color-mix(in srgb, var(--m-color-border) 35%, var(--m-color-surface)) 100%
+    );
+  border-right: 1px solid var(--m-color-border);
+}
+
+.login-brand::after {
+  content: '';
+  position: absolute;
+  inset: auto -10% -20% 40%;
+  height: 55%;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--m-color-primary) 12%, transparent);
+  pointer-events: none;
+}
+
+.login-brand__mark,
+.login-brand__title,
+.login-brand__lead {
+  position: relative;
+  z-index: 1;
+}
+
+.login-brand__mark {
+  margin: 0;
+  font-size: 0.8125rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--m-color-text-muted);
+}
+
+.login-brand__title {
+  margin: 0;
+  max-width: 12em;
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 650;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+
+.login-brand__lead {
+  margin: 0;
+  max-width: 28rem;
+  color: var(--m-color-text-muted);
+  line-height: 1.6;
+}
+
+.login-main {
+  display: grid;
+  place-items: center;
+  padding: var(--m-space-6);
+}
+
+.login-panel {
+  width: min(100%, 22rem);
+}
+
+.login-panel__header {
+  margin-bottom: var(--m-space-5);
+}
+
+.login-panel__header :deep(.m-typography-title),
+.login-panel__header :deep(.m-typography) {
+  margin: 0;
+}
+
+.login-panel__header :deep(.m-typography-title) {
+  margin-bottom: var(--m-space-2);
+}
+
+.login-alert {
+  margin: 0 0 var(--m-space-4);
+  padding: var(--m-space-3) var(--m-space-4);
+  border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
+  border-radius: var(--m-radius-md);
+  background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
+  color: var(--m-color-danger);
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .login-panel {
+    animation: login-panel-in 420ms ease both;
+  }
+}
+
+@keyframes login-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .login-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .login-brand {
+    border-right: 0;
+    border-bottom: 1px solid var(--m-color-border);
+    min-height: 12rem;
+  }
+}
+</style>

package/data/golden-pages/result-page.vue

@@ -1,84 +1,84 @@
-<script setup lang="ts">
-/**
- * 黄金样例：结果 / 阻断页（System）
- * 默认展示 403；换成 success / 404 / 500 时只改 status + 文案 + #footer 动作。
- * 无数据空态请用 empty-state / MEmpty，不要用 MResult。
- * @see DESIGN.md · surfaces § System · MResult API（操作用 #footer）
- */
-import {
-  MBreadcrumb,
-  MButton,
-  MConfigProvider,
-  MLayout,
-  MLayoutContent,
-  MLayoutHeader,
-  MPageContent,
-  MResult,
-  MSpace,
-  zhCN,
-} from 'morya-ui'
-</script>
-
-<template>
-  <MConfigProvider :locale="zhCN">
-    <MLayout fill-viewport>
-      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
-        <MBreadcrumb
-          :model="[
-            { label: '首页', to: '/' },
-            { label: '项目管理', to: '/projects' },
-            { label: '无权限' },
-          ]"
-        />
-      </MLayoutHeader>
-
-      <MLayoutContent>
-        <MPageContent>
-          <div class="result-shell">
-            <MResult
-              status="403"
-              title="没有权限查看该项目"
-              description="当前账号无权访问「青禾书房」工作区。可返回上一页，或联系管理员开通权限。"
-              size="large"
-            >
-              <template #footer>
-                <MSpace>
-                  <MButton type="primary">
-                    返回上一页
-                  </MButton>
-                  <MButton type="text">
-                    联系管理员
-                  </MButton>
-                </MSpace>
-              </template>
-            </MResult>
-          </div>
-        </MPageContent>
-      </MLayoutContent>
-    </MLayout>
-  </MConfigProvider>
-</template>
-
-<style scoped>
-.result-shell {
-  display: grid;
-  place-items: center;
-  min-height: min(28rem, 70vh);
-  padding: var(--m-space-8) var(--m-space-4);
-  border-radius: var(--m-radius-lg);
-  background:
-    radial-gradient(
-      70% 55% at 50% 0%,
-      color-mix(in srgb, var(--m-color-primary) 10%, transparent),
-      transparent 60%
-    ),
-    var(--m-color-surface);
-  border: 1px dashed color-mix(in srgb, var(--m-color-border) 80%, transparent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .result-shell {
-    background: var(--m-color-surface);
-  }
-}
-</style>
+<script setup lang="ts">
+/**
+ * 黄金样例：结果 / 阻断页（System）
+ * 默认展示 403；换成 success / 404 / 500 时只改 status + 文案 + #footer 动作。
+ * 无数据空态请用 empty-state / MEmpty，不要用 MResult。
+ * @see DESIGN.md · surfaces § System · MResult API（操作用 #footer）
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MResult,
+  MSpace,
+  zhCN,
+} from 'morya-ui'
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+        <MBreadcrumb
+          :model="[
+            { label: '首页', to: '/' },
+            { label: '项目管理', to: '/projects' },
+            { label: '无权限' },
+          ]"
+        />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent>
+          <div class="result-shell">
+            <MResult
+              status="403"
+              title="没有权限查看该项目"
+              description="当前账号无权访问「青禾书房」工作区。可返回上一页，或联系管理员开通权限。"
+              size="large"
+            >
+              <template #footer>
+                <MSpace>
+                  <MButton type="primary">
+                    返回上一页
+                  </MButton>
+                  <MButton type="text">
+                    联系管理员
+                  </MButton>
+                </MSpace>
+              </template>
+            </MResult>
+          </div>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.result-shell {
+  display: grid;
+  place-items: center;
+  min-height: min(28rem, 70vh);
+  padding: var(--m-space-8) var(--m-space-4);
+  border-radius: var(--m-radius-lg);
+  background:
+    radial-gradient(
+      70% 55% at 50% 0%,
+      color-mix(in srgb, var(--m-color-primary) 10%, transparent),
+      transparent 60%
+    ),
+    var(--m-color-surface);
+  border: 1px dashed color-mix(in srgb, var(--m-color-border) 80%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .result-shell {
+    background: var(--m-color-surface);
+  }
+}
+</style>