perf: interception type optimization

frontend/src/components/layout/Sider.vue

@@ -135,10 +135,10 @@ const handleFooterUpdate = (key: string, item: MenuOption) => {
   }
   if (key === "theme") {
     if (globalConfig.value.Theme === "darkTheme") {
-      store.setConfig(Object.assign({}, globalConfig.value, {Theme: "lightTheme"}))
+      store.setConfig({Theme: "lightTheme"})
       return
     }
-    store.setConfig(Object.assign({}, globalConfig.value, {Theme: "darkTheme"}))
+    store.setConfig({Theme: "darkTheme"})
 
     return
   }

frontend/src/stores/index.ts

@@ -28,6 +28,7 @@ export const useIndexStore = defineStore("index-store", () => {
         TaskNumber: 8,
         UserAgent: "",
         UseHeaders: "",
+        MimeMap: {}
     })
 
     const envInfo = ref({
@@ -63,7 +64,7 @@ export const useIndexStore = defineStore("index-store", () => {
         })
     }
 
-    const setConfig = (formValue: appType.Config) => {
+    const setConfig = (formValue: Object) => {
         globalConfig.value = Object.assign({}, globalConfig.value, formValue)
         appApi.setConfig(globalConfig.value)
     }

frontend/src/types/app.d.ts

@@ -6,6 +6,11 @@ export namespace appType {
         Copyright: string
     }
 
+    interface MimeMap {
+        Type: string
+        Suffix: string
+    }
+
     interface Config {
         Theme: string
         Host: string
@@ -22,6 +27,7 @@ export namespace appType {
         TaskNumber: number
         UserAgent: string
         UseHeaders: string
+        MimeMap:  {[key: string]: MimeMap}
     }
 
     interface MediaInfo {

frontend/src/views/index.vue

@@ -5,7 +5,7 @@
         <NButton v-if="isProxy" secondary type="primary" @click.stop="close" style="--wails-draggable:no-drag">关闭代理</NButton>
         <NButton v-else tertiary type="tertiary" @click.stop="open" style="--wails-draggable:no-drag">开启代理</NButton>
         <NButton tertiary type="error" @click.stop="clear" style="--wails-draggable:no-drag">清空列表</NButton>
-        <NSelect style="min-width: 100px;--wails-draggable:no-drag" placeholder="拦截类型" v-model:value="resourcesType" multiple clearable :max-tag-count="3" :options="options"></NSelect>
+        <NSelect style="min-width: 100px;--wails-draggable:no-drag" placeholder="拦截类型" v-model:value="resourcesType" multiple clearable :max-tag-count="3" :options="classify"></NSelect>
         <NButton tertiary type="info" @click.stop="batchDown" style="--wails-draggable:no-drag">批量下载</NButton>
         <NButton tertiary type="info" @click.stop="batchImport" style="--wails-draggable:no-drag">批量导出</NButton>
         <NButton tertiary type="info" @click.stop="showImport=true" style="--wails-draggable:no-drag">批量导入</NButton>
@@ -34,7 +34,7 @@
 
 <script lang="ts" setup>
 import {NButton, NImage, NTooltip} from "naive-ui"
-import {computed, h, onMounted, ref, watch, provide} from "vue"
+import {computed, h, onMounted, ref, watch} from "vue"
 import type {appType} from "@/types/app"
 
 import type {DataTableRowKey, ImageRenderToolbarProps} from "naive-ui"
@@ -61,37 +61,24 @@ const tableHeight = computed(() => {
   return store.tableHeight - 132
 })
 const resourcesType = ref<string[]>(["all"])
-const options = [
+const classifyAlias: {[key: string]: string} = {
+  image: "图片",
+  audio: "音频",
+  video: "视频",
+  m3u8: "m3u8",
+  live: "直播流",
+  xls: "表格",
+  doc: "文档",
+  pdf: "pdf",
+  font: "字体"
+}
+const classify = ref([
   {
     value: "all",
     label: "全部",
   },
-  {
-    value: "image",
-    label: "图片",
-  }, {
-    value: "audio",
-    label: "音频"
-  }, {
-    value: "video",
-    label: "视频"
-  }, {
-    value: "m3u8",
-    label: "m3u8"
-  }, {
-    value: "live",
-    label: "直播流"
-  }, {
-    value: "xls",
-    label: "表格"
-  }, {
-    value: "doc",
-    label: "文档"
-  }, {
-    value: "pdf",
-    label: "pdf"
-  }
-]
+])
+
 const columns = ref<any[]>([
   {
     type: "selection",
@@ -103,15 +90,15 @@ const columns = ref<any[]>([
   {
     title: "类型",
     key: "Classify",
-    filterOptions: Array.from(options).slice(1),
+    filterOptions: Array.from(classify.value).slice(1),
     filterMultiple: true,
     filter: (value: string, row: appType.MediaInfo) => {
       return !!~row.Classify.indexOf(String(value))
     },
     render: (row: appType.MediaInfo) => {
-      for (const key in options) {
-        if (options[key].value === row.Classify) {
-          return options[key].label;
+      for (const key in classify.value) {
+        if (classify.value[key].value === row.Classify) {
+          return classify.value[key].label;
         }
       }
       return row.Classify;
@@ -226,6 +213,8 @@ const showImport = ref(false)
 const showPassword = ref(false)
 
 onMounted(() => {
+  buildClassify()
+
   const temp = localStorage.getItem("resources-type")
   if (temp) {
     resourcesType.value = JSON.parse(temp).res
@@ -280,11 +269,35 @@ onMounted(() => {
   })
 })
 
+watch(()=>{
+  return store.globalConfig.MimeMap
+}, ()=>{
+  buildClassify()
+})
+
 watch(resourcesType, (n, o) => {
   localStorage.setItem("resources-type", JSON.stringify({res: resourcesType.value}))
   appApi.setType(resourcesType.value)
 })
 
+const buildClassify = ()=>{
+  const mimeMap = store.globalConfig.MimeMap ?? {}
+  const seen = new Set()
+  classify.value = [
+    {value: "all", label: "全部"},
+    ...Object.values(mimeMap)
+        .filter(({Type}) => {
+          if (seen.has(Type)) return false;
+          seen.add(Type);
+          return true;
+        })
+        .map(({Type}) => ({
+          value: Type,
+          label: classifyAlias[Type] ?? Type,
+        })),
+  ]
+}
+
 const dataAction = (row: appType.MediaInfo, index: number, type: string) => {
   switch (type) {
     case "down":

frontend/src/views/setting.vue

@@ -7,10 +7,10 @@
         label-width="auto"
         require-mark-placement="right-hanging"
         style="--wails-draggable:no-drag"
-        class="px-5 py-5"
+        class="px-5 py-5 w-3/4"
     >
       <NFormItem label="代理Host" path="Port" size="small">
-        <NInput v-model:value="formValue.Host" placeholder="127.0.0.1" style="width:256px"/>
+        <NInput v-model:value="formValue.Host" placeholder="127.0.0.1"/>
         <NTooltip trigger="hover">
           <template #trigger>
             <NIcon size="20" class="pl-1">
@@ -21,7 +21,7 @@
         </NTooltip>
       </NFormItem>
       <NFormItem label="代理端口" path="Port" size="small">
-        <NInput v-model:value="formValue.Port" placeholder="8899" style="width:256px"/>
+        <NInput v-model:value="formValue.Port" placeholder="8899"/>
         <NTooltip trigger="hover">
           <template #trigger>
             <NIcon size="20" class="pl-1">
@@ -31,70 +31,36 @@
           <span>如果不清楚保持默认就行，修改后请重启软件</span>
         </NTooltip>
       </NFormItem>
-      <NFormItem label="保存位置" path="SaveDirectory" size="small">
-        <NSpace>
-          <NInput :value="formValue.SaveDirectory" placeholder="保存位置" style="width:256px"/>
+
+      <div class="flex flex-row justify-between">
+        <NFormItem label="保存位置" path="SaveDirectory" size="small">
+          <NInput :value="formValue.SaveDirectory" placeholder="保存位置"/>
           <NButton strong secondary type="success" @click="selectDir">选择</NButton>
-        </NSpace>
-      </NFormItem>
-      <NFormItem label="文件命名" path="FilenameLen" size="small">
-        <NInputNumber v-model:value="formValue.FilenameLen" :min="0" :max="9999" placeholder="0" style="width:256px"/>
-        <NSwitch class="pl-1" v-model:value="formValue.FilenameTime" aria-placeholder="随机数">
-          <template #checked>
-            是
-          </template>
-          <template #unchecked>
-            否
-          </template>
-        </NSwitch>
-        <NTooltip trigger="hover">
-          <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
-            </NIcon>
-          </template>
-          <span>输入框控制文件命名的长度(不含时间、0为无效，此选项有描述信息时有效)，开关控制文件末尾是否添加时间标识</span>
-        </NTooltip>
-      </NFormItem>
-      <NFormItem label="主题" path="theme" size="small">
-        <NRadio :checked="formValue.Theme === 'lightTheme'" value="lightTheme" name="theme" @change="handleChange">浅色主题</NRadio>
-        <NRadio :checked="formValue.Theme === 'darkTheme'" value="darkTheme" name="theme" @change="handleChange">深色主题</NRadio>
-      </NFormItem>
-      <NFormItem label="自动拦截" path="AutoProxy" size="small">
-        <NSwitch v-model:value="formValue.AutoProxy" />
-        <NTooltip trigger="hover">
-          <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
-            </NIcon>
-          </template>
-          <span>打开软件时动启用拦截</span>
-        </NTooltip>
-      </NFormItem>
-      <NFormItem label="清晰度" path="Quality" size="small">
-        <NSelect v-model:value="formValue.Quality" :options="options" class="w-64" />
-        <NTooltip trigger="hover">
-          <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
-            </NIcon>
-          </template>
-          <span>视频号有效</span>
-        </NTooltip>
-      </NFormItem>
-      <NFormItem label="全量拦截" path="Quality" size="small">
-        <NSwitch v-model:value="formValue.WxAction" />
-        <NTooltip trigger="hover">
-          <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
-            </NIcon>
-          </template>
-          <span>微信视频号是否全量拦截，否：只拦截视频详情</span>
-        </NTooltip>
-      </NFormItem>
+        </NFormItem>
+        <NFormItem label="文件命名" path="FilenameLen" size="small">
+          <NInputNumber v-model:value="formValue.FilenameLen" :min="0" :max="9999" placeholder="0"/>
+          <NSwitch class="pl-1" v-model:value="formValue.FilenameTime" aria-placeholder="随机数">
+            <template #checked>
+              是
+            </template>
+            <template #unchecked>
+              否
+            </template>
+          </NSwitch>
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NIcon size="20" class="pl-1">
+                <HelpCircleOutline />
+              </NIcon>
+            </template>
+            <span>输入框控制文件命名的长度(不含时间、0为无效，此选项有描述信息时有效)，开关控制文件末尾是否添加时间标识</span>
+          </NTooltip>
+        </NFormItem>
+      </div>
+
+
       <NFormItem label="上游代理" path="UpstreamProxy" size="small">
-        <NInput v-model:value="formValue.UpstreamProxy" placeholder="例如: http://127.0.0.1:7890" style="width:256px"/>
+        <NInput v-model:value="formValue.UpstreamProxy" placeholder="例如: http://127.0.0.1:7890"/>
         <NSwitch class="pl-1" v-model:value="formValue.OpenProxy" />
         <NTooltip trigger="hover">
           <template #trigger>
@@ -105,17 +71,62 @@
           <span>可结合其他代理工具，用于访问国外网站、以及正常网络无法访问的资源(格式http://username:password@your.proxy.server:port)</span>
         </NTooltip>
       </NFormItem>
-      <NFormItem label="下载代理" path="DownloadProxy" size="small">
-        <NSwitch v-model:value="formValue.DownloadProxy" />
-        <NTooltip trigger="hover">
-          <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
-            </NIcon>
-          </template>
-          <span>进行下载时使用代理请求</span>
-        </NTooltip>
-      </NFormItem>
+
+      <div class="flex flex-row justify-between">
+        <NFormItem label="下载代理" path="DownloadProxy" size="small">
+          <NSwitch v-model:value="formValue.DownloadProxy" />
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NIcon size="20" class="pl-1">
+                <HelpCircleOutline />
+              </NIcon>
+            </template>
+            <span>进行下载时使用代理请求</span>
+          </NTooltip>
+        </NFormItem>
+
+        <NFormItem label="自动拦截" path="AutoProxy" size="small">
+          <NSwitch v-model:value="formValue.AutoProxy" />
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NIcon size="20" class="pl-1">
+                <HelpCircleOutline />
+              </NIcon>
+            </template>
+            <span>打开软件时动启用拦截</span>
+          </NTooltip>
+        </NFormItem>
+        <NFormItem label="全量拦截" path="Quality" size="small">
+          <NSwitch v-model:value="formValue.WxAction" />
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NIcon size="20" class="pl-1">
+                <HelpCircleOutline />
+              </NIcon>
+            </template>
+            <span>微信视频号是否全量拦截，否：只拦截视频详情</span>
+          </NTooltip>
+        </NFormItem>
+      </div>
+
+      <div class="flex flex-row justify-between">
+        <NFormItem label="主题" path="theme" size="small">
+          <NRadio :checked="formValue.Theme === 'lightTheme'" value="lightTheme" name="theme" @change="handleChange">浅色</NRadio>
+          <NRadio :checked="formValue.Theme === 'darkTheme'" value="darkTheme" name="theme" @change="handleChange">深色</NRadio>
+        </NFormItem>
+        <NFormItem label="清晰度" path="Quality" size="small">
+          <NSelect v-model:value="formValue.Quality" :options="options" class="w-64" />
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NIcon size="20" class="pl-1">
+                <HelpCircleOutline />
+              </NIcon>
+            </template>
+            <span>视频号有效</span>
+          </NTooltip>
+        </NFormItem>
+      </div>
+
       <NFormItem label="连接数" path="TaskNumber" size="small">
         <NInputNumber v-model:value="formValue.TaskNumber" :min="2" :max="64" class="w-64"/>
         <NTooltip trigger="hover">
@@ -127,8 +138,9 @@
           <span>如不清楚请保持默认，通常CPU核心数*2，用于分片下载</span>
         </NTooltip>
       </NFormItem>
+
       <NFormItem label="UserAgent" path="UserAgent" size="small">
-        <NInput v-model:value="formValue.UserAgent" style="width:256px" placeholder=""/>
+        <NInput v-model:value="formValue.UserAgent" placeholder=""/>
         <NTooltip trigger="hover">
           <template #trigger>
             <NIcon size="20" class="pl-1">
@@ -139,7 +151,7 @@
         </NTooltip>
       </NFormItem>
       <NFormItem label="UseHeaders" path="UseHeaders" size="small">
-        <NInput v-model:value="formValue.UseHeaders" style="width:256px" placeholder=""/>
+        <NInput v-model:value="formValue.UseHeaders" placeholder=""/>
         <NTooltip trigger="hover">
           <template #trigger>
             <NIcon size="20" class="pl-1">
@@ -149,6 +161,17 @@
           <span>3.0.4版本缓存了请求header信息，这个参数定义在下载时可使用的header参数:  ,分割</span>
         </NTooltip>
       </NFormItem>
+      <NFormItem label="MimeMap" path="MimeMap" size="small">
+        <NInput v-model:value="MimeMap" type="textarea" :autosize="{ minRows: 5, maxRows: 8 }" placeholder=""/>
+        <NTooltip trigger="hover">
+          <template #trigger>
+            <NIcon size="20" class="pl-1">
+              <HelpCircleOutline />
+            </NIcon>
+          </template>
+          <span>拦截规则json配置(不清楚的请勿改动)： {"content-type": { "Type": "分类名称","Suffix": "后缀"}}</span>
+        </NTooltip>
+      </NFormItem>
     </NForm>
   </div>
 </template>
@@ -183,10 +206,18 @@ const options = [
 
 const formValue = ref<appType.Config>(Object.assign({}, store.globalConfig))
 
+const MimeMap = ref(formValue.value.MimeMap ? JSON.stringify(formValue.value.MimeMap, null, 2) : "" )
+
 watch(formValue.value, () => {
-  store.setConfig(Object.assign({}, store.globalConfig, formValue.value))
+  store.setConfig(formValue.value)
 }, {deep: true})
 
+watch(MimeMap, () => {
+  store.setConfig({
+    MimeMap: JSON.parse(MimeMap.value)
+  })
+})
+
 watch(()=>{
   return store.globalConfig.Theme
 }, ()=>{