From fedaef2ff7b15be381af0169084c659dbb598838 Mon Sep 17 00:00:00 2001
From: yys <47@gamerwa.com>
Date: Tue, 14 Apr 2026 11:31:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AE=A1=E7=90=86=E5=90=8E=E5=8F=B0?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E8=AE=A2=E5=8D=95=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=88=97=E5=AE=BD=EF=BC=8C=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E5=A6=82=E6=9E=9C=E6=98=AF=E5=A4=B1=E8=B4=A5?=
 =?UTF-8?q?=E6=97=B6=E5=8F=AA=E6=98=BE=E7=A4=BA=E4=B8=AD=E6=96=87=E6=88=96?=
 =?UTF-8?q?=E7=BC=96=E5=8F=B7=EF=BC=8C=E6=B5=AE=E7=AA=97=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=AE=8C=E6=95=B4=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin-ui/src/views/ai/order/index.vue | 140 ++++++++++++++++++++------
 1 file changed, 107 insertions(+), 33 deletions(-)

diff --git a/admin-ui/src/views/ai/order/index.vue b/admin-ui/src/views/ai/order/index.vue
index 77085bb..e41693b 100644
--- a/admin-ui/src/views/ai/order/index.vue
+++ b/admin-ui/src/views/ai/order/index.vue
@@ -93,17 +93,17 @@
 
     <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键ID" align="center" prop="id" />
+      <el-table-column label="主键ID" align="center" prop="id" width="60" />
       <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
-      <el-table-column label="订单编号" align="center" prop="orderNum" />
-      <el-table-column label="用户ID" align="center" prop="uuid" />
-      <el-table-column label="操作类型" align="center" prop="type">
+      <el-table-column label="订单编号" align="center" prop="orderNum" width="150"/>
+      <el-table-column label="用户ID" align="center" prop="uuid" width="100" />
+      <el-table-column label="操作类型" align="center" prop="type" width="90" >
         <template slot-scope="scope">
           <dict-tag :options="dict.type.ai_function_type" :value="scope.row.type" />
         </template>
       </el-table-column>
-      <el-table-column label="金额" align="center" prop="amount" />
-      <el-table-column label="生成结果" align="center">
+      <el-table-column label="金额" align="center" prop="amount" width="100" />
+      <el-table-column label="生成结果" align="center" width="200">
         <template slot-scope="scope">
           <!-- 判断是否为链接 -->
           <template v-if="isUrl(scope.row.result)">
@@ -123,19 +123,41 @@
               @click="playVideo(scope.row.result)"
             />
           </template>
-          <!-- 视频任务失败等场景：result 为 VideoTaskError JSON -->
+          <!-- 视频任务失败等场景：result 为 VideoTaskError JSON（表格内简短，悬停看全文） -->
           <template v-else-if="parseVolcTaskErrorJson(scope.row.result)">
-            <div class="order-result-error">
-              <div
-                v-if="parseVolcTaskErrorJson(scope.row.result).code"
-                class="order-result-error-line"
+            <span
+              v-for="err in [parseVolcTaskErrorJson(scope.row.result)]"
+              :key="'oe-' + scope.row.id"
+              class="order-result-error-wrap"
+            >
+              <el-tooltip
+                placement="top-start"
+                effect="dark"
+                :open-delay="200"
+                popper-class="order-result-error-tooltip-popper"
               >
-                编号：{{ volcFailureCodeWithHint(parseVolcTaskErrorJson(scope.row.result).code) }}
-              </div>
-              <div class="order-result-error-line">
-                信息：{{ parseVolcTaskErrorJson(scope.row.result).message || '—' }}
-              </div>
-            </div>
+                <div slot="content" class="order-result-error-tooltip-body">
+                  <div class="order-result-error-tooltip-row">
+                    <span class="order-result-error-tooltip-k">错误编号：</span>
+                    <span class="order-result-error-tooltip-v">{{ err.code || '—' }}</span>
+                  </div>
+                  <div
+                    v-if="volcTaskErrorHintForCode(err.code)"
+                    class="order-result-error-tooltip-row"
+                  >
+                    <span class="order-result-error-tooltip-k">中文说明：</span>
+                    <span class="order-result-error-tooltip-v">{{
+                      volcTaskErrorHintForCode(err.code)
+                    }}</span>
+                  </div>
+                  <div class="order-result-error-tooltip-row order-result-error-tooltip-row--msg">
+                    <span class="order-result-error-tooltip-k">信息：</span>
+                    <span class="order-result-error-tooltip-v">{{ err.message || '—' }}</span>
+                  </div>
+                </div>
+                <span class="order-result-error-compact">{{ volcTaskErrorCellSummary(err) }}</span>
+              </el-tooltip>
+            </span>
           </template>
           <!-- 非链接内容（如任务 id，可点击尝试拉取视频） -->
           <span v-else @click="handleOtherEvent(scope.row)">{{ scope.row.result }}</span>
