@jiangood/open-admin 3.1.6 → 3.1.7

package/src/framework/config/themeConfig.ts

@@ -1,49 +1,401 @@
 import { theme } from 'antd';
 import type { ThemeConfig } from 'antd';
+import { EventBus } from '../utils/EventBus';
 
 const { getDesignToken } = theme;
 
+export type ThemeMode = 'light' | 'dark';
+
 export interface ThemeColors {
     colorPrimary?: string;
     colorSuccess?: string;
     colorWarning?: string;
     colorError?: string;
+    colorInfo?: string;
     colorBgLayout?: string;
+    /** 侧栏底色（深色系）；不设置时使用 antd 默认值 */
+    siderBg?: string;
+    /** 侧栏子菜单底色；缺省与 siderBg 相同 */
+    siderSubBg?: string;
+    /** 侧栏菜单项悬停底色；缺省 antd 默认（transparent） */
+    siderHoverBg?: string;
+    /** 侧栏折叠触发条底色；不设置时使用 antd 默认值 */
+    siderTriggerBg?: string;
+}
+
+export interface ThemePreset {
+    key: string;
+    name: string;
+    colors: ThemeColors;
 }
 
-export const DEFAULT_COLORS: Required<ThemeColors> = {
-    colorPrimary: '#1961AC',
+export type ThemeDensity = 'default' | 'compact';
+export type ThemeRadius = 'sharp' | 'default' | 'round';
+
+export interface ThemeDensityPreset {
+    key: ThemeDensity;
+    name: string;
+    /** 是否叠加 antd 紧凑算法 */
+    compact?: boolean;
+    /** 追加的 Seed/Map Token 覆盖 */
+    token?: Record<string, unknown>;
+}
+
+export interface ThemeRadiusPreset {
+    key: ThemeRadius;
+    name: string;
+    token: Record<string, unknown>;
+}
+
+/** 框架默认颜色，回归 antd 原生主题（不再覆盖主色） */
+export const DEFAULT_COLORS: ThemeColors = {
+    colorPrimary: '#1677ff',
     colorSuccess: '#52c41a',
     colorWarning: '#faad14',
     colorError: '#ff4d4f',
+    colorInfo: '#1677ff',
     colorBgLayout: '#f5f5f5',
 };
 
-let overrideColors: Partial<ThemeColors> | null = null;
+export const DEFAULT_PRESET_KEY = 'antd';
+
+/** 侧栏默认底色（预设未指定 siderBg 时的预览/回退值） */
+export const DEFAULT_SIDER_BG = '#001529';
+/** 侧栏折叠触发条默认底色 */
+export const DEFAULT_SIDER_TRIGGER_BG = '#002140';
+
+/** 界面密度预设：默认保持 antd 原生，紧凑叠加 compactAlgorithm */
+export const DENSITY_PRESETS: ThemeDensityPreset[] = [
+    { key: 'default', name: '默认' },
+    {
+        key: 'compact',
+        name: '紧凑',
+        compact: true,
+        token: { sizeUnit: 4, sizeStep: 4, controlHeight: 28, fontSize: 13 },
+    },
+];
+
+export const DEFAULT_DENSITY_KEY: ThemeDensity = 'default';
+
+/** 圆角预设：默认回归 antd 原生 6 */
+export const RADIUS_PRESETS: ThemeRadiusPreset[] = [
+    { key: 'default', name: '默认', token: { borderRadius: 6 } },
+    { key: 'sharp', name: '直角', token: { borderRadius: 0 } },
+    { key: 'round', name: '圆润', token: { borderRadius: 10 } },
+];
+
+export const DEFAULT_RADIUS_KEY: ThemeRadius = 'default';
+
+/** 可选主题预设；antd 预设不做任何颜色覆盖，保持 100% 原生观感 */
+export const THEME_PRESETS: ThemePreset[] = [
+    {
+        key: 'antd',
+        name: 'Ant Design 默认',
+        colors: {},
+    },
+    {
+        key: 'cyan',
+        name: '青碧',
+        colors: {
+            colorPrimary: '#13c2c2',
+            siderBg: '#0C2E2E',
+            siderSubBg: '#0C2E2E',
+            siderTriggerBg: '#082222',
+            siderHoverBg: 'rgba(255,255,255,0.06)',
+        },
+    },
+    {
+        key: 'green',
+        name: '翠竹',
+        colors: {
+            colorPrimary: '#389e0d',
+            siderBg: '#10291A',
+            siderSubBg: '#10291A',
+            siderTriggerBg: '#0B1E13',
+            siderHoverBg: 'rgba(255,255,255,0.06)',
+        },
+    },
+    {
+        key: 'purple',
+        name: '紫罗兰',
+        colors: {
+            colorPrimary: '#722ed1',
+            siderBg: '#1E1440',
+            siderSubBg: '#1E1440',
+            siderTriggerBg: '#170F31',
+            siderHoverBg: 'rgba(255,255,255,0.06)',
+        },
+    },
+    {
+        key: 'red',
+        name: '中国红',
+        colors: {
+            colorPrimary: '#cf1322',
+            siderBg: '#2A1418',
+            siderSubBg: '#2A1418',
+            siderTriggerBg: '#201014',
+            siderHoverBg: 'rgba(255,255,255,0.06)',
+        },
+    },
+    {
+        key: 'orange',
+        name: '暖橙',
+        colors: {
+            colorPrimary: '#d46b08',
+            siderBg: '#2A1D10',
+            siderSubBg: '#2A1D10',
+            siderTriggerBg: '#20160C',
+            siderHoverBg: 'rgba(255,255,255,0.06)',
+        },
+    },
+    {
+        key: 'graphite',
+        name: '石墨灰',
+        colors: {
+            colorPrimary: '#2f3542',
+            siderBg: '#1B2026',
+            siderSubBg: '#1B2026',
+            siderTriggerBg: '#141A20',
+            siderHoverBg: 'rgba(255,255,255,0.06)',
+        },
+    },
+];
+
+const THEME_MODE_KEY = 'oa-theme-mode';
+const THEME_PRESET_KEY = 'oa-theme-preset';
+const THEME_DENSITY_KEY = 'oa-theme-density';
+const THEME_RADIUS_KEY = 'oa-theme-radius';
+
+/** 业务侧传入的颜色基线（由 setThemeColors 设置） */
+let businessColors: Partial<ThemeColors> | null = null;
+/** 用户选择的预设 key（持久化到 localStorage） */
+let presetKey: string = readStoredPreset();
+let densityKey: ThemeDensity = readStoredDensity();
+let radiusKey: ThemeRadius = readStoredRadius();
+let currentMode: ThemeMode = readStoredMode();
 let cachedConfig: ThemeConfig | null = null;
+let cachedSiderConfig: ThemeConfig | null = null;
 let cachedToken: Record<string, unknown> | null = null;
 
+function readStoredMode(): ThemeMode {
+    if (typeof window === 'undefined') return 'light';
+    try {
+        return localStorage.getItem(THEME_MODE_KEY) === 'dark' ? 'dark' : 'light';
+    } catch {
+        return 'light';
+    }
+}
+
+function readStoredPreset(): string {
+    if (typeof window === 'undefined') return DEFAULT_PRESET_KEY;
+    try {
+        const key = localStorage.getItem(THEME_PRESET_KEY);
+        if (key && THEME_PRESETS.some(p => p.key === key)) return key;
+    } catch {
+        // 隐私模式下 localStorage 不可用，忽略
+    }
+    return DEFAULT_PRESET_KEY;
+}
+
+function persistPreset(key: string) {
+    if (typeof window === 'undefined') return;
+    try {
+        localStorage.setItem(THEME_PRESET_KEY, key);
+    } catch {
+        // 忽略
+    }
+}
+
+function readStoredDensity(): ThemeDensity {
+    if (typeof window === 'undefined') return DEFAULT_DENSITY_KEY;
+    try {
+        const key = localStorage.getItem(THEME_DENSITY_KEY);
+        if (key && DENSITY_PRESETS.some(p => p.key === key)) return key as ThemeDensity;
+    } catch {
+        // 隐私模式下 localStorage 不可用，忽略
+    }
+    return DEFAULT_DENSITY_KEY;
+}
+
+function readStoredRadius(): ThemeRadius {
+    if (typeof window === 'undefined') return DEFAULT_RADIUS_KEY;
+    try {
+        const key = localStorage.getItem(THEME_RADIUS_KEY);
+        if (key && RADIUS_PRESETS.some(p => p.key === key)) return key as ThemeRadius;
+    } catch {
+        // 隐私模式下 localStorage 不可用，忽略
+    }
+    return DEFAULT_RADIUS_KEY;
+}
+
+function writeStored(key: string, value: string) {
+    if (typeof window === 'undefined') return;
+    try {
+        localStorage.setItem(key, value);
+    } catch {
+        // 忽略
+    }
+}
+
+function getActiveDensity(): ThemeDensityPreset | undefined {
+    return DENSITY_PRESETS.find(p => p.key === densityKey);
+}
+
+function getActiveRadius(): ThemeRadiusPreset | undefined {
+    return RADIUS_PRESETS.find(p => p.key === radiusKey);
+}
+
+/** 尺寸维度 Token 合并：密度 ← 圆角（用户显式选择优先） */
+function getMergedSizeToken(): Record<string, unknown> {
+    return {
+        ...(getActiveDensity()?.token || {}),
+        ...(getActiveRadius()?.token || {}),
+    };
+}
+
+function getActivePreset(): ThemePreset | undefined {
+    return THEME_PRESETS.find(p => p.key === presetKey);
+}
+
+/** 合并优先级：antd 默认 ← 业务基线 ← 用户预设 */
+function getMergedColors(): ThemeColors {
+    return {
+        ...DEFAULT_COLORS,
+        ...(businessColors || {}),
+        ...(getActivePreset()?.colors || {}),
+    };
+}
+
+function hasExplicitBgLayout(): boolean {
+    return businessColors?.colorBgLayout != null || getActivePreset()?.colors.colorBgLayout != null;
+}
+
+function invalidate() {
+    cachedConfig = null;
+    cachedToken = null;
+    cachedSiderConfig = null;
+}
+
+function buildAlgorithm(): ThemeConfig['algorithm'] {
+    const algorithms = [currentMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm];
+    if (getActiveDensity()?.compact) {
+        algorithms.push(theme.compactAlgorithm);
+    }
+    return algorithms;
+}
+
 function buildConfig(): ThemeConfig {
-    const token: Record<string, unknown> = { borderRadius: 4, ...DEFAULT_COLORS, ...overrideColors };
+    const merged = getMergedColors();
+    const algorithm = buildAlgorithm();
+    const token: Record<string, unknown> = {
+        ...getMergedSizeToken(),
+        colorPrimary: merged.colorPrimary,
+        colorSuccess: merged.colorSuccess,
+        colorWarning: merged.colorWarning,
+        colorError: merged.colorError,
+        colorInfo: merged.colorInfo,
+    };
+    // colorBgLayout 仅浅色模式默认覆盖；暗色模式交给算法推导，避免被强制成浅灰。
+    // 业务/预设显式传入 colorBgLayout 时两种模式都尊重。
+    if (currentMode === 'light' || hasExplicitBgLayout()) {
+        token.colorBgLayout = merged.colorBgLayout;
+    }
+
+    const resolved = getDesignToken({ token, algorithm } as ThemeConfig);
     const components: Record<string, unknown> = {
-        Layout: { headerBg: 'white', triggerHeight: 32 },
+        // 顶栏用容器色，跟随明/暗主题
+        Layout: { headerBg: resolved.colorBgContainer, triggerHeight: 32 },
     };
 
-    return { token, components };
+    return { token, algorithm, components } as ThemeConfig;
+}
+
+/**
+ * 侧栏专用主题：单独套一层暗色算法，使分割线、边框、填充等按暗色派生，
+ * 避免浅色算法下色值不可见；同时按预设覆盖侧栏底色。
+ */
+export function getSiderThemeConfig(): ThemeConfig {
+    if (cachedSiderConfig) return cachedSiderConfig;
+
+    const merged = getMergedColors();
+    const token: Record<string, unknown> = {
+        ...getMergedSizeToken(),
+        colorPrimary: merged.colorPrimary,
+    };
+    const layout: Record<string, unknown> = {};
+    const menu: Record<string, unknown> = {
+        darkItemSelectedBg: merged.colorPrimary,
+    };
+
+    if (merged.siderBg) {
+        layout.siderBg = merged.siderBg;
+        menu.darkItemBg = merged.siderBg;
+        menu.darkSubMenuItemBg = merged.siderSubBg || merged.siderBg;
+        menu.darkItemHoverBg = merged.siderHoverBg || 'rgba(255,255,255,0.06)';
+    }
+    if (merged.siderTriggerBg) {
+        layout.triggerBg = merged.siderTriggerBg;
+    }
+
+    const siderAlgorithms = [theme.darkAlgorithm];
+    if (getActiveDensity()?.compact) {
+        siderAlgorithms.push(theme.compactAlgorithm);
+    }
+
+    cachedSiderConfig = {
+        algorithm: siderAlgorithms,
+        inherit: true,
+        token,
+        components: { Layout: layout, Menu: menu },
+    } as ThemeConfig;
+    return cachedSiderConfig;
+}
+
+function setVar(el: HTMLElement, name: string, value: unknown) {
+    if (value == null) return;
+    el.style.setProperty(name, String(value));
+}
+
+/** 像素类 Token 以数值返回（如 32），需补 px 后写入，避免 line-height 被当作倍数 */
+function setPxVar(el: HTMLElement, name: string, value: unknown) {
+    if (value == null) return;
+    const str = typeof value === 'number' ? `${value}px` : String(value);
+    el.style.setProperty(name, str);
 }
 
 function syncCssVars(token: Record<string, unknown>) {
     if (typeof document === 'undefined') return;
+    const merged = getMergedColors();
     const el = document.documentElement;
-    el.style.setProperty('--primary-color', token.colorPrimary);
-    el.style.setProperty('--primary-color-hover', token.colorPrimaryHover || token.colorPrimary);
+    setVar(el, '--primary-color', token.colorPrimary);
+    setVar(el, '--primary-color-hover', token.colorPrimaryHover || token.colorPrimary);
+    // 供 less 中替代硬编码颜色，使自定义样式跟随明/暗主题
+    setVar(el, '--oa-color-bg-container', token.colorBgContainer);
+    setVar(el, '--oa-color-bg-layout', token.colorBgLayout);
+    setVar(el, '--oa-color-border', token.colorBorderSecondary ?? token.colorBorder);
+    setVar(el, '--oa-color-text', token.colorText);
+    setVar(el, '--oa-color-text-secondary', token.colorTextSecondary);
+    setVar(el, '--oa-color-text-tertiary', token.colorTextTertiary);
+    setVar(el, '--oa-color-fill', token.colorFillTertiary);
+    setVar(el, '--oa-color-primary-bg', token.colorPrimaryBg);
+    setVar(el, '--oa-color-error', token.colorError);
+    // 尺寸/圆角变量，供 less 复用，使自定义样式跟随密度与圆角预设
+    setPxVar(el, '--oa-border-radius', token.borderRadius);
+    setPxVar(el, '--oa-control-height', token.controlHeight);
+    setPxVar(el, '--oa-font-size', token.fontSize);
+    // 侧栏相关变量
+    setVar(el, '--oa-sider-bg', merged.siderBg || DEFAULT_SIDER_BG);
+    setVar(el, '--oa-sider-text', 'rgba(255,255,255,0.85)');
+    setVar(el, '--oa-sider-hover-bg', merged.siderHoverBg || 'transparent');
+    setVar(el, '--oa-sider-trigger-bg', merged.siderTriggerBg || DEFAULT_SIDER_TRIGGER_BG);
+    el.dataset.oaTheme = currentMode;
+    el.style.colorScheme = currentMode;
 }
 
-/** 由 Layouts 在渲染前调用，传入业务侧颜色覆盖；不传则恢复默认主题 */
+/** 由 Layouts 在渲染前调用，传入业务侧颜色基线；不传则恢复 antd 默认主题 */
 export function setThemeColors(colors?: Partial<ThemeColors>) {
-    overrideColors = colors || null;
-    cachedConfig = null;
-    cachedToken = null;
+    businessColors = colors || null;
+    invalidate();
     syncCssVars(getToken());
 }
 
@@ -56,7 +408,90 @@ export function getThemeConfig(): ThemeConfig {
 
 export function getToken(): ThemeColors & Record<string, unknown> {
     if (!cachedToken) {
-        cachedToken = getDesignToken(getThemeConfig());
+        cachedToken = getDesignToken(getThemeConfig()) as unknown as Record<string, unknown>;
+    }
+    return cachedToken as ThemeColors & Record<string, unknown>;
+}
+
+export function getThemeMode(): ThemeMode {
+    return currentMode;
+}
+
+/** 应用预设主题色，持久化并广播 themeChange 供布局重渲染 */
+export function applyThemePreset(key: string) {
+    if (!THEME_PRESETS.some(p => p.key === key)) return;
+    presetKey = key;
+    persistPreset(key);
+    invalidate();
+    syncCssVars(getToken());
+    EventBus.emit('themeChange', currentMode);
+}
+
+export function getActivePresetKey(): string {
+    return presetKey;
+}
+
+/** 应用界面密度预设，持久化并广播 themeChange */
+export function applyDensityPreset(key: ThemeDensity) {
+    if (!DENSITY_PRESETS.some(p => p.key === key)) return;
+    densityKey = key;
+    writeStored(THEME_DENSITY_KEY, key);
+    invalidate();
+    syncCssVars(getToken());
+    EventBus.emit('themeChange', currentMode);
+}
+
+export function getActiveDensityKey(): ThemeDensity {
+    return densityKey;
+}
+
+/** 应用圆角预设，持久化并广播 themeChange */
+export function applyRadiusPreset(key: ThemeRadius) {
+    if (!RADIUS_PRESETS.some(p => p.key === key)) return;
+    radiusKey = key;
+    writeStored(THEME_RADIUS_KEY, key);
+    invalidate();
+    syncCssVars(getToken());
+    EventBus.emit('themeChange', currentMode);
+}
+
+export function getActiveRadiusKey(): ThemeRadius {
+    return radiusKey;
+}
+
+/** 恢复默认：颜色 / 密度 / 圆角 / 明暗 全部复位（不影响布局，布局由 resetAllSettings 统一处理） */
+export function resetUserTheme() {
+    presetKey = DEFAULT_PRESET_KEY;
+    densityKey = DEFAULT_DENSITY_KEY;
+    radiusKey = DEFAULT_RADIUS_KEY;
+    currentMode = 'light';
+    persistPreset(presetKey);
+    writeStored(THEME_DENSITY_KEY, densityKey);
+    writeStored(THEME_RADIUS_KEY, radiusKey);
+    writeStored(THEME_MODE_KEY, currentMode);
+    invalidate();
+    syncCssVars(getToken());
+    EventBus.emit('themeChange', currentMode);
+}
+
+/** 切换明/暗模式：清缓存、同步 CSS 变量并广播 themeChange 供布局重渲染 */
+export function setThemeMode(mode: ThemeMode) {
+    if (currentMode === mode) return;
+    currentMode = mode;
+    if (typeof window !== 'undefined') {
+        try {
+            localStorage.setItem(THEME_MODE_KEY, mode);
+        } catch {
+            // 隐私模式下 localStorage 不可用，忽略
+        }
     }
-    return cachedToken;
+    invalidate();
+    syncCssVars(getToken());
+    EventBus.emit('themeChange', mode);
+}
+
+export function toggleThemeMode(): ThemeMode {
+    const next: ThemeMode = currentMode === 'dark' ? 'light' : 'dark';
+    setThemeMode(next);
+    return next;
 }

package/src/framework/fields/FieldEditor/index.tsx

@@ -94,11 +94,11 @@ export class FieldEditor extends React.Component<FieldEditorProps, {loading: boo
                         alignItems: 'center',
                         justifyContent: 'center',
                         gap: 8,
-                        background: '#fff',
+                        background: 'var(--oa-color-bg-container, #fff)',
                         zIndex: 1,
                     }}>
                         <Spin/>
-                        <span style={{color: '#999'}}>编辑器加载中...</span>
+                        <span style={{color: 'var(--oa-color-text-tertiary, #999)'}}>编辑器加载中...</span>
                     </div>
                 )}
             </div>

