Skip to content

B
bkunyun
Commit 6d5033b9 authored by jiangzijing's avatar jiangzijing
Browse files
Options

feat:添加模板样式

parent c054d7f8
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 109 deletions
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css
View file @ 6d5033b9
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
} }
.templateBox { .templateBox {
padding: 20px 32px 0; padding: 0 32px;
height: calc(100vh - 188px); height: calc(100vh - 168px);
overflow: auto; overflow: auto;
} }
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ 6d5033b9
...@@ -52,6 +52,18 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -52,6 +52,18 @@ const AddTemplate = (props: IAddTemplateProps) => {
const [templateType, setTemplateType] = useState("public"); const [templateType, setTemplateType] = useState("public");
// 滚轮是否到顶,判断是否显示阴影
const [isTop, setIsTop] = useState(true)
// 滚动滚轮时监听是否到顶
const onscroll = (e: any) => {
if (e.target.scrollTop <= 0) {
setIsTop(true)
} else {
setIsTop(false)
}
}
const handleRadio = (value: string) => { const handleRadio = (value: string) => {
setTemplateType(value); setTemplateType(value);
}; };
...@@ -194,42 +206,49 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -194,42 +206,49 @@ const AddTemplate = (props: IAddTemplateProps) => {
return ( return (
<FullScreenDrawer handleClose={setShowAddTemplate}> <FullScreenDrawer handleClose={setShowAddTemplate}>
<div className={style.content}> <div className={style.content}>
<Typography <div
sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }} className={classNames({
> [style.headerBox]: true,
添加工作流模版 [style.headerBoxShadow]: !isTop,
</Typography> })}
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "20px",
}}
> >
<OutlinedInput <Typography
value={title} sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
onChange={(e: any) => { >
setTitle(e.target.value); 添加工作流模版
}} </Typography>
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32, marginTop: "20px" }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "flex-end", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
paddingBottom: "20px",
paddingTop: "20px",
}} }}
> >
<RadioGroupOfButtonStyle <OutlinedInput
value={templateType} value={title}
radioOptions={radioOptions} onChange={(e: any) => {
handleRadio={handleRadio} setTitle(e.target.value);
></RadioGroupOfButtonStyle> }}
{/* <MyButton placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
}}
>
<RadioGroupOfButtonStyle
value={templateType}
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
{/* <MyButton
onClick={handleAddTemplate} onClick={handleAddTemplate}
size={"small"} size={"small"}
style={{ style={{
...@@ -242,84 +261,86 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -242,84 +261,86 @@ const AddTemplate = (props: IAddTemplateProps) => {
: `(${selectTemplateData.length})`) : `(${selectTemplateData.length})`)
} }
/> */} /> */}
</Box>
</Box> </Box>
</Box> </div>
{templateType === "public" && addTemplateList.length === 0 && ( <div className={style.templateBox} onScroll={onscroll} >
<Box {templateType === "public" && addTemplateList.length === 0 && (
sx={{ <Box
display: "flex", sx={{
alignItems: "center", display: "flex",
flexDirection: "column", alignItems: "center",
minHeight: "calc(100vh - 376px)", flexDirection: "column",
justifyContent: "center", minHeight: "calc(100vh - 376px)",
}} justifyContent: "center",
> }}
<img alt="" src={noData} />
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
>
暂无相关模版
</Typography>
</Box>
)}
<div className={style.templateList}>
{templateType !== "public" && (
<div
className={classNames({
[style.templateLi]: true,
[style.addCustomTemplate]: true,
})}
onClick={handleAddCustomTemplate}
> >
<AddIcon /> <img alt="" src={noData} />
<span className={style.addCustomTemplateText}> <Typography
创建自定义模板 sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
</span> >
</div> 暂无相关模版
</Typography>
</Box>
)} )}
{addTemplateList.map((item: any, index) => { <div className={style.templateList}>
return ( {templateType !== "public" && (
<div <div
className={classNames({ className={classNames({
[style.templateLi]: true, [style.templateLi]: true,
[style.templateLiCustom]: templateType !== "public", [style.addCustomTemplate]: true,
})} })}
key={index} onClick={handleAddCustomTemplate}
onClick={() => {
handleSelectTemplate(item.id);
}}
> >
<div className={style.templateLiTop}> <AddIcon />
<span className={style.templateTitle}>{item.title}</span> <span className={style.addCustomTemplateText}>
{/* <Checkbox 创建自定义模板
</span>
</div>
)}
{addTemplateList.map((item: any, index) => {
return (
<div
className={classNames({
[style.templateLi]: true,
[style.templateLiCustom]: templateType !== "public",
})}
key={index}
onClick={() => {
handleSelectTemplate(item.id);
}}
>
<div className={style.templateLiTop}>
<span className={style.templateTitle}>{item.title}</span>
{/* <Checkbox
size="small" size="small"
sx={{ padding: "0px" }} sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)} checked={selectTemplateData.includes(item.id)}
/> */} /> */}
</div> </div>
<div className={style.templateLiInfo}> <div className={style.templateLiInfo}>
<span <span
className={style.templateLiInfoText} className={style.templateLiInfoText}
style={{ marginRight: "24px" }} style={{ marginRight: "24px" }}
> >
版本：{item.version} 版本：{item.version}
</span> </span>
<span className={style.templateLiInfoText}> <span className={style.templateLiInfoText}>
更新时间：{item.updatedTime} 更新时间：{item.updatedTime}
</span> </span>
</div> </div>
<div className={style.templateLiDesc}>{item.description}</div> <div className={style.templateLiDesc}>{item.description}</div>
<div className={style.templateLiEditBox}> <div className={style.templateLiEditBox}>
<MySwitch <MySwitch
defaultChecked={item.favorited} defaultChecked={item.favorited}
onChange={(e: any) => onChange={(e: any) =>
templateSwitch(e, item.id) templateSwitch(e, item.id)
} }
></MySwitch> ></MySwitch>
</div> </div>
{/* {templateType !== "public" && ( {/* {templateType !== "public" && (
<MyButton <MyButton
onClick={() => handleEditTemplate(item)} onClick={() => handleEditTemplate(item)}
size={"small"} size={"small"}
...@@ -331,22 +352,23 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -331,22 +352,23 @@ const AddTemplate = (props: IAddTemplateProps) => {
/> />
</div> </div>
)} */} )} */}
</div> </div>
);
})}
{hiddenBoxArr.length !== 4 &&
hiddenBoxArr.map((item, index) => {
return (
<div
key={`-${index}`}
className={classNames({
[style.templateLi]: true,
[style.templateLiHidden]: true,
})}
/>
); );
})} })}
{hiddenBoxArr.length !== 4 &&
hiddenBoxArr.map((item, index) => {
return (
<div
key={`-${index}`}
className={classNames({
[style.templateLi]: true,
[style.templateLiHidden]: true,
})}
/>
);
})}
</div>
</div> </div>
</div> </div>
{customTemplateInfo?.show ? ( {customTemplateInfo?.show ? (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment