优化页面背景&完善buildinfo通过webpack打包脚本注入&专栏阅读修复

quickapp.config.js

@@ -1,4 +1,22 @@
 const path = require('path');
+const childProcess = require('child_process');
+const os = require('os');
+
+// 注入buildinfo
+const gitCommitHash = childProcess.execSync('git rev-parse HEAD').toString().trim();
+const username = os.userInfo().username;
+const buildTime = new Date().toISOString();
+
+const buildInfoContent = `
+  export const GIT_COMMIT_HASH = "${gitCommitHash}";
+  export const BUILD_TIME = "${buildTime}";
+  export const BUILD_USER = "${username}";
+`;
+
+const fs = require('fs');
+const path = require('path');
+const buildInfoPath = path.resolve(__dirname, 'src/buildinfo.ts');
+fs.writeFileSync(buildInfoPath, buildInfoContent, 'utf8');
 
 module.exports = {
     webpack: {
@@ -17,7 +35,8 @@ module.exports = {
         resolve: {
             alias: {
                 '@components': path.resolve(__dirname, 'src/components'),
-                '@less': path.resolve(__dirname, 'src/less')
+                '@less': path.resolve(__dirname, 'src/less'),
+                '@buildInfo': buildInfoPath
             }
         }
     },

scripts/build_band9.py

@@ -4,6 +4,5 @@ import buildtools
 DESIGN_WIDTH = 192
 
 buildtools.setManifestDesignWidth(DESIGN_WIDTH)
-buildtools.writeBuildInfo()
 
 os.system("aiot release --enable-custom-component --enable-jsc --enable-protobuf --enable-image-png8")

scripts/build_rw5.py

@@ -0,0 +1,8 @@
+import os
+import buildtools
+
+DESIGN_WIDTH = 432
+
+buildtools.setManifestDesignWidth(DESIGN_WIDTH)
+
+os.system("aiot release --enable-custom-component --enable-jsc --enable-protobuf --enable-image-png8")

scripts/build_s3.py

@@ -4,6 +4,5 @@ import buildtools
 DESIGN_WIDTH = 466
 
 buildtools.setManifestDesignWidth(DESIGN_WIDTH)
-buildtools.writeBuildInfo()
 
 os.system("aiot release --enable-custom-component --enable-jsc --enable-protobuf --enable-image-png8")

scripts/buildtools.py

@@ -2,20 +2,6 @@ import json
 import subprocess
 from datetime import datetime
 
-def writeBuildInfo():
-    f = open("src/buildinfo.ts", "r")
-    f = f.read()
-
-    print(f)
-    out = f.replace("SCRIPT_REPLACE_GIT_COMMIT", getGitCommitHash())
-    out = out.replace("SCRIPT_REPLACE_BUILD_TIME", getBuildTime())
-    
-    f = open("src/buildinfo.ts", "w+")
-    f.write(out)
-    f.close()
-
-    print("Build info writed.")
-
 def setManifestDesignWidth(width):
     manifest = readFileToJson("src/manifest.json")
     manifest["config"]["designWidth"] = width

src/ambientlight.ts

@@ -1,40 +0,0 @@
-import { getDeviceInformation } from "./tools";
-
-class AmbientLightRunner {
-    ambientlight: any;
-    intervalId: NodeJS.Timeout | null;
-    rotatedeg_num: number;
-    settings: any;
-
-    constructor(ambientlight: any, settings: any) {
-        this.ambientlight = ambientlight;
-        this.intervalId = null;
-        this.rotatedeg_num = 0;
-        this.settings = settings
-    }
-
-    async start() {
-        const deviceinfo = await getDeviceInformation();
-
-        const widthCenter = deviceinfo.screenWidth / 2;
-        const heightCenter = deviceinfo.screenHeight / 2;
-
-        this.ambientlight.transform_origin = `${widthCenter}px ${heightCenter}px`;
-
-        if(this.settings.SETTINGS.enableFullAnimation){
-            this.intervalId = setInterval(() => {
-                this.ambientlight.rotatedeg = `${this.rotatedeg_num}deg`;
-                this.rotatedeg_num += 1.5;
-            }, 800);
-        }
-    }
-
-    stop() {
-        if (this.intervalId !== null) {
-            clearInterval(this.intervalId);
-            this.intervalId = null;
-        }
-    }
-}
-
-export { AmbientLightRunner };

src/app.ux

@@ -9,34 +9,41 @@ import * as tools from "./tools"
 import * as articletools from "./articletools"
 import * as funnytips from "./funnytips"
 import * as settings from "./settings"
-import * as ambientlight from "./ambientlight"
 import * as jumpcheck from "./jumpcheck"
 import * as htmlparser from "./htmlparser"
 import * as savedcontent from "./savedcontent"
+import * as bgimg from "./bgimg"
 import * as buildinfo from "./buildinfo"
 export default {
   dayjs: dayjs,
-
   animengine: animengine,
   biliclient: null,
   tools: tools,
   funnytips: funnytips,
   settings: settings,
-  ambientlight: ambientlight,
   jumpcheck: jumpcheck,
   articletools: articletools,
   htmlparser: htmlparser,
   savedcontent: savedcontent,
   buildinfo: buildinfo,
+  bgimg: bgimg,
   DEVICE_INFO: null,
   async onCreate() {
     console.log("app created")
+
     console.log("appinit > loadSettings")
     settings.loadSettings()
+
     console.log("appinit > initSavedContentManager")
     await this.savedcontent.SavedContentManager.initialize()
+
     console.log("appinit > initDeviceInfo")
     this.DEVICE_INFO = await this.tools.getDeviceInformation()
+    global.DEVICE_INFO = this.DEVICE_INFO
+
+    console.log("appinit > initBgImg")
+    bgimg.Init()
+
     console.log("appinit > createBiliClient")
     this.biliclient = new BilibiliClient()
   },

src/bgimg.ts

@@ -0,0 +1,29 @@
+import { router } from "./tsimports";
+
+let BGIMG_STYLES: any = {}
+
+let BGIMG_PAGES_MAP: any = {}
+
+export function Init(){
+    var screenShape = global.DEVICE_INFO.screenShape
+
+    BGIMG_STYLES = {
+        Default: `/common/pagebg/${screenShape}/pink.png`,
+        Pink: `/common/pagebg/${screenShape}/pink.png`,
+        Yellow: `/common/pagebg/${screenShape}/yellow.png`,
+        Blue: `/common/pagebg/${screenShape}/blue.png`
+    }
+
+    BGIMG_PAGES_MAP = {
+        "pages/app/features/main": BGIMG_STYLES.Pink,
+        "pages/app/features/savedcontent": BGIMG_STYLES.Yellow,
+        "pages/search/search": BGIMG_STYLES.Blue,
+        "pages/search/searchresult": BGIMG_STYLES.Blue
+    }
+}
+
+export function GetBackgroundImageSrc(){
+    var pageName = router.getState().name
+    console.log("[GetBackgroundImageSrc]", router.getState().name, BGIMG_PAGES_MAP[pageName])
+    return BGIMG_PAGES_MAP[pageName]
+}

src/bilibiliclient/api/request.ts

@@ -24,6 +24,9 @@ export const BilibiliClientAPIRequestMethods = {
         if (this.sessData) {
             cookies += `SESSDATA=${this.sessData}; bili_jct=${this.biliJct}; DedeUserID=${this.dedeUserID}; sid=${this.sid}; `;
         }
+        // 专栏保持旧版
+        cookies += "opus-goback=1"
+
         return cookies;
     },
 

src/buildinfo.ts

@@ -1,2 +0,0 @@
-export const GIT_COMMIT: string = "SCRIPT_REPLACE_GIT_COMMIT";
-export const BUILD_TIME: string = "SCRIPT_REPLACE_BUILD_TIME";

src/components/BetterOnlineImage/BetterOnlineImage.ux

@@ -78,9 +78,6 @@ export default {
             this.div_style["min-height"] = this.height
         }
 
-        console.log(this.div_style)
-        console.log(this.image_style)
-
         request.download({
             url: this.src,
             success: (data) => {

src/components/FullScreenInput/FullScreenInput.ux

@@ -2,7 +2,7 @@
 
 <template>
     <div class="inputpanel">
-        <input-method style="position: absolute" hide={{keyboardHide}} @complete="InputEvent" @delete="InputDelete" @screentype="{{screentype}}" vibratemode="short"></input-method>
+        <input-method if="{{global_show}}" style="position: absolute" hide={{keyboardHide}} @complete="InputEvent" @delete="InputDelete" @screentype="{{screentype}}" vibratemode="short"></input-method>
         <div class="inputactions">
             <div style="margin-left: 35px" @click="ExitInput">
                 <image class="inputaction_img" src="/common/textinput_back.png"></image>
@@ -25,8 +25,9 @@ export default {
         }
     },
     data: {
+        global_show: false,
         input_text: "",
-        screentype: "circle"
+        screentype: ""
     },
     InputEvent(evt){
         this.input_text += evt.detail.content
@@ -43,9 +44,8 @@ export default {
         })
     },
     async InitScreenType(){
-        if(!this.screentype){
-            this.screentype = this.$app.$def.DEVICE_INFO.screenShape
-        }
+        this.screentype = this.$app.$def.DEVICE_INFO.screenShape
+        this.global_show = true
     },
     onInit(){
         this.InitScreenType()

src/components/SwitchBar/SwitchBar.ux

@@ -18,7 +18,7 @@
           {{ _parentVM.$t(title) }}
         </text>
       </div>
-      <time-view style="position: absolute;"></time-view>
+      <time-view style="position: absolute"></time-view>
     </div>
   </div>
 </template>
@@ -42,8 +42,8 @@ export default {
     })
   },
   onInit() {
-    const deviceInfo = this.$app.$def.DEVICE_INFO;
-    if (deviceInfo.screenWidth <= 450){
+    const deviceInfo = this.$app.$def.DEVICE_INFO
+    if (deviceInfo.screenShape == "rect") {
       this.barRowStyle["width"] = `${deviceInfo.screenWidth}px`
       this.useRowLayout = true
     }

src/components/TimeView/TimeView.ux

@@ -49,7 +49,7 @@ export default {
     }, 2000)
 
     const deviceInfo = this.$app.$def.DEVICE_INFO
-    if (deviceInfo.screenWidth <= 450) {
+    if (deviceInfo.screenShape == "rect") {
       this.compStyle["right"] = "100px"
       this.useRectTime = true
     }

src/components/TitleBar/TitleBar.ux

@@ -32,7 +32,7 @@ export default {
   },
   onInit() {
     const deviceInfo = this.$app.$def.DEVICE_INFO;
-    if (deviceInfo.screenWidth <= 450){
+    if (deviceInfo.screenShape == "rect"){
       this.barRowStyle["width"] = `${deviceInfo.screenWidth}px`
       this.useRowLayout = true
     }

src/components/Video/Video.ux

@@ -63,7 +63,7 @@ export default {
     }
     
     const deviceInfo = this.$app.$def.DEVICE_INFO;
-    if (deviceInfo.screenWidth <= 450 || this.video.title.length > 25){
+    if (deviceInfo.screenShape == "rect" || this.video.title.length > 25){
       this.useColumnTitle = true;
       // 手环Pro 系列
       if (deviceInfo.screenWidth <= 380){
@@ -71,7 +71,7 @@ export default {
         this.SetOnlineImageLoadSize(100, 75);
       }
       // RW系列
-      else if (deviceInfo.screenWidth <= 450){
+      else if (deviceInfo.screenShape == "rect"){
         this.SetOnlineImageSize(265, 150);
         this.SetOnlineImageLoadSize(265, 150);
       }

src/pages/app/features/main/main.ux

@@ -3,9 +3,7 @@
 
 <template>
   <div class="page">
-    <image if="{{this.$app.$def.DEVICE_INFO.screenWidth >= 464}}" src="/common/rounddevices_bg.png"
-      style="position: absolute; transform: rotate({{ambientlight.rotatedeg}}); transform-origin: {{ambientlight.transform_origin}}; left: 0px">
-    </image>
+    <image style="position: absolute; left: 0px" src="{{this.$app.$def.bgimg.GetBackgroundImageSrc()}}"></image>
     <scroll scroll-y="true" class="scroll" bounces="true">
       <switch-bar title="main.title"></switch-bar>
       <text class="tip">{{ funnytip }}</text>
@@ -22,9 +20,6 @@
     <text style="position: absolute; color: rgba(0, 0, 0, 0); width: 0px; top: 50px">
       {{ anims.refresh_bottom.value }}
     </text>
-    <text style="position: absolute; color: rgba(0, 0, 0, 0); width: 0px; top: 50px">
-      {{ ambientlight.rotatedeg }}
-    </text>
     <image if="{{anims.showRefreshFX}}" style="position: absolute; bottom: {{anims.refresh_bottom.value}}px"
       src="/common/TranslateFX/refreshFX.png"></image>
   </div>
@@ -46,11 +41,7 @@ export default {
       showRefreshFX: false,
       refresh_bottom: {value: "-350"}
     },
-    ambientlight: {
-      transform_origin: "0px 0px",
-      rotatedeg: "0deg"
-    },
-    ambientlightObj: null
+    bgimg: ""
   },
   async Refresh() {
     if (!this.anims.showRefreshFX) {
@@ -125,16 +116,9 @@ export default {
       450,
       1000
     )
-
-    this.ambientlightObj = new this.$app.$def.ambientlight.AmbientLightRunner(
-      this.ambientlight,
-      this.$app.$def.settings.SETTINGS
-    )
-    this.ambientlightObj.start()
   },
   onDestroy() {
     this.$app.$def.animengine.clearPageAnims("mainPage")
-    this.ambientlightObj?.stop()
   }
 }
 </script>

src/pages/app/features/savedcontent/savedcontent.ux

@@ -3,7 +3,7 @@
 
 <template>
   <div class="page">
-    <image style="position: absolute" src="/common/rounddevices_savedcontentbg.png" static></image>
+    <image style="position: absolute; left: 0px" src="{{this.$app.$def.bgimg.GetBackgroundImageSrc()}}"></image>
     <scroll class="scroll" scroll-y="true" bounces="true">
       <switch-bar title="savedcontent.title" static></switch-bar>
       <div style="flex-direction: column; align-items: center; width: 100%" for="{{content}}">

src/pages/article/articleshow/articleshow.ux

@@ -71,7 +71,6 @@ export default {
           article_html = await this.$app.$def.biliclient.getArticle(this.cvid)
         }
 
-        console.log(article_html)
         const article = this.$app.$def.articletools.parseArticlePageHtml(article_html)
         this.article.readInfo = article.readInfo // 原地更新 减少开辟内存空间
 

src/pages/search/search/search.less

@@ -12,13 +12,6 @@
     font-weight: 500;
 }
 
-.hotwords {
-    width: 272px;
-    height: 243px;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
 .hottitle {
     font-size: 26px;
     font-weight: 600;
@@ -26,7 +19,11 @@
     margin-top: 3px;
 }
 
-.hotwordlist {
-    width: 272px;
-    height: 245px;
+.hotword-text {
+    font-size: 22px;
+    font-weight: 500;
+    width: 238px;
+    lines: 1;
+    margin-left: 12px;
+    text-overflow: ellipsis;
 }

src/pages/search/search/search.ux

@@ -3,39 +3,21 @@
 
 <template>
   <div class="page">
-    <image style="position: absolute" src="/common/rounddevices_searchbg.png" static></image>
+    <image style="position: absolute; left: 0px" src="{{this.$app.$def.bgimg.GetBackgroundImageSrc()}}"></image>
     <switch-bar title="search.title" static></switch-bar>
     <div class="searchbtn" @click="OpenInput">
       <image src="/common/searchpage_search.png" style="margin-left: 25px" static></image>
       <text class="searchtip" style="margin-left: 15px" static>{{ $t("search.clickToSearch") }}</text>
     </div>
-    <div class="hotwords" style="margin-top: 23px">
-      <div style="flex-direction: row; align-items: center" static>
-        <image src="/common/searchpage_fire.png" style="object-fit: scale-down" static></image>
-        <text class="hottitle" static>{{ $t("search.hotSearch") }}</text>
-      </div>
-      <list style="margin-top: 13px" class="hotwordlist" if="{{showHotwordsList}}">
-        <list-item type="hotwordlist" style="
-            flex-direction: row;
-            align-items: center;
-            margin-top: 13px;
-            width: 100%;
-            height: 30px;
-          " for="{{hotwords}}">
-          <image src="{{$item.icon}}@22w_22h" static></image>
-          <text style="
-              font-size: 22px;
-              font-weight: 500;
-              width: 238px;
-              lines: 1;
-              margin-left: 12px;
-              text-overflow: ellipsis;
-            ">
-            {{ $item.show_name }}
-          </text>
-        </list-item>
-      </list>
+    <div style="flex-direction: row; align-items: center; margin-top: 20px" static>
+      <image src="/common/searchpage_fire.png" style="object-fit: scale-down" static></image>
+      <text class="hottitle" static>{{ $t("search.hotSearch") }}</text>
     </div>
+    <div for="{{hotwords}}" style="margin-top: 15px">
+      <image src="{{$item.icon}}@22w_22h" static></image>
+      <text class="hotword-text">{{ $item.show_name }}</text>
+    </div>
+    <text style="margin-top: 25px"></text>
     <image style="position: absolute; margin-top: 305px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
     <full-screen-input style="position: absolute" if="{{input_mode}}" @send="GoSearch" @exit="ExitInput"></full-screen-input>
   </div>

src/pages/search/searchresult/searchresult.ux

@@ -5,7 +5,7 @@
 
 <template>
   <div class="page">
-    <image style="position: absolute; opacity: 0.5" src="/common/rounddevices_searchbg.png"></image>
+    <image style="position: absolute; left: 0px" src="{{this.$app.$def.bgimg.GetBackgroundImageSrc()}}"></image>
     <scroll scroll-y="true" class="scroll" bounces="true">
       <switch-bar title="searchresult.title" if="{{!overview_mode}}"></switch-bar>
       <div class="searchbar" if="{{!overview_mode}}" @click="SearchBarClick">