Zkit工具站

Zkit-C/src/components/ToolCard.vue

@@ -0,0 +1,163 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  desc: String,
+  icon: String,
+  isVip: Boolean,
+  // 传入 main.css 中定义的颜色名，例如 'blue', 'purple', 'orange'
+  colorTheme: {
+    type: String,
+    default: 'blue' 
+  }
+})
+
+// 动态生成符合 main.css 规范的类名，例如 "icon-bg-blue"
+// 这样就能利用全局 CSS 中定义的 Dark Mode 适配逻辑
+const iconThemeClass = computed(() => `icon-bg-${props.colorTheme}`)
+</script>
+
+<template>
+  <div class="tool-card">
+    <!-- VIP 标签 (使用 main.css 的基础样式并增强定位) -->
+    <div v-if="isVip" class="vip-badge card-badge">
+      <i class="fa-solid fa-crown"></i> VIP
+    </div>
+    
+    <div class="card-content">
+      <!-- 图标容器: 结合全局颜色类和局部布局类 -->
+      <div class="icon-box" :class="iconThemeClass">
+        <i :class="icon"></i>
+      </div>
+      
+      <!-- 文本区域 -->
+      <div class="text-area">
+        <h3 class="card-title">
+          {{ title }}
+          <!-- 悬停出现的箭头 -->
+          <span class="arrow-icon">→</span>
+        </h3>
+        <p class="card-desc">{{ desc }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 
+  注意：这里不再定义颜色变量，而是直接使用 main.css 中的变量 
+  这样可以确保切换 html.dark 时组件自动变色
+*/
+
+.tool-card {
+  /* 使用全局变量 */
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius); /* 使用全局圆角 */
+  box-shadow: var(--shadow-sm);
+  
+  padding: 1.5rem;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  
+  /* 动效配置 */
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
+              box-shadow 0.3s ease, 
+              border-color 0.3s ease;
+}
+
+/* 悬停状态 */
+.tool-card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--border-hover);
+}
+
+/* 图标容器样式 */
+.icon-box {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  margin-bottom: 1.2rem;
+  
+  /* 颜色由 main.css 的 .icon-bg-xxx 类控制，这里只控制动效 */
+  transition: transform 0.4s ease;
+}
+
+/* 悬停时图标微动 */
+.tool-card:hover .icon-box {
+  transform: scale(1.1) rotate(3deg);
+}
+
+/* 标题样式 */
+.card-title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--text-main); /* 适配暗黑模式 */
+  margin-bottom: 0.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: color 0.3s;
+}
+
+/* 悬停时标题高亮 - 使用全局主色 */
+.tool-card:hover .card-title {
+  color: var(--primary); 
+}
+
+/* 描述文字 */
+.card-desc {
+  font-size: 0.9rem;
+  color: var(--text-sub); /* 适配暗黑模式 */
+  line-height: 1.6;
+  
+  /* 多行文本截断 */
+  display: -webkit-box;
+  -webkit-line-clamp: 2; 
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 
+   VIP 徽章定位调整 
+   颜色样式已在 main.css 的 .vip-badge 中定义
+   这里只处理它在卡片中的位置
+*/
+.card-badge {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
+}
+
+/* 箭头图标 */
+.arrow-icon {
+  font-size: 1rem;
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: all 0.3s ease;
+  color: var(--primary); /* 使用全局主色 */
+}
+
+.tool-card:hover .arrow-icon {
+  opacity: 1;
+  transform: translateX(0);
+}
+</style>