ui

package.json

@@ -83,7 +83,12 @@
     "webpack-dev-server": "^3.11.2",
     "windicss": "^3.1.3"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@chakra-ui/react": "^1.6.5",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "framer-motion": "^4.1.17"
+  },
   "build": {
     "productName": "my-project",
     "appId": "com.example.yourapp",

src/render/main.tsx

@@ -4,7 +4,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "@/plugins/i18n"
 import {Provider} from 'react-redux'
-
+import { ChakraProvider, extendTheme } from "@chakra-ui/react"
+import theme from '@chakra-ui/theme'
 import electron from "@/plugins/electron"
 
 import Router from "./AppRouter";
@@ -13,12 +14,18 @@ import Router from "./AppRouter";
 console.log(electron);
 console.log(__staticVar); 
 
+const my_theme = extendTheme({
+  backgroundColor: "transparent"
+})
 
+console.log(theme)
 ReactDOM.render(
   <React.StrictMode>
-    <Provider store={store}>
-      <Router></Router>
-    </Provider>
+    <ChakraProvider theme={my_theme}>
+      <Provider store={store}>
+        <Router></Router>
+      </Provider>
+    </ChakraProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );

src/render/views/Float/index.module.scss

@@ -2,8 +2,9 @@
   position: fixed;
   left: 0;
   top: 0;
-  transform: translate(-50% -50%);
+  right: 0;
   font-size: 40px;
+  text-align: center;
   font-weight: bolder;
   text-align: center;
   line-height: 1.3;

src/render/views/Home/index.module.scss

@@ -1,14 +1,3 @@
-.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;
+.Home {
+  background-color: transparent;
 }

src/render/views/Home/index.tsx

@@ -2,8 +2,7 @@ import { addTodo, removeTodo } from "@/store/action/todo"
 import React from "react"
 import { connect } from "react-redux"
 import style from "./index.module.scss"
-import useTime from "./useTime"
-import usePositionElectron from "./usePositionElectron"
+import { Button } from "@chakra-ui/react"
 
 export interface HomeProps {
   add(text: string): void
@@ -15,8 +14,8 @@ export interface HomeProps {
 
 function Home(props: HomeProps) {
   return (
-    <div className={style.clock}>
-      asdsadasdsdasad
+    <div className={style.Home}>
+      <Button>asd</Button>
     </div>
   )
 }

src/render/views/Home/usePositionElectron.ts

@@ -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)
-    }
-  }, [])
-}

src/render/views/Home/useTime.ts

@@ -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]
-}