hulai-website/pages/admin/content/versions.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="/versions" 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="['stats']">
        <!-- stats -->
        <n-collapse-item title="统计数据" name="stats">
          <n-card>
            <n-form label-placement="top">
              <n-grid :cols="3" :x-gap="12">
                <n-gi><n-form-item label="迭代次数"><n-input-number v-model:value="data.stats.iterations" :min="0" style="width: 100%" /></n-form-item></n-gi>
                <n-gi><n-form-item label="年数"><n-input-number v-model:value="data.stats.years" :min="0" style="width: 100%" /></n-form-item></n-gi>
                <n-gi><n-form-item label="接待人次"><n-input v-model:value="data.stats.guests" /></n-form-item></n-gi>
              </n-grid>
            </n-form>
          </n-card>
        </n-collapse-item>

        <!-- upgrades2026 -->
        <n-collapse-item title="2026升级亮点" name="upgrades2026">
          <n-card>
            <div style="width: 100%">
              <n-card v-for="(u, i) in data.upgrades2026" :key="i" size="small" style="margin-bottom: 12px">
                <template #header>
                  <n-space align="center">
                    <span style="font-size: 13px; color: #6b7280">{{ u.tag || '新亮点' }} - {{ u.name }}</span>
                    <n-button size="tiny" type="error" quaternary @click="data.upgrades2026.splice(i, 1)">删除</n-button>
                  </n-space>
                </template>
                <n-form label-placement="top">
                  <n-grid :cols="2" :x-gap="12">
                    <n-gi><n-form-item label="标签"><n-input v-model:value="u.tag" /></n-form-item></n-gi>
                    <n-gi><n-form-item label="名称"><n-input v-model:value="u.name" /></n-form-item></n-gi>
                  </n-grid>
                  <n-form-item label="描述">
                    <n-input v-model:value="u.description" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
                  </n-form-item>
                  <n-form-item label="升级原因">
                    <n-input v-model:value="u.reason" type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" />
                  </n-form-item>
                </n-form>
              </n-card>
              <n-button size="small" type="primary" dashed @click="data.upgrades2026.push({ tag: '', name: '', description: '', reason: '' })">添加亮点</n-button>
            </div>
          </n-card>
        </n-collapse-item>

        <!-- highlights -->
        <n-collapse-item title="产品亮点" name="highlights">
          <n-card>
            <div style="width: 100%">
              <div v-for="(h, i) in data.highlights" :key="i" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
                <n-input v-model:value="h.label" placeholder="标签" style="width: 100px" />
                <n-input v-model:value="h.text" placeholder="描述" style="flex: 1" />
                <n-button size="tiny" type="error" quaternary @click="data.highlights.splice(i, 1)">删</n-button>
              </div>
              <n-button size="small" type="primary" dashed @click="data.highlights.push({ label: '', text: '' })">添加亮点</n-button>
            </div>
          </n-card>
        </n-collapse-item>

        <!-- compareV8V9 -->
        <n-collapse-item title="版本对比表" name="compareV8V9">
          <n-card>
            <n-form label-placement="top">
              <n-form-item label="表头">
                <n-space>
                  <n-input v-for="(h, i) in data.compareV8V9.headers" :key="i" v-model:value="data.compareV8V9.headers[i]" :placeholder="'表头' + (i + 1)" style="width: 280px" />
                </n-space>
              </n-form-item>
              <n-form-item label="对比行">
                <div style="width: 100%">
                  <div v-for="(row, i) in data.compareV8V9.rows" :key="i" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
                    <n-input v-model:value="row[0]" :placeholder="data.compareV8V9.headers[0]" style="flex: 1" />
                    <span style="color: #9ca3af">→</span>
                    <n-input v-model:value="row[1]" :placeholder="data.compareV8V9.headers[1]" style="flex: 1" />
                    <n-button size="tiny" type="error" quaternary @click="data.compareV8V9.rows.splice(i, 1)">删</n-button>
                  </div>
                  <n-button size="small" type="primary" dashed @click="data.compareV8V9.rows.push(['', ''])">添加行</n-button>
                </div>
              </n-form-item>
            </n-form>
          </n-card>
        </n-collapse-item>

        <!-- timeline -->
        <n-collapse-item title="版本时间线" name="timeline">
          <n-card>
            <div style="width: 100%">
              <n-card v-for="(t, i) in data.timeline" :key="i" size="small" style="margin-bottom: 12px">
                <template #header>
                  <n-space align="center">
                    <span style="font-size: 13px; font-weight: 600; color: #3a7d44">{{ t.version }}</span>
                    <span style="font-size: 12px; color: #9ca3af">{{ t.date }}</span>
                    <n-button size="tiny" type="error" quaternary @click="data.timeline.splice(i, 1)">删除</n-button>
                  </n-space>
                </template>
                <n-form label-placement="top">
                  <n-grid :cols="3" :x-gap="12">
                    <n-gi><n-form-item label="版本号"><n-input v-model:value="t.version" /></n-form-item></n-gi>
                    <n-gi><n-form-item label="日期"><n-input v-model:value="t.date" /></n-form-item></n-gi>
                    <n-gi><n-form-item label="标题"><n-input v-model:value="t.title" /></n-form-item></n-gi>
                  </n-grid>
                  <n-form-item label="变更项">
                    <div style="width: 100%">
                      <div v-for="(c, ci) in t.changes" :key="ci" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
                        <n-input v-model:value="c.type" placeholder="类型(add/update/remove)" style="width: 160px" />
                        <n-input v-model:value="c.text" placeholder="变更内容" style="flex: 1" />
                        <n-button size="tiny" type="error" quaternary @click="t.changes.splice(ci, 1)">删</n-button>
                      </div>
                      <n-button size="small" dashed @click="t.changes.push({ type: 'add', text: '' })">添加变更</n-button>
                    </div>
                  </n-form-item>
                  <n-form-item label="迭代原因">
                    <n-input v-model:value="t.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" />
                  </n-form-item>
                </n-form>
              </n-card>
              <n-button size="small" type="primary" dashed @click="data.timeline.push({ version: '', date: '', title: '', changes: [{ type: 'add', text: '' }], reason: '' })">添加版本</n-button>
            </div>
          </n-card>
        </n-collapse-item>

        <!-- philosophy -->
        <n-collapse-item title="迭代理念" name="philosophy">
          <n-card>
            <div style="width: 100%">
              <div v-for="(p, i) in data.philosophy" :key="i" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px">
                <n-input v-model:value="p.label" placeholder="标签" style="width: 120px" />
                <n-input v-model:value="p.text" placeholder="描述" style="flex: 1" />
                <n-button size="tiny" type="error" quaternary @click="data.philosophy.splice(i, 1)">删</n-button>
              </div>
              <n-button size="small" type="primary" dashed @click="data.philosophy.push({ label: '', text: '' })">添加理念</n-button>
            </div>
          </n-card>
        </n-collapse-item>

        <!-- quote -->
        <n-collapse-item title="引用语" name="quote">
          <n-card>
            <n-form label-placement="top">
              <n-form-item label="引用文字">
                <n-input v-model:value="data.quote.text" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
              </n-form-item>
              <n-form-item label="作者">
                <n-input v-model:value="data.quote.author" />
              </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, NInputNumber } from 'naive-ui'
import { useMessage } from 'naive-ui'

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

const data = ref({
  stats: { iterations: 0, years: 0, guests: '' },
  upgrades2026: [],
  highlights: [],
  compareV8V9: { headers: ['', ''], rows: [] },
  timeline: [],
  philosophy: [],
  quote: { text: '', author: '' }
})
const loaded = ref(false)
const saving = ref(false)

async function load() {
  const res = await adminFetch('/api/admin/site-content?key=versions')
  data.value = res.data
  loaded.value = true
}

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

onMounted(load)
</script>