wordpress-theme-aksrt/assets/admin/src/pages/docs/DocsPage.vue

<template>
  <div class="jio-page-container">
    <PageHeader title="文档中心" desc="主题使用文档、开发指南、迁移说明和更新日志。" />

    <!-- Quick Actions -->
    <n-card title="常用操作" size="small" class="jio-docs__section">
      <n-grid :cols="2" :x-gap="12" :y-gap="12">
        <n-grid-item>
          <div class="jio-docs__action">
            <FaIcon icon="fa fas fa-paint-brush" :size="16" />
            <div>
              <strong>全局设置</strong>
              <p>Logo、导航栏、自定义代码</p>
              <router-link to="/global/common">前往配置 →</router-link>
            </div>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="jio-docs__action">
            <FaIcon icon="fa fas fa-home" :size="16" />
            <div>
              <strong>首页配置</strong>
              <p>首页模块、布局、排序和预设模板</p>
              <router-link to="/page-display/homepage">前往配置 →</router-link>
            </div>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="jio-docs__action">
            <FaIcon icon="fa fas fa-users" :size="16" />
            <div>
              <strong>用户管理</strong>
              <p>登录注册、OAuth、签到、积分</p>
              <router-link to="/users/auth">前往配置 →</router-link>
            </div>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="jio-docs__action">
            <FaIcon icon="fa fas fa-wrench" :size="16" />
            <div>
              <strong>工具</strong>
              <p>导入导出、健康检查、备份与更新</p>
              <router-link to="/tools/import-export">前往配置 →</router-link>
            </div>
          </div>
        </n-grid-item>
      </n-grid>
    </n-card>

    <!-- Reference Docs -->
    <div class="jio-docs__grid">
      <n-card
        v-for="doc in docs"
        :key="doc.key"
        class="jio-docs__card"
        size="small"
        hoverable
        @click="openDoc(doc)"
      >
        <div class="jio-docs__card-inner">
          <div class="jio-docs__card-icon" :style="{ background: doc.color }">
            <FaIcon :icon="doc.icon" :size="20" color="#fff" />
          </div>
          <div class="jio-docs__card-body">
            <h4 class="jio-docs__card-title">{{ doc.title }}</h4>
            <p class="jio-docs__card-desc">{{ doc.description }}</p>
          </div>
          <FaIcon icon="fa fas fa-external-link-alt" :size="12" class="jio-docs__card-arrow" />
        </div>
      </n-card>
    </div>

    <!-- Version Info -->
    <n-card title="当前版本" size="small" class="jio-docs__section">
      <n-descriptions :column="2" bordered label-placement="left" size="small">
        <n-descriptions-item label="主题版本">
          <n-tag type="success" size="small">{{ themeVersion }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="Schema 版本">
          <n-tag type="info" size="small">{{ dbSchemaVersion }}</n-tag>
        </n-descriptions-item>
      </n-descriptions>
    </n-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import PageHeader from '@/components/PageHeader.vue'
import FaIcon from '@/components/form/FaIcon.vue'
import api from '@/api/index.js'

const themeVersion = ref(window.jioAdminData?.themeVersion || '3.4.0-dev')
const dbSchemaVersion = ref('—')

const docs = ref([
  { key: 'admin-ia-map', title: '后台 IA 蓝图', description: '完整的后台信息架构映射，12 个顶级分区及子页面清单。', icon: 'fa fas fa-sitemap', color: 'var(--jio-color-primary)', file: 'admin-ia-map.md' },
  { key: 'legacy-gap-matrix', title: '对标差异矩阵', description: 'Jio 当前 → 原主题参考 → Jio 目标三层对照表。', icon: 'fa fas fa-columns', color: '#722ed1', file: 'legacy-gap-matrix.md' },
  { key: 'frontend-page-matrix', title: '前端页面矩阵', description: '前端模板、CSS、JS 资产映射与覆盖范围。', icon: 'fa fas fa-desktop', color: '#13c2c2', file: 'frontend-page-matrix.md' },
  { key: 'manual-acceptance-baseline', title: '验收基线', description: '每个 Phase 的人工验收标准和检查清单。', icon: 'fa fas fa-clipboard', color: '#52c41a', file: 'manual-acceptance-baseline.md' },
  { key: 'feature-domain-map', title: '功能域地图', description: '业务域划分、依赖关系和模块边界说明。', icon: 'fa fas fa-map', color: '#fa8c16', file: 'feature-domain-map.md' },
  { key: 'migration-map', title: '迁移地图', description: '设置 key 迁移、旧选项兼容和 Schema 版本对照。', icon: 'fa fas fa-exchange-alt', color: '#eb2f96', file: 'migration-map.md' },
])

onMounted(async () => {
  // Fetch schema version from health
  try {
    const healthRes = await api.getHealthCheck()
    if (healthRes?.data) {
      dbSchemaVersion.value = healthRes.data.db_schema_version || '—'
    }
  } catch {
    // Endpoint may not exist yet
  }
})

function openDoc(doc) {
  // Link to local docs directory (admin can open in new tab)
  const base = window.jioAdminData?.siteUrl || window.location.origin
  window.open(`${base}/wp-content/themes/Jio-theme/docs/${doc.file}`, '_blank')
}
</script>

<style scoped>
.jio-docs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.jio-docs__card {
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.jio-docs__card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.jio-docs__card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jio-docs__card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jio-docs__card-body {
  flex: 1;
  min-width: 0;
}

.jio-docs__card-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jio-color-text);
}

.jio-docs__card-desc {
  margin: 0;
  font-size: 12px;
  color: var(--jio-color-muted);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jio-docs__card-arrow {
  flex-shrink: 0;
  color: #c0c4cc;
}

.jio-docs__section {
  margin-bottom: 16px;
}

.jio-docs__action {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 6px;
  background: #fafafa;
}

.jio-docs__action i {
  color: var(--jio-color-primary);
  margin-top: 2px;
}

.jio-docs__action strong {
  display: block;
  font-size: 14px;
  color: var(--jio-color-text);
  margin-bottom: 2px;
}

.jio-docs__action p {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--jio-color-muted);
}

.jio-docs__action a {
  font-size: 12px;
  color: var(--jio-color-primary);
  text-decoration: none;
}

.jio-docs__action a:hover {
  text-decoration: underline;
}
</style>