From 9a39e05fdf502b5db44bc3bf6f4f911075b39f49 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 23:23:02 +0800
Subject: [PATCH] Optimize search in user management page

---
 src/global.d.ts           |  1 +
 src/pages/system/User.tsx | 25 +++++++++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 977ae55..a3ac17f 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -176,6 +176,7 @@ interface TableParam {
 }
 
 interface UserGetParam extends PageParam {
+    searchType?: string
     searchValue?: string
     searchRegex?: boolean
 }
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 49d7cd5..44e10b6 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -4,7 +4,6 @@ import dayjs from 'dayjs'
 import {
     COLOR_BACKGROUND,
     COLOR_ERROR_SECONDARY,
-    COLOR_FONT_SECONDARY,
     COLOR_PRODUCTION,
     DATABASE_DELETE_SUCCESS,
     DATABASE_DUPLICATE_KEY,
@@ -64,6 +63,7 @@ const User: React.FC = () => {
     const [userData, setUserData] = useState<UserWithRoleInfoVo[]>([])
     const [isLoadingUserData, setIsLoadingUserData] = useState(false)
 
+    const [searchType, setSearchType] = useState('ALL')
     const [searchValue, setSearchValue] = useState('')
     const [isUseRegex, setIsUseRegex] = useState(false)
     const [isRegexLegal, setIsRegexLegal] = useState(true)
@@ -557,6 +557,10 @@ const User: React.FC = () => {
         }
     }
 
+    const handleOnSearchTypeChange = (value: string) => {
+        setSearchType(value)
+    }
+
     const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
         setIsUseRegex(e.target.checked)
         if (e.target.checked) {
@@ -596,6 +600,7 @@ const User: React.FC = () => {
                     : undefined,
             sortOrder:
                 tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            searchType,
             searchValue: searchValue.trim().length ? searchValue : undefined,
             searchRegex: isUseRegex ? isUseRegex : undefined,
             ...tableParams.filters
@@ -885,14 +890,18 @@ const User: React.FC = () => {
             <Card style={{ overflow: 'inherit' }}>
                 <AntdInput
                     addonBefore={
-                        <span
-                            style={{
-                                fontSize: '0.9em',
-                                color: COLOR_FONT_SECONDARY
-                            }}
+                        <AntdSelect
+                            value={searchType}
+                            onChange={handleOnSearchTypeChange}
+                            style={{ width: '6em' }}
+                            dropdownStyle={{ textAlign: 'center' }}
                         >
-                            内容
-                        </span>
+                            <AntdSelect.Option value={'ALL'}>全部</AntdSelect.Option>
+                            <AntdSelect.Option value={'ID'}>ID</AntdSelect.Option>
+                            <AntdSelect.Option value={'USERNAME'}>用户名</AntdSelect.Option>
+                            <AntdSelect.Option value={'NICKNAME'}>昵称</AntdSelect.Option>
+                            <AntdSelect.Option value={'EMAIL'}>邮箱</AntdSelect.Option>
+                        </AntdSelect>
                     }
                     suffix={
                         <>