@yuku123/z-task-frontend-component 0.1.1 → 0.1.2

package/src/components/TaskList.jsx

@@ -0,0 +1,161 @@
+import {useEffect, useState} from 'react'
+import {Card, Table, Button, Modal, Form, Input, Select, Space, message, Tag} from 'antd'
+import {PlusOutlined, CheckOutlined} from '@ant-design/icons'
+import {taskApi} from '../api'
+
+/**
+ * 任务管理 (从 z-opc-main-starter-frontend/src/pages/task/task/TaskList.jsx 迁入).
+ *
+ * Props:
+ *   - apiBaseURL?: string  后端 baseURL, 默认 '/api'
+ */
+export default function TaskList({apiBaseURL}) {
+    const [projects, setProjects] = useState([])
+    const [projectId, setProjectId] = useState(null)
+    const [tasks, setTasks] = useState([])
+    const [loading, setLoading] = useState(false)
+    const [modalOpen, setModalOpen] = useState(false)
+    const [form] = Form.useForm()
+
+    const loadProjects = async () => {
+        try {
+            const res = await taskApi.listMyProjects()
+            const list = res?.data || res || []
+            setProjects(list)
+            if (list.length > 0 && !projectId) setProjectId(list[0].id)
+        } catch (e) {
+            message.error('加载项目失败: ' + (e?.message || e))
+        }
+    }
+
+    const loadTasks = async (pid) => {
+        if (!pid) { setTasks([]); return }
+        setLoading(true)
+        try {
+            const res = await taskApi.listTasksByProject(pid)
+            setTasks(res?.data || res || [])
+        } catch (e) {
+            message.error('加载任务失败: ' + (e?.message || e))
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => { loadProjects() }, [])
+    useEffect(() => { loadTasks(projectId) }, [projectId])
+
+    const onCreate = () => {
+        if (!projectId) {
+            message.warning('请先选择项目')
+            return
+        }
+        form.resetFields()
+        form.setFieldsValue({projectId, listId: 1, status: 1, priority: 1})
+        setModalOpen(true)
+    }
+
+    const onSubmit = async () => {
+        try {
+            const values = await form.validateFields()
+            await taskApi.createTask(values)
+            message.success('任务已创建')
+            setModalOpen(false)
+            loadTasks(projectId)
+        } catch (e) {
+            if (e?.errorFields) return
+            message.error('创建失败: ' + (e?.message || e))
+        }
+    }
+
+    const onComplete = async (id) => {
+        try {
+            await taskApi.completeTask(id)
+            message.success('任务已完成')
+            loadTasks(projectId)
+        } catch (e) {
+            message.error('操作失败: ' + (e?.message || e))
+        }
+    }
+
+    const columns = [
+        {title: 'ID', dataIndex: 'id', width: 60},
+        {title: '标题', dataIndex: 'title'},
+        {title: '项目ID', dataIndex: 'projectId', width: 80},
+        {title: '状态', dataIndex: 'status', width: 100,
+          render: (s) => {
+              const map = {0: '待办', 1: '进行中', 2: '已完成'}
+              const color = {0: 'default', 1: 'blue', 2: 'green'}[s] || 'default'
+              return <Tag color={color}>{map[s] || s}</Tag>
+          },
+        },
+        {title: '优先级', dataIndex: 'priority', width: 80},
+        {title: '截止时间', dataIndex: 'dueDate', width: 180},
+        {
+            title: '操作', width: 200, fixed: 'right',
+            render: (_, row) => (
+                <Space>
+                    <Button size="small" type="primary" icon={<CheckOutlined/>}
+                            onClick={() => onComplete(row.id)}
+                            disabled={row.status === 2}>
+                        完成
+                    </Button>
+                </Space>
+            ),
+        },
+    ]
+
+    return (
+        <div>
+            <Card
+                title="任务管理"
+                extra={
+                    <Space>
+                        <span>项目:</span>
+                        <Select
+                            value={projectId}
+                            onChange={setProjectId}
+                            style={{width: 240}}
+                            placeholder="选择项目"
+                            options={projects.map(p => ({label: p.name, value: p.id}))}
+                        />
+                        <Button type="primary" icon={<PlusOutlined/>} onClick={onCreate}>新建任务</Button>
+                    </Space>
+                }
+            >
+                <Table
+                    rowKey="id"
+                    columns={columns}
+                    dataSource={tasks}
+                    loading={loading}
+                    pagination={{pageSize: 10}}
+                />
+            </Card>
+
+            <Modal
+                title="新建任务"
+                open={modalOpen}
+                onCancel={() => setModalOpen(false)}
+                onOk={onSubmit}
+                destroyOnHidden
+            >
+                <Form form={form} layout="vertical" preserve={false}>
+                    <Form.Item name="title" label="任务标题" rules={[{required: true, message: '请输入任务标题'}]}>
+                        <Input placeholder="例如: 实现 xx 功能"/>
+                    </Form.Item>
+                    <Form.Item name="projectId" label="所属项目" rules={[{required: true}]}>
+                        <Select
+                            options={projects.map(p => ({label: p.name, value: p.id}))}
+                            placeholder="从数据库捞出的项目列表"
+                        />
+                    </Form.Item>
+                    <Form.Item name="listId" label="列表ID" rules={[{required: true}]}>
+                        <Input type="number" placeholder="默认 1"/>
+                    </Form.Item>
+                    <Form.Item name="priority" label="优先级" initialValue={1}>
+                        <Select options={[{label: '低', value: 1}, {label: '中', value: 2}, {label: '高', value: 3}]}/>
+                    </Form.Item>
+                </Form>
+            </Modal>
+        </div>
+    )
+}

package/src/index.d.ts

@@ -0,0 +1,7 @@
+export {default as TaskCard} from './components/TaskCard'
+export {default as TaskTable} from './components/TaskTable'
+export {default as ProjectSelect} from './components/ProjectSelect'
+export {default as ProjectList} from './components/ProjectList'
+export {default as TaskList} from './components/TaskList'
+export {default as TaskApp} from './components/TaskApp'
+export {taskApi} from './api'

package/src/index.js

@@ -3,4 +3,13 @@
  */
 export {default as TaskCard} from './components/TaskCard'
 export {default as TaskTable} from './components/TaskTable'
-export {default as ProjectSelect} from './components/ProjectSelect'
+export {default as ProjectSelect} from './components/ProjectSelect'
+
+// 业务页面 (FEATURE015+ 后从 z-opc-main-starter-frontend 迁入)
+export {default as ProjectList} from './components/ProjectList'
+export {default as TaskList} from './components/TaskList'
+export {default as TaskApp} from './components/TaskApp'
+
+// API 客户端
+export {taskApi} from './api'
+export {default as api} from './api'

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'