From 226e223d96b80b5e131fb33a5ffc5d4319058b10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Thu, 23 Jul 2026 18:35:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(user):=20=E5=90=88=E5=B9=B6=E5=88=87?=
=?UTF-8?q?=E6=8D=A2=E5=BC=80=E5=8F=91=E8=80=85=E8=8F=9C=E5=8D=95=E9=A1=B9?=
=?UTF-8?q?=E7=8A=B6=E6=80=81=E5=B9=B6=E6=9B=B4=E6=96=B0=E5=BC=80=E5=8F=91?=
=?UTF-8?q?=E8=80=85=E4=B8=AD=E5=BF=83UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 用户菜单中根据 isDeveloper 字段条件展示“申请成为开发者”或“进入开发者中心”
- 已审核通过用户菜单显示“进入开发者中心”,并设置高亮样式
- 去除冗余的独立“开发者中心”菜单条目,简化菜单结构
- 重新设计开发者中心页面UI,统一为门店中心风格
- 顶部展示开发者头像及昵称手机号信息
- 功能卡片展示“我的应用”、“API Key”和“我的工单”,异步加载数量角标
- 底部添加“开发者帮助与支持”入口,替代门店订阅消息卡片
- 未登录或非开发者状态显示相应空态提示及操作按钮
- 优化登录状态与权限校验逻辑,防止页面闪烁和无权限内容显示
---
.idea/workspace.xml | 44 ++---
.workbuddy/memory/2026-07-23.md | 14 +-
src/pages/developer/index/index.tsx | 248 ++++++++++++++++++++--------
3 files changed, 216 insertions(+), 90 deletions(-)
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index cb04ece..3517864 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,7 @@
-
+
@@ -116,23 +116,7 @@
-
-
-
-
- 1775966172496
-
-
-
- 1775966172496
-
-
-
- 1776018406658
-
-
-
- 1776018406658
+
@@ -510,7 +494,23 @@
1784802336157
-
+
+
+ 1784802434477
+
+
+
+ 1784802434477
+
+
+
+ 1784802589434
+
+
+
+ 1784802589434
+
+
@@ -530,8 +530,6 @@
-
-
@@ -555,7 +553,9 @@
-
+
+
+
\ No newline at end of file
diff --git a/.workbuddy/memory/2026-07-23.md b/.workbuddy/memory/2026-07-23.md
index 7503521..6ad5071 100644
--- a/.workbuddy/memory/2026-07-23.md
+++ b/.workbuddy/memory/2026-07-23.md
@@ -65,4 +65,16 @@
**需求**:我的页面菜单里「申请成为开发者(推荐)」条目,若用户已审核通过成为开发者,该处文案/链接改为「进入开发者中心」(跳 `/pages/developer/index/index`)。
**改动**(`src/pages/user/user.tsx` 菜单 `menuItems`):
-- 把原第 105 行固定「申请成为开发者」+ 第 107 行独立「开发者中心」(仅 isDeveloper 显示) 合并为条件式:`(user as any)?.isDeveloper ? { 进入开发者中心 → /pages/developer/index/index } : { 申请成为开发者 → /pages/user/vip-upgrade/index }`,两者均 `highlight: true`(醒目推荐样式)。去掉了冗余的独立「开发者中心」条目。
\ No newline at end of file
+- 把原第 105 行固定「申请成为开发者」+ 第 107 行独立「开发者中心」(仅 isDeveloper 显示) 合并为条件式:`(user as any)?.isDeveloper ? { 进入开发者中心 → /pages/developer/index/index } : { 申请成为开发者 → /pages/user/vip-upgrade/index }`,两者均 `highlight: true`(醒目推荐样式)。去掉了冗余的独立「开发者中心」条目。
+
+## 开发者中心 UI 对齐门店中心
+
+**需求**:`pages/developer/index/index` 的 UI 改成和门店中心(`pages/store/center/index`)一模一样。
+
+**改动**(仅 `src/pages/developer/index/index.tsx`,整体重写):
+- 删除原 NavBar + StatCard 3列网格 + EntryGrid 老结构,改写为门店中心同款「渐变绿头部 + 白卡片列表(图标/标题/描述/角标/箭头)+ 底部卡片」。
+- 头部:开发者 avatar + 「开发者中心」标题 + 昵称·手机号(取 `(user as any)`)。
+- FEATURE_CARDS 三张:我的应用(📦/蓝)、API Key(🔑/绿)、我的工单(🎫/橙),各自 desc + url;角标沿用 `Badge`,展示各功能的计数(stats.apps/keys/tickets,由 getMyApps/getAppApiKeyStats/getMyTickets 的 total 取),卡片渲染后异步填充。
+- 底部卡片改为「开发者帮助与支持」(💡 蓝圈)→ `/pages/user/help-center/index`(替代门店中心的订阅消息卡,订阅模板是门店专属,开发者无对应模板)。
+- 保留两个空态:!isLoggedIn「请先登录」、!isDeveloper「尚未加入开发者中心」+ 申请按钮(保留原 apply 入口,store center 无此场景故无按钮);首屏用 `userLoading`(来自 useUser) 转圈防闪烁。
+- 不再引入 NavBar/StatCard/EntryGrid/Loading(可能内部用 nutui,踩 weapp 空白坑),只用 `@tarojs/components` + 自定义 `Badge`,与门店中心一致。
\ No newline at end of file
diff --git a/src/pages/developer/index/index.tsx b/src/pages/developer/index/index.tsx
index 0324aaf..79f71e7 100644
--- a/src/pages/developer/index/index.tsx
+++ b/src/pages/developer/index/index.tsx
@@ -1,26 +1,65 @@
import React, { useState, useEffect, useCallback } from 'react'
-import { View, Text, ScrollView } from '@tarojs/components'
+import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
-import NavBar from '@/components/NavBar'
-import StatCard from '@/components/common/StatCard'
-import EntryGrid from '@/components/common/EntryGrid'
-import Loading from '@/components/common/Loading'
+import Badge from '@/components/common/Badge'
import { useUser } from '@/hooks/useUser'
import { getMyApps } from '@/api/app/appProduct'
import { getAppApiKeyStats } from '@/api/app/apikey'
import { getMyTickets } from '@/api/app/ticket'
import { getPageTotal } from '@/utils/devcenter'
-definePageConfig({ navigationBarTitleText: '开发者中心' })
+definePageConfig({
+ navigationBarTitleText: '开发者中心',
+})
-const DeveloperCenterPage: React.FC = () => {
- const { user, isLoggedIn } = useUser()
+// 功能卡片定义(未来新增功能只需在这里加一项)
+const FEATURE_CARDS = [
+ {
+ key: 'apps',
+ icon: '📦',
+ title: '我的应用',
+ desc: '管理你开发并上架的应用',
+ url: '/pages/developer/apps/index',
+ color: '#3b82f6',
+ bgColor: '#dbeafe',
+ showBadge: true,
+ },
+ {
+ key: 'apikeys',
+ icon: '🔑',
+ title: 'API Key',
+ desc: '查看与管理你的接口密钥',
+ url: '/pages/developer/apikeys/index',
+ color: '#10b981',
+ bgColor: '#dcfce7',
+ showBadge: true,
+ },
+ {
+ key: 'tickets',
+ icon: '🎫',
+ title: '我的工单',
+ desc: '提交与跟踪你的工单',
+ url: '/pages/developer/tickets/index',
+ color: '#f59e0b',
+ bgColor: '#fef3c7',
+ showBadge: true,
+ },
+]
+
+export default function DeveloperCenterPage() {
+ const { user, isLoggedIn, loading: userLoading } = useUser()
const isDeveloper = !!(user as any)?.isDeveloper
- const [loading, setLoading] = useState(true)
const [stats, setStats] = useState({ apps: 0, keys: 0, tickets: 0 })
+ useEffect(() => {
+ if (isLoggedIn && isDeveloper) {
+ load()
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isLoggedIn, isDeveloper])
+
+ /** 加载我的应用 / API Key / 工单数量 */
const load = useCallback(async () => {
- setLoading(true)
try {
const [appsR, keysR, ticketsR] = await Promise.allSettled([
getMyApps({ page: 1, limit: 1 }),
@@ -31,84 +70,159 @@ const DeveloperCenterPage: React.FC = () => {
const keys = keysR.status === 'fulfilled' ? getPageTotal(keysR.value) : 0
const tickets = ticketsR.status === 'fulfilled' ? getPageTotal(ticketsR.value) : 0
setStats({ apps, keys, tickets })
- } catch (e) {
+ } catch {
// ignore
- } finally {
- setLoading(false)
}
}, [])
- useEffect(() => {
- if (isLoggedIn) load()
- }, [isLoggedIn, load])
+ /** 获取卡片角标数字 */
+ const getBadgeCount = (key: string) => {
+ if (key === 'apps') return stats.apps
+ if (key === 'apikeys') return stats.keys
+ if (key === 'tickets') return stats.tickets
+ return 0
+ }
+
+ if (userLoading) {
+ return (
+
+ 加载中...
+
+ )
+ }
if (!isLoggedIn) {
return (
-
-
-
- 请先登录后查看
- Taro.navigateTo({ url: '/passport/login' })}
- >
- 去登录
-
-
+
+ 🔐
+ 请先登录
+ 登录后方可进入开发者中心
)
}
if (!isDeveloper) {
return (
-
-
-
- 🛠️
- 尚未加入开发者中心
-
- 开发者中心提供应用管理、API Key、工单等能力,请先申请开发者资质
-
- Taro.navigateTo({ url: '/pages/user/vip-upgrade/index' })}
- >
- 申请成为开发者
-
+
+ 🛠️
+ 尚未加入开发者中心
+
+ 开发者中心提供应用管理、API Key、工单等能力,请先申请开发者资质
+
+ Taro.navigateTo({ url: '/pages/user/vip-upgrade/index' })}
+ >
+ 申请成为开发者
)
}
- const entries = [
- { icon: '📦', label: '我的应用', url: '/pages/developer/apps/index' },
- { icon: '🔑', label: 'API Key', url: '/pages/developer/apikeys/index' },
- { icon: '🎫', label: '我的工单', url: '/pages/developer/tickets/index' },
- ]
+ // 头部展示信息
+ const header = {
+ avatar: (user as any)?.avatar,
+ title: '开发者中心',
+ subtitle: `${((user as any)?.nickname || (user as any)?.username || '')}${((user as any)?.phone) ? ` · ${(user as any).phone}` : ''}`,
+ }
return (
-
-
-
- {loading ? (
-
- ) : (
-
-
-
-
-
-
- 常用功能
-
-
+
+
+ {/* 顶部信息区:头像 + 名称 */}
+
+
+
+
+ {/* 头像 */}
+
+ {header.avatar ? (
+
+ ) : (
+
+ 👤
+
+ )}
- )}
-
+
+ {/* 信息 */}
+
+
+ {header.title}
+
+
+ {header.subtitle}
+
+
+
+
+
+ {/* 功能卡片区 */}
+
+
+
+ {FEATURE_CARDS.map(card => (
+ Taro.navigateTo({ url: card.url })}
+ >
+ {/* 图标 */}
+
+ {card.icon}
+
+
+ {/* 文字 */}
+
+ {card.title}
+ {card.desc}
+
+
+ {/* 数量角标 */}
+ {card.showBadge && (
+
+ )}
+
+ {/* 箭头 */}
+ ›
+
+ ))}
+
+
+
+ {/* 底部提示 */}
+
+ {/* 开发者帮助 */}
+ Taro.navigateTo({ url: '/pages/user/help-center/index' })}
+ >
+
+ 💡
+
+
+ 开发者帮助与支持
+
+ 查看接口文档、SDK 与常见问题
+
+
+ 查看
+
+
)
}
-
-export default DeveloperCenterPage