package/src/framework/fields/FieldUploadFile/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import {message, Modal, Upload} from "antd";
+import {Modal, Upload} from "antd";
 import type {UploadChangeParam, UploadFile, UploadProps} from "antd";
 import { UploadOutlined } from "@ant-design/icons";
 import {ViewFile} from "../../views";
-import {ObjectUtils, UrlUtils} from "../../utils";
+import {getMessageApi, ObjectUtils, UrlUtils} from "../../utils";
 import type {FieldProps} from '../types';
 
 /** 框架内使用的上传文件对象，额外携带 sysFile 的 objectName */
@@ -110,7 +110,7 @@ export class FieldUploadFile extends React.Component<FieldUploadFileProps, Field
         }
 
         if (file.status === 'done' && rs?.success) {
-            message.success(`文件「${rs.data?.name || ''}」上传成功`);
+            getMessageApi().success(`文件「${rs.data?.name || ''}」上传成功`);
         }
 
         const newIds = this.convertComponentValueToOutput(fileList);

package/src/framework/fields/FieldUploadImage/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import {Button, Divider, Modal, Radio, Select, Space, Upload, message} from "antd";
+import {Button, Divider, Modal, Radio, Select, Space, Upload} from "antd";
 import {DeleteOutlined, EyeOutlined, PlusOutlined} from "@ant-design/icons";
 import Compressor from "compressorjs";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
