agent/apps/web_v1/src/pages/projects/project-statusbar.tsx

import { useState } from 'react'
import { Avatar, Button, Card, Form, Input, Layout, Modal, Radio, Space, Typography } from '@arco-design/web-react'
import {
  IconApps,
  IconCalendar,
  IconCheckCircleFill,
  IconRobot,
  IconStorage,
  IconThunderbolt,
  IconUser,
} from '@arco-design/web-react/icon'

const { Footer } = Layout
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">
        <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>
      </Modal>
    </>
  )
}

function IconInteractionFallback() {
  return <IconCalendar />
}