Merge pull request #278 from XPoet/dev

Update

src/auto-imports.d.ts

@@ -18,6 +18,5 @@ declare global {
   const IEpPicture: typeof import('~icons/ep/picture')['default']
   const IEpPostcard: typeof import('~icons/ep/postcard')['default']
   const IEpSetting: typeof import('~icons/ep/setting')['default']
-  const IEpSwitch: typeof import('~icons/ep/switch')['default']
   const IEpUpload: typeof import('~icons/ep/upload')['default']
 }

src/common/api/branch.ts

@@ -2,6 +2,7 @@ import { UserConfigInfoModel } from '@/common/model'
 import request from '@/utils/request'
 import axios from '@/utils/request/axios'
 import { GH_PAGES } from '@/common/constant'
+import i18n from '@/plugins/vue/i18n'
 
 /**
  * 获取分支信息
@@ -58,18 +59,13 @@ export const getBranchInfoList = (
  * 将当前分支 checkout 到 gh-pages 分支
  * 部署到 GitHub Pages，完成图片资源托管，获取访问能力
  * @param userConfigInfo
- * @param $t
  * @param cb
  */
-export const checkoutGhPagesBranch = async (
-  userConfigInfo: UserConfigInfoModel,
-  $t: any,
-  cb?: any
-) => {
+export const checkoutGhPagesBranch = async (userConfigInfo: UserConfigInfoModel, cb?: any) => {
   const { owner, selectedRepo: repo, selectedBranch } = userConfigInfo
 
   const initLoading = ElLoading.service({
-    text: $t('settings.image_hosting_deploy.deploying')
+    text: i18n.global.t('settings.image_hosting_deploy.deploying')
   })
 
   const cbHandler = (evt: boolean = false) => {

src/common/constant/init.ts

@@ -9,3 +9,7 @@ export const PICX_DEL_IMG_DESC = 'Delete image via PicX (https://github.com/XPoe
 export const PICX_INIT_SETTINGS_MSG = 'Init settings via PicX (https://github.com/XPoet/picx)'
 export const PICX_UPDATE_SETTINGS_MSG = 'Update settings via PicX (https://github.com/XPoet/picx)'
 export const PICX_INIT_REPO_MSG = 'Init repo via PicX (https://github.com/XPoet/picx)'
+
+export const PICX_INIT_DEPLOY_MSG = 'Init deploy status via PicX (https://github.com/XPoet/picx)'
+export const PICX_UPDATE_DEPLOY_MSG =
+  'Update deploy status via PicX (https://github.com/XPoet/picx)'

src/common/model/user-settings.ts

@@ -1,5 +1,5 @@
 import { CompressEncoderEnum, ImageLinkFormatModel, ImageLinkRuleModel } from '@/common/model'
-import { DeployServerEnum } from '@/components/image-hosting-deploy/image-hosting-deploy.model'
+import { DeployServerEnum } from '@/components/deploy-bar/deploy-bar.model'
 
 export enum ElementPlusSizeEnum {
   // eslint-disable-next-line no-unused-vars

src/components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     CompressConfigBox: typeof import('./components/compress-config-box/compress-config-box.vue')['default']
     CompressTool: typeof import('./components/tools/compress-tool/compress-tool.vue')['default']
     CopyImageLink: typeof import('./components/copy-image-link/copy-image-link.vue')['default']
+    DeployBar: typeof import('./components/deploy-bar/deploy-bar.vue')['default']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -71,7 +72,7 @@ declare module '@vue/runtime-core' {
     IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IEpUserFilled: typeof import('~icons/ep/user-filled')['default']
     ImageCard: typeof import('./components/image-card/image-card.vue')['default']
-    ImageHostingDeploy: typeof import('./components/image-hosting-deploy/image-hosting-deploy.vue')['default']
+    ImageHostingDeploy: typeof import('./components/deploy-bar/image-hosting-deploy.vue')['default']
     ImageLinkRuleConfig: typeof import('./components/image-link-rule-config/image-link-rule-config.vue')['default']
     ImageSelector: typeof import('./components/image-selector/image-selector.vue')['default']
     ImgProcessStateCard: typeof import('./components/tools/img-process-state-card/img-process-state-card.vue')['default']

src/components/cloud-settings-bar/cloud-settings-bar.vue

@@ -98,15 +98,17 @@ const onOK = () => {
 watch(
   () => userSettings,
   (settings) => {
-    // 本地设置发生变化时，判断和云端设置是否相等
-    if (deepObjectEqual(settings, cloudSettings.value!)) {
-      // 相等情况
-      selectedAction.value = CloudSettingsActions.equal
-      saveDisabled.value = true
-    } else {
-      // 不相等情况
-      selectedAction.value = CloudSettingsActions.update
-      saveDisabled.value = false
+    if (cloudSettings.value) {
+      // 本地设置发生变化时，判断和云端设置是否相等
+      if (deepObjectEqual(settings, cloudSettings.value)) {
+        // 相等情况
+        selectedAction.value = CloudSettingsActions.equal
+        saveDisabled.value = true
+      } else {
+        // 不相等情况
+        selectedAction.value = CloudSettingsActions.update
+        saveDisabled.value = false
+      }
     }
   },
   {

src/components/image-hosting-deploy/image-hosting-deploy.util.ts → src/components/deploy-bar/deploy-bar.util.ts

@@ -1,4 +1,4 @@
-import { DeployServerEnum } from '@/components/image-hosting-deploy/image-hosting-deploy.model'
+import { DeployServerEnum } from '@/components/deploy-bar/deploy-bar.model'
 
 export const getDeployServerName = (server: DeployServerEnum) => {
   switch (server) {

src/components/image-hosting-deploy/image-hosting-deploy.vue → src/components/deploy-bar/deploy-bar.vue

@@ -35,12 +35,7 @@
             $t('settings.image_hosting_deploy.deploy_to', { server: getDeployServerName(di.type) })
           "
         >
-          <el-button
-            type="primary"
-            :disabled="disabled && di.status !== null"
-            text
-            @click="onDeploy(di)"
-          >
+          <el-button type="primary" :disabled="disabled" text @click="onDeploy(di)">
             {{ $t('settings.image_hosting_deploy.one_click_deploy') }}
           </el-button>
         </el-tooltip>
@@ -50,15 +45,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance } from 'vue'
+import { computed } from 'vue'
 import { store } from '@/stores'
 import { checkoutGhPagesBranch } from '@/common/api'
 import { DeployStatusInfo, ImageLinkTypeEnum } from '@/common/model'
 import { formatDatetime } from '@/utils'
-import { DeployServerEnum } from '@/components/image-hosting-deploy/image-hosting-deploy.model'
-import { getDeployServerName } from '@/components/image-hosting-deploy/image-hosting-deploy.util'
-
-const instance = getCurrentInstance()
+import { DeployServerEnum } from '@/components/deploy-bar/deploy-bar.model'
+import { getDeployServerName } from '@/components/deploy-bar/deploy-bar.util'
+import i18n from '@/plugins/vue/i18n'
+import { saveCloudDeployInfo } from '@/views/main-container/main-container.util'
 
 const userSettings = computed(() => store.getters.getUserSettings).value
 const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
@@ -74,25 +69,29 @@ const onDeploy = (deployItem: DeployStatusInfo) => {
   // eslint-disable-next-line default-case
   switch (deployItem.type) {
     case DeployServerEnum.githubPages:
-      checkoutGhPagesBranch(userConfigInfo, instance?.proxy?.$t, (event: boolean) => {
+      checkoutGhPagesBranch(userConfigInfo, (event: boolean) => {
         userSettings.deploy.github.status = event
         userSettings.deploy.github.latestTime = Date.now()
+        // 保存部署状态到云端仓库
+        saveCloudDeployInfo()
         if (event) {
+          // 部署成功
           userSettings.imageLinkType.selected = ImageLinkTypeEnum.GitHubPages
           store.dispatch('USER_SETTINGS_PERSIST')
-          ElMessage.success(instance?.proxy?.$t('settings.image_hosting_deploy.success'))
+          ElMessage.success(i18n.global.t('settings.image_hosting_deploy.success'))
         } else {
-          ElMessage.error(instance?.proxy?.$t('settings.image_hosting_deploy.fail2'))
+          // 部署失败
+          ElMessage.error(i18n.global.t('settings.image_hosting_deploy.fail2'))
         }
       })
       return
 
     case DeployServerEnum.vervel:
-      console.log('暂未实现')
+      console.log('部署 Vervel 暂未实现')
   }
 }
 </script>
 
 <style scoped lang="stylus">
-@import "image-hosting-deploy.styl"
+@import "deploy-bar.styl"
 </style>

src/stores/modules/user-settings/index.ts

@@ -16,7 +16,7 @@ import UserSettingsStateTypes, {
   ImgLinkRuleActionsEnum
 } from '@/stores/modules/user-settings/types'
 import { LS_PICX_SETTINGS } from '@/common/constant'
-import { DeployServerEnum } from '@/components/image-hosting-deploy/image-hosting-deploy.model'
+import { DeployServerEnum } from '@/components/deploy-bar/deploy-bar.model'
 import { imgLinkRuleVerification } from '@/stores/modules/user-settings/utils'
 
 const initSettings: UserSettingsModel = {

src/views/main-container/main-container.util.ts

@@ -0,0 +1,69 @@
+import { computed } from 'vue'
+import request from '@/utils/request'
+import { PICX_INIT_DEPLOY_MSG, PICX_UPDATE_DEPLOY_MSG } from '@/common/constant'
+import { store } from '@/stores'
+
+const userSettings = computed(() => store.getters.getUserSettings).value
+const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
+
+const filename = '.deploy'
+
+/**
+ * 获取云端仓库存储的部署状态信息
+ */
+export const getCloudDeployInfo = async () => {
+  const { owner, selectedRepo: repo, selectedBranch: branch } = userConfigInfo
+  const res = await request({
+    url: `/repos/${owner}/${repo}/contents/${filename}`,
+    method: 'GET',
+    noShowErrorMsg: true,
+    cache: {
+      maxAge: 0
+    },
+    params: {
+      branch,
+      timestamp: Date.now()
+    }
+  })
+
+  return Promise.resolve(res)
+}
+
+/**
+ * 保存部署状态信息到云端仓库
+ */
+export const saveCloudDeployInfo = async () => {
+  const { owner, selectedRepo: repo, selectedBranch: branch } = userConfigInfo
+
+  const res = await getCloudDeployInfo()
+
+  const data: any = {
+    message: res ? PICX_UPDATE_DEPLOY_MSG : PICX_INIT_DEPLOY_MSG,
+    content: window.btoa(JSON.stringify(userSettings.deploy))
+  }
+
+  if (res) {
+    data.sha = res.sha
+  } else {
+    data.branch = branch
+  }
+
+  const res2 = await request({
+    url: `/repos/${owner}/${repo}/contents/${filename}`,
+    method: 'PUT',
+    data,
+    noShowErrorMsg: true
+  })
+
+  return Promise.resolve(res2)
+}
+
+/**
+ * 设置云端仓库的部署状态到本地
+ * @param content
+ */
+export const setCloudDeployInfo = (content: string) => {
+  store.dispatch('SET_USER_SETTINGS', {
+    deploy: JSON.parse(window.atob(content))
+  })
+}

src/views/main-container/main-container.vue

@@ -19,14 +19,35 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, computed, watch } from 'vue'
 import HeaderContent from '@/components/header-content/header-content.vue'
 import NavContent from '@/components/nav-content/nav-content.vue'
-import userConfigInfoModel from '@/utils/set-theme-mode'
+import themeModeHandle from '@/utils/set-theme-mode'
+import { getCloudDeployInfo, setCloudDeployInfo } from '@/views/main-container/main-container.util'
+import { store } from '@/stores'
+
+const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
+
+const initDeployStatus = async () => {
+  const res = await getCloudDeployInfo()
+  if (res) {
+    setCloudDeployInfo(res.content)
+  }
+}
 
 onMounted(() => {
-  userConfigInfoModel()
+  themeModeHandle()
 })
+
+watch(
+  () => userConfigInfo.selectedBranch,
+  (nv) => {
+    if (nv && userConfigInfo.owner && userConfigInfo.selectedRepo) {
+      initDeployStatus()
+    }
+  },
+  { immediate: true, deep: true }
+)
 </script>
 
 <style scoped lang="stylus">

src/views/my-settings/my-settings.vue

@@ -99,6 +99,7 @@
                 :key="item.name + '-' + item.id"
                 :label="item.name"
                 :value="item.name"
+                :disabled="isDeployGitHubPages(item.name)"
                 class="image-link-type-rule-option"
               >
                 <span class="left">{{ item.name }}</span>
@@ -149,7 +150,7 @@
 
       <!-- 图床部署设置 -->
       <el-collapse-item :title="$t('settings.image_hosting_deploy.title')" name="6">
-        <image-hosting-deploy />
+        <deploy-bar />
       </el-collapse-item>
 
       <!-- 主题设置 -->
@@ -178,7 +179,7 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
 import { store } from '@/stores'
-import { ThemeModeEnum, UserSettingsModel } from '@/common/model'
+import { ImageLinkTypeEnum, ThemeModeEnum, UserSettingsModel } from '@/common/model'
 
 const userSettings = computed(() => store.getters.getUserSettings).value
 
@@ -201,6 +202,10 @@ const setWatermarkConfig = (config: UserSettingsModel['watermark']) => {
   persistUserSettings()
 }
 
+const isDeployGitHubPages = (name: string) => {
+  return name === ImageLinkTypeEnum.GitHubPages && !userSettings.deploy.github.status
+}
+
 watch(
   () => userSettings.imageName.autoTimestampNaming,
   (enable) => {

src/views/upload-image/upload-image.vue

@@ -40,10 +40,10 @@
         </div>
       </div>
 
-      <div class="row-item">
+      <!-- 部署 -->
+      <div class="row-item" v-if="userConfigInfo.logined">
         <div class="content-box">
-          <!-- 部署 -->
-          <image-hosting-deploy :disabled="!isCanDeploy" />
+          <deploy-bar :disabled="!isCanDeploy" />
         </div>
       </div>