From a5f8d09e7747a93b11dcba07aadd282e95fc5e93 Mon Sep 17 00:00:00 2001
From: qwqcode <qwqcode@gmail.com>
Date: Wed, 20 Dec 2023 20:45:37 +0800
Subject: [PATCH] fix(ui/sidebar): refactor settings and fix save issue (#677)

---
 .../src/components/PreferenceArr.vue          |  21 +--
 .../src/components/PreferenceGrp.vue          |  56 ++----
 .../src/components/PreferenceItem.vue         |  54 +++---
 .../artalk-sidebar/src/lib/settings-option.ts | 178 ++++++++++++++++++
 .../artalk-sidebar/src/lib/settings.ts        | 109 +++++------
 .../artalk-sidebar/src/pages/settings.vue     |  22 +--
 6 files changed, 285 insertions(+), 155 deletions(-)
 create mode 100644 ui/packages/artalk-sidebar/src/lib/settings-option.ts

diff --git a/ui/packages/artalk-sidebar/src/components/PreferenceArr.vue b/ui/packages/artalk-sidebar/src/components/PreferenceArr.vue
index dad9c0048..07aec31ce 100644
--- a/ui/packages/artalk-sidebar/src/components/PreferenceArr.vue
+++ b/ui/packages/artalk-sidebar/src/components/PreferenceArr.vue
@@ -1,31 +1,26 @@
 <script setup lang="ts">
-import settings from '../lib/settings'
+import settings, { patchOptionValue, type OptionNode } from '../lib/settings'
 
 const props = defineProps<{
-  tplData: Array<any>,
-  path: (string|number)[]
+  node: OptionNode
 }>()
 
-const ci = getCurrentInstance()
 const customValue = ref<string[]>([])
 
 onMounted(() => {
-  update()
+  sync()
 })
 
-function update() {
-  customValue.value = (settings.get().customs.value?.getIn(props.path) as any)?.items || []
+function sync() {
+  const value = settings.get().getCustom(props.node.path)
+  customValue.value = (value && typeof value.toJSON === 'function') ? value.toJSON() : []
 }
 
 function save() {
-  settings.get().customs.value?.setIn([...props.path], customValue.value)
+  const v = patchOptionValue(customValue.value, props.node)
+  settings.get().setCustom(props.node.path, v)
 }
 
-watch(settings.get().customs, (customs) => {
-  update()
-  ci?.proxy?.$forceUpdate()
-})
-
 function onChange(index: number, val: string) {
   customValue.value[index] = val
   save()
diff --git a/ui/packages/artalk-sidebar/src/components/PreferenceGrp.vue b/ui/packages/artalk-sidebar/src/components/PreferenceGrp.vue
index 43e2bebd9..ed409ca0e 100644
--- a/ui/packages/artalk-sidebar/src/components/PreferenceGrp.vue
+++ b/ui/packages/artalk-sidebar/src/components/PreferenceGrp.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import settings from '../lib/settings'
-
-const router = useRouter()
+import settings, { type OptionNode } from '../lib/settings'
 
 const props = defineProps<{
-  tplData: Object|Array<any>
-  path: (string|number)[]
+  node: OptionNode
 }>()
 
-const desc = computed(() => settings.get().extractItemDescFromComment(props.path))
-const level = computed(() => props.path.length)
-
 const expanded = ref(true)
 
+const expandable = computed(() => {
+  return props.node.level === 1 && (props.node.type === 'object' || props.node.type === 'array')
+})
+
 onMounted(() => {
-  if (level.value === 1) expanded.value = false
+  if (expandable.value) expanded.value = false
 })
 
 function onHeadClick(evt: Event) {
-  if (level.value !== 1) return
+  if (!expandable.value) return
   if (!expanded.value) {
     expanded.value = true
     // nextTick(() => {
@@ -28,38 +26,24 @@ function onHeadClick(evt: Event) {
     expanded.value = false
   }
 }
+
+const hiddenNodes = ['admin_users']
 </script>
 
 <template>
-  <div class="pf-grp" :class="[`level-${level}`, expanded ? 'expand' : '']">
-    <div v-if="level > 0" class="pf-head" @click="onHeadClick">
-      <div class="title">{{ desc.title }}</div>
-      <div v-if="!!desc.subTitle" class="sub-title">{{ desc.subTitle }}</div>
+  <div v-if="!hiddenNodes.includes(node.name)" class="pf-grp" :class="[`level-${node.level}`, expanded ? 'expand' : '']">
+    <div v-if="node.level > 0 && (node.type === 'object' || node.type === 'array')" class="pf-head" @click="onHeadClick">
+      <div class="title">{{ node.title }}</div>
+      <div v-if="!!node.subTitle" class="sub-title">{{ node.subTitle }}</div>
     </div>
     <div v-show="expanded" class="pf-body">
-      <!-- Array -->
-      <template v-if="Array.isArray(tplData)">
-        <PreferenceArr :tpl-data="tplData" :path="path" />
-      </template>
-      <!-- Object -->
-      <template v-else>
-        <div v-for="[key, value] in Object.entries(tplData)">
-          <!-- Admin Users -->
-          <template v-if="key === 'admin_users'"></template>
-          <!-- Grp -->
-          <PreferenceGrp
-            v-else-if="value !== null && typeof value === 'object'"
-            :tpl-data="value"
-            :path="[...path, key]"
-          />
-          <!-- Item Input -->
-          <PreferenceItem
-            v-else
-            :tpl-data="value"
-            :path="[...path, key]"
-          />
-        </div>
+      <!-- Grp -->
+      <template v-if="node.items">
+        <PreferenceGrp v-for="n in node.items" :key="n.path" :node="n" />
       </template>
+
+      <!-- Item -->
+      <PreferenceItem v-else :node="node" />
     </div>
   </div>
 </template>
diff --git a/ui/packages/artalk-sidebar/src/components/PreferenceItem.vue b/ui/packages/artalk-sidebar/src/components/PreferenceItem.vue
index 28b6f81f4..4805e8032 100644
--- a/ui/packages/artalk-sidebar/src/components/PreferenceItem.vue
+++ b/ui/packages/artalk-sidebar/src/components/PreferenceItem.vue
@@ -1,62 +1,58 @@
 <script setup lang="ts">
-import settings from '../lib/settings'
+import settings, { patchOptionValue, type OptionNode } from '../lib/settings'
 
 const props = defineProps<{
-  tplData: any
-  path: (string|number)[]
+  node: OptionNode
 }>()
 
-const desc = computed(() => settings.get().extractItemDescFromComment(props.path))
-const customValue = computed(() => settings.get().customs.value?.getIn(props.path) as any)
+const value = ref('')
 
-function onChange(value: boolean|string|number) {
-  // 类型转换
-  switch (typeof props.tplData) {
-    case "boolean":
-      if (value === "true") value = true
-      else if (value === "false") value = false
-      break
-    case "string":
-      value = String(value)
-      break
-    case "number":
-      if (!isNaN(Number(value))) value = Number(value)
-      break
-  }
+onBeforeMount(() => {
+  // initial value
+  value.value = settings.get().getCustom(props.node.path)
+})
 
-  settings.get().customs.value?.setIn(props.path, value)
+function onChange() {
+  const v = patchOptionValue(props.node, props.node)
+  settings.get().setCustom(props.node.path, v)
+  console.log('[SET]', props.node.path, v)
 }
 </script>
 
 <template>
   <div class="pf-item">
     <div class="info">
-      <div class="title">{{ desc.title }}</div>
-        <div v-if="!!desc.subTitle" class="sub-title">{{ desc.subTitle }}</div>
+      <div class="title">{{ node.title }}</div>
+        <div v-if="node.subTitle" class="sub-title">{{ node.subTitle }}</div>
       </div>
 
       <div class="value">
+        <!-- Array -->
+        <template v-if="node.type === 'array'">
+          <PreferenceArr :node="node" />
+        </template>
+
         <!-- 候选框 -->
-        <template v-if="desc.opts !== null">
-          <select :value="customValue" @change="onChange(($event.target as any).value)">
+        <template v-else-if="node.selector">
+          <select v-model="value" @change="onChange">
             <option
-              v-for="item in desc.opts"
+              v-for="item in node.selector"
               :value="item"
             >{{ item }}</option>
           </select>
         </template>
 
         <!-- 开关 -->
-        <template v-else-if="typeof tplData === 'boolean'">
-          <input type="checkbox" :checked="customValue" @change="onChange(($event.target as any).checked)">
+        <template v-else-if="node.type === 'boolean'">
+          <input type="checkbox" v-model="value" @change="onChange">
         </template>
 
         <!-- 文本框 -->
         <template v-else>
           <input
             type="text"
-            :value="(typeof customValue === 'undefined' || customValue === null) ? '' : String(customValue)"
-            @change="onChange(($event.target as any).value)"
+            v-model="value"
+            @change="onChange"
           />
         </template>
       </div>
diff --git a/ui/packages/artalk-sidebar/src/lib/settings-option.ts b/ui/packages/artalk-sidebar/src/lib/settings-option.ts
new file mode 100644
index 000000000..3ef13a9fe
--- /dev/null
+++ b/ui/packages/artalk-sidebar/src/lib/settings-option.ts
@@ -0,0 +1,178 @@
+import YAML from 'yaml'
+type Pair = YAML.Pair<YAML.Scalar<any>, YAML.Scalar<any> & YAML.YAMLMap<any, any>>
+
+export interface OptionNode {
+  name: string
+  path: string
+  level: number
+  default?: string | number | boolean
+  selector?: string[]
+  type: 'string'|'number'|'boolean'|'object'|'array'
+  title: string
+  subTitle?: string
+  items?: OptionNode[]
+}
+
+let f = true
+function extractItemComment(item: Pair, index: number, parentPair?: Pair): string {
+  let comment = ''
+  if (index === 0 && parentPair) comment = parentPair?.value?.commentBefore || ''
+  else comment = item?.key?.commentBefore || ''
+  return comment
+}
+
+export function getTree(yamlObj: YAML.Document.Parsed): OptionNode {
+  const tree: OptionNode = {
+    name: '',
+    path: '',
+    title: '',
+    level: 0,
+    type: 'object',
+    items: [],
+  };
+
+  const traverse = (pairs: Pair[], parentNode: OptionNode = tree, parentPath: string[] = [], parentPair?: Pair) => {
+    pairs.forEach((item, index) => {
+      // get key and value
+      const key = item.key?.value
+      const value = item.value?.toJSON ? item.value.toJSON() : undefined
+      if (!key) return
+
+      // get path
+      const path = [...parentPath, key]
+
+      // get comment
+      const comment = extractItemComment(item, index, parentPair)
+
+      // get type
+      const probablyTypes = ['string', 'number', 'boolean', 'object']
+      const type = (Array.isArray(value) ? 'array' : probablyTypes.find(t => typeof value === t)) || undefined
+
+      if (!type) return
+
+      // get default value
+      const defaultValue = (type !== 'object') ? value : undefined
+
+      // create new node
+      const node: OptionNode = {
+        name: key,
+        path: path.join('.'),
+        level: parentNode ? parentNode.level + 1 : 0,
+        ...extractComment(key, comment),
+        default: defaultValue,
+        type: type as any,
+      }
+
+      // traverse children
+      if (type === 'object' && item.value?.items) {
+        node.items = []
+        traverse(item.value.items, node, path, item)
+      }
+
+      // add to parent
+      if (!parentNode.items) parentNode.items = []
+      parentNode.items.push(node)
+    })
+  }
+
+  traverse((yamlObj.contents as YAML.YAMLMap<any, any>)?.items)
+
+  return tree
+}
+
+/**
+ * Get flatten meta data from yaml object
+ *
+ * @param yamlObj
+ * @returns
+ */
+export function getFlattenNodes(tree: OptionNode): {[path: string]: OptionNode} {
+  const metas: {[path: string]: OptionNode} = {}
+
+  const traverse = (node: OptionNode) => {
+    metas[node.path] = node
+    if (node.items) node.items.forEach(traverse)
+  }
+
+  traverse(tree)
+
+  return metas
+}
+
+/**
+ * Extract option info from comment
+ *
+ * @param name Option name
+ * @param comment Option comment in YAML
+ * @returns Option info
+ */
+function extractComment(name: string, comment: string) {
+  comment = comment.trim()
+
+  // ignore comments begin and end with `--`
+  comment = comment.replace(/--(.*?)--/gm, '')
+
+  let title = ''
+  let subTitle = ''
+  let selector: string[]|undefined
+
+  const stReg = /\(.*?\)/gm
+  title = comment.replace(stReg, '').trim()
+  const stFind = stReg.exec(comment)
+  subTitle = stFind ? stFind[0].substring(1, stFind[0].length-1) : ''
+  if (!title) {
+    const defaultTitles: any = {
+      // TODO: add i18n
+      'enabled': '启用'
+    }
+    title = defaultTitles[name] || snakeToCamel(name)
+  }
+
+  const optReg = /\[.*?\]/gm
+  const optFind = optReg.exec(title)
+  if (optFind) {
+    try { selector = JSON.parse(optFind[0]) } catch (err) { console.error(err) }
+    title = title.replace(optReg, '').trim()
+  }
+
+  return {
+    title, subTitle, selector
+  }
+}
+
+function snakeToCamel(str: string) {
+  return str.toLowerCase()
+    .replace(/([_][a-z]|^[a-z])/g, (group) =>
+      group.slice(-1).toUpperCase()
+    )
+}
+
+/**
+ * Patch the option value by meta data
+ *
+ * @param value User custom value
+ * @param meta Option meta data
+ * @returns Patched value
+ */
+export function patchOptionValue(value: any, node: OptionNode) {
+  console.log(value, node)
+  switch (node.type) {
+    case "boolean":
+      if (value === "true") value = true
+      else if (value === "false") value = false
+      break
+    case "string":
+      if (!node.selector) // ignore option item
+        value = String(value).trim()
+      break
+    case "number":
+      if (!isNaN(Number(value))) value = Number(value)
+      break
+    case "array":
+      // trim string array
+      if (Array.isArray(value)) value = value.map(v => typeof v === 'string' ? v.trim() : v)
+      break
+  }
+
+  return value
+}
diff --git a/ui/packages/artalk-sidebar/src/lib/settings.ts b/ui/packages/artalk-sidebar/src/lib/settings.ts
index c62a18c03..08c768f50 100644
--- a/ui/packages/artalk-sidebar/src/lib/settings.ts
+++ b/ui/packages/artalk-sidebar/src/lib/settings.ts
@@ -1,86 +1,65 @@
-import type YAML from 'yaml'
+import YAML from 'yaml'
+import { getFlattenNodes, getTree, type OptionNode } from './settings-option'
 
-type YAMLPair = {
-  key?: { value: string, commentBefore: string, comment: string },
-  value?: { commentBefore: string, comment: string, value?: any, items?: YAMLPair[] }
-}
+export class Settings {
+  private tree: OptionNode
+  private flatten: {[path: string]: OptionNode}
+  private customs = shallowRef<YAML.Document.Parsed<YAML.ParsedNode>>()
 
-export function createSettings(yamlObj: any) {
-  const customs = shallowRef<YAML.Document.Parsed<YAML.ParsedNode>>()
+  constructor(yamlObj: YAML.Document.Parsed) {
+    this.tree = getTree(yamlObj)
+    this.flatten = getFlattenNodes(this.tree)
+  }
 
-  const comments: { [path: string]: string } = {}
-  const defaultValues: { [path: string]: string } = {}
+  getTree() {
+    return this.tree
+  }
 
-  loop((yamlObj as any).contents.items)
+  getNode(path: string) {
+    return this.flatten[path]
+  }
 
-  function loop(pairs: YAMLPair[], parent?: YAMLPair, path?: string[]) {
-    pairs.forEach((item, index: number) => {
-      const key = item?.key?.value
-      if (!key) return
+  getCustoms() {
+    return this.customs
+  }
 
-      const itemPath = (!path) ? [key] : [...path, key]
+  setCustoms(yamlStr: string) {
+    this.customs.value = YAML.parseDocument(yamlStr)
+  }
 
-      let comment = ''
-      if (index === 0 && parent) comment = parent?.value?.commentBefore || ''
-      else comment = item?.key?.commentBefore || ''
+  getCustom(path: string) {
+    return this.customs.value?.getIn(path.split('.')) as any
+  }
 
-      const pathStr = itemPath.join('.')
-      comments[pathStr] = comment.trim()
-      defaultValues[pathStr] = item?.value?.value
+  setCustom(path: string, value: any) {
+    const pathArr = path.split('.')
 
-      // 继续迭代
-      if (item?.value?.items) {
-        loop(item.value.items, item, itemPath)
-      }
-    })
-  }
+    this.makeSureObject(pathArr)
 
-  function extractItemDescFromComment(nodePath: string|(string|number)[]) {
-    if (Array.isArray(nodePath)) nodePath = nodePath.join('.')
-    const nodeName = nodePath.split('.').slice(-1)[0]
-    let comment = (comments[nodePath] || '').trim()
-
-    // ignore comments begin and end with `--`
-    comment = comment.replace(/--(.*?)--/gm, '')
-
-    let title = ''
-    let subTitle = ''
-    let opts: string[]|null = null
-
-    const stReg = /\(.*?\)/gm
-    title = comment.replace(stReg, '').trim()
-    const stFind = stReg.exec(comment)
-    subTitle = stFind ? stFind[0].substring(1, stFind[0].length-1) : ''
-    if (!title) {
-      const commonDict: any = { 'enabled': '启用' }
-      title = commonDict[nodeName] || snakeToCamel(nodeName)
-    }
+    this.customs.value?.setIn(pathArr, value)
+  }
 
-    const optReg = /\[.*?\]/gm
-    const optFind = optReg.exec(title)
-    if (optFind) {
-      try { opts = JSON.parse(optFind[0]) } catch (err) { console.error(err) }
-      title = title.replace(optReg, '').trim()
-    }
+  // @see https://github.com/eemeli/yaml/issues/174#issuecomment-632281283
+  private makeSureObject(pathArr: string[]) {
+    for (let i = pathArr.length-1; i >= 1; i--) {
+      const parentPath = pathArr.slice(0, -i)
 
-    return {
-      title, subTitle, opts
+      const parentNode = this.customs.value?.getIn(parentPath)
+      if (!parentNode) {
+        this.customs.value?.setIn(parentPath, new YAML.YAMLMap())
+      }
     }
   }
+}
 
-  function snakeToCamel(str: string) {
-    return str.toLowerCase()
-      .replace(/([_][a-z]|^[a-z])/g, (group) =>
-        group.slice(-1).toUpperCase()
-      )
-  }
+// -------------------------------------------------------
 
-  return { comments, customs, defaultValues, extractItemDescFromComment }
-}
+export * from './settings-option'
 
-let instance: ReturnType<(typeof createSettings)>
+// Singleton instance
+let instance: Settings
 
 export default {
-  init: (yamlObj: any) => instance = createSettings(yamlObj),
+  init: (yamlObj: YAML.Document.Parsed) => instance = new Settings(yamlObj),
   get: () => instance
 }
diff --git a/ui/packages/artalk-sidebar/src/pages/settings.vue b/ui/packages/artalk-sidebar/src/pages/settings.vue
index f1f509ca7..93dcc8df8 100644
--- a/ui/packages/artalk-sidebar/src/pages/settings.vue
+++ b/ui/packages/artalk-sidebar/src/pages/settings.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import YAML from 'yaml'
+import { shallowRef } from 'vue'
 import { useNavStore } from '../stores/nav'
 import { artalk } from '../global'
-import settings from '../lib/settings'
+import settings, { type OptionNode } from '../lib/settings'
 import { storeToRefs } from 'pinia'
 import LoadingLayer from '../components/LoadingLayer.vue'
 
@@ -11,7 +12,7 @@ const router = useRouter()
 const { t } = useI18n()
 const { curtTab } = storeToRefs(nav)
 const isLoading = ref(false)
-let settingsTpl = shallowReactive({ tpl: null as any })
+const tree = shallowRef<OptionNode>()
 
 onMounted(() => {
   nav.updateTabs({
@@ -26,16 +27,16 @@ onMounted(() => {
 
   artalk!.ctx.getApi().system.getSettings().then((data) => {
     const yamlObj = YAML.parseDocument(data.template)
-    settingsTpl.tpl = yamlObj
-    settings.init(yamlObj)
-    settings.get().customs.value = YAML.parseDocument(data.custom)
+    tree.value = settings.init(yamlObj).getTree()
+    console.log(tree.value)
+    settings.get().setCustoms(data.custom)
   })
 })
 
 function save() {
   let yamlStr = ''
   try {
-    yamlStr = settings.get().customs.value?.toString() || ''
+    yamlStr = settings.get().getCustoms().value?.toString() || ''
   } catch (err) {
     alert('YAML export error: '+err)
     console.error(err)
@@ -62,17 +63,14 @@ function save() {
 </script>
 
 <template>
-  <div v-if="!!settingsTpl.tpl" class="settings">
+  <div class="settings">
     <div class="act-bar">
       <div class="status-text"></div>
       <button class="save-btn" @click="save()"><i class="atk-icon atk-icon-yes" /> {{ t('apply') }}</button>
       <LoadingLayer v-if="isLoading" />
     </div>
-    <div class="pfs">
-      <PreferenceGrp
-        :tpl-data="settingsTpl.tpl.toJS()"
-        :path="[]"
-      />
+    <div v-if="tree" class="pfs">
+      <PreferenceGrp :node="tree" />
       <div class="notice">{{ t('settingNotice') }}</div>
     </div>
   </div>