@yuku123/z-frontend-common 0.1.2 → 0.1.3

package/src/components/Ctc/agentTeam/index.tsx

@@ -0,0 +1,308 @@
+import {useEffect, useRef, useState} from 'react'
+import {PageContainer, ProCard} from '@ant-design/pro-components'
+import {Alert, Button, Empty, Input, List, message, Space, Tag, Tooltip} from 'antd'
+import {
+    CheckCircleOutlined,
+    CloseCircleOutlined,
+    PoweroffOutlined,
+    SendOutlined,
+    TeamOutlined,
+    UserAddOutlined
+} from '@ant-design/icons'
+import {agentTeamApi, type AgentTeam, type AgentTeamMember} from '@/services/agentTeam'
+
+/**
+ * z-agent-team 即时通讯 (IM) 集成页
+ *
+ * 后端 (z-agent-team-web)：
+ *   - GET    /api/agent/team/list
+ *   - POST   /api/agent/team/create
+ *   - GET    /api/agent/team/{teamCode}/members
+ *   - POST   /api/agent/team/{teamCode}/members/add
+ *   - POST   /api/agent/team/{teamCode}/members/remove?appCode=
+ *   - WS     /api/agent/team/ws (STOMP)
+ *
+ * 注意：完整的 IM 客户端 (含 STOMP 订阅) 需要 sockjs-client / @stomp/stompjs，
+ *      完整实现见 z-agent-team-frontend (z-agent/z-agent-team/z-agent-team-frontend)。
+ *      这里展示：群组管理 + 消息发送 (REST) + WS URL 配置。
+ */
+const ROLE_COLOR: Record<string, string> = {
+    LEADER: 'red',
+    WORKER: 'blue',
+    OBSERVER: 'default',
+}
+
+export default function AgentTeamIM() {
+    const [teams, setTeams] = useState<AgentTeam[]>([])
+    const [selectedTeam, setSelectedTeam] = useState<AgentTeam | null>(null)
+    const [members, setMembers] = useState<AgentTeamMember[]>([])
+    const [loadingTeams, setLoadingTeams] = useState(false)
+    const [loadingMembers, setLoadingMembers] = useState(false)
+    const [wsState, setWsState] = useState<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected')
+    const [wsLog, setWsLog] = useState<string[]>([])
+    const [messageInput, setMessageInput] = useState('')
+    const [messages, setMessages] = useState<{from: string; text: string; time: string}[]>([])
+    const wsRef = useRef<WebSocket | null>(null)
+
+    // 加载团队列表
+    const loadTeams = async () => {
+        setLoadingTeams(true)
+        try {
+            const list = await agentTeamApi.listTeams()
+            setTeams(list || [])
+        } catch (e: any) {
+            message.warning('加载团队失败：' + (e?.message || '未知错误'))
+            setTeams([])
+        } finally {
+            setLoadingTeams(false)
+        }
+    }
+
+    // 加载成员
+    const loadMembers = async (teamCode: string) => {
+        setLoadingMembers(true)
+        try {
+            const list = await agentTeamApi.listMembers(teamCode)
+            setMembers(list || [])
+        } catch (e: any) {
+            message.warning('加载成员失败：' + (e?.message || '未知错误'))
+            setMembers([])
+        } finally {
+            setLoadingMembers(false)
+        }
+    }
+
+    // WebSocket 连接 (原生 WS，无 STOMP 简化版)
+    const connectWs = () => {
+        if (wsRef.current) {
+            message.warning('已连接')
+            return
+        }
+        const url = agentTeamApi.buildWsUrl()
+        setWsState('connecting')
+        setWsLog(prev => [...prev, `[${new Date().toLocaleTimeString()}] 连接到 ${url}...`])
+        try {
+            const ws = new WebSocket(url)
+            ws.onopen = () => {
+                setWsState('connected')
+                setWsLog(prev => [...prev, `[${new Date().toLocaleTimeString()}] ✅ 连接已建立`])
+            }
+            ws.onmessage = (ev) => {
+                const text = typeof ev.data === 'string' ? ev.data : '[binary]'
+                setWsLog(prev => [...prev, `[${new Date().toLocaleTimeString()}] ← ${text}`])
+                // 简单消息格式: "from|text"
+                const m = text.match(/^([^|]+)\|(.+)$/)
+                if (m) {
+                    setMessages(prev => [...prev, {from: m[1], text: m[2], time: new Date().toLocaleTimeString()}])
+                }
+            }
+            ws.onerror = () => {
+                setWsState('error')
+                setWsLog(prev => [...prev, `[${new Date().toLocaleTimeString()}] ❌ 连接错误`])
+            }
+            ws.onclose = () => {
+                setWsState('disconnected')
+                setWsLog(prev => [...prev, `[${new Date().toLocaleTimeString()}] 🔌 连接已关闭`])
+                wsRef.current = null
+            }
+            wsRef.current = ws
+        } catch (e: any) {
+            setWsState('error')
+            message.error('WS 连接失败：' + (e?.message || '未知错误'))
+        }
+    }
+
+    const disconnectWs = () => {
+        if (wsRef.current) {
+            wsRef.current.close()
+            wsRef.current = null
+        }
+    }
+
+    const sendMessage = () => {
+        if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+            message.error('WebSocket 未连接')
+            return
+        }
+        if (!messageInput.trim()) return
+        const text = `${localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')!).userName : 'me'}|${messageInput}`
+        wsRef.current.send(text)
+        setWsLog(prev => [...prev, `[${new Date().toLocaleTimeString()}] → ${messageInput}`])
+        setMessages(prev => [...prev, {from: 'me', text: messageInput, time: new Date().toLocaleTimeString()}])
+        setMessageInput('')
+    }
+
+    useEffect(() => {
+        loadTeams()
+        return () => {
+            disconnectWs()
+        }
+    }, [])
+
+    useEffect(() => {
+        if (selectedTeam) {
+            loadMembers(selectedTeam.teamCode)
+        }
+    }, [selectedTeam])
+
+    const stateColor = {
+        disconnected: 'default',
+        connecting: 'processing',
+        connected: 'success',
+        error: 'error',
+    } as const
+    const stateText = {
+        disconnected: '未连接',
+        connecting: '连接中',
+        connected: '已连接',
+        error: '错误',
+    } as const
+
+    return (
+        <PageContainer
+            header={{
+                title: 'Agent 群组 IM (z-agent-team)',
+                subTitle: '团队协作 + 实时通讯',
+                breadcrumb: {},
+            }}
+        >
+            <div style={{display: 'grid', gridTemplateColumns: '300px 1fr', gap: 16}}>
+                {/* 团队列表面板 */}
+                <ProCard title={<Space><TeamOutlined/> 团队列表</Space>} loading={loadingTeams} headerBordered>
+                    {teams.length === 0 ? (
+                        <Empty
+                            image={Empty.PRESENTED_IMAGE_SIMPLE}
+                            description="暂无团队"
+                        >
+                            <Button type="primary" size="small" onClick={loadTeams}>
+                                刷新
+                            </Button>
+                        </Empty>
+                    ) : (
+                        <List
+                            dataSource={teams}
+                            renderItem={(t) => (
+                                <List.Item
+                                    onClick={() => setSelectedTeam(t)}
+                                    style={{
+                                        cursor: 'pointer',
+                                        padding: '8px 12px',
+                                        background: selectedTeam?.teamCode === t.teamCode ? '#e6f7ff' : undefined,
+                                        borderRadius: 4,
+                                    }}
+                                >
+                                    <List.Item.Meta
+                                        title={t.teamName}
+                                        description={
+                                            <Space size={4}>
+                                                <Tag>{t.teamCode}</Tag>
+                                                {t.status === 'ENABLE' ? <Tag color="green">启用</Tag> : <Tag>停用</Tag>}
+                                            </Space>
+                                        }
+                                    />
+                                </List.Item>
+                            )}
+                        />
+                    )}
+                </ProCard>
+
+                {/* 详情面板 */}
+                <ProCard
+                    title={
+                        selectedTeam
+                            ? <Space><TeamOutlined/> {selectedTeam.teamName} ({selectedTeam.teamCode})</Space>
+                            : '请选择团队'
+                    }
+                    headerBordered
+                    extra={
+                        <Space>
+                            {wsState === 'connected' ? (
+                                <Button icon={<PoweroffOutlined/>} onClick={disconnectWs}>断开</Button>
+                            ) : (
+                                <Button type="primary" icon={<CheckCircleOutlined/>} onClick={connectWs}>连接</Button>
+                            )}
+                            <Tag color={stateColor[wsState]}>{stateText[wsState]}</Tag>
+                        </Space>
+                    }
+                >
+                    {selectedTeam ? (
+                        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16}}>
+                            {/* 成员列表 */}
+                            <ProCard title="成员" loading={loadingMembers} size="small">
+                                <List
+                                    dataSource={members}
+                                    renderItem={(m) => (
+                                        <List.Item>
+                                            <List.Item.Meta
+                                                title={<Space>{m.appCode}<Tag color={ROLE_COLOR[m.role || 'WORKER']}>{m.role}</Tag></Space>}
+                                                description={`优先级: ${m.priority ?? 0} · ${m.enabled === 1 ? '✅ 启用' : '❌ 停用'}`}
+                                            />
+                                        </List.Item>
+                                    )}
+                                />
+                            </ProCard>
+
+                            {/* 消息面板 */}
+                            <ProCard title="实时消息" size="small" styles={{body: {padding: 0, display: 'flex', flexDirection: 'column', height: 400}}}>
+                                <div style={{flex: 1, overflow: 'auto', padding: 12}}>
+                                    {messages.length === 0 ? (
+                                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无消息" />
+                                    ) : (
+                                        messages.map((m, i) => (
+                                            <div key={i} style={{marginBottom: 8}}>
+                                                <Tag color={m.from === 'me' ? 'blue' : 'green'}>{m.from}</Tag>
+                                                <span style={{marginLeft: 8}}>{m.text}</span>
+                                                <span style={{marginLeft: 8, color: '#999', fontSize: 11}}>{m.time}</span>
+                                            </div>
+                                        ))
+                                    )}
+                                </div>
+                                <div style={{padding: 8, borderTop: '1px solid #f0f0f0', display: 'flex', gap: 8}}>
+                                    <Input
+                                        value={messageInput}
+                                        onChange={e => setMessageInput(e.target.value)}
+                                        onPressEnter={sendMessage}
+                                        placeholder={wsState === 'connected' ? '输入消息...' : '请先连接 WebSocket'}
+                                        disabled={wsState !== 'connected'}
+                                    />
+                                    <Button type="primary" icon={<SendOutlined/>} onClick={sendMessage}
+                                            disabled={wsState !== 'connected'}>
+                                        发送
+                                    </Button>
+                                </div>
+                            </ProCard>
+                        </div>
+                    ) : (
+                        <Empty description="请从左侧选择一个团队"/>
+                    )}
+
+                    {/* WS 日志 */}
+                    {wsLog.length > 0 && (
+                        <ProCard title="WebSocket 日志" size="small" style={{marginTop: 16}}>
+                            <pre style={{
+                                background: '#1e1e1e', color: '#d4d4d4', padding: 8, borderRadius: 4,
+                                fontFamily: 'Menlo, monospace', fontSize: 11, maxHeight: 180, overflow: 'auto',
+                                margin: 0,
+                            }}>
+                                {wsLog.join('\n')}
+                            </pre>
+                        </ProCard>
+                    )}
+                </ProCard>
+            </div>
+
+            <Alert
+                style={{marginTop: 16}}
+                type="info"
+                showIcon
+                message="说明"
+                description={
+                    <span>
+                        完整 STOMP 客户端 (含订阅 Topic、ACK、消息历史) 见 <code>z-agent/z-agent-team/z-agent-team-frontend</code>。
+                        本页提供轻量级 WS 连接 + 群组管理 REST 端点示例。
+                    </span>
+                }
+            />
+        </PageContainer>
+    )
+}

