feat: 优化列表平台名称展示、新增新平台提示

cross/crossPageUtils.ts

@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+import { HtmlUtil, StrUtil } from "zhi-common"
+
+/**
+ * 页面辅助函数
+ *
+ * @author terwer
+ * @since 1.18.0
+ */
+class CrossPageUtils {
+  /**
+   * 缩略展示平台名称
+   *
+   * @param platformName
+   * @param length
+   */
+  public static shortPlatformName(platformName: string, length?: number) {
+    return StrUtil.upperFirst(HtmlUtil.parseHtml(platformName.replace("Gitlab", ""), length ?? 9))
+  }
+
+  /**
+   * 缩略展示平台名称
+   *
+   * @param platformName
+   * @param length
+   */
+  public static longPlatformName(platformName: string, length?: number) {
+    const shortName = StrUtil.upperFirst(HtmlUtil.parseHtml(platformName.replace("Gitlab", ""), length ?? 9))
+    if (platformName.includes("Gitlab")) {
+      return `Gitlab-${shortName}`
+    }
+    return shortName
+  }
+}
+
+export default CrossPageUtils

siyuan/topbar.ts

@@ -34,6 +34,7 @@ import { PluginInvoke } from "./invoke/pluginInvoke"
 import { ObjectUtil } from "zhi-common"
 import { DYNAMIC_CONFIG_KEY } from "./Constants"
 import { ConfigManager } from "~/siyuan/store/config.ts"
