feat: 优化界面交互

terwer · Jun 1, 2023 · ef435aa · ef435aa
1 parent 870b5fb
commit ef435aa
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 23 deletions.
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
@@ -21,14 +21,15 @@
   "loading": "加载中",
   "importFile": "单个导入",
   "importTip": "支持.md, .epub, .docx, .html, .opml",
-  "importTipHelp": "鼠标移上来查看帮助详情",
-  "importSingleNotice1": "1、将文档转换成Markdown临时文件，然后创建文档",
-  "importSingleNotice2": "2、html资源文件夹(仅PC客户端)必须是 [文件名]_files",
+  "importTipHelp": "查看帮助",
+  "importSingleNotice1": "1、非MD文件会将文档转换成Markdown临时文件，然后创建文档",
+  "importSingleNotice2": "2、MD文档支持带资源文件，路径必须是相对路径",
+  "importSingleNotice3": "3、html支持资源文件夹(仅PC客户端)且必须是 [文件名]_files",
   "importFolder": "批量导入",
-  "importFolderTip": "支持混合.epub,.docx,.html,.opml",
+  "importFolderTip": "支持混合.epub,.docx,.opml",
   "importNotRecursive1": "1、不递归",
   "importNotRecursive2": "2、不支持MD，批量导入MD请使用笔记本自带功能。",
-  "importNotRecursive3": "3、html资源文件夹(仅PC客户端)必须是 [文件名]_files",
+  "importNotRecursive3": "3、不支持html，因为安全限制，浏览器现在无法获取绝对路径，可通过单个导入(支持资源文件)",
   "importTipNotAllowed": "不允许的文件类型:",
   "importError": "导入出错:",
   "cleanTemp": "清理临时文件",

diff --git a/src/lib/ImportForm.svelte b/src/lib/ImportForm.svelte
@@ -41,7 +41,7 @@
   // 用户指南不应该作为可以写入的笔记本
   const hiddenNotebook: Set<string> = new Set(["思源笔记用户指南", "SiYuan User Guide"])
   let tempCount = 0
-  const allowedExtensions = ["docx", "epub", "md", "html", "opml"]
+  const allowedMultiExtensions = ["docx", "epub", "opml"]
 
   // events
   const notebookChange = async function () {
@@ -151,7 +151,7 @@
     // 转换
     const uploadResult = await ImportService.uploadAndConvert(pluginInstance, file)
     // 导入
-    await ImportService.singleImport(pluginInstance, uploadResult.toFilePath, toNotebookId,uploadResult.isMd)
+    await ImportService.singleImport(pluginInstance, uploadResult.toFilePath, toNotebookId, uploadResult.isMd)
   }
   // =================
   // 单文件转换结束
@@ -179,7 +179,7 @@
       const fileName = entry.name
       const ext = fileName.split(".").pop().toLowerCase()
 
