Skip to content

GitLab

Unverified Commit fdb6d661 authored by Xiaomeng Zhao's avatar Xiaomeng Zhao Committed by GitHub
Browse files

Merge pull request #668 from LollipopsAndWine/dev 

feat: 集成前端界面，配置一键启动
parents 93713047 5834b147
Show whitespace changes
Inline Side-by-side
Showing with 935 additions and 0 deletions
projects/web/src/constant/pdf-color-picker.ts 0 → 100644
View file @ fdb6d661
export const PDF_COLOR_PICKER = {
title: {
line: 'rgba(121, 124, 255, 1)',
fill: 'rgba(121, 124, 255, 0.4)'
},
text: {
line: 'rgba(230, 122, 171, 1)',
fill: 'rgba(230, 122, 171, 0.4)'
},
interline_equation: {
line: 'rgba(240, 240, 124, 1)',
fill: 'rgba(240, 240, 124, 0.4)'
},
discarded: {
line: 'rgba(164,164,164,1)',
fill: 'rgba(164,164,164,0.4)'
},
image: {
line: 'rgba(149, 226, 115, 1)',
fill: 'rgba(149, 226, 115, 0.4)'
},
table: {
line: 'rgba(230, 113, 230, 1)',
fill: 'rgba(230, 113, 230, 0.4)'
},
inline_equation: {
line: 'rgba(150, 232, 172, 1)',
fill: 'rgba(150, 232, 172, 0.4)'
}
};
export const DEFAULT_COLOR_SECTION = {
line: 'rgba(166, 113, 230, 1)',
fill: 'rgba(166, 113, 230, 0.4)'
};
export const PDF_TEMPLATE_URL_KEY = 't';
\ No newline at end of file
projects/web/src/constant/route.ts 0 → 100644
View file @ fdb6d661
export enum Path {
Home = "/",
Settings = "/settings",
}
export enum SlotID {
AppBody = "app-body",
}
projects/web/src/constant/storage.ts 0 → 100644
View file @ fdb6d661
export const LOCALE_STORAGE_KEY = "locale-minerU"
\ No newline at end of file
projects/web/src/context/language-provider.tsx 0 → 100644
View file @ fdb6d661
import React from "react";
import { IntlProvider } from "react-intl";
import { useLanguageStore } from "@/store/languageStore";
import contentEn from "@/locale/en.json";
import contentZh from "@/locale/zh.json";
import sideEn from "@/locale/side/en.ts";
import sideZh from "@/locale/side/zh.ts";
import commonEn from "@/locale/common/en.json";
import commonZh from "@/locale/common/zh.json";
import { Language } from "@/constant";
const messages = {
[Language.EN_US]: {
...contentEn,
...sideEn,
...commonEn,
},
[Language.ZH_CN]: {
...contentZh,
...sideZh,
...commonZh,
},
};
export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const { language } = useLanguageStore();
return (
<IntlProvider
messages={messages[language] as unknown as Record<string, string>}
locale={language}
defaultLocale="en"
>
{children}
</IntlProvider>
);
};
projects/web/src/context/query-provider.tsx 0 → 100644
View file @ fdb6d661
// QueryProvider.tsx
import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const defaultQueryClientConfig = {
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: false,
staleTime: 5 * 60 * 1000, // 5 minutes
},
},
};
interface QueryProviderProps {
children: React.ReactNode;
}
const QueryProvider: React.FC<QueryProviderProps> = ({ children }) => {
const queryClient = new QueryClient({
...defaultQueryClientConfig,
});
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
export default QueryProvider;
projects/web/src/index.css 0 → 100644
View file @ fdb6d661
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(0, 0, 0, 0.87);
background-color: white;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
projects/web/src/locale/common/en.json 0 → 100644
View file @ fdb6d661
{
"common.cancel": "Cancel",
"common.confirm": "Confirm",
"common.retry": "retry"
}
\ No newline at end of file
projects/web/src/locale/common/zh.json 0 → 100644
View file @ fdb6d661
{
"common.cancel": "取消",
"common.confirm": "确定",
"common.retry": "retry"
}
\ No newline at end of file
projects/web/src/locale/en.json 0 → 100644
View file @ fdb6d661
{
"extractor.common.upload": "Click to upload file",
"extractor.common.try": "Try：",
"extractor.home": "Home",
"extractor.button.download": "Download",
"extractor.button.lineWrap": "Line Wrap",
"extractor.button.fullScreen": "Fullscreen",
"extractor.button.exitFullScreen": "Exit Fullscreen",
"extractor.button.showLayer": "Display recognition results",
"extractor.button.hiddenLayer": "Hide recognition results",
"extractor.error": "Extraction failed",
"extractor.law": "Please ensure that the documents you upload are legal and compliant, and we do not assume legal responsibility for the content of the documents. Data Protection Policy Children's Information Protection Policy Service Agreement | © All Rights Reserved.Shanghai ICP 2021009351-21",
"extractor.button.reUpload": "Re-Upload",
"extractor.failed": "Unable to extract, no data to display yet",
"extractor.common.extracting": "Extracting, please wait",
"extractor.common.extracting.queue": "Queuing for extraction, currently ranked at {id}",
"extractor.common.loading": "Loading",
"extractor.common.pdf.demo1": "Example1.pdf",
"extractor.common.pdf.demo2": "Example2.pdf",
"extractor.common.formula.detect.demo1": "FormulaDetail1.jpg",
"extractor.common.formula.extract.demo1": "FormulaExtract1.jpg",
"extractor.common.login.desc": "Functionality available after login",
"extractor.markdown.preview": "Preview",
"extractor.markdown.code": "Code",
"extractor.home.title": "Welcome to Miner U",
"extractor.home.subTitle": "Upload documents and intelligently extract them into Markdown format",
"extractor.side.extractTask": "Extraction Tasks",
"extractor.side.extractTask.title": "Please upload a PDF document within 5M (within 10 pages) or a JPG/PNG image",
"extractor.pdf.title": "PDF Document Extraction",
"extractor.pdf.subTitle": "Supports text/scanned PDF parsing, identifies various layout elements and converts them into multimodal Markdown format",
"extractor.common.pdf.upload.tip": "Please upload a PDF document",
"extractor.pdf.ocr": "OCR Identify Pattern",
"extractor.pdf.ocr.popover": "By default, PDF types (text-based, scanned) will be automatically recognized, and based on the recognition results, you can choose to use text recognition or OCR recognition. If enabled, all types of PDF will be recognized by OCR.",
"extractor.formula.title2": "Recognize mathematical formulas in images as LaTex format, support multi-line formulas and handwritten formula recognition",
"extractor.formula.title": "Locate the formulas within and between rows in the image and generate bounding boxes",
"extractor.formula.upload.text": "Click to upload an image",
"extractor.formula.popover.extract": "In order to obtain the best formula recognition effect, please crop the image, focus on the formula part, and upload a clear, watermark-free image of the mathematical formula, as shown below",
"extractor.formula.popover.detect": "In order to get the best formula recognition effect, please upload clear, non-watermarked images containing mathematical formulas, as shown below",
"extractor.formula.upload.accept": "Please upload a JPG/PNG image within 5M",
"extractor.formula.upload.try": "Please upload an image containing a mathematical formula Example: ",
"extractor.guide.title": "Welcome to use more open source products 🎉",
"extractor.queue": "Extract records",
"extractor.queue.delete": "Confirm to delete this file?",
"extractor.queue.extracting": "Extracting",
"extractor.feedback.title1": "Are you satisfied with the overall extraction performance?",
"extractor.feedback.title3": "Look forward to your suggestions to help us better optimize",
"extractor.feedback.up.title": "What improvements are you expecting to see?",
"extractor.feedback.down.title": "What is the reason for your dissatisfaction? ",
"extractor.feedback.up": "Satisfied",
"extractor.feedback.down": "Dissatisfied",
"extractor.feedback.input.placeholder": "Please enter your suggestions for improvement",
"extractor.feedback.input.submit": "Submit",
"extractor.feedback.success": "Thank you for the feedback",
"extractor.queue.delete.success": "Delete successfully"
}
\ No newline at end of file
projects/web/src/locale/side/en.ts 0 → 100644
View file @ fdb6d661
import { EXTRACTOR_TYPE_LIST } from "@/types/extract-task-type";
import odlLogo from "@/assets/pdf/odl-logo.svg";
import labelLLMLogo from "@/assets/pdf/label-llm.svg";
import labelULogo from "@/assets/pdf/labelU.svg";
export default {
"extractor.side.tabList": [
{
label: "PDF Extraction",
type: EXTRACTOR_TYPE_LIST.pdf,
},
// {
// label: "Formula Extraction",
// type: EXTRACTOR_TYPE_LIST.formula,
// },
],
"extractor.side.guide_list": [
{
type: "odl",
icon: odlLogo,
title: "OpenDataLab",
desc: "Covers a huge amount of high-quality, multimodal datasets",
goToText: "Go Now",
link: "https://opendatalab.com",
},
{
type: "labelU",
icon: labelULogo,
title: "Label U Labeling Tool",
desc: "Lightweight open source annotation tools",
goToText: "github",
link: "https://github.com/opendatalab/labelU",
},
{
type: "labelLLM",
icon: labelLLMLogo,
[`zh-CN-title`]: "LabelLLM Labeling Tool",
title: "LabelLLM Labeling Tool",
desc: "Specializing in dialogue annotation for large language models",
goToText: "github",
link: "https://github.com/opendatalab/LabelLLM",
},
],
};
projects/web/src/locale/side/zh.ts 0 → 100644
View file @ fdb6d661
import { EXTRACTOR_TYPE_LIST } from "@/types/extract-task-type";
import odlLogo from "@/assets/pdf/odl-logo.svg";
import labelLLMLogo from "@/assets/pdf/label-llm.svg";
import labelULogo from "@/assets/pdf/labelU.svg";
export default {
"extractor.side.tabList": [
{
label: "PDF文档提取",
type: EXTRACTOR_TYPE_LIST.pdf,
},
// {
// label: "公式检测与识别",
// type: EXTRACTOR_TYPE_LIST.formula,
// },
],
"extractor.side.guide_list": [
{
type: "odl",
icon: odlLogo,
title: "OpenDataLab",
desc: "涵盖海量优质、多模态数据集",
goToText: "立即前往",
link: "https://opendatalab.com",
},
{
type: "labelU",
icon: labelULogo,
title: "Label U 标注工具",
desc: "轻量级开源标注工具",
goToText: "github",
link: "https://github.com/opendatalab/labelU",
},
{
type: "labelLLM",
icon: labelLLMLogo,
title: "LabelLLM 标注工具",
desc: "专攻于大模型的对话标注",
goToText: "github",
link: "https://github.com/opendatalab/LabelLLM",
},
],
};
projects/web/src/locale/zh.json 0 → 100644
View file @ fdb6d661
{
"extractor.common.upload": "点击上传文件",
"extractor.common.try": "试一试：",
"extractor.home": "首页",
"extractor.button.download": "下载",
"extractor.button.lineWrap": "换行",
"extractor.button.fullScreen": "全屏",
"extractor.button.exitFullScreen": "退出全屏",
"extractor.button.showLayer": "显示识别结果",
"extractor.button.hiddenLayer": "隐藏识别结果",
"extractor.button.reUpload": "重新上传",
"extractor.error": "提取失败",
"extractor.common.loading": "加载中",
"extractor.law": "请确保您上传的文件合法合规，我们不承担因文件内容产生的法律责任。《信息保护政策》 《儿童信息保护政策》《服务协议》|© All Rights Reserved.沪ICP备2021009351号-21",
"extractor.failed": "不可提取，暂无可展示数据",
"extractor.common.extracting": "提取中，请稍等",
"extractor.common.extracting.queue": "正在排队提取，当前排在第 {id} 位",
"extractor.common.pdf.demo1": "示例1.pdf",
"extractor.common.pdf.demo2": "示例2.pdf",
"extractor.common.formula.detect.demo1": "公式检测1.jpg",
"extractor.common.formula.extract.demo1": "公式识别1.jpg",
"extractor.common.login.desc": "登录后可使用完整功能",
"extractor.markdown.preview": "预览",
"extractor.markdown.code": "代码",
"extractor.home.title": "欢迎使用 Miner U",
"extractor.home.subTitle": "上传文档，智能提取为 Markdown 格式",
"extractor.side.extractTask": "提取任务",
"extractor.side.extractTask.title": "请上传 5M 以内的 PDF 文档 （ 10 页以内）或 JPG/PNG 图片",
"extractor.pdf.title": "PDF文档提取",
"extractor.pdf.subTitle": "支持文本/扫描型 PDF 解析，识别各类版面元素并转换为多模态 Markdown 格式",
"extractor.common.pdf.upload.tip": "请上传 PDF 文档",
"extractor.pdf.ocr": "OCR 识别模式",
"extractor.pdf.ocr.popover": " 默认将自动识别PDF类型（文本型、扫描型），并根据识别结果选择采用文本识别或者OCR识别方式。 如开启，将对所有类型PDF采用OCR识别方式。",
"extractor.formula.title": "定位图片中的行内、行间公式，生成边界框",
"extractor.formula.title2": "将图片中的数学公式识别为 laTex 格式，支持多行公式、手写公式识别",
"extractor.formula.upload.text": "点击上传图片",
"extractor.formula.popover.extract": "为获得最佳的公式识别效果，请上传清晰、无水印的包含数学公式的图片，如下图",
"extractor.formula.popover.detect": "为获得最佳的公式识别效果，请裁剪图片，聚焦公式部分，上传清晰、无水印的数学公式图片，如下图",
"extractor.formula.upload.accept": "请上传 5M 以内的JPG/PNG 图片",
"extractor.formula.upload.try": "请上传包含数学公式的图片 示例：",
"extractor.guide.title": "欢迎使用更多开源产品 🎉",
"extractor.queue": "提取记录",
"extractor.queue.delete": "确认删除此文件？",
"extractor.queue.extracting": "提取中",
"extractor.feedback.title1": "您对整体提取效果是否满意 ？",
"extractor.feedback.title3": "期待您的建议，帮助我们更好的优化",
"extractor.feedback.up.title": "您期望看到哪些改进？",
"extractor.feedback.down.title": "您感到不满意的原因是？",
"extractor.feedback.up": "满意",
"extractor.feedback.down": "不满意",
"extractor.feedback.input.placeholder": "请输入您的改进建议",
"extractor.feedback.input.submit": "提交",
"extractor.feedback.success": "感谢你的反馈",
"extractor.queue.delete.success": "删除成功"
}
\ No newline at end of file
projects/web/src/main.tsx 0 → 100644
View file @ fdb6d661
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
projects/web/src/pages/extract-side/index.module.scss 0 → 100644
View file @ fdb6d661
@import '@/styles/variable.scss';
.gradientBtn {
width: 179px;
height: 37px;
border-radius: 4px;
font-size: 14px;
color: rgba(255, 255, 255, 0.95);
// background: linear-gradient(110deg, #38A0FF -33.56%, #0D53DE 32.84%, #5246FF 102.05%);
background: #3477EB;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background: #3477EB;
}
}
.linearBlue {
// TIP： 这里为啥用bg呢，因为ui稿给的参数是假的
background: url('@/assets/pdf/pdf-upload.png');
background-size: cover;
}
.tryText {
font-size: 13px;
line-height: 20px;
background: linear-gradient(107deg, #38A0FF -24.14%, #0D53DE 30.09%, #5246FF 86.61%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.extractorContainer {
min-width: $page-min-witch;
}
\ No newline at end of file
projects/web/src/pages/extract-side/index.tsx 0 → 100644
View file @ fdb6d661
import DarkLogo from "@/assets/svg/logo.svg";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import commonStyles from "./index.module.scss";
import { EXTRACTOR_TYPE_LIST } from "@/types/extract-task-type";
import extractorPdfIcon from "@/assets/pdf/extractor-pdf.svg";
import extractorTableIcon from "@/assets/pdf/extractor-table.svg";
import extractorFormulaIcon from "@/assets/pdf/extractor-formula.svg";
import { useIntl } from "react-intl";
import cls from "classnames";
import ExtractorGuide from "@/pages/extract/components/extractor-guide";
import ExtractorQueue from "@/pages/extract/components/extractor-queue";
import ExtractorLang from "@/pages/extract/components/extractor-lang";
interface IExtractorSideProps {
className?: string;
}
interface TabItem {
label: string;
type: string;
}
export const ExtractorSide = ({ className = "" }: IExtractorSideProps) => {
const navigate = useNavigate();
const params = useParams();
const location = useLocation();
const { messages } = useIntl();
const menuClass =
"px-2 py-2.5 mb-1 text-[0.875rem] text-[#121316]/[0.8] font-semibold rounded h-10 flex items-center cursor-pointer hover:bg-[#0d53de]/[0.05]";
const handleMenuClick = (type: string) => {
navigate(`/OpenSourceTools/Extractor/${type}`);
};
const goToOpenSource = () => {
navigate("/OpenSourceTools/Extractor/");
};
const tabList =
(messages?.["extractor.side.tabList"] as unknown[] as TabItem[]) || [];
const getIconStyle = (type: string) => {
const activeClassName = "!bg-[#0d53de]/[0.05] !text-[#0D53DE]";
const path = location.pathname;
const regex = /\/Extractor\/([^/]+)(\/|$)/;
const match = params?.jobID ? "" : path.match(regex)?.[1] || "/";
const getIcon = () => {
switch (type) {
case EXTRACTOR_TYPE_LIST.pdf:
return extractorPdfIcon;
case EXTRACTOR_TYPE_LIST.table:
return extractorTableIcon;
case EXTRACTOR_TYPE_LIST.formula:
return extractorFormulaIcon;
}
};
return {
icon: getIcon(),
tabClassName: match === type ? activeClassName : "",
};
};
return (
<div
className={cls(
`w-[240px] min-w-[240px] h-full px-4 py-6 flex flex-col justify-start border-r-[1px] border-y-0 border-l-0 border-solid border-[#EBECF0] select-none`,
commonStyles.linearBlue,
className
)}
>
<div className={""}>
<div className="h-[2rem] mb-6 flex justify-between items-center">
<img
className="h-full cursor-pointer"
src={DarkLogo}
alt=""
onClick={goToOpenSource}
/>
<ExtractorGuide />
</div>
{/* tab-list */}
<div className="mb-2">
{tabList.map((i) => (
<div
key={i.type}
className={cls(menuClass, getIconStyle(i.type)?.tabClassName)}
onClick={() => handleMenuClick(i.type)}
>
<img src={getIconStyle(i.type).icon} className="mr-2 w-6 h-6" />
{i.label}
</div>
))}
</div>
</div>
<div className="bg-[#0d53de]/[0.08] w-full h-[1px] mt-2 mb-4"></div>
<ExtractorQueue className="flex-1 overflow-y-auto mb-6" />
<ExtractorLang className="absolute bottom-6" />
</div>
);
};
projects/web/src/pages/extract/components/extractor-guide/index.module.scss 0 → 100644
View file @ fdb6d661
.extractorGuide {
:global {
.ant-popover-content, .ant-popover-inner {
border-radius: 12px !important;
overflow: hidden;
box-shadow: 0px 8px 26px 0px rgba(0, 0, 0, 0.12);
}
.ant-popover-inner-content {
padding: 24px !important;
}
.ant-popover-arrow {
display: none !important;
}
}
}
projects/web/src/pages/extract/components/extractor-guide/index.tsx 0 → 100644
View file @ fdb6d661
import { Popover } from "antd";
import guideToolsSvg from "@/assets/pdf/guideTools.svg";
import style from "./index.module.scss";
import { useIntl } from "react-intl";
import IconFont from "@/components/icon-font";
import { windowOpen } from "@/utils/windowOpen";
interface GuideItem {
type: string;
icon: string;
"zh-CN-title": string;
title: string;
desc: string;
goToText: string;
link: string;
}
const ExtractorGuide = () => {
const { formatMessage, messages } = useIntl();
const EXTRACTOR_GUIDE_ITEM_LIST = (messages?.["extractor.side.guide_list"] ||
[]) as unknown as GuideItem[];
const content = (
<div>
<div className="text-[1.25rem] font-semibold mt-3 mb-2 ml-4">
{formatMessage({
id: "extractor.guide.title",
})}
</div>
<hgroup>
{EXTRACTOR_GUIDE_ITEM_LIST?.map((i) => {
return (
<div
key={i.type}
className="flex p-4 items-center cursor-pointer hover:bg-[#F4F5F9] rounded group h-[6.5rem]"
onClick={() => windowOpen(i.link)}
>
<img
src={i.icon}
alt=""
className="w-[1.5rem] h-[1.5rem] transition-all mr-[0.75rem]"
/>
<div className="">
<div className="font-semibold transition-all text-[1rem]">
{i.title}
</div>
<div className="text-base text-[13px] text-[#121316]/[0.6] transition-all ">
{i.desc}
</div>
<div className="h-0 mt-2 overflow-hidden !text-[13px] text-[#121316]/[0.8] transition-all group-hover:h-auto">
{i.goToText}
<IconFont type="icon-ArrowRightOutlined" className="ml-1" />
</div>
</div>
</div>
);
})}
</hgroup>
</div>
);
return (
<Popover
overlayClassName={style.extractorGuide}
content={content}
showArrow={false}
placement="right"
>
<img
className="w-[1.32rem] h-[1.32rem] p-0.5 hover:rotate-45 transition-all cursor-pointer rounded"
src={guideToolsSvg}
alt="guideToolsSvg"
/>
</Popover>
);
};
export default ExtractorGuide;
projects/web/src/pages/extract/components/extractor-lang/index.tsx 0 → 100644
View file @ fdb6d661
import LangChangeIcon from "@/assets/pdf/lang-change.svg";
import { useLanguageStore } from "@/store/languageStore";
import cls from "classnames";
interface ExtractorLangProps {
className?: string;
}
const ExtractorLang: React.FC<ExtractorLangProps> = ({ className }) => {
const { toggleLanguage } = useLanguageStore();
const changeLang = () => {
toggleLanguage?.();
};
return (
<>
<img
onClick={() => changeLang()}
src={LangChangeIcon}
alt="LangChangeIcon"
className={cls(
"w-[1.5rem] h-[1.5rem] cursor-pointer object-cover hover:bg-[#0D53DE]/[0.1] rounded cursor-pointer",
className
)}
/>
</>
);
};
export default ExtractorLang;
projects/web/src/pages/extract/components/extractor-queue/index.tsx 0 → 100644
View file @ fdb6d661
import IconFont from "@/components/icon-font";
import { useIntl } from "react-intl";
import extractorQueueSvg from "@/assets/pdf/extractor-queue.svg";
import { useNavigate, useParams } from "react-router-dom";
import {
EXTRACTOR_TYPE_LIST,
ExtractTaskType,
} from "@/types/extract-task-type";
import cls from "classnames";
import { useLatest, useRequest } from "ahooks";
import { deleteExtractJob, getExtractorHistory } from "@/api/extract";
import { message, Popconfirm, Tooltip } from "antd";
import { useEffect } from "react";
import { ADD_TASK_LIST, UPDATE_TASK_LIST } from "@/constant/event";
import { findIndex } from "lodash";
import { TextTooltip } from "@/components/text-tooltip";
interface ExtractorQueueProps {
className?: string;
}
const ExtractorQueue: React.FC<ExtractorQueueProps> = ({ className }) => {
const { formatMessage, locale } = useIntl();
const navigate = useNavigate();
const params = useParams();
const { data: taskList, mutate } = useRequest(() => {
return getExtractorHistory({
pageNo: 1,
pageSize: 100,
}).then((res) => {
return res?.list?.filter((i) => !!i.id && !!i.type) || [];
});
});
let timeout: NodeJS.Timeout | null = null;
const activeClassName = "!bg-[#0d53de]/[0.05] !text-[#0D53DE]";
const handleExtractor = (originType: ExtractTaskType, id: string) => {
const type = originType?.split("-")[0];
const detailType = originType?.split("-")[1];
if (type === EXTRACTOR_TYPE_LIST.formula.toLowerCase()) {
navigate(`/OpenSourceTools/Extractor/formula/${id}?type=${detailType}`);
} else if (type === EXTRACTOR_TYPE_LIST.pdf.toLowerCase()) {
navigate(`/OpenSourceTools/Extractor/PDF/${id}`);
} else if (type === EXTRACTOR_TYPE_LIST.table.toLocaleLowerCase()) {
navigate(`/OpenSourceTools/Extractor/table/${id}`);
}
return;
};
const cancel = (e?: React.MouseEvent<HTMLElement>) => {
e?.stopPropagation();
e?.preventDefault();
};
const confirm = (id: string) => {
const deleteIndex = findIndex(taskList, (i) => i.id === id);
const nextJob = taskList?.[deleteIndex + 1]
? taskList?.[deleteIndex + 1]
: taskList?.[deleteIndex - 1];
mutate(taskList?.filter((i) => i.id !== id));
deleteExtractJob(id).then(() => {
message.success(formatMessage({ id: "extractor.queue.delete.success" }));
});
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
handleExtractor(nextJob?.type, nextJob?.id);
}, 10);
};
const taskListRef = useLatest(taskList);
const handleAddList = ({ detail }: CustomEvent) => {
const taskData = detail as any;
mutate(
[
{
fileName: taskData?.fileName,
id: taskData?.id,
type: taskData?.type,
state: taskData?.state, // 提取状态
},
].concat(taskListRef?.current)
);
};
useEffect(() => {
const handleUpdateList = ({ detail }: CustomEvent) => {
const taskData = detail as any;
taskListRef?.current?.forEach((i) => {
if (i.id === taskData?.id) {
i.state = taskData?.state || taskData?.state;
}
});
mutate(taskListRef?.current);
};
document.addEventListener(
UPDATE_TASK_LIST,
handleUpdateList as EventListener
);
document.addEventListener(ADD_TASK_LIST, handleAddList as EventListener);
return () => {
document.removeEventListener(
UPDATE_TASK_LIST,
handleUpdateList as EventListener
);
document.removeEventListener(
ADD_TASK_LIST,
handleAddList as EventListener
);
};
}, []);
useEffect(() => {
mutate(taskListRef?.current);
}, [locale]);
return (
<div className={cls("w-full flex flex-col mb-3", className)}>
<header className="flex items-center px-2 py-[0.625rem] text-[#121316]/[0.8] text-[0.875rem] font-semibold">
<img
src={extractorQueueSvg}
className="w-6 h-6 mr-2 "
alt="extractorQueueSvg"
/>
{formatMessage({
id: "extractor.queue",
})}
</header>
<hgroup className="overflow-auto flex-1 scrollbar-thin">
{taskList?.map((i, index) => {
return (
<div
className={cls(
"group h-[2.5rem] flex items-center px-4 py-2.5 mb-1 text-[#121316]/[0.8] pl-10 text-sm rounded h-10 flex items-center cursor-pointer hover:bg-[#0d53de]/[0.05]",
params?.jobID === String(i?.id) && activeClassName
)}
key={i?.fileName + index + i?.id}
onClick={() => handleExtractor(i.type as any, i.id)}
>
<span className="truncate mr-2 max-w-[calc(100%-2rem)]">
<TextTooltip trigger="hover" str={i?.fileName} />
</span>
<>
{i?.state === "failed" && (
<Tooltip
title={formatMessage({
id: "extractor.error",
})}
>
<IconFont
type={"icon-attentionFilled"}
className="text-[#FF8800] mr-1"
/>
</Tooltip>
)}
<Popconfirm
title={formatMessage({ id: "extractor.queue.delete" })}
description={<div className="my-4"></div>}
onConfirm={(e) => {
e?.stopPropagation();
e?.preventDefault();
confirm(i.id);
}}
onCancel={cancel}
okText={formatMessage({ id: "common.confirm" })}
cancelText={formatMessage({ id: "common.cancel" })}
okButtonProps={{
style: {
backgroundColor: "#F5483B",
},
}}
>
<IconFont
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
type="icon-shanchu"
className="hidden ml-auto text-[1rem] text-[#121316]/[0.8] hover:text-[#0D53DE] group-hover:block"
/>
</Popconfirm>
</>
</div>
);
})}
</hgroup>
</div>
);
};
export default ExtractorQueue;
projects/web/src/pages/extract/components/extractor-repo/index.module.scss 0 → 100644
View file @ fdb6d661
.githubBtn {
position: relative;
width: 100%;
cursor: pointer;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
filter: blur(0px);
z-index: 0;
&::before {
width: 100%;
height: 100%;
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(185,214,246,1) -100%, rgba(244,247,254,) 100%);
z-index: 0;
}
& > span {
border-radius: 7px;
display:inline-flex;
width: calc(100% - 2px);
height: calc(100% - 2px);
background: linear-gradient(180deg, #5C93FF1F -160.94%, rgba(255, 255, 255, 1) 80%);
z-index: 1;
filter: blur(0px);
justify-content: center;
align-items: center;
font-size: 16px;
&:hover {
background: linear-gradient(180deg, #5C93FF1F -60.94%, rgba(255, 255, 255, 1) 80%);
filter: blur(0px);
}
span:nth-child(3){
color: var(--80-text-4, rgba(18, 19, 22, 0.80));
-webkit-background-clip: text;
background-clip: text;
}
}
}
.githubText {
/* 正文/加粗text-1-semibold */
font-family: "PingFang SC";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 21px; /* 150% */
color: #121316;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment