1.行业应用添加详情页面

src/views/componentServices/detail.vue

+<template>
+  <div class="app-container">
+    <div class="custom-main-w main detail-main">
+      <div class="header">
+        <img v-if="detail.image" class="icon" :src="detail.image" alt="icon" />
+        <div class="meta">
+          <div class="title">{{ detail.title || '应用详情' }}</div>
+          <div class="info" v-if="detail.information">{{ detail.information }}</div>
+          <div class="actions">
+            <el-button @click="goBack">返回列表</el-button>
+          </div>
+        </div>
+      </div>
+
+      <el-divider />
+
+      <div class="section api-section" v-if="Array.isArray(detail.apis) && detail.apis.length">
+        <div class="section-title">关联APP应用</div>
+        <el-table :data="detail.apis" border size="small" class="api-table" style="width: 100%">
+          <el-table-column label="应用名称" prop="apiName" :show-overflow-tooltip="true" min-width="180" />
+          <el-table-column label="详情/购买" width="110" align="center">
+            <template #default="scope">
+              <el-button link type="primary" @click="goToApiDetail(scope.row.apiId)">详情/购买</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="试用" width="90" align="center">
+            <template #default="scope">
+              <template v-if="scope.row.trialUrl">
+                <el-button link type="primary" @click="openUrl(scope.row.trialUrl)">试用</el-button>
+              </template>
+              <template v-else>
+                <span class="placeholder">——</span>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="section" v-if="Array.isArray(detail.apiEndpoints) && detail.apiEndpoints.length">
+        <div class="section-title">接口列表</div>
+        <div class="tags">
+          <el-tag v-for="e in detail.apiEndpoints" :key="e.apiEndpointId" effect="plain" class="mr8">{{ e.apiEndpointName }}</el-tag>
+        </div>
+      </div>
+
+      <div class="section">
+        <div class="section-title">应用介绍</div>
+        <div class="content" v-html="detail.description"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="ComponentServicesDetail">
+import { ref, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { assemblyDetail } from '@/api/home.js'
+import useSettingsStore from '@/store/modules/settings'
+
+const route = useRoute()
+const router = useRouter()
+
+const detail = ref({
+  image: '',
+  information: '',
+  title: '',
+  url: '',
+  description: '',
+  apis: [],
+  apiEndpoints: []
+})
+
+const fetchDetail = async () => {
+  const id = route.query.id
+  if (!id) return
+  try {
+    const res = await assemblyDetail({ id })
+    if (res && res.code === 0 && res.data) {
+      detail.value = res.data
+      // 动态设置页面标题
+      const title = detail.value?.title || '行业应用详情'
+      try { useSettingsStore().setTitle(title) } catch (e) {}
+    }
+  } catch (e) {
+    // 已在全局拦截器提示，这里仅防止未捕获异常
+  }
+}
+
+function openUrl(urlInput) {
+  const raw = urlInput || detail.value?.url
+  if (!raw) return
+  const url = raw
+  if (/^https?:\/\//.test(url)) {
+    window.open(url, '_blank')
+  } else {
+    // 若为相对路径，按后端网关前缀处理
+    const base = import.meta.env?.VITE_APP_BASE_API || ''
+    window.open(base + url, '_blank')
+  }
+}
+
+function goBack() {
+  router.push({ path: '/componentServices/componentServicesList' })
+}
+
+onMounted(fetchDetail)
+//watch(() => route.query.id, () => fetchDetail())
+
+// 关联 API 的“访问应用”跳转到 API 市场详情
+function goToApiDetail(id) {
+  if (id) {
+    router.push(`/marketplace/ai/detail?id=${id}`)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding-top: 90px;
+}
+
+.main {
+  padding: 24px 0 80px;
+}
+
+/* Narrow this page's content width */
+.custom-main-w.detail-main {
+  max-width: 1140px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  .icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 16px;
+    object-fit: cover;
+    margin-right: 20px;
+  }
+  .meta {
+    .title {
+      font-size: 28px;
+      font-weight: 700;
+      color: #303233;
+      margin-bottom: 8px;
+    }
+    .info {
+      color: #666;
+      margin-bottom: 12px;
+    }
+    .actions {
+      .el-button + .el-button { margin-left: 12px; }
+    }
+  }
+}
+
+.section {
+  margin-top: 24px;
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+  .tags {
+    margin-bottom: 8px;
+    .mr8 { margin-right: 8px; margin-bottom: 8px; }
+  }
+  .content {
+    background: #fff;
+    padding: 16px;
+    border-radius: 8px;
+    :deep(img) { max-width: 100%; height: auto; }
+  }
+}
+
+.placeholder { color: #999; }
+
+/* Compact styles for the API table section */
+.api-section { max-width: 900px; }
+.api-section .section-title { font-size: 16px; color: #303233; }
+.api-table :deep(.el-table__cell) { padding: 6px 8px; font-size: 13px; color: #333; }
+.api-table :deep(.el-table__header .el-table__cell) { background: #fafafa; color: #666; font-weight: 500; padding: 6px 8px; }
+.api-table :deep(.el-button.is-link) { font-size: 13px; }
+.api-table :deep(tbody tr:hover > td) { background-color: #fcfcff; }
+</style>