✨ Feature: optimize filename display

2026-06-08 17:20:00 +08:00 · 2023-08-15 00:00:27 -07:00
parent e8189b0837
commit 2336483927
6 changed files with 65 additions and 116 deletions
--- a/src/renderer/components/ImageLocal.vue
+++ b/src/renderer/components/ImageLocal.vue
@@ -1,76 +0,0 @@
-<template>
-  <el-image
-    :src="isShowThumbnail && item.isImage ?
-      base64Image
-      : require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
-    fit="contain"
-    style="height: 100px;width: 100%;margin: 0 auto;"
-  >
-    <template #placeholder>
-      <el-icon>
-        <Loading />
-      </el-icon>
-    </template>
-    <template #error>
-      <el-image
-        :src="require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
-        fit="contain"
-        style="height: 100px;width: 100%;margin: 0 auto;"
-      />
-    </template>
-  </el-image>
-</template>
-
-<script lang="ts" setup>
-import { ref, onBeforeMount, watch } from 'vue'
-import { getFileIconPath } from '@/manage/utils/common'
-import { Loading } from '@element-plus/icons-vue'
-import fs from 'fs-extra'
-import mime from 'mime-types'
-import path from 'path'
-
-const base64Image = ref('')
-const props = defineProps(
-  {
-    isShowThumbnail: {
-      type: Boolean,
-      required: true
-    },
-    item: {
-      type: Object,
-      required: true
-    },
-    localPath: {
-      type: String,
-      required: true
-    }
-  }
-)
-
-watch(
-  () => props.localPath,
-  async (newLocalPath, oldLocalPath) => {
-    if (newLocalPath !== oldLocalPath) {
-      try {
-        await createBase64Image()
-      } catch (e) {
-        console.log(e)
-      }
-    }
-  }
-)
-
-const createBase64Image = async () => {
-  const filePath = path.normalize(props.localPath)
-  const base64 = await fs.readFile(filePath, 'base64')
-  base64Image.value = `data:${mime.lookup(filePath) || 'image/png'};base64,${base64}`
-}
-
-onBeforeMount(async () => {
-  try {
-    await createBase64Image()
-  } catch (e) {
-    console.log(e)
-  }
-})
-</script>
--- a/src/renderer/manage/pages/bucketPage.vue
+++ b/src/renderer/manage/pages/bucketPage.vue
@@ -59,7 +59,7 @@
              class="icon"
              size="25px"
            >
-              <DocumentAdd />
+              <Upload />
            </el-icon>
          </el-tooltip>
        </el-button>
@@ -80,7 +80,7 @@
              size="25px"
              style="margin-left: 5px;"
            >
-              <Upload />
+              <UploadFilled />
            </el-icon>
          </el-tooltip>
        </el-button>
@@ -497,7 +497,7 @@ https://www.baidu.com/img/bd_logo1.png"
              shadow="hover"
            >
              <el-image
