feat: support org & fix

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,15 +51,16 @@ 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(() => {})
 }
 </script>
 
 <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>

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,15 +248,27 @@ function goDir() {
       background-position: center;
     }
   }
-
   .filename {
+    position: relative;
     line-height: 1.5;
     color: #000;
     overflow: hidden;
     text-overflow: ellipsis;
     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;
+    }
   }
 }
 

src/components/FileList.vue

@@ -1,3 +1,5 @@
+<!-- App -->
+
 <template>
   <div class="wrapper" :id="'file-' + fileName">
     <div class="left">
@@ -26,36 +28,27 @@
 </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: {
     type: Object as PropType<IFile>,
     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;

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>

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 {

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>

src/global.scss

@@ -93,3 +93,7 @@ a {
 .align-center {
   text-align: center;
 }
+
+.transparent {
+  opacity: 0;
+}

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>
       `
     }

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'