openxiangda-cli 2.0.0-alpha.86 → 2.0.0-alpha.90

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

@@ -1,445 +0,0 @@
-import {
-  AppstoreOutlined,
-  DatabaseOutlined,
-  DownOutlined,
-  LeftOutlined,
-  LogoutOutlined,
-  MenuUnfoldOutlined,
-  SettingOutlined,
-  SwapOutlined,
-} from '@ant-design/icons';
-import {
-  App,
-  Avatar,
-  Breadcrumb,
-  Button,
-  Dropdown,
-  Empty,
-  Layout,
-  Menu,
-  Modal,
-  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 { useAppearance, type AppearancePreference } from './appearance';
-import { logoutCurrentUser, resolveDirectory } from './platform-client';
-import { RoleSubjectSelect } from './RoleSubjectSelect';
-import { useRuntime } from './runtime';
-
-const { Content, Header, Sider } = Layout;
-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}/`),
-  );
-}
-
-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,
-    switchRole,
-    switchingRole,
-  } = useRuntime();
-  const { effectiveAppearance, preference, setPreference } = useAppearance();
-  const { message } = App.useApp();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [collapsed, setCollapsed] = useState(false);
-  const [loggingOut, setLoggingOut] = useState(false);
-  const [roleModalOpen, setRoleModalOpen] = useState(false);
-  const [selectedRoleSubjectKey, setSelectedRoleSubjectKey] = useState(
-    identity.currentRoleSubject?.subjectKey || ''
-  );
-  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(() => {
-    if (identity.subjectProfile) {
-      setUser({
-        label: identity.subjectProfile.displayName || '当前用户',
-        description:
-          identity.subjectProfile.affiliatedDepartment?.name || '平台用户',
-      });
-      return;
-    }
-    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;
-    };
-  }, [identity.subjectProfile, identity.userId]);
-
-  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 handleRoleSwitch = async () => {
-    if (
-      !selectedRoleSubjectKey ||
-      selectedRoleSubjectKey === identity.currentRoleSubject?.subjectKey
-    ) {
-      return;
-    }
-    try {
-      await switchRole(selectedRoleSubjectKey);
-      setRoleModalOpen(false);
-      message.success('应用角色已切换');
-    } catch (reason) {
-      message.warning(
-        reason instanceof Error
-          ? `${reason.message}；已重新读取当前角色`
-          : '应用角色上下文已变化，请重试'
-      );
-    }
-  };
-
-  const currentRoleLabel =
-    identity.currentRoleSubject?.role.name ||
-    (identity.roleSwitchingAvailable
-      ? identity.roleCodes.join('、') || '普通成员'
-      : '开发者联合权限');
-
-  const userMenu: MenuProps = {
-    items: [
-      ...(identity.roleSwitchingAvailable &&
-      (identity.roleSubjectPage?.total || 0) > 1
-        ? [
-            {
-              icon: <SwapOutlined />,
-              key: 'switch-role',
-              label: '切换应用角色',
-            } as NonNullable<MenuProps['items']>[number],
-          ]
-        : []),
-      { type: 'divider' },
-      {
-        danger: true,
-        icon: <LogoutOutlined />,
-        key: 'logout',
-        label: loggingOut ? '正在退出…' : '退出登录',
-      },
-    ],
-    onClick: ({ key }) => {
-      if (key === 'switch-role') {
-        setSelectedRoleSubjectKey(
-          identity.currentRoleSubject?.subjectKey || ''
-        );
-        setRoleModalOpen(true);
-      }
-      if (key === 'logout' && !loggingOut) void handleLogout();
-    },
-  };
-
-  return (
-    <Layout className="oxa-app-layout">
-      <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">
-          <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>
-                    {currentRoleLabel}
-                  </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>
-        {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>
-      <Modal
-        cancelText="取消"
-        centered
-        destroyOnHidden
-        okButtonProps={{
-          disabled:
-            !selectedRoleSubjectKey ||
-            selectedRoleSubjectKey === identity.currentRoleSubject?.subjectKey,
-        }}
-        okText="切换角色"
-        onCancel={() => setRoleModalOpen(false)}
-        onOk={() => void handleRoleSwitch()}
-        open={roleModalOpen}
-        confirmLoading={switchingRole}
-        title="切换当前应用角色"
-      >
-        {identity.roleSubjectPage && (
-          <RoleSubjectSelect
-            initialPage={identity.roleSubjectPage}
-            onChange={setSelectedRoleSubjectKey}
-            value={selectedRoleSubjectKey || undefined}
-          />
-        )}
-        <Typography.Paragraph className="oxa-role-switch-help" type="secondary">
-          切换后页面、数据和操作权限会按目标角色重新加载。
-        </Typography.Paragraph>
-      </Modal>
-    </Layout>
-  );
-}
-
-export function EmptyApplicationPage() {
-  return (
-    <Shell>
-      <Empty description="还没有声明数据资源；请在 openxiangda.config.ts 中添加资源和字段" />
-    </Shell>
-  );
-}

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

@@ -1,147 +0,0 @@
-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;
-}