1.2.0版本

src/pages/designList/index.tsx

@@ -2,9 +2,8 @@ import { View, Text, ScrollView, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useState, useEffect, useCallback } from 'react'
 import './index.scss'
-import { getDesignList, getUserInfo, type DesignItem } from '../../utils/store'
+import { getDesignList, removeDesigns, type DesignItem } from '../../utils/store'
 import { PRODUCT_ICON_MAP } from '../../utils/productConfig'
-import ThemeToggle from '../../components/ThemeToggle'
 import { useThemeContext } from '../../context/ThemeContext'
 import LoginGuard from '../../components/LoginGuard'
 
@@ -23,15 +22,16 @@ const STATUS_STYLE: Record<string, { label: string; cls: string }> = {
 }
 
 export default function DesignListPage() {
-  const { theme } = useThemeContext()
+  const { resolvedTheme } = useThemeContext()
   const [activeTab, setActiveTab] = useState('all')
   const [list, setList] = useState<DesignItem[]>([])
+  const [managing, setManaging] = useState(false)
+  const [selected, setSelected] = useState<Set<string>>(new Set())
 
   const load = useCallback(() => {
     setList(getDesignList())
   }, [])
 
-  // 自动读取外部传入的筛选状态
   const init = useCallback(() => {
     const filter = Taro.getStorageSync('designList:filter')
     if (filter && STATUS_TABS.some(t => t.code === filter)) {
@@ -41,7 +41,6 @@ export default function DesignListPage() {
     load()
   }, [load])
 
-  // 页面每次显示时刷新
   useEffect(() => {
     const page = Taro.getCurrentInstance().page
     if (page) {
@@ -70,15 +69,58 @@ export default function DesignListPage() {
     })
   }
 
+  const toggleSelect = (id: string) => {
+    const next = new Set(selected)
+    if (next.has(id)) next.delete(id)
+    else next.add(id)
+    setSelected(next)
+  }
+
+  const toggleSelectAll = () => {
+    if (selected.size === filtered.length) {
+      setSelected(new Set())
+    } else {
+      setSelected(new Set(filtered.map(i => i.id)))
+    }
+  }
+
+  const handleDelete = () => {
+    if (selected.size === 0) return
+    Taro.showModal({
+      title: '确认删除',
+      content: `确定删除选中的 ${selected.size} 个条目吗？`,
+      success: (res) => {
+        if (res.confirm) {
+          removeDesigns(Array.from(selected))
+          setSelected(new Set())
+          setManaging(false)
+          load()
+        }
+      }
+    })
+  }
+
+  const handleManage = () => {
+    if (managing) {
+      setManaging(false)
+      setSelected(new Set())
+    } else {
+      setManaging(true)
+    }
+  }
+
   return (
-    <View className={`theme-${theme}`}>
+    <View className={`theme-${resolvedTheme}`}>
       <LoginGuard>
         <View className='design-page'>
-          <ThemeToggle />
-
           <View className='page-header dashed-card mt-20'>
-            <View className='star-badge' />
-            <Text className='page-title'>我的设计清单</Text>
+            <View className='flex-between' style={{ width: '100%' }}>
+              <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
+              <Text className='page-title'>我的设计清单</Text>
+              <Text className='manage-btn' onTap={handleManage}>
+                {managing ? '完成' : '管理'}
+              </Text>
+            </View>
           </View>
 
           {/* 状态筛选 */}
@@ -97,6 +139,21 @@ export default function DesignListPage() {
             </ScrollView>
           </View>
 
+          {/* 批量管理工具栏 */}
+          {managing && (
+            <View className='batch-bar dashed-card'>
+              <View className='flex-between' style={{ width: '100%' }}>
+                <View className='batch-select-all' onTap={toggleSelectAll}>
+                  <View className={`batch-checkbox ${selected.size === filtered.length && filtered.length > 0 ? 'checked' : ''}`} />
+                  <Text className='batch-text'>全选 ({selected.size}/{filtered.length})</Text>
+                </View>
+                <View className={`batch-delete ${selected.size > 0 ? 'active' : ''}`} onTap={handleDelete}>
+                  <Text>删除</Text>
+                </View>
+              </View>
+            </View>
+          )}
+
           {/* 列表 */}
           <ScrollView className='design-list' scrollY>
             {filtered.map(item => {
@@ -104,10 +161,17 @@ export default function DesignListPage() {
               const iconSrc = item.productIcon?.startsWith('/icon/')
                 ? item.productIcon
                 : PRODUCT_ICON_MAP[item.productId] || '/icon/四角星.png'
+              const isSelected = selected.has(item.id)
               return (
-                <View key={item.id} className='design-card dashed-card'>
-                  <View className='star-badge' />
+                <View
+                  key={item.id}
+                  className={`design-card dashed-card ${isSelected ? 'selected' : ''}`}
+                  onTap={() => managing ? toggleSelect(item.id) : undefined}
+                >
                   <View className='design-body'>
+                    {managing && (
+                      <View className={`batch-checkbox ${isSelected ? 'checked' : ''}`} />
+                    )}
                     <Image className='design-icon-img' src={iconSrc} mode='aspectFit' />
                     <View className='design-info'>
                       <View className='design-title-row'>
@@ -118,18 +182,20 @@ export default function DesignListPage() {
                       <Text className='design-total'>小计: ¥{(item.unitPrice * item.count).toFixed(2)}</Text>
                     </View>
                   </View>
-                  <View className='design-actions'>
-                    {item.status !== 'ordered' && (
-                      <View className='btn-gradient design-btn' onTap={() => goDesign(item)}>
-                        <Text>{item.status === 'undesigned' ? '开始设计' : '继续设计'}</Text>
-                      </View>
-                    )}
-                    {item.status === 'ordered' && (
-                      <View className='btn-outline design-btn' onTap={() => Taro.switchTab({ url: '/pages/orders/index' })}>
-                        <Text>查看订单</Text>
-                      </View>
-                    )}
-                  </View>
+                  {!managing && (
+                    <View className='design-actions'>
+                      {item.status !== 'ordered' && (
+                        <View className='btn-gradient design-btn' onTap={() => goDesign(item)}>
+                          <Text>{item.status === 'undesigned' ? '开始设计' : '继续设计'}</Text>
+                        </View>
+                      )}
+                      {item.status === 'ordered' && (
+                        <View className='btn-outline design-btn' onTap={() => Taro.switchTab({ url: '/pages/orders/index' })}>
+                          <Text>查看订单</Text>
+                        </View>
+                      )}
+                    </View>
+                  )}
                 </View>
               )
             })}