feat(web): application support url search params

This commit is contained in:
zhaoying
2026-02-06 11:11:11 +08:00
parent 95745ba869
commit 94600cdbfc
2 changed files with 20 additions and 6 deletions

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-02-03 16:34:12 * @Date: 2026-02-03 16:34:12
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-04 18:57:35 * @Last Modified time: 2026-02-06 11:10:16
*/ */
/** /**
* Application Management Page * Application Management Page
@@ -10,11 +10,12 @@
* Supports creating, editing, and deleting applications * Supports creating, editing, and deleting applications
*/ */
import React, { useState, useRef } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Button, Row, Col, App, Select } from 'antd'; import { Button, Row, Col, App, Select } from 'antd';
import clsx from 'clsx'; import clsx from 'clsx';
import { DeleteOutlined } from '@ant-design/icons'; import { DeleteOutlined } from '@ant-design/icons';
import { useSearchParams } from 'react-router-dom'
import type { Application, ApplicationModalRef, Query } from './types'; import type { Application, ApplicationModalRef, Query } from './types';
import ApplicationModal, { types } from './components/ApplicationModal'; import ApplicationModal, { types } from './components/ApplicationModal';
@@ -30,10 +31,21 @@ import { formatDateTime } from '@/utils/format';
const ApplicationManagement: React.FC = () => { const ApplicationManagement: React.FC = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { modal } = App.useApp(); const { modal } = App.useApp();
const [searchParams] = useSearchParams()
const [query, setQuery] = useState<Query>({} as Query); const [query, setQuery] = useState<Query>({} as Query);
const applicationModalRef = useRef<ApplicationModalRef>(null); const applicationModalRef = useRef<ApplicationModalRef>(null);
const scrollListRef = useRef<PageScrollListRef>(null) const scrollListRef = useRef<PageScrollListRef>(null)
useEffect(() => {
// Convert URLSearchParams to a plain object for easier access
const data = Object.fromEntries(searchParams)
const { type } = data
setQuery(prev => ({
...prev,
type: type || undefined
}))
}, [searchParams])
/** Refresh application list */ /** Refresh application list */
const refresh = () => { const refresh = () => {
scrollListRef.current?.refresh(); scrollListRef.current?.refresh();
@@ -71,8 +83,9 @@ const ApplicationManagement: React.FC = () => {
return ( return (
<> <>
<Row gutter={16} className="rb:mb-4"> <Row gutter={16} className="rb:mb-4">
<Col span={3}> <Col span={4}>
<Select <Select
value={query.type}
placeholder={t('application.applicationType')} placeholder={t('application.applicationType')}
options={types.map((type) => ({ options={types.map((type) => ({
value: type, value: type,
@@ -83,7 +96,7 @@ const ApplicationManagement: React.FC = () => {
onChange={handleChangeType} onChange={handleChangeType}
/> />
</Col> </Col>
<Col span={9}> <Col span={8}>
<SearchInput <SearchInput
placeholder={t('application.searchPlaceholder')} placeholder={t('application.searchPlaceholder')}
onSearch={(value) => setQuery({ search: value })} onSearch={(value) => setQuery({ search: value })}

View File

@@ -1,8 +1,8 @@
/* /*
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-02-03 16:34:15 * @Date: 2026-02-03 16:34:15
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:34:15 * @Last Modified time: 2026-02-06 11:08:37
*/ */
/** /**
* Type definitions for Application Management * Type definitions for Application Management
@@ -14,6 +14,7 @@
export interface Query { export interface Query {
/** Search keyword */ /** Search keyword */
search: string; search: string;
type?: string;
} }
/** /**