# Claymorphism UI 优化文档

## 🎨 设计系统概述

### 什么是 Claymorphism（粘土拟态）？

Claymorphism 是一种结合了 **Neumorphism（新拟态）** 和 **3D 粘土质感** 的设计风格，具有以下特点：

- ✨ **双阴影效果**：外部阴影 + 内部阴影创造立体浮感
- 🎨 **柔和渐变**：使用 145deg 渐变创造有机感
- 🔄 **圆润边角**：大圆角设计传递柔和友好感
- 💫 **有机动画**：平滑的过渡和按压反馈
- 🌈 **高对比度**：保持可访问性的同时提供视觉吸引力

---

## 📦 组件库

### 核心组件

| 组件 | 文件路径 | 功能 |
|------|---------|------|
| **ClayCard** | `/components/ClayCard.vue` | 粘土风格卡片 |
| **ClayButton** | `/components/ClayButton.vue` | 粘土风格按钮 |
| **ClayInput** | `/components/ClayInput.vue` | 粘土风格输入框 |

### 使用示例

```vue
<template>
  <view>
    <!-- 卡片组件 -->
    <ClayCard size="lg" variant="primary" @tap="handleTap">
      <text>这是一张粘土卡片</text>
    </ClayCard>

    <!-- 按钮组件 -->
    <ClayButton
      text="确认操作"
      variant="primary"
      size="lg"
      :loading="isLoading"
      @tap="handleConfirm"
    />

    <!-- 输入框组件 -->
    <ClayInput
      v-model="searchText"
      placeholder="搜索内容..."
      prefixIcon="🔍"
      :clearable="true"
      @confirm="handleSearch"
    />
  </view>
</template>

<script>
import { ClayCard, ClayButton, ClayInput } from '@/components/clay-components.js'

export default {
  components: { ClayCard, ClayButton, ClayInput },
  data() {
    return {
      searchText: '',
      isLoading: false
    }
  },
  methods: {
    handleTap() { console.log('卡片被点击') },
    async handleConfirm() {
      this.isLoading = true
      // 执行操作...
    },
    handleSearch(val) { console.log('搜索:', val) }
  }
}
</script>
```

---

## 🎯 组件 Props

### ClayCard

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `size` | String | `'md'` | 尺寸：`sm`, `md`, `lg` |
| `variant` | String | `'default'` | 变体：`default`, `primary`, `gold` |
| `inset` | Boolean | `false` | 是否凹陷效果 |
| `customClass` | String | `''` | 自定义类名 |
| `customStyle` | Object | `{}` | 自定义样式 |

### ClayButton

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `text` | String | `'按钮'` | 按钮文字 |
| `size` | String | `'md'` | 尺寸：`sm`, `md`, `lg` |
| `variant` | String | `'primary'` | 变体：`primary`, `secondary`, `success`, `warning`, `error` |
| `outline` | Boolean | `false` | 是否轮廓样式 |
| `block` | Boolean | `false` | 是否块级按钮 |
| `disabled` | Boolean | `false` | 是否禁用 |
| `loading` | Boolean | `false` | 是否加载中 |
| `icon` | String | `''` | 图标（emoji） |
| `customStyle` | Object | `{}` | 自定义样式 |

### ClayInput

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `modelValue` | String/Number | `''` | v-model 绑定值 |
| `type` | String | `'text'` | 输入框类型 |
| `placeholder` | String | `'请输入'` | 占位符 |
| `size` | String | `'md'` | 尺寸：`sm`, `md`, `lg` |
| `disabled` | Boolean | `false` | 是否禁用 |
| `error` | Boolean | `false` | 是否错误状态 |
| `errorText` | String | `''` | 错误提示 |
| `clearable` | Boolean | `false` | 是否可清空 |
| `prefixIcon` | String | `''` | 前缀图标（emoji） |
| `suffixIcon` | String | `''` | 后缀图标（emoji） |

---

## 🎨 样式变量

在 `uni.scss` 中定义的核心变量：

```scss
/* Claymorphism 阴影层级 */
$clay-shadow-sm: (...)
$clay-shadow-md: (...)
$clay-shadow-lg: (...)
$clay-shadow-xl: (...)

/* 颜色变量 */
$clay-bg-light: #FAFAFA;
$clay-bg-white: #FFFFFF;
$clay-bg-soft: rgba(255, 255, 255, 0.85);
$clay-border: rgba(255, 255, 255, 0.8);
```

---

## 🔧 已优化的页面

### ✅ 首页 (`pages/index/index.vue`)
- Banner 轮播卡片
- 通知栏
- 玩法分类卡片
- 活动列表项

### ✅ 底部导航栏 (`components/app-tab-bar.vue`)
- 导航栏背景
- 图标容器（圆形徽章）
- 选中状态动画

### ✅ 个人中心 (`pages/mine/index.vue`)
- 用户信息卡片
- 头像凹陷效果
- 统计数据卡片
- 功能图标容器

---

## 🚀 快速开始

### 1. 配置 easycom（推荐）

在 `pages.json` 中添加：

```json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^Clay(A.*)": "@/components/Clay$1.vue"
    }
  }
}
```

### 2. 直接使用组件

```vue
<template>
  <ClayCard size="lg">内容</ClayCard>
  <ClayButton text="按钮" variant="primary" />
  <ClayInput v-model="value" placeholder="输入..." />
</template>
```

### 3. 使用全局样式类

```vue
<template>
  <!-- 粘土卡片 -->
  <view class="clay-card">内容</view>

  <!-- 粘土按钮 -->
  <view class="clay-btn clay-btn-primary clay-btn-md">按钮</view>

  <!-- 凹陷效果 -->
  <view class="clay-card-inset">凹陷卡片</view>
</template>
```

---

## 🎨 设计原则

### ✅ 推荐做法

1. **保持一致性**：在整个应用中统一使用 Claymorphism 组件
2. **适度使用**：不要过度使用，保持界面呼吸感
3. **注意对比度**：确保文字与背景有足够的对比度
4. **动画平滑**：使用 `cubic-bezier(0.4, 0, 0.2, 1)` 缓动函数
5. **圆角统一**：卡片 24-32rpx，按钮 50-60rpx（圆角）

### ❌ 避免做法

1. **不要混合多种拟态风格**
2. **不要使用过多的彩色渐变**
3. **不要忽略深色模式适配**
4. **不要在小元素上使用粘土效果**

---

## 📱 兼容性

| 平台 | 支持情况 |
|------|----------|
| 微信小程序 | ✅ 完全支持 |
| 抖音小程序 | ✅ 完全支持 |
| H5 | ✅ 完全支持 |
| App | ✅ 完全支持 |

---

## 🔮 后续计划

- [ ] 添加更多组件：ClaySwitch、ClaySlider、ClayModal
- [ ] 深色模式适配
- [ ] 动画效果增强
- [ ] 性能优化

---

## 📝 更新日志

### v1.0.0 (2025-02-05)
- ✅ 初始化 Claymorphism 设计系统
- ✅ 创建核心组件：ClayCard、ClayButton、ClayInput
- ✅ 优化首页、个人中心、底部导航栏
- ✅ 添加全局样式变量和 Mixins

---

**设计团队**: Z Code AI Studio
**最后更新**: 2025-02-05