optimize topics ui and logic (75%)

web/src/views/Post.vue

@@ -14,17 +14,13 @@
                 </n-spin>
             </n-list-item>
             <div class="comment-opts-wrap" v-if="post.id > 0">
-            <n-space justify="space-between">
-                <div class="comment-title-item">
-                    <span comment-title-item>评论</span>
-                </div>
-                <div class="comment-opt-item ">
-                    <n-tabs type="bar" size="small" animated @update:value="commentTab">
-                        <n-tab-pane name="default" tab="默认" />
-                        <n-tab-pane name="newest" tab="最新" />
-                    </n-tabs>
-                </div>
-            </n-space>
+                <n-tabs type="bar" justify-content="end" size="small" animated @update:value="commentTab">
+                    <template #prefix>
+                        <span class="comment-title-item">评论</span>
+                    </template>
+                    <n-tab-pane name="default" tab="默认" />
+                    <n-tab-pane name="newest" tab="最新" />
+                </n-tabs>
             </div>
             <n-list-item v-if="post.id > 0">
                 <compose-comment
@@ -131,18 +127,12 @@ watch(postId, () => {
 .detail-wrap {
     min-height: 100px;
 }
-
 .comment-opts-wrap {
-    margin-top: 6px;
-    .comment-opt-item {
-        display: flex;
-        padding-left: 16px;
-        padding-right: 16px;
-        align-items: center;
-        opacity: 0.75;
-    }
+    padding-top: 6px;
+    padding-left: 16px;
+    padding-right: 16px;
+    opacity: 0.75;
     .comment-title-item {
-        padding-left: 16px;
         padding-top: 4px;
         font-size: 16px;
         text-align: center;

web/src/views/Topic.vue

@@ -8,13 +8,18 @@
                 <n-tab-pane name="new" tab="最新" />
                 <n-tab-pane v-if="store.state.userLogined"
                 name="follow" tab="关注" />
+                <template v-if="store.state.userLogined" #suffix>
+                    <n-tag v-model:checked="tagsChecked" checkable>
+                        {{tagsEditText}}
+                    </n-tag>
+                </template>
             </n-tabs>
             <n-spin :show="loading">
                 <n-space>
                     <tag-item
                         v-for="tag in tags"
                         :tag="tag"
-                        :showAction="store.state.userLogined"
+                        :showAction="store.state.userLogined && tagsChecked"
                     >
                     </tag-item>
                 </n-space>
@@ -24,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted} from 'vue';
+import { ref, onMounted, computed} from 'vue';
 import { getTags } from '@/api/post';
 import { useStore } from 'vuex';
 
@@ -32,7 +37,20 @@ const store = useStore();
 const tags = ref<Item.TagProps[]>([]);
 const tagType = ref<"hot" | "new" | "follow">('hot');
 const loading = ref(false);
+const tagsChecked = ref(false)
 
+const tagsEditText = computed({  
+    get: () => {  
+        let text = "编辑";
+        if (tagsChecked.value) {
+            text = "保存";
+        }
+        return text;
+    },
+    set: (newVal) => {
+        // do nothing
+    },
+});
 const loadTags = () => {
     loading.value = true;
     getTags({