hulai-website/pages/admin/content/company-wiki.vue

<template>
  <div style="max-width: 1100px">
    <n-space justify="space-between" align="center" style="margin-bottom: 20px">
      <div>
        <h1 style="margin: 0 0 4px; font-size: 20px; font-weight: 600; color: #111827">呼籁文旅集团百科</h1>
        <p style="margin: 0; font-size: 13px; color: #9ca3af">管理"呼籁文旅集团"公司百科页面内容</p>
      </div>
      <n-space>
        <n-button tag="a" href="/company" target="_blank" secondary>查看前台 ↗</n-button>
        <n-button type="primary" :loading="saving" @click="save">保存</n-button>
      </n-space>
    </n-space>

    <n-spin :show="!loaded">
      <n-collapse :default-expanded-names="['basic']">
        <!-- 基本信息 -->
        <n-collapse-item title="基本信息" name="basic">
          <n-card>
            <n-form label-placement="top">
              <n-grid :cols="2" :x-gap="12">
                <n-gi><n-form-item label="公司名称"><n-input v-model:value="data.title" /></n-form-item></n-gi>
                <n-gi><n-form-item label="Logo 路径"><n-input v-model:value="data.logo" /></n-form-item></n-gi>
              </n-grid>
              <n-form-item label="副标题">
                <n-input v-model:value="data.subtitle" />
              </n-form-item>
              <n-form-item label="摘要">
                <n-input v-model:value="data.summary" type="textarea" :autosize="{ minRows: 3, maxRows: 8 }" />
              </n-form-item>
            </n-form>
          </n-card>
        </n-collapse-item>

        <!-- 信息框 -->
        <n-collapse-item title="信息框" name="infoBox">
          <n-card>
            <div style="width: 100%">
              <div v-for="(_, key) in data.infoBox" :key="key" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
                <n-input :value="key" placeholder="字段名" style="width: 160px" @update:value="v => renameKey(data.infoBox, key, v)" />
                <n-input v-model:value="data.infoBox[key]" placeholder="值" style="flex: 1" />
                <n-button size="tiny" type="error" quaternary @click="delete data.infoBox[key]">删</n-button>
              </div>
              <n-button size="small" type="primary" dashed @click="addInfoBoxItem">添加字段</n-button>
            </div>
          </n-card>
        </n-collapse-item>

        <!-- 内容章节 -->
        <n-collapse-item title="内容章节" name="sections">
          <n-card>
            <div style="width: 100%">
              <n-card v-for="(sec, i) in data.sections" :key="i" size="small" style="margin-bottom: 16px">
                <template #header>
                  <n-space align="center">
                    <span style="font-size: 14px; font-weight: 500">{{ sec.title || '新章节' }}</span>
                    <n-tag :bordered="false" size="small" type="info">{{ getSectionType(sec) }}</n-tag>
                    <n-button size="tiny" type="error" quaternary @click="data.sections.splice(i, 1)">删除</n-button>
                  </n-space>
                </template>
                <n-form label-placement="top">
                  <n-form-item label="章节标题">
                    <n-input v-model:value="sec.title" />
                  </n-form-item>

                  <!-- 纯文本型 -->
                  <template v-if="getSectionType(sec) === '文本'">
                    <n-form-item label="内容">
                      <n-input v-model:value="sec.content" type="textarea" :autosize="{ minRows: 3, maxRows: 10 }" />
                    </n-form-item>
                  </template>

                  <!-- 时间线型（发展历程） -->
                  <template v-if="getSectionType(sec) === '时间线'">
                    <n-form-item label="时间线">
                      <div style="width: 100%">
                        <div v-for="(item, j) in sec.timeline" :key="j" style="display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px">
                          <n-input v-model:value="item.year" placeholder="年份" style="width: 120px" />
                          <n-input v-model:value="item.content" placeholder="事件" type="textarea" :autosize="{ minRows: 1, maxRows: 4 }" style="flex: 1" />
                          <n-button size="tiny" type="error" quaternary @click="sec.timeline.splice(j, 1)">删</n-button>
                        </div>
                        <n-button size="small" type="primary" dashed @click="sec.timeline.push({ year: '', content: '' })">添加事件</n-button>
                      </div>
                    </n-form-item>
                  </template>

                  <!-- 子公司型 -->
                  <template v-if="getSectionType(sec) === '子公司'">
                    <n-form-item label="简介">
                      <n-input v-model:value="sec.intro" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" />
                    </n-form-item>
                    <n-form-item label="子公司列表">
                      <div style="width: 100%">
                        <div v-for="(sub, j) in sec.subsidiaries" :key="j" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
                          <n-input :value="sub" placeholder="子公司描述" style="flex: 1" @update:value="v => sec.subsidiaries[j] = v" />
                          <n-button size="tiny" type="error" quaternary @click="sec.subsidiaries.splice(j, 1)">删</n-button>
                        </div>
                        <n-button size="small" type="primary" dashed @click="sec.subsidiaries.push('')">添加子公司</n-button>
                      </div>
                    </n-form-item>
                  </template>

                  <!-- 业务线型 -->
                  <template v-if="getSectionType(sec) === '业务线'">
                    <n-form-item label="业务板块">
                      <div style="width: 100%">
                        <n-card v-for="(biz, j) in sec.businesses" :key="j" size="small" style="margin-bottom: 8px">
                          <template #header>
                            <n-space align="center">
                              <span style="font-size: 13px; color: #6b7280">{{ biz.name || '新业务' }}</span>
                              <n-button size="tiny" type="error" quaternary @click="sec.businesses.splice(j, 1)">删</n-button>
                            </n-space>
                          </template>
                          <n-form-item label="名称"><n-input v-model:value="biz.name" /></n-form-item>
                          <n-form-item label="描述"><n-input v-model:value="biz.description" type="textarea" :autosize="{ minRows: 1, maxRows: 4 }" /></n-form-item>
                          <n-form-item v-if="biz.extra !== undefined" label="备注"><n-input v-model:value="biz.extra" /></n-form-item>
                        </n-card>
                        <n-button size="small" type="primary" dashed @click="sec.businesses.push({ name: '', description: '' })">添加业务</n-button>
                      </div>
                    </n-form-item>
                  </template>

                  <!-- 键值对型（文化理念） -->
                  <template v-if="getSectionType(sec) === '键值对'">
                    <n-form-item label="条目">
                      <div style="width: 100%">
                        <div v-for="(item, j) in sec.items" :key="j" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
                          <n-input v-model:value="item.label" placeholder="标签" style="width: 160px" />
                          <n-input v-model:value="item.value" placeholder="内容" style="flex: 1" />
                          <n-button size="tiny" type="error" quaternary @click="sec.items.splice(j, 1)">删</n-button>
                        </div>
                        <n-button size="small" type="primary" dashed @click="sec.items.push({ label: '', value: '' })">添加条目</n-button>
                      </div>
                    </n-form-item>
                  </template>

                  <!-- 带图片的文本型（团队） -->
                  <template v-if="getSectionType(sec) === '图文'">
                    <n-form-item label="内容">
                      <n-input v-model:value="sec.content" type="textarea" :autosize="{ minRows: 3, maxRows: 10 }" />
                    </n-form-item>
                    <n-form-item label="图片">
                      <n-dynamic-input v-model:value="sec.images" :min="0" placeholder="图片路径" />
                    </n-form-item>
                  </template>
                </n-form>
              </n-card>

              <n-space style="margin-top: 12px">
                <n-button size="small" type="primary" dashed @click="addSection('text')">+ 文本章节</n-button>
                <n-button size="small" type="primary" dashed @click="addSection('timeline')">+ 时间线</n-button>
                <n-button size="small" type="primary" dashed @click="addSection('subsidiaries')">+ 子公司</n-button>
                <n-button size="small" type="primary" dashed @click="addSection('businesses')">+ 业务线</n-button>
                <n-button size="small" type="primary" dashed @click="addSection('items')">+ 键值对</n-button>
                <n-button size="small" type="primary" dashed @click="addSection('images')">+ 图文</n-button>
              </n-space>
            </div>
          </n-card>
        </n-collapse-item>

        <!-- 图库 -->
        <n-collapse-item title="图库" name="gallery">
          <n-card>
            <n-dynamic-input v-model:value="data.gallery" :min="0" placeholder="图片路径，如 /images/company/xxx.jpg" />
          </n-card>
        </n-collapse-item>

        <!-- SEO -->
        <n-collapse-item title="SEO" name="seo">
          <n-card>
            <n-form label-placement="top">
              <n-form-item label="页面标题">
                <n-input v-model:value="data.seo.title" />
              </n-form-item>
              <n-form-item label="描述">
                <n-input v-model:value="data.seo.description" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
              </n-form-item>
              <n-form-item label="关键词">
                <n-input v-model:value="data.seo.keywords" />
              </n-form-item>
            </n-form>
          </n-card>
        </n-collapse-item>
      </n-collapse>
    </n-spin>
  </div>
