feat: #319 PicGO图形化配置界面-基本配置界面

terwer · Feb 5, 2023 · f82f98d · f82f98d
1 parent f5975f5
commit f82f98d
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 75 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -1,69 +1,44 @@
-/*
- * Copyright (c) 2023, Terwer . All rights reserved.
- * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
- *
- * This code is free software; you can redistribute it and/or modify it
- * under the terms of the GNU General Public License version 2 only, as
- * published by the Free Software Foundation.  Terwer designates this
- * particular file as subject to the "Classpath" exception as provided
- * by Terwer in the LICENSE file that accompanied this code.
- *
- * This code is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
- * version 2 for more details (a copy is included in the LICENSE file that
- * accompanied this code).
- *
- * You should have received a copy of the GNU General Public License version
- * 2 along with this work; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
- *
- * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
- * or visit www.terwer.space if you need additional information or have any
- * questions.
- */
-
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import "@vue/runtime-core"
+import '@vue/runtime-core'
 
 export {}
 
-declare module "@vue/runtime-core" {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    ElAlert: typeof import("element-plus/es")["ElAlert"]
-    ElAutocomplete: typeof import("element-plus/es")["ElAutocomplete"]
-    ElButton: typeof import("element-plus/es")["ElButton"]
-    ElButtonGroup: typeof import("element-plus/es")["ElButtonGroup"]
-    ElCard: typeof import("element-plus/es")["ElCard"]
-    ElCheckbox: typeof import("element-plus/es")["ElCheckbox"]
-    ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"]
-    ElCol: typeof import("element-plus/es")["ElCol"]
-    ElContainer: typeof import("element-plus/es")["ElContainer"]
-    ElDatePicker: typeof import("element-plus/es")["ElDatePicker"]
-    ElDialog: typeof import("element-plus/es")["ElDialog"]
-    ElForm: typeof import("element-plus/es")["ElForm"]
-    ElFormItem: typeof import("element-plus/es")["ElFormItem"]
-    ElHeader: typeof import("element-plus/es")["ElHeader"]
-    ElInput: typeof import("element-plus/es")["ElInput"]
-    ElMain: typeof import("element-plus/es")["ElMain"]
-    ElOption: typeof import("element-plus/es")["ElOption"]
-    ElPageHeader: typeof import("element-plus/es")["ElPageHeader"]
-    ElPagination: typeof import("element-plus/es")["ElPagination"]
-    ElPopover: typeof import("element-plus/es")["ElPopover"]
-    ElRadio: typeof import("element-plus/es")["ElRadio"]
-    ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"]
-    ElRow: typeof import("element-plus/es")["ElRow"]
-    ElSelect: typeof import("element-plus/es")["ElSelect"]
-    ElSkeleton: typeof import("element-plus/es")["ElSkeleton"]
-    ElSwitch: typeof import("element-plus/es")["ElSwitch"]
-    ElTable: typeof import("element-plus/es")["ElTable"]
-    ElTableColumn: typeof import("element-plus/es")["ElTableColumn"]
-    ElTabPane: typeof import("element-plus/es")["ElTabPane"]
-    ElTabs: typeof import("element-plus/es")["ElTabs"]
-    ElTag: typeof import("element-plus/es")["ElTag"]
-    ElTooltip: typeof import("element-plus/es")["ElTooltip"]
-    ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"]
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
   }
 }
diff --git a/components/picgo/PicgoSetting.vue b/components/picgo/PicgoSetting.vue
@@ -24,17 +24,40 @@
   -->
 
 <template>
