恢复相似案例卡片优化展示
- 恢复 TOP 1 至 TOP 5 的独立标签布局\n- 恢复案例长文本自动换行和相似度展示\n- 优化移动端相似案例布局\n- 保持 AI 预防建议基础展示格式不变
This commit is contained in:
parent
32739944c7
commit
f0a940eb10
@ -41,6 +41,13 @@ interface CardData extends AssistantResponseCard {
|
||||
confidence?: string;
|
||||
analysisBase?: string;
|
||||
risks?: Array<{ level: string; title: string; detail: string }>;
|
||||
similarCases?: Array<{
|
||||
date?: string | null;
|
||||
product?: string | null;
|
||||
problem?: string | null;
|
||||
solution?: string | null;
|
||||
similarity?: number | null;
|
||||
}>;
|
||||
warning?: string;
|
||||
}
|
||||
const data = computed(() => props.card as CardData);
|
||||
@ -224,6 +231,26 @@ function formatCount(value: unknown) {
|
||||
当前标准库暂无可匹配规则,请补充产品品类、包材或检测指标。
|
||||
</p>
|
||||
</section>
|
||||
<section v-if="data.similarCases?.length" class="solution-section">
|
||||
<h4>相似历史案例</h4>
|
||||
<div
|
||||
v-for="(item, index) in data.similarCases"
|
||||
:key="`${item.date}-${index}`"
|
||||
class="standard-row"
|
||||
>
|
||||
<span>TOP {{ index + 1 }}</span>
|
||||
<div>
|
||||
<b>{{ item.product || "未命名产品" }}</b>
|
||||
<small
|
||||
>{{ item.problem || "异常问题未填写" }} →
|
||||
{{ item.solution || "解决方案未填写" }}
|
||||
<em v-if="item.similarity != null"
|
||||
>相似度 {{ Math.round(item.similarity * 100) }}%</em
|
||||
></small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="data.risks?.length" class="solution-section risk-list">
|
||||
<div v-for="risk in data.risks" :key="risk.title" class="solution-risk">
|
||||
<span>{{ risk.level }}</span>
|
||||
@ -495,6 +522,7 @@ function formatCount(value: unknown) {
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.solution-risk {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
|
||||
@ -238,11 +238,18 @@ const stars = computed(() => {
|
||||
class="case-row"
|
||||
type="button"
|
||||
>
|
||||
<span>TOP {{ index + 1 }}</span>
|
||||
<small
|
||||
>{{ item.date }} · {{ item.product }} · {{ item.problem }} →
|
||||
{{ item.solution }}</small
|
||||
<span class="case-rank">TOP {{ index + 1 }}</span>
|
||||
<div class="case-content">
|
||||
<small>
|
||||
{{ item.date || "日期未知" }} ·
|
||||
{{ item.product || "未命名产品" }} ·
|
||||
{{ item.problem || "异常问题未填写" }} →
|
||||
{{ item.solution || "解决方案未填写" }}
|
||||
<em v-if="item.similarity != null"
|
||||
>相似度 {{ Math.round(item.similarity * 100) }}%</em
|
||||
>
|
||||
</small>
|
||||
</div>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
@ -644,8 +651,8 @@ h3 {
|
||||
.case-row {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto auto;
|
||||
align-items: center;
|
||||
grid-template-columns: 58px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
@ -656,22 +663,36 @@ h3 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.case-row span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
.case-rank {
|
||||
display: inline-flex;
|
||||
width: 58px;
|
||||
min-width: 58px;
|
||||
justify-content: flex-start;
|
||||
padding-top: 1px;
|
||||
color: var(--color-accent);
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.case-row small {
|
||||
.case-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.case-content small {
|
||||
display: block;
|
||||
color: var(--color-text-faint);
|
||||
font-size: 9px;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.case-row strong {
|
||||
.case-content em {
|
||||
margin-left: 6px;
|
||||
color: var(--color-accent);
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
@ -735,11 +756,16 @@ h3 {
|
||||
}
|
||||
|
||||
.case-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
grid-template-columns: 50px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.case-row small {
|
||||
display: none;
|
||||
.case-rank {
|
||||
width: 50px;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.case-content small {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -39,10 +39,11 @@ export interface RiskAssessmentResult {
|
||||
modelVersion: string;
|
||||
factors: RiskFactorResult[];
|
||||
similarCases?: Array<{
|
||||
date: string;
|
||||
product: string;
|
||||
problem: string;
|
||||
solution: string;
|
||||
date?: string | null;
|
||||
product?: string | null;
|
||||
problem?: string | null;
|
||||
solution?: string | null;
|
||||
similarity?: number | null;
|
||||
}>;
|
||||
aiSuggestions?: string[];
|
||||
riskBadge?: string | null;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user