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", |
|||
"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 |
|||
|
|||
|
|||
@ -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 { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
transform: translate(-50% -50%); |
|||
font-size: 40px; |
|||
font-weight: bolder; |
|||
text-align: center; |
|||
line-height: 1.3; |
|||
color: #CD1110; |
|||
font-family: "pixi"; |
|||
user-select: none; |
|||
pointer-events: none; |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -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 { connect } from "react-redux" |
|||
import style from "./index.module.scss" |
|||
import useTime from "./useTime" |
|||
import usePositionElectron from "./usePositionElectron" |
|||
|
|||
export interface HomeProps { |
|||
add(text: string): void |
|||
|
|||
todo: ITodo[] |
|||
|
|||
remove(id: number): void |
|||
} |
|||
|
|||
function Home(props: HomeProps) { |
|||
const MyComponent = ({ children }: any) => { |
|||
return ( |
|||
<div className={style.clock}> |
|||
asdsadasdsdasad |
|||
</div> |
|||
<motion.div initial="hidden" animate="visible" variants={{ |
|||
visible: { opacity: 1 }, |
|||
hidden: { opacity: 0 } |
|||
}}> |
|||
{children} |
|||
</motion.div> |
|||
) |
|||
} |
|||
|
|||
const mapStateToProps = (state: any) => { |
|||
return { |
|||
todo: state.todo |
|||
} |
|||
function Home() { |
|||
return ( |
|||
<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) => ({ |
|||
add: (text: string) => dispatch(addTodo(text)), |
|||
remove: (id: string | number) => dispatch(removeTodo(id)) |
|||
}) |
|||
|
|||
export default connect(mapStateToProps, mapDispatchToProps)(Home) |
|||
export default 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