fix: 统一知识库卡片布局
- FAQ 与文档知识库统一使用标题下方类型标签 - 同排卡片底部操作栏保持贴底对齐
This commit is contained in:
@@ -22,6 +22,7 @@ import { $t } from '#/locales';
|
|||||||
|
|
||||||
export type ActionPlacement = 'inline' | 'menu';
|
export type ActionPlacement = 'inline' | 'menu';
|
||||||
export type ActionTone = 'danger' | 'default';
|
export type ActionTone = 'danger' | 'default';
|
||||||
|
export type TagLayout = 'inline' | 'stacked';
|
||||||
|
|
||||||
export interface ActionButton {
|
export interface ActionButton {
|
||||||
icon?: any;
|
icon?: any;
|
||||||
@@ -60,6 +61,7 @@ export interface CardListProps {
|
|||||||
data: any[];
|
data: any[];
|
||||||
primaryAction?: CardPrimaryAction;
|
primaryAction?: CardPrimaryAction;
|
||||||
tagField?: string;
|
tagField?: string;
|
||||||
|
tagLayout?: TagLayout;
|
||||||
tagMap?: Record<string, string>;
|
tagMap?: Record<string, string>;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -73,6 +75,7 @@ const props = withDefaults(defineProps<CardListProps>(), {
|
|||||||
cornerTagTypeMap: () => ({}),
|
cornerTagTypeMap: () => ({}),
|
||||||
primaryAction: undefined,
|
primaryAction: undefined,
|
||||||
tagField: '',
|
tagField: '',
|
||||||
|
tagLayout: 'inline',
|
||||||
tagMap: () => ({}),
|
tagMap: () => ({}),
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -205,7 +208,10 @@ function resolveMetaItems(item: any) {
|
|||||||
:size="44"
|
:size="44"
|
||||||
/>
|
/>
|
||||||
<div class="card-meta">
|
<div class="card-meta">
|
||||||
<div class="title-row">
|
<div
|
||||||
|
class="title-row"
|
||||||
|
:class="{ 'title-row--stacked': tagLayout === 'stacked' }"
|
||||||
|
>
|
||||||
<ElText truncated size="large" class="card-title">
|
<ElText truncated size="large" class="card-title">
|
||||||
{{ item[titleField] }}
|
{{ item[titleField] }}
|
||||||
</ElText>
|
</ElText>
|
||||||
@@ -371,6 +377,8 @@ function resolveMetaItems(item: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-item {
|
.card-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
background: hsl(var(--card));
|
background: hsl(var(--card));
|
||||||
border: 1px solid hsl(var(--border));
|
border: 1px solid hsl(var(--border));
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
@@ -400,6 +408,7 @@ function resolveMetaItems(item: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-card__body) {
|
:deep(.el-card__body) {
|
||||||
|
flex: 1;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -447,6 +456,15 @@ function resolveMetaItems(item: any) {
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title-row--stacked {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-row--stacked .card-title {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: hsl(var(--text-strong));
|
color: hsl(var(--text-strong));
|
||||||
|
|||||||
@@ -193,4 +193,24 @@ describe('cardList', () => {
|
|||||||
|
|
||||||
expect(wrapper.find('.card-meta-row').exists()).toBe(false);
|
expect(wrapper.find('.card-meta-row').exists()).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('支持知识库使用标题与类型标签的堆叠布局', () => {
|
||||||
|
const wrapper = mountCardList({
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
collectionType: 'FAQ',
|
||||||
|
id: 'knowledge-1',
|
||||||
|
title: '常见问题',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tagField: 'collectionType',
|
||||||
|
tagLayout: 'stacked',
|
||||||
|
tagMap: {
|
||||||
|
FAQ: 'FAQ',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.get('.title-row').classes()).toContain('title-row--stacked');
|
||||||
|
expect(wrapper.get('.title-row').text()).toContain('FAQ');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -696,6 +696,7 @@ function changeCategory(category: any) {
|
|||||||
:primary-action="primaryAction"
|
:primary-action="primaryAction"
|
||||||
:actions="actions"
|
:actions="actions"
|
||||||
tag-field="collectionType"
|
tag-field="collectionType"
|
||||||
|
tag-layout="stacked"
|
||||||
:tag-map="collectionTypeLabelMap"
|
:tag-map="collectionTypeLabelMap"
|
||||||
>
|
>
|
||||||
<template #corner="{ item }">
|
<template #corner="{ item }">
|
||||||
|
|||||||
Reference in New Issue
Block a user