fixed 新闻编辑器样式及新增位置问题

This commit is contained in:
LittleBoy 2024-12-22 23:28:54 +08:00
parent f0ef2a827d
commit c73911eb95
6 changed files with 18 additions and 19 deletions

View File

@ -15,7 +15,7 @@
}
}
.article-action-add{
@apply text-gray-400 text-sm inline-block bg-[#cce2ff] w-[80px] justify-center flex rounded-xl cursor-pointer hover:bg-blue-300 hover:text-white;
@apply text-gray-600 text-sm inline-block bg-[#cce2ff] w-[80px] justify-center flex rounded-xl cursor-pointer hover:bg-blue-300 hover:text-white;
}
}
}

View File

@ -16,7 +16,7 @@ type Props = {
editable?: boolean;
onChange?: (blocks: BlockContent[]) => void;
onRemove?: () => void;
onAdd?: () => void;
onAdd?: (index?:number) => void;
errorMessage?: string;
}
@ -48,7 +48,6 @@ export default function ArticleBlock(
onAdd,
onChange,
index,
errorMessage,
}: Props) {
const blocks = rebuildBlockArray(defaultBlocks)
@ -60,7 +59,7 @@ export default function ArticleBlock(
return <div className={`${styles.blockContainer} group`}>
{editable && index == 1 && <div className={'divider-container before'}><Divider>
<span onClick={onAdd} className="article-action-add" title="新增分组"><IconAdd style={{fontSize: 24}}/></span>
<span onClick={()=>onAdd?.(1)} className="article-action-add" title="新增分组"><IconAdd style={{fontSize: 24}}/></span>
</Divider></div> }
<div className={styles.blockInner}>
<div className={clsx(className || '', styles.block, index == 0 ? styles.blockFist : '', ' hover:bg-blue-10')}>
@ -85,7 +84,7 @@ export default function ArticleBlock(
okText="删除"
cancelText="取消"
>
<span className="article-action-icon hidden group-hover:block" title="删除此分组">
<span className="article-action-icon hidden group-hover:block ml-1" title="删除此分组">
<IconDelete style={{fontSize: 24}}/>
</span>
</Popconfirm> : <span></span>
@ -94,7 +93,7 @@ export default function ArticleBlock(
</div>
{editable && <div className={'divider-container after'}><Divider>
<span onClick={onAdd} className="article-action-add" title="新增分组"><IconAdd style={{fontSize: 24}}/></span>
<span onClick={()=>onAdd?.(index + 1)} className="article-action-add" title="新增分组"><IconAdd style={{fontSize: 24}}/></span>
</Divider></div> }
</div>
}

View File

@ -128,8 +128,8 @@ export default function ArticleEditModal(props: Props) {
}} placeholder={'请输入文章标题'}/>
<div className="text-red-500">{state.msgTitle}</div>
</div>
<div className="article-body mt-3">
<div className="box mt-1">
<div className="article-body">
<div className="box">
<ArticleGroup
errorMessage={state.msgGroup} editable groups={groups}
onChange={list => {
@ -141,11 +141,11 @@ export default function ArticleEditModal(props: Props) {
{state.error && <div className="text-red-500">{state.error}</div>}
</div>
<div className="modal-control-footer flex justify-end">
<Space>
{props.type == 'news' ? <button></button> : null}
<button onClick={() => props.onClose?.()}></button>
<button>{props.type == 'news' ? '确定' : '重新生成'}</button>
</Space>
<div className="text-lg flex gap-10 ">
{props.type == 'news' ? <button className="text-gray-400 hover:text-gray-800"></button> : null}
<button className="text-gray-400 hover:text-gray-800" onClick={() => props.onClose?.()}></button>
<button className="text-gray-800 hover:text-blue-500">{props.type == 'news' ? '确定' : '重新生成'}</button>
</div>
</div>
</Modal>);
}

View File

@ -69,8 +69,8 @@ export default function ArticleGroup({groups, editable, onChange, errorMessage}:
</div>
<div className={"panel groups-list flex-1"}>
<div className={"area-title"}>
<span className=""></span>
<span className="text-gray-400"></span>
<span className=""></span>
<span className="text-gray-400"></span>
</div>
<div className="panel-body py-3">
@ -86,8 +86,8 @@ export default function ArticleGroup({groups, editable, onChange, errorMessage}:
}}
errorMessage={errorMessage}
index={index}
onAdd={() => {
handleAddGroup?.(index + 1)
onAdd={(_index) => {
handleAddGroup?.(_index ? _index :index + 1)
}}
onRemove={async () => {
if (groups.length == 1) {

View File

@ -25,7 +25,7 @@ export const LogoText = ({style, className}: { style?: React.CSSProperties, clas
return (
<div className={`flex h-full ${className}`}>
<AppLogo style={style}/>
<span className={'ml-2 text-md relative top-1'}>{appName}</span>
<span className={'ml-2 text-lg relative top-1'}>{appName}</span>
</div>
)
}

View File

@ -52,7 +52,7 @@ export const BaseLayout: React.FC<LayoutProps> = ({children}) => {
<div className="min-h-screen w-full">
<div className="app-header">
<div className="logo-container">
<LogoText style={{fontSize: 24}}/>
<LogoText style={{fontSize: 30}}/>
</div>
<DashboardNavigation/>
<div className="flex items-center">