optimize topics ui and logic (75%)

pull/273/head
Michael Li 2 years ago
parent 7e85a9a5a1
commit f4d64c0774
No known key found for this signature in database

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

@ -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({

Loading…
Cancel
Save