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",
-    "windicss": "^3.1.3"
+    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
-    "@blueprintjs/table": "^3.9.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
    "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",
-    component: Home,//lazy(() => import("@/views/Home")),
+    path: "/home", // 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 route, { useRoute } from "@render/route"
-import React, { Fragment } from "react"
-import { NavLink, useLocation } from "react-router-dom"
-import style from "./index.module.scss"
+import * as Icon from "@material-ui/icons"
+import { useRoute } from "@render/route"
 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>