From b4dddd7c11c076d2576db5aee66d37c9e2e58198 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Wed, 4 Oct 2023 17:05:50 +0800
Subject: [PATCH] pref: message component

---
 src/components/alert/KUNGalgameMessage.vue    |  8 +++----
 src/components/alert/Message.ts               | 24 ++++++++++++-------
 .../setting-panel/KUNGalgameSettingPanel.vue  |  2 +-
 src/language/en.ts                            | 14 +++++------
 src/styles/theme/color.scss                   |  6 ++---
 .../article/components/SingleTopic.vue        |  1 +
 .../content/article/components/TopicPart.vue  |  1 +
 .../content/article/components/UserPart.vue   |  1 -
 .../article/components/header/SortTopic.vue   | 23 ++++++++++--------
 .../article/components/header/navSortItem.ts  |  2 +-
 src/views/topic/components/MasterFooter.vue   |  2 --
 11 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/src/components/alert/KUNGalgameMessage.vue b/src/components/alert/KUNGalgameMessage.vue
index 5637ad63..69bcf1d5 100644
--- a/src/components/alert/KUNGalgameMessage.vue
+++ b/src/components/alert/KUNGalgameMessage.vue
@@ -45,8 +45,8 @@ watch(
 </script>
 
 <template>
-  <div class="container">
-    <div class="message" :class="messageClass(type)">
+  <div class="kungalgame-message-container">
+    <div class="kungalgame-message" :class="messageClass(type)">
       <span class="icon" v-if="type === 'warn'"
         ><Icon icon="line-md:alert"
       /></span>
@@ -65,7 +65,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-.container {
+.kungalgame-message-container {
   position: fixed;
   top: 100px;
   margin: 0 auto;
@@ -75,7 +75,7 @@ watch(
   display: flex;
   z-index: 9999;
 }
-.message {
+.kungalgame-message {
   margin: 0 auto;
   font-size: large;
   color: var(--kungalgame-font-color-2);
diff --git a/src/components/alert/Message.ts b/src/components/alert/Message.ts
index 6e2e37e0..9ca143fb 100644
--- a/src/components/alert/Message.ts
+++ b/src/components/alert/Message.ts
@@ -1,4 +1,4 @@
-import { render, h } from 'vue'
+import { render, h, ref } from 'vue'
 import Message from './KUNGalgameMessage.vue'
 
 type MessageType = `warn` | `success` | `error` | `info`
@@ -10,13 +10,18 @@ type MessageType = `warn` | `success` | `error` | `info`
  * @param {number} duration - 消息的展示时间，可选，默认 3s
  */
 
+// 消息的计数，在有新消息展示的时候销毁消息会产生错误后果
+const messageCount = ref(0)
+
 export default (
   messageEN: string,
   messageCN: string,
   type: MessageType,
   duration?: number
 ) => {
-  // 初始化的时候先将上一次创建的内容销毁
+  // 增加消息计数
+  messageCount.value++
+  // 先移除上一个组件
   render(null, document.body)
 
   const messageNode = h(Message, {
@@ -28,13 +33,16 @@ export default (
 
   const time = duration ? duration : 3000
 
-  const handleDestroy = () => {
-    // 从 body 上移除组件
-    render(null, document.body)
-  }
-
+  // 指定时间后删除消息
   setTimeout(() => {
-    handleDestroy()
+    // 递减消息计数
+    messageCount.value--
+
+    // 消息计数为零时再移除组件
+    if (!messageCount.value) {
+      // 从 body 上移除组件
+      render(null, document.body)
+    }
   }, time)
 
   render(messageNode, document.body)
diff --git a/src/components/setting-panel/KUNGalgameSettingPanel.vue b/src/components/setting-panel/KUNGalgameSettingPanel.vue
index 978dfb77..5301643b 100644
--- a/src/components/setting-panel/KUNGalgameSettingPanel.vue
+++ b/src/components/setting-panel/KUNGalgameSettingPanel.vue
@@ -188,7 +188,7 @@ const handelCloseSettingsPanel = () => {
   height: 30px;
   transition: all 0.2s;
   &:hover {
-    background-color: var(--kungalgame-red-3);
+    background-color: var(--kungalgame-red-4);
     color: var(--kungalgame-white);
   }
 }
diff --git a/src/language/en.ts b/src/language/en.ts
index 429df964..6ec14c7b 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -34,13 +34,13 @@ export default {
       all: 'All Topics',
       history: 'Search History',
       clear: 'Clear all history',
-      updated: 'Restore default',
-      time: 'Sort by time',
-      popularity: 'Sort by popularity',
-      views: 'Sort by views',
-      likes: 'Sort by likes',
-      replies: 'Sort by replies',
-      comments: 'Sort by comments',
+      updated: 'Default',
+      time: 'Time',
+      popularity: 'Popularity',
+      views: 'Views',
+      likes: 'Likes',
+      replies: 'Replies',
+      comments: 'Comments',
     },
     asideActive: {
       fold: 'Fold Aside',
diff --git a/src/styles/theme/color.scss b/src/styles/theme/color.scss
index a5973563..472e9941 100644
--- a/src/styles/theme/color.scss
+++ b/src/styles/theme/color.scss
@@ -61,10 +61,8 @@ html {
 
   --shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05),
     0 2px 8px hsla(0, 0%, 0%, 0.05);
-  --kungalgame-shadow-0: 5px 5px 10px var(--kungalgame-trans-blue-1),
-    -5px -5px 10px var(--kungalgame-trans-blue-1);
-  --kungalgame-shadow-1: 2px 2px 4px var(--kungalgame-blue-1),
-    -2px -2px 4px var(--kungalgame-blue-1);
+  --kungalgame-shadow-0: 0px 0px 17px 5px var(--kungalgame-blue-1);
+  --kungalgame-shadow-1: 0px 0px 7px 2px var(--kungalgame-blue-1);
   --kungalgame-shadow-2: inset 1px 1px 2px var(--kungalgame-blue-1),
     inset -1px -1px 2px var(--kungalgame-blue-1);
 }
diff --git a/src/views/Home/content/article/components/SingleTopic.vue b/src/views/Home/content/article/components/SingleTopic.vue
index a5f2849d..1ef2d5bf 100644
--- a/src/views/Home/content/article/components/SingleTopic.vue
+++ b/src/views/Home/content/article/components/SingleTopic.vue
@@ -32,6 +32,7 @@ const props = defineProps<{
   flex-shrink: 0;
   &:hover {
     background-color: var(--kungalgame-white);
+    box-shadow: var(--kungalgame-shadow-1);
     transition: 0.2s;
   }
   &:last-child {
diff --git a/src/views/Home/content/article/components/TopicPart.vue b/src/views/Home/content/article/components/TopicPart.vue
index 1ce24d3f..db8f3435 100644
--- a/src/views/Home/content/article/components/TopicPart.vue
+++ b/src/views/Home/content/article/components/TopicPart.vue
@@ -114,6 +114,7 @@ const getRepliesCount = computed(() => {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: var(--kungalgame-blue-5);
 }
 
 /* 话题点赞数等信息 */
diff --git a/src/views/Home/content/article/components/UserPart.vue b/src/views/Home/content/article/components/UserPart.vue
index c5553bed..9ff668fe 100644
--- a/src/views/Home/content/article/components/UserPart.vue
+++ b/src/views/Home/content/article/components/UserPart.vue
@@ -64,7 +64,6 @@ defineProps<{
 
 /* 发帖人昵称位置设置 */
 .name {
-  border-top: 1px solid var(--kungalgame-blue-1);
   flex-grow: 1;
   display: flex;
 }
diff --git a/src/views/Home/content/article/components/header/SortTopic.vue b/src/views/Home/content/article/components/header/SortTopic.vue
index 3a8bfe8a..f10e5d00 100644
--- a/src/views/Home/content/article/components/header/SortTopic.vue
+++ b/src/views/Home/content/article/components/header/SortTopic.vue
@@ -32,7 +32,7 @@ const orderDescending = () => {
 }
 
 const iconMap: Record<string, string> = {
-  updated: 'bi:sort-down',
+  updated: 'line-md:arrows-vertical',
   time: 'eos-icons:hourglass',
   popularity: 'bi:fire',
   views: 'ic:outline-remove-red-eye',
@@ -56,13 +56,13 @@ const isSortField = () => {
     <div class="sort-container">
       <div class="sort-submenu">
         <div
+          class="sort-item"
           v-for="kun in navSortItem"
           :key="kun.index"
           @click="handleSortByField(kun.sortField)"
         >
-          <Icon class="icon-item" :icon="kun.icon" />{{
-            $tm(`mainPage.header.${kun.name}`)
-          }}
+          <span><Icon class="icon-item" :icon="kun.icon" /></span>
+          <span>{{ $tm(`mainPage.header.${kun.name}`) }}</span>
         </div>
         <div class="sort-order">
           <span @click="orderAscending">
@@ -123,22 +123,23 @@ const isSortField = () => {
 .container:hover .sort-submenu {
   display: flex;
 }
-.sort-submenu > div {
+.sort-item {
   padding: 10px 0;
   background-color: var(--kungalgame-trans-white-2);
   font-size: 14px;
   color: var(--kungalgame-font-color-3);
   text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+  place-items: center;
 }
 /* 单个二级菜单 hover */
-.sort-submenu > div:hover {
+.sort-item:hover {
   background-color: var(--kungalgame-trans-blue-1);
   backdrop-filter: blur(5px);
 }
-.sort-submenu > div:active {
+.sort-item:active {
   background-color: var(--kungalgame-trans-blue-2);
 }
 .icon-item {
@@ -150,8 +151,10 @@ const isSortField = () => {
 /* 按照升序还是降序排列 */
 .sort-order {
   width: 100%;
+  padding: 10px 0;
   display: flex;
   cursor: default;
+  background-color: var(--kungalgame-trans-white-2);
   span {
     color: var(--kungalgame-blue-4);
     width: 100%;
diff --git a/src/views/Home/content/article/components/header/navSortItem.ts b/src/views/Home/content/article/components/header/navSortItem.ts
index c00a225e..a5ea1cd7 100644
--- a/src/views/Home/content/article/components/header/navSortItem.ts
+++ b/src/views/Home/content/article/components/header/navSortItem.ts
@@ -8,7 +8,7 @@ interface Sort {
 export const navSortItem: Sort[] = [
   {
     index: 1,
-    icon: 'bi:sort-down',
+    icon: 'line-md:arrows-vertical',
     name: 'updated',
     sortField: 'updated',
   },
diff --git a/src/views/topic/components/MasterFooter.vue b/src/views/topic/components/MasterFooter.vue
index 63640c17..5142f4da 100644
--- a/src/views/topic/components/MasterFooter.vue
+++ b/src/views/topic/components/MasterFooter.vue
@@ -148,8 +148,6 @@ const handleClickUpvote = async () => {
       props.master.uid
     )
 
-    console.log(res.code)
-
     if (res.code === 200) {
       // 更新推数
       actions.upvotes.length++