+import CrossPageUtils from "~/cross/crossPageUtils.ts"
 
 /**
  * 顶部按钮
@@ -93,11 +94,9 @@ export class Topbar {
         icon = `<span class="img-icon">${icon}</span>`
       }
       if (config.isEnabled === true) {
-        // http://127.0.0.1:6806/plugins/siyuan-plugin-publisher/i
-
         const submenu = {
           iconHTML: `${icon}`,
-          label: config.platformName,
+          label: CrossPageUtils.longPlatformName(config.platformName, 11),
           disabled: !config.isAuth,
           click: async () => {
             const key = config.platformKey

src/components/publish/SinglePublishSelectPlatform.vue

@@ -29,10 +29,11 @@ import { useVueI18n } from "~/src/composables/useVueI18n.ts"
 import { useRouter } from "vue-router"
 import { createAppLogger } from "~/src/utils/appLogger.ts"
 import { DynamicConfig, DynamicJsonCfg, getDynPostidKey } from "~/src/platforms/dynamicConfig.ts"
-import { HtmlUtil, JsonUtil, ObjectUtil, StrUtil } from "zhi-common"
+import { JsonUtil, ObjectUtil, StrUtil } from "zhi-common"
 import { DYNAMIC_CONFIG_KEY } from "~/src/utils/constants.ts"
 import { useSettingStore } from "~/src/stores/useSettingStore.ts"
 import { useLoadingTimer } from "~/src/composables/useLoadingTimer.ts"
+import CrossPageUtils from "~/cross/crossPageUtils.ts"
 
 const logger = createAppLogger("single-publish-select-platform")
 
@@ -101,7 +102,7 @@ onMounted(async () => {
 
 <template>
   <!-- 显示加载计时器 -->
-  <loading-timer :loading-time="loadingTime" style="padding: 0 10px 0 10px"/>
+  <loading-timer :loading-time="loadingTime" style="padding: 0 10px 0 10px" />
   <el-skeleton v-if="!formData.isInit" class="placeholder" :rows="12" animated style="padding: 40px 12px" />
   <div v-else>
     <div class="platform-desc">
@@ -128,7 +129,7 @@ onMounted(async () => {
                 <i class="el-icon">
                   <span v-html="cfg?.platformIcon"></span>
                 </i>
-                {{ StrUtil.upperFirst(HtmlUtil.parseHtml(cfg.platformName, 11)) }}
+                {{ CrossPageUtils.longPlatformName(cfg?.platformName, 11) }}
               </el-text>
             </el-badge>
           </div>

src/components/publish/form/PublishPlatform.vue

@@ -24,14 +24,15 @@
   -->
 
 <script setup lang="ts">
-import {onMounted, reactive, toRaw} from "vue"
+import { onMounted, reactive } from "vue"
 import { JsonUtil, StrUtil } from "zhi-common"
 import { DynamicConfig, DynamicJsonCfg, getDynPostidKey } from "~/src/platforms/dynamicConfig.ts"
 import { DYNAMIC_CONFIG_KEY } from "~/src/utils/constants.ts"
 import { useSettingStore } from "~/src/stores/useSettingStore.ts"
 import { svgIcons } from "../../../utils/svgIcons.ts"
 import { pre } from "~/src/utils/import/pre.ts"
 import { createAppLogger } from "~/src/utils/appLogger.ts"
+import CrossPageUtils from "~/cross/crossPageUtils.ts"
 
 const logger = createAppLogger("publish-platform")
 
@@ -64,7 +65,7 @@ if (emit) {
 const handleCheck = (key: string) => {
   if (formData.selectedKeys.includes(key)) {
     // 如果 formData.selectedKeys 数组中包含 key，则从数组中删除 key
-    formData.selectedKeys = formData.selectedKeys?.filter((item: string) => item !== key)??[]
+    formData.selectedKeys = formData.selectedKeys?.filter((item: string) => item !== key) ?? []
   } else {
     // 如果 formData.selectedKeys 数组中不包含 key，则将其添加到数组中
     formData.selectedKeys.push(key)
@@ -104,17 +105,14 @@ onMounted(async () => {
   <div>
     <p>请选择要发布的平台：</p>
     <div class="syp-distri-platform-container">
-      <a
-        v-for="cfg in formData.dynamicConfigArray"
-        class="distri-item"
-        :title="cfg.platformName"
-        @click="handleCheck(cfg.platformKey)"
-      >
-        <el-icon class="platform-icon">
-          <span v-html="cfg.platformIcon"></span>
-        </el-icon>
-        <span v-if="formData.selectedKeys.includes(cfg.platformKey)" v-html="svgIcons.iconOTYes"></span>
-        <span v-else class="icon-no" v-html="svgIcons.iconOTNo"></span>
+      <a v-for="cfg in formData.dynamicConfigArray" class="distri-item" @click="handleCheck(cfg.platformKey)">
+        <el-tooltip :content="CrossPageUtils.longPlatformName(cfg.platformName, 11)" placement="bottom">
+          <el-icon class="platform-icon">
+            <span v-html="cfg.platformIcon"></span>
+          </el-icon>
+          <span v-if="formData.selectedKeys.includes(cfg.platformKey)" v-html="svgIcons.iconOTYes"></span>
+          <span v-else class="icon-no" v-html="svgIcons.iconOTNo"></span>
+        </el-tooltip>
       </a>
     </div>
   </div>

src/components/set/PublishSetting.vue

@@ -30,7 +30,7 @@ import { Delete, Lock, Tools, WarningFilled } 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 { DateUtil, JsonUtil } from "zhi-common"
 import {
   AuthMode,
   deletePlatformByKey,
@@ -56,14 +56,15 @@ import CookieSetting from "~/src/components/set/publish/singleplatform/base/Cook
 import { CommonWebConfig } from "~/src/adaptors/web/base/commonWebConfig.ts"
 import { pre } from "~/src/utils/import/pre.ts"
 import _ from "lodash"
+import CrossPageUtils from "~/cross/crossPageUtils.ts"
 
 const logger = createAppLogger("publish-setting")
 
 // uses
 const { t } = useVueI18n()
 const router = useRouter()
 const { getSetting, updateSetting, deleteKey } = useSettingStore()
-const { platformTypeList, getPrePlatformList } = usePlatformDefine()
+const { getPrePlatformKeys, platformTypeList, getPrePlatformList } = usePlatformDefine()
 const { isInSiyuanWidget, isInChromeExtension } = useSiyuanDevice()
 
 // datas
@@ -76,6 +77,8 @@ const formData = reactive({
   dynamicConfigArray: [] as DynamicConfig[],
 
   webAuthLoadingMap: {} as any,
+
+  hasNewPlatform: false,
   isImportLoading: false,
   showLogMessage: false,
   logMessage: "",
@@ -371,44 +374,66 @@ const handleHideCookieDlg = () => {
   formData.cookieSettingFormVisible = false
 }
 
+const logAction = (pkey: string, action: string) => {
+  const timestamp = DateUtil.formatIsoToZh(new Date().toISOString(), true)
+  formData.logMessage += `[${timestamp}] ${pkey} ${action}\n`
+}
+
 // 单个大类导入
 const basicImport = (importCfgs: DynamicConfig[]) => {
+  let importCount = 0
   for (const importCfg of importCfgs) {
     const pkey = importCfg.platformKey
-    const pkeyExist = isDynamicKeyExists(formData.dynamicConfigArray, pkey)
-    if (pkeyExist) {
-      formData.logMessage += `${pkey} 已经存在，忽略导入\n`
+    if (isDynamicKeyExists(formData.dynamicConfigArray, pkey)) {
+      // logAction(pkey, "已经存在，忽略导入")
       continue
     }
 
     const newCfg = _.cloneDeep(importCfg)
     formData.dynamicConfigArray.push(newCfg)
-    formData.logMessage += `${pkey} 已加入导入列表\n`
+    logAction(pkey, "已加入导入列表")
 
     // 初始化一个空配置
-    formData.setting[newCfg.platformKey] = {}
-    formData.logMessage += `${pkey} 初始化\n`
+    formData.setting[pkey] = {}
+    logAction(pkey, "初始化")
+
+    importCount++
   }
+
+  return importCount
 }
 
 const handleImportPre = async () => {
   formData.showLogMessage = true
   formData.isImportLoading = true
+  // 清空日志
+  formData.logMessage = ""
 
+  let totalImportCount = 0
   // 大类导入
-  basicImport(pre.commonCfg)
-  basicImport(pre.githubCfg)
-  basicImport(pre.gitlabCfg)
-  basicImport(pre.metaweblogCfg)
-  basicImport(pre.wordpressCfg)
-  basicImport(pre.customCfg)
-
-  // 转换格式并保存
-  const dynJsonCfg = setDynamicJsonCfg(formData.dynamicConfigArray)
-  formData.setting[DYNAMIC_CONFIG_KEY] = dynJsonCfg
-  await updateSetting(formData.setting)
+  totalImportCount += basicImport(pre.commonCfg)
+  totalImportCount += basicImport(pre.githubCfg)
+  totalImportCount += basicImport(pre.gitlabCfg)
+  totalImportCount += basicImport(pre.metaweblogCfg)
+  totalImportCount += basicImport(pre.wordpressCfg)
+  totalImportCount += basicImport(pre.customCfg)
+
   formData.isImportLoading = false
-  formData.logMessage += `全部导入成功并保存\n`
+
+  if (totalImportCount > 0) {
+    // 转换格式并保存
+    const dynJsonCfg = setDynamicJsonCfg(formData.dynamicConfigArray)
+    formData.setting[DYNAMIC_CONFIG_KEY] = dynJsonCfg
+    await updateSetting(formData.setting)
+    // 刷新数据
+    await initPage()
+
+    formData.logMessage += `全部导入成功并保存`
+    ElMessage.success("全部导入成功并保存")
+  } else {
+    formData.logMessage += `未发现新平台，忽略导入`
+    ElMessage.warning("未发现新平台，忽略导入")
+  }
 }
 
 const initPage = async () => {
@@ -419,6 +444,11 @@ const initPage = async () => {
   // 默认展示通用平台
   formData.dynamicConfigArray = dynJsonCfg?.totalCfg || []
   logger.debug("dynamic init page=>", formData.dynamicConfigArray)
+
+  // 检测是否有新平台
+  const preKeys = getPrePlatformKeys()
+  const dynKeys = formData.dynamicConfigArray.map((p) => p.platformKey)
+  formData.hasNewPlatform = !preKeys.every((preKey) => dynKeys.includes(preKey))
 }
 
 // lifecycles
@@ -467,7 +497,9 @@ onMounted(async () => {
                     <div class="right-card-text">
                       <el-tooltip placement="bottom">
                         <template #content>
-                          <span v-for="item in getPrePlatformList(p.type)"> {{ item.platformName }}<br /> </span>
+                          <span v-for="item in getPrePlatformList(p.type)">
+                            {{ CrossPageUtils.longPlatformName(item.platformName, 11) }}<br />
+                          </span>
                         </template>
                         <span class="platform-title">{{ p.title }}</span>
                       </el-tooltip>
@@ -507,7 +539,9 @@ onMounted(async () => {
                             class="badge-item"
                             :type="platform.isAuth ? 'success' : 'danger'"
                           >
-                            <span>{{ platform.platformName }}</span>
+                            <span :title="platform.platformName">
+                              {{ CrossPageUtils.longPlatformName(platform.platformName, 11) }}
+                            </span>
                             <span class="name-edit" @click="handleChangePlatformDefine(platform)">
                               <el-icon> <span v-html="svgIcons.iconIFEdit"></span> </el-icon>
                             </span>
@@ -597,9 +631,28 @@ onMounted(async () => {
               <el-row>
                 <el-col>
                   <div class="import-pre-action">
-                    <el-button size="small" type="primary" :loading="formData.isImportLoading" @click="handleImportPre"
-                      >导入预定义平台</el-button
-                    >
+                    <div v-if="formData.hasNewPlatform">
+                      <el-badge value="new" class="badge-item" type="danger">
+                        <el-button
+                          size="small"
+                          type="primary"
+                          :loading="formData.isImportLoading"
+                          @click="handleImportPre"
+                        >
+                          导入预定义平台
+                        </el-button>
+                      </el-badge>
+                    </div>
+                    <div v-else>
+                      <el-button
+                        size="small"
+                        type="primary"
+                        :loading="formData.isImportLoading"
+                        @click="handleImportPre"
+                      >
+                        导入预定义平台
+                      </el-button>
+                    </div>
                   </div>
                   <div class="log-message-box">
                     <el-input