chore: canvas

locales/dashboard/en.json

@@ -4,5 +4,8 @@
   "game": "Game",
   "other": "Other",
   "editor": "Editor",
-  "mdhub": "MdHub"
+
+  "canvas": "Canvas",
+  "mdhub": "MdHub",
+  "game-of-life": "Game of Life"
 }

locales/dashboard/zh_CN.json

@@ -3,7 +3,9 @@
   "video": "视频",
   "game": "游戏",
   "other": "其他",
+  "editor": "编辑器",
+
   "canvas": "画板",
-  "editor": "Editor",
-  "mdhub": "MdHub"
+  "mdhub": "MdHub",
+  "game-of-life": "Game of Life"
 }

locales/dashboard/zh_HK.json

@@ -3,7 +3,9 @@
   "video": "視頻",
   "game": "遊戲",
   "other": "其他",
+  "editor": "編輯器",
+
   "canvas": "畫板",
-  "editor": "Editor",
-  "mdhub": "MdHub"
+  "mdhub": "MdHub",
+  "game-of-life": "康威生命遊戲"
 }

locales/game/en.json

@@ -1,3 +1 @@
-{
-  "game-of-life": "Game of Life"
-}
+{}

locales/game/zh_CN.json

@@ -1,3 +1 @@
-{
-  "game-of-life": "康威生命游戏"
-}
+{}

locales/game/zh_HK.json

@@ -1,3 +1 @@
-{
-  "game-of-life": "康威生命遊戲"
-}
+{}

locales/tip/en.json

@@ -1,3 +1,5 @@
 {
-  "goback": "Click to go back"
+  "goback": "Click to go back",
+  "mdPreview": "Markdown Preivew",
+  "save": "Save"
 }

locales/tip/zh_CN.json

@@ -1,3 +1,5 @@
 {
-  "goback": "点击返回"
+  "goback": "点击返回",
+  "mdPreview": "Markdown 预览",
+  "save": "保存"
 }

locales/tip/zh_HK.json

@@ -1,3 +1,5 @@
 {
-  "goback": "點擊返回"
+  "goback": "點擊返回",
+  "mdPreview": "Markdown 預覽",
+  "save": "保存"
 }

locales/tools/en.json

@@ -1,3 +1 @@
-{
-  "canvas": "Canvas"
-}
+{}

locales/tools/zh_CN.json

@@ -1,3 +1 @@
-{
-  "canvas": "画板"
-}
+{}

locales/tools/zh_HK.json

@@ -1,3 +1 @@
-{
-  "canvas": "畫板"
-}
+{}

src-tauri/Cargo.toml

@@ -17,12 +17,7 @@ tauri-build = { version = "1.1.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.1.0", features = [
-  "api-all",
-  "icon-png",
-  "macos-private-api",
-  "system-tray",
-] }
+tauri = { version = "1.1.0", features = ["api-all", "icon-png", "macos-private-api", "system-tray"] }
 thiserror = "1.0"
 window-vibrancy = "0.2.0"
 

src/components/Editor/index.tsx

@@ -33,15 +33,15 @@ const Editor: React.FC<EditorProps> = ({
   return (
     <div className="omb-editor-container">
       <Allotment>
-        <Allotment.Pane minSize={200}>
+        <Allotment.Pane minSize={100}>
           <MonacoEditor
             defaultLanguage={lang}
             defaultValue={defaultValue}
             onChange={handleMonaco}
           />
         </Allotment.Pane>
         {preview && (
-          <Allotment.Pane snap>
+          <Allotment.Pane minSize={100}>
             <div className="preview">{preview(content)}</div>
           </Allotment.Pane>
         )}

src/components/OmbCard/OmbIcon.tsx

@@ -0,0 +1,33 @@
+import { useNavigate } from 'react-router-dom';
+import { Icon } from '@iconify/react';
+
+import useI18n from '@/hooks/useI18n';
+
+interface OmbIcon {
+  title: string;
+  icon: string;
+  to: string;
+  onClick?: () => void;
+}
+
+const OmbIcon: React.FC<OmbIcon> = ({ title, icon, to, onClick }) => {
+  const t = useI18n(['dashboard']);
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    if (to) {
+      navigate(to);
+      return;
+    }
+    onClick && onClick();
+  };
+
+  return (
+    <span className="omb-card-icon" onClick={handleClick}>
+      <Icon icon={icon} fontSize={40} color="#444" />
+      <b>{t(title)}</b>
+    </span>
+  );
+};
+
+export default OmbIcon;

src/components/OmbCard/index.scss

@@ -1,5 +1,22 @@
 .omb-card {
   width: 100%;
+
+  h2 {
+    > span {
+      display: inline-flex;
+      align-items: center;
+      font-size: 14px;
+      background-color: #2a2a2a;
+      padding: 4px 10px;
+      color: #fff;
+      border-radius: 5px;
+    }
+
+    .icon {
+      margin-right: 5px;
+    }
+  }
+
   &-group {
     &-item {
       transition: 300ms ease;
@@ -10,4 +27,25 @@
       }
     }
   }
-}
+
+  &-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 80px;
+    cursor: pointer;
+    transition: all 1s ease;
+
+    * {
+      color: #666;
+    }
+
+    &:hover * {
+      color: #121212;
+    }
+
+    b {
+      font-size: 12px;
+    }
+  }
+}

