feat: 支持实时保存配置。

src/configurator/configurator.tsx

@@ -22,6 +22,11 @@ const getScreenshotByConfig = async (config: DisplayConfig) => {
     config,
   });
 };
+const writePickerConfig = async (config: PickerConfiguration) => {
+  return await invoke<void>('write_picker_config', {
+    config,
+  });
+};
 
 export const Configurator: FC = () => {
   const { loading: pendingPickerConfig, result: savedPickerConfig } = useAsync(
@@ -34,14 +39,25 @@ export const Configurator: FC = () => {
 
   const [screenshotOfDisplays, setScreenshotOfDisplays] = useState<ScreenshotDto[]>([]);
 
-  const { loading: pendingGetLedColorsByConfig, execute: onPickerChange } =
+  const { loading: pendingGetLedColorsByConfig, execute: onDisplayConfigChange } =
     useAsyncCallback(async (value: DisplayConfig) => {
-      console.log(value);
+      console.log('onDisplayConfigChange', value);
       const screenshot = await getScreenshotByConfig(value);
       setScreenshotOfDisplays((old) => {
         const index = old.findIndex((it) => it.config.id === screenshot.config.id);
-        console.log({ old, n: update(index, screenshot, old) });
-        return update(index, screenshot, old);
+        const newValue = update(index, screenshot, old);
+        console.log({ old, n: newValue });
+        savedPickerConfig &&
+          writePickerConfig({
+            ...savedPickerConfig,
+            display_configs: newValue.map((it) => it.config),
+          }).then(() => {
+            console.log('writing config is successful.', {
+              ...savedPickerConfig,
+              display_configs: newValue.map((it) => it.config),
+            });
+          });
+        return newValue;
       });
 
       console.log('screenshot', screenshot);
@@ -51,15 +67,18 @@ export const Configurator: FC = () => {
 
   useEffect(() => {
     const displayConfigs = savedPickerConfig?.display_configs;
-    if (displayConfigs) {
+    console.log('displayConfigs change', displayConfigs);
+    if (displayConfigs && defaultScreenshotOfDisplays) {
       setDisplayConfigs(displayConfigs);
-    }
-  }, [savedPickerConfig]);
-  useEffect(() => {
-    if (defaultScreenshotOfDisplays) {
       setScreenshotOfDisplays(defaultScreenshotOfDisplays);
+      (async () => {
+        for (const config of displayConfigs) {
+          await onDisplayConfigChange(config);
+        }
+      })().then();
     }
-  }, [defaultScreenshotOfDisplays]);
+  }, [savedPickerConfig, onDisplayConfigChange, defaultScreenshotOfDisplays]);
+  useEffect(() => {}, [defaultScreenshotOfDisplays]);
 
   const displays = useMemo(() => {
     if (screenshotOfDisplays) {
@@ -69,7 +88,7 @@ export const Configurator: FC = () => {
           key={index}
           config={screenshot.config}
           screenshot={screenshot}
-          onChange={(value) => onPickerChange(value)}
+          onChange={(value) => onDisplayConfigChange(value)}
         />
       ));
     }