Skip to content

Commit

Permalink
feat: 新版挂件-通用平台定义
Browse files Browse the repository at this point in the history
  • Loading branch information
@terwer
terwer committed Jul 22, 2023
1 parent e5bf02f commit 9bf2054
Show file tree
Hide file tree
Showing 8 changed files with 235 additions and 89 deletions.
4 changes: 0 additions & 4 deletions src/assets/style.css
View file
Expand Up @@ -123,10 +123,6 @@ code {
background-color: #ffffff;
}

.top-version-tip {
margin: 10px 0 !important;
}

.el-header {
--el-header-padding: 0 20px;
--el-header-height: 20px !important;
Expand Down
2 changes: 1 addition & 1 deletion src/components/publish/form/PublishTips.vue
View file
Expand Up @@ -27,7 +27,7 @@

<template>
<div class="publish-tips">
<el-alert :closable="false" title="多平台文章分发" class="top-version-tip" type="info" />
<el-alert :closable="false" title="多平台文章分发" class="top-tip" type="info" />
</div>
</template>

Expand Down
46 changes: 34 additions & 12 deletions src/components/set/PublishSetting.vue
View file
Expand Up @@ -26,7 +26,7 @@
<script setup lang="ts">
import { markRaw, onMounted, reactive } from "vue"
import { useVueI18n } from "~/src/composables/useVueI18n.ts"
import { Tools, Delete } from "@element-plus/icons-vue"
import { Delete, 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"
Expand Down Expand Up @@ -55,18 +55,18 @@ const { platformTypeList } = usePlatformDefine()
const formData = reactive({
setting: {} as typeof SypConfig,
showPlatformList: false,
showAdd: false,
platformTypeList: platformTypeList,
dynamicConfigArray: [] as DynamicConfig[],
})
// methods
const handleShowPlatform = () => {
formData.showPlatformList = true
formData.showAdd = true
}
const handleHidePlatform = () => {
formData.showPlatformList = false
formData.showAdd = false
}
const handleAddPlatformStep = (type: PlatformType) => {
Expand Down Expand Up @@ -133,15 +133,15 @@ onMounted(async () => {
<el-col :span="2" class="col-item">
<el-menu class="publish-setting-left-menu">
<el-menu-item
:class="formData.showPlatformList ? 'left-menu-item' : 'left-menu-item menu-item-selected'"
:class="formData.showAdd ? 'left-menu-item' : 'left-menu-item menu-item-selected'"
@click="handleHidePlatform"
>
<template #title>
<span> {{ t("service.tab.publish.setting") }} </span>
</template>
</el-menu-item>
<el-menu-item
:class="!formData.showPlatformList ? 'left-menu-item' : 'left-menu-item menu-item-selected'"
:class="!formData.showAdd ? 'left-menu-item' : 'left-menu-item menu-item-selected'"
@click="handleShowPlatform"
>
<template #title>
Expand All @@ -152,7 +152,7 @@ onMounted(async () => {
</el-col>
<el-col :span="22" class="col-item">
<div class="publish-setting-right-content">
<div v-if="formData.showPlatformList">
<div v-if="formData.showAdd">
<el-row :gutter="20" class="row-item">
<el-col
v-for="p in formData.platformTypeList"
Expand All @@ -176,6 +176,9 @@ onMounted(async () => {
</el-col>
</el-row>
</div>
<div v-else-if="formData.dynamicConfigArray.length === 0">
<el-alert class="no-tip" type="error" :title="t('platform.must.select.one')"></el-alert>
</div>
<div v-else>
<div class="publish-right-setting">
<el-row :gutter="20" class="platform-list">
Expand All @@ -186,7 +189,9 @@ onMounted(async () => {
class="platform-item-box"
>
<div class="platform-item">
<img src="/images/wordpress-logo.svg" height="45" alt="WordPress" />
<el-icon class="item-left-icon">
<span class="item-icon" v-html="platform.platformIcon"></span>
</el-icon>
<div class="item-right">
<div class="text">
<el-badge
Expand Down Expand Up @@ -216,12 +221,17 @@ onMounted(async () => {
inactive-text="未启用"
></el-switch>
<el-text
v-if="platform.isEnabled && platform.authMode === AuthMode.API"
class="action-btn action-setting"
@click="handleSinglePlatformSetting(platform.platformKey)"
>
<el-icon> <Tools /> </el-icon>设置
</el-text>
<el-text class="action-btn action-del" @click="handleSinglePlatformDelete(platform)">
<el-text
v-if="!platform.isEnabled"
class="action-btn action-del"
@click="handleSinglePlatformDelete(platform)"
>
<el-icon> <Delete /> </el-icon>删除
</el-text>
</div>
Expand Down Expand Up @@ -264,6 +274,8 @@ onMounted(async () => {
</template>

<style scoped lang="stylus">
$icon_size = 32px
.publish-setting-body
margin-left 10px
margin-top 10px
Expand All @@ -289,6 +301,10 @@ html[class="dark"]
.tips-form
font-size 12px
margin-top 14px
.no-tip
margin 0 10px
padding-left 0
width calc(100% - 30px)
.publish-right-setting
.platform-list
Expand All @@ -299,9 +315,15 @@ html[class="dark"]
margin-bottom 28px
text-align left
.platform-item
img
width 25px
height 25px
.item-left-icon
//color var(--el-color-primary)
width $icon_size
height $icon_size
margin-top -14px
vertical-align middle
:deep(.item-icon svg)
width $icon_size
height $icon_size
.item-right
display inline-block
margin-left 10px
Expand Down
155 changes: 138 additions & 17 deletions src/components/set/publish/PlatformAddForm.vue
View file
Expand Up @@ -28,14 +28,26 @@ import { reactive, ref } from "vue"
import {
AuthMode,
DynamicConfig,
DynamicJsonCfg,
getDynSwitchKey,
getNewPlatformKey,
getSubtypeList,
isDynamicKeyExists,
PlatformType,
setDynamicJsonCfg,
SubPlatformType,
} from "~/src/components/set/publish/platform/dynamicConfig.ts"
import { useVueI18n } from "~/src/composables/useVueI18n.ts"
import { createAppLogger } from "~/src/utils/appLogger.ts"
import { useRoute, useRouter } from "vue-router"
import BackPage from "~/src/components/common/BackPage.vue"
import { svgIcons } from "~/src/utils/svgIcons.ts"
import { usePlatformDefine } from "~/src/composables/usePlatformDefine.ts"
import { JsonUtil } from "zhi-common"
import { DYNAMIC_CONFIG_KEY } from "~/src/utils/constants.ts"
import { useSettingStore } from "~/src/stores/useSettingStore.ts"
import { ElMessage, FormRules } from "element-plus"
import { SypConfig } from "~/syp.config.ts"
const logger = createAppLogger("platform-add-form")
Expand All @@ -44,25 +56,56 @@ const { t } = useVueI18n()
const router = useRouter()
const route = useRoute()
const { query } = useRoute()
const { getPrePlatform } = usePlatformDefine()
const { getSetting, updateSetting, checkKeyExists } = useSettingStore()
// datas
const params = reactive(route.params)
const ptype = params.type as PlatformType
const formRef = ref()
const formData = reactive({
setting: {} as typeof SypConfig,
ptype: ptype,
subtype: SubPlatformType.NONE,
dynCfg: new DynamicConfig(ptype, getNewPlatformKey(ptype, SubPlatformType.NONE), "None-1"),
subtype: undefined,
subtypeOptions: [],
authMode: AuthMode.API,
isEnabled: false,
})
dynCfg: new DynamicConfig(ptype, getNewPlatformKey(ptype, undefined), "None-1"),
const handleSubPlatformTypeChange = () => {}
dynamicConfigArray: [] as DynamicConfig[],
})
const formValidateRules = reactive<FormRules>({
platformName: [
{
required: true,
message: () => t("form.validate.name.required"),
},
],
authMode: [
{
required: true,
message: () => t("form.validate.name.required"),
},
],
})
const validateForm = (formEl) => {
return false
if (!formData.subtype) {
ElMessage.error("请选择子平台类型")
return false
}
// 平台key必须唯一
const pkey = formData.dynCfg.platformKey
// 保证开关变量key不重复
const switchKey = "switch-" + pkey
const postidKey = "custom-" + pkey + "-post-id"
// 保证文章绑定id的key不重复
if (checkKeyExists(pkey) || checkKeyExists(switchKey) || checkKeyExists(postidKey)) {
ElMessage.error(t("dynamic.platform.opt.key.exist"))
return false
}
return true
}
const submitForm = async (formEl) => {
if (!formEl) return
Expand All @@ -81,33 +124,107 @@ const submitForm = async (formEl) => {
if (!result) {
return
}
const newCfg = formData.dynCfg
formData.dynamicConfigArray.push(newCfg)
// 转换格式并保存
const dynJsonCfg = setDynamicJsonCfg(formData.dynamicConfigArray)
formData.setting[DYNAMIC_CONFIG_KEY] = JSON.stringify(dynJsonCfg)
const switchKey = getDynSwitchKey(newCfg.platformKey)
// 默认启用禁用
formData.setting[switchKey] = String(newCfg.isEnabled)
// 初始化一个空配置
formData.setting[newCfg.platformKey] = "{}"
await updateSetting(formData.setting)
// 重新加载列表
ElMessage.success(t("main.opt.success"))
// 返回
await router.push({
path: `/setting/publish`,
})
}
const handleSubPlatformTypeChange = async () => {
await initForm(formData.ptype, formData.subtype)
}
const initForm = async (ptype: PlatformType, subtype: SubPlatformType) => {
const pkey = query.key as string
formData.setting = await getSetting()
const dynJsonCfg = JsonUtil.safeParse<DynamicJsonCfg>(formData.setting[DYNAMIC_CONFIG_KEY], {} as DynamicJsonCfg)
formData.dynamicConfigArray = dynJsonCfg.totalCfg || []
if (pkey && subtype) {
formData.subtype = subtype
// 如果pkey对应的配置存在，初始化新的
const pkeyExist = isDynamicKeyExists(formData.dynamicConfigArray, pkey)
if (pkeyExist) {
const newKey = getNewPlatformKey(ptype, subtype)
formData.dynCfg = new DynamicConfig(ptype, newKey, newKey, subtype, svgIcons.iconEPPlus)
logger.debug("pkey already exists, initialize the new one")
} else {
// 否则查询
formData.dynCfg = getPrePlatform(pkey)
logger.debug("Initialized via pkey")
}
} else if (subtype) {
// 子类型初始化
formData.subtype = subtype
const newKey = getNewPlatformKey(ptype, subtype)
formData.dynCfg = new DynamicConfig(ptype, newKey, newKey, subtype, svgIcons.iconEPPlus)
logger.debug("Initialized by subtype")
} else {
// 需要选择子类型
formData.subtypeOptions = getSubtypeList(ptype)
const newKey = getNewPlatformKey(ptype, subtype)
formData.dynCfg = new DynamicConfig(ptype, newKey, newKey, subtype, svgIcons.iconEPPlus)
logger.debug("Initialize by selecting a subtype")
}
}
const initPage = async () => {
const ptype = params.type as PlatformType
const subtype = query.sub as SubPlatformType
await initForm(ptype, subtype)
}
initPage()
</script>

<template>
<back-page :title="'新增自定义平台 - ' + params.type">
<el-form ref="formRef" label-width="165px" :model="formData.dynCfg">
<el-alert :title="'当前平台类型为 ' + params.type" type="info" :closable="false" />
<back-page :title="'新增自定义平台 - ' + ptype">
<el-form ref="formRef" label-width="100px" :model="formData.dynCfg" :rules="formValidateRules">
<el-alert class="top-tip" :title="'当前平台类型为=>' + ptype" type="warning" :closable="false" />
<!-- 子平台名称 -->
<el-form-item v-if="formData.subtypeOptions.length > 0">
<el-select v-model="formData.subtype" class="m-2" placeholder="Select" @change="handleSubPlatformTypeChange">
<el-form-item v-if="formData.subtypeOptions.length > 0" label="子平台类型">
<el-select v-model="formData.subtype" class="m-2" placeholder="请选择" @change="handleSubPlatformTypeChange">
<el-option v-for="item in formData.subtypeOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-alert v-else class="top-tip" :title="'子平台类型为=>' + formData.subtype" type="warning" :closable="false" />
<!-- 平台key -->
<el-form-item v-if="false" :label="formData.ptype + t('dynamic.platform.key')" prop="platformKey">
<el-form-item :label="t('dynamic.platform.key')" prop="platformKey">
{{ formData.dynCfg.platformKey }}
</el-form-item>
<!-- 是否启用 -->
<el-form-item label="平台名称" prop="platformName">
<el-input v-model="formData.dynCfg.platformName" />
</el-form-item>
<!-- 授权方式 -->
<el-form-item label="授权方式">
<el-select v-model="formData.authMode">
<el-form-item label="授权方式" prop="authMode">
<el-select v-model="formData.dynCfg.authMode" placeholder="请选择">
<el-option :value="AuthMode.API" label="API授权" />
<el-option :value="AuthMode.WEBSITE" label="网页授权" />
</el-select>
</el-form-item>
<!-- 是否启用 -->
<el-form-item label="是否启用">
<el-switch v-model="formData.isEnabled" />
<el-switch v-model="formData.dynCfg.isEnabled" />
</el-form-item>

<el-form-item>
Expand All @@ -117,4 +234,8 @@ const submitForm = async (formEl) => {
</back-page>
</template>

<style scoped lang="stylus"></style>
<style scoped lang="stylus">
.top-tip
margin 10px 0
padding-left 0
</style>

0 comments on commit 9bf2054

Please sign in to comment.