idea结合CopilotChat进行样式调整实践

一、前言：

本文主要分享在前端开发中借助AI能力调整样式，提高开发效率

对应视频【idea结合CopilotChat进行样式调整实践-哔哩哔哩】

二、实践：

2-1、现状确认：

表格上方新增了button、swtich、select组件，需要调整成在一行显示【当前select组件显示在了第二行】

2-2、待修改样式确认：

定位到我们需要修改的样式class为table-header，当前为底部外边距15px，复制class名称

2-3、idea代码定位&让Copilot给出修改案例

回车后测试Copilot生成的样式

.table-header {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

可见el-select组件和其它组件在一行中显示，但是el-switch的text内容没有在一行显示：

2-4、 再次提问Copilot，让其调整el-switch样式，text内容在一行显示

参考给出的案例，调整table-header样式为

.table-header {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

2-5、最终测试验证