add

4 years ago · 70ccc1e5a7
10 changed files with 397 additions and 475 deletions
--- a/a.md
+++ b/a.md
@ -25,3 +25,4 @@ https://www.jianshu.com/p/4699b825d285
    react-desktop
    考虑使用谷歌的材料ui
    https://www.framer.com/docs/animation/
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -30,7 +30,6 @@
    "@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",
@ -85,13 +84,11 @@
    "vitejs-plugin-electron": "^0.1.3",
    "webpack": "^5.47.0",
    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^3.11.2"
    "windicss": "^3.1.3"
  },
  "dependencies": {
-    "@blueprintjs/table": "^3.9.0",
+    "@material-ui/core": "^4.12.3",
-    "@emotion/react": "^11.4.0",
+    "@material-ui/icons": "^4.11.2",
    "@emotion/styled": "^11.3.0",
    "framer-motion": "^4.1.17",
    "fs-extra": "^10.0.0",
    "normalize.css": "^8.0.1"
--- a/script/code/runVite.ts
+++ b/script/code/runVite.ts
@ -22,7 +22,7 @@ export function devVite() {
      })
      viteProcess.stderr.on("data", data => {
-        logStats("vite err", data)
+        logStats("vite err", data.toString())
        reject()
      })
--- a/src/render/assets/style/common.scss
+++ b/src/render/assets/style/common.scss
@ -1,9 +1,5 @@
@import "normalize.css";
@import "./reset.scss";
@import "./_font.scss";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/table/lib/css/table.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 :focus {
  // 去除按钮点击时的蓝色边框
@ -25,6 +21,7 @@ body{
  // background-repeat: no-repeat;
  // background-size: cover;
 }
 a {
  // color: initial;
  display: inline-block;
@ -40,3 +37,13 @@ a {
  max-width: 900px;
  margin: 0 auto;
 }
 .a-shadow {
  //-moz-box-shadow: 3px 3px 4px #000;
  //-webkit-box-shadow: 3px 3px 4px #000;
  box-shadow: 0 0 4px #898989;
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000)";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
 }
--- a/src/render/index.html
+++ b/src/render/index.html
@ -7,6 +7,8 @@
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: 'unsafe-inline'; style-src * 'unsafe-inline'; font-src * data:;"> -->
    <!-- <meta http-equiv="X-Content-Security-Policy" content="default-src 'self' https: 'unsafe-inline'; style-src * 'unsafe-inline'; font-src * data:;"> -->
    <!--  -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <title><%- title %></title>
  </head>
  <body>
--- a/src/render/route.tsx
+++ b/src/render/route.tsx
@ -1,4 +1,5 @@
 import Page404 from "@/views/Auth/Page404"
 import Home from "@/views/Home"
 import Login from "@/views/Login"
 import React, { lazy } from "react"
@ -81,8 +82,8 @@ const routes =  [
    children: [],
  },
  {
-    path: "/home",
+    path: "/home", // Home,//
-    component: Home,//lazy(() => import("@/views/Home")),
+    component: lazy(delay(() => import("@/views/Home"), 2000)),
    exact: true,
    // loading: () => <Loading color="blue"></Loading>,
    root: true,
--- a/src/render/views/Home/index.module.scss
+++ b/src/render/views/Home/index.module.scss
@ -1,10 +1,60 @@
 .container {
  padding: 20px;
  .title {
    font-size: 25px;
    font-weight: bolder;
  }
  .opeation {
    margin: 20px 0;
  }
  .panel {
    padding: 10px 20px;
    border-radius: 6px;
    .panelTitle {
      cursor: pointer;
      margin-bottom: 10px;
      .panelTitleName {
        display: inline-block;
        font-size: 25px;
        font-weight: bolder;
        position: relative;
        &:before {
          font-size: 20px;
          content: "#";
          opacity: 0;
          position: absolute;
          color: red;
          right: 100%;
          top: 50%;
          transform: translateY(-50%);
          transition: opacity .3s linear;
        }
        &:hover:before {
          opacity: 1;
        }
      }
      .panelTitleDesc {
        display: inline-block;
        font-size: 14px;
        margin-left: 8px;
      }
    }
    .cell {
      border: 1px solid #999999;
      padding: 5px 15px;
      font-size: 14px;
      border-radius: 5px;
      cursor: pointer;
      user-select: none;
    }
  }
 }
--- a/src/render/views/Home/index.tsx
+++ b/src/render/views/Home/index.tsx
@ -1,14 +1,40 @@
-import electron from "@/plugins/electron"
+import { Grid, Paper } from "@material-ui/core"
 import cs from "classnames"
-import _ from "lodash"
+import { motion } from "framer-motion"
 import React from "react"
 import style from "./index.module.scss"
 const MyComponent = ({ children }: any) => {
  return (
    <motion.div initial="hidden" animate="visible" variants={{
      visible: { opacity: 1 },
      hidden: { opacity: 0 }
    }}>
      {children}
    </motion.div>
  )
 }
 function Home() {
  return (
    <MyComponent>
      <div className={cs(style.container, "container")}>
-      add 
+        <Paper className={cs(style.panel)} elevation={3} variant="outlined">
          <div className={style.panelTitle}>
            <div className={style.panelTitleName}>通用工具</div>
            <div className={style.panelTitleDesc}>方便开发</div>
          </div>
          <Grid container style={{ textAlign: "center" }} spacing={2}>
            <Grid item xs={12} sm={6} md={2}>
              <div className={style.cell}>Base64</div>
            </Grid>
            <Grid item xs={12} sm={6} md={2}>
              <div className={style.cell}>二维码生成</div>
            </Grid>
          </Grid>
        </Paper>
      </div>
    </MyComponent>
  )
 }
--- a/src/render/views/Layout/index.tsx
+++ b/src/render/views/Layout/index.tsx
@ -1,9 +1,9 @@
-import { Icon, IconName } from "@blueprintjs/core"
+import * as Icon from "@material-ui/icons"
-import route, { useRoute } from "@render/route"
+import { useRoute } from "@render/route"
 import React, { Fragment } from "react"
 import { NavLink, useLocation } from "react-router-dom"
 import style from "./index.module.scss"
 import cs from "classnames"
 import React from "react"
 import { NavLink } from "react-router-dom"
 import style from "./index.module.scss"
 function ActionItem() {
@ -17,24 +17,25 @@ export default function Layout(props: any) {
  }
  interface TList {
-    icon: IconName
+    icon: any
    path: string
    title: string
    text: string
  }
  const list: TList[] = [
    {
      path: "/home",
-      icon: "time",
+      icon: Icon.Home,
      title: "首页",
-      text: "首页",
+      text: "首页"
    },
    {
      path: "/about",
-      icon: "mugshot",
+      icon: Icon.Home,
      title: "添加闹钟",
-      text: "关于",
+      text: "关于"
-    },
+    }
  ]
  return (
@ -44,7 +45,7 @@ export default function Layout(props: any) {
          {list.map((v, i) => (
            <NavLink key={i} replace to={v.path} style={{ display: "block" }}>
              <div className={style.leftItem} title={v.title}>
-                <Icon icon={v.icon} size={22} />
+                <v.icon style={{ fontSize: 22 }}/>
                <div>{v.text}</div>
                {v.path == curRoute.path && <div className={style.activeLine}></div>}
              </div>
@ -53,10 +54,10 @@ export default function Layout(props: any) {
        </div>
        <div className={style.leftListBottom}>
          <div className={style.leftItem} title={"设置"}>
-            <Icon icon="settings" size={22} />
+            <Icon.Home style={{ fontSize: 22 }}/>
          </div>
          <div className={style.leftItem} title={"设置"}>
-            <Icon icon="settings" size={22} />
+            <Icon.Home style={{ fontSize: 22 }}/>
          </div>
        </div>
      </div>