perf: set page optimization

frontend/components.d.ts

@@ -32,6 +32,7 @@ declare module 'vue' {
     NModalProvider: typeof import('naive-ui')['NModalProvider']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']

frontend/src/components/layout/Sider.vue

@@ -2,7 +2,7 @@
   <div class="flex pb-2 flex-col h-full min-w-[80px] border-r border-slate-100 dark:border-slate-900">
     <Screen v-if="envInfo.platform!=='darwin'"></Screen>
     <div class="w-full flex flex-row items-center justify-center pt-5 ml-[-5px]" :class="envInfo.platform==='darwin' ? 'pt-8' : 'pt-2'">
-      <img class="w-12 h-12 cursor-pointer" src="@/assets/image/logo.png"  alt="res-downloader logo"/>
+      <img class="w-12 h-12 cursor-pointer" src="@/assets/image/logo.png"  alt="res-downloader logo" @click="handleFooterUpdate('github')"/>
     </div>
     <main class="flex-1 flex-grow-1 mb-5 overflow-auto flex flex-col pt-1 items-center h-full">
       <NScrollbar :size="1">
@@ -119,11 +119,11 @@ const footerOptions = ref([
   },
 ])
 
-const handleUpdateValue = (key: string, item: MenuOption) => {
+const handleUpdateValue = (key: string, item?: MenuOption) => {
   menuValue.value = key
   return router.push({path: "/" + key})
 }
-const handleFooterUpdate = (key: string, item: MenuOption) => {
+const handleFooterUpdate = (key: string, item?: MenuOption) => {
   if (key === "about") {
     showAppInfo.value = true
     return

frontend/src/views/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col px-5 py-5">
+  <div class="flex flex-col p-5">
     <div class="pb-2 z-40">
       <NSpace>
         <NButton v-if="isProxy" secondary type="primary" @click.stop="close" style="--wails-draggable:no-drag">关闭代理</NButton>

frontend/src/views/setting.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full relative">
+  <div class="h-full relative p-5 overflow-y-auto [&::-webkit-scrollbar]:hidden">
     <NForm
         :model="formValue"
         size="medium"
@@ -7,169 +7,173 @@
         label-width="auto"
         require-mark-placement="right-hanging"
         style="--wails-draggable:no-drag"
-        class="px-5 py-5 w-3/4"
+        class="w-[700px]"
     >
-      <NFormItem label="代理Host" path="Port" size="small">
+      <NFormItem label="Host" path="Host">
         <NInput v-model:value="formValue.Host" placeholder="127.0.0.1"/>
         <NTooltip trigger="hover">
           <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
+            <NIcon size="18" class="ml-1 text-gray-500">
+              <HelpCircleOutline/>
             </NIcon>
           </template>
-          <span>如果不清楚保持默认就行，修改后请重启软件</span>
+          如果不清楚请保持默认，修改后请重启软件
         </NTooltip>
       </NFormItem>
-      <NFormItem label="代理端口" path="Port" size="small">
+
+      <NFormItem label="Port" path="Port">
         <NInput v-model:value="formValue.Port" placeholder="8899"/>
         <NTooltip trigger="hover">
           <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
+            <NIcon size="18" class="ml-1 text-gray-500">
+              <HelpCircleOutline/>
             </NIcon>
           </template>
-          <span>如果不清楚保持默认就行，修改后请重启软件</span>
+          如果不清楚保持默认，修改后请重启软件
         </NTooltip>
       </NFormItem>
 
-      <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>
-        </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">
+      <NFormItem label="上游代理" path="UpstreamProxy">
         <NInput v-model:value="formValue.UpstreamProxy" placeholder="例如: http://127.0.0.1:7890"/>
-        <NSwitch class="pl-1" v-model:value="formValue.OpenProxy" />
+        <NSwitch v-model:value="formValue.OpenProxy" class="ml-1"/>
         <NTooltip trigger="hover">
           <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
+            <NIcon size="18" class="ml-1 text-gray-500">
+              <HelpCircleOutline/>
             </NIcon>
           </template>
-          <span>可结合其他代理工具，用于访问国外网站、以及正常网络无法访问的资源(格式http://username:password@your.proxy.server:port)</span>
+          可结合其他代理工具，用于访问国外网站、以及正常网络无法访问的资源
         </NTooltip>
       </NFormItem>
 
-      <div class="flex flex-row justify-between">
-        <NFormItem label="下载代理" path="DownloadProxy" size="small">
-          <NSwitch v-model:value="formValue.DownloadProxy" />
+      <div class="grid grid-cols-3 gap-4">
+        <NFormItem label="下载代理" path="DownloadProxy">
+          <NSwitch v-model:value="formValue.DownloadProxy"/>
           <NTooltip trigger="hover">
             <template #trigger>
-              <NIcon size="20" class="pl-1">
-                <HelpCircleOutline />
+              <NIcon size="18" class="ml-1 text-gray-500">
+                <HelpCircleOutline/>
               </NIcon>
             </template>
-            <span>进行下载时使用代理请求</span>
+            进行下载时使用代理请求
           </NTooltip>
         </NFormItem>
 
-        <NFormItem label="自动拦截" path="AutoProxy" size="small">
-          <NSwitch v-model:value="formValue.AutoProxy" />
+        <NFormItem label="自动拦截" path="AutoProxy">
+          <NSwitch v-model:value="formValue.AutoProxy"/>
           <NTooltip trigger="hover">
             <template #trigger>
-              <NIcon size="20" class="pl-1">
-                <HelpCircleOutline />
+              <NIcon size="18" class="ml-1 text-gray-500">
+                <HelpCircleOutline/>
               </NIcon>
             </template>
-            <span>打开软件时动启用拦截</span>
+            打开软件时自动启用拦截
           </NTooltip>
         </NFormItem>
-        <NFormItem label="全量拦截" path="Quality" size="small">
-          <NSwitch v-model:value="formValue.WxAction" />
+
+        <NFormItem label="全量拦截" path="WxAction">
+          <NSwitch v-model:value="formValue.WxAction"/>
           <NTooltip trigger="hover">
             <template #trigger>
-              <NIcon size="20" class="pl-1">
-                <HelpCircleOutline />
+              <NIcon size="18" class="ml-1 text-gray-500">
+                <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>
+      <div class="grid grid-cols-2 gap-4">
+        <NFormItem label="保存位置" path="SaveDirectory">
+          <NInput :value="formValue.SaveDirectory" placeholder="保存位置"/>
+          <NButton strong secondary type="primary" @click="selectDir" class="ml-1">选择</NButton>
         </NFormItem>
-        <NFormItem label="清晰度" path="Quality" size="small">
-          <NSelect v-model:value="formValue.Quality" :options="options" class="w-64" />
+        <NFormItem label="文件命名" path="FilenameLen">
+          <NInputNumber v-model:value="formValue.FilenameLen" :min="0" :max="9999" placeholder="0"/>
+          <NSwitch v-model:value="formValue.FilenameTime" class="ml-1"></NSwitch>
           <NTooltip trigger="hover">
             <template #trigger>
-              <NIcon size="20" class="pl-1">
-                <HelpCircleOutline />
+              <NIcon size="18" class="ml-1 text-gray-500">
+                <HelpCircleOutline/>
               </NIcon>
             </template>
-            <span>视频号有效</span>
+            输入框控制文件命名的长度(不含时间、0为无效)，开关控制文件末尾是否添加时间标识
           </NTooltip>
         </NFormItem>
       </div>
 
-      <NFormItem label="连接数" path="TaskNumber" size="small">
-        <NInputNumber v-model:value="formValue.TaskNumber" :min="2" :max="64" class="w-64"/>
+      <div class="grid grid-cols-3 gap-4">
+        <NFormItem label="主题" path="theme">
+          <NRadioGroup v-model:value="formValue.Theme" name="theme">
+            <NRadio value="lightTheme">浅色</NRadio>
+            <NRadio value="darkTheme">深色</NRadio>
+          </NRadioGroup>
+        </NFormItem>
+
+        <NFormItem label="清晰度" path="Quality">
+          <NSelect v-model:value="formValue.Quality" :options="options"/>
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NIcon size="18" class="ml-1 text-gray-500">
+                <HelpCircleOutline/>
+              </NIcon>
+            </template>
+            视频号有效
+          </NTooltip>
+        </NFormItem>
+
+        <NFormItem label="连接数" path="TaskNumber">
+          <NInputNumber v-model:value="formValue.TaskNumber" :min="2" :max="64"/>
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NIcon size="18" class="ml-1 text-gray-500">
+                <HelpCircleOutline/>
+              </NIcon>
+            </template>
+            如不清楚请保持默认，通常CPU核心数*2，用于分片下载
+          </NTooltip>
+        </NFormItem>
+      </div>
+
+      <NFormItem label="UserAgent" path="UserAgent">
+        <NInput v-model:value="formValue.UserAgent" placeholder="默认UserAgent"/>
         <NTooltip trigger="hover">
           <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
+            <NIcon size="18" class="ml-1 text-gray-500">
+              <HelpCircleOutline/>
             </NIcon>
           </template>
-          <span>如不清楚请保持默认，通常CPU核心数*2，用于分片下载</span>
+          如不清楚请保持默认
         </NTooltip>
       </NFormItem>
 
-      <NFormItem label="UserAgent" path="UserAgent" size="small">
-        <NInput v-model:value="formValue.UserAgent" placeholder=""/>
+      <NFormItem label="Headers" path="Headers">
+        <NInput v-model:value="formValue.UseHeaders" placeholder="User-Agent,Referer,Authorization,Cookie"/>
         <NTooltip trigger="hover">
           <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
+            <NIcon size="18" class="ml-1 text-gray-500">
+              <HelpCircleOutline/>
             </NIcon>
           </template>
-          <span>如不清楚请保持默认</span>
+          定义下载时可使用的header参数，逗号分割
         </NTooltip>
       </NFormItem>
-      <NFormItem label="UseHeaders" path="UseHeaders" size="small">
-        <NInput v-model:value="formValue.UseHeaders" placeholder=""/>
+
+      <NFormItem label="拦截规则" path="MimeMap">
+        <NInput
+            v-model:value="MimeMap"
+            type="textarea"
+            rows="11"
+            placeholder='{"content-type": { "Type": "分类名称","Suffix": "后缀"}}'
+        />
         <NTooltip trigger="hover">
           <template #trigger>
-            <NIcon size="20" class="pl-1">
-              <HelpCircleOutline />
+            <NIcon size="18" class="ml-1 text-gray-500">
+              <HelpCircleOutline/>
             </NIcon>
           </template>
-          <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>
+          拦截规则JSON配置，不清楚请勿改动
         </NTooltip>
       </NFormItem>
     </NForm>
@@ -206,7 +210,7 @@ const options = [
 
 const formValue = ref<appType.Config>(Object.assign({}, store.globalConfig))
 
-const MimeMap = ref(formValue.value.MimeMap ? JSON.stringify(formValue.value.MimeMap, null, 2) : "" )
+const MimeMap = ref(formValue.value.MimeMap ? JSON.stringify(formValue.value.MimeMap, null, 2) : "")
 
 watch(formValue.value, () => {
   store.setConfig(formValue.value)
@@ -218,16 +222,12 @@ watch(MimeMap, () => {
   })
 })
 
-watch(()=>{
+watch(() => {
   return store.globalConfig.Theme
-}, ()=>{
+}, () => {
   formValue.value.Theme = store.globalConfig.Theme
 })
 
-const handleChange = (e: Event)=>{
-  formValue.value.Theme = (e.target as HTMLInputElement).value
-}
-
 const selectDir = () => {
   appApi.openDirectoryDialog().then((res: any) => {
     if (res.code === 1) {