-  <div v-if="isElectron">
-    <div>{{ $t("picgo.siyuan.tip") }} 。</div>
-    <p></p>
-    <p>
-      详情请参考：<a
-        target="_blank"
-        href="https://docs.publish.terwer.space/post/picgo-diagram-bed-use-zxqqec.html"
-        >PicoGO配置在线文档</a
-      >
-    </p>
-    <h1>预计0.7.0会新增比较友好的图形化配置页面，敬请期待。</h1>
+  <div v-if="isElectron || picgoCommonData.showDebugMsg">
+    <blockquote class="picgo-setting-tip">
+      <div>
+        {{ $t("picgo.siyuan.tip") }} 。 从 0.7.0+
+        开始，支持多个配置文件切换，默认的 PicGO 配置文件为：
+        <pre
+          style="display: inline-block"
+        ><code>[思源工作空间]/data/storage/syp/picgo.cfg.json</code></pre>
+        。
+        {{ $t("setting.picgo.refer.to") }}
+        <a
+          target="_blank"
+          href="https://docs.publish.terwer.space/post/picgo-diagram-bed-use-zxqqec.html"
+          >{{ $t("setting.picgo.refer.to.online.doc") }}</a
+        >
+        或者
+        <a
+          href="https://picgo.github.io/PicGo-Core-Doc/zh/guide/config.html#%E6%89%8B%E5%8A%A8%E7%94%9F%E6%88%90"
+          >PicGO 官方文档</a
+        >
+        。
+      </div>
+    </blockquote>
+
+    <!-- PicGO配置 -->
+    <el-tabs type="border-card">
+      <el-tab-pane :label="$t('setting.picgo.picbed')">
+        <!-- 图床类型 -->
+        <picbed-setting />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('setting.picgo.picgo')">
+        <picgo-config-setting />
+      </el-tab-pane>
+    </el-tabs>
   </div>
   <div v-else>
     <p>{{ $t("picgo.chrome.tip") }} 。</p>
@@ -43,6 +66,32 @@
 </template>
 <script setup lang="ts">
 import { isElectron } from "~/utils/browserUtil"
+import { usePicgoCommon } from "~/composables/picgo/picgoCommonCom"
+import PicbedSetting from "~/components/picgo/setting/PicbedSetting.vue"
+import PicgoConfigSetting from "~/components/picgo/setting/PicgoConfigSetting.vue"
 
-console.log("pico test")
+// uses
+const { picgoCommonData } = usePicgoCommon()
 </script>
