feat:svg添加成功

This commit is contained in:
1708-huayu 2025-06-11 18:33:27 +08:00
parent ec3bb0cdef
commit bad15eb312
8 changed files with 126 additions and 93 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 868 KiB

File diff suppressed because one or more lines are too long

View File

@ -20,6 +20,7 @@ export default function RootLayout({
<head>
<title></title>
<link rel="icon" href="/favicon.ico"/>
<script src="/static/iconfont.js"></script>
</head>
<body style={{margin: 0}}>{children}</body>
</html>

View File

@ -6,7 +6,14 @@
padding: 6rem;
min-height: 100vh;
}
.icon {
/* em 当前元素的 font-size 值,如果元素没有显式设置 font-size则继承父元素的 font-size。 控制与字体大小相关的属性*/
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.description {
display: inherit;
justify-content: inherit;
@ -22,6 +29,7 @@
display: flex;
justify-content: center;
align-items: center;
/* 始终基于根字体,更稳定,实现全局尺寸控制(避免嵌套问题)*/
gap: 0.5rem;
}

View File

@ -15,4 +15,7 @@ input[type='number']::-webkit-inner-spin-button {
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
{
font-size: 16px;
}

View File

@ -1,3 +1,17 @@
.ant-select-selection-overflow-item-suffix{
visibility: hidden;
}
.container{
padding: 0 20px;
display: flex;
/* 决定主轴方向 */
flex-direction: row;
/* 交叉轴对齐方式,垂直居中 */
align-items: center;
/* 主轴对齐方式,水平居中(可选) */
justify-content: space-between;
/* 是否换行*/
flex-wrap: wrap;
/* 多行时的垂直对齐 */
align-content: space-between;
}

View File

@ -31,89 +31,92 @@ export const TitleOperation: React.FC<TitleOperationProps> = ({
expectStartTimeParseResult[0] && expectStartTimeParseResult[0].value ? dayjs(expectStartTimeParseResult[0].value.toString()) : undefined,
expectStartTimeParseResult[1] && expectStartTimeParseResult[1].value ? dayjs(expectStartTimeParseResult[1].value.toString()) : undefined
];
return <Space style={{marginTop: 0, "height": "42px", "alignContent": "center"}}>
<DetailModelForm haveButton={true} open={false} operationId={OPERATION_BUTTON_TYPE.ADD}
description='添加主线任务' reloadData={refreshData}/>
{
!usePathname().startsWith("/task/project") &&
<Button type="primary" onClick={() => {
replace("/task/project");
// setCurrentPath("/task/project")
}}></Button>
}
{
!usePathname().startsWith("/task/four") &&
<Button type="primary" onClick={() => {
replace("/task/four");
// setCurrentPath("/task/four");
}}></Button>
}
{
!usePathname().startsWith("/task/calendar") &&
<Button type="primary" onClick={() => {
replace("/task/calendar");
// setCurrentPath("/task/project")
}}></Button>
}
{
/*日历需要状态*/
!usePathname().startsWith("/task/project") && <Fragment>
<span style={{whiteSpace: 'nowrap'}}>:</span>
<Select
mode="multiple"
allowClear
style={{minWidth: '100px'}}
placeholder="任务状态"
defaultValue={data.taskState.split(",")}
onChange={(value) => {
console.log('onChange')
setTaskState(value.join(','))
}}
options={taskStateList.map(item => {
return {label: item.name, value: item.code}
})}
/>
</Fragment>
}
{
/*四相线需要状态时间*/
usePathname().startsWith("/task/four") && <Fragment>
<span style={{whiteSpace: 'nowrap'}}>:</span>
<RangePicker
placeholder={['开始时间', '结束时间']}
defaultValue={defaultExpectStartTime}
allowEmpty={[true, true]}
onChange={(dates, dateStrings) => {
console.log('onChange:', dates, dateStrings);
if (!dates) {
setExpectedStartTime('')
return
}
let expectStartTimeList = [];
if (dates[0]) {
expectStartTimeList.push({
'name': "expectedStartTime",
'value': dates[0],
'operateType': ">="
});
} else {
expectStartTimeList.push(undefined)
}
if (dates[1]) {
expectStartTimeList.push({
'name': "expectedStartTime",
'value': dates[1].add(1, 'day'),
'operateType': "<"
})
} else {
expectStartTimeList.push(undefined)
}
setExpectedStartTime(JSON.stringify(expectStartTimeList))
}}
/>
</Fragment>
}
</Space>
return <div className="container">
<Space style={{marginTop: 0, "height": "42px", "alignContent": "center"}}>
<DetailModelForm haveButton={true} open={false} operationId={OPERATION_BUTTON_TYPE.ADD}
description='添加主线任务' reloadData={refreshData}/>
{
!usePathname().startsWith("/task/project") &&
<Button type="primary" onClick={() => {
replace("/task/project");
// setCurrentPath("/task/project")
}}></Button>
}
{
!usePathname().startsWith("/task/four") &&
<Button type="primary" onClick={() => {
replace("/task/four");
// setCurrentPath("/task/four");
}}></Button>
}
{
!usePathname().startsWith("/task/calendar") &&
<Button type="primary" onClick={() => {
replace("/task/calendar");
// setCurrentPath("/task/project")
}}></Button>
}
{
/*日历需要状态*/
!usePathname().startsWith("/task/project") && <Fragment>
<span style={{whiteSpace: 'nowrap'}}>:</span>
<Select
mode="multiple"
allowClear
style={{minWidth: '100px'}}
placeholder="任务状态"
defaultValue={data.taskState.split(",")}
onChange={(value) => {
console.log('onChange')
setTaskState(value.join(','))
}}
options={taskStateList.map(item => {
return {label: item.name, value: item.code}
})}
/>
</Fragment>
}
{
/*四相线需要状态时间*/
usePathname().startsWith("/task/four") && <Fragment>
<span style={{whiteSpace: 'nowrap'}}>:</span>
<RangePicker
placeholder={['开始时间', '结束时间']}
defaultValue={defaultExpectStartTime}
allowEmpty={[true, true]}
onChange={(dates, dateStrings) => {
console.log('onChange:', dates, dateStrings);
if (!dates) {
setExpectedStartTime('')
return
}
let expectStartTimeList = [];
if (dates[0]) {
expectStartTimeList.push({
'name': "expectedStartTime",
'value': dates[0],
'operateType': ">="
});
} else {
expectStartTimeList.push(undefined)
}
if (dates[1]) {
expectStartTimeList.push({
'name': "expectedStartTime",
'value': dates[1].add(1, 'day'),
'operateType': "<"
})
} else {
expectStartTimeList.push(undefined)
}
setExpectedStartTime(JSON.stringify(expectStartTimeList))
}}
/>
</Fragment>
}
</Space>
<svg style={{height: "32px", width: "32px", alignItems: "center"}} className="icon" aria-hidden="true">
<use xlinkHref="#icon-user__easyico"></use>
</svg>
</div>
}

View File

@ -6,7 +6,7 @@ import {
import type {ActionType, FormInstance, ProColumns, ProFormInstance} from '@ant-design/pro-components';
import {ProTable, TableDropdown} from '@ant-design/pro-components';
import {Button, DatePicker, Dropdown, Space, Switch, Tag, Tooltip} from 'antd';
import React, {useContext, useEffect, useRef} from 'react';
import React, {Fragment, useContext, useEffect, useRef} from 'react';
import {DataType} from "@/lib/definitions";
import {
getTaskTreeResult,
@ -21,6 +21,7 @@ import '@/ui/task/project/TreeTablePro.modules.css'
import {useSearchParams} from "next/navigation";
const TreeTablePro: React.FC = () => {
const actionRef = useRef<ActionType>();
const formRef = useRef<ProFormInstance>();
@ -33,12 +34,6 @@ const TreeTablePro: React.FC = () => {
const { RangePicker } = DatePicker;
console.log("TreeTablePro",useSearchParams().get('pid'))
const columns: ProColumns<DataType>[] = [
{
key:'code',
title: '任务编码',
dataIndex: 'code',
width: '10%',
},
{
key: 'name',
title: '任务名称',
@ -55,6 +50,14 @@ const TreeTablePro: React.FC = () => {
},
],
},
render:(_, record)=>{
return <Fragment>
<svg className="icon" aria-hidden="true">
<use xlinkHref="#icon-tuandui"></use>
</svg>
{record.name}
</Fragment>
}
},
{
key: 'description',