Story排版修改
This commit is contained in:
jiangh277
parent
63ae33288d
commit
141e8d9818
|
|
@ -73,10 +73,10 @@ export default [
|
|||
],
|
||||
},
|
||||
{
|
||||
name: 'timeline',
|
||||
name: '故事',
|
||||
icon: 'smile',
|
||||
path: '/timeline',
|
||||
component: './list/basic-list',
|
||||
path: '/story',
|
||||
component: './story',
|
||||
},
|
||||
{
|
||||
name: '图库',
|
||||
|
|
@ -86,7 +86,7 @@ export default [
|
|||
},
|
||||
{
|
||||
path: '/timeline/:id',
|
||||
component: './list/basic-list/detail',
|
||||
component: './story/detail',
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
|
|
@ -122,64 +122,6 @@ export default [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
icon: 'table',
|
||||
name: 'list',
|
||||
routes: [
|
||||
{
|
||||
path: '/list/search',
|
||||
name: 'search-list',
|
||||
component: './list/search',
|
||||
routes: [
|
||||
{
|
||||
path: '/list/search',
|
||||
redirect: '/list/search/articles',
|
||||
},
|
||||
{
|
||||
name: 'articles',
|
||||
icon: 'smile',
|
||||
path: '/list/search/articles',
|
||||
component: './list/search/articles',
|
||||
},
|
||||
{
|
||||
name: 'projects',
|
||||
icon: 'smile',
|
||||
path: '/list/search/projects',
|
||||
component: './list/search/projects',
|
||||
},
|
||||
{
|
||||
name: 'applications',
|
||||
icon: 'smile',
|
||||
path: '/list/search/applications',
|
||||
component: './list/search/applications',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
redirect: '/list/table-list',
|
||||
},
|
||||
{
|
||||
name: 'table-list',
|
||||
icon: 'smile',
|
||||
path: '/list/table-list',
|
||||
component: './table-list',
|
||||
},
|
||||
{
|
||||
name: 'basic-list',
|
||||
icon: 'smile',
|
||||
path: '/list/basic-list',
|
||||
component: './list/basic-list',
|
||||
},
|
||||
{
|
||||
name: 'card-list',
|
||||
icon: 'smile',
|
||||
path: '/list/card-list',
|
||||
component: './list/card-list',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { fetchImage } from '@/pages/list/basic-list/service';
|
||||
import { fetchImage } from '@/pages/story/service';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
|
|
@ -18,6 +18,8 @@ const useFetchImageUrl = (imageInstanceId: string) => {
|
|||
useEffect(() => {
|
||||
if (response) {
|
||||
setImageUrl(URL.createObjectURL(response));
|
||||
} else {
|
||||
setImageUrl("error");
|
||||
}
|
||||
}, [response]);
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -35,12 +35,11 @@ const TimelineImage: React.FC<Props> = (props) => {
|
|||
const [previewVisible, setPreviewVisible] = useState(false);
|
||||
|
||||
// 构建预览列表
|
||||
const previewList = imageList.map(item => ({
|
||||
imageList.map(item => ({
|
||||
src: item.instanceId,
|
||||
title: item.imageName
|
||||
}));
|
||||
|
||||
// 预览配置
|
||||
// 预览配置
|
||||
const previewConfig = {
|
||||
visible: previewVisible,
|
||||
onVisibleChange: (visible: boolean) => setPreviewVisible(visible),
|
||||
|
|
|
|||
|
|
@ -64,4 +64,13 @@ export default {
|
|||
'pages.searchTable.tenThousand': '万',
|
||||
'pages.searchTable.batchDeletion': '批量删除',
|
||||
'pages.searchTable.batchApproval': '批量审批',
|
||||
"story.deleteSuccess": "删除成功",
|
||||
"story.deleteFailed": "删除失败",
|
||||
"story.deleteConfirm": "确认删除",
|
||||
"story.deleteConfirmDescription": "确定要删除这个故事项吗？此操作不可撤销。",
|
||||
"story.yes": "是",
|
||||
"story.no": "否",
|
||||
"story.edit": "编辑",
|
||||
"story.addSubItem": "添加子项",
|
||||
"story.delete": "删除"
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
import { Badge, Col, Row, Timeline } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
import TimelineImage from '@/components/TimelineImage';
|
||||
import TimelineItemDrawer from '@/pages/list/basic-list/components/TimelineItemDrawer';
|
||||
import { StoryItem, TimelineEvent } from '@/pages/list/basic-list/data';
|
||||
import './index.css';
|
||||
|
||||
interface TimelineItemProps {
|
||||
event: StoryItem;
|
||||
onUpdate?: (updatedEvent: TimelineEvent) => void; // 数据更新回调
|
||||
}
|
||||
|
||||
const TimelineItem = ({ event: initialEvent, onUpdate }: TimelineItemProps) => {
|
||||
const [openMainDrawer, setOpenMainDrawer] = React.useState(false);
|
||||
const [expanded, setExpanded] = React.useState(false); // 控制子项展开状态
|
||||
|
||||
const showMainDrawer = () => {
|
||||
setOpenMainDrawer(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`timeline-item ${expanded ? 'expanded' : ''}`}>
|
||||
{/* 主时间线容器 */}
|
||||
<div className={`timeline-event-container ${expanded ? 'expanded' : ''}`}>
|
||||
<div className={`timeline-event ${expanded ? 'minimized' : ''}`}>
|
||||
<Row gutter={24} align="middle">
|
||||
<Col span={6}>
|
||||
<TimelineImage
|
||||
width={200}
|
||||
height={200}
|
||||
title={initialEvent.title}
|
||||
imageInstanceId={initialEvent.coverInstanceId}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={16} offset={2}>
|
||||
<div className="timeline-content-text" onClick={showMainDrawer}>
|
||||
<h2 style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>{initialEvent.title}</h2>
|
||||
<p style={{ marginBottom: '0.5rem' }}>{initialEvent.description}</p>
|
||||
<div style={{ color: '#666', lineHeight: '1.6' }}>
|
||||
<span>故事时间：{initialEvent.storyItemTime}</span>
|
||||
<br />
|
||||
<span>创建时间：{initialEvent.createTime}</span>
|
||||
<br />
|
||||
<span>更新时间：{initialEvent.updateTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 子时间点徽章 */}
|
||||
{initialEvent.subItems && initialEvent.subItems.length > 0 && (
|
||||
<Badge
|
||||
count={`${initialEvent.subItems.length} 个子时间点`}
|
||||
style={{
|
||||
backgroundColor: '#1890ff',
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 10,
|
||||
transform: 'translate(50%, -50%)', // 修复超出边界
|
||||
padding: '0 6px',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
height: 20,
|
||||
lineHeight: '20px',
|
||||
textAlign: 'center',
|
||||
minWidth: 60,
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded(!expanded);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 子时间线列表 */}
|
||||
{initialEvent.subItems && initialEvent.subItems.length > 0 && expanded && (
|
||||
<div className="sub-timeline-wrapper">
|
||||
<Timeline
|
||||
mode="left"
|
||||
items={initialEvent.subItems.map((sub) => ({
|
||||
children: (
|
||||
<div
|
||||
className="sub-timeline-item"
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
padding: '8px 0',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.2s',
|
||||
':hover': { backgroundColor: '#f5f5f5' }, // 添加 hover 效果
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<TimelineImage title={sub.title} imageInstanceId={sub.coverInstanceId} />
|
||||
</Col>
|
||||
<Col span={18} offset={2}>
|
||||
<div className="timeline-content-text" onClick={showMainDrawer}>
|
||||
<h2 style={{ fontSize: '1.2rem', fontWeight: 'normal' }}>{sub.title}</h2>
|
||||
<p style={{ marginBottom: '0.5rem' }}>{sub.description}</p>
|
||||
<div style={{ color: '#999', lineHeight: '1.6' }}>
|
||||
<span>故事时间：{sub.storyItemTime}</span>
|
||||
<br />
|
||||
<span>创建时间：{sub.createTime}</span>
|
||||
<br />
|
||||
<span>更新时间：{sub.updateTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
),
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 主时间点详情抽屉 */}
|
||||
<TimelineItemDrawer
|
||||
storyItem={initialEvent}
|
||||
open={openMainDrawer}
|
||||
setOpen={setOpenMainDrawer}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimelineItem;
|
||||
|
|
@ -1,246 +0,0 @@
|
|||
import AddTimeLineItemModal from '@/pages/list/basic-list/components/AddTimeLineItemModal';
|
||||
import TimelineItem from '@/pages/list/basic-list/components/TimelineItem/TimelineItem';
|
||||
import {StoryItem, TimelineEvent} from '@/pages/list/basic-list/data';
|
||||
import {queryStoryItem} from '@/pages/list/basic-list/service';
|
||||
import {PageContainer} from '@ant-design/pro-components';
|
||||
import {useRequest} from '@umijs/max';
|
||||
import {FloatButton, Spin, Timeline} from 'antd';
|
||||
import {debounce} from 'lodash';
|
||||
import React, {useEffect, useRef, useState} from 'react';
|
||||
import {useParams} from 'react-router';
|
||||
import './index.css';
|
||||
import {handleStoryItemList} from "@/utils";
|
||||
|
||||
interface TimelineItemProps {
|
||||
children: React.ReactNode; // 修正：使用 ReactNode 更通用
|
||||
// label: string
|
||||
}
|
||||
|
||||
const MAX = 5;
|
||||
const Index = () => {
|
||||
const {id: lineId} = useParams<{ id: string }>();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [items, setItems] = useState<TimelineItemProps[]>([]);
|
||||
const lastScrollTopRef = useRef<number>(0);
|
||||
const isScrollingUpRef = useRef<boolean>(false);
|
||||
const isScrollingDownRef = useRef<boolean>(false); // 是否向下滚动
|
||||
const isFetchingRef = useRef(false); // 防止重复请求
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hasMoreNew, setHasMoreNew] = useState(true);
|
||||
const [hasMoreOld, setHasMoreOld] = useState(true);
|
||||
const [loadCount, setLoadCount] = useState(0);
|
||||
const [openAddItemModal, setOpenAddItemModal] = useState(false);
|
||||
|
||||
const {data: storyItemList, run} = useRequest(() => {
|
||||
return queryStoryItem(lineId ?? '');
|
||||
}, {
|
||||
manual: true,
|
||||
});
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
run();
|
||||
}, [lineId]);
|
||||
useEffect(() => {
|
||||
if (!storyItemList?.length) return;
|
||||
let timelineItems = handleStoryItemList(storyItemList);
|
||||
// 转换为 Timeline 组件需要的格式
|
||||
const formattedItems = timelineItems.map((item: StoryItem) => ({
|
||||
children: <TimelineItem event={item} onUpdate={updateTimelineItem}/>,
|
||||
}));
|
||||
|
||||
setItems(formattedItems);
|
||||
}, [storyItemList]);
|
||||
const handleScroll = () => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const {scrollTop} = container;
|
||||
|
||||
// 判断滚动方向
|
||||
if (scrollTop < lastScrollTopRef.current) {
|
||||
isScrollingUpRef.current = true;
|
||||
isScrollingDownRef.current = false;
|
||||
loadMoreOldData();
|
||||
} else if (scrollTop > lastScrollTopRef.current) {
|
||||
isScrollingUpRef.current = false;
|
||||
isScrollingDownRef.current = true;
|
||||
loadMoreNewData();
|
||||
}
|
||||
|
||||
lastScrollTopRef.current = scrollTop;
|
||||
};
|
||||
|
||||
const loadMoreOldData = async () => {
|
||||
if (loadCount >= MAX) {
|
||||
setHasMoreOld(false);
|
||||
return;
|
||||
}
|
||||
if (loading || isFetchingRef.current) return;
|
||||
isFetchingRef.current = true;
|
||||
setLoading(true);
|
||||
console.log('loadMoreData');
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
let scrollTopBeforeLoad = 0;
|
||||
let beforeScrollHeight = 0;
|
||||
|
||||
if (isScrollingUpRef.current && container) {
|
||||
scrollTopBeforeLoad = container.scrollTop;
|
||||
beforeScrollHeight = container.scrollHeight;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const newItems = [
|
||||
{
|
||||
title: 'New Event Top 1',
|
||||
description: 'Description from top',
|
||||
date: new Date().toDateString(),
|
||||
},
|
||||
{
|
||||
title: 'New Event Top 2',
|
||||
description: 'Description from top',
|
||||
date: new Date().toDateString(),
|
||||
},
|
||||
];
|
||||
|
||||
const newTimelineItems = newItems.map((item, index) => ({
|
||||
children: <TimelineItem event={{...item, id: items.length + index}}/>,
|
||||
}));
|
||||
|
||||
setItems((prev) => [...newTimelineItems, ...prev]);
|
||||
setLoadCount((prev) => prev + 1);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (container && isScrollingUpRef.current) {
|
||||
const afterScrollHeight = container.scrollHeight;
|
||||
const newContentHeight = afterScrollHeight - beforeScrollHeight;
|
||||
|
||||
container.scrollTop = scrollTopBeforeLoad + newContentHeight;
|
||||
}
|
||||
|
||||
isFetchingRef.current = false;
|
||||
setLoading(false);
|
||||
});
|
||||
}, 500);
|
||||
};
|
||||
const loadMoreNewData = async () => {
|
||||
if (loadCount >= MAX) {
|
||||
setHasMoreNew(false);
|
||||
return;
|
||||
}
|
||||
if (loading || isFetchingRef.current) return;
|
||||
isFetchingRef.current = true;
|
||||
setLoading(true);
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
let scrollTopBeforeLoad = 0;
|
||||
|
||||
if (isScrollingDownRef.current && container) {
|
||||
scrollTopBeforeLoad = container.scrollTop;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const newItems = [
|
||||
{
|
||||
title: 'New Event Bottom 1',
|
||||
description: 'New data from bottom',
|
||||
date: new Date().toDateString(),
|
||||
subItems: [
|
||||
{
|
||||
title: 'New sub1 Event Bottom 1.1',
|
||||
description: 'New data from bottom',
|
||||
date: new Date().toDateString(),
|
||||
},
|
||||
{
|
||||
title: 'New Event Bottom 1.1',
|
||||
description: 'New data from bottom',
|
||||
date: new Date().toDateString(),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'New Event Bottom 2',
|
||||
description: 'New data from bottom',
|
||||
date: new Date().toDateString(),
|
||||
},
|
||||
];
|
||||
|
||||
const newTimelineItems = newItems.map((item, index) => ({
|
||||
children: <TimelineItem event={{...item, id: items.length + index}}/>,
|
||||
}));
|
||||
|
||||
setItems((prev) => [...prev, ...newTimelineItems]);
|
||||
setLoadCount((prev) => prev + 1);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (container && isScrollingDownRef.current) {
|
||||
// 不需要调整位置，因为是追加在最后
|
||||
}
|
||||
|
||||
isFetchingRef.current = false;
|
||||
setLoading(false);
|
||||
});
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const debouncedHandleScroll = debounce(handleScroll, 500);
|
||||
|
||||
// useEffect(() => {
|
||||
// const container = containerRef.current;
|
||||
// if (container) {
|
||||
// container.addEventListener('scroll', debouncedHandleScroll);
|
||||
// }
|
||||
//
|
||||
// return () => {
|
||||
// if (container) {
|
||||
// container.removeEventListener('scroll', debouncedHandleScroll);
|
||||
// }
|
||||
// };
|
||||
// }, []);
|
||||
|
||||
/*useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
}, [items]);
|
||||
*/
|
||||
const updateTimelineItem = (updatedItem: TimelineEvent) => {
|
||||
const storageKey = `timelineItems_${updatedItem.id}`;
|
||||
localStorage.setItem(storageKey, JSON.stringify(updatedItem));
|
||||
|
||||
// 刷新整个时间线
|
||||
const storedItems = localStorage.getItem(`timelineItems_${lineId}`);
|
||||
const items = storedItems ? JSON.parse(storedItems) : [];
|
||||
|
||||
setItems(items.map((item) => (item.id === updatedItem.id ? updatedItem : item)));
|
||||
};
|
||||
return (
|
||||
<PageContainer title={lineId}>
|
||||
<div className="timeline" ref={containerRef}>
|
||||
{!hasMoreOld && <div style={{textAlign: 'center', color: '#999'}}>没有更老的内容</div>}
|
||||
{loading && <Spin style={{display: 'block', margin: '20px auto'}}/>}
|
||||
<Timeline items={items} mode={'left'}/>
|
||||
{loading && <Spin style={{display: 'block', margin: '20px auto'}}/>}
|
||||
{!hasMoreNew && <div style={{textAlign: 'center', color: '#999'}}>没有更新的内容</div>}
|
||||
</div>
|
||||
<FloatButton onClick={() => setOpenAddItemModal(true)}/>
|
||||
<AddTimeLineItemModal
|
||||
visible={openAddItemModal}
|
||||
onCancel={() => {
|
||||
setOpenAddItemModal(false);
|
||||
}}
|
||||
onOk={() => {
|
||||
setOpenAddItemModal(false);
|
||||
run();
|
||||
}}
|
||||
lineId={lineId}
|
||||
isRoot={true}
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import type { Request, Response } from 'express';
|
||||
import type { CardListItemDataType } from './data.d';
|
||||
|
||||
const titles = [
|
||||
'Alipay',
|
||||
'Angular',
|
||||
'Ant Design',
|
||||
'Ant Design Pro',
|
||||
'Bootstrap',
|
||||
'React',
|
||||
'Vue',
|
||||
'Webpack',
|
||||
];
|
||||
const avatars = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
||||
];
|
||||
|
||||
const covers = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
|
||||
];
|
||||
const desc = [
|
||||
'那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
'希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
'生命就像一盒巧克力，结果往往出人意料',
|
||||
'城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
'那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
];
|
||||
|
||||
const user = [
|
||||
'付小小',
|
||||
'曲丽丽',
|
||||
'林东东',
|
||||
'周星星',
|
||||
'吴加好',
|
||||
'朱偏右',
|
||||
'鱼酱',
|
||||
'乐哥',
|
||||
'谭小仪',
|
||||
'仲尼',
|
||||
];
|
||||
|
||||
function fakeList(count: number): CardListItemDataType[] {
|
||||
const list = [];
|
||||
for (let i = 0; i < count; i += 1) {
|
||||
list.push({
|
||||
id: `fake-list-${i}`,
|
||||
owner: user[i % 10],
|
||||
title: titles[i % 8],
|
||||
avatar: avatars[i % 8],
|
||||
cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
|
||||
status: ['active', 'exception', 'normal'][i % 3] as
|
||||
| 'normal'
|
||||
| 'exception'
|
||||
| 'active'
|
||||
| 'success',
|
||||
percent: Math.ceil(Math.random() * 50) + 50,
|
||||
logo: avatars[i % 8],
|
||||
href: 'https://ant.design',
|
||||
updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
|
||||
createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
|
||||
subDescription: desc[i % 5],
|
||||
description:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
activeUser: Math.ceil(Math.random() * 100000) + 100000,
|
||||
newUser: Math.ceil(Math.random() * 1000) + 1000,
|
||||
star: Math.ceil(Math.random() * 100) + 100,
|
||||
like: Math.ceil(Math.random() * 100) + 100,
|
||||
message: Math.ceil(Math.random() * 10) + 10,
|
||||
content:
|
||||
'段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
|
||||
members: [
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
|
||||
name: '曲丽丽',
|
||||
id: 'member1',
|
||||
},
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
|
||||
name: '王昭君',
|
||||
id: 'member2',
|
||||
},
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
|
||||
name: '董娜娜',
|
||||
id: 'member3',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
function getFakeList(req: Request, res: Response) {
|
||||
const params = req.query as any;
|
||||
|
||||
const count = Number(params.count) * 1 || 20;
|
||||
|
||||
const result = fakeList(count);
|
||||
return res.json({
|
||||
data: {
|
||||
list: result,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
'GET /api/card_fake_list': getFakeList,
|
||||
};
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
export type Member = {
|
||||
avatar: string;
|
||||
name: string;
|
||||
id: string;
|
||||
};
|
||||
|
||||
export type CardListItemDataType = {
|
||||
id: string;
|
||||
owner: string;
|
||||
title: string;
|
||||
avatar: string;
|
||||
cover: string;
|
||||
status: 'normal' | 'exception' | 'active' | 'success';
|
||||
percent: number;
|
||||
logo: string;
|
||||
href: string;
|
||||
body?: any;
|
||||
updatedAt: number;
|
||||
createdAt: number;
|
||||
subDescription: string;
|
||||
description: string;
|
||||
activeUser: number;
|
||||
newUser: number;
|
||||
star: number;
|
||||
like: number;
|
||||
message: number;
|
||||
content: string;
|
||||
members: Member[];
|
||||
};
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import { Button, Card, List, Typography } from 'antd';
|
||||
import type { CardListItemDataType } from './data.d';
|
||||
import { queryFakeList } from './service';
|
||||
import useStyles from './style.style';
|
||||
const { Paragraph } = Typography;
|
||||
const CardList = () => {
|
||||
const { styles } = useStyles();
|
||||
const { data, loading } = useRequest(() => {
|
||||
return queryFakeList({
|
||||
count: 8,
|
||||
});
|
||||
});
|
||||
const list = data?.list || [];
|
||||
const content = (
|
||||
<div className={styles.pageHeaderContent}>
|
||||
<p>
|
||||
段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，
|
||||
提供跨越设计与开发的体验解决方案。
|
||||
</p>
|
||||
<div className={styles.contentLink}>
|
||||
<a>
|
||||
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '}
|
||||
快速开始
|
||||
</a>
|
||||
<a>
|
||||
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{' '}
|
||||
产品简介
|
||||
</a>
|
||||
<a>
|
||||
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '}
|
||||
产品文档
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const extraContent = (
|
||||
<div className={styles.extraImg}>
|
||||
<img
|
||||
alt="这是一个标题"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const nullData: Partial<CardListItemDataType> = {};
|
||||
return (
|
||||
<PageContainer content={content} extraContent={extraContent}>
|
||||
<div className={styles.cardList}>
|
||||
<List<Partial<CardListItemDataType>>
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
grid={{
|
||||
gutter: 16,
|
||||
xs: 1,
|
||||
sm: 2,
|
||||
md: 3,
|
||||
lg: 3,
|
||||
xl: 4,
|
||||
xxl: 4,
|
||||
}}
|
||||
dataSource={[nullData, ...list]}
|
||||
renderItem={(item) => {
|
||||
if (item && item.id) {
|
||||
return (
|
||||
<List.Item key={item.id}>
|
||||
<Card
|
||||
hoverable
|
||||
className={styles.card}
|
||||
actions={[<a key="option1">操作一</a>, <a key="option2">操作二</a>]}
|
||||
>
|
||||
<Card.Meta
|
||||
avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
|
||||
title={<a>{item.title}</a>}
|
||||
description={
|
||||
<Paragraph
|
||||
className={styles.item}
|
||||
ellipsis={{
|
||||
rows: 3,
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</Paragraph>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</List.Item>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<List.Item>
|
||||
<Button type="dashed" className={styles.newButton}>
|
||||
<PlusOutlined /> 新增产品
|
||||
</Button>
|
||||
</List.Item>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
export default CardList;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { request } from '@umijs/max';
|
||||
import type { CardListItemDataType } from './data.d';
|
||||
|
||||
export async function queryFakeList(params: {
|
||||
count: number;
|
||||
}): Promise<{ data: { list: CardListItemDataType[] } }> {
|
||||
return request('/api/card_fake_list', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
card: {
|
||||
'.ant-card-meta-title': {
|
||||
marginBottom: '12px',
|
||||
'& > a': {
|
||||
display: 'inline-block',
|
||||
maxWidth: '100%',
|
||||
color: token.colorTextHeading,
|
||||
},
|
||||
},
|
||||
'.ant-card-body:hover': {
|
||||
'.ant-card-meta-title > a': {
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
item: {
|
||||
height: '64px',
|
||||
},
|
||||
cardList: {
|
||||
'.ant-list .ant-list-item-content-single': { maxWidth: '100%' },
|
||||
},
|
||||
extraImg: {
|
||||
width: '155px',
|
||||
marginTop: '-20px',
|
||||
textAlign: 'center',
|
||||
img: { width: '100%' },
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
newButton: {
|
||||
width: '100%',
|
||||
height: '201px',
|
||||
color: token.colorTextSecondary,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderColor: token.colorBorder,
|
||||
},
|
||||
cardAvatar: {
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '48px',
|
||||
},
|
||||
cardDescription: {
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
wordBreak: 'break-all',
|
||||
},
|
||||
pageHeaderContent: {
|
||||
position: 'relative',
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: {
|
||||
paddingBottom: '30px',
|
||||
},
|
||||
},
|
||||
contentLink: {
|
||||
marginTop: '16px',
|
||||
a: {
|
||||
marginRight: '32px',
|
||||
img: {
|
||||
width: '24px',
|
||||
},
|
||||
},
|
||||
img: { marginRight: '8px', verticalAlign: 'middle' },
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: {
|
||||
a: {
|
||||
marginRight: '16px',
|
||||
},
|
||||
},
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: {
|
||||
position: 'absolute',
|
||||
bottom: '-4px',
|
||||
left: '0',
|
||||
width: '1000px',
|
||||
a: {
|
||||
marginRight: '16px',
|
||||
},
|
||||
img: {
|
||||
marginRight: '4px',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(() => {
|
||||
return {};
|
||||
});
|
||||
export default useStyles;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { DefaultOptionType } from 'antd/es/select';
|
||||
|
||||
export const categoryOptions: DefaultOptionType[] = Array.from({ length: 12 }).map((_, index) => ({
|
||||
value: `cat${index + 1}`,
|
||||
label: `类目${index + 1}`,
|
||||
}));
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
import type { Request, Response } from 'express';
|
||||
import type { ListItemDataType } from './data.d';
|
||||
|
||||
const titles = [
|
||||
'Alipay',
|
||||
'Angular',
|
||||
'Ant Design',
|
||||
'Ant Design Pro',
|
||||
'Bootstrap',
|
||||
'React',
|
||||
'Vue',
|
||||
'Webpack',
|
||||
];
|
||||
const avatars = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
||||
];
|
||||
|
||||
const covers = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
|
||||
];
|
||||
const desc = [
|
||||
'那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
'希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
'生命就像一盒巧克力，结果往往出人意料',
|
||||
'城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
'那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
];
|
||||
const user = [
|
||||
'付小小',
|
||||
'曲丽丽',
|
||||
'林东东',
|
||||
'周星星',
|
||||
'吴加好',
|
||||
'朱偏右',
|
||||
'鱼酱',
|
||||
'乐哥',
|
||||
'谭小仪',
|
||||
'仲尼',
|
||||
];
|
||||
|
||||
function fakeList(count: number): ListItemDataType[] {
|
||||
const list = [];
|
||||
for (let i = 0; i < count; i += 1) {
|
||||
list.push({
|
||||
id: `fake-list-${i}`,
|
||||
owner: user[i % 10],
|
||||
title: titles[i % 8],
|
||||
avatar: avatars[i % 8],
|
||||
cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
|
||||
status: ['active', 'exception', 'normal'][i % 3] as
|
||||
| 'normal'
|
||||
| 'exception'
|
||||
| 'active'
|
||||
| 'success',
|
||||
percent: Math.ceil(Math.random() * 50) + 50,
|
||||
logo: avatars[i % 8],
|
||||
href: 'https://ant.design',
|
||||
updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
|
||||
createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
|
||||
subDescription: desc[i % 5],
|
||||
description:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
activeUser: Math.ceil(Math.random() * 100000) + 100000,
|
||||
newUser: Math.ceil(Math.random() * 1000) + 1000,
|
||||
star: Math.ceil(Math.random() * 100) + 100,
|
||||
like: Math.ceil(Math.random() * 100) + 100,
|
||||
message: Math.ceil(Math.random() * 10) + 10,
|
||||
content:
|
||||
'段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
|
||||
members: [
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
|
||||
name: '曲丽丽',
|
||||
id: 'member1',
|
||||
},
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
|
||||
name: '王昭君',
|
||||
id: 'member2',
|
||||
},
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
|
||||
name: '董娜娜',
|
||||
id: 'member3',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
function getFakeList(req: Request, res: Response) {
|
||||
const params: any = req.query;
|
||||
|
||||
const count = params.count * 1 || 20;
|
||||
|
||||
const result = fakeList(count);
|
||||
return res.json({
|
||||
data: {
|
||||
list: result,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
'GET /api/fake_list': getFakeList,
|
||||
};
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
standardFormRow: {
|
||||
display: 'flex',
|
||||
marginBottom: '16px',
|
||||
paddingBottom: '16px',
|
||||
borderBottom: `1px dashed ${token.colorSplit}`,
|
||||
'.ant-form-item, .ant-legacy-form-item': { marginRight: '24px' },
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label': {
|
||||
label: {
|
||||
marginRight: '0',
|
||||
color: token.colorText,
|
||||
},
|
||||
},
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
|
||||
{ padding: '0', lineHeight: '32px' },
|
||||
},
|
||||
label: {
|
||||
flex: '0 0 auto',
|
||||
marginRight: '24px',
|
||||
color: token.colorTextHeading,
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'right',
|
||||
'& > span': {
|
||||
display: 'inline-block',
|
||||
height: '32px',
|
||||
lineHeight: '32px',
|
||||
'&::after': {
|
||||
content: "'：'",
|
||||
},
|
||||
},
|
||||
},
|
||||
content: {
|
||||
flex: '1 1 0',
|
||||
'.ant-form-item, .ant-legacy-form-item': {
|
||||
'&:last-child': {
|
||||
marginRight: '0',
|
||||
},
|
||||
},
|
||||
},
|
||||
standardFormRowLast: {
|
||||
marginBottom: '0',
|
||||
paddingBottom: '0',
|
||||
border: 'none',
|
||||
},
|
||||
standardFormRowBlock: {
|
||||
'.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
|
||||
{ display: 'block' },
|
||||
},
|
||||
standardFormRowGrid: {
|
||||
'.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
|
||||
{ display: 'block' },
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label': { float: 'left' },
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import useStyles from './index.style';
|
||||
type StandardFormRowProps = {
|
||||
title?: string;
|
||||
last?: boolean;
|
||||
block?: boolean;
|
||||
grid?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
const StandardFormRow: React.FC<StandardFormRowProps> = ({
|
||||
title,
|
||||
children,
|
||||
last,
|
||||
block,
|
||||
grid,
|
||||
...rest
|
||||
}) => {
|
||||
const { styles } = useStyles();
|
||||
const cls = classNames(styles.standardFormRow, {
|
||||
[styles.standardFormRowBlock]: block,
|
||||
[styles.standardFormRowLast]: last,
|
||||
[styles.standardFormRowGrid]: grid,
|
||||
});
|
||||
return (
|
||||
<div className={cls} {...rest}>
|
||||
{title && (
|
||||
<div className={styles.label}>
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.content}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default StandardFormRow;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
tagSelect: {
|
||||
position: 'relative',
|
||||
maxHeight: '32px',
|
||||
marginLeft: '-8px',
|
||||
overflow: 'hidden',
|
||||
lineHeight: '32px',
|
||||
transition: 'all 0.3s',
|
||||
userSelect: 'none',
|
||||
'.ant-tag': {
|
||||
marginRight: '24px',
|
||||
padding: '0 8px',
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
},
|
||||
trigger: {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
'span.anticon': { fontSize: '12px' },
|
||||
},
|
||||
expanded: {
|
||||
maxHeight: '200px',
|
||||
transition: 'all 0.3s',
|
||||
},
|
||||
hasExpandTag: {
|
||||
paddingRight: '50px',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import { Tag } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import { useMergedState } from 'rc-util';
|
||||
import React, { FC, useState } from 'react';
|
||||
import useStyles from './index.style';
|
||||
const { CheckableTag } = Tag;
|
||||
export interface TagSelectOptionProps {
|
||||
value: string | number;
|
||||
style?: React.CSSProperties;
|
||||
checked?: boolean;
|
||||
onChange?: (value: string | number, state: boolean) => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
const TagSelectOption: React.FC<TagSelectOptionProps> & {
|
||||
isTagSelectOption: boolean;
|
||||
} = ({ children, checked, onChange, value }) => (
|
||||
<CheckableTag
|
||||
checked={!!checked}
|
||||
key={value}
|
||||
onChange={(state) => onChange && onChange(value, state)}
|
||||
>
|
||||
{children}
|
||||
</CheckableTag>
|
||||
);
|
||||
|
||||
TagSelectOption.isTagSelectOption = true;
|
||||
|
||||
type TagSelectOptionElement = React.ReactElement<TagSelectOptionProps, typeof TagSelectOption>;
|
||||
|
||||
export interface TagSelectProps {
|
||||
onChange?: (value: (string | number)[]) => void;
|
||||
expandable?: boolean;
|
||||
value?: (string | number)[];
|
||||
defaultValue?: (string | number)[];
|
||||
style?: React.CSSProperties;
|
||||
hideCheckAll?: boolean;
|
||||
actionsText?: {
|
||||
expandText?: React.ReactNode;
|
||||
collapseText?: React.ReactNode;
|
||||
selectAllText?: React.ReactNode;
|
||||
};
|
||||
className?: string;
|
||||
Option?: TagSelectOptionProps;
|
||||
children?: TagSelectOptionElement | TagSelectOptionElement[];
|
||||
}
|
||||
const TagSelect: FC<TagSelectProps> & {
|
||||
Option: typeof TagSelectOption;
|
||||
} = (props) => {
|
||||
const { styles } = useStyles();
|
||||
const { children, hideCheckAll = false, className, style, expandable, actionsText = {} } = props;
|
||||
const [expand, setExpand] = useState<boolean>(false);
|
||||
|
||||
const [value, setValue] = useMergedState<(string | number)[]>(props.defaultValue || [], {
|
||||
value: props.value,
|
||||
defaultValue: props.defaultValue,
|
||||
onChange: props.onChange,
|
||||
});
|
||||
|
||||
const isTagSelectOption = (node: TagSelectOptionElement) =>
|
||||
node &&
|
||||
node.type &&
|
||||
(node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
|
||||
const getAllTags = () => {
|
||||
const childrenArray = React.Children.toArray(children) as TagSelectOptionElement[];
|
||||
const checkedTags = childrenArray
|
||||
.filter((child) => isTagSelectOption(child))
|
||||
.map((child) => child.props.value);
|
||||
return checkedTags || [];
|
||||
};
|
||||
const onSelectAll = (checked: boolean) => {
|
||||
let checkedTags: (string | number)[] = [];
|
||||
if (checked) {
|
||||
checkedTags = getAllTags();
|
||||
}
|
||||
setValue(checkedTags);
|
||||
};
|
||||
const handleTagChange = (tag: string | number, checked: boolean) => {
|
||||
const checkedTags: (string | number)[] = [...(value || [])];
|
||||
const index = checkedTags.indexOf(tag);
|
||||
if (checked && index === -1) {
|
||||
checkedTags.push(tag);
|
||||
} else if (!checked && index > -1) {
|
||||
checkedTags.splice(index, 1);
|
||||
}
|
||||
setValue(checkedTags);
|
||||
};
|
||||
const checkedAll = getAllTags().length === value?.length;
|
||||
const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
|
||||
const cls = classNames(styles.tagSelect, className, {
|
||||
[styles.hasExpandTag]: expandable,
|
||||
[styles.expanded]: expand,
|
||||
});
|
||||
return (
|
||||
<div className={cls} style={style}>
|
||||
{hideCheckAll ? null : (
|
||||
<CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={onSelectAll}>
|
||||
{selectAllText}
|
||||
</CheckableTag>
|
||||
)}
|
||||
{children &&
|
||||
React.Children.map(children, (child: TagSelectOptionElement) => {
|
||||
if (isTagSelectOption(child)) {
|
||||
return React.cloneElement(child, {
|
||||
key: `tag-select-${child.props.value}`,
|
||||
value: child.props.value,
|
||||
checked: value && value.indexOf(child.props.value) > -1,
|
||||
onChange: handleTagChange,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
})}
|
||||
{expandable && (
|
||||
<a
|
||||
className={styles.trigger}
|
||||
onClick={() => {
|
||||
setExpand(!expand);
|
||||
}}
|
||||
>
|
||||
{expand ? (
|
||||
<>
|
||||
{collapseText} <UpOutlined />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{expandText}
|
||||
<DownOutlined />
|
||||
</>
|
||||
)}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
TagSelect.Option = TagSelectOption;
|
||||
export default TagSelect;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
export type Member = {
|
||||
avatar: string;
|
||||
name: string;
|
||||
id: string;
|
||||
};
|
||||
|
||||
export interface Params {
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface ListItemDataType {
|
||||
id: string;
|
||||
owner: string;
|
||||
title: string;
|
||||
avatar: string;
|
||||
cover: string;
|
||||
status: 'normal' | 'exception' | 'active' | 'success';
|
||||
percent: number;
|
||||
logo: string;
|
||||
href: string;
|
||||
body?: any;
|
||||
updatedAt: number;
|
||||
createdAt: number;
|
||||
subDescription: string;
|
||||
description: string;
|
||||
activeUser: number;
|
||||
newUser: number;
|
||||
star: number;
|
||||
like: number;
|
||||
message: number;
|
||||
content: string;
|
||||
members: Member[];
|
||||
}
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
import {
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
EllipsisOutlined,
|
||||
ShareAltOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import { Avatar, Card, Col, Dropdown, Form, List, Row, Select, Tooltip } from 'antd';
|
||||
import numeral from 'numeral';
|
||||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
import { categoryOptions } from '../../mock';
|
||||
import StandardFormRow from './components/StandardFormRow';
|
||||
import TagSelect from './components/TagSelect';
|
||||
import type { ListItemDataType } from './data.d';
|
||||
import { queryFakeList } from './service';
|
||||
import useStyles from './style.style';
|
||||
export function formatWan(val: number) {
|
||||
const v = val * 1;
|
||||
if (!v || Number.isNaN(v)) return '';
|
||||
let result: React.ReactNode = val;
|
||||
if (val > 10000) {
|
||||
result = (
|
||||
<span>
|
||||
{Math.floor(val / 10000)}
|
||||
<span
|
||||
style={{
|
||||
position: 'relative',
|
||||
top: -2,
|
||||
fontSize: 14,
|
||||
fontStyle: 'normal',
|
||||
marginLeft: 2,
|
||||
}}
|
||||
>
|
||||
万
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
const formItemLayout = {
|
||||
wrapperCol: {
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
sm: {
|
||||
span: 16,
|
||||
},
|
||||
},
|
||||
};
|
||||
const CardInfo: React.FC<{
|
||||
activeUser: React.ReactNode;
|
||||
newUser: React.ReactNode;
|
||||
}> = ({ activeUser, newUser }) => {
|
||||
const { styles } = useStyles();
|
||||
return (
|
||||
<div className={styles.cardInfo}>
|
||||
<div>
|
||||
<p>活跃用户</p>
|
||||
<p>{activeUser}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>新增用户</p>
|
||||
<p>{newUser}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export const Applications: FC<Record<string, any>> = () => {
|
||||
const { styles } = useStyles();
|
||||
const { data, loading, run } = useRequest((values: any) => {
|
||||
console.log('form data', values);
|
||||
return queryFakeList({
|
||||
count: 8,
|
||||
});
|
||||
});
|
||||
|
||||
const list = data?.list || [];
|
||||
|
||||
return (
|
||||
<div className={styles.filterCardList}>
|
||||
<Card bordered={false}>
|
||||
<Form
|
||||
onValuesChange={(_, values) => {
|
||||
run(values);
|
||||
}}
|
||||
>
|
||||
<StandardFormRow
|
||||
title="所属类目"
|
||||
block
|
||||
style={{
|
||||
paddingBottom: 11,
|
||||
}}
|
||||
>
|
||||
<Form.Item name="category">
|
||||
<TagSelect expandable>
|
||||
{categoryOptions.map((category) => (
|
||||
<TagSelect.Option value={category.value!} key={category.value}>
|
||||
{category.label}
|
||||
</TagSelect.Option>
|
||||
))}
|
||||
</TagSelect>
|
||||
</Form.Item>
|
||||
</StandardFormRow>
|
||||
<StandardFormRow title="其它选项" grid last>
|
||||
<Row gutter={16}>
|
||||
<Col lg={8} md={10} sm={10} xs={24}>
|
||||
<Form.Item {...formItemLayout} name="author" label="作者">
|
||||
<Select
|
||||
placeholder="不限"
|
||||
style={{
|
||||
maxWidth: 200,
|
||||
width: '100%',
|
||||
}}
|
||||
options={[
|
||||
{
|
||||
label: '王昭君',
|
||||
value: 'lisa',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col lg={8} md={10} sm={10} xs={24}>
|
||||
<Form.Item {...formItemLayout} name="rate" label="好评度">
|
||||
<Select
|
||||
placeholder="不限"
|
||||
style={{
|
||||
maxWidth: 200,
|
||||
width: '100%',
|
||||
}}
|
||||
options={[
|
||||
{
|
||||
label: '优秀',
|
||||
value: 'good',
|
||||
},
|
||||
{
|
||||
label: '普通',
|
||||
value: 'normal',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</StandardFormRow>
|
||||
</Form>
|
||||
</Card>
|
||||
<br />
|
||||
<List<ListItemDataType>
|
||||
rowKey="id"
|
||||
grid={{
|
||||
gutter: 16,
|
||||
xs: 1,
|
||||
sm: 2,
|
||||
md: 3,
|
||||
lg: 3,
|
||||
xl: 4,
|
||||
xxl: 4,
|
||||
}}
|
||||
loading={loading}
|
||||
dataSource={list}
|
||||
renderItem={(item) => (
|
||||
<List.Item key={item.id}>
|
||||
<Card
|
||||
hoverable
|
||||
bodyStyle={{
|
||||
paddingBottom: 20,
|
||||
}}
|
||||
actions={[
|
||||
<Tooltip key="download" title="下载">
|
||||
<DownloadOutlined />
|
||||
</Tooltip>,
|
||||
<Tooltip key="edit" title="编辑">
|
||||
<EditOutlined />
|
||||
</Tooltip>,
|
||||
<Tooltip title="分享" key="share">
|
||||
<ShareAltOutlined />
|
||||
</Tooltip>,
|
||||
<Dropdown
|
||||
key="ellipsis"
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
title: '1st menu item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: '2st menu item',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<EllipsisOutlined />
|
||||
</Dropdown>,
|
||||
]}
|
||||
>
|
||||
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
|
||||
<div>
|
||||
<CardInfo
|
||||
activeUser={formatWan(item.activeUser)}
|
||||
newUser={numeral(item.newUser).format('0,0')}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Applications;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { request } from '@umijs/max';
|
||||
import type { ListItemDataType, Params } from './data.d';
|
||||
|
||||
export async function queryFakeList(
|
||||
params: Params,
|
||||
): Promise<{ data: { list: ListItemDataType[] } }> {
|
||||
return request('/api/fake_list', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
filterCardList: {
|
||||
'.ant-card-meta-content': { marginTop: '0' },
|
||||
'.ant-card-meta-avatar': { fontSize: '0' },
|
||||
'.ant-list .ant-list-item-content-single': { maxWidth: '100%' },
|
||||
},
|
||||
cardInfo: {
|
||||
marginTop: '16px',
|
||||
marginLeft: '40px',
|
||||
zoom: '1',
|
||||
'&::before, &::after': { display: 'table', content: "' '" },
|
||||
'&::after': {
|
||||
clear: 'both',
|
||||
height: '0',
|
||||
fontSize: '0',
|
||||
visibility: 'hidden',
|
||||
},
|
||||
'& > div': {
|
||||
position: 'relative',
|
||||
float: 'left',
|
||||
width: '50%',
|
||||
textAlign: 'left',
|
||||
p: {
|
||||
margin: '0',
|
||||
fontSize: '24px',
|
||||
lineHeight: '32px',
|
||||
},
|
||||
'p:first-child': {
|
||||
marginBottom: '4px',
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: '12px',
|
||||
lineHeight: '20px',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(() => {
|
||||
return {};
|
||||
});
|
||||
export default useStyles;
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
import type { Request, Response } from 'express';
|
||||
import type { ListItemDataType } from './data.d';
|
||||
|
||||
const titles = [
|
||||
'Alipay',
|
||||
'Angular',
|
||||
'Ant Design',
|
||||
'Ant Design Pro',
|
||||
'Bootstrap',
|
||||
'React',
|
||||
'Vue',
|
||||
'Webpack',
|
||||
];
|
||||
const avatars = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
||||
];
|
||||
|
||||
const covers = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
|
||||
];
|
||||
const desc = [
|
||||
'那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
'希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
'生命就像一盒巧克力，结果往往出人意料',
|
||||
'城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
'那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
];
|
||||
const user = [
|
||||
'付小小',
|
||||
'曲丽丽',
|
||||
'林东东',
|
||||
'周星星',
|
||||
'吴加好',
|
||||
'朱偏右',
|
||||
'鱼酱',
|
||||
'乐哥',
|
||||
'谭小仪',
|
||||
'仲尼',
|
||||
];
|
||||
|
||||
function fakeList(count: number): ListItemDataType[] {
|
||||
const list = [];
|
||||
for (let i = 0; i < count; i += 1) {
|
||||
list.push({
|
||||
id: `fake-list-${Math.random().toString(36).slice(2, 6)}${i}`,
|
||||
owner: user[i % 10],
|
||||
title: titles[i % 8],
|
||||
avatar: avatars[i % 8],
|
||||
cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
|
||||
status: ['active', 'exception', 'normal'][i % 3] as
|
||||
| 'normal'
|
||||
| 'exception'
|
||||
| 'active'
|
||||
| 'success',
|
||||
percent: Math.ceil(Math.random() * 50) + 50,
|
||||
logo: avatars[i % 8],
|
||||
href: 'https://ant.design',
|
||||
updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
|
||||
createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
|
||||
subDescription: desc[i % 5],
|
||||
description:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
activeUser: Math.ceil(Math.random() * 100000) + 100000,
|
||||
newUser: Math.ceil(Math.random() * 1000) + 1000,
|
||||
star: Math.ceil(Math.random() * 100) + 100,
|
||||
like: Math.ceil(Math.random() * 100) + 100,
|
||||
message: Math.ceil(Math.random() * 10) + 10,
|
||||
content:
|
||||
'段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
|
||||
members: [
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
|
||||
name: '曲丽丽',
|
||||
id: 'member1',
|
||||
},
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
|
||||
name: '王昭君',
|
||||
id: 'member2',
|
||||
},
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
|
||||
name: '董娜娜',
|
||||
id: 'member3',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
function getFakeList(req: Request, res: Response) {
|
||||
const params: any = req.query;
|
||||
|
||||
const count = params.count * 1 || 20;
|
||||
|
||||
const result = fakeList(count);
|
||||
return res.json({
|
||||
data: {
|
||||
list: result,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
'GET /api/fake_list': getFakeList,
|
||||
};
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
description: {
|
||||
maxWidth: '720px',
|
||||
lineHeight: '22px',
|
||||
},
|
||||
extra: {
|
||||
marginTop: '16px',
|
||||
color: token.colorTextSecondary,
|
||||
lineHeight: '22px',
|
||||
'& > em': {
|
||||
marginLeft: '16px',
|
||||
color: token.colorTextDisabled,
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
[`@media screen and (max-width: ${token.screenXS}px)`]: {
|
||||
'& > em': {
|
||||
display: 'block',
|
||||
marginTop: '8px',
|
||||
marginLeft: '0',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { Avatar } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import React from 'react';
|
||||
import useStyles from './index.style';
|
||||
type ArticleListContentProps = {
|
||||
data: {
|
||||
content: React.ReactNode;
|
||||
updatedAt: number;
|
||||
avatar: string;
|
||||
owner: string;
|
||||
href: string;
|
||||
};
|
||||
};
|
||||
const ArticleListContent: React.FC<ArticleListContentProps> = ({
|
||||
data: { content, updatedAt, avatar, owner, href },
|
||||
}) => {
|
||||
const { styles } = useStyles();
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.description}>{content}</div>
|
||||
<div className={styles.extra}>
|
||||
<Avatar src={avatar} size="small" />
|
||||
<a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
|
||||
<em>{dayjs(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ArticleListContent;
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
standardFormRow: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
marginBottom: '16px',
|
||||
paddingBottom: '16px',
|
||||
borderBottom: `1px dashed ${token.colorSplit}`,
|
||||
'.ant-form-item, .ant-legacy-form-item': { marginRight: '24px' },
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label': {
|
||||
label: {
|
||||
marginRight: '0',
|
||||
color: token.colorText,
|
||||
},
|
||||
},
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
|
||||
{ padding: '0', lineHeight: '32px' },
|
||||
},
|
||||
label: {
|
||||
flex: '0 0 auto',
|
||||
marginRight: '24px',
|
||||
color: token.colorTextHeading,
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'right',
|
||||
'& > span': {
|
||||
display: 'inline-block',
|
||||
height: '32px',
|
||||
lineHeight: '32px',
|
||||
'&::after': {
|
||||
content: "'：'",
|
||||
},
|
||||
},
|
||||
},
|
||||
content: {
|
||||
flex: '1 1 0',
|
||||
'.ant-form-item, .ant-legacy-form-item': {
|
||||
'&:last-child': {
|
||||
display: 'block',
|
||||
marginRight: '0',
|
||||
},
|
||||
},
|
||||
},
|
||||
standardFormRowLast: {
|
||||
marginBottom: '0',
|
||||
paddingBottom: '0',
|
||||
border: 'none',
|
||||
},
|
||||
standardFormRowBlock: {
|
||||
'.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
|
||||
{ display: 'block' },
|
||||
},
|
||||
standardFormRowGrid: {
|
||||
'.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
|
||||
{ display: 'block' },
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label': { float: 'left' },
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import useStyles from './index.style';
|
||||
type StandardFormRowProps = {
|
||||
title?: string;
|
||||
last?: boolean;
|
||||
block?: boolean;
|
||||
grid?: boolean;
|
||||
children?: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
const StandardFormRow: React.FC<StandardFormRowProps> = ({
|
||||
title,
|
||||
children,
|
||||
last,
|
||||
block,
|
||||
grid,
|
||||
...rest
|
||||
}) => {
|
||||
const { styles } = useStyles();
|
||||
const cls = classNames(styles.standardFormRow, {
|
||||
[styles.standardFormRowBlock]: block,
|
||||
[styles.standardFormRowLast]: last,
|
||||
[styles.standardFormRowGrid]: grid,
|
||||
});
|
||||
return (
|
||||
<div className={cls} {...rest}>
|
||||
{title && (
|
||||
<div className={styles.label}>
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.content}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default StandardFormRow;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
tagSelect: {
|
||||
position: 'relative',
|
||||
maxHeight: '32px',
|
||||
marginLeft: '-8px',
|
||||
overflow: 'hidden',
|
||||
lineHeight: '32px',
|
||||
transition: 'all 0.3s',
|
||||
userSelect: 'none',
|
||||
'.ant-tag': {
|
||||
marginRight: '24px',
|
||||
padding: '0 8px',
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
},
|
||||
trigger: {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
'span.anticon': { fontSize: '12px' },
|
||||
},
|
||||
expanded: {
|
||||
maxHeight: '200px',
|
||||
transition: 'all 0.3s',
|
||||
},
|
||||
hasExpandTag: {
|
||||
paddingRight: '50px',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import { Tag } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import { useMergedState } from 'rc-util';
|
||||
import React, { FC, useState } from 'react';
|
||||
import useStyles from './index.style';
|
||||
const { CheckableTag } = Tag;
|
||||
export interface TagSelectOptionProps {
|
||||
value: string | number;
|
||||
style?: React.CSSProperties;
|
||||
checked?: boolean;
|
||||
onChange?: (value: string | number, state: boolean) => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
const TagSelectOption: React.FC<TagSelectOptionProps> & {
|
||||
isTagSelectOption: boolean;
|
||||
} = ({ children, checked, onChange, value }) => (
|
||||
<CheckableTag
|
||||
checked={!!checked}
|
||||
key={value}
|
||||
onChange={(state) => onChange && onChange(value, state)}
|
||||
>
|
||||
{children}
|
||||
</CheckableTag>
|
||||
);
|
||||
|
||||
TagSelectOption.isTagSelectOption = true;
|
||||
|
||||
type TagSelectOptionElement = React.ReactElement<TagSelectOptionProps, typeof TagSelectOption>;
|
||||
|
||||
export interface TagSelectProps {
|
||||
onChange?: (value: (string | number)[]) => void;
|
||||
expandable?: boolean;
|
||||
value?: (string | number)[];
|
||||
defaultValue?: (string | number)[];
|
||||
style?: React.CSSProperties;
|
||||
hideCheckAll?: boolean;
|
||||
actionsText?: {
|
||||
expandText?: React.ReactNode;
|
||||
collapseText?: React.ReactNode;
|
||||
selectAllText?: React.ReactNode;
|
||||
};
|
||||
className?: string;
|
||||
Option?: TagSelectOptionProps;
|
||||
children?: TagSelectOptionElement | TagSelectOptionElement[];
|
||||
}
|
||||
const TagSelect: FC<TagSelectProps> & {
|
||||
Option: typeof TagSelectOption;
|
||||
} = (props) => {
|
||||
const { styles } = useStyles();
|
||||
const { children, hideCheckAll = false, className, style, expandable, actionsText = {} } = props;
|
||||
const [expand, setExpand] = useState<boolean>(false);
|
||||
|
||||
const [value, setValue] = useMergedState<(string | number)[]>(props.defaultValue || [], {
|
||||
value: props.value,
|
||||
defaultValue: props.defaultValue,
|
||||
onChange: props.onChange,
|
||||
});
|
||||
|
||||
const isTagSelectOption = (node: TagSelectOptionElement) =>
|
||||
node &&
|
||||
node.type &&
|
||||
(node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
|
||||
const getAllTags = () => {
|
||||
const childrenArray = React.Children.toArray(children) as TagSelectOptionElement[];
|
||||
const checkedTags = childrenArray
|
||||
.filter((child) => isTagSelectOption(child))
|
||||
.map((child) => child.props.value);
|
||||
return checkedTags || [];
|
||||
};
|
||||
const onSelectAll = (checked: boolean) => {
|
||||
let checkedTags: (string | number)[] = [];
|
||||
if (checked) {
|
||||
checkedTags = getAllTags();
|
||||
}
|
||||
setValue(checkedTags);
|
||||
};
|
||||
const handleTagChange = (tag: string | number, checked: boolean) => {
|
||||
const checkedTags: (string | number)[] = [...(value || [])];
|
||||
const index = checkedTags.indexOf(tag);
|
||||
if (checked && index === -1) {
|
||||
checkedTags.push(tag);
|
||||
} else if (!checked && index > -1) {
|
||||
checkedTags.splice(index, 1);
|
||||
}
|
||||
setValue(checkedTags);
|
||||
};
|
||||
const checkedAll = getAllTags().length === value?.length;
|
||||
const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
|
||||
const cls = classNames(styles.tagSelect, className, {
|
||||
[styles.hasExpandTag]: expandable,
|
||||
[styles.expanded]: expand,
|
||||
});
|
||||
return (
|
||||
<div className={cls} style={style}>
|
||||
{hideCheckAll ? null : (
|
||||
<CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={onSelectAll}>
|
||||
{selectAllText}
|
||||
</CheckableTag>
|
||||
)}
|
||||
{children &&
|
||||
React.Children.map(children, (child: TagSelectOptionElement) => {
|
||||
if (isTagSelectOption(child)) {
|
||||
return React.cloneElement(child, {
|
||||
key: `tag-select-${child.props.value}`,
|
||||
value: child.props.value,
|
||||
checked: value && value.indexOf(child.props.value) > -1,
|
||||
onChange: handleTagChange,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
})}
|
||||
{expandable && (
|
||||
<a
|
||||
className={styles.trigger}
|
||||
onClick={() => {
|
||||
setExpand(!expand);
|
||||
}}
|
||||
>
|
||||
{expand ? (
|
||||
<>
|
||||
{collapseText} <UpOutlined />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{expandText}
|
||||
<DownOutlined />
|
||||
</>
|
||||
)}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
TagSelect.Option = TagSelectOption;
|
||||
export default TagSelect;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
export type Member = {
|
||||
avatar: string;
|
||||
name: string;
|
||||
id: string;
|
||||
};
|
||||
|
||||
export interface Params {
|
||||
count: number;
|
||||
}
|
||||
export interface ListItemDataType {
|
||||
id: string;
|
||||
owner: string;
|
||||
title: string;
|
||||
avatar: string;
|
||||
cover: string;
|
||||
status: 'normal' | 'exception' | 'active' | 'success';
|
||||
percent: number;
|
||||
logo: string;
|
||||
href: string;
|
||||
body?: any;
|
||||
updatedAt: number;
|
||||
createdAt: number;
|
||||
subDescription: string;
|
||||
description: string;
|
||||
activeUser: number;
|
||||
newUser: number;
|
||||
star: number;
|
||||
like: number;
|
||||
message: number;
|
||||
content: string;
|
||||
members: Member[];
|
||||
}
|
||||
|
|
@ -1,242 +0,0 @@
|
|||
import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd';
|
||||
import { DefaultOptionType } from 'antd/es/select';
|
||||
import type { FC } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { categoryOptions } from '../../mock';
|
||||
import ArticleListContent from './components/ArticleListContent';
|
||||
import StandardFormRow from './components/StandardFormRow';
|
||||
import TagSelect from './components/TagSelect';
|
||||
import type { ListItemDataType } from './data.d';
|
||||
import { queryFakeList } from './service';
|
||||
import useStyles from './style.style';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const pageSize = 5;
|
||||
|
||||
const Articles: FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const { styles } = useStyles();
|
||||
|
||||
const { data, reload, loading, loadMore, loadingMore } = useRequest(
|
||||
() => {
|
||||
return queryFakeList({
|
||||
count: pageSize,
|
||||
});
|
||||
},
|
||||
{
|
||||
loadMore: true,
|
||||
},
|
||||
);
|
||||
|
||||
const list = data?.list || [];
|
||||
|
||||
const setOwner = () => {
|
||||
form.setFieldsValue({
|
||||
owner: ['wzj'],
|
||||
});
|
||||
};
|
||||
|
||||
const owners = [
|
||||
{
|
||||
id: 'wzj',
|
||||
name: '我自己',
|
||||
},
|
||||
{
|
||||
id: 'wjh',
|
||||
name: '吴家豪',
|
||||
},
|
||||
{
|
||||
id: 'zxx',
|
||||
name: '周星星',
|
||||
},
|
||||
{
|
||||
id: 'zly',
|
||||
name: '赵丽颖',
|
||||
},
|
||||
{
|
||||
id: 'ym',
|
||||
name: '姚明',
|
||||
},
|
||||
];
|
||||
|
||||
const IconText: React.FC<{
|
||||
type: string;
|
||||
text: React.ReactNode;
|
||||
}> = ({ type, text }) => {
|
||||
switch (type) {
|
||||
case 'star-o':
|
||||
return (
|
||||
<span>
|
||||
<StarOutlined style={{ marginRight: 8 }} />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
case 'like-o':
|
||||
return (
|
||||
<span>
|
||||
<LikeOutlined style={{ marginRight: 8 }} />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
case 'message':
|
||||
return (
|
||||
<span>
|
||||
<MessageOutlined style={{ marginRight: 8 }} />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const formItemLayout = {
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
md: { span: 12 },
|
||||
},
|
||||
};
|
||||
|
||||
const loadMoreDom = list.length > 0 && (
|
||||
<div style={{ textAlign: 'center', marginTop: 16 }}>
|
||||
<Button onClick={loadMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
|
||||
{loadingMore ? (
|
||||
<span>
|
||||
<LoadingOutlined /> 加载中...
|
||||
</span>
|
||||
) : (
|
||||
'加载更多'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ownerOptions = useMemo<DefaultOptionType[]>(
|
||||
() =>
|
||||
owners.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
[owners],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card bordered={false}>
|
||||
<Form
|
||||
layout="inline"
|
||||
form={form}
|
||||
initialValues={{
|
||||
owner: ['wjh', 'zxx'],
|
||||
}}
|
||||
onValuesChange={reload}
|
||||
>
|
||||
<StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
|
||||
<FormItem name="category">
|
||||
<TagSelect expandable>
|
||||
{categoryOptions.map((category) => (
|
||||
<TagSelect.Option value={category.value!} key={category.value}>
|
||||
{category.label}
|
||||
</TagSelect.Option>
|
||||
))}
|
||||
</TagSelect>
|
||||
</FormItem>
|
||||
</StandardFormRow>
|
||||
<StandardFormRow title="owner" grid>
|
||||
<FormItem name="owner" noStyle>
|
||||
<Select
|
||||
mode="multiple"
|
||||
placeholder="选择 owner"
|
||||
style={{ minWidth: '6rem' }}
|
||||
options={ownerOptions}
|
||||
/>
|
||||
</FormItem>
|
||||
<a className={styles.selfTrigger} onClick={setOwner}>
|
||||
只看自己的
|
||||
</a>
|
||||
</StandardFormRow>
|
||||
<StandardFormRow title="其它选项" grid last>
|
||||
<Row gutter={16}>
|
||||
<Col xl={8} lg={10} md={12} sm={24} xs={24}>
|
||||
<FormItem {...formItemLayout} label="活跃用户" name="user">
|
||||
<Select
|
||||
placeholder="不限"
|
||||
style={{ maxWidth: 200, width: '100%' }}
|
||||
options={[
|
||||
{
|
||||
label: '李三',
|
||||
value: 'lisa',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col xl={8} lg={10} md={12} sm={24} xs={24}>
|
||||
<FormItem {...formItemLayout} label="好评度" name="rate">
|
||||
<Select
|
||||
placeholder="不限"
|
||||
style={{ maxWidth: 200, width: '100%' }}
|
||||
options={[
|
||||
{
|
||||
label: '优秀',
|
||||
value: 'good',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
</StandardFormRow>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card
|
||||
style={{ marginTop: 24 }}
|
||||
bordered={false}
|
||||
bodyStyle={{ padding: '8px 32px 32px 32px' }}
|
||||
>
|
||||
<List<ListItemDataType>
|
||||
size="large"
|
||||
loading={loading}
|
||||
rowKey="id"
|
||||
itemLayout="vertical"
|
||||
loadMore={loadMoreDom}
|
||||
dataSource={list}
|
||||
renderItem={(item) => (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
actions={[
|
||||
<IconText key="star" type="star-o" text={item.star} />,
|
||||
<IconText key="like" type="like-o" text={item.like} />,
|
||||
<IconText key="message" type="message" text={item.message} />,
|
||||
]}
|
||||
extra={<div className={styles.listItemExtra} />}
|
||||
>
|
||||
<List.Item.Meta
|
||||
title={
|
||||
<a className={styles.listItemMetaTitle} href={item.href}>
|
||||
{item.title}
|
||||
</a>
|
||||
}
|
||||
description={
|
||||
<span>
|
||||
<Tag>Ant Design</Tag>
|
||||
<Tag>设计语言</Tag>
|
||||
<Tag>蚂蚁金服</Tag>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<ArticleListContent data={item} />
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Articles;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { request } from '@umijs/max';
|
||||
import type { ListItemDataType, Params } from './data.d';
|
||||
|
||||
export async function queryFakeList(
|
||||
params: Params,
|
||||
): Promise<{ data: { list: ListItemDataType[] } }> {
|
||||
return request('/api/fake_list', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
listItemMetaTitle: {
|
||||
color: token.colorTextHeading,
|
||||
},
|
||||
listItemExtra: {
|
||||
width: '272px',
|
||||
height: '1px',
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: {
|
||||
width: '0',
|
||||
height: '1px',
|
||||
},
|
||||
},
|
||||
selfTrigger: {
|
||||
marginLeft: '12px',
|
||||
[`@media screen and (max-width: ${token.screenXS}px)`]: {
|
||||
display: 'block',
|
||||
marginLeft: '0',
|
||||
},
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: {
|
||||
display: 'block',
|
||||
marginLeft: '0',
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { history, Outlet, useLocation, useMatch } from '@umijs/max';
|
||||
import { Input } from 'antd';
|
||||
import type { FC } from 'react';
|
||||
|
||||
type SearchProps = {
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
const tabList = [
|
||||
{
|
||||
key: 'articles',
|
||||
tab: '文章',
|
||||
},
|
||||
{
|
||||
key: 'projects',
|
||||
tab: '项目',
|
||||
},
|
||||
{
|
||||
key: 'applications',
|
||||
tab: '应用',
|
||||
},
|
||||
];
|
||||
|
||||
const Search: FC<SearchProps> = () => {
|
||||
const location = useLocation();
|
||||
let match = useMatch(location.pathname);
|
||||
const handleTabChange = (key: string) => {
|
||||
const url =
|
||||
match?.pathname === '/' ? '' : match?.pathname.substring(0, match.pathname.lastIndexOf('/'));
|
||||
switch (key) {
|
||||
case 'articles':
|
||||
history.push(`${url}/articles`);
|
||||
break;
|
||||
case 'applications':
|
||||
history.push(`${url}/applications`);
|
||||
break;
|
||||
case 'projects':
|
||||
history.push(`${url}/projects`);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormSubmit = (value: string) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(value);
|
||||
};
|
||||
|
||||
const getTabKey = () => {
|
||||
const tabKey = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
|
||||
if (tabKey && tabKey !== '/') {
|
||||
return tabKey;
|
||||
}
|
||||
return 'articles';
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
content={
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Input.Search
|
||||
placeholder="请输入"
|
||||
enterButton="搜索"
|
||||
size="large"
|
||||
onSearch={handleFormSubmit}
|
||||
style={{ maxWidth: 522, width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
tabList={tabList}
|
||||
tabActiveKey={getTabKey()}
|
||||
onTabChange={handleTabChange}
|
||||
>
|
||||
<Outlet />
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
import type { Request, Response } from 'express';
|
||||
import type { ListItemDataType } from './data.d';
|
||||
|
||||
const titles = [
|
||||
'Alipay',
|
||||
'Angular',
|
||||
'Ant Design',
|
||||
'Ant Design Pro',
|
||||
'Bootstrap',
|
||||
'React',
|
||||
'Vue',
|
||||
'Webpack',
|
||||
];
|
||||
const avatars = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
||||
];
|
||||
|
||||
const covers = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
|
||||
];
|
||||
const desc = [
|
||||
'那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
'希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
'生命就像一盒巧克力，结果往往出人意料',
|
||||
'城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
'那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
];
|
||||
const user = [
|
||||
'付小小',
|
||||
'曲丽丽',
|
||||
'林东东',
|
||||
'周星星',
|
||||
'吴加好',
|
||||
'朱偏右',
|
||||
'鱼酱',
|
||||
'乐哥',
|
||||
'谭小仪',
|
||||
'仲尼',
|
||||
];
|
||||
|
||||
function fakeList(count: number): ListItemDataType[] {
|
||||
const list = [];
|
||||
for (let i = 0; i < count; i += 1) {
|
||||
list.push({
|
||||
id: `fake-list-${i}`,
|
||||
owner: user[i % 10],
|
||||
title: titles[i % 8],
|
||||
avatar: avatars[i % 8],
|
||||
cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
|
||||
status: ['active', 'exception', 'normal'][i % 3] as
|
||||
| 'normal'
|
||||
| 'exception'
|
||||
| 'active'
|
||||
| 'success',
|
||||
percent: Math.ceil(Math.random() * 50) + 50,
|
||||
logo: avatars[i % 8],
|
||||
href: 'https://ant.design',
|
||||
updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
|
||||
createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
|
||||
subDescription: desc[i % 5],
|
||||
description:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
activeUser: Math.ceil(Math.random() * 100000) + 100000,
|
||||
newUser: Math.ceil(Math.random() * 1000) + 1000,
|
||||
star: Math.ceil(Math.random() * 100) + 100,
|
||||
like: Math.ceil(Math.random() * 100) + 100,
|
||||
message: Math.ceil(Math.random() * 10) + 10,
|
||||
content:
|
||||
'段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
|
||||
members: [
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
|
||||
name: '曲丽丽',
|
||||
id: 'member1',
|
||||
},
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
|
||||
name: '王昭君',
|
||||
id: 'member2',
|
||||
},
|
||||
{
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
|
||||
name: '董娜娜',
|
||||
id: 'member3',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
function getFakeList(req: Request, res: Response) {
|
||||
const params: any = req.query;
|
||||
|
||||
const count = params.count * 1 || 20;
|
||||
|
||||
const result = fakeList(count);
|
||||
return res.json({
|
||||
data: {
|
||||
list: result,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
'GET /api/fake_list': getFakeList,
|
||||
};
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
avatarList: {
|
||||
display: 'inline-block',
|
||||
ul: { display: 'inline-block', marginLeft: '8px', fontSize: '0' },
|
||||
},
|
||||
avatarItem: {
|
||||
display: 'inline-block',
|
||||
width: token.controlHeight,
|
||||
height: token.controlHeight,
|
||||
marginLeft: '-8px',
|
||||
fontSize: token.fontSize,
|
||||
'.ant-avatar': { border: `1px solid ${token.colorBorder}` },
|
||||
},
|
||||
avatarItemLarge: {
|
||||
width: token.controlHeightLG,
|
||||
height: token.controlHeightLG,
|
||||
},
|
||||
avatarItemSmall: {
|
||||
width: token.controlHeightSM,
|
||||
height: token.controlHeightSM,
|
||||
},
|
||||
avatarItemMini: {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
'.ant-avatar': {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
lineHeight: '20px',
|
||||
'.ant-avatar-string': {
|
||||
fontSize: '12px',
|
||||
lineHeight: '18px',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import { Avatar, Tooltip } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import useStyles from './index.style';
|
||||
export declare type SizeType = number | 'small' | 'default' | 'large';
|
||||
export type AvatarItemProps = {
|
||||
tips: React.ReactNode;
|
||||
src: string;
|
||||
size?: SizeType;
|
||||
style?: React.CSSProperties;
|
||||
onClick?: () => void;
|
||||
};
|
||||
export type AvatarListProps = {
|
||||
Item?: React.ReactElement<AvatarItemProps>;
|
||||
size?: SizeType;
|
||||
maxLength?: number;
|
||||
excessItemsStyle?: React.CSSProperties;
|
||||
style?: React.CSSProperties;
|
||||
children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
|
||||
};
|
||||
const avatarSizeToClassName = (size: SizeType | 'mini', styles: any) =>
|
||||
classNames(styles.avatarItem, {
|
||||
[styles.avatarItemLarge]: size === 'large',
|
||||
[styles.avatarItemSmall]: size === 'small',
|
||||
[styles.avatarItemMini]: size === 'mini',
|
||||
});
|
||||
|
||||
const Item: React.FC<AvatarItemProps> = ({ src, size, tips, onClick = () => {} }) => {
|
||||
const { styles } = useStyles();
|
||||
|
||||
const cls = avatarSizeToClassName(size!, styles);
|
||||
|
||||
return (
|
||||
<li className={cls} onClick={onClick}>
|
||||
{tips ? (
|
||||
<Tooltip title={tips}>
|
||||
<Avatar
|
||||
src={src}
|
||||
size={size}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Avatar src={src} size={size} />
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
const AvatarList: React.FC<AvatarListProps> & {
|
||||
Item: typeof Item;
|
||||
} = ({ children, size, maxLength = 5, excessItemsStyle, ...other }) => {
|
||||
const { styles } = useStyles();
|
||||
const numOfChildren = React.Children.count(children);
|
||||
const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength;
|
||||
const childrenArray = React.Children.toArray(children) as React.ReactElement<AvatarItemProps>[];
|
||||
|
||||
const childrenWithProps = childrenArray.slice(0, numToShow).map((child) =>
|
||||
React.cloneElement(child, {
|
||||
size,
|
||||
}),
|
||||
);
|
||||
if (numToShow < numOfChildren) {
|
||||
const cls = avatarSizeToClassName(size!, styles);
|
||||
childrenWithProps.push(
|
||||
<li key="exceed" className={cls}>
|
||||
<Avatar size={size} style={excessItemsStyle}>{`+${numOfChildren - maxLength}`}</Avatar>
|
||||
</li>,
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div {...other} className={styles.avatarList}>
|
||||
<ul> {childrenWithProps} </ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
AvatarList.Item = Item;
|
||||
export default AvatarList;
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
standardFormRow: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
marginBottom: '16px',
|
||||
paddingBottom: '16px',
|
||||
borderBottom: `1px dashed ${token.colorSplit}`,
|
||||
'.ant-form-item, .ant-legacy-form-item': { marginRight: '24px' },
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label': {
|
||||
label: {
|
||||
marginRight: '0',
|
||||
color: token.colorText,
|
||||
},
|
||||
},
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
|
||||
{ padding: '0', lineHeight: '32px' },
|
||||
},
|
||||
label: {
|
||||
flex: '0 0 auto',
|
||||
marginRight: '24px',
|
||||
color: token.colorTextHeading,
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'right',
|
||||
'& > span': {
|
||||
display: 'inline-block',
|
||||
height: '32px',
|
||||
lineHeight: '32px',
|
||||
'&::after': {
|
||||
content: "'：'",
|
||||
},
|
||||
},
|
||||
},
|
||||
content: {
|
||||
flex: '1 1 0',
|
||||
'.ant-form-item, .ant-legacy-form-item': {
|
||||
'&:last-child': {
|
||||
display: 'block',
|
||||
marginRight: '0',
|
||||
},
|
||||
},
|
||||
},
|
||||
standardFormRowLast: {
|
||||
marginBottom: '0',
|
||||
paddingBottom: '0',
|
||||
border: 'none',
|
||||
},
|
||||
standardFormRowBlock: {
|
||||
'.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
|
||||
{ display: 'block' },
|
||||
},
|
||||
standardFormRowGrid: {
|
||||
'.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
|
||||
{ display: 'block' },
|
||||
'.ant-form-item-label, .ant-legacy-form-item-label': { float: 'left' },
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import useStyles from './index.style';
|
||||
type StandardFormRowProps = {
|
||||
title?: string;
|
||||
last?: boolean;
|
||||
block?: boolean;
|
||||
grid?: boolean;
|
||||
children?: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
const StandardFormRow: React.FC<StandardFormRowProps> = ({
|
||||
title,
|
||||
children,
|
||||
last,
|
||||
block,
|
||||
grid,
|
||||
...rest
|
||||
}) => {
|
||||
const { styles } = useStyles();
|
||||
const cls = classNames(styles.standardFormRow, {
|
||||
[styles.standardFormRowBlock]: block,
|
||||
[styles.standardFormRowLast]: last,
|
||||
[styles.standardFormRowGrid]: grid,
|
||||
});
|
||||
return (
|
||||
<div className={cls} {...rest}>
|
||||
{title && (
|
||||
<div className={styles.label}>
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.content}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default StandardFormRow;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
tagSelect: {
|
||||
position: 'relative',
|
||||
maxHeight: '32px',
|
||||
marginLeft: '-8px',
|
||||
overflow: 'hidden',
|
||||
lineHeight: '32px',
|
||||
transition: 'all 0.3s',
|
||||
userSelect: 'none',
|
||||
'.ant-tag': {
|
||||
marginRight: '24px',
|
||||
padding: '0 8px',
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
},
|
||||
trigger: {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
'span.anticon': { fontSize: '12px' },
|
||||
},
|
||||
expanded: {
|
||||
maxHeight: '200px',
|
||||
transition: 'all 0.3s',
|
||||
},
|
||||
hasExpandTag: {
|
||||
paddingRight: '50px',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import { Tag } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import { useMergedState } from 'rc-util';
|
||||
import React, { FC, useState } from 'react';
|
||||
import useStyles from './index.style';
|
||||
const { CheckableTag } = Tag;
|
||||
export interface TagSelectOptionProps {
|
||||
value: string | number;
|
||||
style?: React.CSSProperties;
|
||||
checked?: boolean;
|
||||
onChange?: (value: string | number, state: boolean) => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
const TagSelectOption: React.FC<TagSelectOptionProps> & {
|
||||
isTagSelectOption: boolean;
|
||||
} = ({ children, checked, onChange, value }) => (
|
||||
<CheckableTag
|
||||
checked={!!checked}
|
||||
key={value}
|
||||
onChange={(state) => onChange && onChange(value, state)}
|
||||
>
|
||||
{children}
|
||||
</CheckableTag>
|
||||
);
|
||||
|
||||
TagSelectOption.isTagSelectOption = true;
|
||||
|
||||
type TagSelectOptionElement = React.ReactElement<TagSelectOptionProps, typeof TagSelectOption>;
|
||||
|
||||
export interface TagSelectProps {
|
||||
onChange?: (value: (string | number)[]) => void;
|
||||
expandable?: boolean;
|
||||
value?: (string | number)[];
|
||||
defaultValue?: (string | number)[];
|
||||
style?: React.CSSProperties;
|
||||
hideCheckAll?: boolean;
|
||||
actionsText?: {
|
||||
expandText?: React.ReactNode;
|
||||
collapseText?: React.ReactNode;
|
||||
selectAllText?: React.ReactNode;
|
||||
};
|
||||
className?: string;
|
||||
Option?: TagSelectOptionProps;
|
||||
children?: TagSelectOptionElement | TagSelectOptionElement[];
|
||||
}
|
||||
const TagSelect: FC<TagSelectProps> & {
|
||||
Option: typeof TagSelectOption;
|
||||
} = (props) => {
|
||||
const { styles } = useStyles();
|
||||
const { children, hideCheckAll = false, className, style, expandable, actionsText = {} } = props;
|
||||
const [expand, setExpand] = useState<boolean>(false);
|
||||
|
||||
const [value, setValue] = useMergedState<(string | number)[]>(props.defaultValue || [], {
|
||||
value: props.value,
|
||||
defaultValue: props.defaultValue,
|
||||
onChange: props.onChange,
|
||||
});
|
||||
|
||||
const isTagSelectOption = (node: TagSelectOptionElement) =>
|
||||
node &&
|
||||
node.type &&
|
||||
(node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
|
||||
const getAllTags = () => {
|
||||
const childrenArray = React.Children.toArray(children) as TagSelectOptionElement[];
|
||||
const checkedTags = childrenArray
|
||||
.filter((child) => isTagSelectOption(child))
|
||||
.map((child) => child.props.value);
|
||||
return checkedTags || [];
|
||||
};
|
||||
const onSelectAll = (checked: boolean) => {
|
||||
let checkedTags: (string | number)[] = [];
|
||||
if (checked) {
|
||||
checkedTags = getAllTags();
|
||||
}
|
||||
setValue(checkedTags);
|
||||
};
|
||||
const handleTagChange = (tag: string | number, checked: boolean) => {
|
||||
const checkedTags: (string | number)[] = [...(value || [])];
|
||||
const index = checkedTags.indexOf(tag);
|
||||
if (checked && index === -1) {
|
||||
checkedTags.push(tag);
|
||||
} else if (!checked && index > -1) {
|
||||
checkedTags.splice(index, 1);
|
||||
}
|
||||
setValue(checkedTags);
|
||||
};
|
||||
const checkedAll = getAllTags().length === value?.length;
|
||||
const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
|
||||
const cls = classNames(styles.tagSelect, className, {
|
||||
[styles.hasExpandTag]: expandable,
|
||||
[styles.expanded]: expand,
|
||||
});
|
||||
return (
|
||||
<div className={cls} style={style}>
|
||||
{hideCheckAll ? null : (
|
||||
<CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={onSelectAll}>
|
||||
{selectAllText}
|
||||
</CheckableTag>
|
||||
)}
|
||||
{children &&
|
||||
React.Children.map(children, (child: TagSelectOptionElement) => {
|
||||
if (isTagSelectOption(child)) {
|
||||
return React.cloneElement(child, {
|
||||
key: `tag-select-${child.props.value}`,
|
||||
value: child.props.value,
|
||||
checked: value && value.indexOf(child.props.value) > -1,
|
||||
onChange: handleTagChange,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
})}
|
||||
{expandable && (
|
||||
<a
|
||||
className={styles.trigger}
|
||||
onClick={() => {
|
||||
setExpand(!expand);
|
||||
}}
|
||||
>
|
||||
{expand ? (
|
||||
<>
|
||||
{collapseText} <UpOutlined />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{expandText}
|
||||
<DownOutlined />
|
||||
</>
|
||||
)}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
TagSelect.Option = TagSelectOption;
|
||||
export default TagSelect;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
export type Member = {
|
||||
avatar: string;
|
||||
name: string;
|
||||
id: string;
|
||||
};
|
||||
|
||||
export interface Params {
|
||||
count: number;
|
||||
}
|
||||
export interface ListItemDataType {
|
||||
id: string;
|
||||
owner: string;
|
||||
title: string;
|
||||
avatar: string;
|
||||
cover: string;
|
||||
status: 'normal' | 'exception' | 'active' | 'success';
|
||||
percent: number;
|
||||
logo: string;
|
||||
href: string;
|
||||
body?: any;
|
||||
updatedAt: number;
|
||||
createdAt: number;
|
||||
subDescription: string;
|
||||
description: string;
|
||||
activeUser: number;
|
||||
newUser: number;
|
||||
star: number;
|
||||
like: number;
|
||||
message: number;
|
||||
content: string;
|
||||
members: Member[];
|
||||
}
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
import { useRequest } from '@umijs/max';
|
||||
import { Card, Col, Form, List, Row, Select, Typography } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import type { FC } from 'react';
|
||||
import { categoryOptions } from '../../mock';
|
||||
import AvatarList from './components/AvatarList';
|
||||
import StandardFormRow from './components/StandardFormRow';
|
||||
import TagSelect from './components/TagSelect';
|
||||
import type { ListItemDataType } from './data.d';
|
||||
import { queryFakeList } from './service';
|
||||
import useStyles from './style.style';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { Paragraph } = Typography;
|
||||
const getKey = (id: string, index: number) => `${id}-${index}`;
|
||||
const Projects: FC = () => {
|
||||
const { styles } = useStyles();
|
||||
const { data, loading, run } = useRequest((values: any) => {
|
||||
console.log('form data', values);
|
||||
return queryFakeList({
|
||||
count: 8,
|
||||
});
|
||||
});
|
||||
const list = data?.list || [];
|
||||
const cardList = list && (
|
||||
<List<ListItemDataType>
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
grid={{
|
||||
gutter: 16,
|
||||
xs: 1,
|
||||
sm: 2,
|
||||
md: 3,
|
||||
lg: 3,
|
||||
xl: 4,
|
||||
xxl: 4,
|
||||
}}
|
||||
dataSource={list}
|
||||
renderItem={(item) => (
|
||||
<List.Item>
|
||||
<Card className={styles.card} hoverable cover={<img alt={item.title} src={item.cover} />}>
|
||||
<Card.Meta
|
||||
title={<a>{item.title}</a>}
|
||||
description={
|
||||
<Paragraph
|
||||
ellipsis={{
|
||||
rows: 2,
|
||||
}}
|
||||
>
|
||||
{item.subDescription}
|
||||
</Paragraph>
|
||||
}
|
||||
/>
|
||||
<div className={styles.cardItemContent}>
|
||||
<span>{dayjs(item.updatedAt).fromNow()}</span>
|
||||
<div className={styles.avatarList}>
|
||||
<AvatarList size="small">
|
||||
{item.members.map((member, i) => (
|
||||
<AvatarList.Item
|
||||
key={getKey(item.id, i)}
|
||||
src={member.avatar}
|
||||
tips={member.name}
|
||||
/>
|
||||
))}
|
||||
</AvatarList>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
const formItemLayout = {
|
||||
wrapperCol: {
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
sm: {
|
||||
span: 16,
|
||||
},
|
||||
},
|
||||
};
|
||||
return (
|
||||
<div className={styles.coverCardList}>
|
||||
<Card bordered={false}>
|
||||
<Form
|
||||
layout="inline"
|
||||
onValuesChange={(_, values) => {
|
||||
// 表单项变化时请求数据
|
||||
// 模拟查询表单生效
|
||||
run(values);
|
||||
}}
|
||||
>
|
||||
<StandardFormRow
|
||||
title="所属类目"
|
||||
block
|
||||
style={{
|
||||
paddingBottom: 11,
|
||||
}}
|
||||
>
|
||||
<FormItem name="category">
|
||||
<TagSelect expandable>
|
||||
{categoryOptions.map((category) => (
|
||||
<TagSelect.Option value={category.value!} key={category.value}>
|
||||
{category.label}
|
||||
</TagSelect.Option>
|
||||
))}
|
||||
</TagSelect>
|
||||
</FormItem>
|
||||
</StandardFormRow>
|
||||
<StandardFormRow title="其它选项" grid last>
|
||||
<Row gutter={16}>
|
||||
<Col lg={8} md={10} sm={10} xs={24}>
|
||||
<FormItem {...formItemLayout} label="作者" name="author">
|
||||
<Select
|
||||
placeholder="不限"
|
||||
style={{
|
||||
maxWidth: 200,
|
||||
width: '100%',
|
||||
}}
|
||||
options={[
|
||||
{
|
||||
label: '王昭君',
|
||||
value: 'lisa',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col lg={8} md={10} sm={10} xs={24}>
|
||||
<FormItem {...formItemLayout} label="好评度" name="rate">
|
||||
<Select
|
||||
placeholder="不限"
|
||||
style={{
|
||||
maxWidth: 200,
|
||||
width: '100%',
|
||||
}}
|
||||
options={[
|
||||
{
|
||||
label: '优秀',
|
||||
value: 'good',
|
||||
},
|
||||
{
|
||||
label: '普通',
|
||||
value: 'normal',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
</StandardFormRow>
|
||||
</Form>
|
||||
</Card>
|
||||
<div className={styles.cardList}>{cardList}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Projects;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { request } from '@umijs/max';
|
||||
import type { ListItemDataType, Params } from './data';
|
||||
|
||||
export async function queryFakeList(
|
||||
params: Params,
|
||||
): Promise<{ data: { list: ListItemDataType[] } }> {
|
||||
return request('/api/fake_list', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
card: {
|
||||
'.ant-card-meta-title': {
|
||||
marginBottom: '4px',
|
||||
'& > a': {
|
||||
display: 'inline-block',
|
||||
maxWidth: '100%',
|
||||
color: token.colorTextHeading,
|
||||
},
|
||||
},
|
||||
'.ant-card-meta-description': {
|
||||
height: '44px',
|
||||
overflow: 'hidden',
|
||||
lineHeight: '22px',
|
||||
},
|
||||
'&:hover': {
|
||||
'.ant-card-meta-title > a': {
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
cardItemContent: {
|
||||
display: 'flex',
|
||||
height: '20px',
|
||||
marginTop: '16px',
|
||||
marginBottom: '-4px',
|
||||
lineHeight: '20px',
|
||||
'& > span': {
|
||||
flex: '1',
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
avatarList: {
|
||||
flex: '0 1 auto',
|
||||
},
|
||||
cardList: {
|
||||
marginTop: '24px',
|
||||
},
|
||||
coverCardList: {
|
||||
'.ant-list .ant-list-item-content-single': { maxWidth: '100%' },
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
import type { Request, Response } from 'express';
|
||||
import { parse } from 'url';
|
||||
import type { TableListItem, TableListParams } from './data.d';
|
||||
|
||||
// mock tableListDataSource
|
||||
const genList = (current: number, pageSize: number) => {
|
||||
const tableListDataSource: TableListItem[] = [];
|
||||
|
||||
for (let i = 0; i < pageSize; i += 1) {
|
||||
const index = (current - 1) * 10 + i;
|
||||
tableListDataSource.push({
|
||||
key: index,
|
||||
disabled: i % 6 === 0,
|
||||
href: 'https://ant.design',
|
||||
avatar: [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
][i % 2],
|
||||
name: `TradeCode ${index}`,
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: Math.floor(Math.random() * 1000),
|
||||
status: (Math.floor(Math.random() * 10) % 4).toString(),
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date(),
|
||||
progress: Math.ceil(Math.random() * 100),
|
||||
});
|
||||
}
|
||||
tableListDataSource.reverse();
|
||||
return tableListDataSource;
|
||||
};
|
||||
|
||||
let tableListDataSource = genList(1, 100);
|
||||
|
||||
function getRule(req: Request, res: Response, u: string) {
|
||||
let realUrl = u;
|
||||
if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
|
||||
realUrl = req.url;
|
||||
}
|
||||
const { current = 1, pageSize = 10 } = req.query;
|
||||
const params = parse(realUrl, true).query as unknown as TableListParams;
|
||||
|
||||
let dataSource = [...tableListDataSource].slice(
|
||||
((current as number) - 1) * (pageSize as number),
|
||||
(current as number) * (pageSize as number),
|
||||
);
|
||||
if (params.sorter) {
|
||||
const sorter = JSON.parse(params.sorter as any);
|
||||
dataSource = dataSource.sort((prev: any, next: any) => {
|
||||
let sortNumber = 0;
|
||||
Object.keys(sorter).forEach((key) => {
|
||||
if (sorter[key] === 'descend') {
|
||||
if (prev[key] - next[key] > 0) {
|
||||
sortNumber += -1;
|
||||
} else {
|
||||
sortNumber += 1;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (prev[key] - next[key] > 0) {
|
||||
sortNumber += 1;
|
||||
} else {
|
||||
sortNumber += -1;
|
||||
}
|
||||
});
|
||||
return sortNumber;
|
||||
});
|
||||
}
|
||||
if (params.filter) {
|
||||
const filter = JSON.parse(params.filter as any) as Record<string, string[]>;
|
||||
if (Object.keys(filter).length > 0) {
|
||||
dataSource = dataSource.filter((item) => {
|
||||
return Object.keys(filter).some((key) => {
|
||||
if (!filter[key]) {
|
||||
return true;
|
||||
}
|
||||
if (filter[key].includes(`${item[key as 'status']}`)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (params.name) {
|
||||
dataSource = dataSource.filter((data) => data.name.includes(params.name || ''));
|
||||
}
|
||||
|
||||
let finalPageSize = 10;
|
||||
if (params.pageSize) {
|
||||
finalPageSize = parseInt(`${params.pageSize}`, 10);
|
||||
}
|
||||
|
||||
const result = {
|
||||
data: dataSource,
|
||||
total: tableListDataSource.length,
|
||||
success: true,
|
||||
pageSize: finalPageSize,
|
||||
current: parseInt(`${params.currentPage}`, 10) || 1,
|
||||
};
|
||||
|
||||
return res.json(result);
|
||||
}
|
||||
|
||||
function postRule(req: Request, res: Response, u: string, b: Request) {
|
||||
let realUrl = u;
|
||||
if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
|
||||
realUrl = req.url;
|
||||
}
|
||||
|
||||
const body = (b && b.body) || req.body;
|
||||
const { name, desc, key } = body;
|
||||
|
||||
switch (req.method) {
|
||||
/* eslint no-case-declarations:0 */
|
||||
case 'DELETE':
|
||||
tableListDataSource = tableListDataSource.filter((item) => key.indexOf(item.key) === -1);
|
||||
break;
|
||||
case 'POST':
|
||||
(() => {
|
||||
const i = Math.ceil(Math.random() * 10000);
|
||||
const newRule = {
|
||||
key: tableListDataSource.length,
|
||||
href: 'https://ant.design',
|
||||
avatar: [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
][i % 2],
|
||||
name,
|
||||
owner: '曲丽丽',
|
||||
desc,
|
||||
callNo: Math.floor(Math.random() * 1000),
|
||||
status: (Math.floor(Math.random() * 10) % 2).toString(),
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date(),
|
||||
progress: Math.ceil(Math.random() * 100),
|
||||
};
|
||||
tableListDataSource.unshift(newRule);
|
||||
return res.json(newRule);
|
||||
})();
|
||||
return;
|
||||
|
||||
case 'PUT':
|
||||
(() => {
|
||||
let newRule = {};
|
||||
tableListDataSource = tableListDataSource.map((item) => {
|
||||
if (item.key === key) {
|
||||
newRule = { ...item, desc, name };
|
||||
return { ...item, desc, name };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return res.json(newRule);
|
||||
})();
|
||||
return;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const result = {
|
||||
list: tableListDataSource,
|
||||
pagination: {
|
||||
total: tableListDataSource.length,
|
||||
},
|
||||
};
|
||||
|
||||
res.json(result);
|
||||
}
|
||||
|
||||
export default {
|
||||
'GET /api/rule': getRule,
|
||||
'POST /api/rule': postRule,
|
||||
'DELETE /api/rule': postRule,
|
||||
'PUT /api/rule': postRule,
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Modal } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
type CreateFormProps = {
|
||||
modalVisible: boolean;
|
||||
children?: React.ReactNode;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建规则"
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
import {
|
||||
ProFormDateTimePicker,
|
||||
ProFormRadio,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormTextArea,
|
||||
StepsForm,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Modal } from 'antd';
|
||||
import React from 'react';
|
||||
import type { TableListItem } from '../data';
|
||||
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<TableListItem>;
|
||||
|
||||
export type UpdateFormProps = {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<TableListItem>;
|
||||
};
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
return (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{
|
||||
padding: '32px 40px 48px',
|
||||
}}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => {
|
||||
props.onCancel();
|
||||
}}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
desc: props.values.desc,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
name="name"
|
||||
label="规则名称"
|
||||
width="md"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入规则名称！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入至少五个字符的规则描述！',
|
||||
min: 5,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
name="target"
|
||||
width="md"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="template"
|
||||
width="md"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
width="md"
|
||||
label="开始时间"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择开始时间！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="md"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateForm;
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
export type TableListItem = {
|
||||
key: number;
|
||||
disabled?: boolean;
|
||||
href: string;
|
||||
avatar: string;
|
||||
name: string;
|
||||
owner: string;
|
||||
desc: string;
|
||||
callNo: number;
|
||||
status: string;
|
||||
updatedAt: Date;
|
||||
createdAt: Date;
|
||||
progress: number;
|
||||
};
|
||||
|
||||
export type TableListPagination = {
|
||||
total: number;
|
||||
pageSize: number;
|
||||
current: number;
|
||||
};
|
||||
|
||||
export type TableListData = {
|
||||
list: TableListItem[];
|
||||
pagination: Partial<TableListPagination>;
|
||||
};
|
||||
|
||||
export type TableListParams = {
|
||||
status?: string;
|
||||
name?: string;
|
||||
desc?: string;
|
||||
key?: number;
|
||||
pageSize?: number;
|
||||
currentPage?: number;
|
||||
filter?: Record<string, any[]>;
|
||||
sorter?: Record<string, any>;
|
||||
};
|
||||
|
|
@ -1,324 +0,0 @@
|
|||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
|
||||
import {
|
||||
FooterToolbar,
|
||||
ModalForm,
|
||||
PageContainer,
|
||||
ProDescriptions,
|
||||
ProFormText,
|
||||
ProFormTextArea,
|
||||
ProTable,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Button, Drawer, Input, message } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import type { FormValueType } from './components/UpdateForm';
|
||||
import UpdateForm from './components/UpdateForm';
|
||||
import type { TableListItem, TableListPagination } from './data';
|
||||
import { addRule, removeRule, rule, updateRule } from './service';
|
||||
/**
|
||||
* 添加节点
|
||||
*
|
||||
* @param fields
|
||||
*/
|
||||
|
||||
const handleAdd = async (fields: TableListItem) => {
|
||||
const hide = message.loading('正在添加');
|
||||
|
||||
try {
|
||||
await addRule({ ...fields });
|
||||
hide();
|
||||
message.success('添加成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('添加失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 更新节点
|
||||
*
|
||||
* @param fields
|
||||
*/
|
||||
|
||||
const handleUpdate = async (fields: FormValueType, currentRow?: TableListItem) => {
|
||||
const hide = message.loading('正在配置');
|
||||
|
||||
try {
|
||||
await updateRule({
|
||||
...currentRow,
|
||||
...fields,
|
||||
});
|
||||
hide();
|
||||
message.success('配置成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('配置失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 删除节点
|
||||
*
|
||||
* @param selectedRows
|
||||
*/
|
||||
|
||||
const handleRemove = async (selectedRows: TableListItem[]) => {
|
||||
const hide = message.loading('正在删除');
|
||||
if (!selectedRows) return true;
|
||||
|
||||
try {
|
||||
await removeRule({
|
||||
key: selectedRows.map((row) => row.key),
|
||||
});
|
||||
hide();
|
||||
message.success('删除成功，即将刷新');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('删除失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const TableList: React.FC = () => {
|
||||
/** 新建窗口的弹窗 */
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
/** 分布更新窗口的弹窗 */
|
||||
|
||||
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [currentRow, setCurrentRow] = useState<TableListItem>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
|
||||
/** 国际化配置 */
|
||||
|
||||
const columns: ProColumns<TableListItem>[] = [
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'name',
|
||||
tip: '规则名称是唯一的 key',
|
||||
render: (dom, entity) => {
|
||||
return (
|
||||
<a
|
||||
onClick={() => {
|
||||
setCurrentRow(entity);
|
||||
setShowDetail(true);
|
||||
}}
|
||||
>
|
||||
{dom}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'desc',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
hideInForm: true,
|
||||
renderText: (val: string) => `${val}万`,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
hideInForm: true,
|
||||
valueEnum: {
|
||||
0: {
|
||||
text: '关闭',
|
||||
status: 'Default',
|
||||
},
|
||||
1: {
|
||||
text: '运行中',
|
||||
status: 'Processing',
|
||||
},
|
||||
2: {
|
||||
text: '已上线',
|
||||
status: 'Success',
|
||||
},
|
||||
3: {
|
||||
text: '异常',
|
||||
status: 'Error',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '上次调度时间',
|
||||
sorter: true,
|
||||
dataIndex: 'updatedAt',
|
||||
valueType: 'dateTime',
|
||||
renderFormItem: (item, { defaultRender, ...rest }, form) => {
|
||||
const status = form.getFieldValue('status');
|
||||
|
||||
if (`${status}` === '0') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (`${status}` === '3') {
|
||||
return <Input {...rest} placeholder="请输入异常原因！" />;
|
||||
}
|
||||
|
||||
return defaultRender(item);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
render: (_, record) => [
|
||||
<a
|
||||
key="config"
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
配置
|
||||
</a>,
|
||||
<a key="subscribeAlert" href="https://procomponents.ant.design/">
|
||||
订阅警报
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<TableListItem, TableListPagination>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
type="primary"
|
||||
key="primary"
|
||||
onClick={() => {
|
||||
handleModalVisible(true);
|
||||
}}
|
||||
>
|
||||
<PlusOutlined /> 新建
|
||||
</Button>,
|
||||
]}
|
||||
request={rule}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => {
|
||||
setSelectedRows(selectedRows);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{selectedRowsState.length}
|
||||
</a>{' '}
|
||||
项
|
||||
<span>
|
||||
服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo!, 0)} 万
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<ModalForm
|
||||
title="新建规则"
|
||||
width="400px"
|
||||
open={createModalVisible}
|
||||
onVisibleChange={handleModalVisible}
|
||||
onFinish={async (value) => {
|
||||
const success = await handleAdd(value as TableListItem);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ProFormText
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '规则名称为必填项',
|
||||
},
|
||||
]}
|
||||
width="md"
|
||||
name="name"
|
||||
/>
|
||||
<ProFormTextArea width="md" name="desc" />
|
||||
</ModalForm>
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value, currentRow);
|
||||
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setCurrentRow(undefined);
|
||||
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setCurrentRow(undefined);
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={currentRow || {}}
|
||||
/>
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={showDetail}
|
||||
onClose={() => {
|
||||
setCurrentRow(undefined);
|
||||
setShowDetail(false);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{currentRow?.name && (
|
||||
<ProDescriptions<TableListItem>
|
||||
column={2}
|
||||
title={currentRow?.name}
|
||||
request={async () => ({
|
||||
data: currentRow || {},
|
||||
})}
|
||||
params={{
|
||||
id: currentRow?.name,
|
||||
}}
|
||||
columns={columns as ProDescriptionsItemProps<TableListItem>[]}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
// @ts-ignore
|
||||
/* eslint-disable */
|
||||
import { request } from '@umijs/max';
|
||||
import { TableListItem } from './data';
|
||||
|
||||
/** 获取规则列表 GET /api/rule */
|
||||
export async function rule(
|
||||
params: {
|
||||
// query
|
||||
/** 当前的页码 */
|
||||
current?: number;
|
||||
/** 页面的容量 */
|
||||
pageSize?: number;
|
||||
},
|
||||
options?: { [key: string]: any },
|
||||
) {
|
||||
return request<{
|
||||
data: TableListItem[];
|
||||
/** 列表的内容总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
}>('/api/rule', {
|
||||
method: 'GET',
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 新建规则 PUT /api/rule */
|
||||
export async function updateRule(data: { [key: string]: any }, options?: { [key: string]: any }) {
|
||||
return request<TableListItem>('/api/rule', {
|
||||
data,
|
||||
method: 'PUT',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 新建规则 POST /api/rule */
|
||||
export async function addRule(data: { [key: string]: any }, options?: { [key: string]: any }) {
|
||||
return request<TableListItem>('/api/rule', {
|
||||
data,
|
||||
method: 'POST',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除规则 DELETE /api/rule */
|
||||
export async function removeRule(data: { key: number[] }, options?: { [key: string]: any }) {
|
||||
return request<Record<string, any>>('/api/rule', {
|
||||
data,
|
||||
method: 'DELETE',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// src/pages/list/basic-list/components/AddTimeLineItemModal.tsx
|
||||
import { addStoryItem } from '@/pages/list/basic-list/service';
|
||||
import chinaRegion, { code2Location } from '@/commonConstant/chinaRegion';
|
||||
import { addStoryItem } from '@/pages/story/service';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import { Button, Cascader, DatePicker, Form, Input, message, Modal, Upload } from 'antd';
|
||||
|
|
@ -13,24 +13,26 @@ interface ModalProps {
|
|||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
onOk: () => void;
|
||||
lineId: string | number | undefined;
|
||||
storyId: string | number | undefined;
|
||||
initialValues?: any;
|
||||
isRoot: boolean; // 是否根节点
|
||||
storyItemId?: string; // 是否根节点
|
||||
option: 'add' | 'edit' | 'addSubItem' | 'editSubItem';
|
||||
}
|
||||
|
||||
const AddTimeLineItemModal: React.FC<ModalProps> = ({
|
||||
visible,
|
||||
onCancel,
|
||||
onOk,
|
||||
lineId,
|
||||
storyId,
|
||||
initialValues,
|
||||
isRoot = true,
|
||||
storyItemId,
|
||||
option,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const [fileList, setFileList] = useState<any[]>([]);
|
||||
const [imageList, setImageList] = useState<any[]>(initialValues?.images || []);
|
||||
useEffect(() => {
|
||||
if (initialValues) {
|
||||
if (initialValues && option === 'edit') {
|
||||
form.setFieldsValue({
|
||||
title: initialValues.title,
|
||||
storyItemTime: initialValues.date ? moment(initialValues.date) : undefined,
|
||||
|
|
@ -40,7 +42,7 @@ const AddTimeLineItemModal: React.FC<ModalProps> = ({
|
|||
images: initialValues.images?.map((url) => ({ url })) || [],
|
||||
});
|
||||
}
|
||||
}, [initialValues]);
|
||||
}, [initialValues, option]);
|
||||
const { run: submitItem, loading } = useRequest((newItem) => addStoryItem(newItem), {
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
|
|
@ -64,9 +66,9 @@ const AddTimeLineItemModal: React.FC<ModalProps> = ({
|
|||
...values,
|
||||
id: initialValues?.id || Date.now(),
|
||||
storyItemTime: dayjs(values.date).format('YYYY-MM-DDTHH:mm:ss'),
|
||||
masterItemId: lineId,
|
||||
masterItemId: initialValues.masterItemId,
|
||||
subItems: initialValues?.subItems || [],
|
||||
isRoot: isRoot ? 1 : 0,
|
||||
storyInstanceId: storyId,
|
||||
location,
|
||||
};
|
||||
delete newItem.cover;
|
||||
|
|
@ -151,7 +153,7 @@ const AddTimeLineItemModal: React.FC<ModalProps> = ({
|
|||
]}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
{!isRoot && <Form.Item label={'主时间点'}>{lineId}</Form.Item>}
|
||||
{['editSubItem', 'addSubItem'].includes( option) && <Form.Item label={'主时间点'}>{storyItemId}</Form.Item>}
|
||||
<Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
|
||||
<Input placeholder="请输入标题" />
|
||||
</Form.Item>
|
||||
|
|
@ -185,7 +187,9 @@ const AddTimeLineItemModal: React.FC<ModalProps> = ({
|
|||
{/* 新增：时刻图库 */}
|
||||
<Form.Item label="时刻图库（多图）" name="images">
|
||||
<Upload {...uploadImagesProps} maxCount={5}>
|
||||
<Button size={"small"} icon={<UploadOutlined />}>上传多图</Button>
|
||||
<Button size={'small'} icon={<UploadOutlined />}>
|
||||
上传多图
|
||||
</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
import {DeleteOutlined, DownOutlined, EditOutlined, PlusOutlined, UpOutlined} from '@ant-design/icons';
|
||||
import {useIntl, useRequest} from '@umijs/max';
|
||||
import { Button, Card, Popconfirm, message } from 'antd';
|
||||
import React, {useState} from 'react';
|
||||
import {queryStoryItemImages, removeStoryItem} from '../../service';
|
||||
import useStyles from './index.style';
|
||||
import {StoryItem} from "@/pages/story/data";
|
||||
import TimelineImage from "@/components/TimelineImage";
|
||||
import TimelineItemDrawer from '../TimelineItemDrawer';
|
||||
|
||||
const TimelineItem: React.FC<{
|
||||
item: StoryItem;
|
||||
handleOption: (item: StoryItem, option: 'add' | 'edit' | 'addSubItem' | 'editSubItem') => void;
|
||||
refresh: () => void;
|
||||
}> = ({ item, handleOption, refresh }) => {
|
||||
const { styles } = useStyles();
|
||||
const intl = useIntl();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [showActions, setShowActions] = useState(false);
|
||||
const [subItemsExpanded, setSubItemsExpanded] = useState(false);
|
||||
const [openDetail, setOpenDetail] = useState(false)
|
||||
const { data: imagesList } = useRequest(
|
||||
async () => {
|
||||
return await queryStoryItemImages(item.instanceId);
|
||||
},
|
||||
);
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
if (!item.instanceId) return;
|
||||
const response = await removeStoryItem(item.instanceId);
|
||||
if (response.code === 200) {
|
||||
message.success(intl.formatMessage({ id: 'story.deleteSuccess' }));
|
||||
refresh();
|
||||
} else {
|
||||
message.error(intl.formatMessage({ id: 'story.deleteFailed' }));
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(intl.formatMessage({ id: 'story.deleteFailed' }));
|
||||
}
|
||||
};
|
||||
const toggleDescription = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
const toggleSubItems = () => {
|
||||
setSubItemsExpanded(!subItemsExpanded);
|
||||
};
|
||||
|
||||
const displayedDescription = expanded
|
||||
? item.description
|
||||
: item.description?.substring(0, 100) + (item.description && item.description.length > 100 ? '...' : '');
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={styles.timelineItem}
|
||||
title={item.title}
|
||||
onMouseEnter={() => setShowActions(true)}
|
||||
onMouseLeave={() => setShowActions(false)}
|
||||
onClick={() => setOpenDetail(true)}
|
||||
extra={
|
||||
<div
|
||||
className={styles.actions}
|
||||
>
|
||||
{showActions && (
|
||||
<>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<EditOutlined />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleOption(item, 'editSubItem');
|
||||
}}
|
||||
aria-label={intl.formatMessage({ id: 'story.edit' })}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleOption(item, 'addSubItem');
|
||||
}}
|
||||
aria-label={intl.formatMessage({ id: 'story.addSubItem' })}
|
||||
/>
|
||||
<Popconfirm
|
||||
title={intl.formatMessage({ id: 'story.deleteConfirm' })}
|
||||
description={intl.formatMessage({ id: 'story.deleteConfirmDescription' })}
|
||||
onConfirm={(e) => {
|
||||
e?.stopPropagation();
|
||||
handleDelete()
|
||||
}}
|
||||
okText={intl.formatMessage({ id: 'story.yes' })}
|
||||
cancelText={intl.formatMessage({ id: 'story.no' })}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={intl.formatMessage({ id: 'story.delete' })}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
// onClick={() => onDetail(item)}
|
||||
hoverable
|
||||
>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.date}>
|
||||
{item.storyItemTime} {item.location ? `创建于${item.location}` : ''}
|
||||
</div>
|
||||
<div className={styles.description}>
|
||||
{displayedDescription}
|
||||
{item.description && item.description.length > 100 && (
|
||||
<Button
|
||||
type="link"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleDescription();
|
||||
}}
|
||||
>
|
||||
{expanded
|
||||
? intl.formatMessage({ id: 'story.showLess' })
|
||||
: intl.formatMessage({ id: 'story.showMore' })}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{imagesList && imagesList.length > 0 && (
|
||||
<>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginBottom: '20px' }}>
|
||||
{imagesList.map((imageInstanceId, index) => (
|
||||
<TimelineImage
|
||||
key={imageInstanceId + index}
|
||||
title={imageInstanceId}
|
||||
imageInstanceId={imageInstanceId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{item.subItems && item.subItems.length > 0 && (
|
||||
<div className={styles.subItems}>
|
||||
<div
|
||||
className={styles.subItemsHeader}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleSubItems();
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
{intl.formatMessage({ id: 'story.subItems' })} ({item.subItems.length})
|
||||
</span>
|
||||
{subItemsExpanded ? <UpOutlined /> : <DownOutlined />}
|
||||
</div>
|
||||
{subItemsExpanded && (
|
||||
<div className={styles.subItemsList}>
|
||||
{item.subItems.map((subItem) => (
|
||||
<div key={subItem.id} className={styles.subItem}>
|
||||
<div className={styles.subItemDate}>
|
||||
{item.storyItemTime} {item.location ? `创建于${item.location}` : ''}
|
||||
</div>
|
||||
<div className={styles.subItemContent}>
|
||||
{subItem.description}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<TimelineItemDrawer
|
||||
storyItem={item}
|
||||
open={openDetail}
|
||||
setOpen={setOpenDetail}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimelineItem;
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
timelineItem: {
|
||||
marginBottom: '20px',
|
||||
boxShadow: token.boxShadow,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: 'all 0.3s',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
alignItems: 'center',
|
||||
height: '24px',
|
||||
width: '120px',
|
||||
},
|
||||
content: {
|
||||
padding: '10px 0',
|
||||
},
|
||||
cover: {
|
||||
width: '100%',
|
||||
height: '200px',
|
||||
overflow: 'hidden',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '15px',
|
||||
img: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
},
|
||||
},
|
||||
date: {
|
||||
fontSize: '14px',
|
||||
color: token.colorTextSecondary,
|
||||
marginBottom: '10px',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
description: {
|
||||
fontSize: '16px',
|
||||
lineHeight: '1.6',
|
||||
color: token.colorText,
|
||||
marginBottom: '15px',
|
||||
'.ant-btn-link': {
|
||||
padding: '0 4px',
|
||||
},
|
||||
},
|
||||
subItems: {
|
||||
borderTop: `1px dashed ${token.colorBorder}`,
|
||||
paddingTop: '15px',
|
||||
marginTop: '15px',
|
||||
},
|
||||
subItemsHeader: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 'bold',
|
||||
color: token.colorTextHeading,
|
||||
marginBottom: '10px',
|
||||
padding: '5px 0',
|
||||
},
|
||||
subItemsList: {
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
subItem: {
|
||||
display: 'flex',
|
||||
marginBottom: '10px',
|
||||
'&:last-child': {
|
||||
marginBottom: 0,
|
||||
},
|
||||
},
|
||||
subItemDate: {
|
||||
fontWeight: 'bold',
|
||||
minWidth: '100px',
|
||||
color: token.colorTextSecondary,
|
||||
},
|
||||
subItemContent: {
|
||||
flex: 1,
|
||||
color: token.colorText,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import TimelineImage from '@/components/TimelineImage';
|
||||
import AddTimeLineItemModal from '@/pages/list/basic-list/components/AddTimeLineItemModal';
|
||||
import SubTimeLineItemModal from '@/pages/list/basic-list/components/SubTimeLineItemModal';
|
||||
import { StoryItem } from '@/pages/list/basic-list/data';
|
||||
import { queryStoryItemImages } from '@/pages/list/basic-list/service';
|
||||
import AddTimeLineItemModal from '@/pages/story/components/AddTimeLineItemModal';
|
||||
import SubTimeLineItemModal from '@/pages/story/components/SubTimeLineItemModal';
|
||||
import { StoryItem } from '@/pages/story/data';
|
||||
import { queryStoryItemImages } from '@/pages/story/service';
|
||||
import { EditOutlined, PlusCircleOutlined } from '@ant-design/icons';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import { Button, Drawer, Space } from 'antd';
|
||||
|
|
@ -30,7 +30,7 @@ const TimelineItemDrawer = (props: Props) => {
|
|||
useEffect(() => {
|
||||
if (open) {
|
||||
console.log(storyItem);
|
||||
run(storyItem.itemId);
|
||||
run(storyItem.instanceId);
|
||||
}
|
||||
}, [open]);
|
||||
const closeDrawer = () => {
|
||||
|
|
@ -120,8 +120,8 @@ const TimelineItemDrawer = (props: Props) => {
|
|||
visible={openAddSubItemModal}
|
||||
onOk={handleAddSubItem}
|
||||
onCancel={() => setOpenAddSubItemModal(false)}
|
||||
lineId={storyItem.itemId}
|
||||
isRoot={false}
|
||||
lineId={storyItem.storyInstanceId}
|
||||
storyItemId={storyItem.instanceId}
|
||||
/>
|
||||
|
||||
{/* 编辑主时间点模态框 */}
|
||||
|
|
@ -50,14 +50,14 @@ export interface ErrorResponse extends BaseResponse {
|
|||
}
|
||||
export interface StoryItem {
|
||||
id?: number;
|
||||
itemId?: string;
|
||||
instanceId: string;
|
||||
title: string;
|
||||
storyInstanceId: string;
|
||||
masterItemId?: string;
|
||||
description: string;
|
||||
storyItemTime: string; // YYYY-MM-DD
|
||||
createTime: string; // YYYY-MM-DD
|
||||
updateTime: string; // YYYY-MM-DD
|
||||
time?: string; // HH:mm （可选）
|
||||
location?: string;
|
||||
coverInstanceId?: string; // 封面图
|
||||
images?: string[]; // 多张图片
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
import AddTimeLineItemModal from '@/pages/story/components/AddTimeLineItemModal';
|
||||
import TimelineItem from '@/pages/story/components/TimelineItem/TimelineItem';
|
||||
import { StoryItem } from '@/pages/story/data';
|
||||
import { countStoryItem, queryStoryDetail, queryStoryItem } from '@/pages/story/service';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { history, useIntl, useRequest } from '@umijs/max';
|
||||
import { FloatButton, Spin, Timeline } from 'antd';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import './index.css';
|
||||
import useStyles from './style.style';
|
||||
|
||||
interface TimelineItemProps {
|
||||
children: React.ReactNode; // 修正：使用 ReactNode 更通用
|
||||
// label: string
|
||||
}
|
||||
|
||||
const Index = () => {
|
||||
const { id: lineId } = useParams<{ id: string }>();
|
||||
const { styles } = useStyles();
|
||||
const intl = useIntl();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [items, setItems] = useState<TimelineItemProps[]>([]);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hasMoreNew, setHasMoreNew] = useState(true);
|
||||
const [hasMoreOld, setHasMoreOld] = useState(true);
|
||||
const [openAddItemModal, setOpenAddItemModal] = useState(false);
|
||||
const [currentItem, setCurrentItem] = useState<StoryItem>();
|
||||
const [currentOption, setCurrentOption] = useState<'add' | 'edit' | 'addSubItem' | 'editSubItem'>();
|
||||
|
||||
const { data: storyItemList, run } = useRequest(
|
||||
() => {
|
||||
return queryStoryItem(lineId ?? '');
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
},
|
||||
);
|
||||
const {
|
||||
data: detail,
|
||||
run: queryDetail,
|
||||
loading: queryDetailLoading,
|
||||
} = useRequest(() => {
|
||||
return queryStoryDetail(lineId ?? '');
|
||||
});
|
||||
const { data: count, run: queryCount } = useRequest(() => {
|
||||
return countStoryItem(lineId ?? '');
|
||||
});
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
run();
|
||||
}, [lineId]);
|
||||
useEffect(() => {
|
||||
if (!storyItemList?.length) return;
|
||||
console.log(storyItemList);
|
||||
let timelineItems = storyItemList; //handleStoryItemList(storyItemList);
|
||||
// 转换为 Timeline 组件需要的格式
|
||||
const formattedItems = timelineItems.map((item: StoryItem) => ({
|
||||
children: (
|
||||
<TimelineItem
|
||||
item={item}
|
||||
handleOption={(item: StoryItem, option: 'add' | 'edit' | 'addSubItem' | 'editSubItem') => {
|
||||
setCurrentItem(item);
|
||||
setCurrentOption(option)
|
||||
setOpenAddItemModal(true);
|
||||
}}
|
||||
refresh={() => {
|
||||
run();
|
||||
queryCount();
|
||||
queryDetail();
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}));
|
||||
|
||||
setItems(formattedItems);
|
||||
}, [storyItemList]);
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
onBack={() => history.push('/story')}
|
||||
title={queryDetailLoading ? '加载中' : `${detail?.title} ${count ? `共${count}个时刻` : ``}`}
|
||||
>
|
||||
<div className="timeline" ref={containerRef}>
|
||||
{!hasMoreOld && <div style={{ textAlign: 'center', color: '#999' }}>没有更老的内容</div>}
|
||||
{loading && <Spin style={{ display: 'block', margin: '20px auto' }} />}
|
||||
<Timeline items={items} mode={'left'} />
|
||||
{loading && <Spin style={{ display: 'block', margin: '20px auto' }} />}
|
||||
{!hasMoreNew && <div style={{ textAlign: 'center', color: '#999' }}>没有更新的内容</div>}
|
||||
</div>
|
||||
<FloatButton onClick={() => {
|
||||
setCurrentOption('add');
|
||||
setCurrentItem({
|
||||
coverInstanceId: "",
|
||||
createTime: "",
|
||||
description: "",
|
||||
id: 0,
|
||||
images: [],
|
||||
instanceId: "",
|
||||
isRoot: 0,
|
||||
location: "",
|
||||
masterItemId: "",
|
||||
storyInstanceId: "",
|
||||
storyItemTime: "",
|
||||
subItems: [],
|
||||
title: "",
|
||||
updateTime: ""
|
||||
});
|
||||
setOpenAddItemModal(true);
|
||||
}} />
|
||||
<AddTimeLineItemModal
|
||||
visible={openAddItemModal}
|
||||
initialValues={currentItem}
|
||||
option={currentOption}
|
||||
onCancel={() => {
|
||||
setOpenAddItemModal(false);
|
||||
}}
|
||||
onOk={() => {
|
||||
setOpenAddItemModal(false);
|
||||
run();
|
||||
}}
|
||||
storyId={lineId}
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { request } from '@umijs/max';
|
||||
import { StoryItem, StoryType } from './data.d';
|
||||
import {CommonResponse} from "@/types/common";
|
||||
|
||||
type ParamsType = {
|
||||
count?: number;
|
||||
|
|
@ -40,7 +41,11 @@ export async function updateStory(params: ParamsType): Promise<{ data: { list: S
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function queryStoryDetail(itemId: string): Promise<{ data: StoryType }> {
|
||||
return request(`/story/${itemId}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
export async function addStoryItem(params: FormData): Promise<any> {
|
||||
return request(`/story/item`, {
|
||||
method: 'POST',
|
||||
|
|
@ -50,26 +55,36 @@ export async function addStoryItem(params: FormData): Promise<any> {
|
|||
});
|
||||
}
|
||||
|
||||
export async function queryStoryItem(masterItemId: string): Promise<{ data: StoryItem[] }> {
|
||||
export async function queryStoryItem(storyInstanceId: string): Promise<{ data: StoryItem[] }> {
|
||||
return request(`/story/item/list`, {
|
||||
method: 'GET',
|
||||
params: {
|
||||
masterItemId,
|
||||
storyInstanceId,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function queryStoryItemDetail(itemId: string): Promise<{ data: StoryItem[] }> {
|
||||
export async function queryStoryItemDetail(itemId: string): Promise<{ data: StoryItem }> {
|
||||
return request(`/story/item/${itemId}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
export async function countStoryItem(storyInstanceId: string): Promise<{ data: StoryItem }> {
|
||||
return request(`/story/item/count/${storyInstanceId}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
|
||||
export async function queryStoryItemImages(itemId: string): Promise<{ data: string[] }> {
|
||||
return request(`/story/item/images/${itemId}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
export async function removeStoryItem(itemId: string): Promise<CommonResponse<string>> {
|
||||
return request(`/story/item/${itemId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
|
||||
export async function fetchImage(imageInstanceId: string): Promise<any> {
|
||||
return request(`/file/image/${imageInstanceId}`, {
|
||||
|
|
@ -148,6 +148,80 @@ const useStyles = createStyles(({ token }) => {
|
|||
gap: 8,
|
||||
marginBottom: 16,
|
||||
},
|
||||
storyList: {
|
||||
padding: '24px',
|
||||
},
|
||||
toolbar: {
|
||||
marginBottom: '24px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
storyDetail: {
|
||||
padding: '12px',
|
||||
},
|
||||
pageHeader: {
|
||||
padding: 0,
|
||||
marginBottom: '24px',
|
||||
},
|
||||
card: {
|
||||
maxWidth: '800px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
date: {
|
||||
fontSize: '16px',
|
||||
color: token.colorTextSecondary,
|
||||
marginBottom: '20px',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
cover: {
|
||||
width: '100%',
|
||||
height: '300px',
|
||||
overflow: 'hidden',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '20px',
|
||||
img: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
},
|
||||
},
|
||||
description: {
|
||||
fontSize: '16px',
|
||||
lineHeight: '1.8',
|
||||
color: token.colorText,
|
||||
whiteSpace: 'pre-wrap',
|
||||
},
|
||||
subItems: {
|
||||
marginTop: '20px',
|
||||
},
|
||||
subItem: {
|
||||
display: 'flex',
|
||||
marginBottom: '15px',
|
||||
padding: '10px',
|
||||
backgroundColor: token.colorFillAlter,
|
||||
borderRadius: '4px',
|
||||
'&:last-child': {
|
||||
marginBottom: 0,
|
||||
},
|
||||
},
|
||||
subItemDate: {
|
||||
fontWeight: 'bold',
|
||||
minWidth: '120px',
|
||||
color: token.colorTextSecondary,
|
||||
},
|
||||
subItemContent: {
|
||||
flex: 1,
|
||||
color: token.colorText,
|
||||
},
|
||||
timelineItem: {
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-4px)',
|
||||
boxShadow: token.boxShadow,
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue