feat(crm): 新增JSON表格输入组件并优化客户管理页面
refactor(OrderDetail): 允许orderId为undefined并添加空值检查 feat(JSONTableInput): 新增支持JSON与表格双向绑定的通用组件 refactor(customer): 重构客户详情页面，优化表单交互和字段映射 style(KLPList): 简化列表组件样式并修复字段显示逻辑
This commit is contained in:
砂糖
@@ -1,98 +1,64 @@
|
||||
<template>
|
||||
<div class="klp-list-container">
|
||||
<!-- 列表加载状态（Element UI Vue2 支持 v-loading 指令） -->
|
||||
<div v-loading="loading" class="list-loading-wrapper">
|
||||
<!-- 列表项渲染（分两行布局） -->
|
||||
<div
|
||||
v-for="(item, index) in listData"
|
||||
:key="item[listKey] || index"
|
||||
class="klp-list-item"
|
||||
:class="{ 'active': isSelected(item) }"
|
||||
@click.stop="handleItemClick(item)"
|
||||
<div class="simple-list-container">
|
||||
<!-- 加载状态容器 -->
|
||||
<div v-loading="loading" class="list-wrapper">
|
||||
<!-- 列表项循环 -->
|
||||
<div
|
||||
v-for="(item, index) in listData"
|
||||
:key="item[listKey] || index"
|
||||
class="list-item"
|
||||
:class="{ active: isSelected(item) }"
|
||||
@click="handleItemClick(item)"
|
||||
>
|
||||
<!-- 核心内容区：分两行展示6个信息位 -->
|
||||
<div class="klp-list-content">
|
||||
<!-- 第一行：主标题 + 副标题 + 状态（info1~info3） -->
|
||||
<div class="klp-list-row klp-list-row1" :style="{ gap: `${rowGap}px` }">
|
||||
<!-- 信息位1：主标题（保留原Tooltip溢出检测） -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info1', item)">
|
||||
<slot name="info1" :item="item" :isSelected="isSelected(item)">
|
||||
<!-- Vue2 作用域插槽后备内容需用 template + slot-scope 包裹 -->
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<el-tooltip
|
||||
:content="item[info1Field]"
|
||||
placement="top"
|
||||
:disabled="!isContentOverflow(item, 'info1')"
|
||||
effect="light"
|
||||
>
|
||||
<span class="info-value info-value--primary">{{ item[info1Field] }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<!-- 左侧内容区：两行布局 -->
|
||||
<div class="list-content">
|
||||
<!-- 第一行：field1-field3 -->
|
||||
<div class="content-row row1">
|
||||
<div class="field-item" v-if="showField('field1', item)">
|
||||
<slot name="field1" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text field1-text">{{ item[field1] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 信息位2：副标题 -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info2', item)">
|
||||
<slot name="info2" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info2Field] }}</span>
|
||||
</template>
|
||||
<div class="field-item" v-if="showField('field2', item)">
|
||||
<slot name="field2" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field2] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 信息位3：状态（常用插槽自定义，如标签） -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info3', item)">
|
||||
<slot name="info3" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info3Field] }}</span>
|
||||
</template>
|
||||
<div class="field-item" v-if="showField('field3', item)">
|
||||
<slot name="field3" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field3] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：时间 + 数量 + 备注（info4~info6） -->
|
||||
<div class="klp-list-row klp-list-row2" :style="{ gap: `${rowGap}px`, marginBottom: `${rowMarginBottom}px` }">
|
||||
<!-- 信息位4：时间 -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info4', item)">
|
||||
<slot name="info4" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info4Field] }}</span>
|
||||
</template>
|
||||
<!-- 第二行：field4-field6 -->
|
||||
<div class="content-row row2">
|
||||
<div class="field-item" v-if="showField('field4', item)">
|
||||
<slot name="field4" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field4] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 信息位5：数量/金额 -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info5', item)">
|
||||
<slot name="info5" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info5Field] }}</span>
|
||||
</template>
|
||||
<div class="field-item" v-if="showField('field5', item)">
|
||||
<slot name="field5" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field5] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 信息位6：备注 -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info6', item)">
|
||||
<slot name="info6" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info6Field] }}</span>
|
||||
</template>
|
||||
<div class="field-item" v-if="showField('field6', item)">
|
||||
<slot name="field6" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field6] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧操作按钮组（位置不变） -->
|
||||
<div class="klp-list-actions">
|
||||
<slot name="actions" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<!-- 操作栏后备内容（若父组件未提供则显示空） -->
|
||||
</template>
|
||||
</slot>
|
||||
<!-- 右侧操作区 -->
|
||||
<div class="list-actions">
|
||||
<slot name="actions" :item="item" :selected="isSelected(item)"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态提示（Vue2 需显式注册 ElEmpty 组件） -->
|
||||
<div v-if="listData.length === 0 && !loading" class="klp-list-empty">
|
||||
<!-- 空状态 -->
|
||||
<div v-if="listData.length === 0 && !loading" class="empty-wrap">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,347 +67,201 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "KLPList",
|
||||
name: "SimpleList",
|
||||
// 注册Element UI组件（确保全局未注册时可用）
|
||||
components: {
|
||||
ElEmpty: () => import("element-ui/lib/empty"),
|
||||
ElTooltip: () => import("element-ui/lib/tooltip")
|
||||
},
|
||||
props: {
|
||||
// ---------------------- 原有核心Props（保留） ----------------------
|
||||
/** 列表数据源（必传） */
|
||||
// 核心必传
|
||||
listData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
/** 列表项唯一标识字段（必传） */
|
||||
listKey: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true, // 列表项唯一标识字段（如id）
|
||||
default: "id"
|
||||
},
|
||||
/** 列表加载状态 */
|
||||
loading: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
|
||||
// ---------------------- 新增：6个信息位配置 ----------------------
|
||||
// 信息位1（主标题，兼容原titleField）
|
||||
info1Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "title" // 默认对应原titleField
|
||||
},
|
||||
// 信息位2（副标题）
|
||||
info2Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 信息位3（状态）
|
||||
info3Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 信息位4（时间）
|
||||
info4Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 信息位5（数量/金额）
|
||||
info5Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 信息位6（备注）
|
||||
info6Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 6个字段配置（非必传，传了就显示，支持插槽覆盖）
|
||||
field1: { type: String, default: "" }, // 第一行第一个（主标题）
|
||||
field2: { type: String, default: "" }, // 第一行第二个
|
||||
field3: { type: String, default: "" }, // 第一行第三个
|
||||
field4: { type: String, default: "" }, // 第二行第一个
|
||||
field5: { type: String, default: "" }, // 第二行第二个
|
||||
field6: { type: String, default: "" }, // 第二行第三个
|
||||
|
||||
// ---------------------- 新增：样式控制Props ----------------------
|
||||
/** 每行内部信息位的间距（px） */
|
||||
rowGap: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 16 // 默认间距16px
|
||||
},
|
||||
/** 两行之间的垂直间距（px） */
|
||||
rowMarginBottom: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 4 // 默认4px
|
||||
},
|
||||
/** 主标题最大宽度占内容区的百分比（控制溢出） */
|
||||
info1MaxPercent: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 60 // 主标题占比下调，给其他信息位留空间
|
||||
}
|
||||
// 样式配置（可选）
|
||||
rowGap: { type: Number, default: 12 }, // 每行内字段间距（px）
|
||||
rowMargin: { type: Number, default: 6 }, // 两行之间的间距（px）
|
||||
itemPadding: { type: Number, default: 10 } // 列表项内边距（px）
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedKey: null, // 选中状态（不变）
|
||||
overflowCheckElements: {}, // 溢出检测临时元素（不变）
|
||||
containerWidth: 0 // 容器宽度缓存（不变）
|
||||
selectedItemKey: null // 选中项的唯一标识
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// ---------------------- 原有核心方法（保留+微调） ----------------------
|
||||
/** 判断列表项是否选中（不变） */
|
||||
// 判断项是否选中
|
||||
isSelected(item) {
|
||||
const itemKey = item[this.listKey];
|
||||
return this.selectedKey === itemKey;
|
||||
return this.selectedItemKey === item[this.listKey];
|
||||
},
|
||||
|
||||
/** 列表项点击事件（不变） */
|
||||
// 列表项点击事件
|
||||
handleItemClick(item) {
|
||||
const itemKey = item[this.listKey];
|
||||
this.selectedKey = itemKey;
|
||||
const selectedItem = this.selectedKey ? item : null;
|
||||
this.$emit("item-click", selectedItem, item);
|
||||
this.selectedItemKey = item[this.listKey];
|
||||
this.$emit("item-click", item); // 向外抛出选中项
|
||||
},
|
||||
|
||||
/** 清空选中状态（不变） */
|
||||
clearSelection() {
|
||||
this.selectedKey = null;
|
||||
this.$emit("selection-cleared");
|
||||
// 简化版：判断字段是否显示（有插槽 或 配置了字段且值有效）
|
||||
showField(fieldKey, item) {
|
||||
// 1. 有插槽则强制显示（不管字段有没有值）
|
||||
if (this.$scopedSlots[fieldKey]) return true;
|
||||
|
||||
// 2. 无插槽时：配置了字段名 + 字段值非空（兼容0/false等有效数据）
|
||||
const fieldName = this[fieldKey];
|
||||
if (!fieldName) return false; // 没配置字段名 → 不显示
|
||||
const fieldValue = item[fieldName];
|
||||
// 仅过滤：null/undefined/空字符串（保留0、false、0.0等）
|
||||
return !(fieldValue === null || fieldValue === undefined || fieldValue === "");
|
||||
},
|
||||
|
||||
/** 主动设置选中项（不变） */
|
||||
setSelection(targetKey) {
|
||||
const isExist = this.listData.some(item => item[this.listKey] === targetKey);
|
||||
if (isExist) {
|
||||
this.selectedKey = targetKey;
|
||||
const selectedItem = this.listData.find(item => item[this.listKey] === targetKey);
|
||||
this.$emit("item-click", selectedItem);
|
||||
// 手动清空选中状态（外部调用）
|
||||
clearSelected() {
|
||||
this.selectedItemKey = null;
|
||||
this.$emit("clear-selected");
|
||||
},
|
||||
|
||||
// 手动设置选中项（外部调用）
|
||||
setSelected(key) {
|
||||
const target = this.listData.find(item => item[this.listKey] === key);
|
||||
if (target) {
|
||||
this.selectedItemKey = key;
|
||||
this.$emit("item-click", target);
|
||||
} else {
|
||||
this.selectedKey = null;
|
||||
console.warn(`列表中不存在key为${targetKey}的项`);
|
||||
console.warn(`未找到key为${key}的列表项`);
|
||||
}
|
||||
},
|
||||
|
||||
// ---------------------- 新增：信息位控制方法（适配Vue2插槽） ----------------------
|
||||
/**
|
||||
* 判断信息位是否需要显示（插槽存在 或 字段有值）
|
||||
* @param {String} infoKey - 信息位标识（info1~info6）
|
||||
* @param {Object} item - 列表项数据
|
||||
* @returns {Boolean} 是否显示
|
||||
*/
|
||||
showInfoItem(infoKey, item) {
|
||||
// 前置容错：避免item为undefined导致报错
|
||||
if (!item) return false;
|
||||
|
||||
// Vue2 作用域插槽判断：$scopedSlots 中插槽以函数形式存在
|
||||
const hasSlot = typeof this.$scopedSlots[infoKey] === 'function';
|
||||
if (hasSlot) return true;
|
||||
|
||||
// 2. 无插槽时，判断字段配置是否存在 + 字段值是否有效
|
||||
const field = this[`${infoKey}Field`];
|
||||
// 容错：字段未配置（如没传info1Field）则不显示
|
||||
if (!field) return false;
|
||||
// 字段值有效判断（排除 undefined/null/空字符串）
|
||||
return item[field] !== undefined && item[field] !== null && item[field] !== "";
|
||||
},
|
||||
|
||||
/**
|
||||
* 信息位1（主标题）溢出检测（适配新字段）
|
||||
* @param {Object} item - 列表项数据
|
||||
* @param {String} infoKey - 信息位标识（仅info1需要）
|
||||
* @returns {Boolean} 是否溢出
|
||||
*/
|
||||
isContentOverflow(item, infoKey) {
|
||||
const itemKey = item[this.listKey];
|
||||
const field = this[`${infoKey}Field`];
|
||||
const content = item[field] || "";
|
||||
|
||||
// 内容为空或无字段时不显示Tooltip
|
||||
if (!content || !field) return false;
|
||||
|
||||
// 获取内容区宽度（原容器宽度改为内容区宽度）
|
||||
// 注意：listData.indexOf(item) 可能因重复项导致索引错误，建议确保listData唯一
|
||||
const itemIndex = this.listData.indexOf(item);
|
||||
const contentEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .klp-list-content`);
|
||||
if (!contentEl) return false;
|
||||
const contentWidth = contentEl.clientWidth;
|
||||
|
||||
// 计算信息位1的最大可用宽度（减去标签宽度）
|
||||
const labelEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .info-label`);
|
||||
const labelWidth = labelEl ? labelEl.offsetWidth : 40;
|
||||
const maxWidth = (contentWidth * this.info1MaxPercent) / 100 - labelWidth - 12;
|
||||
|
||||
// 复用临时元素检测宽度（不变）
|
||||
if (!this.overflowCheckElements[itemKey]) {
|
||||
const tempEl = document.createElement("span");
|
||||
tempEl.style.cssText = `
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
`;
|
||||
tempEl.textContent = content;
|
||||
document.body.appendChild(tempEl);
|
||||
this.overflowCheckElements[itemKey] = tempEl;
|
||||
}
|
||||
|
||||
const tempEl = this.overflowCheckElements[itemKey];
|
||||
return tempEl.offsetWidth > maxWidth;
|
||||
},
|
||||
|
||||
/** 窗口 resize 重新计算（不变） */
|
||||
handleResize() {
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/** 列表数据变化时清理临时元素（不变） */
|
||||
listData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.clearSelection();
|
||||
Object.values(this.overflowCheckElements).forEach(el => {
|
||||
document.body.removeChild(el);
|
||||
});
|
||||
this.overflowCheckElements = {};
|
||||
}
|
||||
},
|
||||
|
||||
/** 主标题占比变化时重新计算溢出（适配新prop） */
|
||||
info1MaxPercent() {
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化内容区宽度（适配新结构）
|
||||
this.$nextTick(() => {
|
||||
const contentEl = this.$el.querySelector('.klp-list-content');
|
||||
this.containerWidth = contentEl ? contentEl.clientWidth : 0;
|
||||
});
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
// Vue2 销毁钩子：beforeDestroy（Vue3为onBeforeUnmount）
|
||||
beforeDestroy() {
|
||||
// 清理临时元素和事件监听（不变）
|
||||
Object.values(this.overflowCheckElements).forEach(el => {
|
||||
document.body.removeChild(el);
|
||||
});
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 列表容器（不变） */
|
||||
.klp-list-container {
|
||||
max-height: calc(100vh - 220px);
|
||||
/* 容器样式 - 哑光金属底色 */
|
||||
.simple-list-container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 加载容器（不变） */
|
||||
.list-loading-wrapper {
|
||||
/* 列表包裹层 */
|
||||
.list-wrapper {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* 列表项：改为上下两行+右侧操作的布局 */
|
||||
.klp-list-item {
|
||||
padding: 10px 12px;
|
||||
/* 增加内边距，适配两行 */
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid #f5f7fa;
|
||||
/* 弱化底边框，突出选中态 */
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
/* 列表项 - 磨砂金属质感 */
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
/* 顶部对齐，避免操作区下移 */
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: v-bind(itemPadding + 'px') 12px;
|
||||
margin-bottom: 8px;
|
||||
/* 细腻金属边框 */
|
||||
border: 1px solid #d1d5db;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background-color: #fafafa;
|
||||
/* 未选中时浅背景，区分选中态 */
|
||||
}
|
||||
|
||||
/* 列表项选中状态（不变） */
|
||||
.klp-list-item.active {
|
||||
border-left: 3px solid #2bf;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
/* 增加轻微阴影，突出选中项 */
|
||||
/* 选中态 - 金属高亮（无阴影，靠边框+渐变体现） */
|
||||
.list-item.active {
|
||||
/* 金属蓝边框（简约不夸张） */
|
||||
border-left: 3px solid #475569;
|
||||
/* 极细微内高光，模拟金属反光 */
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) inset,
|
||||
0 0 2px rgba(96, 165, 250, 0.2);
|
||||
}
|
||||
|
||||
/* 内容区：包裹两行信息位，占满剩余空间 */
|
||||
.klp-list-content {
|
||||
/* 列表项hover - 金属微亮 */
|
||||
.list-item:hover:not(.active) {
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 内容区（占满左侧） */
|
||||
.list-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* 关键：允许内容区缩小，避免溢出 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; /* 关键：避免内容溢出 */
|
||||
}
|
||||
|
||||
/* 行容器：控制单行信息位布局 */
|
||||
.klp-list-row {
|
||||
/* 行容器 */
|
||||
.content-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
/* 禁止换行，溢出省略 */
|
||||
gap: v-bind(rowGap + 'px'); /* 字段间距 */
|
||||
flex-wrap: wrap; /* 防止字段过多溢出 */
|
||||
}
|
||||
|
||||
/* 第一行间距 */
|
||||
.row1 {
|
||||
margin-bottom: v-bind(rowMargin + 'px');
|
||||
}
|
||||
|
||||
/* 字段项 - 金属质感文本容器 */
|
||||
.field-item {
|
||||
white-space: nowrap; /* 不换行 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出行的内容 */
|
||||
text-overflow: ellipsis; /* 溢出省略 */
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 信息位容器：单个信息的最小单元 */
|
||||
.klp-list-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
/* 禁止信息位内部换行 */
|
||||
}
|
||||
|
||||
/* 信息位标签：次要文字，颜色偏浅 */
|
||||
.info-label {
|
||||
color: #606266;
|
||||
/* 字段文本样式 - 金属灰调 */
|
||||
.field-text {
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
color: #475569;
|
||||
/* 文本抗锯齿，贴合金属风格 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* 信息位值：默认样式 */
|
||||
.info-value {
|
||||
color: #303133;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* 溢出显示省略号 */
|
||||
}
|
||||
|
||||
/* 主标题（info1）值：加粗突出 */
|
||||
.info-value--primary {
|
||||
/* 主标题（field1）强调 - 深金属灰 */
|
||||
.field1-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* 右侧操作区（不变，增加顶部对齐） */
|
||||
.klp-list-actions {
|
||||
/* 操作区 - 金属质感按钮容器 */
|
||||
.list-actions {
|
||||
flex-shrink: 0; /* 不被挤压 */
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
/* 与内容区顶部对齐 */
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12px;
|
||||
padding-top: 2px;
|
||||
/* 微调垂直位置 */
|
||||
gap: 8px;
|
||||
/* 哑光背景，贴合整体风格 */
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 空状态（不变） */
|
||||
.klp-list-empty {
|
||||
/* 空状态 - 金属风格适配 */
|
||||
.empty-wrap {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
/* 空状态背景与金属容器融合 */
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-radius: 6px;
|
||||
margin: 8px 0;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user