feat(web): I5 callback inbox and integration catalog UI

Made-with: Cursor
2026-06-09 10:00:30 +08:00 · 2026-04-06 22:40:28 +08:00
parent e34b420168
commit 841bd3e0bd
8 changed files with 784 additions and 0 deletions
@@ -202,3 +202,72 @@ export function updateLicenseSn(id, body) {
 export function patchLicenseSnStatus(id, body) {
  return axios.patch(`/api/v1/license-sns/${id}/status`, body);
 }
+
+/* —— I5 Callback Inbox & M6 integration read APIs (paths per docs/engineering/iterations/I5_I6_DESIGN.md A.3) —— */
+
+/**
+ * @param {{
+ *   page?: number,
+ *   size?: number,
+ *   status?: string,
+ *   eventType?: string,
+ *   snCode?: string,
+ *   projectId?: string | number,
+ *   productLineId?: string | number,
+ *   environmentId?: string | number,
+ *   from?: string,
+ *   to?: string,
+ * }} params
+ */
+export function listCallbackInbox(params) {
+  return axios.get("/api/v1/callback-inbox", { params });
+}
+
+export function getCallbackInbox(id) {
+  return axios.get(`/api/v1/callback-inbox/${id}`);
+}
+
+/**
+ * @param {string | number} id
+ * @param {{ status: string }} body
+ */
+export function patchCallbackInboxStatus(id, body) {
+  return axios.patch(`/api/v1/callback-inbox/${id}/status`, body);
+}
+
+/**
+ * 人工挂接（M5-F04）。body 字段以 OpenAPI 为准。
+ * @param {string | number} id
+ * @param {Record<string, unknown>} body
+ */
+export function patchCallbackInboxLink(id, body) {
+  return axios.patch(`/api/v1/callback-inbox/${id}/link`, body);
+}
+
+/**
+ * @param {{ page?: number, size?: number }} params
+ */
+export function listIntegrationEnvironments(params) {
+  return axios.get("/api/v1/integration/environments", { params });
+}
+
+/**
+ * @param {string | number} id
+ */
+export function getIntegrationEnvironment(id) {
+  return axios.get(`/api/v1/integration/environments/${id}`);
+}
+
+/**
+ * @param {{ page?: number, size?: number }} params
+ */
+export function listProductLines(params) {
+  return axios.get("/api/v1/integration/product-lines", { params });
+}
+
+/**
+ * @param {string | number} id
+ */
+export function getProductLine(id) {
+  return axios.get(`/api/v1/integration/product-lines/${id}`);
+}
@@ -21,6 +21,15 @@
        <el-menu-item index="/licenses/sn">
          <span>许可 SN</span>
        </el-menu-item>
+        <el-menu-item index="/callbacks">
+          <span>Callback 收件箱</span>
+        </el-menu-item>
+        <el-menu-item index="/integration/environments">
+          <span>集成环境</span>
+        </el-menu-item>
+        <el-menu-item index="/integration/product-lines">
+          <span>产品线</span>
+        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
@@ -62,6 +62,30 @@ const routes = [
        component: () => import("../views/LicenseSnListView.vue"),
        meta: { roles: ["SYS_ADMIN", "DEVELOPER"], title: "许可 SN" },
      },
+      {
+        path: "integration/environments",
+        name: "integration-environments",
+        component: () => import("../views/IntegrationEnvironmentsView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER"], title: "集成环境" },
+      },
+      {
+        path: "integration/product-lines",
+        name: "integration-product-lines",
+        component: () => import("../views/IntegrationProductLinesView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER"], title: "产品线" },
+      },
+      {
+        path: "callbacks/:id",
+        name: "callback-inbox-detail",
+        component: () => import("../views/CallbackInboxDetailView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER"], title: "Callback 详情" },
+      },
+      {
+        path: "callbacks",
+        name: "callback-inbox",
+        component: () => import("../views/CallbackInboxView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER"], title: "Callback 收件箱" },
+      },
      {
        path: "contracts/new",
        name: "contract-new",
@@ -0,0 +1,72 @@
+const SENSITIVE_KEY_RE = /(authorization|bearer|token|secret|password|api[_-]?key|access[_-]?token|refresh[_-]?token|idempotency)/i;
+
+/**
+ * Recursively redact object values for safe display (tokens / auth-like keys).
+ * @param {unknown} value
+ * @param {string} [keyHint]
+ * @returns {unknown}
+ */
+function redactValue(value, keyHint = "") {
+  if (value === null || value === undefined) return value;
+  if (typeof value === "string") {
+    const k = keyHint;
+    if (SENSITIVE_KEY_RE.test(k)) return "[REDACTED]";
+    if (value.length > 48) return `${value.slice(0, 8)}…[${value.length} chars]`;
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") return value;
+  if (Array.isArray(value)) return value.map((item, i) => redactValue(item, `${keyHint}[${i}]`));
+  if (typeof value === "object") {
+    /** @type {Record<string, unknown>} */
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+      out[k] = redactValue(v, k);
+    }
+    return out;
+  }
+  return value;
+}
+
+/**
+ * Pretty JSON string with redaction; falls back to regex pass on non-JSON text.
+ * @param {unknown} raw — object or JSON string from API
+ * @returns {string}
+ */
+export function formatRedactedPayloadJson(raw) {
+  if (raw == null) return "";
+  let obj = raw;
+  if (typeof raw === "string") {
+    const trimmed = raw.trim();
+    try {
+      obj = JSON.parse(trimmed);
+    } catch {
+      return redactRawJsonString(trimmed);
+    }
+  }
+  const redacted = redactValue(obj, "");
+  try {
+    return JSON.stringify(redacted, null, 2);
+  } catch {
+    return String(raw);
+  }
+}
+
+/**
+ * Best-effort redaction when the body is not valid JSON.
+ * @param {string} s
+ */
+function redactRawJsonString(s) {
+  let out = s;
+  out = out.replace(/"((?:[^"\\]|\\.)*)"\s*:\s*"((?:[^"\\]|\\.)*)"/g, (match, key, val) => {
+    const keyStr = String(key).replace(/\\"/g, '"');
+    if (SENSITIVE_KEY_RE.test(keyStr)) {
+      return `"${key}":"[REDACTED]"`;
+    }
+    const unescaped = val.replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+    if (unescaped.length > 48) {
+      return `"${key}":"${unescaped.slice(0, 8)}…[${unescaped.length} chars]"`;
+    }
+    return match;
+  });
+  return out;
+}
@@ -0,0 +1,253 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <div class="head-left">
+          <el-button link type="primary" @click="goList">← 收件箱</el-button>
+          <span class="title">Callback 详情</span>
+          <el-tag v-if="row" :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
+        </div>
+      </div>
+    </template>
+
+    <el-skeleton v-if="loading" :rows="8" animated />
+
+    <template v-else-if="row">
+      <el-descriptions :column="2" border class="block">
+        <el-descriptions-item label="ID">{{ row.id ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="来源系统">{{ row.sourceSystem ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="外部消息 ID">{{ row.externalMessageId ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="事件类型">{{ row.eventType ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="Schema 版本">{{ row.schemaVersion ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="幂等键">{{ row.idempotencyKey ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="SN">{{ row.snCode ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="项目 ID">{{ row.projectId ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="合同 ID">{{ row.contractId ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="许可 SN ID">{{ row.licenseSnId ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="产品线 ID">{{ row.productLineId ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="环境 ID">{{ row.integrationEnvironmentId ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="收件时间">{{ formatDateTime(row.receivedAt) }}</el-descriptions-item>
+        <el-descriptions-item label="处理时间">{{ formatDateTime(row.processedAt) }}</el-descriptions-item>
+        <el-descriptions-item label="失败原因" :span="2">{{ row.failureReason ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">{{ row.operatorNote ?? "—" }}</el-descriptions-item>
+      </el-descriptions>
+
+      <h3 class="section-title">Payload（脱敏预览）</h3>
+      <pre class="payload-pre">{{ payloadDisplay }}</pre>
+
+      <h3 v-if="isPending" class="section-title">状态处置</h3>
+      <div v-if="isPending" class="status-row">
+        <el-button type="success" :loading="patchingStatus" @click="setStatus('PROCESSED')">标为已处理</el-button>
+        <el-button type="danger" :loading="patchingStatus" @click="setStatus('FAILED')">标为失败</el-button>
+        <el-button type="info" :loading="patchingStatus" @click="setStatus('IGNORED')">忽略</el-button>
+      </div>
+
+      <h3 class="section-title">人工挂接（可选）</h3>
+      <el-form label-width="120px" style="max-width: 520px">
+        <el-form-item label="许可 SN ID">
+          <el-input v-model="linkForm.licenseSnId" clearable placeholder="UUID 或数字 ID" />
+        </el-form-item>
+        <el-form-item label="项目 ID">
+          <el-input v-model="linkForm.projectId" clearable placeholder="选填" />
+        </el-form-item>
+        <el-form-item label="合同 ID">
+          <el-input v-model="linkForm.contractId" clearable placeholder="选填" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="savingLink" @click="saveLink">保存挂接</el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+
+    <el-empty v-else description="未加载到记录" />
+  </el-card>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import { getCallbackInbox, patchCallbackInboxStatus, patchCallbackInboxLink } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+import { formatRedactedPayloadJson } from "../utils/redactPayload";
+
+const auth = useAuthStore();
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(false);
+const patchingStatus = ref(false);
+const savingLink = ref(false);
+const row = ref(null);
+
+const linkForm = reactive({
+  licenseSnId: "",
+  projectId: "",
+  contractId: "",
+});
+
+const inboxId = computed(() => route.params.id);
+
+const isPending = computed(() => String(row.value?.status ?? "").toUpperCase() === "PENDING");
+
+const payloadDisplay = computed(() => {
+  const r = row.value;
+  if (!r) return "—";
+  const raw = r.rawPayload ?? r.raw_payload ?? null;
+  if (raw == null || raw === "") return "—";
+  return formatRedactedPayloadJson(raw);
+});
+
+function statusLabel(s) {
+  const u = String(s ?? "").toUpperCase();
+  const map = { PENDING: "待处理", PROCESSED: "已处理", FAILED: "失败", IGNORED: "忽略" };
+  return map[u] ?? String(s ?? "—");
+}
+
+function statusTagType(s) {
+  const u = String(s ?? "").toUpperCase();
+  if (u === "PENDING") return "warning";
+  if (u === "PROCESSED") return "success";
+  if (u === "FAILED") return "danger";
+  if (u === "IGNORED") return "info";
+  return "";
+}
+
+function formatDateTime(v) {
+  if (v == null || v === "") return "—";
+  if (typeof v === "string") return v.replace("T", " ").slice(0, 19);
+  return String(v);
+}
+
+watch(
+  () => row.value,
+  (r) => {
+    if (!r) return;
+    linkForm.licenseSnId = r.licenseSnId != null ? String(r.licenseSnId) : "";
+    linkForm.projectId = r.projectId != null ? String(r.projectId) : "";
+    linkForm.contractId = r.contractId != null ? String(r.contractId) : "";
+  },
+  { immediate: true }
+);
+
+onMounted(async () => {
+  auth.restoreAxiosAuth();
+  await load();
+});
+
+watch(
+  () => route.params.id,
+  async () => {
+    await load();
+  }
+);
+
+function goList() {
+  router.push({ name: "callback-inbox" });
+}
+
+async function load() {
+  const id = inboxId.value;
+  if (id == null || id === "") return;
+  loading.value = true;
+  try {
+    const { data } = await getCallbackInbox(id);
+    row.value = data && typeof data === "object" ? data : null;
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载详情失败"));
+    row.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function setStatus(status) {
+  const id = inboxId.value;
+  if (id == null) return;
+  const label = statusLabel(status);
+  try {
+    await ElMessageBox.confirm(`确认将状态更新为「${label}」？`, "确认", { type: "warning" });
+  } catch {
+    return;
+  }
+  patchingStatus.value = true;
+  try {
+    await patchCallbackInboxStatus(id, { status });
+    ElMessage.success("状态已更新");
+    await load();
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "状态更新失败"));
+  } finally {
+    patchingStatus.value = false;
+  }
+}
+
+async function saveLink() {
+  const id = inboxId.value;
+  if (id == null) return;
+  const body = {};
+  if (linkForm.licenseSnId?.trim()) body.licenseSnId = linkForm.licenseSnId.trim();
+  if (linkForm.projectId?.trim()) body.projectId = linkForm.projectId.trim();
+  if (linkForm.contractId?.trim()) body.contractId = linkForm.contractId.trim();
+  if (Object.keys(body).length === 0) {
+    ElMessage.warning("请至少填写一项挂接字段");
+    return;
+  }
+  savingLink.value = true;
+  try {
+    await patchCallbackInboxLink(id, body);
+    ElMessage.success("挂接已保存");
+    await load();
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "保存挂接失败"));
+  } finally {
+    savingLink.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.head-left {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.block {
+  margin-bottom: 20px;
+}
+.section-title {
+  margin: 16px 0 8px;
+  font-size: 15px;
+  font-weight: 600;
+}
+.status-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.payload-pre {
+  margin: 0;
+  padding: 12px;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: auto;
+  max-height: 420px;
+}
+</style>
@@ -0,0 +1,159 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <span class="title">Callback 收件箱</span>
+        <div class="actions">
+          <el-select v-model="filterStatus" clearable placeholder="状态" class="filter" style="width: 140px">
+            <el-option label="待处理 (PENDING)" value="PENDING" />
+            <el-option label="已处理 (PROCESSED)" value="PROCESSED" />
+            <el-option label="失败 (FAILED)" value="FAILED" />
+            <el-option label="忽略 (IGNORED)" value="IGNORED" />
+          </el-select>
+          <el-input v-model="filterEventType" clearable placeholder="事件类型" class="filter" style="width: 160px" @keyup.enter="load" />
+          <el-input v-model="filterSnCode" clearable placeholder="SN 编码" class="filter" style="width: 140px" @keyup.enter="load" />
+          <el-input v-model="filterProjectId" clearable placeholder="项目 ID" class="filter" style="width: 120px" @keyup.enter="load" />
+          <el-button type="primary" :loading="loading" @click="load">查询</el-button>
+        </div>
+      </div>
+    </template>
+
+    <el-table v-loading="loading" :data="rows" stripe style="width: 100%">
+      <el-table-column prop="sourceSystem" label="来源" width="120" show-overflow-tooltip />
+      <el-table-column prop="externalMessageId" label="外部消息 ID" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="eventType" label="事件类型" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="snCode" label="SN" width="120" show-overflow-tooltip />
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">
+          <el-tag :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="收件时间" width="170">
+        <template #default="{ row }">{{ formatDateTime(row.receivedAt) }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" fixed="right">
+        <template #default="{ row }">
+          <el-button type="primary" link @click="goDetail(row.id)">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pager">
+      <el-pagination
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="onSizeChange"
+      />
+    </div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import { listCallbackInbox } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+const router = useRouter();
+
+const loading = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const filterStatus = ref("");
+const filterEventType = ref("");
+const filterSnCode = ref("");
+const filterProjectId = ref("");
+
+onMounted(async () => {
+  auth.restoreAxiosAuth();
+  await load();
+});
+
+function onSizeChange() {
+  page.value = 1;
+  load();
+}
+
+function statusLabel(s) {
+  const u = String(s ?? "").toUpperCase();
+  const map = { PENDING: "待处理", PROCESSED: "已处理", FAILED: "失败", IGNORED: "忽略" };
+  return map[u] ?? String(s ?? "—");
+}
+
+function statusTagType(s) {
+  const u = String(s ?? "").toUpperCase();
+  if (u === "PENDING") return "warning";
+  if (u === "PROCESSED") return "success";
+  if (u === "FAILED") return "danger";
+  if (u === "IGNORED") return "info";
+  return "";
+}
+
+function formatDateTime(v) {
+  if (v == null || v === "") return "—";
+  if (typeof v === "string") return v.replace("T", " ").slice(0, 19);
+  return String(v);
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const { data } = await listCallbackInbox({
+      page: page.value - 1,
+      size: pageSize.value,
+      status: filterStatus.value || undefined,
+      eventType: filterEventType.value?.trim() || undefined,
+      snCode: filterSnCode.value?.trim() || undefined,
+      projectId: filterProjectId.value?.trim() || undefined,
+    });
+    const body = data && typeof data === "object" ? data : {};
+    rows.value = Array.isArray(body.content) ? body.content : [];
+    total.value = Number(body.totalElements ?? body.total ?? 0);
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载 Callback 收件箱失败"));
+    rows.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function goDetail(id) {
+  router.push({ name: "callback-inbox-detail", params: { id: String(id) } });
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.pager {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
@@ -0,0 +1,98 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <span class="title">集成环境</span>
+        <el-button type="primary" :loading="loading" @click="load">刷新</el-button>
+      </div>
+    </template>
+
+    <el-table v-loading="loading" :data="rows" stripe style="width: 100%">
+      <el-table-column prop="code" label="编码" width="140" show-overflow-tooltip />
+      <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="kind" label="类型" width="120" show-overflow-tooltip />
+      <el-table-column label="比特 URL" min-width="220" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.bitanswerBaseUrl ?? row.bitanswer_base_url ?? "—" }}</template>
+      </el-table-column>
+      <el-table-column label="产品线 ID" width="120">
+        <template #default="{ row }">{{ row.productLineId ?? row.product_line_id ?? "—" }}</template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pager">
+      <el-pagination
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="onSizeChange"
+      />
+    </div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import { listIntegrationEnvironments } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+const loading = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+
+onMounted(async () => {
+  auth.restoreAxiosAuth();
+  await load();
+});
+
+function onSizeChange() {
+  page.value = 1;
+  load();
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const { data } = await listIntegrationEnvironments({
+      page: page.value - 1,
+      size: pageSize.value,
+    });
+    const body = data && typeof data === "object" ? data : {};
+    rows.value = Array.isArray(body.content) ? body.content : Array.isArray(data) ? data : [];
+    total.value = Number(body.totalElements ?? body.total ?? rows.value.length);
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载集成环境失败"));
+    rows.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.pager {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
@@ -0,0 +1,100 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <span class="title">产品线</span>
+        <el-button type="primary" :loading="loading" @click="load">刷新</el-button>
+      </div>
+    </template>
+
+    <el-table v-loading="loading" :data="rows" stripe style="width: 100%">
+      <el-table-column prop="code" label="编码" width="160" show-overflow-tooltip />
+      <el-table-column prop="name" label="名称" min-width="180" show-overflow-tooltip />
+      <el-table-column label="描述" min-width="200" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.description ?? "—" }}</template>
+      </el-table-column>
+      <el-table-column label="启用" width="90">
+        <template #default="{ row }">
+          <el-tag v-if="row.enabled === false || row.active === false" type="info" size="small">否</el-tag>
+          <el-tag v-else type="success" size="small">是</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pager">
+      <el-pagination
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="onSizeChange"
+      />
+    </div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import { listProductLines } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+const loading = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+
+onMounted(async () => {
+  auth.restoreAxiosAuth();
+  await load();
+});
+
+function onSizeChange() {
+  page.value = 1;
+  load();
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const { data } = await listProductLines({
+      page: page.value - 1,
+      size: pageSize.value,
+    });
+    const body = data && typeof data === "object" ? data : {};
+    rows.value = Array.isArray(body.content) ? body.content : Array.isArray(data) ? data : [];
+    total.value = Number(body.totalElements ?? body.total ?? rows.value.length);
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载产品线失败"));
+    rows.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.pager {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>