From 5c2012725bf80fb2deeec2304e0a51318a450c92 Mon Sep 17 00:00:00 2001 From: pqcqaq <905739777@qq.com> Date: Fri, 19 Jul 2024 01:11:36 +0800 Subject: [PATCH] store --- package.json | 4 +- public/default.css | 210 +++++++++--------- src/components/Async/index.tsx | 0 src/data/colors.ts | 2 +- src/main.tsx | 16 +- .../creation/components/colorPalette.tsx | 37 ++- src/pages/creation/index.tsx | 190 ++++++++-------- public/theme/nerd.css => src/stores/index.ts | 0 src/stores/theme/index.ts | 30 +++ 9 files changed, 267 insertions(+), 222 deletions(-) delete mode 100644 src/components/Async/index.tsx rename public/theme/nerd.css => src/stores/index.ts (100%) create mode 100644 src/stores/theme/index.ts diff --git a/package.json b/package.json index 29d6f07..3e00c8f 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,9 @@ "sort-by": "^1.2.0", "sucrase": "^3.31.0", "terser": "^5.31.3", - "use-editable": "^2.3.3" + "use-editable": "^2.3.3", + "valtio": "^1.13.2", + "valtio-history": "^0.3.5" }, "devDependencies": { "@codemirror/autocomplete": "^6.17.0", diff --git a/public/default.css b/public/default.css index 3b80cf6..cd7a773 100644 --- a/public/default.css +++ b/public/default.css @@ -1,105 +1,113 @@ /* 下面是统一的颜色定义 */ - /* 默认的主题样式 */ - :root { - background-color: var(--background-1); - color: var(--text-1); - font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; - } - - button { - background-color: var(--primary-6); - color: var(--background-white); - border: var(--border-1) solid var(--border-3); - border-radius: var(--border-radius-small); - padding: var(--size-3) var(--size-4); - font-size: var(--font-size-body-3); - box-shadow: var(--shadow1-center); - } +/* 默认的主题样式 */ +:root { + background-color: var(--background-1); + color: var(--text-1); + font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", + "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif; +} - button:hover { - background-color: var(--primary-5); - border-color: var(--border-4); - } +button { + background-color: var(--primary-6); + color: var(--background-white); + border: var(--border-1) solid var(--border-3); + border-radius: var(--border-radius-small); + padding: var(--size-3) var(--size-4); + font-size: var(--font-size-body-3); + box-shadow: var(--shadow1-center); +} - button:active { - background-color: var(--primary-7); - border-color: var(--border-4); - } - - input, textarea { - background-color: var(--fill-1); - color: var(--text-1); - border: var(--border-1) solid var(--border-2); - border-radius: var(--border-radius-small); - padding: var(--size-3); - font-size: var(--font-size-body-3); - box-shadow: var(--shadow1-center); - } - - .card { - background-color: var(--background-2); - color: var(--text-1); - border: var(--border-1) solid var(--border-1); - border-radius: var(--border-radius-large); - padding: var(--size-5); - box-shadow: var(--shadow2-center); - font-size: var(--font-size-body-3); - } +button:hover { + background-color: var(--primary-5); + border-color: var(--border-4); +} - a { - color: var(--link-6); - text-decoration: none; - } - - a:hover { - color: var(--link-5); - text-decoration: underline; - } - - h1, h2, h3, h4, h5, h6 { - color: var(--text-1); - } - - p { - color: var(--text-1); - font-size: var(--font-size-body-3); - } - - table { - width: 100%; - border-collapse: collapse; - } - - th, td { - border: var(--border-1) solid var(--border-2); - padding: var(--size-3); - text-align: left; - } - - thead { - background-color: var(--background-2); - } - - .alert { - background-color: var(--danger-1); - color: var(--danger-6); - border: var(--border-1) solid var(--danger-4); - border-radius: var(--border-radius-small); - padding: var(--size-3); - } - - .success { - background-color: var(--success-1); - color: var(--success-6); - border: var(--border-1) solid var(--success-4); - border-radius: var(--border-radius-small); - padding: var(--size-3); - } - - .warning { - background-color: var(--warning-1); - color: var(--warning-6); - border: var(--border-1) solid var(--warning-4); - border-radius: var(--border-radius-small); - padding: var(--size-3); - } \ No newline at end of file +button:active { + background-color: var(--primary-7); + border-color: var(--border-4); +} + +input, +textarea { + background-color: var(--fill-1); + color: var(--text-1); + border: var(--border-1) solid var(--border-2); + border-radius: var(--border-radius-small); + padding: var(--size-3); + font-size: var(--font-size-body-3); + box-shadow: var(--shadow1-center); +} + +.card { + background-color: var(--background-2); + color: var(--text-1); + border: var(--border-1) solid var(--border-1); + border-radius: var(--border-radius-large); + padding: var(--size-5); + box-shadow: var(--shadow2-center); + font-size: var(--font-size-body-3); +} + +a { + color: var(--link-6); + text-decoration: none; +} + +a:hover { + color: var(--link-5); + text-decoration: underline; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--text-1); +} + +p { + color: var(--text-1); + font-size: var(--font-size-body-3); +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, +td { + border: var(--border-1) solid var(--border-2); + padding: var(--size-3); + text-align: left; +} + +thead { + background-color: var(--background-2); +} + +.alert { + background-color: var(--danger-1); + color: var(--danger-6); + border: var(--border-1) solid var(--danger-4); + border-radius: var(--border-radius-small); + padding: var(--size-3); +} + +.success { + background-color: var(--success-1); + color: var(--success-6); + border: var(--border-1) solid var(--success-4); + border-radius: var(--border-radius-small); + padding: var(--size-3); +} + +.warning { + background-color: var(--warning-1); + color: var(--warning-6); + border: var(--border-1) solid var(--warning-4); + border-radius: var(--border-radius-small); + padding: var(--size-3); +} diff --git a/src/components/Async/index.tsx b/src/components/Async/index.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/data/colors.ts b/src/data/colors.ts index 03bfc52..5975d96 100644 --- a/src/data/colors.ts +++ b/src/data/colors.ts @@ -87,6 +87,6 @@ export const themeColorSchema: ColorSchema = { "background-7": "rgb(255, 255, 255)", "background-white": "rgb(255, 255, 255)", "background-black": "rgb(0, 0, 0)", - "shadow": "rgba(255, 255, 255, 0.5)", + "shadow": "rgb(255, 255, 255)", }, }; diff --git a/src/main.tsx b/src/main.tsx index 60cf746..5914521 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,15 +3,23 @@ import ReactDOM from "react-dom/client"; import "./index.scss"; import { RouterProvider } from "react-router-dom"; import { router } from "./router"; -import { createDarkTheme, createLightTheme, generateTailwindProps, getColorAsync, setTailwindExtendProps } from "./utils/theme"; +import { + generateTailwindProps, + getColorAsync, + setTailwindExtendProps, +} from "./utils/theme"; +import { useThemeStore } from "./stores/theme"; // 当tailwindcss加载完毕，开始修改config document.addEventListener("DOMContentLoaded", () => { getColorAsync().then((colors) => { setTailwindExtendProps(generateTailwindProps(colors.onLight)); - createLightTheme(colors.onLight); - createDarkTheme(colors.onDark!); - }) + if (localStorage.getItem("colors")) { + useThemeStore.value.init(); + return; + } + useThemeStore.value.updateColors(colors); + }); }); ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( diff --git a/src/pages/creation/components/colorPalette.tsx b/src/pages/creation/components/colorPalette.tsx index dd2f77b..aabe480 100644 --- a/src/pages/creation/components/colorPalette.tsx +++ b/src/pages/creation/components/colorPalette.tsx @@ -1,12 +1,10 @@ import React, { useEffect, useState, useRef } from "react"; import { ColorSelector, IColorSelectorProps } from "color-selector-react"; import "color-selector-react/dist/es/index.css"; -import { ColorSchema, ThemeVariables } from "../../../../typings"; -import { - createDarkTheme, - createLightTheme, - getColorAsync, -} from "../../../utils/theme"; +import { ThemeVariables } from "../../../../typings"; +import { getColorAsync } from "../../../utils/theme"; +import { useThemeStore } from "../../../stores/theme"; +import { useSnapshot } from "valtio"; interface ColorPaletteProps {} @@ -17,16 +15,15 @@ interface VisibleColorPicker { } const ColorPalette: React.FC = () => { - const [colors, setColors] = useState({ - onLight: {}, - onDark: {}, - }); + const themeStore = useSnapshot(useThemeStore); - useEffect(() => { - getColorAsync().then((res) => { - setColors(res); - }); - }, []); + const { colors, updateColors: update } = themeStore.value; + + // useEffect(() => { + // getColorAsync().then((res) => { + // update(res); + // }); + // }, []); const [visibleColorPicker, setVisibleColorPicker] = useState(null); @@ -70,16 +67,16 @@ const ColorPalette: React.FC = () => { }; const setLightColors = (newColor: ThemeVariables) => { - setColors({ ...colors, onLight: newColor }); - createLightTheme(newColor); + update({ ...colors, onLight: newColor }); }; const setDarkColors = (newColor: ThemeVariables) => { - setColors({ ...colors, onDark: newColor }); - createDarkTheme(newColor); + update({ ...colors, onDark: newColor }); }; - const handleColorChange: IColorSelectorProps["onChange"] = ({ color }) => { + const handleColorChange: IColorSelectorProps["onChange"] = ({ + rgb: color, + }) => { if (visibleColorPicker) { if (visibleColorPicker.palette === "light") { setLightColors({ ...colors.onLight, [visibleColorPicker.key]: color }); diff --git a/src/pages/creation/index.tsx b/src/pages/creation/index.tsx index af52cdb..2e4d7fd 100644 --- a/src/pages/creation/index.tsx +++ b/src/pages/creation/index.tsx @@ -70,101 +70,101 @@ export const Creation = () => { }; return ( - -
-
- - -
- -
-
- -
-
- -
-
- - -
-
-

