feat: #319 PicGO图形化配置界面-改进PicGO引入方式，多配置文件定义

terwer · Feb 7, 2023 · cbd780f · cbd780f
1 parent 13175ed
commit cbd780f
Show file tree

Hide file tree

Showing 16 changed files with 496 additions and 71 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -86,6 +86,11 @@ code {
   }
 }
 
+/* common */
+.pull-right {
+  float: right;
+}
+
 /* util */
 .disabled-click {
   pointer-events: none;
@@ -141,3 +146,7 @@ code {
   --el-dialog-margin-top: 10vh;
   margin: var(--el-dialog-margin-top, 15vh) auto 0 5.5%;
 }
+
+.el-card__body {
+  --el-card-padding: 10px;
+}
diff --git a/components/picgo/PicgoSetting.vue b/components/picgo/PicgoSetting.vue
@@ -31,7 +31,7 @@
         开始，支持多个配置文件切换，默认的 PicGO 配置文件为：
         <pre
           style="display: inline-block"
-        ><code>[思源工作空间]/data/storage/syp/picgo.cfg.json</code></pre>
+        ><code>[思源工作空间]/data/storage/syp/picgo/picgo.cfg.json</code></pre>
         。
         {{ $t("setting.picgo.refer.to") }}
         <a
@@ -88,7 +88,7 @@ const { picgoCommonData } = usePicgoCommon()
   padding: 0 16px 12px;
 }
 
