Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-06 08:32:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ 窄视图

Browse Source
This commit is contained in:
BTMuli
2025-11-25 15:05:38 +08:00
parent 5df5868549
commit db03f211d4
3 changed files with 214 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/app/t-postWidth.vue Normal file
View File

@@ -0,0 +1,77 @@
<!-- 改变帖子视图 -->
<template>
<div
class="tpw2-box"
:class="postViewWide ? '' : 'active'"
:title="postViewWide ? '切换为窄屏视图' : '切换为宽屏视图'"
data-html2canvas-ignore
>
<div class="tpw2-btn" @click="switchPostWidth()">
<v-icon size="20">
{{ postViewWide ? "mdi-arrow-collapse-horizontal" : "mdi-arrow-expand-horizontal" }}
</v-icon>
</div>
</div>
</template>
<script lang="ts" setup>
import useAppStore from "@store/app.js";
import { storeToRefs } from "pinia";
const { postViewWide } = storeToRefs(useAppStore());
function switchPostWidth(): void {
postViewWide.value = !postViewWide.value;
}
</script>
<style lang="scss" scoped>
@use "@styles/github.styles.scss" as github-styles;
.tpw2-box {
@include github-styles.github-card;
position: fixed;
top: 112px;
left: 16px;
display: flex;
width: 36px;
height: 36px;
box-sizing: border-box;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
&.active {
background: var(--tgc-btn-1);
box-shadow: 1px 3px 6px var(--common-shadow-2);
color: var(--btn-text);
}
&:hover:not(.active) {
background: var(--common-shadow-1);
}
}
.dark .tpw2-box {
border: 1px solid var(--common-shadow-1);
box-shadow: 1px 3px 6px var(--common-shadow-t-2);
&:not(.active) {
@include github-styles.github-card("dark");
&:hover {
background: var(--common-shadow-6);
}
}
}
.tpw2-btn {
position: relative;
z-index: 1;
display: flex;
width: 20px;
height: 20px;
align-items: center;
justify-content: center;
}
</style>

78
src/store/modules/app.ts
View File

