feat: Adjust UI component linkage.

src/ui/src/router/index.js

@@ -13,15 +13,12 @@ const routes = [
     {
         path: '/about',
         name: 'about',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+        component: () => import( '../views/AboutView.vue')
     },
     {
         path: '/setting',
         name: 'setting',
-        component: () => import(/* webpackChunkName: "setting" */ '../views/SettingView.vue')
+        component: () => import('../views/SettingView.vue')
     }
 ]
 

src/ui/src/views/SettingView.vue

@@ -1,28 +1,31 @@
 <template>
 
+  <v-form>
     <v-list subheader flat two-line>
       <v-subheader>网络代理</v-subheader>
 
       <v-list-item>
-      <v-switch v-model="proxyEnabled" label="启用代理"/>
+        <v-switch label="启用代理" @change="proxyEnabledChange" v-model="isProxyEnabled"/>
       </v-list-item>
       <v-list-item>
-      <v-text-field :disabled="'false'" v-model="proxyHost" label="代理地址" placeholder="请输入代理服务器的地址，例如 127.0.0.1:1080。"/>
+        <v-text-field :disabled="proxyEnabled" v-model="proxyAddress" label="代理地址"
+                      placeholder="请输入代理服务器的地址，例如 127.0.0.1:1080。"/>
       </v-list-item>
       <v-list-item>
-      <v-text-field :disabled="'false'" v-model="proxyPort" label="更新检查地址" placeholder="请输入更新检查地址，默认情况下无需变更。"/>
+        <v-text-field :disabled="proxyEnabled" v-model="updateAddress" label="更新检查地址"
+                      placeholder="请输入更新检查地址，默认情况下无需变更。"/>
       </v-list-item>
 
       <v-divider></v-divider>
       <v-subheader>全局下载设置</v-subheader>
       <v-list-item>
-      <v-switch label="是否启用翻译歌词" v-model="translateLrc"/>
+        <v-switch label="是否启用翻译歌词"/>
       </v-list-item>
       <v-list-item>
-      <v-switch label="仅输出翻译歌词" v-model="onlyTranslateLrc"/>
+        <v-switch label="仅输出翻译歌词"/>
       </v-list-item>
       <v-list-item>
-      <v-switch label="跳过歌词文件已存在的歌曲" v-model="skipExistLrc"/>
+        <v-switch label="跳过歌词文件已存在的歌曲"/>
       </v-list-item>
       <v-list-item>
         <v-switch label="双语歌词合并展示" v-model="mergeLrc"/>
@@ -50,7 +53,7 @@
               <v-data-table hide-default-footer :headers="lyricDownloaderHeaders" :items="lyricDownloader"
                             class="elevation-1" disable-sort>
                 <template v-slot:item.enabled="{ item }">
-                <v-simple-checkbox v-model="item.isEnabled" color="primary"/>
+                  <v-simple-checkbox v-model="item.enabled" color="primary"/>
                 </template>
               </v-data-table>
             </v-list-item>
@@ -62,7 +65,7 @@
               <v-data-table hide-default-footer :headers="tagParserHeaders" :items="tagParser" class="elevation-1"
                             disable-sort>
                 <template v-slot:item.enabled="{ item }">
-                <v-simple-checkbox v-model="item.enabled"></v-simple-checkbox>
+                  <v-simple-checkbox v-model="item.enabled" color="primary"></v-simple-checkbox>
                 </template>
               </v-data-table>
             </v-list-item>
@@ -73,11 +76,12 @@
       <v-divider class="mt-5"></v-divider>
       <v-subheader>屏蔽字典</v-subheader>
       <v-list-item>
-      <v-switch label="启用屏蔽字典" v-model="enableBlockDict"/>
+        <v-switch label="启用屏蔽字典" v-model="isBlockDictEnabled" @change="blockDictEnabledChange"/>
       </v-list-item>
       <v-list-item>
-      <v-text-field v-model="blockDict" label="屏蔽字典路径" placeholder="请选择屏蔽字典的文件路径。"/>
-      <v-btn icon @click="openBlockDict">
+        <v-text-field :disabled="blockDictEnabled" v-model="blockDictPath" label="屏蔽字典路径"
+                      placeholder="请选择屏蔽字典的文件路径。"/>
+        <v-btn :disabled="blockDictEnabled" icon @click="openBlockDict">
           <v-icon>mdi-folder</v-icon>
         </v-btn>
       </v-list-item>
@@ -90,6 +94,7 @@
       </v-list-item>
 
     </v-list>
+  </v-form>
 
 </template>
 
@@ -98,9 +103,13 @@ export default {
   name: "Setting",
   data: () => {
     return {
+      isProxyEnabled: true,
       proxyEnabled: false,
-      proxyHost: "",
-      proxyPort: "",
+      isBlockDictEnabled: true,
+      blockDictEnabled: false,
+      blockDictPath: "",
+      proxyAddress: "",
+      updateAddress: "",
       mergeLrc: false,
       lineBreak: "lf",
       lineBreakOptions: [
@@ -109,13 +118,13 @@ export default {
       ],
       lrcEncoding: "utf-8",
       lyricDownloaderHeaders: [
-        {text: "启用", value: "isEnabled"},
+        {text: "启用", value: "enabled"},
         {text: "歌词源", value: "name"},
         {text: "搜索深度", value: "searchDepth"},
         {text: "优先级", value: "priority"},
       ],
       lyricDownloader: [
-        {isEnabled: true, name: "网易云音乐", searchDepth: 10, priority: 1},
+        {enabled: true, name: "网易云音乐", searchDepth: 10, priority: 1},
       ],
       tagParserHeaders: [
         {text: "启用", value: "enabled", sortable: false, width: "10%"},
@@ -127,6 +136,13 @@ export default {
     }
   },
   computed: {},
-  methods: {},
+  methods: {
+    proxyEnabledChange() {
+      this.proxyEnabled = !this.proxyEnabled;
+    },
+    blockDictEnabledChange() {
+      this.blockDictEnabled = !this.blockDictEnabled;
+    }
+  },
 };
 </script>