Compare commits
14 Commits
| Author | SHA1 | Date |
|---|---|---|
 1549469775
|
679009a273 | 4 years ago |
|
1549469775
|
2718e3951c | 4 years ago |
|
1549469775
|
2dee2a3191 | 4 years ago |
|
1549469775
|
ec6c0a2c8c | 4 years ago |
|
npmrun
|
70ccc1e5a7 | 4 years ago |
|
1549469775
|
d988a9f8a6 | 4 years ago |
|
npmrun
|
4dc0f3f3ba | 4 years ago |
|
1549469775
|
afde655ec0 | 4 years ago |
|
npmrun
|
80d69d1fa6 | 4 years ago |
|
1549469775
|
2f1f7d3456 | 4 years ago |
|
npmrun
|
c63b84e961 | 4 years ago |
|
1549469775
|
9159ad4767 | 4 years ago |
|
npmrun
|
99b005cedd | 4 years ago |
|
1549469775
|
865e6f006f | 4 years ago |
45 changed files with 3426 additions and 315 deletions
@ -0,0 +1,62 @@ |
|||||
|
import { Button, ButtonGroup, Card, FormGroup, InputGroup, Overlay, TextArea } from "@blueprintjs/core" |
||||
|
import cs from "classnames" |
||||
|
import React, { useEffect, useState } from "react" |
||||
|
import style from "./dialog.module.scss" |
||||
|
|
||||
|
export default function Dialog(props: any) { |
||||
|
const { isOpen, setIsOpen } = props |
||||
|
|
||||
|
const [title, setTitle] = useState<string>("") |
||||
|
const [time, setTime] = useState<string>("") |
||||
|
const [desc, setDesc] = useState<string>("") |
||||
|
|
||||
|
function clickConfrim(){ |
||||
|
props.onConfrim&&props.onConfrim(title,time,desc) |
||||
|
} |
||||
|
function clickCancel(){ |
||||
|
setIsOpen(false) |
||||
|
props.onCancel&&props.onCancel() |
||||
|
} |
||||
|
useEffect(()=>{ |
||||
|
if(isOpen){ |
||||
|
setTitle("") |
||||
|
setTime("") |
||||
|
setDesc("") |
||||
|
} |
||||
|
}, [isOpen]) |
||||
|
|
||||
|
return ( |
||||
|
<Overlay |
||||
|
isOpen={isOpen} |
||||
|
onClose={() => { |
||||
|
setIsOpen(false) |
||||
|
}} |
||||
|
> |
||||
|
<div className={cs(style.dialog)}> |
||||
|
<Card> |
||||
|
<form className="addClock clearfix"> |
||||
|
<FormGroup label="标题" labelFor="title-input" labelInfo="(required)"> |
||||
|
<InputGroup value={title} onChange={e => setTitle(e.target.value)} id="title-input" placeholder="请输入标题"/> |
||||
|
</FormGroup> |
||||
|
<FormGroup helperText="一个通用的时间表示法" label="时间区间" labelFor="time-input" labelInfo="(required)"> |
||||
|
<InputGroup value={time} onChange={e => setTime(e.target.value)} id="time-input" placeholder="请输入时间区间"/> |
||||
|
</FormGroup> |
||||
|
<FormGroup label="描述" labelFor="desc-input"> |
||||
|
<TextArea value={desc} onChange={e => setDesc(e.target.value)} id="desc-input" style={{ width: "100%" }} |
||||
|
growVertically={true} large={true} intent="primary"/> |
||||
|
</FormGroup> |
||||
|
<ButtonGroup style={{ float: "right" }}> |
||||
|
<Button |
||||
|
intent="primary" |
||||
|
onClick={()=>clickConfrim()} |
||||
|
> |
||||
|
确认 |
||||
|
</Button> |
||||
|
<Button intent="danger" onClick={()=>clickCancel()}>取消</Button> |
||||
|
</ButtonGroup> |
||||
|
</form> |
||||
|
</Card> |
||||
|
</div> |
||||
|
</Overlay> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
.dialog { |
||||
|
left: calc(50vw - 200px); |
||||
|
width: 400px; |
||||
|
margin: 10vh 0; |
||||
|
top: 0; |
||||
|
&:global(.bp3-overlay-appear), |
||||
|
&:global(.bp3-overlay-enter) { |
||||
|
transform: translateY(-50vh) rotate(-10deg); |
||||
|
} |
||||
|
|
||||
|
&:global(.bp3-overlay-appear-active), |
||||
|
&:global(.bp3-overlay-enter-active) { |
||||
|
transform: translateY(0) rotate(0deg); |
||||
|
transition-delay: 0; |
||||
|
transition-duration: 0.3s; |
||||
|
transition-property: transform; |
||||
|
transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11); |
||||
|
} |
||||
|
|
||||
|
&:global(.bp3-overlay-exit) { |
||||
|
transform: translateY(0) rotate(0deg); |
||||
|
} |
||||
|
|
||||
|
&:global(.bp3-overlay-exit-active) { |
||||
|
transform: translateY(150vh) rotate(-20deg); |
||||
|
transition-delay: 0; |
||||
|
transition-duration: 0.5s; |
||||
|
transition-property: transform; |
||||
|
transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
.container { |
||||
|
padding: 20px; |
||||
|
.title { |
||||
|
font-size: 25px; |
||||
|
font-weight: bolder; |
||||
|
} |
||||
|
.opeation { |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,152 @@ |
|||||
|
import electron from "@/plugins/electron" |
||||
|
import { addTodo, removeTodo } from "@/store/action/todo" |
||||
|
import { Button, ButtonGroup, ControlGroup, FormGroup, HotkeysProvider, InputGroup } from "@blueprintjs/core" |
||||
|
import { Cell, Column, Table2 } from "@blueprintjs/table" |
||||
|
import cs from "classnames" |
||||
|
import _ from "lodash" |
||||
|
import React, { useEffect, useRef, useState } from "react" |
||||
|
import { connect } from "react-redux" |
||||
|
import Dialog from "./Dialog" |
||||
|
import style from "./index.module.scss" |
||||
|
import useLocation from "./useLocation" |
||||
|
|
||||
|
export interface HomeProps { |
||||
|
add(text: string): void |
||||
|
|
||||
|
todo: ITodo[] |
||||
|
|
||||
|
remove(id: number): void |
||||
|
} |
||||
|
|
||||
|
let keyGen = 0 |
||||
|
|
||||
|
function Home(props: HomeProps) { |
||||
|
const [isOpen, setIsOpen] = useState<boolean>(false) |
||||
|
const keyRef = useRef<HTMLInputElement>(null) |
||||
|
|
||||
|
function delItem() { |
||||
|
let key = keyRef.current?.value |
||||
|
if (key) { |
||||
|
let index = _.findIndex(clockList, { key: +key }) |
||||
|
if (index != -1) { |
||||
|
var list = [...clockList] |
||||
|
list.splice(index, 1) |
||||
|
setClockList(list) |
||||
|
keyRef.current!.value = "" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const { save, get } = useLocation() |
||||
|
const [clockList, setClockList] = useState<Record<string, any>[]>([]) |
||||
|
const keyList = _.map(clockList, "key") |
||||
|
const titleList = _.map(clockList, "title") |
||||
|
const timeList = _.map(clockList, "time") |
||||
|
const descList = _.map(clockList, "desc") |
||||
|
|
||||
|
function onConfrim(title: string, time: string, desc: string) { |
||||
|
if (title && time) { |
||||
|
const value = { |
||||
|
key: ++keyGen, |
||||
|
title: title, |
||||
|
time: time, |
||||
|
desc: desc, |
||||
|
} |
||||
|
setClockList([...clockList, value]) |
||||
|
setIsOpen(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
useEffect(() => { |
||||
|
;(async () => { |
||||
|
let list = await electron.ipcRenderer.invoke("@func:clock:getData") |
||||
|
if (list) { |
||||
|
setClockList(list) |
||||
|
const keyList = _.map(list, "key") |
||||
|
if (keyList.length) { |
||||
|
keyGen = Math.max(...keyList) |
||||
|
} |
||||
|
} |
||||
|
})() |
||||
|
}, []) |
||||
|
useEffect(() => { |
||||
|
electron.ipcRenderer.send("@func:clock:saveData", clockList) |
||||
|
}, [clockList]) |
||||
|
|
||||
|
return ( |
||||
|
<div className={cs(style.container, "container")}> |
||||
|
<div className={style.title}>闹钟列表</div> |
||||
|
<div className={style.opeation}> |
||||
|
<ButtonGroup> |
||||
|
<Button |
||||
|
icon="insert" |
||||
|
onClick={() => { |
||||
|
setIsOpen(true) |
||||
|
}} |
||||
|
> |
||||
|
添加闹钟 |
||||
|
</Button> |
||||
|
<Button icon="refresh">同步闹钟</Button> |
||||
|
</ButtonGroup> |
||||
|
</div> |
||||
|
<table> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>Month</th> |
||||
|
<th>Savings</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
|
||||
|
<tfoot> |
||||
|
<tr> |
||||
|
<td>Sum</td> |
||||
|
<td>$180</td> |
||||
|
</tr> |
||||
|
</tfoot> |
||||
|
|
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td>January</td> |
||||
|
<td>$100</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>February</td> |
||||
|
<td>$80</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
{/* <HotkeysProvider> |
||||
|
<Table2 numRows={titleList.length}> |
||||
|
<Column name="KEY" cellRenderer={index => <Cell>{keyList[index]}</Cell>}></Column> |
||||
|
<Column name="标题" cellRenderer={index => <Cell>{titleList[index]}</Cell>}></Column> |
||||
|
<Column name="时间" cellRenderer={index => <Cell>{timeList[index]}</Cell>}></Column> |
||||
|
<Column name="描述" cellRenderer={index => <Cell>{descList[index]}</Cell>}></Column> |
||||
|
</Table2> |
||||
|
</HotkeysProvider> */} |
||||
|
<div style={{ margin: "10px 0" }}> |
||||
|
<FormGroup helperText="需要填入指定的闹钟进行删除" label="Key" labelFor="text-input" labelInfo="(required)"> |
||||
|
<ControlGroup fill={false} vertical={false}> |
||||
|
<InputGroup inputRef={keyRef} id="text-input" placeholder="请输入Key值进行删除" /> |
||||
|
<Button onClick={() => delItem()} icon="trash" intent="danger" type="submit"> |
||||
|
删除 |
||||
|
</Button> |
||||
|
</ControlGroup> |
||||
|
</FormGroup> |
||||
|
</div> |
||||
|
<Dialog isOpen={isOpen} setIsOpen={setIsOpen} onConfrim={onConfrim}></Dialog> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
const mapStateToProps = (state: any) => { |
||||
|
return { |
||||
|
todo: state.todo, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const mapDispatchToProps = (dispatch: any) => ({ |
||||
|
add: (text: string) => dispatch(addTodo(text)), |
||||
|
remove: (id: string | number) => dispatch(removeTodo(id)), |
||||
|
}) |
||||
|
|
||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Home) |
||||
@ -0,0 +1,7 @@ |
|||||
|
export default function useLocation() { |
||||
|
return { |
||||
|
save: localStorage.setItem.bind(localStorage), |
||||
|
remove: localStorage.removeItem.bind(localStorage), |
||||
|
get: localStorage.getItem.bind(localStorage), |
||||
|
} |
||||
|
} |
||||
@ -1,5 +1,37 @@ |
|||||
{ |
{ |
||||
"name": "my-electron-app", |
"name": "my-electron-app", |
||||
"version": "1.0.0", |
"version": "1.0.0", |
||||
"lockfileVersion": 1 |
"lockfileVersion": 1, |
||||
|
"requires": true, |
||||
|
"dependencies": { |
||||
|
"fs-extra": { |
||||
|
"version": "10.0.0", |
||||
|
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz", |
||||
|
"integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==", |
||||
|
"requires": { |
||||
|
"graceful-fs": "^4.2.0", |
||||
|
"jsonfile": "^6.0.1", |
||||
|
"universalify": "^2.0.0" |
||||
|
} |
||||
|
}, |
||||
|
"graceful-fs": { |
||||
|
"version": "4.2.6", |
||||
|
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", |
||||
|
"integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==" |
||||
|
}, |
||||
|
"jsonfile": { |
||||
|
"version": "6.1.0", |
||||
|
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", |
||||
|
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", |
||||
|
"requires": { |
||||
|
"graceful-fs": "^4.1.6", |
||||
|
"universalify": "^2.0.0" |
||||
|
} |
||||
|
}, |
||||
|
"universalify": { |
||||
|
"version": "2.0.0", |
||||
|
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", |
||||
|
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,5 @@ |
|||||
|
/** @type {import('@ts-jest/dist/types').InitialOptionsTsJest} */ |
||||
|
module.exports = { |
||||
|
preset: 'ts-jest', |
||||
|
testEnvironment: 'node', |
||||
|
}; |
||||
File diff suppressed because it is too large
@ -0,0 +1,35 @@ |
|||||
|
import MarkdownIt from "markdown-it" |
||||
|
|
||||
|
const mark = new MarkdownIt() |
||||
|
|
||||
|
const mdToHtml = (str: string) => { |
||||
|
const content = mark.render(str) |
||||
|
return ` |
||||
|
import React from "react" |
||||
|
export default React.createElement('div', {dangerouslySetInnerHTML:{__html: \`${content}\`} })` |
||||
|
} |
||||
|
|
||||
|
export default function md(): any { |
||||
|
return { |
||||
|
name: "vite-plugin-md", |
||||
|
enforce: "pre", |
||||
|
transform(raw: any, id: any) { |
||||
|
if (!/\.md/g.test(id)) |
||||
|
return |
||||
|
try { |
||||
|
return mdToHtml(raw) |
||||
|
} catch (e) { |
||||
|
this.error(e) |
||||
|
return "" |
||||
|
} |
||||
|
}, |
||||
|
async handleHotUpdate(ctx: any) { |
||||
|
if (!/\.md/g.test(ctx.file)) |
||||
|
return |
||||
|
const defaultRead = ctx.read |
||||
|
ctx.read = async function() { |
||||
|
return mdToHtml(await defaultRead()) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
import { ipcMain } from "electron" |
||||
|
import fs from "fs-extra" |
||||
|
import path from "path" |
||||
|
|
||||
|
const homeDir = require("os").homedir() |
||||
|
const clockJsonPath = path.resolve(homeDir, ".forceClock/clock.json") |
||||
|
fs.ensureFileSync(clockJsonPath) |
||||
|
try { |
||||
|
console.log("--->",fs.readJSONSync(clockJsonPath)) |
||||
|
// const job = schedule.scheduleJob('42 * * * *', function(){
|
||||
|
// console.log('The answer to life, the universe, and everything!');
|
||||
|
// });
|
||||
|
} catch (e) { |
||||
|
console.log(e) |
||||
|
// 读取JSON文件失败
|
||||
|
} |
||||
|
|
||||
|
ipcMain.on("@func:clock:saveData", function(event, data) { |
||||
|
fs.writeJson(clockJsonPath, data) |
||||
|
}) |
||||
|
ipcMain.handle("@func:clock:getData", function() { |
||||
|
return fs.readJSONSync(clockJsonPath) |
||||
|
}) |
||||
@ -1,3 +1,4 @@ |
|||||
const electron = require("electron") // 只能用require
|
const electron = require("electron") // 只能用require ，而且不能用那个import转require的插件，否则样式懒加载样式打包有问题
|
||||
|
|
||||
export default electron |
export default electron |
||||
|
|
||||
|
|||||
@ -0,0 +1,50 @@ |
|||||
|
import { useLocation } from "react-router-dom" |
||||
|
export 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 |
||||
|
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 useRoute(routes:any){ |
||||
|
const { pathname } = useLocation() |
||||
|
let oroute = JSON.parse(JSON.stringify(routes)) |
||||
|
let index = foundRoute(routes, pathname) |
||||
|
let isLayout = true |
||||
|
let curA = null |
||||
|
let curB = null |
||||
|
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 = [] |
||||
|
} |
||||
|
if (cur.layout != undefined) { |
||||
|
isLayout = !!cur.layout |
||||
|
} |
||||
|
curA = cur |
||||
|
curB = res |
||||
|
} |
||||
|
return [curA,curB] |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
# 天涯路远，只争朝夕 |
||||
|
|
||||
|
时间如白驹过隙，一晃而过，在茫茫中，我仿佛已经丢失了很多，曾经的路已不见痕迹，前方的海无涯无际。 |
||||
|
回首望去，过去的岁月如梦幻泡影，伸手一触，四散分离。 |
||||
|
你还记得自己的梦想是什么吗？你还记得自己曾想过要干什么吗？如今的自己是否活成了当初讨厌的样子？ |
||||
|
在冰冷的白色灯管下，我写下了这一段话，我也将深度思考，回答。这一切是否是自己期望的。 |
||||
|
|
||||
|
> 今天是2021-08-04 00:26:00,昨天是我**25岁**生日。 |
||||
|
|
||||
|
```javascript |
||||
|
console.log("时间会检验出答案"); // 请带上分号，给一切一个结束 |
||||
|
``` |
||||
|
|
||||
|
## 曾经 |
||||
|
|
||||
|
阿松大 |
||||
@ -0,0 +1,3 @@ |
|||||
|
.about{ |
||||
|
padding: 20px; |
||||
|
} |
||||
@ -1,14 +1,60 @@ |
|||||
.clock { |
.container { |
||||
position: fixed; |
padding: 20px; |
||||
left: 0; |
|
||||
top: 0; |
.title { |
||||
transform: translate(-50% -50%); |
font-size: 25px; |
||||
font-size: 40px; |
font-weight: bolder; |
||||
font-weight: bolder; |
} |
||||
text-align: center; |
|
||||
line-height: 1.3; |
.opeation { |
||||
color: #CD1110; |
margin: 20px 0; |
||||
font-family: "pixi"; |
} |
||||
user-select: none; |
|
||||
pointer-events: none; |
.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; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|||||
@ -1,35 +1,41 @@ |
|||||
import { addTodo, removeTodo } from "@/store/action/todo" |
import { Grid, Paper } from "@material-ui/core" |
||||
|
import cs from "classnames" |
||||
|
import { motion } from "framer-motion" |
||||
import React from "react" |
import React from "react" |
||||
import { connect } from "react-redux" |
|
||||
import style from "./index.module.scss" |
import style from "./index.module.scss" |
||||
import useTime from "./useTime" |
|
||||
import usePositionElectron from "./usePositionElectron" |
|
||||
|
|
||||
export interface HomeProps { |
const MyComponent = ({ children }: any) => { |
||||
add(text: string): void |
|
||||
|
|
||||
todo: ITodo[] |
|
||||
|
|
||||
remove(id: number): void |
|
||||
} |
|
||||
|
|
||||
function Home(props: HomeProps) { |
|
||||
return ( |
return ( |
||||
<div className={style.clock}> |
<motion.div initial="hidden" animate="visible" variants={{ |
||||
asdsadasdsdasad |
visible: { opacity: 1 }, |
||||
</div> |
hidden: { opacity: 0 } |
||||
|
}}> |
||||
|
{children} |
||||
|
</motion.div> |
||||
) |
) |
||||
} |
} |
||||
|
|
||||
const mapStateToProps = (state: any) => { |
function Home() { |
||||
return { |
return ( |
||||
todo: state.todo |
<MyComponent> |
||||
} |
<div className={cs(style.container, "container")}> |
||||
|
<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> |
||||
|
) |
||||
} |
} |
||||
|
|
||||
const mapDispatchToProps = (dispatch: any) => ({ |
export default Home |
||||
add: (text: string) => dispatch(addTodo(text)), |
|
||||
remove: (id: string | number) => dispatch(removeTodo(id)) |
|
||||
}) |
|
||||
|
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Home) |
|
||||
|
|||||
@ -1,32 +0,0 @@ |
|||||
import electron from "@/plugins/electron" |
|
||||
import { useEffect } from "react" |
|
||||
|
|
||||
|
|
||||
export default function() { |
|
||||
useEffect(() => { |
|
||||
let biasX = 0 |
|
||||
let biasY = 0 |
|
||||
document.addEventListener("mousedown", function(e) { |
|
||||
switch (e.button) { |
|
||||
case 0: |
|
||||
biasX = e.x |
|
||||
biasY = e.y |
|
||||
document.addEventListener("mousemove", moveEvent) |
|
||||
break |
|
||||
case 2: |
|
||||
electron.ipcRenderer.send("@func:float:showRightMenu") |
|
||||
break |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
document.addEventListener("mouseup", function() { |
|
||||
biasX = 0 |
|
||||
biasY = 0 |
|
||||
document.removeEventListener("mousemove", moveEvent) |
|
||||
}) |
|
||||
|
|
||||
function moveEvent(e: any) { |
|
||||
electron.ipcRenderer.send("@func:buildin:setPosition", e.screenX - biasX, e.screenY - biasY) |
|
||||
} |
|
||||
}, []) |
|
||||
} |
|
||||
@ -1,55 +0,0 @@ |
|||||
import { Dispatch, SetStateAction, useEffect, useState } from "react" |
|
||||
|
|
||||
type ITime<T = string | number> = { |
|
||||
year?: T; |
|
||||
month?: T; |
|
||||
day?: T; |
|
||||
hour?: T; |
|
||||
minute?: T; |
|
||||
second?: T; |
|
||||
} |
|
||||
|
|
||||
function isLow10(value:string | number) { |
|
||||
if (+value< 10){ |
|
||||
return "0"+value |
|
||||
} |
|
||||
return value |
|
||||
} |
|
||||
|
|
||||
|
|
||||
export default function(isUpdate = true): [ITime, Dispatch<SetStateAction<ITime>>] { |
|
||||
let [nowDate, setNowDate] = useState<ITime>({}) |
|
||||
|
|
||||
function updateTime() { |
|
||||
let date: ITime = {} |
|
||||
let newDate = new Date() |
|
||||
date.year = isLow10(newDate.getFullYear()) |
|
||||
date.month = isLow10(newDate.getMonth() + 1) |
|
||||
date.day = isLow10(newDate.getDate()) |
|
||||
date.hour = isLow10(newDate.getHours()) |
|
||||
date.minute = isLow10(newDate.getMinutes()) |
|
||||
date.second = isLow10(newDate.getSeconds()) |
|
||||
setNowDate(date) |
|
||||
return newDate.getMilliseconds() |
|
||||
} |
|
||||
|
|
||||
if (isUpdate) { |
|
||||
useEffect(() => { |
|
||||
|
|
||||
function cicleCall(millis: number): NodeJS.Timeout { |
|
||||
let timeID = setTimeout(() => { |
|
||||
let millis = 1000 - updateTime() |
|
||||
cicleCall(millis) |
|
||||
}, millis) |
|
||||
return timeID |
|
||||
} |
|
||||
|
|
||||
let millis = 1000 - updateTime() |
|
||||
let timeID = cicleCall(millis) |
|
||||
return () => { |
|
||||
clearTimeout(timeID) |
|
||||
} |
|
||||
}, []) |
|
||||
} |
|
||||
return [nowDate, setNowDate] |
|
||||
} |
|
||||
@ -0,0 +1,54 @@ |
|||||
|
|
||||
|
.Layout { |
||||
|
height: 100vh; |
||||
|
position: relative; |
||||
|
transform:scale(1,1); |
||||
|
&.NoLayout{ |
||||
|
.left { |
||||
|
display: none; |
||||
|
width: 0; |
||||
|
} |
||||
|
.right{ |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
.left { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
background-color: #2c2c2c; |
||||
|
width: 55px; |
||||
|
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; |
||||
|
} |
||||
|
position: relative; |
||||
|
.activeLine{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 6px; |
||||
|
bottom: 6px; |
||||
|
width: 3px; |
||||
|
background-color: white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.leftList{ |
||||
|
flex-grow: 1; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
.right{ |
||||
|
margin-left: 55px; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue