feat(developer): 完成小程序开发者中心和企业控制台改造

- 设计并实现了开发者中心与企业控制台两大模块
- 按用户角色区分开发者和企业客户，支持多项目类型及成员管理
- 新增项目管理、应用管理、API Key管理及成员邀请等多功能页面
- 实现应用版本发布、消息通知中心、权限审批与开发者申请流程
- 完成CI/CD流水线、运营监控、发票管理、SSO单点登录功能
- 搭建SDK下载中心、工单系统、FAQ系统、数据导入导出等模块
- 优化后端API，支持已登录和未注册用户不同加入应用流程
- 前端按钮统一采用微信手机号授权，完善用户授权体验
- 修复多个页面的JSX语法错误及依赖导入问题，替换部分组件库
- 增加详细的类型定义文件，提升项目类型安全
- 新增超过55个页面及60个API接口，扩展应用功能和服务体系
- 完成全面的样式设计，实现一致的视觉风格和交互体验

src/developer/index.tsx

@@ -1,295 +1,197 @@
-import React from 'react'
-import {View, Text} from '@tarojs/components'
-import {ConfigProvider, Button, Grid, Avatar} from '@nutui/nutui-react-taro'
-import {
-  User,
-  Shopping,
-  Dongdong,
-  ArrowRight,
-  Purse,
-  People
-} from '@nutui/icons-react-taro'
-import {useDealerUser} from '@/hooks/useDealerUser'
-import { useThemeStyles } from '@/hooks/useTheme'
-import {businessGradients, cardGradients, gradientUtils} from '@/styles/gradients'
+import React, { useState, useEffect } from 'react'
+import { View, Text, ScrollView } from '@tarojs/components'
 import Taro from '@tarojs/taro'
+import { Button, Empty } from '@nutui/nutui-react-taro'
+import { useThemeStyles } from '@/hooks/useTheme'
+import { pageMyApp } from '@/api/developer'
+import type { App } from '@/types/developer'
+import { APP_TYPE_NAME } from '@/types/developer'
+import './index.scss'
 
