上周在优化报价组的排查工具，主要是写一些前端。总结了一下，作为后端开发，写前端关注两个点就够了：
1. 首先是从数据和交互的角度出发，为各种类型的数据选择合适的组件
2. 其次是从用户体验出发找到合适的样式风格。之前就感觉像饿了么，得物，Instagram 整体风格比较简洁，美团相对就比较乱，在完善工具样式的时候，发现前面这一普遍类都采用了**高饱和度白色背景，小图标，大留白**的风格，所以能给人以整洁干净的感受。
<!-- more -->
- [总体风格](#%E6%80%BB%E4%BD%93%E9%A3%8E%E6%A0%BC)
- [一个好的搜索框是什么样的？](#%E4%B8%80%E4%B8%AA%E5%A5%BD%E7%9A%84%E6%90%9C%E7%B4%A2%E6%A1%86%E6%98%AF%E4%BB%80%E4%B9%88%E6%A0%B7%E7%9A%84%EF%BC%9F)
- [好的详情页是什么样的？](#%E5%A5%BD%E7%9A%84%E8%AF%A6%E6%83%85%E9%A1%B5%E6%98%AF%E4%BB%80%E4%B9%88%E6%A0%B7%E7%9A%84%EF%BC%9F)
- [卡片风格](#%E5%8D%A1%E7%89%87%E9%A3%8E%E6%A0%BC)
- [重要信息前置](#%E9%87%8D%E8%A6%81%E4%BF%A1%E6%81%AF%E5%89%8D%E7%BD%AE)
- [枚举性质数据用高亮表示](#%E6%9E%9A%E4%B8%BE%E6%80%A7%E8%B4%A8%E6%95%B0%E6%8D%AE%E7%94%A8%E9%AB%98%E4%BA%AE%E8%A1%A8%E7%A4%BA)
- [时间轴设计](#%E6%97%B6%E9%97%B4%E8%BD%B4%E8%AE%BE%E8%AE%A1)
- [重要字段便于复制](#%E9%87%8D%E8%A6%81%E5%AD%97%E6%AE%B5%E4%BE%BF%E4%BA%8E%E5%A4%8D%E5%88%B6)
- [图标表意](#%E5%9B%BE%E6%A0%87%E8%A1%A8%E6%84%8F)
- [必要信息](#%E5%BF%85%E8%A6%81%E4%BF%A1%E6%81%AF)
- [默认展开](#%E9%BB%98%E8%AE%A4%E5%B1%95%E5%BC%80)
- [表头凸显](#%E8%A1%A8%E5%A4%B4%E5%87%B8%E6%98%BE)
- [表格规整](#%E8%A1%A8%E6%A0%BC%E8%A7%84%E6%95%B4)
- [两列 diff 高亮设计](#%E4%B8%A4%E5%88%97%20diff%20%E9%AB%98%E4%BA%AE%E8%AE%BE%E8%AE%A1)
- [溯源工具 - 视口](#%E6%BA%AF%E6%BA%90%E5%B7%A5%E5%85%B7%20-%20%E8%A7%86%E5%8F%A3)
## 总体风格
## 一个好的搜索框是什么样的？
1. 搜索前
1. all in on，只有一个框，前端做判断 `const trimmedValue = traceIdOrOrderNo.value.trim()` `trimmedValue.startsWith("ops_slugger_")`
2. 支持回车，在输入框上添加了 `@keyup.enter="debouncedSearch"` 事件处理，允许用户按回车键搜索。
2. 搜索中 [防抖搜索](防抖搜索.md) 功能: 使用 `lodash` 的 `debounce` 函数来创建一个防抖的搜索函数,这可以有效地减少不必要的 API 调用。
1. 转圈
3. 搜索后
1. 成功失败提示
## 好的详情页是什么样的？
### 卡片风格
三板斧：card、圆角、阴影
```js
<el-card shadow="always" round class="box-card">
.box-card {
border-radius: 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding-top: 1px;
margin-top: 30px;
margin-bottom: 30px; /* 增加下边距 */
}
```
### 重要信息前置
#### 枚举性质数据用高亮表示
#### 时间轴设计
#### 重要字段便于复制
#### 图标表意
### 必要信息
#### 默认展开
#### 表头凸显
#### 表格规整
#### 两列 diff 高亮设计
忽略小数位数的 diff
```js
// 比较每个元素，忽略小数位数
return oldArr.some((oldVal, index) => {
const oldNum = parseFloat(oldVal);
const newNum = parseFloat(newArr[index]);
// 如果解析失败（非数字），直接比较字符串
if (isNaN(oldNum) || isNaN(newNum)) {
return oldVal !== newArr[index];
}
// 比较整数部分
return Math.floor(oldNum) !== Math.floor(newNum);
});
```
## 溯源工具 - 视口
- 定义：
- 不同于 px 固定高度，% 表示相对父元素的比例，视口是浏览器中实际显示网页内容的部分。不包括浏览器的工具栏、滚动条等界面元素。使用 vw 单位：1vw 等于视口宽度的 1%。
- 100vw 表示整个视口的宽度。
- 响应式设计中的作用：
- 允许设计根据不同设备的视口大小自动调整布局。
- 帮助创建在各种屏幕尺寸上都能良好显示的网页。
```css
.iframe-container {
height: 90vh;
width: 87vw;
overflow: hidden;
}
.iframe-main {
padding: 0;
height: 100%;
}
.full-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
```