@morya-ui/mcp 0.2.9 → 0.3.0

package/data/golden-pages/form-in-dialog.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：列表内短表单弹窗（form-in-dialog）
+ * 留在列表页，用 MDialog 承载 ≤8 字段的新建/编辑；长表单仍走 form-page / Drawer。
+ * @see DESIGN.md · page-layouts.md · pattern form-in-dialog
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MDialog,
+  MForm,
+  MFormItem,
+  MInput,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageToolbar,
+  MSelect,
+  MSpace,
+  MStatus,
+  MTable,
+  message,
+  zhCN,
+} from 'morya-ui'
+import { reactive, ref } from 'vue'
+
+const dialogOpen = ref(false)
+const submitting = ref(false)
+const editingId = ref<string | null>(null)
+
+const model = reactive({
+  name: '',
+  email: '',
+  role: undefined as string | undefined,
+})
+
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '成员', value: 'member' },
+]
+
+const columns = [
+  { key: 'name', label: '姓名' },
+  { key: 'email', label: '邮箱' },
+  { key: 'status', label: '状态', width: 100 },
+  { key: 'actions', label: '操作', width: 120 },
+]
+
+const rows = ref([
+  { id: '1', name: '林晓', email: 'linxiao@example.com', status: 'active', role: 'member' },
+  { id: '2', name: '周然', email: 'zhouran@example.com', status: 'inactive', role: 'admin' },
+])
+
+const dialogTitle = () => (editingId.value ? '编辑用户' : '新建用户')
+
+function resetModel() {
+  model.name = ''
+  model.email = ''
+  model.role = undefined
+  editingId.value = null
+}
+
+function openCreate() {
+  resetModel()
+  dialogOpen.value = true
+}
+
+function openEdit(row: (typeof rows.value)[number]) {
+  editingId.value = row.id
+  model.name = row.name
+  model.email = row.email
+  model.role = row.role
+  dialogOpen.value = true
+}
+
+function closeDialog() {
+  dialogOpen.value = false
+  resetModel()
+}
+
+async function onSave() {
+  submitting.value = true
+  try {
+    // await api.save(model)
+    message.success(editingId.value ? '已保存' : '已创建')
+    closeDialog()
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+        <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '用户管理' }]" />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent>
+          <MPageToolbar title="用户管理">
+            <template #actions>
+              <MButton severity="primary" @click="openCreate">
+                新建用户
+              </MButton>
+            </template>
+          </MPageToolbar>
+
+          <MTable
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            striped
+            bordered
+            aria-label="用户列表"
+          >
+            <template #cell-status="{ value }">
+              <MStatus
+                :label="value === 'active' ? '启用' : '停用'"
+                :severity="value === 'active' ? 'success' : 'secondary'"
+              />
+            </template>
+            <template #cell-actions="{ row }">
+              <MButton severity="secondary" size="small" text @click="openEdit(row)">
+                编辑
+              </MButton>
+            </template>
+          </MTable>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+
+    <MDialog
+      v-model="dialogOpen"
+      :header="dialogTitle()"
+      width="32rem"
+      @close="resetModel"
+    >
+      <MForm @submit.prevent="onSave">
+        <MFormItem label="姓名" name="name" required>
+          <MInput v-model="model.name" placeholder="请输入姓名" fluid />
+        </MFormItem>
+        <MFormItem label="邮箱" name="email" required>
+          <MInput v-model="model.email" type="email" placeholder="name@example.com" fluid />
+        </MFormItem>
+        <MFormItem label="角色" name="role" required>
+          <MSelect v-model="model.role" :options="roleOptions" placeholder="请选择角色" fluid />
+        </MFormItem>
+      </MForm>
+
+      <template #footer>
+        <MSpace style="justify-content: flex-end; width: 100%">
+          <MButton severity="secondary" text :disabled="submitting" @click="closeDialog">
+            取消
+          </MButton>
+          <MButton severity="primary" :loading="submitting" @click="onSave">
+            保存
+          </MButton>
+        </MSpace>
+      </template>
+    </MDialog>
+  </MConfigProvider>
+</template>

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

