features: 设置增加沉浸、纯净模式，默认关闭。部分功能优化

其他的一些更改

Author: heiyehk

.gitignore

@@ -14,7 +14,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-inoteError.log
+inotesError.log
 
 # Editor directories and files
 .idea

CHANGELOG.md

@@ -0,0 +1,21 @@
+## [0.3.1](https://github.com/heiyehk/electron-vue3-inote/compare/0.2.3...0.3.1) (2021-09-01)
+
+
+### Features
+
+* **沉浸模式**: 编辑框失去焦点后自动隐藏头部和编辑按钮
+* **纯净模式**: 在沉浸模式下不在自动显示头部和编辑按钮，需要按下`Esc`才能显示
+* **Input Component**: 输入框组件增加`disabled`功能
+* **Switch Component**: 开关组件增加`change`事件
+
+### Ci
+
+* **Sqlite**: 数据库路径改变
+
+### Directory & Files
+
+* 优化部分目录和文件结构
+
+### Refactor
+
+* `note` => `notes`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "i-notes",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "private": true,
   "author": "heiyehk",
   "description": "I便笺拥有漂亮的过度效果，允许开启多个窗口方便在桌面端更方便的记录文字",
@@ -15,15 +15,16 @@
     "email": "[email protected]"
   },
   "scripts": {
-    "lint": "vue-cli-service lint",
+    "serve": "vue-cli-service electron:serve",
     "build": "node script/deleteBuild && vue-cli-service electron:build",
-    "serve": "vue-cli-service electron:serve"
+    "lint": "vue-cli-service lint",
+    "commit": "cz"
   },
   "dependencies": {
     "core-js": "^3.15.2",
+    "crypto-js": "^4.1.1",
     "dayjs": "^1.10.6",
     "fs-extra": "^10.0.0",
-    "nedb": "^1.8.0",
     "pg-hstore": "^2.3.4",
     "sequelize": "^6.6.5",
     "sqlite3": "^5.0.2",
@@ -34,7 +35,7 @@
     "vue-router": "^4.0.10"
   },
   "devDependencies": {
-    "@types/nedb": "^1.8.12",
+    "@types/crypto-js": "^4.0.2",
     "@types/sequelize": "^4.28.10",
     "@types/sqlite3": "^3.1.7",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
@@ -47,6 +48,7 @@
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
+    "cz-conventional-changelog": "3.3.0",
     "electron": "13.1.6",
     "electron-builder": "^22.9.1",
     "eslint": "^6.7.2",
@@ -61,6 +63,16 @@
     "typescript": "~3.9.3",
     "vue-cli-plugin-style-resources-loader": "~0.1.4"
   },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },

src/background.ts

@@ -27,7 +27,7 @@ function createWindow() {
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     win = new BrowserWindow(browserWindowOption());
     // 默认打开webpack启动的serve
-    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/editor');
+    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
     if (!process.env.IS_TEST) win.webContents.openDevTools();
   } else {
     const argv = process.argv[1];

src/components/Editor.vue

@@ -12,7 +12,7 @@
     @input="changeEditorContent"
   ></div>
   <!-- 功能 -->
-  <section class="bottom-editor-tools" :class="windowBlur ? 'window-blur-hide' : ''">
+  <section class="bottom-editor-tools" :class="bottomClass">
     <template v-for="item in bottomIcons" :key="item.name">
       <button class="icon" :title="item.title" @click="editorIconHandle($event, item.name)">
         <i class="iconfont" :class="item.icon"></i>
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, ref, Ref, watch } from 'vue';
+import { computed, defineComponent, nextTick, onMounted, ref, Ref, watch } from 'vue';
 import { debounce } from '@/utils';
 import { editorIcons } from '@/config';
 import { notesState } from '@/store/notes.state';
