Skip to content

Commit

Permalink
feat: PicGO 插件第一版-优化页面跳转与路由
Browse files Browse the repository at this point in the history
  • Loading branch information
@terwer
terwer committed Jun 14, 2023
1 parent 19f8570 commit 815ebb0
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 73 deletions.
5 changes: 0 additions & 5 deletions src/components/PicGoIndex.vue
View file
Expand Up @@ -200,11 +200,6 @@ logger.info("This is picgo index page")
<img w-full :src="picgoManageData.dialogImageUrl" alt="Preview Image" class="img-big-preview" />
</el-dialog>

<!-- Picgo设置 -->
<el-dialog v-model="picgoUploadData.dialogPicgoSettingFormVisible" :title="t('picgo.pic.setting')">
<pic-go-setting />
</el-dialog>

<!-- 日志显示 -->
<div v-if="picgoCommonData.showDebugMsg" class="log-msg">
<el-input v-model="picgoCommonData.loggerMsg" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" />
Expand Down
151 changes: 94 additions & 57 deletions src/components/PicgoSetting.vue
View file
Expand Up @@ -28,82 +28,106 @@ import { onBeforeMount, ref } from "vue"
import picgoUtil from "~/src/service/picgoUtil.js"
import { isInSiyuanOrSiyuanNewWin } from "~/src/utils/utils.ts"
import { useVueI18n } from "~/src/composables/useVueI18n.ts"
import { ArrowLeft } from "@element-plus/icons-vue"
import { useRoute, useRouter } from "vue-router"
const { t } = useVueI18n()
const router = useRouter()
const { query } = useRoute()
const isReload = ref(false)
const picgoVersion = ref("")
const isSiyuanOrSiyuanNewWin = isInSiyuanOrSiyuanNewWin()
const showBack = ref(query.showBack === "true")
const picgoSettingTabChange = () => {
isReload.value = !isReload.value
}
const onBack = () => {
router.back()
}
onBeforeMount(() => {
picgoVersion.value = picgoUtil.getPicgoVersion()
})
</script>

<template>
<div v-if="isSiyuanOrSiyuanNewWin" style="padding-right: 20px">
<!-- PicGO配置 -->
<el-tabs type="border-card" @tab-click="picgoSettingTabChange">
<el-tab-pane :label="t('setting.picgo.picbed')">
<!-- 图床类型 -->
<picbed-setting :is-reload="isReload" />
</el-tab-pane>
<el-tab-pane :label="t('setting.picgo.picgo')">
<div id="page-body">
<div v-if="showBack" class="page-head">
<el-page-header :icon="ArrowLeft" title="返回" @click="onBack">
<template #content>
<div class="flex items-center">
<span class="text-large font-600 mr-3">Picgo 设置</span>
</div>
</template>
</el-page-header>
</div>

<div class="page-content-box">
<div v-if="isSiyuanOrSiyuanNewWin" style="padding-right: 20px">
<!-- PicGO配置 -->
<picgo-config-setting />
</el-tab-pane>
<el-tab-pane :label="t('setting.picgo.plugin')">
<!-- PicGO插件配置 -->
<picgo-plugin-setting />
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" @tab-click="picgoSettingTabChange">
<el-tab-pane :label="t('setting.picgo.picbed')">
<!-- 图床类型 -->
<picbed-setting :is-reload="isReload" />
</el-tab-pane>
<el-tab-pane :label="t('setting.picgo.picgo')">
<!-- PicGO配置 -->
<picgo-config-setting />
</el-tab-pane>
<el-tab-pane :label="t('setting.picgo.plugin')">
<!-- PicGO插件配置 -->
<picgo-plugin-setting />
</el-tab-pane>
</el-tabs>

