+ {/* 左側類別列表 */} +

商品類別

+ 選取類別，然後點擊地圖中的貨架進行指派 +

+ + {/* Demo 快速設定 */} +

+ 🚀 +

Demo 快速設定

+ 一鍵填入範例類別資料，快速完成展示設定 +

+ +

+ + {/* 類別列表 */} +

+ {assignableCategories.map((category) => ( + + ))} +

+ + {/* 快速操作 */} +

+ +

+ + {/* 3D 畫布區 */} +

+ + + + + {/* 操作提示 */} +

+ {selectedCategoryId + ? '點擊地圖中的貨架進行類別指派' + : '請先從左側選取一個類別'} +

+ + {/* 圖例 */} +

類別圖例

+ {assignableCategories.slice(0, 8).map((category) => ( +

+ + {category.name} + +

+ ))} +

+ + {/* 右側選取元素資訊 */} +

元素資訊

+ + {selectedElement ? ( +

+ {/* 元素類型 */} +

類型

+ {selectedElement.type === 'aisle' && '貨架'} + {selectedElement.type === 'cashier' && '收銀台'} + {selectedElement.type === 'entrance' && '入口'} + {selectedElement.type === 'storage' && '倉庫'} + {selectedElement.type === 'promo' && '促銷區'} +

+ + {/* 已指派類別 */} +

已指派類別

+ {selectedElement.categoryId ? ( +

+ + {sampleCategories.find((c) => c.id === selectedElement.categoryId)?.name || '未知類別'} + +

+ ) : ( +

尚未指派

+ )} +

+ + {/* 清除按鈕 */} + {selectedElement.categoryId && ( + + )} +

+ ) : ( +

請選取一個元素

點擊地圖中的物件

+ )} + + {/* 導覽按鈕 */} +

+ + +

