feat(admin): 首页编辑支持链接选择器(本站页面/他站首页/文件)与试跳

Made-with: Cursor
2026-03-19 16:47:40 +08:00
parent 6df5cf029d
commit 88f9d42f91
3 changed files with 170 additions and 72 deletions
--- a/admin/src/components/LinkPickerDialog.vue
+++ b/admin/src/components/LinkPickerDialog.vue
@@ -2,34 +2,65 @@
  <el-dialog
    :model-value="modelValue"
    title="选择链接"
-    width="640px"
+    width="680px"
    destroy-on-close
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <el-tabs v-model="tab">
-      <el-tab-pane label="站内页面" name="pages">
+      <el-tab-pane label="本站页面" name="pages">
+        <p class="tab-tip">当前站点下已创建的网页（含首页 /）</p>
        <el-table
          v-loading="loadingPages"
          :data="pageRows"
          highlight-current-row
-          max-height="360"
+          max-height="320"
          @row-click="(row) => confirm(row.path)"
        >
-          <el-table-column prop="title" label="标题" min-width="140" />
-          <el-table-column prop="path" label="路径" min-width="160" />
+          <el-table-column prop="title" label="标题" min-width="130" />
+          <el-table-column prop="path" label="前台路径" min-width="140" />
          <el-table-column label="操作" width="80">
            <template #default="{ row }">
              <el-button type="primary" link @click.stop="confirm(row.path)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
-        <el-empty v-if="!loadingPages && !pageRows.length" description="暂无页面" />
+        <el-empty v-if="!loadingPages && !pageRows.length" description="暂无页面，请先在网页管理中创建" />
      </el-tab-pane>
-      <el-tab-pane label="可下载文件" name="files">
+
+      <el-tab-pane v-if="showOtherSites" label="其他站点首页" name="sites">
+        <p class="tab-tip">同账号下其他站点的首页链接（需在站点管理中填写「域名」）</p>
+        <el-table
+          v-loading="loadingSites"
+          :data="otherSiteRows"
+          max-height="320"
+        >
+          <el-table-column prop="name" label="站点名称" min-width="120" />
+          <el-table-column prop="domain" label="已配置域名" min-width="180" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.domain">{{ row.domain }}</span>
+              <el-text v-else type="warning" size="small">未填写</el-text>
+            </template>
+          </el-table-column>
+          <el-table-column prop="previewUrl" label="将填入的链接" min-width="200" show-overflow-tooltip />
+          <el-table-column label="操作" width="80">
+            <template #default="{ row }">
+              <el-button
+                type="primary"
+                link
+                :disabled="!row.homeUrl"
+                @click="confirmOtherSite(row)"
+              >选择</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-empty v-if="!loadingSites && !otherSiteRows.length" description="没有其他站点" />
+      </el-tab-pane>
+
+      <el-tab-pane v-if="showDownloadableFiles" label="可下载文件" name="files">
        <el-table
          v-loading="loadingFiles"
          :data="files"
-          max-height="360"
+          max-height="320"
          @row-click="(row) => confirm(fileUrl(row))"
        >
          <el-table-column prop="name" label="文件名" min-width="160" />
@@ -42,6 +73,7 @@
        </el-table>
        <el-empty v-if="!loadingFiles && !files.length" description="无标记为可下载的文件，请到文件管理上传并勾选允许下载" />
      </el-tab-pane>
+
      <el-tab-pane label="自定义地址" name="custom">
        <el-input v-model="customUrl" placeholder="https:// 或 /path" clearable />
        <div style="margin-top: 16px">
@@ -55,18 +87,22 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { getPages, getDownloadableAssets } from '../api/admin'
+import { getPages, getDownloadableAssets, getSites } from '../api/admin'

 const props = defineProps({
  modelValue: { type: Boolean, default: false },
-  siteId: { type: String, default: '' }
+  siteId: { type: String, default: '' },
+  showDownloadableFiles: { type: Boolean, default: true },
+  showOtherSites: { type: Boolean, default: true }
 })
 const emit = defineEmits(['update:modelValue', 'select'])

 const tab = ref('pages')
 const pageRows = ref([])
+const otherSiteRows = ref([])
 const files = ref([])
 const loadingPages = ref(false)
+const loadingSites = ref(false)
 const loadingFiles = ref(false)
 const customUrl = ref('')

@@ -79,6 +115,14 @@ function effectivePath(p) {
  return '/' + p.slug
 }

