openxiangda 2.0.0-alpha.63 → 2.0.0-alpha.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -21
- package/dist/browser/OpenXiangdaAdminPage.d.ts +2 -1
- package/dist/browser/OpenXiangdaAdminPage.d.ts.map +1 -1
- package/dist/browser/OpenXiangdaAdminPage.js +2 -1
- package/dist/browser/OpenXiangdaAdminPage.js.map +1 -1
- package/dist/browser/appearance.d.ts +4 -69
- package/dist/browser/appearance.d.ts.map +1 -1
- package/dist/browser/appearance.js +17 -230
- package/dist/browser/appearance.js.map +1 -1
- package/dist/browser/styles.css +243 -242
- package/package.json +7 -7
- package/skills/openxiangda-v2/SKILL.md +3 -3
- package/skills/openxiangda-v2/references/workspace.md +19 -0
package/README.md
CHANGED
|
@@ -16,23 +16,30 @@ version line and is not a compatibility target for this package.
|
|
|
16
16
|
## Admin theme contract
|
|
17
17
|
|
|
18
18
|
`OpenXiangdaApplication` owns the admin appearance provider. Application pages
|
|
19
|
-
must not add another theme provider or hard-code structural
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
must not add another theme provider or hard-code structural colors. Ant Design
|
|
20
|
+
components inherit the platform theme automatically. The provider selects
|
|
21
|
+
Ant Design's `defaultAlgorithm` or `darkAlgorithm` and emits CSS variables with
|
|
22
|
+
the `oxa-antd` prefix. Wrap bespoke admin content in `OpenXiangdaAdminPage` and
|
|
23
|
+
consume Ant Design tokens directly:
|
|
24
24
|
|
|
25
25
|
```tsx
|
|
26
|
-
import {
|
|
27
|
-
|
|
28
|
-
useOpenXiangdaTheme,
|
|
29
|
-
} from 'openxiangda/react';
|
|
26
|
+
import { theme } from 'antd';
|
|
27
|
+
import { OpenXiangdaAdminPage } from 'openxiangda/react';
|
|
30
28
|
|
|
31
29
|
export function CapacityPage() {
|
|
32
|
-
const {
|
|
30
|
+
const { token } = theme.useToken();
|
|
33
31
|
return (
|
|
34
|
-
<OpenXiangdaAdminPage
|
|
35
|
-
|
|
32
|
+
<OpenXiangdaAdminPage
|
|
33
|
+
className="capacity-page"
|
|
34
|
+
style={{
|
|
35
|
+
padding: token.paddingLG,
|
|
36
|
+
borderRadius: token.borderRadiusLG,
|
|
37
|
+
background: token.colorBgContainer,
|
|
38
|
+
color: token.colorText,
|
|
39
|
+
boxShadow: token.boxShadowTertiary,
|
|
40
|
+
}}
|
|
41
|
+
>
|
|
42
|
+
<Chart color={token.colorPrimary} />
|
|
36
43
|
</OpenXiangdaAdminPage>
|
|
37
44
|
);
|
|
38
45
|
}
|
|
@@ -40,18 +47,29 @@ export function CapacityPage() {
|
|
|
40
47
|
|
|
41
48
|
```css
|
|
42
49
|
.capacity-panel {
|
|
43
|
-
border: 1px solid var(--oxa-color-border);
|
|
44
|
-
background: var(--oxa-color-
|
|
45
|
-
color: var(--oxa-color-text);
|
|
46
|
-
box-shadow: var(--oxa-shadow-
|
|
50
|
+
border: 1px solid var(--oxa-antd-color-border-secondary);
|
|
51
|
+
background: var(--oxa-antd-color-bg-container);
|
|
52
|
+
color: var(--oxa-antd-color-text);
|
|
53
|
+
box-shadow: var(--oxa-antd-box-shadow-tertiary);
|
|
47
54
|
}
|
|
48
55
|
|
|
49
56
|
.capacity-panel__hint {
|
|
50
|
-
color: var(--oxa-color-text-secondary);
|
|
57
|
+
color: var(--oxa-antd-color-text-secondary);
|
|
58
|
+
font-size: var(--oxa-antd-font-size-sm);
|
|
59
|
+
line-height: var(--oxa-antd-line-height);
|
|
60
|
+
margin-block: var(--oxa-antd-margin-sm);
|
|
61
|
+
transition: color var(--oxa-antd-motion-duration-mid)
|
|
62
|
+
var(--oxa-antd-motion-ease-in-out);
|
|
51
63
|
}
|
|
52
64
|
```
|
|
53
65
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
66
|
+
`Seed Token` is owned by the platform, `Map Token` is generated by the selected
|
|
67
|
+
Ant Design algorithm, and application code consumes `Alias Token` values through
|
|
68
|
+
`theme.useToken()` or generated `--oxa-antd-*` CSS variables. This includes
|
|
69
|
+
spacing, typography, motion, shadows, z-index, responsive breakpoints, and
|
|
70
|
+
component dimensions—not only colors. Do not add `--oxa-color-*`, `--oxa-shell-*`,
|
|
71
|
+
page-local theme stores or fixed white/black/neutral structural colors. Brand
|
|
72
|
+
colors may describe brand or categorical data; they must not be used as admin
|
|
73
|
+
page backgrounds, neutral text, or structural borders. Future theme palettes
|
|
74
|
+
extend the platform's centralized Ant Design seed configuration, never
|
|
75
|
+
application CSS or arbitrary user input.
|
|
@@ -5,7 +5,8 @@ export interface OpenXiangdaAdminPageProps extends Omit<HTMLAttributes<HTMLEleme
|
|
|
5
5
|
/**
|
|
6
6
|
* Semantic root for application-defined pages rendered inside the platform
|
|
7
7
|
* admin Shell. Ant Design components inherit the platform ConfigProvider;
|
|
8
|
-
* bespoke CSS should consume
|
|
8
|
+
* bespoke CSS should consume Ant Design CSS variables generated by the
|
|
9
|
+
* platform ConfigProvider (the current prefix is --oxa-antd-*).
|
|
9
10
|
*/
|
|
10
11
|
export declare function OpenXiangdaAdminPage({ children, className, ...props }: OpenXiangdaAdminPageProps): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
//# sourceMappingURL=OpenXiangdaAdminPage.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenXiangdaAdminPage.d.ts","sourceRoot":"","sources":["../../src/browser/OpenXiangdaAdminPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED
|
|
1
|
+
{"version":3,"file":"OpenXiangdaAdminPage.d.ts","sourceRoot":"","sources":["../../src/browser/OpenXiangdaAdminPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAO3B"}
|
|
@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
/**
|
|
3
3
|
* Semantic root for application-defined pages rendered inside the platform
|
|
4
4
|
* admin Shell. Ant Design components inherit the platform ConfigProvider;
|
|
5
|
-
* bespoke CSS should consume
|
|
5
|
+
* bespoke CSS should consume Ant Design CSS variables generated by the
|
|
6
|
+
* platform ConfigProvider (the current prefix is --oxa-antd-*).
|
|
6
7
|
*/
|
|
7
8
|
export function OpenXiangdaAdminPage({ children, className, ...props }) {
|
|
8
9
|
const classes = ['oxa-admin-page', className].filter(Boolean).join(' ');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenXiangdaAdminPage.js","sourceRoot":"","sources":["../../src/browser/OpenXiangdaAdminPage.tsx"],"names":[],"mappings":";AAOA
|
|
1
|
+
{"version":3,"file":"OpenXiangdaAdminPage.js","sourceRoot":"","sources":["../../src/browser/OpenXiangdaAdminPage.tsx"],"names":[],"mappings":";AAOA;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACkB;IAC1B,MAAM,OAAO,GAAG,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,OAAO,CACL,qBAAa,KAAK,EAAE,SAAS,EAAE,OAAO,YACnC,QAAQ,GACD,CACX,CAAC;AACJ,CAAC"}
|
|
@@ -2,70 +2,10 @@ import { type ThemeConfig } from 'antd';
|
|
|
2
2
|
import { type ReactNode } from 'react';
|
|
3
3
|
export type AppearancePreference = 'system' | 'light' | 'dark';
|
|
4
4
|
export type EffectiveAppearance = 'light' | 'dark';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
surfaceSubtle: string;
|
|
10
|
-
surfaceHover: string;
|
|
11
|
-
border: string;
|
|
12
|
-
borderStrong: string;
|
|
13
|
-
text: string;
|
|
14
|
-
textSecondary: string;
|
|
15
|
-
textTertiary: string;
|
|
16
|
-
textDisabled: string;
|
|
17
|
-
textOnPrimary: string;
|
|
18
|
-
primary: string;
|
|
19
|
-
primarySurface: string;
|
|
20
|
-
primaryBorder: string;
|
|
21
|
-
success: string;
|
|
22
|
-
successSurface: string;
|
|
23
|
-
successBorder: string;
|
|
24
|
-
warning: string;
|
|
25
|
-
warningSurface: string;
|
|
26
|
-
warningBorder: string;
|
|
27
|
-
error: string;
|
|
28
|
-
errorSurface: string;
|
|
29
|
-
errorBorder: string;
|
|
30
|
-
info: string;
|
|
31
|
-
infoSurface: string;
|
|
32
|
-
infoBorder: string;
|
|
33
|
-
mask: string;
|
|
34
|
-
shadow: string;
|
|
35
|
-
radius: number;
|
|
36
|
-
}
|
|
37
|
-
export declare const OPENXIANGDA_THEME_CSS_VARIABLES: {
|
|
38
|
-
readonly canvas: "--oxa-color-canvas";
|
|
39
|
-
readonly surface: "--oxa-color-surface";
|
|
40
|
-
readonly surfaceElevated: "--oxa-color-surface-elevated";
|
|
41
|
-
readonly surfaceSubtle: "--oxa-color-surface-subtle";
|
|
42
|
-
readonly surfaceHover: "--oxa-color-surface-hover";
|
|
43
|
-
readonly border: "--oxa-color-border";
|
|
44
|
-
readonly borderStrong: "--oxa-color-border-strong";
|
|
45
|
-
readonly text: "--oxa-color-text";
|
|
46
|
-
readonly textSecondary: "--oxa-color-text-secondary";
|
|
47
|
-
readonly textTertiary: "--oxa-color-text-tertiary";
|
|
48
|
-
readonly textDisabled: "--oxa-color-text-disabled";
|
|
49
|
-
readonly textOnPrimary: "--oxa-color-text-on-primary";
|
|
50
|
-
readonly primary: "--oxa-color-primary";
|
|
51
|
-
readonly primarySurface: "--oxa-color-primary-surface";
|
|
52
|
-
readonly primaryBorder: "--oxa-color-primary-border";
|
|
53
|
-
readonly success: "--oxa-color-success";
|
|
54
|
-
readonly successSurface: "--oxa-color-success-surface";
|
|
55
|
-
readonly successBorder: "--oxa-color-success-border";
|
|
56
|
-
readonly warning: "--oxa-color-warning";
|
|
57
|
-
readonly warningSurface: "--oxa-color-warning-surface";
|
|
58
|
-
readonly warningBorder: "--oxa-color-warning-border";
|
|
59
|
-
readonly error: "--oxa-color-error";
|
|
60
|
-
readonly errorSurface: "--oxa-color-error-surface";
|
|
61
|
-
readonly errorBorder: "--oxa-color-error-border";
|
|
62
|
-
readonly info: "--oxa-color-info";
|
|
63
|
-
readonly infoSurface: "--oxa-color-info-surface";
|
|
64
|
-
readonly infoBorder: "--oxa-color-info-border";
|
|
65
|
-
readonly mask: "--oxa-color-mask";
|
|
66
|
-
readonly shadow: "--oxa-shadow-surface";
|
|
67
|
-
readonly radius: "--oxa-radius-surface";
|
|
68
|
-
};
|
|
5
|
+
/**
|
|
6
|
+
* The only OpenXiangda theme factory. Colors are generated by Ant Design's
|
|
7
|
+
* default/dark algorithm; applications must not pass a second token palette.
|
|
8
|
+
*/
|
|
69
9
|
export declare function createOpenXiangdaTheme(appearance: EffectiveAppearance): ThemeConfig;
|
|
70
10
|
export declare function AppearanceProvider({ children }: {
|
|
71
11
|
children: ReactNode;
|
|
@@ -75,9 +15,4 @@ export declare function useAppearance(): {
|
|
|
75
15
|
effectiveAppearance: EffectiveAppearance;
|
|
76
16
|
setPreference: (value: AppearancePreference) => void;
|
|
77
17
|
};
|
|
78
|
-
export declare function useOpenXiangdaTheme(): {
|
|
79
|
-
preference: AppearancePreference;
|
|
80
|
-
effectiveAppearance: EffectiveAppearance;
|
|
81
|
-
tokens: OpenXiangdaThemeTokens;
|
|
82
|
-
};
|
|
83
18
|
//# sourceMappingURL=appearance.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/browser/appearance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,MAAM,CAAC;AAEd,OAAO,
|
|
1
|
+
{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/browser/appearance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,MAAM,CAAC;AAEd,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC/D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAC;AA0BnD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,mBAAmB,GAC9B,WAAW,CAkBb;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CA+CvE;AAED,wBAAgB,aAAa;gBA/Ff,oBAAoB;yBACX,mBAAmB;mBACzB,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI;EAiGrD"}
|
|
@@ -1,60 +1,9 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { App as AntdApp, ConfigProvider, theme as antdTheme, } from 'antd';
|
|
3
3
|
import zhCN from 'antd/locale/zh_CN';
|
|
4
|
-
import { createContext, useContext, useEffect,
|
|
5
|
-
export const OPENXIANGDA_THEME_CSS_VARIABLES = {
|
|
6
|
-
canvas: '--oxa-color-canvas',
|
|
7
|
-
surface: '--oxa-color-surface',
|
|
8
|
-
surfaceElevated: '--oxa-color-surface-elevated',
|
|
9
|
-
surfaceSubtle: '--oxa-color-surface-subtle',
|
|
10
|
-
surfaceHover: '--oxa-color-surface-hover',
|
|
11
|
-
border: '--oxa-color-border',
|
|
12
|
-
borderStrong: '--oxa-color-border-strong',
|
|
13
|
-
text: '--oxa-color-text',
|
|
14
|
-
textSecondary: '--oxa-color-text-secondary',
|
|
15
|
-
textTertiary: '--oxa-color-text-tertiary',
|
|
16
|
-
textDisabled: '--oxa-color-text-disabled',
|
|
17
|
-
textOnPrimary: '--oxa-color-text-on-primary',
|
|
18
|
-
primary: '--oxa-color-primary',
|
|
19
|
-
primarySurface: '--oxa-color-primary-surface',
|
|
20
|
-
primaryBorder: '--oxa-color-primary-border',
|
|
21
|
-
success: '--oxa-color-success',
|
|
22
|
-
successSurface: '--oxa-color-success-surface',
|
|
23
|
-
successBorder: '--oxa-color-success-border',
|
|
24
|
-
warning: '--oxa-color-warning',
|
|
25
|
-
warningSurface: '--oxa-color-warning-surface',
|
|
26
|
-
warningBorder: '--oxa-color-warning-border',
|
|
27
|
-
error: '--oxa-color-error',
|
|
28
|
-
errorSurface: '--oxa-color-error-surface',
|
|
29
|
-
errorBorder: '--oxa-color-error-border',
|
|
30
|
-
info: '--oxa-color-info',
|
|
31
|
-
infoSurface: '--oxa-color-info-surface',
|
|
32
|
-
infoBorder: '--oxa-color-info-border',
|
|
33
|
-
mask: '--oxa-color-mask',
|
|
34
|
-
shadow: '--oxa-shadow-surface',
|
|
35
|
-
radius: '--oxa-radius-surface',
|
|
36
|
-
};
|
|
37
|
-
const DARK_PALETTE = {
|
|
38
|
-
canvas: '#0b1524',
|
|
39
|
-
surface: '#111d2e',
|
|
40
|
-
surfaceElevated: '#18263a',
|
|
41
|
-
surfaceSubtle: '#1b293d',
|
|
42
|
-
surfaceHover: '#22324a',
|
|
43
|
-
border: '#26374f',
|
|
44
|
-
borderStrong: '#364a65',
|
|
45
|
-
text: '#d7e0ec',
|
|
46
|
-
textSecondary: '#a7b3c4',
|
|
47
|
-
textTertiary: '#7f8da2',
|
|
48
|
-
textDisabled: '#59687c',
|
|
49
|
-
primary: '#4c8dff',
|
|
50
|
-
primarySurface: '#17345a',
|
|
51
|
-
primaryBorder: '#315f98',
|
|
52
|
-
success: '#45c993',
|
|
53
|
-
warning: '#e4b858',
|
|
54
|
-
error: '#ee7b84',
|
|
55
|
-
info: '#6ba6ff',
|
|
56
|
-
};
|
|
4
|
+
import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
|
|
57
5
|
const STORAGE_KEY = 'openxiangda.admin.appearance';
|
|
6
|
+
const CSS_VARIABLE_PREFIX = 'oxa-antd';
|
|
58
7
|
const AppearanceContext = createContext(null);
|
|
59
8
|
function storedPreference() {
|
|
60
9
|
try {
|
|
@@ -70,184 +19,28 @@ function storedPreference() {
|
|
|
70
19
|
function systemPrefersDark() {
|
|
71
20
|
return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
|
|
72
21
|
}
|
|
22
|
+
/**
|
|
23
|
+
* The only OpenXiangda theme factory. Colors are generated by Ant Design's
|
|
24
|
+
* default/dark algorithm; applications must not pass a second token palette.
|
|
25
|
+
*/
|
|
73
26
|
export function createOpenXiangdaTheme(appearance) {
|
|
74
|
-
const dark = appearance === 'dark';
|
|
75
27
|
return {
|
|
76
|
-
algorithm:
|
|
77
|
-
|
|
28
|
+
algorithm: appearance === 'dark'
|
|
29
|
+
? antdTheme.darkAlgorithm
|
|
30
|
+
: antdTheme.defaultAlgorithm,
|
|
31
|
+
cssVar: { key: appearance, prefix: CSS_VARIABLE_PREFIX },
|
|
78
32
|
token: {
|
|
33
|
+
colorPrimary: '#1677ff',
|
|
79
34
|
borderRadius: 6,
|
|
80
|
-
colorPrimary: dark ? DARK_PALETTE.primary : '#1677ff',
|
|
81
35
|
fontSize: 14,
|
|
82
|
-
...(dark
|
|
83
|
-
? {
|
|
84
|
-
colorBgBase: DARK_PALETTE.canvas,
|
|
85
|
-
colorBgLayout: DARK_PALETTE.canvas,
|
|
86
|
-
colorBgContainer: DARK_PALETTE.surface,
|
|
87
|
-
colorBgElevated: DARK_PALETTE.surfaceElevated,
|
|
88
|
-
colorFillAlter: DARK_PALETTE.surfaceSubtle,
|
|
89
|
-
colorFillSecondary: DARK_PALETTE.surfaceHover,
|
|
90
|
-
colorBorderSecondary: DARK_PALETTE.border,
|
|
91
|
-
colorBorder: DARK_PALETTE.borderStrong,
|
|
92
|
-
colorTextBase: DARK_PALETTE.text,
|
|
93
|
-
colorText: DARK_PALETTE.text,
|
|
94
|
-
colorTextSecondary: DARK_PALETTE.textSecondary,
|
|
95
|
-
colorTextTertiary: DARK_PALETTE.textTertiary,
|
|
96
|
-
colorTextDisabled: DARK_PALETTE.textDisabled,
|
|
97
|
-
colorPrimaryBg: DARK_PALETTE.primarySurface,
|
|
98
|
-
colorPrimaryBorder: DARK_PALETTE.primaryBorder,
|
|
99
|
-
colorSuccess: DARK_PALETTE.success,
|
|
100
|
-
colorWarning: DARK_PALETTE.warning,
|
|
101
|
-
colorError: DARK_PALETTE.error,
|
|
102
|
-
colorInfo: DARK_PALETTE.info,
|
|
103
|
-
colorBgMask: 'rgb(3 8 20 / 72%)',
|
|
104
|
-
boxShadow: '0 12px 36px rgb(2 8 23 / 34%)',
|
|
105
|
-
boxShadowSecondary: '0 8px 24px rgb(2 8 23 / 28%)',
|
|
106
|
-
boxShadowTertiary: '0 3px 12px rgb(2 8 23 / 22%)',
|
|
107
|
-
}
|
|
108
|
-
: {}),
|
|
109
36
|
},
|
|
110
37
|
components: {
|
|
111
|
-
Card: {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
? {
|
|
115
|
-
actionsBg: DARK_PALETTE.surface,
|
|
116
|
-
headerBg: DARK_PALETTE.surface,
|
|
117
|
-
extraColor: DARK_PALETTE.textSecondary,
|
|
118
|
-
}
|
|
119
|
-
: {}),
|
|
120
|
-
},
|
|
121
|
-
Layout: {
|
|
122
|
-
headerHeight: 52,
|
|
123
|
-
...(dark
|
|
124
|
-
? {
|
|
125
|
-
bodyBg: DARK_PALETTE.canvas,
|
|
126
|
-
footerBg: DARK_PALETTE.canvas,
|
|
127
|
-
headerBg: DARK_PALETTE.surface,
|
|
128
|
-
headerColor: DARK_PALETTE.text,
|
|
129
|
-
lightSiderBg: DARK_PALETTE.surface,
|
|
130
|
-
lightTriggerBg: DARK_PALETTE.surfaceSubtle,
|
|
131
|
-
lightTriggerColor: DARK_PALETTE.textSecondary,
|
|
132
|
-
siderBg: DARK_PALETTE.surface,
|
|
133
|
-
triggerBg: DARK_PALETTE.surfaceSubtle,
|
|
134
|
-
triggerColor: DARK_PALETTE.textSecondary,
|
|
135
|
-
}
|
|
136
|
-
: {}),
|
|
137
|
-
},
|
|
138
|
-
Menu: {
|
|
139
|
-
itemBorderRadius: 6,
|
|
140
|
-
itemHeight: 40,
|
|
141
|
-
...(dark
|
|
142
|
-
? {
|
|
143
|
-
darkItemBg: DARK_PALETTE.surface,
|
|
144
|
-
darkSubMenuItemBg: DARK_PALETTE.canvas,
|
|
145
|
-
darkItemColor: DARK_PALETTE.textSecondary,
|
|
146
|
-
darkItemHoverBg: DARK_PALETTE.surfaceHover,
|
|
147
|
-
darkItemHoverColor: DARK_PALETTE.text,
|
|
148
|
-
darkItemSelectedBg: DARK_PALETTE.primarySurface,
|
|
149
|
-
darkItemSelectedColor: '#dce9ff',
|
|
150
|
-
darkPopupBg: DARK_PALETTE.surfaceElevated,
|
|
151
|
-
}
|
|
152
|
-
: {}),
|
|
153
|
-
},
|
|
154
|
-
Table: dark
|
|
155
|
-
? {
|
|
156
|
-
borderColor: DARK_PALETTE.border,
|
|
157
|
-
footerBg: DARK_PALETTE.surface,
|
|
158
|
-
headerBg: DARK_PALETTE.surfaceSubtle,
|
|
159
|
-
headerColor: DARK_PALETTE.textSecondary,
|
|
160
|
-
rowHoverBg: DARK_PALETTE.surfaceHover,
|
|
161
|
-
rowSelectedBg: DARK_PALETTE.primarySurface,
|
|
162
|
-
rowSelectedHoverBg: '#1c3e68',
|
|
163
|
-
}
|
|
164
|
-
: {},
|
|
165
|
-
Tabs: dark
|
|
166
|
-
? {
|
|
167
|
-
cardBg: DARK_PALETTE.surfaceSubtle,
|
|
168
|
-
itemColor: DARK_PALETTE.textSecondary,
|
|
169
|
-
itemHoverColor: DARK_PALETTE.text,
|
|
170
|
-
itemSelectedColor: DARK_PALETTE.primary,
|
|
171
|
-
}
|
|
172
|
-
: {},
|
|
38
|
+
Card: { headerFontSize: 16 },
|
|
39
|
+
Layout: { headerHeight: 52 },
|
|
40
|
+
Menu: { itemBorderRadius: 6, itemHeight: 40 },
|
|
173
41
|
},
|
|
174
42
|
};
|
|
175
43
|
}
|
|
176
|
-
function openXiangdaThemeTokens(token) {
|
|
177
|
-
return {
|
|
178
|
-
canvas: token.colorBgLayout,
|
|
179
|
-
surface: token.colorBgContainer,
|
|
180
|
-
surfaceElevated: token.colorBgElevated,
|
|
181
|
-
surfaceSubtle: token.colorFillAlter,
|
|
182
|
-
surfaceHover: token.colorFillSecondary,
|
|
183
|
-
border: token.colorBorderSecondary,
|
|
184
|
-
borderStrong: token.colorBorder,
|
|
185
|
-
text: token.colorText,
|
|
186
|
-
textSecondary: token.colorTextSecondary,
|
|
187
|
-
textTertiary: token.colorTextTertiary,
|
|
188
|
-
textDisabled: token.colorTextDisabled,
|
|
189
|
-
textOnPrimary: token.colorTextLightSolid,
|
|
190
|
-
primary: token.colorPrimary,
|
|
191
|
-
primarySurface: token.colorPrimaryBg,
|
|
192
|
-
primaryBorder: token.colorPrimaryBorder,
|
|
193
|
-
success: token.colorSuccess,
|
|
194
|
-
successSurface: token.colorSuccessBg,
|
|
195
|
-
successBorder: token.colorSuccessBorder,
|
|
196
|
-
warning: token.colorWarning,
|
|
197
|
-
warningSurface: token.colorWarningBg,
|
|
198
|
-
warningBorder: token.colorWarningBorder,
|
|
199
|
-
error: token.colorError,
|
|
200
|
-
errorSurface: token.colorErrorBg,
|
|
201
|
-
errorBorder: token.colorErrorBorder,
|
|
202
|
-
info: token.colorInfo,
|
|
203
|
-
infoSurface: token.colorInfoBg,
|
|
204
|
-
infoBorder: token.colorInfoBorder,
|
|
205
|
-
mask: token.colorBgMask,
|
|
206
|
-
shadow: token.boxShadowTertiary,
|
|
207
|
-
radius: token.borderRadius,
|
|
208
|
-
};
|
|
209
|
-
}
|
|
210
|
-
function PlatformThemeCssVariables() {
|
|
211
|
-
const { token } = antdTheme.useToken();
|
|
212
|
-
useLayoutEffect(() => {
|
|
213
|
-
const root = document.documentElement;
|
|
214
|
-
const semanticTokens = openXiangdaThemeTokens(token);
|
|
215
|
-
const publicVariables = Object.entries(OPENXIANGDA_THEME_CSS_VARIABLES).map(([key, name]) => {
|
|
216
|
-
const value = semanticTokens[key];
|
|
217
|
-
return [name, key === 'radius' ? `${value}px` : String(value)];
|
|
218
|
-
});
|
|
219
|
-
const internalAliases = {
|
|
220
|
-
'--oxa-shell-bg': token.colorBgLayout,
|
|
221
|
-
'--oxa-shell-surface': token.colorBgContainer,
|
|
222
|
-
'--oxa-shell-elevated': token.colorBgElevated,
|
|
223
|
-
'--oxa-shell-subtle': token.colorFillAlter,
|
|
224
|
-
'--oxa-shell-hover': token.colorFillSecondary,
|
|
225
|
-
'--oxa-shell-border': token.colorBorderSecondary,
|
|
226
|
-
'--oxa-shell-border-strong': token.colorBorder,
|
|
227
|
-
'--oxa-shell-text': token.colorText,
|
|
228
|
-
'--oxa-shell-text-secondary': token.colorTextSecondary,
|
|
229
|
-
'--oxa-shell-text-tertiary': token.colorTextTertiary,
|
|
230
|
-
'--oxa-shell-text-disabled': token.colorTextDisabled,
|
|
231
|
-
'--oxa-shell-primary': token.colorPrimary,
|
|
232
|
-
'--oxa-shell-primary-bg': token.colorPrimaryBg,
|
|
233
|
-
'--oxa-shell-primary-border': token.colorPrimaryBorder,
|
|
234
|
-
'--oxa-shell-error': token.colorError,
|
|
235
|
-
'--oxa-shell-error-bg': token.colorErrorBg,
|
|
236
|
-
'--oxa-shell-error-border': token.colorErrorBorder,
|
|
237
|
-
'--oxa-shell-mask': token.colorBgMask,
|
|
238
|
-
'--oxa-shell-shadow': token.boxShadowTertiary,
|
|
239
|
-
};
|
|
240
|
-
const variables = [...publicVariables, ...Object.entries(internalAliases)];
|
|
241
|
-
for (const [name, value] of variables) {
|
|
242
|
-
root.style.setProperty(name, value);
|
|
243
|
-
}
|
|
244
|
-
return () => {
|
|
245
|
-
for (const [name] of variables)
|
|
246
|
-
root.style.removeProperty(name);
|
|
247
|
-
};
|
|
248
|
-
}, [token]);
|
|
249
|
-
return null;
|
|
250
|
-
}
|
|
251
44
|
export function AppearanceProvider({ children }) {
|
|
252
45
|
const [preference, setPreferenceState] = useState(storedPreference);
|
|
253
46
|
const [systemDark, setSystemDark] = useState(systemPrefersDark);
|
|
@@ -258,7 +51,7 @@ export function AppearanceProvider({ children }) {
|
|
|
258
51
|
return () => query.removeEventListener('change', onChange);
|
|
259
52
|
}, []);
|
|
260
53
|
const effectiveAppearance = preference === 'system' ? (systemDark ? 'dark' : 'light') : preference;
|
|
261
|
-
|
|
54
|
+
useEffect(() => {
|
|
262
55
|
document.documentElement.dataset.oxaTheme = effectiveAppearance;
|
|
263
56
|
document.documentElement.style.colorScheme = effectiveAppearance;
|
|
264
57
|
}, [effectiveAppearance]);
|
|
@@ -273,7 +66,7 @@ export function AppearanceProvider({ children }) {
|
|
|
273
66
|
};
|
|
274
67
|
const theme = useMemo(() => createOpenXiangdaTheme(effectiveAppearance), [effectiveAppearance]);
|
|
275
68
|
const value = useMemo(() => ({ preference, effectiveAppearance, setPreference }), [effectiveAppearance, preference]);
|
|
276
|
-
return (_jsx(AppearanceContext.Provider, { value: value, children: _jsx(ConfigProvider, { componentSize: "
|
|
69
|
+
return (_jsx(AppearanceContext.Provider, { value: value, children: _jsx(ConfigProvider, { componentSize: "middle", locale: zhCN, theme: theme, children: _jsx(AntdApp, { children: children }) }) }));
|
|
277
70
|
}
|
|
278
71
|
export function useAppearance() {
|
|
279
72
|
const value = useContext(AppearanceContext);
|
|
@@ -281,10 +74,4 @@ export function useAppearance() {
|
|
|
281
74
|
throw new Error('OPENXIANGDA_APPEARANCE_NOT_READY');
|
|
282
75
|
return value;
|
|
283
76
|
}
|
|
284
|
-
export function useOpenXiangdaTheme() {
|
|
285
|
-
const { preference, effectiveAppearance } = useAppearance();
|
|
286
|
-
const { token } = antdTheme.useToken();
|
|
287
|
-
const tokens = useMemo(() => openXiangdaThemeTokens(token), [token]);
|
|
288
|
-
return { preference, effectiveAppearance, tokens };
|
|
289
|
-
}
|
|
290
77
|
//# sourceMappingURL=appearance.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../src/browser/appearance.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,IAAI,OAAO,EACd,cAAc,EACd,KAAK,IAAI,SAAS,GAEnB,MAAM,MAAM,CAAC;AACd,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,
|
|
1
|
+
{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../src/browser/appearance.tsx"],"names":[],"mappings":"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"}
|