openxiangda-cli 2.0.0-alpha.66 → 2.0.0-alpha.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openxiangda-cli",
-  "version": "2.0.0-alpha.66",
+  "version": "2.0.0-alpha.68",
   "description": "Thin application-level CLI for OpenXiangda 2.0.",
   "type": "module",
   "main": "./dist/index.js",

package/template/apps/web/e2e/resources.spec.ts

@@ -17,4 +17,15 @@ test('clean scaffold renders the shared shell without business fixtures', async
   await page.goto('/view/clean-app/');
   await expect(page.getByText('还没有声明数据资源')).toBeVisible();
   await expect(page.getByText('仪器' + '资源管理')).toHaveCount(0);
+  await expect(page.locator('.oxa-topbar')).toHaveCSS('height', '52px');
+
+  await page.locator('.oxa-current-user').click();
+  await expect(page.getByText('跟随系统', { exact: true })).toBeVisible();
+  await page.getByText('深色', { exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-oxa-theme', 'dark');
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem('openxiangda.admin.appearance')))
+    .toBe('dark');
+  await page.reload();
+  await expect(page.locator('html')).toHaveAttribute('data-oxa-theme', 'dark');
 });

package/template/apps/web/src/FilePreviewPage.tsx

@@ -58,7 +58,7 @@ function DocxDocument({ blob }: { blob: Blob }) {
     };
   }, [blob]);
   if (error) {
-    return <Alert message="Word 文档解析失败" description={error} type="error" showIcon />;
+    return <Alert title="Word 文档解析失败" description={error} type="error" showIcon />;
   }
   return (
     <div className="oxa-docx-preview">
@@ -115,7 +115,7 @@ function SpreadsheetDocument({ blob }: { blob: Blob }) {
   }, [blob]);
   const rows = sheets[sheetName] || [];
   if (error) {
-    return <Alert message="Excel 文件解析失败" description={error} type="error" showIcon />;
+    return <Alert title="Excel 文件解析失败" description={error} type="error" showIcon />;
   }
   const sheetNames = Object.keys(sheets);
   if (!sheetNames.length) return <Spin description="正在解析 Excel 文件" />;
@@ -151,7 +151,7 @@ function SpreadsheetDocument({ blob }: { blob: Blob }) {
         rows.some(row => row.length >= MAX_SPREADSHEET_COLUMNS)) && (
         <Alert
           banner
-          message={`为保证浏览器稳定，仅展示前 ${MAX_SPREADSHEET_ROWS} 行、${MAX_SPREADSHEET_COLUMNS} 列`}
+          title={`为保证浏览器稳定，仅展示前 ${MAX_SPREADSHEET_ROWS} 行、${MAX_SPREADSHEET_COLUMNS} 列`}
           type="warning"
         />
       )}

package/template/apps/web/src/Shell.tsx

