@morya-ui/setup 0.2.6 → 0.2.8

package/template/docs/golden-pages/login-page.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-/**
- * 黄金样例：登录页（Account + 轻量品牌）
- * @see DESIGN.md §3 · morya-ui-pages surfaces § Account
- */
-import {
-  MButton,
-  MConfigProvider,
-  MForm,
-  MFormItem,
-  MInput,
-  MInputPassword,
-  MSpace,
-  zhCN,
-} from 'morya-ui'
-import { reactive, ref } from 'vue'
-
-const submitting = ref(false)
-const formError = ref('')
-
-const model = reactive({
-  email: '',
-  password: '',
-})
-
-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">
-    <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">
-            <h2>登录</h2>
-            <p>使用工作邮箱进入后台。</p>
-          </header>
-
-          <!-- 表单级常驻错误：token 样式告警条（字段错误优先用 errorMessage） -->
-          <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="submit" label="登录" :loading="submitting" />
-              <MButton type="button" label="忘记密码" severity="secondary" text />
-            </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 {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: var(--m-space-4);
-  padding: clamp(2rem, 6vw, 4.5rem);
-  background:
-    linear-gradient(
-      165deg,
-      color-mix(in srgb, var(--m-color-primary) 18%, 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__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 h2 {
-  margin: 0 0 var(--m-space-2);
-  font-size: 1.5rem;
-  font-weight: 650;
-}
-
-.login-panel__header p {
-  margin: 0;
-  color: var(--m-color-text-muted);
-}
-
-.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 (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/template/src/examples/DashboardPageExample.vue

@@ -1,103 +0,0 @@
-<script setup lang="ts">
-/**
- * 黄金样例：仪表盘页
- * @see DESIGN.md §3
- */
-import {
-  MBreadcrumb,
-  MCard,
-  MConfigProvider,
-  MGrid,
-  MGridItem,
-  MLayout,
-  MLayoutContent,
-  MLayoutHeader,
-  MPageContent,
-  MPageHeader,
-  MPagePlaceholder,
-  MPageStat,
-  MTable,
-  MTag,
-  zhCN,
-} from 'morya-ui'
-
-const stats = [
-  { label: '总用户', value: '12,480', trend: '+8.2%', icon: 'users' },
-  { label: '今日活跃', value: '1,926', trend: '+3.1%', icon: 'activity' },
-  { label: '待处理工单', value: '47', trend: '-12%', trendSeverity: 'warn' as const, icon: 'clipboard' },
-  { label: '系统健康', value: '99.9%', trend: '稳定', trendSeverity: 'secondary' as const, icon: 'heart' },
-]
-
-const recentColumns = [
-  { key: 'id', label: '工单号', width: 96 },
-  { key: 'title', label: '标题' },
-  { key: 'priority', label: '优先级', width: 96 },
-  { key: 'status', label: '状态', width: 96 },
-]
-
-const recentRows = [
-  { id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
-  { id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
-  { id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
-]
-
-function prioritySeverity(p: string) {
-  if (p === 'high') return 'danger'
-  if (p === 'medium') return 'warn'
-  return 'secondary'
-}
-
-function statusLabel(s: string) {
-  if (s === 'open') return '待处理'
-  if (s === 'progress') return '进行中'
-  return '已完成'
-}
-</script>
-
-<template>
-  <MConfigProvider :locale="zhCN">
-    <MLayout fill-viewport>
-      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
-        <MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
-      </MLayoutHeader>
-
-      <MLayoutContent>
-        <MPageContent density="spacious">
-          <MPageHeader title="仪表盘" />
-
-          <MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
-            <MGridItem v-for="item in stats" :key="item.label" :span="1">
-              <MPageStat
-                :label="item.label"
-                :value="item.value"
-                :trend="item.trend"
-                :trend-severity="item.trendSeverity ?? 'primary'"
-                :icon="item.icon"
-              />
-            </MGridItem>
-          </MGrid>
-
-          <MGrid :cols="2" :x-gap="16" :y-gap="16">
-            <MGridItem :span="1">
-              <MCard title="趋势概览">
-                <MPagePlaceholder aria-label="图表占位" description="图表区域（接入 ECharts / 业务组件）" />
-              </MCard>
-            </MGridItem>
-            <MGridItem :span="1">
-              <MCard title="最近工单">
-                <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered>
-                  <template #cell-priority="{ value }">
-                    <MTag :value="String(value)" :severity="prioritySeverity(String(value))" />
-                  </template>
-                  <template #cell-status="{ value }">
-                    <MTag :value="statusLabel(String(value))" severity="info" />
-                  </template>
-                </MTable>
-              </MCard>
-            </MGridItem>
-          </MGrid>
-        </MPageContent>
-      </MLayoutContent>
-    </MLayout>
-  </MConfigProvider>
-</template>

package/template/src/examples/EmptyStateExample.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-/**
- * 黄金样例：列表空状态（Flow）
- * @see DESIGN.md §3 · morya-ui-pages surfaces § Flow
- * 可嵌在列表页 MPageContent / MTable #empty 中；此处给出完整可运行骨架。
- */
-import {
-  MBreadcrumb,
-  MButton,
-  MConfigProvider,
-  MEmpty,
-  MLayout,
-  MLayoutContent,
-  MLayoutHeader,
-  MPageContent,
-  MPageToolbar,
-  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: '课程' }]" />
-      </MLayoutHeader>
-
-      <MLayoutContent>
-        <MPageContent>
-          <MPageToolbar title="课程">
-            <template #actions>
-              <MButton label="新建课程" />
-            </template>
-          </MPageToolbar>
-
-          <div class="empty-state-shell">
-            <MEmpty
-              title="还没有课程"
-              description="创建第一门课程后，学员就能在目录里看到它。也可以稍后从模板导入。"
-              icon="book"
-            >
-              <template #extra>
-                <MButton label="创建第一门课程" />
-                <MButton label="从模板导入" severity="secondary" text />
-              </template>
-            </MEmpty>
-          </div>
-        </MPageContent>
-      </MLayoutContent>
-    </MLayout>
-  </MConfigProvider>
-</template>
-
-<style scoped>
-.empty-state-shell {
-  border: 1px dashed color-mix(in srgb, var(--m-color-border) 80%, var(--m-color-primary));
-  border-radius: var(--m-radius-md);
-  background:
-    radial-gradient(
-      120% 80% at 50% 0%,
-      color-mix(in srgb, var(--m-color-primary) 10%, transparent),
-      transparent 55%
-    ),
-    var(--m-color-surface);
-}
-</style>

package/template/src/examples/FormPageExample.vue

@@ -1,107 +0,0 @@
-<script setup lang="ts">
-/**
- * 黄金样例：表单页
- * @see DESIGN.md §3
- */
-import {
-  MBreadcrumb,
-  MButton,
-  MConfigProvider,
-  MDatePicker,
-  MForm,
-  MFormItem,
-  MInput,
-  MLayout,
-  MLayoutContent,
-  MLayoutHeader,
-  MPageContent,
-  MPageHeader,
-  MPageSection,
-  MSelect,
-  MSpace,
-  MSwitch,
-  MTextarea,
-  zhCN,
-} from 'morya-ui'
-import { reactive, ref } from 'vue'
-
-const submitting = ref(false)
-
-const model = reactive({
-  name: '',
-  email: '',
-  role: undefined as string | undefined,
-  active: true,
-  joinedAt: null as string | null,
-  bio: '',
-})
-
-const roleOptions = [
-  { label: '管理员', value: 'admin' },
-  { label: '成员', value: 'member' },
-]
-
-async function onSubmit() {
-  submitting.value = true
-  try {
-    // await api.save(model)
-  } 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: '/users' }, { label: '新建用户' }]" />
-      </MLayoutHeader>
-
-      <MLayoutContent>
-        <MPageContent width="narrow">
-          <MPageHeader title="新建用户" description="填写基本信息并分配角色。" />
-
-          <MPageSection variant="form">
-            <MForm @submit="onSubmit">
-              <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>
-
-              <MFormItem label="入职日期" name="joinedAt">
-                <MDatePicker v-model="model.joinedAt" placeholder="选择日期" fluid />
-              </MFormItem>
-
-              <MFormItem label="启用账号" name="active">
-                <MSwitch v-model="model.active" />
-              </MFormItem>
-
-              <MFormItem label="简介" name="bio">
-                <MTextarea v-model="model.bio" :rows="4" placeholder="可选" fluid />
-              </MFormItem>
-
-              <MPageSection variant="actions">
-                <MSpace>
-                  <MButton native-type="submit" severity="primary" :loading="submitting">
-                    保存
-                  </MButton>
-                  <MButton severity="secondary">
-                    取消
-                  </MButton>
-                </MSpace>
-              </MPageSection>
-            </MForm>
-          </MPageSection>
-        </MPageContent>
-      </MLayoutContent>
-    </MLayout>
-  </MConfigProvider>
-</template>