best_yunwei
/
ai_images
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 管理后台，优化订单表格显示列宽，生成结果如果是失败时只显示中文或编号，浮窗显示完整信息

This commit is contained in:
yys 2026-04-14 11:31:26 +08:00
parent b9e08938e0
commit fedaef2ff7
1 changed files with 107 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
admin-ui/src/views/ai/order/index.vue
View File

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