feat: some little change

electron/ipcMainHandlers.ts

@@ -6,7 +6,6 @@ import {
   structureMetadata,
 } from "./core/dicom";
 import { EVENT_PARSE_DICOM } from "./ipcEvent";
-import { cpuStartInfer } from "./core/infer/vino";
 
 /**
  * 渲染进程和主进程的事件调度

package.json

@@ -31,9 +31,11 @@
     "dicom-parser": "1.8.21",
     "dockview": "^1.15.2",
     "flexlayout-react": "^0.7.15",
+    "framer-motion": "^11.3.24",
     "lucide-react": "^0.408.0",
     "object-hash": "^3.0.0",
     "onnxruntime-node": "^1.18.0",
+    "openvino-node": "2024.3.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.1",
     "react-desktop": "^0.3.9",
@@ -42,8 +44,7 @@
     "react-resizable-panels": "^2.0.20",
     "react-router-dom": "^6.26.0",
     "tailwind-merge": "^2.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "openvino-node": "2024.3.0"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@radix-ui/react-icons": "^1.3.0",

pnpm-lock.yaml

@@ -68,6 +68,9 @@ importers:
       flexlayout-react:
         specifier: ^0.7.15
         version: 0.7.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      framer-motion:
+        specifier: ^11.3.24
+        version: 11.3.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       lucide-react:
         specifier: ^0.408.0
         version: 0.408.0(react@18.3.1)
@@ -2161,6 +2164,20 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framer-motion@11.3.24:
+    resolution: {integrity: sha512-kl0YI7HwAtyV0VOAWuU/rXoOS8+z5qSkMN6rZS+a9oe6fIha6SC3vjJN6u/hBpvjrg5MQNdSnqnjYxm0WYTX9g==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -6104,6 +6121,13 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framer-motion@11.3.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      tslib: 2.6.3
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   fs-constants@1.0.0: {}
 
   fs-extra@10.1.0:

src/App.tsx

@@ -3,6 +3,7 @@ import LayoutMain from "@/pages/Layout";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Aorta from "@/pages/Aorta";
 import Dockview from "@/pages/Dock";
+import { Setting } from "./pages/Setting";
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
           <Route path="/" element={<LayoutMain />}>
             <Route index element={<Aorta />} />
             <Route path="dockerview" element={<Dockview />} />
+            <Route path="setting" element={<Setting />} />
           </Route>
         </Routes>
       </Router>

src/main.tsx

@@ -2,11 +2,9 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "@/style/global.css";
 
-
-ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
-
-// Use contextBridge
 window.ipcRenderer.on("main-process-message", (_event, message) => {
   const { platform } = message
   document.querySelector('html')?.setAttribute('platform', platform)
+
+  ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 });

src/pages/Aorta/index.tsx

@@ -1,13 +1,18 @@
 import { Button } from "@/components/ui/button";
+import { motion } from 'framer-motion';
 
 const Aorta = () => {
   return (
-    <div className="p-4">
-      <div className="w-full h-[200px] rounded-md" style={{ backgroundImage: `url('/banner.png')`, backgroundPosition: 'center center', backgroundSize: 'cover' }}>
-        <h2>拓微启动器</h2>
-        <span>科技行善，慈念为医</span>
+    <motion.div
+      initial={{ y: 10, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: 0, opacity: 0 }}
+      transition={{ duration: 0.25 }}
+    >
+      <div className="p-4">
+        <div className="w-full h-[250px] rounded-md" style={{ backgroundImage: `url('/banner.png')`, backgroundSize: 'cover' }}></div>
       </div>
-    </div>
+    </motion.div>
   );
 };
 

src/pages/Layout.css

@@ -15,4 +15,4 @@
   .flexlayout__tabset-selected {
     background: transparent;
   }
-}
+}

src/pages/Layout.tsx

@@ -1,5 +1,5 @@
-import { Outlet, Link } from "react-router-dom";
-import { IoCubeOutline, IoHammerOutline, IoHandLeftOutline, IoLayersOutline, IoListOutline, IoPlayOutline, IoSettingsOutline } from "react-icons/io5";
+import { LeftDocker } from "./LeftDocker";
+import { Outlet } from "react-router-dom";
 import { MenuBar } from "./MenuBar";
 
 const LayoutMain = () => {
@@ -21,51 +21,7 @@ const LayoutMain = () => {
       <div className="relative h-[calc(100%-36px)]">
         <div className="flex h-full">
           <div className="workspace w-[80px] h-full">
-            <ul className="flex flex-col items-center pt-2 gap-4">
-              <li className="w-[60px] h-[60px] flex flex-col items-center justify-center">
-                <Link to="/" className="items-center flex flex-col gap-2">
-                  <IoPlayOutline size={24} color="#fff" />
-                  <span className="text-xs">一键启动</span>
-                </Link>
-              </li>
-              <li className="w-[60px] h-[60px] flex flex-col items-center justify-center">
-                <Link to="/" className="items-center flex flex-col gap-2">
-                  <IoListOutline size={24} color="#fff" />
-                  <span className="text-xs">数据列表</span>
-                </Link>
-              </li>
-              <li className="w-[60px] h-[60px] flex flex-col items-center justify-center">
-                <Link to="/" className="items-center flex flex-col gap-2">
-                  <IoLayersOutline size={24} color="#fff" />
-                  <span className="text-xs">版本管理</span>
-                </Link>
-              </li>
-              <li className="w-[60px] h-[60px] flex flex-col items-center justify-center">
-                <Link to="/" className="items-center flex flex-col gap-2">
-                  <IoCubeOutline size={24} color="#fff" />
-                  <span className="text-xs">模型管理</span>
-                </Link>
-              </li>
-              <li className="w-[60px] h-[60px] flex flex-col items-center justify-center">
-                <Link to="/" className="items-center flex flex-col gap-2">
-                  <IoHammerOutline size={24} color="#fff" />
-                  <span className="text-xs">小工具</span>
-                </Link>
-              </li>
-              <li className="w-[60px] h-[60px] flex flex-col items-center justify-center">
-                <Link to="/" className="items-center flex flex-col gap-2">
-                  <IoHandLeftOutline size={24} color="#fff" />
-                  <span className="text-xs">帮助</span>
-                </Link>
-              </li>
-              <li className="w-[60px] h-[60px] flex flex-col items-center justify-center">
-                <Link to="/" className="items-center flex flex-col gap-2">
-                  <IoSettingsOutline size={24} color="#fff" />
-                  <span className="text-xs">设置</span>
-                </Link>
-              </li>
-
-            </ul>
+            <LeftDocker />
           </div>
           <div className="relative w-[calc(100%-80px)]">
             <div className="bg-card rounded-l-lg h-full">

src/pages/LeftDocker.tsx

@@ -0,0 +1,56 @@
+import { Link, useLocation } from "react-router-dom";
+import {
+  IoCubeOutline,
+  IoHammerOutline,
+  IoHandLeftOutline,
+  IoLayersOutline,
+  IoListOutline,
+  IoPlayOutline,
+  IoSettingsOutline
+} from "react-icons/io5";
+import './LeftDocker.css'
+
+import { ReactNode } from 'react';
+
+type MenuItem = {
+  to: string;
+  name: string;
+  icon: ReactNode;
+};
+
+
+const menuItems: MenuItem[] = [
+  { to: "/", name: "一键启动", icon: <IoPlayOutline size={24} /> },
+  { to: "/datalist", name: "数据列表", icon: <IoListOutline size={24} /> },
+  { to: "/version", name: "版本管理", icon: <IoLayersOutline size={24} /> },
+  { to: "/models", name: "模型管理", icon: <IoCubeOutline size={24} /> },
+  { to: "/tools", name: "小工具", icon: <IoHammerOutline size={24} /> },
+  { to: "/help", name: "帮助", icon: <IoHandLeftOutline size={24} /> },
+  { to: "/setting", name: "设置", icon: <IoSettingsOutline size={24} /> },
+];
+
+export const LeftDocker = () => {
+  const location = useLocation();
+
+  const handleClick = (item: MenuItem) => {
+    console.log(`Clicked on ${item.name}`);
+  };
+
+  return (
+    <ul className="flex flex-col items-center pt-2 gap-4">
+      {menuItems.map((item) => (
+        <li
+          key={item.name}
+          className={`w-full flex flex-col items-center justify-center ${location.pathname === item.to ? "active text-blue-500" : ""
+            }`}
+          onClick={() => handleClick(item)}
+        >
+          <Link to={item.to} className="w-[60px] h-[60px] flex items-center justify-center flex-col gap-2">
+            {item.icon}
+            <span className="text-xs">{item.name}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+};

src/pages/Setting/index.tsx

@@ -0,0 +1,12 @@
+import { motion } from 'framer-motion';
+
+export const Setting = () => {
+  return <motion.div
+    initial={{ y: 10, opacity: 0 }}
+    animate={{ y: 0, opacity: 1 }}
+    exit={{ y: 0, opacity: 0 }}
+    transition={{ duration: 0.25 }}
+  >
+    <div>设置</div>
+  </motion.div>
+}