mamamiyear/if.u.clients.web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support AI search in resource list page

Browse Source
This commit is contained in:
漂泊旅人
2025-10-29 16:09:14 +08:00
parent 38676ec2d0
commit a8170f45be
6 changed files with 117 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/HintText.tsx
View File

@@ -1,12 +1,13 @@
import React from 'react';
import './HintText.css';
const HintText: React.FC = () => {
return (
<div className="hint-text">
提示：支持输入多行文本与上传图片。按 Enter 发送，Shift+Enter 换行。
</div>
);
type Props = { showUpload?: boolean };
const HintText: React.FC<Props> = ({ showUpload = true }) => {
const text = showUpload
? '提示：支持输入多行文本与上传图片。按 Enter 发送，Shift+Enter 换行。'
: '提示：支持输入多行文本。按 Enter 发送，Shift+Enter 换行。';
return <div className="hint-text">{text}</div>;
};
export default HintText;

8
src/components/InputDrawer.tsx
View File

@@ -9,9 +9,11 @@ type Props = {
onClose: () => void;
onResult?: (data: any) => void;
containerEl?: HTMLElement | null; // 抽屉挂载容器（用于放在标题栏下方）
showUpload?: boolean; // 透传到输入面板，控制图片上传按钮
mode?: 'input' | 'search'; // 透传到输入面板，控制工作模式
};
const InputDrawer: React.FC<Props> = ({ open, onClose, onResult, containerEl }) => {
const InputDrawer: React.FC<Props> = ({ open, onClose, onResult, containerEl, showUpload = true, mode = 'input' }) => {
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [topbarHeight, setTopbarHeight] = React.useState<number>(56);
@@ -64,8 +66,8 @@ const InputDrawer: React.FC<Props> = ({ open, onClose, onResult, containerEl })
<div className="input-drawer-inner">
<div className="input-drawer-title">AI FIND U</div>
<div className="input-drawer-box">
<InputPanel onResult={handleResult} />
<HintText />
<InputPanel onResult={handleResult} showUpload={showUpload} mode={mode} />
<HintText showUpload={showUpload} />
</div>
</div>
</Drawer>

54
src/components/InputPanel.tsx
View File

@@ -1,25 +1,54 @@
import React from 'react';
import { Input, Upload, message, Button, Spin } from 'antd';
import { PictureOutlined, SendOutlined, LoadingOutlined } from '@ant-design/icons';
import { postInput, postInputImage } from '../apis';
import { PictureOutlined, SendOutlined, LoadingOutlined, SearchOutlined } from '@ant-design/icons';
import { postInput, postInputImage, getPeoples } from '../apis';
import './InputPanel.css';
const { TextArea } = Input;
interface InputPanelProps {
onResult?: (data: any) => void;
showUpload?: boolean; // 是否显示图片上传按钮，默认显示
mode?: 'input' | 'search'; // 输入面板工作模式，默认为表单填写（input）
}
const InputPanel: React.FC<InputPanelProps> = ({ onResult }) => {
const InputPanel: React.FC<InputPanelProps> = ({ onResult, showUpload = true, mode = 'input' }) => {
const [value, setValue] = React.useState('');
const [fileList, setFileList] = React.useState<any[]>([]);
const [loading, setLoading] = React.useState(false);
const send = async () => {
const hasText = value.trim().length > 0;
const hasImage = fileList.length > 0;
if (!hasText && !hasImage) {
message.info('请输入内容或上传图片');
const trimmed = value.trim();
const hasText = trimmed.length > 0;
const hasImage = showUpload && fileList.length > 0;
// 搜索模式：仅以文本触发检索，忽略图片
if (mode === 'search') {
if (!hasText) {
message.info('请输入内容');
return;
}
setLoading(true);
try {
console.log('检索文本:', trimmed);
const response = await getPeoples({ search: trimmed, top_k: 10 });
console.log('检索响应:', response);
if (response.error_code === 0) {
message.success('已获取检索结果');
onResult?.(response.data || []);
// 清空输入
setValue('');
setFileList([]);
} else {
message.error(response.error_info || '检索失败，请重试');
}
} catch (error) {
console.error('检索调用失败:', error);
message.error('网络错误，请检查连接后重试');
} finally {
setLoading(false);
}
return;
}
@@ -39,8 +68,8 @@ const InputPanel: React.FC<InputPanelProps> = ({ onResult }) => {
response = await postInputImage(file);
} else {
// 只有文本时，调用文本处理 API
console.log('处理文本:', value.trim());
response = await postInput(value.trim());
console.log('处理文本:', trimmed);
response = await postInput(trimmed);
}
console.log('API响应:', response);
@@ -88,7 +117,7 @@ const InputPanel: React.FC<InputPanelProps> = ({ onResult }) => {
<TextArea
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="请输入个人信息描述，或上传图片…"
placeholder={showUpload ? '请输入个人信息描述，或上传图片…' : '请输入个人信息描述…'}
autoSize={{ minRows: 6, maxRows: 12 }}
style={{ fontSize: 14 }}
onKeyDown={onKeyDown}
@@ -96,6 +125,7 @@ const InputPanel: React.FC<InputPanelProps> = ({ onResult }) => {
/>
</Spin>
<div className="input-actions">
{showUpload && (
<Upload
accept="image/*"
beforeUpload={() => false}
@@ -107,12 +137,14 @@ const InputPanel: React.FC<InputPanelProps> = ({ onResult }) => {
>
<Button type="text" icon={<PictureOutlined />} disabled={loading} />
</Upload>
)}
<Button
type="primary"
icon={loading ? <LoadingOutlined /> : <SendOutlined />}
icon={loading ? <LoadingOutlined /> : (mode === 'search' ? <SearchOutlined /> : <SendOutlined />)}
onClick={send}
loading={loading}
disabled={loading}
aria-label={mode === 'search' ? '搜索' : '发送'}
/>
</div>
</div>

16
src/components/LayoutWrapper.tsx
View File

@@ -14,6 +14,7 @@ const LayoutWrapper: React.FC = () => {
const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
const [inputOpen, setInputOpen] = React.useState(false);
const isHome = location.pathname === '/';
const isList = location.pathname === '/resources';
const layoutShellRef = React.useRef<HTMLDivElement>(null);
const pathToKey = (path: string) => {
@@ -53,8 +54,8 @@ const LayoutWrapper: React.FC = () => {
{/* 顶部标题栏，位于左侧菜单栏之上 */}
<TopBar
onToggleMenu={() => {setInputOpen(false); setMobileMenuOpen((v) => !v);}}
onToggleInput={() => {if (isHome) {setMobileMenuOpen(false); setInputOpen((v) => !v);}}}
isHome={isHome}
onToggleInput={() => {if (isHome || isList) {setMobileMenuOpen(false); setInputOpen((v) => !v);}}}
showInput={isHome || isList}
/>
{/* 下方为主布局：左侧菜单 + 右侧内容 */}
<Layout ref={layoutShellRef as any}>
@@ -76,7 +77,16 @@ const LayoutWrapper: React.FC = () => {
/>
}
/>
<Route path="/resources" element={<ResourceList />} />
<Route
path="/resources"
element={
<ResourceList
inputOpen={inputOpen}
onCloseInput={() => setInputOpen(false)}
containerEl={layoutShellRef.current}
/>
}
/>
<Route path="/menu2" element={<div style={{ padding: 32, color: '#cbd5e1' }}>菜单2的内容暂未实现</div>} />
</Routes>
</Layout>

46
src/components/ResourceList.tsx
View File

@@ -5,6 +5,7 @@ import type { FilterDropdownProps } from 'antd/es/table/interface';
import type { TableProps } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import './MainContent.css';
import InputDrawer from './InputDrawer.tsx';
import { getPeoples } from '../apis';
import type { People } from '../apis';
@@ -14,6 +15,20 @@ const { Content } = Layout;
export type DictValue = Record<string, string>;
export type Resource = People;
// 统一转换 API 返回的人员列表为表格需要的结构
function transformPeoples(list: People[] = []): Resource[] {
return (list || []).map((person: any) => ({
id: person.id || `person-${Date.now()}-${Math.random()}`,
name: person.name || '未知',
gender: person.gender || '其他/保密',
age: person.age || 0,
height: person.height,
marital_status: person.marital_status,
introduction: person.introduction || {},
contact: person.contact || '',
}));
}
// 获取人员列表数据
async function fetchResources(): Promise<Resource[]> {
try {
@@ -31,16 +46,7 @@ async function fetchResources(): Promise<Resource[]> {
}
// 转换数据格式以匹配组件期望的结构
return response.data?.map((person: any) => ({
id: person.id || `person-${Date.now()}-${Math.random()}`,
name: person.name || '未知',
gender: person.gender || '其他/保密',
age: person.age || 0,
height: person.height,
marital_status: person.marital_status,
introduction: person.introduction || {},
contact: person.contact || '',
})) || [];
return transformPeoples(response.data || []);
} catch (error: any) {
console.error('获取人员列表失败:', error);
@@ -497,12 +503,15 @@ function buildNumberRangeFilter(dataIndex: keyof Resource, label: string): Colum
} as ColumnType<Resource>;
}
const ResourceList: React.FC = () => {
type Props = { inputOpen?: boolean; onCloseInput?: () => void; containerEl?: HTMLElement | null };
const ResourceList: React.FC<Props> = ({ inputOpen = false, onCloseInput, containerEl }) => {
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = React.useState(false);
const [data, setData] = React.useState<Resource[]>([]);
const [pagination, setPagination] = React.useState<{ current: number; pageSize: number }>({ current: 1, pageSize: 10 });
const [inputResult, setInputResult] = React.useState<any>(null);
const handleTableChange: TableProps<Resource>['onChange'] = (pg) => {
setPagination({ current: pg?.current ?? 1, pageSize: pg?.pageSize ?? 10 });
@@ -633,6 +642,21 @@ const ResourceList: React.FC = () => {
}}
/>
</div>
{/* 列表页右侧输入抽屉，挂载到标题栏下方容器 */}
<InputDrawer
open={inputOpen}
onClose={onCloseInput || (() => {})}
onResult={(list: any) => {
setInputResult(list);
const mapped = transformPeoples(Array.isArray(list) ? list : []);
setData(mapped);
// 回到第一页，保证用户看到最新结果
setPagination((pg) => ({ current: 1, pageSize: pg.pageSize }));
}}
containerEl={containerEl}
showUpload={false}
mode={'search'}
/>
</Content>
);
};

6
src/components/TopBar.tsx
View File

@@ -6,10 +6,10 @@ import './TopBar.css';
type Props = {
onToggleMenu?: () => void;
onToggleInput?: () => void;
isHome?: boolean;
showInput?: boolean;
};
const TopBar: React.FC<Props> = ({ onToggleMenu, onToggleInput, isHome }) => {
const TopBar: React.FC<Props> = ({ onToggleMenu, onToggleInput, showInput }) => {
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
@@ -28,7 +28,7 @@ const TopBar: React.FC<Props> = ({ onToggleMenu, onToggleInput, isHome }) => {
</div>
<div className="topbar-right">
{isHome && (
{showInput && (
<button className="icon-btn" onClick={onToggleInput} aria-label="打开/收起输入">
<RobotOutlined />
</button>