perf: 插入工具栏UI调整

src/configs/chart.ts

@@ -1,5 +1,16 @@
 import type { ChartData } from '@/types/slides'
 
+export const CHART_TYPE_MAP: { [key: string]: string } = {
+  'bar': '柱状图',
+  'column': '条形图',
+  'line': '折线图',
+  'area': '面积图',
+  'scatter': '散点图',
+  'pie': '饼图',
+  'ring': '环形图',
+  'radar': '雷达图',
+}
+
 export const CHART_DEFAULT_DATA: { [key: string]: ChartData } = {
   'bar': {
     labels: ['类别1', '类别2', '类别3', '类别4', '类别5'],

src/views/Editor/CanvasTool/ChartPool.vue

@@ -10,6 +10,8 @@
         <IconChartRing size="24" v-else-if="chart === 'ring'" />
         <IconChartScatter size="24" v-else-if="chart === 'scatter'" />
         <IconRadarChart size="23" v-else-if="chart === 'radar'" />
+
+        <div class="name">{{ CHART_TYPE_MAP[chart] }}</div>
       </div>
     </li>
   </ul>
@@ -17,12 +19,13 @@
 
 <script lang="ts" setup>
 import type { ChartType } from '@/types/slides'
+import { CHART_TYPE_MAP } from '@/configs/chart'
 
 const emit = defineEmits<{
   (event: 'select', payload: ChartType): void
 }>()
 
-const chartList: ChartType[] = ['bar', 'column', 'line', 'area', 'scatter', 'radar', 'pie', 'ring']
+const chartList: ChartType[] = ['bar', 'column', 'line', 'area', 'scatter', 'pie', 'ring', 'radar']
 
 const selectChart = (chart: ChartType) => {
   emit('select', chart)
@@ -31,16 +34,16 @@ const selectChart = (chart: ChartType) => {
 
 <style lang="scss" scoped>
 .chart-pool {
-  width: 200px;
+  width: 240px;
   margin-bottom: -5px;
 
   @include flex-grid-layout();
 }
 .chart-item {
-  @include flex-grid-layout-children(5, 19%);
+  @include flex-grid-layout-children(4, 24%);
 
   height: 0;
-  padding-bottom: 19%;
+  padding-bottom: 25%;
   flex-shrink: 0;
   position: relative;
   cursor: pointer;
@@ -49,6 +52,7 @@ const selectChart = (chart: ChartType) => {
   @include absolute-0();
 
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   color: #999;
@@ -56,5 +60,9 @@ const selectChart = (chart: ChartType) => {
   &:hover {
     color: $themeColor;
   }
+
+  .name {
+    margin-top: 4px;
+  }
 }
 </style>

src/views/Editor/CanvasTool/LinePool.vue

@@ -74,8 +74,8 @@ const selectLine = (line: LinePoolItem) => {
   width: 100%;
   font-size: 12px;
   margin-bottom: 10px;
-  border-left: 4px solid #aaa;
+  border-left: 4px solid #bbb;
-  background-color: #eee;
+  background-color: #f1f1f1;
   padding: 3px 0 3px 8px;
   color: #555;
 }

src/views/Editor/CanvasTool/ShapePool.vue

@@ -43,8 +43,8 @@ const selectShape = (shape: ShapePoolItem) => {
   width: 100%;
   font-size: 12px;
   margin-bottom: 10px;
-  border-left: 4px solid #aaa;
+  border-left: 4px solid #bbb;
-  background-color: #eee;
+  background-color: #f1f1f1;
   padding: 3px 0 3px 8px;
   color: #555;
 }

src/views/Editor/CanvasTool/TableGenerator.vue

@@ -99,7 +99,7 @@ const close = () => {
 .title {
   height: 28px;
   line-height: 28px;
-  background-color: #ededed;
+  background-color: $lightGray;
   margin: 0 -10px 10px -10px;
   padding: 0 14px;
   font-size: 12px;