add

package.json

@@ -30,6 +30,7 @@
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-stage-0": "^7.8.3",
     "@babel/preset-typescript": "^7.14.5",
+    "@blueprintjs/core": "^3.47.0",
     "@rollup/plugin-alias": "^3.1.4",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -84,10 +85,10 @@
     "windicss": "^3.1.3"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.6.5",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "framer-motion": "^4.1.17"
+    "framer-motion": "^4.1.17",
+    "normalize.css": "^8.0.1"
   },
   "build": {
     "productName": "my-project",

src/main/facilities/index.ts

@@ -52,5 +52,5 @@ ipcMain.on("@func:buildin:quit", event => {
 })
 
 ipcMain.on("@func:render:addClock", (event, x, y) => {
-  ipcMain.emit("@func:main:show", event , "about")
+  ipcMain.emit("@func:main:show", event , "about/test")
 })

src/render/AppRouter.tsx

@@ -47,12 +47,12 @@ function RouteMap(props: any) {
 export default function () {
   return (
     <Router>
-      <RouteMap routes={routes}></RouteMap>
+      {/* <RouteMap routes={routes}></RouteMap> */}
-      {/* <Layout
+      <Layout
         render={() => {
           return <RouteMap routes={routes}></RouteMap>
         }}
-      ></Layout> */}
+      ></Layout>
     </Router>
   )
 }

src/render/assets/style/common.scss

@@ -1,5 +1,13 @@
+@import "normalize.css";
 @import "./reset.scss";
 @import "./_font.scss";
+@import "@blueprintjs/core/lib/css/blueprint.css";
+@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
+
+:focus{
+  // 去除按钮点击时的蓝色边框
+  outline: 0;
+}
 
 body,
 button,

src/render/main.tsx

@@ -4,8 +4,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "@/plugins/i18n"
 import {Provider} from 'react-redux'
-import { ChakraProvider, extendTheme } from "@chakra-ui/react"
-import theme from '@chakra-ui/theme'
 import electron from "@/plugins/electron"
 
 import Router from "./AppRouter";
@@ -14,18 +12,11 @@ import Router from "./AppRouter";
 console.log(electron);
 console.log(__staticVar); 
 
-const my_theme = extendTheme({
-  backgroundColor: "transparent"
-})
-
-console.log(theme)
 ReactDOM.render(
   <React.StrictMode>
-    <ChakraProvider theme={my_theme}>
       <Provider store={store}>
         <Router></Router>
       </Provider>
-    </ChakraProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );

src/render/route.tsx

@@ -26,6 +26,7 @@ export default [
     path: "/about",
     component: lazy(() => import("@/views/About")),
     exact: false,
+    root: true,
     meta: {
       auth: false,
     },
@@ -34,6 +35,7 @@ export default [
       {
         path: "/about/test",
         exact: true,
+        layout:false,
         meta: {
           auth: false,
         },
@@ -46,6 +48,8 @@ export default [
     path: "/float",
     component: lazy(() => import("@/views/Float")),
     exact: true,
+    root: true,
+    layout:false,
     meta: {
       auth: false,
     },
@@ -56,6 +60,7 @@ export default [
     component: lazy(() => import("@/views/Home")),
     exact: true,
     loading: () => <Loading color="blue"></Loading>,
+    root: true,
     meta: {
       auth: false,
     },
@@ -64,15 +69,18 @@ export default [
   {
     path: "/",
     exact: true,
+    root: true,
     redirect: "/home",
   },
   {
     path: "/login",
+    root: true,
     component: Login //lazy(() => import("@/views/Login")),
   },
   {
     path: "*",
     exact: false,
+    root: true,
     component: Page404,
   },
 ]

src/render/views/About/index.tsx

@@ -11,7 +11,7 @@ export default function About(props: any) {
   function back(){
     console.log(1231);
     
-    history.goBack()
+    history.replace("/about")
   }
   return (
     <div className="">

src/render/views/Home/index.module.scss

@@ -1,3 +0,0 @@
-.Home {
-  background-color: transparent;
-}

src/render/views/Home/index.tsx

@@ -1,34 +1,33 @@
 import { addTodo, removeTodo } from "@/store/action/todo"
 import React from "react"
-import { connect } from "react-redux"
+import { connect, useStore } from "react-redux"
 import style from "./index.module.scss"
-import { Button } from "@chakra-ui/react"
+import { Icon } from "@blueprintjs/core"
 
 export interface HomeProps {
   add(text: string): void
-
   todo: ITodo[]
-
   remove(id: number): void
 }
 
 function Home(props: HomeProps) {
+  const tabs = [
+    {icon: "globe", title:"添加闹钟"}
+  ]
   return (
-    <div className={style.Home}>
+    <div>sada</div>
-      <Button>asd</Button>
-    </div>
   )
 }
 
 const mapStateToProps = (state: any) => {
   return {
-    todo: state.todo
+    todo: state.todo,
   }
 }
 
 const mapDispatchToProps = (dispatch: any) => ({
   add: (text: string) => dispatch(addTodo(text)),
-  remove: (id: string | number) => dispatch(removeTodo(id))
+  remove: (id: string | number) => dispatch(removeTodo(id)),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Home)

src/render/views/Layout/index.module.scss

@@ -0,0 +1,33 @@
+.Layout {
+  height: 100vh;
+  .left {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background-color: #2c2c2c;
+    width: 45px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .leftList,.leftListBottom {
+      width: 100%;
+      .leftItem {
+        text-align: center;
+        padding: 10px 0;
+        color: #808080;
+        cursor: pointer;
+        &:hover {
+          color: #f8ffff;
+        }
+      }
+    }
+    .leftList{
+      flex-grow: 1;
+      flex-shrink: 0;
+    }
+  }
+  .right{
+    margin-left: 45px;
+  }
+}

src/render/views/Layout/index.tsx

@@ -1,16 +1,85 @@
 import React, { ReactElement } from "react"
+import style from "./index.module.scss"
 import { useLocation } from "react-router-dom"
+import { Icon } from "@blueprintjs/core"
+import route from "@render/route"
 
 // interface IProps {
 //   render(): ReactElement
 // }
 
+function foundRoute(route:any, name:string, arrIndex?: number[]):any{
+  if(!arrIndex){
+    arrIndex = []
+  }
+  for (let i = 0; i < route.length; i++) {
+    const element = route[i];
+    if(element.root){
+      arrIndex = []
+    }
+    arrIndex.push(i);
+    let lena = element.path.split("/").length
+    let lenb =name.split("/").length
+    console.log(element.path, name,lena,lenb, element.path == name && lena==lenb);
+    if(element.path == name && lena==lenb){
+      return arrIndex
+    } else if(element.children){
+      let a = foundRoute(element.children, name, arrIndex);
+      if(a){
+        return a
+      }
+    }
+  }
+}
+
 export default function (props: any) {
+  const {pathname} = useLocation()
+
+  console.log(pathname);
+  console.log(route);
+  let oroute = JSON.parse(JSON.stringify(route))
+  let index = foundRoute(route, pathname)
+  console.log(index);
+  let isLayout = true;
+  if(index&&index.length){
+    let res = oroute[index[0]];
+    let cur = res;
+    for (let i = 1; i < index.length; i++) {
+      const element = index[i];
+      cur.children = [cur.children[element]]
+      cur = cur.children[element]
+    }
+    if(cur){
+      cur.children = [];
+    }
+    console.log(cur);
+    if(cur.layout!=undefined){
+      isLayout = !!cur.layout
+    }
+    console.log(res);
+  }
+  
   return (
-    <div>
+    isLayout?(
-      <div className="content">
+      <div className={style.Layout}>
+      <div className={style.left}>
+        <div className={style.leftList}>
+          <div className={style.leftItem} title={"添加闹钟"}>
+            <Icon icon="time" size={20}/>
+            <div>闹钟</div>
+          </div>
+        </div>
+        <div className={style.leftListBottom}>
+          <div className={style.leftItem} title={"设置"}>
+            <Icon icon="settings" size={20} />
+          </div>
+        </div>
+      </div>
+      <div className={style.right}>
         <props.render></props.render>
       </div>
+      <div>sad</div>
     </div>
+    ):(<props.render></props.render>)
   )
 }