feat: save the deployment status to the cloud

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/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.vue

@@ -50,15 +50,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 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,21 +74,25 @@ 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>

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">