upd(setting): use tabs

src/renderer/components/Setting.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="editor-wrapper" @click.stop>
     <h3>{{$t('setting-panel.setting')}}</h3>
+    <group-tabs :tabs="tabs" v-model="tab" />
     <div ref="refEditor" class="editor" @click="onClick" />
     <div class="action">
       <button class="btn" @click="cancel">{{$t('cancel')}}</button>
@@ -11,7 +12,7 @@
 
 <script lang="ts">
 import { useStore } from 'vuex'
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { JSONEditor } from '@json-editor/json-editor'
 import * as api from '@fe/support/api'
 import { useToast } from '@fe/support/ui/toast'
@@ -21,17 +22,30 @@ import { fetchSettings, getSchema, writeSettings } from '@fe/services/setting'
 import { registerHook, removeHook } from '@fe/core/hook'
 import { basename } from '@fe/utils/path'
 import { getPurchased, showPremium } from '@fe/others/premium'
+import GroupTabs from '@fe/components/GroupTabs.vue'
+import { BuildInSettings } from '@fe/types'
 
 JSONEditor.defaults.language = 'en'
 
+type Tab = {
+  label: 'repos' | 'appearance' | 'other',
+  value: string,
+}
+
 export default defineComponent({
   name: 'x-filter',
-  components: {},
+  components: { GroupTabs },
   setup (_, { emit }) {
     const store = useStore()
     const { t } = useI18n()
     const toast = useToast()
-    const refEditor = ref(null)
+    const refEditor = ref<HTMLElement>()
+    const tab = ref<Tab['label']>('repos')
+    const tabs: Tab[] = [
+      { label: t('setting-panel.tabs.repos') as any, value: 'repos' },
+      { label: t('setting-panel.tabs.appearance') as any, value: 'appearance' },
+      { label: t('setting-panel.tabs.other') as any, value: 'other' },
+    ]
 
     const show = computed(() => store.state.showSetting)
 
@@ -84,6 +98,7 @@ export default defineComponent({
       })
 
       editor.setValue(value)
+      updateTab()
     })
 
     setLanguage()
@@ -143,7 +158,27 @@ export default defineComponent({
       }
     }
 
-    return { show, refEditor, cancel, ok, onClick }
+    function updateTab () {
+      const group: Record<Tab['label'], (keyof BuildInSettings)[]> = {
+        repos: ['repos'],
+        appearance: ['theme', 'language', 'custom-css'],
+        other: ['assets-dir', 'shell', 'plugin.image-hosting-picgo.server-url', 'plugin.image-hosting-picgo.enable-paste-image']
+      }
+
+      refEditor.value?.querySelectorAll<HTMLElement>('.row').forEach(row => {
+        const schemaPath = (row.firstElementChild?.getAttribute('data-schemapath') || '').replace('root.', '')
+
+        if (group[tab.value].includes(schemaPath as any)) {
+          row.hidden = false
+        } else {
+          row.hidden = true
+        }
+      })
+    }
+
+    watch(tab, updateTab)
+
+    return { tab, tabs, show, refEditor, cancel, ok, onClick }
   },
 })
 </script>
@@ -167,11 +202,17 @@ export default defineComponent({
   max-height: 50vh;
   overflow: auto;
 
+  ::v-deep(div[data-schematype="array"] > .je-header),
   &> ::v-deep(div > .je-header),
   ::v-deep(.je-object__controls){
     display: none;
   }
 
+  ::v-deep(div[data-schematype="array"] > .je-indented-panel) {
+    padding: 0;
+    margin: 0;
+  }
+
   ::v-deep(.je-header) {
     margin: 0;
   }

src/share/i18n/languages/en.ts

@@ -301,6 +301,11 @@ const data = {
     'add': 'Add %s',
     'delete-warning': 'Are you sure you want to remove this node?',
     'error-choose-repo-path': 'Please choose repository path',
+    'tabs': {
+      'repos': 'Repositories',
+      'appearance': 'Appearance',
+      'other': 'Other',
+    },
     'schema': {
       'repos': {
         'repos': 'Repositories',

src/share/i18n/languages/zh-CN.ts

@@ -318,6 +318,11 @@ const data: BaseLanguage = {
       'assets-desc': '支持相对路径和绝对路径（限于仓库内部）,可用变量：docSlug, date',
       'shell': 'Shell',
     },
+    'tabs': {
+      'repos': '仓库',
+      'appearance': '外观',
+      'other': '其他',
+    },
   },
   'quick-open': {
     'input-placeholder': '键入字符……',