-      if (!allowedExtensions.includes(ext)) {
+      if (!allowedMultiExtensions.includes(ext)) {
         console.warn(`${pluginInstance.i18n.importTipNotAllowed} ${fileName}`)
         continue
       }
@@ -196,6 +196,16 @@
   // =================
   // 批量转换结束
   // =================
+
+  let showSingleImportTip = false
+  let showMultiImportTip = false
+  const toggleSingleHighlight = () => {
+    showSingleImportTip = !showSingleImportTip
+  }
+  const toggleMultiHighlight = () => {
+    showMultiImportTip = !showMultiImportTip
+    console.log(showMultiImportTip)
+  }
 </script>
 
 <div class="b3-dialog__content importer-form-container">
@@ -225,10 +235,11 @@
     <div class="fn__flex b3-label config__item">
       <div class="fn__flex-1 fn__flex-center">
         {pluginInstance.i18n.importFile}
-        <div class="b3-label__text tips">
-          <div>{pluginInstance.i18n.importTip} <span class="sign">({pluginInstance.i18n.importTipHelp})</span></div>
-          <div class="highlight">{pluginInstance.i18n.importSingleNotice1}</div>
-          <div class="highlight">{pluginInstance.i18n.importSingleNotice2}</div>
+        <div class="b3-label__text tips" on:click={toggleSingleHighlight} on:keydown={handleKeyDown}>
+          <div>{pluginInstance.i18n.importTip} <span class={showSingleImportTip ? "sign hidden" : "sign"}>({pluginInstance.i18n.importTipHelp})</span></div>
+          <div class={showSingleImportTip ? "highlight" : "highlight hidden"}>{pluginInstance.i18n.importSingleNotice1}</div>
+          <div class={showSingleImportTip ? "highlight" : "highlight hidden"}>{pluginInstance.i18n.importSingleNotice2}</div>
+          <div class={showSingleImportTip ? "highlight" : "highlight hidden"}>{pluginInstance.i18n.importSingleNotice3}</div>
         </div>
       </div>
       <span class="fn__space" />
@@ -249,11 +260,19 @@
     <div class="fn__flex b3-label config__item">
       <div class="fn__flex-1 fn__flex-center">
         {pluginInstance.i18n.importFolder}
-        <div class="b3-label__text">
-          <div>{pluginInstance.i18n.importFolderTip} <span class="sign">({pluginInstance.i18n.importTipHelp})</span></div>
-          <div class="highlight">{pluginInstance.i18n.importNotRecursive1}</div>
-          <div class="highlight">{pluginInstance.i18n.importNotRecursive2}</div>
-          <div class="highlight">{pluginInstance.i18n.importNotRecursive3}</div>
+        <div class="b3-label__text tips" on:click={toggleMultiHighlight} on:keydown={handleKeyDown}>
+          <div>
+            {pluginInstance.i18n.importFolderTip} <span class={showMultiImportTip ? "sign hidden" : "sign"}>({pluginInstance.i18n.importTipHelp})</span>
+          </div>
+          <div class={showMultiImportTip ? "highlight" : "highlight hidden"}>
+            {pluginInstance.i18n.importNotRecursive1}
+          </div>
+          <div class={showMultiImportTip ? "highlight" : "highlight hidden"}>
+            {pluginInstance.i18n.importNotRecursive2}
+          </div>
+          <div class={showMultiImportTip ? "highlight" : "highlight hidden"}>
+            {pluginInstance.i18n.importNotRecursive3}
+          </div>
         </div>
       </div>
       <span class="fn__space" />
@@ -289,7 +308,9 @@
 
     <div class="fn__flex b3-label config__item">
       {pluginInstance.i18n.reportBug1}
-      &nbsp;<a href="https://github.com/terwer/siyuan-plugin-importer/issues/new" target="_blank">{pluginInstance.i18n.reportBug2}</a>&nbsp;
+      &nbsp;<a href="https://github.com/terwer/siyuan-plugin-importer/issues/new" target="_blank"
+        >{pluginInstance.i18n.reportBug2}</a
+      >&nbsp;
       {pluginInstance.i18n.reportBug3}
     </div>
   </div>
@@ -307,24 +328,23 @@
 
   .highlight {
     color: red;
-    display: none; /* 初始状态下隐藏 */
   }
 
   .link {
     color: var(--b3-theme-primary);
     cursor: pointer;
   }
 
-  .tips{
+  .tips {
     cursor: pointer;
   }
 
-  .b3-label__text .sign{
+  .b3-label__text .sign {
     cursor: pointer;
     color: var(--b3-theme-primary);
   }
 
-  .b3-label__text:hover .highlight {
-    display: block;
+  .highlight.hidden,.sign.hidden {
+    display: none;
   }
 </style>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -146,6 +146,11 @@ export const copyDir = async (src, dest) => {
   const fs = window.require("fs")
   const path = window.require("path")
 
+  if(!fs.existsSync(src)){
+    console.warn("Can not get path")
+    return
+  }
+
   // 创建文件夹
   if (!fs.existsSync(dest)) {
     await mkdirp(dest)