@@ -159,7 +181,7 @@
           >{{ scope.row.text}}</div>
         </template>
       </el-table-column>
-      <el-table-column label="置顶" align="center" key="status">
+      <el-table-column label="置顶" align="center" key="status" width="60">
         <template slot-scope="scope">
           <el-switch
             v-model="scope.row.isTop"
@@ -169,9 +191,9 @@
           ></el-switch>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" />
-      <el-table-column label="状态" align="center" prop="status" :formatter="formatStatus" />
-      <el-table-column label="来源" align="center" prop="source" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="150"/>
+      <el-table-column label="状态" align="center" prop="status" :formatter="formatStatus" width="70"/>
+      <el-table-column label="来源" align="center" prop="source" width="70"/>
     </el-table>
 
     <pagination
@@ -323,15 +345,30 @@ export default {
       const value = String(str || "").trim();
       return /^https?:\/\//i.test(value);
     },
-    /** 已知火山错误码后附中文说明（括号） */
-    volcFailureCodeWithHint(code) {
+    /** 已知错误码对应中文说明（与门户 VideoGen 一致） */
+    volcTaskErrorHintForCode(code) {
       const c = String(code || "").trim();
-      if (!c) return "";
       const hints = {
         OutputVideoSensitiveContentDetected: "输出视频可能包含敏感信息",
         InvalidParameter: "请求参数无效"
       };
-      const hint = hints[c];
+      return hints[c] || "";
+    },
+    /** 表格内摘要：已知码只显示中文，未知码显示 code */
+    volcTaskErrorCellSummary(err) {
+      if (!err) return "—";
+      const code = String(err.code || "").trim();
+      const hint = this.volcTaskErrorHintForCode(code);
+      if (hint) return hint;
+      if (code) return code;
+      const msg = String(err.message || "").trim();
+      return msg ? msg.slice(0, 32) + (msg.length > 32 ? "…" : "") : "—";
+    },
+    /** 已知火山错误码后附中文说明（括号），导出等场景可用 */
+    volcFailureCodeWithHint(code) {
+      const c = String(code || "").trim();
+      if (!c) return "";
+      const hint = this.volcTaskErrorHintForCode(c);
       return hint ? `${c}（${hint}）` : c;
     },
     /** result 为火山回调失败写入的 VideoTaskError JSON 时解析为 { code, message } */
@@ -557,19 +594,56 @@ export default {
   height: auto;
 }
 
-.order-result-error {
-  text-align: left;
-  max-width: 280px;
-  margin: 0 auto;
-  font-size: 12px;
-  line-height: 1.45;
-  color: #c45656;
+.order-result-error-wrap {
+  display: inline-block;
 }
 
-.order-result-error-line {
+.order-result-error-compact {
+  display: inline-block;
+  max-width: 200px;
+  margin: 0 auto;
+  font-size: 12px;
+  line-height: 1.35;
+  color: #c45656;
+  cursor: help;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.order-result-error-tooltip-body {
+  max-width: 420px;
+  text-align: left;
+  line-height: 1.5;
+  font-size: 12px;
+}
+
+.order-result-error-tooltip-row {
+  margin-bottom: 6px;
+}
+
+.order-result-error-tooltip-row:last-child {
+  margin-bottom: 0;
+}
+
+.order-result-error-tooltip-row--msg .order-result-error-tooltip-v {
+  display: block;
+  margin-top: 2px;
+  white-space: pre-wrap;
   word-break: break-word;
 }
 
+.order-result-error-tooltip-k {
+  font-weight: 600;
+  color: #fde2e2;
+}
+
+.order-result-error-tooltip-v {
+  color: #fff;
+}
+
 .text-ellipsis-two-lines {
   /* 必须设置宽度（继承表格列宽，也可手动指定） */
   width: 100%;