-import {HttpClient, ObjectUtils, UrlUtils} from "../../utils";
+import {HttpClient, getMessageApi, ObjectUtils, UrlUtils} from "../../utils";
 import type {FieldProps} from '../types';
 
 export interface FieldUploadImageProps extends FieldProps<string> {
@@ -290,19 +290,19 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
             this.revokePreviewUrls();
             this.previewUrlsRef = [cUrl];
             this.setState({preview: {cUrl, cFile, cSize: cFile.size, cdims}, tool: undefined});
-            message.success(`已压缩：${cdims.width} x ${cdims.height} / ${formatSize(cFile.size)}`);
+            getMessageApi().success(`已压缩：${cdims.width} x ${cdims.height} / ${formatSize(cFile.size)}`);
         } catch {
-            message.error('压缩失败');
+            getMessageApi().error('压缩失败');
         }
     };
 
     private handleBeforeUpload = async (file: File) => {
         if (this.state.objectNames.length >= this.state.maxCount) {
-            message.warning('已达到最大上传数量');
+            getMessageApi().warning('已达到最大上传数量');
             return Upload.LIST_IGNORE;
         }
         if (!file.type.startsWith('image/')) {
-            message.error('请选择图片文件');
+            getMessageApi().error('请选择图片文件');
             return Upload.LIST_IGNORE;
         }
 
@@ -319,7 +319,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
             // 默认展示原图，不做压缩处理，用户可点击「压缩」按钮手动压缩
             await this.loadOriginalPreview(file, url, dims);
         } catch {
-            message.error('读取图片失败');
+            getMessageApi().error('读取图片失败');
             this.closeModal();
             return;
         }
