✨ feat(UnbindMacs): 解绑mac地址，完善其他功能和Readme

README.md

@@ -1,17 +1,21 @@
 # USTB Wifi Tools 贝壳校园网实用工具
 
-# ***该项目仍未完成***
-
 ## 简介
 
 使用 Tauri 构建的跨平台 APP，前端使用 Vue + NaiveUI，后端使用 Rust。 \
 通过
 旨在可以让大家更方便的获取 USTB 校园网每日使用情况，查询流量，解绑 MAC 地址等。 \
 通过调用校园网的 API，并且数据都在本地进行存储。
 
+## 截图
+
+![](pics\image1.png)
+![](pics\image2.png)
+![](pics\image3.png)
+
 ## 开发
 
-目前只有 Windows 7 以上支持，需要电脑安装 WebView2（Windows 10 和 11 默认安装）。 \
+目前只有 Windows 7 以上 x86 64 设备支持，需要电脑安装 WebView2（Windows 10 和 11 默认安装）。 \
 首先确保你已经安装了[`Node.js`](https://nodejs.cn/download/)，[`pnpm`](https://www.pnpm.cn/)以及[`Rust环境`](https://www.rust-lang.org/zh-CN/tools/install)
 
 ```bash

components.d.ts

@@ -10,14 +10,19 @@ declare module 'vue' {
     Greet: typeof import('./src/components/Greet.vue')['default']
     Menu: typeof import('./src/components/Menu.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDatePicker: typeof import('naive-ui')['NDatePicker']
-    NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     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']
   }
 }

package.json

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

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "ustb-wifi-tools",
-    "version": "0.1.0"
+    "version": "0.2.0"
   },
   "tauri": {
     "allowlist": {

src/components/Menu.vue

@@ -103,7 +103,7 @@ const menuOptions: MenuOption[] = [
         {
           href: "#/about",
         },
-        "关于作者"
+        "关于作者以及Tips"
       ),
     key: "about",
     icon: renderIcon(InformationCircleOutline),

src/pages/About.vue

@@ -1,10 +1,65 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const show = ref(false);
+const show1 = ref(false);
+</script>
 
 <template>
-    <div class="container">
-        <h1>About</h1>
-    </div>
+  <div class="container">
+    <n-card title="本软件动机：" hoverable>
+      <n-space vertical>
+        <p>更方便的获取 USTB 校园网每日使用情况，查询流量，解绑 MAC 地址等。</p>
+        <p>
+          通过调用校园网的
+          API，并且数据都在本地进行存储。（事实上没有存储任何数据）
+        </p>
+        <p>
+          源代码可以在 https://github.com/CakeAL/ustb-wifi-tools/
+          查看，欢迎Star，Folk并提交PR
+        </p>
+        <p>对此软件有任何问题可以在 Github 项目提交 issues 。</p>
+        <p>已经懒得改前端了。</p>
+        <p>如果觉得这个软件帮助了您许多，可以打钱给我：</p>
+        <n-switch v-model:value="show">
+          <template #checked> 折叠收款码 </template>
+          <template #unchecked> 展开收款码 </template>
+        </n-switch>
+        <n-collapse-transition :show="show">
+          <n-image
+            width="200"
+            src="/public/4243a50e827cbd72c4213247dd0833bb_720.jpg"
+          />
+        </n-collapse-transition>
+        <h4>关于作者：一个来自USTB计院物联网工程的老东西。</h4>
+        <p>这是我的Github：https://github.com/CakeAL/ </p>
+        <h4>下面是学校给你的TIPS</h4>
+        <p>校园网老是要重新登陆：</p>
+        <n-switch v-model:value="show1">
+          <template #checked> 折叠 </template>
+          <template #unchecked> 展开 </template>
+        </n-switch>
+        <n-collapse-transition :show="show1">
+          <n-image
+            width="500"
+            src="/public/A250E7A1CDCE4161894E703B177AC0C6_频繁掉线.jpg"
+          />
+        </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>
+        <p>1. 不要使用注销页直接登陆，首先忽略此网络（忘记），然后重开Wi-Fi，再进行登陆，会跳出登录页（虽然ip和注销页是一样的）</p>
+        <p>2. 关掉代理，再重新进行上述操作。</p>
+        <p>3. 重启电脑。</p>
+        <p>注销页网址：http://202.204.48.66/ (你知道么，学号是可以点击的)</p>
+    </n-space>
+    </n-card>
+  </div>
 </template>
 
 <style scoped>
+.container {
+  height: 100vh;
+  overflow: auto;
+}
 </style>

src/pages/UnbindMacs.vue

@@ -11,6 +11,7 @@ interface MacAddress {
 const pop_message = useMessage();
 const this_mac = ref<string>("");
 const mac_addrs = ref<MacAddress[] | null>(null);
+const unbind_macs = ref<Array<boolean>>([]);
 
 onMounted(() => {
   get_current_device_mac();
@@ -28,6 +29,26 @@ const load_mac_address = async () => {
     pop_message.error(err)
   );
   mac_addrs.value = JSON.parse(res as string);
+  if (mac_addrs.value !== null) {
+    for (let i = 0; i < mac_addrs.value.length; i += 1) {
+      unbind_macs.value.push(false);
+    }
+  }
+};
+
+const unbind = async () => {
+  // console.log(unbind_macs.value); 传入 false 的
+  let macs: string[] = [];
+  let i: number;
+  for (i = 0; i < unbind_macs.value.length; i += 1) {
+    if (unbind_macs.value[i] === false && mac_addrs.value !== null) {
+      macs.push(mac_addrs.value[i].mac_address);
+    }
+  }
+  // console.log(macs);
+  await invoke("do_unbind_macs", {
+    macs: macs,
+  }).catch((err) => pop_message.error(err));
 };
 </script>
 
@@ -55,10 +76,15 @@ const load_mac_address = async () => {
             <th>{{ index + 1 }}</th>
             <th>{{ mac_addr.device_name }}</th>
             <th>{{ mac_addr.mac_address }}</th>
-            <th>1</th>
+            <th>
+              <n-checkbox size="large" v-model:checked="unbind_macs[index]" />
+            </th>
           </tr>
         </tbody>
       </n-table>
+      <n-button strong secondary type="info" @click="unbind">
+        确定解绑
+      </n-button>
     </div>
   </div>
 </template>