full page style

src/components/KUNGalgameAlert/Info.vue

@@ -57,6 +57,8 @@ const handleClose = () => {
   color: var(--kungalgame-font-color-3);
   background-color: var(--kungalgame-trans-white-5);
   backdrop-filter: blur(2px);
+  box-shadow: var(--shadow);
+  border-top: 1px solid var(--kungalgame-blue-1);
   position: fixed;
   bottom: 0;
   left: 0;

src/components/KUNGalgameSearchBox.vue

@@ -51,6 +51,7 @@ defineProps(['isMainPage'])
   /* 页面缩小不换行 */
   white-space: nowrap;
   background-color: var(--kungalgame-trans-blue-2);
+  border: 1px solid var(--kungalgame-blue-4);
   flex-grow: 2;
   /* 相对于二级菜单定位 */
   position: relative;
@@ -91,7 +92,7 @@ defineProps(['isMainPage'])
   background-color: var(--kungalgame-trans-white-5);
   color: var(--kungalgame-font-color-3);
   &::placeholder {
-    color: var(--kungalgame-font-color-2);
+    color: var(--kungalgame-font-color-1);
   }
 }
 /* 搜索按钮 */

src/components/KUNGalgameTopBar.vue

@@ -34,25 +34,14 @@ const topBarItem: topBar[] = [
   { index: 5, name: 'return', router: '/kun' },
 ]
 
-// 初始进入页面 header 没有附加样式
-let topicStyle = {}
-
 // 接受父组件的传值
-const props = defineProps(['isMainPage', 'isTopicPage', 'isAboutPage'])
+const props = defineProps(['isMainPage'])
 
 const isMain = props.isMainPage
-const isTopicPage = props.isTopicPage
 // 如果是主页的话删除 “返回主页” 项目
 if (isMain) {
   topBarItem.pop()
 }
-// 如果是帖子页的话定位为 sticky，距离底部 10px
-if (isTopicPage) {
-  topicStyle = {
-    top: 0,
-    position: 'sticky',
-  }
-}
 
 // 根据导航条的项目个数操作 css 中导航条的宽度
 let navItemNum = topBarItem.length
@@ -69,7 +58,7 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div class="header" :style="topicStyle">
+  <div class="header">
     <!-- 顶部左侧交互栏 -->
     <div class="nav-top">
       <div class="kungal-info">
@@ -100,17 +89,14 @@ onBeforeMount(() => {
       </router-link>
     </div>
   </div>
-  <div class="settings-panel" :style="topicStyle">
+  <div class="settings-panel">
     <transition
       name="kungalgame-panel"
       enter-active-class="animate__animated animate__jackInTheBox animate__faster"
       leave-active-class="animate__animated animate__fadeOutRight animate__faster"
     >
       <KeepAlive>
-        <KUNGalgameSettingsPanel
+        <KUNGalgameSettingsPanel v-if="showKUNGalgamePanel" />
-          v-if="showKUNGalgamePanel"
-          :isTopicPage="isTopicPage"
-        />
       </KeepAlive>
     </transition>
   </div>

src/components/WangEditor.vue

@@ -3,6 +3,7 @@
  -->
 <script setup lang="ts">
 import '@wangeditor/editor/dist/css/style.css'
+import '@/styles/editor/editor.scss'
 import { IDomEditor } from '@wangeditor/editor'
 import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

src/layout/KUNGalgameAPP.vue

@@ -54,6 +54,5 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
   background-size: cover;
   background-attachment: fixed;
   background-color: var(--kungalgame-white);
-  min-width: 300px;
 }
 </style>

src/types/pool/tags.ts

@@ -46,92 +46,4 @@ export const tags: tag[] = [
     index: 10,
     name: '啊这可海星',
   },
-  {
-    index: 11,
-    name: '啊这可海星',
-  },
-  {
-    index: 12,
-    name: '啊这可海星',
-  },
-  {
-    index: 13,
-    name: '啊这可海星',
-  },
-  {
-    index: 14,
-    name: 'KUN',
-  },
-  {
-    index: 15,
-    name: '啊这可海星',
-  },
-  {
-    index: 16,
-    name: '啊这可海星',
-  },
-  {
-    index: 17,
-    name: '啊这可海星',
-  },
-  {
-    index: 18,
-    name: '啊这可海星',
-  },
-  {
-    index: 19,
-    name: '啊这可海星',
-  },
-  {
-    index: 20,
-    name: 'azkhx',
-  },
-  {
-    index: 21,
-    name: '啊这可海星',
-  },
-  {
-    index: 22,
-    name: '啊这可海星',
-  },
-  {
-    index: 23,
-    name: '啊这可海星',
-  },
-  {
-    index: 24,
-    name: 'azkhx azkhx',
-  },
-  {
-    index: 25,
-    name: '啊这可海星',
-  },
-  {
-    index: 26,
-    name: '啊这可海星',
-  },
-  {
-    index: 27,
-    name: '啊这可海星',
-  },
-  {
-    index: 28,
-    name: 'yuyu-kun',
-  },
-  {
-    index: 29,
-    name: '啊这可海星',
-  },
-  {
-    index: 30,
-    name: '啊这可海星',
-  },
-  {
-    index: 31,
-    name: '啊这可海星',
-  },
-  {
-    index: 32,
-    name: '啊这可海星',
-  },
 ]

