形状补充和整理

src/plugins/iconPark.ts

@@ -6,7 +6,7 @@ import {
   Unlock,
   Search,
   Delete,
-  Slide,
+  Ppt,
   SettingOne,
   Clear,
   Format,
@@ -208,7 +208,7 @@ export default {
     app.component('IconPlayOne', PlayOne)
     app.component('IconSearch', Search)
     app.component('IconDelete', Delete)
-    app.component('IconSlide', Slide)
+    app.component('IconPpt', Ppt)
     app.component('IconSettingOne', SettingOne)
     app.component('IconClear', Clear)
     app.component('IconLinkOne', LinkOne)

src/views/Editor/CanvasTool/ChartPool.vue

@@ -55,5 +55,10 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   align-items: center;
+  color: #999;
+
+  &:hover {
+    color: $themeColor;
+  }
 }
 </style>

src/views/Editor/CanvasTool/LinePool.vue

@@ -9,25 +9,28 @@
         >
           <defs>
             <LinePointMarker
+              class="line-marker"
               v-if="line.points[0]"
               :id="`preset-line-${index}`"
               position="start"
               :type="line.points[0]"
-              color="#aaa"
+              color="currentColor"
               :baseSize="2"
             />
             <LinePointMarker
+              class="line-marker"
               v-if="line.points[1]"
               :id="`preset-line-${index}`"
               position="end"
               :type="line.points[1]"
-              color="#999"
+              color="currentColor"
               :baseSize="2"
             />
           </defs>
           <path
+            class="line-path"
             :d="line.path" 
-            stroke="#aaa" 
+            stroke="currentColor" 
             fill="none" 
             stroke-width="2" 
             :stroke-dasharray="line.style === 'solid' ? '0, 0' : '4, 1'"
@@ -96,6 +99,11 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   align-items: center;
+  color: #999;
+
+  &:hover {
+    color: $themeColor;
+  }
 
   svg:not(:root) {
     overflow: visible;

src/views/Editor/CanvasTool/ShapePool.vue

@@ -1,30 +1,36 @@
 <template>
-  <ul class="shape-pool">
-    <li class="shape-item" v-for="(shape, index) in shapeList" :key="index">
-      <div class="shape-content" @click="selectShape(shape)">
-        <SvgWrapper 
-          overflow="visible" 
-          width="20"
-          height="20"
-        >
-          <g 
-            :transform="`scale(${20 / shape.viewBox}, ${20 / shape.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
-          >
-            <path 
-              vector-effect="non-scaling-stroke" 
-              stroke-linecap="butt" 
-              stroke-miterlimit="8"
-              stroke-linejoin
-              fill="transparent"
-              stroke="#999"
-              stroke-width="2" 
-              :d="shape.path"
-            ></path>
-          </g>
-        </SvgWrapper>
+  <div class="shape-pool">
+    <div class="category" v-for="item in shapeList" :key="item.type">
+      <div class="category-name">{{item.type}}</div>
+      <div class="shape-list">
+        <div class="shape-item" v-for="(shape, index) in item.children" :key="index">
+          <div class="shape-content" @click="selectShape(shape)">
+            <SvgWrapper 
+              overflow="visible" 
+              width="20"
+              height="20"
+            >
+              <g 
+                :transform="`scale(${20 / shape.viewBox}, ${20 / shape.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
+              >
+                <path 
+                  class="shape-path"
+                  vector-effect="non-scaling-stroke" 
+                  stroke-linecap="butt" 
+                  stroke-miterlimit="8"
+                  stroke-linejoin
+                  fill="transparent"
+                  stroke="#999"
+                  stroke-width="2" 
+                  :d="shape.path"
+                ></path>
+              </g>
+            </SvgWrapper>
+          </div>
+        </div>
       </div>
-    </li>
-  </ul>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -50,18 +56,31 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .shape-pool {
-  width: 400px;
-  max-height: 400px;
+  width: 360px;
+  max-height: 500px;
   overflow: auto;
-  margin-bottom: -5px;
-
+  margin-bottom: -12px;
+  margin-right: -12px;
+  padding-right: 12px;
+}
+.category-name {
+  width: 100%;
+  font-size: 13px;
+  margin-bottom: 10px;
+  border-left: 4px solid #aaa;
+  background-color: #eee;
+  padding: 2px 0 2px 10px;
+}
+.shape-list {
   @include grid-layout-wrapper();
+
+  margin-bottom: 10px;
 }
 .shape-item {
-  @include grid-layout-item(10, 9%);
+  @include grid-layout-item(10, 8%);
 
   height: 0;
-  padding-bottom: 9%;
+  padding-bottom: 8%;
   flex-shrink: 0;
   position: relative;
   cursor: pointer;
@@ -76,6 +95,10 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
 
+  &:hover .shape-path {
+    stroke: $themeColor;
+  }
+
   svg:not(:root) {
     overflow: visible;
   }

src/views/Editor/EditorHeader/index.vue

@@ -15,7 +15,7 @@
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <div class="menu-item"><IconSlide /> 演示</div>
+        <div class="menu-item"><IconPpt /> 演示</div>
         <template #overlay>
           <Menu>
             <MenuItem @click="enterScreeningFromStart()">从头开始</MenuItem>
@@ -38,7 +38,7 @@
     <div class="right">
       <Tooltip :mouseLeaveDelay="0" title="幻灯片放映">
         <div class="menu-item" @click="enterScreening()">
-          <IconSlide size="18" fill="#666" style="margin-top: 2px;" />
+          <IconPpt size="18" fill="#666" style="margin-top: 2px;" />
         </div>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" title="Github 仓库">

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -226,7 +226,7 @@ export default defineComponent({
   margin-bottom: 10px;
   border-left: 4px solid #aaa;
   background-color: #eee;
-  padding: 2px 0 3px 10px;
+  padding: 2px 0 2px 10px;
 }
 .pool-item-wrapper {
   @include grid-layout-wrapper();