refactor: Select.Options => options

src/pages/list/mock/index.ts

@@ -0,0 +1,6 @@
+import { DefaultOptionType } from 'antd/es/select';
+
+export const categoryOptions: DefaultOptionType[] = Array.from({ length: 12 }).map((_, index) => ({
+  value: `cat${index + 1}`,
+  label: `类目${index + 1}`,
+}));

src/pages/list/search/applications/index.tsx

@@ -14,6 +14,7 @@ import TagSelect from './components/TagSelect';
 import type { ListItemDataType } from './data.d';
 import { queryFakeList } from './service';
 import useStyles from './style.style';
+import { categoryOptions } from '../../mock';
 const { Option } = Select;
 export function formatWan(val: number) {
   const v = val * 1;
@@ -95,18 +96,9 @@ export const Applications: FC<Record<string, any>> = () => {
           >
             <Form.Item name="category">
               <TagSelect expandable>
-                <TagSelect.Option value="cat1">类目一</TagSelect.Option>
-                <TagSelect.Option value="cat2">类目二</TagSelect.Option>
-                <TagSelect.Option value="cat3">类目三</TagSelect.Option>
-                <TagSelect.Option value="cat4">类目四</TagSelect.Option>
-                <TagSelect.Option value="cat5">类目五</TagSelect.Option>
-                <TagSelect.Option value="cat6">类目六</TagSelect.Option>
-                <TagSelect.Option value="cat7">类目七</TagSelect.Option>
-                <TagSelect.Option value="cat8">类目八</TagSelect.Option>
-                <TagSelect.Option value="cat9">类目九</TagSelect.Option>
-                <TagSelect.Option value="cat10">类目十</TagSelect.Option>
-                <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
-                <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
+                {categoryOptions.map((category) => (
+                  <TagSelect.Option value={category.value!} key={category.value}>{category.label}</TagSelect.Option>
+                ))}
               </TagSelect>
             </Form.Item>
           </StandardFormRow>
@@ -120,9 +112,13 @@ export const Applications: FC<Record<string, any>> = () => {
                       maxWidth: 200,
                       width: '100%',
                     }}
-                  >
-                    <Option value="lisa">王昭君</Option>
-                  </Select>
+                    options={[
+                      {
+                        label: '王昭君',
+                        value: 'lisa',
+                      }
+                    ]}
+                  />
                 </Form.Item>
               </Col>
               <Col lg={8} md={10} sm={10} xs={24}>
@@ -133,10 +129,17 @@ export const Applications: FC<Record<string, any>> = () => {
                       maxWidth: 200,
                       width: '100%',
                     }}
-                  >
-                    <Option value="good">优秀</Option>
-                    <Option value="normal">普通</Option>
-                  </Select>
+                    options={[
+                      {
+                        label: '优秀',
+                        value: 'good',
+                      },
+                      {
+                        label: '普通',
+                        value: 'normal',
+                      },
+                    ]}
+                  />
                 </Form.Item>
               </Col>
             </Row>

src/pages/list/search/articles/index.tsx

@@ -2,13 +2,15 @@ import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@a
 import { useRequest } from '@umijs/max';
 import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import ArticleListContent from './components/ArticleListContent';
 import StandardFormRow from './components/StandardFormRow';
 import TagSelect from './components/TagSelect';
 import type { ListItemDataType } from './data.d';
 import { queryFakeList } from './service';
 import useStyles from './style.style';
+import { categoryOptions } from '../../mock';
+import { DefaultOptionType } from 'antd/es/select';
 
 const { Option } = Select;
 const FormItem = Form.Item;
@@ -115,6 +117,11 @@ const Articles: FC = () => {
     </div>
   );
 
+  const ownerOptions = useMemo<DefaultOptionType[]>(() => owners.map(item => ({
+    label: item.name,
+    value: item.id,
+  })), [owners]);
+
   return (
     <>
       <Card bordered={false}>
@@ -129,30 +136,20 @@ const Articles: FC = () => {
           <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
             <FormItem name="category">
               <TagSelect expandable>
-                <TagSelect.Option value="cat1">类目一</TagSelect.Option>
-                <TagSelect.Option value="cat2">类目二</TagSelect.Option>
-                <TagSelect.Option value="cat3">类目三</TagSelect.Option>
-                <TagSelect.Option value="cat4">类目四</TagSelect.Option>
-                <TagSelect.Option value="cat5">类目五</TagSelect.Option>
-                <TagSelect.Option value="cat6">类目六</TagSelect.Option>
-                <TagSelect.Option value="cat7">类目七</TagSelect.Option>
-                <TagSelect.Option value="cat8">类目八</TagSelect.Option>
-                <TagSelect.Option value="cat9">类目九</TagSelect.Option>
-                <TagSelect.Option value="cat10">类目十</TagSelect.Option>
-                <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
-                <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
+                {categoryOptions.map((category) => (
+                  <TagSelect.Option value={category.value!} key={category.value}>{category.label}</TagSelect.Option>
+                ))}
               </TagSelect>
             </FormItem>
           </StandardFormRow>
           <StandardFormRow title="owner" grid>
             <FormItem name="owner" noStyle>
-              <Select mode="multiple" placeholder="选择 owner" style={{ minWidth: '6rem' }}>
-                {owners.map((owner) => (
-                  <Option key={owner.id} value={owner.id}>
-                    {owner.name}
-                  </Option>
-                ))}
-              </Select>
+              <Select
+                mode="multiple"
+                placeholder="选择 owner"
+                style={{ minWidth: '6rem' }}
+                options={ownerOptions}
+              />
             </FormItem>
             <a className={styles.selfTrigger} onClick={setOwner}>
               只看自己的
@@ -162,16 +159,30 @@ const Articles: FC = () => {
             <Row gutter={16}>
               <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                 <FormItem {...formItemLayout} label="活跃用户" name="user">
-                  <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
-                    <Option value="lisa">李三</Option>
-                  </Select>
+                  <Select
+                    placeholder="不限"
+                    style={{ maxWidth: 200, width: '100%' }}
+                    options={[
+                      {
+                        label: '李三',
+                        value: 'lisa',
+                      }
+                    ]}
+                  />
                 </FormItem>
               </Col>
               <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                 <FormItem {...formItemLayout} label="好评度" name="rate">
-                  <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
-                    <Option value="good">优秀</Option>
-                  </Select>
+                  <Select
+                    placeholder="不限"
+                    style={{ maxWidth: 200, width: '100%' }}
+                    options={[
+                      {
+                        label: '优秀',
+                        value: 'good',
+                      }
+                    ]}
+                  />
                 </FormItem>
               </Col>
             </Row>

src/pages/list/search/projects/index.tsx

@@ -9,15 +9,10 @@ import TagSelect from './components/TagSelect';
 import type { ListItemDataType } from './data.d';
 import { queryFakeList } from './service';
 import useStyles from './style.style';
-import { DefaultOptionType } from 'antd/es/select';
+import { categoryOptions } from '../../mock';
 
 dayjs.extend(relativeTime);
 
-const categoryOptions: DefaultOptionType[] = Array.from({length: 12}).map((_, index) => ({
-  value: `cat${index + 1}`,
-  label: `类目${index + 1}`,
-}));
-
 const FormItem = Form.Item;
 const { Paragraph } = Typography;
 const getKey = (id: string, index: number) => `${id}-${index}`;