Merge pull request #275 from XPoet/dev

Release new version

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

package.json

@@ -1,6 +1,6 @@
 {
  "name": "picx",
- "version": "2.4.0",
+ "version": "2.5.0",
  "private": false,
  "author": "XPoet <[email protected]>",
  "license": "AGPL-3.0",

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>