feat: comment i18n

src/language/en.ts

@@ -95,8 +95,17 @@ export default {
       tags: 'Topics Under the Same Tags',
       master: 'Other Topics of The Master',
     },
+    content: {
+      status: 'Topic status',
+      reply: 'Reply',
+      comments: 'Comments',
+      comment: 'Commented to',
+      publish: 'Publish Comment',
+      close: 'Close',
+      hint: 'Please enter your comment, maximum 1007 characters.',
+    },
     panel: {
-      to: 'Reply To',
+      to: 'Replied To',
       master: 'ご主人',
       reply: 'zako~♡',
     },

src/language/zh.ts

@@ -95,6 +95,15 @@ export default {
       tags: '相同标签下的其它话题',
       master: '楼主的其它话题',
     },
+    content: {
+      status: '话题状态',
+      reply: '回复',
+      comments: '评论',
+      comment: '评论',
+      publish: '发布评论',
+      close: '关闭',
+      hint: '请输入您的评论，最大字数为1007',
+    },
     panel: {
       to: '回复给',
       master: '狗修金',

src/views/topic/components/Master.vue

@@ -42,7 +42,7 @@ const {
 // 话题的状态
 const loliStatus = computed(() => {
   if (status === 0) {
-    return 'active'
+    return 'normal'
   } else if (status === 1) {
     return 'banned'
   } else if (status === 2) {
@@ -205,7 +205,8 @@ const loliStatus = computed(() => {
   }
 }
 
-.active {
+/* 话题的 status */
+.normal {
   background-color: var(--kungalgame-green-4);
 }
 
@@ -214,7 +215,14 @@ const loliStatus = computed(() => {
 }
 
 .featured {
-  background-color: var(--kungalgame-red-4);
+  background-color: var(--kungalgame-pink-3);
+}
+
+/* 话题被点击跳转 */
+/* 滚动到指定话题激活后的样式 */
+.active .content-container {
+  border: 1px solid var(--kungalgame-red-3);
+  background-color: var(--kungalgame-trans-red-1);
 }
 
 @media (max-width: 1000px) {

src/views/topic/components/TopicFooter.vue

@@ -86,7 +86,7 @@ const handelReply = async () => {
             <span></span>
             <span></span>
             <span></span>
-            回复
+            {{ $tm('topic.content.reply') }}
           </div>
         </li>
         <!-- 分享 -->

src/views/topic/components/comment/CommentPanel.vue

@@ -113,19 +113,23 @@ const handleCloseCommentPanel = () => {
     <div class="top">
       <div class="title">
         <span>{{ name }}</span>
-        评论 @
+        <span>{{ $tm('topic.content.comment') }}</span>
         <span>{{ to_user.name }}</span>
       </div>
       <div class="confirm">
-        <button @click="handlePublishComment">发布评论</button>
+        <button @click="handlePublishComment">
-        <button @click="handleCloseCommentPanel">关闭</button>
+          {{ $tm('topic.content.publish') }}
+        </button>
+        <button @click="handleCloseCommentPanel">
+          {{ $tm('topic.content.close') }}
+        </button>
       </div>
     </div>
     <!-- textarea 容器 -->
     <div class="container">
       <textarea
         name="comment"
-        placeholder="请输入您的评论，最大字数为1007"
+        :placeholder="`${$tm('topic.content.hint')}`"
         rows="5"
         v-model="commentValue"
         @input="handleInputComment"
@@ -148,21 +152,24 @@ const handleCloseCommentPanel = () => {
 
 .top {
   display: flex;
+  flex-wrap: wrap;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   color: var(--kungalgame-font-color-3);
-  margin-bottom: 10px;
+  padding: 10px 0;
 }
 
 .title {
+  display: flex;
+  flex-wrap: wrap;
   span {
-    &:nth-child(1) {
+    padding-bottom: 5px;
-      margin-right: 10px;
-    }
     &:nth-child(2) {
+      margin: 0 5px;
+    }
+    &:nth-child(3) {
       cursor: pointer;
-      margin-left: 10px;
       color: var(--kungalgame-blue-4);
       &:hover {
         text-decoration: underline;
@@ -188,7 +195,7 @@ const handleCloseCommentPanel = () => {
       color: var(--kungalgame-white);
     }
     &:nth-child(2) {
-      margin-left: 10px;
+      margin-left: 5px;
     }
   }
 }

src/views/topic/components/comment/Comments.vue

@@ -73,7 +73,7 @@ const handleClickReply = (uid: number, name: string) => {
     <div class="container" v-if="commentsData?.length">
       <!-- 评论的标题 -->
       <div class="title">
-        <span>评论</span>
+        <span>{{ $tm('topic.content.comments') }}</span>
       </div>
       <div
         class="comment"
@@ -88,7 +88,8 @@ const handleClickReply = (uid: number, name: string) => {
           <div class="describe">
             <!-- 顶部左侧名字 -->
             <div class="name">
-              {{ `${comment.c_user.name}评论 @` }}
+              {{ `${comment.c_user.name} ${$tm('topic.content.comment')}` }}
+              <!-- 跳转到用户主页 TODO: -->
               <a href="#">{{ comment.to_user.name }}</a>
             </div>
             <!-- 顶部右侧点赞、踩 -->
@@ -160,6 +161,7 @@ const handleClickReply = (uid: number, name: string) => {
 /* 单个评论内容区顶部 */
 .describe {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   margin-bottom: 5px;
 }

src/views/topic/components/reply/ReplyPanelBtn.vue

@@ -74,15 +74,14 @@ const handleShowAdvance = () => {
 <template>
   <!-- 按钮的容器 -->
   <div class="btn-container">
+    <!-- 高级选项按钮 -->
+    <button class="advance-btn" @click="handleShowAdvance">高级选项</button>
     <!-- 确认按钮 -->
 
     <button class="confirm-btn" @click="handlePublish">确认发布</button>
 
     <!-- 保存按钮 -->
     <button class="save-btn" @click="handleSave">保存草稿</button>
-
-    <!-- 高级选项按钮 -->
-    <button class="advance-btn" @click="handleShowAdvance">高级选项</button>
   </div>
 </template>
 
@@ -138,12 +137,12 @@ const handleShowAdvance = () => {
 }
 /* 高级选项按钮的样式 */
 .advance-btn {
-  color: var(--kungalgame-red-5);
+  color: var(--kungalgame-purple-4);
   background-color: var(--kungalgame-trans-white-9);
-  border: 1px solid var(--kungalgame-red-5);
+  border: 1px solid var(--kungalgame-purple-4);
 }
 .advance-btn:hover {
-  background-color: var(--kungalgame-red-5);
+  background-color: var(--kungalgame-purple-4);
   transition: 0.1s;
 }
 .advance-btn:active {