From 50af2f5b93ab641903290c81db2b05af3d8aa0f7 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Tue, 13 Aug 2024 18:04:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(ctrl):=20ctrl=E7=BB=84=E4=BB=B6=E5=8C=BA?=
 =?UTF-8?q?=E5=88=86=20mac=20=E5=92=8C=20windows=20=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pure/ms-ctrl-or-command/index.tsx     | 7 +++++++
 .../components/pure/ms-minder-editor/main/navigator.vue  | 9 +++++----
 .../components/pure/ms-minder-editor/menu/batchMenu.vue  | 5 +++--
 .../pure/ms-minder-editor/menu/nodeFloatMenu.vue         | 9 +++++----
 frontend/src/utils/index.ts                              | 8 ++++++++
 5 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/pure/ms-ctrl-or-command/index.tsx

diff --git a/frontend/src/components/pure/ms-ctrl-or-command/index.tsx b/frontend/src/components/pure/ms-ctrl-or-command/index.tsx
new file mode 100644
index 0000000000..e6daf336b9
--- /dev/null
+++ b/frontend/src/components/pure/ms-ctrl-or-command/index.tsx
@@ -0,0 +1,7 @@
+import { isMacOs } from '@/utils';
+
+export default defineComponent(() => {
+  const isMac = isMacOs();
+
+  return () => (isMac ? <icon-command size={14} /> : 'Ctrl');
+});
diff --git a/frontend/src/components/pure/ms-minder-editor/main/navigator.vue b/frontend/src/components/pure/ms-minder-editor/main/navigator.vue
index 066e699cd8..49e1b08101 100644
--- a/frontend/src/components/pure/ms-minder-editor/main/navigator.vue
+++ b/frontend/src/components/pure/ms-minder-editor/main/navigator.vue
@@ -64,7 +64,7 @@
               <div>{{ t('common.copy') }}</div>
               <div class="flex items-center gap-[4px]">
                 <div class="ms-minder-shortcut-trigger-listitem-icon">
-                  <icon-command :size="14" />
+                  <MsCtrlOrCommand />
                 </div>
                 <div class="ms-minder-shortcut-trigger-listitem-icon">C</div>
               </div>
@@ -79,7 +79,7 @@
               <div>{{ t('minder.hotboxMenu.paste') }}</div>
               <div class="flex items-center gap-[4px]">
                 <div class="ms-minder-shortcut-trigger-listitem-icon">
-                  <icon-command :size="14" />
+                  <MsCtrlOrCommand />
                 </div>
                 <div class="ms-minder-shortcut-trigger-listitem-icon">V</div>
               </div>
@@ -94,7 +94,7 @@
               <div>{{ t('minder.hotboxMenu.cut') }}</div>
               <div class="flex items-center gap-[4px]">
                 <div class="ms-minder-shortcut-trigger-listitem-icon">
-                  <icon-command :size="14" />
+                  <MsCtrlOrCommand />
                 </div>
                 <div class="ms-minder-shortcut-trigger-listitem-icon">X</div>
               </div>
@@ -103,7 +103,7 @@
               <div>{{ t('minder.hotboxMenu.enterNode') }}</div>
               <div class="flex items-center gap-[4px]">
                 <div class="ms-minder-shortcut-trigger-listitem-icon">
-                  <icon-command :size="14" />
+                  <MsCtrlOrCommand />
                 </div>
                 <div class="ms-minder-shortcut-trigger-listitem-icon">
                   <MsIcon type="icon-icon_carriage_return2" />
@@ -144,6 +144,7 @@
 
 <script lang="ts" setup>
   import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsCtrlOrCommand from '@/components/pure/ms-ctrl-or-command';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 
   import { useI18n } from '@/hooks/useI18n';
diff --git a/frontend/src/components/pure/ms-minder-editor/menu/batchMenu.vue b/frontend/src/components/pure/ms-minder-editor/menu/batchMenu.vue
index 3b7ceb5d6a..7956355546 100644
--- a/frontend/src/components/pure/ms-minder-editor/menu/batchMenu.vue
+++ b/frontend/src/components/pure/ms-minder-editor/menu/batchMenu.vue
@@ -68,13 +68,13 @@
         <a-doption v-if="props.canShowBatchCopy" value="copy">
           <div class="flex items-center">
             <div>{{ t('minder.hotboxMenu.copy') }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">(Ctrl + C)</div>
+            <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + C)</div>
           </div>
         </a-doption>
         <a-doption v-if="props.canShowBatchCut" value="cut">
           <div class="flex items-center">
             <div>{{ t('minder.hotboxMenu.cut') }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">(Ctrl + X)</div>
+            <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + X)</div>
           </div>
         </a-doption>
         <a-doption v-if="props.canShowBatchDelete" value="delete">
@@ -96,6 +96,7 @@
 
 <script setup lang="ts">
   import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsCtrlOrCommand from '@/components/pure/ms-ctrl-or-command';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 
   import { useI18n } from '@/hooks/useI18n';
diff --git a/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue b/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue
index bc1323aa3d..ef03f02e28 100644
--- a/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue
+++ b/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue
@@ -137,26 +137,26 @@
           <a-doption v-if="props.canShowEnterNode" value="enterNode">
             <div class="flex items-center">
               <div>{{ t('minder.hotboxMenu.enterNode') }}</div>
-              <div class="ml-[4px] text-[var(--color-text-4)]">(Ctrl+ Enter)</div>
+              <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + Enter)</div>
             </div>
           </a-doption>
           <template v-if="props.canShowMoreMenuNodeOperation">
             <a-doption value="copy">
               <div class="flex items-center">
                 <div>{{ t('minder.hotboxMenu.copy') }}</div>
-                <div class="ml-[4px] text-[var(--color-text-4)]">(Ctrl + C)</div>
+                <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + C)</div>
               </div>
             </a-doption>
             <a-doption value="cut">
               <div class="flex items-center">
                 <div>{{ t('minder.hotboxMenu.cut') }}</div>
-                <div class="ml-[4px] text-[var(--color-text-4)]">(Ctrl + X)</div>
+                <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + X)</div>
               </div>
             </a-doption>
             <a-doption v-if="props.canShowPasteMenu && minderStore.clipboard.length > 0" value="paste">
               <div class="flex items-center">
                 <div>{{ t('minder.hotboxMenu.paste') }}</div>
-                <div class="ml-[4px] text-[var(--color-text-4)]">(Ctrl + V)</div>
+                <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + V)</div>
               </div>
             </a-doption>
             <a-doption value="delete">
@@ -190,6 +190,7 @@
   import { TriggerPopupTranslate } from '@arco-design/web-vue';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsCtrlOrCommand from '@/components/pure/ms-ctrl-or-command';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 
   import { useI18n } from '@/hooks/useI18n';
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index c5ee172d64..57d87ad720 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -1097,3 +1097,11 @@ export const operationWidth = (enWidth: number, zhWidth: number) =>
 export function filterTreeNode(searchValue: string, nodeData: MsTreeNodeData, nameKey = 'name') {
   return nodeData[nameKey].toLowerCase().includes(searchValue.toLowerCase());
 }
+
+/**
+ * 判断是否是mac系统
+ */
+export function isMacOs() {
+  const platform = navigator.platform.toLowerCase();
+  return platform.includes('mac');
+}