From 713bb1e6cb2b569d7d17c3a2358edc7858cc5690 Mon Sep 17 00:00:00 2001
From: xjh22222228 <xjh22222228@gmail.com>
Date: Wed, 19 Jan 2022 15:27:23 +0800
Subject: [PATCH] feat: support org & fix

---
 src/components/Action.vue   | 12 ++++---
 src/components/FileCard.vue | 34 ++++++++++++------
 src/components/FileList.vue | 24 ++++---------
 src/components/Footer.vue   |  5 +--
 src/components/Header.vue   |  4 ++-
 src/components/Sort.vue     | 41 +++++-----------------
 src/config/index.ts         | 13 -------
 src/global.scss             |  4 +++
 src/i18n/index.ts           |  6 ++--
 src/main.ts                 |  2 +-
 src/router/index.ts         |  7 ++--
 src/services/index.ts       | 46 +++++++++++++-----------
 src/store/index.ts          | 54 +++++++++++++++++++---------
 src/utils/http.ts           | 21 +++++------
 src/utils/index.ts          |  7 ++--
 src/utils/storage.ts        | 21 +++++++++++
 src/views/Home.vue          | 15 ++++----
 src/views/Login.vue         | 70 +++++++++++++++++++++++++------------
 src/views/NewFile.vue       | 18 +++-------
 19 files changed, 220 insertions(+), 184 deletions(-)
 delete mode 100644 src/config/index.ts
 create mode 100644 src/utils/storage.ts

diff --git a/src/components/Action.vue b/src/components/Action.vue
index e0d03eb..2a802c4 100644
--- a/src/components/Action.vue
+++ b/src/components/Action.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <el-dropdown placement="top" popper-class="nowrap-popper">
-      <img :src="`${baseUrl}favicon.png`" class="img" />
+      <div class="img" :style="{'background-image': `url(${baseUrl}favicon.png)`}"></div>
 
       <template #dropdown>
         <el-dropdown-menu>
@@ -23,11 +23,11 @@
 </template>
 
 <script lang="ts" setup>
-import config from '@/config'
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { ElMessageBox } from 'element-plus'
 import { useI18n } from 'vue-i18n'
+import { getLocalId, getLocalBranch } from '@/utils/storage'
 
 const { t } = useI18n()
 const baseUrl = import.meta.env.BASE_URL
@@ -51,8 +51,8 @@ const handleInfo = function() {
     title: t('info'),
     dangerouslyUseHTMLString: true,
     message: `
-      <p class="mb10">ID: <a href="https://github.com/${config.id}/tree/${config.branch}" target="_blank">${config.id}</a></p>
-      <p class="mb10">Branch: ${config.branch}</p>
+      <p class="mb10">ID: <a href="https://github.com/${getLocalId()}/tree/${getLocalBranch()}" target="_blank">${getLocalId()}</a></p>
+      <p class="mb10">Branch: ${getLocalBranch()}</p>
     `,
   }).catch(() => {})
 }
