first commit

2026-07-27 14:54:21 +08:00
commit 4d086758e8
161 changed files with 63776 additions and 0 deletions
@@ -0,0 +1,143 @@
+import { View, Text, Swiper, SwiperItem, Input, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useState } from 'react'
+import './index.scss'
+import { CATEGORIES } from '../../utils/productConfig'
+import ThemeToggle from '../../components/ThemeToggle'
+import { useThemeContext } from '../../context/ThemeContext'
+
+// 成品展示数据
+const SHOWCASES = [
+  { title: '毕业纪念笔记本', desc: '全班名字组成校徽', color: '#FFE4EC' },
+  { title: '铜质杯垫', desc: '金属质感桌面艺术', color: '#E8D5C4' },
+  { title: '竹制笔盒', desc: '自然竹纹文房雅器', color: '#E0F0D9' },
+  { title: '书本型灯', desc: '温暖光影点亮心意', color: '#FFF3CD' },
+  { title: '情侣定制礼', desc: '两个人的名字交织', color: '#FCE4EC' },
+  { title: '企业年会礼', desc: '员工名字组成Logo', color: '#E3F2FD' }
+]
+
+export default function Index() {
+  const { theme } = useThemeContext()
+  const [searchKey, setSearchKey] = useState('')
+
+  const navigateToProduct = (categoryId: string) => {
+    Taro.navigateTo({ url: `/pages/product/index?id=${categoryId}` })
+  }
+
+  const filteredCategories = searchKey.trim()
+    ? CATEGORIES.filter(
+        (c) => c.name.includes(searchKey) || c.desc.includes(searchKey)
+      )
+    : CATEGORIES
+
+  const handleSearch = (e: any) => {
+    setSearchKey(e.detail.value)
+  }
+
+  return (
+    <View className={`theme-${theme}`}>
+      <View className='index-page'>
+        <ThemeToggle />
+
+        {/* 顶部标题栏 */}
+        <View className='header-bar'>
+          <Text className='header-title'>智绘微刻</Text>
+        </View>
+
+        {/* 搜索框 */}
+        <View className='search-card dashed-card'>
+          <View className='star-badge' />
+          <View className='search-inner'>
+            <Text className='search-icon'>🔍</Text>
+            <Input
+              className='search-input'
+              type='text'
+              placeholder='搜索定制品类：笔记本、杯垫、书灯...'
+              value={searchKey}
+              onInput={handleSearch}
+              confirmType='search'
+            />
+          </View>
+          {searchKey.trim() && (
+            <View className='search-result-hint'>
+              <Text className='hint-text'>
+                {filteredCategories.length > 0
+                  ? `找到 ${filteredCategories.length} 个相关品类`
+                  : '没有找到相关品类，试试看其他关键词'}
+              </Text>
+            </View>
+          )}
+        </View>
+
+        {/* 成品展示轮播 */}
+        <View className='showcase-section mt-20'>
+          <Text className='section-title'>定制成品展示</Text>
+          <Swiper
+            className='showcase-swiper'
+            indicatorColor='#e0e0e0'
+            indicatorActiveColor='#ff9a9e'
+            circular
+            autoplay
+            interval={3000}
+            duration={500}
+            previousMargin='40rpx'
+            nextMargin='40rpx'
+            indicatorDots
+          >
+            {SHOWCASES.map((item, idx) => (
+              <SwiperItem key={idx} className='showcase-swiper-item'>
+                <View className='showcase-swiper-card dashed-card'>
+                  <View className='star-badge' />
+                  <View
+                    className='showcase-image-wrapper'
+                    style={{ background: item.color }}
+                  >
+                    <Text className='showcase-emoji'>🎁</Text>
+                  </View>
+                  <View className='showcase-info'>
+                    <Text className='showcase-title'>{item.title}</Text>
+                    <Text className='showcase-desc'>{item.desc}</Text>
+                  </View>
+                  <View className='showcase-tag'>成品案例</View>
+                </View>
+              </SwiperItem>
+            ))}
+          </Swiper>
+        </View>
+
+        {/* 热门品类 */}
+        <View className='category-section mt-20'>
+          <Text className='section-title'>热门品类</Text>
+          <View className='category-grid'>
+            {filteredCategories.map((cat) => (
+              <View
+                key={cat.id}
+                className='category-item dashed-card'
+                onClick={() => navigateToProduct(cat.id)}
+              >
+                <View className='star-badge' />
+                {cat.images && cat.images.length > 0 ? (
+                  <Image className='category-icon-img' src={cat.images[0]} mode='aspectFit' />
+                ) : (
+                  <Text className='category-icon'>{cat.icon}</Text>
+                )}
+                <Text className='category-name'>{cat.name}</Text>
+                <Text className='category-desc'>{cat.desc}</Text>
+                <Text className='category-price'>¥{cat.price} 起</Text>
+              </View>
+            ))}
+          </View>
+          {filteredCategories.length === 0 && (
+            <View className='empty-category dashed-card'>
+              <Text className='empty-icon'>🔍</Text>
+              <Text className='empty-text'>未找到匹配的品类</Text>
+              <Text className='empty-sub'>尝试搜索“笔记本”、“杯垫”等</Text>
+            </View>
+          )}
+        </View>
+
+        <View className='safe-bottom-placeholder' />
+      </View>
+    </View>
+  )
+}