From 5960d2678e176440bb5e589116a18fcdb9ef3f6c Mon Sep 17 00:00:00 2001
From: yanheng <yanheng@siactpower.com>
Date: Fri, 30 Aug 2024 11:00:13 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E6=9B=B4=E6=96=B0=E6=A9=A1=E7=9A=AE?=
 =?UTF-8?q?=E6=93=A6=E8=BD=AC=E6=8D=A2=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pictode/src/assets/images/round-light.svg    | 13 +++++++++++++
 pictode/src/assets/images/round.svg          |  2 +-
 pictode/src/view/canvas/components/Tools.vue | 12 +++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 pictode/src/assets/images/round-light.svg

diff --git a/pictode/src/assets/images/round-light.svg b/pictode/src/assets/images/round-light.svg
new file mode 100644
index 00000000..5de66eaa
--- /dev/null
+++ b/pictode/src/assets/images/round-light.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24"
+     height="24"
+     viewBox="0 0 48 48"
+     fill="none"
+     xmlns="http://www.w3.org/2000/svg">
+        <circle cx="14"
+                cy="14"
+                r="10"
+                fill="none"
+                stroke="#fff"
+                stroke-width="4" />
+</svg>
\ No newline at end of file
diff --git a/pictode/src/assets/images/round.svg b/pictode/src/assets/images/round.svg
index c26313ba..b9ed1f29 100644
--- a/pictode/src/assets/images/round.svg
+++ b/pictode/src/assets/images/round.svg
@@ -9,5 +9,5 @@
                 r="10"
                 fill="none"
                 stroke="#333333"
-                stroke-width="2" />
+                stroke-width="4" />
 </svg>
\ No newline at end of file
diff --git a/pictode/src/view/canvas/components/Tools.vue b/pictode/src/view/canvas/components/Tools.vue
index e96cfc0e..00053b94 100644
--- a/pictode/src/view/canvas/components/Tools.vue
+++ b/pictode/src/view/canvas/components/Tools.vue
@@ -18,6 +18,7 @@ import {
 import { injectStrict } from '@pictode/vue-aide';
 
 import round from '@/assets/images/round.svg';
+import roundLight from '@/assets/images/round-light.svg';
 import { PictodeAppKey } from '@/constants/inject-key';
 import useTheme from '@/hooks/useTheme';
 
@@ -222,7 +223,7 @@ const tools: ToolInfo[] = [
       new EraserTool({
         hooks: {
           onActive(app) {
-            app.containerElement.style.cursor = `url(${round}), auto`;
+            app.containerElement.style.cursor = eraserCursor.value;
           },
           onInactive(app) {
             app.containerElement.style.cursor = `default`;
@@ -256,6 +257,15 @@ const tools: ToolInfo[] = [
 const currentTool = ref<string>(tools[0].name);
 const { theme } = useTheme();
 const strokeColor = computed<string>(() => (theme.value === 'dark' ? '#d1d5db' : '#333333'));
+const eraserCursor = computed<string>(() =>
+  theme.value === 'dark' ? `url(${roundLight}), auto` : `url(${round}), auto`
+);
+
+watchEffect(() => {
+  if (currentTool.value === 'eraserTool') {
+    app.containerElement.style.cursor = eraserCursor.value;
+  }
+});
 
 watchEffect(async () => {
   let tool = tools.find(({ name }) => name === currentTool.value)?.tool;