@morya-ui/setup 0.2.7 → 0.2.9

package/template/src/examples/ListPageExample.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-/**
- * 黄金样例：列表页
- * @see DESIGN.md §3
- */
-import {
-  MBreadcrumb,
-  MButton,
-  MConfigProvider,
-  MInput,
-  MLayout,
-  MLayoutContent,
-  MLayoutHeader,
-  MLayoutSider,
-  MMenu,
-  MPageContent,
-  MPageFilters,
-  MPageToolbar,
-  MSelect,
-  MSpace,
-  MTable,
-  MTag,
-  zhCN,
-} from 'morya-ui'
-import { ref } from 'vue'
-
-const keyword = ref('')
-const status = ref<string | undefined>()
-const siderCollapsed = ref(false)
-
-const menuModel = [
-  { key: 'users', label: '用户管理', icon: 'user', to: '/users' },
-  { key: 'roles', label: '角色管理', icon: 'shield', to: '/roles' },
-]
-
-const statusOptions = [
-  { label: '全部', value: '' },
-  { label: '启用', value: 'active' },
-  { label: '停用', value: 'inactive' },
-]
-
-const columns = [
-  { key: 'name', label: '名称' },
-  { key: 'status', label: '状态' },
-  { key: 'updatedAt', label: '更新时间' },
-  { key: 'actions', label: '操作', width: 128 },
-]
-
-const rows = [
-  { id: '1', name: '示例项目 A', status: 'active', updatedAt: '2026-09-01' },
-  { id: '2', name: '示例项目 B', status: 'inactive', updatedAt: '2026-08-28' },
-  { id: '3', name: '示例项目 C', status: 'active', updatedAt: '2026-08-25' },
-  { id: '4', name: '示例项目 D', status: 'active', updatedAt: '2026-08-20' },
-  { id: '5', name: '示例项目 E', status: 'inactive', updatedAt: '2026-08-15' },
-]
-</script>
-
-<template>
-  <MConfigProvider :locale="zhCN">
-    <MLayout has-sider fill-viewport>
-      <MLayoutSider v-model:collapsed="siderCollapsed" bordered :collapsed-width="72">
-        <MMenu
-          :model="menuModel"
-          :collapsed="siderCollapsed"
-          :collapsed-width="72"
-          selected-key="users"
-        />
-      </MLayoutSider>
-
-      <MLayout>
-        <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
-          <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '用户管理' }]" />
-        </MLayoutHeader>
-
-        <MLayoutContent>
-          <MPageContent>
-            <MPageFilters aria-label="筛选">
-              <MSpace wrap>
-                <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
-                <MSelect
-                  v-model="status"
-                  :options="statusOptions"
-                  placeholder="状态"
-                  clearable
-                  style="width: 10rem"
-                />
-                <MButton severity="primary">
-                  查询
-                </MButton>
-                <MButton severity="secondary">
-                  重置
-                </MButton>
-              </MSpace>
-            </MPageFilters>
-
-            <MPageToolbar title="用户管理">
-              <template #actions>
-                <MButton severity="primary">
-                  新建用户
-                </MButton>
-              </template>
-            </MPageToolbar>
-
-            <MTable
-              :columns="columns"
-              :rows="rows"
-              :rows-per-page="3"
-              paginator
-              striped
-              bordered
-              row-key="id"
-              aria-label="用户列表"
-            >
-              <template #cell-status="{ value }">
-                <MTag :value="value === 'active' ? '启用' : '停用'" :severity="value === 'active' ? 'success' : 'secondary'" />
-              </template>
-              <template #cell-actions>
-                <MSpace>
-                  <MButton severity="secondary" size="small">
-                    编辑
-                  </MButton>
-                  <MButton severity="danger" size="small">
-                    删除
-                  </MButton>
-                </MSpace>
-              </template>
-              <template #empty>
-                <p style="margin: 0; padding: var(--m-space-8); text-align: center; color: var(--m-color-text-muted)">
-                  暂无用户数据
-                </p>
-              </template>
-            </MTable>
-          </MPageContent>
-        </MLayoutContent>
-      </MLayout>
-    </MLayout>
-  </MConfigProvider>
-</template>

package/template/src/examples/LoginPageExample.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/styles/morya-app-shell.css

@@ -1,6 +0,0 @@
-html,
-body,
-#app {
-  height: 100%;
-  margin: 0;
-}