</template>

<script setup>
import { NButton, NCard, NSpace, NInput, NForm, NFormItem, NSpin, NGrid, NGi, NCollapse, NCollapseItem, NDynamicInput, NTag } from 'naive-ui'
import { useMessage } from 'naive-ui'

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const message = useMessage()

const data = ref({
  title: '', subtitle: '', summary: '', logo: '',
  infoBox: {},
  sections: [],
  gallery: [],
  seo: { title: '', description: '', keywords: '' }
})
const loaded = ref(false)
const saving = ref(false)

function getSectionType(sec) {
  if (sec.timeline) return '时间线'
  if (sec.subsidiaries) return '子公司'
  if (sec.businesses) return '业务线'
  if (sec.items) return '键值对'
  if (sec.images) return '图文'
  return '文本'
}

function addSection(type) {
  const templates = {
    text: { title: '', content: '' },
    timeline: { title: '', timeline: [{ year: '', content: '' }] },
    subsidiaries: { title: '', intro: '', subsidiaries: [''] },
    businesses: { title: '', businesses: [{ name: '', description: '' }] },
    items: { title: '', items: [{ label: '', value: '' }] },
    images: { title: '', content: '', images: [] },
  }
  data.value.sections.push(templates[type])
}

function addInfoBoxItem() {
  const key = `新字段${Object.keys(data.value.infoBox).length + 1}`
  data.value.infoBox[key] = ''
}

function renameKey(obj, oldKey, newKey) {
  if (newKey && newKey !== oldKey && !(newKey in obj)) {
    const val = obj[oldKey]
    delete obj[oldKey]
    obj[newKey] = val
  }
}

async function load() {
  const res = await adminFetch('/api/admin/site-content?key=company-wiki')
  data.value = res.data
  if (!data.value.seo) data.value.seo = { title: '', description: '', keywords: '' }
  if (!data.value.gallery) data.value.gallery = []
  loaded.value = true
}

async function save() {
  saving.value = true
  try {
    await adminFetch('/api/admin/site-content', { method: 'PUT', body: { key: 'company-wiki', data: data.value } })
    message.success('已保存')
  } catch (e) {
    message.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(load)
</script>