feat: 兼容mac以及暗黑模式

heiyehk · heiyehk · commit c1400cdfe6dc · 2021-08-06T13:53:21.000+08:00
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.2.1",
   "private": true,
   "author": "heiyehk",
-  "description": "I便笺个人开发者heiyehk独立开发，在Windows中更方便的记录文字。",
+  "description": "I便笺漂亮的过度效果，允许开启多个窗口方便在桌面端更方便的记录文字",
   "main": "background.js",
   "scripts": {
     "lint": "vue-cli-service lint",
diff --git a/public/css/common.css b/public/css/common.css
@@ -15,7 +15,7 @@
 
 /* 设置ol显示格式 */
 .module-editor ol {
-  counter-reset:sectioncounter;
+  counter-reset: sectioncounter;
 }
 
 .module-editor ol li {
@@ -25,7 +25,7 @@
 
 .module-editor ol li::before {
   content: counter(sectioncounter) '.';
-  counter-increment:sectioncounter;
+  counter-increment: sectioncounter;
   margin-right: 10px;
 }
 
diff --git a/public/css/common.min.css b/public/css/common.min.css
diff --git a/public/css/mac.css b/public/css/mac.css
@@ -0,0 +1,53 @@
+body {
+  padding: 0 !important;
+}
+
+.search {
+  box-shadow: 0 0 4px #ddd;
+}
+
+.header .drag-header {
+  margin-top: 0 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  body,
+  .header,
+  body .bg-white,
+  body .page-index,
+  body .page-setting,
+  body .page-editor,
+  body .bottom-editor-tools,
+  body .options-container .options-content, /* 遮罩列表 */
+  #rightClick {
+    background-color: #333 !important;
+    color: white !important;
+    transition: background-color 0.4s;
+  }
+  body .options-container .options-content * {
+    color: white !important;
+  }
+  /* 头部 */
+  .header a {
+    color: white !important;
+  }
+  /* 编辑遮罩 */
+  body .options-container .options-cover {
+    background-color: rgba(0, 0, 0, 0.6) !important;
+  }
+  /* 右键列表 */
+  .right-click-menu-list li:hover {
+    background-color: rgba(0, 0, 0, 0.4) !important;
+  }
+  body .about-app-description,
+  body .disabled-line {
+    color: #828282;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: #fff !important;
+    color: black !important;
+  }
+}
diff --git a/public/css/mac.min.css b/public/css/mac.min.css
diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,22 @@
 <!DOCTYPE html>
 <html lang="zh">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="<%= BASE_URL %>font/iconfont.css">
-    <link rel="stylesheet" href="<%= BASE_URL %>css/style.min.css">
-    <link rel="stylesheet" href="<%= BASE_URL %>css/common.min.css">
-  </head>
-  <body>
-    <div id="app" class="app app-show" ondragstart="return false"></div>
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <link rel="stylesheet" href="<%= BASE_URL %>font/iconfont.css">
+  <link rel="stylesheet" href="<%= BASE_URL %>css/style.min.css">
+  <link rel="stylesheet" href="<%= BASE_URL %>css/common.min.css">
+  <% if (htmlWebpackPlugin.options.platform === 'darwin') { %>
+    <link rel="stylesheet" href="<%= BASE_URL %>css/mac.min.css">
+  <% } %>
+</head>
+
+<body>
+  <div id="app" class="app app-show" ondragstart="return false"></div>
+</body>
+
 </html>
diff --git a/src/background.ts b/src/background.ts
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-'use strict';
-
 import { app, protocol, BrowserWindow, globalShortcut } from 'electron';
 import {
   createProtocol
@@ -63,6 +60,7 @@ app.on('ready', async () => {
   // }
   // 快捷键禁用
   for (const key of shortcutsKeys) {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     globalShortcut.register(key, () => {});
   }
   createWindow();
diff --git a/src/components/header.vue b/src/components/header.vue
@@ -15,7 +15,7 @@
     </template>
     <!-- 标题拖动 -->
     <div class="drag-header flex1 flex-center" :style="computedPaddingLeft">
-      <transition name="header-fadein">
+      <transition name="header-fadein" v-if="platformWindows">
         <span :key="title">{{ title }}</span>
       </transition>
     </div>
@@ -49,7 +49,7 @@
         </div>
       </template>
       <!-- 关闭 -->
-      <button class="icon flex-center close-window" @click="closeWindow" title="关闭">
+      <button v-if="platformWindows" class="icon flex-center close-window" @click="closeWindow" title="关闭">
         <i class="iconfont flex-center icon-close"></i>
       </button>
     </div>
@@ -95,10 +95,11 @@ export default defineComponent({
       return currentRouteName.value === 'index' ? 'padding-left: 40px;' : '';
     });
 
-    const title = ref(useRoute().meta.title);
+    const title = ref(useRoute().meta.title as string);
 
     onBeforeRouteUpdate((to, from, next) => {
-      title.value = to.meta.title;
+      title.value = to.meta.title as string;
+      document.title = title.value;
       currentRouteName.value = to.name;
       next();
     });
@@ -121,7 +122,8 @@ export default defineComponent({
       closeWindow,
       computedPaddingLeft,
       isAlwaysOnTop,
-      title
+      title,
+      platformWindows: process.platform === 'win32'
     };
   }
 });
diff --git a/src/components/input.vue b/src/components/input.vue
@@ -92,6 +92,7 @@ export default defineComponent({
   border: 1px solid @border-color;
   height: 24px;
   border-radius: 4px;
+  overflow: hidden;
   &-box {
     input {
       border-radius: 4px;
@@ -102,6 +103,7 @@ export default defineComponent({
       box-sizing: border-box;
       display: block;
       cursor: auto;
+      background-color: transparent;
     }
   }
   .hy-number-control {
diff --git a/src/components/switch.vue b/src/components/switch.vue
@@ -63,7 +63,7 @@ export default defineComponent({
   }
   &-core {
     border-radius: 10px;
-    background-color: @gray-color;
+    background-color: @gray-color !important;
     width: 40px;
     height: 100%;
     cursor: pointer;
@@ -95,7 +95,7 @@ export default defineComponent({
 
 .active {
   .hy-switch-core {
-    background-color: @success-color;
+    background-color: @success-color !important;
     transition: background-color 0.4s;
     &:active {
       .hy-switch-action {
@@ -110,7 +110,7 @@ export default defineComponent({
     transform: translateX(@switchSize);
   }
   .hy-switch-checked-text {
-    color: @success-color;
+    color: @success-color !important;
   }
 }
 
diff --git a/src/config/browser.options.ts b/src/config/browser.options.ts
@@ -27,7 +27,7 @@ const editorWindowOptions = {
  * @param type 单独给编辑窗口的配置
  */
 const browserWindowOption = (type?: 'editor'): Electron.BrowserWindowConstructorOptions => {
-  const commonOptions = {
+  const commonOptions: Electron.BrowserWindowConstructorOptions = {
     minHeight: 48,
     frame: false,
     hasShadow: true,
@@ -39,6 +39,11 @@ const browserWindowOption = (type?: 'editor'): Electron.BrowserWindowConstructor
       webSecurity: false
     }
   };
+  if (process.platform === 'darwin') {
+    commonOptions.frame = true;
+    commonOptions.transparent = false;
+    commonOptions.backgroundColor = '#ffffff';
+  }
   if (!type) {
     return {
       width: devWid || 350,
diff --git a/src/views/index/components/search.vue b/src/views/index/components/search.vue
@@ -51,7 +51,7 @@ export default defineComponent({
   box-sizing: border-box;
 }
 .search {
-  background-color: @background-sub-color;
+  // background-color: @background-sub-color;
   height: 34px;
   opacity: 0.9;
   .search-input {
@@ -68,9 +68,10 @@ export default defineComponent({
   .search-button {
     display: block;
     border: none;
-    width: 34px;
+    width: 36px;
     height: 100%;
     padding: 0;
+    background-color: transparent;
     .iconfont {
       font-size: 20px;
     }
diff --git a/vue.config.js b/vue.config.js
@@ -2,6 +2,16 @@
 const path = require('path');
 
 module.exports = {
+  pages: {
+    index: {
+      entry: 'src/main.ts',
+      template: 'public/index.html',
+      filename: 'index.html',
+      title: 'I便笺',
+      chunks: ['chunk-vendors', 'chunk-common', 'index'],
+      platform: process.platform
+    }
+  },
   productionSourceMap: false,
   configureWebpack: config => {
     if (process.env.NODE_ENV !== 'development') {
@@ -40,7 +50,7 @@ module.exports = {
           // installerHeaderIcon: './build/icons/aaa.ico', // 安装时头部图标
           createDesktopShortcut: true, // 创建桌面图标
           createStartMenuShortcut: true, // 创建开始菜单图标
-          shortcutName: 'i便笺' // 图标名称
+          shortcutName: 'I便笺' // 图标名称
         }
       }
     },

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`
`16`	`16`	`/* 设置ol显示格式 */`
`17`	`17`	`.module-editor ol {`
`18`		`- counter-reset:sectioncounter;`
	`18`	`+ counter-reset: sectioncounter;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.module-editor ol li {`
`@@ -25,7 +25,7 @@`
`25`	`25`
`26`	`26`	`.module-editor ol li::before {`
`27`	`27`	`content: counter(sectioncounter) '.';`
`28`		`- counter-increment:sectioncounter;`
	`28`	`+ counter-increment: sectioncounter;`
`29`	`29`	`margin-right: 10px;`
`30`	`30`	`}`
`31`	`31`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ export default defineComponent({`
`63`	`63`	`}`
`64`	`64`	`&-core {`
`65`	`65`	`border-radius: 10px;`
`66`		`- background-color: @gray-color;`
	`66`	`+ background-color: @gray-color !important;`
`67`	`67`	`width: 40px;`
`68`	`68`	`height: 100%;`
`69`	`69`	`cursor: pointer;`
`@@ -95,7 +95,7 @@ export default defineComponent({`
`95`	`95`
`96`	`96`	`.active {`
`97`	`97`	`.hy-switch-core {`
`98`		`- background-color: @success-color;`
	`98`	`+ background-color: @success-color !important;`
`99`	`99`	`transition: background-color 0.4s;`
`100`	`100`	`&:active {`
`101`	`101`	`.hy-switch-action {`
`@@ -110,7 +110,7 @@ export default defineComponent({`
`110`	`110`	`transform: translateX(@switchSize);`
`111`	`111`	`}`
`112`	`112`	`.hy-switch-checked-text {`
`113`		`- color: @success-color;`
	`113`	`+ color: @success-color !important;`
`114`	`114`	`}`
`115`	`115`	`}`
`116`	`116`