feat: export notes to json

package.json

@@ -17,6 +17,7 @@
         "mitt": "^3.0.0",
         "pinyin": "^2.10.2",
         "randomcolor": "^0.6.2",
+        "ts-enum-util": "^4.0.2",
         "uuid": "^8.3.2",
         "vue": "^3.0.5"
     },

src/content-scripts/renderer/popup/note-book/note.vue

@@ -36,7 +36,9 @@
       <div class="note-time">{{ dayjs.unix(note.createTime).format("MM/DD HH:mm") }}</div>
     </div>
     <!-- more opers -->
-    <More direction="column" :size="2" :opers="moreOpers" />
+    <div class="note-more-opers">
+      <More direction="column" :size="2" :opers="moreOpers" />
+    </div>
     <!-- note content -->
     <p class="note-content">{{ note.content }}</p>
     <!-- note editor -->
@@ -328,6 +330,13 @@ export default {
 .note-wrapper__notselected {
   opacity: 0.5;
 }
+.note-more-opers {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  padding: 5px;
+}
 .note-link-opers {
   padding: 5px 0px;
   cursor: pointer;

src/content-scripts/renderer/popup/settings/ex-import.ts

@@ -0,0 +1,25 @@
+import { $enum } from "ts-enum-util";
+
+import { Oper } from "@/types/common";
+import { StorageKeys } from "@/utils/constant";
+import { get } from "@/utils/storage";
+
+export const exportOper: Oper = {
+  title: "Export notes to json",
+  onClick: async () => {
+    const exportObj = {};
+    const keys = $enum(StorageKeys).keys();
+    for (const key of keys) {
+      const item = await get(key);
+      (exportObj as Record<StorageKeys, any>)[key] = item;
+    }
+    const dataStr =
+      "data:text/json;charset=utf-8," +
+      encodeURIComponent(JSON.stringify(exportObj, null, 2));
+    const dom: HTMLElement | null = document.createElement("a");
+    dom?.setAttribute("href", dataStr);
+    dom?.setAttribute("download", "context-note.json");
+    dom?.click();
+  },
+  isConfirm: false,
+};

src/content-scripts/renderer/popup/settings/index.vue

@@ -1,46 +1,56 @@
 <template>
-  <div class="settings">
-    <a href="https://github.com/betterRunner/context-note" target="_blank">
+  <div class="settings-container">
+    <div class="settings">
+          <a href="https://github.com/betterRunner/context-note" target="_blank">
       <img class="settings-icon" :src="githubLogoSrc" height="30" />
     </a>
-    <More direction="row" size="4" color="#666" placement="top" :opers="[]" />
+    <More direction="row" size="4" color="#666" placement="top" :opers="opers" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import More from '../shared/more.vue';
+import { ref } from "vue";
+import { Oper } from "@/types/common";
+import More from "../shared/more.vue";
+import { exportOper } from './ex-import';
 export default {
   components: {
     More,
   },
   setup() {
     const githubLogoSrc = chrome.runtime.getURL("assets/github-logo.png");
+    const opers = ref<Oper[]>([exportOper])
 
     return {
       githubLogoSrc,
+      opers,
     };
   },
 };
 </script>
 
 <style lang="less" scoped>
-.settings {
-  position: absolute;
-  width: 100%;
+.settings-container {
+  position: fixed;
+  min-width: 500px;
+  width: 500px;
   height: 50px;
   bottom: 0px;
   border: 1px solid rgba(100, 108, 255, 0.8);
-  box-shadow: rgba(100, 108, 255, 1.0) 0px 6px 18px 0px;
+  box-shadow: rgba(100, 108, 255, 1) 0px 6px 18px 0px;
   background: #fff;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
 
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  
-  .settings-icon {
-    margin-left: 20px;
+  .settings {
+    padding: 10px 20px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
   }
 }
 </style>

src/content-scripts/renderer/popup/shared/more.vue

@@ -7,18 +7,15 @@
   >
     <template #reference>
       <div class="more-icon">
-        <div :style="dotWrapperStyle" class="more-icon-wrapper">
+        <div :style="dotWrapperStyle">
           <div
             v-for="item in [1, 2, 3]"
             :key="item"
-            class="more-icon-dot"
             :style="dotStyle"
           ></div>
         </div>
-        <div class="more-popup"></div>
       </div>
     </template>
-    <!-- delete icon -->
 
     <div class="more-opers">
       <div
@@ -77,6 +74,8 @@ export default {
       border: `${px} solid ${props.color}`,
       "border-radius": px,
       margin: px,
+      cursor: 'pointer',
+      'user-select': 'none',
     });
 
     const handleClick = (oper: Oper) => {
@@ -103,13 +102,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.more-icon {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  cursor: pointer;
-  padding: 5px;
-}
 .more-opers {
   .more-opers-item {
     cursor: pointer;

todo.md

@@ -1,4 +1,6 @@
 - [ ] export/import notes' data by json
+  - [x] export
+  - [ ] import
 - [ ] more precise rects selection rather than coor (select the real dom by text)
 - [ ] screenshot features
   - https://javascript.plainenglish.io/a-better-alternative-to-html2canvas-in-vuejs-3-e0686755d56e

yarn.lock

@@ -1690,6 +1690,11 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz#717b8f220cc0bb7b44e40514c22b2e8bbc70d8b9"
   integrity sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=
 
+ts-enum-util@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/ts-enum-util/-/ts-enum-util-4.0.2.tgz#2587a6fa8e8629f3715009e5090d52df9456f7e2"
+  integrity sha512-BB5qjvHYgYgOB/CaoA1Cy/B2QNnZ+nVBrJ15VV/AXGWx+AO83k5wgeLOJvkSLoKKavvH/M8Wj4ZbgROjsuYwzw==
+
 tslib@^1.10.0:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"