-@media all and (orientation: portrait) {
+@media only screen and (max-width: 900px) {
   .picgo-setting-tip {
     padding-top: 16px;
     padding-bottom: 16px;

diff --git a/components/picgo/setting/PicbedSetting.vue b/components/picgo/setting/PicbedSetting.vue
@@ -36,6 +36,119 @@
         <el-button>{{ $t("setting.picgo.picbed.youpai") }}</el-button>
       </el-button-group>
     </el-form-item>
-    <el-form-item> picbed setting list</el-form-item>
+
+    <el-form-item>
+      <div class="profile-card-box">
+        <div
+          v-bind:key="profile.index"
+          class="profile-card-item"
+          v-for="profile in profileData.profileList"
+        >
+          <el-card>
+            <div class="profile-card-line">
+              <span>{{ profile.profileName }}</span>
+              <span class="pull-right">
+                <el-tooltip
+                  :content="$t('main.opt.edit')"
+                  class="box-item"
+                  effect="dark"
+                  placement="bottom"
+                  popper-class="publish-menu-tooltip"
+                >
+                  <el-button>
+                    <font-awesome-icon icon="fa-solid fa-pen-to-square" />
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip
+                  :content="$t('main.opt.delete')"
+                  class="box-item"
+                  effect="dark"
+                  placement="bottom"
+                  popper-class="publish-menu-tooltip"
+                >
+                  <el-button>
+                    <font-awesome-icon icon="fa-solid fa-trash-can" />
+                  </el-button>
+                </el-tooltip>
+              </span>
+            </div>
+            <div>{{ formatIsoToZhDate(new Date().toISOString()) }}</div>
+            <div :class="{ selected: profile.selected }">已选中</div>
+          </el-card>
+        </div>
+      </div>
+    </el-form-item>
+
+    <div class="profile-form">
+      <el-form label-width="120px">
+        <div>
+          <el-form-item label="图床配置名">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="Github仓库名">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="Github分支名">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="Token">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="存储路径">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="自定义域名">
+            <el-input />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
   </div>
 </template>
+
+<script lang="ts" setup>
+import { onMounted, reactive } from "vue"
+import { PicbedType } from "~/utils/common/picbedType"
+import { ElCard } from "element-plus"
+import { formatIsoToZhDate } from "~/utils/dateUtil"
+import { PicbedConfig } from "~/utils/platform/picgo/picbedConfig"
+
+const profileData = reactive({
+  profileList: <PicbedConfig[]>[],
+})
+
+const getProfileList = (bedType: PicbedType) => {
+  const picbedCfgList = <PicbedConfig[]>[]
+
+  for (let i = 0; i < 12; i++) {
+    const picbedCfg = new PicbedConfig()
+    const index = i + 1
+    picbedCfg.index = index
+    picbedCfg.profileName = "Profile-" + index
+
+    if (i === 0) {
+      picbedCfg.selected = true
+    }
+
+    picbedCfgList.push(picbedCfg)
+  }
+
+  return picbedCfgList
+}
+
+onMounted(() => {
+  profileData.profileList = getProfileList(PicbedType.PICBED_GITHUB)
+})
+</script>
+
+<style scoped>
+.profile-card-item {
+  display: inline-block;
+  margin-right: 10px;
+  width: 48%;
+}
+
+.profile-card-item .selected {
+  color: green;
+}
+</style>
diff --git a/components/picgo/setting/picbedform/GithubForm.vue b/components/picgo/setting/picbedform/GithubForm.vue
@@ -0,0 +1,26 @@
+<!--
+  - 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></template>
diff --git a/locales/en_US.ts b/locales/en_US.ts
@@ -437,4 +437,6 @@ export default {
   "setting.picgo.picbed.tencent.cos": "Tencent cos",
   "setting.picgo.picbed.qiniu": "Qiniu yun",
   "setting.picgo.picbed.youpai": "Youpai yun",
+  "main.opt.edit": "Edit",
+  "main.opt.delete": "Delete",
 }
diff --git a/locales/zh_CN.ts b/locales/zh_CN.ts
@@ -434,7 +434,9 @@ export default {
   "setting.picgo.picgo": "PicGO设置",
   "setting.picgo.picbed.github": "Github",
   "setting.picgo.picbed.aliyun.oss": "阿里云OSS",
-  "setting.picgo.picbed.tencent.cos": "腾讯cos",
+  "setting.picgo.picbed.tencent.cos": "腾讯COS",
   "setting.picgo.picbed.qiniu": "七牛云",
   "setting.picgo.picbed.youpai": "又拍云",
+  "main.opt.edit": "编辑",
+  "main.opt.delete": "删除",
 }
diff --git a/plugins/font-awesome/font-awesome.ts b/plugins/font-awesome/font-awesome.ts
@@ -41,8 +41,10 @@ import {
   faListOl,
   faMagnifyingGlass,
   faPaste,
+  faPenToSquare,
   faRectangleList,
   faShareNodes,
+  faTrashCan,
   faUpload,
   faXmark,
 } from "@fortawesome/free-solid-svg-icons"
@@ -70,6 +72,8 @@ const FontAwesome: PluginObject<any> = {
     library.add(faFileImport)
     library.add(faGear)
     library.add(faArrowRotateRight)
+    library.add(faTrashCan)
+    library.add(faPenToSquare)
 
     Vue.component("font-awesome-icon", FontAwesomeIcon)
     logger.debug("FontAwesome inited")

diff --git a/public/lib/siyuan/publish-helper.js b/public/lib/siyuan/publish-helper.js
@@ -190,8 +190,6 @@ const initPublishHelper = () => {
           window.terwer={};
           window.terwer.pageId="${newWinPageId}";
           window.terwer.dataDir="${dataDir}";
-          window.terwer.picgoExtension = require("${dataDir}/widgets/sy-post-publisher/lib/picgo/picgo.js").default;
-          window.terwer.picgoExtension.activate("${dataDir}/widgets/sy-post-publisher/lib/picgo/picgo.cfg.json");
           window.terwer.ip = "${ipv4}";
           window.terwer.currentWindowId = ${currentWindowId};
           </script>`
@@ -236,7 +234,7 @@ const initPublishHelper = () => {
         (response) => {
           window.siyuan.printWin.loadURL(response.data.url)
           // 打开开发者工具
-          // window.siyuan.printWin.webContents.openDevTools()
+          window.siyuan.printWin.webContents.openDevTools()
         }
       )
     })