-                v-if="!item.isDir && currentPicBedName !== 'webdavplist' && currentPicBedName !== 'local'"
+                v-if="!item.isDir && currentPicBedName !== 'webdavplist'"
                :src="isShowThumbnail && item.isImage ?
                  item.url
                  : require(`./assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
@@ -526,13 +526,6 @@ https://www.baidu.com/img/bd_logo1.png"
                :url="item.url"
                @click="handleClickFile(item)"
              />
-              <ImageLocal
-                v-else-if="!item.isDir && currentPicBedName === 'local'"
-                :is-show-thumbnail="isShowThumbnail"
-                :item="item"
-                :local-path="item.key"
-                @click="handleClickFile(item)"
-              />
              <el-image
                v-else
                :src="require('./assets/icons/folder.webp')"
@@ -554,7 +547,7 @@ https://www.baidu.com/img/bd_logo1.png"
                    :underline="false"
                    :type="item.checked ? 'primary' : 'info'"
                  >
-                    {{ formatFileName(item.fileName ?? '', 8) }}
+                    {{ formatFileName(item.fileName ?? '', 15) }}
                  </el-link>
                </el-tooltip>
              </div>
@@ -1422,7 +1415,7 @@ import { ref, reactive, watch, onBeforeMount, computed, onBeforeUnmount } from '
 import { useRoute } from 'vue-router'

 // Element Plus 图标
-import { InfoFilled, Grid, Fold, Close, Folder, FolderAdd, Upload, CircleClose, Loading, CopyDocument, Edit, DocumentAdd, Link, Refresh, ArrowRight, HomeFilled, Document, Coin, Download, DeleteFilled, Sort, FolderOpened } from '@element-plus/icons-vue'
+import { InfoFilled, Grid, Fold, Close, Folder, FolderAdd, Upload, CircleClose, Loading, CopyDocument, Edit, UploadFilled, Link, Refresh, ArrowRight, HomeFilled, Document, Coin, Download, DeleteFilled, Sort, FolderOpened } from '@element-plus/icons-vue'

 // 状态管理相关
 import { useManageStore } from '../store/manageStore'
@@ -1492,7 +1485,6 @@ import { videoExt } from '../utils/videofile'

 // 组件
 import ImageWebdav from '@/components/ImageWebdav.vue'
-import ImageLocal from '@/components/ImageLocal.vue'

 // 国际化函数
 import { T as $T } from '@/i18n'
@@ -2113,6 +2105,16 @@ async function initCustomDomainList () {
      currentCustomDomain.value = endpoint
    }
    handleChangeCustomUrl()
+  } else if (currentPicBedName.value === 'local') {
+    const currentConfigs = await getConfig<any>('picBed')
+    const currentConfig = currentConfigs[configMap.alias]
+    const currentTransformedConfig = JSON.parse(currentConfig.transformedConfig ?? '{}')
+    if (currentTransformedConfig[configMap.bucketName] && currentTransformedConfig[configMap.bucketName]?.customUrl) {
+      currentCustomDomain.value = currentTransformedConfig[configMap.bucketName].customUrl ?? ''
+    } else {
+      currentCustomDomain.value = ''
+    }
+    handleChangeCustomUrl()
  }
 }

@@ -2535,7 +2537,7 @@ function handleCreateFolder () {
  ElMessageBox.prompt($T('MANAGE_BUCKET_CREATE_FOLDER_BOX_TITLE'), $T('MANAGE_BUCKET_CREATE_FOLDER_BOX_TIP'), {
    confirmButtonText: $T('MANAGE_BUCKET_CREATE_FOLDER_BOX_CONFIRM'),
    cancelButtonText: $T('MANAGE_BUCKET_CREATE_FOLDER_BOX_CANCEL'),
-    inputPattern: /^[\u4e00-\u9fff_a-zA-Z0-9/]+$/,
+    inputPattern: /^[\p{Unified_Ideograph}_a-zA-Z0-9-]+$/u,
    inputErrorMessage: $T('MANAGE_BUCKET_CREATE_FOLDER_ERROR_MSG')
  }).then(async ({ value }) => {
    let formatedPath = value
@@ -2801,7 +2803,6 @@ async function getBucketFileListBackStage () {
    param.baseDir = configMap.baseDir
    param.webPath = configMap.webPath
  }
-  console.log(param)
  ipcRenderer.send('getBucketListBackstage', configMap.alias, param)
  ipcRenderer.on('refreshFileTransferList', (evt: IpcRendererEvent, data) => {
    fileTransferStore.refreshFileTransferList(data)
@@ -3445,7 +3446,7 @@ const columns: Column<any>[] = [
            <div
              style="font-size: 14px;color: #303133;font-family: Arial, Helvetica, sans-serif;"
            >
-              {formatFileName(item.fileName ?? '')}
+              {formatFileName(item.fileName ?? '', 40)}
            </div>
          </ElTooltip>
        </div>
--- a/src/renderer/manage/pages/logIn.vue
+++ b/src/renderer/manage/pages/logIn.vue
@@ -74,9 +74,9 @@
                      effect="light"
                      :content="item.alias"
                      placement="top"
-                      :disabled="item.alias.length <= 15"
+                      :disabled="isNeedToShorten(item.alias)"
                    >
-                      {{ item.alias.length > 15 ? item.alias.slice(0, 8) + '...' + item.alias.slice(-6) : item.alias }}
+                      {{ isNeedToShorten(item.alias) ? safeSliceF(item.alias, 17) + '...' : item.alias }}
                    </el-tooltip>
                  </el-button>
                </template>
@@ -290,6 +290,7 @@ import { getConfig as getPicBedsConfig } from '@/utils/dataSender'

 // 端点地址格式化
 import { formatEndpoint } from '~/main/manage/utils/common'
+import { isNeedToShorten, safeSliceF } from '#/utils/common'

 // 国际化函数
 import { T as $T } from '@/i18n'
@@ -373,7 +374,7 @@ async function handleConfigChange (name: string) {
  const aliasList = getAliasList()
  const allKeys = Object.keys(supportedPicBedList[name].configOptions)
  const resultMap:IStringKeyMap = {}
-  const reg = /^[\u4e00-\u9fff_a-zA-Z0-9-]+$/
+  const reg = /^[\p{Unified_Ideograph}_a-zA-Z0-9-]+$/u
  for (const key of allKeys) {
    const resultKey = name + '.' + key
    if (supportedPicBedList[name].configOptions[key].required) {
--- a/src/renderer/manage/utils/common.ts
+++ b/src/renderer/manage/utils/common.ts
@@ -14,7 +14,7 @@ import { availableIconList } from './icon'
 import { getConfig } from './dataSender'

 // 工具函数
-import { handleUrlEncode } from '~/universal/utils/common'
+import { handleUrlEncode, safeSliceF, isNeedToShorten } from '~/universal/utils/common'

 export function randomStringGenerator (length: number): string {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
@@ -103,7 +103,7 @@ export function formatFileName (fileName: string, length: number = 20) {
  let ext = path.extname(fileName)
  ext = ext.length > 5 ? ext.slice(ext.length - 5) : ext
  const name = path.basename(fileName, ext)
-  return name.length > length ? `${name.slice(0, length)}...${ext}` : fileName
+  return isNeedToShorten(fileName, length) ? `${safeSliceF(name, length - 3 - ext.length)}...${ext}` : fileName
 }

 export const getExtension = (fileName: string) => path.extname(fileName).slice(1)