package/src/components/Ctc/login/AuthPage.module.css

@@ -0,0 +1,26 @@
+.container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.content {
+    width: 400px;
+    padding: 20px;
+}
+
+.card {
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 24px;
+}
+
+.header h3 {
+    margin-bottom: 8px;
+}

package/src/components/Ctc/login/AuthPage.tsx

@@ -0,0 +1,235 @@
+import React, {useState} from 'react'
+import {useNavigate} from 'react-router-dom'
+import {Button, Card, Checkbox, Form, Input, message, Tabs, Typography,} from 'antd'
+import {LockOutlined, MailOutlined, MobileOutlined, UserOutlined} from '@ant-design/icons'
+import {authRequest} from '../../../services/request'
+import styles from './AuthPage.module.css'
+
+const {Title, Text} = Typography
+
+type LoginType = 'account' | 'phone' | 'email'
+
+// 登录请求 — 后端 AuthController @ /api/ctc/auth/login, body: {identifier, password}
+const loginByUsername = (data: { identifier: string; password: string }) =>
+    authRequest.post('/ctc/auth/login', data)
+
+// 注册 / 手机登录 / 验证码 — 后端暂未实现，占位返回空响应避免 UI 报错
+const stubNotImplemented = () =>
+    Promise.resolve({code: 0, message: '功能暂未开放'})
+
+const AuthPage: React.FC = () => {
+    const navigate = useNavigate()
+    const [action, setAction] = useState<'login' | 'register'>('login')
+    const [type, setType] = useState<LoginType>('account')
+    const [sendingCode, setSendingCode] = useState(false)
+    const [countdown, setCountdown] = useState(0)
+    const [form] = Form.useForm()
+
+    // 发送验证码 (后端暂未实现)
+    const handleSendCode = async () => {
+        message.info('验证码功能暂未开放')
+    }
+
+    // 处理登录/注册提交
+    const handleSubmit = async (values: any) => {
+        try {
+            let response: any
+
+            if (action === 'login' && type === 'account') {
+                // 后端 LoginRequest: {identifier, password, tenantCode?}
+                response = await loginByUsername({identifier: values.username, password: values.password})
+                // 后端返回: {token, account: {id, username, nickname, tenantCode, ...}}
+                if (response && response.token) {
+                    message.success('登录成功！')
+                    localStorage.setItem('token', response.token)
+                    const acct = response.account || {}
+                    localStorage.setItem('userInfo', JSON.stringify({
+                        userId: acct.id,
+                        userName: acct.username,
+                        nickname: acct.nickname,
+                        tenantCode: acct.tenantCode,
+                    }))
+                    navigate('/ctc')
+                    return
+                }
+                message.error(response?.message || '登录失败')
+            } else {
+                // 注册 / 手机登录 — 后端暂未实现
+                await stubNotImplemented()
+                message.info('该功能暂未开放')
+                return
+            }
+        } catch (error: any) {
+            message.error(error.message || '操作失败，请重试')
+        }
+    }
+
+    // Tab配置
+    const getTabItems = () => {
+        const items = [
+            {key: 'account', label: '账户密码'},
+        ]
+
+        if (action === 'register') {
+            items.push({key: 'phone', label: '手机注册'})
+            items.push({key: 'email', label: '邮箱注册'})
+        } else {
+            items.push({key: 'phone', label: '手机验证码'})
+        }
+
+        return items
+    }
+
+    // 获取表单项
+    const getFormItems = () => {
+        const isLogin = action === 'login'
+
+        return (
+            <>
+                {type === 'account' && (
+                    <>
+                        <Form.Item name="username" rules={[{required: true, message: '请输入用户名!'}]}>
+                            <Input
+                                size="large"
+                                prefix={<UserOutlined/>}
+                                placeholder="用户名"
+                            />
+                        </Form.Item>
+                        <Form.Item name="password" rules={[{required: true, message: '请输入密码!'}]}>
+                            <Input.Password
+                                size="large"
+                                prefix={<LockOutlined/>}
+                                placeholder="密码"
+                            />
+                        </Form.Item>
+                    </>
+                )}
+
+                {(type === 'phone' || type === 'email') && (
+                    <>
+                        <Form.Item
+                            name="receiver"
+                            rules={[
+                                {required: true, message: type === 'phone' ? '请输入手机号!' : '请输入邮箱!'}
+                            ]}
+                        >
+                            <Input
+                                size="large"
+                                prefix={type === 'phone' ? <MobileOutlined/> : <MailOutlined/>}
+                                placeholder={type === 'phone' ? '手机号' : '邮箱'}
+                                disabled={countdown > 0}
+                            />
+                        </Form.Item>
+                        <Form.Item>
+                            <div style={{display: 'flex', gap: 8}}>
+                                <Input
+                                    size="large"
+                                    prefix={<LockOutlined/>}
+                                    placeholder="验证码"
+                                    style={{flex: 1}}
+                                />
+                                <Button
+                                    type="primary"
+                                    onClick={handleSendCode}
+                                    loading={sendingCode}
+                                    disabled={countdown > 0}
+                                    style={{minWidth: 100}}
+                                >
+                                    {countdown > 0 ? `${countdown}秒` : '获取验证码'}
+                                </Button>
+                            </div>
+                        </Form.Item>
+                        {!isLogin && (
+                            <Form.Item name="password" rules={[{required: true, message: '请输入密码!'}]}>
+                                <Input.Password
+                                    size="large"
+                                    prefix={<LockOutlined/>}
+                                    placeholder="设置密码"
+                                />
+                            </Form.Item>
+                        )}
+                    </>
+                )}
+            </>
+        )
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                <Card className={styles.card}>
+                    {/* 品牌标识 — 内联 SVG（不再显示"CTC 组织管理中心 / 4A + SSO 统一身份认证平台"那种奇怪描述） */}
+                    <div className={styles.header} style={{textAlign: 'center'}}>
+                        <svg width="48" height="48" viewBox="0 0 56 56" fill="none" aria-label="logo"
+                             style={{marginBottom: 8}}>
+                            <defs>
+                                <linearGradient id="brandGradAuth" x1="0" y1="0" x2="56" y2="56"
+                                                gradientUnits="userSpaceOnUse">
+                                    <stop offset="0%" stopColor="#1677ff"/>
+                                    <stop offset="100%" stopColor="#0958d9"/>
+                                </linearGradient>
+                            </defs>
+                            <rect x="2" y="2" width="52" height="52" rx="14" fill="url(#brandGradAuth)"/>
+                            <path
+                                d="M18 18 H40 L18 38 H40"
+                                stroke="#ffffff"
+                                strokeWidth="3.5"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                fill="none"
+                            />
+                        </svg>
+                        <Title level={4} style={{margin: 0}}>
+                            {action === 'register' ? '用户注册' : '欢迎登录'}
+                        </Title>
+                    </div>
+
+                    <Form
+                        form={form}
+                        layout="vertical"
+                        onFinish={handleSubmit}
+                        initialValues={{autoLogin: true}}
+                    >
+                        {action !== 'forgot' && (
+                            <Tabs
+                                activeKey={type}
+                                onChange={(key) => setType(key as LoginType)}
+                                centered
+                                items={getTabItems()}
+                            />
+                        )}
+
+                        {getFormItems()}
+
+                        <Form.Item>
+                            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+                                {action === 'login' && (
+                                    <Form.Item name="autoLogin" valuePropName="checked" noStyle>
+                                        <Checkbox>自动登录</Checkbox>
+                                    </Form.Item>
+                                )}
+                                <a
+                                    onClick={() => {
+                                        setAction(action === 'login' ? 'register' : 'login')
+                                    }}
+                                >
+                                    {action === 'login'
+                                        ? '没有账号？立即注册'
+                                        : '已有账号？立即登录'}
+                                </a>
+                            </div>
+                        </Form.Item>
+
+                        <Form.Item>
+                            <Button type="primary" htmlType="submit" block size="large">
+                                {action === 'login' ? '登录' : '注册'}
+                            </Button>
+                        </Form.Item>
+                    </Form>
+                </Card>
+            </div>
+        </div>
+    )
+}
+
+export default AuthPage

package/src/components/Ctc/login/index.less

@@ -0,0 +1,49 @@
+@import 'antd/dist/reset.css';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background: #f0f2f5;
+}
+
+.lang {
+  width: 100%;
+  height: 40px;
+  line-height: 44px;
+  text-align: right;
+
+  :global(.ant-dropdown-trigger) {
+    margin-right: 24px;
+    padding: 12px;
+    cursor: pointer;
+  }
+}
+
+.content {
+  flex: 1;
+  padding: 32px 0;
+}
+
+@media (min-width: 768px) {
+  .container {
+    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+    background-repeat: no-repeat;
+    background-position: center 110px;
+    background-size: 100%;
+  }
+
+  .content {
+    padding: 32px 0 24px;
+  }
+}
+
+.icon {
+  margin-left: 8px;
+  color: rgba(0, 0, 0, 0.2);
+  font-size: 24px;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: color 0.3s;
+}