zlei6/ragflow
1
0
Fork 0
mirror of https://github.com/infiniflow/ragflow.git synced 2026-07-29 20:19:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix: search input controls styling and restore mind map modal overlay (#17436)

Browse Source
This commit is contained in:
euvre
2026-07-29 09:36:07 +08:00
committed by GitHub
parent 8d1eff6ea2
commit e5bb2b60c0
3 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/hooks/use-auto-resize-textarea.ts
View File

@@ -15,6 +15,12 @@ export function useAutoResizeTextarea(
const el = ref.current;
if (!el) return;
el.style.height = 'auto';
// scrollHeight excludes borders while height is border-box, so the
// content box ends up a couple of pixels short and overflow-y-auto
// would show a scrollbar even for a single line. Hide it until the
// content actually exceeds the max height.
const overflowing = el.scrollHeight > maxHeight;
el.style.overflowY = overflowing ? 'auto' : 'hidden';
el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
}, [ref, value, maxHeight]);
}

8
web/src/pages/next-search/search-home.tsx
View File

@@ -35,7 +35,7 @@ export default function SearchHome({
<section className="relative w-full flex transition-all justify-center items-center mt-[15vh]">
<div className="relative z-10 px-8 pt-8 flex text-transparent flex-col justify-center items-center w-[780px]">
<RAGFlowLogo showEmbedIcon={showEmbedLogo}></RAGFlowLogo>
<div className="rounded-lg text-primary text-xl sticky flex justify-center w-full transform scale-100 mt-8 p-6 h-[240px] border">
<div className="rounded-lg text-primary text-xl sticky flex justify-center w-full transform scale-100 mt-8 p-6 min-h-[240px] border">
{!isSearching && <Spotlight className="z-0" />}
<div className="flex flex-col justify-center items-center w-2/3">
{!isSearching && (
@@ -56,7 +56,7 @@ export default function SearchHome({
ref={searchInputRef}
rows={1}
placeholder={t('search.searchGreeting')}
className="w-full rounded-3xl py-4 px-4 pr-14 text-text-primary text-lg bg-bg-base delay-700 border border-border-button resize-none overflow-y-auto scrollbar-thin outline-none focus-visible:ring-1 focus-visible:ring-text-primary/50"
className="w-full rounded-3xl py-4 px-4 pr-14 text-text-primary text-lg bg-bg-base delay-700 border border-border-button resize-none scrollbar-thin outline-none focus-visible:ring-1 focus-visible:ring-text-primary/50"
value={searchText}
onKeyDown={(e) => {
if (
@@ -82,7 +82,7 @@ export default function SearchHome({
/>
<button
type="button"
className="absolute right-2 top-1/2 -translate-y-1/2 transform rounded-full bg-text-primary p-2 text-bg-base shadow w-12"
className="absolute bottom-3 right-3 flex size-9 items-center justify-center rounded-full bg-text-primary text-bg-base shadow transition-opacity hover:opacity-90"
onClick={() => {
if (canSearch === false) {
message.warning(t('search.chooseDataset'));
@@ -91,7 +91,7 @@ export default function SearchHome({
setIsSearching(!isSearching);
}}
>
<Search size={22} className="m-auto" />
<Search size={18} />
</button>
</div>
</div>

45
web/src/pages/next-search/search-view.tsx
View File

@@ -111,7 +111,7 @@ export default function SearchingView({
rows={1}
placeholder={t('search.searchGreeting')}
className={cn(
'w-full rounded-3xl py-4 pl-4 !pr-[8rem] text-primary text-lg bg-bg-base border border-border-button resize-none overflow-y-auto scrollbar-thin outline-none focus-visible:ring-1 focus-visible:ring-text-primary/50 disabled:cursor-not-allowed disabled:opacity-50',
'w-full rounded-3xl py-4 pl-4 !pr-[8rem] text-primary text-lg bg-bg-base border border-border-button resize-none scrollbar-thin outline-none focus-visible:ring-1 focus-visible:ring-text-primary/50 disabled:cursor-not-allowed disabled:opacity-50',
)}
value={searchText}
onChange={(e) => {
@@ -129,19 +129,21 @@ export default function SearchingView({
}
}}
/>
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform flex items-center gap-1">
<X
className="text-text-secondary cursor-pointer opacity-80"
size={14}
onClick={() => {
setSearchText('');
handleClickRelatedQuestion('');
}}
/>
<span className="text-text-secondary opacity-20 ml-4">|</span>
<div className="absolute bottom-3 right-3 flex items-center gap-3">
{searchText && (
<X
className="text-text-secondary cursor-pointer opacity-80 hover:opacity-100"
size={16}
onClick={() => {
setSearchText('');
handleClickRelatedQuestion('');
}}
/>
)}
<span className="h-4 w-px bg-border-button" aria-hidden />
<button
type="button"
className="rounded-full bg-text-primary p-1 text-bg-base shadow w-12 h-8 ml-4"
className="flex size-9 items-center justify-center rounded-full bg-text-primary text-bg-base shadow transition-opacity hover:opacity-90"
onClick={() => {
if (sendingLoading) {
stopOutputMessage();
@@ -151,10 +153,9 @@ export default function SearchingView({
}}
>
{sendingLoading ? (
// <Square size={22} className="m-auto" />
<div className="w-2 h-2 bg-bg-base m-auto"></div>
<div className="size-2 bg-bg-base"></div>
) : (
<Search size={22} className="m-auto" />
<Search size={18} />
)}
</button>
</div>
@@ -333,14 +334,12 @@ export default function SearchingView({
)}
</div>
{mindMapVisible && (
<div className="flex-1 h-[88dvh] z-30 ml-32 mt-5">
<MindMapSheet
visible={mindMapVisible}
hideModal={hideMindMapModal}
data={mindMap}
loading={mindMapLoading}
></MindMapSheet>
</div>
<MindMapSheet
visible={mindMapVisible}
hideModal={hideMindMapModal}
data={mindMap}
loading={mindMapLoading}
></MindMapSheet>
)}
</div>