feat: 新版挂件-通用平台管理

terwer · Jul 24, 2023 · 277afc8 · 277afc8
1 parent 9bf2054
commit 277afc8
Show file tree

Hide file tree

Showing 8 changed files with 395 additions and 22 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -182,4 +182,4 @@ code {
 }
 .pic-manage-btn svg {
   margin-right: 5px;
-}
+}
diff --git a/components.d.ts b/components.d.ts
@@ -45,6 +45,7 @@ declare module '@vue/runtime-core' {
     MetaweblogSetting: typeof import('./src/components/set/publish/singleplatform/MetaweblogSetting.vue')['default']
     PlatformAddForm: typeof import('./src/components/set/publish/PlatformAddForm.vue')['default']
     PlatformQuickAdd: typeof import('./src/components/set/publish/PlatformQuickAdd.vue')['default']
+    PlatformUpdateForm: typeof import('./src/components/set/publish/PlatformUpdateForm.vue')['default']
     PublishIndex: typeof import('./src/components/publish/PublishIndex.vue')['default']
     PublishPlatform: typeof import('./src/components/publish/form/PublishPlatform.vue')['default']
     PublishSetting: typeof import('./src/components/set/PublishSetting.vue')['default']

diff --git a/src/components/set/PublishSetting.vue b/src/components/set/PublishSetting.vue
@@ -33,9 +33,13 @@ import { createAppLogger } from "~/src/utils/appLogger.ts"
 import { JsonUtil } from "zhi-common"
 import {
   AuthMode,
+  deletePlatformByKey,
   DynamicConfig,
   DynamicJsonCfg,
+  getDynSwitchKey,
   PlatformType,
+  replacePlatformByKey,
+  setDynamicJsonCfg,
 } from "~/src/components/set/publish/platform/dynamicConfig.ts"
 import { DYNAMIC_CONFIG_KEY } from "~/src/utils/constants.ts"
 import { useRouter } from "vue-router"
@@ -98,17 +102,43 @@ const handleSinglePlatformDelete = (cfg: DynamicConfig) => {
     confirmButtonText: t("main.opt.ok"),
     cancelButtonText: t("main.opt.cancel"),
   })
