Stapxs · Stapxs · Dec 4, 2024 · Dec 3, 2024 · Dec 4, 2024 · Dec 4, 2024
diff --git a/README.md b/README.md
@@ -1,7 +1,3 @@
-简体中文
- | [English](README_en-US.md)
-<br><br><br>
-
 <p align="center">
   <a href="https://blog.stapxs.cn" target="blank">
     <img src="src/renderer/public/img/icons/icon.svg" alt="Logo" width="156" height="156">
@@ -25,7 +21,13 @@
 
 ![view](README/view.png)
 
+# 文档
+
+- **简体中文(当前)**
+- **[English](README_en-US.md)**
+
 ## ✨ 特性支持
+
 - ✅ 使用 Vue.js 全家桶开发，快乐前后端分离
 - 🎨 自适应布局，竖版也能使用
 - 🖥️ 支持 PWA（都有 Electron 了（小声））
@@ -40,28 +42,35 @@
 - 🛠 更多特性开发中
 
 ## ♿️ 快速使用
+
 ### > 运行服务
+
 Stapxs QQ Lite 需要一个 QQ Bot 后端提供服务，你可以参考 [📖 这个文档](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/wiki/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B) 布置它。
 
 ### > 访问网页
+
 本仓库开启了 GitHub Pages, 所有向主分支提交的代码将会自动构建并发布。你可以直接访问 [🌎 这个页面](https://stapxs.github.io/Stapxs-QQ-Lite-2.0) 来使用已经构建并部署的页面。
 
 ### > 安装客户端
+
 除了直接使用本仓库的构建页面，你也可以下载使用 electron 打包的功能**稍稍**更丰富的客户端版本，访问 [📦️ 这儿](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/releases) 查看版本发布列表。
 
 当然你也可以使用包管理来安装它，使用包管理安装将会更便于更新 Stapxs QQ Lite 而不用每次都从 Github 上手动更新，访问 [💬 这儿](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/issues/99) 来查看目前支持的包管理。
 
 ### > 自行部署网页
+
 Stapxs QQ Lite 在版本发布时构建了一份根目录下的 Web 文件，你可以在 [📦️ 这儿](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/releases) 找到它，它一般叫做```Stapxs.QQ.Lite-<版本>-web.zip```，将它解压放置到你的网页服务器中即可。
 
 什么？不会部署网页服务器？Stapxs QQ Lite 网页版现在已经发布到了 [npm](https://www.npmjs.com/package/ssqq-web) 上！你可以使用 npx 工具快速启动它：
-~~~bash
+
+``` bash
 npx ssqq-web hostname=127.0.0.1 port=8081
-~~~
+```
 
 ## 💬 提醒和问题
 
 ### > 关于不安全连接
+
 - 当使用 https 页面连接 ws 服务（反之相同）的情况下，连接将会失败；这是由于其中某一者是不安全的。在这种情况下，你可以选择将 ws 提升为 wss 或者将 https 降级为 http（不安全）来解决问题，此处不提供解决方案。>> [Stapxs-QQ-Lite#32](https://github.com/Stapxs/Stapxs-QQ-Lite/issues/32)
 
 ### > 我能使用其他 QQ Http Bot 吗
@@ -78,54 +87,90 @@ npx ssqq-web hostname=127.0.0.1 port=8081
 - 如果有什么奇奇怪怪的问题, 欢迎发起 [issue](<https://github.com/Stapxs/Stapxs-QQ-Lite/issues>) 询问! 如果有什么 BUG 和优化建议也可以哦!
 
 ## 📦️ 构建应用
+
 为了规范对其他仓库的引用，Stapxs QQ Lite 2.0 仓库含有一些子模块，这意味着你需要在克隆仓库的时候包含子模块：
-~~~bash
+
+``` bash
 git clone https://github.com/Stapxs/Stapxs-QQ-Lite-2.0 --recursive
-~~~
+```
+
 如果你已经克隆了仓库，也可以使用这个来补全子模块：
-~~~bash
-git submodule update --init
-~~~
-### > 构建 Web 页面
-Stapxs QQ Lite 2.0 是一个基于 Vue 的单页应用，这意味着如果你想自行部署到网页服务需要进行构建。当然你同样可以前往 [这儿](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/releases) 来下载预构建好的根目录文件包。
 
-注意。在正式构建前，如果你的网站运作目录并不在根域名下，你需要修改（或增加）项目根目录下 `vue.config.js` 内导出的 `publicPath` 字段的值，它代表着最终你会运行在的目录，比如它在现在是 `/Stapxs-QQ-Lite-2.0/`；如果你本来就运行在根目录下，可以直接删去它。
+``` bash
+git submodule update --init
+```
 
-下面是构建 Vue 应用的命令，构建结果将最终输出在 `dist` 下：
+在开始构建之前请安装依赖，请确保安装了 `yarn`：
 
 ``` bash
 # 安装依赖
+yarn
+
+or
+
 yarn install
+```
+
+### > 构建 Web 页面
+
+Stapxs QQ Lite 2.0 是一个基于 Vue 的单页应用，这意味着如果你想自行部署到网页服务需要进行构建。当然你同样可以前往 [这儿](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/releases) 来下载预构建好的根目录文件包。
+
+下面是构建该项目的命令，构建结果将最终输出在 `dist` 目录下：
+
+``` bash
 # 运行本地调试
-yarn serve
+yarn dev
+
 # 代码检查和自动格式化
 yarn lint
+
 # 构建应用
 yarn build
 ```
 
 ### > 构建 Electron 客户端
+
 在 `2.3.0` 版本后，Stapxs QQ Lite 2.0 支持构建为 Electron 应用并补充部分平台特性的功能，你也可以自行构建。
 
-下面是构建 Electron 应用的命令，构建结果将最终输出在 `dist_electron/out` 下：
+下面是构建 Electron 应用的命令，构建结果将最终输出在 `dist_electron/out` 目录下：
 
 ``` bash
 # electron 运行本地调试
-yarn electron:serve
+yarn dev:electron
+
 # electron 构建应用
-yarn electron:build
+yarn build:win
 ```
-你可以补充平台选项来指定构建某个平台：
 
-```bash
-yarn electron:build --linux
-```
+其他平台构建查看[命令列表](#-命令列表)
+
+### > 命令列表
+
+**命令格式为`yarn <命令>`，其中`<命令>`为列表中的一个：**
+
+| 命令          | 描述                |
+| ------------- | ------------------ |
+| install       | 安装依赖            |
+| lint          | 代码检查和自动格式化 |
+| dev           | 网页调试            |
+| dev:electron  | Electron 调试      |
+| dev:ios       | Ios 调试           |
+| dev:android   | 安卓调试            |
+| build         | 网页构建            |
+| build:win     | 构建 Windows 应用   |
+| build:mac     | 构建 Mac Os 应用    |
+| build:linux   | 构建 Liunx 应用     |
+| build:ios     | 构建 Ios 应用       |
+| build:android | 构建 Andorid 应用   |
+
 ### > Github Actions
+
 *为什么会有人对自动构建感兴趣，总之自动构建脚本我写了好久。感兴趣就自己去看好了（无端）。*
 
 ![auto-build](README/auto-build.png)
 
 ## 🎉 鸣谢
+
 感谢这些小伙伴们在开发和文本中提供的支持 ——
 
 <a href="https://github.com/Logic-Accepted"><img src="https://avatars.githubusercontent.com/u/36406453?s=48&v=4"></a>

diff --git a/README_en-US.md b/README_en-US.md
@@ -1,8 +1,3 @@
-[简体中文](README.md)
- | English
-<br><br><br>
-
-
 <p align="center">
   <a href="https://blog.stapxs.cn" target="blank">
     <img src="src/renderer/public/img/icons/icon.svg" alt="Logo" width="156" height="156">
@@ -22,9 +17,15 @@
   </p>
 </p>
 
-![card](README/card.png)
+![view](README/view.png)
+
+# 文档
+
+- **[Simplified Chinese](README.md)**
+- **English(Current)**
 
 ## ✨ Supported Features
+
 - ✅ Developed with a complete Vue.js framwork, frontend-backend seperated
 - 🎨 Adaptive landscape and portrait layouts
 - 🖥️ PWA support (why not just use our cool Electron app anyway)
@@ -39,18 +40,23 @@
 - 🛠 More to come ...
 
 ## ♿️ Get Started
+
 ### > Running Services
+
 Stapxs QQ Lite requires connecting to a QQ bot API to function properly. You can set one up by following [📖 this documentation](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/wiki/%E8%BF%9E%E6%8E%A5-oicq2-http).
 
 ### > Using the App On the Go
+
 GitHub Pages is enabled and is serving a live demo [🌎 over here](https://stapxs.github.io/Stapxs-QQ-Lite-2.0).
 
 ### > Installing the App
+
 Besides the live demo, you can also download the desktop app built with Electron that has more features [📦️ here](https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/releases).
 
 ## 💬 Tips and FAQs
 
 ### > Insecure connections?
+
 - When connecting to a WebSocket (ws) service via an HTTPS page, or vice versa, the connection will fail because one of them is insecure. In this case, you can choose to upgrade the WebSocket connection to a secure WebSocket (wss) or downgrade the HTTPS connection to HTTP (insecure) to solve the problem. However, specific solutions are not provided here. >> [Stapxs-QQ-Lite#32](https://github.com/Stapxs/Stapxs-QQ-Lite/issues/32)
 
 ### > Could I use other QQ bot APIs?
@@ -62,57 +68,95 @@ Besides the live demo, you can also download the desktop app built with Electron
 
 - For potential risks in using oicq-http, refer to [this page](<https://github.com/takayama-lily/oicq/wiki/98.%E5%85%B3%E4%BA%8E%E8%B4%A6%E5%8F%B7%E5%86%BB%E7%BB%93%E5%92%8C%E9%A3%8E%E6%8E%A7>). If you're using other QQ bot APIs, check out their own repositories for more infomation.
 
-### > I have questions / problems.
+### > I have questions / problems
 
 - Don't hesitate to send us an [issue](<https://github.com/Stapxs/Stapxs-QQ-Lite/issues>) if you do. Bug reports and suggestions are also welcome.
 
 ## 📦️ Building the App
-### > Building Webpages
-Stapxs QQ Lite 2.0 is a single-page Vue application, which means you'll have to build the page before serving it.
 
-NOTE: if you do not serve the app at public web root, you'll have to modify the value of `publicPath` in `vue.config.js` to your need before you build it. You can also remove the mentioned key if you only plan to serve the app at web root.
+In order to standardize the reference to other repositories, Stapxs QQ Lite 2.0 repository contains some submodules, which means you need to include submodules when cloning the repository:
 
-Below are commands used to test and build this Vue app. Artifacts will be in `dist` folder.
+``` bash
+git clone https://github.com/Stapxs/Stapxs-QQ-Lite-2.0 --recursive
+```
+
+If you have already cloned the repository, you can also use this to complete the submodules:
+
+``` bash
+git submodule update --init
+```
+
+Before starting to build, install dependencies, please make sure to install yarn:
 
 ``` bash
 # Install dependencies
+yarn
+
+or
+
 yarn install
-# Test the app locally
-yarn serve
-# Check and format the code
+```
+
+### > Building Webpages
+
+Stapxs QQ Lite 2.0 is a single-page Vue application, which means you'll have to build the page before serving it.
+
+Below are commands used to test and build this Vue app. Artifacts will be in `dist` folder.
+
+``` bash
+# Run local debugging
+yarn dev
+
+# Code check and automatic formatting
 yarn lint
-# Build the app
+
+# Build application
 yarn build
 ```
 
 ### > Building the Electron App
+
 Starting from version `2.3.0`, Stapxs QQ Lite 2.0 can be built into an Electron app with enhanced features for some platforms. You can also build the app yourself with instructions below.
 
 Commands for testing and building the Electron app are shown below. Artifacts will be in `dist_electron/out` folder.
 
 ``` bash
-# Run local Electron test
-yarn electron:serve
-# Build the Electron app
-yarn electron:build
-```
-You can also specify the desired platform with an option:
+# Electron run local debugging
+yarn dev:electron
 
-```bash
-yarn electron:build --linux
+# Electron build application
+yarn build:win
 ```
+
+Other platform builds can be viewed in [command list](#-command-list)
+
+### > Command List
+
+Command format is `yarn <command>`, where `<command>` is one of the following in the list:
+
+| Command       | Command                             |
+| ------------- | ----------------------------------- |
+| install       | Install dependencies                |
+| lint          | Code check and automatic formatting |
+| dev           | Web debugging                       |
+| dev:electron  | Electron debugging                  |
+| dev:ios       | Ios debugging                       |
+| dev:android   | Android debugging                   |
+| build         | Web build                           |
+| build:win     | Build Windows App                   |
+| build:mac     | Build MacOs App                     |
+| build:linux   | Build Liunx App                     |
+| build:ios     | Build Ios App                       |
+| build:android | Build Andorid App                   |
+
 ### > GitHub Actions
+
 *Why would anyone be interested in build automation? Anyway, I had worked on it for so long and you can check it out yourself in GitHub Actions.*
 
 ![auto-build](README/auto-build.png)
 
-## 🖼️ Screenshots
-![1](README/pics/1.png)
-![2](README/pics/2.png)
-![3](README/pics/4.png)
-![3](README/pics/3.png)
-
 ## 🎉 Credits
+
 Shoutout to my friends who have offered help in development and translation!
 
 <a href="https://github.com/Logic-Accepted"><img  src="https://avatars.githubusercontent.com/u/36406453?s=48&v=4"></a>

diff --git a/src/renderer/src/pages/options/OptView.vue b/src/renderer/src/pages/options/OptView.vue
@@ -235,17 +235,17 @@
         <div class="ss-range">
           <input
             v-model="runtimeData.sysConfig.initial_scale"
-            :style="`background-size: ${initialScaleShow / 0.05}% 100%;`"
+            :style="`background-size: ${(initialScaleShow - 0.5) / 0.01}% 100%;`"
             type="range"
             min="0.5"
             max="1.5"
-            step="0.05"
+            step="0.01"
             name="initial_scale"
             @change="scaleSave"
             @input="setInitialScaleShow">
           <span
             :style="`color: var(--color-font${
-              initialScaleShow / 0.05 > 50 ? '-r' : ''})`">
+              initialScaleShow / 0.05 })`">
             {{ initialScaleShow }}</span>
         </div>
       </div>
@@ -345,7 +345,7 @@
                     '玄素黑',
                 ],
                 browser: detect() as BrowserInfo,
-                initialScaleShow: 0.1,
+                initialScaleShow: 0.5,
                 fsAdaptationShow: 0,
                 chatview_name: '',
             }