+ ) +} diff --git a/src/pages/EditorPage.tsx b/src/pages/EditorPage.tsx new file mode 100644 index 0000000..873e911 --- /dev/null +++ b/src/pages/EditorPage.tsx @@ -0,0 +1,350 @@ +import { useEffect, useCallback } from 'react' +import { useNavigate } from 'react-router-dom' +import { v4 as uuidv4 } from 'uuid' +import { ThreeEvent } from '@react-three/fiber' +import { StoreCanvas, StoreGroup } from '../components/three' +import { Button } from '../components/common' +import { useStoreConfigStore, useMapStore } from '../store' +import { generateInitialMap } from '../utils' +import { EditorMode, MapElementType } from '../types' + +const editorModes: { mode: EditorMode; label: string; icon: string }[] = [ + { mode: 'select', label: '選取', icon: '👆' }, + { mode: 'move', label: '移動', icon: '✋' }, + { mode: 'scale', label: '縮放', icon: '⤢' }, + { mode: 'rotate', label: '旋轉', icon: '🔄' }, + { mode: 'add', label: '新增', icon: '➕' }, +] + +const addElementTypes: { type: MapElementType; label: string }[] = [ + { type: 'aisle', label: '貨架' }, + { type: 'cashier', label: '收銀台' }, + { type: 'entrance', label: '入口' }, + { type: 'storage', label: '倉庫' }, + { type: 'promo', label: '促銷區' }, +] + +export function EditorPage() { + const navigate = useNavigate() + const { storeConfig, isConfigured } = useStoreConfigStore() + const { + storeMap, + setStoreMap, + selectedElementId, + selectElement, + editorMode, + setEditorMode, + updateElement, + addElement, + removeElement, + } = useMapStore() + + // 如果沒有設定，導向精靈頁面 + useEffect(() => { + if (!isConfigured || !storeConfig) { + navigate('/wizard') + } + }, [isConfigured, storeConfig, navigate]) + + // 生成初始地圖 + useEffect(() => { + if (storeConfig) { + // 如果地圖不存在，或地圖的 storeId 與設定不符，或地圖元素為空，則重新生成 + const shouldRegenerate = + !storeMap || + storeMap.storeId !== storeConfig.id || + storeMap.elements.length === 0 + + if (shouldRegenerate) { + console.log('生成新地圖，設定ID:', storeConfig.id) + const initialMap = generateInitialMap(storeConfig) + console.log('生成的地圖元素數量:', initialMap.elements.length) + setStoreMap(initialMap) + } + } + }, [storeConfig, storeMap, setStoreMap]) + + // 處理元素點擊 + const handleElementClick = useCallback( + (id: string, _event: ThreeEvent) => { + if (editorMode === 'select' || editorMode === 'move' || editorMode === 'scale' || editorMode === 'rotate') { + selectElement(id) + } + }, + [editorMode, selectElement] + ) + + // 處理新增元素 + const handleAddElement = useCallback( + (type: MapElementType) => { + if (!storeMap || !storeConfig) return + + const newElement = { + id: uuidv4(), + type, + floorIndex: 0, + position: { x: 0, y: 0, z: 0 }, + rotation: 0, + dimensions: { + width: type === 'aisle' ? 1.2 : 2, + height: type === 'aisle' ? 2.2 : 1.2, + depth: type === 'aisle' ? 8 : 2, + }, + label: type === 'aisle' ? '新貨架' : undefined, + } + + addElement(newElement) + selectElement(newElement.id) + setEditorMode('select') + }, + [storeMap, storeConfig, addElement, selectElement, setEditorMode] + ) + + // 處理刪除元素 + const handleDeleteElement = useCallback(() => { + if (selectedElementId) { + removeElement(selectedElementId) + } + }, [selectedElementId, removeElement]) + + // 取得選取的元素 + const selectedElement = storeMap?.elements.find((e) => e.id === selectedElementId) + + // 處理屬性變更 + const handlePropertyChange = (key: string, value: number) => { + if (!selectedElementId || !selectedElement) return + + if (key.startsWith('position.')) { + const axis = key.split('.')[1] as 'x' | 'y' | 'z' + updateElement(selectedElementId, { + position: { ...selectedElement.position, [axis]: value }, + }) + } else if (key.startsWith('dimensions.')) { + const dim = key.split('.')[1] as 'width' | 'height' | 'depth' + updateElement(selectedElementId, { + dimensions: { ...selectedElement.dimensions, [dim]: value }, + }) + } else if (key === 'rotation') { + updateElement(selectedElementId, { rotation: (value * Math.PI) / 180 }) + } + } + + if (!storeConfig) { + return null + } + + const floorConfig = storeConfig.floors[0] + + return ( +

+ {/* 左側工具列 */} +

+ {editorModes.map(({ mode, label, icon }) => ( + + ))} + +

+ + {/* 刪除按鈕 */} + + +

+ + {/* 重新生成按鈕 */} + +

+ + {/* 3D 畫布區 */} +

+ + + + + {/* 新增元素面板 */} + {editorMode === 'add' && ( +

新增元素

+ {addElementTypes.map(({ type, label }) => ( + + ))} +

+ )} + + {/* 提示訊息 */} +

+ {editorMode === 'select' && '點擊元素選取，或拖曳旋轉視角'} + {editorMode === 'move' && '選取元素後，可移動位置'} + {editorMode === 'scale' && '選取元素後，可調整大小'} + {editorMode === 'rotate' && '選取元素後，可旋轉方向'} + {editorMode === 'add' && '選擇要新增的元素類型'} +

+ 地圖元素數量: {storeMap?.elements?.length ?? 0} | + 設定ID: {storeConfig?.id?.substring(0, 8) ?? '無'} +

+ + {/* 右側屬性面板 */} +

屬性面板

+ + {selectedElement ? ( +

+ {/* 元素資訊 */} +

類型

+ {selectedElement.label && ( + <> +

標籤

{selectedElement.label}

+ + )} +

+ + {/* 位置 */} +

位置

+ {['x', 'y', 'z'].map((axis) => ( +

+ {axis} + + handlePropertyChange(`position.${axis}`, parseFloat(e.target.value) || 0) + } + className="w-full px-2 py-1 border rounded text-sm" + /> +

+ ))} +

+ + {/* 尺寸 */} +

尺寸

+ {[ + { key: 'width', label: '寬' }, + { key: 'height', label: '高' }, + { key: 'depth', label: '深' }, + ].map(({ key, label }) => ( +

+ {label} + + handlePropertyChange(`dimensions.${key}`, parseFloat(e.target.value) || 0.1) + } + className="w-full px-2 py-1 border rounded text-sm" + /> +

+ ))} +

+ + {/* 旋轉 */} +

旋轉角度

+ + handlePropertyChange('rotation', parseFloat(e.target.value) || 0) + } + className="w-full px-2 py-1 border rounded text-sm" + /> +

單位：度

+ ) : ( +

請選取一個元素

點擊畫布中的物件

+ )} + + {/* 導覽按鈕 */} +

+ + +

