create-lumal-admin 0.0.4-beta → 0.0.6-beta

package/templates/presets/standard/src/modules/profile/ProfileView.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaFormModel } from '@lumal/core/components';
+import { LumalPage, LumalSchemaForm } from '@lumal/core/components';
+import { ElAlert, ElButton, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+import { shallowRef, watch } from 'vue';
+import { application, service } from '../../app/services/session';
+import { useAsyncData } from '../../shared/composables/use-async-data';
+import { createProfileService, profileInput } from './api';
+import ProfilePasswordForm from './components/ProfilePasswordForm.vue';
+
+/***********************个人资料读取与保存*********************/
+const api = createProfileService(service);
+const state = useAsyncData(api.get, null);
+const model = shallowRef<SchemaFormModel>({});
+const saving = shallowRef(false);
+const needsSessionRefresh = shallowRef(false);
+const failure = shallowRef('');
+const success = shallowRef('');
+watch(state.data, (value) => {
+  if (value) model.value = { ...value };
+});
+const schemas: SchemaFormItem[] = [
+  { field: 'username', label: '用户名', readonly: true },
+  {
+    field: 'roles',
+    label: '角色',
+    readonly: true,
+    formatter: (value) => (Array.isArray(value) ? value.join('、') : ''),
+  },
+  { field: 'nickname', label: '昵称', required: true, rules: [{ max: 32, message: '昵称最多 32 个字符' }] },
+  { field: 'phone', label: '手机号', rules: [{ pattern: /^1\d{10}$/, message: '手机号格式错误' }] },
+];
+async function save(values: SchemaFormModel): Promise<void> {
+  if (saving.value || needsSessionRefresh.value) return;
+  saving.value = true;
+  failure.value = '';
+  success.value = '';
+  let persisted = false;
+  try {
+    model.value = { ...(await api.save(profileInput(values))) };
+    persisted = true;
+    needsSessionRefresh.value = true;
+    await application.refreshAccess();
+    needsSessionRefresh.value = false;
+    success.value = '个人资料已更新';
+    ElMessage.success('个人资料已更新');
+  } catch (reason) {
+    failure.value = `${persisted ? '资料已保存，但会话刷新失败，请重新读取：' : ''}${reason instanceof Error ? reason.message : '保存失败'}`;
+  } finally {
+    saving.value = false;
+  }
+}
+
+/***********************部分成功后的只读重试*********************/
+async function reload(): Promise<void> {
+  if (saving.value || state.loading.value) return;
+  saving.value = true;
+  failure.value = '';
+  try {
+    // 已保存的资料不重复提交；恢复会话授权后再读取服务端资料。
+    if (needsSessionRefresh.value) {
+      await application.refreshAccess();
+      needsSessionRefresh.value = false;
+    }
+    await state.load();
+  } catch (reason) {
+    failure.value = `${needsSessionRefresh.value ? '资料已保存，但会话刷新失败，请重试：' : ''}${reason instanceof Error ? reason.message : '读取失败'}`;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <LumalPage class="lumal-admin-page" title="个人中心">
+    <ElAlert v-if="state.error.value || failure" :title="state.error.value || failure" type="error" :closable="false">
+      <ElButton link :loading="saving" @click="reload">
+        {{ needsSessionRefresh ? '重试会话刷新' : '重新读取' }}
+      </ElButton>
+    </ElAlert>
+    <ElAlert v-if="success" :title="success" type="success" :closable="false" />
+    <ElTabs class="profile-tabs">
+      <ElTabPane label="个人资料">
+        <LumalSchemaForm
+          v-if="state.data.value"
+          v-model="model"
+          :schemas="schemas"
+          :columns="1"
+          mode="edit"
+          show-actions
+          :disabled="needsSessionRefresh"
+          :submit-disabled="needsSessionRefresh"
+          :submit-loading="saving"
+          submit-text="保存资料"
+          @submit="save"
+        />
+      </ElTabPane>
+      <ElTabPane label="修改密码" lazy>
+        <ProfilePasswordForm :api="api" />
+      </ElTabPane>
+    </ElTabs>
+  </LumalPage>
+</template>
+
+<style scoped>
+.profile-tabs {
+  max-width: 720px;
+}
+</style>

package/templates/presets/standard/src/modules/profile/api.ts

@@ -0,0 +1,49 @@
+import type { SchemaFormModel } from '@lumal/core/components';
+import type { BusinessTransport } from '../../app/services/contracts';
+import { object, stringArray, text } from '../../shared/api';
+
+export interface Profile {
+  id: string;
+  username: string;
+  nickname: string;
+  phone: string;
+  roles: string[];
+}
+export interface ProfileInput {
+  nickname: string;
+  phone: string;
+}
+export interface PasswordInput {
+  currentPassword: string;
+  newPassword: string;
+}
+export function profileInput(model: SchemaFormModel): ProfileInput {
+  const nickname = text(model.nickname, '昵称', true);
+  const phone = text(model.phone, '手机号');
+  if (nickname.length > 32 || (phone && !/^1\d{10}$/.test(phone)))
+    throw new Error('昵称最多 32 个字符，手机号为 11 位数字');
+  return { nickname, phone };
+}
+export function passwordInput(model: SchemaFormModel): PasswordInput {
+  const currentPassword = text(model.currentPassword, '当前密码', true);
+  const newPassword = text(model.newPassword, '新密码', true);
+  if (newPassword.length < 8 || newPassword.length > 32 || newPassword !== model.confirmPassword)
+    throw new Error('新密码为 8 到 32 位，且两次输入必须相同');
+  return { currentPassword, newPassword };
+}
+function parseProfile(value: unknown): Profile {
+  const raw = object(value);
+  return {
+    ...profileInput(raw),
+    id: text(raw.id, '用户 ID', true),
+    username: text(raw.username, '用户名', true),
+    roles: stringArray(raw.roles),
+  };
+}
+export function createProfileService(transport: BusinessTransport) {
+  return {
+    get: async () => parseProfile(await transport.request('GET', '/profile')),
+    save: async (input: ProfileInput) => parseProfile(await transport.request('PUT', '/profile', { body: input })),
+    changePassword: (input: PasswordInput) => transport.request<void>('PUT', '/profile/password', { body: input }),
+  };
+}

package/templates/presets/standard/src/modules/profile/components/ProfilePasswordForm.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaFormModel } from '@lumal/core/components';
+import type { createProfileService } from '../api';
+import { LumalSchemaForm } from '@lumal/core/components';
+import { ElAlert } from 'element-plus';
+import { shallowRef } from 'vue';
+import { passwordInput } from '../api';
+
+/***********************真实密码更新接口*********************/
+const props = defineProps<{ api: ReturnType<typeof createProfileService> }>();
+const model = shallowRef<SchemaFormModel>({});
+const saving = shallowRef(false);
+const failure = shallowRef('');
+const success = shallowRef('');
+const schemas: SchemaFormItem[] = [
+  {
+    field: 'currentPassword',
+    label: '当前密码',
+    required: true,
+    component: 'input',
+    componentProps: { type: 'password', showPassword: true, autocomplete: 'current-password' },
+  },
+  {
+    field: 'newPassword',
+    label: '新密码',
+    required: true,
+    component: 'input',
+    rules: [{ min: 8, max: 32, message: '密码长度为 8 到 32 位' }],
+    componentProps: { type: 'password', showPassword: true, autocomplete: 'new-password' },
+  },
+  {
+    field: 'confirmPassword',
+    label: '确认新密码',
+    required: true,
+    component: 'input',
+    componentProps: { type: 'password', showPassword: true, autocomplete: 'new-password' },
+  },
+];
+async function submit(values: SchemaFormModel): Promise<void> {
+  if (saving.value) return;
+  saving.value = true;
+  failure.value = '';
+  success.value = '';
+  try {
+    await props.api.changePassword(passwordInput(values));
+    model.value = {};
+    success.value = '密码已通过接口更新';
+  } catch (reason) {
+    failure.value = reason instanceof Error ? reason.message : '密码更新失败';
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <ElAlert v-if="failure" :title="failure" type="error" role="alert" :closable="false" />
+  <ElAlert v-if="success" :title="success" type="success" :closable="false" />
+  <LumalSchemaForm
+    v-model="model"
+    :schemas="schemas"
+    :columns="1"
+    show-actions
+    submit-text="更新密码"
+    :submit-loading="saving"
+    @submit="submit"
+  />
+</template>

package/templates/presets/standard/src/modules/profile/local.ts

@@ -0,0 +1,40 @@
+import type { DataRow } from '../../app/services/contracts';
+import type { LocalBusinessContext, LocalHandler } from '../../app/services/local-contracts';
+import { object } from '../../app/menu-policy';
+import { profileInput } from './api';
+
+export function createLocalHandler({ db, user }: LocalBusinessContext): LocalHandler {
+  return {
+    handles: (path) => path === '/profile' || path === '/profile/password',
+    async request(method, path, input) {
+      const current = db.read('users').find((row) => row.id === user().id);
+      if (!current) throw new Error('当前用户不存在');
+      const clean = ({ password: _password, ...profile }: DataRow) => profile;
+      if (path === '/profile' && method === 'GET') return clean(current);
+      if (path === '/profile' && method === 'PUT') {
+        const next = { ...current, ...profileInput(object(input.body)) };
+        db.write(
+          'users',
+          db.read('users').map((row) => (row.id === current.id ? next : row)),
+        );
+        return clean(next);
+      }
+      if (path === '/profile/password' && method === 'PUT') {
+        const body = object(input.body);
+        if (
+          body.currentPassword !== current.password ||
+          typeof body.newPassword !== 'string' ||
+          body.newPassword.length < 8 ||
+          body.newPassword.length > 32
+        )
+          throw new Error('当前密码错误或新密码长度不符合要求');
+        db.write(
+          'users',
+          db.read('users').map((row) => (row.id === current.id ? { ...row, password: body.newPassword } : row)),
+        );
+        return;
+      }
+      throw new Error('不支持的个人资料操作');
+    },
+  };
+}

package/templates/presets/standard/src/modules/profile/module.ts

@@ -0,0 +1,11 @@
+import type { AppModule } from '../../app/module';
+
+export const menus: AppModule['menus'] = [
+  {
+    path: '/profile',
+    name: 'Profile',
+    component: 'profile/index',
+    meta: { title: '个人中心', icon: 'lumal:user', hideInMenu: true, keepAlive: false },
+  },
+];
+export const views: AppModule['views'] = { 'profile/index': () => import('./ProfileView.vue') };

package/templates/presets/standard/tests/profile.test.ts.template

@@ -0,0 +1,72 @@
+import type { BusinessTransport, DataRow } from '../src/app/services/contracts';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { createProfileService, passwordInput, profileInput } from '../src/modules/profile/api';
+import { createLocalHandler } from '../src/modules/profile/local';
+
+let users: DataRow[];
+let api: ReturnType<typeof createProfileService>;
+beforeEach(() => {
+  users = [
+    {
+      id: 'admin',
+      username: 'admin',
+      nickname: '管理员',
+      phone: '',
+      roles: ['admin'],
+      status: 'enabled',
+      password: 'lumal123',
+    },
+  ];
+  const handler = createLocalHandler({
+    db: {
+      read: <T extends DataRow>() => structuredClone(users) as T[],
+      write: (_key, rows) => {
+        users = structuredClone(rows);
+      },
+    },
+    user: () => ({ id: 'admin', username: 'admin', name: '管理员' }),
+    assertPermission: () => {},
+  });
+  const transport: BusinessTransport = {
+    request: async <T>(method: Parameters<BusinessTransport['request']>[0], path: string, input = {}) =>
+      (await handler.request(method, path, input)) as T,
+  };
+  api = createProfileService(transport);
+});
+describe('个人资料与密码业务契约', () => {
+  it('读取与修改允许字段，不泄露密码或允许修改身份与角色', async () => {
+    expect(await api.get()).not.toHaveProperty('password');
+    const saved = await api.save(
+      profileInput({ nickname: '已修改', phone: '13800138000', username: 'injected', roles: [] }),
+    );
+    expect(saved.nickname).toBe('已修改');
+    expect(saved.username).toBe('admin');
+    expect(saved.roles).toEqual(['admin']);
+    expect(users[0]?.password).toBe('lumal123');
+    expect(() => profileInput({ nickname: '', phone: 'bad' })).toThrow();
+  });
+  it('错误密码不写入；真实保存后新密码才生效', async () => {
+    await expect(api.changePassword({ currentPassword: 'wrong', newPassword: 'new-password' })).rejects.toThrow(
+      '当前密码',
+    );
+    expect(users[0]?.password).toBe('lumal123');
+    expect(() =>
+      passwordInput({ currentPassword: 'lumal123', newPassword: 'new-password', confirmPassword: 'other' }),
+    ).toThrow('两次');
+    await api.changePassword(
+      passwordInput({ currentPassword: 'lumal123', newPassword: 'new-password', confirmPassword: 'new-password' }),
+    );
+    expect(users[0]?.password).toBe('new-password');
+  });
+  it('hTTP 能力未接入时向页面传播失败，不伪造保存结果', async () => {
+    const http = createProfileService({
+      request: async () => {
+        throw new Error('HTTP 404：未配置个人资料接口');
+      },
+    });
+    await expect(http.get()).rejects.toThrow('HTTP 404');
+    await expect(http.changePassword({ currentPassword: 'old', newPassword: 'new-password' })).rejects.toThrow(
+      'HTTP 404',
+    );
+  });
+});

package/templates/screen/README.md

@@ -0,0 +1,6 @@
+# Screen
+
+独立大屏，不包含 Admin 菜单、标签和系统管理。默认纯静态、无 API、无认证。
+
+首次运行 `pnpm install`，开发使用 `pnpm dev`，提交前执行 `pnpm check`。
+工程规范见 [开发约定](docs/DEVELOPMENT.md)。

package/templates/screen/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import ScreenEntry from './screen/ScreenEntry.vue';
+</script>
+
+<template>
+  <ScreenEntry />
+</template>

package/templates/screen/src/screen/ScreenEntry.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import ScreenView from './ScreenView.vue';
+</script>
+
+<template>
+  <div class="screen-entry">
+    <ScreenView />
+  </div>
+</template>
+
+<style scoped>
+.screen-entry {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  min-height: 0;
+}
+</style>

package/templates/screen/src/screen/ScreenView.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import ScreenMetrics from './components/ScreenMetrics.vue';
+// SCREEN_VISUALIZATION_IMPORT
+
+/***********************静态演示数据*********************/
+const metrics = [
+  { label: '任务总数', value: 128 },
+  { label: '已完成', value: 96 },
+  { label: '进行中', value: 32 },
+];
+</script>
+
+<template>
+  <main class="screen-view">
+    <header class="screen-view__header">
+      <h1>数据总览</h1>
+      <span>静态示例</span>
+    </header>
+    <ScreenMetrics :metrics="metrics" />
+    <!-- SCREEN_VISUALIZATION -->
+  </main>
+</template>
+
+<style scoped>
+.screen-view {
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  padding: 32px;
+  font-size: max(14px, var(--lumal-viewport-min-font-size, 14px));
+}
+
+.screen-view__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.screen-view__header h1 {
+  margin: 0;
+  font-size: max(28px, var(--lumal-viewport-min-font-size, 14px));
+}
+</style>

package/templates/screen/src/screen/components/ScreenMetrics.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/***********************指标输入*********************/
+defineProps<{ metrics: { label: string; value: number }[] }>();
+</script>
+
+<template>
+  <dl class="screen-metrics">
+    <div v-for="metric in metrics" :key="metric.label" class="screen-metrics__item">
+      <dt>{{ metric.label }}</dt>
+      <dd>{{ metric.value.toLocaleString() }}</dd>
+    </div>
+  </dl>
+</template>
+
+<style scoped>
+.screen-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+  gap: 24px;
+  margin: 0;
+}
+
+.screen-metrics__item {
+  padding: 24px;
+  border: 1px solid #d8e0e6;
+  border-top: 3px solid #118c74;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.screen-metrics__item dt {
+  color: #53616f;
+}
+
+.screen-metrics__item dd {
+  margin: 12px 0 0;
+  font-size: max(36px, var(--lumal-viewport-min-font-size, 14px));
+  font-weight: 600;
+}
+</style>

package/templates/screen-auth/src/screen/ScreenEntry.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { authDemo, authEnabled } from '../services/auth-adapter';
+import { authenticated, signIn, signOut } from '../services/session';
+import ScreenLoginForm from './components/ScreenLoginForm.vue';
+import ScreenView from './ScreenView.vue';
+
+/***********************认证门禁*********************/
+const loading = shallowRef(false);
+const error = shallowRef('');
+async function login(username: string, password: string) {
+  loading.value = true;
+  error.value = '';
+  try {
+    await signIn(username, password);
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '登录失败';
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="authenticated" class="screen-entry">
+    <div class="screen-session">
+      <span v-if="authDemo">Local Demo</span>
+      <button type="button" @click="signOut">退出登录</button>
+    </div>
+    <ScreenView />
+  </div>
+  <main v-else>
+    <ScreenLoginForm :loading="loading" :error="error" :enabled="authEnabled" :demo="authDemo" @submit="login" />
+  </main>
+</template>
+
+<style scoped>
+.screen-entry {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  min-height: 0;
+}
+.screen-session {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 12px 32px;
+}
+</style>

package/templates/screen-auth/src/screen/components/ScreenLoginForm.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+
+/***********************登录输入*********************/
+defineProps<{ loading: boolean; error: string; enabled: boolean; demo: boolean }>();
+const emit = defineEmits<{ submit: [username: string, password: string] }>();
+const username = shallowRef('');
+const password = shallowRef('');
+</script>
+
+<template>
+  <form class="screen-login" @submit.prevent="emit('submit', username, password)">
+    <h1>登录</h1>
+    <p v-if="demo" role="status">Local Demo 认证，仅限开发：demo / demo</p>
+    <p v-if="!enabled" role="alert">生产环境禁止 Local Demo 登录</p>
+    <p v-if="error" role="alert">{{ error }}</p>
+    <label>用户名<input v-model="username" name="username" autocomplete="username" required /></label>
+    <label
+      >密码<input v-model="password" name="password" type="password" autocomplete="current-password" required
+    /></label>
+    <button type="submit" :disabled="loading || !enabled">{{ loading ? '登录中' : '登录' }}</button>
+  </form>
+</template>
+
+<style scoped>
+.screen-login {
+  display: grid;
+  gap: 20px;
+  width: min(360px, calc(100% - 40px));
+  margin: 12vh auto;
+}
+.screen-login label {
+  display: grid;
+  gap: 8px;
+}
+.screen-login input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 40px;
+}
+.screen-login button {
+  min-height: 40px;
+}
+</style>

package/templates/screen-auth/src/services/session.ts

@@ -0,0 +1,61 @@
+import type { AuthSessionData } from '@lumal/core/auth';
+import { createAuthSession } from '@lumal/core/auth';
+import { shallowRef } from 'vue';
+import { authEnabled, authenticate, refreshAuth } from './auth-adapter';
+
+/***********************独立会话*********************/
+const session = createAuthSession({
+  storage: typeof sessionStorage === 'undefined' ? undefined : sessionStorage,
+  tokenKey: 'screen:session',
+});
+if (!authEnabled) session.clearToken();
+const saved = session.getSession();
+if (saved?.expiresAt !== undefined && saved.expiresAt <= Date.now()) session.clearToken();
+export const authenticated = shallowRef(session.isAuthenticated());
+let controller = new AbortController();
+let generation = 0;
+let expiry: ReturnType<typeof setTimeout> | undefined;
+export const getSessionToken = () => session.getToken() || undefined;
+export const getSessionSignal = () => controller.signal;
+export const getSessionScope = () => String(generation);
+
+function scheduleExpiry() {
+  clearTimeout(expiry);
+  const expiresAt = session.getSession()?.expiresAt;
+  if (expiresAt === undefined) return;
+  const remaining = expiresAt - Date.now();
+  if (remaining <= 0) signOut();
+  else expiry = setTimeout(scheduleExpiry, Math.min(remaining, 2_147_483_647));
+}
+
+export function signOut() {
+  generation += 1;
+  controller.abort();
+  controller = new AbortController();
+  clearTimeout(expiry);
+  session.clearToken();
+  authenticated.value = false;
+}
+
+function applySession(data: AuthSessionData, expected: number) {
+  if (generation !== expected) throw new Error('会话已切换');
+  session.setSession(data);
+  authenticated.value = true;
+  scheduleExpiry();
+}
+
+export async function signIn(username: string, password: string) {
+  signOut();
+  const expected = generation;
+  const data = await authenticate(username, password, controller.signal);
+  applySession(data, expected);
+}
+
+export async function refreshSession() {
+  const expected = generation;
+  const data = await refreshAuth(session.getRefreshToken(), controller.signal);
+  applySession(data, expected);
+}
+
+scheduleExpiry();
+if (import.meta.hot) import.meta.hot.dispose(() => signOut());