zguiy/ztab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
yinsx
2026-01-23 16:56:28 +08:00
parent 5674ce116e
commit ce796e2fd7
7 changed files with 131 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/src/components/IconCard/index.vue
View File

@ -2,6 +2,7 @@
<a
:href="props.icon.url"
class="icon-card-wrapper"
:class="`size-${props.icon.size ?? '1x1'}`"
@click.prevent
target="_blank"
>
@ -14,10 +15,13 @@
</template>
<script setup lang="ts">
type IconSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';
interface Icon {
id: string;
name: string;
url: string;
size?: IconSize;
img?: string;
bgColor?: string;
}
@ -34,27 +38,30 @@ const props = defineProps<{
.icon-card-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: stretch;
justify-content: flex-start;
width: 100%;
height: 100%;
text-decoration: none;
border-radius: $border-radius-medium;
border-radius: $border-radius-small;
padding: var(--icon-card-padding);
transition: transform $motion-duration-sm $motion-easing-standard, background-color $motion-duration-sm $motion-easing-standard;
transition: transform $motion-duration-sm $motion-easing-standard;
user-select: none; // 拖拽时避免选中文本
box-sizing: border-box;
// 悬停效果由父级拖拽状态控制
&:hover {
background-color: rgba(255, 255, 255, 0.05);
.icon-card {
box-shadow: $shadow-lg;
}
}
}
.icon-card {
width: var(--icon-size);
height: var(--icon-size);
border-radius: $border-radius-large;
width: 100%;
flex: 1 1 auto;
min-height: 0;
border-radius: $border-radius-small;
display: flex;
align-items: center;
justify-content: center;
@ -62,6 +69,7 @@ const props = defineProps<{
font-weight: 500;
color: white;
box-shadow: $shadow-md;
transition: box-shadow $motion-duration-sm $motion-easing-standard;
margin-bottom: var(--icon-label-margin-top);
background-size: cover;
background-position: center;
@ -70,11 +78,22 @@ const props = defineProps<{
img {
width: 100%;
height: 100%;
border-radius: $border-radius-large;
border-radius: $border-radius-small;
object-fit: cover;
}
}
.icon-card-wrapper.size-1x1 {
align-items: center;
justify-content: center;
}
.icon-card-wrapper.size-1x1 .icon-card {
width: var(--icon-size);
height: var(--icon-size);
flex: 0 0 auto;
}
.label {
font-size: var(--icon-label-font-size);
color: $color-text-primary;