feat: add shortcuts

byodian · Oct 7, 2024 · 8795401 · 8795401
1 parent 2a0016c
commit 8795401
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 90 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -27,9 +27,10 @@ export const metadata: Metadata = {
   openGraph: {
     title: 'OneIMG',
     description: 'OneIMG - 文字转图片应用，快速生成多种尺寸的图片',
-    url: 'https://ongimgai.com',
+    url: 'https://oneimgai.com',
     siteName: 'OneIMG',
   },
+  metadataBase: new URL('https://oneimgai.com'),
 }
 
 function getPlatform() {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -157,8 +157,17 @@ export default function Home() {
             <TabsTrigger value="workspace">编辑器</TabsTrigger>
             <TabsTrigger value="preview">预览</TabsTrigger>
           </TabsList>
-          <TabsContent value="preview" forceMount className="data-[state=inactive]:hidden flex-grow sm:flex-grow-0 sm:!block overflow-y-auto mt-0">
-            <div className={cn(theme, themeColor, getThemeBaseClass(theme), 'one w-full scroll-smooth h-full mx-auto', getPreviewWidthClass(theme))}>
+          <TabsContent value="preview" forceMount className="data-[state=inactive]:hidden sm:!block flex-grow sm:flex-grow-0 flex-shrink sm:flex-shrink-0 overflow-y-auto mt-0">
+            <div
+              className={
+                cn(
+                  theme,
+                  themeColor,
+                  getThemeBaseClass(theme),
+                  'one w-full scroll-smooth h-full mx-auto',
+                  getPreviewWidthClass(theme),
+                )
+              }>
               <Preview ref={previewRef} contents={contents} theme={theme} className="w-full flex flex-col m-auto" />
             </div>
           </TabsContent>

diff --git a/src/app/styles/index.css b/src/app/styles/index.css
@@ -1,2 +1,39 @@
 @import url('./wechat-post-theme.css');
 @import url('./red-post-theme.css');
+
+.one-item__content {
+  :where(:first-child) {
+    margin-top: 0 !important;
+  }
+
+  :where(:last-child) {
+    margin-bottom: 0 !important;
+  }
+
+  :where(ul):not(:where([class~=one-item__children])) {
+    list-style-type: disc;
+    padding-left: 1.625rem;
+  }
+
+  :where(p) {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    line-height: 1.7;
+  }
+
+  :where(ul>li, ol>li):not(:where([class~=one-child-item])) {
+    margin-top: .75rem;
+    margin-bottom: .75rem;
+  }
+
+  :where(ol):not(:where([class~=one-item__children])) {
+    list-style-type: decimal;
+    padding-left: 1.625rem;
+  }
+
+  :where(ul ul, ol ul, ol ol, ul ol):not(:where([class~=one-item__children])) {
+    margin-top: .75rem;
+    margin-bottom: .75rem;
+  }
+}
+
diff --git a/src/app/styles/red-post-theme.css b/src/app/styles/red-post-theme.css
@@ -113,40 +113,6 @@
     font-size: var(--template-theme-primary-content-font-size);
     color: var(--template-theme-primary-content-foreground);
     text-align: justify;
-
-    :where(:first-child) {
-      margin-top: 0 !important;
-    }
-
-    :where(:last-child) {
-      margin-bottom: 0 !important;
-    }
-
-    :where(ul):not(:where([class~=one-item__children])) {
-      list-style-type: disc;
-      padding-left: 1.625rem;
-    }
-
-    :where(p) {
-      margin-top: 10px;
-      margin-bottom: 10px;
-      line-height: 1.7;
-    }
-
-    :where(ul>li, ol>li):not(:where([class~=one-child-item])) {
-      margin-top: .75rem;
-      margin-bottom: .75rem;
-    }
-
-    :where(ol):not(:where([class~=one-item__children])) {
-      list-style-type: decimal;
-      padding-left: 1.625rem;
-    }
-
-    :where(ul ul, ol ul, ol ol, ul ol):not(:where([class~=one-item__children])) {
-      margin-top: .75rem;
-      margin-bottom: .75rem;
-    }
   }
 
   .one-item__images {

diff --git a/src/app/styles/wechat-post-theme.css b/src/app/styles/wechat-post-theme.css
@@ -136,40 +136,6 @@
     font-size: var(--template-theme-primary-content-font-size);
     background-color: var(--template-theme-primary-content-background);
     color: var(--template-theme-primary-content-foreground);
-
-    :where(:first-child) {
-      margin-top: 0 !important;
-    }
-
-    :where(:last-child) {
-      margin-bottom: 0 !important;
-    }
-
-    :where(ul):not(:where([class~=one-item__children])) {
-      list-style-type: disc;
-      padding-left: 1.625rem;
-    }
-
-    :where(p) {
-      margin-top: 5px;
-      margin-bottom: 5px;
-      line-height: 1.7;
-    }
-
-    :where(ul>li, ol>li):not(:where([class~=one-child-item])) {
-      margin-top: .75rem;
-      margin-bottom: .75rem;
-    }
-
-    :where(ol):not(:where([class~=one-item__children])) {
-      list-style-type: decimal;
-      padding-left: 1.625rem;
-    }
-
-    :where(ul ul, ol ul, ol ol, ul ol):not(:where([class~=one-item__children])) {
-      margin-top: .75rem;
-      margin-bottom: .75rem;
-    }
   }
 
   .one-item__images {

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -28,6 +28,7 @@ import {
   MenubarItem,
   MenubarMenu,
   MenubarSeparator,
+  MenubarShortcut,
   // MenubarShortcut,
   MenubarTrigger,
 } from '@/components/ui/menubar'
@@ -62,6 +63,7 @@ export function Header(props: HeaderProps) {
   const [dialogType, setDialogType] = useState<DialogType>('save_file')
   const [isExporting, setIsExporting] = useState(true)
   const [scale, setScale] = useState('1')
+  const [platform, setPlatform] = useState('')
   const { contents, setContents, previewRef, theme, themeColor, setTheme, setThemeColor, setTableValue } = props
   const { toast } = useToast()
   const fileRef = useRef<HTMLInputElement>(null)
@@ -71,6 +73,47 @@ export function Header(props: HeaderProps) {
     setIsExporting(true)
   }, [contents])
 
+  useEffect(() => {
+    const userAgent = navigator.userAgent
+    if (userAgent.indexOf('Mac') > -1 && navigator.platform !== 'iPhone') {
+      setPlatform('mac')
+    } else if (userAgent.indexOf('Win') > -1 || userAgent.indexOf('Linux') > -1) {
+      setPlatform('windows')
+    } else {
+      setPlatform('other')
+    }
+  }, [])
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'o' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        if (!contents.length) {
+          handleOpenfileBtnClick()
+        } else {
+          handleDialogOpen('open_file')
+        }
+      }
+
+      if (e.key === 'e' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setImageDialogOpen(true)
+        setIsExporting(true)
+        setScale('1')
+        // open preview
+        setTableValue && setTableValue('preview')
+      }
+
+      if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        handleDialogOpen('save_file')
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [contents.length, setTableValue])
+
   // open different dialog by type
   function handleDialogOpen(type: DialogType) {
     setIsOpenFile(true)
@@ -227,14 +270,16 @@ export function Header(props: HeaderProps) {
         {/* <Link href="/"> */}
         {/*   <Logo type="full" /> */}
         {/* </Link> */}
+        <Input onChange={handleFileImport} type="file" className="hidden" ref={fileRef} />
         <Menubar className="p-0 cursor-pointer border-none bg-white hover:bg-accent">
           <MenubarMenu>
             <MenubarTrigger>
               <Logo type="full" />
               <ChevronDown className="ml-2 h-4 w-4" />
             </MenubarTrigger>
-            <MenubarContent>
+            <MenubarContent className="max-h-[calc(100vh-150px)] overflow-y-auto">
               <MenubarItem onClick={() => {
+                console.log(123)
                 if (!contents.length) {
                   handleOpenfileBtnClick()
                 } else {
@@ -243,11 +288,14 @@ export function Header(props: HeaderProps) {
               }}>
                 <Folder className="w-4 h-4 mr-2" />
                 <span>打开文件</span>
-                {/* <MenubarShortcut>⌘T</MenubarShortcut> */}
+                {platform === 'mac' && <MenubarShortcut>⌘+O</MenubarShortcut>}
+                {platform === 'windows' && <MenubarShortcut>Ctrl+O</MenubarShortcut>}
               </MenubarItem>
               <MenubarItem onClick={() => handleDialogOpen('save_file')}>
                 <Download className="w-4 h-4 mr-2" />
-                <span>保存文件</span>
+                <span>保存到...</span>
+                {platform === 'mac' && <MenubarShortcut>⌘+S</MenubarShortcut>}
+                {platform === 'windows' && <MenubarShortcut>Ctrl+S</MenubarShortcut>}
               </MenubarItem>
               <MenubarItem onClick={() => handleDialogOpen('reset_data')}>
                 <Trash2 className="w-4 h-4 mr-2" />
@@ -256,10 +304,12 @@ export function Header(props: HeaderProps) {
               <MenubarItem onClick={handleImageExportDialogOpen}>
                 <ImageDown className="w-4 h-4 mr-2" />
                 <span>导出图片</span>
+                {platform === 'mac' && <MenubarShortcut>⌘+E</MenubarShortcut>}
+                {platform === 'windows' && <MenubarShortcut>Ctrl+E</MenubarShortcut>}
               </MenubarItem>
               <MenubarItem>
                 <BookOpen className="w-4 h-4 mr-2" />
-                <span>使用指南</span>
+                <span>指南</span>
               </MenubarItem>
               <Tooltip delayDuration={0}>
                 <TooltipTrigger className="w-full px-2 py-1.5 hidden sm:block">
@@ -370,7 +420,6 @@ export function Header(props: HeaderProps) {
           </MenubarMenu >
         </Menubar >
         <div className="flex flex-wrap gap-2 ml-auto">
-          <Input onChange={handleFileImport} type="file" className="hidden" ref={fileRef} />
           <Button size="sm" onClick={handleImageExportDialogOpen}>
             <ImageDown className="w-4 h-4 mr-2" />
             <span>导出图片</span>

diff --git a/src/components/workspace/content-item.tsx b/src/components/workspace/content-item.tsx
@@ -61,7 +61,7 @@ export function ContentItem(props: ContainerProps) {
         <div className={cn(
           !item.parentId ? 'group font-bold' : 'group/child ',
           item.type === 'theme_content' ? 'cursor-default' : 'cursor-pointer',
-          'px-6 relative',
+          'px-6 relative w-full',
         )}>
           <div className={cn(
             item.type === 'theme_content' && '!hidden',
@@ -107,19 +107,6 @@ export function ContentItem(props: ContainerProps) {
         </SortableContext>
       )}
 
-      {/* {childItems && childItems.length > 0 && <> */}
-      {/*     {childItems.map(childItem => ( */}
-      {/*       <Container */}
-      {/*         key={childItem.id} */}
-      {/*         item={childItem} */}
-      {/*         childItemMap={childItemMap} */}
-      {/*         onSubmit={onSubmit} */}
-      {/*         handleDialogOpen={handleDialogOpen} */}
-      {/*       /> */}
-      {/*     ))} */}
-      {/*   </> */}
-      {/* } */}
-
       {/* Only the root node can have sub-content */}
       {editorType === 'add_sub' && parentContentId === item.id && !item.parentId && (
         <div className="my-2 ml-10">