@jiangood/open-admin 3.1.6 → 3.1.7

package/src/framework/components/ThemeSettings/index.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { Button, Drawer, Segmented } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import {
+    THEME_PRESETS,
+    DEFAULT_COLORS,
+    DEFAULT_SIDER_BG,
+    applyThemePreset,
+    getActivePresetKey,
+    getThemeMode,
+    resetAllSettings,
+    setThemeMode,
+    DENSITY_PRESETS,
+    RADIUS_PRESETS,
+    applyDensityPreset,
+    getActiveDensityKey,
+    applyRadiusPreset,
+    getActiveRadiusKey,
+    getLayoutMode,
+    setLayoutMode,
+} from '../../config';
+import type { ThemeMode, ThemeDensity, ThemeRadius, LayoutMode } from '../../config';
+import { EventBus } from '../../utils/EventBus';
+
+export interface ThemeSettingsProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+    return <div style={{ margin: '20px 0 12px', fontWeight: 600 }}>{children}</div>;
+}
+
+/**
+ * 界面设置面板：外观模式、主题色、界面密度、圆角、界面布局。
+ * 所有变更即时生效并持久化到 localStorage。
+ */
+export function ThemeSettings({ open, onClose }: ThemeSettingsProps) {
+    const [activeKey, setActiveKey] = React.useState(getActivePresetKey());
+    const [mode, setMode] = React.useState<ThemeMode>(getThemeMode());
+    const [density, setDensity] = React.useState<ThemeDensity>(getActiveDensityKey());
+    const [radius, setRadius] = React.useState<ThemeRadius>(getActiveRadiusKey());
+    const [layout, setLayout] = React.useState<LayoutMode>(getLayoutMode());
+
+    React.useEffect(() => {
+        const offTheme = EventBus.on('themeChange', () => {
+            setActiveKey(getActivePresetKey());
+            setMode(getThemeMode());
+            setDensity(getActiveDensityKey());
+            setRadius(getActiveRadiusKey());
+        });
+        const offLayout = EventBus.on('layoutChange', () => {
+            setLayout(getLayoutMode());
+        });
+        return () => {
+            offTheme();
+            offLayout();
+        };
+    }, []);
+
+    const radiusValue = (key: ThemeRadius) =>
+        (RADIUS_PRESETS.find(p => p.key === key)?.token.borderRadius as number) ?? 6;
+
+    return (
+        <Drawer title="界面设置" open={open} onClose={onClose} size={340}>
+            <div style={{ fontWeight: 600 }}>外观模式</div>
+            <Segmented
+                block
+                style={{ marginTop: 12 }}
+                value={mode}
+                onChange={value => setThemeMode(value as ThemeMode)}
+                options={[
+                    { label: '浅色', value: 'light' },
+                    { label: '深色', value: 'dark' },
+                ]}
+            />
+
+            <SectionTitle>主题色</SectionTitle>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
+                {THEME_PRESETS.map(preset => {
+                    const primary = preset.colors.colorPrimary || DEFAULT_COLORS.colorPrimary || '#1677ff';
+                    const sider = preset.colors.siderBg || DEFAULT_SIDER_BG;
+                    const active = preset.key === activeKey;
+                    return (
+                        <button
+                            key={preset.key}
+                            type="button"
+                            aria-pressed={active}
+                            onClick={() => applyThemePreset(preset.key)}
+                            style={{
+                                cursor: 'pointer',
+                                padding: 0,
+                                overflow: 'hidden',
+                                borderRadius: 8,
+                                textAlign: 'left',
+                                background: 'transparent',
+                                border: active
+                                    ? `2px solid ${primary}`
+                                    : '1px solid var(--oa-color-border, #e8e8e8)',
+                            }}
+                        >
+                            <div style={{ display: 'flex', height: 44 }}>
+                                <div
+                                    style={{
+                                        width: '50%',
+                                        background: primary,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        color: '#fff',
+                                    }}
+                                >
+                                    {active && <CheckOutlined />}
+                                </div>
+                                <div style={{ width: '50%', background: sider }} />
+                            </div>
+                            <div style={{ padding: '6px 8px', fontSize: 12 }}>{preset.name}</div>
+                        </button>
+                    );
+                })}
+            </div>
+
+            <SectionTitle>界面密度</SectionTitle>
+            <Segmented
+                block
+                value={density}
+                onChange={value => applyDensityPreset(value as ThemeDensity)}
+                options={DENSITY_PRESETS.map(p => ({ label: p.name, value: p.key }))}
+            />
+
+            <SectionTitle>圆角</SectionTitle>
+            <Segmented
+                block
+                value={radius}
+                onChange={value => applyRadiusPreset(value as ThemeRadius)}
+                options={RADIUS_PRESETS.map(p => ({
+                    value: p.key,
+                    label: (
+                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                            <span
+                                style={{
+                                    display: 'inline-block',
+                                    width: 14,
+                                    height: 14,
+                                    border: '1.5px solid currentColor',
+                                    borderRadius: radiusValue(p.key),
+                                }}
+                            />
+                            {p.name}
+                        </span>
+                    ),
+                }))}
+            />
+
+            <SectionTitle>界面布局</SectionTitle>
+            <Segmented
+                block
+                value={layout}
+                onChange={value => setLayoutMode(value as LayoutMode)}
+                options={[
+                    { label: '多标签页', value: 'tabs' },
+                    { label: '单页', value: 'single' },
+                ]}
+            />
+
+            <Button block style={{ marginTop: 20 }} onClick={() => resetAllSettings()}>
+                恢复默认
+            </Button>
+        </Drawer>
+    );
+}
+
+export default ThemeSettings;

