Skip to content

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

feat:滚动时显示阴影、一些交互

parent ed810906
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 134 deletions
src/views/Project/ProjectData/index.module.css
View file @ b08567c0
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
position: relative; position: relative;
} }
.projectDataStickyTop { .projectDataStickyTop {
padding: 28px 24px; padding: 28px 24px 64px;
position: relative; position: relative;
} }
.projectDataTitle { .projectDataTitle {
...@@ -56,8 +56,9 @@ ...@@ -56,8 +56,9 @@
.projectDataStickyBox { .projectDataStickyBox {
height: 64px; height: 64px;
position: sticky; width: calc(100vw - 220px);
bottom: -1px; position: fixed;
bottom: 0px;
border: 1px solid #ebedf0; border: 1px solid #ebedf0;
z-index: 100; z-index: 100;
background-color: #fff; background-color: #fff;
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css
View file @ b08567c0
...@@ -2,16 +2,31 @@ ...@@ -2,16 +2,31 @@
flex: 1; flex: 1;
background-color: #fff; background-color: #fff;
border-radius: 16px 0 0 0; border-radius: 16px 0 0 0;
padding: 24px 32px; padding-top: 24px;
box-sizing: border-box; box-sizing: border-box;
}
.headerBox {
padding: 0 32px;
}
.headerBoxShadow {
box-shadow: 0 5px 4px -4px rgb(0, 0, 0, .15);
}
.templateBox {
padding: 20px 32px 0;
height: calc(100vh - 188px);
overflow: auto; overflow: auto;
} }
.templateList { .templateList {
/* height: 2000px; */ /* height: 2000px; */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.templateLi { .templateLi {
height: 146px; height: 146px;
box-sizing: border-box; box-sizing: border-box;
...@@ -24,12 +39,15 @@ ...@@ -24,12 +39,15 @@
margin-right: 16px; margin-right: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.templateLiCustom { .templateLiCustom {
height: 194px; height: 194px;
} }
.templateLiHidden { .templateLiHidden {
visibility: hidden; visibility: hidden;
} }
.addCustomTemplate { .addCustomTemplate {
height: 194px; height: 194px;
box-sizing: border-box; box-sizing: border-box;
...@@ -38,23 +56,28 @@ ...@@ -38,23 +56,28 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.addCustomTemplateText { .addCustomTemplateText {
margin-top: 12px; margin-top: 12px;
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
} }
.templateLi:hover { .templateLi:hover {
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08); box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
} }
.templateLi:nth-child(4n) { .templateLi:nth-child(4n) {
margin-right: 0; margin-right: 0;
} }
.templateLiTop { .templateLiTop {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.templateTitle { .templateTitle {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
...@@ -64,14 +87,17 @@ ...@@ -64,14 +87,17 @@
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 22px; line-height: 22px;
} }
.templateLiInfo { .templateLiInfo {
margin-bottom: 8px; margin-bottom: 8px;
} }
.templateLiInfoText { .templateLiInfoText {
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: 12px;
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
} }
.templateLiDesc { .templateLiDesc {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -82,8 +108,9 @@ ...@@ -82,8 +108,9 @@
font-size: 12px; font-size: 12px;
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
} }
.templateLiEditBox { .templateLiEditBox {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: 16px; margin-top: 16px;
} }
\ No newline at end of file
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ b08567c0
...@@ -50,6 +50,9 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -50,6 +50,9 @@ const AddTemplate = (props: IAddTemplateProps) => {
const [templateType, setTemplateType] = useState("public"); const [templateType, setTemplateType] = useState("public");
// 滚轮是否到顶,判断是否显示阴影
const [isTop, setIsTop] = useState(true)
const handleRadio = (value: string) => { const handleRadio = (value: string) => {
setTemplateType(value); setTemplateType(value);
}; };
...@@ -161,153 +164,172 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -161,153 +164,172 @@ const AddTemplate = (props: IAddTemplateProps) => {
return arr; return arr;
}, [addTemplateList, templateType]); }, [addTemplateList, templateType]);
// 滚动滚轮时监听是否到顶
const onscroll = (e: any) => {
if (e.target.scrollTop <= 0) {
setIsTop(true)
} else {
setIsTop(false)
}
}
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
onClick={handleAddTemplate}
size={"small"}
style={{
marginLeft: "12px",
}} }}
text={ placeholder="输入关键词搜索"
"添加模版" + size="small"
(selectTemplateData.length === 0 sx={{ width: 340, height: 32 }}
? "" endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
: `(${selectTemplateData.length})`)
}
/> />
</Box> <Box
</Box> sx={{
{templateType === "public" && addTemplateList.length === 0 && ( display: "flex",
<Box justifyContent: "flex-end",
sx={{ alignItems: "center",
display: "flex", }}
alignItems: "center",
flexDirection: "column",
minHeight: "calc(100vh - 376px)",
justifyContent: "center",
}}
>
<img alt="" src={noData} />
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
> >
暂无相关模版 <RadioGroupOfButtonStyle
</Typography> value={templateType}
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<MyButton
onClick={handleAddTemplate}
size={"small"}
style={{
marginLeft: "12px",
}}
text={
"添加模版" +
(selectTemplateData.length === 0
? ""
: `(${selectTemplateData.length})`)
}
/>
</Box>
</Box> </Box>
)} </div>
<div className={style.templateList}> <div className={style.templateBox} onScroll={onscroll} >
{templateType !== "public" && ( {templateType === "public" && addTemplateList.length === 0 && (
<div <Box
className={classNames({ sx={{
[style.templateLi]: true, display: "flex",
[style.addCustomTemplate]: true, alignItems: "center",
})} flexDirection: "column",
onClick={handleAddCustomTemplate} minHeight: "calc(100vh - 376px)",
justifyContent: "center",
}}
> >
<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 创建自定义模板
size="small" </span>
sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)}
/>
</div>
<div className={style.templateLiInfo}>
<span
className={style.templateLiInfoText}
style={{ marginRight: "24px" }}
>
版本：{item.version}
</span>
<span className={style.templateLiInfoText}>
更新时间：{item.updatedTime}
</span>
</div>
<div className={style.templateLiDesc}>{item.description}</div>
{templateType !== "public" && (
<div className={style.templateLiEditBox}>
<MyButton
onClick={() => handleEditTemplate(item)}
size={"small"}
style={{
height: "32px",
}}
color="inherit"
text="编辑模板"
/>
</div>
)}
</div> </div>
); )}
})} {addTemplateList.map((item: any, index) => {
{hiddenBoxArr.length !== 4 &&
hiddenBoxArr.map((item, index) => {
return ( return (
<div <div
key={`-${index}`}
className={classNames({ className={classNames({
[style.templateLi]: true, [style.templateLi]: true,
[style.templateLiHidden]: 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"
sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)}
/>
</div>
<div className={style.templateLiInfo}>
<span
className={style.templateLiInfoText}
style={{ marginRight: "24px" }}
>
版本：{item.version}
</span>
<span className={style.templateLiInfoText}>
更新时间：{item.updatedTime}
</span>
</div>
<div className={style.templateLiDesc}>{item.description}</div>
{templateType !== "public" && (
<div className={style.templateLiEditBox}>
<MyButton
onClick={() => handleEditTemplate(item)}
size={"small"}
style={{
height: "32px",
}}
color="inherit"
text="编辑模板"
/>
</div>
)}
</div>
); );
})} })}
{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 ? (
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
View file @ b08567c0
...@@ -81,7 +81,7 @@ const TemplateBox = (props: any) => { ...@@ -81,7 +81,7 @@ const TemplateBox = (props: any) => {
</Typography> </Typography>
</Box> </Box>
<Typography className={styles.templateDescText}> <Typography className={styles.templateDescText}>
{info.description} {info.description ? info.description : "此模板暂无描述。"}
</Typography> </Typography>
</Box> </Box>
<Box <Box
......
src/views/Project/components/AddProject/index.tsx
View file @ b08567c0
...@@ -214,7 +214,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -214,7 +214,7 @@ const AddProject = (props: IAddProjectProps) => {
id="desc" id="desc"
label="项目描述" label="项目描述"
multiline multiline
rows={5} rows={4}
placeholder="请输入项目描述" placeholder="请输入项目描述"
onChange={handleDescChange} onChange={handleDescChange}
helperText={descCheck.help} helperText={descCheck.help}
...@@ -224,7 +224,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -224,7 +224,7 @@ const AddProject = (props: IAddProjectProps) => {
position: "absolute", position: "absolute",
bottom: "7px", bottom: "7px",
right: "12px", right: "12px",
color: desc.length >= 100 ? "#d32f2f" : "#C2C6CC" color: desc.length >= 300 ? "#d32f2f" : "#C2C6CC"
}} }}
> >
{desc.length}/300 {desc.length}/300
......
src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx
View file @ b08567c0
...@@ -240,14 +240,27 @@ const SaveCustomTemplate = (props: IProps) => { ...@@ -240,14 +240,27 @@ const SaveCustomTemplate = (props: IProps) => {
helperText={versionHelper.helperText} helperText={versionHelper.helperText}
style={{ marginBottom: "20px" }} style={{ marginBottom: "20px" }}
></MyInput> ></MyInput>
<MyInput <div style={{ position: "relative" }}>
value={description} <MyInput
label="模板描述" value={description}
placeholder="模板描述" id="desc"
onChange={handleDescriptionChange} label="模板描述"
multiline placeholder="模板描述"
rows={4} onChange={handleDescriptionChange}
></MyInput> multiline
rows={4}
/>
<span
style={{
position: "absolute",
bottom: "7px",
right: "12px",
color: description.length >= 300 ? "#d32f2f" : "#C2C6CC"
}}
>
{description.length}/300
</span>
</div>
</div> </div>
</MyDialog> </MyDialog>
); );
......
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