✨ 窄视图

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>

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",
         ],
       },
       {

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,32 +22,34 @@
             <span>{{ postData.forum.name }}</span>
           </div>
         </div>
-        <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>
+        <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>
+          </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>
+        </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);