refactor(ui): 优化 ProductCard 组件视觉样式

- 升级为高端专业风格（白色背景 + 细腻阴影 + 装饰光晕）
- 移除 nut-button 依赖，改用原生 view 实现精确样式控制
- 增加点击微缩放交互效果 (active:scale-[0.99])
- 优化标签样式和标题排版对比度

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

@@ -5,6 +5,26 @@
 
 
 ---
 ---
 
 
+## [2026-02-10] - 优化 ProductCard 组件视觉质感
+
+### 优化
+- **UI 升级**：将产品卡片从基础样式升级为“高端专业”风格
+  - 背景：从 `bg-gray-50` 升级为 `bg-white` 配合细腻阴影 `box-shadow`，增加悬浮感
+  - 装饰：右上角增加淡蓝色光晕装饰，提升视觉层次
+  - 交互：增加点击时的微缩放效果 (`active:scale-[0.99]`)
+- **组件重构**：
+  - 移除 `nut-button` 依赖，改用原生 `view` + Flexbox 实现按钮，便于精确控制样式
+  - 优化标签 (`tags`) 样式，增加动态边框逻辑
+  - 优化排版，增强标题对比度 (`font-bold`, `tracking-tight`)
+
+**详细信息**：
+- **影响文件**: src/components/cards/ProductCard.vue
+- **技术栈**: Vue 3, Tailwind CSS
+- **测试状态**: 待验证
+- **备注**: 保持了品牌色 (#2563EB) 一致性，提升了整体精致度
+
+---
+
 ## [2026-02-10] - 移除 Apifox MCP 集成
 ## [2026-02-10] - 移除 Apifox MCP 集成
 
 
 ### 删除
 ### 删除

 <template>
 <template>
-  <view class="bg-gray-50 rounded-[24rpx] p-[28rpx] product-card">
+  <view
+    class="relative bg-white rounded-[24rpx] p-[32rpx] border border-gray-100 product-card overflow-hidden transition-all duration-300 active:scale-[0.99]"
+    style="box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);"
+  >
+    <!-- 装饰背景: 右上角淡蓝色光晕 -->
+    <view class="absolute -right-[40rpx] -top-[40rpx] w-[160rpx] h-[160rpx] bg-blue-50 rounded-full opacity-60 blur-[30rpx] pointer-events-none"></view>
+
+    <!-- 内容区域 -->
+    <view class="relative z-10">
+      <!-- 头部：标题与标签 -->
+      <view class="mb-[36rpx]">
         <!-- 产品名称 -->
         <!-- 产品名称 -->
-    <text class="block text-gray-800 text-[32rpx] font-medium mb-[20rpx]">{{ productName }}</text>
+        <text class="block text-gray-900 text-[34rpx] font-bold leading-[1.4] mb-[20rpx] tracking-tight">
+          {{ productName }}
+        </text>
 
 
         <!-- 产品标签 -->
         <!-- 产品标签 -->
-    <view v-if="tags && tags.length" class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
+        <view v-if="tags && tags.length" class="flex flex-wrap gap-[12rpx]">
           <view
           <view
             v-for="tag in tags"
             v-for="tag in tags"
             :key="tag.id"
             :key="tag.id"
-        class="text-[20rpx] px-[12rpx] py-[4rpx] rounded-full"
+            class="text-[22rpx] px-[16rpx] py-[6rpx] rounded-[8rpx] font-medium flex items-center justify-center transition-opacity"
             :style="{
             :style="{
-          backgroundColor: tag.bg_color,
-          color: tag.text_color
+              backgroundColor: tag.bg_color || '#F3F4F6',
+              color: tag.text_color || '#4B5563',
+              border: `1px solid ${tag.bg_color ? 'transparent' : '#E5E7EB'}`
             }"
             }"
           >
           >
-        <text class="text-[22rpx]">{{ tag.name }}</text>
+            {{ tag.name }}
+          </view>
         </view>
         </view>
       </view>
       </view>
 
 
-    <!-- 操作按钮 -->
+      <!-- 操作按钮组 -->
       <view class="flex justify-between gap-[24rpx]">
       <view class="flex justify-between gap-[24rpx]">
-      <nut-button
-        plain
-        color="#2563EB"
-        class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
-        @tap="handleDetail"
+        <!-- 详情按钮: 次级样式 -->
+        <view
+          class="flex-1 h-[80rpx] flex items-center justify-center rounded-[16rpx] bg-gray-50 active:bg-gray-100 transition-colors border border-gray-100"
+          @tap.stop="handleDetail"
         >
         >
-        产品详情
-      </nut-button>
-      <nut-button
-        color="#2563EB"
-        class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
-        @tap="handlePlan"
+          <text class="text-[28rpx] text-gray-600 font-medium">产品详情</text>
+        </view>
+
+        <!-- 计划书按钮: 主要样式 -->
+        <view
+          class="flex-1 h-[80rpx] flex items-center justify-center rounded-[16rpx] bg-blue-600 active:bg-blue-700 transition-all shadow-md shadow-blue-100"
+          @tap.stop="handlePlan"
         >
         >
-        计划书
-      </nut-button>
+          <text class="text-[28rpx] text-white font-medium">制作计划书</text>
+        </view>
+      </view>
     </view>
     </view>
   </view>
   </view>
 </template>
 </template>
@@ -101,6 +116,6 @@ const handlePlan = () => {
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
 .product-card {
 .product-card {
-  // 可以添加卡片特定的样式
+  // 保持 scoped 样式块，方便未来扩展
 }
 }
 </style>
 </style>