From 9281fb9df3e314286dbf82d2c7c762fc0e9cee67 Mon Sep 17 00:00:00 2001
From: gxwebsoft <170083662@qq.com>
Date: Mon, 30 Mar 2026 19:55:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(index):=20=E6=B7=BB=E5=8A=A0=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=BF=AB=E6=8D=B7=E6=9C=8D=E5=8A=A1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在首页添加 QuickActions 组件展示常用功能
- 实现 2x2 网格布局的快捷操作卡片
- 集成分销商、客户管理、邀请好友、钱包等功能入口
- 添加登录验证机制确保功能访问安全
- 创建详细的项目长期记忆文档 MEMORU.md
- 实现响应式设计和交互反馈效果
---
 .workbuddy/memory/MEMORY.md       |  33 +++++++++
 src/pages/index/QuickActions.scss |  93 ++++++++++++++++++++++++
 src/pages/index/QuickActions.tsx  | 116 ++++++++++++++++++++++++++++++
 src/pages/index/index.tsx         |   2 +
 4 files changed, 244 insertions(+)
 create mode 100644 .workbuddy/memory/MEMORY.md
 create mode 100644 src/pages/index/QuickActions.scss
 create mode 100644 src/pages/index/QuickActions.tsx

diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md
new file mode 100644
index 0000000..8a9d8d1
--- /dev/null
+++ b/.workbuddy/memory/MEMORY.md
@@ -0,0 +1,33 @@
+# 项目长期记忆
+
+## 项目概述
+- 微信小程序项目，使用 Taro + React + NutUI + TailwindCSS + SCSS
+- 项目名：南南佐顿门窗（直购电售电业务）
+- 品牌：网宿软件
+
+## 技术栈
+- 框架：Taro (微信小程序)
+- UI：NutUI React Taro
+- 样式：TailwindCSS + SCSS
+- 语言：TypeScript
+
+## 关键路径
+- 首页入口：`src/pages/index/index.tsx`
+- 分销商页面：`src/dealer/index.tsx`
+- 用户钱包：`src/user/wallet/wallet.tsx`
+- 客户管理：`src/dealer/customer/index`
+- 邀请码：`src/dealer/qrcode/index`
+- 导航工具：`src/utils/common.ts` (navTo函数)
+
+## 首页结构 (2026-03-30)
+- Header (吸顶搜索栏)
+- Menu (导航菜单，hidden)
+- Banner (轮播广告)
+- **QuickActions** (快捷服务 - 2x2网格卡片)
+  - 我要推荐 → /dealer/index
+  - 我的客户 → /dealer/customer/index
+  - 邀请好友 → /dealer/qrcode/index
+  - 我的钱包 → /user/wallet/wallet
+- NoticeBar (公告栏)
+- BestSellers (热销商品)
+- Grid (功能菜单)
diff --git a/src/pages/index/QuickActions.scss b/src/pages/index/QuickActions.scss
new file mode 100644
index 0000000..db28596
--- /dev/null
+++ b/src/pages/index/QuickActions.scss
@@ -0,0 +1,93 @@
+.quick-actions {
+  margin: 16px 16px 0;
+  padding: 20px 16px 16px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+
+  &__title-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+    padding-left: 4px;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1a1a1a;
+    line-height: 1;
+  }
+
+  &__subtitle {
+    font-size: 13px;
+    color: #999999;
+    margin-top: 6px;
+    line-height: 1;
+  }
+
+  &__grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  &__item {
+    width: calc(50% - 6px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 18px 8px 14px;
+    background: #f9fafb;
+    border-radius: 14px;
+    transition: background 0.2s;
+    position: relative;
+    overflow: hidden;
+
+    &:active {
+      background: #f3f4f6;
+    }
+  }
+
+  &__icon-wrap {
+    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;
+  }
+
+  &__item-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #1a1a1a;
+    line-height: 1.2;
+    margin-bottom: 4px;
+  }
+
+  &__item-subtitle {
+    font-size: 12px;
+    color: #999999;
+    line-height: 1.2;
+  }
+}
diff --git a/src/pages/index/QuickActions.tsx b/src/pages/index/QuickActions.tsx
new file mode 100644
index 0000000..e8e4171
--- /dev/null
+++ b/src/pages/index/QuickActions.tsx
@@ -0,0 +1,116 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import {
+  Star,
+  People,
+  AddCircle,
+  Wallet
+} from '@nutui/icons-react-taro'
+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[] = [
+    {
+      icon: <Star size={26} />,
+      title: '我要推荐',
+      subtitle: '推荐赚佣金',
+      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} />,
+      title: '我的客户',
+      subtitle: '查看客户列表',
+      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} />,
+      title: '邀请好友',
+      subtitle: '分享赚收益',
+      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} />,
+      title: '我的钱包',
+      subtitle: '收益与提现',
+      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) => {
+    if (action.needLogin) {
+      if (!Taro.getStorageSync('access_token') || !Taro.getStorageSync('UserId')) {
+        Taro.showToast({
+          title: '请先登录',
+          icon: 'none',
+          duration: 1500
+        })
+        return
+      }
+    }
+    navTo(action.path)
+  }
+
+  return (
+    <View className='quick-actions'>
+      <View className='quick-actions__title-row'>
+        <Text className='quick-actions__title'>快捷服务</Text>
+        <Text className='quick-actions__subtitle'>为您精选常用功能</Text>
+      </View>
+      <View className='quick-actions__grid'>
+        {actions.map((action, index) => (
+          <View
+            key={index}
+            className='quick-actions__item'
+            onClick={() => handleClick(action)}
+          >
+            <View className='quick-actions__icon-wrap'>
+              <View
+                className='quick-actions__icon-bg'
+                style={{ background: action.gradient }}
+              />
+              <View className='quick-actions__icon-inner'>
+                {React.cloneElement(action.icon as React.ReactElement, {
+                  color: '#ffffff'
+                })}
+              </View>
+            </View>
+            <Text className='quick-actions__item-title'>{action.title}</Text>
+            <Text className='quick-actions__item-subtitle'>{action.subtitle}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+export default QuickActions
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 25bbb62..82abc5d 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -11,6 +11,7 @@ import Banner from "./Banner";
 import './index.scss'
 import Grid from "@/pages/index/Grid";
 import PopUpAd from "@/pages/index/PopUpAd";
+import QuickActions from "./QuickActions";
 import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
 import type {Config} from "@/api/cms/cmsWebsiteField/model";
 
@@ -122,6 +123,7 @@ function Home() {
       <View className={'flex flex-col mt-1'}>
         <Menu/>
         <Banner/>
+        <QuickActions/>
         <NoticeBar content={config?.NoticeBar || '主营直购电售电业务,以更优惠电价、更全面的服务，致力为工商企业创造更优越经营环境，帮助企业减负排压，深度赋能'} />
         <BestSellers/>
         <Grid />