From cbe20406c70d44dc730c6a45fe1b05deaf55b2dd Mon Sep 17 00:00:00 2001 From: faper <2446866151@qq.com> Date: Aug 31 2021 15:54:31 +0000 Subject: 添加了主页面、设置页面,包括其CSS和少许Dom操作 --- diff --git a/render/.gitignore b/render/.gitignore new file mode 100644 index 0000000..32935e9 --- /dev/null +++ b/render/.gitignore @@ -0,0 +1,2 @@ +# vscode文件 +.vscode/ \ No newline at end of file diff --git a/render/default.css b/render/default.css new file mode 100644 index 0000000..eb9891c --- /dev/null +++ b/render/default.css @@ -0,0 +1,203 @@ +html, body { + height: 100%; + margin: 0; +} +ul { + margin: 0; + padding: 0; +} +ul.row { + padding: 0; +} +ul.row li { + height: 32px; + padding: 0 8px; +} +ul.tool-bar-left li input[type="image"] { + width: 32px; + height: 32px; + cursor: default; +} +ul.tool-bar-right li input[type="image"] { + width: 32px; + height: 32px; + cursor: pointer; +} +li { + list-style-type: none; +} +span.tab-line-col { + box-sizing: content-box; + display: block; + margin: auto; + width: 1px; + height: 100%; + background-color: black; +} +span.tab-line-row { + box-sizing: content-box; + display: block; + margin: 4px 0; + width: 100%; + height: 1px; + background-color: black; +} +span.tab-line-row:hover { + border: 8px 0 solid #63616134; + margin: 0; + transform: scale(100%, 175%) +} +iframe { + box-sizing: content-box; + width: 100%; + height: 100%; + border: none; +} +.tool { + position: relative; + padding: 8px; +} +.tool-bar { + min-width: 750px; + width: 100%; + height: 32px; + display: inline-flex; +} + +.tool-bar-left { + box-sizing: content-box; + display: flex; + direction: ltr; + justify-content: flex-start; +} +.tool-bar-center { + box-sizing: content-box; + display: flex; + flex: 1; + justify-content: center; +} +.tool-bar-right { + box-sizing: content-box; + display: flex; + direction: ltr; + justify-content: flex-end; +} + +.workspace { + position: absolute; + display: flex; + padding: 8px; + top: 56px; + bottom: 0; + left: 0; + right: 0; +} +.workspace-left { + box-sizing: content-box; + display: flex; + flex-direction: column; + flex: 1; + left: 0; + min-width: 300px; + width: 40%; + padding: 8px; +} +.workspace-left .task-list { + box-sizing: content-box; + flex: 1.5; + width: 100%; + height: 60%; + min-height: 300px; + border: 0.5px solid black; +} +.workspace-left .cur-task { + box-sizing: content-box; + flex: 1; + width: 100%; + height: 40%; + min-height: 200px; + border: 0.5px solid black; +} +.workspace-right { + box-sizing: content-box; + display: flex; + flex-direction: column; + flex: 1.5; + right: 0; + min-width: 450px; + width: 60%; + padding: 8px; +} +.workspace-right .cur-website { + box-sizing: content-box; + flex: 2; + width: 100%; + height: 66.6%; + min-height: 333px; + border: 0.5px solid black; +} +.workspace-right .variable-list { + box-sizing: content-box; + flex: 1; + width: 100%; + height: 33.3%; + min-height: 167px; + border: 0.5px solid black; +} +.rule { + top: 0; +} +.rule-left { + min-width: 250px; + flex: 1 +} +.rule-left .rule-list { + box-sizing: content-box; + flex: 1; + width: 100%; + height: 100%; + min-height: 450px; + border: 0.5px solid black; +} +.rule-left .tool-bar-rule { + box-sizing: content-box; + width: 100%; + height: fit-content; +} +.rule-bar { + box-sizing: content-box; + display: flex; + justify-content: flex-end; +} +.rule-right { + min-height: 500px; + flex: 2; +} +.rule-right .rule-detail { + box-sizing: content-box; + flex: 1; + width: 100%; + height: 100%; + border: 0.5px solid black; +} +.rule-setting { + margin-bottom: 8px; +} +.rule-setting div { + display: flex; + margin-bottom: 8px; +} +.rule-setting input { + font-size: 12px; + height: 1.2rem; +} +.rule-setting input[type="text"] { + box-sizing: content-box; + flex: 1; + margin-right: 16px; +} +.rule-setting input[type="button"] { + box-sizing: content-box; + min-width: 64px; +} + diff --git a/render/lib/controller.js b/render/lib/controller.js new file mode 100644 index 0000000..3252ae0 --- /dev/null +++ b/render/lib/controller.js @@ -0,0 +1,45 @@ +const box1 = document.querySelector(".tool-bar-left"); +const box2 = document.querySelector(".tool-bar-right"); +const box3 = document.querySelector(".task-list"); +const box4 = document.querySelector(".cur-task"); +const box5 = document.querySelector("iframe"); +const box6 = document.querySelector(".variable-list"); + +const button_list1 = box1.querySelectorAll("input"); +const button_list2 = box2.querySelectorAll("input"); +// ... + +const start_button = button_list1[0]; +const pause_button = button_list1[1]; +const stop_button = button_list1[2]; +const rule_setting_button = button_list2[0]; +const setting_button = button_list2[1]; + +//初始化button +pause_button.style.cursor = "not-allowed"; +stop_button.style.cursor = "not-allowed"; + +start_button.addEventListener("click", () => { + //do something... + start_button.style.cursor = "not-allowed"; + pause_button.style.cursor = "initial"; + stop_button.style.cursor = "initial"; + //do something... +}); + +pause_button.addEventListener("click", () => { + //do something... + start_button.style.cursor = "initial"; + pause_button.style.cursor = "not-allowed"; + stop_button.style.cursor = "initial"; + //do something... +}); + +stop_button.addEventListener("click", () => { + //do something... + start_button.style.cursor = "initial"; + pause_button.style.cursor = "not-allowed"; + stop_button.style.cursor = "not-allowed"; + //do something... +}); + diff --git a/render/main.html b/render/main.html index 73c8e96..8cd6930 100644 --- a/render/main.html +++ b/render/main.html @@ -1,11 +1,78 @@ + + - - - - - - Test - - - - + + + + + + + + Comic Palace + + + + +
+ +
+
+ +
+
+
    +
  • 1
  • +
  • 2
  • +
