jczxw-pc/app/components/ModuleEntryDetailPage.vue

<template>
  <div class="module-detail-page">
    <PortalHeader :active-path="config.baseRoute" />

    <main class="container module-detail-main">
      <div class="breadcrumb-bar">
        <NuxtLink to="/">首页</NuxtLink>
        <span>/</span>
        <NuxtLink :to="config.baseRoute">{{ config.title }}</NuxtLink>
        <span>/</span>
        <span>{{ entry.title || `${config.title}详情` }}</span>
      </div>

      <div v-if="loading" class="state-wrap">
        <a-skeleton active :paragraph="{ rows: 10 }" />
      </div>

      <div v-else-if="!entry.entryId" class="state-wrap">
        <a-result status="404" title="内容不存在" sub-title="您查找的内容不存在或已下线">
          <template #extra>
            <a-button type="primary" @click="navigateTo(config.baseRoute)">返回列表</a-button>
          </template>
        </a-result>
      </div>

      <article v-else class="module-detail-card">
        <div class="detail-head">
          <div>
            <h1>{{ entry.title }}</h1>
            <p>{{ entry.publishTime || entry.createTime || '' }}</p>
          </div>
        </div>

        <div v-if="config.showImage" class="detail-image">
          <img :src="resolveSiteAssetUrl(entry.image) || fallbackImage" :alt="entry.title" />
        </div>

        <div v-if="entry.summary" class="detail-summary">
          <strong>摘要</strong>
          <p>{{ entry.summary }}</p>
        </div>

        <div class="detail-content" v-html="formattedContent" />

        <div v-if="entry.attachmentPath" class="detail-attachment">
          <a :href="resolveSiteAssetUrl(entry.attachmentPath)" target="_blank">
            {{ entry.attachmentName || '下载附件' }}
          </a>
        </div>
      </article>
    </main>

    <footer class="site-footer">
      <PortalFooter />
    </footer>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { message } from 'ant-design-vue'
import { getSiteModuleEntry, resolveSiteAssetUrl, type SiteModuleEntry } from '@/api/site'

type ModuleDetailConfig = {
  title: string
  baseRoute: string
  showImage?: boolean
}

const props = defineProps<{
  config: ModuleDetailConfig
}>()

const route = useRoute()
const entryId = computed(() => route.params.id as string)
const fallbackImage = '/images/%E6%97%A0%E5%9B%BE%E7%89%87.png'

const loading = ref(true)
const entry = ref<Partial<SiteModuleEntry>>({})

const formattedContent = computed(() => {
  const content = entry.value.content || ''
  if (!content) {
    return '<p>暂无正文内容</p>'
  }
  if (/<[a-z][\s\S]*>/i.test(content)) {
    return content
  }
  return content
    .split(/\n+/)
    .map((item) => item.trim())
    .filter(Boolean)
    .map((item) => `<p>${item}</p>`)
    .join('')
})

useHead({
  title: computed(() => `${entry.value.title || `${props.config.title}详情`} - 广西决策咨询网`),
})

async function loadEntry() {
  loading.value = true
  try {
    entry.value = await getSiteModuleEntry(entryId.value)
  } catch (error) {
    entry.value = {}
    if (!(error instanceof Error && /404/.test(error.message))) {
      message.error(error instanceof Error ? error.message : '加载失败')
    }
  } finally {
    loading.value = false
  }
}

watch(entryId, loadEntry)
onMounted(loadEntry)
</script>

<style scoped>
.module-detail-page {
  min-height: 100vh;
  background: #f5f7fa;
}

.container {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.module-detail-main {
  padding: 28px 0 48px;
}

.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: #7d8a98;
  font-size: 14px;
}

.breadcrumb-bar a {
  color: #4a6fa1;
}

.module-detail-card {
  padding: 32px;
  background: #fff;
  border: 1px solid #e5ebf2;
}

.detail-head h1 {
  margin: 0 0 10px;
  color: #1f2d3d;
  font-size: 34px;
}

.detail-head p {
  margin: 0;
  color: #7d8a98;
  font-size: 14px;
}

.detail-image {
  margin-top: 24px;
}

.detail-image img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #f7f9fb;
  border-radius: 4px;
}

.detail-summary {
  margin-top: 24px;
}

.detail-summary strong {
  display: inline-block;
  margin-bottom: 10px;
  color: #1f2d3d;
  font-size: 16px;
}

.detail-summary p,
.detail-content {
  color: #495463;
  font-size: 15px;
  line-height: 2;
}

.detail-content :deep(p) {
  margin: 0 0 14px;
}

.detail-attachment {
  margin-top: 28px;
}

.detail-attachment a {
  color: #1f4fa3;
}

.state-wrap {
  padding: 40px 0;
}

.site-footer {
  margin-top: 24px;
}

.footer-nav {
  background: #1f4fa3;
}

.footer-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  min-height: 50px;
}

.footer-nav-inner a {
  color: #fff;
  font-size: 14px;
}
</style>