<blockquote class="picgo-setting-tip">
<div>
{{ t("picgo.siyuan.tip") }} 。 当前系统默认的 PicGO 配置文件为：
<pre style="display: inline-block"><code>{{ picgoUtil.getPicgoCfgPath() }}</code></pre>
。 多个图床中，只能有一个图床设置为默认。默认图床会在上传的时候自动生效。从 0.7.0+
开始，单个图床支持多份配置切换，每个图床只能有一个选中的配置生效。
{{ 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
>
。
<blockquote class="picgo-setting-tip">
<div>
{{ t("picgo.siyuan.tip") }} 。 当前系统默认的 PicGO 配置文件为：
<pre style="display: inline-block"><code>{{ picgoUtil.getPicgoCfgPath() }}</code></pre>
。 多个图床中，只能有一个图床设置为默认。默认图床会在上传的时候自动生效。从 0.7.0+
开始，单个图床支持多份配置切换，每个图床只能有一个选中的配置生效。
{{ 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>
<div class="version-tip">
当前PicGo版本为
<a href="https://github.com/terwer/Electron-PicGo-Core" target="_blank">electron-picgo</a>
v{{ picgoVersion }} ， 对 Electron 环境进行了更好的适配 ，由
<a href="https://github.com/terwer" target="_blank">terwer</a> 负责维护 。感谢原始
<a href="https://github.com/PicGo/PicGo-Core" target="_blank">PicGo-Core</a>
项目。
<p>特别提示：picgo插件未经过全量测试，不保证所有插件都能运行，目前已经测试可用的插件如下：</p>
<p>
<a href="https://github.com/terwer/picgo-plugin-watermark-elec">picgo-plugin-watermark-elec</a>
搜索关键词：watermark-elec
</p>
<p>
<a href="https://github.com/wayjam/picgo-plugin-s3">picgo-plugin-s3</a>
搜索关键词：s3
</p>
<p>
<a href="https://github.com/Herbertzz/picgo-plugin-minio">picgo-plugin-minio</a>
搜索关键词：minio
</p>
</div>
</div>
<div v-else>
<div class="picgo-browser-tip">
<p>{{ t("picgo.chrome.tip") }} 。</p>
<p>{{ t("picgo.pic.setting.no.tip") }} 。</p>
</div>
</div>
</blockquote>
<div class="version-tip">
当前PicGo版本为
<a href="https://github.com/terwer/Electron-PicGo-Core" target="_blank">electron-picgo</a>
v{{ picgoVersion }} ， 对 Electron 环境进行了更好的适配 ，由
<a href="https://github.com/terwer" target="_blank">terwer</a> 负责维护 。感谢原始
<a href="https://github.com/PicGo/PicGo-Core" target="_blank">PicGo-Core</a>
项目。
<p>特别提示：picgo插件未经过全量测试，不保证所有插件都能运行，目前已经测试可用的插件如下：</p>
<p>
<a href="https://github.com/terwer/picgo-plugin-watermark-elec">picgo-plugin-watermark-elec</a>
搜索关键词：watermark-elec
</p>
<p>
<a href="https://github.com/wayjam/picgo-plugin-s3">picgo-plugin-s3</a>
搜索关键词：s3
</p>
<p>
<a href="https://github.com/Herbertzz/picgo-plugin-minio">picgo-plugin-minio</a>
搜索关键词：minio
</p>
</div>
</div>
<div v-else>
<div class="picgo-browser-tip">
<p>{{ t("picgo.chrome.tip") }} 。</p>
<p>{{ t("picgo.pic.setting.no.tip") }} 。</p>
</div>
</div>
</template>
Expand All @@ -128,4 +152,17 @@ onBeforeMount(() => {
.version-tip {
margin: 10px 0;
}
#page-body {
min-width: 600px !important;
margin-top: 20px;
margin-bottom: 16px;
}
.page-head{
margin-bottom: 16px;
margin-left: 20px;
}
.page-content-box {
padding: 0 20px;
}
</style>
18 changes: 7 additions & 11 deletions src/composables/picgo/usePicgoUpload.ts
View file
Expand Up @@ -29,6 +29,7 @@ import { useVueI18n } from "~/src/composables/useVueI18n.ts"
import { createAppLogger } from "~/src/utils/appLogger.ts"
import { ImageItem } from "~/src/models/imageItem.ts"
import { PicgoApi } from "~/src/service/picgoApi.js"
import { useRouter } from "vue-router"

/**
* Picgo上传组件
Expand All @@ -37,12 +38,11 @@ export const usePicgoUpload = (props, deps, refs) => {
// private data
const logger = createAppLogger("picgo-upload")
const { t } = useVueI18n()
const router = useRouter()
const bundledPicgoApi = new PicgoApi()

// public data
const picgoUploadData = reactive({
dialogPicgoSettingFormVisible: false,
})
const picgoUploadData = reactive({})

// deps
const picgoCommonMethods = deps.picgoCommonMethods
Expand Down Expand Up @@ -84,21 +84,17 @@ export const usePicgoUpload = (props, deps, refs) => {
// public methods
const picgoUploadMethods = {
handlePicgoSetting: async () => {
if (picgoCommonData.showDebugMsg) {
picgoUploadData.dialogPicgoSettingFormVisible = true
return
}

if (!picgoCommonData.isSiyuanOrSiyuanNewWin) {
await ElMessageBox.alert(t("picgo.pic.setting.no.tip"), t("main.opt.tip"), {
confirmButtonText: t("main.opt.ok"),
})
return
}

alert(picgoUploadData.dialogPicgoSettingFormVisible)

picgoUploadData.dialogPicgoSettingFormVisible = true
await router.push({
path: "/setting",
query: { showBack: "true" },
})
},
bindFileControl: () => {
refSelectedFiles.value.click()
Expand Down

0 comments on commit 815ebb0

Please sign in to comment.