@@ -35,6 +35,10 @@ export default defineComponent({
     windowBlur: {
       type: Boolean,
       default: true
+    },
+    windowLock: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['on-input', 'update:value'],
@@ -56,12 +60,24 @@ export default defineComponent({
         }
       }
     );
+    const bottomClass = computed(() => {
+      const classArr = [];
+      if (props.windowBlur) {
+        classArr.push('window-blur-hide');
+      } else {
+        if (props.windowLock) {
+          // 当锁上的时候，编辑器任然处于失去焦点的情况
+          // 需要解锁才能正常
+          classArr.push('window-blur-hide');
+        }
+      }
+      return classArr;
+    });
 
     // 第一次进入事件
     const firstHandle = () => {
       nextTick(() => {
         focus();
-        console.dir(editor.value);
         editor.value?.scrollTo(0, editor.value.scrollHeight);
         firstIn.value = false;
       });
@@ -88,11 +104,40 @@ export default defineComponent({
     const changeEditorContent = debounce((e: InputEvent) => {
       const editorHtml = (e.target as Element).innerHTML;
       emit('on-input', editorHtml);
-    }, notesState.syncDelay);
+    }, notesState.value.syncDelay);
 
     const paste = (e: ClipboardEvent) => {
       const pasteText = e.clipboardData?.getData('text/plain');
-      document.execCommand('insertText', false, pasteText);
+      const setText = (text?: string) => {
+        document.execCommand('insertText', false, text);
+      };
+      const interceptPoint = 100000;
+      // 做超长文本处理
+      // TODO
+      const len = pasteText!.length;
+      if (!len) return;
+      if (len < interceptPoint) {
+        setText(pasteText);
+      } else {
+        const count = Math.ceil(len / interceptPoint);
+        let control = 0;
+        let interval: any = setInterval(() => {
+          let text = '';
+          if (control === 0) {
+            text = pasteText!.substring(0, (control + 1) * interceptPoint);
+          } else if (control !== 0 && control !== count) {
+            text = pasteText!.substring(control * interceptPoint, (control + 1) * interceptPoint);
+          }
+          setText(text);
+          if (control >= count) {
+            text = '';
+            clearInterval(interval);
+            interval = null;
+            editor.value?.scrollTo(0, editor.value.scrollHeight);
+          }
+          control++;
+        }, 100);
+      }
     };
 
     return {
@@ -101,7 +146,8 @@ export default defineComponent({
       bottomIcons,
       changeEditorContent,
       paste,
-      editorContent
+      editorContent,
+      bottomClass
     };
   }
 });

src/components/Input.vue

@@ -1,20 +1,26 @@
 <template>
   <div class="hy-input flex">
     <div class="hy-input-box flex1">
-      <input :maxlength="maxlength" :readonly="readonly" v-model="inputValue" @input="changeInput" />
+      <input
+        :maxlength="maxlength"
+        :disabled="disabled"
+        :readonly="readonly"
+        v-model="inputValue"
+        @input="changeInput"
+      />
     </div>
     <div class="hy-number-control flex" v-if="control">
       <div
         class="hy-number-control-add hy-number-button"
-        :class="modelValue === max ? 'disabled' : ''"
-        @click="calculateDelay('add')"
+        :class="modelValue === max || disabled ? 'disabled' : ''"
+        @click="disabled ? '' : calculateDelay('add')"
       >
         <i class="iconfont icon-arrow-up"></i>
       </div>
       <div
         class="hy-number-control-sub hy-number-button"
-        :class="modelValue === min ? 'disabled' : ''"
-        @click="calculateDelay('sub')"
+        :class="modelValue === min || disabled ? 'disabled' : ''"
+        @click="disabled ? '' : calculateDelay('sub')"
       >
         <i class="iconfont icon-arrow-down"></i>
       </div>
@@ -38,6 +44,7 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    disabled: Boolean,
     type: {
       type: String,
       default: 'text'

src/components/Switch.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 
 export default defineComponent({
   props: {
@@ -26,14 +26,21 @@ export default defineComponent({
     styled: String,
     disabled: Boolean
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
     const checkedStatus = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      nv => {
+        checkedStatus.value = nv;
+      }
+    );
 
     const checkStatus = () => {
       if (props.disabled) return;
       checkedStatus.value = !checkedStatus.value;
       emit('update:modelValue', checkedStatus.value);
+      emit('change', checkedStatus.value);
     };
 
     return {

src/config/electronConfig.ts

@@ -1,5 +1,6 @@
 import { Task } from 'electron';
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
 /**
  * task事件
  */
@@ -33,14 +34,12 @@ export const disabledKeys = () => {
 
   const shortcuts = ['Ctrl+N', 'SHIFT+F10', 'Ctrl+SHIFT+I'];
 
-  const exportKeys = process.env.NODE_ENV === 'development' ? shortcuts : [...devShortcuts, ...shortcuts];
+  const exportKeys = isDevelopment ? shortcuts : [...devShortcuts, ...shortcuts];
   return exportKeys;
 };
 
-const globalEnv = process.env.NODE_ENV;
-
-const devWid = globalEnv === 'development' ? 950 : 0;
-const devHei = globalEnv === 'development' ? 600 : 0;
+const devWid = isDevelopment ? 950 : 0;
+const devHei = isDevelopment ? 600 : 0;
 
 // 底部icon: 40*40
 const editorWindowOptions = {
@@ -78,7 +77,7 @@ export const browserWindowOption = (type?: 'editor'): Electron.BrowserWindowCons
       height: devHei || 600,
       minWidth: 320,
       ...commonOptions,
-      resizable: false
+      resizable: isDevelopment ? true : false
     };
   }
   return {
@@ -92,4 +91,4 @@ export const browserWindowOption = (type?: 'editor'): Electron.BrowserWindowCons
  *
  * 正式环境: file://${__dirname}/index.html
  */
-export const winURL = globalEnv === 'development' ? 'http://localhost:55225' : `file://${__dirname}/index.html`;
+export const winURL = isDevelopment ? 'http://localhost:55225' : `file://${__dirname}/index.html`;

src/config/index.ts

@@ -1,4 +1,4 @@
-import { editorIcons, classNames } from './noteConfig';
+import { editorIcons, classNames } from './inotesConfig';
 import { browserWindowOption, winURL, disabledKeys, userTasks } from './electronConfig';
 
 export { classNames, editorIcons, browserWindowOption, winURL, disabledKeys, userTasks };