Merge pull request #9 from codingapi/dev

xlorne · web-flow · commit 8afb32f4ee56 · 2025-05-19T21:12:34.000+08:00
fix #8
diff --git a/README.md b/README.md
@@ -361,6 +361,65 @@ export default HttpTest;
 
 ```
 
+### 主题控制
+
+```
+import React from "react";
+import Space from "@/components/Space";
+import {ThemeContext, ThemeProviderContext} from "../../../src";
+import {EventBus} from "@codingapi/ui-framework";
+
+const ThemeTest = () => {
+
+    const themeContext = React.useContext(ThemeProviderContext);
+
+    const [fontSize, setFontSize] = React.useState(themeContext?.getTheme().token.contentFontSize);
+
+    React.useEffect(() => {
+        EventBus.getInstance().on(ThemeContext.EVENT_CHANGE_CONTENT_FONT_SIZE, (data: string) => {
+            setFontSize(data);
+        });
+
+        return () => {
+            EventBus.getInstance().off(ThemeContext.EVENT_CHANGE_CONTENT_FONT_SIZE);
+        }
+    }, [])
+
+    return (
+        <>
+            <div
+                style={{
+                    textAlign: 'center'
+                }}
+            >
+                <h1>Theme Test </h1>
+            </div>
+            <Space>
+                <div>
+                    font size:{fontSize}
+                </div>
+                <button onClick={() => {
+                    themeContext?.setSmallFontSize();
+                }}>small font size
+                </button>
+                <button
+                    onClick={() => {
+                        themeContext?.setMiddleFontSize();
+                    }}
+                >middle font size
+                </button>
+                <button onClick={() => {
+                    themeContext?.setLargeFontSize();
+                }}>large font size
+                </button>
+            </Space>
+        </>
+    )
+}
+
+export default ThemeTest;
+```
+
 更多实例参考: https://github.com/codingapi/ui-framework/tree/main/playground
 
 ## 主要特性
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codingapi/ui-framework",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "A UI Framework built with React and Typescript",
   "keywords": [
     "ui",
@@ -29,10 +29,12 @@
     "@types/node": "^22.15.2",
     "axios": "^1.9.0",
     "base64-js": "^1.5.1",
+    "classnames": "^2.5.1",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "sass": "^1.89.0",
     "typescript": "^5.6.2",
     "web-vitals": "^2.1.4"
   },
diff --git a/playground/package.json b/playground/package.json
@@ -9,8 +9,7 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sass": "^1.78.0",
-    "sass-loader": "^16.0.1",
+    "sass": "^1.89.0",
     "typescript": "^5.6.2",
     "web-vitals": "^2.1.4"
   },
@@ -39,7 +38,6 @@
     "jest-environment-jsdom": "^29.7.0",
     "mockjs": "^1.1.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
-    "sass": "^1.78.0",
     "sass-loader": "^16.0.1",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.3.2",
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
@@ -5,6 +5,7 @@ import EventBusTest from "@/components/EventBusTest";
 import MicroComponentTest from "@/components/MicroComponentTest";
 import Base64Test from "@/components/Base64Test";
 import HttpTest from "@/components/HttpTest";
+import ThemeTest from "@/components/ThemeTest";
 
 const App = () => {
 
@@ -20,6 +21,7 @@ const App = () => {
             <MicroComponentTest/>
             <Base64Test/>
             <HttpTest/>
+            <ThemeTest/>
         </div>
     );
 }
diff --git a/playground/src/components/ThemeTest.tsx b/playground/src/components/ThemeTest.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import Space from "@/components/Space";
+import {ThemeContext, ThemeProviderContext} from "../../../src";
+import {EventBus} from "@codingapi/ui-framework";
+
+const ThemeTest = () => {
+
+    const themeContext = React.useContext(ThemeProviderContext);
+
+    const [fontSize, setFontSize] = React.useState(themeContext?.getTheme().token.contentFontSize);
+
+    React.useEffect(() => {
+        EventBus.getInstance().on(ThemeContext.EVENT_CHANGE_CONTENT_FONT_SIZE, (data: string) => {
+            setFontSize(data);
+        });
+
+        return () => {
+            EventBus.getInstance().off(ThemeContext.EVENT_CHANGE_CONTENT_FONT_SIZE);
+        }
+    }, [])
+
+    return (
+        <>
+            <div
+                style={{
+                    textAlign: 'center'
+                }}
+            >
+                <h1>Theme Test </h1>
+            </div>
+            <Space>
+                <div>
+                    font size:{fontSize}
+                </div>
+                <button onClick={() => {
+                    themeContext?.setSmallFontSize();
+                }}>small font size
+                </button>
+                <button
+                    onClick={() => {
+                        themeContext?.setMiddleFontSize();
+                    }}
+                >middle font size
+                </button>
+                <button onClick={() => {
+                    themeContext?.setLargeFontSize();
+                }}>large font size
+                </button>
+            </Space>
+        </>
+    )
+}
+
+export default ThemeTest;
diff --git a/playground/src/index.css b/playground/src/index.css
@@ -1,13 +1,17 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+:root {
+  --primary-color: #81d11c;
+  --body-background-color: #fdfdfd;
+
+  --content-font-size-large: 24px;
+  --content-font-size-middle: 16px;
+  --content-font-size-small: 12px;
+
+  --content-font-size: var(--content-font-size-middle);
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--body-background-color);
+  font-size: var(--content-font-size);
 }
diff --git a/playground/src/index.tsx b/playground/src/index.tsx
@@ -3,13 +3,24 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {CSSUtils, ThemeConfig, ThemeProvider} from "@codingapi/ui-framework";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
+const theme = {
+    token:{
+        colorPrimary:CSSUtils.getRootVariable('--primary-color'),
+        contentFontSize:CSSUtils.getRootVariable('--content-font-size'),
+    }
+} as ThemeConfig;
+
 root.render(
   <React.StrictMode>
-    <App />
+      <ThemeProvider theme={theme}>
+          <App />
+      </ThemeProvider>
   </React.StrictMode>
 );
 
diff --git a/src/Dispatch/index.ts b/src/Dispatch/index.ts
@@ -0,0 +1,4 @@
+/**
+ * Dispatch对象，对应React的useState的dispatch函数能力
+ */
+export type Dispatch<T> = (updater: ((prevState: T) => T) | T) => void;
diff --git a/src/ThemeProvider/component.tsx b/src/ThemeProvider/component.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import {ThemeContext} from "./content";
+import {ThemeConfig} from "./types";
+
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme: ThemeConfig
+}
+
+export const ThemeProviderContext = React.createContext<ThemeContext | null>(null);
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = (props) => {
+
+    const currentTheme = React.useContext(ThemeProviderContext) || {};
+
+    const [theme, dispatch] = React.useState<ThemeConfig>({
+        ...currentTheme,
+        ...props.theme
+    });
+
+    const themeContextRef = React.useRef<ThemeContext | null>(null);
+
+    if (!themeContextRef.current) {
+        themeContextRef.current = new ThemeContext(theme, dispatch);
+    }
+
+    React.useEffect(() => {
+        themeContextRef.current?.syncTheme(theme);
+    }, [theme]);
+
+    return (
+        <ThemeProviderContext.Provider value={themeContextRef.current}>
+            {props.children}
+        </ThemeProviderContext.Provider>
+    )
+}
diff --git a/src/ThemeProvider/content.ts b/src/ThemeProvider/content.ts
@@ -0,0 +1,76 @@
+import {ThemeConfig} from "./types";
+import {Dispatch} from "../Dispatch";
+import {CSSUtils} from "../utils";
+import {EventBus} from "../EventBus";
+
+export class ThemeContext{
+
+    public static EVENT_CHANGE_CONTENT_FONT_SIZE = 'theme-changeContentFontSize';
+    public static EVENT_CHANGE_THEME = 'theme-changeTheme';
+
+    private theme: ThemeConfig;
+    private readonly dispatch: Dispatch<ThemeConfig>;
+
+    constructor(theme: ThemeConfig,dispatch: Dispatch<ThemeConfig>) {
+        this.theme = theme;
+        this.dispatch = dispatch;
+    }
+
+    public getTheme = () => {
+        return this.theme;
+    }
+
+    // 更新状态数据
+    public syncTheme = (theme: ThemeConfig) => {
+        this.theme = theme;
+    }
+
+    public setLargeFontSize = () => {
+        const fontSize = CSSUtils.getRootVariable('--content-font-size-large');
+        CSSUtils.setRootVariable('--content-font-size', fontSize);
+        this.setFontSize(fontSize);
+    }
+
+    public setMiddleFontSize = ()=>{
+        const fontSize = CSSUtils.getRootVariable('--content-font-size-middle');
+        CSSUtils.setRootVariable('--content-font-size', fontSize);
+        this.setFontSize(fontSize);
+    }
+
+    public setSmallFontSize = ()=>{
+        const fontSize = CSSUtils.getRootVariable('--content-font-size-small');
+        CSSUtils.setRootVariable('--content-font-size', fontSize);
+        this.setFontSize(fontSize);
+    }
+
+    /**
+     * 设置字体大小
+     * @param fontSize
+     */
+    public setFontSize = (fontSize: string) => {
+        this.dispatch((prevState) => {
+            return {
+                ...prevState,
+                token: {
+                    ...prevState.token,
+                    contentFontSize: fontSize
+                }
+            }
+        });
+        EventBus.getInstance().emit(ThemeContext.EVENT_CHANGE_CONTENT_FONT_SIZE, fontSize);
+    }
+
+    /**
+     * 设置主题
+     * @param theme
+     */
+    public changeTheme = (theme: ThemeConfig) => {
+        this.dispatch((prevState) => {
+            return {
+                ...prevState,
+                ...theme
+            }
+        });
+        EventBus.getInstance().emit(ThemeContext.EVENT_CHANGE_THEME, theme);
+    }
+}
diff --git a/src/ThemeProvider/index.ts b/src/ThemeProvider/index.ts
@@ -0,0 +1,3 @@
+export * from './content';
+export * from './types';
+export * from './component';
diff --git a/src/ThemeProvider/types.ts b/src/ThemeProvider/types.ts
@@ -0,0 +1,12 @@
+export interface ThemeConfig {
+    token: {
+
+        // 主题色
+        colorPrimary?: string;
+
+        // 字体大小
+        contentFontSize?: string;
+
+        [key : string]: any;
+    }
+}
diff --git a/src/index.ts b/src/index.ts
@@ -4,3 +4,5 @@ export * from './EventBus';
 export * from './Form';
 export * from './Flow';
 export * from './utils';
+export * from './Dispatch';
+export * from './ThemeProvider';
diff --git a/src/utils/css.ts b/src/utils/css.ts
diff --git a/src/utils/index.ts b/src/utils/index.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +/**
 + * Dispatch对象，对应React的useState的dispatch函数能力
 + */
 +export type Dispatch<T> = (updater: ((prevState: T) => T) | T) => void;