feat: 新版挂件-重构发布配置

terwer · Jul 8, 2023 · 7729d99 · 7729d99
1 parent fe2667d
commit 7729d99
Show file tree

Hide file tree

Showing 8 changed files with 540 additions and 8 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -41,7 +41,8 @@ declare module '@vue/runtime-core' {
     HexoTest: typeof import('./src/components/test/HexoTest.vue')['default']
     HugoTest: typeof import('./src/components/test/HugoTest.vue')['default']
     KmsTest: typeof import('./src/components/test/kmsTest.vue')['default']
-    MetaweblogSetting: typeof import('./src/components/set/singleplatform/MetaweblogSetting.vue')['default']
+    MetaweblogSetting: typeof import('./src/components/set/publish/singleplatform/MetaweblogSetting.vue')['default']
+    PlatformAddForm: typeof import('./src/components/set/publish/PlatformAddForm.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
@@ -24,15 +24,28 @@
   -->
 
 <script setup lang="ts">
-import { reactive } from "vue"
+import { onMounted, reactive } from "vue"
 import { useVueI18n } from "~/src/composables/useVueI18n.ts"
 import { ElementPlus } 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 { DYNAMIC_CONFIG_KEY } from "~/src/utils/constants.ts"
+import { useRouter } from "vue-router"
+
+const logger = createAppLogger("publish-setting")
 
 // uses
 const { t } = useVueI18n()
+const router = useRouter()
+const { getSetting, updateSetting } = useSettingStore()
 
 // datas
 const formData = reactive({
+  setting: {} as typeof SypConfig,
+
   showPlatformList: false,
   platformTypeList: [
     {
@@ -46,6 +59,8 @@ const formData = reactive({
       description: t("setting.platform.wordpress.desc"),
     },
   ],
+
+  dynamicConfigArray: [] as DynamicConfig[],
 })
 
 // methods
@@ -59,6 +74,25 @@ const handleHidePlatform = () => {
 const handleAddPlatformStep = () => {
   alert(111)
 }
+
+const handleSinglePlatformSetting = (key: string) => {
+  router.push({ path: `/setting/platform/single/${key}` })
+}
+
+const initPage = async () => {
+  formData.setting = await getSetting()
+  logger.info("get setting from platform setting", formData.setting)
+
+  const dynJsonCfg = JsonUtil.safeParse<DynamicJsonCfg>(formData.setting[DYNAMIC_CONFIG_KEY], {} as DynamicJsonCfg)
+  // 默认展示通用平台
+  formData.dynamicConfigArray = dynJsonCfg.totalCfg || []
+  logger.debug("dynamic init page=>", formData.dynamicConfigArray)
+}
+
+// lifecycles
+onMounted(async () => {
+  await initPage()
+})
 </script>
 
 <template>
@@ -71,8 +105,18 @@ const handleAddPlatformStep = () => {
               <el-text type="info"> {{ t("service.tab.publish.setting") }} </el-text>
             </template>
           </el-menu-item>
-          <el-menu-item class="left-menu-item">
-            <template #title>Zhihu</template>
+          <el-menu-item
+            v-for="dc in formData.dynamicConfigArray"
+            :key="dc.platformKey"
+            class="left-menu-item"
+            @click="handleSinglePlatformSetting(dc.platformKey)"
+          >
+            <template #title>
+              <el-icon>
+                <ElementPlus />
+              </el-icon>
+              {{ dc.platformName }}
+            </template>
           </el-menu-item>
           <el-menu-item class="left-menu-item" @click="handleShowPlatform">
             <template #title>
@@ -108,7 +152,32 @@ const handleAddPlatformStep = () => {
             </el-row>
           </div>
           <div v-else>
-            <div class="right-setting-tips">在这里可以添加您想要发布的平台。直接点击左侧 + 按钮即可</div>
+            <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>
+                  <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>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
           </div>
         </div>
       </el-col>

diff --git a/src/components/set/SinglePlatformSetting.vue b/src/components/set/SinglePlatformSetting.vue
@@ -24,7 +24,7 @@
   -->
 
 <script setup lang="ts">
-import MetaweblogSetting from "~/src/components/set/singleplatform/MetaweblogSetting.vue"
+import MetaweblogSetting from "~/src/components/set/publish/singleplatform/MetaweblogSetting.vue"
 import { useRoute, useRouter } from "vue-router"
 import { reactive, ref } from "vue"
 import { useVueI18n } from "~/src/composables/useVueI18n.ts"

diff --git a/src/components/set/publish/PlatformAddForm.vue b/src/components/set/publish/PlatformAddForm.vue
@@ -0,0 +1,32 @@
+<!--
+  - 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.
+  -->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div>add new platform</div>
+</template>
+
+<style scoped lang="stylus"></style>