@@ -1,7 +1,6 @@
/** /**
* @file store/modules/app.ts * 应用状态管理
* @description App store module * @since Beta v0.8.7
* @since Beta v0.8.3
*/ */
import { AnnoLangEnum } from "@enum/anno.js"; import { AnnoLangEnum } from "@enum/anno.js";
@@ -11,54 +10,64 @@ import { getInitDeviceInfo } from "@utils/toolFunc.js";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { ref } from "vue"; import { ref } from "vue";
// 用于存储用户数据的路径 /* 用于存储用户数据的路径 */
const userDataDir: Readonly<string> = `${await path.appLocalDataDir()}${path.sep()}userData`; const userDataDir: Readonly<string> = `${await path.appLocalDataDir()}${path.sep()}userData`;
// 用于存放数据库的路径 /* 用于存放数据库的路径 */
const dbDataPath: Readonly<string> = `${await path.appConfigDir()}${path.sep()}TeyvatGuide.db`; const dbDataPath: Readonly<string> = `${await path.appConfigDir()}${path.sep()}TeyvatGuide.db`;
// 用于存放日志的路径 /* 用于存放日志的路径 */
const logDataDir: Readonly<string> = await path.appLogDir(); const logDataDir: Readonly<string> = await path.appLogDir();
/* 咨讯类型 TODO:改成枚举类 */
export type NewsType = "notice" | "activity" | "news"; export type NewsType = "notice" | "activity" | "news";
const useAppStore = defineStore( const useAppStore = defineStore(
"app", "app",
() => { () => {
// 应用打包时间 /* 应用打包时间 */
const buildTime = ref<string>(""); const buildTime = ref<string>("");
// 侧边栏设置 /* 侧边栏设置 */
const sidebar = ref({ collapse: true }); const sidebar = ref({ collapse: true });
// 开发者模式 /* 开发者模式 */
const devMode = ref<boolean>(false); const devMode = ref<boolean>(false);
// 应用主题 /* 应用主题 */
const theme = ref<string>("default"); const theme = ref<string>("default");
// 是否登录 /* 是否登录 */
const isLogin = ref<boolean>(false); const isLogin = ref<boolean>(false);
// 用户数据目录 /* 用户数据目录 */
const userDir = ref<string>(userDataDir); const userDir = ref<string>(userDataDir);
// 数据库路径 /* 数据库路径 */
const dbPath = ref<Readonly<string>>(dbDataPath); const dbPath = ref<Readonly<string>>(dbDataPath);
// 日志目录 /* 日志目录 */
const logDir = ref<string>(logDataDir); const logDir = ref<string>(logDataDir);
// 游戏安装目录 /* 游戏安装目录 */
const gameDir = ref<string>("未设置"); const gameDir = ref<string>("未设置");
// 设备信息 /* 设备信息 */
const deviceInfo = ref<TGApp.App.Device.DeviceInfo>(getInitDeviceInfo()); const deviceInfo = ref<TGApp.App.Device.DeviceInfo>(getInitDeviceInfo());
// 服务器 /* 服务器 */
const server = ref<TGApp.Game.Base.ServerTypeEnum>(GameServerEnum.CN_QD01); const server = ref<TGApp.Game.Base.ServerTypeEnum>(GameServerEnum.CN_QD01);
// 语言 /* 语言 */
const lang = ref<TGApp.BBS.Announcement.AnnoLangEnum>(AnnoLangEnum.CHS); const lang = ref<TGApp.BBS.Announcement.AnnoLangEnum>(AnnoLangEnum.CHS);
// 最近的咨讯类型 /* 最近的咨讯类型 */
const recentNewsType = ref<NewsType>("notice"); const recentNewsType = ref<NewsType>("notice");
// 是否开启分辨率回正 /* 是否开启分辨率回正 */
const needResize = ref<string>("true"); const needResize = ref<string>("true");
// 分享图生成默认设置，为0表示默认保存到文件，为数字表示当大小超过xMB时保存到文件，否则保存到剪贴板 /**
* 分享图生成默认设置
* @remarks 为0表示默认保存到文件，为数字表示当大小超过xMB时保存到文件，否则保存到剪贴板
*/
const shareDefaultFile = ref<number>(10); const shareDefaultFile = ref<number>(10);
// 图像压缩质量 /* 图像压缩质量 */
const imageQualityPercent = ref<number>(80); const imageQualityPercent = ref<number>(80);
// 无痕浏览 /* 无痕浏览 */
const incognito = ref<boolean>(true); const incognito = ref<boolean>(true);
/* 帖子宽窄视图 */
const postViewWide = ref<boolean>(true);
// 初始化 /**
* 初始化应用状态
* @since Beta v0.8.7
* @remarks 用于首次运行或重置应用状态
* @returns void
*/
function init(): void { function init(): void {
devMode.value = false; devMode.value = false;
theme.value = "default"; theme.value = "default";
@@ -72,18 +81,35 @@ const useAppStore = defineStore(
shareDefaultFile.value = 10; shareDefaultFile.value = 10;
imageQualityPercent.value = 10; imageQualityPercent.value = 10;
incognito.value = true; incognito.value = true;
postViewWide.value = true;
initDevice(); initDevice();
} }
/**
* 切换应用主题
* @since unknown
* @returns void
*/
function changeTheme(): void { function changeTheme(): void {
if (theme.value === "default") theme.value = "dark"; if (theme.value === "default") theme.value = "dark";
else theme.value = "default"; else theme.value = "default";
} }
/**
* 初始化设备信息
* @since unknown
* @returns void
*/
function initDevice(): void { function initDevice(): void {
deviceInfo.value = getInitDeviceInfo(); deviceInfo.value = getInitDeviceInfo();
} }
/**
* 获取图片压缩后的URL
* @param {string} url 图片原始URL
* @param {string} [fmt] 图片格式
* @returns {string} 压缩后的图片URL
*/
function getImageUrl(url: string, fmt?: string): string { function getImageUrl(url: string, fmt?: string): string {
let check = true; let check = true;
if (fmt && !["jpg", "png", "webp", "gif", "jpeg"].includes(fmt.toLowerCase())) check = false; if (fmt && !["jpg", "png", "webp", "gif", "jpeg"].includes(fmt.toLowerCase())) check = false;
@@ -109,6 +135,7 @@ const useAppStore = defineStore(
shareDefaultFile, shareDefaultFile,
imageQualityPercent, imageQualityPercent,
incognito, incognito,
postViewWide,
init, init,
changeTheme, changeTheme,
getImageUrl, getImageUrl,
@@ -134,6 +161,7 @@ const useAppStore = defineStore(
"imageQualityPercent", "imageQualityPercent",
"incognito", "incognito",
"sidebar", "sidebar",
"postViewWide",
], ],
}, },
{ {

123
src/views/t-post.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<TSwitchTheme /> <TSwitchTheme />
<TPinWin /> <TPinWin />
<TPostWidth />
<VpBtnCollect :model-value="postId" :data="postData" /> <VpBtnCollect :model-value="postId" :data="postData" />
<TShareBtn selector=".tp-post-body" :title="`Post_${postId}`" /> <TShareBtn selector=".tp-post-body" :title="`Post_${postId}`" />
<VpBtnReply :gid="postData.post.game_id" :post-id="postData.post.post_id" v-if="postData" /> <VpBtnReply :gid="postData.post.game_id" :post-id="postData.post.post_id" v-if="postData" />
@@ -21,32 +22,34 @@
<span>{{ postData.forum.name }}</span> <span>{{ postData.forum.name }}</span>
</div> </div>
</div> </div>
<div class="mpm-item" :title="`浏览数：${postData?.stat?.view_num}`"> <template v-if="postViewWide">
<v-icon size="16">mdi-eye</v-icon> <div class="mpm-item" :title="`浏览数：${postData?.stat?.view_num}`">
<span>{{ postData?.stat?.view_num }}</span> <v-icon size="16">mdi-eye</v-icon>
</div> <span>{{ postData?.stat?.view_num }}</span>
<div class="mpm-item" :title="`收藏数：${postData?.stat?.bookmark_num}`"> </div>
<v-icon size="16">mdi-star</v-icon> <div class="mpm-item" :title="`收藏数：${postData?.stat?.bookmark_num}`">
<span>{{ postData?.stat?.bookmark_num }}</span> <v-icon size="16">mdi-star</v-icon>
</div> <span>{{ postData?.stat?.bookmark_num }}</span>
<div class="mpm-item" :title="`回复数：${postData?.stat?.reply_num}`"> </div>
<v-icon size="16">mdi-comment</v-icon> <div class="mpm-item" :title="`回复数：${postData?.stat?.reply_num}`">
<span>{{ postData?.stat?.reply_num }}</span> <v-icon size="16">mdi-comment</v-icon>
</div> <span>{{ postData?.stat?.reply_num }}</span>
<!-- TODO: 展示不同种类点赞图标&数量 --> </div>
<div <!-- TODO: 展示不同种类点赞图标&数量 -->
class="mpm-item" <div
:title="`点赞数：${postData?.stat?.like_num}`" class="mpm-item"
@click="tryLike()" :title="`点赞数：${postData?.stat?.like_num}`"
:class="{ like: isLike }" @click="tryLike()"
> :class="{ like: isLike }"
<v-icon size="16">mdi-thumb-up</v-icon> >
<span>{{ postData?.stat?.like_num }}</span> <v-icon size="16">mdi-thumb-up</v-icon>
</div> <span>{{ postData?.stat?.like_num }}</span>
<div class="mpm-item" :title="`转发数：${postData?.stat?.forward_num}`"> </div>
<v-icon size="16">mdi-share-variant</v-icon> <div class="mpm-item" :title="`转发数：${postData?.stat?.forward_num}`">
<span>{{ postData?.stat?.forward_num }}</span> <v-icon size="16">mdi-share-variant</v-icon>
</div> <span>{{ postData?.stat?.forward_num }}</span>
</div>
</template>
</div> </div>
<TpAvatar <TpAvatar
:data="postData.user" :data="postData.user"
@@ -99,6 +102,34 @@
@click="toTopic(topic)" @click="toTopic(topic)"
/> />
</div> </div>
<div class="tp-post-data" v-if="!postViewWide">
<div class="mpm-item" :title="`浏览数：${postData?.stat?.view_num}`">
<v-icon size="16">mdi-eye</v-icon>
<span>{{ postData?.stat?.view_num }}</span>
</div>
<div class="mpm-item" :title="`收藏数：${postData?.stat?.bookmark_num}`">
<v-icon size="16">mdi-star</v-icon>
<span>{{ postData?.stat?.bookmark_num }}</span>
</div>
<div class="mpm-item" :title="`回复数：${postData?.stat?.reply_num}`">
<v-icon size="16">mdi-comment</v-icon>
<span>{{ postData?.stat?.reply_num }}</span>
</div>
<!-- TODO: 展示不同种类点赞图标&数量 -->
<div
class="mpm-item"
:title="`点赞数：${postData?.stat?.like_num}`"
@click="tryLike()"
:class="{ like: isLike }"
>
<v-icon size="16">mdi-thumb-up</v-icon>
<span>{{ postData?.stat?.like_num }}</span>
</div>
<div class="mpm-item" :title="`转发数：${postData?.stat?.forward_num}`">
<v-icon size="16">mdi-share-variant</v-icon>
<span>{{ postData?.stat?.forward_num }}</span>
</div>
</div>
<div class="tp-post-subtitle"> <div class="tp-post-subtitle">
<span :title="`更新于:${getDate(postData.post.updated_at)}`"> <span :title="`更新于:${getDate(postData.post.updated_at)}`">
创建于:{{ getDate(postData.post.created_at) }} 创建于:{{ getDate(postData.post.created_at) }}
@@ -126,6 +157,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import TMiImg from "@comp/app/t-mi-img.vue"; import TMiImg from "@comp/app/t-mi-img.vue";
import TPinWin from "@comp/app/t-pinWin.vue"; import TPinWin from "@comp/app/t-pinWin.vue";
import TPostWidth from "@comp/app/t-postWidth.vue";
import TShareBtn from "@comp/app/t-shareBtn.vue"; import TShareBtn from "@comp/app/t-shareBtn.vue";
import TSwitchTheme from "@comp/app/t-switchTheme.vue"; import TSwitchTheme from "@comp/app/t-switchTheme.vue";
import showLoading from "@comp/func/loading.js"; import showLoading from "@comp/func/loading.js";
@@ -151,10 +183,10 @@ import TGClient from "@utils/TGClient.js";
import TGLogger from "@utils/TGLogger.js"; import TGLogger from "@utils/TGLogger.js";
import { createTGWindow } from "@utils/TGWindow.js"; import { createTGWindow } from "@utils/TGWindow.js";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { onBeforeMount, onMounted, onUnmounted, ref, shallowRef } from "vue"; import { computed, onBeforeMount, onMounted, onUnmounted, ref, shallowRef } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const { incognito } = storeToRefs(useAppStore()); const { incognito, postViewWide } = storeToRefs(useAppStore());
const { gameList } = storeToRefs(useBBSStore()); const { gameList } = storeToRefs(useBBSStore());
const { cookie } = storeToRefs(useUserStore()); const { cookie } = storeToRefs(useUserStore());
@@ -167,6 +199,7 @@ const curUid = ref<string>("");
const showUser = ref<boolean>(false); const showUser = ref<boolean>(false);
const renderPost = shallowRef<Array<TGApp.BBS.SctPost.Base>>([]); const renderPost = shallowRef<Array<TGApp.BBS.SctPost.Base>>([]);
const postData = shallowRef<TGApp.BBS.Post.FullData>(); const postData = shallowRef<TGApp.BBS.Post.FullData>();
const viewWidth = computed<string>(() => (postViewWide.value ? "800px" : "400px"));
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
let shareTimer: NodeJS.Timeout | null = null; let shareTimer: NodeJS.Timeout | null = null;
@@ -453,18 +486,17 @@ function handleUser(user: TGApp.BBS.Post.User): void {
@use "@styles/github.styles.scss" as github-styles; @use "@styles/github.styles.scss" as github-styles;
.tp-post-body { .tp-post-body {
width: 800px; width: v-bind(viewWidth); /* stylelint-disable-line value-keyword-case */
margin: 0 auto; margin: 0 auto;
font-family: var(--font-text); font-family: var(--font-text);
transition: width 0.3s ease-in-out;
} }
.tp-post-title { .tp-post-title {
display: flex; position: relative;
width: fit-content; width: fit-content;
align-items: center; margin-bottom: 4px;
justify-content: start;
color: var(--common-text-title); color: var(--common-text-title);
column-gap: 4px;
cursor: pointer; cursor: pointer;
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
@@ -476,6 +508,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
justify-content: center; justify-content: center;
padding: 0 4px; padding: 0 4px;
border-radius: 4px; border-radius: 4px;
margin-right: 4px;
background: var(--common-shadow-1); background: var(--common-shadow-1);
color: var(--box-text-5); color: var(--box-text-5);
font-size: 16px; font-size: 16px;
@@ -488,7 +521,8 @@ function handleUser(user: TGApp.BBS.Post.User): void {
width: fit-content; width: fit-content;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-bottom: 8px; margin-top: 4px;
margin-bottom: 4px;
column-gap: 8px; column-gap: 8px;
font-size: 12px; font-size: 12px;
opacity: 0.8; opacity: 0.8;
@@ -507,7 +541,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
.tp-post-info { .tp-post-info {
position: relative; position: relative;
display: flex; display: flex;
align-items: end; align-items: v-bind("postViewWide ? 'end' : 'center'");
justify-content: space-between; justify-content: space-between;
column-gap: 8px; column-gap: 8px;
} }
@@ -525,18 +559,19 @@ function handleUser(user: TGApp.BBS.Post.User): void {
.tp-post-version { .tp-post-version {
position: absolute; position: absolute;
top: 0; top: v-bind("postViewWide ? '0' : '42px'");
left: 0; left: 0;
color: var(--box-text-1); color: var(--box-text-1);
font-family: var(--font-title); font-size: v-bind("postViewWide ? '12px' : '10px'");
font-size: 14px; opacity: 0.3;
opacity: 0.6;
} }
.tp-post-meta { .tp-post-meta {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: start; justify-content: start;
// flex-wrap: wrap;
color: var(--box-text-4); color: var(--box-text-4);
column-gap: 8px; column-gap: 8px;
font-size: 14px; font-size: 14px;
@@ -596,6 +631,16 @@ function handleUser(user: TGApp.BBS.Post.User): void {
gap: 8px 4px; gap: 8px 4px;
} }
.tp-post-data {
position: relative;
display: flex;
align-items: center;
justify-content: start;
color: var(--box-text-4);
column-gap: 8px;
font-size: 12px;
}
.tp-post-contribution { .tp-post-contribution {
@include github-styles.github-tag-dark-gen(#e06c75); @include github-styles.github-tag-dark-gen(#e06c75);