专案优化

This commit is contained in:
‘Liammcl’
2025-01-04 21:47:24 +08:00
parent a3860a1dd0
commit a9746b8ceb
3 changed files with 257 additions and 214 deletions

View File

@@ -11,8 +11,7 @@ import {
message, message,
Select, Select,
DatePicker, DatePicker,
Typography, Typography
Spin
} from 'antd'; } from 'antd';
import { import {
ArrowLeftOutlined, ArrowLeftOutlined,
@@ -259,7 +258,6 @@ export default function ProjectDetail() {
return ( return (
<div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2"> <div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2">
<Spin spinning={loading}>
<Card <Card
className="shadow-lg rounded-lg border-0" className="shadow-lg rounded-lg border-0"
title={ title={
@@ -431,7 +429,6 @@ export default function ProjectDetail() {
</Form> </Form>
</Card> </Card>
</Spin>
</div> </div>
); );
} }

View File

@@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Card, Table, Button, message, Popconfirm, Tag, Space, Select } from 'antd'; import { Card, Table, Button, message, Popconfirm, Tag, Space, Select, Tooltip } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons'; import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, ShareAltOutlined } from '@ant-design/icons';
import { useResources } from "@/hooks/resource/useResource"; import { useResources } from "@/hooks/resource/useResource";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { supabase } from "@/config/supabase"; import { supabase } from "@/config/supabase";
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useCopyToClipboard } from 'react-use';
const ProjectPage = () => { const ProjectPage = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -19,6 +20,7 @@ const ProjectPage = () => {
const [tasks, setTasks] = useState([]); const [tasks, setTasks] = useState([]);
const [loadingTasks, setLoadingTasks] = useState(false); const [loadingTasks, setLoadingTasks] = useState(false);
const [selectedTask, setSelectedTask] = useState(null); const [selectedTask, setSelectedTask] = useState(null);
const [state, copyToClipboard] = useCopyToClipboard();
const { const {
resources: projects, resources: projects,
@@ -164,7 +166,8 @@ const ProjectPage = () => {
title: "操作", title: "操作",
key: "action", key: "action",
fixed: "right", fixed: "right",
render: (_, record) => ( render: (_, record) => {
return (
<Space size={0} className="dark:text-gray-300"> <Space size={0} className="dark:text-gray-300">
<Button <Button
size="small" size="small"
@@ -175,6 +178,25 @@ const ProjectPage = () => {
> >
查看 查看
</Button> </Button>
<Tooltip title="复制查看链接">
<Button
size="small"
type="link"
icon={<ShareAltOutlined />}
onClick={() => {
const viewUrl = `${window.location.origin}/company/projectView/${record.id}`;
copyToClipboard(viewUrl);
if (!state.error) {
message.success('链接已复制到剪贴板');
} else {
message.error('复制失败,请手动复制');
}
}}
className="dark:text-gray-300 dark:hover:text-blue-400"
>
分享
</Button>
</Tooltip>
<Button <Button
size="small" size="small"
type="link" type="link"
@@ -203,7 +225,8 @@ const ProjectPage = () => {
</Button> </Button>
</Popconfirm> </Popconfirm>
</Space> </Space>
), );
},
}, },
]; ];

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import { supabase } from "@/config/supabase"; import { supabase } from "@/config/supabase";
import { Spin, Tag, Empty, Button, Modal, Form, Input, Collapse, message, Upload,Tabs, Select, Divider } from 'antd'; import { Spin, Tag, Empty, Button, Modal, Form, Input, Collapse, message, Upload,Tabs, Select, Divider } from 'antd';
import { PlusOutlined, FolderOpenOutlined, ClockCircleOutlined, InboxOutlined } from '@ant-design/icons'; import { PlusOutlined, FolderOpenOutlined, ClockCircleOutlined, InboxOutlined } from '@ant-design/icons';
@@ -8,6 +8,7 @@ import {supabaseService}from '@/hooks/supabaseService'
const type="project" const type="project"
export default function ProjectInfo() { export default function ProjectInfo() {
const { id } = useParams(); const { id } = useParams();
const navigate = useNavigate();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [projectData, setProjectData] = useState(null); const [projectData, setProjectData] = useState(null);
const [form] = Form.useForm(); const [form] = Form.useForm();
@@ -496,7 +497,10 @@ export default function ProjectInfo() {
<Input.TextArea rows={4} placeholder="请输入资源描述" /> <Input.TextArea rows={4} placeholder="请输入资源描述" />
</Form.Item> </Form.Item>
<Form.Item className="mb-0 flex justify-end gap-3"> <Form.Item >
<div className="mb-0 flex justify-end w-full gap-3">
<Button <Button
onClick={() => { onClick={() => {
setIsModalVisible(false); setIsModalVisible(false);
@@ -508,23 +512,42 @@ export default function ProjectInfo() {
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
确定 确定
</Button> </Button>
</div>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
); );
// 加载状态展示
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center min-h-screen"> <div className="min-h-screen bg-gray-50/40 flex items-center justify-center">
<Spin tip="加载中..." /> <div className="text-center">
<Spin size="large" />
<div className="mt-4 text-gray-500">加载项目信息中...</div>
</div>
</div> </div>
); );
} }
if (!projectData) { // 无项目数据状态(包括无 ID 和未找到项目)
if (!projectData || !id) {
return ( return (
<div className="flex items-center justify-center min-h-screen"> <div className="min-h-screen bg-gray-50/40 flex items-center justify-center">
<Empty description="未找到项目信息" /> <Empty
description={
<div className="text-gray-500">
<p className="mb-4">未找到项目信息</p>
<Button
onClick={() => navigate(-1)}
className="bg-blue-50 text-blue-600 hover:bg-blue-100 border-none
transition-colors duration-200"
>
返回上一页
</Button>
</div>
}
/>
</div> </div>
); );
} }