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

重构标题栏&多屏适配&视频组件&功能区

Browse Source
This commit is contained in:
Searchstars
2024-12-01 15:10:17 +08:00
parent 55a924a8cb
commit 198e9a88bb
34 changed files with 415 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+6 -3
View File
@@ -1,5 +1,5 @@
{
"name": "HyperBilibili",
"name": "hyper-bilibili",
"version": "1.0.0",
"description": "",
"engines": {
@@ -49,8 +49,11 @@
"stylelint-config-recess-order": "^3.0.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-order": "^5.0.0",
"ux-types": "^0.1.1",
"ts-loader": "^9.5.1",
"typescript": "^5.6.3"
"typescript": "^5.6.3",
"ux-types": "^0.1.1"
},
"dependencies": {
"dayjs": "^1.11.13"
}
}
src/app.ux
+6
View File
@@ -1,4 +1,8 @@
<script>
// third-party deps
import dayjs from "dayjs"
// local imports
import * as animengine from "./animation/engine"
import { BilibiliClient } from "./bilibiliclient/client"
import * as tools from "./tools"
@@ -11,6 +15,8 @@ import * as htmlparser from "./htmlparser"
import * as savedcontent from "./savedcontent"
import * as buildinfo from "./buildinfo"
export default {
dayjs: dayjs,
animengine: animengine,
biliclient: null,
tools: tools,
src/common/arealist_home.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 947 B

After

Width:  |  Height:  |  Size: 1.4 KiB

src/components/BetterOnlineImage/BetterOnlineImage.ux
+22 -3
View File
@@ -1,6 +1,6 @@
<template>
<div @click="Click" style="margin-top: {{marginTop}}; border-radius: {{borderRadius}}; justify-content: center; align-items: center">
<image if="{{show_image}}" src="{{localsrc}}" style="border-radius: {{borderRadius}}"></image>
<div @click="Click" style="{{div_style}}">
<image if="{{show_image}}" src="{{localsrc}}" style={{image_style}} class="img"></image>
<image if="{{show_loading && loadingAnim}}" src="{{anims.loading_src.value}}"></image>
</div>
</template>
@@ -14,6 +14,7 @@ export default {
show_image: false,
localsrc: "",
image_style: {},
div_style: {},
anims: {
loading: null,
loading_src: {value: "/common/seqanims/dotloadingWhite/icons8-dotsloading_颜色反转-1.png"}
@@ -59,13 +60,27 @@ export default {
)
this.anims.loading.start()
this.div_style = {
"margin-top": this.marginTop,
"border-radius": this.borderRadius,
"justify-content": "center",
"align-items": "center"
}
this.image_style = {
"object-fit": this.objectFit
"object-fit": this.objectFit,
"border-radius": this.borderRadius
}
if(this.lockSize){
this.image_style["width"] = this.width
this.image_style["height"] = this.height
this.div_style["min-width"] = this.width
this.div_style["min-height"] = this.height
}
console.log(this.div_style)
console.log(this.image_style)
request.download({
url: this.src,
success: (data) => {
@@ -100,4 +115,8 @@ export default {
<style lang="less">
@import '../../less/global.less';
.img {
border-radius: 30px;
}
</style>
src/components/InputMethod/InputMethod.ux
+17 -17
View File
@@ -133,26 +133,26 @@
<div static style="position:absolute;left:0px;top:-11px;width:336px;height:276px;">
<progress percent="{{percent67}}" style="position: absolute;width:80px;top:258px;left:128px;color:#ffffff;stroke-width:6px;layer-color:#262626"></progress>
<scroll id="keyboard67" scroll-x="{{true}}" onscroll="handelScroll">
<div if="{{!numFlag}}" style="left: 6px;width:640px;height:170px;">
<div static style="position: absolute;left: 0px;top: 0px;width: 640px;height: 60px;">
<div if="{{!numFlag}}" style="left: 6px; flex-direction: column;">
<div static style="margin-left: 0px;margin-top: 0px;height: 60px;">
<text class="calbtn67" for="{{item in keys['full'][0]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 32px;top: 55px;width: 576px;height: 60px;">
<div static style="margin-left: 32px;margin-top: -5px;height: 60px;">
<text class="calbtn67" for="{{item in keys['full'][1]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 64px;top: 110px;width: 516px;height: 60px;">
<div static style="margin-left: 64px;margin-top: -5px;height: 60px;">
<text class="calbtn67" for="{{item in keys['full'][2]}}" @click="onSelect(item)">{{item}}</text>
<img static src="./assets/horizontal/space.png" style="width: 60px;height: 60px;" @click="onBtnClick('space')" />
</div>
</div>
<div else style="left: 6px;width:{{Math.max(keys['sign'][0].length*64, keys['sign'][1].length*64+32, keys['sign'][2].length*64+64)}}px;height:170px;">
<div static style="position: absolute;left: 0px;top: 0px;width: {{keys['sign'][0].length*64}}px;height: 60px;">
<div else style="left: 6px; flex-direction: column;">
<div static style="margin-left: 0px;margin-top: 0px;height: 60px;">
<text class="calbtn67" for="{{item in keys['sign'][0]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 32px;top: 55px;width: {{keys['sign'][1].length*64}}px;height: 60px;">
<div static style="margin-left: 32px;margin-top: -5px;height: 60px;">
<text class="calbtn67" for="{{item in keys['sign'][1]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 64px;top: 110px;width: {{keys['sign'][2].length*64}}px;height: 60px;">
<div static style="margin-left: 64px;margin-top: -5px;height: 60px;">
<text class="calbtn67" for="{{item in keys['sign'][2]}}" @click="onSelect(item)">{{item}}</text>
</div>
</div>
@@ -192,26 +192,26 @@
<div static style="position:absolute;left:0px;top:34px;width:192px;height:276px;">
<progress percent="{{30+percent66}}" type="arc" style="start-angle:204deg;total-angle:-48deg;width:188px;height:188px;top:86px;left:2px;position:absolute;color:#ffffff;stroke-width:6px;layer-color:#262626"></progress>
<scroll id="keyboard66" scroll-x="{{true}}" onscroll="handelScroll">
<div if="{{!numFlag}}" style="left: 3px;width:630px;height:170px;">
<div static style="position: absolute;left: 0px;top: 0px;width: 630px;height: 60px;">
<div if="{{!numFlag}}" style="left: 3px; flex-direction: column;">
<div static style="margin-left: 0px;margin-top: 0px;height: 60px;">
<text class="calbtn66" for="{{item in keys['full'][0]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 32px;top: 55px;width: 567px;height: 60px;">
<div static style="margin-left: 32px;margin-top: -5px;height: 60px;">
<text class="calbtn66" for="{{item in keys['full'][1]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 64px;top: 110px;width: 504px;height: 60px;">
<div static style="margin-left: 64px;margin-top: -5px;height: 60px;">
<text class="calbtn66" for="{{item in keys['full'][2]}}" @click="onSelect(item)">{{item}}</text>
<img static src="./assets/arc/space.png" style="width: 60px;height: 60px;" @click="onBtnClick('space')" />
</div>
</div>
<div else style="left: 3px;width:660px;height:170px;">
<div static style="position: absolute;left: 0px;top: 0px;width: 630px;height: 60px;">
<div else style="left: 3px; flex-direction: column;">
<div static style="margin-left: 0px;margin-top: 0px;height: 60px;">
<text class="calbtn66" for="{{item in keys['sign'][0]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 32px;top: 55px;width: 627px;height: 60px;">
<div static style="margin-left: 32px;margin-top: -5px;height: 60px;">
<text class="calbtn66" for="{{item in keys['sign'][1]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 64px;top: 110px;width: 564px;height: 60px;">
<div static style="margin-left: 64px;margin-top: -5px;height: 60px;">
<text class="calbtn66" for="{{item in keys['sign'][2]}}" @click="onSelect(item)">{{item}}</text>
</div>
</div>
@@ -562,7 +562,7 @@ export default {
};
</script>
<style lang="less">
<style>
.page {
width:100%;
position:absolute;
src/components/SwitchBar/SwitchBar.ux
+55 -8
View File
@@ -1,29 +1,76 @@
<import name="time-view" src="../TimeView/TimeView.ux"></import>
<template>
<div class="bar" @click="SwitchPage()">
<div>
<div if="{{!useRowLayout}}" class="comp-root">
<time-view style="position: absolute"></time-view>
<div class="bar" @click="SwitchPage()">
<image src="/common/switch.png"></image>
<text style="font-weight: 600; font-size: 30px; margin-left: 15px">{{ _parentVM.$t(title) }}</text>
<text style="font-weight: 600; font-size: 30px; margin-left: 15px">
{{ _parentVM.$t(title) }}
</text>
</div>
</div>
<div if="{{useRowLayout}}" class="comp-root row">
<div class="bar bar-row" style="{{barRowStyle}}" @click="SwitchPage()">
<image src="/common/switch.png" style="object-fit: scale-down; width: 32px; height: 32px"></image>
<text style="font-weight: 600; font-size: 30px; margin-left: 15px">
{{ _parentVM.$t(title) }}
</text>
</div>
<time-view style="position: absolute;"></time-view>
</div>
</div>
</template>
<script>
import router from "@system.router"
export default {
props: ["title"],
data: {
barRowStyle: {},
useRowLayout: false
},
SwitchPage() {
router.replace({
uri: "pages/arealist"
router.push({
uri: "pages/arealist",
params: {
lastpage: router.getState().name.split("/")[1]
}
})
},
onInit(){
onInit() {
const deviceInfo = this.$app.$def.DEVICE_INFO;
if (deviceInfo.screenWidth <= 450){
this.barRowStyle["width"] = `${deviceInfo.screenWidth}px`
this.useRowLayout = true
}
}
}
</script>
<style lang="less">
@import '../../less/global.less';
@import "../../less/global.less";
.comp-root {
flex-direction: column;
justify-content: center;
align-items: center;
}
.row {
flex-direction: row;
}
.bar {
flex-direction: row;
margin-top: 30px;
align-items: center;
flex-direction: row;
margin-top: 45px;
padding-bottom: 15px;
}
.bar-row {
margin-top: 10px;
margin-left: 15px;
}
</style>
src/components/TimeView/TimeView.ux
+88
View File
@@ -0,0 +1,88 @@
<template>
<div class="time-comp" style="{{compStyle}}">
<div if="{{!useRectTime}}">
<div class="circle-time">
<text class="timetxt" style="transform: rotate(-12.8deg)">{{ hourHigh }}</text>
<text class="timetxt" style="transform: rotate(-6.4deg); margin-bottom: 6px">
{{ hourLow }}
</text>
<text class="timetxt" style="padding: 4px; min-width: 10px; margin-bottom: 10px; justify-content: center">
:
</text>
<text class="timetxt" style="transform: rotate(6.4deg); margin-bottom: 10px">
{{ minuteHigh }}
</text>
<text class="timetxt" style="transform: rotate(12.8deg); margin-bottom: 7.5px">
{{ minuteLow }}
</text>
</div>
</div>
<div if="{{useRectTime}}" class="rect">
<text class="timetxt rect-txt">{{ hourHigh }}{{ hourLow }}:{{ minuteHigh }}{{ minuteLow }}</text>
</div>
</div>
</template>
<script>
export default {
data: {
hourHigh: "",
hourLow: "",
minuteHigh: "",
minuteLow: "",
compStyle: {},
useRectTime: false
},
UpdateTime() {
const hour = this.$app.$def.dayjs().hour()
const minute = this.$app.$def.dayjs().minute()
this.hourHigh = Math.floor(hour / 10).toString()
this.hourLow = (hour % 10).toString()
this.minuteHigh = Math.floor(minute / 10).toString()
this.minuteLow = (minute % 10).toString()
},
onInit() {
this.UpdateTime()
setInterval(() => {
this.UpdateTime()
}, 2000)
const deviceInfo = this.$app.$def.DEVICE_INFO
if (deviceInfo.screenWidth <= 450) {
this.compStyle["right"] = "15px"
this.useRectTime = true
}
}
}
</script>
<style lang="less">
@import "../../less/global.less";
.time-comp {
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
top: 3.5px;
}
.circle-time {
justify-content: flex-start;
}
.timetxt {
font-size: 25px;
font-weight: 900;
top: 2px;
padding: 2px;
}
.rect-txt {
font-size: 30px;
padding-bottom: 8.5px;
}
</style>
src/components/TitleBar/TitleBar.ux
+45 -3
View File
@@ -1,7 +1,21 @@
<import name="time-view" src="../TimeView/TimeView.ux"></import>
<template>
<div class="titlebar" @click="RouterBack()">
<image src="/common/icons8-back-100.png" style="width: 30px; height: 30px; margin-right: 5px"></image>
<text style="font-size: 40px; font-weight: bold">{{ _parentVM.$t(title) }}</text>
<div>
<div if="{{!useRowLayout}}" class="comp-root">
<time-view style="position: absolute;"></time-view>
<div class="titlebar" @click="RouterBack()">
<image src="/common/icons8-back-100.png" style="width: 30px; height: 30px; margin-right: 5px"></image>
<text style="font-size: 32px; font-weight: normal; margin-top: 3px">{{ _parentVM.$t(title) }}</text>
</div>
</div>
<div if="{{useRowLayout}}" class="comp-root row">
<div class="titlebar bar-row" style="{{barRowStyle}}" @click="RouterBack()">
<image src="/common/icons8-back-100.png" style="width: 30px; height: 30px; margin-right: 5px"></image>
<text style="font-size: 32px; font-weight: normal; margin-top: 3px">{{ _parentVM.$t(title) }}</text>
</div>
<time-view style="position: absolute;"></time-view>
</div>
</div>
</template>
@@ -9,8 +23,19 @@
import router from "@system.router"
export default {
props: ["title"],
data: {
barRowStyle: {},
useRowLayout: false
},
RouterBack() {
router.back()
},
onInit() {
const deviceInfo = this.$app.$def.DEVICE_INFO;
if (deviceInfo.screenWidth <= 450){
this.barRowStyle["width"] = `${deviceInfo.screenWidth}px`
this.useRowLayout = true
}
}
}
</script>
@@ -18,9 +43,26 @@ export default {
<style lang="less">
@import '../../less/global.less';
.comp-root {
flex-direction: column;
justify-content: center;
align-items: center;
}
.row {
flex-direction: row;
}
.titlebar {
margin-top: 45px;
align-items: center;
justify-content: center;
padding-bottom: 10px;
}
.bar-row {
justify-content: flex-start;
margin-top: 10px;
margin-left: 15px;
}
</style>
src/components/Video/Video.ux
+16 -6
View File
@@ -4,7 +4,7 @@
<div class="vid" @click="OpenVideo(video.bvid)">
<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" loading-anim="true" src="{{video.pic}}@{{onlineimg_width}}w_{{onlineimg_height}}h"></online-image>
<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>
</div>
<text class="vidtitle" if="{{!useColumnTitle}}">{{ video.title }}</text>
</div>
@@ -43,11 +43,17 @@ export default {
params: {bvid}
})
},
// 在线图片展示大小（UI层）
SetOnlineImageSize(width, height){
this.vidpicture_style["min-width"] = width + "px";
this.vidpicture_style["max-width"] = width + "px";
this.vidpicture_style["min-height"] = height + "px";
this.vidpicture_style["max-height"] = height + "px";
},
// 在线图片加载大小（组件层）
// 使用比展示大小更小的加载大小可以节省设备RAM、降低渲染压力、节省流量等
// 推荐是展示大小的等比例缩放
SetOnlineImageLoadSize(width, height){
this.onlineimg_width = width;
this.onlineimg_height = height;
},
@@ -57,12 +63,16 @@ export default {
}
const deviceInfo = this.$app.$def.DEVICE_INFO;
if (deviceInfo.screenWidth <= 336 || this.video.title.length > 25){
if (deviceInfo.screenWidth <= 450 || this.video.title.length > 25){
this.useColumnTitle = true;
if (deviceInfo.screenWidth <= 336)
this.SetOnlineImageSize(200, 120);
else
if (deviceInfo.screenWidth <= 450){
this.SetOnlineImageSize(220, 120);
this.SetOnlineImageLoadSize(146, 80);
}
else{
this.SetOnlineImageSize(300, 150);
this.SetOnlineImageLoadSize(200, 100);
}
}
}
}
@@ -74,7 +84,7 @@ export default {
.vid {
margin-top: 10px;
padding: 15px 15px;
border-radius: 50px;
border-radius: 30px;
background-color: #262626af;
justify-content: center;
align-items: center;
src/i18n/en.json
+1
View File
@@ -6,6 +6,7 @@
"disclaimer": "Disclaimer"
},
"arealist": {
"title": "Features",
"home": "Home",
"dynamic": "Dynamic",
"my": "My Profile",
src/i18n/zh.json
+1
View File
@@ -6,6 +6,7 @@
"disclaimer": "免责声明"
},
"arealist": {
"title": "功能区",
"home": "首页",
"dynamic": "动态",
"my": "我的",
src/manifest.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"package": "com.searchstars.hyperbilibili",
"name": "澎湃哔哩",
"versionName": "2.4.0",
"versionName": "2.5.0",
"versionCode": 2,
"minPlatformVersion": 1000,
"icon": "/common/logoDEV.png",
src/pages/arealist/arealist.less
+20 -18
View File
@@ -1,53 +1,55 @@
@import '../../less/defs.less';
@import '../../less/color.less';
.time {
font-size: 50px;
font-weight: 600;
.font-size(50px);
.font-semibold();
margin-top: 20px;
}
.btnbase {
width: 130px;
height: 130px;
border-radius: 50%;
.w(130px);
.h(130px);
.radius(50%);
background-color: #222222;
align-items: center;
justify-content: center;
}
.btntext {
font-size: 30px;
font-weight: 600;
.font-size(30px);
.font-semibold();
margin-top: 5px;
}
.smallbtntext {
font-size: 25px;
font-weight: 600;
.font-size(25px);
.font-semibold();
margin-left: 11px;
}
.btnimg {
width: 70px;
height: 76px;
.w(70px);
.h(76px);
object-fit: scale-down;
}
.btn {
flex-direction: column;
.flex-column(0px, #00000000);
justify-content: center;
align-items: center;
}
.smallbtn {
width: 140px;
height: 55px;
border-radius: 32px;
background-color: #222222;
flex-direction: row;
.w(140px);
.h(55px);
.radius(32px);
.flex-row(0px, #222222);
justify-content: center;
align-items: center;
}
.btnline {
flex-direction: row;
.flex-row(0px, #00000000);
width: 300px;
}
src/pages/arealist/arealist.ux
+25 -22
View File
@@ -1,37 +1,39 @@
<import name="title-bar" src="../../components/TitleBar/TitleBar.ux"></import>
<template>
<div class="page">
<scroll class="scroll" scroll-y="true" @scrollbottom="DoScrollTip" bounces="true">
<text class="time">{{time}}</text>
<title-bar title="arealist.title"></title-bar>
<div class="btnline" style="margin-top: 15px;">
<div class="btn" onclick="GoPage({{pages[0]}})">
<div class="btnbase">
<div class="btn" onclick="GoPage('main')">
<div class="btnbase" style="background-color: {{colors.main}}">
<image src="/common/arealist_home.png" class="btnimg"></image>
</div>
<text class="btntext">{{ $t("arealist.home") }}</text>
</div>
<div class="btn" style="margin-left: 35px;" onclick="GoPage({{pages[1]}})">
<div class="btnbase">
<div class="btn" style="margin-left: 35px;" onclick="GoPage('dynamic')">
<div class="btnbase" style="background-color: {{colors.dynamic}}">
<image src="/common/arealist_updates.png" class="btnimg"></image>
</div>
<text class="btntext">{{ $t("arealist.dynamic") }}</text>
</div>
</div>
<div class="btnline" style="margin-top: 15px;">
<div class="btn" onclick="GoPage({{pages[2]}})">
<div class="btnbase">
<div class="btn" onclick="GoPage('mypage')">
<div class="btnbase" style="background-color: {{colors.mypage}}">
<image src="/common/arealist_my.png" class="btnimg"></image>
</div>
<text class="btntext">{{ $t("arealist.my") }}</text>
</div>
<div class="btn" style="margin-left: 35px;" onclick="GoPage({{pages[3]}})">
<div class="btnbase">
<div class="btn" style="margin-left: 35px;" onclick="GoPage('settings')">
<div class="btnbase" style="background-color: {{colors.settings}}">
<image src="/common/arealist_settings.png" class="btnimg"></image>
</div>
<text class="btntext">{{ $t("arealist.settings") }}</text>
</div>
</div>
<div class="btnline" style="margin-top: 30px; justify-content: center">
<div class="smallbtn" onclick="GoPage({{pages[4]}})">
<div class="smallbtn" style="background-color: {{colors.savedcontent}}" onclick="GoPage('savedcontent')">
<image src="/common/arealist_savedcontent.png"></image>
<text class="smallbtntext">{{ $t("arealist.downloads") }}</text>
</div>
@@ -48,16 +50,18 @@
import router from "@system.router"
import prompt from "@system.prompt"
export default {
public: {
lastpage: ""
},
private: {
time: "",
showChangePageFX: false,
pages: [
"main",
"dynamic",
"mypage",
"settings",
"savedcontent"
],
colors: {
main: "#222222",
dynamic: "#222222",
mypage: "#222222",
settings: "#222222",
savedcontent: "#222222"
},
anims: {
ChangePageFX: null,
ChangePageFXBTM: {
@@ -84,10 +88,8 @@ export default {
},700)
},
onInit(){
this.time = this.$app.$def.tools.getCurrentTime()
setInterval(() => {
this.time = this.$app.$def.tools.getCurrentTime()
}, 1000)
console.log("lastpage=", this.lastpage)
this.colors[this.lastpage] = "#FF7DA8"
},
GoPage(pagename){
if(pagename == "dynamic"){
@@ -96,6 +98,7 @@ export default {
})
return
}
router.clear()
router.replace({
uri: "pages/" + pagename
})
src/pages/articlesave/articlesave.ux
+1 -1
View File
@@ -4,7 +4,7 @@
<template>
<div class="page">
<title-bar title="专栏缓存"></title-bar>
<image src="/common/articlesave_tips.png" style="margin-top: 35px"></image>
<image src="/common/articlesave_tips.png"></image>
<default-button margin-top="20px" text="阅读更多信息" @click="ReadMore"></default-button>
<default-button margin-top="20px" primary="true" text="缓存" @click="Download"></default-button>
<text style="margin-top: 50px"></text>
src/pages/articleshow/articleshow.less
-1
View File
@@ -2,7 +2,6 @@
flex-direction: column;
align-items: center;
width: @screenWidth;
margin-top: 25px;
}
.infobox {
src/pages/componentstest/componentstest.ux
+4 -4
View File
@@ -7,7 +7,7 @@
<template>
<div class="page">
<title-bar title="组件测试"></title-bar>
<text style="margin-top: 35px">BetterOnlineImage</text>
<text>BetterOnlineImage</text>
<online-image margin-top="20px" src="https://i.pinimg.com/236x/fd/20/13/fd20135e219e1336b7fdc478dca13d90.jpg"></online-image>
<text style="margin-top: 35px">DefaultButton</text>
<default-button primary="true" margin-top="20px" text="Primary"></default-button>
@@ -21,9 +21,9 @@
<reply reply="{{reply_tmp}}"></reply>
<text style="margin-top: 35px">页面功能测试</text>
<default-button margin-top="20px" text="splash（重开）" @click="GoSplash"></default-button>
<default-button margin-top="20px" text="prepage" @click="GoPrepage"></default-button>
<default-button margin-top="20px" text="arealist" @click="GoArealist"></default-button>
<default-button margin-top="15px" text="eularead" @click="GoEulaRead"></default-button>
<default-button margin-top="20px" text="prepage>" @click="GoPrepage"></default-button>
<default-button margin-top="20px" text="arealist>" @click="GoArealist"></default-button>
<default-button margin-top="15px" text="eularead>" @click="GoEulaRead"></default-button>
<text style="margin-top: 25px"></text>
</div>
</template>
src/pages/dmlist/dmlist.less
+1
View File
@@ -9,6 +9,7 @@
flex-direction: row;
width: 313px;
align-items: center;
padding: 10px;
}
.userface {
src/pages/dmlist/dmlist.ux
+40 -26
View File
@@ -4,16 +4,25 @@
<div class="page">
<title-bar title="dmlist.title"></title-bar>
<image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
<div class="dmlist" for="{{sessions}}" style="margin-top: 18px" if="{{show_dmlist}}">
<div class="dmlist" for="{{sessions}}" if="{{show_dmlist}}">
<div class="user" onclick="GoDMPage({{$item.talker_id}})">
<image class="userface" src="{{session_cards[$item.talker_id].face}}@75w_75h" alt="/common/fullgray.png"></image>
<div class="infoarea">
<text class="username">{{session_cards[$item.talker_id].name}}</text>
<text class="lastmsg">{{JSON.parse($item.last_msg.content).content || JSON.parse($item.last_msg.content).reply_content || JSON.parse($item.last_msg.content).text || $t("dmlist.currentNoMessage")}}</text>
<text class="username">{{ session_cards[$item.talker_id].name }}</text>
<text class="lastmsg">
{{
JSON.parse($item.last_msg.content).content ||
JSON.parse($item.last_msg.content).reply_content ||
JSON.parse($item.last_msg.content).text ||
$t("dmlist.currentNoMessage")
}}
</text>
</div>
</div>
</div>
<text style="font-size: 18px; margin-top: 15px; font-weight: 600" show="{{Show20UserLimit}}">{{ $t("dmlist.userCountLimit") }}</text>
<text style="font-size: 18px; margin-top: 15px; font-weight: 600" show="{{Show20UserLimit}}">
{{ $t("dmlist.userCountLimit") }}
</text>
<text style="margin-top: 25px"></text>
</div>
</template>
@@ -33,30 +42,35 @@ export default {
}
},
async InitSessions(){
this.anims.loading.start()
this.show_loading = true
try{
this.anims.loading.start()
this.show_loading = true
this.sessions = (await this.$app.$def.biliclient.getDMSessions(1, 2)).session_list
// 裁切至10个
this.sessions.length = Math.min(this.sessions, 10);
this.sessions = (await this.$app.$def.biliclient.getDMSessions(1, 2)).session_list
// 裁切至10个
this.sessions.length = Math.min(this.sessions.length, 10);
var session_uids = []
this.sessions.forEach((session) => {
if(session.talker_id){
session_uids.push(session.talker_id)
}
else{
// Pass掉非法UID
this.sessions = this.sessions.filter(item => item !== session)
}
})
var session_uids = []
this.sessions.forEach((session) => {
if(session.talker_id){
session_uids.push(session.talker_id)
}
else{
// Pass掉非法UID
this.sessions = this.sessions.filter(item => item !== session)
}
})
this.session_cards = await this.$app.$def.biliclient.getMultiUserInfoByUID(session_uids)
this.session_cards = await this.$app.$def.biliclient.getMultiUserInfoByUID(session_uids)
this.anims.loading.stop()
this.show_loading = false
this.Show20UserLimit = true
this.show_dmlist = true
this.anims.loading.stop()
this.show_loading = false
this.Show20UserLimit = true
this.show_dmlist = true
}
catch(e){
console.error(e.toString())
}
},
GoDMPage(targetId){
router.push({
@@ -85,6 +99,6 @@ export default {
</script>
<style lang="less">
@import '../../less/global.less';
@import './dmlist.less';
@import "../../less/global.less";
@import "./dmlist.less";
</style>
src/pages/favfolders/favfolders.ux
+1 -1
View File
@@ -5,7 +5,7 @@
<title-bar title="favfolders.title"></title-bar>
<image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}">
</image>
<list style="margin-top: 20px; width: 77%; height: 100%" class="folderlist">
<list style="width: 77%; height: 100%" class="folderlist">
<list-item type="folders" class="folder" for="{{folders}}"
onclick="GoFolderVideosPage({{$item.id}}, {{$item.media_count}})">
<image src="{{$item.cover}}@121w_68h" alt="/common/fullblack.png" class="folderimg"></image>
src/pages/foldervideos/foldervideos.ux
+1 -1
View File
@@ -4,7 +4,7 @@
<template>
<div class="page">
<title-bar title="foldervideos.title"></title-bar>
<div style="margin-top: 20px; flex-direction: row; align-items: center">
<div style="flex-direction: row; align-items: center">
<div @click="BackPN()" style="width: 40px; height: 40px; align-items: center; justify-content: center">
<image src="/common/changepage_left.png"></image>
</div>
src/pages/history/history.ux
-1
View File
@@ -70,7 +70,6 @@ export default {
@import '../../less/global.less';
.historylist {
margin-top: 10px;
width: 77%;
align-items: center;
justify-content: center;
src/pages/introduction/introduction.ux
+52 -45
View File
@@ -1,57 +1,64 @@
<template>
<div class="page">
<image style="position: absolute; width: 100%; height: 100%" src={{current_src}} @click="StepClick"></image>
</div>
<div class="page">
<image style="position: absolute; width: 100%; height: 100%" src="{{current_src}}" @click="StepClick"></image>
</div>
</template>
<script>
import router from "@system.router"
export default {
private: {
current_step: 0,
current_src: "/common/guides/circle/1_welcome.png",
current_device_step_count: 0,
steps_map: {
circle: [
"/common/guides/circle/1_welcome.png",
"/common/guides/circle/2_switchPage.png",
"/common/guides/circle/3_enterSearch.png",
"/common/guides/circle/4_videoDetailMoreFeatures.png",
"/common/guides/circle/5_replyMoreFeatures.png",
"/common/guides/circle/6_dontsupportvideoplay.png"
],
"pill-shaped": [
"/common/guides/pill-shaped/1_welcome.png",
"/common/guides/pill-shaped/2_switchPage.png",
"/common/guides/pill-shaped/3_videoDetailMoreFeatures.png",
],
rect: []
}
},
StepClick(){
this.current_step++;
if (this.current_step >= this.current_device_step_count) {
router.replace({
uri: "pages/main"
});
} else {
this.UpdateImage();
}
},
async UpdateImage(){
const deviceinfo = this.$app.$def.DEVICE_INFO;
const shape = deviceinfo.screenShape;
this.steps = this.steps_map[shape] || [];
this.current_device_step_count = this.steps.length;
this.current_src = this.steps[this.current_step] || "";
},
onInit(){
this.UpdateImage();
private: {
current_step: 0,
current_src: "/common/guides/circle/1_welcome.png",
current_device_step_count: 0,
steps_map: {
"circle": [
"/common/guides/circle/1_welcome.png",
"/common/guides/circle/2_switchPage.png",
"/common/guides/circle/3_enterSearch.png",
"/common/guides/circle/4_videoDetailMoreFeatures.png",
"/common/guides/circle/5_replyMoreFeatures.png",
"/common/guides/circle/6_dontsupportvideoplay.png"
],
"pill-shaped": [
"/common/guides/pill-shaped/1_welcome.png",
"/common/guides/pill-shaped/2_switchPage.png",
"/common/guides/pill-shaped/3_videoDetailMoreFeatures.png"
],
"rect": [
"/common/guides/circle/1_welcome.png",
"/common/guides/circle/2_switchPage.png",
"/common/guides/circle/3_enterSearch.png",
"/common/guides/circle/4_videoDetailMoreFeatures.png",
"/common/guides/circle/5_replyMoreFeatures.png",
"/common/guides/circle/6_dontsupportvideoplay.png"
]
}
},
StepClick() {
this.current_step++
if (this.current_step >= this.current_device_step_count) {
router.replace({
uri: "pages/main"
})
} else {
this.UpdateImage()
}
},
async UpdateImage() {
const deviceinfo = this.$app.$def.DEVICE_INFO
const shape = deviceinfo.screenShape
this.steps = this.steps_map[shape] || []
this.current_device_step_count = this.steps.length
this.current_src = this.steps[this.current_step] || ""
},
onInit() {
this.UpdateImage()
}
}
</script>
<style lang="less">
@import '../../less/global.less';
@import "../../less/global.less";
</style>
src/pages/main/main.less
-1
View File
@@ -1,5 +1,4 @@
.tip {
margin-top: 10px;
font-size: 20px;
font-weight: 600;
}
src/pages/main/main.ux
+1 -1
View File
@@ -3,7 +3,7 @@
<template>
<div class="page">
<image if="{{this.$app.$def.DEVICE_INFO.screenShape == 'circle'}}" src="/common/rounddevices_bg.png"
<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>
<scroll scroll-y="true" class="scroll" bounces="true">
src/pages/messages/messages.ux
+1 -1
View File
@@ -3,7 +3,7 @@
<template>
<div class="page">
<title-bar title="messages.title"></title-bar>
<div class="featurebox" style="margin-top: 25px" @click="ShowOnPhoneTips()">
<div class="featurebox" @click="ShowOnPhoneTips()">
<div class="boxline" style="margin-top: 20px">
<div class="feature" style="margin-left: 17px">
<image class="featureimg" src="/common/messages_replyme.png"></image>
src/pages/mypage/mypage.ux
+1 -1
View File
@@ -3,7 +3,7 @@
<template>
<div class="page">
<switch-bar title="mypage.title"></switch-bar>
<div class="profdiv" style="margin-top: 20px">
<div class="profdiv">
<image src="{{accountInfo.face}}@106w_106h" alt="/common/fullgray.png" class="profimg"></image>
<image src="{{accountInfo.pendant.image}}@176w_176h" alt="/common/alphaimg.png" class="profpendantimg"></image>
</div>
src/pages/replys/replys.ux
+1 -1
View File
@@ -10,7 +10,7 @@
<div class="page">
<title-bar title="{{titletext}}"></title-bar>
<image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
<list style="margin-top: 15px" class="replylist">
<list class="replylist">
<list-item type="replies"
style="width: 100%; justify-content: center; margin-top: 10px; height: {{PlaceHolderShowCheck($item.rpid)}}"
for="{{replies}}">
src/pages/savedcontent/savedcontent.ux
+1 -1
View File
@@ -6,7 +6,7 @@
<image style="position: absolute" src="/common/rounddevices_savedcontentbg.png" static></image>
<scroll class="scroll" scroll-y="true" bounces="true">
<switch-bar title="savedcontent.title" static></switch-bar>
<div style="margin-top: 10px; flex-direction: column; align-items: center; width: 100%" for="{{content}}">
<div style="flex-direction: column; align-items: center; width: 100%" for="{{content}}">
<div if="{{$item.type == 'article' ? true : false}}" style="flex-direction: column; align-items: center; width: 100%" onclick="OpenArticle({{$item.id}})">
<articleshow article="{{$item}}"></articleshow>
</div>
src/pages/search/search.ux
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="page">
<image style="position: absolute" src="/common/rounddevices_searchbg.png" static></image>
<switch-bar title="search.title" static></switch-bar>
<div class="searchbtn" style="margin-top: 20px" @click="OpenInput">
<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>
src/pages/searchresult/searchresult.less
-1
View File
@@ -3,7 +3,6 @@
width: 255px;
height: 50px;
border-radius: 130px;
margin-top: 20px;
flex-direction: row;
align-items: center;
}
src/pages/settings/settings.ux
+1 -1
View File
@@ -3,7 +3,7 @@
<template>
<div class="page">
<switch-bar title="settings.title"></switch-bar>
<div class="setbase" style="margin-top: 45px" onclick="ClickCountSet({{countset_name[0]}})">
<div class="setbase" style="margin-top: 30px" onclick="ClickCountSet({{countset_name[0]}})">
<image class="seticon" src="/common/settings_freshtype.png"></image>
<text class="setext_small">{{ $t("settings.videoPushRelevance") }}</text>
<text class="countset_num">{{ fresh_type }}</text>
src/pages/textdetail/textdetail.ux
-1
View File
@@ -24,7 +24,6 @@ export default {
.textbg {
background-color: #262626;
margin-top: 25px;
display: flex;
flex-direction: column;
align-items: center;
yarn.lock
+5
View File
@@ -2853,6 +2853,11 @@ date-fns@^1.27.2:
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
dayjs@^1.11.13:
version "1.11.13"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"