refactor(QuickActions): 重构快捷操作组件样式和结构

- 将网格布局改为行布局，优化响应式显示效果
- 简化登录验证逻辑，移除不必要的配置项
- 更新图标尺寸从26px到28px，提升视觉体验
- 移除子标题显示，简化界面元素
- 重构CSS类名，统一命名规范
- 优化渐变背景色实现，增强视觉层次感
- 调整内边距和间距，改善整体布局美观度

src/pages/index/QuickActions.scss

@@ -1,93 +1,81 @@
 .quick-actions {
   margin: 16px 16px 0;
-  padding: 20px 16px 16px;
+  padding: 20px;
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 
-  &__title-row {
+  &__header {
-    display: flex;
-    flex-direction: column;
     margin-bottom: 20px;
-    padding-left: 4px;
   }
 
   &__title {
     font-size: 18px;
     font-weight: 600;
     color: #1a1a1a;
-    line-height: 1;
   }
 
-  &__subtitle {
+  &__row {
-    font-size: 13px;
-    color: #999999;
-    margin-top: 6px;
-    line-height: 1;
-  }
-
-  &__grid {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: row;
-    gap: 12px;
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   &__item {
-    width: calc(50% - 6px);
+    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 18px 8px 14px;
+    padding: 20px 8px 16px;
-    background: #f9fafb;
+    background: #f6f8fc;
     border-radius: 14px;
-    transition: background 0.2s;
+    margin-right: 12px;
-    position: relative;
+
-    overflow: hidden;
+    &:last-child {
+      margin-right: 0;
+    }
 
     &:active {
-      background: #f3f4f6;
+      opacity: 0.8;
     }
   }
 
-  &__icon-wrap {
+  &__icon-box {
-    position: relative;
     width: 52px;
     height: 52px;
-    margin-bottom: 10px;
-  }
-
-  &__icon-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     border-radius: 16px;
-    opacity: 1;
-  }
-
-  &__icon-inner {
-    position: relative;
-    z-index: 1;
-    width: 52px;
-    height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 16px;
+    margin-bottom: 12px;
+    background: linear-gradient(135deg, #2563eb, #3b82f6);
+
+    &--light {
+      background: linear-gradient(135deg, #60a5fa, #93c5fd);
+    }
+
+    &--deep {
+      background: linear-gradient(135deg, #1e40af, #2563eb);
+    }
+
+    &--navy {
+      background: linear-gradient(135deg, #1e3a5f, #1e5090);
+    }
   }
 
   &__item-title {
     font-size: 15px;
     font-weight: 600;
     color: #1a1a1a;
-    line-height: 1.2;
     margin-bottom: 4px;
   }
 
-  &__item-subtitle {
+  &__item-desc {
     font-size: 12px;
     color: #999999;
-    line-height: 1.2;
   }
 }

src/pages/index/QuickActions.tsx

@@ -10,64 +10,36 @@ import {
 import navTo from '@/utils/common'
 import './QuickActions.scss'
 
-interface QuickActionItem {
-  icon: React.ReactNode
-  title: string
-  subtitle?: string
-  path: string
-  needLogin: boolean
-  bgColor: string
-  iconColor: string
-  gradient: string
-}
-
 const QuickActions: React.FC = () => {
 
-  const actions: QuickActionItem[] = [
+  const actions = [
     {
-      icon: <Star size={26} />,
+      icon: <Star size={28} />,
       title: '我要推荐',
       subtitle: '推荐赚佣金',
-      path: '/dealer/index',
+      path: '/dealer/index'
-      needLogin: true,
-      bgColor: 'rgba(255, 147, 0, 0.08)',
-      iconColor: '#FF9300',
-      gradient: 'linear-gradient(135deg, #FF9300 0%, #FFB347 100%)'
     },
     {
-      icon: <People size={26} />,
+      icon: <People size={28} />,
       title: '我的客户',
       subtitle: '查看客户列表',
-      path: '/dealer/customer/index',
+      path: '/dealer/customer/index'
-      needLogin: true,
-      bgColor: 'rgba(59, 130, 246, 0.08)',
-      iconColor: '#3B82F6',
-      gradient: 'linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%)'
     },
     {
-      icon: <AddCircle size={26} />,
+      icon: <AddCircle size={28} />,
       title: '邀请好友',
       subtitle: '分享赚收益',
-      path: '/dealer/qrcode/index',
+      path: '/dealer/qrcode/index'
-      needLogin: true,
-      bgColor: 'rgba(16, 185, 129, 0.08)',
-      iconColor: '#10B981',
-      gradient: 'linear-gradient(135deg, #10B981 0%, #34D399 100%)'
     },
     {
-      icon: <Wallet size={26} />,
+      icon: <Wallet size={28} />,
       title: '我的钱包',
       subtitle: '收益与提现',
-      path: '/user/wallet/wallet',
+      path: '/user/wallet/wallet'
-      needLogin: true,
-      bgColor: 'rgba(139, 92, 246, 0.08)',
-      iconColor: '#8B5CF6',
-      gradient: 'linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%)'
     }
   ]
 
-  const handleClick = (action: QuickActionItem) => {
+  const handleClick = (action: { path: string }) => {
-    if (action.needLogin) {
     if (!Taro.getStorageSync('access_token') || !Taro.getStorageSync('UserId')) {
       Taro.showToast({
         title: '请先登录',
@@ -76,38 +48,45 @@ const QuickActions: React.FC = () => {
       })
       return
     }
-    }
     navTo(action.path)
   }
 
   return (
     <View className='quick-actions'>
-      <View className='quick-actions__title-row'>
+      <View className='quick-actions__header'>
         <Text className='quick-actions__title'>快捷服务</Text>
-        <Text className='quick-actions__subtitle'>为您精选常用功能</Text>
       </View>
-      <View className='quick-actions__grid'>
+      <View className='quick-actions__row'>
-        {actions.map((action, index) => (
+        <View className='quick-actions__item' onClick={() => handleClick(actions[0])}>
-          <View
+          <View className='quick-actions__icon-box'>
-            key={index}
+            {React.cloneElement(actions[0].icon as React.ReactElement, { color: '#ffffff' })}
-            className='quick-actions__item'
+          </View>
-            onClick={() => handleClick(action)}
+          <Text className='quick-actions__item-title'>{actions[0].title}</Text>
-          >
+          <Text className='quick-actions__item-desc'>{actions[0].subtitle}</Text>
-            <View className='quick-actions__icon-wrap'>
+        </View>
-              <View
+        <View className='quick-actions__item' onClick={() => handleClick(actions[1])}>
-                className='quick-actions__icon-bg'
+          <View className='quick-actions__icon-box quick-actions__icon-box--light'>
-                style={{ background: action.gradient }}
+            {React.cloneElement(actions[1].icon as React.ReactElement, { color: '#ffffff' })}
-              />
+          </View>
-              <View className='quick-actions__icon-inner'>
+          <Text className='quick-actions__item-title'>{actions[1].title}</Text>
-                {React.cloneElement(action.icon as React.ReactElement, {
+          <Text className='quick-actions__item-desc'>{actions[1].subtitle}</Text>
-                  color: '#ffffff'
-                })}
         </View>
       </View>
-            <Text className='quick-actions__item-title'>{action.title}</Text>
+      <View className='quick-actions__row'>
-            <Text className='quick-actions__item-subtitle'>{action.subtitle}</Text>
+        <View className='quick-actions__item' onClick={() => handleClick(actions[2])}>
+          <View className='quick-actions__icon-box quick-actions__icon-box--deep'>
+            {React.cloneElement(actions[2].icon as React.ReactElement, { color: '#ffffff' })}
+          </View>
+          <Text className='quick-actions__item-title'>{actions[2].title}</Text>
+          <Text className='quick-actions__item-desc'>{actions[2].subtitle}</Text>
+        </View>
+        <View className='quick-actions__item' onClick={() => handleClick(actions[3])}>
+          <View className='quick-actions__icon-box quick-actions__icon-box--navy'>
+            {React.cloneElement(actions[3].icon as React.ReactElement, { color: '#ffffff' })}
+          </View>
+          <Text className='quick-actions__item-title'>{actions[3].title}</Text>
+          <Text className='quick-actions__item-desc'>{actions[3].subtitle}</Text>
         </View>
-        ))}
       </View>
     </View>
   )