-const DealerIndex: React.FC = () => {
-  const {
-    dealerUser,
-    error,
-    refresh,
-  } = useDealerUser()
-
-  // 使用主题样式
+const DeveloperIndex: React.FC = () => {
   const themeStyles = useThemeStyles()
+  const [apps, setApps] = useState<App[]>([])
+  const [loading, setLoading] = useState(true)
+  const [stats, setStats] = useState({
+    totalApps: 0,
+    runningApps: 0,
+    totalCalls: 0,
+  })
 
-  // 导航到各个功能页面
-  const navigateToPage = (url: string) => {
-    Taro.navigateTo({url})
-  }
-
-  // 格式化金额
-  const formatMoney = (money?: string) => {
-    if (!money) return '0.00'
-    return parseFloat(money).toFixed(2)
-  }
-
-  // 格式化时间
-  const formatTime = (time?: string) => {
-    if (!time) return '-'
-    return new Date(time).toLocaleDateString()
-  }
-
-  // 获取用户主题
-  const userTheme = gradientUtils.getThemeByUserId(dealerUser?.userId)
-
-  // 获取渐变背景
-  const getGradientBackground = (themeColor?: string) => {
-    if (themeColor) {
-      const darkerColor = gradientUtils.adjustColorBrightness(themeColor, -30)
-      return gradientUtils.createGradient(themeColor, darkerColor)
+  // 加载数据
+  const loadData = async () => {
+    try {
+      setLoading(true)
+      const result = await pageMyApp({ current: 1, size: 10 })
+      if (result) {
+        setApps(result.list || [])
+        setStats({
+          totalApps: result.count || 0,
+          runningApps: result.list?.filter((a) => a.status === 1).length || 0,
+          totalCalls: 0,
+        })
+      }
+    } catch (error) {
+      console.error('加载数据失败', error)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
     }
-    return userTheme.background
   }
 
-  console.log(getGradientBackground(),'getGradientBackground()')
+  useEffect(() => {
+    loadData()
+  }, [])
 
-  if (error) {
-    return (
-      <View className="p-4">
-        <View className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
-          <Text className="text-red-600">{error}</Text>
-        </View>
-        <Button type="primary" onClick={refresh}>
-          重试
-        </Button>
-      </View>
-    )
+  // 跳转页面
+  const navigateTo = (url: string) => {
+    Taro.navigateTo({ url })
+  }
+
+  // 获取状态颜色
+  const getStatusColor = (status?: number) => {
+    const colors: Record<number, string> = {
+      0: '#6b7280',
+      1: '#10b981',
+      2: '#f59e0b',
+      3: '#ef4444',
+      4: '#ef4444',
+      5: '#ef4444',
+    }
+    return colors[status || 0] || '#6b7280'
+  }
+
+  // 获取状态文本
+  const getStatusText = (status?: number) => {
+    const texts: Record<number, string> = {
+      0: '未开通',
+      1: '运行中',
+      2: '维护中',
+      3: '已关闭',
+      4: '已欠费',
+      5: '违规停机',
+    }
+    return texts[status || 0] || '未知'
   }
 
   return (
-    <View className="bg-gray-100 min-h-screen">
-      <View>
-        {/*头部信息*/}
-        {dealerUser && (
-          <View className="px-4 py-6 relative overflow-hidden" style={themeStyles.primaryBackground}>
-            {/* 装饰性背景元素 - 小程序兼容版本 */}
-            <View className="absolute w-32 h-32 rounded-full" style={{
-              backgroundColor: 'rgba(255, 255, 255, 0.1)',
-              top: '-16px',
-              right: '-16px'
-            }}></View>
-            <View className="absolute w-24 h-24 rounded-full" style={{
-              backgroundColor: 'rgba(255, 255, 255, 0.08)',
-              bottom: '-12px',
-              left: '-12px'
-            }}></View>
-            <View className="absolute w-16 h-16 rounded-full" style={{
-              backgroundColor: 'rgba(255, 255, 255, 0.05)',
-              top: '60px',
-              left: '120px'
-            }}></View>
-            <View className="flex items-center justify-between relative z-10 mb-4">
-              <Avatar
-                size="50"
-                src={dealerUser?.qrcode}
-                icon={<User/>}
-                className="mr-4"
-                style={{
-                  border: '2px solid rgba(255, 255, 255, 0.3)'
-                }}
-              />
-              <View className="flex-1 flex-col">
-                <View className="text-white text-lg font-bold mb-1" style={{
-                }}>
-                  {dealerUser?.realName || '分销商'}
-                </View>
-                <View className="text-sm" style={{
-                  color: 'rgba(255, 255, 255, 0.8)'
-                }}>
-                  ID: {dealerUser.userId}
-                </View>
-              </View>
-              <View className="text-right hidden">
-                <Text className="text-xs" style={{
-                  color: 'rgba(255, 255, 255, 0.9)'
-                }}>加入时间</Text>
-                <Text className="text-xs" style={{
-                  color: 'rgba(255, 255, 255, 0.7)'
-                }}>
-                  {formatTime(dealerUser.createTime)}
-                </Text>
-              </View>
+    <View className="developer-page">
+      <ScrollView scrollY className="developer-page__scroll">
+        {/* 头部区域 */}
+        <View className="developer-header" style={themeStyles.primaryBackground}>
+          <View className="developer-header__glow" />
+          <View className="developer-header__content">
+            <View className="developer-header__title">
+              <Text className="developer-header__titleText">🛠️ 开发者中心</Text>
             </View>
+            <Text className="developer-header__subtitle">管理你的项目和应用</Text>
           </View>
-        )}
-
-        {/* 佣金统计卡片 */}
-        {dealerUser && (
-          <View className="mx-4 -mt-6 rounded-xl p-4 relative z-10" style={cardGradients.elevated}>
-            <View className="mb-4">
-              <Text className="font-semibold text-gray-800">工资统计</Text>
-            </View>
-            <View className="grid grid-cols-3 gap-3">
-              <View className="text-center p-3 rounded-lg flex flex-col" style={{
-                background: businessGradients.money.available
-              }}>
-                <Text className="text-lg font-bold mb-1 text-white">
-                  {formatMoney(dealerUser.money)}
-                </Text>
-                <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>工资收入</Text>
-              </View>
-              <View className="text-center p-3 rounded-lg flex flex-col" style={{
-                background: businessGradients.money.frozen
-              }}>
-                <Text className="text-lg font-bold mb-1 text-white">
-                  {formatMoney(dealerUser.freezeMoney)}
-                </Text>
-                <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>桶数</Text>
-              </View>
-              <View className="text-center p-3 rounded-lg flex flex-col" style={{
-                background: businessGradients.money.total
-              }}>
-                <Text className="text-lg font-bold mb-1 text-white">
-                  {formatMoney(dealerUser.totalMoney)}
-                </Text>
-                <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>累计收入</Text>
-              </View>
-            </View>
-          </View>
-        )}
-
-        {/* 团队统计 */}
-        {dealerUser && (
-          <View className="bg-white mx-4 mt-4 rounded-xl p-4 hidden">
-            <View className="flex items-center justify-between mb-4">
-              <Text className="font-semibold text-gray-800">我的邀请</Text>
-              <View
-                className="text-gray-400 text-sm flex items-center"
-                onClick={() => navigateToPage('/dealer/team/index')}
-              >
-                <Text>查看详情</Text>
-                <ArrowRight size="12"/>
-              </View>
-            </View>
-            <View className="grid grid-cols-3 gap-4">
-              <View className="text-center grid">
-                <Text className="text-xl font-bold text-purple-500 mb-1">
-                  {dealerUser.firstNum || 0}
-                </Text>
-                <Text className="text-xs text-gray-500">一级成员</Text>
-              </View>
-              <View className="text-center grid">
-                <Text className="text-xl font-bold text-indigo-500 mb-1">
-                  {dealerUser.secondNum || 0}
-                </Text>
-                <Text className="text-xs text-gray-500">二级成员</Text>
-              </View>
-              <View className="text-center grid">
-                <Text className="text-xl font-bold text-pink-500 mb-1">
-                  {dealerUser.thirdNum || 0}
-                </Text>
-                <Text className="text-xs text-gray-500">三级成员</Text>
-              </View>
-            </View>
-          </View>
-        )}
-
-        {/* 功能导航 */}
-        <View className="bg-white mx-4 mt-4 rounded-xl p-4">
-          <View className="font-semibold mb-4 text-gray-800">配送工具</View>
-          <ConfigProvider>
-            <Grid
-              columns={4}
-              className="no-border-grid"
-              style={{
-                '--nutui-grid-border-color': 'transparent',
-                '--nutui-grid-item-border-width': '0px',
-                border: 'none'
-              } as React.CSSProperties}
-            >
-              <Grid.Item text="配送订单" onClick={() => navigateToPage('/rider/orders/index')}>
-                <View className="text-center">
-                  <View className="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mx-auto mb-2">
-                    <Shopping color="#3b82f6" size="20"/>
-                  </View>
-                </View>
-              </Grid.Item>
-
-              <Grid.Item text={'工资明细'} onClick={() => navigateToPage('/rider/withdraw/index')}>
-                <View className="text-center">
-                  <View className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center mx-auto mb-2">
-                    <Purse color="#10b981" size="20"/>
-                  </View>
-                </View>
-              </Grid.Item>
-
-              <Grid.Item text={'配送小区'} onClick={() => navigateToPage('/rider/team/index')}>
-                <View className="text-center">
-                  <View className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mx-auto mb-2">
-                    <People color="#8b5cf6" size="20"/>
-                  </View>
-                </View>
-              </Grid.Item>
-
-              <Grid.Item text={'仓库地址'} onClick={() => navigateToPage('/rider/qrcode/index')}>
-                <View className="text-center">
-                  <View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">
-                    <Dongdong color="#f59e0b" size="20"/>
-                  </View>
-                </View>
-              </Grid.Item>
-            </Grid>
-
-            {/* 第二行功能 */}
-            {/*<Grid*/}
-            {/*  columns={4}*/}
-            {/*  className="no-border-grid mt-4"*/}
-            {/*  style={{*/}
-            {/*    '--nutui-grid-border-color': 'transparent',*/}
-            {/*    '--nutui-grid-item-border-width': '0px',*/}
-            {/*    border: 'none'*/}
-            {/*  } as React.CSSProperties}*/}
-            {/*>*/}
-            {/*  <Grid.Item text={'邀请统计'} onClick={() => navigateToPage('/dealer/invite-stats/index')}>*/}
-            {/*    <View className="text-center">*/}
-            {/*      <View className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
-            {/*        <Presentation color="#6366f1" size="20"/>*/}
-            {/*      </View>*/}
-            {/*    </View>*/}
-            {/*  </Grid.Item>*/}
-
-            {/*  /!* 预留其他功能位置 *!/*/}
-            {/*  <Grid.Item text={''}>*/}
-            {/*    <View className="text-center">*/}
-            {/*      <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
-            {/*      </View>*/}
-            {/*    </View>*/}
-            {/*  </Grid.Item>*/}
-
-            {/*  <Grid.Item text={''}>*/}
-            {/*    <View className="text-center">*/}
-            {/*      <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
-            {/*      </View>*/}
-            {/*    </View>*/}
-            {/*  </Grid.Item>*/}
-
-            {/*  <Grid.Item text={''}>*/}
-            {/*    <View className="text-center">*/}
-            {/*      <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
-            {/*      </View>*/}
-            {/*    </View>*/}
-            {/*  </Grid.Item>*/}
-            {/*</Grid>*/}
-          </ConfigProvider>
         </View>
-      </View>
 
-      {/* 底部安全区域 */}
-      <View className="h-20"></View>
+        {/* 统计卡片 */}
+        <View className="stats-card">
+          <View className="stats-card__row">
+            <View className="stats-card__item">
+              <Text className="stats-card__value">{stats.totalApps}</Text>
+              <Text className="stats-card__label">我的应用</Text>
+            </View>
+            <View className="stats-card__divider" />
+            <View className="stats-card__item">
+              <Text className="stats-card__value">{stats.runningApps}</Text>
+              <Text className="stats-card__label">运行中</Text>
+            </View>
+            <View className="stats-card__divider" />
+            <View className="stats-card__item">
+              <Text className="stats-card__value">{stats.totalCalls}</Text>
+              <Text className="stats-card__label">API 调用</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* 快捷操作 */}
+        <View className="quick-actions">
+          <View className="quick-actions__title">
+            <Text className="quick-actions__titleText">快捷操作</Text>
+          </View>
+          <View className="quick-actions__grid">
+            <View className="quick-actions__item" onClick={() => navigateTo('/developer/project/index')}>
+              <View className="quick-actions__icon quick-actions__icon--blue">
+                <Text>📁</Text>
+              </View>
+              <Text className="quick-actions__text">项目管理</Text>
+            </View>
+            <View className="quick-actions__item" onClick={() => navigateTo('/developer/app/index')}>
+              <View className="quick-actions__icon quick-actions__icon--green">
+                <Text>📱</Text>
+              </View>
+              <Text className="quick-actions__text">应用管理</Text>
+            </View>
+            <View className="quick-actions__item" onClick={() => navigateTo('/developer/app/api-keys')}>
+              <View className="quick-actions__icon quick-actions__icon--purple">
+                <Text>🔑</Text>
+              </View>
+              <Text className="quick-actions__text">API Key</Text>
+            </View>
+            <View className="quick-actions__item" onClick={() => navigateTo('/developer/docs/index')}>
+              <View className="quick-actions__icon quick-actions__icon--orange">
+                <Text>📖</Text>
+              </View>
+              <Text className="quick-actions__text">开发者文档</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* 应用列表 */}
+        <View className="app-list">
+          <View className="app-list__header">
+            <Text className="app-list__title">我的应用</Text>
+            <View className="app-list__more" onClick={() => navigateTo('/developer/app/index')}>
+              <Text className="app-list__moreText">查看全部 ›</Text>
+            </View>
+          </View>
+
+          {loading ? (
+            <View className="app-list__loading">
+              <Text>加载中...</Text>
+            </View>
+          ) : apps.length === 0 ? (
+            <Empty description="暂无应用" />
+          ) : (
+            <View className="app-list__content">
+              {apps.map((app) => (
+                <View key={app.productId} className="app-item" onClick={() => navigateTo(`/developer/app/${app.productId}`)}>
+                  <View className="app-item__icon">
+                    {app.icon ? (
+                      <img src={app.icon} alt={app.productName} />
+                    ) : (
+                      <Text>📱</Text>
+                    )}
+                  </View>
+                  <View className="app-item__info">
+                    <Text className="app-item__name">{app.productName}</Text>
+                    <Text className="app-item__type">{APP_TYPE_NAME[app.appType as keyof typeof APP_TYPE_NAME] || '未知'}</Text>
+                  </View>
+                  <View className="app-item__status" style={{ color: getStatusColor(app.status) }}>
+                    <View className="app-item__statusDot" style={{ backgroundColor: getStatusColor(app.status) }} />
+                    <Text className="app-item__statusText">{getStatusText(app.status)}</Text>
+                  </View>
+                </View>
+              ))}
+            </View>
+          )}
+
+          <View className="app-list__footer">
+            <Button type="primary" block onClick={() => navigateTo('/developer/app/create')}>
+              创建新应用
+            </Button>
+          </View>
+        </View>
+
+        {/* 底部安全区域 */}
+        <View className="safe-area-bottom" />
+      </ScrollView>
     </View>
   )
 }
 
-export default DealerIndex
+export default DeveloperIndex