hanyixuanten/HyperBilibili
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动态详情初步实现

Browse Source
This commit is contained in:
Searchstars
2025-01-23 23:41:53 +08:00
parent 4d531015d5
commit 602fa0725d
14 changed files with 1871 additions and 3235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+15 -17
View File
@@ -28,29 +28,27 @@
},
"devDependencies": {
"@aiot-toolkit/jsc": "^1.0.7",
"@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.3.0",
"@commitlint/cli": "^19.6.1",
"@commitlint/config-conventional": "^19.6.0",
"aiot-toolkit": "2.0.4-beta.3",
"babel-eslint": "^10.0.1",
"eslint": "^6.0.0",
"eslint-config-prettier": "^6.0.0",
"eslint": "^9.18.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",
"less": "^3.12.2",
"less-loader": "^6.2.0",
"lint-staged": "^8.2.1",
"postcss-html": "^1.3.0",
"husky": "^9.1.7",
"less": "^4.2.2",
"less-loader": "^12.2.0",
"lint-staged": "^15.4.1",
"postcss-html": "^1.8.0",
"postcss-less": "^6.0.0",
"prettier": "^2.7.1",
"stylelint": "^14.5.3",
"stylelint-config-recess-order": "^3.0.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-order": "^5.0.0",
"ts-loader": "^9.5.1",
"typescript": "^5.6.3",
"prettier": "^3.4.2",
"stylelint": "^16.13.2",
"stylelint-config-recess-order": "^6.0.0",
"stylelint-config-standard": "^37.0.0",
"stylelint-order": "^6.0.4",
"ux-types": "^0.1.1"
},
"dependencies": {
quickapp.config.js
+13 -5
View File
@@ -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?$/,
use: [
{
loader: "ts-loader",
test: /\.ts$/,
exclude: [/node_modules/],
// 因为这实际上是针对rspack的配置，所以可以使用builtin:swc-loader
// 使用该loader可以大幅度提升typescript转换效率
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
},
],
},
},
type: 'javascript/auto',
}
]
},
resolve: {
src/components/DynShow/DynShow.ux
+75 -5
View File
@@ -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"
lock-size="true" loading-anim="true" src="{{ dyn.modules.module_dynamic.major.draw.items[0].src }}@180w_100h"></online-image>
<online-image class="dyn-content-draw-preview" width="180px" height="100px" margin-top="5px" lock-size="true"
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 -1
View File
@@ -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/RichText/RichText.ux
View File
src/components/SwitchBar/SwitchBar.ux
+1 -1
View File
@@ -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 -1
View File
@@ -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
+26 -9
View File
@@ -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(){
if(!(this.video.pic.includes("http://") || this.video.pic.includes("https://"))){
this.video.pic = "https:" + this.video.pic
}
doStyleAdjustTask(){
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
+3
View File
@@ -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
+45
View File
@@ -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
+38 -1
View File
@@ -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
-8
View File
@@ -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
-22
View File
@@ -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
}
}
}
yarn.lock
+1638 -3150
View File
File diff suppressed because it is too large Load Diff