feat(management): add github pages deployed status tip

Author: XPoet

pnpm-lock.yaml

@@ -12,7 +12,7 @@ export interface UploadedImageModel {
   deleting: boolean
   checked: boolean
   active?: boolean
-  sync?: boolean
+  deployed?: boolean
 }
 
 /**

src/common/model/image.ts

@@ -121,4 +121,4 @@ declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
-}
+}

src/components.d.ts

@@ -1,29 +1,19 @@
 import { computed } from 'vue'
-import { ImageLinkFormatModel, ImageLinkTypeEnum, UploadedImageModel } from '@/common/model'
+import { ImageLinkFormatModel, UploadedImageModel } from '@/common/model'
 import { copyText } from '@/utils'
 import i18n from '@/plugins/vue/i18n'
 import { store } from '@/stores'
 
 /**
  * 生成一个图片链接
  * @param imageObj
- * @Param isSyncToGitPage
  */
-export const generateImageLink = (
-  imageObj: UploadedImageModel,
-  isSyncToGitPage: boolean = true
-): string | null => {
+export const generateImageLink = (imageObj: UploadedImageModel): string | null => {
   const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
   const userSettings = computed(() => store.getters.getUserSettings).value
 
   const { selected } = userSettings.imageLinkType
-
-  const { rule } =
-    userSettings.imageLinkType.presetList[
-      selected !== ImageLinkTypeEnum.GitHubPages || isSyncToGitPage
-        ? selected
-        : ImageLinkTypeEnum.GitHub
-    ]
+  const { rule } = userSettings.imageLinkType.presetList[selected]
   if (rule) {
     const { owner, repo, branch } = userConfigInfo
     return rule
@@ -74,7 +64,7 @@ const copyMessage = (autoCopy = false) => {
  * @param autoCopy
  */
 export const copyImageLink = (imgObj: UploadedImageModel, autoCopy: boolean = false) => {
-  const link = transformImageLink(generateImageLink(imgObj, imgObj.sync), imgObj.name)
+  const link = transformImageLink(generateImageLink(imgObj), imgObj.name)
   if (link) {
     copyText(link, () => {
       copyMessage(autoCopy)
@@ -96,7 +86,7 @@ export const batchCopyImageLinks = (
   if (uploadedImgList?.length > 0) {
     let linksTxt = ''
     uploadedImgList.forEach((img: UploadedImageModel, index) => {
-      const link = transformImageLink(generateImageLink(img, img.sync), img.name)
+      const link = transformImageLink(generateImageLink(img), img.name)
       linksTxt += `${link}${index < uploadedImgList.length - 1 ? '\n' : ''}`
     })
     copyText(linksTxt, () => {

src/utils/image-link-utils.ts

@@ -68,7 +68,8 @@ export const createManagementImageObject = (item: any, selectedDir: string): Upl
     path: item.path,
     deleting: false,
     size: item.size,
-    checked: false
+    checked: false,
+    deployed: true
   }
 }
 

src/utils/image-utils.ts

@@ -41,7 +41,8 @@ const uploadedHandle = (
     sha: res.sha,
     path: res.path,
     deleting: false,
-    size: res.size
+    size: res.size,
+    deployed: true
   }
 
   img.uploadedImg = uploadedImg

src/utils/upload-utils.ts

@@ -63,6 +63,11 @@ $image-card-bottom-height = 58rem
         color var(--el-color-white)
         background var(--el-color-primary)
       }
+
+      &.disabled {
+        cursor not-allowed
+        pointer-events none
+      }
     }
   }
 
@@ -80,4 +85,11 @@ $image-card-bottom-height = 58rem
     box-shadow 0 0 6rem var(--shadow-color)
     cursor pointer
   }
+
+
+  .deploy-status-box {
+    position absolute
+    top 10rem
+    right 10rem
+  }
 }

src/views/imgs-management/components/image-card/image-card.styl

@@ -10,25 +10,33 @@
     v-contextmenu="{ type: ContextmenuEnum.img, img: imageObj }"
     ref="imageCardRef"
   >
+    <!-- 图片 -->
     <div class="image-card-top border-box">
       <el-image
         :src="imgUrl"
         fit="cover"
         loading="lazy"
-        @error="isSync = false"
         lazy
         :hide-on-click-modal="true"
         :preview-src-list="store.getters.getUploadAreaState.pressShiftKey ? [] : [imgUrl!]"
+        @error="setDeployStatus(false)"
+        @load="setDeployStatus(true)"
       />
     </div>
+
+    <!-- 图片名称 & 复制链接 -->
     <div class="image-card-bottom border-box">
       <!-- 文件名 -->
       <div class="filename text-ellipsis border-box">
         {{ imageObj.name }}
       </div>
 
       <!-- 复制图片链接 -->
-      <div class="copy-link text-ellipsis border-box" @click="copyImage(imageObj)">
+      <div
+        class="copy-link text-ellipsis border-box"
+        :class="{ disabled: noneDeployed }"
+        @click="copyImageLink(imageObj)"
+      >
         {{ $t('copy_link') }}
       </div>
     </div>
@@ -41,13 +49,20 @@
     >
       <el-icon :size="14" v-if="imageObj.checked"><IEpSelect /></el-icon>
     </div>
+
+    <!-- 部署状态 -->
+    <div class="deploy-status-box" v-if="noneDeployed">
+      <el-tag type="danger" disable-transitions>
+        {{ $t('settings_page.image_hosting_deploy.not_deployed') }}
+      </el-tag>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { store } from '@/stores'
-import { UploadedImageModel } from '@/common/model'
+import { ImageLinkTypeEnum, UploadedImageModel } from '@/common/model'
 import { copyImageLink, generateImageLink } from '@/utils'
 import { ContextmenuEnum } from '@/common/directive/types'
 
@@ -61,25 +76,32 @@ const props = defineProps({
     default: false
   }
 })
-const isShowOperateBtn = ref<boolean>(false)
-const isSync = ref<boolean>(true)
 
-const imgUrl = computed(() => generateImageLink(props.imageObj, isSync.value))
+const userSettings = computed(() => store.getters.getUserSettings).value
+const imgUrl = computed(() => generateImageLink(props.imageObj))
 
-const copyImage = (imageObj: UploadedImageModel) => {
-  imageObj.sync = isSync.value
-  copyImageLink(imageObj)
-}
+const noneDeployed = computed(() => {
+  return (
+    userSettings.imageLinkType.selected === ImageLinkTypeEnum.GitHubPages &&
+    props.imageObj.deployed === false
+  )
+})
+
+const isShowOperateBtn = ref<boolean>(false)
 
 const togglePick = (imageObj: UploadedImageModel) => {
   imageObj.checked = !imageObj.checked
-  imageObj.sync = isSync.value
   store.commit('IMAGE_CARD', { imageObj })
 }
 
 const onShiftClick = (imageObj: UploadedImageModel) => {
   togglePick(imageObj)
 }
+
+const setDeployStatus = (status: boolean) => {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.imageObj.deployed = status
+}
 </script>
 
 <style scoped lang="stylus">

src/views/imgs-management/components/image-card/image-card.vue

@@ -120,7 +120,7 @@
     <div
       class="after-upload-handle-container flex-center"
       v-if="imgObj.uploadStatus.progress === 100"
-      @click="copyImageUri(imgObj!)"
+      @click="copyImageLink(imgObj.uploadedImg!)"
     >
       {{ $t('copy_link') }}
     </div>
@@ -177,11 +177,7 @@ const userSettings = computed(() => store.getters.getUserSettings).value
 
 const renameInputRef = ref<any>(null)
 const loadingText = ref('')
-const copyImageUri = (imgObj: UploadImageModel) => {
-  const img = imgObj.uploadedImg!
-  img.sync = false
-  copyImageLink(img)
-}
+
 const fileNameOperateData = reactive({
   isAddHash: false,
   isAddPrefix: false,