-
-
+
+
+
+
+
+
{{ menuTitleMap[currentPicBedName] }}
-
-
-
- {{ t('pages.manage.main.loading') }}
+
+
+
+ {{ t('pages.manage.main.loading') }}
-
-
-
-
- {{ truncateText(item, currentPicBedName) }}
+
+
+
+ {{ item }}
+ {{ item }}
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
+
@@ -106,54 +127,51 @@
enter-from-class="opacity-0"
leave-to-class="opacity-0"
>
-
-
-
-
- {{ t('pages.manage.main.switchPicBed') }}
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('pages.manage.main.backToHome') }}
-
+
+
+
+
+
+
+
+
+
+
+ {{ $t('pages.manage.main.backToHome') }}
+
-
-
-
-
-
-
-
- {{ config.alias }}
-
-
-
-
+
+
+
+
+
+
+
+ {{ config.alias }}
+
+
+
-
+
@@ -268,17 +286,17 @@ import {
CheckIcon,
ChevronDownIcon,
ExternalLinkIcon,
- FolderIcon,
- GitBranchIcon,
HomeIcon,
PlusIcon,
SettingsIcon,
XIcon,
} from 'lucide-vue-next'
-import { computed, onBeforeMount, reactive, ref, watch } from 'vue'
+import { onBeforeMount, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
+import CustomButton from '@/components/common/CustomButton.vue'
+import CustomModal from '@/components/common/CustomModal.vue'
import useMessage from '@/hooks/useMessage'
import { useManageStore } from '@/manage/store/manageStore'
import { supportedPicBedList } from '@/manage/utils/constants'
@@ -309,46 +327,6 @@ const isLoadingBucketList = ref(false)
const nweBucketDrawerVisible = ref(false)
const picBedSwitchDialogVisible = ref(false)
-const maxTextLength = computed(() => {
- const fixedSpace = 16 + 12 + 24 + 8
- const availableWidth = sidebarWidth.value - fixedSpace
- const estimatedCharWidth = 14 * 0.6
- const maxChars = Math.floor(availableWidth / estimatedCharWidth)
- return Math.max(6, Math.min(maxChars, 60))
-})
-
-const truncateText = (text: string, picBedName: string): string => {
- if (!text) return ''
-
- if (picBedName === 'tcyun') {
- const baseName = text.slice(0, text.length - 11)
- if (baseName.length <= maxTextLength.value) {
- return baseName
- }
- return `${baseName.slice(0, maxTextLength.value - 3)}...`
- } else if (picBedName === 'github') {
- if (text.length <= maxTextLength.value) {
- return text
- }
- const minSideLength = 3
- const totalEllipsis = 2 // '..'
- const availableForContent = maxTextLength.value - totalEllipsis
-
- if (availableForContent < minSideLength * 2) {
- return `${text.slice(0, maxTextLength.value - 3)}...`
- }
-
- const prefixLength = Math.ceil(availableForContent / 2)
- const suffixLength = availableForContent - prefixLength
- return `${text.slice(0, prefixLength)}..${text.slice(-suffixLength)}`
- } else {
- if (text.length <= maxTextLength.value) {
- return text
- }
- return `${text.slice(0, maxTextLength.value - 3)}...`
- }
-}
-
watch(
route,
async newRoute => {
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 478c8eec..76ad55cf 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -39,6 +39,10 @@
tag="div"
class="flex max-w-[calc(100%-300px)] flex-wrap items-center gap-[0.2rem] [.has-many]:max-w-[300px]"
:class="{ 'has-many': favoritePicbeds.length >= 4 }"
+ enter-active-class="transition-all duration-200 ease-apple"
+ leave-active-class="transition-all duration-200 ease-apple"
+ enter-from-class="opacity-0"
+ leave-to-class="opacity-0"
>
+
+
+
- {{ menuTitleMap[currentPicBedName] }}
-
-
- {{ t('pages.manage.main.loading') }}
+
+
-
+
+ {{ t('pages.manage.main.loading') }}
-
-
-
-
- {{ truncateText(item, currentPicBedName) }}
+
+
+
+ {{ item }}
+ {{ item }}
+
+
-
@@ -106,54 +127,51 @@
enter-from-class="opacity-0"
leave-to-class="opacity-0"
>
-
-
-
-
+
-
+
+
+
+
-
-
+
-
-
-
- - {{ t('pages.manage.main.switchPicBed') }} -
- -
-
-
-
-
-
-
-
-
+
- {{ $t('pages.manage.main.backToHome') }}
-
+
+
+
+
+
@@ -268,17 +286,17 @@ import {
CheckIcon,
ChevronDownIcon,
ExternalLinkIcon,
- FolderIcon,
- GitBranchIcon,
HomeIcon,
PlusIcon,
SettingsIcon,
XIcon,
} from 'lucide-vue-next'
-import { computed, onBeforeMount, reactive, ref, watch } from 'vue'
+import { onBeforeMount, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
+import CustomButton from '@/components/common/CustomButton.vue'
+import CustomModal from '@/components/common/CustomModal.vue'
import useMessage from '@/hooks/useMessage'
import { useManageStore } from '@/manage/store/manageStore'
import { supportedPicBedList } from '@/manage/utils/constants'
@@ -309,46 +327,6 @@ const isLoadingBucketList = ref(false)
const nweBucketDrawerVisible = ref(false)
const picBedSwitchDialogVisible = ref(false)
-const maxTextLength = computed(() => {
- const fixedSpace = 16 + 12 + 24 + 8
- const availableWidth = sidebarWidth.value - fixedSpace
- const estimatedCharWidth = 14 * 0.6
- const maxChars = Math.floor(availableWidth / estimatedCharWidth)
- return Math.max(6, Math.min(maxChars, 60))
-})
-
-const truncateText = (text: string, picBedName: string): string => {
- if (!text) return ''
-
- if (picBedName === 'tcyun') {
- const baseName = text.slice(0, text.length - 11)
- if (baseName.length <= maxTextLength.value) {
- return baseName
- }
- return `${baseName.slice(0, maxTextLength.value - 3)}...`
- } else if (picBedName === 'github') {
- if (text.length <= maxTextLength.value) {
- return text
- }
- const minSideLength = 3
- const totalEllipsis = 2 // '..'
- const availableForContent = maxTextLength.value - totalEllipsis
-
- if (availableForContent < minSideLength * 2) {
- return `${text.slice(0, maxTextLength.value - 3)}...`
- }
-
- const prefixLength = Math.ceil(availableForContent / 2)
- const suffixLength = availableForContent - prefixLength
- return `${text.slice(0, prefixLength)}..${text.slice(-suffixLength)}`
- } else {
- if (text.length <= maxTextLength.value) {
- return text
- }
- return `${text.slice(0, maxTextLength.value - 3)}...`
- }
-}
-
watch(
route,
async newRoute => {
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 478c8eec..76ad55cf 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -39,6 +39,10 @@
tag="div"
class="flex max-w-[calc(100%-300px)] flex-wrap items-center gap-[0.2rem] [.has-many]:max-w-[300px]"
:class="{ 'has-many': favoritePicbeds.length >= 4 }"
+ enter-active-class="transition-all duration-200 ease-apple"
+ leave-active-class="transition-all duration-200 ease-apple"
+ enter-from-class="opacity-0"
+ leave-to-class="opacity-0"
>
+
-
-
+
+
+
+
+
+ {{ $t('pages.manage.main.backToHome') }}
-
-
-
-
-
-
-
- {{ config.alias }}
-
-
-
+
+
+
+
+
+
+
+
+ {{ config.alias }}
+
+