diff --git a/README.md b/README.md index 4e207fd..e9d094f 100644 --- 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,10 +48,12 @@ 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/) @@ -37,3 +61,15 @@ npm run build ```sh npm run lint ``` + + +## 使用到的npm包 +* Node.js NPM +* Vue3 +* Element-Plus +* Axios +* Vue-Router（虽然加入了但是没有用到） +* Pinia +* qs + +有问题欢迎提Issue \ No newline at end of file diff --git a/img.png b/img.png new file mode 100644 index 0000000..8bb48ae Binary files /dev/null and b/img.png differ diff --git a/index.html b/index.html index a888544..8103b1f 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite App + Qbittorrent
diff --git a/public/favicon.ico b/public/favicon.ico index df36fcf..9b03fec 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/readme_assets/favicon.ico b/readme_assets/favicon.ico new file mode 100644 index 0000000..9b03fec Binary files /dev/null and b/readme_assets/favicon.ico differ diff --git a/readme_assets/home.png b/readme_assets/home.png new file mode 100644 index 0000000..9cc6165 Binary files /dev/null and b/readme_assets/home.png differ diff --git a/readme_assets/img.png b/readme_assets/img.png new file mode 100644 index 0000000..2ce5b38 Binary files /dev/null and b/readme_assets/img.png differ diff --git a/readme_assets/img_1.png b/readme_assets/img_1.png new file mode 100644 index 0000000..24a969e Binary files /dev/null and b/readme_assets/img_1.png differ diff --git a/readme_assets/img_2.png b/readme_assets/img_2.png new file mode 100644 index 0000000..5220161 Binary files /dev/null and b/readme_assets/img_2.png differ diff --git a/readme_assets/img_3.png b/readme_assets/img_3.png new file mode 100644 index 0000000..7ce9e9f Binary files /dev/null and b/readme_assets/img_3.png differ diff --git a/readme_assets/img_4.png b/readme_assets/img_4.png new file mode 100644 index 0000000..a12def5 Binary files /dev/null and b/readme_assets/img_4.png differ diff --git a/readme_assets/img_5.png b/readme_assets/img_5.png new file mode 100644 index 0000000..347152e Binary files /dev/null and b/readme_assets/img_5.png differ diff --git a/readme_assets/img_6.png b/readme_assets/img_6.png new file mode 100644 index 0000000..8f17524 Binary files /dev/null and b/readme_assets/img_6.png differ diff --git a/readme_assets/img_7.png b/readme_assets/img_7.png new file mode 100644 index 0000000..fab38c5 Binary files /dev/null and b/readme_assets/img_7.png differ diff --git a/readme_assets/login.png b/readme_assets/login.png new file mode 100644 index 0000000..4c07bb6 Binary files /dev/null and b/readme_assets/login.png differ diff --git a/src/components/AddTorrentComponent.vue b/src/components/AddTorrentComponent.vue index 7d22fb3..e69aac4 100644 --- a/src/components/AddTorrentComponent.vue +++ b/src/components/AddTorrentComponent.vue @@ -70,7 +70,7 @@
确定 - 取消 + 取消
@@ -134,7 +134,7 @@ const data = reactive({ 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 index bb9a4ce..16ee4fb 100644 --- a/src/views/TorrentDetail.vue +++ b/src/views/TorrentDetail.vue @@ -1,5 +1,5 @@