+
+
+ +
+
+
    +
  • 1
  • +
  • 2
  • +
+
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+
    +
  • 1
  • +
  • 2
  • +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/render/main.js b/render/main.js new file mode 100644 index 0000000..7ad97b6 --- /dev/null +++ b/render/main.js @@ -0,0 +1,45 @@ +// main.js + +// Modules to control application life and create native browser window +const { app, BrowserWindow } = require('electron') +const path = require('path') + +function createWindow () { + // Create the browser window. + const mainWindow = new BrowserWindow({ + width: 800, + height: 600, + webPreferences: { + preload: path.join(__dirname, 'preload.js') + } + }) + + // and load the index.html of the app. + mainWindow.loadFile('index.html') + + // Open the DevTools. + // mainWindow.webContents.openDevTools() +} + +// This method will be called when Electron has finished +// initialization and is ready to create browser windows. +// 部分 API 在 ready 事件触发后才能使用。 +app.whenReady().then(() => { + createWindow() + + app.on('activate', function () { + // On macOS it's common to re-create a window in the app when the + // dock icon is clicked and there are no other windows open. + if (BrowserWindow.getAllWindows().length === 0) createWindow() + }) +}) + +// Quit when all windows are closed, except on macOS. There, it's common +// for applications and their menu bar to stay active until the user quits +// explicitly with Cmd + Q. +app.on('window-all-closed', function () { + if (process.platform !== 'darwin') app.quit() +}) + +// In this file you can include the rest of your app's specific main process +// code. 也可以拆分成几个文件,然后用 require 导入。 diff --git a/render/mainpage.pdf b/render/mainpage.pdf new file mode 100644 index 0000000..b344432 Binary files /dev/null and b/render/mainpage.pdf differ diff --git a/render/preload.js b/render/preload.js new file mode 100644 index 0000000..5a50d17 --- /dev/null +++ b/render/preload.js @@ -0,0 +1,14 @@ +// preload.js + +// All of the Node.js APIs are available in the preload process. +// 它拥有与Chrome扩展一样的沙盒。 +window.addEventListener('DOMContentLoaded', () => { + const replaceText = (selector, text) => { + const element = document.getElementById(selector) + if (element) element.innerText = text + } + + for (const dependency of ['chrome', 'node', 'electron']) { + replaceText(`${dependency}-version`, process.versions[dependency]) + } +}) diff --git a/render/rulepage.html b/render/rulepage.html new file mode 100644 index 0000000..bc7daf1 --- /dev/null +++ b/render/rulepage.html @@ -0,0 +1,43 @@ + + + + + + + + 规则设置页 + + + + +
+
+
+ 1 +
+
+
    +
  • add
  • +
  • delete
  • +
+
+
+
+
+
+ + +
+
+ + +
+
+
+ 1 +
+
+
+ + + \ No newline at end of file diff --git a/render/src/icon/icons8-add-64.png b/render/src/icon/icons8-add-64.png new file mode 100644 index 0000000..426d6d3 Binary files /dev/null and b/render/src/icon/icons8-add-64.png differ diff --git a/render/src/icon/icons8-delete-48.png b/render/src/icon/icons8-delete-48.png new file mode 100644 index 0000000..85ca730 Binary files /dev/null and b/render/src/icon/icons8-delete-48.png differ diff --git a/render/src/icon/icons8-pause-squared-48.png b/render/src/icon/icons8-pause-squared-48.png new file mode 100644 index 0000000..1dbd87b Binary files /dev/null and b/render/src/icon/icons8-pause-squared-48.png differ diff --git a/render/src/icon/icons8-rules-64.png b/render/src/icon/icons8-rules-64.png new file mode 100644 index 0000000..d7933f9 Binary files /dev/null and b/render/src/icon/icons8-rules-64.png differ diff --git a/render/src/icon/icons8-setting-64.png b/render/src/icon/icons8-setting-64.png new file mode 100644 index 0000000..2025d4e Binary files /dev/null and b/render/src/icon/icons8-setting-64.png differ diff --git a/render/src/icon/icons8-start-48.png b/render/src/icon/icons8-start-48.png new file mode 100644 index 0000000..191d663 Binary files /dev/null and b/render/src/icon/icons8-start-48.png differ diff --git a/render/src/icon/icons8-stop-squared-48.png b/render/src/icon/icons8-stop-squared-48.png new file mode 100644 index 0000000..e33b779 Binary files /dev/null and b/render/src/icon/icons8-stop-squared-48.png differ