perf(style): codex-skills/cowa-admin-list-ui
This commit is contained in:
zhangheng
@@ -3,24 +3,20 @@
|
||||
import { getPersonProjectDashBoard } from "@/components/label/api/project"
|
||||
import { Project } from "@/components/label/api/project/typing"
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Group,
|
||||
Modal,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core"
|
||||
SettingDataTable,
|
||||
SettingListHeader,
|
||||
} from "@/components/setting/PageSurface"
|
||||
import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core"
|
||||
import { DatePickerInput, type DatesRangeValue } from "@mantine/dates"
|
||||
import { notifications } from "@mantine/notifications"
|
||||
|
||||
import { IconRefresh } from "@tabler/icons-react"
|
||||
import { IconRefresh, IconSearch } from "@tabler/icons-react"
|
||||
import dayjs from "dayjs"
|
||||
import "dayjs/locale/zh-cn"
|
||||
import duration from "dayjs/plugin/duration"
|
||||
import { DataTable, DataTableColumn } from "mantine-datatable"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { DataTableColumn } from "mantine-datatable"
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import classes from "../page.module.css"
|
||||
|
||||
dayjs.extend(duration)
|
||||
|
||||
@@ -51,14 +47,13 @@ function createInitialFilters(): FilterFormRecord {
|
||||
const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
|
||||
|
||||
export default function PersonalProjectTable() {
|
||||
const router = useRouter()
|
||||
const [records, setRecords] = useState<
|
||||
Project.PersonProjectDashboardResponseItem[]
|
||||
>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(50)
|
||||
const [pageSize, setPageSize] = useState(10)
|
||||
const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
|
||||
() => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
|
||||
)
|
||||
@@ -123,12 +118,18 @@ export default function PersonalProjectTable() {
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
const next = createInitialFilters()
|
||||
setFilters(next)
|
||||
setForm(next)
|
||||
setPage(1)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (page > totalPages) setPage(totalPages)
|
||||
}, [page, totalPages])
|
||||
|
||||
const [currentRowId, setCurrentRowId] = useState<number>(0)
|
||||
|
||||
const openCustomPageSizeModal = useCallback(() => {
|
||||
setCustomPageSizeModalOpened(true)
|
||||
}, [])
|
||||
@@ -186,22 +187,8 @@ export default function PersonalProjectTable() {
|
||||
render: (record: Project.PersonProjectDashboardResponseItem) => {
|
||||
return (
|
||||
<Text
|
||||
px={6}
|
||||
variant="transparent"
|
||||
onClick={async () => {
|
||||
false && setCurrentRowId(record.project_id)
|
||||
false &&
|
||||
router.push(`/project/info/detail?id=${record.project_id}`)
|
||||
}}
|
||||
title={record.project_id.toString()}
|
||||
// c={"brand"}
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
maxWidth: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}>
|
||||
className={classes.ellipsisText}>
|
||||
{record.project_id}
|
||||
</Text>
|
||||
)
|
||||
@@ -215,13 +202,7 @@ export default function PersonalProjectTable() {
|
||||
return (
|
||||
<Text
|
||||
title={record.project_name ?? "-"}
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
maxWidth: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}>
|
||||
className={classes.ellipsisText}>
|
||||
{record.project_name ?? "-"}
|
||||
</Text>
|
||||
)
|
||||
@@ -235,13 +216,7 @@ export default function PersonalProjectTable() {
|
||||
return (
|
||||
<Text
|
||||
title={record.project_id.toString()}
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
maxWidth: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}>
|
||||
className={classes.ellipsisText}>
|
||||
{record.project_type ?? "-"}
|
||||
</Text>
|
||||
)
|
||||
@@ -252,7 +227,11 @@ export default function PersonalProjectTable() {
|
||||
title: "任务耗时",
|
||||
width: 140,
|
||||
render: (record: Project.PersonProjectDashboardResponseItem) => {
|
||||
return formatDurationSeconds(record.work_time)
|
||||
return (
|
||||
<Text className={classes.tableCellText}>
|
||||
{formatDurationSeconds(record.work_time)}
|
||||
</Text>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -260,29 +239,27 @@ export default function PersonalProjectTable() {
|
||||
title: "标注类别",
|
||||
width: 160,
|
||||
render: (record: Project.PersonProjectDashboardResponseItem) => {
|
||||
return record.project_label_type ?? "-"
|
||||
return (
|
||||
<Text className={classes.tableCellText}>
|
||||
{record.project_label_type ?? "-"}
|
||||
</Text>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
return column
|
||||
}, [router])
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Group
|
||||
gap="sm"
|
||||
h="100%"
|
||||
align="stretch"
|
||||
style={{ flexDirection: "column" }}>
|
||||
<Group justify="space-between" align="center">
|
||||
<Flex align={"center"} gap={8}>
|
||||
<Text fw={700} fz="lg">
|
||||
参与项目
|
||||
</Text>
|
||||
<Stack className={classes.dashboardSection}>
|
||||
<SettingListHeader title="参与项目" count={`共 ${totalItems} 条记录`} />
|
||||
<div className={classes.dashboardFilterBar}>
|
||||
<div className={classes.dashboardFilterField}>
|
||||
<Text className={classes.dashboardFilterLabel}>统计周期</Text>
|
||||
<div className={classes.dashboardFilterControl}>
|
||||
<DatePickerInput
|
||||
type="range"
|
||||
label=""
|
||||
placeholder="请选择时间范围，默认一周"
|
||||
miw={208}
|
||||
valueFormat="YYYY-MM-DD"
|
||||
locale="zh-cn"
|
||||
clearable
|
||||
@@ -294,40 +271,31 @@ export default function PersonalProjectTable() {
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.dashboardFilterActions}>
|
||||
<Button
|
||||
size={"xs"}
|
||||
fz={"sm"}
|
||||
fw={500}
|
||||
radius="sm"
|
||||
onClick={handleSearch}
|
||||
loading={loading}
|
||||
leftSection={<IconRefresh size={16} />}>
|
||||
更新
|
||||
variant="default"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
onClick={handleReset}>
|
||||
重置
|
||||
</Button>
|
||||
</Group>
|
||||
<Group
|
||||
gap={0}
|
||||
align="stretch"
|
||||
style={{ flex: 1, minHeight: 0, width: "100%" }}>
|
||||
<DataTable<Project.PersonProjectDashboardResponseItem>
|
||||
<Button
|
||||
color="#1874ff"
|
||||
leftSection={<IconSearch size={16} />}
|
||||
onClick={handleSearch}
|
||||
disabled={loading}>
|
||||
查询
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.dashboardTableArea}>
|
||||
<SettingDataTable<Project.PersonProjectDashboardResponseItem>
|
||||
width="100%"
|
||||
style={{ width: "100%" }}
|
||||
styles={{
|
||||
header: {
|
||||
color: "var(--mantine-color-grey-text)",
|
||||
backgroundColor: "var(--mantine-datatable-striped-color)",
|
||||
},
|
||||
}}
|
||||
withTableBorder
|
||||
withRowBorders
|
||||
minHeight={0}
|
||||
style={{ width: "100%", flex: 1 }}
|
||||
pinFirstColumn
|
||||
rowBackgroundColor={(record) => {
|
||||
if (record.project_id === currentRowId)
|
||||
return "var(--mantine-datatable-highlight-on-hover-color-light, var(--mantine-datatable-highlight-on-hover-color))"
|
||||
}}
|
||||
idAccessor="project_id"
|
||||
fetching={loading}
|
||||
scrollAreaProps={{ type: "auto" }}
|
||||
records={pageRecords}
|
||||
onRecordsPerPageChange={setPageSize}
|
||||
@@ -338,7 +306,10 @@ export default function PersonalProjectTable() {
|
||||
page={page}
|
||||
onPageChange={setPage}
|
||||
noRecordsText="暂无数据"
|
||||
recordsPerPageLabel="当前页数"
|
||||
recordsPerPageLabel="每页条数"
|
||||
paginationText={({ from, to, totalRecords }) =>
|
||||
`显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
|
||||
}
|
||||
renderPagination={({ Controls }) => (
|
||||
<Group
|
||||
justify="space-between"
|
||||
@@ -350,9 +321,8 @@ export default function PersonalProjectTable() {
|
||||
<Controls.Text />
|
||||
<Controls.PageSizeSelector />
|
||||
<Button
|
||||
variant="light"
|
||||
color="gray"
|
||||
size="xs"
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={openCustomPageSizeModal}>
|
||||
自定义每页条数
|
||||
</Button>
|
||||
@@ -361,7 +331,7 @@ export default function PersonalProjectTable() {
|
||||
</Group>
|
||||
)}
|
||||
/>
|
||||
</Group>
|
||||
</div>
|
||||
<Modal
|
||||
opened={customPageSizeModalOpened}
|
||||
onClose={closeCustomPageSizeModal}
|
||||
@@ -382,10 +352,12 @@ export default function PersonalProjectTable() {
|
||||
<Button variant="default" onClick={closeCustomPageSizeModal}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddCustomPageSize}>添加</Button>
|
||||
<Button color="#1874ff" onClick={handleAddCustomPageSize}>
|
||||
添加
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Group>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,13 +2,17 @@
|
||||
|
||||
import { getUserTaskList } from "@/components/label/api/task"
|
||||
import { Task } from "@/components/label/api/task/typing"
|
||||
import TaskStatusTag from "@/components/label/components/TaskStatusTag"
|
||||
import {
|
||||
useBackUrlStore,
|
||||
usePermissionStore,
|
||||
} from "@/components/label/store/auth"
|
||||
import { TaskStatusEnum } from "@/components/label/utils/constants"
|
||||
import {
|
||||
Badge,
|
||||
SettingDataTable,
|
||||
SettingHeaderActions,
|
||||
SettingListHeader,
|
||||
} from "@/components/setting/PageSurface"
|
||||
import {
|
||||
Button,
|
||||
Group,
|
||||
Modal,
|
||||
@@ -19,25 +23,9 @@ import {
|
||||
} from "@mantine/core"
|
||||
import { notifications } from "@mantine/notifications"
|
||||
import { IconRefresh } from "@tabler/icons-react"
|
||||
import { DataTable, DataTableColumn } from "mantine-datatable"
|
||||
import { DataTableColumn } from "mantine-datatable"
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
|
||||
function getStatusColor(status?: number | null) {
|
||||
switch (status) {
|
||||
case 2:
|
||||
return "blue"
|
||||
case 4:
|
||||
return "yellow"
|
||||
case 6:
|
||||
return "orange"
|
||||
case 7:
|
||||
return "green"
|
||||
case 8:
|
||||
return "red"
|
||||
default:
|
||||
return "gray"
|
||||
}
|
||||
}
|
||||
import classes from "../page.module.css"
|
||||
|
||||
const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
|
||||
|
||||
@@ -46,7 +34,7 @@ export default function PersonalTaskTable() {
|
||||
const setBackProps = useBackUrlStore((s) => s.setBackProps)
|
||||
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(50)
|
||||
const [pageSize, setPageSize] = useState(10)
|
||||
const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
|
||||
() => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
|
||||
)
|
||||
@@ -148,13 +136,7 @@ export default function PersonalTaskTable() {
|
||||
return (
|
||||
<Text
|
||||
title={record.project_name ?? "-"}
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
maxWidth: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}>
|
||||
className={classes.ellipsisText}>
|
||||
{record.project_name ?? "-"}
|
||||
</Text>
|
||||
)
|
||||
@@ -167,8 +149,6 @@ export default function PersonalTaskTable() {
|
||||
render: (record: Task.SimpleTaskItem) => {
|
||||
return (
|
||||
<UnstyledButton
|
||||
px={6}
|
||||
variant="transparent"
|
||||
onClick={async () => {
|
||||
setCurrentRowId(record.id)
|
||||
if ([4, 5, 6, 7].includes(record.label_type)) {
|
||||
@@ -193,14 +173,7 @@ export default function PersonalTaskTable() {
|
||||
}
|
||||
}}
|
||||
title={record.id.toString()}
|
||||
c={"brand"}
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
maxWidth: "100%",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}>
|
||||
className={classes.tableLink}>
|
||||
{record.id}
|
||||
</UnstyledButton>
|
||||
)
|
||||
@@ -211,86 +184,84 @@ export default function PersonalTaskTable() {
|
||||
title: "对象数",
|
||||
width: 80,
|
||||
render: (record: Task.SimpleTaskItem) => {
|
||||
return <>{record.label_object_size?.object_size || "-"}</>
|
||||
return (
|
||||
<Text className={classes.tableCellText}>
|
||||
{record.label_object_size?.object_size || "-"}
|
||||
</Text>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessor: "label_status",
|
||||
title: "状态",
|
||||
width: 80,
|
||||
render: (record: Task.SimpleTaskItem) => {
|
||||
return (
|
||||
<Badge
|
||||
color={getStatusColor(record.label_status)}
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
padding: "2px 6px",
|
||||
}}>
|
||||
{TaskStatusEnum.get(record.label_status)}
|
||||
</Badge>
|
||||
)
|
||||
},
|
||||
width: 160,
|
||||
render: (record) => (
|
||||
<TaskStatusTag
|
||||
status={record.label_status}
|
||||
rejected={record.rejected}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "label_username",
|
||||
title: "标注员",
|
||||
width: 80,
|
||||
render: (record: Task.SimpleTaskItem) => (
|
||||
<Text className={classes.tableCellText}>
|
||||
{record.label_username || "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "review1_username",
|
||||
title: "审核员",
|
||||
width: 80,
|
||||
render: (record: Task.SimpleTaskItem) => (
|
||||
<Text className={classes.tableCellText}>
|
||||
{record.review1_username || "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "review2_username",
|
||||
title: "复审员",
|
||||
width: 80,
|
||||
render: (record: Task.SimpleTaskItem) => (
|
||||
<Text className={classes.tableCellText}>
|
||||
{record.review2_username || "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]
|
||||
return column
|
||||
}, [setBackProps])
|
||||
|
||||
return (
|
||||
<Group
|
||||
gap="sm"
|
||||
h="100%"
|
||||
align="stretch"
|
||||
style={{ flexDirection: "column" }}>
|
||||
<Group justify="space-between" align="center">
|
||||
<Text fw={700} fz="lg" style={{ marginBottom: 8 }}>
|
||||
我的任务
|
||||
</Text>
|
||||
<Stack className={classes.dashboardSection}>
|
||||
<SettingListHeader
|
||||
title="我的任务"
|
||||
count={`共 ${totalItems} 条记录`}
|
||||
actions={
|
||||
<SettingHeaderActions>
|
||||
<Button
|
||||
size={"xs"}
|
||||
fz={"sm"}
|
||||
fw={500}
|
||||
radius="sm"
|
||||
variant="default"
|
||||
onClick={resetData}
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
leftSection={<IconRefresh size={16} />}>
|
||||
更新
|
||||
刷新
|
||||
</Button>
|
||||
</Group>
|
||||
<Group
|
||||
gap={0}
|
||||
align="stretch"
|
||||
style={{ flex: 1, minHeight: 0, width: "100%" }}>
|
||||
<DataTable<Task.SimpleTaskItem>
|
||||
</SettingHeaderActions>
|
||||
}
|
||||
/>
|
||||
<div className={classes.dashboardTableArea}>
|
||||
<SettingDataTable<Task.SimpleTaskItem>
|
||||
width="100%"
|
||||
style={{ width: "100%" }}
|
||||
styles={{
|
||||
header: {
|
||||
color: "var(--mantine-color-grey-text)",
|
||||
backgroundColor: "var(--mantine-datatable-striped-color)",
|
||||
},
|
||||
}}
|
||||
withTableBorder
|
||||
withRowBorders
|
||||
minHeight={0}
|
||||
style={{ width: "100%", flex: 1 }}
|
||||
pinFirstColumn
|
||||
pinLastColumn
|
||||
fetching={loading}
|
||||
rowBackgroundColor={({ id }) => {
|
||||
if (id === currentRowId)
|
||||
return "var(--mantine-datatable-highlight-on-hover-color-light, var(--mantine-datatable-highlight-on-hover-color))"
|
||||
if (id === currentRowId) return "#F7FBFF"
|
||||
}}
|
||||
scrollAreaProps={{ type: "auto" }}
|
||||
records={records}
|
||||
@@ -302,7 +273,10 @@ export default function PersonalTaskTable() {
|
||||
page={page}
|
||||
onPageChange={setPage}
|
||||
noRecordsText="暂无数据"
|
||||
recordsPerPageLabel="当前页数"
|
||||
recordsPerPageLabel="每页条数"
|
||||
paginationText={({ from, to, totalRecords }) =>
|
||||
`显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
|
||||
}
|
||||
renderPagination={({ Controls }) => (
|
||||
<Group
|
||||
justify="space-between"
|
||||
@@ -314,9 +288,8 @@ export default function PersonalTaskTable() {
|
||||
<Controls.Text />
|
||||
<Controls.PageSizeSelector />
|
||||
<Button
|
||||
variant="light"
|
||||
color="gray"
|
||||
size="xs"
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={openCustomPageSizeModal}>
|
||||
自定义每页条数
|
||||
</Button>
|
||||
@@ -325,7 +298,7 @@ export default function PersonalTaskTable() {
|
||||
</Group>
|
||||
)}
|
||||
/>
|
||||
</Group>
|
||||
</div>
|
||||
<Modal
|
||||
opened={customPageSizeModalOpened}
|
||||
onClose={closeCustomPageSizeModal}
|
||||
@@ -346,10 +319,12 @@ export default function PersonalTaskTable() {
|
||||
<Button variant="default" onClick={closeCustomPageSizeModal}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddCustomPageSize}>添加</Button>
|
||||
<Button color="#1874ff" onClick={handleAddCustomPageSize}>
|
||||
添加
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Group>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
328
app/person/dashboard/page.module.css
Normal file
328
app/person/dashboard/page.module.css
Normal file
@@ -0,0 +1,328 @@
|
||||
.pageIntro {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: #86909c;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.breadcrumbCurrent {
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.summaryGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 180px repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.summaryDateCell,
|
||||
.summaryMetricCell {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 116px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.summaryDateCell,
|
||||
.summaryMetricCell:not(:last-child) {
|
||||
border-right: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
.summaryDateCell {
|
||||
justify-content: center;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.summaryDateLabel,
|
||||
.summaryMetricLabel {
|
||||
color: #86909c;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.summaryDateValue {
|
||||
color: #1d2129;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.summaryDateMeta {
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.summaryMetricCell {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.summaryMetricValue {
|
||||
color: #1d2129;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.summaryMetricMeta {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
background: #f7f8fa;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.summaryMetricMetaLabel {
|
||||
color: #86909c;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.summaryMetricMetaValue {
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.tableGrid {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dashboardPanel {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboardPanelBody {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dashboardSection {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dashboardTableArea {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboardFilterBar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px 16px;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
.dashboardFilterField {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dashboardFilterLabel {
|
||||
flex: 0 0 80px;
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dashboardFilterControl {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dashboardFilterControl :global(.mantine-InputWrapper-root) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboardFilterBar :global(.mantine-Input-input),
|
||||
.dashboardFilterBar :global(.mantine-DateInput-input) {
|
||||
min-height: 32px;
|
||||
border-color: #e5e6eb;
|
||||
border-radius: 4px;
|
||||
background: #f7f8fa;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.dashboardFilterBar :global(.mantine-Input-input::placeholder),
|
||||
.dashboardFilterBar :global(.mantine-DateInput-input::placeholder) {
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.dashboardFilterBar :global(.mantine-Input-input:focus),
|
||||
.dashboardFilterBar :global(.mantine-DateInput-input:focus) {
|
||||
border-color: #1874ff;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
|
||||
}
|
||||
|
||||
.dashboardFilterBar :global(.mantine-Input-section),
|
||||
.dashboardFilterBar :global(.mantine-DateInput-section) {
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.dashboardFilterActions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dashboardFilterActions :global(.mantine-Button-root) {
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
padding-inline: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dashboardFilterActions :global(.mantine-Button-root[data-variant="filled"]) {
|
||||
--button-bg: #1874ff;
|
||||
--button-hover: #0f6ae8;
|
||||
--button-color: #ffffff;
|
||||
--button-bd: transparent;
|
||||
background: #1874ff !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.dashboardFilterActions
|
||||
:global(.mantine-Button-root[data-variant="filled"]:hover) {
|
||||
background: #0f6ae8 !important;
|
||||
}
|
||||
|
||||
.dashboardFilterActions :global(.mantine-Button-root[data-variant="default"]) {
|
||||
border-color: #e5e6eb;
|
||||
background: #ffffff;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.tableLink {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #1874ff;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tableLink:disabled {
|
||||
color: #c9cdd4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tableCellText {
|
||||
display: block;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ellipsisText {
|
||||
display: block;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.statusBadge {
|
||||
min-height: 24px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.summaryGrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.summaryMetricCell:nth-child(2) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.summaryDateCell,
|
||||
.summaryMetricCell {
|
||||
border-bottom: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
.summaryMetricCell:nth-last-child(-n + 2) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tableGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.summaryGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.summaryDateCell,
|
||||
.summaryMetricCell {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.summaryMetricCell:not(:last-child) {
|
||||
border-bottom: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
.dashboardFilterBar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dashboardFilterField {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dashboardFilterLabel {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.dashboardFilterActions {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
@@ -2,27 +2,17 @@
|
||||
|
||||
import { getCurrentPersonData } from "@/components/label/api/project"
|
||||
import {
|
||||
BackgroundImage,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core"
|
||||
SettingContentPanel,
|
||||
SettingPage,
|
||||
SettingPanel,
|
||||
} from "@/components/setting/PageSurface"
|
||||
import { Stack, Text } from "@mantine/core"
|
||||
import dayjs from "dayjs"
|
||||
import duration from "dayjs/plugin/duration"
|
||||
import { JSX, useEffect, useMemo, useState } from "react"
|
||||
import { DataIcon, HourIcon, ReviewIcon } from "./components/Icon"
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import PersonalProjectTable from "./components/PersonalProjectTable"
|
||||
import PersonalTaskTable from "./components/PersonalTaskTable"
|
||||
import DataImage from "./resource/images/data.png"
|
||||
import DataLogoImage from "./resource/images/data_logo.png"
|
||||
import HourImage from "./resource/images/hour.png"
|
||||
import HourLogoImage from "./resource/images/hour_logo.png"
|
||||
import ReviewImage from "./resource/images/review.png"
|
||||
import ReviewLogoImage from "./resource/images/review_logo.png"
|
||||
import classes from "./page.module.css"
|
||||
|
||||
dayjs.extend(duration)
|
||||
|
||||
@@ -56,95 +46,6 @@ function formatDurationSeconds(seconds?: number | null) {
|
||||
return "-"
|
||||
}
|
||||
|
||||
function StatCard(props: {
|
||||
title: string
|
||||
timeText: string
|
||||
sizeTitle: string
|
||||
sizeValue: number
|
||||
sizeColor: string
|
||||
background: string
|
||||
backgroundLogo: string
|
||||
Icon: () => JSX.Element
|
||||
}) {
|
||||
const {
|
||||
title,
|
||||
timeText,
|
||||
sizeTitle,
|
||||
sizeValue,
|
||||
sizeColor,
|
||||
background,
|
||||
backgroundLogo,
|
||||
Icon,
|
||||
} = props
|
||||
return (
|
||||
<Paper
|
||||
shadow="xs"
|
||||
p="md"
|
||||
withBorder
|
||||
radius={"md"}
|
||||
pos="relative"
|
||||
style={{
|
||||
borderColor:
|
||||
"light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
}}>
|
||||
<BackgroundImage
|
||||
src={background}
|
||||
w="100%"
|
||||
h="100%"
|
||||
style={{ position: "absolute", top: 0, left: 0, zIndex: 0 }}
|
||||
/>
|
||||
<BackgroundImage
|
||||
src={backgroundLogo}
|
||||
w={108}
|
||||
h={108}
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
right: 8,
|
||||
zIndex: 0,
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
/>
|
||||
<Group gap="md" align="flex-start" style={{ flex: 1, zIndex: 1 }}>
|
||||
<div style={{ width: 32 }}>
|
||||
<Icon />
|
||||
</div>
|
||||
<Stack gap={6} style={{ flex: 1 }}>
|
||||
<div>
|
||||
<Text fw={700} fz="lg" lh={1.4}>
|
||||
{title}
|
||||
</Text>
|
||||
<Title order={3} style={{ marginTop: 6 }}>
|
||||
{timeText}
|
||||
</Title>
|
||||
</div>
|
||||
<Stack gap={6}>
|
||||
<Text fw={700} fz="lg">
|
||||
{sizeTitle}
|
||||
</Text>
|
||||
<Paper
|
||||
shadow="xs"
|
||||
px={8}
|
||||
py={4}
|
||||
radius="sm"
|
||||
style={{
|
||||
background: "#fff",
|
||||
width: "fit-content",
|
||||
color: sizeColor,
|
||||
fontWeight: 700,
|
||||
fontSize: 16,
|
||||
}}>
|
||||
{sizeValue}
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
export default function PersonDashboardPage() {
|
||||
const [data, setData] = useState<{
|
||||
label_data_size: number
|
||||
@@ -173,116 +74,86 @@ export default function PersonDashboardPage() {
|
||||
}
|
||||
}, [data])
|
||||
|
||||
const summaryItems = useMemo(
|
||||
() => [
|
||||
{
|
||||
title: "标注工时",
|
||||
value: dataText.label,
|
||||
metaLabel: "标注数据量",
|
||||
metaValue: data?.label_data_size ?? 0,
|
||||
},
|
||||
{
|
||||
title: "审核工时",
|
||||
value: dataText.review1,
|
||||
metaLabel: "审核数据量",
|
||||
metaValue: data?.review1_data_size ?? 0,
|
||||
},
|
||||
{
|
||||
title: "复审工时",
|
||||
value: dataText.review2,
|
||||
metaLabel: "复审数据量",
|
||||
metaValue: data?.review2_data_size ?? 0,
|
||||
},
|
||||
],
|
||||
[
|
||||
data?.label_data_size,
|
||||
data?.review1_data_size,
|
||||
data?.review2_data_size,
|
||||
dataText,
|
||||
]
|
||||
)
|
||||
|
||||
return (
|
||||
<Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
|
||||
<Group align="stretch" gap="md" wrap="nowrap" h={180}>
|
||||
<Paper
|
||||
shadow="xs"
|
||||
withBorder
|
||||
p="md"
|
||||
style={{
|
||||
width: 160,
|
||||
borderColor:
|
||||
"light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 16,
|
||||
}}>
|
||||
<Text fz="lg" fw={700}>
|
||||
今日
|
||||
<SettingPage>
|
||||
<Stack className={classes.pageIntro}>
|
||||
<Text className={classes.breadcrumb}>
|
||||
个人工作台 /{" "}
|
||||
<span className={classes.breadcrumbCurrent}>个人看板</span>
|
||||
</Text>
|
||||
<Center>
|
||||
<Paper
|
||||
radius="md"
|
||||
p="sm"
|
||||
style={{
|
||||
width: 72,
|
||||
height: 72,
|
||||
background: "rgba(0, 161, 255, 0.08)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 4,
|
||||
}}>
|
||||
<Text fz={24} fw={700} lh={1}>
|
||||
</Stack>
|
||||
|
||||
<SettingPanel p={0}>
|
||||
<div className={classes.summaryGrid}>
|
||||
<div className={classes.summaryDateCell}>
|
||||
<Text className={classes.summaryDateLabel}>今日</Text>
|
||||
<Text className={classes.summaryDateValue}>
|
||||
{dayjs().format("DD")}
|
||||
</Text>
|
||||
<Text fz={16}>{monthText(dayjs().format("MM"))}</Text>
|
||||
</Paper>
|
||||
</Center>
|
||||
</Paper>
|
||||
<Text className={classes.summaryDateMeta}>
|
||||
{monthText(dayjs().format("MM"))} · {dayjs().format("YYYY")}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md" style={{ flex: 1 }}>
|
||||
<StatCard
|
||||
title="标注工时"
|
||||
timeText={dataText.label}
|
||||
sizeTitle="标注数据量"
|
||||
sizeValue={data?.label_data_size ?? 0}
|
||||
sizeColor="#E03131"
|
||||
background={DataImage.src}
|
||||
backgroundLogo={DataLogoImage.src}
|
||||
Icon={DataIcon}
|
||||
/>
|
||||
<StatCard
|
||||
title="审核工时"
|
||||
timeText={dataText.review1}
|
||||
sizeTitle="审核数据量"
|
||||
sizeValue={data?.review1_data_size ?? 0}
|
||||
sizeColor="#2F9E44"
|
||||
background={HourImage.src}
|
||||
backgroundLogo={HourLogoImage.src}
|
||||
Icon={HourIcon}
|
||||
/>
|
||||
<StatCard
|
||||
title="复审工时"
|
||||
timeText={dataText.review2}
|
||||
sizeTitle="复审数据量"
|
||||
sizeValue={data?.review2_data_size ?? 0}
|
||||
sizeColor="#F08C00"
|
||||
background={ReviewImage.src}
|
||||
backgroundLogo={ReviewLogoImage.src}
|
||||
Icon={ReviewIcon}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Group>
|
||||
{summaryItems.map((item) => (
|
||||
<div key={item.title} className={classes.summaryMetricCell}>
|
||||
<Text className={classes.summaryMetricLabel}>{item.title}</Text>
|
||||
<Text className={classes.summaryMetricValue}>{item.value}</Text>
|
||||
<div className={classes.summaryMetricMeta}>
|
||||
<Text className={classes.summaryMetricMetaLabel}>
|
||||
{item.metaLabel}
|
||||
</Text>
|
||||
<Text className={classes.summaryMetricMetaValue}>
|
||||
{item.metaValue}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SettingPanel>
|
||||
|
||||
<SimpleGrid
|
||||
cols={{ base: 1, lg: 2 }}
|
||||
spacing="md"
|
||||
style={{ flex: 1, maxHeight: "calc(100% - 194px)" }}>
|
||||
<Paper
|
||||
shadow="xs"
|
||||
withBorder
|
||||
p="md"
|
||||
style={{
|
||||
borderColor:
|
||||
"light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
minHeight: 0,
|
||||
}}>
|
||||
<div style={{ flex: 1, minHeight: 0 }}>
|
||||
<div className={classes.tableGrid}>
|
||||
<SettingContentPanel p={0} className={classes.dashboardPanel}>
|
||||
<div className={classes.dashboardPanelBody}>
|
||||
<PersonalTaskTable />
|
||||
</div>
|
||||
</Paper>
|
||||
</SettingContentPanel>
|
||||
|
||||
<Paper
|
||||
shadow="xs"
|
||||
withBorder
|
||||
p="md"
|
||||
style={{
|
||||
borderColor:
|
||||
"light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
minHeight: 0,
|
||||
}}>
|
||||
<div style={{ flex: 1, minHeight: 0 }}>
|
||||
<SettingContentPanel p={0} className={classes.dashboardPanel}>
|
||||
<div className={classes.dashboardPanelBody}>
|
||||
<PersonalProjectTable />
|
||||
</div>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</SettingContentPanel>
|
||||
</div>
|
||||
</SettingPage>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,81 +1,116 @@
|
||||
.modalContent {
|
||||
border-radius: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
|
||||
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
padding: 20px 24px 0;
|
||||
padding: 16px 20px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.modalTitle {
|
||||
color: #1f2329;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #1d2129;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
padding: 16px 24px 24px;
|
||||
background: #f8fafc;
|
||||
padding: 16px 20px 20px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.formSurface {
|
||||
border-color: #e6ebf2;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
|
||||
border-color: #e5e6eb;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-InputWrapper-label) {
|
||||
color: #1f2329;
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
margin-bottom: 6px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-input),
|
||||
.formPanel :global(.mantine-DateInput-input),
|
||||
.formPanel :global(.mantine-Select-input),
|
||||
.formPanel :global(.mantine-NumberInput-input),
|
||||
.formPanel :global(.mantine-Textarea-input) {
|
||||
min-height: 36px;
|
||||
border-color: #d0d5dd;
|
||||
background: #ffffff;
|
||||
color: #31373d;
|
||||
min-height: 32px;
|
||||
border-color: #e5e6eb;
|
||||
border-radius: 4px;
|
||||
background: #f7f8fa;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
background-color 0.15s ease;
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-input::placeholder),
|
||||
.formPanel :global(.mantine-DateInput-input::placeholder),
|
||||
.formPanel :global(.mantine-Select-input::placeholder),
|
||||
.formPanel :global(.mantine-NumberInput-input::placeholder),
|
||||
.formPanel :global(.mantine-Textarea-input::placeholder) {
|
||||
color: #98a2b3;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-input:focus),
|
||||
.formPanel :global(.mantine-DateInput-input:focus),
|
||||
.formPanel :global(.mantine-Select-input:focus),
|
||||
.formPanel :global(.mantine-NumberInput-input:focus),
|
||||
.formPanel :global(.mantine-Textarea-input:focus) {
|
||||
border-color: #69c0ff;
|
||||
box-shadow: 0 0 0 3px rgba(105, 192, 255, 0.14);
|
||||
border-color: #1874ff;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-input[readonly]),
|
||||
.formPanel :global(.mantine-NumberInput-input[readonly]) {
|
||||
background: #f8fafc;
|
||||
color: #667085;
|
||||
.formPanel :global(.mantine-DateInput-input[readonly]),
|
||||
.formPanel :global(.mantine-NumberInput-input[readonly]),
|
||||
.formPanel :global(.mantine-Textarea-input[readonly]) {
|
||||
background: #f7f8fa;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Input-section),
|
||||
.formPanel :global(.mantine-DateInput-section),
|
||||
.formPanel :global(.mantine-Select-section),
|
||||
.formPanel :global(.mantine-NumberInput-section) {
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Button-root) {
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
padding-inline: 14px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
padding-inline: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Button-root[data-variant="filled"]) {
|
||||
--button-bg: #1874ff;
|
||||
--button-hover: #0f6ae8;
|
||||
--button-color: #ffffff;
|
||||
--button-bd: transparent;
|
||||
background: #1874ff !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Button-root[data-variant="filled"]:hover) {
|
||||
background: #0f6ae8 !important;
|
||||
}
|
||||
|
||||
.formPanel :global(.mantine-Button-root[data-variant="default"]) {
|
||||
border-color: #e5e6eb;
|
||||
background: #ffffff;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
@@ -358,12 +358,7 @@ export default function DailyReportModal(props: {
|
||||
}}
|
||||
closeOnClickOutside={false}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Paper
|
||||
withBorder
|
||||
radius="lg"
|
||||
p="md"
|
||||
shadow="xs"
|
||||
className={classes.formSurface}>
|
||||
<Paper withBorder radius="sm" p="md" className={classes.formSurface}>
|
||||
<Stack gap="md" className={classes.formPanel}>
|
||||
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
|
||||
<TextInput label="姓名" value={form.values.user_name} readOnly />
|
||||
@@ -547,7 +542,9 @@ export default function DailyReportModal(props: {
|
||||
}}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="submit">提交</Button>
|
||||
<Button type="submit" color="#1874ff">
|
||||
提交
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
177
app/person/report/page.module.css
Normal file
177
app/person/report/page.module.css
Normal file
@@ -0,0 +1,177 @@
|
||||
.pageIntro {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: #86909c;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.breadcrumbCurrent {
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.filterTopRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filterExpandedGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px 20px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
.filterField {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
flex: 0 0 80px;
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.filterControl {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filterControl :global(.mantine-InputWrapper-root) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filterControl :global(.mantine-PillsInput-root) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filterControl :global(.mantine-InputWrapper-label) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filterActions {
|
||||
display: inline-flex;
|
||||
justify-self: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.collapseToggle {
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
min-width: auto;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.contentPanelBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tableActionBar {
|
||||
padding: 4px 16px 0;
|
||||
}
|
||||
|
||||
.operationGroup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.operationLink {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #1874ff;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.operationLinkDanger {
|
||||
color: #f53f3f;
|
||||
}
|
||||
|
||||
.operationLinkDisabled {
|
||||
color: #c9cdd4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.operationDivider {
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: #e5e6eb;
|
||||
}
|
||||
|
||||
.statusBadge {
|
||||
min-height: 24px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.statusPositive {
|
||||
background: #e8ffea;
|
||||
color: #00b42a;
|
||||
}
|
||||
|
||||
.statusNegative {
|
||||
background: #ffece8;
|
||||
color: #f53f3f;
|
||||
}
|
||||
|
||||
.ellipsisText {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filterTopRow {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.filterActions {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.filterExpandedGrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.filterTopRow,
|
||||
.filterExpandedGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.filterField {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
@@ -17,7 +17,6 @@ import {
|
||||
SettingPage,
|
||||
} from "@/components/setting/PageSurface"
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Button,
|
||||
Collapse,
|
||||
@@ -25,7 +24,6 @@ import {
|
||||
Modal,
|
||||
MultiSelect,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
@@ -35,11 +33,9 @@ import { notifications } from "@mantine/notifications"
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconChevronUp,
|
||||
IconPencil,
|
||||
IconPlus,
|
||||
IconRefresh,
|
||||
IconSearch,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react"
|
||||
|
||||
import { DateInput } from "@mantine/dates"
|
||||
@@ -58,6 +54,7 @@ import {
|
||||
setTypeOpts,
|
||||
workTypeOpts,
|
||||
} from "./config"
|
||||
import classes from "./page.module.css"
|
||||
|
||||
type LeaderTreeNode = {
|
||||
title?: string
|
||||
@@ -114,6 +111,21 @@ function toNumber(value?: string) {
|
||||
|
||||
const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
|
||||
|
||||
function InlineFilterField({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className={classes.filterField}>
|
||||
<Text className={classes.filterLabel}>{label}</Text>
|
||||
<div className={classes.filterControl}>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function PersonReportPage() {
|
||||
const treeData = useAllUserStore((s) => s.treeData)
|
||||
|
||||
@@ -342,12 +354,8 @@ export default function PersonReportPage() {
|
||||
render: (record) => (
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
maxWidth: 220,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}>
|
||||
className={classes.ellipsisText}
|
||||
style={{ maxWidth: 220 }}>
|
||||
{record.project_name ?? "-"}
|
||||
</Text>
|
||||
),
|
||||
@@ -358,9 +366,19 @@ export default function PersonReportPage() {
|
||||
width: 110,
|
||||
render: (record) => {
|
||||
if (record.performance_accounting === true)
|
||||
return <Badge color="green">{performanceTextMap.get(true)}</Badge>
|
||||
return (
|
||||
<Badge
|
||||
className={`${classes.statusBadge} ${classes.statusPositive}`}>
|
||||
{performanceTextMap.get(true)}
|
||||
</Badge>
|
||||
)
|
||||
if (record.performance_accounting === false)
|
||||
return <Badge color="gray">{performanceTextMap.get(false)}</Badge>
|
||||
return (
|
||||
<Badge
|
||||
className={`${classes.statusBadge} ${classes.statusNegative}`}>
|
||||
{performanceTextMap.get(false)}
|
||||
</Badge>
|
||||
)
|
||||
return "-"
|
||||
},
|
||||
},
|
||||
@@ -419,12 +437,8 @@ export default function PersonReportPage() {
|
||||
render: (record) => (
|
||||
<Text
|
||||
size="sm"
|
||||
style={{
|
||||
maxWidth: 200,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}>
|
||||
className={classes.ellipsisText}
|
||||
style={{ maxWidth: 200 }}>
|
||||
{record.remarks ?? "-"}
|
||||
</Text>
|
||||
),
|
||||
@@ -437,21 +451,27 @@ export default function PersonReportPage() {
|
||||
render: (record) => {
|
||||
const disabled = !!record.lock_status
|
||||
return (
|
||||
<Group gap={6} justify="center" wrap="nowrap">
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="blue"
|
||||
<Group gap={0} justify="center" wrap="nowrap">
|
||||
<div className={classes.operationGroup}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${classes.operationLink} ${
|
||||
disabled ? classes.operationLinkDisabled : ""
|
||||
}`}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (disabled) return
|
||||
setEditingRecord(record)
|
||||
setModalOpened(true)
|
||||
}}>
|
||||
<IconPencil size={16} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="red"
|
||||
编辑
|
||||
</button>
|
||||
<span className={classes.operationDivider} />
|
||||
<button
|
||||
type="button"
|
||||
className={`${classes.operationLink} ${classes.operationLinkDanger} ${
|
||||
disabled ? classes.operationLinkDisabled : ""
|
||||
}`}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (disabled || !record.id) return
|
||||
@@ -476,8 +496,9 @@ export default function PersonReportPage() {
|
||||
},
|
||||
})
|
||||
}}>
|
||||
<IconTrash size={16} />
|
||||
</ActionIcon>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</Group>
|
||||
)
|
||||
},
|
||||
@@ -509,13 +530,55 @@ export default function PersonReportPage() {
|
||||
|
||||
return (
|
||||
<SettingPage>
|
||||
<Stack className={classes.pageIntro}>
|
||||
<Text className={classes.breadcrumb}>
|
||||
个人工作台 / 日报管理 /{" "}
|
||||
<span className={classes.breadcrumbCurrent}>我的日报</span>
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<SettingFilterPanel>
|
||||
<Stack gap="sm">
|
||||
<Group justify="space-between" wrap="wrap" gap="sm">
|
||||
<Group gap="xs">
|
||||
<Text fw={700}>筛选条件</Text>
|
||||
<Stack gap={12}>
|
||||
<div className={classes.filterTopRow}>
|
||||
<InlineFilterField label="开始日期">
|
||||
<DateInput
|
||||
locale="zh-cn"
|
||||
value={filters.date_start}
|
||||
onChange={(e) =>
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
date_start: dayjs(e).format("YYYY-MM-DD"),
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="结束日期">
|
||||
<DateInput
|
||||
locale="zh-cn"
|
||||
value={filters.date_end}
|
||||
onChange={(e) => {
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
date_end: dayjs(e).format("YYYY-MM-DD"),
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="项目名称">
|
||||
<MultiSelect
|
||||
data={projectOptions}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择项目"
|
||||
value={filters.project_id}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, project_id: v }))}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
|
||||
<SettingFilterActions mt={0} className={classes.filterActions}>
|
||||
<Button
|
||||
variant="transparent"
|
||||
className={classes.collapseToggle}
|
||||
rightSection={
|
||||
searchExpanded ? (
|
||||
<IconChevronUp size={16} />
|
||||
@@ -526,9 +589,6 @@ export default function PersonReportPage() {
|
||||
onClick={() => setSearchExpanded((v) => !v)}>
|
||||
{searchExpanded ? "收起" : "展开"}
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<SettingFilterActions mt={0}>
|
||||
<Button
|
||||
variant="default"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
@@ -541,6 +601,7 @@ export default function PersonReportPage() {
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
color="#1874ff"
|
||||
leftSection={<IconSearch size={16} />}
|
||||
onClick={() => {
|
||||
setAppliedFilters(filters)
|
||||
@@ -550,92 +611,76 @@ export default function PersonReportPage() {
|
||||
查询
|
||||
</Button>
|
||||
</SettingFilterActions>
|
||||
</Group>
|
||||
</div>
|
||||
<Collapse in={searchExpanded} transitionDuration={150} animateOpacity>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
|
||||
<DateInput
|
||||
label="开始日期"
|
||||
locale="zh-cn"
|
||||
value={filters.date_start}
|
||||
onChange={(e) =>
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
date_start: dayjs(e).format("YYYY-MM-DD"),
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<DateInput
|
||||
label="结束日期"
|
||||
locale="zh-cn"
|
||||
value={filters.date_end}
|
||||
onChange={(e) => {
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
date_end: dayjs(e).format("YYYY-MM-DD"),
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
<div className={classes.filterExpandedGrid}>
|
||||
<InlineFilterField label="任务组长">
|
||||
<MultiSelect
|
||||
label="项目名称"
|
||||
data={projectOptions}
|
||||
searchable
|
||||
clearable
|
||||
value={filters.project_id}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, project_id: v }))}
|
||||
/>
|
||||
<MultiSelect
|
||||
label="任务组长"
|
||||
data={leaderOptions}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择组长"
|
||||
value={filters.leader_uid}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, leader_uid: v }))}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="规定类型">
|
||||
<Select
|
||||
label="规定类型"
|
||||
data={setTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.set_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, set_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="出勤类型">
|
||||
<Select
|
||||
label="出勤类型"
|
||||
data={actualTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.actual_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, actual_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="工作类别">
|
||||
<Select
|
||||
label="工作类别"
|
||||
data={workTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.work_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, work_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="核算方式">
|
||||
<Select
|
||||
label="核算方式"
|
||||
data={accountTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.accounting_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, accounting_type: value ?? "" }))
|
||||
setFilters((s) => ({
|
||||
...s,
|
||||
accounting_type: value ?? "",
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="绩效核算">
|
||||
<Select
|
||||
label="绩效核算"
|
||||
data={performanceOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.performance_accounting || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({
|
||||
@@ -644,17 +689,20 @@ export default function PersonReportPage() {
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</InlineFilterField>
|
||||
<InlineFilterField label="对象类型">
|
||||
<Select
|
||||
label="对象类型"
|
||||
data={objTypeOpts}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
value={filters.obj_type || null}
|
||||
onChange={(value) =>
|
||||
setFilters((s) => ({ ...s, obj_type: value ?? "" }))
|
||||
}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</InlineFilterField>
|
||||
</div>
|
||||
</Collapse>
|
||||
</Stack>
|
||||
</SettingFilterPanel>
|
||||
@@ -663,22 +711,25 @@ export default function PersonReportPage() {
|
||||
style={{
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
padding: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 12,
|
||||
}}>
|
||||
<div className={classes.contentPanelBody}>
|
||||
<div className={classes.tableActionBar}>
|
||||
<SettingListHeader
|
||||
title="我的日报"
|
||||
count={`${totalItems} 条`}
|
||||
title="日报列表"
|
||||
count={`共 ${totalItems} 条记录`}
|
||||
actions={
|
||||
<SettingHeaderActions>
|
||||
<Button
|
||||
color="#1874ff"
|
||||
leftSection={<IconPlus size={16} />}
|
||||
onClick={() => {
|
||||
setEditingRecord(null)
|
||||
setModalOpened(true)
|
||||
}}>
|
||||
填写日报
|
||||
新建日报
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
@@ -690,6 +741,7 @@ export default function PersonReportPage() {
|
||||
</SettingHeaderActions>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
|
||||
<SettingDataTable<Daily.DailyWorkList>
|
||||
width="100%"
|
||||
@@ -704,6 +756,9 @@ export default function PersonReportPage() {
|
||||
totalRecords={totalItems}
|
||||
recordsPerPage={pageSize}
|
||||
page={page}
|
||||
paginationText={({ from, to, totalRecords }) =>
|
||||
`显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
|
||||
}
|
||||
onPageChange={setPage}
|
||||
onRecordsPerPageChange={(v) => {
|
||||
setPageSize(v)
|
||||
@@ -726,9 +781,8 @@ export default function PersonReportPage() {
|
||||
<Controls.Text />
|
||||
<Controls.PageSizeSelector />
|
||||
<Button
|
||||
variant="light"
|
||||
color="gray"
|
||||
size="xs"
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={openCustomPageSizeModal}>
|
||||
自定义每页条数
|
||||
</Button>
|
||||
@@ -756,6 +810,7 @@ export default function PersonReportPage() {
|
||||
</Group>
|
||||
</SettingPanel> */}
|
||||
</Stack>
|
||||
</div>
|
||||
</SettingContentPanel>
|
||||
|
||||
<DailyReportModal
|
||||
@@ -789,7 +844,9 @@ export default function PersonReportPage() {
|
||||
<Button variant="default" onClick={closeCustomPageSizeModal}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddCustomPageSize}>添加</Button>
|
||||
<Button color="#1874ff" onClick={handleAddCustomPageSize}>
|
||||
添加
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
20
app/theme.ts
20
app/theme.ts
@@ -3,16 +3,16 @@ import { Button, createTheme, MantineColorsTuple } from "@mantine/core"
|
||||
|
||||
/* -------- 1. 自定义颜色（可删/可改） -------- */
|
||||
const brandColors: MantineColorsTuple = [
|
||||
"#E8F4FC",
|
||||
"#CEECFD",
|
||||
"#A7DAFF",
|
||||
"#69C0FF",
|
||||
"#4ABAFF",
|
||||
"#09ADFF",
|
||||
"#00A1FF",
|
||||
"#168DE8",
|
||||
"#0D73D0",
|
||||
"#0256A4",
|
||||
"#E8F3FF",
|
||||
"#D6E8FF",
|
||||
"#B8D5FF",
|
||||
"#8DBAFF",
|
||||
"#5C9AFF",
|
||||
"#3283FF",
|
||||
"#1874FF",
|
||||
"#0F68EB",
|
||||
"#0D59C9",
|
||||
"#0B4AA6",
|
||||
]
|
||||
|
||||
const greyColors: MantineColorsTuple = [
|
||||
|
||||
946
components/label/components/Icon.tsx
Normal file
946
components/label/components/Icon.tsx
Normal file
@@ -0,0 +1,946 @@
|
||||
import { SVGProps } from "react"
|
||||
|
||||
export type IconSvgProps = SVGProps<SVGSVGElement> & {
|
||||
size?: number
|
||||
}
|
||||
|
||||
export const Logo: React.FC<IconSvgProps> = () => (
|
||||
<svg
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 36 36"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="32"
|
||||
height="32"
|
||||
rx="6"
|
||||
fill="url(#paint0_linear_794_10698)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="11.1774"
|
||||
cy="26.7166"
|
||||
rx="4.87151"
|
||||
ry="0.549494"
|
||||
fill="url(#paint1_linear_794_10698)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="11.1779"
|
||||
cy="26.6158"
|
||||
rx="3.12976"
|
||||
ry="0.448669"
|
||||
fill="url(#paint2_linear_794_10698)"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M24.6079 8.24078C24.9989 7.85079 25.6321 7.85165 26.0221 8.24271L28.8659 11.0943C29.2559 11.4853 29.255 12.1185 28.864 12.5085L26.9331 14.4341L22.4979 10.345L24.6079 8.24078ZM21.8466 10.9945L12.999 19.818L17.4343 23.9071L26.2818 15.0836L21.8466 10.9945ZM12.3478 20.4675L16.783 24.5566L16.7454 24.5941L11.0621 26.5612C10.9001 26.6172 10.7204 26.5657 10.6128 26.4324C10.5266 26.3257 10.5 26.1828 10.5421 26.0522L12.3381 20.4771L12.3478 20.4675Z"
|
||||
fill="url(#paint3_linear_794_10698)"
|
||||
/>
|
||||
<mask
|
||||
id="mask0_794_10698"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="10"
|
||||
y="7"
|
||||
width="20"
|
||||
height="20">
|
||||
<path
|
||||
d="M24.6307 8.21629C25.0092 7.83889 25.6219 7.83972 25.9993 8.21816L28.8887 11.1155C29.2661 11.4939 29.2653 12.1066 28.8868 12.484L26.933 14.4326L22.4977 10.3435L24.6307 8.21629Z"
|
||||
fill="#2680EE"
|
||||
/>
|
||||
<path
|
||||
d="M21.8465 10.993L12.9994 19.8159L17.4347 23.905L26.2817 15.0821L21.8465 10.993Z"
|
||||
fill="#2680EE"
|
||||
/>
|
||||
<path
|
||||
d="M12.3482 20.4654L16.7834 24.5545L16.7454 24.5924L11.0621 26.5595C10.9001 26.6155 10.7204 26.564 10.6128 26.4307C10.5266 26.324 10.5 26.1811 10.5421 26.0505L12.3381 20.4754L12.3482 20.4654Z"
|
||||
fill="#2680EE"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_794_10698)">
|
||||
<rect
|
||||
width="32.4846"
|
||||
height="4.93865"
|
||||
transform="matrix(0.708734 -0.705476 -0.705476 -0.708734 8.74268 28.378)"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_794_10698"
|
||||
x1="29.6923"
|
||||
y1="5.07692"
|
||||
x2="13.0769"
|
||||
y2="30.6154"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#60A9FF" />
|
||||
<stop offset="1" stopColor="#175FF6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_794_10698"
|
||||
x1="11.1774"
|
||||
y1="26.0321"
|
||||
x2="11.1774"
|
||||
y2="27.3627"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="white" stopOpacity="0.3" />
|
||||
<stop offset="1" stopColor="#4AE9FF" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_794_10698"
|
||||
x1="11.1779"
|
||||
y1="26.0569"
|
||||
x2="11.1779"
|
||||
y2="27.1433"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="white" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_794_10698"
|
||||
x1="15.597"
|
||||
y1="11.4954"
|
||||
x2="23.3245"
|
||||
y2="19.2555"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#2680EE" />
|
||||
<stop offset="0.852225" stopColor="white" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const LoginUserIcon = () => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#4E596999">
|
||||
<path d="M210.944 672.548571c81.700571-61.586286 190.171429-91.428571 301.056-91.428571 110.738286 0 219.282286 29.842286 300.982857 91.428571a333.677714 333.677714 0 0 1 135.021714 246.125715c1.462857 17.700571-13.165714 32.182857-30.939428 32.182857a34.742857 34.742857 0 0 1-33.645714-32.182857 269.019429 269.019429 0 0 0-109.129143-194.779429C706.048 672.548571 611.986286 645.485714 512 645.485714c-100.205714 0-194.194286 27.062857-262.290286 78.409143a268.946286 268.946286 0 0 0-109.129143 194.779429 34.742857 34.742857 0 0 1-33.645714 32.182857 30.281143 30.281143 0 0 1-30.939428-32.182857 333.677714 333.677714 0 0 1 134.948571-246.125715zM512 118.637714a170.422857 170.422857 0 1 0 0 340.772572 170.422857 170.422857 0 0 0 0-340.772572z m-234.788571 170.422857a234.788571 234.788571 0 1 1 469.504 0 234.788571 234.788571 0 0 1-469.430858 0z"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const LoginPasswordIcon = () => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="6040"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#4E596999">
|
||||
<path
|
||||
d="M288.036571 320v-32.036571a223.963429 223.963429 0 0 1 447.926858 0v32.036571h128a64 64 0 0 1 64.073142 64v434.468571c0 79.140571-66.852571 141.531429-144.091428 141.531429H240.054857c-78.116571 0-144.018286-65.828571-144.018286-144.018286V384a64 64 0 0 1 64-64h128z m110.811429-145.115429c-29.988571 29.988571-46.811429 70.656-46.811429 113.078858v32.036571h320v-32.036571a160.036571 160.036571 0 0 0-273.188571-113.078858zM159.963429 384v431.981714c0 42.788571 37.229714 80.018286 80.018285 80.018286h544.036572c43.739429 0 80.018286-35.620571 80.018285-77.531429V384H159.963429z"
|
||||
p-id="6041"></path>
|
||||
<path
|
||||
d="M320 416.036571c17.700571 0 32.036571 14.262857 32.036571 31.963429v32.036571a160.036571 160.036571 0 0 0 320 0v-32.036571a32.036571 32.036571 0 0 1 63.926858 0v32.036571a223.963429 223.963429 0 1 1-447.926858 0v-32.036571c0-17.700571 14.262857-32.036571 31.963429-32.036571z"
|
||||
p-id="6042"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const LoginCodeIcon = () => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="6188"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#4E596999">
|
||||
<path
|
||||
d="M516.388571 950.857143c-131.437714 0-375.588571-195.657143-375.588571-380.781714v-353.28c0-8.777143 7.021714-15.286857 16.164571-15.725715l21.430858-0.438857a545.645714 545.645714 0 0 0 170.276571-35.84c87.771429-34.889143 144.530286-75.044571 145.408-75.483428l12.653714-8.777143a17.92 17.92 0 0 1 9.654857-2.998857c3.437714 0 6.948571 0.877714 9.581715 2.998857l12.653714 9.216c0.438857 0.438857 57.636571 40.594286 145.846857 75.556571a545.645714 545.645714 0 0 0 170.349714 35.84l20.918858 0.365714c8.777143 0 16.164571 7.021714 16.164571 15.725715V570.514286c0 184.685714-244.077714 380.342857-375.515429 380.342857z m317.878858-693.028572a610.742857 610.742857 0 0 1-170.715429-38.838857A822.491429 822.491429 0 0 1 516.388571 144.310857c-21.869714 13.970286-74.678857 46.299429-147.163428 74.605714a607.524571 607.524571 0 0 1-170.788572 38.912v312.246858c0 144.969143 212.699429 322.706286 317.952 322.706285 40.594286 0 120.027429-33.206857 197.778286-105.691428 75.117714-69.851429 120.100571-151.113143 120.100572-217.014857V257.828571z m-348.013715 371.565715a28.452571 28.452571 0 0 1-41.033143 0L358.180571 542.208a28.964571 28.964571 0 0 1 40.667429-41.472l0.438857 0.438857 66.340572 66.779429L632.978286 399.36c10.898286-11.410286 29.257143-11.410286 40.594285-0.438857l0.438858 0.438857a28.964571 28.964571 0 0 1 0 40.96L486.253714 629.540571z"
|
||||
p-id="6189"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const DashboardMenuIcon = () => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_16390_8146)">
|
||||
<path
|
||||
d="M13.3577 5.98351C13.3542 5.98002 13.3507 5.97303 13.3472 5.97303L8.31026 0.600778C7.97144 0.234011 7.49988 0.0279236 7.00737 0.0279236H7.00038C6.50786 0.0279236 6.03631 0.237504 5.70098 0.600778L0.671038 5.97303C0.00736555 6.67862 0.220439 7.28641 0.269342 7.40517C0.370639 7.64269 0.639601 8.0409 1.2893 8.0409H1.85866V12.3233C1.85866 13.2839 2.24289 14 3.33271 14H5.29229C5.49489 14 5.65906 13.8288 5.65906 13.6227V9.40667C5.65906 9.1377 5.65906 8.85826 5.7918 8.72553C5.86864 8.64868 5.98741 8.61026 6.16206 8.61026H7.85617C8.28232 8.61026 8.35916 8.83032 8.35916 9.44509V13.6227C8.35916 13.8323 8.52333 14 8.72593 14H10.6855C11.7753 14 12.1596 13.2595 12.1596 12.2954L12.1805 8.0409H12.7289C13.3751 8.0409 13.6476 7.6392 13.7524 7.40517C13.7908 7.28641 14.0039 6.68212 13.3577 5.98351Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16390_8146">
|
||||
<rect width="14" height="14" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const TaskMenuIcon = () => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_16390_8144)">
|
||||
<path
|
||||
d="M9.97792 0.0650635H1.99082C1.15724 0.0650635 0.480469 0.741832 0.480469 1.57541V10.4126C0.480469 12.3562 2.06097 13.9347 4.00255 13.9347H11.9897C12.8232 13.9347 13.5 13.2579 13.5 12.4243V3.58715C13.5021 1.64556 11.9216 0.0650635 9.97792 0.0650635ZM7.35957 9.53156H4.10984C3.74257 9.53156 3.44546 9.23444 3.44546 8.86717C3.44546 8.4999 3.74257 8.20072 4.10984 8.20072H7.35957C7.72684 8.20072 8.02396 8.49784 8.02396 8.86717C8.02602 9.23238 7.72684 9.53156 7.35957 9.53156ZM9.87063 5.71236H4.10984C3.74257 5.71236 3.44546 5.41524 3.44546 5.04797C3.44546 4.6807 3.74257 4.38359 4.10984 4.38359H9.87063C10.2379 4.38359 10.535 4.6807 10.535 5.04797C10.535 5.41524 10.2379 5.71236 9.87063 5.71236Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16390_8144">
|
||||
<rect width="14" height="14" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const DeviceMenuIcon = () => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_16390_8135)">
|
||||
<path
|
||||
d="M9.22141 5.97429C8.85373 5.97429 8.55582 5.67638 8.55582 5.3087C8.55582 4.43571 7.84686 3.72674 6.97386 3.72674C6.10087 3.72674 5.3919 4.4357 5.3919 5.3087C5.3919 5.54628 5.26557 5.76689 5.05816 5.88567C4.85264 6.00446 4.5981 6.00446 4.39258 5.88567C4.18705 5.76689 4.05884 5.54628 4.05884 5.3087C4.05884 3.70036 5.36362 2.39557 6.97197 2.39557C8.58033 2.39557 9.88511 3.70035 9.88511 5.30869C9.88888 5.67637 9.58909 5.97429 9.22141 5.97429Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M11.2611 5.97427C10.8935 5.97427 10.5955 5.67636 10.5955 5.30868C10.5955 3.30814 8.97399 1.68849 6.97535 1.68849C4.97482 1.68849 3.35517 3.31004 3.35517 5.30868C3.35517 5.67636 3.05725 5.97427 2.68958 5.97427C2.3219 5.97427 2.02399 5.67636 2.02399 5.30868C2.02399 3.54006 2.96863 1.90531 4.49968 1.01913C6.03261 0.134818 7.92001 0.134818 9.45296 1.01913C10.9859 1.90344 11.9286 3.53819 11.9286 5.30868C11.9268 5.67636 11.6288 5.97427 11.2612 5.97427H11.2611Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M12.8226 8.26329H7.66192V5.97427C7.66192 5.6066 7.364 5.30869 6.99633 5.30869C6.62865 5.30869 6.33074 5.6066 6.33074 5.97427V8.26329H1.16819C0.708117 8.26329 0.33667 8.63662 0.33667 9.0948V12.8187C0.33667 13.2788 0.710004 13.6502 1.16819 13.6502H12.8207C13.2808 13.6502 13.6522 13.2769 13.6522 12.8187V9.0967C13.6541 8.63663 13.2808 8.26329 12.8226 8.26329ZM2.39 11.6233C2.02232 11.6233 1.72441 11.3254 1.72441 10.9577C1.72441 10.59 2.02232 10.2921 2.39 10.2921C2.75768 10.2921 3.05559 10.59 3.05559 10.9577C3.05559 11.1349 2.98582 11.3046 2.86138 11.4291C2.73505 11.5535 2.56535 11.6233 2.39 11.6233ZM4.4075 11.6233C4.03983 11.6233 3.74191 11.3254 3.74191 10.9577C3.74191 10.59 4.03983 10.2921 4.4075 10.2921C4.77518 10.2921 5.07309 10.59 5.07309 10.9577C5.07309 11.1349 5.00333 11.3046 4.87888 11.4291C4.75444 11.5535 4.58474 11.6233 4.4075 11.6233Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16390_8135">
|
||||
<rect width="14" height="14" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const CountMenuIcon = () => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.9769 10.2131C11.9769 10.4301 11.8999 10.6261 11.7459 10.7731C11.5849 10.9341 11.4029 11.0041 11.1789 11.0041H7.95888V12.5861H11.9699C12.1939 12.5861 12.4039 12.5441 12.5999 12.4671C12.7889 12.3831 12.9709 12.2781 13.1109 12.1311C13.2579 11.9911 13.3699 11.8231 13.4609 11.6271C13.5519 11.4381 13.5869 11.2281 13.5869 11.0111V3.12912C13.5869 2.91212 13.5449 2.70212 13.4609 2.52012C13.3769 2.33812 13.2579 2.17012 13.1109 2.01612C12.9639 1.87612 12.7959 1.75712 12.5999 1.67312C12.4109 1.58912 12.2009 1.54712 11.9699 1.54712H2.28188C2.05788 1.54712 1.84788 1.58912 1.65188 1.67312C1.46288 1.75712 1.28088 1.87612 1.14088 2.01612C0.993879 2.15612 0.881879 2.32412 0.790879 2.52012C0.706879 2.70912 0.664879 2.91212 0.664879 3.12912V5.46012L2.28188 5.50912V5.48112C2.28188 5.26412 2.36588 5.08212 2.52688 4.92812C2.68788 4.77412 2.87688 4.70412 3.10088 4.70412H11.1789C11.4029 4.70412 11.5919 4.78112 11.7459 4.92812C11.9069 5.07512 11.9769 5.26412 11.9769 5.48112V10.2131ZM4.31888 5.43912C3.80788 5.43912 3.33188 5.53012 2.89088 5.72612C2.44988 5.91512 2.06488 6.16712 1.72888 6.49612C1.39288 6.82512 1.13388 7.19612 0.944879 7.64412C0.755879 8.07812 0.650879 8.54712 0.650879 9.03712C0.650879 9.52712 0.748879 9.99612 0.944879 10.4301C1.13388 10.8641 1.40688 11.2421 1.72888 11.5571C2.06488 11.8721 2.44988 12.1311 2.89088 12.3201C3.33188 12.5091 3.80788 12.6071 4.31888 12.6071C4.82988 12.6071 5.30588 12.5161 5.74688 12.3201C6.18788 12.1311 6.57288 11.8791 6.90888 11.5571C7.24488 11.2351 7.50388 10.8641 7.69288 10.4301C7.88188 9.99612 7.98688 9.53412 7.98688 9.03712C7.98688 8.53312 7.88888 8.07812 7.69288 7.64412C7.50388 7.21012 7.23088 6.82512 6.90888 6.49612C6.57988 6.16712 6.18788 5.92212 5.74688 5.72612C5.30588 5.54412 4.82988 5.43912 4.31888 5.43912ZM3.41588 8.63812L2.28188 7.59512L2.84888 7.02112L4.12988 8.23212L3.71688 8.65212H5.06788L4.65488 8.13412L5.84488 7.00012L6.33488 7.63012L5.24988 8.65212H6.33488V9.44312H4.71788V10.2271H6.33488V11.0181H4.71788V11.8021H3.90588V11.0181H2.28888V10.2271H3.90588V9.44312H2.28888V8.65212H3.41588V8.63812Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const UserMenuIcon = () => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_16390_8148)">
|
||||
<path
|
||||
d="M8.70825 12.2028L8.64263 12.1751L8.55005 12.1214C8.34179 12.0331 8.16395 11.8858 8.03849 11.6975C7.91303 11.5093 7.84545 11.2885 7.8441 11.0623V10.5966C7.8441 10.2676 7.97815 9.97307 8.1955 9.76395C8.1955 9.76395 8.34233 9.60872 8.39851 9.56515C8.48198 9.50688 8.71088 9.45805 8.71088 9.45805C8.64968 9.23591 8.65693 9.00047 8.73167 8.78251C8.80642 8.56455 8.94518 8.37421 9.12983 8.23637C8.4878 7.83386 7.74525 7.62059 6.98748 7.62107H4.58298C2.34438 7.62667 0.532605 9.44247 0.531555 11.6807V11.9229C0.531555 13.0937 2.32075 13.0937 4.5828 13.0937H6.98731C7.63533 13.0937 8.2592 13.0937 8.81256 13.0631C8.66752 12.8007 8.63012 12.4922 8.70825 12.2028ZM5.66588 7.31062C7.43915 7.30555 8.87381 5.86583 8.87241 4.09273C8.87381 2.31998 7.43986 0.8806 5.66693 0.875C3.88981 0.917525 2.48368 2.39278 2.52621 4.1699C2.56733 5.88718 3.94966 7.26932 5.66693 7.31062H5.66588ZM13.1328 10.213C12.9767 10.2038 12.8299 10.1356 12.7222 10.0223C12.6144 9.90888 12.5539 9.75881 12.5527 9.60243C12.5527 9.50268 12.5758 9.41115 12.6209 9.32697C12.6627 9.24012 12.6702 9.14072 12.6419 9.04858C12.6137 8.95644 12.5517 8.87833 12.4685 8.8298L12.2625 8.70783L12.0637 8.59338C11.9805 8.54635 11.8828 8.53202 11.7897 8.55318C11.6965 8.57434 11.6146 8.62948 11.5599 8.70783C11.5047 8.79295 11.4289 8.86279 11.3396 8.9109C11.2503 8.95901 11.1503 8.98384 11.0489 8.9831C10.9474 8.98404 10.8474 8.95929 10.7581 8.91116C10.6687 8.86303 10.5931 8.79308 10.5381 8.70783C10.4834 8.62916 10.4013 8.57379 10.3079 8.55261C10.2145 8.53143 10.1166 8.54597 10.0334 8.59338L9.82073 8.70783L9.62193 8.82227C9.53859 8.87078 9.4766 8.94891 9.44832 9.04109C9.42003 9.13327 9.42754 9.23273 9.46933 9.31962C9.51588 9.40293 9.53811 9.49515 9.53811 9.59402C9.53823 9.75095 9.47808 9.90192 9.37009 10.0158C9.2621 10.1296 9.11451 10.1977 8.95781 10.2058V10.213C8.86152 10.2197 8.77146 10.263 8.70613 10.3341C8.64081 10.4051 8.60518 10.4985 8.60658 10.595V11.0616C8.60771 11.1573 8.6442 11.2493 8.70904 11.3197C8.77388 11.3902 8.86248 11.4342 8.95781 11.4432L8.96603 11.4516C9.06753 11.457 9.16605 11.4878 9.25251 11.5412C9.33897 11.5947 9.41059 11.669 9.46075 11.7574C9.51091 11.8458 9.53801 11.9454 9.53954 12.047C9.54107 12.1487 9.51698 12.249 9.46951 12.3389C9.42798 12.4257 9.42062 12.5249 9.44889 12.6168C9.47717 12.7088 9.539 12.7867 9.62211 12.8352L10.0262 13.0718C10.2019 13.1705 10.4236 13.1182 10.5307 12.9573C10.5858 12.8721 10.6615 12.8022 10.7508 12.754C10.8402 12.7059 10.9402 12.6811 11.0417 12.6819C11.2543 12.6819 11.4458 12.7965 11.5529 12.9573C11.6673 13.1171 11.881 13.1791 12.0564 13.0718L12.4611 12.8352C12.5429 12.7871 12.6038 12.7103 12.632 12.6198C12.6602 12.5292 12.6537 12.4314 12.6137 12.3454C12.6137 12.3454 12.6137 12.3378 12.6052 12.3378C12.5978 12.3305 12.5978 12.3223 12.5906 12.3148L12.5831 12.3074C12.5451 12.2173 12.5293 12.1194 12.537 12.0219C12.5446 11.9244 12.5756 11.8302 12.6271 11.7471C12.6787 11.664 12.7494 11.5945 12.8334 11.5444C12.9173 11.4943 13.0121 11.465 13.1097 11.459L13.116 11.4516C13.2123 11.4447 13.3024 11.4013 13.3677 11.3301C13.433 11.2589 13.4687 11.1655 13.4674 11.0689V10.5884C13.4831 10.3887 13.3223 10.2279 13.1319 10.213H13.1328ZM11.9342 11.1531C11.8949 11.2588 11.8381 11.3572 11.7662 11.4441C11.6764 11.5486 11.5653 11.6326 11.4403 11.6905C11.3153 11.7484 11.1793 11.7788 11.0415 11.7796C10.7901 11.7784 10.5492 11.6784 10.3708 11.5012C10.1924 11.324 10.0908 11.0838 10.088 10.8323C10.088 10.7179 10.1102 10.6104 10.1405 10.5107C10.1771 10.4039 10.2343 10.3054 10.3088 10.2207C10.4517 10.0485 10.6526 9.93437 10.8737 9.89993C10.929 9.89074 10.9848 9.88583 11.0408 9.88523C11.1028 9.88523 11.1555 9.8924 11.2092 9.89993C11.4309 9.93773 11.6285 10.0599 11.7744 10.2207C11.8422 10.3045 11.9039 10.4045 11.9409 10.5107C11.9789 10.6136 11.9973 10.7227 11.9953 10.8323C11.9947 10.9421 11.974 11.0508 11.9342 11.1531Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16390_8148">
|
||||
<rect width="14" height="14" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const AuthMenuIcon = () => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_16390_8141)">
|
||||
<path
|
||||
d="M12.786 1.72289L7.35971 0L1.93526 1.72289C1.73132 1.78725 1.59355 1.97702 1.59535 2.19167V9.04915C1.60621 9.09573 1.862 10.2246 2.9711 11.3177C3.82441 12.1585 5.87122 13.2392 6.76401 13.7079C6.90344 13.7813 6.96977 13.8081 7.0287 13.8402L7.29354 13.9726C7.36333 14.0101 7.48859 14.0084 7.55838 13.9726L7.82322 13.8402C8.34551 13.5844 10.7625 12.2892 11.7483 11.3177C12.8594 10.2246 13.1152 9.09573 13.1259 9.04915V2.19167C13.1294 1.97702 12.9899 1.78725 12.786 1.72289ZM7.4277 12.9099L7.42408 12.9081H7.43297C7.4295 12.9099 7.4277 12.9099 7.4277 12.9099ZM8.72114 8.9257H7.84447V10.1602C7.84447 10.4465 7.61189 10.679 7.32565 10.679C7.03941 10.679 6.80682 10.4465 6.80682 10.1602V6.97566C6.80682 6.96495 6.80863 6.95606 6.80863 6.94702C6.71382 6.91838 6.61901 6.88431 6.5242 6.8415C6.20404 6.69484 5.93031 6.43181 5.74777 6.13305C5.55815 5.82179 5.45791 5.43169 5.48836 5.06676C5.52408 4.64999 5.67436 4.28672 5.94101 3.96294C6.40256 3.40297 7.25058 3.17581 7.93039 3.42437C8.31507 3.56576 8.62814 3.80196 8.86434 4.13463C9.0719 4.4263 9.17741 4.78941 9.18646 5.14545C9.18646 5.15615 9.18827 5.16504 9.18646 5.1759C9.18646 5.18841 9.18646 5.20092 9.18465 5.21343C9.15963 6.00418 8.61578 6.75016 7.84282 6.95606V7.86664H8.71948C9.00573 7.86664 9.23831 8.09923 9.23831 8.38547V8.40687H9.24012C9.23997 8.69312 9.00739 8.9257 8.72114 8.9257Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M7.95696 5.64603C7.96223 5.63713 7.96766 5.6299 7.96947 5.62809C8.0003 5.58081 8.02839 5.53179 8.05358 5.48127C8.07679 5.4151 8.09473 5.34893 8.10905 5.27914C8.11085 5.24522 8.11266 5.20935 8.11447 5.17528C8.11447 5.14122 8.11266 5.10549 8.10905 5.07158C8.09653 5.0036 8.07679 4.93562 8.05358 4.86945C8.0327 4.82734 8.01001 4.78615 7.98559 4.74599C7.98017 4.74057 7.96766 4.72278 7.94625 4.68872C7.92666 4.66716 7.90691 4.64395 7.88551 4.62435C7.86049 4.59933 7.83365 4.57431 7.80502 4.55094C7.79612 4.54567 7.78904 4.54024 7.78708 4.53843C7.73985 4.5076 7.69088 4.47952 7.64041 4.45432C7.57424 4.43111 7.50807 4.41317 7.44009 4.39885C7.3703 4.39358 7.30051 4.39358 7.23072 4.39885C7.16274 4.41137 7.09476 4.43111 7.0304 4.45432C6.98829 4.4752 6.9471 4.49789 6.90694 4.52231C6.90152 4.52773 6.88373 4.54024 6.84967 4.56165C6.82811 4.58124 6.8049 4.60099 6.7853 4.62239C6.76028 4.64741 6.73526 4.67424 6.71189 4.70288C6.70662 4.71178 6.70119 4.71901 6.69938 4.72082C6.66855 4.76805 6.64047 4.81702 6.61527 4.86749C6.59206 4.93366 6.57412 4.99983 6.5598 5.06781C6.55453 5.1376 6.55453 5.20739 6.5598 5.27718C6.57231 5.34516 6.59206 5.41314 6.61527 5.47751C6.63668 5.52046 6.65823 5.55981 6.68325 5.60096C6.68868 5.60638 6.70119 5.62417 6.7226 5.65823C6.74219 5.67979 6.76194 5.703 6.78334 5.7226C6.80836 5.74762 6.83519 5.77264 6.86383 5.79601C6.87273 5.80128 6.87996 5.80671 6.88177 5.80852C6.9282 5.83896 6.97839 5.8676 7.02844 5.89263C7.09461 5.91584 7.16078 5.93378 7.22876 5.9481C7.29855 5.95352 7.36834 5.95352 7.43813 5.9481C7.50611 5.93559 7.57409 5.91584 7.63845 5.89263C7.68141 5.87122 7.72076 5.84967 7.76191 5.82465C7.76733 5.81922 7.78512 5.80671 7.81918 5.7853C7.8424 5.76737 7.86395 5.74777 7.88355 5.72622C7.90872 5.7015 7.93374 5.67466 7.95696 5.64603Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16390_8141">
|
||||
<rect width="14" height="14" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const PersonalMenuIcon = () => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1927"
|
||||
width="14"
|
||||
height="14"
|
||||
fill="currentColor">
|
||||
<path
|
||||
d="M511.976 24.429a487.618 487.618 0 0 1 487.619 487.619 487.619 487.619 0 1 1-487.619-487.62z m60.953 518.095H451.024a182.86 182.86 0 0 0-129.3 53.557 182.86 182.86 0 0 0-53.557 129.3h487.619l-0.305-10.728a182.857 182.857 0 0 0-182.552-172.129z m-60.953-304.762a121.906 121.906 0 0 0-86.199 208.104 121.9 121.9 0 0 0 172.399 0 121.905 121.905 0 0 0-86.2-208.104z"
|
||||
p-id="1928"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const DevLogo = ({ ...props }) => (
|
||||
<svg
|
||||
viewBox="0 0 142 100"
|
||||
width="142"
|
||||
height="100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
d="M2.57049 27.0524C4.45216 40.5377 16.1613 47.2805 33.9316 43.3602L42.7274 52.1353V39.2773C60.6032 27.0524 55.8991 6.34816 31.7363 2.5908C11.9936 1.33038 1.63046 11.3719 2.57049 27.0524Z"
|
||||
stroke="#666666"
|
||||
/>
|
||||
<path
|
||||
d="M80.676 37.0917C71.6668 39.6849 66.9874 43.2695 59.0368 52.145L57.4688 55.5853L75.9718 80.6741H116.741L112.554 73.7409L109.6 63.6418C109.572 63.548 109.612 63.4474 109.697 63.3982C109.812 63.3309 109.96 63.3854 110.005 63.5114L113.608 73.7409C117.712 67.4686 121.357 65.3212 130.226 61.5533C119.679 43.382 105.765 33.9461 93.2204 35.21C91.3667 42.5938 83.3288 42.9648 80.676 37.0917Z"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
<path
|
||||
d="M53.9041 57.9035L55.1903 64.0493H56.8549L55.7101 58.9471L94.0254 59.7195L102.229 84.6834C102.362 85.089 102.06 85.5064 101.633 85.5064H94.2245V86.88H101.798C103.08 86.88 103.986 85.6276 103.586 84.4105L94.3348 56.2813C93.9116 54.9946 92.7102 54.125 91.3557 54.125H56.9737C54.9832 54.125 53.4963 55.9553 53.9041 57.9035Z"
|
||||
fill="#444444"
|
||||
/>
|
||||
<path
|
||||
d="M101.634 85.5086H94.2253H64.2495L56.8557 64.0514L55.7109 58.9492L94.0263 59.7217L102.23 84.6855C102.363 85.0912 102.061 85.5086 101.634 85.5086Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M117.055 96.3538C139.321 97.9219 147.161 87.8863 132.108 63.7383"
|
||||
stroke="#666666"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M39.2776 76.9102C34.8854 85.3776 35.6153 90.9028 43.9818 93.2179"
|
||||
stroke="#666666"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M57.7812 63.4217C58.0949 62.5854 59.0984 60.9755 60.6037 61.2264C62.4854 61.54 63.1126 63.736 64.9943 63.736C67.1896 64.0496 69.5939 61.2271 70.9529 59.9727"
|
||||
stroke="#2D67F5"
|
||||
strokeWidth="1.25444"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M85.0664 62.4844H92.2795"
|
||||
stroke="#2D67F5"
|
||||
strokeWidth="1.25444"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M91.0235 75.9688H96.0413"
|
||||
stroke="#2D67F5"
|
||||
strokeWidth="1.25444"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M92.2773 79.1055H97.2951"
|
||||
stroke="#2D67F5"
|
||||
strokeWidth="1.25444"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M98.4319 20.5391C102.822 20.8527 100.941 26.8113 97.8047 26.8113"
|
||||
stroke="#333333"
|
||||
strokeWidth="0.627222"
|
||||
/>
|
||||
<path
|
||||
d="M72.0898 19.2868V21.1685C71.5671 21.1685 70.459 21.2939 70.2081 21.7957C69.8945 22.4229 69.2673 24.9318 71.4625 26.4999C72.4025 26.8135 74.2895 26.98 74.5978 28.0679C76.5972 31.317 79.7419 33.7196 83.1787 34.6605C83.998 34.8848 83.1787 40.4488 83.1787 40.9066M98.4322 17.7188C98.4068 21.6692 98.3546 23.8141 97.805 26.8135C95.8238 30.8801 93.1492 33.2826 90.277 34.3783C89.8185 34.5531 90.277 38.8789 90.277 39.9909"
|
||||
stroke="#333333"
|
||||
/>
|
||||
<path
|
||||
d="M71.7739 19.2866C74.5337 19.5375 74.8055 16.6732 74.5964 15.2097C76.3207 19.5508 82.4367 17.4049 82.4367 13.6415C84.3184 18.0321 87.6335 19.0623 92.7859 15.8368C94.9811 18.6593 100.144 18.2835 101.567 14.896C101.788 14.1444 101.989 13.4158 101.567 12.0735C101.269 11.1272 99.7898 10.4009 99.0581 10.1918C99.0063 8.25431 98.7108 6.97547 97.8315 5.96509C96.4937 4.42788 94.239 4.23324 92.2012 4.2333L91.845 4.23331C89.0225 0.155119 83.0639 0.470962 79.9278 3.9197H79.3027C77.0184 3.9197 74.6772 4.19085 72.7267 5.37981C68.3242 8.06343 68.3242 11.4977 68.3242 11.76C68.3242 15.8369 68.3242 18.973 71.7739 19.2866Z"
|
||||
fill="#393E53"
|
||||
stroke="#333333"
|
||||
/>
|
||||
<path
|
||||
d="M97.1778 22.4212C97.1778 25.1606 94.6842 27.439 91.5328 27.439C88.3815 27.439 85.8878 25.1606 85.8878 22.4212C85.8878 19.6819 88.3815 17.4035 91.5328 17.4035C94.6842 17.4035 97.1778 19.6819 97.1778 22.4212Z"
|
||||
stroke="#333333"
|
||||
strokeWidth="0.627222"
|
||||
/>
|
||||
<path
|
||||
d="M85.2599 22.4212C85.2599 25.1606 82.7662 27.439 79.6149 27.439C76.4635 27.439 73.9699 25.1606 73.9699 22.4212C73.9699 19.6819 76.4635 17.4035 79.6149 17.4035C82.7662 17.4035 85.2599 19.6819 85.2599 22.4212Z"
|
||||
stroke="#333333"
|
||||
strokeWidth="0.627222"
|
||||
/>
|
||||
<circle cx="90.4877" cy="23.9408" r="0.940833" fill="#313131" />
|
||||
<circle cx="77.9408" cy="23.9408" r="0.940833" fill="#313131" />
|
||||
<path
|
||||
d="M89.8664 29.6836C88.0279 30.6018 86.3617 30.7745 83.5469 31.0355C84.236 31.8112 85.9538 31.8181 87.2867 31.5194C88.6196 31.2206 89.6943 30.1908 89.8664 29.6836Z"
|
||||
fill="#333333"
|
||||
/>
|
||||
<path
|
||||
d="M120.45 80.3446L116.281 80.4296M103.375 80.6925L116.281 80.4296M116.281 80.4296L112.508 73.8438"
|
||||
stroke="#666666"
|
||||
strokeWidth="0.940833"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M111.094 94.7863V99.1156H48.0579L39.5101 68.8386C38.9308 66.7868 40.5237 64.7675 42.654 64.853L83.6199 66.4968C84.623 66.5371 85.5055 67.1715 85.8634 68.1095L96.0403 94.7863H111.094Z"
|
||||
fill="#444444"
|
||||
/>
|
||||
<ellipse
|
||||
cx="27.6581"
|
||||
cy="13.8656"
|
||||
rx="1.89637"
|
||||
ry="5.9047"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
<ellipse
|
||||
cx="19.5156"
|
||||
cy="16.5649"
|
||||
rx="1.28491"
|
||||
ry="4.70438"
|
||||
transform="rotate(-47.9891 19.5156 16.5649)"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
<ellipse
|
||||
cx="1.13456"
|
||||
cy="3.63681"
|
||||
rx="1.13456"
|
||||
ry="3.63681"
|
||||
transform="matrix(-0.731719 -0.681606 -0.681606 0.731719 37.6641 13.9609)"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
<rect
|
||||
x="11.4805"
|
||||
y="23.1211"
|
||||
width="8.6145"
|
||||
height="1.17604"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
<rect
|
||||
x="32.8711"
|
||||
y="23.1211"
|
||||
width="8.6145"
|
||||
height="1.17604"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
<rect
|
||||
x="28.5312"
|
||||
y="31.2773"
|
||||
width="6.23302"
|
||||
height="1.17604"
|
||||
transform="rotate(90 28.5312 31.2773)"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
<path
|
||||
d="M20.8578 28.8201C21.0723 29.064 21.0484 29.4356 20.8045 29.65L17.0066 32.989C16.7627 33.2035 16.3912 33.1796 16.1768 32.9357V32.9357C15.9623 32.6918 15.9862 32.3203 16.2301 32.1058L20.028 28.7668C20.2719 28.5523 20.6434 28.5762 20.8578 28.8201V28.8201Z"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
<path
|
||||
d="M32.8168 28.5013C32.5944 28.7379 32.6059 29.11 32.8425 29.3324L36.527 32.7962C36.7636 33.0186 37.1357 33.0072 37.3582 32.7705V32.7705C37.5806 32.5339 37.5691 32.1618 37.3325 31.9394L33.648 28.4756C33.4114 28.2532 33.0393 28.2646 32.8168 28.5013V28.5013Z"
|
||||
fill="#2D67F5"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const ExportIcon = () => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2301"
|
||||
width="14"
|
||||
height="14">
|
||||
<path
|
||||
d="M950.857143 424.228571L548.571429 73.142857v200.630857C163.620571 273.773714 73.142857 526.116571 73.142857 775.314286c111.177143-130.048 209.334857-200.630857 475.428572-200.630857V775.314286L950.857143 424.228571zM73.142857 877.714286h877.714286v73.142857H73.142857v-73.142857z"
|
||||
p-id="2302"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const BasicInfoIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M1.33337 2.6665C1.33337 2.11422 1.78109 1.6665 2.33337 1.6665H13.6667C14.219 1.6665 14.6667 2.11422 14.6667 2.6665V11.3332C14.6667 11.8855 14.219 12.3332 13.6667 12.3332H2.33337C1.78109 12.3332 1.33337 11.8855 1.33337 11.3332V2.6665ZM2.66671 2.99984V10.9998H13.3334V2.99984H2.66671ZM12 14.3332H4.00004V12.9998H12V14.3332ZM7.8954 8.64801L6.91608 7.66084L11.3303 7.67846L11.3356 6.34514L6.92141 6.32752L7.90857 5.3482L6.96954 4.40164L4.36648 6.98399L6.94884 9.58704L7.8954 8.64801Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const BankCardIcon = () => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1 6V12.5C1 13.0523 1.44772 13.5 2 13.5H14C14.5523 13.5 15 13.0523 15 12.5V6M1 6V3C1 2.44772 1.44772 2 2 2H14C14.5523 2 15 2.44772 15 3V6M1 6H15"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.3"
|
||||
/>
|
||||
<path
|
||||
d="M9.41263 9.19496L12.4126 9.19378L12 10.9991L9 11.0002L9.41263 9.19496Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const BusinessCardIcon = () => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3.61162 5.20754L5.20469 6.78626L7.98686 3.97314"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.2"
|
||||
/>
|
||||
<path
|
||||
d="M8.28467 6.37109L12.4734 6.37137"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.2"
|
||||
/>
|
||||
<path
|
||||
d="M8.28467 10.5693L12.4734 10.5696"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.2"
|
||||
/>
|
||||
<circle
|
||||
cx="5.42407"
|
||||
cy="10.2007"
|
||||
r="1.53418"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.2"
|
||||
/>
|
||||
<mask id="path-5-inside-1_16448_18166" fill="white">
|
||||
<rect x="0.540771" y="1.62891" width="14.9185" height="12.7422" rx="1" />
|
||||
</mask>
|
||||
<rect
|
||||
x="0.540771"
|
||||
y="1.62891"
|
||||
width="14.9185"
|
||||
height="12.7422"
|
||||
rx="1"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.6"
|
||||
mask="url(#path-5-inside-1_16448_18166)"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const CollectionCardIcon = () => (
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect
|
||||
x="1.49463"
|
||||
y="2.04736"
|
||||
width="13.0107"
|
||||
height="12.3359"
|
||||
rx="1"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.3"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.6536 8.17103L8.66643 9.15035L8.68405 4.73617L7.35073 4.73085L7.33311 9.14503L6.35379 8.15786L5.40723 9.0969L7.98958 11.7L10.5926 9.1176L9.6536 8.17103Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const BillRecordCardIcon = () => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect
|
||||
x="1.49463"
|
||||
y="1.83203"
|
||||
width="13.0107"
|
||||
height="12.3359"
|
||||
rx="1"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.3"
|
||||
/>
|
||||
<path
|
||||
d="M10.7429 4.50849C10.7427 4.4703 10.7274 4.43373 10.7004 4.40673C10.6734 4.37972 10.6369 4.36446 10.5987 4.36426H9.61539C9.56111 4.36426 9.5107 4.39528 9.48744 4.44335L8.05769 7.15299H7.99876L6.53356 4.44644C6.52157 4.42276 6.50329 4.40285 6.48071 4.38889C6.45814 4.37494 6.43215 4.36748 6.40561 4.36735H5.4014C5.37643 4.36724 5.35186 4.37365 5.33013 4.38594C5.30839 4.39824 5.29025 4.416 5.27748 4.43746C5.26471 4.45892 5.25777 4.48334 5.25733 4.50831C5.2569 4.53328 5.26299 4.55793 5.27501 4.57982L6.99463 7.69813H5.96638C5.92819 7.69834 5.89162 7.7136 5.86461 7.7406C5.83761 7.76761 5.82235 7.80418 5.82214 7.84237V8.59209C5.82214 8.67196 5.88728 8.73632 5.96638 8.73632H7.33737V9.22266H5.96638C5.92819 9.22286 5.89162 9.23812 5.86461 9.26513C5.83761 9.29213 5.82235 9.3287 5.82214 9.36689V10.0757C5.82214 10.1556 5.88728 10.2207 5.96638 10.2207H7.33737L7.33737 11.4892C7.33737 11.5683 7.40251 11.6334 7.48161 11.6334L8.47101 11.635C8.5092 11.6348 8.54576 11.6195 8.57277 11.5925C8.59977 11.5655 8.61504 11.529 8.61524 11.4908L8.61524 10.2199H9.99167C10.0299 10.2197 10.0664 10.2045 10.0934 10.1775C10.1204 10.1505 10.1357 10.1139 10.1359 10.0757V9.36689C10.1357 9.3287 10.1204 9.29213 10.0934 9.26513C10.0664 9.23812 10.0299 9.22286 9.99167 9.22266H8.61524V8.73632H9.99167C10.0299 8.73612 10.0664 8.72086 10.0934 8.69385C10.1204 8.66685 10.1357 8.63028 10.1359 8.59209V7.84237C10.1357 7.80418 10.1204 7.76761 10.0934 7.7406C10.0664 7.7136 10.0299 7.69834 9.99167 7.69813H9.01769L10.7266 4.57596C10.7364 4.55505 10.7416 4.53233 10.7421 4.50927L10.7429 4.50849Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const ToolTipIcon = () => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor">
|
||||
<path
|
||||
d="M511.552 62.72c-22.4 0-44.736 4.224-61.76 12.928L89.984 258.88c-33.984 17.344-33.984 45.568 0 62.912L449.792 504.96c17.024 8.64 39.424 12.928 61.824 12.928s44.736-4.288 61.76-12.928l359.936-183.232c33.984-17.344 33.984-45.568 0-62.912L573.312 75.648C556.16 66.944 533.888 62.72 511.552 62.72z m0 679.232c-27.52 0-55.168-5.632-77.184-16.832l-352.64-179.456a35.584 35.584 0 0 1-15.36-47.296 34.304 34.304 0 0 1 46.336-15.68l352.512 179.52c24.32 12.352 68.352 12.352 92.736 0l352.512-179.456a34.24 34.24 0 0 1 46.336 15.744 35.456 35.456 0 0 1-15.424 47.168l-352.64 179.456a172.8 172.8 0 0 1-77.184 16.832z m0 218.048c-27.52 0-55.168-5.632-77.184-16.832L81.856 763.52a35.456 35.456 0 0 1-15.424-47.168 34.24 34.24 0 0 1 46.272-15.744l352.512 179.584c24.32 12.352 68.352 12.352 92.736 0l352.512-179.584a34.24 34.24 0 0 1 46.336 15.744 35.456 35.456 0 0 1-15.488 47.168l-352.64 179.584c-21.888 11.2-49.472 16.832-77.12 16.832z"
|
||||
p-id="3648"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const IDLogoIcon = () => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2219"
|
||||
width="18"
|
||||
height="18">
|
||||
<path
|
||||
d="M56.539429 158.939429a102.4 102.4 0 0 1 102.4-102.4h706.121142a102.4 102.4 0 0 1 102.4 102.4v706.121142a102.4 102.4 0 0 1-102.4 102.4H158.939429a102.4 102.4 0 0 1-102.4-102.4V158.939429z m102.4-43.885715a43.885714 43.885714 0 0 0-43.885715 43.885715v706.121142a43.885714 43.885714 0 0 0 43.885715 43.885715h706.121142a43.885714 43.885714 0 0 0 43.885715-43.885715V158.939429a43.885714 43.885714 0 0 0-43.885715-43.885715H158.939429z"
|
||||
p-id="2220"
|
||||
fill="#165DFF"></path>
|
||||
<path
|
||||
d="M605.769143 238.006857H435.638857a73.142857 73.142857 0 0 0-73.142857 73.142857v401.700572a73.142857 73.142857 0 0 0 73.142857 73.142857h170.130286a231.424 231.424 0 0 0 231.497143-231.497143V469.577143a231.424 231.424 0 0 0-231.497143-231.497143z m-2.048 70.582857c83.821714 0 151.698286 67.876571 151.698286 151.698286v103.424a151.698286 151.698286 0 0 1-151.698286 151.698286H480.914286a36.571429 36.571429 0 0 1-36.571429-36.571429V345.161143a36.571429 36.571429 0 0 1 36.571429-36.571429h122.88zM216.137143 274.578286a36.571429 36.571429 0 0 1 36.571428-36.571429h8.923429a36.571429 36.571429 0 0 1 36.571429 36.571429v474.843428a36.571429 36.571429 0 0 1-36.571429 36.571429h-8.923429a36.571429 36.571429 0 0 1-36.571428-36.571429V274.578286z"
|
||||
p-id="2221"
|
||||
fill="#165DFF"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const ChevronLeftIcon: React.FC<IconSvgProps> = ({ ...props }) => (
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const DesktopIcon: React.FC<IconSvgProps> = ({ ...props }) => (
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
d="M1 3.25C1 3.11193 1.11193 3 1.25 3H13.75C13.8881 3 14 3.11193 14 3.25V10.75C14 10.8881 13.8881 11 13.75 11H1.25C1.11193 11 1 10.8881 1 10.75V3.25ZM1.25 2C0.559643 2 0 2.55964 0 3.25V10.75C0 11.4404 0.559644 12 1.25 12H5.07341L4.82991 13.2986C4.76645 13.6371 5.02612 13.95 5.37049 13.95H9.62951C9.97389 13.95 10.2336 13.6371 10.1701 13.2986L9.92659 12H13.75C14.4404 12 15 11.4404 15 10.75V3.25C15 2.55964 14.4404 2 13.75 2H1.25ZM9.01091 12H5.98909L5.79222 13.05H9.20778L9.01091 12Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const LabelStatusIcon: React.FC<IconSvgProps> = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.7952 2.69088C11.0415 2.82056 11.1093 3.13429 10.9594 3.36884C10.8095 3.60339 10.4988 3.66949 10.2504 3.54401C9.3204 3.07434 8.26238 2.90549 7.22488 3.06856C6.02069 3.25783 4.92738 3.88116 4.15111 4.821C3.37484 5.76084 2.96928 6.95223 3.01091 8.17048C3.05253 9.38874 3.53847 10.5497 4.37707 11.4343C5.21568 12.319 6.349 12.8662 7.56329 12.9729C8.77759 13.0795 9.98894 12.7382 10.9689 12.0132C11.9489 11.2882 12.6297 10.2298 12.883 9.03743C13.1013 8.01012 12.9892 6.94459 12.5698 5.99087C12.4578 5.73606 12.5404 5.42931 12.7826 5.29217C13.0248 5.15502 13.3345 5.23949 13.4508 5.49236C13.989 6.66209 14.1384 7.97872 13.869 9.24691C13.5645 10.68 12.7462 11.9522 11.5684 12.8236C10.3905 13.6949 8.9346 14.1052 7.47511 13.977C6.01562 13.8488 4.65346 13.1911 3.64552 12.1278C2.63758 11.0645 2.05353 9.66916 2.00349 8.20491C1.95346 6.74065 2.44092 5.3087 3.37393 4.17908C4.30694 3.04947 5.62103 2.30028 7.06836 2.07278C8.34913 1.87148 9.6559 2.09101 10.7952 2.69088ZM12.5 4.19997C12.5 3.92382 12.2761 3.69997 12 3.69997C11.7239 3.69997 11.5 3.92382 11.5 4.19997C11.5 4.47611 11.7239 4.69997 12 4.69997C12.2761 4.69997 12.5 4.47611 12.5 4.19997ZM9.49005 5.99518C9.29479 5.79992 9.29479 5.48334 9.49005 5.28807C9.68531 5.09281 10.0019 5.09281 10.1972 5.28807L10.712 5.8029C10.9072 5.99816 10.9072 6.31474 10.712 6.51001C10.5167 6.70527 10.2001 6.70527 10.0049 6.51001L9.49005 5.99518ZM9.56274 6.95933L9.04077 6.43736C8.84551 6.2421 8.52893 6.2421 8.33366 6.43736L5.14644 9.62459C5.05267 9.71835 4.99999 9.84553 4.99999 9.97814V10.5001C4.99999 10.7762 5.22385 11.0001 5.49999 11.0001H6.02196C6.15457 11.0001 6.28175 10.9474 6.37551 10.8537L9.56274 7.66644C9.758 7.47117 9.758 7.15459 9.56274 6.95933Z"
|
||||
fill="#1874FF"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const LabelStatusWaitIcon = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M2.5 8C2.5 4.96243 4.96243 2.5 8 2.5C11.0376 2.5 13.5 4.96243 13.5 8C13.5 11.0376 11.0376 13.5 8 13.5C4.96243 13.5 2.5 11.0376 2.5 8ZM8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM7.5 5V7.5V7.70711L7.64645 7.85355L10.1464 10.3536L10.8536 9.64645L8.5 7.29289V5H7.5Z"
|
||||
fill="#1874FF"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 待验收
|
||||
export const LabelStatusAcceptanceIcon = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM9.49997 6.15909C9.49997 6.58622 9.32144 6.97165 9.03494 7.24484C8.90992 7.36405 8.81815 7.52068 8.81815 7.69342C8.81815 7.97571 9.04699 8.20454 9.32927 8.20454H10.1818C10.6337 8.20454 11 8.57086 11 9.02273C11 9.4746 10.6337 9.84091 10.1818 9.84091H5.81815C5.36628 9.84091 4.99997 9.4746 4.99997 9.02273C4.99997 8.57086 5.36628 8.20454 5.81815 8.20454H6.67066C6.95295 8.20454 7.18178 7.97571 7.18178 7.69342C7.18178 7.52067 7.09001 7.36404 6.96499 7.24483C6.67849 6.97164 6.49997 6.58622 6.49997 6.15909C6.49997 5.33066 7.17154 4.65909 7.99997 4.65909C8.8284 4.65909 9.49997 5.33066 9.49997 6.15909ZM6.99997 10.5C6.72383 10.5 6.49997 10.7239 6.49997 11C6.49997 11.2761 6.72383 11.5 6.99997 11.5H8.99997C9.27611 11.5 9.49997 11.2761 9.49997 11C9.49997 10.7239 9.27611 10.5 8.99997 10.5H6.99997Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 审核失败
|
||||
export const LabelStatusFailIcon = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.75 5.15058C5.75 3.96285 6.71285 3 7.90058 3H8H8.09942C9.28715 3 10.25 3.96285 10.25 5.15058C10.25 5.59881 10.1099 6.03584 9.84942 6.40058L9.33999 7.11378C9.11887 7.42335 9 7.79428 9 8.17471C9 9.18279 9.81721 10 10.8253 10H12C12.5523 10 13 10.4477 13 11C13 11.5523 12.5523 12 12 12H11C10.7239 12 10.5 12.2239 10.5 12.5C10.5 12.7761 10.7239 13 11 13H12C13.1046 13 14 12.1046 14 11C14 9.89543 13.1046 9 12 9H10.8253C10.3695 9 10 8.6305 10 8.17471C10 8.0027 10.0537 7.83499 10.1537 7.69502L10.6632 6.98182C11.0448 6.44748 11.25 5.80723 11.25 5.15058C11.25 3.41056 9.83944 2 8.09942 2H8H7.90058C6.16056 2 4.75 3.41056 4.75 5.15058C4.75 5.80723 4.95518 6.44748 5.33685 6.98182L5.84628 7.69502C5.94625 7.83499 6 8.0027 6 8.17471C6 8.6305 5.6305 9 5.17471 9H4C2.89543 9 2 9.89543 2 11C2 12.1046 2.89543 13 4 13H5C5.27614 13 5.5 12.7761 5.5 12.5C5.5 12.2239 5.27614 12 5 12H4C3.44772 12 3 11.5523 3 11C3 10.4477 3.44772 10 4 10H5.17471C6.18279 10 7 9.18279 7 8.17471C7 7.79428 6.88113 7.42335 6.66001 7.11378L6.15058 6.40058C5.89005 6.03584 5.75 5.59881 5.75 5.15058ZM8 11.7929L7.35355 11.1464C7.15829 10.9512 6.84171 10.9512 6.64645 11.1464C6.45118 11.3417 6.45118 11.6583 6.64645 11.8536L7.29289 12.5L6.64645 13.1464C6.45118 13.3417 6.45118 13.6583 6.64645 13.8536C6.84171 14.0488 7.15829 14.0488 7.35355 13.8536L8 13.2071L8.64645 13.8536C8.84171 14.0488 9.15829 14.0488 9.35355 13.8536C9.54882 13.6583 9.54882 13.3417 9.35355 13.1464L8.70711 12.5L9.35355 11.8536C9.54882 11.6583 9.54882 11.3417 9.35355 11.1464C9.15829 10.9512 8.84171 10.9512 8.64645 11.1464L8 11.7929Z"
|
||||
fill="#D9333E"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 试标
|
||||
export const LabelPretestIcon = () => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.2957 13.8585C9.56749 13.7983 9.71565 13.5136 9.63295 13.2478C9.55025 12.982 9.26796 12.8363 8.9952 12.8918C7.97428 13.0995 6.9092 12.9833 5.95146 12.5523C4.83986 12.0521 3.94969 11.1624 3.44885 10.0511C2.948 8.9398 2.87108 7.68363 3.2326 6.5195C3.59412 5.35538 4.36908 4.36376 5.41135 3.73165C6.45362 3.09954 7.69115 2.87063 8.89057 3.0881C10.09 3.30556 11.1684 3.95436 11.9224 4.91215C12.6764 5.86993 13.0539 7.0705 12.9837 8.28745C12.9232 9.33595 12.534 10.3342 11.878 11.1435C11.7027 11.3597 11.7015 11.6774 11.8989 11.8736C12.0964 12.0698 12.4174 12.07 12.5963 11.8567C13.424 10.8704 13.9154 9.63982 13.99 8.34549C14.0744 6.88281 13.6207 5.43982 12.7144 4.28863C11.8081 3.13745 10.512 2.35764 9.07039 2.09627C7.62879 1.83489 6.14137 2.11002 4.88864 2.86977C3.63592 3.62951 2.70447 4.82136 2.26995 6.22055C1.83543 7.61974 1.92788 9.12957 2.52986 10.4653C3.13184 11.801 4.20175 12.8703 5.53781 13.4715C6.72011 14.0036 8.03851 14.1365 9.2957 13.8585ZM11.25 12.5C11.25 12.7762 11.0261 13 10.75 13C10.4739 13 10.25 12.7762 10.25 12.5C10.25 12.2239 10.4739 12 10.75 12C11.0261 12 11.25 12.2239 11.25 12.5ZM5.61271 5.87133C5.47437 5.9512 5.48087 6.15302 5.62406 6.22382L6.49382 6.65387C6.52921 6.67137 6.55864 6.69895 6.57838 6.73315L7.66673 8.61824C7.69821 8.67275 7.70218 8.73891 7.67745 8.7968L7.18732 9.94423C7.11182 10.121 7.30479 10.2921 7.47124 10.196L8.16582 9.79498C8.24529 9.7491 8.3458 9.76319 8.4096 9.82916L9.97785 11.4511C10.1226 11.6008 10.3712 11.4572 10.3139 11.2571L9.69342 9.08795C9.66818 8.99972 9.70623 8.90563 9.78571 8.85974L10.4803 8.45873C10.6467 8.36263 10.595 8.10995 10.4042 8.08696L9.16544 7.93771C9.10294 7.93018 9.04763 7.89367 9.01616 7.83915L7.9278 5.95406C7.90806 5.91987 7.89888 5.88059 7.90142 5.84119L7.96386 4.87294C7.97415 4.71353 7.80262 4.60699 7.66428 4.68686L5.61271 5.87133Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const LabelStatusStopIcon = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM6.14642 5.14645C6.34168 4.95118 6.65826 4.95118 6.85352 5.14645L7.99997 6.29289L9.14642 5.14645C9.34168 4.95118 9.65826 4.95118 9.85352 5.14645C10.0488 5.34171 10.0488 5.65829 9.85352 5.85355L8.70708 7L9.85352 8.14645C10.0488 8.34171 10.0488 8.65829 9.85352 8.85355C9.65826 9.04882 9.34168 9.04882 9.14642 8.85355L7.99997 7.70711L6.85352 8.85355C6.65826 9.04882 6.34168 9.04882 6.14642 8.85355C5.95115 8.65829 5.95115 8.34171 6.14642 8.14645L7.29286 7L6.14642 5.85355C5.95115 5.65829 5.95115 5.34171 6.14642 5.14645ZM6.49997 10C6.22383 10 5.99997 10.2239 5.99997 10.5C5.99997 10.7761 6.22383 11 6.49997 11H9.49997C9.77611 11 9.99997 10.7761 9.99997 10.5C9.99997 10.2239 9.77611 10 9.49997 10H6.49997Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const InfoCircleIcon = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.7952 2.69088C11.0415 2.82056 11.1093 3.13429 10.9594 3.36884C10.8096 3.60339 10.4988 3.66949 10.2504 3.54401C9.32041 3.07434 8.26239 2.90549 7.22489 3.06856C6.0207 3.25783 4.92738 3.88116 4.15112 4.821C3.37485 5.76084 2.96929 6.95223 3.01091 8.17048C3.05254 9.38874 3.53848 10.5497 4.37708 11.4343C5.21569 12.319 6.349 12.8662 7.5633 12.9729C8.77759 13.0795 9.98894 12.7382 10.9689 12.0132C11.9489 11.2882 12.6297 10.2298 12.883 9.03743C13.1013 8.01012 12.9892 6.94459 12.5698 5.99087C12.4578 5.73606 12.5404 5.42931 12.7826 5.29217C13.0249 5.15502 13.3345 5.23949 13.4509 5.49236C13.989 6.66209 14.1384 7.97872 13.869 9.24691C13.5645 10.68 12.7462 11.9522 11.5684 12.8236C10.3906 13.6949 8.93461 14.1052 7.47512 13.977C6.01563 13.8488 4.65347 13.1911 3.64553 12.1278C2.63759 11.0645 2.05353 9.66916 2.0035 8.20491C1.95347 6.74065 2.44093 5.3087 3.37394 4.17908C4.30695 3.04947 5.62103 2.30028 7.06837 2.07278C8.34913 1.87148 9.65591 2.09101 10.7952 2.69088ZM12.5 4.19997C12.5 3.92382 12.2761 3.69997 12 3.69997C11.7239 3.69997 11.5 3.92382 11.5 4.19997C11.5 4.47611 11.7239 4.69997 12 4.69997C12.2761 4.69997 12.5 4.47611 12.5 4.19997ZM8.75 10.2501C8.75 9.83585 8.41422 9.50006 8 9.50006C7.58579 9.50006 7.25 9.83585 7.25 10.2501C7.25 10.6643 7.58579 11.0001 8 11.0001C8.41422 11.0001 8.75 10.6643 8.75 10.2501ZM8.00001 9.00006C8.24883 9.00006 8.45979 8.8171 8.49498 8.57077L8.99498 5.07077C9.01548 4.92729 8.9727 4.78196 8.87773 4.67246C8.78276 4.56296 8.64495 4.50006 8.50001 4.50006H7.50001C7.35506 4.50006 7.21725 4.56296 7.12228 4.67246C7.02731 4.78196 6.98453 4.92729 7.00503 5.07077L7.50503 8.57077C7.54022 8.8171 7.75118 9.00006 8.00001 9.00006Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
/************************* 标注状态icon ****************************/
|
||||
// 待领取
|
||||
export const TaskIcon1 = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
d="M11 4.5L13.5 6M13.5 6L13.5 11L9 14L8 14M13.5 6L9 9L8 9M8 14L8 9M8 14L7 14L2.5 11L2.5 6M2.5 6L7 9L8 9M2.5 6L5 4.5M8 6.25L8 2M8 2L9.5 3M8 2L6.5 3"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 标注中
|
||||
export const TaskIcon2 = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.7952 2.69088C11.0415 2.82056 11.1093 3.13429 10.9594 3.36884C10.8096 3.60339 10.4988 3.66949 10.2504 3.54401C9.32041 3.07434 8.26239 2.90549 7.22489 3.06856C6.0207 3.25783 4.92738 3.88116 4.15112 4.821C3.37485 5.76084 2.96929 6.95223 3.01091 8.17048C3.05254 9.38874 3.53848 10.5497 4.37708 11.4343C5.21569 12.319 6.349 12.8662 7.5633 12.9729C8.77759 13.0795 9.98894 12.7382 10.9689 12.0132C11.9489 11.2882 12.6297 10.2298 12.883 9.03743C13.1013 8.01012 12.9892 6.94459 12.5698 5.99087C12.4578 5.73606 12.5404 5.42931 12.7826 5.29217C13.0249 5.15502 13.3345 5.23949 13.4509 5.49236C13.989 6.66209 14.1384 7.97872 13.869 9.24691C13.5645 10.68 12.7462 11.9522 11.5684 12.8236C10.3906 13.6949 8.93461 14.1052 7.47512 13.977C6.01563 13.8488 4.65347 13.1911 3.64553 12.1278C2.63759 11.0645 2.05353 9.66916 2.0035 8.20491C1.95347 6.74065 2.44093 5.3087 3.37394 4.17908C4.30695 3.04947 5.62103 2.30028 7.06837 2.07278C8.34913 1.87148 9.65591 2.09101 10.7952 2.69088ZM12.5 4.19997C12.5 3.92382 12.2761 3.69997 12 3.69997C11.7239 3.69997 11.5 3.92382 11.5 4.19997C11.5 4.47611 11.7239 4.69997 12 4.69997C12.2761 4.69997 12.5 4.47611 12.5 4.19997ZM9.49006 5.99518C9.29479 5.79992 9.2948 5.48334 9.49006 5.28807C9.68532 5.09281 10.0019 5.09281 10.1972 5.28807L10.712 5.8029C10.9073 5.99816 10.9073 6.31474 10.712 6.51001C10.5167 6.70527 10.2001 6.70527 10.0049 6.51001L9.49006 5.99518ZM9.56275 6.95933L9.04078 6.43736C8.84552 6.2421 8.52893 6.2421 8.33367 6.43736L5.14645 9.62459C5.05268 9.71835 5 9.84553 5 9.97814V10.5001C5 10.7762 5.22386 11.0001 5.5 11.0001H6.02197C6.15458 11.0001 6.28175 10.9474 6.37552 10.8537L9.56275 7.66644C9.75801 7.47117 9.75801 7.15459 9.56275 6.95933Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 标注完成
|
||||
export const TaskIcon3 = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.7952 2.69088C11.0415 2.82056 11.1093 3.13429 10.9594 3.36884C10.8096 3.60339 10.4988 3.66949 10.2504 3.54401C9.32041 3.07434 8.26239 2.90549 7.22488 3.06856C6.0207 3.25783 4.92738 3.88116 4.15112 4.821C3.37485 5.76084 2.96929 6.95223 3.01091 8.17048C3.05254 9.38874 3.53848 10.5497 4.37708 11.4343C5.21569 12.319 6.349 12.8662 7.5633 12.9729C8.77759 13.0795 9.98894 12.7382 10.9689 12.0132C11.9489 11.2882 12.6297 10.2298 12.883 9.03743C13.1013 8.01012 12.9892 6.94459 12.5698 5.99087C12.4578 5.73606 12.5404 5.42931 12.7826 5.29217C13.0249 5.15502 13.3345 5.23949 13.4509 5.49236C13.989 6.66209 14.1384 7.97872 13.869 9.24691C13.5645 10.68 12.7462 11.9522 11.5684 12.8236C10.3906 13.6949 8.93461 14.1052 7.47512 13.977C6.01563 13.8488 4.65347 13.1911 3.64553 12.1278C2.63759 11.0645 2.05353 9.66916 2.0035 8.20491C1.95347 6.74065 2.44093 5.3087 3.37394 4.17908C4.30695 3.04947 5.62103 2.30028 7.06837 2.07278C8.34913 1.87148 9.65591 2.09101 10.7952 2.69088ZM12.5 4.19997C12.5 3.92382 12.2761 3.69997 12 3.69997C11.7239 3.69997 11.5 3.92382 11.5 4.19997C11.5 4.47611 11.7239 4.69997 12 4.69997C12.2761 4.69997 12.5 4.47611 12.5 4.19997ZM11.3796 6.32543C11.5593 6.11577 11.5351 5.80012 11.3254 5.62041C11.1157 5.4407 10.8001 5.46498 10.6204 5.67464L7.32524 9.51897L5.3 8.00004C5.07909 7.83435 4.76569 7.87913 4.6 8.10004C4.43432 8.32095 4.47909 8.63435 4.7 8.80004L7.1 10.6C7.31081 10.7581 7.60814 10.7255 7.77963 10.5254L11.3796 6.32543Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 审核中
|
||||
export const TaskIcon4 = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.75 5.15302C5.75 3.96529 6.71285 3.00244 7.90058 3.00244H8H8.09942C9.28715 3.00244 10.25 3.96529 10.25 5.15302C10.25 5.60125 10.1099 6.03828 9.84942 6.40302L9.33999 7.11622C9.11887 7.42579 9 7.79672 9 8.17715C9 9.18523 9.81721 10.0024 10.8253 10.0024H12.5C12.7761 10.0024 13 10.2263 13 10.5024C13 10.7786 12.7761 11.0024 12.5 11.0024H10C9.72386 11.0024 9.5 11.2263 9.5 11.5024C9.5 11.7786 9.72386 12.0024 10 12.0024H12.5C13.3284 12.0024 14 11.3309 14 10.5024C14 9.67401 13.3284 9.00244 12.5 9.00244H10.8253C10.3695 9.00244 10 8.63295 10 8.17715C10 8.00514 10.0537 7.83743 10.1537 7.69746L10.6632 6.98426C11.0448 6.44992 11.25 5.80968 11.25 5.15302C11.25 3.413 9.83944 2.00244 8.09942 2.00244H8H7.90058C6.16056 2.00244 4.75 3.413 4.75 5.15302C4.75 5.80968 4.95518 6.44992 5.33685 6.98426L5.84628 7.69746C5.94625 7.83743 6 8.00514 6 8.17715C6 8.63295 5.6305 9.00244 5.17471 9.00244H3.5C2.67157 9.00244 2 9.67401 2 10.5024C2 11.3309 2.67157 12.0024 3.5 12.0024H6C6.27614 12.0024 6.5 11.7786 6.5 11.5024C6.5 11.2263 6.27614 11.0024 6 11.0024H3.5C3.22386 11.0024 3 10.7786 3 10.5024C3 10.2263 3.22386 10.0024 3.5 10.0024H5.17471C6.18279 10.0024 7 9.18523 7 8.17715C7 7.79672 6.88113 7.42579 6.66001 7.11622L6.15058 6.40302C5.89005 6.03828 5.75 5.60125 5.75 5.15302ZM5.56 12.8774C5.25072 12.8774 5 13.1282 5 13.4374C5 13.7467 5.25072 13.9974 5.56 13.9974H10.44C10.7493 13.9974 11 13.7467 11 13.4374C11 13.1282 10.7493 12.8774 10.44 12.8774H5.56Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 审核完成
|
||||
export const TaskIcon5 = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM10.8535 5.14645C11.0488 5.34171 11.0488 5.65829 10.8535 5.85355L8.13847 8.5686C7.80583 8.90124 7.28632 8.95706 6.89061 8.70267L5.22959 7.63488C4.99731 7.48555 4.93005 7.17619 5.07938 6.94391C5.22871 6.71162 5.53806 6.64437 5.77035 6.7937L7.43137 7.8615L10.1464 5.14645C10.3417 4.95118 10.6583 4.95118 10.8535 5.14645ZM6.49997 10C6.22383 10 5.99997 10.2239 5.99997 10.5C5.99997 10.7761 6.22383 11 6.49997 11H9.49997C9.77611 11 9.99997 10.7761 9.99997 10.5C9.99997 10.2239 9.77611 10 9.49997 10H6.49997Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 复审中 / 复审完成
|
||||
export const TaskIcon6 = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3 5.5C2.72386 5.5 2.5 5.27614 2.5 5L2.5 3.5C2.5 3.22386 2.72386 3 3 3C3.27614 3 3.5 3.22386 3.5 3.5L3.5 3.72155C4.72705 2.62162 6.32645 2 8 2H8.17157C10.1152 2 11.9792 2.7721 13.3536 4.14645C13.5488 4.34171 13.5488 4.65829 13.3536 4.85355C13.1583 5.04882 12.8417 5.04882 12.6464 4.85355C11.4596 3.66674 9.84998 3 8.17157 3H8C6.55763 3 5.17992 3.54217 4.13009 4.5H4.5C4.77615 4.5 5 4.72386 5 5C5 5.27614 4.77615 5.5 4.5 5.5H3ZM11.9993 10.5C11.7231 10.5 11.4993 10.7239 11.4993 11C11.4993 11.2365 11.6634 11.4346 11.884 11.4866C10.8325 12.4528 9.44891 13 8 13H7.82843C6.15002 13 4.54036 12.3333 3.35355 11.1464C3.15829 10.9512 2.84171 10.9512 2.64645 11.1464C2.45118 11.3417 2.45118 11.6583 2.64645 11.8536C4.02079 13.2279 5.88481 14 7.82843 14H8C9.69852 14 11.3206 13.3596 12.5545 12.2286C12.6375 12.3898 12.8055 12.5 12.9993 12.5C13.2754 12.5 13.4993 12.2761 13.4993 12V11C13.4993 10.7239 13.2754 10.5 12.9993 10.5H11.9993ZM9.50049 6.15909C9.50049 6.58622 9.32196 6.97165 9.03546 7.24484C8.91043 7.36405 8.81866 7.52068 8.81866 7.69342C8.81866 7.97571 9.0475 8.20454 9.32979 8.20454H10.1823C10.6342 8.20454 11.0005 8.57086 11.0005 9.02273C11.0005 9.4746 10.6342 9.84091 10.1823 9.84091H5.81867C5.3668 9.84091 5.00048 9.4746 5.00048 9.02273C5.00048 8.57086 5.3668 8.20454 5.81867 8.20454H6.67117C6.95346 8.20454 7.1823 7.97571 7.1823 7.69342C7.1823 7.52067 7.09053 7.36404 6.96551 7.24483C6.67901 6.97164 6.50048 6.58622 6.50048 6.15909C6.50048 5.33066 7.17206 4.65909 8.00048 4.65909C8.82891 4.65909 9.50049 5.33066 9.50049 6.15909ZM7.00048 10.5C6.72434 10.5 6.50048 10.7239 6.50048 11C6.50048 11.2761 6.72434 11.5 7.00048 11.5H9.00048C9.27663 11.5 9.50048 11.2761 9.50048 11C9.50048 10.7239 9.27663 10.5 9.00048 10.5H7.00048Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
// 无法标注
|
||||
export const TaskIcon7 = ({ ...props }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM6.14642 5.14645C6.34168 4.95118 6.65826 4.95118 6.85352 5.14645L7.99997 6.29289L9.14642 5.14645C9.34168 4.95118 9.65826 4.95118 9.85352 5.14645C10.0488 5.34171 10.0488 5.65829 9.85352 5.85355L8.70708 7L9.85352 8.14645C10.0488 8.34171 10.0488 8.65829 9.85352 8.85355C9.65826 9.04882 9.34168 9.04882 9.14642 8.85355L7.99997 7.70711L6.85352 8.85355C6.65826 9.04882 6.34168 9.04882 6.14642 8.85355C5.95115 8.65829 5.95115 8.34171 6.14642 8.14645L7.29286 7L6.14642 5.85355C5.95115 5.65829 5.95115 5.34171 6.14642 5.14645ZM6.49997 10C6.22383 10 5.99997 10.2239 5.99997 10.5C5.99997 10.7761 6.22383 11 6.49997 11H9.49997C9.77611 11 9.99997 10.7761 9.99997 10.5C9.99997 10.2239 9.77611 10 9.49997 10H6.49997Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const DispatchTaskIcon = () => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 5C10 5.55228 9.55228 6 9 6C8.44772 6 8 5.55228 8 5C8 4.44772 8.44772 4 9 4C9.55228 4 10 4.44772 10 5ZM11 5C11 6.10457 10.1046 7 9 7C7.89543 7 7 6.10457 7 5C7 3.89543 7.89543 3 9 3C10.1046 3 11 3.89543 11 5ZM5.49946 8.05963C5.77041 7.57083 6.14031 7.14491 6.58467 6.80861L6.59896 6.79784C6.60985 6.78968 6.61977 6.78064 6.62868 6.77089C6.69207 6.70154 6.70423 6.59639 6.65008 6.5161L6.31589 6.02064C6.25412 5.92907 6.12954 5.90458 6.04051 5.96996L6.00048 5.99967C5.9831 6.0127 5.96582 6.02584 5.94862 6.03908C5.40862 6.45508 4.95846 6.97784 4.62691 7.57597C4.29537 8.1741 4.09059 8.83288 4.02396 9.51127C4.02184 9.53287 4.01985 9.5545 4.01801 9.57614L4.01403 9.62583C4.00577 9.73598 4.09255 9.82865 4.20294 9.8325L4.8002 9.85336C4.89699 9.85674 4.97972 9.7907 5.00494 9.70019C5.00849 9.68747 5.0109 9.67427 5.01205 9.66071L5.01361 9.64288C5.06333 9.08783 5.22851 8.54843 5.49946 8.05963ZM12.5006 8.05963C12.2296 7.57083 11.8597 7.14491 11.4154 6.80861L11.4011 6.79784C11.3902 6.78968 11.3803 6.78064 11.3713 6.77089C11.308 6.70154 11.2958 6.59639 11.35 6.5161L11.6841 6.02064C11.7459 5.92907 11.8705 5.90458 11.9595 5.96996L11.9995 5.99967C12.0169 6.0127 12.0342 6.02584 12.0514 6.03908C12.5914 6.45508 13.0416 6.97784 13.3731 7.57597C13.7047 8.1741 13.9094 8.83288 13.9761 9.51127C13.9782 9.53287 13.9802 9.5545 13.982 9.57614L13.986 9.62583C13.9943 9.73598 13.9075 9.82865 13.7971 9.8325L13.1998 9.85336C13.103 9.85674 13.0203 9.7907 12.9951 9.70019C12.9915 9.68747 12.9891 9.67427 12.988 9.66071L12.9864 9.64288C12.9367 9.08783 12.7715 8.54843 12.5006 8.05963ZM10.7219 13.6131C10.1806 13.871 9.58744 14.0045 8.98604 14.0024C8.38464 14.0003 7.79241 13.8627 7.253 13.601L7.2369 13.5931C7.22469 13.5871 7.21213 13.5824 7.19941 13.5789C7.10883 13.5539 7.00962 13.5908 6.96266 13.6755L6.67293 14.1982C6.61938 14.2948 6.65412 14.4169 6.75279 14.4666L6.79743 14.4887C6.81693 14.4983 6.83648 14.5077 6.85609 14.5171C7.51958 14.832 8.24556 14.9974 8.98256 15C9.71956 15.0026 10.4467 14.8422 11.1124 14.5319C11.132 14.5227 11.1516 14.5134 11.1712 14.504L11.216 14.4821C11.315 14.4332 11.3506 14.3113 11.2977 14.2143L11.0117 13.6896C10.9653 13.6046 10.8663 13.567 10.7756 13.5914C10.7628 13.5948 10.7503 13.5994 10.738 13.6053L10.7219 13.6131ZM4.5 13.5C5.05228 13.5 5.5 13.0523 5.5 12.5C5.5 11.9477 5.05228 11.5 4.5 11.5C3.94772 11.5 3.5 11.9477 3.5 12.5C3.5 13.0523 3.94772 13.5 4.5 13.5ZM4.5 14.5C5.60457 14.5 6.5 13.6046 6.5 12.5C6.5 11.3954 5.60457 10.5 4.5 10.5C3.39543 10.5 2.5 11.3954 2.5 12.5C2.5 13.6046 3.39543 14.5 4.5 14.5ZM14.5 12.5C14.5 13.0523 14.0523 13.5 13.5 13.5C12.9477 13.5 12.5 13.0523 12.5 12.5C12.5 11.9477 12.9477 11.5 13.5 11.5C14.0523 11.5 14.5 11.9477 14.5 12.5ZM15.5 12.5C15.5 13.6046 14.6046 14.5 13.5 14.5C12.3954 14.5 11.5 13.6046 11.5 12.5C11.5 11.3954 12.3954 10.5 13.5 10.5C14.6046 10.5 15.5 11.3954 15.5 12.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const FreeTaskIcon = () => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.89645 4.13402C11.0582 2.97225 12.9418 2.97226 14.1036 4.13402C15.2653 5.29578 15.2653 7.17936 14.1036 8.34112L12.495 9.9497C12.4169 10.0278 12.2902 10.0278 12.2121 9.9497L11.7879 9.52544C11.7098 9.44733 11.7098 9.3207 11.7879 9.24259L13.3964 7.63402C14.1677 6.86278 14.1677 5.61236 13.3964 4.84112C12.6252 4.06989 11.3748 4.06989 10.6036 4.84112L8.99497 6.4497C8.91687 6.52781 8.79024 6.52781 8.71213 6.4497L8.28787 6.02544C8.20976 5.94733 8.20976 5.8207 8.28787 5.74259L9.89645 4.13402ZM6.21213 8.9497C6.29024 9.02781 6.29024 9.15444 6.21213 9.23254L5.10355 10.3411C4.33232 11.1124 4.33232 12.3628 5.10355 13.134C5.87479 13.9053 7.12521 13.9053 7.89645 13.134L9.50503 11.5254C9.58313 11.4473 9.70976 11.4473 9.78787 11.5254L10.2121 11.9497C10.2902 12.0278 10.2902 12.1544 10.2121 12.2325L8.60355 13.8411C7.44179 15.0029 5.55821 15.0029 4.39645 13.8411C3.23469 12.6794 3.23469 10.7958 4.39645 9.63402L5.50503 8.52544C5.58313 8.44733 5.70976 8.44733 5.78787 8.52544L6.21213 8.9497ZM11.3 12.7373C11.4105 12.7373 11.5 12.8268 11.5 12.9373V14.5373C11.5 14.6478 11.4105 14.7373 11.3 14.7373H10.7C10.5895 14.7373 10.5 14.6478 10.5 14.5373V12.9373C10.5 12.8268 10.5895 12.7373 10.7 12.7373H11.3ZM13 10.4373C13 10.3268 13.0895 10.2373 13.2 10.2373H14.8C14.9105 10.2373 15 10.3268 15 10.4373V11.0373C15 11.1478 14.9105 11.2373 14.8 11.2373H13.2C13.0895 11.2373 13 11.1478 13 11.0373V10.4373ZM14.2121 13.5252C14.2902 13.4471 14.2902 13.3204 14.2121 13.2423L12.995 12.0252C12.9169 11.9471 12.7902 11.9471 12.7121 12.0252L12.2879 12.4494C12.2098 12.5275 12.2098 12.6542 12.2879 12.7323L13.505 13.9494C13.5831 14.0275 13.7098 14.0275 13.7879 13.9494L14.2121 13.5252ZM6.7 3.7373C6.58954 3.7373 6.5 3.82685 6.5 3.9373V5.5373C6.5 5.64776 6.58954 5.7373 6.7 5.7373H7.3C7.41046 5.7373 7.5 5.64776 7.5 5.5373V3.9373C7.5 3.82685 7.41046 3.7373 7.3 3.7373H6.7ZM3 8.0373C3 8.14776 3.08954 8.2373 3.2 8.2373H4.8C4.91046 8.2373 5 8.14776 5 8.0373V7.4373C5 7.32685 4.91046 7.2373 4.8 7.2373H3.2C3.08954 7.2373 3 7.32685 3 7.4373V8.0373ZM5.28787 6.44944C5.20976 6.52754 5.08313 6.52754 5.00503 6.44944L3.78787 5.23228C3.70976 5.15417 3.70976 5.02754 3.78787 4.94944L4.21213 4.52517C4.29024 4.44707 4.41687 4.44707 4.49497 4.52517L5.71213 5.74233C5.79024 5.82043 5.79024 5.94707 5.71213 6.02517L5.28787 6.44944Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
81
components/label/components/TaskStatusTag.module.css
Normal file
81
components/label/components/TaskStatusTag.module.css
Normal file
@@ -0,0 +1,81 @@
|
||||
.root {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.statusPill,
|
||||
.rejectedPill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
color 0.33s ease,
|
||||
border-color 0.33s ease,
|
||||
background-color 0.33s ease,
|
||||
opacity 0.33s ease;
|
||||
}
|
||||
|
||||
.statusPill {
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.statusText,
|
||||
.rejectedText {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.statusWaiting {
|
||||
border-color: #e7d2a7;
|
||||
background: #fbf7ee;
|
||||
color: #92641e;
|
||||
}
|
||||
|
||||
.statusActive {
|
||||
border-color: rgba(62, 106, 225, 0.18);
|
||||
background: rgba(62, 106, 225, 0.08);
|
||||
color: #3e6ae1;
|
||||
}
|
||||
|
||||
.statusComplete {
|
||||
border-color: #e4e8ee;
|
||||
background: #f7f8fa;
|
||||
color: #394150;
|
||||
}
|
||||
|
||||
.statusDanger {
|
||||
border-color: #edced2;
|
||||
background: #fbf1f2;
|
||||
color: #a33d4b;
|
||||
}
|
||||
|
||||
.rejectedPill {
|
||||
min-height: 20px;
|
||||
padding: 0 7px;
|
||||
border-color: #e8c98a;
|
||||
background: #fff8ed;
|
||||
color: #a46b12;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.statusPill :global(svg) {
|
||||
flex: none;
|
||||
}
|
||||
84
components/label/components/TaskStatusTag.tsx
Normal file
84
components/label/components/TaskStatusTag.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
"use client"
|
||||
|
||||
import { Box, Text } from "@mantine/core"
|
||||
import { isValidElement, useMemo } from "react"
|
||||
import { TaskStatusEnum } from "../utils/constants"
|
||||
import {
|
||||
TaskIcon1,
|
||||
TaskIcon2,
|
||||
TaskIcon3,
|
||||
TaskIcon4,
|
||||
TaskIcon5,
|
||||
TaskIcon6,
|
||||
TaskIcon7,
|
||||
} from "./Icon"
|
||||
import classes from "./TaskStatusTag.module.css"
|
||||
|
||||
interface ComponentProps {
|
||||
status: number
|
||||
rejected?: boolean
|
||||
center?: boolean
|
||||
}
|
||||
|
||||
const statusToneClassMap: Record<number, string> = {
|
||||
1: classes.statusWaiting,
|
||||
2: classes.statusActive,
|
||||
3: classes.statusComplete,
|
||||
4: classes.statusActive,
|
||||
5: classes.statusComplete,
|
||||
6: classes.statusActive,
|
||||
7: classes.statusComplete,
|
||||
8: classes.statusDanger,
|
||||
}
|
||||
|
||||
const TaskStatusTag = ({ status, rejected, center }: ComponentProps) => {
|
||||
const text = TaskStatusEnum.get(status) || "默认"
|
||||
const icon = useMemo(() => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return <TaskIcon1 />
|
||||
case 2:
|
||||
return <TaskIcon2 />
|
||||
case 3:
|
||||
return <TaskIcon3 />
|
||||
case 4:
|
||||
return <TaskIcon4 />
|
||||
case 5:
|
||||
return <TaskIcon5 />
|
||||
case 6:
|
||||
case 7:
|
||||
return <TaskIcon6 />
|
||||
case 8:
|
||||
return <TaskIcon7 />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}, [status])
|
||||
|
||||
const containerClassName = center
|
||||
? `${classes.root} ${classes.center}`
|
||||
: classes.root
|
||||
const statusClassName = `${classes.statusPill} ${
|
||||
statusToneClassMap[status] ?? classes.statusComplete
|
||||
}`
|
||||
|
||||
return (
|
||||
<Box className={containerClassName}>
|
||||
<Box className={statusClassName}>
|
||||
{isValidElement(icon) ? icon : null}
|
||||
<Text span className={classes.statusText}>
|
||||
{text}
|
||||
</Text>
|
||||
</Box>
|
||||
{rejected ? (
|
||||
<Box className={classes.rejectedPill}>
|
||||
<Text span className={classes.rejectedText}>
|
||||
返工
|
||||
</Text>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default TaskStatusTag
|
||||
81
components/layout/AppLayout.module.css
Normal file
81
components/layout/AppLayout.module.css
Normal file
@@ -0,0 +1,81 @@
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e6eb;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.headerInner {
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
width: 196px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.brandMark {
|
||||
display: inline-flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
background: #1874ff;
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.headerNav {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.headerUser {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-right: 1px solid #e5e6eb;
|
||||
background: #ffffff;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.navbarScroll {
|
||||
height: calc(100vh - 108px);
|
||||
padding: 8px 8px 0;
|
||||
}
|
||||
|
||||
.navbarFooter {
|
||||
border-top: 1px solid #e5e6eb;
|
||||
padding: 6px 0 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
|
||||
.userName {
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.userBaseCity {
|
||||
color: #86909c;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
@@ -20,7 +20,12 @@ import {
|
||||
import Avvvatars from "avvvatars-react"
|
||||
|
||||
import { useDisclosure, useMediaQuery } from "@mantine/hooks"
|
||||
import { IconLogout, IconMoon, IconSun } from "@tabler/icons-react"
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconLogout,
|
||||
IconMoon,
|
||||
IconSun,
|
||||
} from "@tabler/icons-react"
|
||||
import cx from "clsx"
|
||||
import { Suspense, useEffect, useMemo, useState } from "react"
|
||||
import actionToggleClasses from "./ActionToggle.module.css"
|
||||
@@ -30,9 +35,11 @@ import { useUserStore } from "@/app/store/user"
|
||||
import { usePathname, useRouter } from "next/navigation"
|
||||
import { usePermissionStore } from "../label/store/auth"
|
||||
import { deleteCookie } from "../login/api"
|
||||
import classes from "./AppLayout.module.css"
|
||||
import { MenuItem, withoutLayoutRoutes } from "./common"
|
||||
import { ClientIcon } from "./components/ClientIcon"
|
||||
import { LinksGroup } from "./components/NavbarLinks"
|
||||
import { getShellNavLinkStyles } from "./navStyles"
|
||||
import { useAppLayoutStore } from "./store"
|
||||
|
||||
const COMPOUND_SURNAMES = new Set([
|
||||
@@ -182,7 +189,7 @@ export default function AppLayout({
|
||||
window.location.href = toPathname
|
||||
// router.replace(toPathname)
|
||||
}}>
|
||||
<ClientIcon icon={item.icon} style={{ width: "1rem", height: "1rem" }} />
|
||||
<ClientIcon icon={item.icon} style={{ width: 14, height: 14 }} />
|
||||
{item.title}
|
||||
</a>
|
||||
))
|
||||
@@ -243,6 +250,7 @@ export default function AppLayout({
|
||||
}
|
||||
const matches = useMediaQuery("(min-width: 48em)")
|
||||
const userName = usePermissionStore((s) => s.user_name)
|
||||
const detailInfo = usePermissionStore((s) => s.detailInfo)
|
||||
const avatarDisplayValue = useMemo(
|
||||
() => getAvatarDisplayValue(userName),
|
||||
[userName]
|
||||
@@ -253,28 +261,32 @@ export default function AppLayout({
|
||||
<Suspense fallback={<></>}>{children}</Suspense>
|
||||
) : (
|
||||
<AppShell
|
||||
header={{ height: 55 }}
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: isOpen ? 200 : 40,
|
||||
width: isOpen ? 196 : 48,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !mobileOpened },
|
||||
}}>
|
||||
<AppShell.Header>
|
||||
<Flex h="100%" px="md" align="center">
|
||||
<AppShell.Header className={classes.header}>
|
||||
<Flex className={classes.headerInner} align="center">
|
||||
<Burger
|
||||
opened={mobileOpened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Flex flex={1} gap={0} h="100%" align="center">
|
||||
<Box w={184} visibleFrom="sm">
|
||||
<Flex className={classes.headerNav}>
|
||||
<Box className={classes.brand} visibleFrom="sm">
|
||||
<span className={classes.brandMark}>C</span>
|
||||
标注平台
|
||||
</Box>
|
||||
<Space w={"1rem"} hiddenFrom="sm" />
|
||||
{headItems}
|
||||
</Flex>
|
||||
<Flex justify="center" align="center" w={"max-content"}>
|
||||
<Flex
|
||||
className={classes.headerUser}
|
||||
justify="center"
|
||||
w={"max-content"}>
|
||||
<UnstyledButton
|
||||
display="none"
|
||||
onClick={() =>
|
||||
@@ -301,12 +313,28 @@ export default function AppLayout({
|
||||
<Divider orientation="vertical" mx={"0.5rem"} display="none" />
|
||||
<Menu shadow="md" width={220}>
|
||||
<Menu.Target>
|
||||
<UnstyledButton>
|
||||
<Flex
|
||||
align="center"
|
||||
gap={12}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
}}>
|
||||
<Avvvatars
|
||||
value={userName || "-"}
|
||||
displayValue={avatarDisplayValue}
|
||||
size={32}
|
||||
/>
|
||||
</UnstyledButton>
|
||||
<Stack gap={1}>
|
||||
<Text className={classes.userName}>{userName}</Text>
|
||||
<Text className={classes.userBaseCity}>
|
||||
{detailInfo?.base_city || "-"}
|
||||
</Text>
|
||||
</Stack>
|
||||
<IconChevronDown
|
||||
className={classes.userBaseCity}
|
||||
size={12}
|
||||
/>
|
||||
</Flex>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Label>用户信息</Menu.Label>
|
||||
@@ -327,9 +355,9 @@ export default function AppLayout({
|
||||
</Flex>
|
||||
</Flex>
|
||||
</AppShell.Header>
|
||||
<AppShell.Navbar style={{ transition: "width 0.2s ease" }}>
|
||||
<AppShell.Navbar className={classes.navbar}>
|
||||
<Stack justify="start" gap={4} flex={1}>
|
||||
<ScrollArea h="calc(100vh - 95px)">
|
||||
<ScrollArea className={classes.navbarScroll}>
|
||||
{activeHeaderMenu?.items?.map((item) => {
|
||||
if (item.items?.length) {
|
||||
if (matches) {
|
||||
@@ -359,11 +387,12 @@ export default function AppLayout({
|
||||
item.icon && (
|
||||
<ClientIcon
|
||||
icon={item.icon}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
style={{ width: 14, height: 14 }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
label={item.title}
|
||||
styles={getShellNavLinkStyles(false)}
|
||||
/>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
@@ -390,6 +419,10 @@ export default function AppLayout({
|
||||
)
|
||||
}
|
||||
} else {
|
||||
const isActive = pathname.startsWith(
|
||||
`/${activeHeaderMenu.url}/${item.url}`
|
||||
)
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
key={item.url}
|
||||
@@ -410,16 +443,15 @@ export default function AppLayout({
|
||||
router.push(`/${activeHeaderMenu.url}/${item.url}`)
|
||||
}}
|
||||
noWrap={true}
|
||||
active={pathname.startsWith(
|
||||
`/${activeHeaderMenu.url}/${item.url}`
|
||||
)}
|
||||
active={isActive}
|
||||
leftSection={
|
||||
<ClientIcon
|
||||
icon={item.icon}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
style={{ width: 14, height: 14 }}
|
||||
/>
|
||||
}
|
||||
label={item.title}
|
||||
styles={getShellNavLinkStyles(isActive)}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
@@ -427,7 +459,7 @@ export default function AppLayout({
|
||||
})}
|
||||
</ScrollArea>
|
||||
</Stack>
|
||||
<Stack justify="center" gap={0}>
|
||||
<Stack justify="center" gap={0} className={classes.navbarFooter}>
|
||||
<Flex
|
||||
justify={isOpen ? "flex-end" : "center"}
|
||||
align="center"
|
||||
@@ -442,8 +474,7 @@ export default function AppLayout({
|
||||
</Flex>
|
||||
</Stack>
|
||||
</AppShell.Navbar>
|
||||
<AppShell.Main
|
||||
bg={computedColorScheme === "light" ? "gray.0" : "gray.8"}>
|
||||
<AppShell.Main className={classes.main}>
|
||||
<Suspense fallback={<></>}>{children}</Suspense>
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@@ -1,27 +1,30 @@
|
||||
.link {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
gap: 0.5rem;
|
||||
padding: 0 14px;
|
||||
gap: 6px;
|
||||
text-decoration: none;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
font-size: var(--mantine-font-size-lg);
|
||||
border-radius: 4px;
|
||||
color: #1d2129;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
|
||||
@mixin hover {
|
||||
background-color: light-dark(
|
||||
var(--mantine-color-gray-0),
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
background-color: #eef4ff;
|
||||
color: #1874ff;
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme] &[data-active] {
|
||||
background-color: var(--mantine-primary-color-light);
|
||||
color: var(--mantine-primary-color-light-color);
|
||||
&[data-active] {
|
||||
background-color: #1874ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { NavLink, Space } from "@mantine/core"
|
||||
import { usePathname, useRouter } from "next/navigation"
|
||||
import { useState } from "react"
|
||||
import { MenuItem } from "../common"
|
||||
import { getShellNavLinkStyles } from "../navStyles"
|
||||
import { ClientIcon } from "./ClientIcon"
|
||||
|
||||
interface LinksGroupProps {
|
||||
@@ -50,6 +51,10 @@ export function LinksGroup({
|
||||
))
|
||||
: null
|
||||
|
||||
const isActive = hasLinks
|
||||
? false
|
||||
: pathname.startsWith(`/${routerUrl}/${item.url}`)
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavLink
|
||||
@@ -63,9 +68,7 @@ export function LinksGroup({
|
||||
opened={opened}
|
||||
label={item.title}
|
||||
noWrap={true}
|
||||
active={
|
||||
hasLinks ? false : pathname.startsWith(`/${routerUrl}/${item.url}`)
|
||||
}
|
||||
active={isActive}
|
||||
leftSection={
|
||||
<>
|
||||
<Space w={offset} />
|
||||
@@ -77,7 +80,8 @@ export function LinksGroup({
|
||||
)}
|
||||
</>
|
||||
}
|
||||
childrenOffset={0}>
|
||||
childrenOffset={0}
|
||||
styles={getShellNavLinkStyles(isActive)}>
|
||||
{children}
|
||||
</NavLink>
|
||||
</>
|
||||
|
||||
29
components/layout/navStyles.ts
Normal file
29
components/layout/navStyles.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
export function getShellNavLinkStyles(active: boolean) {
|
||||
return {
|
||||
root: {
|
||||
minHeight: 40,
|
||||
borderRadius: 4,
|
||||
padding: "8px 12px",
|
||||
color: active ? "#1874FF" : "#4E5969",
|
||||
backgroundColor: active ? "#E7EFFF" : "transparent",
|
||||
transition: "background-color 0.2s ease, color 0.2s ease",
|
||||
},
|
||||
body: {
|
||||
gap: 8,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: "22px",
|
||||
},
|
||||
section: {
|
||||
color: active ? "#1874FF" : "inherit",
|
||||
},
|
||||
chevron: {
|
||||
color: active ? "#1874FF" : "#86909C",
|
||||
},
|
||||
children: {
|
||||
paddingLeft: 0,
|
||||
},
|
||||
} as const
|
||||
}
|
||||
@@ -1,15 +1,16 @@
|
||||
.page {
|
||||
width: 100%;
|
||||
height: calc(100vh - 56px);
|
||||
height: calc(100vh - 60px);
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-color: #e6ebf2;
|
||||
border-radius: 12px;
|
||||
border-color: #e5e6eb;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.filterPanel {
|
||||
@@ -17,28 +18,40 @@
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-InputWrapper-label) {
|
||||
color: #1f2329;
|
||||
color: #4e5969;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
margin-bottom: 6px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Input-input),
|
||||
.filterPanel :global(.mantine-Select-input),
|
||||
.filterPanel :global(.mantine-DateInput-input),
|
||||
.filterPanel :global(.mantine-NumberInput-input),
|
||||
.filterPanel :global(.mantine-PillsInput-input),
|
||||
.filterPanel :global(.mantine-PillsInput-root),
|
||||
.filterPanel :global(.mantine-Textarea-input) {
|
||||
min-height: 36px;
|
||||
border-color: #d0d5dd;
|
||||
background: #ffffff;
|
||||
color: #31373d;
|
||||
min-height: 32px;
|
||||
border-color: #e5e6eb;
|
||||
border-radius: 4px;
|
||||
background: #f7f8fa;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
background-color 0.15s ease;
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-PillsInput-root) {
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-PillsInput-input) {
|
||||
min-height: 30px;
|
||||
background: transparent;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Textarea-input) {
|
||||
@@ -47,82 +60,246 @@
|
||||
|
||||
.filterPanel :global(.mantine-Input-input::placeholder),
|
||||
.filterPanel :global(.mantine-Select-input::placeholder),
|
||||
.filterPanel :global(.mantine-DateInput-input::placeholder),
|
||||
.filterPanel :global(.mantine-NumberInput-input::placeholder),
|
||||
.filterPanel :global(.mantine-PillsInput-input::placeholder),
|
||||
.filterPanel :global(.mantine-Textarea-input::placeholder) {
|
||||
color: #98a2b3;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Input-input:focus),
|
||||
.filterPanel :global(.mantine-Select-input:focus),
|
||||
.filterPanel :global(.mantine-DateInput-input:focus),
|
||||
.filterPanel :global(.mantine-NumberInput-input:focus),
|
||||
.filterPanel :global(.mantine-PillsInput-input:focus-within),
|
||||
.filterPanel :global(.mantine-PillsInput-root:focus-within),
|
||||
.filterPanel :global(.mantine-Textarea-input:focus) {
|
||||
border-color: #69c0ff;
|
||||
box-shadow: 0 0 0 3px rgba(105, 192, 255, 0.14);
|
||||
border-color: #1874ff;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Button-root[data-variant="transparent"]) {
|
||||
color: #168de8;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
padding-inline: 0;
|
||||
color: #1874ff;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Button-root:not([data-variant="transparent"])),
|
||||
.filterPanel :global(.mantine-Button-root),
|
||||
.headerActions :global(.mantine-Button-root) {
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
padding-inline: 14px;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
padding-inline: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: none;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Button-root[data-variant="filled"]),
|
||||
.headerActions :global(.mantine-Button-root[data-variant="filled"]) {
|
||||
--button-bg: #1874ff;
|
||||
--button-hover: #0f6ae8;
|
||||
--button-color: #ffffff;
|
||||
--button-bd: transparent;
|
||||
background: #1874ff !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Button-root[data-variant="filled"]:hover),
|
||||
.headerActions :global(.mantine-Button-root[data-variant="filled"]:hover) {
|
||||
background: #0f6ae8 !important;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Button-root[data-variant="default"]),
|
||||
.headerActions :global(.mantine-Button-root[data-variant="default"]) {
|
||||
border-color: #e5e6eb;
|
||||
background: #ffffff;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-ActionIcon-root),
|
||||
.headerActions :global(.mantine-ActionIcon-root) {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-Pill-root) {
|
||||
background: #eef7ff;
|
||||
color: #168de8;
|
||||
background: #e7efff;
|
||||
color: #1874ff;
|
||||
}
|
||||
|
||||
.filterPanel :global(.mantine-PillsInput-field),
|
||||
.filterPanel :global(.mantine-Select-section),
|
||||
.filterPanel :global(.mantine-DateInput-section) {
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.contentPanel {
|
||||
border-color: #e6ebf2;
|
||||
border-color: #e5e6eb;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-datatable-pagination) {
|
||||
padding: 12px 16px !important;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-datatable-pagination-text),
|
||||
.contentPanel :global(.mantine-datatable-pagination .mantine-Text-root) {
|
||||
color: #4e5969;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.contentPanel
|
||||
:global(.mantine-datatable-pagination button[data-variant="default"]),
|
||||
.contentPanel
|
||||
:global(.mantine-datatable-pagination button[data-variant="light"]) {
|
||||
min-height: 28px !important;
|
||||
height: 28px !important;
|
||||
padding-inline: 10px !important;
|
||||
border-radius: 4px !important;
|
||||
border-color: #e5e6eb;
|
||||
background: #ffffff;
|
||||
color: #4e5969;
|
||||
font-size: 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.contentPanel
|
||||
:global(.mantine-datatable-pagination button[data-variant="default"]:hover),
|
||||
.contentPanel
|
||||
:global(.mantine-datatable-pagination button[data-variant="light"]:hover) {
|
||||
background: #f7f8fa;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-datatable-pagination-pages) {
|
||||
--pagination-control-size: 28px;
|
||||
--pagination-control-fz: 12px;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-Pagination-dots) {
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-Pagination-control),
|
||||
.contentPanel :global(.mantine-datatable-pagination-pages-control) {
|
||||
min-width: 28px !important;
|
||||
height: 28px !important;
|
||||
border: 0;
|
||||
border-radius: 4px !important;
|
||||
background: transparent;
|
||||
color: #4e5969;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-Pagination-control:hover),
|
||||
.contentPanel :global(.mantine-datatable-pagination-pages-control:hover) {
|
||||
background: #f2f3f5;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-Pagination-control[data-active]),
|
||||
.contentPanel
|
||||
:global(.mantine-datatable-pagination-pages-control[data-active]) {
|
||||
background: #e7efff;
|
||||
border-color: transparent;
|
||||
color: #1874ff;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-Pagination-control[data-active]:hover),
|
||||
.contentPanel
|
||||
:global(.mantine-datatable-pagination-pages-control[data-active]:hover) {
|
||||
background: #dbe8ff;
|
||||
border-color: transparent;
|
||||
color: #1874ff;
|
||||
}
|
||||
|
||||
.contentPanel :global(.mantine-Pagination-control[data-disabled]),
|
||||
.contentPanel
|
||||
:global(.mantine-datatable-pagination-pages-control[data-disabled]) {
|
||||
background: transparent;
|
||||
color: #c9cdd4;
|
||||
}
|
||||
|
||||
.filterActions,
|
||||
.headerActions {
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.listHeader {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #eef2f6;
|
||||
border-bottom: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
.sectionEyebrow {
|
||||
color: #168de8;
|
||||
color: #1874ff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
color: #1f2329;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #1d2129;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.sectionDescription {
|
||||
color: #667085;
|
||||
color: #86909c;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.listHeaderTitle {
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.listHeaderCount {
|
||||
color: #86909c;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.settingTabsList {
|
||||
padding: 4px;
|
||||
gap: 8px;
|
||||
border: 1px solid #eef2f6;
|
||||
border-radius: 10px;
|
||||
background: #f8f9fb;
|
||||
}
|
||||
|
||||
.settingTabsTab {
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
color: #56606a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settingTabsTab[data-active] {
|
||||
background: #ffffff;
|
||||
color: #1f2329;
|
||||
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.settingTabsPanel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
@@ -29,7 +28,7 @@ export function SettingPage({
|
||||
return (
|
||||
<Stack
|
||||
w="100%"
|
||||
h="calc(100vh - 56px)"
|
||||
h="calc(100vh - 60px)"
|
||||
p="md"
|
||||
gap="md"
|
||||
className={mergeClassName(classes.page, className)}
|
||||
@@ -41,9 +40,9 @@ export function SettingPage({
|
||||
export function SettingPanel({
|
||||
className,
|
||||
withBorder = true,
|
||||
radius = "lg",
|
||||
radius = "sm",
|
||||
p = "md",
|
||||
shadow = "xs",
|
||||
shadow,
|
||||
...props
|
||||
}: PropsWithChildren<PaperProps>) {
|
||||
return (
|
||||
@@ -140,11 +139,9 @@ export function SettingListHeader({
|
||||
gap="sm"
|
||||
className={mergeClassName(classes.listHeader, className)}>
|
||||
<Group gap="xs">
|
||||
<Text fw={700}>{title}</Text>
|
||||
<Text className={classes.listHeaderTitle}>{title}</Text>
|
||||
{count !== undefined ? (
|
||||
<Badge variant="light" color="gray">
|
||||
{count}
|
||||
</Badge>
|
||||
<Text className={classes.listHeaderCount}>{count}</Text>
|
||||
) : null}
|
||||
</Group>
|
||||
{actions}
|
||||
@@ -188,25 +185,33 @@ export function SettingFilterActions({
|
||||
|
||||
const settingDataTableStyles = {
|
||||
header: {
|
||||
backgroundColor: "#F8F9FB",
|
||||
borderBottom: "1px solid #EEF2F6",
|
||||
color: "#56606A",
|
||||
backgroundColor: "#F7F8FA",
|
||||
borderBottom: "1px solid #E5E6EB",
|
||||
color: "#4E5969",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
},
|
||||
root: {
|
||||
height: "100%",
|
||||
maxWidth: "100%",
|
||||
minWidth: 0,
|
||||
fontSize: "14px",
|
||||
color: "#31373D",
|
||||
borderBottom: "1px solid #E8EDF3",
|
||||
borderRadius: 10,
|
||||
color: "#1D2129",
|
||||
borderBottom: "1px solid #E5E6EB",
|
||||
borderRadius: 4,
|
||||
overflow: "hidden",
|
||||
boxSizing: "border-box",
|
||||
backgroundColor: "#FFFFFF",
|
||||
},
|
||||
table: {
|
||||
backgroundColor: "#FFFFFF",
|
||||
},
|
||||
footer: {
|
||||
backgroundColor: "#FFFFFF",
|
||||
},
|
||||
pagination: {
|
||||
padding: "14px 16px 18px",
|
||||
padding: "12px 16px",
|
||||
borderTop: "1px solid #E5E6EB",
|
||||
},
|
||||
} as const
|
||||
|
||||
@@ -215,7 +220,7 @@ const settingDataTableDefaultColumnProps: DataTableDefaultColumnProps<
|
||||
> = {
|
||||
titleStyle: {
|
||||
whiteSpace: "nowrap",
|
||||
fontWeight: 600,
|
||||
fontWeight: 500,
|
||||
},
|
||||
}
|
||||
|
||||
@@ -270,12 +275,12 @@ export function SettingDataTable<T = Record<string, unknown>>(
|
||||
const tableProps = {
|
||||
withTableBorder: withTableBorder ?? true,
|
||||
withRowBorders: withRowBorders ?? true,
|
||||
striped: striped ?? true,
|
||||
highlightOnHover: highlightOnHover ?? true,
|
||||
striped: striped ?? false,
|
||||
highlightOnHover: highlightOnHover ?? false,
|
||||
defaultColumnProps:
|
||||
defaultColumnProps ??
|
||||
(settingDataTableDefaultColumnProps as DataTableDefaultColumnProps<T>),
|
||||
loaderBackgroundBlur: loaderBackgroundBlur ?? 1,
|
||||
loaderBackgroundBlur: loaderBackgroundBlur ?? 0,
|
||||
noRecordsText: noRecordsText ?? "暂无数据",
|
||||
minHeight: minHeight ?? 360,
|
||||
styles: styles
|
||||
@@ -301,11 +306,6 @@ export const settingTabsStyles = {
|
||||
borderRadius: 8,
|
||||
color: "#56606A",
|
||||
fontWeight: 600,
|
||||
"&[data-active]": {
|
||||
backgroundColor: "#FFFFFF",
|
||||
color: "#1F2329",
|
||||
boxShadow: "0 6px 18px rgba(15, 23, 42, 0.08)",
|
||||
},
|
||||
},
|
||||
panel: {
|
||||
flex: 1,
|
||||
@@ -314,3 +314,9 @@ export const settingTabsStyles = {
|
||||
paddingTop: 16,
|
||||
},
|
||||
} as const
|
||||
|
||||
export const settingTabsClassNames = {
|
||||
list: classes.settingTabsList,
|
||||
tab: classes.settingTabsTab,
|
||||
panel: classes.settingTabsPanel,
|
||||
} as const
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
import type { NextConfig } from "next"
|
||||
import { subConfigList } from "./components/layout/common"
|
||||
|
||||
const isDevelopment = process.env.NODE_ENV === "development"
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
basePath: process.env.NEXT_PUBLIC_BASE_PATH,
|
||||
output: process.env.NEXT_PUBLIC_OUTPUT_TYPE as
|
||||
// Keep build-time output selection for production builds, but avoid
|
||||
// surfacing export/middleware warnings in `next dev`.
|
||||
output: isDevelopment
|
||||
? undefined
|
||||
: (process.env.NEXT_PUBLIC_OUTPUT_TYPE as
|
||||
| "standalone"
|
||||
| "export"
|
||||
| undefined,
|
||||
| undefined),
|
||||
async rewrites() {
|
||||
// 应用代理baseAppProxy
|
||||
const repoProxy = subConfigList.map(({ source, url }) => {
|
||||
|
||||
Reference in New Issue
Block a user