rebuild: topic page aside

docs/rules.md

@@ -0,0 +1,40 @@
+# 代码编写说明
+
+
+
+## 概览
+
+
+
+* 总体必须采用 `Vue3 composition API + setup + Typescript ` 写法，参照官网示例
+* 不允许 `document.getElementById` 等直接的 `DOM` 操作，除非万不得已
+* 文件夹命名使用 `kebab-case` 命名，`.ts` 文件使用 `camelCase` 命名，`.vue` 文件使用 `PascalCase` 命名
+* 不允许引入超过 `500kb` 的包
+
+
+
+## Vue3
+
+
+
+* `defineProps` 以及 `defineEmits` 等函数必须使用 `ts` 标注类型，格式为 `const props = defineProps<{param: type}>()`
+* 当调用大于等于 `4` 层时必须用 `computed`，三元运算符必须用 `computed` 
+* 组件名使用 `PascalCase` 命名，内置组件必须以 `PascalCase` 的形式引入，例如 `<RouterLink to="/kun" />`
+* 父组件给子组件传参使用 `kebab-case` 命名，`v-on` 使用 `camelCase` 命名
+
+
+
+## Typescript
+
+* 不允许出现 `any`
+* 接口一律用 `PascalCase ` 命名
+* `.s.ts` 的声明文件一律用 `kebab-case` 命名
+
+
+
+## 变量、函数
+
+* 变量尽可能使用 `const` 声明，函数尽量使用 `const kun = () => {}` 的箭头函数写法声明
+* 布尔类型的值一律以 `is` 开头，例如 `isShowToolbar`
+* `store` 中的函数一律使用 `use...store` 命名，例如 `useKUNGalgameEditStore`
+* 复杂函数请采用 `@param {type} paramName` 的形式编写注释

src/router/modules/home.ts