-    .then((action) => {
-      ElMessage({
-        type: "info",
-        message: `action: ${action}`,
-      })
+    .then(async () => {
+      formData.dynamicConfigArray = deletePlatformByKey(formData.dynamicConfigArray, cfg.platformKey)
+      // 替换删除后的平台配置
+      const dynJsonCfg = setDynamicJsonCfg(formData.dynamicConfigArray)
+      formData.setting[DYNAMIC_CONFIG_KEY] = JSON.stringify(dynJsonCfg)
+      // 删除状态
+      const switchKey = getDynSwitchKey(cfg.platformKey)
+      delete formData.setting[switchKey]
+      // 删除配置
+      delete formData.setting[cfg.platformKey]
+      await updateSetting(formData.setting)
+
+      // 重新加载列表
+      await initPage()
+      ElMessage.success(t("main.opt.success"))
     })
     .catch(() => {})
 }
 
-const handleChangeName = (cfg: DynamicConfig) => {
-  alert("修改平台名称")
+const handleChangePlatformDefine = (cfg: DynamicConfig) => {
+  router.push({
+    path: `/setting/platform/update/${cfg.platformKey}`,
+    query: {
+      showBack: "true",
+    },
+  })
+}
+
+const handlePlatformEnabled = async (cfg: DynamicConfig) => {
+  formData.dynamicConfigArray = replacePlatformByKey(formData.dynamicConfigArray, cfg.platformKey, cfg)
+  // 替换删除后的平台配置
+  const dynJsonCfg = setDynamicJsonCfg(formData.dynamicConfigArray)
+  formData.setting[DYNAMIC_CONFIG_KEY] = JSON.stringify(dynJsonCfg)
+  // 更新状态
+  const switchKey = getDynSwitchKey(cfg.platformKey)
+  formData.setting[switchKey] = cfg.isEnabled
+  await updateSetting(formData.setting)
 }
 
 const initPage = async () => {
@@ -185,7 +215,7 @@ onMounted(async () => {
                 <el-col
                   v-for="platform in formData.dynamicConfigArray"
                   :key="platform.platformKey"
-                  :span="6"
+                  :span="11"
                   class="platform-item-box"
                 >
                   <div class="platform-item">
@@ -200,7 +230,7 @@ onMounted(async () => {
                           :type="platform.isAuth ? 'success' : 'warning'"
                         >
                           <span>{{ platform.platformName }}</span>
-                          <span class="name-edit" @click="handleChangeName(platform)">
+                          <span class="name-edit" @click="handleChangePlatformDefine(platform)">
                             <el-icon> <span v-html="svgIcons.iconIFEdit"></span> </el-icon>
                           </span>
                           <el-text
@@ -219,20 +249,27 @@ onMounted(async () => {
                           class="action-btn action-switch"
                           active-text="已启用"
                           inactive-text="未启用"
+                          @change="handlePlatformEnabled(platform)"
                         ></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-icon>
+                            <Tools />
+                          </el-icon>
+                          设置
                         </el-text>
                         <el-text
                           v-if="!platform.isEnabled"
                           class="action-btn action-del"
                           @click="handleSinglePlatformDelete(platform)"
                         >
-                          <el-icon> <Delete /> </el-icon>删除
+                          <el-icon>
+                            <Delete />
+                          </el-icon>
+                          删除
                         </el-text>
                       </div>
                     </div>
@@ -282,9 +319,11 @@ $icon_size = 32px
 
 .publish-setting-left-menu
   text-align center
+
   .left-menu-item
     justify-content center
     height 36px
+
   .menu-item-selected
     color var(--el-fill-color-blank)
     background var(--el-color-primary)
@@ -298,9 +337,11 @@ html[class="dark"]
     text-align left
     padding-left 10px
     padding-right 10px
+
   .tips-form
     font-size 12px
     margin-top 14px
+
   .no-tip
     margin 0 10px
     padding-left 0
@@ -311,76 +352,95 @@ html[class="dark"]
     margin-bottom 10px
     margin-left 6px !important
     margin-right 6px !important
+
     .platform-item-box
       margin-bottom 28px
       text-align left
+
       .platform-item
         .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
           text-align left
+
           .text
             color var(--el-button-text-color)
             font-size 12px
             margin-bottom 2px
+
             .auth-mode-text
               font-size 12px
               margin-left 16px
+
           .name-edit
             color var(--el-color-primary)
             margin-left 4px
             cursor pointer
+
           .actions
             .action-btn
               margin-right 10px
+
             .action-switch
               font-size 12px
+
             .action-setting
               font-size 12px
               cursor pointer
+
               &:hover
                 color var(--el-color-primary)
+
             .action-del
               color red
               font-size 12px
               cursor pointer
+
               &:hover
                 color var(--el-color-primary)
 
 .row-item
   margin 0 !important
   padding 0 !important
   text-align center
+
 .col-item
   margin 0 !important
   padding 0 !important
+
 .platform-right-card
   margin 0
   margin-left 10px
   margin-right 10px
   margin-bottom 10px
   padding 0
+
   img
     width 160px
     height 160px
+
   .right-card-text
     padding 0 10px 10px 10px
     display inline-block
     vertical-align top
     line-height 32px
     width calc(100% - 180px)
+
     .text-desc
       font-size 12px
       line-height 18px
+
     .add-btn
       margin-top 12px
 </style>
diff --git a/src/components/set/publish/PlatformAddForm.vue b/src/components/set/publish/PlatformAddForm.vue
@@ -43,7 +43,7 @@ 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 { JsonUtil, StrUtil } 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"
@@ -56,7 +56,7 @@ const { t } = useVueI18n()
 const router = useRouter()
 const route = useRoute()
 const { query } = useRoute()
-const { getPrePlatform } = usePlatformDefine()
+const { getPlatformType, getPrePlatform } = usePlatformDefine()
 const { getSetting, updateSetting, checkKeyExists } = useSettingStore()
 
 // datas
@@ -87,6 +87,12 @@ const formValidateRules = reactive<FormRules>({
       message: () => t("form.validate.name.required"),
     },
   ],
+  platformIcon: [
+    {
+      required: true,
+      message: () => t("form.validate.name.required"),
+    },
+  ],
 })
 
 const validateForm = (formEl) => {
@@ -157,14 +163,25 @@ const initForm = async (ptype: PlatformType, subtype: SubPlatformType) => {
   const dynJsonCfg = JsonUtil.safeParse<DynamicJsonCfg>(formData.setting[DYNAMIC_CONFIG_KEY], {} as DynamicJsonCfg)
   formData.dynamicConfigArray = dynJsonCfg.totalCfg || []
 
+  if (!formData.ptype) {
+    ElMessage.error("平台类型不能为空")
+    return
+  }
+  const platform = getPlatformType(formData.ptype)
+  let svgIcon = StrUtil.isEmptyString(platform.img)
+    ? svgIcons.iconEPPlus
+    : `<img src="${platform.img}" alt="platform-icon" class="img-platform-icon" style="width: 32px;height: 32px;"/>`
+
   if (pkey && subtype) {
     formData.subtype = subtype
 
     // 如果pkey对应的配置存在，初始化新的
     const pkeyExist = isDynamicKeyExists(formData.dynamicConfigArray, pkey)
     if (pkeyExist) {
+      const preTmpl = getPrePlatform(pkey)
+      svgIcon = preTmpl.platformIcon
       const newKey = getNewPlatformKey(ptype, subtype)
-      formData.dynCfg = new DynamicConfig(ptype, newKey, newKey, subtype, svgIcons.iconEPPlus)
+      formData.dynCfg = new DynamicConfig(ptype, newKey, newKey, subtype, svgIcon)
       logger.debug("pkey already exists, initialize the new one")
     } else {
       // 否则查询
@@ -175,13 +192,13 @@ const initForm = async (ptype: PlatformType, subtype: SubPlatformType) => {
     // 子类型初始化
     formData.subtype = subtype
     const newKey = getNewPlatformKey(ptype, subtype)
-    formData.dynCfg = new DynamicConfig(ptype, newKey, newKey, subtype, svgIcons.iconEPPlus)
+    formData.dynCfg = new DynamicConfig(ptype, newKey, newKey, subtype, svgIcon)
     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)
+    formData.dynCfg = new DynamicConfig(ptype, newKey, newKey, subtype, svgIcon)
     logger.debug("Initialize by selecting a subtype")
   }
 }
@@ -198,7 +215,7 @@ initPage()
 
 <template>
   <back-page :title="'新增自定义平台 - ' + ptype">
-    <el-form ref="formRef" label-width="100px" :model="formData.dynCfg" :rules="formValidateRules">
+    <el-form class="add-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" label="子平台类型">
@@ -211,10 +228,23 @@ initPage()
       <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="平台图标" prop="platformIcon">
+        <el-input
+          v-model="formData.dynCfg.platformIcon"
+          style="width: 75%; margin-right: 16px"
+          placeholder="直接粘贴svg代码或者img标签代码"
+          type="textarea"
+          :rows="10"
+        />
+        <el-icon>
+          <span v-html="formData.dynCfg.platformIcon"></span>
+        </el-icon>
+      </el-form-item>
       <!-- 授权方式 -->
       <el-form-item label="授权方式" prop="authMode">
         <el-select v-model="formData.dynCfg.authMode" placeholder="请选择">
@@ -235,7 +265,20 @@ initPage()
 </template>
 
 <style scoped lang="stylus">
+$icon_size = 32px
+
 .top-tip
   margin 10px 0
   padding-left 0
-</style>
+
+.add-form
+  :deep(.el-icon)
+    //color var(--el-color-primary)
+    width $icon_size
+    height $icon_size
+    margin-right -4px
+    vertical-align middle
+  :deep(.el-icon svg)
+    width $icon_size
+    height $icon_size
+</style>