Skip to content

Commit

Permalink
feat: 新版挂件-优化发布配置
Browse files Browse the repository at this point in the history
  • Loading branch information
@terwer
terwer committed Jul 10, 2023
1 parent 7729d99 commit b93112b
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 66 deletions.
1 change: 1 addition & 0 deletions components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ declare module '@vue/runtime-core' {
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
Expand Down
130 changes: 88 additions & 42 deletions src/components/set/PublishSetting.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@
<script setup lang="ts">
import { onMounted, reactive } from "vue"
import { useVueI18n } from "~/src/composables/useVueI18n.ts"
import { ElementPlus } from "@element-plus/icons-vue"
import { ElementPlus, Tools } from "@element-plus/icons-vue"
import { useSettingStore } from "~/src/stores/useSettingStore.ts"
import { SypConfig } from "~/syp.config.ts"
import { createAppLogger } from "~/src/utils/appLogger.ts"
import { JsonUtil } from "zhi-common"
import { DynamicConfig, DynamicJsonCfg } from "~/src/components/set/publish/platform/dynamicConfig.ts"
import { DynamicConfig, DynamicJsonCfg, PlatformType } from "~/src/components/set/publish/platform/dynamicConfig.ts"
import { DYNAMIC_CONFIG_KEY } from "~/src/utils/constants.ts"
import { useRouter } from "vue-router"
Expand All @@ -47,14 +47,17 @@ const formData = reactive({
setting: {} as typeof SypConfig,
showPlatformList: false,
showBundledList: false,
platformTypeList: [
{
type: t("setting.platform.universal"),
type: PlatformType.Common,
title: t("setting.platform.universal"),
img: "./images/universal.webp",
description: t("setting.platform.universal.desc"),
},
{
type: t("setting.platform.wordpress"),
type: PlatformType.Wordpress,
title: t("setting.platform.wordpress"),
img: "./images/wordpress-logo.svg",
description: t("setting.platform.wordpress.desc"),
},
Expand All @@ -66,9 +69,11 @@ const formData = reactive({
// methods
const handleShowPlatform = () => {
formData.showPlatformList = true
formData.showBundledList = true
}
const handleHidePlatform = () => {
formData.showPlatformList = false
formData.showBundledList = false
}
const handleAddPlatformStep = () => {
Expand All @@ -86,6 +91,13 @@ const initPage = async () => {
const dynJsonCfg = JsonUtil.safeParse<DynamicJsonCfg>(formData.setting[DYNAMIC_CONFIG_KEY], {} as DynamicJsonCfg)
// 默认展示通用平台
formData.dynamicConfigArray = dynJsonCfg.totalCfg || []
// test start
for (let i = 0; i < 20; i++) {
var newCfg = dynJsonCfg.totalCfg[0]
newCfg.platformKey = newCfg.platformKey + i
formData.dynamicConfigArray.push(newCfg)
}
// test end
logger.debug("dynamic init page=>", formData.dynamicConfigArray)
}
Expand All @@ -100,32 +112,25 @@ onMounted(async () => {
<el-row :gutter="20" class="row-item">
<el-col :span="2" class="col-item">
<el-menu class="publish-setting-left-menu">
<el-menu-item class="left-menu-item menu-item-selected" @click="handleHidePlatform">
<template #title>
<el-text type="info"> {{ t("service.tab.publish.setting") }} </el-text>
</template>
</el-menu-item>
<el-menu-item
v-for="dc in formData.dynamicConfigArray"
:key="dc.platformKey"
class="left-menu-item"
@click="handleSinglePlatformSetting(dc.platformKey)"
:class="formData.showPlatformList ? 'left-menu-item' : 'left-menu-item menu-item-selected'"
@click="handleHidePlatform"
>
<template #title>
<el-icon>
<ElementPlus />
</el-icon>
{{ dc.platformName }}
<span> {{ t("service.tab.publish.setting") }} </span>
</template>
</el-menu-item>
<el-menu-item class="left-menu-item" @click="handleShowPlatform">
<el-menu-item
:class="!formData.showPlatformList ? 'left-menu-item' : 'left-menu-item menu-item-selected'"
@click="handleShowPlatform"
>
<template #title>
<el-text type="primary"> + {{ t("setting.platform.add") }} </el-text>
<span> + {{ t("setting.platform.add") }} </span>
</template>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="18" class="col-item">
<el-col :span="formData.showBundledList ? 18 : 22" class="col-item">
<div class="publish-setting-right-content">
<div v-if="formData.showPlatformList">
<el-row :gutter="20" class="row-item">
Expand All @@ -139,7 +144,7 @@ onMounted(async () => {
<el-card class="platform-right-card">
<img :src="p.img" class="image" alt="" />
<div class="right-card-text">
<span>{{ p.type }}</span>
<span>{{ p.title }}</span>
<div>
<div class="text-desc">{{ p.description }}</div>
<div class="add-btn">
Expand All @@ -152,36 +157,52 @@ onMounted(async () => {
</el-row>
</div>
<div v-else>
<div class="publish-setting">
<el-row>
<el-col>
<div class="right-setting-tips">
在这里可以进行发布配置，直接点击左侧菜单或者下列图标均可进行配置。
</div>
<div class="right-setting-tips">
<el-text type="danger">如需新增平台，直接点击左侧 + 按钮即可。</el-text>
</div>
<div class="right-setting-tips">
目前支持 网页授权 和 API 授权两种方式，API授权 复杂点但是相对稳定，网页授权
简单但是可能会失效。惊喜：网页授权模式 100% 兼容
<a href="https://www.wechatsync.com/" target="_blank">wechatsync</a>， 没想到吧~
<div class="publish-right-setting">
<el-row :gutter="20" class="platform-list">
<el-col
v-for="platform in formData.dynamicConfigArray"
:key="platform.platformKey"
:span="6"
class="platform-item-box"
>
<div class="platform-item">
<img src="/images/wordpress-logo.svg" height="45" alt="WordPress" />
<div class="item-right">
<div class="text">{{ platform.platformName }}</div>
<div class="actions">
<el-switch size="small" class="action-btn"></el-switch>
<el-text class="action-btn" @click="handleSinglePlatformSetting(platform.platformKey)">
<el-icon>
<Tools />
</el-icon>
</el-text>
</div>
</div>
</div>
<div class="right-setting-tips">如需兼容其他平台，请<a href="#" class="ml-1">联系我</a></div>
</el-col>
</el-row>
<el-row :gutter="20" class="platform-list">
<el-col v-for="platform in formData.dynamicConfigArray" :key="platform.platformKey" :span="6">
<div class="platform-item" @click="handleSinglePlatformSetting(platform.platformKey)">
<img src="/images/wordpress-logo.svg" height="45" alt="WordPress" />
<span class="text">{{ platform.platformType }}</span>
<el-row>
<el-col>
<div class="right-setting-tips">
<div class="el-alert el-alert--warning is-light" role="alert">
<div class="el-alert__content">
<div class="el-alert__title">
<div>{{ t("setting.platform.right.tips0") }}</div>
<div>{{ t("setting.platform.right.tips1") }}</div>
<div>{{ t("setting.platform.right.tips2") }}</div>
<div>{{ t("setting.platform.right.tips3") }}</div>
<div>{{ t("setting.platform.right.tips4") }}</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col :span="4" class="col-item">
<el-col v-if="formData.showBundledList" :span="4" class="col-item">
<el-scrollbar class="platform-define">
<div>
<el-text class="platform-title" type="primary"> 请点击图标快速新增预置的发布服务 </el-text>
Expand Down Expand Up @@ -236,14 +257,39 @@ onMounted(async () => {
.left-menu-item
justify-content center
.menu-item-selected
background var(--el-color-primary-light-7)
color var(--el-fill-color-blank)
background var(--el-color-primary)
.publish-setting-right-content
.right-setting-tips
text-align left
padding-left 10px
padding-right 10px
.publish-right-setting
.platform-list
margin-bottom 10px
margin-left 6px !important
margin-right 6px !important
.platform-item-box
margin-bottom 16px
text-align left
.platform-item
img
width 25px
height 25px
.item-right
display inline-block
margin-left 10px
text-align left
.text
color var(--el-button-text-color)
font-size 12px
margin-bottom 2px
.actions
.action-btn
margin-right 10px
.row-item
margin 0 !important
padding 0 !important
Expand Down
25 changes: 1 addition & 24 deletions src/layouts/default/DefaultFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,9 @@
{{ t("blog.newwin.open") }}
</span>

<span class="text">.</span>
<span class="text s-dark" @click="openGeneralSetting()">
{{ t("setting.blog.index") }}
</span>

<!--
-----------------------------------------------------------------------------
-->
<!-- 思源地址设置弹窗 -->

<!-- 通用设置弹窗 -->
<el-dialog v-model="generalSettingFormVisible" :title="t('setting.blog.index')">
<set-index />
</el-dialog>
</div>
</div>
</div>
Expand All @@ -76,7 +65,6 @@ import { ref } from "vue"
import { version } from "../../../package.json"
import { createAppLogger } from "~/src/utils/appLogger.ts"
import { useVueI18n } from "~/src/composables/useVueI18n.ts"
import SetIndex from "~/src/components/set/SetIndex.vue"
import { DateUtil } from "zhi-common"
import { useSiyuanDevice } from "~/src/composables/useSiyuanDevice.ts"
import { useRouter } from "vue-router"
Expand All @@ -90,9 +78,6 @@ const toggleDark = useToggle(isDark)
const { isInChromeExtension } = useSiyuanDevice()
const isChromeExtension = isInChromeExtension()
const transportFormVisible = ref(false)
const generalSettingFormVisible = ref(false)
const v = ref(version)
const nowYear = DateUtil.nowYear()
const router = useRouter()
Expand All @@ -116,14 +101,6 @@ const newWin = () => {
const url = rt.getURL("/index.html#/")
window.open(url)
}
const openTransportSetting = () => {
transportFormVisible.value = true
}
const openGeneralSetting = () => {
generalSettingFormVisible.value = true
}
</script>

<style scoped>
Expand All @@ -146,4 +123,4 @@ const openGeneralSetting = () => {
.middleware-tip {
text-align: left;
}
</style>
</style>
7 changes: 7 additions & 0 deletions src/locales/en_US.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,4 +489,11 @@ export default {
"setting.platform.wordpress": "WordPress",
"setting.platform.wordpress.desc":
"WordPress is a free and open source blog software and Content management system based on PHP and MySQL. WordPress has a plugin architecture and template system. As of April 2018, over 30.6% of the top 10 million websites used WordPress. WordPress is the most popular website Content management system. Approximately 40% of global websites (7500 million) are built using WordPress. WordPress is currently the most popular blog system on the Internet. WordPress stands out in the most famous stage of online publishing. Today, it is used on over 70 million sites.",
"setting.platform.right.tips0": "Special Notes:",
"setting.platform.right.tips1":
"1. You can publish the configuration here, and you can directly click the menu or the following icons to configure it.",
"setting.platform.right.tips2": "2. If you need to add a new platform, click the left button directly.",
"setting.platform.right.tips3":
"3. At present, we support webpage authorization and API authorization. The complex points of API authorization are relatively stable. The webpage authorization is simple but may fail. Surprise: Webpage authorization mode 100 compatible",
"setting.platform.right.tips4": "4. If you need to be compatible with other platforms, please contact me",
}
6 changes: 6 additions & 0 deletions src/locales/zh_CN.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,4 +477,10 @@ export default {
"setting.platform.wordpress": "WordPress",
"setting.platform.wordpress.desc":
"WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。它具有插件架构和模板系统，同时也是最受欢迎的网站内容管理系统。点击右侧图标快速添加，或者点击下方按钮自定义添加",
"setting.platform.right.tips0": "特别提示：",
"setting.platform.right.tips1": "1、在这里可以进行发布配置，直接点击 [左侧菜单] 或者 [列表图标] 均可进行配置。",
"setting.platform.right.tips2": "2、如需新增平台，直接点击左侧 + 按钮即可。",
"setting.platform.right.tips3":
"3、目前支持 网页授权 和 API 授权两种方式，API授权 复杂点但是相对稳定，网页授权简单但是可能会失效。惊喜：网页授权模式 100% 兼容",
"setting.platform.right.tips4": "4、如需兼容其他平台，请联系我",
}

0 comments on commit b93112b

Please sign in to comment.