完善文档

blanexie · Apr 27, 2024 · 43e8952 · 43e8952
1 parent 3bd42cf
commit 43e8952
Show file tree

Hide file tree

Showing 17 changed files with 51 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,42 @@
-# qbtui
+# Qbtui
 
-This template should help get you started developing with Vue 3 in Vite.
+The sleekest looking WebUI for qBittorrent made with Vue.js!
+使用Vue3 开发的一个Qbittorrent WebUI界面, 参考了Motrix的界面。
 
-## Recommended IDE Setup
+![qbtui](readme_assets/favicon.ico)
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+![Vue](https://img.shields.io/badge/Vue-%5E3.4.20-brightgreen) ![Vuetify](https://img.shields.io/badge/Vuetify-%5E3.5.6-brightgreen)
+![qBittorrent](https://img.shields.io/badge/qBittorrent-4.4%2B-brightgreen)
 
-## Type Support for `.vue` Imports in TS
+![stars](https://img.shields.io/github/stars/blanexie/qbtui) ![Forks](https://img.shields.io/github/forks/blanexie/qbtui)
+![Issues](https://img.shields.io/github/issues/blanexie/qbtui) ![Closed](https://img.shields.io/github/issues-closed/blanexie/qbtui)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor_Covenant-2.1-4baaaa.svg)](.github/CODE_OF_CONDUCT.md)
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+## Screenshots 页面截图
 
-## Customize configuration
+- Login 登录页面
+  ![Login](readme_assets/login.png)
+- Home 首页
+  ![Home](readme_assets/home.png)
+- TorrentDetail 详情
+  ![TorrentProperties](readme_assets/img.png)
+  ![TorrentProperties](readme_assets/img_1.png)
+  ![TorrentProperties](readme_assets/img_2.png)
+  ![TorrentProperties](readme_assets/img_3.png)
+- AddTorrent 添加弹窗页
+  ![AddManageUrl](readme_assets/img_6.png)]
+  ![AddTorrent](readme_assets/img_5.png)]
+- Settings 设置页
+  ![Settings](readme_assets/img_4.png)]
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+## Install 安装
 
-## Project Setup
+1. 先下载本项目的最新版本Release包dist.zip
+2. 解压后放在qBittorrent的电脑所有的目录下， 我是放在linux的 `/dist` 目录中
+3. 打开Qbittorrent的设置页面，找到备用WebUI设置选项， 填入`/dist`后点击保存， 刷新即可
+   ![Settings](readme_assets/img_7.png)
+
+## Project Setup  项目编译
 
 ```sh
 npm install
@@ -26,14 +48,28 @@ npm install
 npm run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+### Build Only
+
+由于不太熟悉TypeScript, 所以打包的时候不做类型检查了。
 
 ```sh
-npm run build
+npm run build-only  
 ```
 
 ### Lint with [ESLint](https://eslint.org/)
 
 ```sh
 npm run lint
 ```
+
+
+## 使用到的npm包
+* Node.js NPM
+* Vue3
+* Element-Plus
+* Axios
+* Vue-Router（虽然加入了但是没有用到）
+* Pinia
+* qs
+
+有问题欢迎提Issue  
diff --git a/img.png b/img.png
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Qbittorrent</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/readme_assets/favicon.ico b/readme_assets/favicon.ico
diff --git a/readme_assets/home.png b/readme_assets/home.png
diff --git a/readme_assets/img.png b/readme_assets/img.png
diff --git a/readme_assets/img_1.png b/readme_assets/img_1.png
diff --git a/readme_assets/img_2.png b/readme_assets/img_2.png
diff --git a/readme_assets/img_3.png b/readme_assets/img_3.png
diff --git a/readme_assets/img_4.png b/readme_assets/img_4.png
diff --git a/readme_assets/img_5.png b/readme_assets/img_5.png
diff --git a/readme_assets/img_6.png b/readme_assets/img_6.png
diff --git a/readme_assets/img_7.png b/readme_assets/img_7.png
diff --git a/readme_assets/login.png b/readme_assets/login.png
diff --git a/src/components/AddTorrentComponent.vue b/src/components/AddTorrentComponent.vue
@@ -70,7 +70,7 @@
       </el-row>
       <div class="but">
         <el-button type="primary" @click="submit">确定</el-button>
-        <el-button type="primary">取消</el-button>
+        <el-button type="primary" @clikc="store.globalInfo.showTorrentAddView=false">取消</el-button>
       </div>
     </el-tabs>
   </el-dialog>
@@ -134,7 +134,7 @@ const data = reactive<TorrentData>({
 
 const beforeUp = async (uploadFile: UploadFile) => {
   console.log("uploadFile", uploadFile)
-  if (uploadFile.size!! > 1 * 1048576) {
+  if (uploadFile.size!! > 10 * 1048576) {
     ElMessage.error("选择的Torrent本身（不是下载的内容）大小不得超出10MB")
     return false
   }

diff --git a/src/views/TorrentDetail.vue b/src/views/TorrentDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-drawer v-model="globalInfo.showDetail" :with-header="false" direction="rtl" size="600">
+  <el-drawer v-model="globalInfo.showDetail" :with-header="false" @open="beforeLeave" direction="rtl" size="600">
 
     <el-text size="large" truncated>
       {{ globalInfo.currentTorrent?.name }}