+/** 站点首页完整 URL：依赖站点 domain；无域名则无法生成外链 */
+function siteHomepageUrl(site) {
+  let d = (site.domain || '').trim()
+  if (!d) return ''
+  if (!/^https?:\/\//i.test(d)) d = 'https://' + d
+  return d.replace(/\/$/, '') + '/'
+}
+
 async function loadPages() {
  if (!props.siteId) return
  loadingPages.value = true
@@ -86,7 +130,7 @@ async function loadPages() {
    const res = await getPages({ site_id: props.siteId })
    const list = res.list || []
    pageRows.value = list.map((p) => ({
-      title: p.title || p.slug,
+      title: (p.type === 'homepage' || p.slug === 'index' ? '【首页】' : '') + (p.title || p.slug),
      path: effectivePath(p),
      slug: p.slug
    }))
@@ -97,6 +141,36 @@ async function loadPages() {
  }
 }

+async function loadOtherSites() {
+  loadingSites.value = true
+  try {
+    const res = await getSites()
+    const list = (res.list || []).filter((s) => s.id !== props.siteId)
+    otherSiteRows.value = list.map((s) => {
+      const homeUrl = siteHomepageUrl(s)
+      return {
+        id: s.id,
+        name: s.name || s.id,
+        domain: (s.domain || '').trim(),
+        homeUrl,
+        previewUrl: homeUrl || '（未配置域名）'
+      }
+    })
+  } catch {
+    otherSiteRows.value = []
+  } finally {
+    loadingSites.value = false
+  }
+}
+
+function confirmOtherSite(row) {
+  if (!row.homeUrl) {
+    ElMessage.warning('请先在「站点管理」中为该站点填写访问域名')
+    return
+  }
+  confirm(row.homeUrl)
+}
+
 async function loadFiles() {
  if (!props.siteId) return
  loadingFiles.value = true
@@ -136,8 +210,17 @@ watch(
      customUrl.value = ''
      tab.value = 'pages'
      loadPages()
-      loadFiles()
+      if (props.showOtherSites) loadOtherSites()
+      if (props.showDownloadableFiles) loadFiles()
    }
  }
 )
 </script>
+
+<style scoped>
+.tab-tip {
+  font-size: 12px;
+  color: #909399;
+  margin: 0 0 8px;
+}
+</style>
--- a/admin/src/views/sites/HomepageEdit.vue
+++ b/admin/src/views/sites/HomepageEdit.vue
@@ -30,9 +30,21 @@
        </el-form-item>

        <el-form-item label="导航链接">
-          <div v-for="(link, i) in form.nav_links" :key="i" style="display: flex; gap: 8px; margin-bottom: 8px">
-            <el-input v-model="link.label" placeholder="Label" style="width: 120px" />
-            <el-input v-model="link.url" placeholder="URL" style="flex: 1" />
+          <div
+            v-for="(link, i) in form.nav_links"
+            :key="i"
+            style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center; flex-wrap: wrap"
+          >
+            <el-input v-model="link.label" placeholder="显示文字" style="width: 120px" />
+            <el-input v-model="link.url" placeholder="路径或外链，可点「选择链接」" style="flex: 1; min-width: 160px" />
+            <el-button type="primary" link @click="openLinkPicker({ type: 'nav', index: i })">选择链接</el-button>
+            <el-link
+              v-if="previewReady(link.url)"
+              type="primary"
+              :href="previewHref(link.url)"
+              target="_blank"
+              rel="noopener noreferrer"
+            >试跳</el-link>
            <el-button link type="danger" @click="form.nav_links.splice(i, 1)">删除</el-button>
          </div>
          <el-button link type="primary" @click="form.nav_links.push({ label: '', url: '#' })">+ 添加链接</el-button>
@@ -43,16 +55,32 @@
          <el-input v-model="form.download_text" placeholder="START EXPLORING" />
        </el-form-item>
        <el-form-item label="按钮链接">
-          <el-input v-model="form.download_url" placeholder="#" style="flex: 1" />
-          <el-button type="primary" link @click="openFilePicker('download')">选择可下载文件</el-button>
+          <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%">
+            <el-input v-model="form.download_url" placeholder="#" style="flex: 1; min-width: 200px" />
+            <el-button type="primary" link @click="openLinkPicker({ type: 'download' })">选择链接</el-button>
+            <el-link
+              v-if="previewReady(form.download_url)"
+              type="primary"
+              :href="previewHref(form.download_url)"
+              target="_blank"
+              rel="noopener noreferrer"
+            >试跳</el-link>
+          </div>
        </el-form-item>

        <el-divider content-position="left">平台（轨道）</el-divider>
        <el-form-item label="平台列表">
          <div v-for="(p, i) in form.platforms" :key="i" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center">
            <el-input v-model="p.name" placeholder="如 WINDOWS" style="width: 140px" />
-            <el-input v-model="p.url" placeholder="链接" style="flex: 1" />
-            <el-button type="primary" link @click="openFilePicker('platform', i)">选择文件</el-button>
+            <el-input v-model="p.url" placeholder="链接" style="flex: 1; min-width: 140px" />
+            <el-button type="primary" link @click="openLinkPicker({ type: 'platform', index: i })">选择链接</el-button>
+            <el-link
+              v-if="previewReady(p.url)"
+              type="primary"
+              :href="previewHref(p.url)"
+              target="_blank"
+              rel="noopener noreferrer"
+            >试跳</el-link>
            <el-button link type="danger" @click="form.platforms.splice(i, 1)">删除</el-button>
          </div>
          <el-button link type="primary" @click="form.platforms.push({ name: '', url: '#' })">+ 添加平台</el-button>
@@ -87,41 +115,29 @@
      <el-empty v-else description="请先选择站点" />
    </el-card>

-    <el-dialog v-model="filePickerVisible" title="选择可下载文件" width="640px">
-      <el-table
-        v-loading="fileListLoading"
-        :data="downloadableFiles"
-        highlight-current-row
-        @current-change="onSelectFile"
-      >
-        <el-table-column property="name" label="文件名" min-width="180" />
-        <el-table-column property="file_path" label="路径" min-width="200" show-overflow-tooltip />
-        <el-table-column label="操作" width="100">
-          <template #default="{ row }">
-            <el-button type="primary" link @click="confirmSelectFile(row)">选择</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-empty v-if="!fileListLoading && downloadableFiles.length === 0" description="暂无可下载文件，请在文件管理中上传并勾选“允许下载”" />
-    </el-dialog>
+    <LinkPickerDialog
+      v-model="linkPickerVisible"
+      :site-id="siteId"
+      @select="onLinkPicked"
+    />
  </div>
 </template>

 <script setup>
 import { ref, reactive, onMounted, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { getSites, getOfficialSite, getHomepage, updateHomepage, getDownloadableAssets } from '../../api/admin'
+import { getSites, getOfficialSite, getHomepage, updateHomepage } from '../../api/admin'
 import { useAuthStore } from '../../stores/auth'
+import LinkPickerDialog from '../../components/LinkPickerDialog.vue'

 const siteId = ref('')
 const sites = ref([])
 const saving = ref(false)
 const downloading = ref(false)
 const formRef = ref(null)
-const filePickerVisible = ref(false)
-const fileListLoading = ref(false)
-const downloadableFiles = ref([])
-const filePickerTarget = ref({ type: 'download' }) // { type: 'download' } | { type: 'platform', index: number }
+const linkPickerVisible = ref(false)
+/** @type {import('vue').Ref<{ type: 'nav' | 'download' | 'platform'; index?: number }>} */
+const linkPickTarget = ref({ type: 'download' })

 const defaultForm = () => ({
  logo_text: 'YUHENG ONE',
@@ -227,43 +243,34 @@ const handleDownload = async () => {
  }
 }

-function openFilePicker(type, index) {
-  filePickerTarget.value = type === 'platform' ? { type: 'platform', index } : { type: 'download' }
-  filePickerVisible.value = true
-  fetchDownloadableFiles()
+function openLinkPicker(target) {
+  linkPickTarget.value = target
+  linkPickerVisible.value = true
 }

-async function fetchDownloadableFiles() {
-  if (!siteId.value) return
-  fileListLoading.value = true
-  try {
-    const res = await getDownloadableAssets(siteId.value)
-    downloadableFiles.value = res.list || []
-  } catch (e) {
-    ElMessage.error(e.message)
-    downloadableFiles.value = []
-  } finally {
-    fileListLoading.value = false
-  }
-}
-
-function buildDownloadUrl(asset) {
-  return `/api/web/sites/${siteId.value}/assets/${asset.id}/download`
-}
-
-function confirmSelectFile(asset) {
-  const url = buildDownloadUrl(asset)
-  if (filePickerTarget.value.type === 'download') {
+function onLinkPicked(url) {
+  const t = linkPickTarget.value
+  if (t.type === 'nav' && typeof t.index === 'number') {
+    form.nav_links[t.index].url = url
+  } else if (t.type === 'download') {
    form.download_url = url
-  } else {
-    form.platforms[filePickerTarget.value.index].url = url
+  } else if (t.type === 'platform' && typeof t.index === 'number') {
+    form.platforms[t.index].url = url
  }
-  filePickerVisible.value = false
-  ElMessage.success('已选择：' + asset.name)
+  ElMessage.success('已填入链接')
 }

-function onSelectFile(row) {
-  if (row) confirmSelectFile(row)
+function previewReady(url) {
+  const u = (url || '').trim()
+  return Boolean(u && u !== '#')
+}
+
+/** 后台试跳：相对路径用当前浏览器域名拼接 */
+function previewHref(url) {
+  const u = (url || '').trim()
+  if (/^https?:\/\//i.test(u)) return u
+  if (u.startsWith('/')) return `${window.location.origin}${u}`
+  return u
 }

 onMounted(() => {