docs: Update readme

perf: set page optimization
2026-01-12 14:14:55 +08:00 · 2025-05-07 14:23:13 +08:00 · 2025-05-07 11:05:59 +08:00
6 changed files with 147 additions and 142 deletions
--- a/README-EN.md
+++ b/README-EN.md
@@ -1,13 +1,24 @@
-# res-downloader
+<div align="center">
+
+<a href="https://github.com/putyy/res-downloader"><img src="build/appicon.png" width="120"/></a>
+<h1>res-downloader</h1>
+<h4>📖 English | <a href="https://github.com/putyy/res-downloader/blob/master/README.md">中文</a></h4>
+
+[![GitHub stars](https://img.shields.io/github/stars/putyy/res-downloader)](https://github.com/putyy/res-downloader/stargazers)
+[![GitHub forks](https://img.shields.io/github/forks/putyy/res-downloader)](https://github.com/putyy/res-downloader/fork)
+[![GitHub release](https://img.shields.io/github/release/putyy/res-downloader)](https://github.com/putyy/res-downloader/releases)
+![GitHub All Releases](https://img.shields.io/github/downloads/putyy/res-downloader/total)
+[![License](https://img.shields.io/github/license/putyy/res-downloader)](https://github.com/putyy/res-downloader/blob/master/LICENSE)
+
+</div>
+
+---
+
 ### 🎉 Aixiang Resource Downloader

 > A cross-platform resource downloader built with Go + [Wails](https://github.com/wailsapp/wails).  
 Clean UI, easy to use, and supports a wide range of resource sniffing and downloading.

-### 📖 [中文](./README.md) | English  
-
---
-
 ## ✨ Features

 - 🚀 **User-Friendly**: Simple operation with an intuitive and beautiful UI
@@ -16,8 +27,6 @@ Clean UI, easy to use, and supports a wide range of resource sniffing and downlo
 - 📱 **Wide Platform Compatibility**: Works with WeChat Channels, Mini Programs, Douyin, Kuaishou, Xiaohongshu, KuGou Music, QQ Music, and more
 - 🌍 **Proxy Capture**: Built-in proxy allows fetching resources behind network restrictions

---
-
 ## 📚 Docs & Versions

 - 📘 [Online Documentation (Chinese)](https://res.putyy.com/)
@@ -25,15 +34,16 @@ Clean UI, easy to use, and supports a wide range of resource sniffing and downlo
 - 💬 [Join the User Group (Chinese)](https://www.putyy.com/app/admin/upload/img/20250418/6801d9554dc7.webp)
  > *If full, you can add WeChat `AmorousWorld` with a note “From GitHub”*

---
-
 ## 🧩 Download Links

 - 🆕 [Download from GitHub](https://github.com/putyy/res-downloader/releases)
 - 🆕 [Download via Lanzou Cloud (Password: 9vs5)](https://wwjv.lanzoum.com/b04wgtfyb)
 - ⚠️ *Windows 7 users: Please use version `2.3.0`*

---
+
+## 🖼️ Preview
+
+![Preview](docs/images/show.webp)

 ## 🚀 How to Use

@@ -47,12 +57,6 @@ Clean UI, easy to use, and supports a wide range of resource sniffing and downlo

 ---

-## 🖼️ Screenshot
-
-![Screenshot](docs/images/show.webp)
-
---
-
 ## ❓ FAQ

 ### 📺 m3u8 Video Resources
@@ -86,8 +90,6 @@ Clean UI, easy to use, and supports a wide range of resource sniffing and downlo
 - [GitHub Issues](https://github.com/putyy/res-downloader/issues)
 - [Aixiang Forum Thread (Chinese)](https://s.gowas.cn/d/4089)

---
-
 ## 💡 Principles & Motivation

 This tool captures traffic via a local proxy and filters useful resources.  
--- a/README.md
+++ b/README.md
@@ -1,12 +1,23 @@
-# res-downloader
+<div align="center">
+
+<a href="https://github.com/putyy/res-downloader"><img src="build/appicon.png" width="120"/></a>
+<h1>res-downloader</h1>
+<h4>📖 中文 | <a href="https://github.com/putyy/res-downloader/blob/master/README-EN.md">English</a></h4>
+
+[![GitHub stars](https://img.shields.io/github/stars/putyy/res-downloader)](https://github.com/putyy/res-downloader/stargazers)
+[![GitHub forks](https://img.shields.io/github/forks/putyy/res-downloader)](https://github.com/putyy/res-downloader/fork)
+[![GitHub release](https://img.shields.io/github/release/putyy/res-downloader)](https://github.com/putyy/res-downloader/releases)
+![GitHub All Releases](https://img.shields.io/github/downloads/putyy/res-downloader/total)
+[![License](https://img.shields.io/github/license/putyy/res-downloader)](https://github.com/putyy/res-downloader/blob/master/LICENSE)
+
+</div>
+
+---
+
 ### 🎉 爱享素材下载器

 > 一款基于 Go + [Wails](https://github.com/wailsapp/wails) 的跨平台资源下载工具，简洁易用，支持多种资源嗅探与下载。

-### 📖 中文 | [English](./README-EN.md)
-
---
-
 ## ✨ 功能特色

 - 🚀 **简单易用**：操作简单，界面清晰美观
@@ -15,23 +26,24 @@
 - 📱 **平台兼容广泛**：支持微信视频号、小程序、抖音、快手、小红书、酷狗音乐、QQ音乐等
 - 🌍 **代理抓包**：支持设置代理获取受限网络下的资源

---
-
 ## 📚 文档 & 版本

 - 📘 [在线文档](https://res.putyy.com/)
- 🧩 [Mini版 UI使用默认浏览器展示](https://github.com/putyy/resd-mini) ｜ [Electron旧版 支持Win7](https://github.com/putyy/res-downloader/tree/old)
 - 💬 [加入交流群](https://www.putyy.com/app/admin/upload/img/20250418/6801d9554dc7.webp)
+- 🧩 [最新版](https://github.com/putyy/res-downloader/releases) ｜ [Mini版 使用默认浏览器展示UI](https://github.com/putyy/resd-mini) ｜ [Electron旧版 支持Win7](https://github.com/putyy/res-downloader/tree/old)
  > *群满时可加微信 `AmorousWorld`，请备注“来源”*

---
-
 ## 🧩 下载地址

 - 🆕 [GitHub 下载](https://github.com/putyy/res-downloader/releases)
 - 🆕 [蓝奏云下载（密码：9vs5）](https://wwjv.lanzoum.com/b04wgtfyb)
 - ⚠️ *Win7 用户请下载 `2.3.0` 版本*

+
+## 🖼️ 预览
+
+![预览](docs/images/show.webp)
+
 --- 

 ## 🚀 使用方法
@@ -44,14 +56,6 @@
 4. 在外部打开资源页面（如视频号、小程序、网页等）
 5. 返回软件首页，即可看到资源列表

---
-
-## 🖼️ 软件截图
-
-![软件截图](docs/images/show.webp)
-
---
-
 ## ❓ 常见问题

 ### 📺 m3u8 视频资源
@@ -85,8 +89,6 @@
 - [GitHub Issues](https://github.com/putyy/res-downloader/issues)
 - [爱享论坛讨论帖](https://s.gowas.cn/d/4089)

---
-
 ## 💡 实现原理 & 初衷

 本工具通过代理方式实现网络抓包，并筛选可用资源。与 Fiddler、Charles、浏览器 DevTools 原理类似，但对资源进行了更友好的筛选、展示和处理，大幅度降低了使用门槛，更适合大众用户使用。
--- a/frontend/components.d.ts
+++ b/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']
--- a/frontend/src/components/layout/Sider.vue
+++ b/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
--- a/frontend/src/views/index.vue
+++ b/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>
--- a/frontend/src/views/setting.vue
+++ b/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) {
Author	SHA1	Message	Date
putyy	04e4f0e9cc	docs: Update readme	2025-05-07 14:23:13 +08:00
putyy	625cfbc474	perf: set page optimization	2025-05-07 11:05:59 +08:00