✨ 窄视图

2025-12-06 08:32:51 +08:00 · 2025-11-25 15:05:38 +08:00
parent 5df5868549
commit db03f211d4
3 changed files with 214 additions and 64 deletions
--- a/src/components/app/t-postWidth.vue
+++ b/src/components/app/t-postWidth.vue
@@ -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>
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,7 +1,6 @@
 /**
- * @file store/modules/app.ts
- * @description App store module
- * @since Beta v0.8.3
+ * 应用状态管理
+ * @since Beta v0.8.7
 */

 import { AnnoLangEnum } from "@enum/anno.js";
@@ -11,54 +10,64 @@ import { getInitDeviceInfo } from "@utils/toolFunc.js";
 import { defineStore } from "pinia";
 import { ref } from "vue";

-// 用于存储用户数据的路径
+/* 用于存储用户数据的路径 */
 const userDataDir: Readonly<string> = `${await path.appLocalDataDir()}${path.sep()}userData`;
-// 用于存放数据库的路径
+/* 用于存放数据库的路径 */
 const dbDataPath: Readonly<string> = `${await path.appConfigDir()}${path.sep()}TeyvatGuide.db`;
-// 用于存放日志的路径
+/* 用于存放日志的路径 */
 const logDataDir: Readonly<string> = await path.appLogDir();
