version 1.0.0

database/Config.json

@@ -1 +1 @@
-{"randomType":1,"names":["test1","test2","test3","test4"],"date":1111111111111,"cardType":{"number1":"13","number2":8,"number3":6,"number4":4,"number5":2},"noSpecial":true}
+{"randomType":1,"names":["test1","test2","test3","test4"],"date":1655942400000,"cardType":{"number1":"13","number2":8,"number3":6,"number4":4,"number5":2},"noSpecial":true,"transparent":false}

electron/bridge.ts

@@ -28,6 +28,8 @@ export const api = {
 
   getConfigData: sql.getConfigData,
 
+  changeTransparent: sql.changeTransparent,
+
   /**
    * Provide an easier way to listen to events
    */

electron/dbInit.ts

@@ -19,12 +19,13 @@ export interface Config {
   names: string[]
 
   date: number // 倒计时时间戳
+  transparent: boolean // 倒计时界面透明
 
   cardType: CardType
   noSpecial: boolean
 }
 
 export const ConfigDb = new Database<Config>(
   path.join(database, 'Config.json'), 
-  { randomType: 0, names: [], date: 1111111111111, cardType: { number1: 10, number2: 8, number3: 6, number4: 4, number5: 2 }, noSpecial: false }
+  { randomType: 0, names: [], date: 1111111111111, cardType: { number1: 10, number2: 8, number3: 6, number4: 4, number5: 2 }, noSpecial: false, transparent: false }
   );

electron/main.ts

@@ -3,6 +3,7 @@ import path from 'path'
 
 let mainWindow: BrowserWindow | null
 let calendarWindow: BrowserWindow | null
+let calendar2Window: BrowserWindow | null
 let randomWindow: BrowserWindow | null
 let lotteryDrawWindow: BrowserWindow | null
 let tray: Tray | null
@@ -32,7 +33,7 @@ function createWindow () {
     }
   })
 
-  // Menu.setApplicationMenu(null)
+  Menu.setApplicationMenu(null)
   // mainWindow.webContents.openDevTools()
 
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY + "#/index")
@@ -71,6 +72,29 @@ function createCalendarWindow() {
   })
 }
 