@@ -0,0 +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 severity="primary">
+                    返回上一页
+                  </MButton>
+                  <MButton severity="secondary" 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>

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：设置 / 配置页
+ * 窄栏 + Tabs 分组 + MPageSection form；保存用 message 单行回执。
+ * @see DESIGN.md · page-layouts.md § Settings · visual-craft § Ops polish
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MForm,
+  MFormItem,
+  MInput,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPageSection,
+  MSelect,
+  MSpace,
+  MSwitch,
+  MTabs,
+  message,
+  zhCN,
+} from 'morya-ui'
+import { reactive, ref } from 'vue'
+
+const activeTab = ref('profile')
+const submitting = ref(false)
+
+const tabs = [
+  { label: '资料', value: 'profile' },
+  { label: '通知', value: 'notify' },
+  { label: '安全', value: 'security' },
+]
+
+const profile = reactive({
+  displayName: '林晓',
+  email: 'linxiao@example.com',
+  language: 'zh-CN' as string | undefined,
+})
+
+const notify = reactive({
+  emailDigest: true,
+  productUpdates: false,
+})
+
+const languageOptions = [
+  { label: '简体中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' },
+]
+
+async function saveProfile() {
+  submitting.value = true
+  try {
+    // await api.saveProfile(profile)
+    message.success('资料已保存')
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function saveNotify() {
+  submitting.value = true
+  try {
+    // await api.saveNotify(notify)
+    message.success('通知偏好已保存')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+        <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '系统设置' }]" />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent width="narrow">
+          <MPageHeader
+            title="系统设置"
+            description="按域分组配置；切换 Tab 时保留未保存输入，保存成功用 message 一句话回执。"
+          />
+
+          <MTabs v-model="activeTab" :tabs="tabs">
+            <template #default="{ activeValue }">
+              <MPageSection v-if="activeValue === 'profile'" variant="form" title="个人资料">
+                <MForm @submit.prevent="saveProfile">
+                  <MFormItem label="显示名称" name="displayName" required>
+                    <MInput v-model="profile.displayName" fluid />
+                  </MFormItem>
+                  <MFormItem label="工作邮箱" name="email" required>
+                    <MInput v-model="profile.email" type="email" fluid />
+                  </MFormItem>
+                  <MFormItem label="界面语言" name="language">
+                    <MSelect
+                      v-model="profile.language"
+                      :options="languageOptions"
+                      placeholder="选择语言"
+                      fluid
+                    />
+                  </MFormItem>
+                  <MPageSection variant="actions">
+                    <MSpace>
+                      <MButton native-type="submit" severity="primary" :loading="submitting">
+                        保存资料
+                      </MButton>
+                      <MButton severity="secondary" text native-type="button">
+                        恢复默认
+                      </MButton>
+                    </MSpace>
+                  </MPageSection>
+                </MForm>
+              </MPageSection>
+
+              <MPageSection v-else-if="activeValue === 'notify'" variant="form" title="通知">
+                <MForm @submit.prevent="saveNotify">
+                  <MFormItem label="邮件摘要" name="emailDigest">
+                    <MSwitch v-model="notify.emailDigest" />
+                  </MFormItem>
+                  <MFormItem label="产品动态" name="productUpdates">
+                    <MSwitch v-model="notify.productUpdates" />
+                  </MFormItem>
+                  <MPageSection variant="actions">
+                    <MButton native-type="submit" severity="primary" :loading="submitting">
+                      保存通知
+                    </MButton>
+                  </MPageSection>
+                </MForm>
+              </MPageSection>
+
+              <MPageSection v-else variant="form" title="安全">
+                <p class="settings-hint">
+                  修改密码、两步验证等敏感操作放在此区；危险动作使用 severity="danger" 并配合确认。
+                </p>
+                <MSpace>
+                  <MButton severity="secondary">
+                    修改密码
+                  </MButton>
+                  <MButton severity="danger" text>
+                    注销账号
+                  </MButton>
+                </MSpace>
+              </MPageSection>
+            </template>
+          </MTabs>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.settings-hint {
+  margin: 0 0 var(--m-space-4);
+  color: var(--m-color-text-muted);
+  font-size: var(--m-font-size-sm);
+}
+</style>

package/data/golden-pages/wizard-form.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：分步向导（wizard-form）
+ * MStepper + 每步一个主任务；完成态可接 result-page。
+ * @see DESIGN.md · surfaces § Flow · pattern wizard-form
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MForm,
+  MFormItem,
+  MInput,
+  MInputTags,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPageSection,
+  MSelect,
+  MSpace,
+  MStepper,
+  message,
+  zhCN,
+} from 'morya-ui'
+import { computed, reactive, ref } from 'vue'
+
+const activeStep = ref(0)
+const submitting = ref(false)
+
+const steps = [
+  { label: '工作空间', description: '名称与地区' },
+  { label: '邀请成员', description: '可选邮箱' },
+  { label: '确认', description: '核对后创建' },
+]
+
+const model = reactive({
+  name: '',
+  region: undefined as string | undefined,
+  invites: [] as string[],
+})
+
+const regionOptions = [
+  { label: '中国大陆', value: 'cn' },
+  { label: '亚太', value: 'apac' },
+  { label: '北美', value: 'na' },
+]
+
+const canNext = computed(() => {
+  if (activeStep.value === 0) return Boolean(model.name && model.region)
+  return true
+})
+
+function back() {
+  if (activeStep.value > 0) activeStep.value -= 1
+}
+
+function next() {
+  if (!canNext.value) return
+  if (activeStep.value < steps.length - 1) activeStep.value += 1
+}
+
+async function finish() {
+  submitting.value = true
+  try {
+    // await api.createWorkspace(model)
+    message.success('工作空间已创建')
+    // 成功页可镜像 get_golden_page('result-page')，将 status 改为 success
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+        <MBreadcrumb
+          :model="[
+            { label: '首页', to: '/' },
+            { label: '工作空间', to: '/workspaces' },
+            { label: '创建' },
+          ]"
+        />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent width="narrow">
+          <MPageHeader
+            title="创建工作空间"
+            description="三步完成；每步只做一件事。Stepper 使用 steps（不是 items）。"
+          />
+
+          <MStepper v-model="activeStep" :steps="steps" linear />
+
+          <MPageSection variant="form">
+            <MForm v-if="activeStep === 0" @submit.prevent="next">
+              <MFormItem label="名称" name="name" required>
+                <MInput v-model="model.name" placeholder="例如：青禾书房" fluid />
+              </MFormItem>
+              <MFormItem label="地区" name="region" required>
+                <MSelect
+                  v-model="model.region"
+                  :options="regionOptions"
+                  placeholder="选择地区"
+                  fluid
+                />
+              </MFormItem>
+            </MForm>
+
+            <MForm v-else-if="activeStep === 1" @submit.prevent="next">
+              <MFormItem label="邀请邮箱" name="invites">
+                <MInputTags
+                  v-model="model.invites"
+                  placeholder="输入邮箱后回车"
+                />
+              </MFormItem>
+              <p class="wizard-hint">
+                可跳过；稍后也可在成员管理中邀请。
+              </p>
+            </MForm>
+
+            <div v-else class="wizard-summary">
+              <p><strong>名称</strong> {{ model.name || '—' }}</p>
+              <p><strong>地区</strong> {{ model.region || '—' }}</p>
+              <p><strong>邀请</strong> {{ model.invites.length ? model.invites.join('、') : '暂无' }}</p>
+            </div>
+
+            <MPageSection variant="actions">
+              <MSpace>
+                <MButton
+                  severity="secondary"
+                  text
+                  :disabled="activeStep === 0 || submitting"
+                  @click="back"
+                >
+                  上一步
+                </MButton>
+                <MButton
+                  v-if="activeStep < steps.length - 1"
+                  severity="primary"
+                  :disabled="!canNext"
+                  @click="next"
+                >
+                  下一步
+                </MButton>
+                <MButton
+                  v-else
+                  severity="primary"
+                  :loading="submitting"
+                  @click="finish"
+                >
+                  创建
+                </MButton>
+              </MSpace>
+            </MPageSection>
+          </MPageSection>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.wizard-hint,
+.wizard-summary {
+  margin: 0;
+  color: var(--m-color-text-muted);
+  font-size: var(--m-font-size-sm);
+}
+
+.wizard-summary {
+  display: grid;
+  gap: var(--m-space-2);
+}
+
+.wizard-summary p {
+  margin: 0;
+}
+</style>