From c87f340d94e7c7ab1dcf33a709705b5040478cfd Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Wed, 24 May 2023 15:11:28 +0800
Subject: [PATCH] main page fold

---
 src/language/zh.ts                            |   2 +-
 .../Home/content/aside/MainPageAside.vue      | 117 ++++++++++++++++--
 .../Home/content/aside/item/AsideItem.vue     |  98 ---------------
 .../aside/topic/components/SingleTopic.vue    |  72 +++++++++++
 .../content/aside/topic/components/Topic.vue  |  61 +++++++++
 vite.config.ts                                |   4 +-
 6 files changed, 243 insertions(+), 111 deletions(-)
 delete mode 100644 src/views/Home/content/aside/item/AsideItem.vue
 create mode 100644 src/views/Home/content/aside/topic/components/SingleTopic.vue
 create mode 100644 src/views/Home/content/aside/topic/components/Topic.vue

diff --git a/src/language/zh.ts b/src/language/zh.ts
index 934dada8..ddb13dd8 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -1,5 +1,5 @@
 export default {
   header: {
-    name: '鲲站',
+    name: '鲲Galgame',
   },
 }
diff --git a/src/views/Home/content/aside/MainPageAside.vue b/src/views/Home/content/aside/MainPageAside.vue
index 401d0694..2b1de29f 100644
--- a/src/views/Home/content/aside/MainPageAside.vue
+++ b/src/views/Home/content/aside/MainPageAside.vue
@@ -1,17 +1,29 @@
 <script setup lang="ts">
-import AsideItem from './item/AsideItem.vue'
 import NewTopic from './topic/NewTopic.vue'
 import HotTopic from './topic/HotTopic.vue'
 // 导入图标
 import { Icon } from '@iconify/vue'
 // 导入 Vue 函数
 import { ref } from 'vue'
+// 用户点击项目跳转
+import router from '@/router'
+
+const handleClick = () => {
+  router.push('/rank')
+}
 // 用户点击折叠左侧区域
-const asideWidth = ref(240)
-const asideWidthStyle = `${asideWidth.value}px`
+// localStorage.setItem('KUNGalgameMainPageAsideBar', 'true')
+// const asideBarStatus =
+//   localStorage.getItem('KUNGalgameMainPageAsideBar') || true
+const topic = ref(true)
+const asideWidth = ref('240px')
 const handleFold = () => {
-  asideWidth.value = 40
-  console.log(asideWidth.value)
+  if (topic.value) {
+    asideWidth.value = '40px'
+  } else {
+    asideWidth.value = '240px'
+  }
+  topic.value = !topic.value
 }
 </script>
 
