pref: message component

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);

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 = () => {
+  // 指定时间后删除消息
+  setTimeout(() => {
+    // 递减消息计数
+    messageCount.value--
+
+    // 消息计数为零时再移除组件
+    if (!messageCount.value) {
       // 从 body 上移除组件
       render(null, document.body)
     }
-
-  setTimeout(() => {
-    handleDestroy()
   }, time)
 
   render(messageNode, document.body)

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);
   }
 }

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',

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);
 }

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 {

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);
 }
 
 /* 话题点赞数等信息 */

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;
 }

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%;

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',
   },

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++