src/components/OmbCard/index.tsx

@@ -1,16 +1,28 @@
 export { default as OmbItem } from './OmbItem';
+export { default as OmbIcon } from './OmbIcon';
+
+import { Icon } from '@iconify/react';
+import useI18n from '@/hooks/useI18n';
 
 import './index.scss';
 
 interface OmbCardProps {
   title: string;
   children: React.ReactNode;
+  icon?: string;
 }
 
-const OmbCard: React.FC<OmbCardProps> = ({ title, children }) => {
+const OmbCard: React.FC<OmbCardProps> = ({ icon, title, children }) => {
+  const t = useI18n(['dashboard']);
+
   return (
     <div className="omb-card">
-      <h2>{title}</h2>
+      <h2>
+        <span>
+          {icon && <Icon className="icon" icon={icon} />}
+          {t(title)}
+        </span>
+      </h2>
       <div className="omb-card-group flex flex-wrap">{children}</div>
     </div>
   );

src/components/Tooltip/index.scss

@@ -1,6 +1,6 @@
 .omb-tooltip {
-  background: #2A2A2A;
-  color: #FFF;
+  background: #2a2a2a;
+  color: #fff;
   pointer-events: none;
   border-radius: 6px;
   padding: 4px 6px;
@@ -9,7 +9,8 @@
 
   &.sys {
     font-size: 0.5rem;
-    background-color: #989898;
+    background-color: #eee;
+    color: #3a3a3a;
     border-radius: 2px;
     padding: 2px 4px;
   }

src/layouts/fullscreen.scss

@@ -1,5 +1,5 @@
 .omb-fullscreen {
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
 
   .omb-taskbar {
@@ -27,7 +27,7 @@
 
   .omb-editor-container {
     .preview {
-      height: calc(100vh - 30px);
+      height: 100%;
     }
   }
 }

src/routes.tsx

@@ -22,12 +22,12 @@ const routes: RouteObject[] = [
     element: <CanvasPaperView />,
   },
   {
-    path: 'game/game-of-life',
-    element: <GameOfLifeView />,
+    path: '/tools/mdhub',
+    element: <MdHub />,
   },
   {
-    path: 'mdhub',
-    element: <MdHub />,
+    path: 'game/game-of-life',
+    element: <GameOfLifeView />,
   },
 ];
 

src/views/canvas/paper/canvas.ts

@@ -38,7 +38,6 @@ export class Brush {
   }
 
   save = () => {
-    // this.canvas?.toBlob();
     return this.canvas?.toDataURL();
   }
 

src/views/canvas/paper/components/SaveIcon/index.tsx

@@ -0,0 +1,11 @@
+export default function SaveIcon() {
+  return (
+    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="#666"
+        d="M597.333333 398.933333h170.666667v215.466667h-102.4v-113.066667h-194.133333v113.066667H256v-428.8c0-4.266667 2.133333-6.4 4.266667-10.666667s6.4-4.266667 10.666666-4.266666h326.4v228.266666z m170.666667-57.6h-113.066667v-113.066666l113.066667 113.066666z m-170.666667 341.333334h91.733334l-121.6 121.6-121.6-121.6h91.733333v-113.066667h57.6l2.133333 113.066667z m-102.4 170.666666h-224c-4.266667 0-6.4-2.133333-10.666666-4.266666s-4.266667-6.4-4.266667-10.666667v-224l238.933333 238.933333z m273.066667-125.866666v110.933333c0 4.266667-2.133333 6.4-4.266667 10.666667s-6.4 4.266667-10.666666 4.266666h-110.933334l125.866667-125.866666z"
+        p-id="6663"
+      ></path>
+    </svg>
+  );
+}

src/views/canvas/paper/components/ToolPalette/index.scss

@@ -6,7 +6,7 @@
   width: 60px;
   background-color: #fff;
   padding: 10px;
-  filter: drop-shadow(0 1px 3px #3C40434D) drop-shadow(0 4px 8px #3C404326);
+  filter: drop-shadow(0 1px 3px #3c40434d) drop-shadow(0 4px 8px #3c404326);
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   cursor: auto;
@@ -53,6 +53,22 @@
       filter: grayscale(0);
     }
   }
+
+  .save-btn {
+    all: unset;
+    cursor: pointer;
+
+    svg {
+      width: 40px;
+      height: 40px;
+    }
+
+    &:hover {
+      svg path {
+        fill: #121212;
+      }
+    }
+  }
 }
 
 .color-popover {
@@ -84,13 +100,19 @@
     width: 60px;
     height: 60px;
     margin-left: 30px;
-    background-image: linear-gradient(45deg,
-        var(--square-color) 26%, transparent 25%, transparent 75%,
+    background-image: linear-gradient(
+        45deg,
+        var(--square-color) 26%,
+        transparent 25%,
+        transparent 75%,
         var(--square-color) 75%,
         var(--square-color)
       ),
-      linear-gradient(45deg,
-        var(--square-color) 26%, transparent 25%, transparent 75%,
+      linear-gradient(
+        45deg,
+        var(--square-color) 26%,
+        transparent 25%,
+        transparent 75%,
         var(--square-color) 75%,
         var(--square-color)
       );
@@ -102,4 +124,4 @@
       border-radius: 50%;
     }
   }
-}
+}