feat: you can log in with GitHub OAuth authorization (XPoet#60)

.env.development

@@ -1,2 +1,17 @@
 # use pwa
 VITE_USE_PWA = false
+
+# PicX GitHub APP Client ID
+VITE_CLIENT_ID = Iv1.274fe6f96551b91f
+
+# PicX GitHub APP Redirect URI
+VITE_REDIRECT_URI = http://localhost:4000
+
+# PicX GitHub APP Authorize URI
+VITE_AUTHORIZE_URI = https://github.com/login/oauth/authorize
+
+# PicX GitHub APP Installations URL
+VITE_INSTALL_URL = https://github.com/apps/picx-app/installations/select_target
+
+# PicX GitHub APP Installations Target User URL
+VITE_INSTALL_URL_USER = https://github.com/apps/picx-app/installations/new/permissions?target_id=

.env.production

@@ -1,2 +1,17 @@
 # use pwa
 VITE_USE_PWA = true
+
+# PicX GitHub APP Client ID
+VITE_CLIENT_ID = Iv1.274fe6f96551b91f
+
+# PicX GitHub APP Redirect URI
+VITE_REDIRECT_URI = https://picx.xpoet.cn
+
+# PicX GitHub APP Authorize URI
+VITE_AUTHORIZE_URI = https://github.com/login/oauth/authorize
+
+# PicX GitHub APP Installations URL
+VITE_INSTALL_URL = https://github.com/apps/picx-app/installations/select_target
+
+# PicX GitHub APP Installations Target User URL
+VITE_INSTALL_URL_USER = https://github.com/apps/picx-app/installations/new/permissions?target_id=

README.md

@@ -18,43 +18,43 @@
 
 ## 亮点 | Highlights
 
-- 在线使用，无需下载，无需安装。
-- 操作简单，文档完善，持续维护。
-- 代码开源，数据安全，完全免费。
+- 在线使用、无需下载、无需安装。
+- 操作简单、文档完善、持续维护。
+- 代码开源、数据安全、完全免费。
 
 ## 如何使用 | How to use
 
-只需 [创建一个 GitHub Token](https://github.com/settings/tokens/new)，在 [PicX 官网](https://picx.xpoet.cn) 使用 Token 完成图床配置即可。
+通过 [GitHub OAuth 授权](https://picx-docs.xpoet.cn/docs/usage-guide/config.html#github-oauth-%E6%8E%88%E6%9D%83%E7%99%BB%E5%BD%95) 或 [填写 GitHub Token](https://picx-docs.xpoet.cn/docs/usage-guide/config.html#%E5%A1%AB%E5%86%99-github-token-%E7%99%BB%E5%BD%95) 登录到 [PicX](https://picx.xpoet.cn)，完成 [图床配置](https://picx-docs.xpoet.cn/docs/usage-guide/config.html#%E5%9B%BE%E5%BA%8A%E9%85%8D%E7%BD%AE) 后即可使用。
 
-**在线使用 https://picx.xpoet.cn**
+**在线使用入口 https://picx.xpoet.cn**
 
 ## 文档 | Documents
 
 **官方文档 https://picx-docs.xpoet.cn**
 
-通过阅读 **[快速开始](https://picx-docs.xpoet.cn/usage-guide/get-start.html)** 教程，可帮助你迅速上手 PicX。 
+通过阅读 **[快速开始](https://picx-docs.xpoet.cn/docs/usage-guide/get-start.html)** 教程，可帮助你迅速上手 PicX。 
 
 ## 功能 | Features
 
-- [x] 支持 **[拖拽](https://picx-docs.xpoet.cn/usage-guide/upload.html#%E6%8B%96%E6%8B%BD%E5%9B%BE%E7%89%87)**、**[复制粘贴](https://picx-docs.xpoet.cn/usage-guide/upload.html#%E5%A4%8D%E5%88%B6%E7%B2%98%E8%B4%B4)**、**[选择文件](https://picx-docs.xpoet.cn/usage-guide/upload.html#%E9%80%89%E6%8B%A9%E6%96%87%E4%BB%B6)** 等方式进行选择图片
-- [x] 支持图片 **[重命名](https://picx-docs.xpoet.cn/usage-guide/upload.html#%E9%87%8D%E5%91%BD%E5%90%8D)**、**[哈希化](https://picx-docs.xpoet.cn/usage-guide/upload.html#%E5%93%88%E5%B8%8C%E5%8C%96)**（确保图片名唯一）和 **[设置命名前缀](https://picx-docs.xpoet.cn/usage-guide/upload.html#%E5%89%8D%E7%BC%80%E5%91%BD%E5%90%8D)**
-- [x] 支持 **批量上传图片**、**[批量删除图片](https://picx-docs.xpoet.cn/usage-guide/management.html#%E5%88%A0%E9%99%A4-%E6%89%B9%E9%87%8F%E5%88%A0%E9%99%A4)** 和 **[批量复制图片链接](https://picx-docs.xpoet.cn/usage-guide/management.html#%E5%A4%8D%E5%88%B6-%E6%89%B9%E9%87%8F%E5%A4%8D%E5%88%B6%E9%93%BE%E6%8E%A5)**
+- [x] 支持 **[拖拽](https://picx-docs.xpoet.cn/docs/usage-guide/upload.html#%E6%8B%96%E6%8B%BD%E5%9B%BE%E7%89%87)**、**[复制粘贴](https://picx-docs.xpoet.cn/docs/usage-guide/upload.html#%E5%A4%8D%E5%88%B6%E7%B2%98%E8%B4%B4)**、**[选择文件](https://picx-docs.xpoet.cn/docs/usage-guide/upload.html#%E9%80%89%E6%8B%A9%E6%96%87%E4%BB%B6)** 等方式进行选择图片
+- [x] 支持上传时对图片 **[重命名](https://picx-docs.xpoet.cn/docs/usage-guide/upload.html#%E9%87%8D%E5%91%BD%E5%90%8D)**、**[哈希化](https://picx-docs.xpoet.cn/docs/usage-guide/upload.html#%E5%93%88%E5%B8%8C%E5%8C%96)**（确保图片名唯一）和 **[设置命名前缀](https://picx-docs.xpoet.cn/docs/usage-guide/upload.html#%E5%89%8D%E7%BC%80%E5%91%BD%E5%90%8D)**
+- [x] 支持 **批量上传图片**、**[批量删除图片](https://picx-docs.xpoet.cn/usage-guide/management.html#%E5%88%A0%E9%99%A4-%E6%89%B9%E9%87%8F%E5%88%A0%E9%99%A4)** 和 **[批量复制图片链接](https://picx-docs.xpoet.cn/docs/usage-guide/management.html#%E6%89%B9%E9%87%8F%E5%A4%8D%E5%88%B6%E5%A4%9A%E5%BC%A0%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5)**
 - [x] 支持图床 **多级目录** 管理 （创建多级目录 / 查看多级目录下图片）
-- [x] 支持 **[一键复制](https://picx-docs.xpoet.cn/usage-guide/upload.html#%E5%A4%8D%E5%88%B6%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5)** 图片链接和 **[自由转换 Markdown / HTML / BBCode 格式](https://picx-docs.xpoet.cn/usage-guide/settings.html#%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5%E6%A0%BC%E5%BC%8F%E8%AE%BE%E7%BD%AE)**
-- [x] 内置 **[多种图片链接规则](https://picx-docs.xpoet.cn/usage-guide/settings.html#%E9%80%89%E6%8B%A9%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5%E8%A7%84%E5%88%99)**（Staticaly、jsDelivr、ChinaJsDelivr 等）
-- [x] 支持 **[自定义配置图片链接规则](https://picx-docs.xpoet.cn/usage-guide/settings.html#%E9%85%8D%E7%BD%AE%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5%E8%A7%84%E5%88%99)**
-- [x] 支持 **[图片压缩](https://picx-docs.xpoet.cn/usage-guide/settings.html#%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%E8%AE%BE%E7%BD%AE)** (内置高效压缩算法，可配置在上传前自动压缩)
-- [x] 支持配置 **[图片水印](https://picx-docs.xpoet.cn/usage-guide/settings.html#%E5%9B%BE%E7%89%87%E6%B0%B4%E5%8D%B0%E8%AE%BE%E7%BD%AE)**
+- [x] 支持 **[一键复制](https://picx-docs.xpoet.cn/docs/usage-guide/upload.html#%E5%A4%8D%E5%88%B6%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5)** 图片链接和 **[自由转换 Markdown / HTML / BBCode 格式](https://picx-docs.xpoet.cn/docs/usage-guide/settings.html#%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5%E6%A0%BC%E5%BC%8F%E8%AE%BE%E7%BD%AE)**
+- [x] 内置 **[多种图片链接规则](https://picx-docs.xpoet.cn/docs/usage-guide/settings.html#%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5%E8%A7%84%E5%88%99%E9%85%8D%E7%BD%AE)**（GitHub、GitHub Pages、jsDelivr、Statically 等）
+- [x] 支持 **[自定义配置图片链接规则](https://picx-docs.xpoet.cn/docs/usage-guide/settings.html#%E9%85%8D%E7%BD%AE%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5%E8%A7%84%E5%88%99)**
+- [x] 支持 **[图片压缩](https://picx-docs.xpoet.cn/docs/usage-guide/settings.html#%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%E8%AE%BE%E7%BD%AE)** (内置高效压缩算法，可配置在上传前自动压缩)
+- [x] 支持配置 **[图片水印](https://picx-docs.xpoet.cn/docs/usage-guide/settings.html#%E5%9B%BE%E7%89%87%E6%B0%B4%E5%8D%B0%E8%AE%BE%E7%BD%AE)**
 - [x] 支持 **PWA**
-- [x] 支持 **[暗夜模式](https://picx-docs.xpoet.cn/usage-guide/settings.html#%E4%B8%BB%E9%A2%98%E8%AE%BE%E7%BD%AE)** (自动切换 / 自由切换)
+- [x] 支持 **[暗夜模式](https://picx-docs.xpoet.cn/docs/usage-guide/settings.html#%E4%B8%BB%E9%A2%98%E8%AE%BE%E7%BD%AE)** (自动切换 / 自由切换)
 - [x] i18n（中文简体、中文繁体、英文）
-- [x] 工具箱（[图片压缩](https://picx-docs.xpoet.cn/usage-guide/toolbox.html#%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9)、[图片转 Base64](https://picx-docs.xpoet.cn/usage-guide/toolbox.html#%E5%9B%BE%E7%89%87%E8%BD%AC-base64)、[图片水印](https://picx-docs.xpoet.cn/usage-guide/toolbox.html#%E5%9B%BE%E7%89%87%E6%B0%B4%E5%8D%B0)）
+- [x] 工具箱（[图片压缩](https://picx-docs.xpoet.cn/docs/usage-guide/toolbox.html#%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9)、[图片转 Base64](https://picx-docs.xpoet.cn/docs/usage-guide/toolbox.html#%E5%9B%BE%E7%89%87%E8%BD%AC-base64)、[图片水印](https://picx-docs.xpoet.cn/docs/usage-guide/toolbox.html#%E5%9B%BE%E7%89%87%E6%B0%B4%E5%8D%B0)）
 
 ## 贡献 | Contribution
 
 欢迎各种形式的贡献，包括但不限于：美化界面、增加功能、性能优化、修复 Bug、完善文档等。
 
-> [PicX 贡献指南](https://picx-docs.xpoet.cn/contribution-guide/contribution-guide.html)
+参与贡献必读：[PicX 贡献指南](https://picx-docs.xpoet.cn/docs/contribution-guide/contribution-guide.html)
 
 ### 致谢
 
@@ -70,7 +70,7 @@
 
 ## 赞赏 | Appreciation
 
-PicX 的更新迭代依靠作者工作之外的时间，维护不易，如果对你有帮助，欢迎赞赏作者，支持开源。
+PicX 的更新迭代依靠作者工作之外的时间，维护不易，如果对你有帮助，可以赞赏作者，支持开源。
 
 <img width="320" src="https://xpoet.cn/images/admire-code-wechat.webp" />
 

src/App.vue

@@ -16,6 +16,7 @@ import { getLanguageByRegion, getRegionByIP, setWindowTitle, throttle } from '@/
 import { ElementPlusSizeEnum, LanguageEnum } from '@/common/model'
 import MainContainer from '@/views/main-container/main-container.vue'
 import router from '@/router'
+import { initGithubAuthorize } from '@/views/picx-login/picx-login.util'
 
 const instance = getCurrentInstance()
 const store = useStore()
@@ -59,55 +60,53 @@ const setLanguage = (language: LanguageEnum) => {
   setWindowTitle(router.currentRoute.value.meta.title as string)
 }
 
-const initSetLanguage = () => {
-  // 初始化设置
-  setLanguage(userSettings.language)
-
-  // 根据 IP 自动设置
+const setLanguageByIP = () => {
   getRegionByIP().then((region) => {
     const language = getLanguageByRegion(region)
 
     if (language !== userSettings.language) {
       const confirmTxt = instance?.proxy?.$t(`confirm`, language)
-      const cancelTxt = instance?.proxy?.$t(`cancel`, language)
       const msgTxt = instance?.proxy?.$t(`toggle_language_msg`, language, {
         region: instance?.proxy?.$t(`region.${region}`, language),
         language: instance?.proxy?.$t(`language.${language}`, language)
       })
 
       const msgInstance = ElMessage({
-        customClass: 'toggle-language-message',
+        customClass: 'custom-message-container',
         duration: 0,
         offset: 20,
-        message: `<div class="content-box">
+        type: 'info',
+        message: `<div class="content-box language">
                     <span class="msg">${msgTxt}</span>
                     <spna class="btn-box">
                       <span class="confirm btn">${confirmTxt}</span>
-                      <span class="cancel btn">${cancelTxt}</span>
                     </spna>
                   </div>`,
-        dangerouslyUseHTMLString: true
+        dangerouslyUseHTMLString: true,
+        showClose: true
       })
 
       document
-        .querySelector('.toggle-language-message .content-box .confirm')
+        .querySelector('.custom-message-container .language .confirm')
         ?.addEventListener('click', () => {
           setLanguage(language)
           store.dispatch('SET_USER_SETTINGS', {
             language
           })
           msgInstance.close()
         })
-
-      document
-        .querySelector('.toggle-language-message .content-box .cancel')
-        ?.addEventListener('click', () => {
-          msgInstance.close()
-        })
     }
   })
 }
 
+const initSetLanguage = () => {
+  // 初始化设置
+  setLanguage(userSettings.language)
+
+  // 根据 IP 自动设置
+  setLanguageByIP()
+}
+
 const init = () => {
   elementPlusSizeHandle(window.innerWidth)
   window.addEventListener(
@@ -119,6 +118,7 @@ const init = () => {
 
   setThemeMode()
   initSetLanguage()
+  initGithubAuthorize()
 }
 
 watch(

src/auto-imports.d.ts

@@ -18,5 +18,6 @@ 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/repo.ts

@@ -116,7 +116,8 @@ export const createRepo = (token: string) => {
       description: INIT_REPO_DESC,
       private: false
     },
-    headers: { Authorization: `token ${token}` },
-    success422: true
+    headers: { Authorization: `Bearer ${token}` },
+    success422: true,
+    noShowErrorMsg: true
   })
 }

src/common/api/user.ts

@@ -9,7 +9,7 @@ export const getGitHubUserInfo = (token: string) => {
   return request({
     url: '/user',
     method: 'GET',
-    headers: { Authorization: `token ${token}` }
+    headers: { Authorization: `Bearer ${token}` }
   })
 }
 

src/common/constant/settings.ts

@@ -12,3 +12,8 @@ export const IMG_UPLOAD_MAX_SIZE: number = 30 // MB
  * 图片重命名最大长度
  */
 export const RENAME_MAX_LENGTH: number = 18
+
+/**
+ * GitHub APP 授权 Token 过期时间（8 小时）
+ */
+export const GITHUB_AUTHORIZE_EXPIRE: number = 8 * 60 * 60 * 1000

src/common/constant/storage.ts

@@ -5,3 +5,5 @@ export const LS_PICX_MANAGEMENT = `${PICX_PREFIX}MANAGEMENT`
 export const LS_PICX_SETTINGS = `${PICX_PREFIX}SETTINGS`
 export const SS_PICX_UPLOADED = `${PICX_PREFIX}UPLOADED`
 export const SS_TOOLBOX_IMG_LIST = `${PICX_PREFIX}TOOLBOX_IMG_LIST`
+export const SS_PICX_AUTHORIZATION = `${PICX_PREFIX}AUTHORIZATION`
+export const LS_PICX_AUTHORIZATION = `${PICX_PREFIX}AUTHORIZATION`

src/common/model/user-config.ts

@@ -36,6 +36,7 @@ export enum DirModeEnum {
 
 export interface UserConfigInfoModel {
   token: string
+  id: string
   owner: string
   email: string
   name: string

src/common/model/vite-config.ts

@@ -1,5 +1,10 @@
 export declare type Recordable<T = any> = Record<string, T>
 
 export declare interface ViteEnv {
-  VITE_USE_PWA?: boolean
+  VITE_USE_PWA?: boolean // 是否启用 PWA
+  VITE_CLIENT_ID?: string // PicX GitHub APP Client ID
+  VITE_REDIRECT_URI?: string // PicX GitHub APP Callback URL
+  VITE_AUTHORIZE_URI?: string // GitHub Authorize URI
+  VITE_INSTALL_URL?: string
+  VITE_INSTALL_URL_USER?: string
 }

src/components.d.ts

@@ -9,12 +9,12 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AuthorizationStatusBar: typeof import('./components/authorization-status-bar/authorization-status-bar.vue')['default']
     Base64Tool: typeof import('./components/tools/base64-tool/base64-tool.vue')['default']
     CloudSettingsBar: typeof import('./components/cloud-settings-bar/cloud-settings-bar.vue')['default']
     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']
-    Deploy: typeof import('./components/deploy/deploy.vue')['default']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -43,7 +43,6 @@ declare module '@vue/runtime-core' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
@@ -53,17 +52,21 @@ declare module '@vue/runtime-core' {
     FolderCard: typeof import('./components/folder-card/folder-card.vue')['default']
     GettingImages: typeof import('./components/getting-images/getting-images.vue')['default']
     HeaderContent: typeof import('./components/header-content/header-content.vue')['default']
+    IEpAim: typeof import('~icons/ep/aim')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpCaretLeft: typeof import('~icons/ep/caret-left')['default']
     IEpCheck: typeof import('~icons/ep/check')['default']
+    IEpCircleCheckFilled: typeof import('~icons/ep/circle-check-filled')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
     IEpCopyDocument: typeof import('~icons/ep/copy-document')['default']
     IEpDelete: typeof import('~icons/ep/delete')['default']
-    IEpInfoFilled: typeof import('~icons/ep/info-filled')['default']
+    IEpDocument: typeof import('~icons/ep/document')['default']
+    IEpLink: typeof import('~icons/ep/link')['default']
     IEpMoreFilled: typeof import('~icons/ep/more-filled')['default']
     IEpOperation: typeof import('~icons/ep/operation')['default']
     IEpRefresh: typeof import('~icons/ep/refresh')['default']
     IEpRemove: typeof import('~icons/ep/remove')['default']
+    IEpSwitch: typeof import('~icons/ep/switch')['default']
     IEpUpload: typeof import('~icons/ep/upload')['default']
     IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IEpUserFilled: typeof import('~icons/ep/user-filled')['default']

src/components/authorization-status-bar/authorization-status-bar.styl

@@ -0,0 +1,31 @@
+.authorization-status-box {
+  display flex
+  align-items center
+  justify-content space-between
+  padding 2rem 0 2rem 12rem
+  color var(--text-color-2)
+  font-size 14rem
+  border-color var(--text-color-4)
+  border-style solid
+  border-width 1rem
+  border-radius 6rem
+
+
+  &.success {
+    color var(--el-color-success)
+    background var(--el-color-success-light-9)
+    border-color var(--el-color-success)
+  }
+
+  &.warning {
+    color var(--el-color-warning)
+    background var(--el-color-warning-light-9)
+    border-color var(--el-color-warning)
+  }
+
+  &.error {
+    color var(--el-color-danger)
+    background var(--el-color-danger-light-9)
+    border-color var(--el-color-danger)
+  }
+}

src/components/authorization-status-bar/authorization-status-bar.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="authorization-status-box border-box"
+    :class="{
+      error: isAutoAuthorize && token && isAuthorizeExpire(),
+      warning: isAutoAuthorize && token && !installed,
+      success: isAutoAuthorize && token && !isAuthorizeExpire()
+    }"
+  >
+    <div>
+      <span v-if="isAutoAuthorize">
+        <span v-if="isAuthorizeExpire()">
+          {{ $t('authorization.text_4') }}
+        </span>
+        <span v-else>{{ $t('authorization.text_3') }}</span>
+      </span>
+      <span v-else>{{ $t('authorization.text_5') }}</span>
+    </div>
+
+    <el-tooltip placement="top" :content="$t('authorization.text_6')">
+      <el-button type="primary" text :icon="icon.IEpSwitch" @click="onOK">{{
+        $t('authorization.text_7')
+      }}</el-button>
+    </el-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, shallowRef, computed } from 'vue'
+import router from '@/router'
+import { store } from '@/stores'
+import { isAuthorizeExpire } from '@/views/picx-login/picx-login.util'
+
+const icon = shallowRef({ IEpCheck, IEpClose, IEpSwitch })
+
+const { token, isAutoAuthorize, installed } = computed(
+  () => store.getters.getGitHubAuthorizationInfo
+).value
+
+const onOK = () => {
+  router.push({ path: '/login', query: { jump: '0' } })
+}
+
+onMounted(() => {})
+</script>
+
+<style scoped lang="stylus">
+@import "authorization-status-bar.styl"
+</style>