@yuku123/z-project-frontend-component 0.1.1

package/src/pages/ProjectDetail.jsx

@@ -0,0 +1,208 @@
+import {useEffect, useRef, useState} from 'react'
+import {useNavigate, useParams} from 'react-router-dom'
+import {Alert, Button, Card, Empty, Input, message, Popconfirm, Space, Spin, Statistic, Tag} from 'antd'
+import {ApiOutlined, ArrowLeftOutlined, CheckCircleOutlined, RobotOutlined, SendOutlined, UserOutlined} from '@ant-design/icons'
+import request from '../utils/request'
+
+const ROLE_META = {
+    USER: {color: 'blue', icon: <UserOutlined/>, label: 'CEO'},
+    ASSISTANT: {color: 'purple', icon: <RobotOutlined/>, label: 'Agent'},
+    SYSTEM: {color: 'default', icon: null, label: '系统'},
+}
+
+const STATUS_TAG = {
+    OPEN: {color: 'blue', text: '待开始'},
+    IN_PROGRESS: {color: 'green', text: '进行中'},
+    COMPLETED: {color: 'default', text: '已完成'},
+    ARCHIVED: {color: 'default', text: '已归档'},
+}
+
+function ProjectDetail() {
+    const {id} = useParams()
+    const navigate = useNavigate()
+    const [project, setProject] = useState(null)
+    const [messages, setMessages] = useState([])
+    const [input, setInput] = useState('')
+    const [sending, setSending] = useState(false)
+    const chatRef = useRef(null)
+
+    useEffect(() => {
+        if (id) loadAll()
+    }, [id])
+
+    useEffect(() => {
+        // 滚到底
+        if (chatRef.current) {
+            chatRef.current.scrollTop = chatRef.current.scrollHeight
+        }
+    }, [messages])
+
+    const loadAll = async () => {
+        try {
+            const [p, m] = await Promise.all([
+                request.get(`/project/${id}`),
+                request.get(`/project/${id}/messages`),
+            ])
+            setProject(p?.data ?? p)
+            setMessages(Array.isArray(m?.data ?? m) ? (m?.data ?? m) : [])
+        } catch (e) {
+            message.error('加载项目失败')
+        }
+    }
+
+    const handleSend = async () => {
+        if (!input.trim()) return
+        const text = input.trim()
+        setInput('')
+        setSending(true)
+        // 乐观: 先把 user 消息渲染出去
+        const tempUser = {seq: -1, role: 'USER', content: text, createdAt: new Date().toISOString()}
+        setMessages(prev => [...prev, tempUser])
+        try {
+            const res = await request.post(`/project/${id}/chat`, {message: text})
+            if (res && res.success !== false) {
+                const r = res.data ?? res
+                const a = r.message
+                setMessages(prev => {
+                    // 去掉临时的 user, 换成后端返回的完整序列
+                    const filtered = prev.filter(m => m.seq !== -1)
+                    return [...filtered, ...(a ? [a] : [])]
+                })
+                // 重新拉一次保证 seq 对齐
+                setTimeout(loadAll, 100)
+            } else {
+                message.error(res?.message || '发送失败')
+            }
+        } catch (e) {
+            message.error('发送失败: ' + (e?.message || ''))
+        } finally {
+            setSending(false)
+        }
+    }
+
+    const handleComplete = async () => {
+        try {
+            const res = await request.post(`/project/${id}/status?status=COMPLETED`)
+            if (res && res.success !== false) {
+                message.success('已标记完成')
+                loadAll()
+            }
+        } catch (e) {
+            message.error('操作失败')
+        }
+    }
+
+    if (!project) return <div style={{padding: 24}}><Spin/></div>
+
+    const status = STATUS_TAG[project.status] || {color: 'default', text: project.status}
+
+    return (
+        <div style={{padding: 24, height: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column', gap: 16}}>
+            {/* 头部 */}
+            <Card
+                title={
+                    <Space>
+                        <Button type="text" icon={<ArrowLeftOutlined/>} onClick={() => navigate('/project/list')}/>
+                        <ApiOutlined/>
+                        <span style={{fontWeight: 500}}>{project.name}</span>
+                        <Tag color={status.color}>{status.text}</Tag>
+                    </Space>
+                }
+                extra={
+                    <Space>
+                        {project.contextSize > 0 && <Tag color="blue">上下文 {project.contextSize} B</Tag>}
+                        <Tag>{project.agentRole}</Tag>
+                        {project.modelCode && <Tag color="purple">{project.modelCode}</Tag>}
+                        {project.status !== 'COMPLETED' && project.status !== 'ARCHIVED' && (
+                            <Popconfirm title="标记完成?" onConfirm={handleComplete}>
+                                <Button icon={<CheckCircleOutlined/>}>标记完成</Button>
+                            </Popconfirm>
+                        )}
+                    </Space>
+                }
+            >
+                {project.description && <div style={{color: '#666', marginBottom: 8}}>{project.description}</div>}
+                <Space size="large">
+                    <Statistic title="消息数" value={project.messageCount || 0}/>
+                    {project.sourceSubscriptionId && (
+                        <Statistic title="来源订阅" value={`#${project.sourceSubscriptionId}`}/>
+                    )}
+                    <Statistic title="立项" value={project.createdAt ? new Date(project.createdAt).toLocaleString() : '-'}/>
+                </Space>
+            </Card>
+
+            {/* 聊天区 */}
+            <Card style={{flex: 1, display: 'flex', flexDirection: 'column'}}
+                  bodyStyle={{flex: 1, display: 'flex', flexDirection: 'column', padding: 0}}>
+                <div ref={chatRef} style={{flex: 1, overflow: 'auto', padding: 16, background: '#fafafa'}}>
+                    {messages.length === 0 ? (
+                        <Empty description="还没有消息, 跟 Agent 说点什么?"/>
+                    ) : (
+                        <Space orientation="vertical" style={{width: '100%'}} size="middle">
+                            {messages.map(m => {
+                                const meta = ROLE_META[m.role] || ROLE_META.SYSTEM
+                                const isUser = m.role === 'USER'
+                                return (
+                                    <div key={m.id || m.seq} style={{
+                                        display: 'flex',
+                                        justifyContent: isUser ? 'flex-end' : 'flex-start',
+                                    }}>
+                                        <div style={{
+                                            maxWidth: '70%',
+                                            background: isUser ? '#1677ff' : '#fff',
+                                            color: isUser ? '#fff' : '#000',
+                                            border: isUser ? 'none' : '1px solid #e8e8e8',
+                                            borderRadius: 8,
+                                            padding: '10px 14px',
+                                            boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
+                                        }}>
+                                            <div style={{fontSize: 12, opacity: 0.7, marginBottom: 4}}>
+                                                <Space size={4}>
+                                                    {meta.icon}
+                                                    {meta.label}
+                                                    {m.seq > 0 && <span>#{m.seq}</span>}
+                                                    {m.latencyMs > 0 && <span>· {m.latencyMs}ms</span>}
+                                                    {m.modelCode && <span>· {m.modelCode}</span>}
+                                                </Space>
+                                            </div>
+                                            <div style={{whiteSpace: 'pre-wrap', wordBreak: 'break-word'}}>
+                                                {m.content}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )
+                            })}
+                            {sending && (
+                                <div style={{display: 'flex', justifyContent: 'flex-start'}}>
+                                    <div style={{background: '#fff', border: '1px solid #e8e8e8', borderRadius: 8, padding: '10px 14px'}}>
+                                        <Spin size="small"/> 思考中...
+                                    </div>
+                                </div>
+                            )}
+                        </Space>
+                    )}
+                </div>
+                {project.status === 'COMPLETED' || project.status === 'ARCHIVED' ? (
+                    <Alert style={{margin: 12, marginBottom: 0}}
+                           type="info" message="项目已完成 / 归档, 不再接受新消息"
+                           showIcon/>
+                ) : (
+                    <div style={{borderTop: '1px solid #f0f0f0', padding: 12, display: 'flex', gap: 8}}>
+                        <Input.TextArea
+                            value={input}
+                            onChange={e => setInput(e.target.value)}
+                            onPressEnter={e => { if (!e.shiftKey) { e.preventDefault(); handleSend() } }}
+                            placeholder="输入消息, Enter 发送 (Shift+Enter 换行)"
+                            autoSize={{minRows: 1, maxRows: 6}}
+                            disabled={sending}
+                        />
+                        <Button type="primary" icon={<SendOutlined/>} loading={sending} onClick={handleSend}
+                                disabled={!input.trim()}>发送</Button>
+                    </div>
+                )}
+            </Card>
+        </div>
+    )
+}
+
+export default ProjectDetail

package/src/pages/ProjectList.jsx

@@ -0,0 +1,122 @@
+import {useEffect, useState} from 'react'
+import {useNavigate} from 'react-router-dom'
+import {Button, Card, message, Popconfirm, Space, Table, Tabs, Tag} from 'antd'
+import {ApiOutlined, CheckCircleOutlined, PlusOutlined, ReloadOutlined} from '@ant-design/icons'
+import request from '../utils/request'
+
+const STATUS_TAG = {
+    OPEN: {color: 'blue', text: '待开始'},
+    IN_PROGRESS: {color: 'green', text: '进行中'},
+    COMPLETED: {color: 'default', text: '已完成'},
+    ARCHIVED: {color: 'default', text: '已归档'},
+}
+
+function ProjectList() {
+    const navigate = useNavigate()
+    const [tab, setTab] = useState('mine')
+    const [data, setData] = useState([])
+    const [loading, setLoading] = useState(false)
+
+    const fetchData = async () => {
+        setLoading(true)
+        try {
+            const url = tab === 'mine'
+                ? '/project/list/mine?limit=100'
+                : `/project/list/by-status?status=${tab}&limit=100`
+            const res = await request.get(url)
+            const list = res?.data ?? res ?? []
+            setData(Array.isArray(list) ? list : [])
+        } catch (e) {
+            message.error('加载项目失败: ' + (e?.message || ''))
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        fetchData()
+    }, [tab])
+
+    const handleComplete = async (id) => {
+        try {
+            const res = await request.post(`/project/${id}/status?status=COMPLETED`)
+            if (res && res.success !== false) {
+                message.success('已标记完成')
+                fetchData()
+            }
+        } catch (e) {
+            message.error('操作失败: ' + (e?.message || ''))
+        }
+    }
+
+    const columns = [
+        {title: 'ID', dataIndex: 'id', width: 60},
+        {title: '名称', dataIndex: 'name', render: (n, r) => (
+            <Space orientation="vertical" size={0}>
+                <a onClick={() => navigate(`/project/${r.id}`)} style={{fontWeight: 500}}>{n}</a>
+                {r.description && <span style={{color: '#999', fontSize: 12}}>{r.description}</span>}
+            </Space>
+        )},
+        {title: '来源', dataIndex: 'sourceType', width: 100, render: (t) => <Tag>{t}</Tag>},
+        {title: '订阅', dataIndex: 'sourceSubscriptionId', width: 80,
+            render: (v) => v ? `#${v}` : <span style={{color: '#ccc'}}>-</span>},
+        {title: '状态', dataIndex: 'status', width: 100, render: (s) => {
+            const m = STATUS_TAG[s] || {color: 'default', text: s}
+            return <Tag color={m.color}>{m.text}</Tag>
+        }},
+        {title: '消息数', dataIndex: 'messageCount', width: 80},
+        {title: '上下文', width: 130, render: (_, r) => (
+            <Space size={4}>
+                <Tag color="blue">{r.contextSize || 0}B</Tag>
+            </Space>
+        )},
+        {title: '最近活动', dataIndex: 'lastMessageAt', width: 150,
+            render: t => t ? new Date(t).toLocaleString() : <span style={{color: '#ccc'}}>-</span>},
+        {title: '操作', width: 160, render: (_, r) => (
+            <Space size={4}>
+                <Button type="link" size="small" onClick={() => navigate(`/project/${r.id}`)}>对话</Button>
+                {r.status !== 'COMPLETED' && r.status !== 'ARCHIVED' && (
+                    <Popconfirm title="标记为已完成?" onConfirm={() => handleComplete(r.id)}>
+                        <Button type="link" size="small" icon={<CheckCircleOutlined/>}>完成</Button>
+                    </Popconfirm>
+                )}
+            </Space>
+        )},
+    ]
+
+    return (
+        <div style={{padding: 24}}>
+            <Card
+                title={<Space><ApiOutlined/>项目中心 (CEO 立项 + Agent 对话)</Space>}
+                extra={
+                    <Space>
+                        <Button icon={<ReloadOutlined/>} onClick={fetchData}>刷新</Button>
+                        <Button type="primary" icon={<PlusOutlined/>}
+                                onClick={() => navigate('/project/new')}>新建项目</Button>
+                    </Space>
+                }
+            >
+                <Tabs
+                    activeKey={tab}
+                    onChange={setTab}
+                    items={[
+                        {key: 'mine', label: '我的进行中'},
+                        {key: 'OPEN', label: '待开始'},
+                        {key: 'IN_PROGRESS', label: '进行中'},
+                        {key: 'COMPLETED', label: '已完成'},
+                    ]}
+                />
+                <Table
+                    rowKey="id"
+                    columns={columns}
+                    dataSource={data}
+                    loading={loading}
+                    size="middle"
+                    pagination={{pageSize: 20}}
+                />
+            </Card>
+        </div>
+    )
+}
+
+export default ProjectList

package/src/services/api.js

@@ -0,0 +1,76 @@
+/**
+ * 兼容垫片: 之前在 z-opc-main-starter-frontend/services/ 里的所有 axios 客户端
+ * 这里直接 re-export z-frontend-common 的 utils/request, 并提供 makeApi 工具.
+ */
+import request, {authRequest, setupInterceptors} from '../utils/request'
+export {request as default, authRequest, setupInterceptors}
+
+function makeApi(name) {
+    return {
+        list: (params) => request.get(`/${name}/list`, {params}).then(r => r.data),
+        page: (params) => request.get(`/${name}/page`, {params}).then(r => r.data),
+        get: (id) => request.get(`/${name}/${id}`).then(r => r.data),
+        create: (data) => request.post(`/${name}`, data).then(r => r.data),
+        update: (id, data) => request.put(`/${name}/${id}`, data).then(r => r.data),
+        delete: (id) => request.delete(`/${name}/${id}`).then(r => r.data),
+    }
+}
+
+export const configApi = makeApi('config')
+export const approvalApi = makeApi('approval')
+export const designerApi = makeApi('designer')
+export const mcpApi = makeApi('mcp')
+export const mockPlatformApi = makeApi('mock')
+export const namingApi = makeApi('naming')
+export const opsApi = makeApi('ops')
+export const ossApi = makeApi('oss')
+export const scriptApi = makeApi('script')
+export const skillApi = makeApi('skill')
+export const agentApi = makeApi('agent')
+export const flowApi = makeApi('flow')
+export const traceApi = makeApi('trace')
+export const llmApi = makeApi('llm')
+export const productApi = makeApi('product')
+export const sceneApi = makeApi('scene')
+export const ctcAcAccountApi = makeApi('ctc/ac/accounts')
+export const ctcAcLoginLogApi = makeApi('ctc/ac/login-log')
+export const ctcAcTenantApi = makeApi('ctc/ac/tenants')
+export const ctcAcDomainApi = makeApi('ctc/ac/domains')
+export const ctcAcOrgApi = makeApi('ctc/ac/orgs')
+export const ctcAcDeptApi = makeApi('ctc/ac/depts')
+export const ctcAcGroupApi = makeApi('ctc/ac/groups')
+export const ctcAuthorizationApi = makeApi('ctc/authorization')
+export const metaAppApi = makeApi('meta-app')
+export const jobApi = makeApi('schedule/job')
+export const webideApi = makeApi('webide')
+export const privateConfigApi = makeApi('private-config')
+export const ctcSurlApi = makeApi('ctc/surl')
+export const ctcUserApi = makeApi('ctc/user')
+export const agentTeamApi = makeApi('agent/team')
+export const workspaceApi = makeApi('agent/team/workspace')
+
+// === 项目 / 任务 / 鉴权 ===
+export const login = (data) => request.post('/ctc/auth/login', data).then(r => r.data)
+export const getCurrentUser = () => {
+    try { return Promise.resolve(JSON.parse(localStorage.getItem('userInfo') || 'null')) }
+    catch { return Promise.resolve(null) }
+}
+export const switchTenant = (tenantCode, domainCode) =>
+    authRequest.post('/ctc/auth/switch-tenant', {tenantCode: tenantCode || '', domainCode: domainCode || ''}).then(r => r.data)
+export const listMyProjects = () => authRequest.get('/project/user/list').then(r => r.data)
+export const createProject = (data) => request.post('/project', data).then(r => r.data)
+export const updateProject = (id, data) => request.put(`/project/${id}`, data).then(r => r.data)
+export const archiveProject = (id) => request.put(`/project/${id}/archive`).then(r => r.data)
+export const listTasksByProject = (projectId) => request.get('/task/project/list', {params: {projectId}}).then(r => r.data)
+export const createTask = (data) => request.post('/task', data).then(r => r.data)
+export const completeTask = (id) => request.post('/task/complete', null, {params: {taskId: id}}).then(r => r.data)
+export const moveTask = (taskId, targetListId, position) =>
+    request.put('/task/move', null, {params: {taskId, targetListId, position}}).then(r => r.data)
+export const listTasksByList = (listId) => request.get('/task/list', {params: {listId}}).then(r => r.data)
+export const getDomainByTenantCode = async () => [{domainCode: 'default', domainName: '默认域'}]
+export const getTenantList = async () => []
+export const getDynamicMenu = async () => []
+export const userOrgRelApi = {
+    usersByDept: () => Promise.resolve([]),
+    usersByGroup: () => Promise.resolve([]),
+}

package/src/utils/request.js

@@ -0,0 +1,5 @@
+/**
+ * 兼容垫片: 从 @yuku123/z-frontend-common re-export
+ * 历史上各业务页面的 import 路径是 '../../../utils/request'，保留这个 shim.
+ */
+export {request as default, authRequest, ctcRequest, createRequest, setupInterceptors} from '@yuku123/z-frontend-common'