Skip to content

I
img-manager
Commit a603fa5e by Ivan
Options

fix: 修正通过时, 标签选择的的滚动问题

parent 5565aa5b
Showing with 47 additions and 45 deletions
app/frontend/components/TagSearchInput.jsx
...@@ -159,7 +159,7 @@ export default function TagSearchInput({ value, onChange, placeholder = "输入 ...@@ -159,7 +159,7 @@ export default function TagSearchInput({ value, onChange, placeholder = "输入
</div> </div>
<Popover.Portal> <Popover.Portal>
<Popover.Content <Popover.Content
className="bg-white rounded-md shadow-lg p-4 w-72 max-w-[calc(100vw-2rem)] z-2050" className="bg-white rounded-md shadow-lg p-4 w-72 max-w-[calc(100vw-2rem)] z-250"
sideOffset={5} sideOffset={5}
> >
<div className="space-y-4"> <div className="space-y-4">
...@@ -189,46 +189,48 @@ export default function TagSearchInput({ value, onChange, placeholder = "输入 ...@@ -189,46 +189,48 @@ export default function TagSearchInput({ value, onChange, placeholder = "输入
</div> </div>
<div className="max-h-60 overflow-y-auto"> <div className="max-h-60 overflow-y-auto">
{Object.keys(filteredTags).length > 0 ? ( <div className="mb-4">
<div className="space-y-4"> {Object.keys(filteredTags).length > 0 ? (
{Object.entries(filteredTags).map(([catalog, tags]) => ( <div className="space-y-4">
<div key={catalog || 'uncategorized'} className="space-y-2"> {Object.entries(filteredTags).map(([catalog, tags]) => (
<h3 className="text-sm font-bold text-gray-700"> <div key={catalog || 'uncategorized'} className="space-y-2">
{catalog || '未分类'} <h3 className="text-sm font-bold text-gray-700">
</h3> {catalog || '未分类'}
<div className="space-y-1"> </h3>
{Array.isArray(tags) ? tags.map(tag => { <div className="space-y-1">
const isSelected = selectedTags.some(t => t.id === tag.id) {Array.isArray(tags) ? tags.map(tag => {
return ( const isSelected = selectedTags.some(t => t.id === tag.id)
<button return (
key={tag.id} <button
type="button" key={tag.id}
onClick={() => handleSelectTag(tag)} type="button"
// 已选中的标签也可以点击，用于反选 onClick={() => handleSelectTag(tag)}
className={`w-full text-left px-3 py-2 text-sm rounded-md ${ // 已选中的标签也可以点击，用于反选
isSelected className={`w-full text-left px-3 py-2 text-sm rounded-md ${
? 'bg-indigo-100 text-indigo-800' isSelected
: 'text-gray-700 hover:bg-gray-100' ? 'bg-indigo-100 text-indigo-800'
}`} : 'text-gray-700 hover:bg-gray-100'
> }`}
{tag.name} >
{tag.images_count > 0 && ( {tag.name}
<span className="ml-2 text-xs text-gray-500"> {tag.images_count > 0 && (
({tag.images_count}) <span className="ml-2 text-xs text-gray-500">
</span> ({tag.images_count})
)} </span>
</button> )}
) </button>
}) : <div className="text-sm text-gray-500 py-1">无可用标签</div>} )
}) : <div className="text-sm text-gray-500 py-1">无可用标签</div>}
</div>
</div> </div>
</div> ))}
))} </div>
</div> ) : (
) : ( <div className="text-center py-4 text-sm text-gray-500">
<div className="text-center py-4 text-sm text-gray-500"> {searchQuery ? '没有找到匹配的标签' : '没有可用的标签'}
{searchQuery ? '没有找到匹配的标签' : '没有可用的标签'} </div>
</div> )}
)} </div>
</div> </div>
</div> </div>
<Popover.Arrow className="fill-white" /> <Popover.Arrow className="fill-white" />
......
app/frontend/components/images/ComImageShow.jsx
...@@ -148,8 +148,8 @@ export default function ComImageShow({ path, image, can_edit, can_approve, isAdm ...@@ -148,8 +148,8 @@ export default function ComImageShow({ path, image, can_edit, can_approve, isAdm
{/* 全屏图片模态框 */} {/* 全屏图片模态框 */}
<Dialog.Root open={isModalOpen} onOpenChange={setIsModalOpen}> <Dialog.Root open={isModalOpen} onOpenChange={setIsModalOpen}>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black/50 z-100" /> <Dialog.Overlay className="fixed inset-0 bg-black/50 z-[100]" />
<Dialog.Content className="fixed inset-0 flex items-center justify-center z-150"> <Dialog.Content className="fixed inset-0 flex items-center justify-center z-[150]">
<Dialog.Title className="hidden"/> <Dialog.Title className="hidden"/>
<div className="relative w-full h-full max-w-screen-xl max-h-screen p-4"> <div className="relative w-full h-full max-w-screen-xl max-h-screen p-4">
<img <img
...@@ -186,8 +186,8 @@ export default function ComImageShow({ path, image, can_edit, can_approve, isAdm ...@@ -186,8 +186,8 @@ export default function ComImageShow({ path, image, can_edit, can_approve, isAdm
{/* 审核通过确认对话框 */} {/* 审核通过确认对话框 */}
<Dialog.Root open={isApproveDialogOpen} onOpenChange={setIsApproveDialogOpen}> <Dialog.Root open={isApproveDialogOpen} onOpenChange={setIsApproveDialogOpen}>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black/50 z-100" /> {/* <Dialog.Overlay className="fixed inset-0 bg-black/50 z-[100]" /> */}
<Dialog.Content className="fixed z-150 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-white rounded-lg shadow-xl p-6 z-50"> <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-white rounded-lg shadow-xl p-6 z-[200]">
<Dialog.Title className="text-lg font-medium text-gray-900 mb-4"> <Dialog.Title className="text-lg font-medium text-gray-900 mb-4">
确认通过审核 确认通过审核
</Dialog.Title> </Dialog.Title>
......
app/frontend/components/tags/ComTagsIndex.jsx
...@@ -266,7 +266,7 @@ export default function ComTagsIndex({ ...@@ -266,7 +266,7 @@ export default function ComTagsIndex({
<button <button
type="submit" type="submit"
disabled={createProcessing} disabled={createProcessing}
className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm disabled:opacity-50" className="inline-flex mb-2 justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm disabled:opacity-50"
> >
创建 创建
</button> </button>
......
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