realtime effective; undo/redo

Author: eagleoflqj

package.json

@@ -11,16 +11,16 @@
     "build": "vite build && vue-tsc -d --emitDeclarationOnly"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^5.2.1",
+    "@antfu/eslint-config": "^5.4.1",
     "@vitejs/plugin-vue": "^6.0.1",
-    "eslint": "^9.33.0",
+    "eslint": "^9.36.0",
     "fcitx5-js": "file:cache/fcitx5-js.tgz",
-    "naive-ui": "^2.42.0",
+    "naive-ui": "^2.43.1",
     "typescript": "5.9.2",
-    "vite": "^7.1.2",
+    "vite": "^7.1.7",
     "vooks": "^0.2.12",
-    "vue": "^3.5.18",
+    "vue": "^3.5.22",
     "vue-i18n": "11",
-    "vue-tsc": "^3.0.5"
+    "vue-tsc": "^3.0.8"
   }
 }

src/AdvancedConfig.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { NLayout, NLayoutFooter, NLayoutSider, NMenu } from 'naive-ui'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 import BasicConfig from './BasicConfig.vue'
 import FooterButtons from './FooterButtons.vue'
-import { extractValue } from './util'
+import { ConfigManager } from './manager'
 
 defineProps<{
   onClose: () => void
@@ -21,25 +21,9 @@ const options = window.fcitx.getAddons().map(category => ({
 
 const addon = ref(options[0].children[0].key)
 
-const uri = computed(() => `fcitx://config/addon/${addon.value}`)
-
-const config = computed(() => window.fcitx.getConfig(uri.value))
+const manager = computed(() => new ConfigManager(`fcitx://config/addon/${addon.value}`))
 
 const collapsed = ref(false)
-
-const form = ref({})
-
-watchEffect(() => {
-  form.value = extractValue(config.value, false)
-})
-
-function reset() {
-  form.value = extractValue(config.value, true)
-}
-
-function apply() {
-  window.fcitx.setConfig(uri.value, form.value)
-}
 </script>
 
 <template>
@@ -67,17 +51,16 @@ function apply() {
       >
         <BasicConfig
           :path="addon"
-          :config="config"
-          :value="form"
+          :config="manager.config"
+          :value="manager.form.value"
           style="margin: 16px"
-          @update="v => form = v"
+          @update="(v) => manager.set(v)"
         />
       </NLayout>
       <NLayoutFooter position="absolute">
         <FooterButtons
-          :reset="reset"
-          :apply="apply"
-          :close="onClose"
+          :manager="manager"
+          @close="onClose"
         />
       </NLayoutFooter>
     </NLayout>

src/FooterButtons.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import type { ConfigManager } from './manager'
 import { NButton, NFlex } from 'naive-ui'
 import { t } from './i18n'
 
 defineProps<{
-  reset: () => void
-  close: () => void
-  apply: () => void
+  manager: ConfigManager
+}>()
+
+defineEmits<{
+  close: []
 }>()
 </script>
 
@@ -16,30 +19,31 @@ defineProps<{
     <NFlex>
       <NButton
         secondary
-        @click="reset"
+        :disabled="manager.undoStack.value.length === 0"
+        @click="manager.undo()"
       >
-        {{ t('Reset to default') }}
+        {{ t('Undo') }}
       </NButton>
       <NButton
         secondary
-        @click="close"
+        :disabled="manager.redoStack.value.length === 0"
+        @click="manager.redo()"
       >
-        {{ t('Cancel') }}
+        {{ t('Redo') }}
       </NButton>
-    </NFlex>
-    <NFlex>
       <NButton
         secondary
-        @click="apply"
+        @click="manager.reset()"
       >
-        Apply
+        {{ t('Reset to default') }}
       </NButton>
+    </NFlex>
+    <NFlex>
       <NButton
         secondary
-        type="info"
-        @click="apply(); close()"
+        @click="$emit('close')"
       >
-        OK
+        {{ t('Close') }}
       </NButton>
     </NFlex>
   </NFlex>

src/InputMethodConfig.vue

@@ -5,9 +5,9 @@ import { computed, h, ref, watchEffect } from 'vue'
 import BasicConfig from './BasicConfig.vue'
 import FooterButtons from './FooterButtons.vue'
 import { t } from './i18n'
+import { ConfigManager } from './manager'
 import MinusButton from './MinusButton.vue'
 import PlusButton from './PlusButton.vue'
-import { extractValue } from './util'
 
 const languageName = new Intl.DisplayNames(navigator.language, { type: 'language' })
 
@@ -34,9 +34,7 @@ const props = defineProps<{
 const enabledIMs = computed(() => props.inputMethods.map(({ name }) => name))
 
 const selectedInputMethod = ref(props.inputMethod)
-const uri = computed(() => `fcitx://config/inputmethod/${selectedInputMethod.value}`)
-
-const config = computed(() => window.fcitx.getConfig(uri.value))
+const manager = computed(() => new ConfigManager(`fcitx://config/inputmethod/${selectedInputMethod.value}`))
 
 const options = computed(() =>
   props.inputMethods.map(({ displayName, name }) => ({
@@ -151,20 +149,6 @@ const filteredLanguageOptions = computed(() => {
   }
   return languageOptions.value
 })
-
-const form = ref({})
-
-watchEffect(() => {
-  form.value = extractValue(config.value, false)
-})
-
-function reset() {
-  form.value = extractValue(config.value, true)
-}
-
-function apply() {
-  window.fcitx.setConfig(uri.value, form.value)
-}
 </script>
 
 <template>
@@ -272,17 +256,16 @@ function apply() {
         >
           <BasicConfig
             :path="selectedInputMethod"
-            :config="config"
-            :value="form"
+            :config="manager.config"
+            :value="manager.form.value"
             style="margin: 16px"
-            @update="v => form = v"
+            @update="(v) => manager.set(v)"
           />
         </NLayout>
         <NLayoutFooter position="absolute">
           <FooterButtons
-            :reset="reset"
-            :apply="apply"
-            :close="onClose"
+            :manager="manager"
+            @close="onClose"
           />
         </NLayoutFooter>
       </template>

src/SplitConfig.vue

@@ -1,41 +1,24 @@
 <script setup lang="ts">
-import type { Config } from 'fcitx5-js'
 import { NLayout, NLayoutFooter, NLayoutSider, NMenu } from 'naive-ui'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import BasicConfig from './BasicConfig.vue'
 import FooterButtons from './FooterButtons.vue'
-import { extractValue } from './util'
+import { ConfigManager } from './manager'
 
 const props = defineProps<{
   uri: string
   onClose: () => void
 }>()
 
-const index = ref(0)
-const config = {
-  Children: [],
-  ...window.fcitx.getConfig(props.uri),
-}
-const options = config.Children.map((child, i) => ({
+const options = { Children: [], ...window.fcitx.getConfig(props.uri) }.Children.map((child, i) => ({
   key: i,
   label: child.Description,
 }))
 
-const collapsed = ref(false)
-
-function childToConfig(child: typeof config.Children[0]): Config {
-  return { Children: child.Children || [] }
-}
-
-const form = ref(extractValue(config, false))
-
-function reset() {
-  form.value[config.Children[index.value].Option] = extractValue(childToConfig(config.Children[index.value]), true)
-}
+const index = ref(0)
+const manager = computed(() => new ConfigManager(props.uri, index.value))
 
-function apply() {
-  window.fcitx.setConfig(props.uri, form.value)
-}
+const collapsed = ref(false)
 </script>
 
 <template>
@@ -62,18 +45,17 @@ function apply() {
         style="bottom: 50px"
       >
         <BasicConfig
-          :path="config.Children[index].Option"
-          :config="childToConfig(config.Children[index])"
-          :value="form[config.Children[index].Option]"
+          :path="{ Option: '', ...manager.config }.Option"
+          :config="manager.config"
+          :value="manager.form.value"
           style="margin: 16px"
-          @update="v => form[config.Children[index].Option] = v"
+          @update="(v) => manager.set(v)"
         />
       </NLayout>
       <NLayoutFooter position="absolute">
         <FooterButtons
-          :reset="reset"
-          :apply="apply"
-          :close="onClose"
+          :manager="manager"
+          @close="onClose"
         />
       </NLayoutFooter>
     </NLayout>

src/locales/zh-CN.json

@@ -2,11 +2,14 @@
   "Add": "添加",
   "Available": "可用",
   "Cancel": "取消",
+  "Close": "关闭",
   "Download and drag zip to this area": "下载并拖拽 zip 到此区域",
   "Installed": "已安装",
   "Mozc doesn't work on Chrome unless start the process with": "Mozc 在 Chrome 下不工作，除非用如下参数启动进程",
   "Only show current language": "只显示当前语言",
+  "Redo": "重做",
   "Reset to default": "重设为默认值",
   "Select a language from the left list": "从左侧列表中选择一个语言",
-  "Warning": "警告"
+  "Warning": "警告",
+  "Undo": "撤销"
 }

src/manager.ts

@@ -0,0 +1,64 @@
+import type { Config } from 'fcitx5-js'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import { extractValue } from './util'
+
+export class ConfigManager {
+  uri: string
+  index: number | undefined
+  config: Config
+  form: Ref<any>
+  undoStack: Ref<any[]>
+  redoStack: Ref<any[]>
+
+  constructor(uri: string, index?: number) {
+    this.uri = uri
+    this.index = index
+    const configForUri = window.fcitx.getConfig(uri)
+    if (index === undefined) {
+      this.config = configForUri
+    }
+    else {
+      this.config = { Children: [], ...configForUri }.Children[index] as Config
+    }
+    this.form = ref(extractValue(this.config, false))
+    this.undoStack = ref([])
+    this.redoStack = ref([])
+  }
+
+  save(value: any) {
+    this.form.value = value
+    if (this.index === undefined) {
+      window.fcitx.setConfig(this.uri, value)
+    }
+    else {
+      window.fcitx.setConfig(this.uri, { [{ Option: '', ...this.config }.Option]: value })
+    }
+  }
+
+  set(value: any) {
+    this.undoStack.value.push(this.form.value)
+    this.redoStack.value = []
+    this.save(value)
+  }
+
+  undo() {
+    const last = this.undoStack.value.pop()
+    if (last) {
+      this.redoStack.value.push(this.form.value)
+      this.save(last)
+    }
+  }
+
+  redo() {
+    const last = this.redoStack.value.pop()
+    if (last) {
+      this.undoStack.value.push(this.form.value)
+      this.save(last)
+    }
+  }
+
+  reset() {
+    this.set(extractValue(this.config, true))
+  }
+}