@@ -1,68 +1,358 @@
-import { AppstoreOutlined, DatabaseOutlined, LeftOutlined, MenuUnfoldOutlined, SettingOutlined } from '@ant-design/icons';
-import { Avatar, Breadcrumb, Button, Empty, Layout, Menu, Space, Typography, type MenuProps } from 'antd';
+import {
+  AppstoreOutlined,
+  DatabaseOutlined,
+  DownOutlined,
+  LeftOutlined,
+  LogoutOutlined,
+  MenuUnfoldOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import {
+  App,
+  Avatar,
+  Breadcrumb,
+  Button,
+  Dropdown,
+  Empty,
+  Layout,
+  Menu,
+  Segmented,
+  Tabs,
+  Typography,
+  type MenuProps,
+} from 'antd';
 import type { ReactNode } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { resourceDefinitions } from '../../../packages/contracts/src/generated.js';
-import { resolveDirectory } from './platform-client';
+import { useAppearance, type AppearancePreference } from './appearance';
+import { logoutCurrentUser, resolveDirectory } from './platform-client';
 import { useRuntime } from './runtime';
 
 const { Content, Header, Sider } = Layout;
-type Definition = { code: string; name: string; capabilities: { read: string }; surface: { generated?: boolean } };
+const HISTORY_STORAGE_KEY = 'openxiangda.admin.route-history';
+const MAX_HISTORY_ITEMS = 8;
+
+type Definition = {
+  code: string;
+  name: string;
+  capabilities: { read: string };
+  surface: { generated?: boolean };
+};
+type HistoryItem = { path: string; label: string };
+
 const definitions = resourceDefinitions as unknown as Record<string, Definition>;
 
 function currentDefinition(pathname: string) {
-  return Object.values(definitions).find(definition => pathname === `/${definition.code}` || pathname.startsWith(`/${definition.code}/`) || pathname === `/m/${definition.code}` || pathname.startsWith(`/m/${definition.code}/`));
+  return Object.values(definitions).find(
+    definition =>
+      pathname === `/${definition.code}` ||
+      pathname.startsWith(`/${definition.code}/`) ||
+      pathname === `/m/${definition.code}` ||
+      pathname.startsWith(`/m/${definition.code}/`),
+  );
+}
+
+function routeLabel(pathname: string, definition?: Definition) {
+  if (!definition) return '应用首页';
+  if (pathname.endsWith('/new')) return `新增${definition.name}`;
+  if (pathname.endsWith('/edit')) return `编辑${definition.name}`;
+  if (pathname === `/${definition.code}`) return definition.name;
+  return `${definition.name}详情`;
+}
+
+function readHistory(): HistoryItem[] {
+  try {
+    const parsed = JSON.parse(
+      window.sessionStorage.getItem(HISTORY_STORAGE_KEY) || '[]',
+    );
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter(
+        item =>
+          item &&
+          typeof item.path === 'string' &&
+          typeof item.label === 'string',
+      )
+      .slice(-MAX_HISTORY_ITEMS);
+  } catch {
+    return [];
+  }
+}
+
+function storeHistory(items: HistoryItem[]) {
+  try {
+    window.sessionStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));
+  } catch {
+    // Route history is a convenience only; navigation remains authoritative.
+  }
 }
 
 export function Shell({ children }: { children: ReactNode }) {
   const { identity, hasCapability } = useRuntime();
+  const { effectiveAppearance, preference, setPreference } = useAppearance();
+  const { message } = App.useApp();
   const location = useLocation();
   const navigate = useNavigate();
   const [collapsed, setCollapsed] = useState(false);
-  const [user, setUser] = useState({ label: '当前用户', description: '平台用户' });
+  const [loggingOut, setLoggingOut] = useState(false);
+  const [history, setHistory] = useState<HistoryItem[]>(readHistory);
+  const [user, setUser] = useState({
+    label: '当前用户',
+    description: '平台用户',
+  });
   const definition = currentDefinition(location.pathname);
+  const currentLabel = routeLabel(location.pathname, definition);
+  const accessibleDefinitions = useMemo(
+    () =>
+      Object.values(definitions).filter(
+        item =>
+          item.surface.generated !== false &&
+          hasCapability(item.capabilities.read),
+      ),
+    [hasCapability],
+  );
+  const homePath = accessibleDefinitions[0]
+    ? `/${accessibleDefinitions[0].code}`
+    : '/';
+
   useEffect(() => {
     let active = true;
-    void resolveDirectory('user', [identity.userId]).then(page => {
-      const entry = page.items[0];
-      if (active && entry) setUser({ label: entry.label || '当前用户', description: entry.description || '平台用户' });
-    }).catch(() => undefined);
-    return () => { active = false; };
+    void resolveDirectory('user', [identity.userId])
+      .then(page => {
+        const entry = page.items[0];
+        if (active && entry) {
+          setUser({
+            label: entry.label || '当前用户',
+            description: entry.description || '平台用户',
+          });
+        }
+      })
+      .catch(() => undefined);
+    return () => {
+      active = false;
+    };
   }, [identity.userId]);
-  const menuItems = useMemo<MenuProps['items']>(() => [
-    { key: 'overview', icon: <AppstoreOutlined />, label: '总览', children: [{ key: 'home', label: '首页' }] },
-    {
-      key: 'resources',
-      icon: <DatabaseOutlined />,
-      label: '数据管理',
-      children: Object.values(definitions)
-        .filter(item => item.surface.generated !== false && hasCapability(item.capabilities.read))
-        .map(item => ({ key: `/${item.code}`, icon: <DatabaseOutlined />, label: item.name })),
+
+  useEffect(() => {
+    if (!definition || location.pathname.startsWith('/m/')) return;
+    setHistory(current => {
+      const next = [
+        ...current.filter(item => item.path !== location.pathname),
+        { path: location.pathname, label: currentLabel },
+      ].slice(-MAX_HISTORY_ITEMS);
+      storeHistory(next);
+      return next;
+    });
+  }, [currentLabel, definition, location.pathname]);
+
+  const menuItems = useMemo<MenuProps['items']>(
+    () => [
+      {
+        key: 'overview',
+        icon: <AppstoreOutlined />,
+        label: '总览',
+        children: [{ key: 'home', label: '首页' }],
+      },
+      {
+        key: 'resources',
+        icon: <DatabaseOutlined />,
+        label: '数据管理',
+        children: accessibleDefinitions.map(item => ({
+          key: `/${item.code}`,
+          icon: <DatabaseOutlined />,
+          label: item.name,
+        })),
+      },
+      {
+        key: 'settings',
+        icon: <SettingOutlined />,
+        label: '系统设置',
+        children: [
+          { key: 'settings-disabled', label: '应用设置', disabled: true },
+        ],
+      },
+    ],
+    [accessibleDefinitions],
+  );
+
+  const closeHistory = (targetPath: string) => {
+    const targetIndex = history.findIndex(item => item.path === targetPath);
+    const remaining = history.filter(item => item.path !== targetPath);
+    storeHistory(remaining);
+    setHistory(remaining);
+    if (targetPath !== location.pathname) return;
+    const fallback =
+      remaining[Math.min(Math.max(targetIndex, 0), remaining.length - 1)] ||
+      remaining.at(-1);
+    navigate(fallback?.path || homePath);
+  };
+
+  const handleLogout = async () => {
+    setLoggingOut(true);
+    try {
+      await logoutCurrentUser();
+      window.location.assign('/login');
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : '退出登录失败');
+      setLoggingOut(false);
+    }
+  };
+
+  const userMenu: MenuProps = {
+    items: [
+      { type: 'divider' },
+      {
+        danger: true,
+        icon: <LogoutOutlined />,
+        key: 'logout',
+        label: loggingOut ? '正在退出…' : '退出登录',
+      },
+    ],
+    onClick: ({ key }) => {
+      if (key === 'logout' && !loggingOut) void handleLogout();
     },
-    { key: 'settings', icon: <SettingOutlined />, label: '系统设置', children: [{ key: 'settings-disabled', label: '应用设置', disabled: true }] },
-  ], [hasCapability]);
+  };
+
   return (
     <Layout className="oxa-app-layout">
-      <Sider className="oxa-sider" collapsed={collapsed} collapsedWidth={76} collapsible onBreakpoint={setCollapsed} theme="light" trigger={null} width={240}>
-        <div className="oxa-brand"><div aria-hidden className="oxa-brand-mark"><span /></div>{!collapsed && <div className="oxa-brand-copy"><strong>OpenXiangda 应用</strong><span>标准资源管理工作台</span></div>}</div>
-        <Menu className="oxa-menu" defaultOpenKeys={['overview', 'resources', 'settings']} inlineCollapsed={collapsed} items={menuItems} mode="inline" onClick={({ key }) => {
-          if (key === 'home') navigate(Object.keys(definitions)[0] ? `/${Object.keys(definitions)[0]}` : '/');
-          else if (typeof key === 'string' && key.startsWith('/')) navigate(key);
-        }} selectedKeys={definition ? [`/${definition.code}`] : []} />
-        <div className="oxa-sider-footer"><Button aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'} block icon={collapsed ? <MenuUnfoldOutlined /> : <LeftOutlined />} onClick={() => setCollapsed(value => !value)} type="text">{!collapsed && '收起侧边栏'}</Button></div>
+      <Sider
+        className="oxa-sider"
+        collapsed={collapsed}
+        collapsedWidth={64}
+        collapsible
+        onBreakpoint={setCollapsed}
+        theme={effectiveAppearance}
+        trigger={null}
+        width={228}
+      >
+        <div className="oxa-brand">
+          <div aria-hidden className="oxa-brand-mark">
+            <span />
+          </div>
+          {!collapsed && (
+            <div className="oxa-brand-copy">
+              <strong>OpenXiangda 应用</strong>
+              <span>标准资源管理工作台</span>
+            </div>
+          )}
+        </div>
+        <Menu
+          className="oxa-menu"
+          defaultOpenKeys={['overview', 'resources', 'settings']}
+          inlineCollapsed={collapsed}
+          items={menuItems}
+          mode="inline"
+          onClick={({ key }) => {
+            if (key === 'home') navigate(homePath);
+            else if (typeof key === 'string' && key.startsWith('/')) navigate(key);
+          }}
+          selectedKeys={definition ? [`/${definition.code}`] : []}
+          theme={effectiveAppearance}
+        />
+        <div className="oxa-sider-footer">
+          <Button
+            aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
+            block
+            icon={collapsed ? <MenuUnfoldOutlined /> : <LeftOutlined />}
+            onClick={() => setCollapsed(value => !value)}
+            type="text"
+          >
+            {!collapsed && '收起侧边栏'}
+          </Button>
+        </div>
       </Sider>
       <Layout className="oxa-workspace">
         <Header className="oxa-topbar">
-          <div className="oxa-topbar-page"><Breadcrumb items={[{ title: '首页' }, ...(definition ? [{ title: definition.name }] : [])]} /><Typography.Title level={3}>{definition?.name || '应用首页'}</Typography.Title></div>
-          <Space className="oxa-current-user" size={12}><Avatar className="oxa-current-user-avatar" size={42}>{user.label.slice(0, 1)}</Avatar><div className="oxa-current-user-copy"><strong>{user.label}</strong><span>{user.description}</span></div></Space>
+          <Breadcrumb
+            items={[
+              { title: '首页', onClick: () => navigate(homePath) },
+              ...(definition ? [{ title: currentLabel }] : []),
+            ]}
+          />
+          <Dropdown
+            menu={userMenu}
+            popupRender={menus => (
+              <div className="oxa-user-dropdown">
+                <div className="oxa-user-dropdown-profile">
+                  <Avatar className="oxa-current-user-avatar" size={40}>
+                    {user.label.slice(0, 1)}
+                  </Avatar>
+                  <div>
+                    <strong>{user.label}</strong>
+                    <span>{user.description}</span>
+                    <small>{identity.userId}</small>
+                  </div>
+                </div>
+                <div className="oxa-user-dropdown-roles">
+                  <span>当前角色</span>
+                  <Typography.Text ellipsis>
+                    {identity.isAppSuperAdmin
+                      ? '应用管理员'
+                      : identity.roleCodes.join('、') || '普通成员'}
+                  </Typography.Text>
+                </div>
+                <div className="oxa-user-dropdown-theme">
+                  <span>外观</span>
+                  <Segmented
+                    block
+                    onChange={value =>
+                      setPreference(value as AppearancePreference)
+                    }
+                    options={[
+                      { label: '跟随系统', value: 'system' },
+                      { label: '浅色', value: 'light' },
+                      { label: '深色', value: 'dark' },
+                    ]}
+                    size="small"
+                    value={preference}
+                  />
+                </div>
+                {menus}
+              </div>
+            )}
+            trigger={['hover', 'click']}
+          >
+            <button className="oxa-current-user" type="button">
+              <Avatar className="oxa-current-user-avatar" size={30}>
+                {user.label.slice(0, 1)}
+              </Avatar>
+              <strong>{user.label}</strong>
+              <DownOutlined className="oxa-current-user-chevron" />
+            </button>
+          </Dropdown>
         </Header>
-        <Content className="oxa-content"><main className="oxa-main">{children}</main></Content>
+        {history.length > 0 && (
+          <nav aria-label="页面访问历史" className="oxa-route-history">
+            <Tabs
+              activeKey={location.pathname}
+              hideAdd
+              items={history.map(item => ({
+                closable: history.length > 1,
+                key: item.path,
+                label: item.label,
+              }))}
+              onChange={navigate}
+              onEdit={(target, action) => {
+                if (action === 'remove') closeHistory(String(target));
+              }}
+              size="small"
+              type="editable-card"
+            />
+          </nav>
+        )}
+        <Content className="oxa-content">
+          <main className="oxa-main">{children}</main>
+        </Content>
       </Layout>
     </Layout>
   );
 }
 
 export function EmptyApplicationPage() {
-  return <Shell><Empty description="还没有声明数据资源；请在 platform/data 中添加 DataResource" /></Shell>;
+  return (
+    <Shell>
+      <Empty description="还没有声明数据资源；请在 platform/data 中添加 DataResource" />
+    </Shell>
+  );
 }

