恢复相似案例卡片优化展示
- 恢复 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;
|
confidence?: string;
|
||||||
analysisBase?: string;
|
analysisBase?: string;
|
||||||
risks?: Array<{ level: string; title: string; detail: 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;
|
warning?: string;
|
||||||
}
|
}
|
||||||
const data = computed(() => props.card as CardData);
|
const data = computed(() => props.card as CardData);
|
||||||
@ -224,6 +231,26 @@ function formatCount(value: unknown) {
|
|||||||
当前标准库暂无可匹配规则,请补充产品品类、包材或检测指标。
|
当前标准库暂无可匹配规则,请补充产品品类、包材或检测指标。
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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">
|
<section v-if="data.risks?.length" class="solution-section risk-list">
|
||||||
<div v-for="risk in data.risks" :key="risk.title" class="solution-risk">
|
<div v-for="risk in data.risks" :key="risk.title" class="solution-risk">
|
||||||
<span>{{ risk.level }}</span>
|
<span>{{ risk.level }}</span>
|
||||||
@ -495,6 +522,7 @@ function formatCount(value: unknown) {
|
|||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
}
|
}
|
||||||
|
|
||||||
.solution-risk {
|
.solution-risk {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 7px;
|
gap: 7px;
|
||||||
|
|||||||
@ -238,11 +238,18 @@ const stars = computed(() => {
|
|||||||
class="case-row"
|
class="case-row"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span>TOP {{ index + 1 }}</span>
|
<span class="case-rank">TOP {{ index + 1 }}</span>
|
||||||
<small
|
<div class="case-content">
|
||||||
>{{ item.date }} · {{ item.product }} · {{ item.problem }} →
|
<small>
|
||||||
{{ item.solution }}</small
|
{{ item.date || "日期未知" }} ·
|
||||||
>
|
{{ item.product || "未命名产品" }} ·
|
||||||
|
{{ item.problem || "异常问题未填写" }} →
|
||||||
|
{{ item.solution || "解决方案未填写" }}
|
||||||
|
<em v-if="item.similarity != null"
|
||||||
|
>相似度 {{ Math.round(item.similarity * 100) }}%</em
|
||||||
|
>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -644,8 +651,8 @@ h3 {
|
|||||||
.case-row {
|
.case-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-template-columns: minmax(0, 1fr) auto auto auto;
|
grid-template-columns: 58px minmax(0, 1fr);
|
||||||
align-items: center;
|
align-items: start;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@ -656,22 +663,36 @@ h3 {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.case-row span {
|
.case-rank {
|
||||||
min-width: 0;
|
display: inline-flex;
|
||||||
overflow: hidden;
|
width: 58px;
|
||||||
font-size: 11px;
|
min-width: 58px;
|
||||||
text-overflow: ellipsis;
|
justify-content: flex-start;
|
||||||
|
padding-top: 1px;
|
||||||
|
color: var(--color-accent);
|
||||||
|
font-weight: 650;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.case-row small {
|
.case-content {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-content small {
|
||||||
|
display: block;
|
||||||
color: var(--color-text-faint);
|
color: var(--color-text-faint);
|
||||||
font-size: 9px;
|
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);
|
color: var(--color-accent);
|
||||||
font-size: 11px;
|
font-style: normal;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips-card {
|
.tips-card {
|
||||||
@ -735,11 +756,16 @@ h3 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.case-row {
|
.case-row {
|
||||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
grid-template-columns: 50px minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.case-row small {
|
.case-rank {
|
||||||
display: none;
|
width: 50px;
|
||||||
|
min-width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-content small {
|
||||||
|
white-space: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -39,10 +39,11 @@ export interface RiskAssessmentResult {
|
|||||||
modelVersion: string;
|
modelVersion: string;
|
||||||
factors: RiskFactorResult[];
|
factors: RiskFactorResult[];
|
||||||
similarCases?: Array<{
|
similarCases?: Array<{
|
||||||
date: string;
|
date?: string | null;
|
||||||
product: string;
|
product?: string | null;
|
||||||
problem: string;
|
problem?: string | null;
|
||||||
solution: string;
|
solution?: string | null;
|
||||||
|
similarity?: number | null;
|
||||||
}>;
|
}>;
|
||||||
aiSuggestions?: string[];
|
aiSuggestions?: string[];
|
||||||
riskBadge?: string | null;
|
riskBadge?: string | null;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user