@yuku123/z-frontend-common 0.2.9 → 1.0.0

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

@@ -1,308 +0,0 @@
-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
-                title="说明"
-                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

@@ -1,26 +0,0 @@
-.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

@@ -1,235 +0,0 @@
-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

@@ -1,49 +0,0 @@
-@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;
-}