package/template/apps/web/src/appearance.tsx

@@ -0,0 +1,147 @@
+import {
+  App as AntdApp,
+  ConfigProvider,
+  theme as antdTheme,
+  type ThemeConfig,
+} from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+export type AppearancePreference = 'system' | 'light' | 'dark';
+export type EffectiveAppearance = 'light' | 'dark';
+
+const STORAGE_KEY = 'openxiangda.admin.appearance';
+const AppearanceContext = createContext<{
+  preference: AppearancePreference;
+  effectiveAppearance: EffectiveAppearance;
+  setPreference: (value: AppearancePreference) => void;
+} | null>(null);
+
+function storedPreference(): AppearancePreference {
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY);
+    return value === 'light' || value === 'dark' || value === 'system'
+      ? value
+      : 'system';
+  } catch {
+    return 'system';
+  }
+}
+
+function systemPrefersDark() {
+  return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+}
+
+function PlatformThemeCssVariables() {
+  const { token } = antdTheme.useToken();
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    const variables: Record<string, string> = {
+      '--oxa-shell-bg': token.colorBgLayout,
+      '--oxa-shell-surface': token.colorBgContainer,
+      '--oxa-shell-elevated': token.colorBgElevated,
+      '--oxa-shell-subtle': token.colorFillAlter,
+      '--oxa-shell-hover': token.colorFillSecondary,
+      '--oxa-shell-border': token.colorBorderSecondary,
+      '--oxa-shell-border-strong': token.colorBorder,
+      '--oxa-shell-text': token.colorText,
+      '--oxa-shell-text-secondary': token.colorTextSecondary,
+      '--oxa-shell-text-tertiary': token.colorTextTertiary,
+      '--oxa-shell-text-disabled': token.colorTextDisabled,
+      '--oxa-shell-primary': token.colorPrimary,
+      '--oxa-shell-primary-bg': token.colorPrimaryBg,
+      '--oxa-shell-primary-border': token.colorPrimaryBorder,
+      '--oxa-shell-error': token.colorError,
+      '--oxa-shell-error-bg': token.colorErrorBg,
+      '--oxa-shell-error-border': token.colorErrorBorder,
+      '--oxa-shell-mask': token.colorBgMask,
+      '--oxa-shell-shadow': token.boxShadowTertiary,
+    };
+    for (const [name, value] of Object.entries(variables)) {
+      root.style.setProperty(name, value);
+    }
+  }, [token]);
+  return null;
+}
+
+export function AppearanceProvider({ children }: { children: ReactNode }) {
+  const [preference, setPreferenceState] = useState<AppearancePreference>(
+    storedPreference,
+  );
+  const [systemDark, setSystemDark] = useState(systemPrefersDark);
+
+  useEffect(() => {
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = (event: MediaQueryListEvent) => setSystemDark(event.matches);
+    query.addEventListener('change', onChange);
+    return () => query.removeEventListener('change', onChange);
+  }, []);
+
+  const effectiveAppearance: EffectiveAppearance =
+    preference === 'system' ? (systemDark ? 'dark' : 'light') : preference;
+
+  useLayoutEffect(() => {
+    document.documentElement.dataset.oxaTheme = effectiveAppearance;
+    document.documentElement.style.colorScheme = effectiveAppearance;
+  }, [effectiveAppearance]);
+
+  const setPreference = (value: AppearancePreference) => {
+    setPreferenceState(value);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, value);
+    } catch {
+      // A blocked storage API must not prevent the in-memory theme switch.
+    }
+  };
+
+  const theme = useMemo<ThemeConfig>(
+    () => ({
+      algorithm:
+        effectiveAppearance === 'dark'
+          ? antdTheme.darkAlgorithm
+          : antdTheme.defaultAlgorithm,
+      cssVar: { key: effectiveAppearance, prefix: 'oxa' },
+      token: {
+        borderRadius: 6,
+        colorPrimary: '#1677ff',
+        fontSize: 14,
+      },
+      components: {
+        Card: { headerFontSize: 16 },
+        Layout: { headerHeight: 52 },
+        Menu: { itemBorderRadius: 6, itemHeight: 40 },
+      },
+    }),
+    [effectiveAppearance],
+  );
+
+  const value = useMemo(
+    () => ({ preference, effectiveAppearance, setPreference }),
+    [effectiveAppearance, preference],
+  );
+
+  return (
+    <AppearanceContext.Provider value={value}>
+      <ConfigProvider componentSize="medium" locale={zhCN} theme={theme}>
+        <AntdApp>
+          <PlatformThemeCssVariables />
+          {children}
+        </AntdApp>
+      </ConfigProvider>
+    </AppearanceContext.Provider>
+  );
+}
+
+export function useAppearance() {
+  const value = useContext(AppearanceContext);
+  if (!value) throw new Error('OPENXIANGDA_APPEARANCE_NOT_READY');
+  return value;
+}