package/src/framework/components/index.ts

@@ -8,6 +8,7 @@ export * from './ValueType'
 export * from './ContextMenu'
 export * from './DownloadModal'
 export * from './OrgSwitcher'
+export * from './ThemeSettings'
 export { default as ErrorBoundary } from './ErrorBoundary'
 export { default as FormModal } from './FormModal'
 export { default as FormDrawer } from './DrawerForm'

package/src/framework/config/index.ts

@@ -1,2 +1,44 @@
-export { getThemeConfig, getToken, setThemeColors } from './themeConfig'
-export type { ThemeColors } from './themeConfig'
+export {
+    getThemeConfig,
+    getSiderThemeConfig,
+    getToken,
+    setThemeColors,
+    getThemeMode,
+    setThemeMode,
+    toggleThemeMode,
+    applyThemePreset,
+    getActivePresetKey,
+    applyDensityPreset,
+    getActiveDensityKey,
+    applyRadiusPreset,
+    getActiveRadiusKey,
+    resetUserTheme,
+    DEFAULT_COLORS,
+    DEFAULT_PRESET_KEY,
+    DEFAULT_SIDER_BG,
+    DEFAULT_SIDER_TRIGGER_BG,
+    THEME_PRESETS,
+    DEFAULT_DENSITY_KEY,
+    DENSITY_PRESETS,
+    DEFAULT_RADIUS_KEY,
+    RADIUS_PRESETS,
+} from './themeConfig'
+export type { ThemeColors, ThemeMode, ThemePreset, ThemeDensity, ThemeRadius, ThemeDensityPreset, ThemeRadiusPreset } from './themeConfig'
+
+export {
+    getLayoutMode,
+    setLayoutMode,
+    toggleLayoutMode,
+    resetLayoutMode,
+    DEFAULT_LAYOUT_MODE,
+} from './layoutConfig'
+export type { LayoutMode } from './layoutConfig'
+
+import { resetUserTheme } from './themeConfig'
+import { resetLayoutMode } from './layoutConfig'
+
+/** 一键恢复全部界面设置：主题（颜色/明暗/密度/圆角）+ 布局 */
+export function resetAllSettings() {
+    resetUserTheme()
+    resetLayoutMode()
+}

package/src/framework/config/layoutConfig.ts

@@ -0,0 +1,52 @@
+import { EventBus } from '../utils/EventBus';
+
+export type LayoutMode = 'tabs' | 'single';
+
+const LAYOUT_MODE_KEY = 'oa-layout-tabs';
+
+export const DEFAULT_LAYOUT_MODE: LayoutMode = 'tabs';
+
+const LAYOUT_MODES: LayoutMode[] = ['tabs', 'single'];
+
+function readStoredLayoutMode(): LayoutMode {
+    if (typeof window === 'undefined') return DEFAULT_LAYOUT_MODE;
+    try {
+        const mode = localStorage.getItem(LAYOUT_MODE_KEY);
+        if (mode && LAYOUT_MODES.includes(mode as LayoutMode)) return mode as LayoutMode;
+    } catch {
+        // 隐私模式下 localStorage 不可用，忽略
+    }
+    return DEFAULT_LAYOUT_MODE;
+}
+
+let currentLayoutMode: LayoutMode = readStoredLayoutMode();
+
+/** 当前布局模式：'tabs' 多标签页 / 'single' 单页 */
+export function getLayoutMode(): LayoutMode {
+    return currentLayoutMode;
+}
+
+/** 设置布局模式，持久化并广播 layoutChange 供管理布局重渲染 */
+export function setLayoutMode(mode: LayoutMode) {
+    if (!LAYOUT_MODES.includes(mode) || currentLayoutMode === mode) return;
+    currentLayoutMode = mode;
+    if (typeof window !== 'undefined') {
+        try {
+            localStorage.setItem(LAYOUT_MODE_KEY, mode);
+        } catch {
+            // 忽略
+        }
+    }
+    EventBus.emit('layoutChange', mode);
+}
+
+export function toggleLayoutMode(): LayoutMode {
+    const next: LayoutMode = currentLayoutMode === 'tabs' ? 'single' : 'tabs';
+    setLayoutMode(next);
+    return next;
+}
+
+/** 恢复默认布局（多标签页） */
+export function resetLayoutMode() {
+    setLayoutMode(DEFAULT_LAYOUT_MODE);
+}