动态详情初步实现

package.json

@@ -28,29 +28,27 @@
   },
   "devDependencies": {
     "@aiot-toolkit/jsc": "^1.0.7",
-    "@commitlint/cli": "^17.3.0",
+    "@commitlint/cli": "^19.6.1",
-    "@commitlint/config-conventional": "^17.3.0",
+    "@commitlint/config-conventional": "^19.6.0",
     "aiot-toolkit": "2.0.4-beta.3",
     "babel-eslint": "^10.0.1",
-    "eslint": "^6.0.0",
+    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^6.0.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-import-resolver-node": "^0.3.7",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-ux": "^0.0.4",
-    "husky": "^8.0.1",
+    "husky": "^9.1.7",
-    "less": "^3.12.2",
+    "less": "^4.2.2",
-    "less-loader": "^6.2.0",
+    "less-loader": "^12.2.0",
-    "lint-staged": "^8.2.1",
+    "lint-staged": "^15.4.1",
-    "postcss-html": "^1.3.0",
+    "postcss-html": "^1.8.0",
     "postcss-less": "^6.0.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.4.2",
-    "stylelint": "^14.5.3",
+    "stylelint": "^16.13.2",
-    "stylelint-config-recess-order": "^3.0.0",
+    "stylelint-config-recess-order": "^6.0.0",
-    "stylelint-config-standard": "^25.0.0",
+    "stylelint-config-standard": "^37.0.0",
-    "stylelint-order": "^5.0.0",
+    "stylelint-order": "^6.0.4",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.6.3",
     "ux-types": "^0.1.1"
   },
   "dependencies": {

quickapp.config.js

@@ -18,17 +18,25 @@ const buildInfoPath = path.resolve(__dirname, 'src/buildinfo.ts');
 fs.writeFileSync(buildInfoPath, buildInfoContent, 'utf8');
 
 module.exports = {
+    // 在toolkit2.0以及更高版本，这实际上是对rspack的配置
     webpack: {
         module: {
             rules: [
                 {
-                    test: /\.tsx?$/,
+                    test: /\.ts$/,
-                    use: [
+                    exclude: [/node_modules/],
-                        {
+                    // 因为这实际上是针对rspack的配置，所以可以使用builtin:swc-loader
-                            loader: "ts-loader",
+                    // 使用该loader可以大幅度提升typescript转换效率
+                    loader: 'builtin:swc-loader',
+                    options: {
+                        jsc: {
+                            parser: {
+                                syntax: 'typescript',
                             },
-                    ],
                         },
+                    },
+                    type: 'javascript/auto',
+                }
             ]
         },
         resolve: {

src/components/DynShow/DynShow.ux

@@ -1,7 +1,7 @@
-<import name="online-image" src="../BetterOnlineImage/BetterOnlineImage.ux"></import>
+<import name="online-image" src="@components/BetterOnlineImage/BetterOnlineImage.ux"></import>
 
 <template>
-    <div class="comp-root">
+  <div class="comp-root" @click="GoDetail">
     <div class="user">
       <image class="userface" src="{{dyn.modules.module_author.face}}@65w_65h"></image>
       <div class="userinfo">
@@ -10,25 +10,93 @@
           {{ dyn.modules.module_author.pub_time }}
         </text>
         <text style="font-size: 18px; color: #5e5e5e">
-                    {{ dyn.modules.module_author.pub_action }}
+          {{ pubAction }}
         </text>
       </div>
     </div>
     <div class="content" if="{{dyn.type == 'DYNAMIC_TYPE_DRAW'}}">
       <text class="dyn-content-text">{{ dyn.modules.module_dynamic.desc.text }}</text>
-            <online-image class="dyn-content-draw-preview" width="180px" height="100px" margin-top="5px"
+      <online-image class="dyn-content-draw-preview" width="180px" height="100px" margin-top="5px" lock-size="true"
-                lock-size="true" loading-anim="true" src="{{ dyn.modules.module_dynamic.major.draw.items[0].src }}@180w_100h"></online-image>
+        loading-anim="true" src="{{ dyn.modules.module_dynamic.major.draw.items[0].src }}@180w_100h"></online-image>
     </div>
   </div>
 </template>
 
 <script>
+import router from "@system.router"
 export default {
   props: {
     dyn: {
       type: Object,
       default: {}
     }
+  },
+  data: {
+    pubAction: "未知"
+  },
+  generatePubAction() {
+    if (this.dyn.modules.module_author.pub_action) return this.dyn.modules.module_author.pub_action
+
+    switch (this.dyn.type) {
+      case "DYNAMIC_TYPE_NONE":
+        return "<无效动态>"
+      case "DYNAMIC_TYPE_FORWARD":
+        return "转发了动态"
+      case "DYNAMIC_TYPE_AV":
+        return "投稿了视频"
+      case "DYNAMIC_TYPE_PGC":
+        return "发布了剧集"
+      case "DYNAMIC_TYPE_COURSES":
+        return "发布了课程动态"
+      case "DYNAMIC_TYPE_WORD":
+        return "发布了文本动态"
+      case "DYNAMIC_TYPE_DRAW":
+        return "发布了图文动态"
+      case "DYNAMIC_TYPE_ARTICLE":
+        return "投稿了专栏"
+      case "DYNAMIC_TYPE_MUSIC":
+        return "投稿了音频"
+      case "DYNAMIC_TYPE_COMMON_SQUARE":
+        return "分享了内容"
+      case "DYNAMIC_TYPE_COMMON_VERTICAL":
+        return "发布了竖屏动态"
+      case "DYNAMIC_TYPE_LIVE":
+        return "分享了直播间"
+      case "DYNAMIC_TYPE_MEDIALIST":
+        return "分享了收藏夹"
+      case "DYNAMIC_TYPE_COURSES_SEASON":
+        return "发布了课程内容"
+      case "DYNAMIC_TYPE_COURSES_BATCH":
+        return "<批量课程动态>"
+      case "DYNAMIC_TYPE_AD":
+        return "<广告动态>"
+      case "DYNAMIC_TYPE_APPLET":
+        return "<小程序动态>"
+      case "DYNAMIC_TYPE_SUBSCRIPTION":
+        return "<订阅动态>"
+      case "DYNAMIC_TYPE_LIVE_RCMD":
+        return "分享了直播开播"
+      case "DYNAMIC_TYPE_BANNER":
+        return "发布了横幅动态"
+      case "DYNAMIC_TYPE_UGC_SEASON":
+        return "更新了合集内容"
+      case "DYNAMIC_TYPE_SUBSCRIPTION_NEW":
+        return "<新订阅动态>"
+      default:
+        return "<未知动态类型>"
+    }
+  },
+  GoDetail() {
+    router.push({
+      uri: "pages/app/features/dynamic/detail",
+      params: {
+        dyn: this.dyn,
+        pubAction: this.generatePubAction()
+      }
+    })
+  },
+  onInit(){
+    this.pubAction = this.generatePubAction()
   }
 }
 </script>
@@ -78,5 +146,7 @@ export default {
   font-size: 20px;
   font-weight: 600;
   max-width: 100%;
+  max-height: 100px;
+  text-overflow: ellipsis;
 }
 </style>

src/components/FullScreenInput/FullScreenInput.ux

@@ -1,4 +1,4 @@
-<import name="input-method" src="../InputMethod/InputMethod.ux"></import>
+<import name="input-method" src="@components/InputMethod/InputMethod.ux"></import>
 
 <template>
     <div class="inputpanel">

src/components/SwitchBar/SwitchBar.ux

@@ -1,4 +1,4 @@
-<import name="time-view" src="../TimeView/TimeView.ux"></import>
+<import name="time-view" src="@components/TimeView/TimeView.ux"></import>
 
 <template>
   <div>

src/components/TitleBar/TitleBar.ux

@@ -1,4 +1,4 @@
-<import name="time-view" src="../TimeView/TimeView.ux"></import>
+<import name="time-view" src="@components/TimeView/TimeView.ux"></import>
 
 <template>
   <div>

src/components/Video/Video.ux

@@ -1,7 +1,8 @@
-<import name="online-image" src="../BetterOnlineImage/BetterOnlineImage.ux"></import>
+<import name="online-image" src="@components/BetterOnlineImage/BetterOnlineImage.ux"></import>
 
 <template>
-    <div class="vid" @click="OpenVideo(video.bvid)">
+  <div>
+    <div class="vid" @click="OpenVideo(video.bvid)" if="{{loadComp}}">
         <div style="{{vidinfo_style}}" class="vidinfo">
             <div class="vidpicture" style="{{vidpicture_style}}">
               <online-image width="{{vidpicture_style['max-width']}}" height="{{vidpicture_style['max-height']}}" lock-size="true" border-radius="30px" object-fit="cover" loading-anim="true" src="{{video.pic}}@{{onlineimg_width}}w_{{onlineimg_height}}h"></online-image>
@@ -19,13 +20,14 @@
             </div>
         </div>
     </div>
+  </div>
 </template>
 
 <script>
 import router from "@system.router"
 
 export default {
-  props: ["video"],
+  props: ["video", "bvid"],
   data: {
     useColumnTitle: false,
     vidpicture_style: {
@@ -35,7 +37,8 @@ export default {
       "max-height": "100px"
     },
     onlineimg_width: "160",
-    onlineimg_height: "100"
+    onlineimg_height: "100",
+    loadComp: false
   },
   computed: {
     stat_view(){
@@ -62,11 +65,7 @@ export default {
     this.onlineimg_width = width;
     this.onlineimg_height = height;
   },
-  onInit(){
+  doStyleAdjustTask(){
-    if(!(this.video.pic.includes("http://") || this.video.pic.includes("https://"))){
-      this.video.pic = "https:" + this.video.pic
-    }
-    
     const deviceInfo = global.DEVICE_INFO;
     if (deviceInfo.screenShape == "rect" || this.video.title.length > 25){
       this.useColumnTitle = true;
@@ -86,6 +85,24 @@ export default {
         this.SetOnlineImageLoadSize(300, 150);
       }
     }
+  },
+  doVidObjectPatch(){
+    if(!(this.video.pic.includes("http://") || this.video.pic.includes("https://"))){
+      this.video.pic = "https:" + this.video.pic
+    }
+  },
+  async asyncInit(){
+    if(!this.video){
+      this.video = await global.biliclient.getVideoInfoByBVID(this.bvid)
+    }
+
+    this.loadComp = true
+
+    this.doVidObjectPatch()
+    this.doStyleAdjustTask()
+  },
+  onInit(){
+    this.asyncInit()
   }
 }
 </script>

src/manifest.json

@@ -152,6 +152,9 @@
             "pages/app/features/dynamic": {
                 "component": "dynamic"
             },
+            "pages/app/features/dynamic/detail": {
+                "component": "detail"
+            },
             "pages/app/features/settings/opensoftware": {
                 "component": "opensoftware"
             },

src/pages/app/features/dynamic/detail/detail.less

@@ -0,0 +1,45 @@
+@import '@less/defs.less';
+@import '@less/color.less';
+
+.user {
+    align-items: center;
+    width: 76%;
+    .flex-row(10px, #00000000);
+}
+
+.userinfo {
+    margin-left: 20px;
+    .flex-column(0px, #00000000);
+}
+
+.userface {
+    .radius(50%);
+    min-width: 65px;
+    min-height: 65px;
+    max-width: 65px;
+    max-height: 65px;
+}
+
+.decorate {
+    position: absolute;
+    right: 0px;
+}
+
+.username {
+    font-size: 24px;
+    font-weight: 600;
+    lines: 1;
+    max-width: 260px;
+    text-overflow: ellipsis;
+}
+
+.ctx {
+    width: 76%;
+    .flex-column(10px, #00000000);
+}
+
+.dyn-content-text {
+    font-size: 22px;
+    font-weight: 600;
+    text-overflow: ellipsis;
+}

src/pages/app/features/dynamic/detail/detail.ux

@@ -1,14 +1,51 @@
 <import name="title-bar" src="@components/TitleBar/TitleBar.ux"></import>
+<import name="online-image" src="@components//BetterOnlineImage/BetterOnlineImage.ux"></import>
+<import name="videoshow" src="@components/Video/Video.ux"></import>
 
 <template>
   <div class="page">
     <title-bar title="dynamic.detail.title"></title-bar>
+    <div class="user">
+      <image class="userface" src="{{dyn.modules.module_author.face}}@75w_75h"></image>
+      <div class="userinfo">
+        <text class="username">{{ dyn.modules.module_author.name }}</text>
+        <text style="font-size: 18px; color: #5e5e5e; margin-top: 3px">
+          {{ dyn.modules.module_author.pub_time }}
+        </text>
+        <text style="font-size: 18px; color: #5e5e5e">
+          {{ pubAction }}
+        </text>
+      </div>
+    </div>
+    <div class="ctx">
+      <!-- 动态文本desc 不为空时渲染 -->
+      <text class="dyn-content-text" if="{{dyn.modules.module_dynamic.desc.text}}">{{ dyn.modules.module_dynamic.desc.text }}</text>
+
+      <!-- 图文动态 直接列表图片渲染 -->
+      <online-image if="{{dyn.type == 'DYNAMIC_TYPE_DRAW'}}" for="{{dyn.modules.module_dynamic.major.draw.items}}" src="{{$item.src}}@350w" loading-anim="true"></online-image>
+      <!-- 视频投稿动态 展示视频跳转 -->
+      <videoshow if="{{dyn.type == 'DYNAMIC_TYPE_AV'}}" bvid="{{dyn.modules.module_dynamic.major.archive.bvid}}"></videoshow>
+
+      <text else>该类型动态暂不支持展示</text>
+    </div>
+    <text style="margin-top: 30px"></text>
   </div>
 </template>
 
 <script>
 export default {
-
+  public: {
+    dyn: null,
+    pubAction: "N/A"
+  },
+  onInit(){
+    // 来自子组件push的object传递会变成字符串
+    // 因此需要进行类型检查和手动parse
+    if(typeof(this.dyn) != Object){
+      this.dyn = JSON.parse(this.dyn)
+      console.log(this.dyn)
+    }
+  }
 }
 </script>
 

src/pages/video/videodetail/videodetail.ux

@@ -39,18 +39,10 @@
           <image class="vidtoolimg" src="/common/vidtool_aisummary.png"></image>
           <text class="vidtooltext">{{ $t("video.aisummary") }}</text>
         </div>
-        <div class="vidtool" @click="WIPTips">
-          <image class="vidtoolimg" src="/common/vidtool_generatemanifest.png"></image>
-          <text class="vidtooltext">{{ $t("video.manifest") }}</text>
-        </div>
         <div class="vidtool" @click="WIPTips">
           <image class="vidtoolimg" src="/common/vidtool_watchlater.png"></image>
           <text class="vidtooltext">{{ $t("video.showLater") }}</text>
         </div>
-        <div class="vidtool" @click="WIPTips">
-          <image class="vidtoolimg" src="/common/vidtool_watchonphone.png"></image>
-          <text class="vidtooltext">{{ $t("video.showOnPhone") }}</text>
-        </div>
       </scroll>
       <default-button text="video.sendReply" margin-top="20px" @click="Reply"></default-button>
       <image src="/common/featurebtn_replyarea.png" style="margin-top: 15px" @click="GoReplyArea()"></image>

webpack.config.js

@@ -1,22 +0,0 @@
-module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                use: [
-                    {
-                        loader: "ts-loader",
-                    },
-                ],
-            },
-        ]
-    },
-    resolve: {
-        alias: {
-            '@components': path.resolve(__dirname, 'src/components'),
-            '@less': path.resolve(__dirname, 'src/less'),
-            '@protobuf': path.resolve(__dirname, 'src/protobuf'),
-            '$buildinfo': buildInfoPath
-        }
-    }
-}