add

4 years ago · 2f1f7d3456
8 changed files with 187 additions and 29 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1984,6 +1984,12 @@
      "integrity": "sha1-/SzS7bqn6qx+fzwXSLUqGRQ4Rsk=",
      "dev": true
    },
+    "@types/lodash": {
+      "version": "4.14.172",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.172.tgz",
+      "integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
+      "dev": true
+    },
    "@types/markdown-it": {
      "version": "12.0.3",
      "resolved": "https://registry.nlark.com/@types/markdown-it/download/@types/markdown-it-12.0.3.tgz",
@ -7043,8 +7049,8 @@
    },
    "lodash": {
      "version": "4.17.21",
-      "resolved": "https://registry.nlark.com/lodash/download/lodash-4.17.21.tgz",
-      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
      "dev": true
    },
    "lodash.debounce": {
@ -8220,7 +8226,7 @@
    },
    "react-popper": {
      "version": "1.3.11",
-      "resolved": "https://registry.npm.taobao.org/react-popper/download/react-popper-1.3.11.tgz",
+      "resolved": "https://registry.npm.taobao.org/react-popper/download/react-popper-1.3.11.tgz?cache=0&sync_timestamp=1616674786422&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-popper%2Fdownload%2Freact-popper-1.3.11.tgz",
      "integrity": "sha1-osw/Cme3W2bPpi0sQJ+d0fzHH/0=",
      "dev": true,
      "requires": {
--- a/package.json
+++ b/package.json
@ -37,6 +37,7 @@
    "@rollup/plugin-node-resolve": "^13.0.4",
    "@rollup/plugin-replace": "^3.0.0",
    "@rollup/plugin-typescript": "^8.2.3",
+    "@types/lodash": "^4.14.172",
    "@types/markdown-it": "^12.0.3",
    "@types/minimist": "^1.2.2",
    "@types/node": "^15.14.3",
@ -61,6 +62,7 @@
    "execa": "^5.1.1",
    "i18next": "^20.3.4",
    "i18next-browser-languagedetector": "^6.1.2",
+    "lodash": "^4.17.21",
    "markdown-it": "^12.2.0",
    "node-loader": "^2.0.0",
    "react": "^17.0.0",
--- a/src/render/views/About/index.tsx
+++ b/src/render/views/About/index.tsx
@ -1,7 +1,7 @@
 import React from "react"
 import style from "./index.module.scss"
 import { useLocation, Route, Switch, useHistory } from "react-router-dom"
-import html from "./a.md"
+// import html from "./a.md"

 function Test() {
  return <div>test</div>
@ -15,12 +15,13 @@ export default function About(props: any) {
    history.replace("/about")
  }

-  console.log(html)
+  // console.log(html)

  return (
    <div className={`container ${style.about}`}>
      <div className={"bp3-running-text bp3-text-large"}>
-        {html}
+        {/* {html} */}
+        <h1>关于</h1>
      </div>
      {/*<div onClick={() =>back()}>阿萨 阿松大asdasd</div>*/}
      {/*<div>22{props.children}{location.href}</div>*/}
--- a/src/render/views/Home/Dialog.tsx
+++ b/src/render/views/Home/Dialog.tsx
@ -0,0 +1,66 @@
+import {
+  Button,
+  ButtonGroup,
+  Card,
+  ControlGroup,
+  Elevation,
+  FormGroup,
+  HotkeysProvider,
+  Icon,
+  InputGroup,
+  Overlay,
+  TextArea,
+} from "@blueprintjs/core"
+import { Cell, Column, Table2 } from "@blueprintjs/table"
+import React from "react"
+import cs from "classnames"
+import style from "./dialog.module.scss"
+import { useState } from "react"
+
+export default function Dialog(props: any) {
+  const { isOpen, setIsOpen } = props
+
+  const [title, setTitle] = useState<string>("")
+
+  function onInput(){
+    console.log('onInput');
+  }
+  function onChange(){
+    console.log('onChange');
+  }
+  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 onInput={()=>onInput()} onChange={()=>onChange()} id="time-input" placeholder="请输入时间区间" />
+            </FormGroup>
+            <FormGroup label="描述" labelFor="desc-input">
+              <TextArea id="desc-input" style={{ width: "100%" }} growVertically={true} large={true} intent="primary" />
+            </FormGroup>
+            <ButtonGroup style={{ float: "right" }}>
+              <Button
+                intent="primary"
+                onClick={() => {
+                  setIsOpen(true)
+                }}
+              >
+                确认
+              </Button>
+              <Button intent="danger">取消</Button>
+            </ButtonGroup>
+          </form>
+        </Card>
+      </div>
+    </Overlay>
+  )
+}
--- a/src/render/views/Home/dialog.module.scss
+++ b/src/render/views/Home/dialog.module.scss
@ -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);
+  }
+}
--- a/src/render/views/Home/index.module.scss
+++ b/src/render/views/Home/index.module.scss
@ -1,12 +1,12 @@
-.container{
+.container {
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
-  .title{
+  .title {
    font-size: 25px;
    font-weight: bolder;
  }
-  .opeation{
+  .opeation {
    margin: 20px 0;
  }
 }
--- a/src/render/views/Home/index.tsx
+++ b/src/render/views/Home/index.tsx
@ -1,8 +1,23 @@
 import { addTodo, removeTodo } from "@/store/action/todo"
-import { Button, ButtonGroup } from "@blueprintjs/core"
-import { Cell, Column, Table } from "@blueprintjs/table"
+import {
+  Button,
+  ButtonGroup,
+  Card,
+  ControlGroup,
+  Elevation,
+  FormGroup,
+  HotkeysProvider,
+  Icon,
+  InputGroup,
+  Overlay,
+  TextArea,
+} from "@blueprintjs/core"
+import { Cell, Column, Table2 } from "@blueprintjs/table"
 import React from "react"
+import { useState } from "react"
 import { connect } from "react-redux"
+import _ from "lodash"
+import Dialog from "./Dialog"
 import style from "./index.module.scss"

 export interface HomeProps {
@ -13,41 +28,78 @@ export interface HomeProps {
  remove(id: number): void
 }

-function cellRenderer(rowIndex: number) {
-  return <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>
-}
-
 function Home(props: HomeProps) {
-
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  let clockList = [
+    {
+      key: 1,
+      title: "上班时间",
+      startTime: "2021-01-01 09:00:00",
+      endTime: "2021-01-01 17:00:00",
+      desc: "描述",
+    },
+    {
+      key: 2,
+      title: "上班时间",
+      startTime: "2021-01-01 09:00:00",
+      endTime: "2021-01-01 17:00:00",
+      desc: "描述",
+    },
+  ]
+  const keyList = _.map(clockList, "key")
+  const titleList = _.map(clockList, "title")
+  const startTimeList = _.map(clockList, "startTime")
+  const endTimeList = _.map(clockList, "endTime")
+  const descList = _.map(clockList, "desc")
  return (
    <div className={style.container}>
      <div className={style.title}>闹钟列表</div>
      <div className={style.opeation}>
        <ButtonGroup>
-          <Button>添加闹钟</Button>
-          <Button>删除闹钟</Button>
+          <Button
+            icon="insert"
+            onClick={() => {
+              setIsOpen(true)
+            }}
+          >
+            添加闹钟
+          </Button>
+          <Button icon="refresh">同步闹钟</Button>
        </ButtonGroup>
      </div>
-      {/*<HotkeysProvider>*/}
-      <Table numRows={200}>
-        <Column name="标题" cellRenderer={cellRenderer}/>
-        <Column name="时间范围" cellRenderer={cellRenderer}/>
-        <Column name="操作" cellRenderer={cellRenderer}/>
-      </Table>
-      {/*</HotkeysProvider>*/}
+      <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>{startTimeList[index]}</Cell>}></Column>
+          <Column name="结束时间" cellRenderer={index => <Cell>{endTimeList[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 id="text-input" placeholder="请输入Key值进行删除" />
+            <Button icon="trash" intent="danger" type="submit">
+              删除
+            </Button>
+          </ControlGroup>
+        </FormGroup>
+      </div>
+      <Dialog isOpen={isOpen} setIsOpen={setIsOpen}></Dialog>
    </div>
  )
 }

 const mapStateToProps = (state: any) => {
  return {
-    todo: state.todo
+    todo: state.todo,
  }
 }

 const mapDispatchToProps = (dispatch: any) => ({
  add: (text: string) => dispatch(addTodo(text)),
-  remove: (id: string | number) => dispatch(removeTodo(id))
+  remove: (id: string | number) => dispatch(removeTodo(id)),
 })

 export default connect(mapStateToProps, mapDispatchToProps)(Home)
--- a/vite.config.ts
+++ b/vite.config.ts
@ -5,14 +5,14 @@ const { resolve, join } = require("path")
 import electron from "vitejs-plugin-electron"
 import { minifyHtml, injectHtml } from "vite-plugin-html"
 import replace from '@rollup/plugin-replace';
-import md from './plugins/md';
+// import md from './plugins/md';

 let isDev = process.env.NODE_ENV === "development"

 let plugins = []
 let staticPath = isDev? '/static': 'static'
 plugins.push(
-  md(),
+  // md(),
  replace({
    preventAssignment: true,
    "__static": staticPath,