From 665a00e96f8cbc876db7fd27212350114b2a0a7d Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Sun, 15 Sep 2024 09:19:57 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=8F=92=E5=85=A5=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8FUI=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/configs/chart.ts                           | 11 +++++++++++
 src/views/Editor/CanvasTool/ChartPool.vue      | 16 ++++++++++++----
 src/views/Editor/CanvasTool/LinePool.vue       |  4 ++--
 src/views/Editor/CanvasTool/ShapePool.vue      |  4 ++--
 src/views/Editor/CanvasTool/TableGenerator.vue |  2 +-
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/configs/chart.ts b/src/configs/chart.ts
index 674c07d9..a2279a6c 100644
--- a/src/configs/chart.ts
+++ b/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'],
diff --git a/src/views/Editor/CanvasTool/ChartPool.vue b/src/views/Editor/CanvasTool/ChartPool.vue
index 03e74d2b..5ff76d3e 100644
--- a/src/views/Editor/CanvasTool/ChartPool.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue
index f0ac8e77..5928730d 100644
--- a/src/views/Editor/CanvasTool/LinePool.vue
+++ b/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;
-  background-color: #eee;
+  border-left: 4px solid #bbb;
+  background-color: #f1f1f1;
   padding: 3px 0 3px 8px;
   color: #555;
 }
diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue
index 279c2265..acd0d9d3 100644
--- a/src/views/Editor/CanvasTool/ShapePool.vue
+++ b/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;
-  background-color: #eee;
+  border-left: 4px solid #bbb;
+  background-color: #f1f1f1;
   padding: 3px 0 3px 8px;
   color: #555;
 }
diff --git a/src/views/Editor/CanvasTool/TableGenerator.vue b/src/views/Editor/CanvasTool/TableGenerator.vue
index 3b50d6ad..1a6efa3d 100644
--- a/src/views/Editor/CanvasTool/TableGenerator.vue
+++ b/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;