GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 07:28:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化多个组件的样式和结构，调整文本显示方式，提升用户界面体验

Browse Source
This commit is contained in:
jxxghp
2025-05-24 20:01:20 +08:00
parent 8b1805628e
commit 903d22c622
4 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/PersonCard.vue
+1 -4
View File
@@ -98,10 +98,7 @@ function goPersonDetail() {
<div class="w-full truncate text-center font-bold"> <div class="w-full truncate text-center font-bold">
{{ getPersonName() }} {{ getPersonName() }}
</div> </div>
<div <div class="overflow-hidden whitespace-normal text-center text-sm text-ellipsis line-clamp-2">
class="overflow-hidden whitespace-normal text-center text-sm"
style="display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2"
>
{{ getPersonCharacter() }} {{ getPersonCharacter() }}
</div> </div>
<div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" /> <div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />
src/components/cards/PluginAppCard.vue
+9 -7
View File
@@ -221,9 +221,11 @@ const dropdownItems = ref([
</div> </div>
</div> </div>
</div> </div>
<VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden"> <VCardText
<div class="flex flex-nowrap items-center w-full pe-7"> class="flex flex-col align-self-baseline justify-between px-2 py-2 w-full overflow-hidden max-h-10 min-h-10"
<span> >
<div class="flex flex-nowrap items-center w-full pe-10">
<div class="flex flex-nowrap max-w-32">
<VIcon icon="mdi-github" class="me-1" /> <VIcon icon="mdi-github" class="me-1" />
<a <a
class="overflow-hidden text-ellipsis whitespace-nowrap" class="overflow-hidden text-ellipsis whitespace-nowrap"
@@ -233,11 +235,11 @@ const dropdownItems = ref([
> >
{{ props.plugin?.plugin_author }} {{ props.plugin?.plugin_author }}
</a> </a>
</span> </div>
<span v-if="props.count" class="ms-2 flex-shrink-0 download-count"> <div v-if="props.count" class="ms-2 flex-shrink-0 download-count">
<VIcon icon="mdi-download" /> <VIcon size="small" icon="mdi-download" />
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span> <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
</span> </div>
</div> </div>
<div class="absolute bottom-0 right-0"> <div class="absolute bottom-0 right-0">
<IconBtn> <IconBtn>
src/components/cards/PluginCard.vue
+9 -12
View File
@@ -328,7 +328,7 @@ watch(
</script> </script>
<template> <template>
<div> <div class="h-full">
<!-- 插件卡片 --> <!-- 插件卡片 -->
<VHover> <VHover>
<template #default="hover"> <template #default="hover">
@@ -358,9 +358,9 @@ watch(
</VCardText> </VCardText>
<div class="relative flex flex-row items-start px-2 justify-between grow"> <div class="relative flex flex-row items-start px-2 justify-between grow">
<div class="relative flex-1 min-w-0"> <div class="relative flex-1 min-w-0">
<VCardText class="px-2 py-1 text-white text-sm text-shadow overflow-hidden line-clamp-3 ..."> <div class="px-2 py-1 text-white text-sm text-shadow overflow-hidden line-clamp-3 ...">
{{ props.plugin?.plugin_desc }} {{ props.plugin?.plugin_desc }}
</VCardText> </div>
</div> </div>
<div class="relative flex-shrink-0 self-center cursor-move pb-3"> <div class="relative flex-shrink-0 self-center cursor-move pb-3">
<VAvatar size="48"> <VAvatar size="48">
@@ -376,9 +376,11 @@ watch(
</div> </div>
</div> </div>
</div> </div>
<VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden"> <VCardText
<div class="flex flex-nowrap items-center w-full pe-7"> class="flex flex-col align-self-baseline justify-between px-2 py-2 w-full overflow-hidden max-h-10 min-h-10"
<span class="author-info flex-shrink-1 overflow-hidden text-ellipsis whitespace-nowrap"> >
<div class="flex flex-nowrap items-center w-full pe-10">
<div class="flex flex-nowrap max-w-32">
<VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true"> <VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
<VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" /> <VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" />
</VImg> </VImg>
@@ -390,7 +392,7 @@ watch(
> >
{{ props.plugin?.plugin_author }} {{ props.plugin?.plugin_author }}
</a> </a>
</span> </div>
<span v-if="props.count" class="ms-2 flex-shrink-0 download-count"> <span v-if="props.count" class="ms-2 flex-shrink-0 download-count">
<VIcon size="small" icon="mdi-download" /> <VIcon size="small" icon="mdi-download" />
<span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span> <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
@@ -478,11 +480,6 @@ watch(
inset: 0; inset: 0;
} }
.author-info {
display: flex;
align-items: center;
}
.author-avatar { .author-avatar {
border-radius: 50%; border-radius: 50%;
block-size: 24px; block-size: 24px;
src/components/cards/PluginFolderCard.vue
+4 -1
View File
@@ -302,7 +302,10 @@ const dropdownItems = ref([
</div> </div>
<!-- 文件夹信息 --> <!-- 文件夹信息 -->
<div class="plugin-folder-card__info" :class="{ 'plugin-folder-card__info--no-icon': !shouldShowIcon }"> <div
class="plugin-folder-card__info cursor-move"
:class="{ 'plugin-folder-card__info--no-icon': !shouldShowIcon }"
>
<!-- 文件夹名称 --> <!-- 文件夹名称 -->
<h3 class="plugin-folder-card__name"> <h3 class="plugin-folder-card__name">
{{ props.folderName }} {{ props.folderName }}