+
+<style scoped>
+.picgo-setting-tip {
+  display: block;
+  border: solid 1px green;
+  border-radius: 4px;
+  /* padding-bottom: 10px; */
+  background: var(--custom-app-bg-color);
+  /* margin-bottom: 10px; */
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin: 0 0 10px;
+  padding: 0 16px 12px;
+}
+
+@media all and (orientation: portrait) {
+  .picgo-setting-tip {
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+}
+</style>
diff --git a/components/picgo/setting/PicbedSetting.vue b/components/picgo/setting/PicbedSetting.vue
@@ -0,0 +1,41 @@
+<!--
+  - Copyright (c) 2023, Terwer . All rights reserved.
+  - DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+  -  
+  - This code is free software; you can redistribute it and/or modify it
+  - under the terms of the GNU General Public License version 2 only, as
+  - published by the Free Software Foundation.  Terwer designates this
+  - particular file as subject to the "Classpath" exception as provided
+  - by Terwer in the LICENSE file that accompanied this code.
+  -  
+  - This code is distributed in the hope that it will be useful, but WITHOUT
+  - ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  - FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+  - version 2 for more details (a copy is included in the LICENSE file that
+  - accompanied this code).
+  -  
+  - You should have received a copy of the GNU General Public License version
+  - 2 along with this work; if not, write to the Free Software Foundation,
+  - Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+  -  
+  - Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+  - or visit www.terwer.space if you need additional information or have any
+  - questions.
+  -->
+
+<template>
+  <div>
+    <el-form-item>
+      <el-button-group>
+        <el-button type="primary"
+          >{{ $t("setting.picgo.picbed.github") }}
+        </el-button>
+        <el-button>{{ $t("setting.picgo.picbed.aliyun.oss") }}</el-button>
+        <el-button>{{ $t("setting.picgo.picbed.tencent.cos") }}</el-button>
+        <el-button>{{ $t("setting.picgo.picbed.qiniu") }}</el-button>
+        <el-button>{{ $t("setting.picgo.picbed.youpai") }}</el-button>
+      </el-button-group>
+    </el-form-item>
+    <el-form-item> picbed setting list</el-form-item>
+  </div>
+</template>
diff --git a/components/picgo/setting/PicgoConfigSetting.vue b/components/picgo/setting/PicgoConfigSetting.vue
@@ -0,0 +1,28 @@
+<!--
+  - Copyright (c) 2023, Terwer . All rights reserved.
+  - DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+  -  
+  - This code is free software; you can redistribute it and/or modify it
+  - under the terms of the GNU General Public License version 2 only, as
+  - published by the Free Software Foundation.  Terwer designates this
+  - particular file as subject to the "Classpath" exception as provided
+  - by Terwer in the LICENSE file that accompanied this code.
+  -  
+  - This code is distributed in the hope that it will be useful, but WITHOUT
+  - ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  - FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+  - version 2 for more details (a copy is included in the LICENSE file that
+  - accompanied this code).
+  -  
+  - You should have received a copy of the GNU General Public License version
+  - 2 along with this work; if not, write to the Free Software Foundation,
+  - Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+  -  
+  - Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+  - or visit www.terwer.space if you need additional information or have any
+  - questions.
+  -->
+
+<template>
+  <div>Picgo config setting form</div>
+</template>
diff --git a/components/publish/PublishService.vue b/components/publish/PublishService.vue
@@ -55,7 +55,7 @@
       <dynamic-platform />
     </el-tab-pane>
     <el-tab-pane name="picgo-setting" :label="$t('picgo.pic.setting')">
-      <div style="padding: 16px 20px">
+      <div style="padding-right: 20px">
         <picgo-setting />
       </div>
     </el-tab-pane>

diff --git a/composables/picgo/picgoUploadCom.ts b/composables/picgo/picgoUploadCom.ts
@@ -79,6 +79,11 @@ export const usePicgoUpload = (props, deps, refs) => {
   // public methods
   const picgoUploadMethods = {
     handlePicgoSetting: async () => {
+      if (picgoCommonData.showDebugMsg) {
+        picgoUploadData.dialogPicgoSettingFormVisible = true
+        return
+      }
+
       if (!isElectron) {
         await ElMessageBox.alert(
           t("picgo.pic.setting.no.tip"),

diff --git a/locales/en_US.ts b/locales/en_US.ts
@@ -427,4 +427,14 @@ export default {
     "You can go to https://developper.atlassian.com/Cloud/confluence/rest/v1/1/1/",
   "setting.conf.previewUrl.tip":
     "CONFLUENCE platform articles preview rules, usually:/pages/[postid]",
+  "setting.picgo.refer.to": "For details, please refer to:",
+  "setting.picgo.refer.to.online.doc":
+    "Picgo configuration online documentation",
+  "setting.picgo.picbed": "Picbed setting",
+  "setting.picgo.picgo": "PicGO setting",
+  "setting.picgo.picbed.github": "Github",
+  "setting.picgo.picbed.aliyun.oss": "Aliyun OSS",
+  "setting.picgo.picbed.tencent.cos": "Tencent cos",
+  "setting.picgo.picbed.qiniu": "Qiniu yun",
+  "setting.picgo.picbed.youpai": "Youpai yun",
 }
diff --git a/locales/zh_CN.ts b/locales/zh_CN.ts
@@ -318,8 +318,7 @@ export default {
   "anki.siyuan.tag.new": "新标签",
   "picgo.chrome.tip":
     "您当前使用的是浏览器插件，需要从这里下载配置 PicGO 客户端：https://github.com/Molunerfinn/PicGo/releases",
-  "picgo.siyuan.tip":
-    "您当前使用的是思源笔记挂件，需要自行配置已经集成好的PicGO，挂件版 PicGO 配置文件在：`[思源工作空间]/data/widgets/sy-post-publisher/lib/picgo/picgo.cfg.json`，请参考PicGO官方文档进行配置：https://picgo.github.io/PicGo-Core-Doc/zh/guide/config.html#%E6%89%8B%E5%8A%A8%E7%94%9F%E6%88%90",
+  "picgo.siyuan.tip": "您当前使用的是思源笔记挂件，PicGO已内置，只需配置即可",
   "post.detail.button.copy.id": "复制本文ID",
   "post.detail.button.share.link": "复制分享链接",
   "post.detail.button.browser.open": "默认浏览器打开",
@@ -429,4 +428,13 @@ export default {
     "可前往 https://developer.atlassian.com/cloud/confluence/rest/v1/#api-wiki-rest-api-content-get 查看文档",
   "setting.conf.previewUrl.tip":
     "Confluence平台文章预览规则，通常是：/pages/[postid]",
+  "setting.picgo.refer.to": "详情请参考：",
+  "setting.picgo.refer.to.online.doc": "PicGO配置在线文档",
+  "setting.picgo.picbed": "图床设置",
+  "setting.picgo.picgo": "PicGO设置",
+  "setting.picgo.picbed.github": "Github",
+  "setting.picgo.picbed.aliyun.oss": "阿里云OSS",
+  "setting.picgo.picbed.tencent.cos": "腾讯cos",
+  "setting.picgo.picbed.qiniu": "七牛云",
+  "setting.picgo.picbed.youpai": "又拍云",
 }