From ab7e6415904086a3e8f04b42fcbfd903610e88cb Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Wed, 24 May 2023 19:16:38 +0800
Subject: [PATCH] fix i18n, aside bar style

---
 src/api/index.ts                              |  11 ++
 src/api/user/types/user.ts                    |  13 ++
 src/components/KUNGalgameTopBar.vue           |   5 +-
 src/language/i18n.ts                          |   2 +-
 .../Home/content/aside/MainPageAside.vue      | 118 ++++--------------
 .../Home/content/aside/components/Aside.vue   |  11 ++
 .../content/aside/components/AsideActive.vue  | 117 +++++++++++++++++
 src/views/contacts/Contacts.vue               |   7 +-
 8 files changed, 183 insertions(+), 101 deletions(-)
 create mode 100644 src/api/index.ts
 create mode 100644 src/views/Home/content/aside/components/Aside.vue
 create mode 100644 src/views/Home/content/aside/components/AsideActive.vue

diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 00000000..e3934846
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,11 @@
+import axios from 'axios'
+
+const instance = axios.create({
+  baseURL: 'https://api.example.com', // 设置请求的基础URL
+  timeout: 5000, // 设置请求超时时间
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+export default instance
diff --git a/src/api/user/types/user.ts b/src/api/user/types/user.ts
index e69de29b..edab99ae 100644
--- a/src/api/user/types/user.ts
+++ b/src/api/user/types/user.ts
@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+export function getUser(id: string) {
+  return axios.get(`/users/${id}`)
+}
+
+export function updateUser(id: string, data: string) {
+  return axios.put(`/users/${id}`, data)
+}
+
+export function deleteUser(id: string) {
+  return axios.delete(`/users/${id}`)
+}
diff --git a/src/components/KUNGalgameTopBar.vue b/src/components/KUNGalgameTopBar.vue
index db424e72..df803f99 100644
--- a/src/components/KUNGalgameTopBar.vue
+++ b/src/components/KUNGalgameTopBar.vue
@@ -4,7 +4,7 @@ import { defineAsyncComponent } from 'vue'
 // 导入图标
 import { Icon } from '@iconify/vue'
 // 导入必要 vue 函数
-import { onBeforeMount, ref } from 'vue'
+import { onBeforeMount } from 'vue'
 // 导入 css 动画
 import 'animate.css'
 // 导入路由
@@ -64,9 +64,6 @@ if (isTopicPage) {
 let navItemNum = topBarItem.length
 const navItemNumString = navItemNum + '00px'
 
-// 用户点击设置按钮时的操作
-const isShowPanel = ref(true)
-
 // 用户点击头像时的操作
 const handleClickAvatar = () => {
   // isShowInfo.value = !isShowInfo.value
diff --git a/src/language/i18n.ts b/src/language/i18n.ts
index 69d52cb1..3916896b 100644
--- a/src/language/i18n.ts
+++ b/src/language/i18n.ts
@@ -4,7 +4,7 @@ import zh from './zh'
 import en from './en'
 
 const i18n = createI18n({
-  locale: localStorage.getItem('locale') || 'en',
+  locale: localStorage.getItem('KUNGalgame-locale') || 'en',
   // 支持 Vue3 composition API
   legacy: false,
   // 全局注册 ts 方法
diff --git a/src/views/Home/content/aside/MainPageAside.vue b/src/views/Home/content/aside/MainPageAside.vue
index 9712e9c6..76ccdd1e 100644
--- a/src/views/Home/content/aside/MainPageAside.vue
+++ b/src/views/Home/content/aside/MainPageAside.vue
@@ -1,20 +1,13 @@
 <script setup lang="ts">
-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'
-import { is } from 'dom7'
+import AsideActive from './components/AsideActive.vue'
+// 导入 animate css
+import 'animate.css'
+import Aside from './components/Aside.vue'
 
-// 单个 item 样式
-const itemStyle = {}
-
-const handleClick = () => {
-  router.push('/rank')
-}
 // 用户点击折叠左侧区域
 // localStorage.setItem('KUNGalgameMainPageAsideBar', 'true')
 // const asideBarStatus =
@@ -47,27 +40,21 @@ const handleFold = () => {
         style="font-size: 17px"
         v-show="!isActive"
       />
-      <span v-show="isActive">折叠左侧区域</span>
+      <span
+        v-show="isActive"
+        class="animate__animated animate__rotateInDownRight"
+        >折叠左侧区域</span
+      >
     </div>
-    <!-- 侧边栏功能区 -->
-    <div class="item-box" v-show="isActive">
-      <!-- 发布新文章 -->
-      <div class="new-article">
-        <!-- 发布新文章的按钮 -->
-        <button class="btn-new-article">发布帖子</button>
+    <Transition
+      enter-active-class="animate__animated animate__fadeIn animate__fast"
+      leave-active-class="animate__animated animate__bounceOutLeft"
+    >
+      <div class="item" v-show="isActive">
+        <AsideActive :isActive="isActive" />
+        <!-- <Aside /> -->
       </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="isActive" />
-    <NewTopic v-show="isActive" />
+    </Transition>
   </div>
 </template>
 
@@ -84,7 +71,10 @@ const handleFold = () => {
   display: flex;
   /* 方向为竖向 */
   flex-direction: column;
-  transition: 0.2s;
+  transition: 0.5s;
+  span {
+    white-space: nowrap;
+  }
 }
 /* 侧边栏交互 */
 .nav-aside {
@@ -99,71 +89,9 @@ const handleFold = () => {
   color: @kungalgame-font-color-3;
   cursor: pointer;
 }
-/* 侧边栏功能区 */
-.item-box {
-  width: 100%;
-  height: 1px;
-  /* 功能区相对于侧边栏的占比 */
-  flex-grow: 6;
-  /* 设置六个功能（模式、排行、背景等）分布的弹性盒 */
+.item {
+  height: 100%;
   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/components/Aside.vue b/src/views/Home/content/aside/components/Aside.vue
new file mode 100644
index 00000000..174a4756
--- /dev/null
+++ b/src/views/Home/content/aside/components/Aside.vue
@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+
+</template>
+
+<style lang='less' scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Home/content/aside/components/AsideActive.vue b/src/views/Home/content/aside/components/AsideActive.vue
new file mode 100644
index 00000000..a1b34fb2
--- /dev/null
+++ b/src/views/Home/content/aside/components/AsideActive.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import NewTopic from '../topic/NewTopic.vue'
+import HotTopic from '../topic/HotTopic.vue'
+import { toRefs } from 'vue'
+
+// 接受父组件的传值
+let props = defineProps(['isActive'])
+const isActive = toRefs(props.isActive)
+
+// 单个项目的接口
+interface aside {
+  index: number
+  name: string
+  router: string
+}
+
+// 顶部导航栏的项目
+const asideItem: aside[] = [
+  { index: 1, name: '技术交流', router: '/pool' },
+  { index: 2, name: '收支公示', router: '/balance' },
+  { index: 3, name: '排行榜', router: '/rank' },
+  { index: 4, name: '执行条例', router: '/regulations' },
+  { index: 5, name: '加入我们', router: '/contacts' },
+  { index: 6, name: '帖子池', router: '/pool' },
+]
+</script>
+
+<template>
+  <!-- 侧边栏功能区 -->
+  <div class="item-box" v-show="isActive">
+    <!-- 发布新文章 -->
+    <div class="new-article">
+      <!-- 发布新文章的按钮 -->
+      <button class="btn-new-article">发布帖子</button>
+    </div>
+    <!-- 功能盒子容器 -->
+    <div class="item-box-container">
+      <!-- 顶部单个板块 -->
+      <div v-for="kun in asideItem" :key="kun.index">
+        <router-link :to="{ path: kun.router }">{{ kun.name }}</router-link>
+      </div>
+    </div>
+  </div>
+  <HotTopic v-show="isActive" />
+  <NewTopic v-show="isActive" />
+</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;
+}
+/* 发布按钮 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 布局 */
+  width: 100%;
+  height: 80px;
+  display: grid;
+  grid-template-columns: repeat(3, 2fr);
+  grid-template-rows: repeat(2, 1fr);
+  font-size: 14px;
+  /* 字体颜色 */
+  color: @kungalgame-font-color-3;
+  /* 相对定位 */
+  position: relative;
+  /* 六个功能之间的距离 */
+  & > div {
+    /* 设置六个功能（模式、排行、背景等）之间的间距 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    a {
+      color: @kungalgame-font-color-2;
+    }
+    /* 设置六个功能（模式、排行、背景等）的 hover */
+    &:hover {
+      color: @kungalgame-font-color-3;
+      background-color: @kungalgame-blue-0;
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/contacts/Contacts.vue b/src/views/contacts/Contacts.vue
index 6145819f..81917e87 100644
--- a/src/views/contacts/Contacts.vue
+++ b/src/views/contacts/Contacts.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import router from '@/router'
+
+const handleClick = () => {
+  router.push('/')
+}
 </script>
 
 <template>
@@ -28,7 +33,7 @@ import { Icon } from '@iconify/vue'
         </div>
       </div>
       <!-- 返回主页 -->
-      <div class="return">
+      <div class="return" @click="handleClick">
         <!-- 这里 Vue 不让用 < 这个符号，换成图标字体 -->
         <span><Icon icon="line-md:arrow-small-left" />返回主页</span>
       </div>