@@ -20,14 +32,29 @@ const handleFold = () => {
   <div class="aside">
     <!-- 侧边栏交互 -->
     <div class="nav-aside" @click="handleFold">
-      <span>{{ asideWidth }}</span>
       <!-- fa 箭头图标字体 -->
       <Icon icon="line-md:arrow-left" />
       <span>折叠左侧区域</span>
     </div>
-    <AsideItem />
-    <HotTopic />
-    <NewTopic />
+    <!-- 侧边栏功能区 -->
+    <div class="item-box">
+      <!-- 发布新文章 -->
+      <div class="new-article" v-show="topic">
+        <!-- 发布新文章的按钮 -->
+        <button class="btn-new-article">发布帖子</button>
+      </div>
+      <!-- 功能盒子容器 -->
+      <div class="item-box-container">
+        <div>技术交流</div>
+        <div>其它游戏</div>
+        <div @click="handleClick">排行榜</div>
+        <div>执行条例</div>
+        <div>加入我们</div>
+        <div>帖子池</div>
+      </div>
+    </div>
+    <HotTopic v-show="topic" />
+    <NewTopic v-show="topic" />
   </div>
 </template>
 
@@ -36,7 +63,7 @@ const handleFold = () => {
 .aside {
   /* 侧边栏距离文章区域的距离 */
   margin-right: 5px;
-  width: v-bind('asideWidthStyle');
+  width: v-bind('asideWidth');
   /* 侧边栏相对于整体可视部分的占比 */
   /* 侧边栏高度 */
   height: 100%;
@@ -44,6 +71,7 @@ const handleFold = () => {
   display: flex;
   /* 方向为竖向 */
   flex-direction: column;
+  transition: 0.2s;
 }
 /* 侧边栏交互 */
 .nav-aside {
@@ -59,9 +87,78 @@ const handleFold = () => {
   /* 字体设置 */
   font-size: small;
   color: @kungalgame-font-color-3;
+  cursor: pointer;
+}
+@media (max-width: 50px) {
+  .nav-aside {
+    background-color: aqua;
+  }
+}
+/* 侧边栏功能区 */
+.item-box {
+  width: 100%;
+  height: 1px;
+  /* 功能区相对于侧边栏的占比 */
+  flex-grow: 6;
+  /* 设置六个功能（模式、排行、背景等）分布的弹性盒 */
+  display: flex;
+  flex-direction: column;
+}
+/* 发布帖子 */
+.new-article {
+  width: 100%;
+  /* 发布帖子的按钮相对于功能区盒子的占比 */
+  flex-grow: 2;
+}
+/* 发布按钮样式 */
+.new-article button {
+  height: 100%;
+  width: 100%;
+  background-color: @kungalgame-red-0;
+  border: 1px solid @kungalgame-red-3;
+  border-radius: 5px;
+  cursor: pointer;
+  color: @kungalgame-red-3;
+  font-weight: bold;
+  font-size: larger;
   /* 页面缩小到最小时不换行 */
   overflow: hidden;
   white-space: nowrap;
+}
+/* 发布按钮 hover 效果 */
+.new-article button:hover {
+  font-size: xx-large;
+  background-color: @kungalgame-red-3;
+  color: @kungalgame-red-0;
+  /* 效果过渡时长 */
+  transition: 0.3s;
+}
+/* 功能区容器 */
+/* 功能区容器 */
+.item-box-container {
+  /* 两行三列 grid 布局 */
+  display: grid;
+  grid-template-columns: repeat(3, 80px);
+  grid-template-rows: repeat(2, 40px);
+  font-size: 14px;
+  /* 字体颜色 */
+  color: @kungalgame-font-color-3;
+  /* 相对定位 */
+  position: relative;
+}
+/* 六个功能之间的距离 */
+.item-box-container > div {
+  /* 设置六个功能（模式、排行、背景等）之间的间距 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  color: @kungalgame-font-color-2;
+}
+/* 设置六个功能（模式、排行、背景等）的 hover */
+.item-box-container > div:hover {
+  color: @kungalgame-font-color-3;
+  background-color: @kungalgame-blue-0;
   cursor: pointer;
 }
 </style>
diff --git a/src/views/Home/content/aside/item/AsideItem.vue b/src/views/Home/content/aside/item/AsideItem.vue
deleted file mode 100644
index 978aeebc..00000000
--- a/src/views/Home/content/aside/item/AsideItem.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import router from '@/router'
-
-const handleClick = () => {
-  router.push('/rank')
-}
-</script>
-
-<template>
-  <!-- 侧边栏功能区 -->
-  <div class="item-box">
-    <!-- 发布新文章 -->
-    <div class="new-article">
-      <!-- 发布新文章的按钮 -->
-      <button class="btn-new-article">发布帖子</button>
-    </div>
-    <!-- 功能盒子容器 -->
-    <div class="item-box-container">
-      <div>技术交流</div>
-      <div>其它游戏</div>
-      <div @click="handleClick">排行榜</div>
-      <div>执行条例</div>
-      <div>加入我们</div>
-      <div>帖子池</div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-
-/* 侧边栏功能区 */
-.item-box {
-  width: 100%;
-  height: 1px;
-  /* 功能区相对于侧边栏的占比 */
-  flex-grow: 6;
-  /* 设置六个功能（模式、排行、背景等）分布的弹性盒 */
-  display: flex;
-  flex-direction: column;
-}
-/* 发布帖子 */
-.new-article {
-  width: 100%;
-  /* 发布帖子的按钮相对于功能区盒子的占比 */
-  flex-grow: 2;
-}
-/* 发布按钮样式 */
-.new-article button {
-  height: 100%;
-  width: 100%;
-  background-color: @kungalgame-red-0;
-  border: 1px solid @kungalgame-red-3;
-  border-radius: 5px;
-  cursor: pointer;
-  color: @kungalgame-red-3;
-  font-weight: bold;
-  font-size: larger;
-  /* 页面缩小到最小时不换行 */
-  overflow: hidden;
-  white-space: nowrap;
-}
-/* 发布按钮 hover 效果 */
-.new-article button:hover {
-  font-size: xx-large;
-  background-color: @kungalgame-red-3;
-  color: @kungalgame-red-0;
-  /* 效果过渡时长 */
-  transition: 0.3s;
-}
-/* 功能区容器 */
-/* 功能区容器 */
-.item-box-container {
-  /* 两行三列 grid 布局 */
-  display: grid;
-  grid-template-columns: repeat(3, 80px);
-  grid-template-rows: repeat(2, 40px);
-  font-size: 14px;
-  /* 字体颜色 */
-  color: @kungalgame-font-color-3;
-  /* 相对定位 */
-  position: relative;
-}
-/* 六个功能之间的距离 */
-.item-box-container > div {
-  /* 设置六个功能（模式、排行、背景等）之间的间距 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: bold;
-  color: @kungalgame-font-color-2;
-}
-/* 设置六个功能（模式、排行、背景等）的 hover */
-.item-box-container > div:hover {
-  color: @kungalgame-font-color-3;
-  background-color: @kungalgame-blue-0;
-  cursor: pointer;
-}
-</style>
diff --git a/src/views/Home/content/aside/topic/components/SingleTopic.vue b/src/views/Home/content/aside/topic/components/SingleTopic.vue
new file mode 100644
index 00000000..25c28814
--- /dev/null
+++ b/src/views/Home/content/aside/topic/components/SingleTopic.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+</script>
+
+<template>
+  <div class="new-topic">
+    <!-- 热门帖子的标题 -->
+    <div class="new-topic-title">啊这可海星</div>
+    <!-- 热门帖子的热度值 -->
+    <div class="new-topic-number">
+      <Icon icon="svg-spinners:clock" />
+      <span>刚刚</span>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* 单个新帖子的样式 */
+.new-topic {
+  display: flex;
+  /* 设置空白左右居中 */
+  justify-content: space-between;
+  /* 设置每个帖子高度相等 */
+  flex-grow: 1;
+  color: @kungalgame-font-color-3;
+  align-items: center;
+  cursor: pointer;
+}
+/* 单个新帖子的 hover */
+.new-topic:hover {
+  box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
+}
+.new-topic:active {
+  box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
+    inset -1px -1px 2px @kungalgame-white;
+}
+/* 单个帖子的标题样式 */
+.new-topic-title {
+  /* 单个帖子标题左侧的一段距离 */
+  padding-left: 10px;
+  /* 设置页面变化时不换行，显示省略号 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 显示省略号 */
+  display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
+  -webkit-box-orient: vertical; /* 设置为纵向排列 */
+  -webkit-line-clamp: 2; /* 显示两行文本 */
+  /* 设置帖子的字体大小 */
+  font-size: smaller;
+}
+/* 设置单个帖子右侧的热度值盒子 */
+.new-topic-number {
+  /* 热度值距离右侧的距离 */
+  margin-right: 10px;
+  display: flex;
+  /* 右侧热度区域不换行 */
+  white-space: nowrap;
+  align-items: center;
+}
+/* 时钟图标的颜色 */
+.new-topic-number {
+  /* 设置 fa 图标字体的颜色 */
+  color: @kungalgame-purple-4;
+}
+/* 右侧区域的大小 */
+.new-topic-number span {
+  width: 36px;
+  font-size: xx-small;
+  /* 右侧区域距离最右侧的距离 */
+  margin-left: 5px;
+  color: @kungalgame-font-color-3;
+}
+</style>
diff --git a/src/views/Home/content/aside/topic/components/Topic.vue b/src/views/Home/content/aside/topic/components/Topic.vue
new file mode 100644
index 00000000..5bfd7f85
--- /dev/null
+++ b/src/views/Home/content/aside/topic/components/Topic.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import SingleTopic from './SingleTopic.vue'
+</script>
+
+<template>
+  <!-- 侧边栏动态推送今日热度帖子 -->
+  <div class="top-topic-wrap">
+    <!-- 今日热度帖子的标题名 -->
+    <div class="top-topic-title-name">今日热门话题</div>
+    <!-- 热门帖子的目录 -->
+    <div class="top-topic-content">
+      <SingleTopic />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* 侧边栏动态推送帖子的总容器 */
+.top-topic-wrap {
+  width: 100%;
+  height: 1px;
+  /* 设置今日热门帖子占侧边栏的比例 */
+  flex-grow: 12.5;
+  /* 热门帖子距离最新帖子的距离 */
+  margin-bottom: 5px;
+  /* 今日热门帖子区域为竖直弹性盒 */
+  display: flex;
+  flex-direction: column;
+}
+.top-topic-title-name,
+.top-topic-content {
+  width: 100%;
+  height: 1px;
+}
+/* “今日热门话题”六个字的样式 */
+.top-topic-title-name {
+  /* 设置盒子的 border 在内侧显示 */
+  box-sizing: border-box;
+  border: 3px dashed @kungalgame-trans-blue-1;
+  border-bottom: none;
+  /* 设置（今日热门话题）居中 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 设置（今日热门话题占整个热门区域的宽度） */
+  flex-grow: 1;
+  color: @kungalgame-font-color-3;
+  /* 设置页面缩小到最小时该行不换行 */
+  overflow: hidden;
+  white-space: nowrap;
+}
+/* 展示热门帖子标题的区域 */
+.top-topic-content {
+  background-color: @kungalgame-trans-blue-1;
+  /* 热门帖子标题区域占整个左侧页面中部的比例 */
+  flex-grow: 10;
+  /* 热门帖子标题部分为弹性盒 */
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 253add4b..b8a3fa9d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,11 +4,11 @@ import vue from '@vitejs/plugin-vue'
 // 引入 Rollup Plugin Visualizer 打包可视化工具
 import { visualizer } from 'rollup-plugin-visualizer'
 // 引入 mock-js
-import { viteMockServe } from 'vite-plugin-mock'
+// import { viteMockServe } from 'vite-plugin-mock'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), visualizer() as PluginOption, viteMockServe()],
+  plugins: [vue(), visualizer() as PluginOption],
   /* src 别名为 @ */
   resolve: {
     alias: {