feat(ctrl): ctrl组件区分 mac 和 windows 系统

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');
+});

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';

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';

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';

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');
+}