@@ -60,6 +60,7 @@ const handleInfo = function() {
 
 <style lang="scss" scoped>
 .wrapper {
+  z-index: 9;
   position: fixed;
   bottom: 150px;
   right: 30px;
@@ -75,8 +76,9 @@ const handleInfo = function() {
               0 6px 16px 0 rgba(0, 0, 0, 0.08),
               0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
-
 .img {
   width: 30px;
+  height: 30px;
+  background-size: 100%;
 }
 </style>
diff --git a/src/components/FileCard.vue b/src/components/FileCard.vue
index d6e7bad..60e0a43 100644
--- a/src/components/FileCard.vue
+++ b/src/components/FileCard.vue
@@ -197,20 +197,24 @@ function goDir() {
   cursor: pointer;
   @keyframes actived {
     0% {
-      border-color: red;
-      border-width: 3px;
+      opacity: 1;
+    }
+    99% {
+      opacity: 1;
     }
     100% {
-      border-color: #eee;
-      border-width: 3px;
+      opacity: 0;
     }
   }
-  &.actived .file-icon {
+  &.actived .filename::after {
     animation: actived 10s linear;
   }
 
   &:hover {
-    background: #f4f4f4;
+    background: rgba($color: #000000, $alpha: .02);
+    .filename::after {
+      top: 0;
+    }
   }
 
   .file-icon {
@@ -219,22 +223,18 @@ function goDir() {
     height: 80px;
     border: 1px solid #eee;
     cursor: pointer;
-
     &.no-load:after {
       display: none;
     }
-
     &.error:after {
       background: #fff url("~@/assets/error.svg") no-repeat 100% 100%;
       background-position: center;
     }
-
     img {
       width: 100%;
       height: 100%;
       object-fit: contain;
     }
-
     &:after {
       content: "";
       z-index: 9;
@@ -248,8 +248,8 @@ function goDir() {
       background-position: center;
     }
   }
-
   .filename {
+    position: relative;
     line-height: 1.5;
     color: #000;
     overflow: hidden;
@@ -257,6 +257,18 @@ function goDir() {
     white-space: nowrap;
     font-size: 14px;
     margin-top: 8px;
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      top: 60%;
+      left: -0.1em;
+      right: -0.1em;
+      bottom: 0;
+      transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
+      background-color: rgba(79, 192, 141, 0.5);
+      opacity: 0;
+    }
   }
 }
 
diff --git a/src/components/FileList.vue b/src/components/FileList.vue
index 576cc10..f83a3c6 100644
--- a/src/components/FileList.vue
+++ b/src/components/FileList.vue
@@ -1,3 +1,5 @@
+<!-- App -->
+
 <template>
   <div class="wrapper" :id="'file-' + fileName">
     <div class="left">
@@ -26,15 +28,14 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref } from 'vue'
+import type { PropType } from 'vue'
+import type { IFile } from '@/store'
 import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
-import { getCdn, CDN, updateFileContent } from '@/services'
-import type { IFile } from '@/store'
-import { getBase64, getFileUrl, isImage } from '@/utils'
+import { updateFileContent } from '@/services'
+import { getBase64, getFileUrl } from '@/utils'
 import { ElMessage } from 'element-plus'
 import { isSuccess } from '@/utils/http'
-import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   data: {
@@ -42,20 +43,12 @@ const props = defineProps({
     default: () => ({}),
   }
 })
-const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
-const hasError = ref(false)
-const imgLoad = ref(true)
 const fileName = props.data.name.toLowerCase()
 const fileType = props.data.type
 const filePath = props.data.path
-const cdn1 = getCdn(CDN.Jsdelivr, filePath, false)
-const cdn2 = getCdn(CDN.Github, filePath, false)
-const markdown = `![](${cdn1})`
-const html = `<a href="${cdn1}" target="_blank"><img src="${cdn1}" alt="" /></a>`
-const isImg = isImage(fileName)
 const isFile = fileType !== 'dir'
 const fileUrl = getFileUrl(props.data)
 
@@ -102,7 +95,6 @@ function goDir() {
   &:active {
     background-color: #f2f2f2;
   }
-
   .image {
     width: 50px;
     height: 50px;
@@ -116,20 +108,16 @@ function goDir() {
     margin-left: 7px;
     padding-top: 5px;
     margin-right: 20px;
-
     .dir {
       margin-top: 5px;
       font-size: 16px;
     }
-
     .size {
       color: #666;
     }
-
     div {
       font-size: 14px;
     }
-
     .file-input {
       position: absolute;
       top: 0;
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 169bffd..78f1493 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -7,12 +7,12 @@
         class="ch"
       >
         Bo💣mb
-        <img class="icon" src="@/assets/github.svg" alt="">
+        <img class="icon" src="@/assets/github.svg" />
       </a>
       v{{ version }} MIT
     </div>
 
-    Copyright © 2021 - {{ year }} boomb.com
+    Copyright © 2021 - {{ year }} boomb.cn
   </footer>
 </template>
 
@@ -39,6 +39,7 @@ const year = new Date().getFullYear()
     width: 25px;
     height: 25px;
     vertical-align: top;
+    pointer-events: none;
   }
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 06656da..6955d3d 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -120,11 +120,13 @@ function onCommand(command: string) {
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #dbdbdb;
-
   .right {
     margin-right: 20px;
     display: flex;
     align-items: center;
+    .el-avatar {
+      border: 1px solid #f2f2f2;
+    }
   }
 
   .file {
diff --git a/src/components/Sort.vue b/src/components/Sort.vue
index dc03543..b13ebf3 100644
--- a/src/components/Sort.vue
+++ b/src/components/Sort.vue
@@ -2,43 +2,37 @@
   <el-dropdown placement="bottom-end" :hide-on-click="false">
     <span class="sorter">
       {{ sortType === SortType.FileSize ? t('fileSize') : t('fileName') }}
-      <i :class="isUp ? 'el-icon-top' : 'el-icon-bottom'"></i>
+
+      <el-icon v-if="isUp"><top /></el-icon>
+      <el-icon v-else><bottom /></el-icon>
     </span>
 
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item
-          :icon="Check"
-          class="item"
-          :class="{active: isUp}"
           @click="isUp = true"
         >
+          <el-icon :class="{transparent: !isUp}"><Check /></el-icon>
           {{ t('asc' )}}
         </el-dropdown-item>
         <el-dropdown-item
-          :icon="Check"
-          class="item"
-          :class="{active: !isUp}"
           @click="isUp = false"
         >
+          <el-icon :class="{transparent: isUp}"><Check /></el-icon>
           {{ t('desc' )}}
         </el-dropdown-item>
 
         <el-dropdown-item
           divided
-          :icon="Check"
-          class="item"
           @click="sortType = SortType.FileSize"
-          :class="{active: sortType === SortType.FileSize}"
         >
+          <el-icon :class="{transparent: sortType !== SortType.FileSize}"><Check /></el-icon>
           {{ t('fileSize' )}}
         </el-dropdown-item>
         <el-dropdown-item
-          :icon="Check"
-          class="item"
           @click="sortType = SortType.FileName"
-          :class="{active: sortType === SortType.FileName}"
         >
+          <el-icon :class="{transparent: sortType !== SortType.FileName}"><Check /></el-icon>
           {{ t('fileName' )}}
         </el-dropdown-item>
       </el-dropdown-menu>
@@ -47,13 +41,13 @@
 </template>
 
 <script lang="ts" setup>
+import type { IFile } from '@/store'
 import { computed, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import type { IFile } from '@/store'
 import { useI18n } from 'vue-i18n'
 import { getCharCode } from '@/utils'
-import { Check } from '@element-plus/icons-vue'
+import { Check, Top, Bottom } from '@element-plus/icons-vue'
 
 enum SortType {
   FileSize = 1, // 文件大小
@@ -107,25 +101,8 @@ watch([sortType, isUp], () => {
   transition: all .1s linear;
   color: #000;
   font-weight: bold;
-
   &:hover {
     background: #f2f2f2;
   }
 }
-
-.item {
-
-  ::deep(.el-icon-check) {
-    opacity: 0 !important;
-  }
-}
-
-.active {
-  color: #2980ff;
-  font-weight: bold;
-
-  ::deep(i.el-icon-check) {
-    opacity: 1 !important;
-  }
-}
 </style>
diff --git a/src/config/index.ts b/src/config/index.ts
deleted file mode 100644
index 0725398..0000000
--- a/src/config/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright 2021 the xiejiahe. All rights reserved. MIT license.
-
-export default {
-  id: window.localStorage.getItem('id') || '',
-
-  repo: window.localStorage.getItem('repo') || '',
-
-  branch: window.localStorage.getItem('branch') || '',
-
-  token: window.localStorage.getItem('token') || '',
-
-  isLogin: !!window.localStorage.getItem('isLogin')
-}
diff --git a/src/global.scss b/src/global.scss
index fffb5ea..ad4e97a 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -93,3 +93,7 @@ a {
 .align-center {
   text-align: center;
 }
+
+.transparent {
+  opacity: 0;
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index e246909..e7ded65 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -49,7 +49,7 @@ export default createI18n({
       copyed: 'Copy successfully',
       description: `
         <p class="mb10"><a href="https://github.com/xjh22222228/boomb" target="_blank">Boomb</a> is used to easily manage your Github storage gallery.</p>
-        <p class="mb10">Some friends will use it as a picture bed. This is entirely a matter of your personal choice and has nothing to do with the author.</p>
+        <p class="mb10">If you use it reasonably, it can be used as a picture bed and file sharing. Isn't it good!</p>
         <p class="mb10">Share in the spirit of open source, if it helps you, <a href="https://github.com/xjh22222228/boomb" target="_blank">Star</a> will support it!</p>
       `
     },
@@ -88,8 +88,8 @@ export default createI18n({
       editFile: '编辑此文件',
       copyed: '复制成功',
       description: `
-        <p class="mb10"><a href="https://github.com/xjh22222228/boomb" target="_blank">Boomb</a> 是用于轻松管理您的 Github 存储图库。</p>
-        <p class="mb10">有的小伙伴会把它当做图床使用，这完全是您个人选择问题，与作者无任何关系。</p>
+        <p class="mb10"><a href="https://github.com/xjh22222228/boomb" target="_blank">Boomb</a> 用于轻松管理您的 Github 存储图库。</p>
+        <p class="mb10">如果您合理的使用，可以当做图床、文件分享，不错吧！</p>
         <p class="mb10">以开源的精神分享，如果对您有帮助，<a href="https://github.com/xjh22222228/boomb" target="_blank">Star</a> 支持一下！</p>
       `
     }
diff --git a/src/main.ts b/src/main.ts
index ae7d292..6f03d27 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-// Copyright 2021 the xiejiahe. All rights reserved. MIT license.
+// Copyright 2021-2022 the xiejiahe. All rights reserved. MIT license.
 
 import 'element-plus/dist/index.css'
 import 'normalize.css'
diff --git a/src/router/index.ts b/src/router/index.ts
index b844486..915aaed 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,12 +1,12 @@
-// Copyright 2021 the xiejiahe. All rights reserved. MIT license.
+// Copyright 2021-2022 the xiejiahe. All rights reserved. MIT license.
 
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Home from '@/views/Home.vue'
 import Login from '@/views/Login.vue'
 import NewFile from '@/views/NewFile.vue'
 import Mobile from '@/views/Mobile.vue'
-import config from '@/config'
 import { isMobile } from '@/utils'
+import { getLocalIsLogin } from '@/utils/storage'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -42,9 +42,8 @@ const router = createRouter({
   routes
 })
 
-const { isLogin } = config
-
 router.beforeEach((to) => {
+  const isLogin = getLocalIsLogin()
   if (to.name === 'Login' && isLogin) {
     router.replace('/')
   } else {
diff --git a/src/services/index.ts b/src/services/index.ts
index bf5a09a..e144921 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -1,16 +1,17 @@
-// Copyright 2021 the xiejiahe. All rights reserved. MIT license.
+// Copyright 2021-2022 the xiejiahe. All rights reserved. MIT license.
 // https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api#authentication
 // https://docs.github.com/en/rest/reference
 // https://docs.github.com/en/rest/reference/permissions-required-for-github-apps
 
-import config from '@/config'
 import { get, put, del, isSuccess } from '@/utils/http'
 import { encode } from 'js-base64'
 import type { IFile } from '@/store'
 import { ElMessage } from 'element-plus'
+import { getLocalId, getLocalRepo, getLocalBranch } from '@/utils/storage'
+import store from '@/store'
 
-const id = config.id + '/' + config.repo
-const author = config.id
+const id = () => `${getLocalId()}/${getLocalRepo()}`
+const author = () => getLocalId()
 
 // 获取目录列表
 export function readDir(name: string) {
@@ -20,21 +21,26 @@ export function readDir(name: string) {
   if (name.startsWith('//')) {
     name = name.slice(1)
   }
-  return get(`/repos/${id}/contents${name}`, {
+  return get(`/repos/${id()}/contents${name}`, {
     params: {
-      ref: config.branch
+      ref: getLocalBranch()
     }
   })
 }
 
 // 获取用户信息
 export function getUser() {
-  return get(`/users/${author}`)
+  return get(`/users/${author()}`)
 }
 
 // 获取用户下所有仓库
 export function getRepos() {
-  return get(`/users/${author}/repos?page=1&per_page=999999`)
+  return get(`${store.state.user.repos_url}?page=1&per_page=999999`)
+}
+
+// 获取用户下所有组织
+export function getOrgs() {
+  return get(`${store.state.user.organizations_url}?page=1&per_page=999999`)
 }
 
 // 验证Token
@@ -49,9 +55,9 @@ export function verifyToken(author: string, token: string) {
 // 获取文件信息
 export function getFileContent(
   path: string,
-  branch: string = config.branch
+  branch: string = getLocalBranch()
 ) {
-  return get(`/repos/${id}/contents/${path}`, {
+  return get(`/repos/${id()}/contents/${path}`, {
     params: {
       ref: branch
     }
@@ -69,11 +75,11 @@ export async function updateFileContent(
   file: IFile,
   {
     content,
-    branch = config.branch,
+    branch = getLocalBranch(),
     isEncode = true
   }: Iupdate
 ) {
-  return put(`/repos/${id}/contents/${file.path}`, {
+  return put(`/repos/${id()}/contents/${file.path}`, {
     message: `boomb(update): ${file.path}`,
     branch,
     content: isEncode ? encode(content) : content,
@@ -86,7 +92,7 @@ export async function createFile(
   {
     content,
     path,
-    branch = config.branch,
+    branch = getLocalBranch(),
     isEncode = true
   }: Iupdate,
 ) {
@@ -94,7 +100,7 @@ export async function createFile(
     path = path.replace(/^\/*/g, '')
   }
 
-  return put(`/repos/${id}/contents/${path}`, {
+  return put(`/repos/${id()}/contents/${path}`, {
     message: `boomb(create): ${path}`,
     branch,
     content: isEncode ? encode(content) : content,
@@ -127,9 +133,9 @@ export async function deleteDir(dirPath: string) {
 
 // 删除文件
 export async function deleteFile(file: IFile) {
-  const res = await del(`/repos/${id}/contents/${file.path}`, {
+  const res = await del(`/repos/${id()}/contents/${file.path}`, {
     params: {
-      ref: config.branch,
+      ref: getLocalBranch(),
       message: `boomb(delete): ${file.path}`,
       sha: file.sha
     }
@@ -148,7 +154,7 @@ export enum CDN {
 }
 
 // 获取文件CDN
-export function getCdn(cdn: CDN, path: string, isCache: boolean = true) {
+export function getCdn(cdnType: CDN, path: string, isCache: boolean = true) {
   if (path === '/' || !path) {
     path = ''
   }
@@ -158,13 +164,13 @@ export function getCdn(cdn: CDN, path: string, isCache: boolean = true) {
 
   let url = ''
 
-  switch (cdn) {
+  switch (cdnType) {
     case CDN.Github:
-      url = `https://raw.githubusercontent.com/${id}/${config.branch}/${path}`
+      url = `https://raw.githubusercontent.com/${id()}/${getLocalBranch()}/${path}`
       break
 
     case CDN.Jsdelivr:
-      url = `https://cdn.jsdelivr.net/gh/${id}@${config.branch}/${path}`
+      url = `https://cdn.jsdelivr.net/gh/${id()}@${getLocalBranch()}/${path}`
       break
   }
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 4994997..6a306ef 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,8 +1,7 @@
-// Copyright 2021 the xiejiahe. All rights reserved. MIT license.
+// Copyright 2021-2022 the xiejiahe. All rights reserved. MIT license.
 
 import { nextTick } from 'vue'
 import bytes from 'bytes'
-import config from '@/config'
 import router from '@/router'
 import { createStore } from 'vuex'
 import {
@@ -12,7 +11,8 @@ import {
   deleteFile,
   getBranchAll,
   deleteDir,
-  getRepos
+  getRepos,
+  getOrgs
 } from '@/services'
 import { isSuccess } from '@/utils/http'
 import { getBase64, getFileEncode, getExtname } from '@/utils'
@@ -20,15 +20,21 @@ import { RouteLocationNormalizedLoaded } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { FileEncode } from '@/types'
 import { v4 as uuidv4 } from 'uuid'
+import { getLocalToken, getLocalIsLogin } from '@/utils/storage'
 
 // Timestamp conflict
 let n = 0;
 
-type IUser = {
+// user or org
+export type IUser = {
   login: string,
   id: number
-  name: string
   avatar_url: string
+  repos_url: string
+  organizations_url: string
+  name?: string
+  type?: 'User'|'Organization'
+  [key: string]: any
 }
 
 export type IFile = {
@@ -51,28 +57,26 @@ export interface IRepo {
 }
 
 type State = {
+  userAll: IUser[],
   user: IUser
   token: string|null
   isLogin: boolean
-  cacheDir: {
-    [path: string]: IFile[]
-  },
+  cacheDir: Record<string, IFile[]>
   branchAll: IBranch[],
   repos: IRepo[],
   loading: boolean
 }
 
+const localUser = window.localStorage.getItem('user')
+const defUser = localUser ? JSON.parse(localUser) : null
+
 export default createStore<State>({
   state() {
     return {
-      user: {
-        name: '',
-        avatar_url: '',
-        login: '',
-        id: 0,
-      },
-      token: config.token,
-      isLogin: config.isLogin,
+      userAll: [],
+      user: defUser || {},
+      token: getLocalToken(),
+      isLogin: getLocalIsLogin(),
 
       // 缓存目录列表
       cacheDir: {},
@@ -94,6 +98,7 @@ export default createStore<State>({
   mutations: {
     saveUser(state, user: IUser) {
       state.user = user
+      window.localStorage.setItem('user', JSON.stringify(user))
     },
 
     saveDir(state, { data, path }) {
@@ -111,6 +116,15 @@ export default createStore<State>({
     saveRepos(state, repos: IRepo[]) {
       state.repos = repos
     },
+
+    saveUserAll(state, users: IUser[]) {
+      users.forEach((user: IUser) => {
+        state.userAll.push({
+          type: 'Organization',
+          ...user
+        })
+      })
+    },
   },
 
   actions: {
@@ -130,6 +144,13 @@ export default createStore<State>({
       }
     },
 
+    async getOrgs({ commit }) {
+      const res = await getOrgs()
+      if (isSuccess(res.status)) {
+        commit('saveUserAll', res.data)
+      }
+    },
+
     async getDir({ commit, state }, path: string) {
       if (!state.isLogin) return
 
@@ -152,6 +173,7 @@ export default createStore<State>({
               return item
             })
             .sort((a: IFile, b: IFile) => a.size - b.size)
+            .filter((item: IFile) => !(item.type === 'file' && item.name === '.gitkeep'))
 
           commit('saveDir', {
             data,
diff --git a/src/utils/http.ts b/src/utils/http.ts
index 9bc5f91..f0d7a09 100644
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -1,12 +1,12 @@
-// Copyright 2021 the xiejiahe. All rights reserved. MIT license.
+// Copyright 2021-2022 the xiejiahe. All rights reserved. MIT license.
 
 import axios from 'axios'
 import NProgress from 'nprogress'
-import config from '@/config'
 import store from '@/store'
 import { ElNotification } from 'element-plus'
+import { getLocalToken } from '@/utils/storage'
 
-const token = config.token
+const getToken = () => getLocalToken()
 const defaultTitle = document.title
 
 function startLoad() {
@@ -30,16 +30,9 @@ function stopLoad() {
   }
 }
 
-const headers: Record<string, string> = {}
-
-if (token) {
-  headers.Authorization = `token ${token}`
-}
-
 const instance = axios.create({
   baseURL: 'https://api.github.com',
   timeout: 600000 * 3, // 30 minute
-  headers
 })
 
 interface ResponseData {
@@ -51,6 +44,14 @@ interface ResponseData {
 instance.interceptors.request.use(config => {
   startLoad()
 
+  const token = getToken()
+  if (token) {
+    config.headers = {
+      ...config.headers,
+      Authorization: `token ${token}`
+    }
+  }
+
   // 不缓存
   if (config.method === 'get') {
     config.params = {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ec0757d..63bea9a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,10 +1,10 @@
 import Clipboard from 'clipboard'
+import i18n from '@/i18n'
 import { FileEncode } from '@/types'
 import type { IFile } from '@/store'
 import { getCdn, CDN } from '@/services'
-import i18n from '@/i18n'
-import config from '@/config'
 import { ElMessage } from 'element-plus'
+import { getLocalId, getLocalBranch } from '@/utils/storage'
 
 let clipboard: Clipboard|null
 
@@ -164,6 +164,5 @@ export function generateBreadcrumb(path: string = ''): {
 
 export function getEditFileUrl(path: string): string {
   path = path[0] === '/' ? path.slice(1) : path
-  const { id, branch } = config
-  return `https://github.com/${id}/edit/${branch}/${path}`
+  return `https://github.com/${getLocalId()}/edit/${getLocalBranch()}/${path}`
 }
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 0000000..97c8bc1
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,21 @@
+// Copyright 2021-2022 the xiejiahe. All rights reserved. MIT license.
+
+export function getLocalId(): string {
+  return window.localStorage.getItem('id') || ''
+}
+
+export function getLocalRepo(): string {
+  return window.localStorage.getItem('repo') || ''
+}
+
+export function getLocalBranch(): string {
+  return window.localStorage.getItem('branch') || ''
+}
+
+export function getLocalToken(): string {
+  return window.localStorage.getItem('token') || ''
+}
+
+export function getLocalIsLogin(): boolean {
+  return !!window.localStorage.getItem('isLogin')
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e67f849..42e1d65 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -68,11 +68,12 @@
 </template>
 
 <script lang="ts" setup>
+import type { Events } from 'vue'
+import type { IFile } from '@/store'
 import Viewer from 'viewerjs';
-import { Events, ref, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
-import type { IFile } from '@/store'
 import { initClipboard, generateBreadcrumb } from '@/utils';
 import { useI18n } from 'vue-i18n'
 
@@ -111,7 +112,7 @@ function initViewer() {
 async function copyUpload(event: Events['onCopy']) {
   const items = event.clipboardData?.items
   if (!items) return
-  let files: File[] = []
+  const files: File[] = []
 
   if (items.length) {
     for (let i = 0; i < items.length; i++) {
@@ -122,12 +123,12 @@ async function copyUpload(event: Events['onCopy']) {
     }
   }
 
-  for (let file of files) {
+  files.forEach(file => {
     store.dispatch('createFile', {
       file,
       route
     })
-  }
+  })
 }
 
 function handleDrop(e: Events['onDrop']) {
@@ -137,7 +138,7 @@ function handleDrop(e: Events['onDrop']) {
 
   const files = e.dataTransfer!.files as any
   if (files) {
-    files.forEach((file: Record<string, any>) => {
+    files.forEach?.((file: Record<string, any>) => {
       // 目录 type 为空
       if (file.type) {
         store.dispatch('createFile', {
@@ -219,7 +220,6 @@ const paths = computed(() =>
 <style lang="scss" scoped>
 .home {
   flex: 1;
-
   &.active {
     border: 3px dashed #1890ff;
   }
@@ -227,7 +227,6 @@ const paths = computed(() =>
   .mod-wrapper {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
     margin-top: 50px;
 
     ::v-deep(.el-checkbox) {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 920aca0..f1078e4 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -11,12 +11,22 @@
       </h2>
 
       <div class="form" v-if="token">
-        <el-input
+        <el-select
           v-model="id"
-          placeholder="ID"
-          class="mb20"
-          disabled
-        />
+          class="w100 mb20"
+          placeholder="Select ID"
+          @change="getRepos"
+          :disabled="loading"
+          filterable
+        >
+          <el-option
+            v-for="item in userAll"
+            :key="item.login"
+            :label="`${item.type}: ${item.login}`"
+            :value="item.login"
+          >
+          </el-option>
+        </el-select>
 
         <el-select
           v-model="repo"
@@ -74,12 +84,11 @@
 </template>
 
 <script lang="ts" setup>
-import config from '@/config'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { verifyToken, getAccessToken } from '@/services'
-import type { IBranch, IRepo } from '@/store'
+import type { IBranch, IRepo, IUser } from '@/store'
 import { useI18n } from 'vue-i18n'
 import { isSuccess } from '@/utils/http'
 
@@ -94,16 +103,19 @@ const baseUrl = import.meta.env.BASE_URL
 
 const { t } = useI18n()
 const route = useRoute()
+const router = useRouter()
 const store = useStore()
-const id = ref(config.id)
-const repo = ref(config.repo)
-const branch = ref(config.branch)
-const token = ref(config.token)
+const id = ref('')
+const repo = ref('')
+const branch = ref('')
+const token = ref('')
 const loading = ref(false)
 const authLoad = ref(false)
 const valid = computed<boolean>(() => {
   return Boolean(id.value && repo.value && branch.value)
 })
+
+const userAll = computed<IUser[]>(() => store.state.userAll)
 const branchAll = computed<IBranch[]>(() => store.state.branchAll)
 const repos = computed<IRepo[]>(() => store.state.repos)
 
@@ -124,6 +136,9 @@ const handleLogin = function() {
     window.localStorage.setItem('branch', branch.value)
     window.localStorage.setItem('repo', repo.value)
     window.localStorage.setItem('isLogin', 'true')
+    window.localStorage.setItem('user', JSON.stringify(store.state.user))
+    window.localStorage.setItem('id', id.value)
+    window.localStorage.setItem('token', token.value)
     window.location.reload()
   }).finally(() => {
     loading.value = false
@@ -134,6 +149,7 @@ const handleLogin = function() {
 function getBranch() {
   const userRepo = `${id.value}/${repo.value}`
   if (id.value && repo.value) {
+    branch.value = ''
     loading.value = true
     store.dispatch('getBranchAll', userRepo).finally(() => {
       loading.value = false
@@ -145,12 +161,19 @@ function getRepos() {
   if (!id.value || !token.value) {
     return
   }
-  loading.value = true
-  store.dispatch('getRepos').then(() => {
-    getBranch()
-  }).finally(() => {
-    loading.value = false
-  })
+  const user = userAll.value.find((u: IUser) => u.login === id.value)
+  if (user) {
+    repo.value = ''
+    branch.value = ''
+    window.localStorage.setItem('id', id.value)
+    store.commit('saveUser', user)
+    loading.value = true
+    store.dispatch('getRepos').then(() => {
+      getBranch()
+    }).finally(() => {
+      loading.value = false
+    })
+  }
 }
 
 // Default branch
@@ -176,18 +199,19 @@ onMounted(() => {
           id.value = user.login
           token.value = accessToken
           store.commit('saveUser', user)
-          window.localStorage.setItem('token', accessToken)
-          window.localStorage.setItem('user', JSON.stringify(user))
+          store.commit('saveUserAll', [user])
           window.localStorage.setItem('id', user.login)
-          window.location.replace('/login')
+          window.localStorage.setItem('token', accessToken)
+
+          store.dispatch('getOrgs')
+          getRepos()
+          router.replace('/login')
         }
       })
       .finally(() => {
         authLoad.value = false
       })
   }
-
-  getRepos()
 })
 </script>
 
diff --git a/src/views/NewFile.vue b/src/views/NewFile.vue
index 0572086..7ca5268 100644
--- a/src/views/NewFile.vue
+++ b/src/views/NewFile.vue
@@ -22,14 +22,12 @@
 
     <div class="toolbar">
       <el-button
-        size="small"
         @click="handleCancel"
       >
         {{ t('cancel' )}}
       </el-button>
 
       <el-button
-        size="small"
         type="primary"
         @click="handlePublish"
         :loading="loading"
@@ -96,7 +94,7 @@ const handleCancel = function() {
   top: 0;
   left: 0;
   right: 0;
-  bottom: 45px;
+  bottom: 0;
   background: #fff;
   display: flex;
   flex-direction: column;
@@ -105,7 +103,6 @@ const handleCancel = function() {
     border-bottom: 1px solid #eee;
     display: flex;
     padding: 5px 10px;
-
     .input {
       margin-right: 10px;
     }
@@ -113,26 +110,21 @@ const handleCancel = function() {
 
   .textarea {
     flex: 1;
-
     textarea {
       height: 100% !important;
       font-size: 18px;
     }
   }
 
-  .check {
-    margin-top: 10px;
-  }
-
   .toolbar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    height: 40px;
     padding: 7px 15px;
     text-align: right;
     border-top: 1px solid #eee;
     background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
   }
 }
 </style>