✨ feat(frontend): 调整样式，月度概览添加了ipv4和v6上下行合计

components.d.ts

@@ -18,16 +18,21 @@ declare module 'vue' {
     NDatePicker: typeof import('naive-ui')['NDatePicker']
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
+    NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
+    NH3: typeof import('naive-ui')['NH3']
     NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NProgress: typeof import('naive-ui')['NProgress']
     NResult: typeof import('naive-ui')['NResult']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSplit: typeof import('naive-ui')['NSplit']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
+    NText: typeof import('naive-ui')['NText']
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ustb-wifi-tools",
   "private": true,
-  "version": "0.7.3",
+  "version": "0.7.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ustb-wifi-tools"
-version = "0.7.3"
+version = "0.7.4"
 description = "A Tauri App that can be used to get information of the USTB Wifi"
 authors = ["CakeAL"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "productName": "ustb-wifi-tools",
   "mainBinaryName": "ustb-wifi-tools",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "identifier": "ustb.wifi.tools",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/components/Menu.vue

@@ -92,7 +92,7 @@ const menuOptions: MenuOption[] = [
         {
           href: "#/unbindmacs",
         },
-        "解绑MAC地址"
+        "解绑 MAC 地址"
       ),
     key: "unbindmacs",
     icon: renderIcon(BrowsersOutline),
@@ -116,7 +116,7 @@ const menuOptions: MenuOption[] = [
         {
           href: "#/about",
         },
-        "关于作者以及Tips"
+        "关于作者以及 Tips"
       ),
     key: "about",
     icon: renderIcon(InformationCircleOutline),

src/pages/About.vue

@@ -7,7 +7,12 @@ const show1 = ref(false);
 
 <template>
   <div class="container">
-    <n-card title="本软件动机：" hoverable class="my-card">
+    <n-h2 prefix="bar" type="success" style="margin-top: 15px;">
+      <n-text type="success">
+        关于作者以及 Tips
+      </n-text>
+    </n-h2>
+    <n-card hoverable class="my-card">
       <n-space vertical>
         <p>更方便的获取 USTB 校园网每日使用情况，查询流量，解绑 MAC 地址等。</p>
         <p>
@@ -48,14 +53,20 @@ const show1 = ref(false);
         </n-collapse-transition>
         <p>USTB-V6接入说明：http://cipp.ustb.edu.cn/app.IAManage/index.jsp?m=iamanage&c=Notice&a=noticeInfo&id=22</p>
         <p>一个原来能看校园网出口出入流量的网站，现在已经打不开了：http://traffic.ustb.edu.cn/</p>
-        <p>校园网 Radius 超时可能解决方法：</p>
+        <h4>校园网 Radius 超时可能解决方法：</h4>
         <p>0. 尝试手动打开http://login.ustb.edu.cn/登录</p>
         <p>1. 不要使用注销页直接登陆，首先忽略此网络（忘记），然后重开Wi-Fi，再进行登陆，会跳出登录页（虽然ip和注销页是一样的）</p>
         <p>2. 关掉代理，再重新进行上述操作。</p>
         <p>3. 重启电脑。</p>
         <p>注销页和登录页网址：http://202.204.48.66/ 或者 http://login.ustb.edu.cn/ (你知道么，学号是可以点击的)</p>
+        <h4>给校园网省流方法（偏向使用 ipv6 的方法）：</h4>
+        <p>1. 设置 ipv6 DNS服务器，保证 ipv6-test 能全部通过。一般浏览器都是默认优先 ipv6 的</p>
+        <p>2. Steam：使用 Dogfight360 提供的工具，对 Steam 进行 ipv6 代理。</p>
+        <p>3. 软件镜像源，使用带 ipv6 的镜像源，比如清华源（一般会自动选择 ipv6） mirros6 </p>
+        <p>4. 通过 pt 站下载大型软件（比如 Photoshop 等）</p>
+        <p>5. 自建/使用 ipv6 代理服务器</p>
         <br/>
-        <p>当前 version = "0.7.3"</p>
+        <p>当前 version = "0.7.4"</p>
     </n-space>
     </n-card>
   </div>
@@ -65,6 +76,7 @@ const show1 = ref(false);
 .container {
   height: 100vh;
   overflow: auto;
+  margin: 5px;
 }
 
 .my-card {

src/pages/Login.vue

@@ -167,8 +167,10 @@ const manually_check_update = () => {
           show-password-on="mousedown"
           placeholder="密码"
           round
+          style="margin-top: 5px;"
         />
-        <n-switch v-model:value="login_via_vpn" :rail-style="railStyle">
+        <n-space>
+        <n-switch v-model:value="login_via_vpn" :rail-style="railStyle" class="my-switch">
           <template #checked> 我不在校园网 </template>
           <template #unchecked> 我在校园网 </template>
         </n-switch>
@@ -178,9 +180,11 @@ const manually_check_update = () => {
           type="primary"
           @click="get_cookies"
           :disabled="button_disabled"
+          class="my-button"
         >
           点我登陆获取 cookie⭐️
         </n-button>
+        </n-space>
         <h3 v-if="button_disabled === true">登录中...</h3>
       </div>
       <div v-else>
@@ -193,10 +197,10 @@ const manually_check_update = () => {
       <n-button strong secondary type="info" @click="logout"> 登出 </n-button>
       <h4>如果想自己更改配置文件：</h4>
       <p>
-        Windows: C:\Users\用户名\AppData\Roaming\ustb-wifi-tools\config.json
+        Windows: C:\Users\⁠%UserName%\AppData\Roaming\ustb-wifi-tools\config.json
       </p>
       <p>
-        macOS: /Users/用户名/Library/Application
+        macOS: ~/Library/Application
         Support/ustb-wifi-tools/config.json
       </p>
       <p>用来手动检查更新的按钮：</p>
@@ -207,4 +211,16 @@ const manually_check_update = () => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  height: 100vh;
+  overflow: auto;
+  margin: 5px;
+}
+.my-switch {
+  margin-top: 10px;
+}
+.my-button {
+  margin-top: 5px;
+}
+</style>

src/pages/MonthPay.vue

@@ -76,14 +76,20 @@ const min2hour = (min: number | undefined) => {
   return parseFloat(((min as number) / 60).toFixed(2));
 };
 
+const min2day = (min: number | undefined) => {
+  return parseFloat(((min as number) / 60 / 24).toFixed(2));
+};
+
 const mb2gb = (mb: number | undefined) => {
   return parseFloat(((mb as number) / 1024).toFixed(2));
 };
 </script>
 
 <template>
   <div class="container">
-    <h2>年度扣费账单</h2>
+    <n-h2 prefix="bar" type="success" style="margin-top: 15px">
+      <n-text type="success"> 年度扣费账单 </n-text>
+    </n-h2>
     <p>选择一个年份：</p>
     <n-select
       v-model:value="year"
@@ -94,7 +100,10 @@ const mb2gb = (mb: number | undefined) => {
       <p>这一年一共花费 {{ month_pay?.year_cost }} 元。</p>
       <p>
         总共使用时长 {{ month_pay?.year_used_duration }} 分钟，约合
-        {{ min2hour(month_pay?.year_used_duration) }} 小时。
+        {{ min2hour(month_pay?.year_used_duration) }} 小时，{{
+          min2day(month_pay?.year_used_duration)
+        }}
+        天（不同设备使用时长会叠加）。
       </p>
       <p>
         总共使用流量 {{ month_pay?.year_used_flow }} MB，约合
@@ -112,5 +121,6 @@ const mb2gb = (mb: number | undefined) => {
 .container {
   height: 100vh;
   overflow: auto;
+  margin: 5px;
 }
 </style>

src/pages/MonthlyUserLog.vue

@@ -14,7 +14,7 @@ const refresh = ref(true);
 const select_show_value = ref<string>("ipv4_down");
 const select_show_options = [
   {
-    label: "ipv4 下行",
+    label: "ipv4 下行（校园网只计费这个）",
     value: "ipv4_down",
   },
   {
@@ -29,6 +29,14 @@ const select_show_options = [
     label: "ipv6 上行",
     value: "ipv6_up",
   },
+  {
+    label: "ipv4 上下行",
+    value: "ipv4",
+  },
+  {
+    label: "ipv6 上下行",
+    value: "ipv6",
+  },
   {
     label: "当天总共的流量（包含ipv4和ipv6上下行）",
     value: "all",
@@ -103,6 +111,8 @@ const select_to_data = (item: EveryLoginData): number => {
     ipv4_up: item.ipv4_up,
     ipv6_down: item.ipv6_down,
     ipv6_up: item.ipv6_up,
+    ipv4: item.ipv4_down + item.ipv4_up,
+    ipv6: item.ipv6_down + item.ipv6_up,
     all: item.ipv4_down + item.ipv4_up + item.ipv6_down + item.ipv6_up,
     cost: item.cost,
     used_duration: item.used_duration,
@@ -123,13 +133,16 @@ const data_type = (): string => {
 
 <template>
   <div class="container">
+    <n-h2 prefix="bar" type="success" style="margin-top: 15px">
+      <n-text type="success"> 月度使用概览 </n-text>
+    </n-h2>
     <n-date-picker
       v-model:value="start_date"
       type="month"
       clearable
       @update:value="get_monthly_user_log"
     />
-    <br/>
+    <br />
     <n-grid :x-gap="12" :y-gap="8" :cols="7" :key="refresh">
       <n-grid-item class="gray"><p>日</p></n-grid-item>
       <n-grid-item class="gray"><p>一</p></n-grid-item>
@@ -150,7 +163,7 @@ const data_type = (): string => {
         class="day"
         :style="{ backgroundColor: getBackgroundColor(select_to_data(item)) }"
       >
-        <p style="margin: 3px; line-height: 1.5em">
+        <p style="margin: 3px; line-height: 1.5em; white-space: nowrap">
           <b>{{ index + 1 }}日</b><br />
           {{ select_to_data(item).toFixed(0) }} {{ data_type() }}
         </p>
@@ -176,6 +189,7 @@ const data_type = (): string => {
 .container {
   height: 100vh;
   overflow: auto;
+  margin: 5px;
 }
 .gray {
   height: 50px;

src/pages/SpeedTest.vue

@@ -27,27 +27,30 @@ const open_speed_test = async () => {
 };
 
 const load_ip_address = async () => {
-  let res = await invoke("load_ip_address").catch((err) =>
+  let res = (await invoke("load_ip_address").catch((err) =>
     pop_message.error(err)
-  ) as string;
+  )) as string;
   let resp: [string, string] = JSON.parse(res);
   if (resp[0] === "") {
-    ipv4_address.value = "当前无公网 ipv4 地址，但貌似仍可使用北科内网测速。"
+    ipv4_address.value = "当前无公网 ipv4 地址，但貌似仍可使用北科内网测速。";
   } else {
     ipv4_address.value = resp[0];
   }
   if (resp[1] === "") {
-    ipv6_address.value = "当前无公网 ipv6 地址，但貌似仍可使用北科内网测速，无法使用其他 ipv6 测速站点。"
+    ipv6_address.value =
+      "当前无公网 ipv6 地址，但貌似仍可使用北科内网测速，无法使用其他 ipv6 测速站点。";
   } else {
     ipv6_address.value = resp[1];
   }
-}
+};
 </script>
 
 <template>
   <div class="container">
     <n-space vertical>
-      <h2>测个速，不费校园网流量的</h2>
+      <n-h2 prefix="bar" type="success" style="margin-top: 15px">
+        <n-text type="success"> 测个速，不费校园网流量的 </n-text>
+      </n-h2>
       <n-select v-model:value="site_num" :options="options" />
       <n-button strong secondary type="primary" @click="open_speed_test">
         点我
@@ -59,4 +62,10 @@ const load_ip_address = async () => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  height: 100vh;
+  overflow: auto;
+  margin: 5px;
+}
+</style>

src/pages/UnbindMacs.vue

@@ -54,7 +54,11 @@ const unbind = async () => {
 
 <template>
   <div class="container">
-    <h2>解绑MAC地址</h2>
+    <n-h2 prefix="bar" type="success" style="margin-top: 15px;">
+      <n-text type="success">
+        解绑 MAC 地址
+      </n-text>
+    </n-h2>
     <p>MAC Address是什么？简单来说校园网靠这个来识别是否是你的设备。</p>
     <p>
       所以随机MAC地址开启的话，就会导致你之前的设备被顶掉，详情可看B站视频：BV1JC4y1S7WS
@@ -82,6 +86,7 @@ const unbind = async () => {
           </tr>
         </tbody>
       </n-table>
+      <br/>
       <n-button strong secondary type="info" @click="unbind">
         确定解绑
       </n-button>
@@ -93,5 +98,6 @@ const unbind = async () => {
 .container {
   height: 100vh;
   overflow: auto;
+  margin: 5px;
 }
 </style>