From b00cacd4609140f4af74ad524e227fe28e4b3d12 Mon Sep 17 00:00:00 2001
From: yanweidong <david.yan@qq.com>
Date: Tue, 21 Jul 2026 11:32:31 +0800
Subject: [PATCH] feat: add footer profile and upgrade dialogs

---
 apps/web_v1/src/App.css                       |  72 +++++++++-
 .../src/pages/projects/project-statusbar.tsx  | 123 ++++++++++++++----
 2 files changed, 166 insertions(+), 29 deletions(-)

diff --git a/apps/web_v1/src/App.css b/apps/web_v1/src/App.css
index 80afd6e..935c949 100644
--- a/apps/web_v1/src/App.css
+++ b/apps/web_v1/src/App.css
@@ -1893,9 +1893,9 @@
 .statusbar {
   height: 32px;
   display: grid;
-  grid-template-columns: minmax(310px, 0.9fr) minmax(480px, 1.2fr) minmax(320px, 0.9fr);
+  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
   align-items: center;
-  gap: 16px;
+  gap: 20px;
   padding: 0 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   background: var(--senlin-status);
@@ -1917,6 +1917,18 @@
   white-space: nowrap;
 }
 
+.status-user {
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.86);
+  padding: 0;
+  cursor: pointer;
+}
+
+.status-user:hover .status-name {
+  color: #fff;
+}
+
 .status-tasks {
   justify-content: center;
 }
@@ -1931,6 +1943,7 @@
 
 .status-system {
   justify-content: flex-end;
+  overflow: hidden;
 }
 
 .status-name {
@@ -1959,6 +1972,61 @@
   color: #7be188;
 }
 
