✨ feat(hotkeys): display platform specific key

src/components/HotKeys/index.tsx

@@ -1,7 +1,12 @@
+'use client';
+
 import { createStyles } from 'antd-style';
-import { Fragment, memo } from 'react';
+import { Fragment, memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { isApplePlatform } from '@/utils/platform';
+
 const useStyles = createStyles(
   ({ css, token }) => css`
     font-size: 12px;
@@ -33,12 +38,28 @@ export interface HotKeysProps {
 
 const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
   const { styles } = useStyles();
-  const keysGroup = keys.split('+').filter(Boolean);
+  const [keysGroup, setKeysGroup] = useState(keys.split('+'));
+  const visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
+
+  useEffect(() => {
+    const mapping: Record<string, string> = {
+      [CLEAN_MESSAGE_KEY]: isApplePlatform() ? '⌫' : 'backspace',
+      [PREFIX_KEY]: isApplePlatform() ? '⌥' : 'alt',
+    };
+    const newValue = keys
+      .split('+')
+      .filter(Boolean)
+      .map((k) => mapping[k] ?? k);
+    setKeysGroup(newValue);
+  }, [keys]);
+
   const content = (
     <Flexbox align={'center'} className={styles} gap={2} horizontal>
       {keysGroup.map((key, index) => (
         <Fragment key={index}>
-          <kbd>{key.toUpperCase()}</kbd>
+          <kbd>
+            <span style={{ visibility }}>{key.toUpperCase()}</span>
+          </kbd>
           {index + 1 < keysGroup.length && <span>+</span>}
         </Fragment>
       ))}

src/utils/platform.ts

@@ -0,0 +1,11 @@
+import UAParser from 'ua-parser-js';
+
+export const getPlatform = () => {
+  let ua = navigator.userAgent;
+  return new UAParser(ua).getOS();
+};
+
+export const isApplePlatform = () => {
+  const platform = getPlatform().name;
+  return platform && ['Mac OS', 'iOS'].includes(platform);
+};