设置页、动态页完工

src/app.ux

@@ -10,6 +10,7 @@ export default {
   tools: tools,
   funnytips: funnytips,
   settings: settings,
+  versionStr: "v2.0",
   onCreate() {
     console.log("app created")
     settings.loadSettings()

src/bilibiliclient.ts

@@ -135,6 +135,18 @@ class BilibiliClient {
         return response.data.data
     }
 
+    logOut(): any {
+        storage.delete({
+            key: "bilibili_account",
+            success: (data) => {
+                return true;
+            },
+            fail: (data, code) => {
+                return false;
+            }
+        })
+    }
+
     // 辅助函数，用于解析cookie字符串
     private parseCookie(cookie: string, name: string): string | null {
         const match = cookie.match(new RegExp(`${name}=([^;]+)`));

src/manifest.json

@@ -34,6 +34,12 @@
       },
       "pages/arealist": {
         "component": "arealist"
+      },
+      "pages/settings": {
+        "component": "settings"
+      },
+      "pages/about": {
+        "component": "about"
       }
     }
   }

src/pages/about/about.ux

@@ -0,0 +1,74 @@
+<template>
+    <div class="page">
+        <image src="/common/settings_about.png" style="margin-top: 22px"></image>
+        <text class="text" style="margin-top: 5px">关于应用</text>
+        <div class="appbar" style="margin-top: 22px">
+            <image src="/common/logo.png" style="border-radius: 50%; margin-left: 15px; width: 60px; height: 60px"></image>
+            <text class="text" style="margin-left: 20px">HyperBili</text>
+            <text class="text" style="color: #9E9E9E; margin-left: 15px">{{version}}</text>
+        </div>
+        <text class="text" style="margin-top: 30px">参与开发的人员</text>
+        <div class="developersbar" style="margin-top:  15px">
+            <div class="developer" style="margin-top: 20px; margin-left: 24px">
+                <image src="/common/aboutpage_code.png" style="width: 52px; height: 53px; object-fit: none"></image>
+                <text class="text" style="margin-left: 22px">@Searchstars</text>
+            </div>
+            <div class="developer" style="margin-top: 17px; margin-left: 24px">
+                <image src="/common/aboutpage_brush.png" style="width: 52px; height: 53px; object-fit: none"></image>
+                <text class="text" style="margin-left: 22px">@RX79XT</text>
+            </div>
+        </div>
+        <text class="text" style="color: #9E9E9E; margin-top: 12px">更多资源请访问</text>
+        <text class="text" style="margin-top: 5px">bandbbs.cn</text>
+        <text style="margin-top: 25px"></text>
+    </div>
+</template>
+
+<script>
+export default {
+    private: {
+        version: ""
+    },
+    onInit(){
+        this.version = this.$app.$def.versionStr
+    }
+}
+</script>
+
+<style>
+.page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+}
+
+.text {
+    font-size: 35px;
+    font-weight: 600;
+}
+
+.appbar {
+    width: 376px;
+    height: 84px;
+    border-radius: 60px;
+    background-color: #262626;
+    flex-direction: row;
+    align-items: center;
+}
+
+.developersbar {
+    width: 376px;
+    height: 155px;
+    border-radius: 50px;
+    background-color: #262626;
+    flex-direction: column;
+}
+
+.developer {
+    width: 320px;
+    flex-direction: row;
+}
+</style>

src/pages/login/login.ux

@@ -4,7 +4,7 @@
     <div class="page" style="margin-top: {{ anims.pagediv_mgt.value }}px">
       <text style="font-weight: bold; margin-top: 35px">扫码登录</text>
       <div class="qr_code">
-        <qrcode value="{{qr_value}}" show="{{show_qr}}" style="width: 90%; height: 90%"></qrcode>
+        <qrcode value="{{qr_value}}" show="{{show_qr}}" style="width: 210px; height: 210px"></qrcode>
         <image style="position: absolute" show="{{show_loading}}" src="{{anims.loading_img_src.value}}"></image>
       </div>
       <text style="margin-top: 20px; font-size: 26px; font-weight: bold">请前往官方客户端</text>
@@ -58,7 +58,7 @@ export default {
       await this.PollQR()
     }, 1500);
   },
