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

<script setup lang="ts">
import request from '@/utils/request'
import { FolderPlus, ImagePlus, MessageCircle, Star, ThumbsUp } from 'lucide-vue-next'

import { NConfigProvider, NImage, NMessageProvider } from 'naive-ui'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

definePageMeta({
  layout: 'planet',
})
const route = useRoute()
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'
    // try {
    //   const res = await request.post('/question/list', questionParams.value)
    //   if (res.code === 200) {
    //     questionList.value = res.rows
    //   }
    // }
    // catch (error) {
    //   console.error(error)
    // }
  }
  else {
    publishListParams.value.pageNum = 1
    isShow.value = 'publish'
  }
}
const PublishComponentKey = ref(0)
function closePublishModal() {
  showPublishModal.value = false
  nextTick(() => {
    PublishComponentKey.value++
  })
}

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

    questionParams.value = {
      communityId: state.communityId,
      tenantId: state.tenantId,
      pageNum: 1,
      pageSize: 10,
    }
  }
  else {
    // 如果没有 state，回退到 URL 参数
    publishListParams.value = {
      communityId: route.query.communityId as string,
      tenantId: route.query.tenantId as string,
      publishId: route.query.id as string,
      type: null,
      pageNum: 1,
      pageSize: 10,
    }
  }
})
</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>
      </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>