@@ -370,7 +370,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
             );
             this.closeModal();
         } catch (e) {
-            message.error(HttpClient.errToMsg(e));
+            getMessageApi().error(HttpClient.errToMsg(e));
         } finally {
             this.setState({uploading: false});
         }
@@ -390,7 +390,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
         if (canvasImg?.url) {
             return <img src={canvasImg.url} style={{maxWidth: '100%', maxHeight: '100%'}} alt="预览"/>;
         }
-        return <div style={{color: '#999'}}>生成中...</div>;
+        return <div style={{color: 'var(--oa-color-text-tertiary, #999)'}}>生成中...</div>;
     };
 
     render() {
@@ -487,14 +487,14 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
                         <div style={{flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 12}}>
                             <div style={{
                                 flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                background: '#f5f5f5', borderRadius: 8, border: '1px dashed #d9d9d9', position: 'relative', overflow: 'hidden',
+                                background: 'var(--oa-color-fill, #f5f5f5)', borderRadius: 8, border: '1px dashed var(--oa-color-border, #d9d9d9)', position: 'relative', overflow: 'hidden',
                             }}>
                                 {this.renderCanvas(preview, canvasImg, originalUrl)}
                             </div>
                         </div>
 
                         {/* 右侧属性栏 */}
-                        <div style={{width: 240, flexShrink: 0, borderLeft: '1px solid #f0f0f0', paddingLeft: 16, display: 'flex', flexDirection: 'column', overflow: 'hidden'}}>
+                        <div style={{width: 240, flexShrink: 0, borderLeft: '1px solid var(--oa-color-border, #f0f0f0)', paddingLeft: 16, display: 'flex', flexDirection: 'column', overflow: 'hidden'}}>
                             <div style={{flex: 1, overflowY: 'auto'}}>
                                 {/* 工具栏（横排） */}
                                 {tool !== 'crop' && (
@@ -520,14 +520,14 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
                                         >
                                             {CROP_RATIOS.map((r) => (
                                                 <Radio key={r.ratio ? `${r.ratio.width}:${r.ratio.height}` : 'free'} value={r.ratio ? `${r.ratio.width}:${r.ratio.height}` : 'free'}>
-                                                    {r.label}{r.desc ? <span style={{color: '#999', fontSize: 12}}>（{r.desc}）</span> : null}
+                                                    {r.label}{r.desc ? <span style={{color: 'var(--oa-color-text-tertiary, #999)', fontSize: 12}}>（{r.desc}）</span> : null}
                                                 </Radio>
                                             ))}
                                         </Radio.Group>
                                 ) : (
                                     <>
                                         {canvasImg && (
-                                            <div style={{color: '#666'}}>
+                                            <div style={{color: 'var(--oa-color-text-secondary, #666)'}}>
                                                 <div>尺寸：{canvasImg.dims ? `${canvasImg.dims.width} x ${canvasImg.dims.height}` : '--'}</div>
                                                 <div>体积：{formatSize(canvasImg.size)}</div>
                                             </div>
@@ -537,7 +537,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
                                         <Divider style={{margin: '12px 0'}}/>
                                         <div style={{fontWeight: 600, marginBottom: 8}}>压缩处理</div>
                                         <div style={{marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8}}>
-                                            <span style={{color: '#666', flexShrink: 0}}>最大宽度</span>
+                                            <span style={{color: 'var(--oa-color-text-secondary, #666)', flexShrink: 0}}>最大宽度</span>
                                             <Select
                                                 value={compressWidth}
                                                 onChange={(v) => this.setState({compressWidth: v})}
@@ -555,7 +555,7 @@ export class FieldUploadImage extends React.Component<FieldUploadImageProps, Fie
                                             />
                                         </div>
                                         <div style={{marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8}}>
-                                            <span style={{color: '#666', flexShrink: 0}}>最大体积</span>
+                                            <span style={{color: 'var(--oa-color-text-secondary, #666)', flexShrink: 0}}>最大体积</span>
                                             <Select
                                                 value={compressSize}
                                                 onChange={(v) => this.setState({compressSize: v})}