+
+
+
+
+
+
+
+
+ 智能管家
+在线
+
+
+
+
+
+ {messages.map((message) => (
+
+ {message.type === 'ai' && (
+
+ ))}
+
+ {isTyping && (
+
+
+ )}
+
+
+
+
+
+
+ )}
+
+
+ {message.content}
++ {message.time} +
+
+
+
+
+
+
+
+
+
+
+
+
+ {quickQuestions.map((question, index) => (
+
+ ))}
+
+
+
+ setInputValue(e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+ placeholder="输入您的问题..."
+ className="flex-1 px-4 py-2 rounded-full text-sm outline-none"
+ style={{ backgroundColor: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
+ />
+
+
+
+
+
+
+
+
+
+ 通知中心
+ {unreadCount > 0 && ( + + {unreadCount} + + )} +
+ {unreadCount > 0 && (
+
+ )}
+
+
+
+
+
+
+ {filteredNotifications.length === 0 ? (
+
+
+
+ ) : (
+ 暂无通知
+
+ {filteredNotifications.map((notification, index) => (
+
+ {!notification.isRead && (
+
+ )}
+
+ ))}
+
+ )}
+
+
+
+ {typeConfig[notification.type]?.icon ||
+
+
+
+
+ + {notification.title} +
+ + {notification.time.split(' ')[1]} + ++ {notification.content} +
+
+ {!notification.isRead && (
+
+ )}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/layouts/UserLayout.tsx b/src/layouts/UserLayout.tsx
new file mode 100644
index 0000000..1cda047
--- /dev/null
+++ b/src/layouts/UserLayout.tsx
@@ -0,0 +1,59 @@
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+import { Compass, Home, ShoppingBag, Sparkles, User } from 'lucide-react'
+import { motion } from 'framer-motion'
+
+const tabs = [
+ { path: '/user/home', icon: Home, label: '首页' },
+ { path: '/user/ai', icon: Sparkles, label: '智能管家' },
+ { path: '/user/explore', icon: Compass, label: '逛逛' },
+ { path: '/user/group', icon: ShoppingBag, label: '团购' },
+ { path: '/user/mine', icon: User, label: '我的' },
+]
+
+export default function UserLayout() {
+ const location = useLocation()
+ const navigate = useNavigate()
+
+ const isActive = (path: string) => {
+ if (path === '/user/home') {
+ return location.pathname === '/user/home' || location.pathname === '/user/home2'
+ }
+ return location.pathname.startsWith(path)
+ }
+
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..43ea122
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import ThemeProvider from './components/ThemeProvider'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ )
+}
diff --git a/src/pages/admin/toolbox/ToolboxPage.tsx b/src/pages/admin/toolbox/ToolboxPage.tsx
new file mode 100644
index 0000000..128c0ff
--- /dev/null
+++ b/src/pages/admin/toolbox/ToolboxPage.tsx
@@ -0,0 +1,81 @@
+import { motion } from 'framer-motion'
+import { Calculator, FileText, List, Calendar, CheckSquare, Users } from 'lucide-react'
+import { toolboxItems } from '@/mock/adminData'
+
+export default function ToolboxPage() {
+ const getIcon = (icon: string) => {
+ const icons: Record
+
+
+
+ 
+
+
+
+ {adminUserInfo.name}
+{adminUserInfo.phone}
++ {adminUserInfo.department} · {adminUserInfo.position} +
+
+
+
+
+
+ {menuItems.map((item, index) => (
+ navigate(item.link)}
+ className={`w-full flex items-center justify-between p-4 ${
+ index !== menuItems.length - 1 ? 'border-b border-gray-50' : ''
+ }`}
+ whileTap={{ scale: 0.98 }}
+ >
+
+ ))}
+
+
+
+
+
+
+ {item.title}
+
+
+ )
+}
diff --git a/src/pages/admin/workspace/WorkspacePage.tsx b/src/pages/admin/workspace/WorkspacePage.tsx
new file mode 100644
index 0000000..5b7caef
--- /dev/null
+++ b/src/pages/admin/workspace/WorkspacePage.tsx
@@ -0,0 +1,160 @@
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { Bell, ChevronRight, AlertTriangle, DollarSign, FileText, CheckCircle } from 'lucide-react'
+import { workspaceTasks, aiNotifications, statistics } from '@/mock/adminData'
+
+export default function WorkspacePage() {
+ const [showNotifications, setShowNotifications] = useState(false)
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'urgent':
+ return 'bg-red-50 text-red-500'
+ case 'pending':
+ return 'bg-yellow-50 text-yellow-500'
+ default:
+ return 'bg-gray-50 text-gray-500'
+ }
+ }
+
+ const getNotificationIcon = (type: string) => {
+ switch (type) {
+ case 'payment':
+ return
+
+
+ 百宝箱
+高效工具，助力工作
+
+
+
+
+
+
+ {toolboxItems.map((item) => (
+
+
+ ))}
+
+
+ {getIcon(item.icon)}
+
+ {item.title}
+{item.desc}
+
+
+ 常用功能
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 快速报价
+一键生成报价单
+
+
+
+
+
+
+ 合同生成
+自动生成标准合同
+
+
+
+ )}
+
+
+ )
+}
diff --git a/src/pages/user/ai/AIBudgetPage.tsx b/src/pages/user/ai/AIBudgetPage.tsx
new file mode 100644
index 0000000..0d83794
--- /dev/null
+++ b/src/pages/user/ai/AIBudgetPage.tsx
@@ -0,0 +1,134 @@
+import { budgetCategories, budgetItems, selectedItems as initialSelectedItems } from '@/mock/aiData'
+import { motion } from 'framer-motion'
+import { ChevronLeft, ShoppingCart, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+export default function AIBudgetPage() {
+ const navigate = useNavigate()
+ const [selectedItems, setSelectedItems] = useState(initialSelectedItems)
+
+ const getTotalPrice = () => {
+ return selectedItems.reduce((total, item) => {
+ const categoryItems = budgetItems[item.categoryId as keyof typeof budgetItems]
+ const budgetItem = categoryItems?.find((i) => i.id === item.itemId)
+ return total + (budgetItem?.price || 0) * item.quantity
+ }, 0)
+ }
+
+ const removeItem = (categoryId: string, itemId: number) => {
+ setSelectedItems(
+ selectedItems.filter(
+ (item) => !(item.categoryId === categoryId && item.itemId === itemId)
+ )
+ )
+ }
+
+ return (
+
+
+
+ {showNotifications && (
+
+ setShowNotifications(!showNotifications)}
+ className="relative p-2"
+ whileTap={{ scale: 0.9 }}
+ >
+
+
+
+ 工作台
+
+
+
+
+ {statistics.todayOrders}
+今日订单
+
+
+ {statistics.monthOrders}
+本月订单
+
+
+ {(statistics.monthAmount / 10000).toFixed(1)}万
+本月金额
+
+
+ {statistics.completionRate}%
+完成率
+
+
+ AI智能提醒
+
+ {aiNotifications.map((notification) => (
+
+
+
+ ))}
+
+ {getNotificationIcon(notification.type)}
+
+
+
+ {notification.title}
+{notification.content}
+
+ {notification.amount > 0 && (
+
+ ¥{notification.amount.toLocaleString()}
+
+ )}
+
+ {notification.action}
+
+
+
+
+
+
+
+
+
+
+ 待办任务
+ {workspaceTasks.length}项 +
+ {workspaceTasks.map((task) => (
+
+ 
+
+ ))}
+
+
+
+ {task.title}
+{task.createTime}
+
+
+ {task.type}
+
+ {task.amount > 0 && (
+
+ + ¥{task.amount.toLocaleString()} +
+ )} +
+
+
+
+ AI工作建议
++ 今日有2笔款项待跟进，建议优先处理逾期订单，可提高回款率15%。 +
+
+
+ )
+}
diff --git a/src/pages/user/ai/AIPage.tsx b/src/pages/user/ai/AIPage.tsx
new file mode 100644
index 0000000..4e38b26
--- /dev/null
+++ b/src/pages/user/ai/AIPage.tsx
@@ -0,0 +1,170 @@
+import { motion } from 'framer-motion'
+import { Calculator, ChevronRight, Mic, Send, Volume2 } from 'lucide-react'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+export default function AIPage() {
+ const navigate = useNavigate()
+ const [inputText, setInputText] = useState('')
+ const [isListening, setIsListening] = useState(false)
+ const [messages, setMessages] = useState([
+ {
+ id: 1,
+ type: 'ai',
+ content: '您好！我是入舍智能管家，我可以帮您：\n\n• 计算装修预算\n• 推荐设计方案\n• 解答装修问题\n• 预约上门服务\n\n请问有什么可以帮您的？',
+ },
+ ])
+
+ const quickQuestions = [
+ '帮我计算装修预算',
+ '推荐现代简约风格',
+ '如何选择装修材料',
+ '预约设计师上门',
+ ]
+
+ const handleSend = () => {
+ if (!inputText.trim()) return
+
+ setMessages([
+ ...messages,
+ { id: Date.now(), type: 'user', content: inputText },
+ {
+ id: Date.now() + 1,
+ type: 'ai',
+ content: '好的，我来帮您处理这个问题。请问您的房屋面积是多少平方米？',
+ },
+ ])
+ setInputText('')
+ }
+
+ const handleMicClick = () => {
+ setIsListening(!isListening)
+ if (!isListening) {
+ setTimeout(() => {
+ setIsListening(false)
+ setInputText('我想计算一下120平米房子的装修预算')
+ }, 2000)
+ }
+ }
+
+ return (
+
+
+
+
+ 装修预算
+ +
+
+
+
+
+ 选择空间
+
+ {budgetCategories.map((category) => (
+ navigate(`/user/ai/budget/${category.id}`)}
+ className="flex flex-col items-center gap-1 p-2 rounded-xl bg-gray-50"
+ whileTap={{ scale: 0.95 }}
+ >
+ {category.icon}
+ {category.name}
+
+ ))}
+
+
+
+
+
+
+
+ {selectedItems.length === 0 ? (
+ 已选清单
+ {selectedItems.length}项 +
+
+ ) : (
+ 暂无选择项目
+
+ {selectedItems.map((item) => {
+ const categoryItems = budgetItems[item.categoryId as keyof typeof budgetItems]
+ const budgetItem = categoryItems?.find((i) => i.id === item.itemId)
+ const category = budgetCategories.find((c) => c.id === item.categoryId)
+
+ if (!budgetItem) return null
+
+ return (
+
+ {category?.icon}
+ removeItem(item.categoryId, item.itemId)}
+ className="p-1 text-gray-400 hover:text-red-500"
+ whileTap={{ scale: 0.9 }}
+ >
+
+
+ )
+ })}
+
+ )}
+
+
+ {budgetItem.name}
++ {budgetItem.brand} · {budgetItem.spec} +
+
+
+ + ¥{budgetItem.price.toLocaleString()} +
+x{item.quantity}{budgetItem.unit}
+
+
+
+
+
+ 生成报价单
+
+
+
+
+ 预估总价
+¥{getTotalPrice().toLocaleString()}
+
+
+ AI智能推荐
++ 根据您的选择，建议增加厨房吊顶和卫生间防水项目，确保装修质量。 +
+
+
+ )
+}
diff --git a/src/pages/user/ai/BudgetDetailPage.tsx b/src/pages/user/ai/BudgetDetailPage.tsx
new file mode 100644
index 0000000..75b3334
--- /dev/null
+++ b/src/pages/user/ai/BudgetDetailPage.tsx
@@ -0,0 +1,154 @@
+import { useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeft, Plus, Minus, Check } from 'lucide-react'
+import { budgetCategories, budgetItems } from '@/mock/aiData'
+
+export default function BudgetDetailPage() {
+ const navigate = useNavigate()
+ const { category } = useParams<{ category: string }>()
+ const [quantities, setQuantities] = useState
+
+
+ 智能管家
+
+ navigate('/user/ai/budget')}
+ className="flex flex-col items-center gap-2"
+ whileTap={{ scale: 0.95 }}
+ >
+
+
+
+
+
+
+
+
+ 装修预算
+
+
+ 语音播报
+
+
+ 语音输入
+
+ {messages.map((message) => (
+
+
+ ))}
+
+
+
+
+
+ {message.content}
+
+
+ 快捷问题
+
+ {quickQuestions.map((question, index) => (
+ {
+ if (index === 0) {
+ navigate('/user/ai/budget')
+ } else {
+ setInputText(question)
+ }
+ }}
+ className="w-full flex items-center justify-between p-3 rounded-lg"
+ style={{ backgroundColor: 'var(--bg-tertiary)' }}
+ whileTap={{ scale: 0.98 }}
+ >
+ {question}
+
+ ))}
+
+
+
+
+
+
+
+
+ setInputText(e.target.value)}
+ placeholder="请输入您的问题..."
+ className="w-full h-12 pl-4 pr-12 rounded-full border focus:outline-none focus:border-primary-500"
+ style={{
+ backgroundColor: 'var(--bg-primary)',
+ borderColor: 'var(--border-color)',
+ color: 'var(--text-primary)'
+ }}
+ onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+ />
+
+
+
+
+
+ )
+}
diff --git a/src/pages/user/explore/ExplorePage.tsx b/src/pages/user/explore/ExplorePage.tsx
new file mode 100644
index 0000000..b9618c9
--- /dev/null
+++ b/src/pages/user/explore/ExplorePage.tsx
@@ -0,0 +1,160 @@
+import { exploreContents } from '@/mock/homeData'
+import { motion } from 'framer-motion'
+import { Heart, MessageCircle, Play, Share2 } from 'lucide-react'
+import { useState } from 'react'
+
+export default function ExplorePage() {
+ const [activeTab, setActiveTab] = useState('all')
+ const [likedPosts, setLikedPosts] = useState
+
+
+
+ + {categoryInfo?.name || '装修预算'} +
+ +
+
+
+
+ {budgetCategories.map((cat) => (
+ navigate(`/user/ai/budget/${cat.id}`)}
+ className={`flex-shrink-0 px-4 py-2 rounded-full text-sm ${
+ cat.id === category
+ ? 'bg-primary-500 text-white'
+ : 'bg-white text-gray-600 border border-gray-200'
+ }`}
+ whileTap={{ scale: 0.95 }}
+ >
+ {cat.icon} {cat.name}
+
+ ))}
+
+
+
+ {items.map((item) => (
+
+
+ ))}
+
+
+
+
+
+
+ {item.name}
++ {item.brand} · {item.spec} +
++ ¥{item.price.toLocaleString()} + /{item.unit} +
+
+
+
+ )}
+
+
+ updateQuantity(item.id, -1)}
+ disabled={!quantities[item.id]}
+ className={`w-8 h-8 rounded-full flex items-center justify-center ${
+ quantities[item.id]
+ ? 'bg-gray-100 text-gray-600'
+ : 'bg-gray-50 text-gray-300'
+ }`}
+ whileTap={{ scale: 0.9 }}
+ >
+
+
+ {quantities[item.id] || 0}
+
+ updateQuantity(item.id, 1)}
+ className="w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center"
+ whileTap={{ scale: 0.9 }}
+ >
+
+
+
+ {quantities[item.id] > 0 && (
+
+
+
+
+ 确认添加
+
+
+
+
+ 已选 {Object.values(quantities).filter(q => q > 0).length } 项
++ ¥{getTotalPrice().toLocaleString()} +
+
+
+ )
+}
diff --git a/src/pages/user/group/BusBookingPage.tsx b/src/pages/user/group/BusBookingPage.tsx
new file mode 100644
index 0000000..b610631
--- /dev/null
+++ b/src/pages/user/group/BusBookingPage.tsx
@@ -0,0 +1,174 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeft, User, Check } from 'lucide-react'
+import { busSeats } from '@/mock/groupData'
+
+export default function BusBookingPage() {
+ const navigate = useNavigate()
+ const [selectedSeats, setSelectedSeats] = useState
+
+
+ 逛逛
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+ {filteredContents.map((content, index) => (
+
+
+ ))}
+
+ {filteredContents.length === 0 && (
+
+
+
+
+ 
+
+
+
+
+ {content.time}
+
+
+ {content.author.name}
+ {content.type === 'designer' && ( + 设计师 + )} + {content.type === 'video' && ( + 官方 + )} +{content.author.title}
+{content.title}
+{content.content}
+ + {content.type === 'video' && content.videoCover ? ( +
+ 
+
+ ) : content.images && content.images.length > 0 && (
+
+
+
+
+
+ {content.images.map((image, imgIndex) => (
+ 
+ ))}
+
+ )}
+
+
+ {content.tags.map((tag, tagIndex) => (
+
+ #{tag}
+
+ ))}
+
+
+
+ toggleLike(content.id)}
+ className="flex items-center gap-1"
+ whileTap={{ scale: 0.9 }}
+ >
+
+
+
+
+
+
+
+
+
+
+ )}
+ 暂无内容
+
+
+ )
+}
diff --git a/src/pages/user/group/GroupBuyPage.tsx b/src/pages/user/group/GroupBuyPage.tsx
new file mode 100644
index 0000000..b75b034
--- /dev/null
+++ b/src/pages/user/group/GroupBuyPage.tsx
@@ -0,0 +1,122 @@
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronRight, Star, MapPin, Clock, Users } from 'lucide-react'
+import { groupBuyPackages, factoryStores } from '@/mock/groupData'
+
+export default function GroupBuyPage() {
+ const navigate = useNavigate()
+
+ return (
+
+
+
+
+ 预约大巴座位
+ +
+
+
+
+
+
+
+
+
+
+
+
+ 佛山陶瓷工厂店
+每周六 9:00 发车
+
+ 出发：广州市天河区
+ |
+ 全程约1小时
+
+
+
+
+ 选择座位
+ +
+
+
+
+
+ 可选
+
+
+
+ 已选
+
+
+
+ 已占
+
+
+
+
+
+ 驾驶位
+
+
+ {rows.map((row, rowIndex) => (
+
+
+
+ {renderSeat(row[0])}
+ {renderSeat(row[1])}
+
+ {renderSeat(row[2])}
+ {renderSeat(row[3])}
+
+ ))}
+ + 已选 {selectedSeats.length} 个座位（最多可选4个） +
+
+
+ 乘客信息
+
+
+
+
+ setPassengerName(e.target.value)}
+ placeholder="请输入姓名"
+ className="input-field"
+ />
+
+
+
+ setPassengerPhone(e.target.value)}
+ placeholder="请输入手机号"
+ className="input-field"
+ />
+
+
+
+ 确认预约
+
+
+
+
+ )
+}
diff --git a/src/pages/user/group/GroupStorePage.tsx b/src/pages/user/group/GroupStorePage.tsx
new file mode 100644
index 0000000..8daade2
--- /dev/null
+++ b/src/pages/user/group/GroupStorePage.tsx
@@ -0,0 +1,84 @@
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeft, Star, MapPin, Clock, Bus } from 'lucide-react'
+import { factoryStores } from '@/mock/groupData'
+
+export default function GroupStorePage() {
+ const navigate = useNavigate()
+
+ return (
+
+
+
+ 品质团购
+工厂直供 · 品质保障 · 专属优惠
+
+ navigate('/user/group/bus-booking')}
+ className="w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-xl p-4 flex items-center justify-between"
+ whileTap={{ scale: 0.98 }}
+ >
+
+
+
+
+
+ 热门套餐
+
+ {groupBuyPackages.map((pkg) => (
+ navigate(`/user/group/package/${pkg.id}`)}
+ className="flex gap-3 p-3 bg-gray-50 rounded-xl"
+ whileTap={{ scale: 0.98 }}
+ >
+ 
+
+ ))}
+
+
+
+ {pkg.title}
+{pkg.subtitle}
+
+
+
+
+ ¥{pkg.price.toLocaleString()}
+
+
+ ¥{pkg.originalPrice.toLocaleString()}
+
+
+
+
+
+
+
+ 工厂店展厅
+ +
+ {factoryStores.slice(0, 2).map((store) => (
+ navigate('/user/group/store')}
+ className="flex gap-3 p-3 bg-gray-50 rounded-xl"
+ whileTap={{ scale: 0.98 }}
+ >
+ 
+
+ ))}
+
+
+
+ {store.name}
+
+
+
+
+ {store.busAvailable && (
+
+
+ {store.distance}
+
+
+ )}
+
+
+
+
+
+
+ 免费预约看大巴
+工厂店展厅直通车
+
+
+ )
+}
diff --git a/src/pages/user/group/PackageDetailPage.tsx b/src/pages/user/group/PackageDetailPage.tsx
new file mode 100644
index 0000000..0a19fe8
--- /dev/null
+++ b/src/pages/user/group/PackageDetailPage.tsx
@@ -0,0 +1,133 @@
+import { useNavigate, useParams } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeft, Star, Check, Share2 } from 'lucide-react'
+import { groupBuyPackages, renovationSchemes } from '@/mock/groupData'
+
+export default function PackageDetailPage() {
+ const navigate = useNavigate()
+ const { id } = useParams()
+
+ const pkg = groupBuyPackages.find((p) => p.id === parseInt(id || '1')) || groupBuyPackages[0]
+
+ return (
+
+
+
+
+ 工厂店展厅
+ +
+ {factoryStores.map((store) => (
+
+
+
+ ))}
+
+
+
+ {store.name}
+
+
+
+
+
+
+
+
+
+ {store.products.map((product, index) => (
+
+ {product}
+
+ ))}
+
+
+ {store.busAvailable && (
+
+
+ )}
+
+ navigate('/user/group/bus-booking')}
+ className="px-4 py-2 bg-primary-500 text-white rounded-lg text-sm"
+ whileTap={{ scale: 0.95 }}
+ >
+ 预约座位
+
+
+
+
+
+
+ 免费大巴
+{store.busTime}
+
+
+ )
+}
diff --git a/src/pages/user/home/BalconyPage.tsx b/src/pages/user/home/BalconyPage.tsx
new file mode 100644
index 0000000..921d074
--- /dev/null
+++ b/src/pages/user/home/BalconyPage.tsx
@@ -0,0 +1,71 @@
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeft, Check } from 'lucide-react'
+import { balconyDesigns } from '@/mock/homeData'
+
+export default function BalconyPage() {
+ const navigate = useNavigate()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {pkg.title}
+{pkg.subtitle}
+
+
+
+
+
+ | 已售{pkg.sales}套
+
+
+ ¥{pkg.price.toLocaleString()}
+
+
+ ¥{pkg.originalPrice.toLocaleString()}
+
+
+ 省¥{(pkg.originalPrice - pkg.price).toLocaleString()}
+
+
+
+
+
+ 套餐包含
+
+ {pkg.features.map((feature, index) => (
+
+
+
+ ))}
+
+
+
+ 改造方案
+
+ {renovationSchemes.map((scheme) => (
+
+ 
+
+ ))}
+
+
+
+ {scheme.title}
+{scheme.description}
+
+
+ ¥{scheme.price.toLocaleString()}
+
+ {scheme.duration}
+
+
+
+ 服务保障
+-
+
- · 30天无理由退换 +
- · 终身质保服务 +
- · 专业施工团队 +
- · 一站式售后服务 +
+
+
+
+ 加入购物车
+
+
+ 立即购买
+
+
+
+
+ )
+}
diff --git a/src/pages/user/home/DesignerPage.tsx b/src/pages/user/home/DesignerPage.tsx
new file mode 100644
index 0000000..dd819c2
--- /dev/null
+++ b/src/pages/user/home/DesignerPage.tsx
@@ -0,0 +1,139 @@
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeft, Star, MessageCircle, Phone, MapPin } from 'lucide-react'
+import { designers } from '@/mock/homeData'
+
+export default function DesignerPage() {
+ const navigate = useNavigate()
+ const designer = designers[0]
+
+ const works = [
+ { id: 1, image: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=400' },
+ { id: 2, image: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=400' },
+ { id: 3, image: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400' },
+ { id: 4, image: 'https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=400' },
+ ]
+
+ return (
+
+
+
+
+ 阳台设计
+ +
+ {balconyDesigns.map((design) => (
+
+ 
+
+ ))}
+
+
+
+
+
+
+ {design.title}
+ ¥{design.price} +{design.desc}
+
+ {design.features.map((feature, index) => (
+
+ {feature}
+
+ ))}
+
+
+
+ 阳台设计要点
+-
+ {[
+ '合理规划功能区域',
+ '选择防水防晒材料',
+ '注意承重安全',
+ '考虑采光通风',
+ '绿植搭配技巧',
+ ].map((item, index) => (
+
-
+
+ {item} +
+ ))}
+
+
+ )
+}
diff --git a/src/pages/user/home/HomePage.tsx b/src/pages/user/home/HomePage.tsx
new file mode 100644
index 0000000..aec2bfa
--- /dev/null
+++ b/src/pages/user/home/HomePage.tsx
@@ -0,0 +1,313 @@
+import AIChatModal from '@/components/AIChatModal'
+import NotificationModal from '@/components/NotificationModal'
+import { featuredProjects, groupPackages, homeBanners, quickActions } from '@/mock/homeData'
+import { AnimatePresence, motion } from 'framer-motion'
+import {
+ Bell,
+ Calculator,
+ Calendar,
+ ChevronRight,
+ Palette,
+ Sparkles,
+ Truck
+} from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+function useHorizontalScroll() {
+ const scrollRef = useRef
+
+
+
+
+
+
+ 设计师主页
+ +
+
+
+ 
+
+
+
+ {designer.name}
+{designer.title}
+
+
+
+
+ |
+ {designer.projects}套作品
+
+
+
+
+
+
+
+
+
+ {designer.experience}
+从业经验
+
+
+ {designer.style}
+擅长风格
+
+
+ 98%
+好评率
+
+
+
+
+
+ 个人简介
++ 拥有10年室内设计经验，专注于现代简约、北欧风格设计。曾获多项设计大奖， + 作品多次刊登于《家居廊》《Elle Decoration》等知名杂志。擅长将空间功能与美学完美结合， + 为每一位客户打造独一无二的理想之家。 +
+
+
+
+
+
+ 设计作品
+
+ {works.map((work) => (
+
+ 
+
+ ))}
+
+
+
+
+
+
+ 服务范围
+
+
+
+
+
+
+
+
+
+ navigate('/user/home2')}
+ >
+ 预约设计
+
+
+
+ setShowNotifications(false)} />
+ setShowAIChat(false)} />
+
+ )
+}
diff --git a/src/pages/user/home/HomePage2.tsx b/src/pages/user/home/HomePage2.tsx
new file mode 100644
index 0000000..88aa1f6
--- /dev/null
+++ b/src/pages/user/home/HomePage2.tsx
@@ -0,0 +1,153 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeft, ChevronRight, Check } from 'lucide-react'
+
+const timeSlots = [
+ { id: 1, time: '09:00-11:00', available: true },
+ { id: 2, time: '11:00-13:00', available: true },
+ { id: 3, time: '14:00-16:00', available: false },
+ { id: 4, time: '16:00-18:00', available: true },
+]
+
+const dates = Array.from({ length: 7 }, (_, i) => {
+ const date = new Date()
+ date.setDate(date.getDate() + i + 1)
+ return {
+ id: i + 1,
+ day: date.getDate(),
+ week: ['日', '一', '二', '三', '四', '五', '六'][date.getDay()],
+ fullDate: date.toLocaleDateString('zh-CN'),
+ }
+})
+
+export default function HomePage2() {
+ const navigate = useNavigate()
+ const [selectedDate, setSelectedDate] = useState(1)
+ const [selectedTime, setSelectedTime] = useState
+
+
+
+
+
+
+
+ 入舍智能家装
+让家更美好
+
+
+
+
+
+
+
+ ![{homeBanners[currentBanner].title}]({homeBanners[currentBanner].image})
+
+
+
+
+
+
+
+ {homeBanners[currentBanner].title}
+{homeBanners[currentBanner].subtitle}
+
+ {homeBanners.map((_, index) => (
+
+ ))}
+
+
+
+
+
+
+
+ {quickActions.map((action) => (
+ navigate(action.link)}
+ className="flex flex-col items-center"
+ whileTap={{ scale: 0.95 }}
+ >
+
+ ))}
+
+
+ {getActionIcon(action.icon)}
+
+ {action.title}
+ {action.desc}
+
+
+
+
+
+
+
+
+
+ 团购秒杀
+
+ 距结束
+
+ {String(countdown.days).padStart(2, '0')}
+
+ 天
+
+ {String(countdown.hours).padStart(2, '0')}
+
+ 时
+
+ {String(countdown.minutes).padStart(2, '0')}
+
+ 分
+
+ {String(countdown.seconds).padStart(2, '0')}
+
+ 秒
+
+
+ {groupPackages.map((pkg) => (
+ navigate('/user/group')}
+ className="flex-shrink-0 w-36 rounded-xl overflow-hidden shadow-sm"
+ style={{ backgroundColor: 'var(--bg-primary)' }}
+ whileTap={{ scale: 0.98 }}
+ >
+
+
+ ))}
+
+
+
+ {pkg.name}
+
+ ¥{pkg.groupPrice}
+ ¥{pkg.originalPrice}
+
+
+ {pkg.tag}
+ 已售{pkg.sold}
+
+
+
+
+
+
+
+ 精选案例
+ +
+ {featuredProjects.map((project) => (
+
+ 
+
+ ))}
+
+
+
+ {project.title}
+
+ {project.area}
+ |
+ {project.style}
+
+ {project.budget}
+
+
+
+
+
+ 预约管家上门
+ +
+
+
+
+ 选择日期
+
+ {dates.map((date) => (
+ setSelectedDate(date.id)}
+ className={`flex-shrink-0 w-14 h-16 rounded-xl flex flex-col items-center justify-center ${
+ selectedDate === date.id
+ ? 'bg-primary-500 text-white'
+ : 'bg-gray-50 text-gray-600'
+ }`}
+ whileTap={{ scale: 0.95 }}
+ >
+ {date.day}
+ 周{date.week}
+
+ ))}
+
+
+
+
+ 选择时间
+
+ {timeSlots.map((slot) => (
+ slot.available && setSelectedTime(slot.id)}
+ disabled={!slot.available}
+ className={`h-12 rounded-xl flex items-center justify-center gap-2 ${
+ !slot.available
+ ? 'bg-gray-100 text-gray-400'
+ : selectedTime === slot.id
+ ? 'bg-primary-500 text-white'
+ : 'bg-gray-50 text-gray-600 border border-gray-200'
+ }`}
+ whileTap={slot.available ? { scale: 0.95 } : {}}
+ >
+ {slot.time}
+ {selectedTime === slot.id &&
+ ))}
+
+
+
联系信息
+
+
+
+ setAddress(e.target.value)}
+ placeholder="请输入详细地址"
+ className="input-field"
+ />
+
+
+
+ setPhone(e.target.value)}
+ placeholder="请输入联系电话"
+ className="input-field"
+ />
+
+
+
+