@@ -8,6 +8,7 @@ const index: RouteRecordRaw[] = [
     path: '/',
     component: Layout,
     redirect: '/kun',
+    alias: '/index',
     children: [
       {
         name: 'KUN',

src/router/modules/topic.ts

@@ -7,6 +7,7 @@ const topic: RouteRecordRaw[] = [
   {
     path: '/topic',
     component: Layout,
+    redirect: '/kun',
     children: [
       {
         name: 'Topic',

src/views/topic/KUNGalgameTopicPage.vue

@@ -50,10 +50,10 @@ onBeforeMount(() => {
 <template>
   <!-- 回复面板组件 -->
   <!-- 总容器 -->
-  <div class="main-wrapper">
+  <div class="root">
     <ReplyPanel />
     <!-- 下面话题详情区的容器 -->
-    <div class="topic-wrapper">
+    <div class="container">
       <!-- 下方可视内容区的容器 -->
       <div class="content-wrapper">
         <KUNGalgameTopicAside class="aside" style="margin-right: 10px" />
@@ -65,14 +65,14 @@ onBeforeMount(() => {
 
 <style lang="scss" scoped>
 /* 页面总容器 */
-.main-wrapper {
+.root {
   min-height: 1500px;
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
 }
 /* 下面话题详情区的容器 */
-.topic-wrapper {
+.container {
   display: flex;
   flex-shrink: 0;
 }

src/views/topic/aside/KUNGalgameTopicAside.vue

@@ -7,21 +7,27 @@
  -->
 <script setup lang="ts">
 import TopicAsideNav from './components/TopicAsideNav.vue'
-import Topic from './components/Topic.vue'
+
+// 相同标签下的其它话题
+import TopicOtherTag from './components/TopicOtherTag.vue'
+
+// 楼主的其它话题
+import TopicMaster from './components/TopicMaster.vue'
+
 // 导入 Footer
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 </script>
 <template>
-  <div class="content-left-part">
+  <div class="aside">
     <TopicAsideNav />
-    <Topic style="margin-bottom: 17px" />
-    <Topic :isMasterTopics="true" />
+    <TopicOtherTag style="margin-bottom: 17px" />
+    <TopicMaster />
     <KUNGalgameFooter />
   </div>
 </template>
 <style scoped>
 /* 左侧内容区 */
-.content-left-part {
+.aside {
   top: 70px;
   position: sticky;
   /* 左侧区域的总高度 */

src/views/topic/aside/components/TopicAsideNav.vue

@@ -11,7 +11,7 @@ interface navItem {
   name: string
 }
 
-// 顶部导航栏的项目
+// 导航栏的项目
 const asideNavItem: navItem[] = [
   { index: 1, icon: 'line-md:arrow-close-up', name: 'top' },
   { index: 2, icon: 'svg-spinners:clock', name: 'timeSort' },

src/views/topic/aside/components/TopicMaster.vue

@@ -0,0 +1,94 @@
+<!-- 
+  这里是楼主的其他话题组件
+ -->
+<script setup lang="ts">
+// TODO: 后端接口
+import { asideTopic } from '@/types/topic/topic'
+</script>
+
+<template>
+  <!-- 楼主的其它话题 -->
+  <div class="master">
+    <ul>
+      <li>
+        {{ $tm('topic.aside.master') }}
+      </li>
+      <li v-for="kun in asideTopic" :key="kun.index">
+        <router-link :to="kun.router">{{ kun.name }}</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 楼主的其它话题 */
+.master {
+  width: 100%;
+  height: 1px;
+  flex-grow: 4;
+
+  /* 隐藏溢出的颜色 */
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: var(--shadow);
+
+  /* 上方区域的配色 */
+  border: 1px solid var(--kungalgame-trans-pink-2);
+  background-color: var(--kungalgame-trans-pink-0);
+
+  ul {
+    height: 100%;
+    /* 整体为一个无序列表，列表为弹性盒 */
+    display: flex;
+    flex-direction: column;
+    & > li {
+      height: 1px;
+      width: 100%;
+      /* 每个项目相对于标题的占比 */
+      flex-grow: 3;
+      display: flex;
+      /* 垂直居中 */
+      align-items: center;
+      /* 设置左侧的 border 方便制作 hover */
+      border-left: 4px solid transparent;
+      /* 内边距盒子 */
+      box-sizing: border-box;
+      &:hover {
+        border-left: 4px solid var(--kungalgame-blue-3);
+        background-color: var(--kungalgame-trans-pink-1);
+        transition: 0.2s;
+      }
+      a {
+        /* 左右两侧的距离 */
+        margin: 0 17px;
+        color: var(--kungalgame-font-color-3);
+        /* 标题显示两行、超出部分隐藏 */
+        overflow: hidden; /* 超出部分隐藏 */
+        text-overflow: ellipsis; /* 显示省略号 */
+        display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
+        -webkit-box-orient: vertical; /* 设置为纵向排列 */
+        -webkit-line-clamp: 2; /* 显示两行文本 */
+        /* 标题的字体属性 */
+        font-size: small;
+        line-height: 1.5em;
+        box-sizing: border-box;
+      }
+      &:nth-child(1) {
+        /* 左侧没有 border，没有 hover */
+        border-left: 0;
+        /* 相对于单个话题标题的比例 */
+        flex-grow: 2;
+        line-height: 40px;
+        font-size: 14px;
+        font-weight: bold;
+        color: var(--kungalgame-font-color-2);
+        background-color: var(--kungalgame-trans-pink-1);
+        /* 与单个话题标题的分割线 */
+        border-bottom: 1px solid var(--kungalgame-trans-pink-2);
+        /* 水平居中 */
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>

src/views/topic/aside/components/TopicOtherTag.vue

@@ -9,15 +9,11 @@ defineProps(['isMasterTopics'])
 </script>
 
 <template>
-  <!-- 楼主的其它话题 -->
-  <div class="topic" :class="$props.isMasterTopics ? 'master' : ''">
+  <!-- 相同标签下的其它话题 -->
+  <div class="other">
     <ul>
       <li>
-        {{
-          $props.isMasterTopics
-            ? $tm('topic.aside.master')
-            : $tm('topic.aside.tags')
-        }}
+        {{ $tm('topic.aside.tags') }}
       </li>
       <li v-for="kun in asideTopic" :key="kun.index">
         <router-link :to="kun.router">{{ kun.name }}</router-link>
@@ -28,7 +24,7 @@ defineProps(['isMasterTopics'])
 
 <style lang="scss" scoped>
 /* 楼主的其它话题 */
-.topic {
+.other {
   width: 100%;
   height: 1px;
   flex-grow: 4;
@@ -59,7 +55,7 @@ defineProps(['isMasterTopics'])
       &:hover {
         border-left: 4px solid var(--kungalgame-pink-3);
         background-color: var(--kungalgame-trans-blue-1);
-        transition: 0.3s;
+        transition: 0.2s;
       }
       a {
         /* 左右两侧的距离 */
@@ -94,21 +90,4 @@ defineProps(['isMasterTopics'])
     }
   }
 }
-.master {
-  border: 1px solid var(--kungalgame-trans-pink-2);
-  background-color: var(--kungalgame-trans-pink-0);
-  ul > li {
-    &:hover {
-      border-left: 4px solid var(--kungalgame-blue-3);
-      background-color: var(--kungalgame-trans-pink-1);
-    }
-    &:nth-child(1) {
-      /* 左侧没有 border，没有 hover */
-      border-left: 0;
-      background-color: var(--kungalgame-trans-pink-1);
-      /* 与单个话题标题的分割线 */
-      border-bottom: 1px solid var(--kungalgame-trans-pink-2);
-    }
-  }
-}
 </style>