diff --git a/react-ui/package.json b/react-ui/package.json index 2f3e506d..d718a1dc 100644 --- a/react-ui/package.json +++ b/react-ui/package.json @@ -82,6 +82,7 @@ "echarts": "^5.5.0", "echarts-gl": "~2.0.9", "fabric": "^5.3.0", + "gray-matter": "~4.0.3", "highlight.js": "^11.7.0", "lodash": "^4.17.21", "motion": "~12.23.12", @@ -122,7 +123,7 @@ "@testing-library/react": "^14.0.0", "@types/antd": "^1.0.0", "@types/express": "^4.17.14", - "@types/jest": "^29.5.1", + "@types/jest": "~29.5.14", "@types/lodash": "^4.14.194", "@types/react": "^18.0.38", "@types/react-dom": "^18.0.11", diff --git a/react-ui/src/pages/Skill/Info/index.less b/react-ui/src/pages/Skill/Info/index.less index 08f2f8bf..50b5c0a0 100644 --- a/react-ui/src/pages/Skill/Info/index.less +++ b/react-ui/src/pages/Skill/Info/index.less @@ -92,11 +92,5 @@ &__content { flex: 1; min-height: 0; - - :global { - .wmde-markdown { - border-radius: 8px !important; - } - } } } \ No newline at end of file diff --git a/react-ui/src/pages/Skill/Info/index.tsx b/react-ui/src/pages/Skill/Info/index.tsx index c9867476..18892a65 100644 --- a/react-ui/src/pages/Skill/Info/index.tsx +++ b/react-ui/src/pages/Skill/Info/index.tsx @@ -1,6 +1,7 @@ import KFIcon from '@/components/KFIcon'; import KFMdEditor from '@/components/KFMdEditor'; import DownloadSkillModal from '@/pages/Skill/components/DownloadModal'; +import FrontmatterCard from '@/pages/Skill/components/FrontmatterCard'; import { SkillData } from '@/pages/Skill/types'; import { cancelPraiseSkillReq, @@ -16,7 +17,9 @@ import { to } from '@/utils/promise'; import { useModel, useParams } from '@umijs/max'; import { Button, Flex, message } from 'antd'; import classNames from 'classnames'; +import matter from 'gray-matter'; import { useCallback, useEffect, useState } from 'react'; +import AddSkillModal from '../components/AddSkillModal'; import styles from './index.less'; function SkillInfo() { @@ -63,35 +66,60 @@ function SkillInfo() { } }, [id, info]); - // 处理下载 - const handleDownload = useCallback(async () => { - if (info!.file_tree_json) { - const treeData = parseJsonText(info!.file_tree_json); - const { close } = openAntdModal(DownloadSkillModal, { - treeData, - onOk: () => { - close(); - downloadSkill(info!.file_path); - }, - }); - } else { - downloadSkill(info!.file_path); - } - }, [info]); - - const downloadSkill = async (url: string) => { + const downloadSkill = useCallback(async (url: string) => { if (url) { const [res] = await to(downloadSkillReq(url)); if (res && res.data) { downloadFileWithUrl(res.data); } } + }, []); + + // 处理下载 + const handleDownload = useCallback(async () => { + const addLeaf = (treeData: any[]) => { + treeData.forEach((item) => { + item.isLeaf = !item.children; + if (item.children) { + addLeaf(item.children); + } + }); + }; + + if (info!.file_tree_json) { + const treeData = parseJsonText(info!.file_tree_json); + if (Array.isArray(treeData) && treeData.length > 0) { + addLeaf(treeData); + const { close } = openAntdModal(DownloadSkillModal, { + treeData, + onOk: () => { + close(); + downloadSkill(info!.file_path); + }, + }); + return; + } + } + + downloadSkill(info!.file_path); + }, [info, downloadSkill]); + + const handleEdit = () => { + const { close } = openAntdModal(AddSkillModal, { + id: id as string, + onOk: () => { + close(); + getSkillInfo(); + }, + }); }; if (!info) { return null; } + const { data: frontmatter, content: mdContent } = matter(info!.md_content || ''); + return (
@@ -120,17 +148,32 @@ function SkillInfo() { 发布 )} - + )} +
@@ -140,9 +183,10 @@ function SkillInfo() {
{info?.description || ''}
+ (cacheState?.activeTab ?? CommonTabKeys.Public); const [typeList, setTypeList] = useState([]); - const [activeTypes, setActiveTypes] = useState(cacheState?.activeType ?? []); + const [activeType, setActiveType] = useState(cacheState?.activeType); const dataListRef = useRef(null); const [typeSearchText, setTypeSearchText] = useState(''); @@ -23,10 +25,11 @@ function SkillPage() { name: typeSearchText, page: 0, size: 10000, + category_id: 3, }; - const [res] = await to(getSkillTypesReq(params)); + const [res] = await to(getAssetIcon(params)); if (res && res.data) { - setTypeList(res.data); + setTypeList([{ id: '', name: ALL_TYPE, path: 'icon-quanbuyuyan' }, ...res.data]); } }, [typeSearchText]); @@ -42,14 +45,7 @@ function SkillPage() { // 选择类型 const chooseType = (type: string) => { dataListRef.current?.resetPage(); - setActiveTypes([type]); - // setActiveTypes((prev) => { - // if (prev.includes(type)) { - // return prev.filter((v) => v !== type); - // } else { - // return [...prev, type]; - // } - // }); + setActiveType(type); }; // 切换 Tab，重置数据 @@ -63,7 +59,7 @@ function SkillPage() {
{ - skillTypes: SkillCategoryData[]; + id?: number | string; onOk: () => void; } -function AddSkillModal({ skillTypes, onOk, ...rest }: AddVersionModalProps) { +function AddSkillModal({ id, onOk, ...rest }: AddVersionModalProps) { const [uuid] = useState(Date.now()); const [form] = Form.useForm(); - // const [sliptUploadRequest, cancelUpload] = useSplitUpload(); + const [typeList, setTypeList] = useState([]); // 上传组件参数 const uploadProps: UploadProps = { @@ -45,11 +46,46 @@ function AddSkillModal({ skillTypes, onOk, ...rest }: AddVersionModalProps) { maxCount: 1, }; + // 获取分类 + useEffect(() => { + const getSkillTypes = async () => { + const params = { + page: 0, + size: 10000, + category_id: 3, + }; + const [res] = await to(getAssetIcon(params)); + if (res && res.data) { + setTypeList(res.data); + } + }; + + getSkillTypes(); + }, []); + + // 获取 Skill 详情 + useEffect(() => { + const getSkillInfo = async (id: number | string) => { + const [res] = await to(getSkillInfoReq(id)); + if (res && res.data) { + form.setFieldsValue(res.data); + } + }; + + if (id) { + getSkillInfo(id); + } + }, [id, form]); + // 上传请求 const createDatasetVersion = async (params: any) => { - const [res] = await to(createSkillReq(params)); + if (id) { + params.id = id; + } + const request = id ? updateSkillReq : createSkillReq; + const [res] = await to(request(params)); if (res) { - message.success('创建成功'); + message.success(id ? '编辑成功' : '创建成功'); onOk?.(); } }; @@ -57,20 +93,24 @@ function AddSkillModal({ skillTypes, onOk, ...rest }: AddVersionModalProps) { // 提交 const onFinish = (formData: any) => { const fileList: UploadFile[] = formData['fileList'] ?? []; - if (validateUploadFiles(fileList)) { - const data = fileList[0]?.response?.data ?? {}; - const params = { - ...omit(formData, 'fileList'), - ...data, - }; - createDatasetVersion(params); + if (id) { + createDatasetVersion(formData); + } else { + if (validateUploadFiles(fileList)) { + const data = fileList[0]?.response?.data ?? {}; + const params = { + ...omit(formData, 'fileList'), + ...data, + }; + createDatasetVersion(params); + } } }; return ( - +