+ ) +} diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx new file mode 100644 index 0000000..9d59f06 --- /dev/null +++ b/src/pages/SearchPage.tsx @@ -0,0 +1,267 @@ +import { useEffect, useMemo, useCallback } from 'react' +import { useNavigate } from 'react-router-dom' +import { StoreCanvas, StoreGroup } from '../components/three' +import { useStoreConfigStore, useMapStore } from '../store' +import { useSearch } from '../hooks' +import { sampleCategories, sampleProducts } from '../data' +import { getProductsByCategory } from '../utils' + +export function SearchPage() { + const navigate = useNavigate() + const { storeConfig, isConfigured } = useStoreConfigStore() + const { storeMap, highlightElement, highlightedElementId } = useMapStore() + const { query, results, selectedResult, handleSearch, clearSearch, selectResult } = useSearch() + + // 如果沒有設定或地圖，導向適當頁面 + useEffect(() => { + if (!isConfigured || !storeConfig) { + navigate('/wizard') + } else if (!storeMap) { + navigate('/editor') + } + }, [isConfigured, storeConfig, storeMap, navigate]) + + // 根據選取的結果找到對應的元素並醒目提示 + useEffect(() => { + if (selectedResult?.category) { + // 找到該類別的第一個元素 + const element = storeMap?.elements.find( + (e) => e.categoryId === selectedResult.category?.id + ) + console.log('搜尋結果類別:', selectedResult.category?.id, selectedResult.category?.name) + console.log('地圖中有分類的元素:', storeMap?.elements.filter(e => e.categoryId).map(e => ({ id: e.id.slice(0, 8), type: e.type, categoryId: e.categoryId }))) + console.log('找到的元素:', element?.id, element?.type) + if (element) { + highlightElement(element.id) + } + } else { + highlightElement(null) + } + }, [selectedResult, storeMap, highlightElement]) + + // 處理搜尋輸入 + const handleInputChange = useCallback( + (e: React.ChangeEvent) => { + handleSearch(e.target.value) + selectResult(null) + }, + [handleSearch, selectResult] + ) + + // 處理結果選取 + const handleResultClick = useCallback( + (result: typeof results[0]) => { + selectResult(result) + }, + [selectResult] + ) + + // 取得選取類別的相關商品 + const relatedProducts = useMemo(() => { + if (!selectedResult?.category) return [] + return getProductsByCategory(sampleProducts, selectedResult.category.id).slice(0, 5) + }, [selectedResult]) + + // 處理元素點擊 + const handleElementClick = useCallback( + (id: string) => { + const element = storeMap?.elements.find((e) => e.id === id) + if (element?.categoryId) { + const category = sampleCategories.find((c) => c.id === element.categoryId) + if (category) { + highlightElement(id) + // 建立一個虛擬的搜尋結果 + selectResult({ + product: { + id: 'click-' + id, + name: category.name, + categoryId: category.id, + keywords: [], + }, + category, + score: 0, + }) + } + } + }, + [storeMap, highlightElement, selectResult] + ) + + if (!storeConfig || !storeMap) { + return null + } + + const floorConfig = storeConfig.floors[0] + + return ( +

+ {/* 搜尋列 */} +

+ + {/* 搜尋圖示 */} + + {/* 清除按鈕 */} + {query && ( + + )} +

+ + {/* 搜尋結果下拉選單 */} + {results.length > 0 && !selectedResult && ( +

+ {results.map((result, index) => ( + + ))} +

+ )} +

+ + {/* 3D 畫布 */} +

+ + + +

+ + {/* 底部資訊面板 */} + {selectedResult && ( +

+ {/* 類別顏色標示 */} +

+ + {selectedResult.category?.name.charAt(0)} + +

+ + {/* 資訊 */} +

+ {selectedResult.product.name} +

+ + 已找到位置 + +

+ 位於 + {selectedResult.category?.name} + +

+ + {/* 相關商品 */} + {relatedProducts.length > 0 && ( +

同區域還有：

+ {relatedProducts.map((product) => ( + + {product.name} + + ))} +

+ )} +

+ + {/* 關閉按鈕 */} + +

+ )} + + {/* 操作提示 */} + {!selectedResult && !query && ( +

+ 輸入商品名稱進行搜尋，或點擊地圖中的區域查看類別資訊 +

+ )} + + {/* 圖例 */} +

區域圖例

+ {sampleCategories.slice(0, 6).map((category) => ( +

+ {category.name} +

+ ))} +

+ ) +} diff --git a/src/pages/WizardPage.tsx b/src/pages/WizardPage.tsx new file mode 100644 index 0000000..68d67ba --- /dev/null +++ b/src/pages/WizardPage.tsx @@ -0,0 +1,265 @@ +import { useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { v4 as uuidv4 } from 'uuid' +import { Button } from '../components/common/Button' +import { Input } from '../components/common/Input' +import { useStoreConfigStore, useMapStore } from '../store' +import { FloorConfig } from '../types' + +export function WizardPage() { + const navigate = useNavigate() + const { storeConfig, setStoreConfig, loadSampleConfig, isConfigured, resetConfig } = useStoreConfigStore() + const { resetMap } = useMapStore() + + // 表單狀態 + const [storeName, setStoreName] = useState(storeConfig?.name || '') + const [floorCount, setFloorCount] = useState(storeConfig?.floorCount || 1) + const [aisleCount, setAisleCount] = useState( + storeConfig?.floors[0]?.aisleCount || 14 + ) + const [aisleWidth, setAisleWidth] = useState( + storeConfig?.floors[0]?.defaultAisleWidth || 1.2 + ) + const [aisleLength, setAisleLength] = useState( + storeConfig?.floors[0]?.defaultAisleLength || 8 + ) + const [floorWidth, setFloorWidth] = useState( + storeConfig?.floors[0]?.floorWidth || 30 + ) + const [floorLength, setFloorLength] = useState( + storeConfig?.floors[0]?.floorLength || 25 + ) + + // 錯誤狀態 + const [errors, setErrors] = useState>({}) + + // 驗證表單 + const validateForm = (): boolean => { + const newErrors: Record = {} + + if (!storeName.trim()) { + newErrors.storeName = '請輸入店名' + } + if (floorCount < 1 || floorCount > 5) { + newErrors.floorCount = '樓層數必須介於 1-5 之間' + } + if (aisleCount < 1 || aisleCount > 50) { + newErrors.aisleCount = '走道數必須介於 1-50 之間' + } + if (aisleWidth < 0.5 || aisleWidth > 5) { + newErrors.aisleWidth = '走道寬度必須介於 0.5-5 公尺' + } + if (aisleLength < 1 || aisleLength > 20) { + newErrors.aisleLength = '走道長度必須介於 1-20 公尺' + } + if (floorWidth < 10 || floorWidth > 100) { + newErrors.floorWidth = '樓層寬度必須介於 10-100 公尺' + } + if (floorLength < 10 || floorLength > 100) { + newErrors.floorLength = '樓層長度必須介於 10-100 公尺' + } + + setErrors(newErrors) + return Object.keys(newErrors).length === 0 + } + + // 載入範例資料 + const handleLoadSample = () => { + loadSampleConfig() + setStoreName('範例超市') + setFloorCount(1) + setAisleCount(14) + setAisleWidth(1.2) + setAisleLength(8) + setFloorWidth(30) + setFloorLength(25) + setErrors({}) + } + + // 清除所有資料 + const handleResetAll = () => { + if (confirm('確定要清除所有資料嗎？這將重置所有設定和地圖。')) { + resetConfig() + resetMap() + setStoreName('') + setFloorCount(1) + setAisleCount(14) + setAisleWidth(1.2) + setAisleLength(8) + setFloorWidth(30) + setFloorLength(25) + setErrors({}) + } + } + + // 提交表單 + const handleSubmit = () => { + if (!validateForm()) return + + // 建立樓層設定 + const floors: FloorConfig[] = [] + for (let i = 0; i < floorCount; i++) { + floors.push({ + floorIndex: i, + aisleCount, + defaultAisleWidth: aisleWidth, + defaultAisleLength: aisleLength, + floorWidth, + floorLength, + }) + } + + // 每次提交都生成新的 ID，確保地圖會重新生成 + const now = new Date() + setStoreConfig({ + id: uuidv4(), + name: storeName, + floorCount, + floors, + createdAt: now, + updatedAt: now, + }) + + navigate('/editor') + } + + return ( +

+ {/* 標題區 */} +

+ 店家資訊設定 +

+ 請填寫以下資訊，系統將根據這些資料生成初始 3D 地圖 +

+ + {/* 快速載入區 */} +

快速開始

+ 載入超市範例資料，快速體驗功能 +

+ + {isConfigured && ( + + )} +

+ + {/* 表單 */} +

+ {/* 店名 */} + setStoreName(e.target.value)} + error={errors.storeName} + /> + + {/* 樓層數 */} + setFloorCount(parseInt(e.target.value) || 1)} + error={errors.floorCount} + helpText="支援 1-5 層樓" + /> + + {/* 分隔線 */} +

