@yuku123/z-task-frontend-component 0.1.0

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@yuku123/z-task-frontend-component",
+  "version": "0.1.0",
+  "private": false,
+  "description": "z-task 共享前端组件 - TaskCard 等",
+  "keywords": [
+    "react",
+    "antd",
+    "task",
+    "z-opc"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "zifang",
+    "email": "1340947819@qq.com"
+  },
+  "homepage": "https://github.com/yuku123/z-opc/tree/main/z-task/_frontend_component#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yuku123/z-opc.git",
+    "directory": "z-task/_frontend_component"
+  },
+  "bugs": {
+    "url": "https://github.com/yuku123/z-opc/issues"
+  },
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^6.2.0"
+  }
+}

package/src/components/ProjectSelect.jsx

@@ -0,0 +1,22 @@
+/**
+ * 项目选择器组件
+ */
+import {Select} from 'antd'
+
+export default function ProjectSelect({value, onChange, projects = []}) {
+    return (
+        <Select
+            value={value}
+            onChange={onChange}
+            placeholder="请选择项目"
+            style={{width: 200}}
+            allowClear
+        >
+            {projects.map((p) => (
+                <Select.Option key={p.id} value={p.id}>
+                    {p.name}
+                </Select.Option>
+            ))}
+        </Select>
+    )
+}

package/src/components/TaskCard.jsx

@@ -0,0 +1,46 @@
+/**
+ * 任务卡片组件
+ */
+import {Button, Card, Space, Tag} from 'antd'
+import {CheckCircleOutlined, EditOutlined} from '@ant-design/icons'
+
+const priorityMap = {
+    high: {color: 'red', text: '高'},
+    medium: {color: 'orange', text: '中'},
+    low: {color: 'green', text: '低'},
+}
+
+const statusMap = {
+    pending: {color: 'default', text: '待处理'},
+    in_progress: {color: 'blue', text: '进行中'},
+    completed: {color: 'green', text: '已完成'},
+}
+
+export default function TaskCard({task, onEdit, onComplete}) {
+    const priority = priorityMap[task.priority] || {color: 'default', text: task.priority}
+    const status = statusMap[task.status] || {color: 'default', text: task.status}
+
+    return (
+        <Card size="small" title={task.title} extra={
+            <Space>
+                {task.status !== 'completed' && (
+                    <Button size="small" icon={<CheckCircleOutlined/>} onClick={() => onComplete?.(task)}>
+                        完成
+                    </Button>
+                )}
+                <Button size="small" icon={<EditOutlined/>} onClick={() => onEdit?.(task)}>
+                    编辑
+                </Button>
+            </Space>
+        }>
+            <Space direction="vertical" style={{width: '100%'}}>
+                <div>项目：{task.projectName}</div>
+                <Space>
+                    <Tag color={priority.color}>{priority.text}</Tag>
+                    <Tag color={status.color}>{status.text}</Tag>
+                </Space>
+                {task.dueDate && <div>截止：{task.dueDate}</div>}
+            </Space>
+        </Card>
+    )
+}

package/src/components/TaskTable.jsx

@@ -0,0 +1,64 @@
+/**
+ * 任务表格组件
+ */
+import {Button, Space, Table, Tag} from 'antd'
+import {CheckCircleOutlined, DeleteOutlined, EditOutlined} from '@ant-design/icons'
+
+const priorityMap = {high: 'red', medium: 'orange', low: 'green'}
+const statusMap = {
+    pending: 'default',
+    in_progress: 'blue',
+    completed: 'green',
+}
+
+export default function TaskTable({dataSource, loading, onEdit, onDelete, onComplete}) {
+    const columns = [
+        {title: '任务名称', dataIndex: 'title', key: 'title'},
+        {title: '项目', dataIndex: 'projectName', key: 'projectName'},
+        {
+            title: '优先级',
+            dataIndex: 'priority',
+            key: 'priority',
+            render: (v) => <Tag color={priorityMap[v]}>{v === 'high' ? '高' : v === 'medium' ? '中' : '低'}</Tag>,
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            render: (v) => {
+                const m = {pending: '待处理', in_progress: '进行中', completed: '已完成'}
+                return <Tag color={statusMap[v]}>{m[v] || v}</Tag>
+            },
+        },
+        {title: '截止日期', dataIndex: 'dueDate', key: 'dueDate'},
+        {
+            title: '操作',
+            key: 'action',
+            render: (_, record) => (
+                <Space>
+                    {record.status !== 'completed' && (
+                        <Button size="small" icon={<CheckCircleOutlined/>} onClick={() => onComplete?.(record)}>
+                            完成
+                        </Button>
+                    )}
+                    <Button size="small" icon={<EditOutlined/>} onClick={() => onEdit?.(record)}>
+                        编辑
+                    </Button>
+                    <Button size="small" danger icon={<DeleteOutlined/>} onClick={() => onDelete?.(record)}>
+                        删除
+                    </Button>
+                </Space>
+            ),
+        },
+    ]
+
+    return (
+        <Table
+            columns={columns}
+            dataSource={dataSource}
+            loading={loading}
+            rowKey="id"
+            pagination={{pageSize: 10}}
+        />
+    )
+}

package/src/dev.jsx

@@ -0,0 +1,59 @@
+/**
+ * Task组件库开发调试入口
+ */
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import {ProjectSelect, TaskCard, TaskTable} from './index.js'
+
+const App = () => {
+    const tasks = [
+        {
+            id: 1,
+            title: '完成登录页',
+            projectName: '主应用',
+            priority: 'high',
+            status: 'in_progress',
+            dueDate: '2024-06-10'
+        },
+        {
+            id: 2,
+            title: '修复菜单问题',
+            projectName: '主应用',
+            priority: 'medium',
+            status: 'pending',
+            dueDate: '2024-06-15'
+        },
+        {
+            id: 3,
+            title: '上线审批流程',
+            projectName: '流程引擎',
+            priority: 'low',
+            status: 'completed',
+            dueDate: '2024-06-01'
+        },
+    ]
+    const projects = [{id: 1, name: '主应用'}, {id: 2, name: '流程引擎'}]
+
+    return (
+        <div style={{padding: 20}}>
+            <h1>Task 组件库 Dev</h1>
+            <h2>TaskCard 示例</h2>
+            <TaskCard task={tasks[0]} onEdit={(t) => console.log('edit', t)}
+                      onComplete={(t) => console.log('complete', t)}/>
+
+            <h2>TaskTable 示例</h2>
+            <TaskTable
+                dataSource={tasks}
+                loading={false}
+                onEdit={(t) => console.log('edit', t)}
+                onDelete={(t) => console.log('delete', t)}
+                onComplete={(t) => console.log('complete', t)}
+            />
+
+            <h2>ProjectSelect 示例</h2>
+            <ProjectSelect projects={projects} onChange={(v) => console.log('select', v)}/>
+        </div>
+    )
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App/>)

package/src/index.js

@@ -0,0 +1,6 @@
+/**
+ * Task 组件库 - 导出所有可复用组件
+ */
+export {default as TaskCard} from './components/TaskCard'
+export {default as TaskTable} from './components/TaskTable'
+export {default as ProjectSelect} from './components/ProjectSelect'