+function createCalendar2Window() {
+  calendar2Window = new BrowserWindow({
+    width: 500,
+    height: 100,
+    transparent: true,
+    resizable: false,
+    frame: false,
+    alwaysOnTop: true,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+      webSecurity: false
+    }
+  })
+
+  calendar2Window.loadURL(MAIN_WINDOW_WEBPACK_ENTRY + "#/calendar2")
+
+  calendar2Window.on('closed', () => {
+    calendar2Window = null
+  })
+}
+
 function createRandomWindow() {
   randomWindow = new BrowserWindow({
     icon: path.join(assetsPath, 'assets', 'icon.png'),
@@ -128,10 +152,19 @@ function clickCalendarWindow() {
   }
 }
 
+function clickCalendar2Window() {
+  if (calendar2Window === null || calendar2Window === undefined) {
+    createCalendar2Window()
+  } else {
+    calendar2Window.close()
+  }
+}
+
 app.whenReady().then(() => {
   tray = new Tray(path.join(assetsPath, 'assets', 'icon.png'))
   const contextMenu = Menu.buildFromTemplate([
     { label: '开关倒计时', type: 'normal', click: clickCalendarWindow },
+    { label: '开关倒计时2', type: 'normal', click: clickCalendar2Window },
     { label: '打开抽奖', type: 'normal', click: createLotteryDrawWindow },
     { label: '打开点名器', type: 'normal', click: createRandomWindow },
     { label: '打开设置', type: 'normal', click: () => {mainWindow?.show();mainWindow?.focus()} },

electron/utils/sql.ts

@@ -34,8 +34,13 @@ function changeNoSpecial(type: boolean) {
   ConfigDb.save()
 }
 
+function changeTransparent(type: boolean) {
+  ConfigDb.data.transparent = type
+  ConfigDb.save()
+}
+
 function getConfigData() {
   return ConfigDb.data
 }
 
-export default { addName, changeNames, changeRandomType, changeDate, getConfigData, changeCardType, changeNoSpecial }
+export default { addName, changeNames, changeRandomType, changeDate, getConfigData, changeCardType, changeNoSpecial, changeTransparent }

package.json

@@ -1,12 +1,13 @@
 {
   "name": "class-helper",
   "author": "RotCool <Rotten_LKZ@outlook.com>",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "A tool helps teachers teach, which can be installed in the computer in the class.",
   "main": "./.webpack/main/index.js",
   "scripts": {
     "start": "electron-forge start",
     "package": "electron-forge package",
+    "package32": "electron-forge package --arch=ia32",
     "make": "electron-forge make",
     "release": "electron-forge publish",
     "lint": "eslint . --ext js,ts",

src/App.tsx

@@ -1,5 +1,6 @@
 import { HashRouter as Router, Route } from 'react-router-dom'
 import { Calendar } from './pages/Calendar'
+import { Calendar2 } from './pages/Calendar2'
 import { Index } from './pages/Index'
 import { LotteryDraw } from './pages/LotteryDraw'
 import { Random } from './pages/Random'
@@ -10,6 +11,7 @@ export function App() {
       <Route path="/" exact={true} component={Index} />
       <Route path="/index" exact={true} component={Index} />
       <Route path="/calendar" exact={true} component={Calendar} />
+      <Route path="/calendar2" exact={true} component={Calendar2} />
       <Route path="/random" exact={true} component={Random} />
       <Route path="/lotteryDraw" exact={true} component={LotteryDraw} />
     </Router>

src/pages/Calendar/index.tsx

@@ -3,6 +3,7 @@ import './style.css'
 
 export function Calendar() {
   const [date, setDate] = useState(window.Main.getConfigData().date)
+  const [transparent, setTransparent] = useState(window.Main.getConfigData().transparent)
   const [left, setLeft] = useState({day: "942", hour: "22", minute: "45", second: "56"})
   const [trigger, setTrigger] = useState(false)
 
@@ -67,7 +68,7 @@ export function Calendar() {
   }, [trigger])
 
   return (
-    <div className="calendar">
+    <div className={transparent ? "transparent-calendar" : "calendar"}>
       <h1>距 {getNowDate()} 还剩：</h1>
       <p><span className="day">{left.day}</span>天<span className="hour">{left.hour}</span>时<span className="minute">{left.minute}</span>分<span className="second">{left.second}</span>秒</p>
     </div>

src/pages/Calendar/style.css

@@ -4,9 +4,15 @@ body {
   margin: 0;
 }
 
+.transparent-calendar {
+  -webkit-app-region: drag;
+  user-select: none;
+}
+
 .calendar {
+  user-select: none;
   width: calc(100% - 60px);
-  height: calc(100vh - 60px);
+  height: calc(100vh - 40px);
   -webkit-app-region: drag;
   overflow: hidden;
   background-color: #31574f;
@@ -15,6 +21,16 @@ body {
   padding-right: 10px;
 }
 
+.transparent-calendar h1 {
+  color: black;
+  font-size: 2.8rem;
+}
+
+.transparent-calendar p {
+  color: black;
+  font-size: 2.2rem;
+}
+
 .calendar h1 {
   color: white;
   font-size: 2.8rem;
@@ -25,7 +41,7 @@ body {
   font-size: 2.2rem;
 }
 
-.calendar p span {
+.calendar p span, .transparent-calendar p span {
   color: red;
   background-color: white;
   padding: 4px;

src/pages/Calendar2/index.tsx

@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react'
+import './style.css'
+
+export function Calendar2() {
+  const [date, setDate] = useState(window.Main.getConfigData().date)
+  const [transparent, setTransparent] = useState(window.Main.getConfigData().transparent)
+  const [left, setLeft] = useState({day: "942", hour: "22", minute: "45", second: "56"})
+  const [trigger, setTrigger] = useState(false)
+
+  function toggleTrigger() {
+    setTrigger(!trigger)
+  }
+
+  function getNowDate() {
+    const nowDate = new Date(window.Main.getConfigData().date)
+    return `${nowDate.getFullYear()}年${getLengthChar(2, nowDate.getMonth() + 1)}月${getLengthChar(2, nowDate.getDate())}日`
+  }
+
+  function getLengthChar(length: number, char: number) {
+    if (char < 0) {
+      if (length < char.toString().length - 1) {
+        return char.toString()
+      }
+      let _result = "-"
+      for (let i = 0;i < length - (char.toString().length - 1);i++) {
+        _result += "0"
+      }
+      _result += char.toString().substring(1)
+      return _result
+    } else {
+      if (length < char.toString().length) {
+        return char.toString()
+      }
+      let _result = ""
+      for (let i = 0;i < length - char.toString().length;i++) {
+        _result += "0"
+      }
+      _result += char.toString()
+      return _result
+    }
+  }
+
+  useEffect(() => {
+    let date1 = new Date(date);  //开始时间
+    let date2 = new Date();    //结束时间
+    let date3 = date2.getTime() - date1.getTime();   //时间差的毫秒数      
+
+    // 计算相差天数
+    let days = Math.floor(date3 / (24 * 3600 * 1000))
+    let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+    let hours = Math.floor(leave1 / (3600*1000))
+    //计算相差分钟数
+    let leave2 = leave1%(3600*1000)        //计算小时数后剩余的毫秒数
+    let minutes = Math.floor(leave2 / (60*1000))
+    //计算相差秒数
+    let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
+    let seconds = Math.round(leave3 / 1000)
+
+    console.log(-days, -hours, -minutes, -seconds)
+
+    setLeft({
+      day: getLengthChar(3, -days),
+      hour: getLengthChar(2, -hours),
+      minute: getLengthChar(2, -minutes),
+      second: getLengthChar(2, -seconds)
+    })
+    setTimeout(toggleTrigger, 1000)
+  }, [trigger])
+
+  return (
+    <div className={transparent ? "transparent-calendar2" : "calendar2"}>
+      <p>倒计时：<span className="day">{left.day}</span>天<span className="hour">{left.hour}</span>时<span className="minute">{left.minute}</span>分<span className="second">{left.second}</span>秒</p>
+    </div>
+  )
+}

src/pages/Calendar2/style.css

@@ -0,0 +1,40 @@
+
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.transparent-calendar2 {
+  -webkit-app-region: drag;
+  user-select: none;
+}
+
+.calendar2 {
+  user-select: none;
+  width: calc(100% - 40px);
+  height: calc(100vh - 30px);
+  -webkit-app-region: drag;
+  overflow: hidden;
+  background-color: #31574f;
+  border: 15px solid #d3b78e;
+  padding-left: 10px;
+  /* padding-right: 10px; */
+}
+
+.calendar2 p {
+  color: white;
+  font-size: 1.2rem;
+}
+
+.transparent-calendar2 p {
+  color: black;
+  font-size: 1.2rem;
+}
+
+.calendar2 p span, .transparent-calendar2 p span {
+  color: red;
+  background-color: white;
+  padding: 2px;
+  margin-left: 4px;
+  font-size: 1.6rem;
+}

src/pages/Index/index.tsx

@@ -8,6 +8,7 @@ export function Index() {
   const [names, setNames] = useState(window.Main.getConfigData().names)
   const [numbers, setNumbers] = useState(window.Main.getConfigData().cardType)
   const [noSpecial, setNoSpecial] = useState(window.Main.getConfigData().noSpecial)
+  const [transparent, setTransparent] = useState(window.Main.getConfigData().transparent)
 
   const [name, setName] = useState("")
   const [order, setOrder] = useState(0)
@@ -166,6 +167,12 @@ export function Index() {
     changeNotice("保存刮刮卡成功")
   }
 
+  function submitTransparent() {
+    window.Main.changeTransparent(!transparent)
+    setTransparent(!transparent)
+    changeNotice("保存是否透明成功")
+  }
+
   function submitNoSpecial() {
     window.Main.changeNoSpecial(!noSpecial)
     setNoSpecial(!noSpecial)
@@ -218,6 +225,8 @@ export function Index() {
       <p className="notice">{notice}</p>
       <div className="timer" style={getNotNowPageStyle('timer')}>
         <input type="date" onChange={changeDate} defaultValue={getNowDate()} /><br />
+        <label htmlFor="transparent">是否透明：</label>
+        <input type="checkbox" checked={transparent} name="transparent" onChange={submitTransparent} />
       </div>
 
       <div className="luck" style={getNotNowPageStyle('luckDraw')}>