新增HeaderBack,用于下级页面返回

master
LiuJiaNan 2025-10-28 15:16:58 +08:00
parent d169df6f21
commit 7143b29fb3
10 changed files with 103 additions and 7 deletions

18
components/HeaderBack/index.d.ts vendored Normal file
View File

@ -0,0 +1,18 @@
import type { FC, ReactNode } from "react";
export interface HeaderBackProps {
/** 标题 */
title: ReactNode;
/** 历史记录对象,用于返回上一页,默认使用 window.history.back */
history?: {
goBack?: () => void;
[key: string]: any;
};
/** 是否显示返回按钮,默认为 true */
previous?: boolean;
}
/** 头部返回组件 */
declare const HeaderBack: FC<HeaderBackProps>;
export default HeaderBack;

View File

@ -0,0 +1,35 @@
import { ArrowLeftOutlined } from "@ant-design/icons";
import { Divider } from "antd";
import "./index.less";
/**
* 头部返回组件
*/
function HeaderBack(props) {
const { title, history, previous = true } = props;
return (
<div className="header-back">
<div className="action">
{
previous
&& (
<>
<div
className="back"
onClick={() => history?.goBack?.() || window.history.back()}
>
<ArrowLeftOutlined style={{ fontSize: 14 }} />
<span>返回</span>
</div>
<Divider type="vertical" style={{ backgroundColor: "#dcdfe6", marginLeft: 15, marginRight: 15 }} />
</>
)
}
<div className="title">{title}</div>
</div>
</div>
);
}
export default HeaderBack;

View File

@ -0,0 +1,21 @@
.header-back {
padding: 10px 20px;
border-bottom: 1px solid #dcdfe6;
.action {
display: flex;
align-items: center;
.back {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
}
.title {
font-size: 17px;
}
}
}

View File

@ -1,13 +1,18 @@
import { Button, Col, Form, Input, Modal, Row, Spin } from "antd";
import { useEffect, useRef, useState } from "react";
const MapSelector = ({
visible,
onClose,
longitude,
latitude,
onConfirm, // 新增确认回调
}) => {
/**
* 定位组件弹窗
*/
const MapSelector = (props) => {
const {
visible,
onClose,
longitude,
latitude,
onConfirm,
} = props;
const mapContainerRef = useRef(null);
const mapInstanceRef = useRef(null);
const [loading, setLoading] = useState(false);

View File

@ -2,6 +2,9 @@ import { Button, Col, Form, Input, Row } from "antd";
import { useState } from "react";
import MapSelector from "./MapSelector";
/**
* 定位组件
*/
const Map = (props) => {
const {
longitudeProps = "longitude",

View File

@ -3,6 +3,9 @@ import { useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";
import { getFileUrl } from "../../utils/index";
/**
* PDF查看组件
*/
function Pdf(props) {
const {
visible = false,

View File

@ -1,8 +1,12 @@
import { Image } from "antd";
import { getFileUrl } from "../../utils/index";
/**
* 在查看页面中图片预览组件
*/
const PreviewImg = (props) => {
const { files = [], fileUrlKey = "filePath" } = props;
const fileUrl = getFileUrl();
return (

View File

@ -2,6 +2,9 @@ import { Button, Space } from "antd";
import { useState } from "react";
import Pdf from "../Pdf";
/**
* 在查看页面中PDF查看组件
*/
const PreviewPdf = (props) => {
const {
files = [],

View File

@ -9,6 +9,7 @@ function TablePro(props) {
rowKey = 'id',
...restProps
} = props;
const storeIndex = props.storeIndex || `${window.process.env.app.antd["ant-prefix"]}_${Math.random().toString(36).substring(2)}`;
function calcColumns() {
showIndex && columns.unshift(getIndexColumn(props.pagination));

View File

@ -1,6 +1,9 @@
import { Tag, Tooltip } from "antd";
import PreviewImg from "~/components/PreviewImg";
/**
* 在表格组件中图片查看组件
*/
const TooltipPreviewImg = (props) => {
const { files = [], fileUrlKey = "filePath" } = props;