feat: 新版挂件-优化发布配置-列表页面

terwer · Jul 10, 2023 · c52c287 · c52c287
1 parent b93112b
commit c52c287
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 13 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -12,11 +12,11 @@ declare module '@vue/runtime-core' {
     ChangeLocal: typeof import('./src/components/set/preference/ChangeLocal.vue')['default']
     CnblogsTest: typeof import('./src/components/test/CnblogsTest.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']

diff --git a/src/components/set/PublishSetting.vue b/src/components/set/PublishSetting.vue
@@ -31,7 +31,12 @@ 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, PlatformType } from "~/src/components/set/publish/platform/dynamicConfig.ts"
+import {
+  AuthMode,
+  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"
 
@@ -108,7 +113,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div class="publish-setting-body">
     <el-row :gutter="20" class="row-item">
       <el-col :span="2" class="col-item">
         <el-menu class="publish-setting-left-menu">
@@ -168,13 +173,35 @@ onMounted(async () => {
                   <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="text">
+                        <el-badge
+                          :value="platform.isAuth ? '已授权' : '未授权'"
+                          class="badge-item"
+                          :type="platform.isAuth ? 'success' : 'warning'"
+                        >
+                          <span>{{ platform.platformName }}</span>
+                          <el-text
+                            :type="platform.authMode === AuthMode.API ? 'primary' : 'info'"
+                            class="auth-mode-text"
+                          >
+                            {{ platform.authMode === AuthMode.API ? "API授权" : "网页授权" }}
+                          </el-text>
+                        </el-badge>
+                      </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-switch
+                          v-model="platform.isEnabled"
+                          inline-prompt
+                          size="small"
+                          class="action-btn action-switch"
+                          active-text="已启用"
+                          inactive-text="未启用"
+                        ></el-switch>
+                        <el-text
+                          class="action-btn action-setting"
+                          @click="handleSinglePlatformSetting(platform.platformKey)"
+                        >
+                          <el-icon> <Tools /> </el-icon>设置
                         </el-text>
                       </div>
                     </div>
@@ -195,6 +222,15 @@ onMounted(async () => {
                         </div>
                       </div>
                     </div>
+
+                    <div class="tips-form">
+                      <a
+                        href="https://terwergreen.feishu.cn/share/base/form/shrcnGRdThUiqnhBg15xgclMM0c"
+                        target="_blank"
+                      >
+                        发布工具平台适配跟踪表
+                      </a>
+                    </div>
                   </div>
                 </el-col>
               </el-row>
@@ -252,27 +288,39 @@ onMounted(async () => {
 </template>
 
 <style scoped lang="stylus">
+.publish-setting-body
+  margin-left 10px
+  margin-top 10px
+
 .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)
 
+html[class="dark"]
+  .menu-item-selected
+    color var(--el-button-text-color)
+
 .publish-setting-right-content
   .right-setting-tips
     text-align left
     padding-left 10px
     padding-right 10px
+  .tips-form
+    font-size 12px
+    margin-top 14px
 
 .publish-right-setting
   .platform-list
     margin-bottom 10px
     margin-left 6px !important
     margin-right 6px !important
     .platform-item-box
-      margin-bottom 16px
+      margin-bottom 28px
       text-align left
       .platform-item
         img
@@ -286,9 +334,19 @@ onMounted(async () => {
             color var(--el-button-text-color)
             font-size 12px
             margin-bottom 2px
+            .auth-mode-text
+              font-size 12px
+              margin-left 16px
           .actions
             .action-btn
               margin-right 10px
+            .action-switch
+              font-size 12px
+            .action-setting
+              font-size 12px
+              cursor pointer
+              &:hover
+                color var(--el-color-primary)
 
 .row-item
   margin 0 !important

diff --git a/src/components/set/publish/platform/dynamicConfig.ts b/src/components/set/publish/platform/dynamicConfig.ts
@@ -45,6 +45,7 @@ export class DynamicConfig {
 
   /**
    * 子平台类型(细分子类型)
+   *
    * @since 0.1.0+
    */
   subPlatformType?: SubPlatformType
@@ -59,6 +60,18 @@ export class DynamicConfig {
    */
   platformName: string
 
+  /**
+   * 平台图标
+   *
+   * @since 0.9.0+
+   */
+  platformIcon?: string
+
+  /**
+   * 是否授权
+   */
+  isEnabled: boolean
+
   /**
    * 是否授权
    */
@@ -79,6 +92,7 @@ export class DynamicConfig {
     this.platformKey = platformKey
     this.platformName = platformName
     this.isAuth = false
+    this.isEnabled = false
     this.authMode = AuthMode.API
   }
 }

diff --git a/src/locales/zh_CN.ts b/src/locales/zh_CN.ts
@@ -478,9 +478,9 @@ export default {
   "setting.platform.wordpress.desc":
     "WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。它具有插件架构和模板系统，同时也是最受欢迎的网站内容管理系统。点击右侧图标快速添加，或者点击下方按钮自定义添加",
   "setting.platform.right.tips0": "特别提示：",
-  "setting.platform.right.tips1": "1、在这里可以进行发布配置，直接点击 [左侧菜单] 或者 [列表图标] 均可进行配置。",
+  "setting.platform.right.tips1": "1、在这里可以进行发布配置，直接点击 [设置图标] 即可进行配置。",
   "setting.platform.right.tips2": "2、如需新增平台，直接点击左侧 + 按钮即可。",
   "setting.platform.right.tips3":
-    "3、目前支持 网页授权 和 API 授权两种方式，API授权 复杂点但是相对稳定，网页授权简单但是可能会失效。惊喜：网页授权模式 100% 兼容",
-  "setting.platform.right.tips4": "4、如需兼容其他平台，请联系我",
+    "3、目前支持 网页授权 和 API 授权两种方式，API授权 复杂点但是相对稳定，网页授权简单但是可能会失效。惊喜：网页授权模式 100% 兼容 wechatsync 。",
+  "setting.platform.right.tips4": "4、如需兼容其他平台，请联系我：youweics@163.com 或者填写下面的表单。",
 }