From f4afd9361fcb0e9c7f944522653f7bd17a10d5c4 Mon Sep 17 00:00:00 2001
From: oeyoews <jyao4783@gmail.com>
Date: Fri, 22 Mar 2024 23:46:28 +0800
Subject: [PATCH] feat: support save to tiddlywiki

---
 entrypoints/background.ts   |  5 +-
 entrypoints/content.ts      |  1 -
 entrypoints/popup/Popup.vue | 97 +++++++++++++++++++++++++++++++++++--
 package.json                |  3 ++
 pnpm-lock.yaml              | 76 +++++++++++++++++++++++++++++
 5 files changed, 173 insertions(+), 9 deletions(-)

diff --git a/entrypoints/background.ts b/entrypoints/background.ts
index 14c91e2..4664b2e 100644
--- a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -1,6 +1,4 @@
 export default defineBackground(() => {
-  console.log('Hello background!', { id: browser.runtime.id });
-
   browser.runtime.onInstalled.addListener(async ({ reason }) => {
     if (reason !== 'install') return;
 
@@ -13,14 +11,13 @@ export default defineBackground(() => {
   chrome.runtime.onInstalled.addListener(function () {
     chrome.contextMenus.create({
       id: 'tiddlywiki',
-      title: '添加到 TiddlyWiki(Ctrl+Shift+F)',
+      title: '添加到 TiddlyWiki(WIP)',
       contexts: ['all'],
     });
   });
 
   chrome.commands.onCommand.addListener(function (command) {
     if (command === 'addtiddlywiki') {
-      console.log('yu ');
       // 处理快捷键被触发时的逻辑
     }
   });
diff --git a/entrypoints/content.ts b/entrypoints/content.ts
index 9fb7cd3..c82ba63 100644
--- a/entrypoints/content.ts
+++ b/entrypoints/content.ts
@@ -11,7 +11,6 @@ export default defineContentScript({
     }
 
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-      console.log(request.info);
       sendResponse(getDoc());
     });
   },
diff --git a/entrypoints/popup/Popup.vue b/entrypoints/popup/Popup.vue
index 263fe60..fd2dd7b 100644
--- a/entrypoints/popup/Popup.vue
+++ b/entrypoints/popup/Popup.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
 import 'element-plus/es/components/message/style/css'
+import dayjs from 'dayjs'
+import utc from "dayjs/plugin/utc"
+
 
 // @ts-ignore
 import FaRegularEdit from '~icons/fa-regular/edit';
 // @ts-ignore
+import MaterialSymbolsInfoOutline from '~icons/material-symbols/info-outline';
+// @ts-ignore
 import FaFileTextO from '~icons/fa/file-text-o';
 // @ts-ignore
 import FaRegularSave from '~icons/fa-regular/save';
 import { ref, } from 'vue';
 import saveMarkdown from '@/utils/saveMarkdown'
 import { html2md, md2html } from '@/utils/parser'
+import { ElMessage } from 'element-plus';
+dayjs.extend(utc)
 
 const html = ref('')
 const md = ref('')
 const link = ref('')
 const faviconUrl = ref('')
 const title = ref('')
+const username = ref('oeyoews')
+const port = ref('8000')
 
 chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
   const tab = tabs[0]
@@ -30,10 +39,63 @@ chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
 
 })
 
+
 watch(md, async () => {
   html.value = (await md2html(md.value))
 })
 
+const status = ref<{
+  username: string, tiddlywiki_version: string
+}>({
+  username: '',
+  tiddlywiki_version: ''
+})
+
+fetch(`http://localhost:${port.value}/status`).then((res) => {
+  return res.json()
+}).then((data) => {
+  status.value = data;
+  if (!data.tiddlywiki_version) {
+    ElMessage({
+      message: 'TiddlyWiki 未连接',
+      type: 'error'
+    })
+  }
+})
+
+
+const save2TiddlyWiki = async (title: string, text: string, port: string) => {
+  if (!status.value.tiddlywiki_version) {
+    ElMessage({
+      message: '请先连接 TiddlyWiki',
+      type: 'error'
+    })
+    return
+  }
+
+  fetch(`http://localhost:${port}/recipes/default/tiddlers/${title}`, {
+    method: 'PUT',
+    headers: {
+      "Content-Type": "application/json",
+      "x-requested-with": "TiddlyWiki"
+    },
+    body: JSON.stringify({
+      text, creator: username.value,
+      type: 'text/markdown',
+      created: dayjs(new Date()).utc().format('YYYYMMDDHHmmss')
+    })
+  }).then((res) => {
+    if (res.ok) {
+      ElMessage({
+        message: '保存成功',
+        type: 'success'
+      })
+    }
+  })
+}
+
+
+
 </script>
 
 <template>
@@ -42,12 +104,17 @@ watch(md, async () => {
     <div class="sticky top-0 backdrop-blur-sm mb-2">
       <div class="flex justify-end">
 
-        <ElBacktop :right="100" :bottom="100" />
+        <!-- // TODO -->
+        <!-- <ElBacktop :right="100" :bottom="100" /> -->
         <ElButton @click="saveMarkdown(md, title!)">
           <ElIcon>
             <FaRegularSave />
           </ElIcon>
         </ElButton>
+
+        <ElButton @click="save2TiddlyWiki(title, md, port)">
+          save tiddlywiki
+        </ElButton>
       </div>
     </div>
     <ElTabs type="border-card">
@@ -72,9 +139,6 @@ watch(md, async () => {
             <div v-html="html"></div>
           </article>
         </div>
-        <!-- <div v-else>
-          <h2>暂无内容</h2>
-        </div> -->
       </ElTabPane>
 
       <ElTabPane>
@@ -86,6 +150,31 @@ watch(md, async () => {
         <el-input placeholder="写点什么吧 ..." v-model="md" :autosize="{ minRows: 4, maxRows: 20 }" type="textarea"
           spellcheck="false" class="w-full" />
       </ElTabPane>
+      <ElTabPane>
+        <template #label>
+          <MaterialSymbolsInfoOutline />
+        </template>
+
+        Username:
+        <ElButton>
+          {{ status.username }}
+        </ElButton>
+        TiddlyWiki:
+        <ElButton>
+          {{ status.tiddlywiki_version }}
+        </ElButton>
+
+        <h2>配置</h2>
+
+        <div class="flex items-center">
+          <div>
+            端口
+          </div>
+          <ElInput v-model="port" />
+        </div>
+
+      </ElTabPane>
+
 
     </ElTabs>
 
diff --git a/package.json b/package.json
index aa89248..2107b42 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "@tailwindcss/typography": "^0.5.10",
     "@types/chrome": "^0.0.263",
     "autoprefixer": "^10.4.19",
+    "axios": "^1.6.8",
+    "dayjs": "^1.11.10",
     "element-plus": "^2.6.1",
     "postcss": "^8.4.38",
     "rehype-document": "^7.0.3",
@@ -43,6 +45,7 @@
   "devDependencies": {
     "@iconify-json/fa": "^1.1.8",
     "@iconify-json/fa-regular": "^1.1.8",
+    "@iconify-json/material-symbols": "^1.1.76",
     "@vitejs/plugin-vue": "^5.0.1",
     "typescript": "^5.3.3",
     "vue-tsc": "^2.0.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4ab3ebc..174a12d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,12 @@ dependencies:
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
+  axios:
+    specifier: ^1.6.8
+    version: 1.6.8
+  dayjs:
+    specifier: ^1.11.10
+    version: 1.11.10
   element-plus:
     specifier: ^2.6.1
     version: 2.6.1(vue@3.4.21)
@@ -85,6 +91,9 @@ devDependencies:
   '@iconify-json/fa-regular':
     specifier: ^1.1.8
     version: 1.1.8
+  '@iconify-json/material-symbols':
+    specifier: ^1.1.76
+    version: 1.1.76
   '@vitejs/plugin-vue':
     specifier: ^5.0.1
     version: 5.0.4(vite@5.2.2)(vue@3.4.21)
@@ -674,6 +683,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/material-symbols@1.1.76:
+    resolution: {integrity: sha512-U3S0n2eENEZmAK+b+zvNBPxHySm7eo9bFQaKODlbrFyjNfaZVwpQMs7pZ3ZmeX9YLp0CtV8XqzmRb2YdhLJIkQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -1268,6 +1283,10 @@ packages:
     resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
     dev: true
 
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
   /at-least-node@1.0.0:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
     engines: {node: '>= 4.0.0'}
@@ -1289,6 +1308,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: false
 
+  /axios@1.6.8:
+    resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==}
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
     dev: false
@@ -1626,6 +1655,13 @@ packages:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
 
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
   /comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
     dev: false
@@ -1834,6 +1870,11 @@ packages:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
     dev: true
 
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -2184,6 +2225,16 @@ packages:
     hasBin: true
     dev: true
 
+  /follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
   /foreground-child@3.1.1:
     resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
     engines: {node: '>=14'}
@@ -2197,6 +2248,15 @@ packages:
     engines: {node: '>= 14.17'}
     dev: true
 
+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /formdata-node@6.0.3:
     resolution: {integrity: sha512-8e1++BCiTzUno9v5IZ2J6bv4RU+3UKDmqWUQD0MIMVCd9AdhWkO1gw57oo1mNEX1dMq2EGI+FbWz4B92pscSQg==}
     engines: {node: '>= 18'}
@@ -3512,6 +3572,18 @@ packages:
       braces: 3.0.2
       picomatch: 2.3.1
 
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
+
   /mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -4062,6 +4134,10 @@ packages:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
     dev: true
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
   /publish-browser-extension@2.1.3:
     resolution: {integrity: sha512-qisnXUUwjvu5kMvObfG7UQ9rPU3t0XfbKdCdCrwAXaLUySdC25nlM4gxi+CBvL7LiwvK494GJyEK/weQBhIyTQ==}
     engines: {node: ^18.0.0 || >=20.0.0}