topuser
/
vite-electron
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add

ui^2
npmrun 4 years ago
parent
d988a9f8a6
commit
70ccc1e5a7
10 changed files with 397 additions and 475 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      a.md
  2. 709
      package-lock.json
  3. 9
      package.json
  4. 2
      script/code/runVite.ts
  5. 21
      src/render/assets/style/common.scss
  6. 2
      src/render/index.html
  7. 5
      src/render/route.tsx
  8. 50
      src/render/views/Home/index.module.scss
  9. 38
      src/render/views/Home/index.tsx
  10. 33
      src/render/views/Layout/index.tsx

3
a.md
View File

@ -24,4 +24,5 @@ https://www.jianshu.com/p/4699b825d285
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
react-desktop react-desktop
考虑使用谷歌的材料ui 考虑使用谷歌的材料ui
https://www.framer.com/docs/animation/

709
package-lock.json
View File

File diff suppressed because it is too large

9
package.json
View File

@ -30,7 +30,6 @@
"@babel/preset-env": "^7.14.8", "@babel/preset-env": "^7.14.8",
"@babel/preset-stage-0": "^7.8.3", "@babel/preset-stage-0": "^7.8.3",
"@babel/preset-typescript": "^7.14.5", "@babel/preset-typescript": "^7.14.5",
"@blueprintjs/core": "^3.47.0",
"@rollup/plugin-alias": "^3.1.4", "@rollup/plugin-alias": "^3.1.4",
"@rollup/plugin-commonjs": "^19.0.1", "@rollup/plugin-commonjs": "^19.0.1",
"@rollup/plugin-json": "^4.1.0", "@rollup/plugin-json": "^4.1.0",
@ -85,13 +84,11 @@
"vitejs-plugin-electron": "^0.1.3", "vitejs-plugin-electron": "^0.1.3",
"webpack": "^5.47.0", "webpack": "^5.47.0",
"webpack-cli": "^4.7.2", "webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2", "webpack-dev-server": "^3.11.2"
"windicss": "^3.1.3"
}, },
"dependencies": { "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", "framer-motion": "^4.1.17",
"fs-extra": "^10.0.0", "fs-extra": "^10.0.0",
"normalize.css": "^8.0.1" "normalize.css": "^8.0.1"

2
script/code/runVite.ts
View File

@ -22,7 +22,7 @@ export function devVite() {
}) })
viteProcess.stderr.on("data", data => { viteProcess.stderr.on("data", data => {
logStats("vite err", data) logStats("vite err", data.toString())
reject() reject()
}) })

21
src/render/assets/style/common.scss
View File

@ -1,11 +1,7 @@
@import "normalize.css";
@import "./reset.scss"; @import "./reset.scss";
@import "./_font.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{ :focus {
// 去除按钮点击时的蓝色边框 // 去除按钮点击时的蓝色边框
outline: 0; outline: 0;
} }
@ -18,13 +14,14 @@ textarea {
font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif; font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
} }
body{ body {
// background-image: url("@/assets/images/0.jpg"); // background-image: url("@/assets/images/0.jpg");
// background-attachment: fixed; // background-attachment: fixed;
// background-position: center top 36px; // background-position: center top 36px;
// background-repeat: no-repeat; // background-repeat: no-repeat;
// background-size: cover; // background-size: cover;
} }
a { a {
// color: initial; // color: initial;
display: inline-block; display: inline-block;
@ -36,7 +33,17 @@ a {
@include clearfix; @include clearfix;
} }
.container{ .container {
max-width: 900px; max-width: 900px;
margin: 0 auto; 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');
}

2
src/render/index.html
View File

@ -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="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:;"> --> <!-- <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> <title><%- title %></title>
</head> </head>
<body> <body>

5
src/render/route.tsx
View File

@ -1,4 +1,5 @@
import Page404 from "@/views/Auth/Page404" import Page404 from "@/views/Auth/Page404"
import Home from "@/views/Home" import Home from "@/views/Home"
import Login from "@/views/Login" import Login from "@/views/Login"
import React, { lazy } from "react" import React, { lazy } from "react"
@ -81,8 +82,8 @@ const routes = [
children: [], children: [],
}, },
{ {
path: "/home", path: "/home", // Home,//
component: Home,//lazy(() => import("@/views/Home")), component: lazy(delay(() => import("@/views/Home"), 2000)),
exact: true, exact: true,
// loading: () => <Loading color="blue"></Loading>, // loading: () => <Loading color="blue"></Loading>,
root: true, root: true,

50
src/render/views/Home/index.module.scss
View File

@ -1,10 +1,60 @@
.container { .container {
padding: 20px; padding: 20px;
.title { .title {
font-size: 25px; font-size: 25px;
font-weight: bolder; font-weight: bolder;
} }
.opeation { .opeation {
margin: 20px 0; 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;
}
}
} }

38
src/render/views/Home/index.tsx
View File

@ -1,15 +1,41 @@
import electron from "@/plugins/electron" import { Grid, Paper } from "@material-ui/core"
import cs from "classnames" import cs from "classnames"
import _ from "lodash" import { motion } from "framer-motion"
import React from "react" import React from "react"
import style from "./index.module.scss" 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() { function Home() {
return ( return (
<div className={cs(style.container, "container")}> <MyComponent>
add <div className={cs(style.container, "container")}>
</div> <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>
) )
} }
export default Home export default Home

33
src/render/views/Layout/index.tsx
View File

@ -1,12 +1,12 @@
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 cs from "classnames"
import React from "react"
import { NavLink } from "react-router-dom"
import style from "./index.module.scss"
function ActionItem() {
function ActionItem(){
} }
export default function Layout(props: any) { export default function Layout(props: any) {
@ -17,24 +17,25 @@ export default function Layout(props: any) {
} }
interface TList { interface TList {
icon: IconName icon: any
path: string path: string
title: string title: string
text: string text: string
} }
const list: TList[] = [ const list: TList[] = [
{ {
path: "/home", path: "/home",
icon: "time", icon: Icon.Home,
title: "首页", title: "首页",
text: "首页", text: "首页"
}, },
{ {
path: "/about", path: "/about",
icon: "mugshot", icon: Icon.Home,
title: "添加闹钟", title: "添加闹钟",
text: "关于", text: "关于"
}, }
] ]
return ( return (
@ -44,7 +45,7 @@ export default function Layout(props: any) {
{list.map((v, i) => ( {list.map((v, i) => (
<NavLink key={i} replace to={v.path} style={{ display: "block" }}> <NavLink key={i} replace to={v.path} style={{ display: "block" }}>
<div className={style.leftItem} title={v.title}> <div className={style.leftItem} title={v.title}>
<Icon icon={v.icon} size={22} /> <v.icon style={{ fontSize: 22 }}/>
<div>{v.text}</div> <div>{v.text}</div>
{v.path == curRoute.path && <div className={style.activeLine}></div>} {v.path == curRoute.path && <div className={style.activeLine}></div>}
</div> </div>
@ -53,10 +54,10 @@ export default function Layout(props: any) {
</div> </div>
<div className={style.leftListBottom}> <div className={style.leftListBottom}>
<div className={style.leftItem} title={"设置"}> <div className={style.leftItem} title={"设置"}>
<Icon icon="settings" size={22} /> <Icon.Home style={{ fontSize: 22 }}/>
</div> </div>
<div className={style.leftItem} title={"设置"}> <div className={style.leftItem} title={"设置"}>
<Icon icon="settings" size={22} /> <Icon.Home style={{ fontSize: 22 }}/>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save