-
+/* 咨讯类型 TODO:改成枚举类 */
 export type NewsType = "notice" | "activity" | "news";

 const useAppStore = defineStore(
  "app",
  () => {
-    // 应用打包时间
+    /* 应用打包时间 */
    const buildTime = ref<string>("");
-    // 侧边栏设置
+    /* 侧边栏设置 */
    const sidebar = ref({ collapse: true });
-    // 开发者模式
+    /* 开发者模式 */
    const devMode = ref<boolean>(false);
-    // 应用主题
+    /* 应用主题 */
    const theme = ref<string>("default");
-    // 是否登录
+    /* 是否登录 */
    const isLogin = ref<boolean>(false);
-    // 用户数据目录
+    /* 用户数据目录 */
    const userDir = ref<string>(userDataDir);
-    // 数据库路径
+    /* 数据库路径 */
    const dbPath = ref<Readonly<string>>(dbDataPath);
-    // 日志目录
+    /* 日志目录 */
    const logDir = ref<string>(logDataDir);
-    // 游戏安装目录
+    /* 游戏安装目录 */
    const gameDir = ref<string>("未设置");
-    // 设备信息
+    /* 设备信息 */
    const deviceInfo = ref<TGApp.App.Device.DeviceInfo>(getInitDeviceInfo());
-    // 服务器
+    /* 服务器 */
    const server = ref<TGApp.Game.Base.ServerTypeEnum>(GameServerEnum.CN_QD01);
-    // 语言
+    /* 语言 */
    const lang = ref<TGApp.BBS.Announcement.AnnoLangEnum>(AnnoLangEnum.CHS);
-    // 最近的咨讯类型
+    /* 最近的咨讯类型 */
    const recentNewsType = ref<NewsType>("notice");
-    // 是否开启分辨率回正
+    /* 是否开启分辨率回正 */
    const needResize = ref<string>("true");
-    // 分享图生成默认设置，为0表示默认保存到文件，为数字表示当大小超过xMB时保存到文件，否则保存到剪贴板
+    /**
+     * 分享图生成默认设置
+     * @remarks 为0表示默认保存到文件，为数字表示当大小超过xMB时保存到文件，否则保存到剪贴板
+     */
    const shareDefaultFile = ref<number>(10);
-    // 图像压缩质量
+    /* 图像压缩质量 */
    const imageQualityPercent = ref<number>(80);
-    // 无痕浏览
+    /* 无痕浏览 */
    const incognito = ref<boolean>(true);
+    /* 帖子宽窄视图 */
+    const postViewWide = ref<boolean>(true);

-    // 初始化
+    /**
+     * 初始化应用状态
+     * @since Beta v0.8.7
+     * @remarks 用于首次运行或重置应用状态
+     * @returns void
+     */
    function init(): void {
      devMode.value = false;
      theme.value = "default";
@@ -72,18 +81,35 @@ const useAppStore = defineStore(
      shareDefaultFile.value = 10;
      imageQualityPercent.value = 10;
      incognito.value = true;
+      postViewWide.value = true;
      initDevice();
    }

+    /**
+     * 切换应用主题
+     * @since unknown
+     * @returns void
+     */
    function changeTheme(): void {
      if (theme.value === "default") theme.value = "dark";
      else theme.value = "default";
    }

+    /**
+     * 初始化设备信息
+     * @since unknown
+     * @returns void
+     */
    function initDevice(): void {
      deviceInfo.value = getInitDeviceInfo();
    }

+    /**
+     * 获取图片压缩后的URL
+     * @param {string} url 图片原始URL
+     * @param {string} [fmt] 图片格式
+     * @returns {string} 压缩后的图片URL
+     */
    function getImageUrl(url: string, fmt?: string): string {
      let check = true;
      if (fmt && !["jpg", "png", "webp", "gif", "jpeg"].includes(fmt.toLowerCase())) check = false;
@@ -109,6 +135,7 @@ const useAppStore = defineStore(
      shareDefaultFile,
      imageQualityPercent,
      incognito,
+      postViewWide,
      init,
      changeTheme,
      getImageUrl,
@@ -134,6 +161,7 @@ const useAppStore = defineStore(
          "imageQualityPercent",
          "incognito",
          "sidebar",
+          "postViewWide",
        ],
      },
      {
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -1,6 +1,7 @@
 <template>
  <TSwitchTheme />
  <TPinWin />
+  <TPostWidth />
  <VpBtnCollect :model-value="postId" :data="postData" />
  <TShareBtn selector=".tp-post-body" :title="`Post_${postId}`" />
  <VpBtnReply :gid="postData.post.game_id" :post-id="postData.post.post_id" v-if="postData" />
@@ -21,6 +22,7 @@
            <span>{{ postData.forum.name }}</span>
          </div>
        </div>
+        <template 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>
@@ -47,6 +49,7 @@
            <v-icon size="16">mdi-share-variant</v-icon>
            <span>{{ postData?.stat?.forward_num }}</span>
          </div>
+        </template>
      </div>
      <TpAvatar
        :data="postData.user"
@@ -99,6 +102,34 @@
        @click="toTopic(topic)"
      />
    </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">
      <span :title="`更新于:${getDate(postData.post.updated_at)}`">
        创建于:{{ getDate(postData.post.created_at) }}
@@ -126,6 +157,7 @@
 <script lang="ts" setup>
 import TMiImg from "@comp/app/t-mi-img.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 TSwitchTheme from "@comp/app/t-switchTheme.vue";
 import showLoading from "@comp/func/loading.js";
@@ -151,10 +183,10 @@ import TGClient from "@utils/TGClient.js";
 import TGLogger from "@utils/TGLogger.js";
 import { createTGWindow } from "@utils/TGWindow.js";
 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";

-const { incognito } = storeToRefs(useAppStore());
+const { incognito, postViewWide } = storeToRefs(useAppStore());
 const { gameList } = storeToRefs(useBBSStore());
 const { cookie } = storeToRefs(useUserStore());

@@ -167,6 +199,7 @@ const curUid = ref<string>("");
 const showUser = ref<boolean>(false);
 const renderPost = shallowRef<Array<TGApp.BBS.SctPost.Base>>([]);
 const postData = shallowRef<TGApp.BBS.Post.FullData>();
+const viewWidth = computed<string>(() => (postViewWide.value ? "800px" : "400px"));

 // eslint-disable-next-line no-undef
 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;

 .tp-post-body {
-  width: 800px;
+  width: v-bind(viewWidth); /* stylelint-disable-line value-keyword-case */
  margin: 0 auto;
  font-family: var(--font-text);
+  transition: width 0.3s ease-in-out;
 }

 .tp-post-title {
-  display: flex;
+  position: relative;
  width: fit-content;
-  align-items: center;
-  justify-content: start;
+  margin-bottom: 4px;
  color: var(--common-text-title);
-  column-gap: 4px;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 20px;
@@ -476,6 +508,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  justify-content: center;
  padding: 0 4px;
  border-radius: 4px;
+  margin-right: 4px;
  background: var(--common-shadow-1);
  color: var(--box-text-5);
  font-size: 16px;
@@ -488,7 +521,8 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  width: fit-content;
  align-items: center;
  justify-content: flex-start;
-  margin-bottom: 8px;
+  margin-top: 4px;
+  margin-bottom: 4px;
  column-gap: 8px;
  font-size: 12px;
  opacity: 0.8;
@@ -507,7 +541,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 .tp-post-info {
  position: relative;
  display: flex;
-  align-items: end;
+  align-items: v-bind("postViewWide ? 'end' : 'center'");
  justify-content: space-between;
  column-gap: 8px;
 }
@@ -525,18 +559,19 @@ function handleUser(user: TGApp.BBS.Post.User): void {

 .tp-post-version {
  position: absolute;
-  top: 0;
+  top: v-bind("postViewWide ? '0' : '42px'");
  left: 0;
  color: var(--box-text-1);
-  font-family: var(--font-title);
-  font-size: 14px;
-  opacity: 0.6;
+  font-size: v-bind("postViewWide ? '12px' : '10px'");
+  opacity: 0.3;
 }

 .tp-post-meta {
  display: flex;
  align-items: flex-end;
  justify-content: start;
+
+  // flex-wrap: wrap;
  color: var(--box-text-4);
  column-gap: 8px;
  font-size: 14px;
@@ -596,6 +631,16 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  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 {
  @include github-styles.github-tag-dark-gen(#e06c75);