chore: update

Author: cosmoscatts

src/components/Graphics.vue

@@ -1,22 +1,13 @@
 <script lang="ts" setup>
-import { s8 } from '@meta2d/core'
-
-function dragStart(e: any, elem: any) {
+function dragStart(e: DragEvent | MouseEvent, elem: any) {
   if (!elem)
     return
 
   e.stopPropagation()
 
-  const data = { ...elem.data, id: s8() }
-  // 拖拽事件
-  if (e instanceof DragEvent) {
-    // 设置拖拽数据
+  const data = elem.data
+  if (e instanceof DragEvent)
     e.dataTransfer?.setData('Meta2d', JSON.stringify(data))
-  }
-  else {
-    // 支持单击添加图元。平板模式
-    meta2d.canvas.addCaches = [data]
-  }
 }
 </script>
 
@@ -27,18 +18,17 @@ function dragStart(e: any, elem: any) {
         <div grid="~ cols-2 gap-5" w-full>
           <div
             v-for="elem in item.list" :key="elem.name"
-            flex="~ col" hover:bg="gray/10" col-span-1 border-box px-6px py-10px
+            flex="~ col " justify-center hover:bg="gray/10" col-span-1 border-box px-6px py-15px cursor-pointer
             :draggable="true"
             @dragstart="dragStart($event, elem)"
             @click.prevent="dragStart($event, elem)"
           >
-            <svg v-if="!elem?.image" class="l-icon" aria-hidden="true" style="height: 28px; width: 100%;">
+            <svg aria-hidden="true" h-28px w-full fill-primary>
               <use :xlink:href="`#${elem.icon}`" />
             </svg>
-            <img v-else :src="elem?.image" h-28px>
-            <p :title="elem.name" mt-2 text-center>
+            <div :title="elem.name" mt-4 text-center>
               {{ elem.name }}
-            </p>
+            </div>
           </div>
         </div>
       </a-collapse-item>

src/components/toolbar/ToolbarFromArrow.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 const { currentFromArrow, fromArrows, changeFromArrow } = getFormArrowInfo()
+
+const svgFillColor = computed(() => ['#232323', '#f3f3f3'][Number(isDark.value)])
 </script>
 
 <template>
   <!-- 左箭头类型 -->
   <a-dropdown trigger="hover" :popup-max-height="false">
     <div>
-      <svg cursor-pointer size-6 op50 hover:op75 aria-hidden="true">
+      <svg cursor-pointer size-6 op50 hover:op75 aria-hidden="true" :fill="svgFillColor">
         <use
           :xlink:href="
             fromArrows.find((item) => item.value === currentFromArrow)?.icon
@@ -16,8 +18,8 @@ const { currentFromArrow, fromArrows, changeFromArrow } = getFormArrowInfo()
     </div>
     <template #content>
       <a-doption v-for="item in fromArrows" :key="item.value">
-        <div flex-center @click="changeFromArrow(item.value)">
-          <svg size-5 aria-hidden="true">
+        <div flex justify-center items-center px-12px py-8px @click="changeFromArrow(item.value)">
+          <svg size-5 aria-hidden="true" :fill="svgFillColor">
             <use :xlink:href="item.icon" />
           </svg>
         </div>

src/components/toolbar/ToolbarLineType.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 const { currentLineType, lineTypes, changeLineType } = getLineTypeInfo()
+
+const svgFillColor = computed(() => ['#232323', '#f3f3f3'][Number(isDark.value)])
 </script>
 
 <template>
   <a-dropdown trigger="hover">
     <div>
-      <svg cursor-pointer size-5 aria-hidden="true" op50 hover:op75>
+      <svg cursor-pointer size-5 aria-hidden="true" op50 hover:op75 :fill="svgFillColor">
         <use
           :xlink:href="
             lineTypes.find((item) => item.value === currentLineType)?.icon
@@ -19,7 +21,7 @@ const { currentLineType, lineTypes, changeLineType } = getLineTypeInfo()
           <span>
             {{ item.name }}
           </span>
-          <svg size-5 aria-hidden="true">
+          <svg size-5 aria-hidden="true" :fill="svgFillColor">
             <use :xlink:href="item.icon" />
           </svg>
         </div>

src/components/toolbar/ToolbarToArrow.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 const { currentToArrow, toArrows, changeToArrow } = getToArrowInfo()
+
+const svgFillColor = computed(() => ['#232323', '#f3f3f3'][Number(isDark.value)])
 </script>
 
 <template>
   <a-dropdown trigger="hover" :popup-max-height="false">
     <div>
-      <svg cursor-pointer size-6 color-red op50 hover:op75 aria-hidden="true">
+      <svg cursor-pointer size-6 color-red op50 hover:op75 aria-hidden="true" :fill="svgFillColor">
         <use
           :xlink:href="
             toArrows.find((item) => item.value === currentToArrow)?.icon
@@ -15,8 +17,8 @@ const { currentToArrow, toArrows, changeToArrow } = getToArrowInfo()
     </div>
     <template #content>
       <a-doption v-for="item in toArrows" :key="item.value">
-        <div flex-center @click="changeToArrow(item.value)">
-          <svg size-5 aria-hidden="true">
+        <div flex justify-center items-center px-12px py-8px @click="changeToArrow(item.value)">
+          <svg size-5 aria-hidden="true" :fill="svgFillColor">
             <use :xlink:href="item.icon" />
           </svg>
         </div>

src/main.css

@@ -14,6 +14,39 @@ html.dark {
   color-scheme: dark;
 }
 
+:root, :root::selection {
+  --c-bg-base: #ffffff;
+  --c-scrollbar: #c1c1c1;
+  --c-scrollbar-hover: #7d7d7d;
+}
+
+.dark {
+  --c-bg-base: #101828;
+  --c-scrollbar: rgba(255, 255, 255, .3);
+  --c-scrollbar-hover: rgba(255, 255, 255, .4);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--c-bg-base);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--c-scrollbar);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--c-scrollbar-hover);
+}
 
 .meta2d-map {
   border: 1px solid #aaa3 !important;
@@ -24,7 +57,6 @@ html.dark {
   border: 1px solid #722ED1 !important;
 }
 
-
 html.dark .meta2d-map {
   background: #182033 !important;
 }
@@ -45,3 +77,38 @@ html.dark .meta2d-map {
   background-color: transparent !important;
 }
 
+/* Dropdown */
+
+.arco-dropdown {
+  background-color: var(--c-bg-base);
+  border-color: #aaa3;
+}
+
+.arco-dropdown-option-active, .arco-dropdown-option:not(.arco-dropdown-option-disabled):hover {
+  --at-apply bg-active;
+}
+
+.arco-dropdown-option {
+  --at-apply: text-base;
+}
+
+/* Divider */
+
+.arco-divider-horizontal {
+  border-color: #aaa3;
+}
+
+.arco-divider-vertical {
+  border-color: #aaa3;
+}
+
+/* Tooltip */
+
+.arco-tooltip-content {
+  --at-apply: bg-base text-base text-sm border-box shadow;
+  box-shadow: 0 6px 30px #0000001a;
+}
+
+.arco-trigger-arrow {
+  --at-apply: hidden;
+}