✨ feat(goods-spec-selector): 新增商品规格选择器组件样式文件

- 创建独立的组件样式文件 `index.css`，包含完整的规格选择弹窗样式
- 为组件添加加载、错误、空状态等不同场景的样式支持
- 定义规格选项、数量选择器、确认按钮等交互元素的样式

♻️ refactor(goods-detail): 将规格选择器样式迁移至组件目录

- 从商品详情页 `index.css` 中移除重复的规格选择弹窗样式代码
- 确保样式代码复用，避免维护多份相同样式

mini/src/components/goods-spec-selector/index.css

@@ -0,0 +1,221 @@
+/* 商品规格选择器组件样式 */
+/* 用于首页、商品详情页、购物车页、搜索结果页等 */
+
+/* 规格选择弹窗 */
+.spec-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 1000;
+}
+
+.spec-modal-content {
+  background: white;
+  border-radius: 24rpx 24rpx 0 0;
+  width: 100%;
+  max-height: 70vh;
+  overflow: hidden;
+}
+
+.spec-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32rpx 24rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.spec-modal-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.spec-modal-close {
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+}
+
+.spec-options {
+  padding: 24rpx;
+  max-height: 400rpx;
+  overflow-y: auto;
+}
+
+/* 加载状态 */
+.spec-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 24rpx;
+  text-align: center;
+}
+
+.loading-text {
+  font-size: 28rpx;
+  color: #666;
+  margin-top: 16rpx;
+}
+
+/* 错误状态 */
+.spec-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 24rpx;
+  text-align: center;
+}
+
+.error-text {
+  font-size: 28rpx;
+  color: #f56c6c;
+  margin: 16rpx 0 24rpx 0;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.retry-btn {
+  margin-top: 16rpx;
+}
+
+/* 空状态 */
+.spec-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 24rpx;
+  text-align: center;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+  margin-top: 16rpx;
+}
+
+/* 规格选项 */
+.spec-option {
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  border: 1rpx solid #e8e8e8;
+  border-radius: 8rpx;
+  background: #f8f8f8;
+}
+
+.spec-option.selected {
+  border-color: #fa4126;
+  background: #fff5f5;
+}
+
+.spec-option-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.spec-option.selected .spec-option-text {
+  color: #fa4126;
+}
+
+.spec-option-price {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8rpx;
+}
+
+.price-text {
+  font-size: 24rpx;
+  color: #fa4126;
+  font-weight: 500;
+}
+
+.stock-text {
+  font-size: 20rpx;
+  color: #999;
+}
+
+/* 数量选择器 */
+.quantity-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.quantity-label {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.quantity-controls {
+  display: flex;
+  align-items: center;
+  border: 1rpx solid #e8e8e8;
+  border-radius: 4rpx;
+}
+
+.quantity-btn {
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f8f8f8;
+  border: none;
+  color: #333;
+  font-size: 24rpx;
+}
+
+.quantity-btn:disabled {
+  background: #f5f5f5;
+  color: #ccc;
+}
+
+.quantity-value {
+  width: 60rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  color: #333;
+  border-left: 1rpx solid #e8e8e8;
+  border-right: 1rpx solid #e8e8e8;
+}
+
+/* 弹窗底部 */
+.spec-modal-footer {
+  padding: 24rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.spec-confirm-btn {
+  width: 100%;
+  background: #fa4126;
+  color: white;
+  border: none;
+  padding: 24rpx;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+
+.spec-confirm-btn:disabled {
+  background: #cccccc;
+  color: #999;
+  cursor: not-allowed;
+}

mini/src/components/goods-spec-selector/index.tsx

@@ -2,6 +2,7 @@ import { View, Text, ScrollView } from '@tarojs/components'
 import { Button } from '@/components/ui/button'
 import { useState, useEffect } from 'react'
 import { goodsClient } from '@/api'
+import './index.css'
 
 interface SpecOption {
   id: number

mini/src/pages/goods-detail/index.css

@@ -403,159 +403,3 @@
   transform: none;
 }
 
-/* 规格选择弹窗 */
-.spec-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: flex-end;
-  z-index: 1000;
-}
-
-.spec-modal-content {
-  background: white;
-  border-radius: 24rpx 24rpx 0 0;
-  width: 100%;
-  max-height: 70vh;
-  overflow: hidden;
-}
-
-.spec-modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 32rpx 24rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-}
-
-.spec-modal-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
-}
-
-.spec-modal-close {
-  width: 48rpx;
-  height: 48rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #999;
-}
-
-.spec-options {
-  padding: 24rpx;
-  max-height: 400rpx;
-  overflow-y: auto;
-}
-
-.spec-option {
-  padding: 24rpx;
-  margin-bottom: 16rpx;
-  border: 1rpx solid #e8e8e8;
-  border-radius: 8rpx;
-  background: #f8f8f8;
-}
-
-.spec-option.selected {
-  border-color: #fa4126;
-  background: #fff5f5;
-}
-
-.spec-option-text {
-  font-size: 28rpx;
-  color: #333;
-}
-
-.spec-option.selected .spec-option-text {
-  color: #fa4126;
-}
-
-.spec-option-price {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8rpx;
-}
-
-.price-text {
-  font-size: 24rpx;
-  color: #fa4126;
-  font-weight: 500;
-}
-
-.stock-text {
-  font-size: 20rpx;
-  color: #999;
-}
-
-/* 数量选择器 */
-.quantity-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24rpx;
-  border-top: 1rpx solid #f0f0f0;
-}
-
-.quantity-label {
-  font-size: 28rpx;
-  color: #333;
-  font-weight: 500;
-}
-
-.quantity-controls {
-  display: flex;
-  align-items: center;
-  border: 1rpx solid #e8e8e8;
-  border-radius: 4rpx;
-}
-
-.quantity-btn {
-  width: 48rpx;
-  height: 48rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f8f8f8;
-  border: none;
-  color: #333;
-  font-size: 24rpx;
-}
-
-.quantity-btn:disabled {
-  background: #f5f5f5;
-  color: #ccc;
-}
-
-.quantity-value {
-  width: 60rpx;
-  height: 48rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24rpx;
-  color: #333;
-  border-left: 1rpx solid #e8e8e8;
-  border-right: 1rpx solid #e8e8e8;
-}
-
-.spec-modal-footer {
-  padding: 24rpx;
-  border-top: 1rpx solid #f0f0f0;
-}
-
-.spec-confirm-btn {
-  width: 100%;
-  background: #fa4126;
-  color: white;
-  border: none;
-  padding: 24rpx;
-  border-radius: 8rpx;
-  font-size: 32rpx;
-  font-weight: 500;
-}