perf: 优化UI

src/assets/styles/global.scss

@@ -133,5 +133,5 @@ textarea {
   background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #c1c1c1;
+  background-color: #e1e1e1;
 }

src/assets/styles/variable.scss

@@ -1,10 +1,10 @@
 $themeColor: #d14424;
 $themeHoverColor: #de6949;
 $textColor: #41464b;
-$borderColor: #eee;
+$borderColor: #e5e7eb;
 $lightGray: #f9f9f9;
 
-$boxShadow: 3px 3px 3px rgba(#000, 0.15);
+$boxShadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
 
 $transitionDelay: .2s;
 $transitionDelayFast: .1s;

src/components/Contextmenu/MenuContent.vue

@@ -40,7 +40,7 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
-$menuWidth: 170px;
+$menuWidth: 180px;
 $menuHeight: 30px;
 $subMenuWidth: 120px;
 
@@ -115,7 +115,7 @@ $subMenuWidth: 120px;
     display: inline-block;
     width: 1px;
     height: 24px;
-    background-color: #f1f1f1;
+    background-color: rgba($color: #fff, $alpha: .3);
     position: absolute;
     right: 18px;
     top: 3px;

src/components/Contextmenu/index.vue

@@ -34,7 +34,7 @@ const props = defineProps<{
 }>()
 
 const style = computed(() => {
-  const MENU_WIDTH = 170
+  const MENU_WIDTH = 180
   const MENU_HEIGHT = 30
   const DIVIDER_HEIGHT = 11
   const PADDING = 5

src/components/MoveablePanel.vue

@@ -162,7 +162,7 @@ const startResize = (e: MouseEvent) => {
 .moveable-panel {
   position: fixed;
   background-color: #fff;
-  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, .15);
+  box-shadow: $boxShadow;
   border: 1px solid $borderColor;
   border-radius: $borderRadius;
   display: flex;

src/components/Select.vue

@@ -142,19 +142,19 @@ const handleSelect = (option: SelectOption) => {
   line-height: 32px;
   padding: 0 5px;
   border-radius: $borderRadius;
-  cursor: pointer;
   @include ellipsis-oneline();
 
   &.disabled {
     color: #b7b7b7;
-    cursor: default;
   }
   &:not(.disabled, .selected):hover {
-    background-color: rgba($color: #666, $alpha: .05);
+    background-color: rgba($color: $themeColor, $alpha: .05);
+    cursor: pointer;
   }
 
   &.selected {
-    background-color: rgba($color: $themeColor, $alpha: .05);
+    color: $themeColor;
+    font-weight: 700;
   }
 }
 .icon {

src/views/Editor/CanvasTool/ShapePool.vue

@@ -33,11 +33,11 @@ const selectShape = (shape: ShapePoolItem) => {
   width: 340px;
   max-height: 520px;
   overflow: auto;
-  margin-top: -12px;
-  margin-bottom: -12px;
-  margin-right: -12px;
-  padding-right: 12px;
-  padding-top: 12px;
+  margin-top: -8px;
+  margin-bottom: -8px;
+  margin-right: -10px;
+  padding-right: 10px;
+  padding-top: 10px;
 }
 .category-name {
   width: 100%;

src/views/Editor/ExportDialog/ExportJSON.vue

@@ -66,6 +66,6 @@ pre {
   background-color: #f9f9f9;
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #c1c1c1;
+  background-color: #e1e1e1;
 }
 </style>

src/views/Editor/Thumbnails/index.vue

@@ -406,6 +406,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
   position: relative;
 
   .thumbnail {
+    border-radius: $borderRadius;
     outline: 2px solid rgba($color: $themeColor, $alpha: .15);
   }