src/views/Home/content/article/components/header/ArticleHeader.vue

@@ -12,7 +12,7 @@ import SortTopic from './SortTopic.vue'
     <SortTopic />
 
     <!-- 搜索框 -->
-    <KUNGalgameSearchBox :isMainPage="true" />
+    <KUNGalgameSearchBox :isMainPage="true" style="border: none" />
     <!-- 交互区域进入全部话题 -->
     <RouterLink to="/pool/index" class="more">
       <span>全部帖子</span>

src/views/edit/Edit.vue

@@ -54,7 +54,9 @@ const submit = () => {
     </form>
     <!-- 版权 -->
     <KUNGalgameFooter style="margin: 0 auto" />
-    <span style="margin: 0 auto">Editor powered by wangEditor</span>
+    <span style="margin: 0 auto; color: var(--kungalgame-font-color-3)"
+      >Editor powered by wangEditor</span
+    >
   </div>
 </template>
 

src/views/pool/Pool.vue

@@ -7,31 +7,27 @@ import Grid from './components/Grid.vue'
 </script>
 
 <template>
-  <div class="visual-wrapper">
+  <div class="pool">
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 帖子池容器 -->
     <div class="pool-container">
       <KUNGalgameSearchBox style="width: 100%; height: 40px" />
       <Tags />
-      <!-- 帖子池内容区容器 -->
+
-      <div class="content-container">
-        <!-- 帖子池单个帖子列容器 -->
-        <div class="single-topic-column-container">
       <Grid />
     </div>
-      </div>
-    </div>
     <!-- 右侧的功能栏 -->
-    <div class="kungalgame-right-bar"></div>
+    <div class="bar"></div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.visual-wrapper {
+.pool {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow-y: scroll;
 }
 /* 帖子池容器 */
 .pool-container {
@@ -47,10 +43,10 @@ import Grid from './components/Grid.vue'
   /* 毛玻璃背景 */
   backdrop-filter: blur(5px);
   background-color: var(--kungalgame-trans-white-5);
-  border-radius: 7px;
+  padding: 5px;
 }
 /* 右侧的功能栏 */
-.kungalgame-right-bar {
+.bar {
   /* 位置 fix */
   position: fixed;
   top: 70%;

src/views/pool/components/Grid.vue

@@ -33,7 +33,7 @@ const randomStyle = () => {
 .container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  grid-auto-rows: minmax(100px, 3fr);
+  grid-auto-rows: minmax(100px, 320px);
-  grid-gap: 10px;
+  gap: 10px;
 }
 </style>

src/views/pool/components/Tags.vue

@@ -18,6 +18,7 @@ import { tags } from '@/types/pool/tags'
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
+  margin: 10px 0;
 }
 /* 热门帖子标签 */
 .nav-tags {
@@ -27,10 +28,11 @@ import { tags } from '@/types/pool/tags'
   font-size: 14px;
   margin: 2px;
   padding: 2px;
-  background-color: var(--kungalgame-trans-blue-3);
+  background-color: var(--kungalgame-trans-blue-1);
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
+  color: var(--kungalgame-font-color-3);
 }
 </style>

src/views/pool/components/Topic.vue

@@ -1,23 +1,44 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgameMode } = storeToRefs(settingsStore)
+
+const light = `rgba(${randomNum(200, 255)}, ${randomNum(200, 255)}, ${randomNum(
+  200,
+  255
+)}, ${randomNum(30, 70) / 100})`
+
+const dark = `rgba(${randomNum(0, 55)}, ${randomNum(0, 55)}, ${randomNum(
+  0,
+  55
+)}, ${randomNum(30, 70) / 100})`
+
+const color = ref(light)
+
+onMounted(() => {
+  if (showKUNGalgameMode.value === 'dark') {
+    color.value = dark
+  } else {
+    color.value = light
+  }
+
+  watch(showKUNGalgameMode, () => {
+    if (showKUNGalgameMode.value === 'dark') {
+      color.value = dark
+    } else {
+      color.value = light
+    }
+  })
+})
+
 const props = defineProps(['data', 'itemStyle'])
 import { randomNum } from '@/utils/random'
-
+import { onMounted, watch } from 'vue'
-const randomColor = `rgba(${randomNum(0, 100)}, ${randomNum(
-  0,
-  100
-)}, ${randomNum(0, 255)}, ${Math.random().toFixed(2)})`
-
-const randomTransColor = (
-  color1: number,
-  color2: number,
-  color3: number,
-  trans: number
-) => {
-  return `rgba(${randomNum(200, color1)}, ${randomNum(
-    200,
-    color2
-  )}, ${randomNum(200, color3)}, ${randomNum(50, trans) / 100})`
-}
 </script>
 
 <template>
@@ -32,9 +53,13 @@ const randomTransColor = (
     <!-- 帖子的状态 -->
     <div class="status">
       <!-- 浏览数 -->
-      <span><i class="fa-regular fa-eye"></i>{{ props.data.view }}</span>
+      <span
+        ><Icon icon="ic:outline-remove-red-eye" />{{ props.data.view }}</span
+      >
       <!-- 点赞数 -->
-      <span><i class="fa-regular fa-thumbs-up"></i>{{ props.data.like }}</span>
+      <span
+        ><Icon icon="line-md:thumbs-up-twotone" />{{ props.data.like }}</span
+      >
     </div>
     <!-- 发帖时间 -->
     <div class="time">
@@ -52,16 +77,15 @@ const randomTransColor = (
   /* 竖直方向弹性布局 */
   display: flex;
   flex-direction: column;
-  /* 圆角 */
-  border-radius: 7px;
   /* Scss random color */
-  background-color: v-bind(randomTransColor(255, 255, 255, 100));
+  background-color: v-bind(color);
-  border: 1px solid v-bind(randomTransColor(255, 255, 255, 100));
+  border: 1px solid var(--kungalgame-blue-1);
   color: var(--kungalgame-font-color-3);
   cursor: pointer;
+  box-shadow: var(--shadow);
 }
 .topic:hover {
-  background-color: var(--kungalgame-blue-1);
+  background-color: var(--kungalgame-trans-white-2);
 }
 /* 帖子的标题 */
 .title {
@@ -77,6 +101,7 @@ const randomTransColor = (
   padding: 0 7px;
   font-weight: bold;
   color: var(--kungalgame-font-color-2);
+  flex-shrink: 0;
 }
 /* 帖子的内容区 */
 .content {
@@ -88,6 +113,7 @@ const randomTransColor = (
 /* 帖子的状态 */
 .status {
   display: flex;
+  flex-shrink: 0;
   justify-content: space-around;
   margin-bottom: 10px;
   /* 窗口缩小不换行 */

src/views/technique/Technique.vue

@@ -40,7 +40,6 @@ import Aside from './components/Aside.vue'
   height: 1500px;
   display: flex;
   flex-direction: column;
-  min-width: 800px;
 }
 /* 内容区 */
 .content {
@@ -49,8 +48,6 @@ import Aside from './components/Aside.vue'
   height: 1400px;
   /* 占总页面的宽度 */
   width: 95%;
-  /* 最小宽度 */
-  min-width: 700px;
   /* 水平垂直居中 */
   margin: 0 auto;
   display: flex;

src/views/technique/components/Aside.vue

@@ -12,7 +12,7 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
       <div class="page-title">技术交流</div>
       <!-- 侧边的搜索框 -->
       <div class="search">
-        <KUNGalgameSearchBox style="height: 40px; width: 100%" />
+        <KUNGalgameSearchBox style="height: 40px; width: 100%; border: none" />
       </div>
       <!-- 推荐标签 -->
       <div class="recommend">

src/views/topic/KUNGalgameTopicPage.vue

@@ -9,7 +9,9 @@ import KUNGalgameTopicContent from './content/KUNGalgameTopicContent.vue'
 <template>
   <!-- 总容器 -->
   <div class="main-wrapper">
-    <KUNGalgameTopBar :isMainPage="false" :isTopicPage="true" />
+    <div style="position: sticky; top: 0; z-index: 1007">
+      <KUNGalgameTopBar />
+    </div>
     <!-- 下面帖子详情区的容器 -->
     <div class="topic-wrapper">
       <!-- 下方可视内容区的容器 -->