Props 编辑器

-
-
- -
- setNewPropKey(e.target.value)} - className="border border-text-1 rounded p-2 flex-grow" - /> - -
-
- { - const updateNestedProp = ( - obj: Record, - path: string[], - value: unknown - ) => { - if (path.length === 1) { - obj[path[0]] = value; - } else { - if (!obj[path[0]]) { - obj[path[0]] = {}; - } - updateNestedProp(obj[path[0]], path.slice(1), value); - } - }; - const updatedProps = { ...componentsProps }; - updateNestedProp( - updatedProps, - (opts as any).namespace, - opts.value - ); - setComponentsProps(updatedProps); - return true; - }} - /> -
-
- -
+
+
+ +
- + +
+
+ +
+
+ + + +
+
+ + +
+
+

Props 编辑器

+
+
+ +
+ setNewPropKey(e.target.value)} + className="border border-black rounded p-2 flex-grow" + /> + +
+
+ { + const updateNestedProp = ( + obj: Record, + path: string[], + value: unknown + ) => { + if (path.length === 1) { + obj[path[0]] = value; + } else { + if (!obj[path[0]]) { + obj[path[0]] = {}; + } + updateNestedProp(obj[path[0]], path.slice(1), value); + } + }; + const updatedProps = { ...componentsProps }; + updateNestedProp( + updatedProps, + (opts as any).namespace, + opts.value + ); + setComponentsProps(updatedProps); + return true; + }} + /> +
+
+ +
+
); }; diff --git a/public/theme/nerd.css b/src/stores/index.ts similarity index 100% rename from public/theme/nerd.css rename to src/stores/index.ts diff --git a/src/stores/theme/index.ts b/src/stores/theme/index.ts new file mode 100644 index 0000000..3fd3d1b --- /dev/null +++ b/src/stores/theme/index.ts @@ -0,0 +1,30 @@ +import { ColorSchema } from "../../../typings"; +import { proxyWithHistory } from "valtio-history"; +import { createDarkTheme, createLightTheme } from "../../utils/theme"; + +// // 模拟计算属性 +// watch((get) => { +// get(counterStore) +// counterStore.double = counterStore.count * 2 +// }) + +const initString = `{onLight: {}, onDark: {}}`; + +export const useThemeStore = proxyWithHistory({ + // 取值的时候，本地存储有就从本地获取 + colors: JSON.parse( + localStorage.getItem("colors") || initString + ) as ColorSchema, + init: () => { + createLightTheme(useThemeStore.value.colors.onLight); + createDarkTheme(useThemeStore.value.colors.onDark!); + }, + updateColors: (value: ColorSchema) => { + // 更新的时候，订阅更新一下本地存储 + localStorage.setItem("colors", JSON.stringify(value)); + // 在更新的时候同步更新到style + createLightTheme(value.onLight); + createDarkTheme(value.onDark!); + useThemeStore.value.colors = value; + }, +});