[ui] Prevent navigating to results page if no theme usage selected in Squirrel theme editor

Author: pdog18

package-lock.json

@@ -12,7 +12,7 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/wicg-file-system-access": "^2020.9.5",
-    "antd": "^5.2.1",
+    "antd": "^5.4.6",
     "file-saver": "^2.0.5",
     "immer": "^9.0.21",
     "install": "^0.13.0",
@@ -74,4 +74,4 @@
   },
   "main": "main.js",
   "homepage": "https://pdog18.github.io/rime-soak/"
-}
+}

package.json

@@ -10,10 +10,14 @@ import CustomPhrase from "./customPhrase/CustomPhrase"
 import WeaselCustomTheme from "./theme/weasel/CustomWeaselTheme"
 import KeyBinder from "./keyBinder/KeyBinder"
 import SquirrelPlayground from "./theme/squirrel/SquirrelPlayground"
+import { useEffect, useState } from "react"
+import useSquirrelStore from "./theme/squirrel/SquirrelStore"
+
+const weasel = navigator.userAgent.indexOf("Win") !== -1
 
 const items = [
   {
-    key: "/default",
+    key: "/",
     label: "基本",
     children: <Default />,
   },
@@ -25,7 +29,7 @@ const items = [
   {
     key: "/theme",
     label: "皮肤",
-    children: navigator.userAgent.indexOf("Win") !== -1 ? <WeaselCustomTheme /> : <SquirrelPlayground />,
+    children: weasel ? <WeaselCustomTheme /> : <SquirrelPlayground />,
   },
   {
     key: "/punctuation",
@@ -53,16 +57,23 @@ const Home = () => {
   const location = useLocation()
   const navigate = useNavigate()
 
-  const needChangeDefaultActive = items.filter((item) => item.key === location.pathname).length === 1
+  const [activeKey, changeActiveKey] = useState(() => sessionStorage.getItem("activeKey") ?? `${location.pathname}`)
+
+  useEffect(() => {
+    sessionStorage.setItem("activeKey", activeKey)
+  }, [activeKey])
+
+  const squirrelState = useSquirrelStore()
 
-  const activeKey = needChangeDefaultActive ? location.pathname : "/default"
-  // todo 如果依旧处于 Home 界面，手动输入 pathName 时需要重新渲染，这是 Tabs#defaultActiveKey 的问题，可能需要替换该组件
   return (
     <>
       <Tabs
         centered={true}
-        defaultActiveKey={activeKey}
+        activeKey={activeKey}
         style={{ height: "100%", minHeight: "100vh", backgroundColor: "#f3f3f3" }}
+        onChange={(activeKey) => {
+          changeActiveKey(activeKey)
+        }}
         items={items.map((item) => {
           return {
             ...item,
@@ -75,7 +86,14 @@ const Home = () => {
         type="primary"
         tooltip={<div>Save</div>}
         onClick={() => {
-          navigate("/result")
+          if (!weasel && activeKey === "/theme" && squirrelState.selectTheme === "none") {
+            squirrelState.showToolTip(true)
+            setTimeout(() => {
+              squirrelState.showToolTip(false)
+            }, 3000)
+          } else {
+            navigate("/result")
+          }
         }}
       />
     </>

src/pages/Home.tsx

@@ -201,7 +201,8 @@ const Result: React.FC = () => {
         style={{ alignSelf: "start", margin: "0 10vw" }}
         type="primary"
         onClick={() => {
-          navigate("/")
+          navigate(-1)
+          // navigate()
         }}
       >
         返回

src/pages/Result.tsx

@@ -6,15 +6,16 @@ import SquirrelCheckBox from "./components/SquirrelCheckBox"
 import SquirrelNumberInput from "./components/SquirrelNumberInput"
 import SquirrelSelect from "./components/SquirrelSelect"
 import { useState } from "react"
-
 import SquirrelColorPickers from "./components/SquirrelColorPickers"
+import { Tooltip } from "antd"
 
 const SquirrelCustomTheme = () => {
   const state = useSquirrelStore<SquirrelStyleState>((state) => state)
   const preset_color_schemes = state.styleCustom.patch.preset_color_schemes
   const updateStyleLayout = state.updateStyleLayout
   const updateSquirrelColor = state.updateSquirrelColor
   const updateSelectTheme = state.updateSelectTheme
+  const hintSelectThme = state.hintSelectThme
 
   const {
     corner_radius,
@@ -68,13 +69,15 @@ const SquirrelCustomTheme = () => {
         }}
       >
         <SquirrelOutline title="使用主题">
-          <SquirrelSelect
-            flexDirection="column"
-            name={"select:"}
-            options={["none", "both", "light", "dark"]}
-            value={state.selectTheme}
-            onChange={updateSelectTheme}
-          />
+          <Tooltip open={hintSelectThme} placement={"right"} title="选中使用的主题" color={"purple"} key={"purple"}>
+            <SquirrelSelect
+              flexDirection="column"
+              name={"select:"}
+              options={["none", "both", "light", "dark"]}
+              value={state.selectTheme}
+              onChange={updateSelectTheme}
+            />
+          </Tooltip>
         </SquirrelOutline>
         <SquirrelOutline title="排列方向">
           <SquirrelSelect

src/pages/theme/squirrel/SquirrelPlayground.tsx

@@ -100,18 +100,21 @@ const initLayout: SquirrelLayouts = {
 interface SquirrelStyleConfig {}
 interface SquirrelStyleState {
   selectTheme: ThemeSelectType
+  hintSelectThme: boolean
   styleCustom: {
     patch: Patch
   }
   changeColorScheme: (color_scheme: string, config: SquirrelStyleConfig) => void
   updateStyleLayout: (path: string, value: string | number | boolean) => void
   updateSquirrelColor: (isDark: boolean, colorname: string, value: number) => void
   updateSelectTheme: (name: string, value: string) => void
+  showToolTip: (show: boolean) => void
   generateYAML: () => string | null
 }
 
 const useSquirrelStore = create<SquirrelStyleState>()((set, get) => ({
   selectTheme: "none",
+  hintSelectThme: false,
   styleCustom: {
     patch: {
       "style/color_scheme": "solarized_light",
@@ -198,6 +201,13 @@ const useSquirrelStore = create<SquirrelStyleState>()((set, get) => ({
       })
     ),
 
+  showToolTip: (show) =>
+    set(
+      produce((state: SquirrelStyleState) => {
+        state.hintSelectThme = show
+      })
+    ),
+
   generateYAML: () => {
     const state = get()
 

src/pages/theme/squirrel/SquirrelStore.tsx

@@ -53,7 +53,6 @@ export default function SquirrelColorPickers(props: SquirrelColorPickersProps) {
   const { inline_preedit, onChange } = props
 
   const preeditColors = ["text_color", "hilited_text_color", "hilited_back_color", "preedit_back_color"]
-  console.log(inline_preedit)
 
   const convertedColors = Object.entries(props)
     .filter(([key, value]) => key.endsWith("_color") && typeof value === "number")
@@ -63,7 +62,7 @@ export default function SquirrelColorPickers(props: SquirrelColorPickersProps) {
   return (
     <div style={{ display: "flex", margin: "0 1vw", gap: "16px", flexWrap: "wrap" }}>
       {convertedColors.map(([name, color]) => (
-        <div>
+        <div key={name}>
           <div style={{ marginBottom: "6px" }}>{convertColorName(name)}</div>
           <RgbaColorPicker
             style={{ zoom: "0.7" }}