-  onShow() {
+  onReady() {
     this.anims.pagediv = new this.$app.$def.animengine.DomAnim(
       "loginPage",
       {value: "0"},
@@ -95,8 +95,8 @@ export default {
 
 .qr_code {
   margin-top: 30px;
-  width: 50%;
-  height: 50%;
+  width: 233px;
+  height: 233px;
   align-items: center;
   justify-content: center;
   border-radius: 5%;

src/pages/main/main.ux

@@ -4,7 +4,7 @@
       <image src="/common/switch.png"></image>
       <text style="font-weight: 600; font-size: 30px; margin-left: 15px">首页</text>
     </div>
-    <text class="tip">{{funnytip}}</text>
+    <text class="tip">{{ funnytip }}</text>
     <image style="position: absolute; margin-top: 265px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
     <div class="recommend_div" if="{{show_recommend_div}}">
       <list class="recommend_list">
@@ -44,12 +44,12 @@ export default {
       loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     }
   },
-  SwitchPage(){
+  SwitchPage() {
     router.replace({
       uri: "pages/arealist"
     })
   },
-  OpenVideo(bvid){
+  OpenVideo(bvid) {
     console.log("openvid: " + bvid)
     router.push({
       uri: "pages/videodetail",
@@ -59,7 +59,10 @@ export default {
     })
   },
   async GetVids() {
-    this.recommend_vids = await this.$app.$def.biliclient.getMainPageRecommendVideos(this.$app.$def.settings.SETTINGS.fresh_type, this.$app.$def.settings.SETTINGS.home_vid_count)
+    this.recommend_vids = await this.$app.$def.biliclient.getMainPageRecommendVideos(
+      this.$app.$def.settings.SETTINGS.fresh_type,
+      this.$app.$def.settings.SETTINGS.home_vid_count
+    )
     this.anims.loading.stop()
     this.show_loading = false
     this.show_recommend_div = true
@@ -186,7 +189,7 @@ export default {
   text-overflow: ellipsis;
 }
 
-.vidstat{
+.vidstat {
   flex-direction: row;
   margin-left: 30px;
 }

src/pages/settings/settings.ux

@@ -4,20 +4,116 @@
             <image src="/common/switch.png"></image>
             <text style="font-weight: 600; font-size: 30px; margin-left: 15px">设置</text>
         </div>
-        <div class="setbase">
+        <div class="setbase" style="margin-top: 45px" onclick="ClickCountSet({{countset_name[0]}})">
             <image class="seticon" src="/common/settings_freshtype.png"></image>
-            <text class="setext_small" style="margin-left: 12px">视频推荐相关性</text>
+            <text class="setext_small">视频推荐相关性</text>
+            <text class="countset_num">{{ fresh_type }}</text>
         </div>
+        <div class="setbase" onclick="ClickCountSet({{countset_name[1]}})">
+            <image class="seticon" src="/common/settings_homevidcount.png"></image>
+            <text class="setext_small">首页视频推荐数</text>
+            <text class="countset_num">{{ home_vid_count }}</text>
+        </div>
+        <div class="setbase" @click="ClearTmp()">
+            <image class="seticon" src="/common/settings_removetmp.png"></image>
+            <text class="setext_small">清除缓存</text>
+            <image src="/common/arrow_right.png">{{ fresh_type }}</image>
+        </div>
+        <div class="setbase" @click="logout()">
+            <image class="seticon" src="/common/settings_logout.png"></image>
+            <text class="setext_small">退出登录</text>
+            <image src="/common/arrow_right.png">{{ fresh_type }}</image>
+        </div>
+        <div class="setbase" @click="GoAbout()">
+            <image class="seticon" src="/common/settings_about.png"></image>
+            <text class="setext_small">关于应用</text>
+            <image src="/common/arrow_right.png">{{ fresh_type }}</image>
+        </div>
+        <image style="margin-top: 30px" src="/common/opensource_warning.png"></image>
+        <text style="margin-top: 25px"></text>
     </div>
 </template>
 
 <script>
 import router from "@system.router"
+import prompt from "@system.prompt"
 export default {
+  private: {
+    fresh_type: 3,
+    home_vid_count: 10,
+    countset_name: [
+        "fresh_type",
+        "home_vid_count"
+    ],
+    countset: {
+        fresh_type_max: 3,
+        fresh_type_min: 1,
+        home_vid_count_max: 14,
+        home_vid_count_min: 1
+    }
+  },
   SwitchPage() {
     router.replace({
       uri: "pages/arealist"
     })
+  },
+  GoAbout(){
+    router.push({
+        uri: "pages/about"
+    })
+  },
+  ClearTmp(){
+    prompt.showToast({
+        message: "当前不可用"
+    })
+  },
+  ClickCountSet(name){
+    switch(name){
+        case "fresh_type":
+            var new_fresh_type = null
+            if(this.fresh_type < this.countset.fresh_type_max){
+                new_fresh_type = this.fresh_type + 1
+            }
+            else{
+                new_fresh_type = this.countset.fresh_type_min
+            }
+            this.$app.$def.settings.saveSettings({
+                fresh_type: new_fresh_type
+            })
+            setTimeout(() => {
+                this.UpdateNumView()
+            }, 100)
+            break
+        case "home_vid_count":
+            var new_home_vid_count = null
+            if(this.home_vid_count < this.countset.home_vid_count_max){
+                new_home_vid_count = this.home_vid_count + 1
+            }
+            else{
+                new_home_vid_count = this.countset.home_vid_count_min
+            }
+            this.$app.$def.settings.saveSettings({
+                home_vid_count: new_home_vid_count
+            })
+            setTimeout(() => {
+                this.UpdateNumView()
+            }, 100)
+            break
+    }
+  },
+  logout(){
+    this.$app.$def.biliclient.logOut()
+    router.clear()
+    router.replace({
+        uri: "pages/splash"
+    })
+  },
+  UpdateNumView() {
+    this.fresh_type = this.$app.$def.settings.SETTINGS.fresh_type
+    this.home_vid_count = this.$app.$def.settings.SETTINGS.home_vid_count
+  },
+  onInit() {
+    this.UpdateNumView()
   }
 }
 </script>
@@ -44,25 +140,32 @@ export default {
     background-color: #262626;
     align-items: center;
     flex-direction: row;
+    margin-top: 6px;
 }
 
 .seticon {
     margin-left: 25px;
+    width: 42px;
+    height: 42px;
+    object-fit: contain;
 }
 
 .setext_small {
     font-size: 22px;
     font-weight: 600;
+    margin-left: 15px;
+    width: 170px;
 }
 
 .setext {
     font-size: 30px;
     font-weight: 600;
+    margin-left: 15px;
 }
 
 .countset_num {
     font-size: 20px;
     font-weight: 600;
-    color: #4785FF;
+    color: #4785ff;
 }
 </style>

src/settings.ts

@@ -6,7 +6,7 @@ interface SettingsInterface {
 }
 
 export let SETTINGS: SettingsInterface = {
-  fresh_type: 1,
+  fresh_type: 3, //视频推荐相关度，范围1-3，根据大数据推送
   home_vid_count: 10,
 };