Skip to content

Commit

Permalink
🚸 一些调整
Browse files Browse the repository at this point in the history
  • Loading branch information
@BTMuli
BTMuli committed Dec 16, 2024
1 parent fe9737c commit 664e87b
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 193 deletions.
100 changes: 37 additions & 63 deletions src/components/app/t-postcard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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";
});
Expand Down Expand Up @@ -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 {
Expand All @@ -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,
};
}
Expand All @@ -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);
Expand Down
107 changes: 28 additions & 79 deletions src/components/app/t-sidebar.vue
View file
Original file line number Diff line number Diff line change
@@ -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" />
Expand All @@ -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">
Expand All @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 664e87b

Please sign in to comment.