chore(release): v2.2.0

README.md

@@ -18,17 +18,15 @@
 
 ## 产品亮点 | Highlights
 
-- **简单** - 无需下载，无需安装，不限平台，浏览器[在线使用](https://picx.xpoet.cn)。
-- **免费** - PicX 巧妙结合多种开源技术搭建，完全免费。
-- **安全** - Token 信息和图片数据均保存在用户端，安全可靠。
-
+- **简单** - 无需下载，无需安装，不限平台，浏览器在线使用。
+- **免费** - PicX 巧妙结合多种开源技术搭建而成，完全免费。
+- **安全** - Token、用户信息和图片数据均保存在用户端，安全可靠。
 
 ## 如何使用 | How to use
 
-只需选择或[新建](https://github.com/new)一个 GitHub 仓库，在 **[PicX 官网](https://picx.xpoet.cn)** 使用 GitHub Token 登录，完成仓库绑定后即可使用，如此简单~
-
-在线使用入口 >> **https://picx.xpoet.cn**
+只需 [创建一个 GitHub Token](https://github.com/settings/tokens/new)，在 [PicX 官网](https://picx.xpoet.cn) 使用 Token 完成图床配置即可。
 
+PicX 在线使用入口 >> **https://picx.xpoet.cn**
 
 ## 功能 | Features
 
@@ -42,7 +40,7 @@
 - [x] 支持 **图片压缩** (内置高效压缩算法，可配置在上传前自动压缩)
 - [x] 支持 **暗夜模式** (自由切换 / 自动切换)
 - [x] 支持 **PWA**
-- [ ] 设置图片水印
+- [ ] 配置图片水印
 - [ ] i18n
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "picx",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "private": false,
   "author": "XPoet <i@xpoet.cn>",
   "license": "AGPL-3.0",

src/components/site-count/site-count.vue

@@ -1,53 +1,44 @@
 <template>
-  <span class="site-count" ref="siteCountDom" v-show="isShow">
+  <span class="site-count" ref="siteCountDom" v-show="isShow && isProd">
     超过
     <span id="busuanzi_value_site_uv" class="uv" v-show="isuv"></span>
     <span id="busuanzi_value_site_pv" class="pv" v-show="!isuv"></span>
     次被使用
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref, Ref } from 'vue'
+<script setup lang="ts">
+import { computed, onMounted, ref, Ref } from 'vue'
 
-export default defineComponent({
-  name: 'site-count',
+const props = defineProps({
+  isuv: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  props: {
-    isuv: {
-      type: Boolean,
-      default: false
-    }
-  },
+const siteCountDom: Ref = ref<null | HTMLElement>(null)
+const isShow: Ref<boolean> = ref(false)
 
-  setup(props, ctx) {
-    const siteCountDom: Ref = ref<null | HTMLElement>(null)
-    const isShow: Ref<boolean> = ref(false)
+const isProd = computed(() => import.meta.env.MODE === 'production')
 
-    const getInnerText = (dom, isuv) => {
-      return dom.querySelector(`.${isuv ? 'u' : 'p'}v`).innerText
-    }
+const getInnerText = (dom: any, isuv: boolean) => {
+  return dom.querySelector(`.${isuv ? 'u' : 'p'}v`).innerText
+}
 
-    onMounted(() => {
-      const script: any = document.createElement('script')
-      script.async = true
-      script.src = '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js'
-      siteCountDom.value.appendChild(script)
+onMounted(() => {
+  const script: any = document.createElement('script')
+  script.async = true
+  script.src = '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js'
+  siteCountDom.value.appendChild(script)
 
-      script.onload = () => {
-        const tempT = setTimeout(() => {
-          if (getInnerText(siteCountDom.value, props.isuv)) {
-            isShow.value = true
-          }
-          clearTimeout(tempT)
-        }, 1500)
+  script.onload = () => {
+    const tempT = setTimeout(() => {
+      if (getInnerText(siteCountDom.value, props.isuv)) {
+        isShow.value = true
       }
-    })
-
-    return {
-      siteCountDom,
-      isShow
-    }
+      clearTimeout(tempT)
+    }, 1500)
   }
 })
 </script>

src/components/to-upload-image-card/to-upload-image-card.styl

@@ -34,6 +34,11 @@ $image-width = $info-item-height - ($info-item-border * 2)
     border 1rem solid var(--border-color)
     border-radius 6rem
 
+    &.no-border {
+      padding 2rem
+      border none
+    }
+
     &::-webkit-scrollbar {
       width 5rem
     }
@@ -58,8 +63,8 @@ $image-width = $info-item-height - ($info-item-border * 2)
         padding-left $image-width
         overflow hidden
         font-size 15rem
-        border $info-item-border solid var(--border-color)
         border-radius 5rem
+        box-shadow 0 0 3rem var(--shadow-hover-color)
         transition all 0.3s ease
 
         &.disable {
@@ -72,7 +77,7 @@ $image-width = $info-item-height - ($info-item-border * 2)
         }
 
         &:hover {
-          box-shadow 0 0 5rem var(--shadow-hover-color)
+          box-shadow 0 0 6rem var(--shadow-hover-color)
         }
 
         .left-image-box {

src/components/to-upload-image-card/to-upload-image-card.vue

@@ -14,7 +14,11 @@
       </div>
     </div>
 
-    <div class="body" v-if="toUploadImages.list.length">
+    <div
+      class="body"
+      :class="{ 'no-border': toUploadImages.list.length === 1 }"
+      v-if="toUploadImages.list.length"
+    >
       <ul class="image-uploading-info-box">
         <li
           class="image-uploading-info-item"
@@ -37,7 +41,7 @@
                 </span>
 
                 <span class="file-size item" :class="{ compressed: userSettings.isCompress }">
-                  {{ getFileSize(imgItem.fileInfo.size) }}
+                  {{ getFileSize(imgItem.fileInfo.size) }} KB
                 </span>
 
                 <span class="last-modified item">

src/components/upload-area/upload-area.styl

@@ -38,6 +38,7 @@
   .upload-area-tips {
     color #aaa
     text-align center
+    user-select none
 
     .icon {
       font-size 100rem

src/router/index.ts

@@ -4,6 +4,7 @@ import upload from '@/views/upload-image/upload-image.vue'
 import management from '@/views/imgs-management/imgs-management.vue'
 import tutorials from '@/views/use-tutorials/use-tutorials.vue'
 import settings from '@/views/my-settings/my-settings.vue'
+import help from '@/views/help-info/help-info.vue'
 
 const titleSuffix = ` | PicX 图床神器`
 
@@ -50,7 +51,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/help',
     name: 'help',
-    component: () => import('@/views/help-info/help-info.vue'),
+    component: help,
     meta: {
       title: `帮助反馈${titleSuffix}`
     }

src/style/variables.styl

@@ -43,7 +43,7 @@ $first-text-color = darken($default-text-color, 10%)
 $second-text-color = darken($default-text-color, 5%)
 $third-text-color = lighten($default-text-color, 30%)
 $fourth-text-color = lighten($default-text-color, 90%)
-$border-color = darken($background-color, 30%)
+$border-color = darken($background-color, 20%)
 $selection-color = lighten($primary-color, 10%)
 $shadow-color = rgba(0, 0, 0, 0.3)
 $shadow-hover-color = rgba(0, 0, 0, 0.28)

src/views/upload-image/upload-image.vue

@@ -28,15 +28,9 @@
       </div>
 
       <!-- 重置 & 上传 -->
-      <div class="row-item">
+      <div class="row-item" v-if="toUploadImage.list.length">
         <div class="content-box" style="text-align: right">
-          <el-button
-            :disabled="uploading"
-            v-if="toUploadImage.list.length"
-            plain
-            type="warning"
-            @click="resetUploadInfo"
-          >
+          <el-button :disabled="uploading" plain type="warning" @click="resetUploadInfo">
             重置 <span class="shortcut-key">{{ shortcutKey }} + A</span>
           </el-button>
           <el-button :loading="uploading" plain type="primary" @click="uploadImage">