+.status-upgrade.arco-btn {
+  height: 22px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+
+.status-modal-form {
+  margin-top: 8px;
+}
+
+.billing-plan-group {
+  width: 100%;
+  display: grid;
+  gap: 10px;
+}
+
+.billing-plan.arco-card {
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.billing-plan.active.arco-card {
+  border-color: var(--senlin-primary);
+  background: var(--senlin-soft-blue);
+}
+
+.billing-plan .arco-card-body {
+  padding: 12px;
+}
+
+.billing-plan .arco-radio {
+  width: 100%;
+  align-items: flex-start;
+}
+
+.billing-plan h6 {
+  margin: 0 0 4px;
+}
+
+.billing-price {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--senlin-primary);
+  font-weight: 700;
+}
+
+.billing-payments {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+  border-top: 1px solid var(--senlin-border);
+  padding-top: 14px;
+}
+
 @media (max-width: 1180px) {
   .workbench-shell {
     min-width: 1180px;
diff --git a/apps/web_v1/src/pages/projects/project-statusbar.tsx b/apps/web_v1/src/pages/projects/project-statusbar.tsx
index e00a464..b076eea 100644
--- a/apps/web_v1/src/pages/projects/project-statusbar.tsx
+++ b/apps/web_v1/src/pages/projects/project-statusbar.tsx
@@ -1,44 +1,113 @@
-import { Avatar, Button, Layout, Space, Typography } from '@arco-design/web-react'
+import { useState } from 'react'
+import { Avatar, Button, Card, Form, Input, Layout, Modal, Radio, Space, Typography } from '@arco-design/web-react'
 import {
   IconApps,
   IconCalendar,
   IconCheckCircleFill,
-  IconMessage,
   IconRobot,
-  IconSettings,
   IconStorage,
   IconThunderbolt,
-  IconUserGroup,
+  IconUser,
 } from '@arco-design/web-react/icon'
 
 const { Footer } = Layout
-const { Text } = Typography
+const { Text, Title } = Typography
+
+const plans = [
+  { id: 'starter', name: '基础版', price: '¥29/月', desc: '个人项目、基础智能体与 20GB 存储。' },
+  { id: 'pro', name: '专业版', price: '¥99/月', desc: '团队协作、高级智能体与 200GB 存储。' },
+  { id: 'team', name: '团队版', price: '¥299/月', desc: '成员管理、审计日志与私有化部署支持。' },
+]
 
 export function ProjectStatusbar() {
+  const [profileOpen, setProfileOpen] = useState(false)
+  const [upgradeOpen, setUpgradeOpen] = useState(false)
+  const [selectedPlan, setSelectedPlan] = useState('pro')
+
   return (
-    <Footer className="statusbar">
-      <div className="status-user">
-        <Avatar size={26} style={{ backgroundColor: '#165DFF' }}>张</Avatar>
-        <div className="status-identity">
-          <Text className="status-name">张明</Text>
-          <span className="status-online-dot" aria-label="在线" title="在线" />
+    <>
+      <Footer className="statusbar">
+        <button className="status-user" type="button" onClick={() => setProfileOpen(true)}>
+          <Avatar size={24} style={{ backgroundColor: '#165DFF' }}>张</Avatar>
+          <span className="status-identity">
+            <Text className="status-name">张明</Text>
+            <span className="status-online-dot" aria-label="在线" title="在线" />
+          </span>
+        </button>
+
+        <Space className="status-system" size={18}>
+          <span><IconCheckCircleFill /> 同步完成</span>
+          <span><IconInteractionFallback /> 3 个计划进行中</span>
+          <span><IconRobot /> AI 空闲</span>
+          <span><IconThunderbolt /> 草稿已保存</span>
+          <span><IconStorage /> 152GB 可用</span>
+          <span>健康 <b>正常</b></span>
+          <Button className="status-upgrade" size="mini" type="primary" onClick={() => setUpgradeOpen(true)}>升级</Button>
+          <IconApps />
+        </Space>
+      </Footer>
+
+      <Modal
+        title="个人资料"
+        visible={profileOpen}
+        onCancel={() => setProfileOpen(false)}
+        onOk={() => setProfileOpen(false)}
+        okText="保存"
+        cancelText="取消"
+      >
+        <Form layout="vertical" className="status-modal-form">
+          <Form.Item label="头像">
+            <Space>
+              <Avatar size={42} style={{ backgroundColor: '#165DFF' }}>张</Avatar>
+              <Button icon={<IconUser />}>更换头像</Button>
+            </Space>
+          </Form.Item>
+          <Form.Item label="名称">
+            <Input defaultValue="张明" placeholder="请输入名称" />
+          </Form.Item>
+          <Form.Item label="邮箱">
+            <Input defaultValue="zhangming@senlin.ai" placeholder="请输入邮箱" />
+          </Form.Item>
+          <Form.Item label="当前密码">
+            <Input.Password placeholder="用于确认身份" />
+          </Form.Item>
+          <Form.Item label="新密码">
+            <Input.Password placeholder="不修改密码可留空" />
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      <Modal
+        title="升级套餐"
+        visible={upgradeOpen}
+        onCancel={() => setUpgradeOpen(false)}
+        onOk={() => setUpgradeOpen(false)}
+        okText="去支付"
+        cancelText="取消"
+      >
+        <Radio.Group value={selectedPlan} onChange={setSelectedPlan} className="billing-plan-group">
+          {plans.map((plan) => (
+            <Card className={selectedPlan === plan.id ? 'billing-plan active' : 'billing-plan'} key={plan.id} bordered>
+              <Radio value={plan.id}>
+                <div>
+                  <Title heading={6}>{plan.name}</Title>
+                  <Text className="billing-price">{plan.price}</Text>
+                  <Text type="secondary">{plan.desc}</Text>
+                </div>
+              </Radio>
+            </Card>
+          ))}
+        </Radio.Group>
+        <div className="billing-payments">
+          <Text type="secondary">支付方式</Text>
+          <Space>
+            <Button>微信支付</Button>
+            <Button>支付宝</Button>
+            <Button>企业转账</Button>
+          </Space>
         </div>
-        <Button type="text" icon={<IconUserGroup />}>好友</Button>
-        <Button type="text" icon={<IconMessage />}>私信</Button>
-        <Button type="text" icon={<IconSettings />}>设置</Button>
-      </div>
-      <Space className="status-tasks" size={28}>
-        <span><IconCheckCircleFill /> 同步完成</span>
-        <span><IconInteractionFallback /> 3 个任务进行中</span>
-        <span><IconRobot /> AI 队列空闲</span>
-        <span><IconThunderbolt /> 本地草稿已保存</span>
-      </Space>
-      <Space className="status-system" size={24}>
-        <span><IconStorage /> 系统存储 152GB 可用</span>
-        <span>系统健康 <b>正常</b></span>
-        <IconApps />
-      </Space>
-    </Footer>
+      </Modal>
+    </>
   )
 }