+ 樓層配置（以第一層為基準） +

+ +

+ {/* 走道數 */} + setAisleCount(parseInt(e.target.value) || 1)} + error={errors.aisleCount} + /> + + {/* 走道寬度 */} + setAisleWidth(parseFloat(e.target.value) || 1)} + error={errors.aisleWidth} + /> + + {/* 走道長度 */} + setAisleLength(parseFloat(e.target.value) || 1)} + error={errors.aisleLength} + /> + + {/* 樓層寬度 */} + setFloorWidth(parseInt(e.target.value) || 10)} + error={errors.floorWidth} + /> + + {/* 樓層長度 */} + setFloorLength(parseInt(e.target.value) || 10)} + error={errors.floorLength} + /> +

+ + {/* 提交按鈕 */} +

+ {isConfigured && ( + + )} + +

+ ) +} diff --git a/src/pages/index.ts b/src/pages/index.ts new file mode 100644 index 0000000..4de8173 --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1,4 @@ +export * from './WizardPage' +export * from './EditorPage' +export * from './DistributionPage' +export * from './SearchPage' diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..8f7e39e --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,3 @@ +export * from './storeConfigStore' +export * from './mapStore' +export * from './uiStore' diff --git a/src/store/mapStore.ts b/src/store/mapStore.ts new file mode 100644 index 0000000..3954a43 --- /dev/null +++ b/src/store/mapStore.ts @@ -0,0 +1,132 @@ +import { create } from 'zustand' +import { persist, createJSONStorage } from 'zustand/middleware' +import { MapElement, StoreMap, EditorMode } from '../types' + +interface MapState { + storeMap: StoreMap | null + selectedElementId: string | null + highlightedElementId: string | null + editorMode: EditorMode +} + +interface MapActions { + setStoreMap: (map: StoreMap) => void + updateElement: (id: string, updates: Partial) => void + addElement: (element: MapElement) => void + removeElement: (id: string) => void + selectElement: (id: string | null) => void + highlightElement: (id: string | null) => void + setEditorMode: (mode: EditorMode) => void + assignCategory: (elementId: string, categoryId: string) => void + clearCategoryFromElement: (elementId: string) => void + resetMap: () => void +} + +type MapStore = MapState & MapActions + +export const useMapStore = create()( + persist( + (set, get) => ({ + // 狀態 + storeMap: null, + selectedElementId: null, + highlightedElementId: null, + editorMode: 'select', + + // 動作 + setStoreMap: (map) => set({ storeMap: map }), + + updateElement: (id, updates) => { + const storeMap = get().storeMap + if (!storeMap) return + + set({ + storeMap: { + ...storeMap, + elements: storeMap.elements.map((el) => + el.id === id ? { ...el, ...updates } : el + ), + }, + }) + }, + + addElement: (element) => { + const storeMap = get().storeMap + if (!storeMap) return + + set({ + storeMap: { + ...storeMap, + elements: [...storeMap.elements, element], + }, + }) + }, + + removeElement: (id) => { + const storeMap = get().storeMap + if (!storeMap) return + + set({ + storeMap: { + ...storeMap, + elements: storeMap.elements.filter((el) => el.id !== id), + }, + selectedElementId: get().selectedElementId === id ? null : get().selectedElementId, + }) + }, + + selectElement: (id) => set({ selectedElementId: id }), + + highlightElement: (id) => set({ highlightedElementId: id }), + + setEditorMode: (mode) => set({ editorMode: mode }), + + assignCategory: (elementId, categoryId) => { + const storeMap = get().storeMap + if (!storeMap) return + + set({ + storeMap: { + ...storeMap, + elements: storeMap.elements.map((el) => + el.id === elementId ? { ...el, categoryId } : el + ), + }, + }) + }, + + clearCategoryFromElement: (elementId) => { + const storeMap = get().storeMap + if (!storeMap) return + + set({ + storeMap: { + ...storeMap, + elements: storeMap.elements.map((el) => + el.id === elementId ? { ...el, categoryId: undefined } : el + ), + }, + }) + }, + + resetMap: () => { + set({ + storeMap: null, + selectedElementId: null, + highlightedElementId: null, + editorMode: 'select', + }) + }, + }), + { + name: 'store-map-storage', + storage: createJSONStorage(() => localStorage), + } + ) +) + +// 取得指定類別的所有元素 +export function getElementsByCategory(storeMap: StoreMap | null, categoryId: string): MapElement[] { + if (!storeMap) return [] + return storeMap.elements.filter((el) => el.categoryId === categoryId) +} diff --git a/src/store/storeConfigStore.ts b/src/store/storeConfigStore.ts new file mode 100644 index 0000000..d0a786b --- /dev/null +++ b/src/store/storeConfigStore.ts @@ -0,0 +1,99 @@ +import { create } from 'zustand' +import { persist, createJSONStorage } from 'zustand/middleware' +import { v4 as uuidv4 } from 'uuid' +import { StoreConfig, FloorConfig, DEFAULT_SUPERMARKET_CONFIG } from '../types' + +interface StoreConfigState { + storeConfig: StoreConfig | null + isConfigured: boolean +} + +interface StoreConfigActions { + setStoreConfig: (config: Partial) => void + updateFloor: (floorIndex: number, updates: Partial) => void + loadSampleConfig: () => void + resetConfig: () => void +} + +type StoreConfigStore = StoreConfigState & StoreConfigActions + +export const useStoreConfigStore = create()( + persist( + (set, get) => ({ + // 狀態 + storeConfig: null, + isConfigured: false, + + // 動作 + setStoreConfig: (config) => { + const current = get().storeConfig + const now = new Date() + + if (current) { + set({ + storeConfig: { + ...current, + ...config, + updatedAt: now, + }, + isConfigured: true, + }) + } else { + set({ + storeConfig: { + id: uuidv4(), + name: '', + floorCount: 1, + floors: [], + createdAt: now, + updatedAt: now, + ...config, + }, + isConfigured: true, + }) + } + }, + + updateFloor: (floorIndex, updates) => { + const config = get().storeConfig + if (!config) return + + set({ + storeConfig: { + ...config, + floors: config.floors.map((floor) => + floor.floorIndex === floorIndex + ? { ...floor, ...updates } + : floor + ), + updatedAt: new Date(), + }, + }) + }, + + loadSampleConfig: () => { + const now = new Date() + set({ + storeConfig: { + ...DEFAULT_SUPERMARKET_CONFIG, + id: uuidv4(), + createdAt: now, + updatedAt: now, + }, + isConfigured: true, + }) + }, + + resetConfig: () => { + set({ + storeConfig: null, + isConfigured: false, + }) + }, + }), + { + name: 'store-config-storage', + storage: createJSONStorage(() => localStorage), + } + ) +) diff --git a/src/store/uiStore.ts b/src/store/uiStore.ts new file mode 100644 index 0000000..21e4732 --- /dev/null +++ b/src/store/uiStore.ts @@ -0,0 +1,42 @@ +import { create } from 'zustand' + +interface UIState { + // 當前設定步驟 (1-3) + currentStep: number + // 選取的類別 ID（用於分布頁面） + selectedCategoryId: string | null + // 搜尋關鍵字 + searchQuery: string + // 是否顯示側邊欄 + showSidebar: boolean + // 載入狀態 + isLoading: boolean +} + +interface UIActions { + setCurrentStep: (step: number) => void + setSelectedCategoryId: (id: string | null) => void + setSearchQuery: (query: string) => void + toggleSidebar: () => void + setShowSidebar: (show: boolean) => void + setIsLoading: (loading: boolean) => void +} + +type UIStore = UIState & UIActions + +export const useUIStore = create((set) => ({ + // 狀態 + currentStep: 1, + selectedCategoryId: null, + searchQuery: '', + showSidebar: true, + isLoading: false, + + // 動作 + setCurrentStep: (step) => set({ currentStep: step }), + setSelectedCategoryId: (id) => set({ selectedCategoryId: id }), + setSearchQuery: (query) => set({ searchQuery: query }), + toggleSidebar: () => set((state) => ({ showSidebar: !state.showSidebar })), + setShowSidebar: (show) => set({ showSidebar: show }), + setIsLoading: (loading) => set({ isLoading: loading }), +})) diff --git a/src/types/category.types.ts b/src/types/category.types.ts new file mode 100644 index 0000000..a91622c --- /dev/null +++ b/src/types/category.types.ts @@ -0,0 +1,29 @@ +// 類別與商品相關型別 + +export interface Category { + id: string + name: string // 繁體中文名稱 + nameEn?: string // 英文名稱（可選） + color: string // 視覺化顏色（Hex） + icon?: string // 圖示識別碼（可選） +} + +export interface Product { + id: string + name: string // 繁體中文名稱 + categoryId: string // 所屬類別 ID + keywords: string[] // 搜尋關鍵字（同義詞、別名） + brand?: string // 品牌（可選） +} + +export interface CategoryAssignment { + elementId: string // MapElement id + categoryId: string +} + +// 搜尋結果 +export interface SearchResult { + product: Product + category: Category | undefined + score: number | undefined +} diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..400f4ae --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,3 @@ +export * from './store.types' +export * from './map.types' +export * from './category.types' diff --git a/src/types/map.types.ts b/src/types/map.types.ts new file mode 100644 index 0000000..b99b698 --- /dev/null +++ b/src/types/map.types.ts @@ -0,0 +1,44 @@ +// 地圖元素相關型別 + +export type MapElementType = 'aisle' | 'cashier' | 'entrance' | 'storage' | 'curved' | 'promo' + +export interface Position3D { + x: number + y: number + z: number +} + +export interface Dimensions3D { + width: number + height: number + depth: number +} + +export interface MapElement { + id: string + type: MapElementType + floorIndex: number + position: Position3D + rotation: number // Y 軸旋轉角度（弧度） + dimensions: Dimensions3D + categoryId?: string // 指派的類別 ID + label?: string // 顯示標籤 +} + +export interface CurvedElement extends MapElement { + type: 'curved' + curvePoints: Position3D[] // 曲線控制點 + curveType: 'arc' | 'bezier' +} + +export interface StoreMap { + storeId: string + elements: MapElement[] + curvedElements: CurvedElement[] +} + +// 編輯器模式 +export type EditorMode = 'select' | 'move' | 'scale' | 'rotate' | 'add' + +// 新增元素類型 +export type AddElementType = MapElementType diff --git a/src/types/store.types.ts b/src/types/store.types.ts new file mode 100644 index 0000000..099a0a9 --- /dev/null +++ b/src/types/store.types.ts @@ -0,0 +1,35 @@ +// 店家設定相關型別 + +export interface StoreConfig { + id: string + name: string + floorCount: number + floors: FloorConfig[] + createdAt: Date + updatedAt: Date +} + +export interface FloorConfig { + floorIndex: number + aisleCount: number + defaultAisleWidth: number // 單位：公尺 + defaultAisleLength: number // 單位：公尺 + floorWidth: number // 樓層總寬度 + floorLength: number // 樓層總長度 +} + +// 預設超市配置 +export const DEFAULT_SUPERMARKET_CONFIG: Omit = { + name: '範例超市', + floorCount: 1, + floors: [ + { + floorIndex: 0, + aisleCount: 14, + defaultAisleWidth: 1.2, + defaultAisleLength: 8, + floorWidth: 30, + floorLength: 25, + }, + ], +} diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..a271adf --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,2 @@ +export * from './mapGenerator' +export * from './searchEngine' diff --git a/src/utils/mapGenerator.ts b/src/utils/mapGenerator.ts new file mode 100644 index 0000000..a0edafd --- /dev/null +++ b/src/utils/mapGenerator.ts @@ -0,0 +1,149 @@ +import { v4 as uuidv4 } from 'uuid' +import { StoreConfig, StoreMap, MapElement } from '../types' + +/** + * 根據店家設定生成初始地圖 + */ +export function generateInitialMap(config: StoreConfig): StoreMap { + const elements: MapElement[] = [] + + config.floors.forEach((floor) => { + const { + floorIndex, + aisleCount, + defaultAisleWidth, + defaultAisleLength, + floorWidth, + floorLength, + } = floor + + // 計算走道間距 + // 將走道分成兩排 + const aislesPerRow = Math.ceil(aisleCount / 2) + const rowSpacing = floorLength / 3 // 兩排之間的間距 + + // 計算每排走道的間距 + const aisleSpacing = (floorWidth - aislesPerRow * defaultAisleWidth) / (aislesPerRow + 1) + + // 生成走道 + for (let i = 0; i < aisleCount; i++) { + const row = Math.floor(i / aislesPerRow) + const col = i % aislesPerRow + + const xPos = aisleSpacing + col * (defaultAisleWidth + aisleSpacing) - floorWidth / 2 + defaultAisleWidth / 2 + const zPos = row === 0 ? -rowSpacing / 2 : rowSpacing / 2 + + elements.push({ + id: uuidv4(), + type: 'aisle', + floorIndex, + position: { x: xPos, y: floorIndex * 4, z: zPos }, + rotation: 0, + dimensions: { + width: defaultAisleWidth, + height: 2.2, + depth: defaultAisleLength, + }, + label: `走道 ${i + 1}`, + }) + } + + // 新增入口 + elements.push({ + id: uuidv4(), + type: 'entrance', + floorIndex, + position: { x: 0, y: floorIndex * 4, z: floorLength / 2 - 1.5 }, + rotation: 0, + dimensions: { width: 4, height: 0.3, depth: 2 }, + label: '入口', + categoryId: 'cat-12', + }) + + // 新增收銀台區域（三個收銀台） + const cashierWidth = 2 + const cashierSpacing = 3 + const cashierStartX = -(cashierWidth + cashierSpacing) + + for (let i = 0; i < 3; i++) { + elements.push({ + id: uuidv4(), + type: 'cashier', + floorIndex, + position: { + x: cashierStartX + i * (cashierWidth + cashierSpacing), + y: floorIndex * 4, + z: floorLength / 2 - 4, + }, + rotation: 0, + dimensions: { width: cashierWidth, height: 1.2, depth: 1.5 }, + label: `收銀台 ${i + 1}`, + categoryId: 'cat-11', + }) + } + + // 新增生鮮區（左側） + elements.push({ + id: uuidv4(), + type: 'aisle', + floorIndex, + position: { x: -floorWidth / 2 + 2, y: floorIndex * 4, z: 0 }, + rotation: Math.PI / 2, + dimensions: { width: 1.5, height: 1.8, depth: floorLength - 8 }, + label: '生鮮區', + categoryId: 'cat-4', + }) + + // 新增冷凍區（右側） + elements.push({ + id: uuidv4(), + type: 'aisle', + floorIndex, + position: { x: floorWidth / 2 - 2, y: floorIndex * 4, z: 0 }, + rotation: Math.PI / 2, + dimensions: { width: 1.5, height: 2, depth: floorLength - 8 }, + label: '冷凍區', + categoryId: 'cat-6', + }) + }) + + return { + storeId: config.id, + elements, + curvedElements: [], + } +} + +/** + * 為走道自動分配類別（範例用） + */ +export function assignSampleCategories(storeMap: StoreMap): StoreMap { + // 商品類別 ID（排除收銀台和入口） + const productCategories = [ + 'cat-1', // 零食餅乾 + 'cat-2', // 飲料 + 'cat-3', // 乳製品 + 'cat-5', // 肉品海鮮 + 'cat-7', // 調味料 + 'cat-8', // 泡麵罐頭 + 'cat-9', // 日用品 + 'cat-10', // 清潔用品 + ] + + let categoryIndex = 0 + + const updatedElements = storeMap.elements.map((element) => { + // 只為未指派類別的走道分配 + if (element.type === 'aisle' && !element.categoryId) { + const categoryId = productCategories[categoryIndex % productCategories.length] + categoryIndex++ + return { ...element, categoryId } + } + return element + }) + + return { + ...storeMap, + elements: updatedElements, + } +} diff --git a/src/utils/searchEngine.ts b/src/utils/searchEngine.ts new file mode 100644 index 0000000..0337299 --- /dev/null +++ b/src/utils/searchEngine.ts @@ -0,0 +1,51 @@ +import Fuse, { IFuseOptions } from 'fuse.js' +import { Product, Category, SearchResult } from '../types' + +const fuseOptions: IFuseOptions = { + keys: [ + { name: 'name', weight: 2 }, + { name: 'keywords', weight: 1.5 }, + { name: 'brand', weight: 0.5 }, + ], + threshold: 0.4, // 0 = 完全匹配, 1 = 匹配所有 + includeScore: true, + includeMatches: true, + minMatchCharLength: 1, + ignoreLocation: true, // 忽略匹配位置 +} + +/** + * 建立搜尋引擎 + */ +export function createSearchEngine(products: Product[], categories: Category[]) { + const fuse = new Fuse(products, fuseOptions) + + const search = (query: string): SearchResult[] => { + if (!query.trim()) return [] + + const results = fuse.search(query) + + // 加入類別資訊 + return results.map((result) => ({ + product: result.item, + score: result.score, + category: categories.find((c) => c.id === result.item.categoryId), + })) + } + + const searchByCategory = (categoryId: string): Product[] => { + return products.filter((p) => p.categoryId === categoryId) + } + + return { search, searchByCategory } +} + +/** + * 取得類別的所有商品 + */ +export function getProductsByCategory( + products: Product[], + categoryId: string +): Product[] { + return products.filter((p) => p.categoryId === categoryId) +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/start-server.sh b/start-server.sh new file mode 100755 index 0000000..7325b5f --- /dev/null +++ b/start-server.sh @@ -0,0 +1,97 @@ +#!/bin/bash + +# 3D 店內導引 Demo - 啟動伺服器腳本 +# 使用方式: ./start-server.sh [dev|prod] + +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +cd "$SCRIPT_DIR" + +# PID 檔案位置 +PID_FILE="$SCRIPT_DIR/.server.pid" +LOG_FILE="$SCRIPT_DIR/.server.log" + +# 檢查是否已經在執行 +if [ -f "$PID_FILE" ]; then + PID=$(cat "$PID_FILE") + if ps -p "$PID" > /dev/null 2>&1; then + echo "伺服器已在執行中 (PID: $PID)" + echo "請先執行 ./stop-server.sh 關閉伺服器" + exit 1 + else + # 清理過期的 PID 檔案 + rm -f "$PID_FILE" + fi +fi + +# 取得本機 IP +get_local_ip() { + # 嘗試不同方式取得 IP + ip route get 1 2>/dev/null | awk '{print $7; exit}' || \ + hostname -I 2>/dev/null | awk '{print $1}' || \ + ifconfig 2>/dev/null | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1' | head -1 || \ + echo "無法取得" +} + +LOCAL_IP=$(get_local_ip) +PORT=3000 + +# 判斷模式 +MODE=${1:-dev} + +echo "==========================================" +echo " 3D 店內導引 Demo 伺服器" +echo "==========================================" +echo "" + +if [ "$MODE" = "prod" ]; then + echo "模式: 生產環境 (使用建構後的靜態檔案)" + echo "" + echo "正在建構專案..." + npm run build > /dev/null 2>&1 + + if [ $? -ne 0 ]; then + echo "建構失敗！請檢查錯誤訊息。" + exit 1 + fi + + echo "建構完成，啟動預覽伺服器..." + nohup npm run preview:host > "$LOG_FILE" 2>&1 & +else + echo "模式: 開發環境 (支援熱更新)" + echo "" + echo "正在啟動開發伺服器..." + nohup npm run dev:host > "$LOG_FILE" 2>&1 & +fi + +# 儲存 PID +SERVER_PID=$! +echo $SERVER_PID > "$PID_FILE" + +# 等待伺服器啟動 +sleep 2 + +# 檢查是否成功啟動 +if ps -p "$SERVER_PID" > /dev/null 2>&1; then + echo "" + echo "伺服器啟動成功！" + echo "" + echo "==========================================" + echo " 存取網址" + echo "==========================================" + echo "" + echo " 本機存取: http://localhost:$PORT" + echo " 遠端存取: http://$LOCAL_IP:$PORT" + echo "" + echo "==========================================" + echo "" + echo "PID: $SERVER_PID" + echo "日誌檔案: $LOG_FILE" + echo "" + echo "關閉伺服器: ./stop-server.sh" + echo "" +else + echo "伺服器啟動失敗！" + echo "請檢查日誌: cat $LOG_FILE" + rm -f "$PID_FILE" + exit 1 +fi diff --git a/stop-server.sh b/stop-server.sh new file mode 100755 index 0000000..d0a33c3 --- /dev/null +++ b/stop-server.sh @@ -0,0 +1,73 @@ +#!/bin/bash + +# 3D 店內導引 Demo - 關閉伺服器腳本 +# 使用方式: ./stop-server.sh + +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +cd "$SCRIPT_DIR" + +PID_FILE="$SCRIPT_DIR/.server.pid" +LOG_FILE="$SCRIPT_DIR/.server.log" + +echo "==========================================" +echo " 關閉 3D 店內導引 Demo 伺服器" +echo "==========================================" +echo "" + +# 檢查 PID 檔案是否存在 +if [ ! -f "$PID_FILE" ]; then + echo "找不到執行中的伺服器" + + # 嘗試找到並關閉可能的遺留程序 + VITE_PIDS=$(pgrep -f "vite.*--host" 2>/dev/null) + if [ -n "$VITE_PIDS" ]; then + echo "" + echo "發現可能的遺留程序: $VITE_PIDS" + read -p "是否要關閉這些程序? (y/n) " -n 1 -r + echo "" + if [[ $REPLY =~ ^[Yy]$ ]]; then + kill $VITE_PIDS 2>/dev/null + echo "已關閉遺留程序" + fi + fi + exit 0 +fi + +# 讀取 PID +PID=$(cat "$PID_FILE") + +# 檢查程序是否存在 +if ps -p "$PID" > /dev/null 2>&1; then + echo "正在關閉伺服器 (PID: $PID)..." + + # 先嘗試優雅關閉 + kill "$PID" 2>/dev/null + + # 等待程序結束 + for i in {1..5}; do + if ! ps -p "$PID" > /dev/null 2>&1; then + break + fi + sleep 1 + done + + # 如果還在執行，強制關閉 + if ps -p "$PID" > /dev/null 2>&1; then + echo "程序未響應，強制關閉..." + kill -9 "$PID" 2>/dev/null + fi + + # 同時關閉可能的子程序 + pkill -f "vite.*--host.*3000" 2>/dev/null + + echo "" + echo "伺服器已關閉" +else + echo "伺服器程序已不存在 (PID: $PID)" +fi + +# 清理檔案 +rm -f "$PID_FILE" + +echo "" +echo "完成！" diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..440553d --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,15 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + fontFamily: { + sans: ['Noto Sans TC', 'sans-serif'], + }, + }, + }, + plugins: [], +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..5b0eca4 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true, + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..ace547d --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import path from 'path' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + }, + }, +})