Zverse/ai-digital-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 update 来源筛选隐藏

Browse Source
This commit is contained in:
LittleBoy 2024-12-22 22:37:19 +08:00 committed by Coding
parent 2db8d7aac8
commit ea75f8727f
2 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/core.scss
View File

@ -384,10 +384,13 @@
} }
.options-list-container { .options-list-container {
@apply overflow-auto py-1 drop-shadow absolute top-[30px]; @apply py-2 drop-shadow absolute top-[30px];
border-radius: 0 0 0.75rem 0.75rem; border-radius: 0 0 0.75rem 0.75rem;
background: linear-gradient(180deg, rgb(244, 247, 252) 0%, rgb(217, 232, 255) 100%); background: linear-gradient(180deg, rgb(244, 247, 252) 0%, rgb(217, 232, 255) 100%);
max-height: calc(100vh - var(--app-header-header) - 300px); .inner{
@apply overflow-auto;
max-height: 300px;
}
} }
.options-list { .options-list {

23
src/components/form/tag-select.tsx
View File

@ -1,6 +1,6 @@
import React, {useMemo, useState} from "react"; import React, {useMemo, useRef} from "react";
import {Checkbox, Popover} from "antd"; import {Checkbox, Popover} from "antd";
import {useBoolean} from "ahooks"; import {useBoolean, useClickAway} from "ahooks";
import {CaretUpOutlined} from "@ant-design/icons"; import {CaretUpOutlined} from "@ant-design/icons";
const TagSelect = (props: { const TagSelect = (props: {
@ -86,15 +86,24 @@ const TagSelect = (props: {
return parentList.findIndex(s => s[1] == item.value) != -1; return parentList.findIndex(s => s[1] == item.value) != -1;
} }
const ref = useRef<HTMLDivElement|null>(null)
useClickAway(()=>{
set(false)
},ref)
return (<div className={`tag-select-container z-10 select-none relative group ${props.className}`}> return (<div ref={ref} className={`tag-select-container z-10 select-none relative group ${props.className}`}>
<div className="select-value w-[120px] flex justify-center items-center" <div className="select-value w-[120px] flex justify-center items-center"
onMouseEnter={() => set(!visible)} onClick={(e) => {
e.preventDefault();
e.stopPropagation();
set(!visible)
}}
> >
<span>{checkedAll ? '全部来源' : '来源'}</span> <span>{checkedAll ? '全部来源' : '来源'}</span>
<CaretUpOutlined className={`ml-2 arrow-icon ${visible ? 'rotate-0' : 'rotate-180'}`}/> <CaretUpOutlined className={`ml-2 arrow-icon ${visible ? 'rotate-0' : 'rotate-180'}`}/>
</div> </div>
<div className={`options-list-container absolute ${visible ? 'block' : 'hidden'}`}> <div className={`options-list-container absolute ${visible ? 'block' : 'hidden'}`}>
<div className="inner">
<ul className="options-list"> <ul className="options-list">
<li className="select-option-item relative"> <li className="select-option-item relative">
<div className="option-value whitespace-nowrap flex justify-between"> <div className="option-value whitespace-nowrap flex justify-between">
@ -110,7 +119,10 @@ const TagSelect = (props: {
{(option.children && option.children.length > 0) ? {(option.children && option.children.length > 0) ?
<Popover placement="rightTop" trigger={['hover']} <Popover placement="rightTop" trigger={['hover']}
rootClassName="tag-select-child-container" arrow={false} rootClassName="tag-select-child-container" arrow={false}
content={option.children && <ul className="sub-options-list"> content={option.children && <ul className="sub-options-list select-none" onClick={(e)=>{
e.preventDefault();
e.stopPropagation()
}}>
{option.children.map((subOption) => { {option.children.map((subOption) => {
const myCheckStatus = level2Checked(subOption, option) const myCheckStatus = level2Checked(subOption, option)
return (<li key={subOption.value} return (<li key={subOption.value}
@ -146,6 +158,7 @@ const TagSelect = (props: {
</li>) </li>)
})} })}
</ul> </ul>
</div>
</div> </div>
</div> </div>
) )