🚸 一些调整

This commit is contained in:
目棃
2024-12-16 17:24:26 +08:00
parent fe9737c229
commit 664e87b21c
5 changed files with 111 additions and 193 deletions

View File

@@ -5,8 +5,8 @@
<img :src="localCover" alt="cover" v-if="localCover" />
<v-progress-circular color="primary" :indeterminate="true" v-else-if="card.cover !== ''" />
<img src="/source/UI/defaultCover.webp" alt="cover" v-else />
<div v-if="isAct" class="tpc-act">
<div class="tpc-status">{{ card.status?.status }}</div>
<div v-if="card.status" class="tpc-act">
<div class="tpc-status">{{ card.status?.label }}</div>
<div class="tpc-time">
<v-icon>mdi-clock-time-four-outline</v-icon>
<span>{{ card.subtitle }}</span>
@@ -77,15 +77,28 @@ import { createPost } from "@/utils/TGWindow.js";
type TPostCardProps = { modelValue: TGApp.Plugins.Mys.Post.FullData; selectMode?: boolean };
type TPostCardEmits = (e: "onSelected", v: string) => void;
type TPostStatus = TGApp.Plugins.Mys.News.RenderStatus & { stat: ActStat };
enum ActStat {
UNKNOWN,
STARTED,
FINISHED,
SELECTION,
}
const stats: Readonly<Array<TPostStatus>> = [
{ stat: ActStat.UNKNOWN, label: "未知", color: "var(--tgc-od-red)" },
{ stat: ActStat.STARTED, label: "进行中", color: "var(--tgc-od-green)" },
{ stat: ActStat.FINISHED, label: "已结束", color: "var(--tgc-od-white)" },
{ stat: ActStat.SELECTION, label: "评选中", color: "var(--tgc-od-orange)" },
];
const props = withDefaults(defineProps<TPostCardProps>(), { selectMode: false });
const emits = defineEmits<TPostCardEmits>();
const isAct = ref<boolean>(false);
const card = shallowRef<TGApp.Plugins.Mys.News.RenderCard>();
const localCover = ref<string>();
const cardBg = computed<string>(() => {
if (card.value && card.value.status) return card.value.status.colorCss;
if (card.value && card.value.status) return card.value.status.color;
return "none";
});
@@ -114,52 +127,12 @@ onUnmounted(() => {
}
});
// todo 优化结构
/**
* @description 活动状态
* @since Alpha v0.2.1
* @enum {TGApp.Plugins.Mys.News.RenderStatus}
* @property {TGApp.Plugins.Mys.News.RenderStatus} STARTED 进行中
* @property {TGApp.Plugins.Mys.News.RenderStatus} FINISHED 已结束
* @property {TGApp.Plugins.Mys.News.RenderStatus} SELECTION 评选中
* @return EnumStatus
*/
const EnumStatus = {
STARTED: {
status: "进行中",
colorCss: "var(--tgc-od-green)",
},
FINISHED: {
status: "已结束",
colorCss: "var(--tgc-od-white)",
},
SELECTION: {
status: "评选中",
colorCss: "var(--tgc-od-orange)",
},
UNKNOWN: {
status: "未知",
colorCss: "var(--tgc-od-red)",
},
};
/**
* @description 获取活动状态
* @since Alpha
* @param {number} status 活动状态码
* @returns {string}
*/
function getActivityStatus(status: number): TGApp.Plugins.Mys.News.RenderStatus {
switch (status) {
case 1:
return EnumStatus.STARTED;
case 2:
return EnumStatus.SELECTION;
case 3:
return EnumStatus.FINISHED;
default:
return EnumStatus.UNKNOWN;
if (status satisfies ActStat) {
const stat: ActStat = status;
return stats[stat];
}
return stats[ActStat.UNKNOWN];
}
function getPostCover(item: TGApp.Plugins.Mys.Post.FullData): string {
@@ -179,26 +152,28 @@ function getPostCover(item: TGApp.Plugins.Mys.Post.FullData): string {
* @returns {TGApp.Plugins.Mys.News.RenderCard} 渲染用咨讯列表项
*/
function getCommonCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.News.RenderCard {
let forumData: TGApp.Plugins.Mys.News.RenderForum | null = null;
let statData: TGApp.Plugins.Mys.News.RenderData | null = null;
if (item.forum !== null) {
forumData = { name: item.forum.name, icon: item.forum.icon, id: item.forum.id };
}
if (item.stat !== null) {
statData = {
mark: item.stat.bookmark_num,
forward: item.stat.forward_num,
like: item.stat.like_num,
reply: item.stat.reply_num,
view: item.stat.view_num,
};
}
return {
title: item.post.subject,
cover: getPostCover(item),
postId: Number(item.post.post_id),
subtitle: item.post.post_id,
user: item.user,
forum:
item.forum === null
? null
: { name: item.forum.name, icon: item.forum.icon, id: item.forum.id },
data:
item.stat === null
? null
: {
mark: item.stat.bookmark_num,
forward: item.stat.forward_num,
like: item.stat.like_num,
reply: item.stat.reply_num,
view: item.stat.view_num,
},
forum: forumData,
data: statData,
topics: item.topics,
};
}
@@ -210,7 +185,6 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
item.news_meta !== null &&
item.news_meta.start_at_sec !== "0"
) {
isAct.value = true;
const startTime = new Date(Number(item.news_meta.start_at_sec) * 1000).toLocaleDateString();
const endTime = new Date(Number(item.news_meta.end_at_sec) * 1000).toLocaleDateString();
const statusInfo = getActivityStatus(item.news_meta.activity_status);

View File

@@ -1,76 +1,62 @@
<!-- todo UI调整 -->
<template>
<v-navigation-drawer :permanent="true" :rail="rail" class="tsb-box">
<v-list class="side-list" density="compact" :nav="true">
<!-- 负责收缩侧边栏 -->
<v-list-item @click="rail = !rail">
<template v-if="rail" #prepend>
<v-list-item-action>
<v-icon>mdi-chevron-right</v-icon>
</v-list-item-action>
</template>
<template v-else #append>
<v-list-item-action>
<v-icon>mdi-chevron-left</v-icon>
</v-list-item-action>
</template>
</v-list-item>
<v-list-item
@click="rail = !rail"
:prepend-icon="rail ? 'mdi-chevron-right' : undefined"
:append-icon="!rail ? 'mdi-chevron-left' : undefined"
/>
<!-- 菜单项 -->
<v-list-item :title.attr="'首页'" value="home" :link="true" href="/">
<v-list-item :title.attr="'首页'" :link="true" href="/">
<template #title>首页</template>
<template #prepend>
<img src="/source/UI/paimon.webp" alt="homeIcon" class="side-icon paimon" />
</template>
</v-list-item>
<v-list-item :title.attr="'公告'" value="announcements" :link="true" href="/announcements">
<v-list-item title.attr="'公告'" :link="true" href="/announcements">
<template #title>公告</template>
<template #prepend>
<img src="@/assets/icons/board.svg" alt="annoIcon" class="side-icon" />
</template>
</v-list-item>
<v-list-item
:title.attr="'咨讯'"
value="news"
:link="true"
:href="`/news/2/${recentNewsType}`"
>
<v-list-item :title.attr="'咨讯'" :link="true" :href="`/news/2/${recentNewsType}`">
<template #title>咨讯</template>
<template #prepend>
<img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon" />
</template>
</v-list-item>
<v-list-item :title.attr="'帖子'" value="posts" :link="true" href="/posts/forum">
<v-list-item :title.attr="'帖子'" :link="true" href="/posts/forum">
<template #title>帖子</template>
<template #prepend>
<img src="/source/UI/posts.png" alt="posts" class="side-icon" />
</template>
</v-list-item>
<v-list-item :title.attr="'成就'" value="achievements" :link="true" href="/achievements">
<v-list-item :title.attr="'成就'" :link="true" href="/achievements">
<template #title>成就</template>
<template #prepend>
<img src="@/assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon" />
</template>
</v-list-item>
<v-divider />
<v-list-item :title.attr="'原神战绩'" value="record" :link="true" href="/user/record">
<v-list-item :title.attr="'原神战绩'" :link="true" href="/user/record">
<template #title>原神战绩</template>
<template #prepend>
<img src="/source/UI/userRecord.webp" alt="record" class="side-icon" />
</template>
</v-list-item>
<v-list-item :title.attr="'我的角色'" value="character" :link="true" href="/user/characters">
<v-list-item :title.attr="'我的角色'" :link="true" href="/user/characters">
<template #title>我的角色</template>
<template #prepend>
<img src="/source/UI/userAvatar.webp" alt="characters" class="side-icon" />
</template>
</v-list-item>
<v-list-item :title.attr="'深渊记录'" value="abyss" :link="true" href="/user/abyss">
<v-list-item :title.attr="'深渊记录'" :link="true" href="/user/abyss">
<template #title>深渊记录</template>
<template #prepend>
<img src="/source/UI/userAbyss.webp" alt="abyss" class="side-icon" />
</template>
</v-list-item>
<v-list-item :title.attr="'祈愿记录'" value="gacha" :link="true" href="/user/gacha">
<v-list-item :title.attr="'祈愿记录'" :link="true" href="/user/gacha">
<template #title>祈愿记录</template>
<template #prepend>
<img src="/source/UI/userGacha.webp" alt="gacha" class="side-icon" />
@@ -80,14 +66,11 @@
<v-list-item
v-show="isDevEnv"
:title.attr="'测试页面'"
value="test"
:link="true"
href="/test"
prepend-icon="mdi-test-tube"
>
<template #title>测试页面</template>
<template #prepend>
<v-icon>mdi-test-tube</v-icon>
</template>
</v-list-item>
<v-divider v-show="isDevEnv" />
<v-menu :open-on-click="true" location="end">
@@ -100,69 +83,36 @@
</v-list-item>
</template>
<v-list class="side-list-menu wiki" density="compact" :nav="true">
<v-list-item
class="side-item-menu"
title="深渊数据库"
value="wiki-abyss"
:link="true"
href="/wiki/abyss"
>
<v-list-item class="side-item-menu" title="深渊数据库" :link="true" href="/wiki/abyss">
<template #prepend>
<img src="/source/UI/wikiAbyss.webp" alt="abyssIcon" class="side-icon-menu" />
</template>
</v-list-item>
<v-list-item
class="side-item-menu"
title="角色图鉴"
value="wiki-character"
:link="true"
href="/wiki/character/0"
>
<v-list-item class="side-item-menu" title="角色图鉴" :link="true" href="/wiki/character">
<template #prepend>
<img src="/source/UI/wikiAvatar.webp" alt="characterIcon" class="side-icon-menu" />
</template>
</v-list-item>
<v-list-item
class="side-item-menu"
title="武器图鉴"
value="wiki-weapon"
:link="true"
href="/wiki/weapon/0"
>
<v-list-item class="side-item-menu" title="武器图鉴" :link="true" href="/wiki/weapon">
<template #prepend>
<img src="/source/UI/wikiWeapon.webp" alt="weaponIcon" class="side-icon-menu" />
</template>
</v-list-item>
<v-list-item
class="side-item-menu"
value="wiki-nameCard"
:link="true"
href="/wiki/nameCard"
>
<template #default>
<v-icon size="20" color="var(--tgc-yellow-2)">mdi-credit-card-outline</v-icon>
<span style="margin-left: 10px; font-size: 0.8125rem">名片图鉴</span>
</template>
</v-list-item>
<v-list-item
class="side-item-menu"
title="材料图鉴"
value="wiki-material"
:link="true"
href="/wiki/material"
>
prepend-icon="mdi-credit-card-outline"
title="名片图鉴"
/>
<v-list-item class="side-item-menu" title="材料图鉴" :link="true" href="/wiki/material">
<template #prepend>
<img src="/source/UI/wikiGCG.webp" alt="gcgIcon" class="side-icon-menu" />
</template>
</v-list-item>
</v-list>
</v-menu>
<v-list-item
:title.attr="'留影叙佳期'"
value="archive-birthday"
:link="true"
href="/archive/birthday"
>
<v-list-item :title.attr="'留影叙佳期'" :link="true" href="/archive/birthday">
<template #title>留影叙佳期</template>
<template #prepend>
<img src="/source/UI/act_birthday.png" alt="archive_birthday_icon" class="side-icon" />
@@ -201,13 +151,12 @@
</v-list-item>
</v-list>
</v-menu>
<v-list-item :title.attr="themeTitle" @click="switchTheme()">
<v-list-item
:title.attr="themeTitle"
@click="switchTheme()"
:prepend-icon="theme === 'default' ? 'mdi-weather-night' : 'mdi-weather-sunny'"
>
<template #title>{{ themeTitle }}</template>
<template #prepend>
<v-icon>
{{ theme === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
</v-icon>
</template>
</v-list-item>
<v-list-item :title.attr="'设置'" value="config" :link="true" href="/config">
<template #title>设置</template>

View File

@@ -1,4 +1,3 @@
<!-- todo 调整逻辑 -->
<template>
<div class="tuc-do-box">
<img :src="bg" alt="role" class="tuc-do-bg" />
@@ -7,7 +6,7 @@
<div class="tuc-do-left">
<div
class="tuc-dol-item"
:style="`opacity: ${selected.pos === 0 ? '1' : '0.5'}`"
:class="{ selected: selected.pos === 0 }"
@click="showDetail(props.modelValue.weapon, '武器', 0)"
>
<TucDetailItemBox
@@ -19,10 +18,7 @@
v-for="(item, index) in relicList"
:key="index"
class="tuc-dol-item"
:style="{
cursor: item ? 'pointer' : 'default',
opacity: selected.pos === index + 1 ? '1' : item ? '0.5' : '1',
}"
:class="{ selected: selected.pos === index + 1 }"
@click="showDetail(item, '圣遗物', index + 1)"
>
<TucDetailRelic :model-value="item" :pos="index + 1" />
@@ -35,9 +31,7 @@
:key="item.pos"
class="tuc-dor-item"
:model-value="item"
:style="{
border: selected.pos === item.pos + 5 ? '2px solid var(--tgc-yellow-1)' : '',
}"
:class="{ selected: selected.pos === item.pos + 5 }"
@click="showDetail(item, '命座', item.pos + 5)"
/>
</div>
@@ -269,6 +263,28 @@ function switchBg(): void {
border-radius: 5px;
margin-top: 50px;
cursor: pointer;
&:nth-child(1) {
opacity: 0.5;
&.selected {
opacity: 1;
}
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5),
&:nth-child(6) {
cursor: pointer;
opacity: 0.5;
&.selected {
cursor: default;
opacity: 1;
}
}
}
/* 右侧显示区域 */
@@ -280,7 +296,12 @@ function switchBg(): void {
.tuc-dor-item {
position: absolute;
border: unset;
cursor: pointer;
&.selected {
border: 2px solid var(--tgc-yellow-1);
}
}
/* 环状排列6个命座 */

View File

@@ -1,15 +1,9 @@
/**
* @file plugins/Mys/types/news.d.ts
* @description Mys 插件咨讯类型定义文件
* @since Beta v0.6.3
* @since Beta v0.6.7
*/
/**
* @description Mys 插件咨讯类型
* @since Beta v0.4.5
* @namespace TGApp.Plugins.Mys.News
* @memberof TGApp.Plugins.Mys
*/
declare namespace TGApp.Plugins.Mys.News {
/**
* @description 咨讯返回数据
@@ -19,9 +13,7 @@ declare namespace TGApp.Plugins.Mys.News {
* @property {FullData} data 咨讯数据
* @return Response
*/
interface Response extends TGApp.BBS.Response.BaseWithData {
data: FullData;
}
type Response = TGApp.BBS.Response.BaseWithData & { data: FullData };
/**
* @description 咨讯数据
@@ -32,11 +24,11 @@ declare namespace TGApp.Plugins.Mys.News {
* @property {Item[]} list 咨讯列表
* @return FullData
*/
interface FullData {
type FullData = {
last_id: number;
is_last: boolean;
list: TGApp.Plugins.Mys.Post.FullData[];
}
list: Array<TGApp.Plugins.Mys.Post.FullData>;
};
/**
* @description 咨讯元数据,只有活动咨讯才有
@@ -47,11 +39,7 @@ declare namespace TGApp.Plugins.Mys.News {
* @property {string} end_at_sec 活动结束时间戳,单位秒
* @return Meta
*/
interface Meta {
activity_status: number;
start_at_sec: string;
end_at_sec: string;
}
type Meta = { activity_status: number; start_at_sec: string; end_at_sec: string };
/**
* @description 用于渲染的咨讯卡片
@@ -88,16 +76,15 @@ declare namespace TGApp.Plugins.Mys.News {
}
/**
* @description 活动状态
* @since Alpha v0.2.1
* @property {string} status 活动状态
* @property {string} colorCss 活动状态按钮背景色
* @returns RenderStatus
* @description 用于渲染的咨讯状态
* @since Beta v0.6.7
* @interface RenderStatus
* @property {number} stat 活动状态
* @property {string} label 活动状态标签
* @property {string} color 活动状态颜色
* @return RenderStatus
*/
interface RenderStatus {
status: string;
colorCss: string;
}
type RenderStatus = { stat: number; label: string; color: string };
/**
* @description 用于渲染的咨讯信息
@@ -110,13 +97,7 @@ declare namespace TGApp.Plugins.Mys.News {
* @property {number} view 帖子浏览数
* @return RenderData
*/
interface RenderData {
mark: number;
forward: number;
like: number;
reply: number;
view: number;
}
type RenderData = { mark: number; forward: number; like: number; reply: number; view: number };
/**
* @description 用于渲染的版块信息
@@ -127,9 +108,5 @@ declare namespace TGApp.Plugins.Mys.News {
* @property {string} id 版块 ID
* @return RenderForum
*/
interface RenderForum {
name: string;
icon: string;
id: number;
}
type RenderForum = { name: string; icon: string; id: number };
}

View File

@@ -156,9 +156,6 @@ export async function copyToClipboard(buffer: Uint8Array): Promise<void> {
const blob = new Blob([buffer], { type: "image/png" });
const url = URL.createObjectURL(blob);
// todo mac 会报错: https://bugs.webkit.org/show_bug.cgi?id=222262
// NotAllowedError:
// The request is not allowed by the user agent or the platform in the current context,
// possibly because the user denied permission.
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
URL.revokeObjectURL(url);
}