mcwl-pc/app/pages/planet-detail/index.vue

<script setup lang="ts">
import request from '@/utils/request'
import { FolderPlus, ImagePlus, MessageCircle, Plus, Star, ThumbsUp } from 'lucide-vue-next'
import { NConfigProvider, NImage, NMessageProvider } from 'naive-ui'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const userStore = useUserStore()
const message = useMessage()
definePageMeta({
  layout: 'planet',
})
const route = useRoute()
const isShowInputLabel = ref(false)
const typeList = ref([
  {
    label: '最新',
    value: null,
  },
  {
    label: '只看星主',
    value: 0,
  },
  {
    label: '精选',
    value: 1,
  },
  {
    label: '问答',
    value: 999,
  },
])

const showPublishModal = ref(false)

const publishListParams = ref({
  communityId: route.query.communityId,
  tenantId: route.query.tenantId,
  publishId: route.query.id,
  type: null,
  pageNum: 1,
  pageSize: 10,
})

const questionParams = ref({
  communityId: route.query.communityId,
  tenantId: route.query.tenantId,
  pageNum: 1,
  pageSize: 10,
})
// const questionList = ref([])
const isShow = ref('publish')
async function handleTypeChange(type: number | null) {
  publishListParams.value.type = type
  questionParams.value.pageNum = 1
  if (type === 999) { // 问答
    isShow.value = 'question'
  }
  else {
    publishListParams.value.pageNum = 1
    isShow.value = 'publish'
  }
}
const PublishComponentKey = ref(0)
function closePublishModal() {
  showPublishModal.value = false
  nextTick(() => {
    PublishComponentKey.value++
  })
}

// 标签
// 获取标签列表
const tagList = ref([])
async function getTagList() {
  const params = {
    communityId: questionParams.value.communityId,
    tenantId: questionParams.value.tenantId,
  }
  const res = await request.post('/publishLabel/list', params)
  tagList.value = res.data
}
// 添加标签
const inputLabel = ref('')
async function handleAddLabel() {
  const params = {
    communityId: questionParams.value.communityId,
    tenantId: questionParams.value.tenantId,
    labelName: inputLabel.value,
  }
  const res = await request.post('/publishLabel/add', params)
  if (res.code === 200) {
    message.success('添加成功')
    isShowInputLabel.value = false
    inputLabel.value = ''
    getTagList()
  }
}
// 点击标签
function handleTagClick(tag: string) {
  if (publishListParams.value.type === 999)
    return
  publishListParams.value.labelName = tag
  publishListParams.value.pageNum = 1
  isShow.value = 'publish'
}

onMounted(() => {
  const state = history.state
  if (state && state.communityId && state.tenantId) {
    publishListParams.value = {
      communityId: state.communityId,
      tenantId: state.tenantId,
      publishId: state.publishId,
      type: null,
      pageNum: 1,
      pageSize: 10,
    }

    questionParams.value = {
      communityId: state.communityId,
      tenantId: state.tenantId,
      publishId: state.publishId,
      pageNum: 1,
      pageSize: 10,
    }
  }
  else {
    // 如果没有 state，回退到 URL 参数
    publishListParams.value = {
      communityId: route.query.communityId as string,
      tenantId: route.query.tenantId as string,
      publishId: route.query.publishId as string,
      type: null,
      pageNum: 1,
      pageSize: 10,
    }
  }
  getTagList()
})
</script>

<template>
  <div class="min-h-screen bg-[#F7F8FA] px-10 py-4 flex gap-4">
    <div class="flex-1">
      <div class="rounded-lg bg-white">
        <div class="flex flex-col">
          <div class="p-4 pb-0">
            <textarea
              class="w-full min-h-[100px] bg-[#F7F8FA] rounded-lg p-4 resize-none outline-none cursor-pointer"
              placeholder="此刻的想法..."
              @click="showPublishModal = true"
            />
          </div>

          <div class="flex items-center justify-between p-2 pt-0">
            <div class="flex items-center">
              <button class="p-2 hover:bg-gray-100 rounded text-gray-500" @click="showPublishModal = true">
                <ImagePlus class="w-5 h-5" />
              </button>
              <button class="p-2 hover:bg-gray-100 rounded text-gray-500" @click="showPublishModal = true">
                <FolderPlus class="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="rounded-lg py-4">
        <div class="flex items-center">
          <div
            v-for="item in typeList"
            :key="item.value"
            class="flex items-center px-4 py-1 rounded cursor-pointer mr-2"
            :style="{
              backgroundColor: publishListParams.type === item.value ? '#000000' : '#ffffff',
              color: publishListParams.type === item.value ? '#ffffff' : '#878d95',
            }"
            @click="handleTypeChange(item.value)"
          >
            {{ item.label }}
          </div>

          <div
            v-for="tag in tagList" :key="tag.id" class="flex items-center px-4 py-1 rounded cursor-pointer mr-2" :style="{
              backgroundColor: publishListParams.type === tag.id ? '#000000' : '#ffffff',
              color: publishListParams.type === tag.id ? '#ffffff' : '#878d95',
            }" @click="handleTagClick(tag)"
          >
            {{ tag }}
          </div>

          <div v-if="tagList.length < 3 && questionParams.tenantId === userStore.userInfo.userId" class="flex items-center justify-center bg-white w-10 h-8 cursor-pointer" title="添加标签" @click="isShowInputLabel = true">
            <Plus class="w-4 h-4" />
          </div>
          <n-input-group v-if="isShowInputLabel" class="ml-4 w-64">
            <n-input v-model:value="inputLabel" :style="{ width: '200px' }" placeholder="请输入标签名" />
            <n-button type="primary" @click="handleAddLabel">
              确定
            </n-button>
          </n-input-group>
        </div>
      </div>
      <div v-if="isShow === 'publish'">
        <NConfigProvider>
          <NMessageProvider>
            <PlanetComment
              :key="PublishComponentKey"
              :publish-list-params="publishListParams"
            />
          </NMessageProvider>
        </NConfigProvider>
      </div>
      <div v-if="isShow === 'question'">
        <NConfigProvider>
          <NMessageProvider>
            <PlanetQuestionComment
              :key="PublishComponentKey"
              :publish-list-params="questionParams"
            />
          </NMessageProvider>
        </NConfigProvider>
      </div>
    </div>
    <div class="w-[300px]">
      <PlanetBaseInfo v-if="publishListParams.communityId && publishListParams.tenantId" :community-id="publishListParams.communityId" :tenant-id="publishListParams.tenantId" />
    </div>
    <n-modal
      v-model:show="showPublishModal"
      :style="{ width: '640px' }"
      preset="card"
      :mask-closable="false"
      class="rounded-lg"
    >
      <PublishContent
        v-if="publishListParams.communityId && publishListParams.tenantId"
        :community-id="publishListParams.communityId"
        :tenant-id="publishListParams.tenantId"
        @success="closePublishModal"
      />
    </n-modal>
  </div>
</template>

<style scoped>
</style>