1

app/src/components/IconCard/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <a 
+    :href="props.icon.url" 
+    class="icon-card-wrapper"
+    @click.prevent
+    target="_blank"
+  >
+    <div class="icon-card" :style="{ backgroundColor: props.icon.bgColor }">
+      <img v-if="props.icon.img" :src="props.icon.img" :alt="props.icon.name" />
+      <span v-else>{{ props.icon.name.charAt(0) }}</span>
+    </div>
+    <div class="label">{{ props.icon.name }}</div>
+  </a>
+</template>
+
+<script setup lang="ts">
+interface Icon {
+  id: string;
+  name: string;
+  url: string;
+  img?: string;
+  bgColor?: string;
+}
+
+const props = defineProps<{
+  icon: Icon;
+}>();
+
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/tokens.scss';
+
+.icon-card-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+  border-radius: $border-radius-medium;
+  padding: var(--icon-card-padding);
+  transition: transform $motion-duration-sm $motion-easing-standard, background-color $motion-duration-sm $motion-easing-standard;
+  user-select: none; // 拖拽时避免选中文本
+  box-sizing: border-box;
+
+  // 悬停效果由父级拖拽状态控制
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+}
+
+.icon-card {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  border-radius: $border-radius-large;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--icon-font-size);
+  font-weight: 500;
+  color: white;
+  box-shadow: $shadow-md;
+  margin-bottom: var(--icon-label-margin-top);
+  background-size: cover;
+  background-position: center;
+  pointer-events: none; // 指针事件交给外层容器处理
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: $border-radius-large;
+    object-fit: cover;
+  }
+}
+
+.label {
+  font-size: var(--icon-label-font-size);
+  color: $color-text-primary;
+  text-align: center;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+</style>