From 847f013b33f4106b568943824c372d987045ad37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= <qixian.cs@outlook.com>
Date: Sat, 26 Aug 2023 17:06:49 +0800
Subject: [PATCH] chore: update pnpm lock file

---
 src/pages/list/search/articles/index.tsx | 226 +++++++++++++++++++++++
 src/pages/list/search/projects/index.tsx |   2 +
 2 files changed, 228 insertions(+)

diff --git a/src/pages/list/search/articles/index.tsx b/src/pages/list/search/articles/index.tsx
index e69de29b..e11cef07 100644
--- a/src/pages/list/search/articles/index.tsx
+++ b/src/pages/list/search/articles/index.tsx
@@ -0,0 +1,226 @@
+import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
+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 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';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+
+const pageSize = 5;
+
+const Articles: FC = () => {
+  const [form] = Form.useForm();
+
+  const { styles } = useStyles();
+
+  const { data, reload, loading, loadMore, loadingMore } = useRequest(
+    () => {
+      return queryFakeList({
+        count: pageSize,
+      });
+    },
+    {
+      loadMore: true,
+    },
+  );
+
+  const list = data?.list || [];
+
+  const setOwner = () => {
+    form.setFieldsValue({
+      owner: ['wzj'],
+    });
+  };
+
+  const owners = [
+    {
+      id: 'wzj',
+      name: '我自己',
+    },
+    {
+      id: 'wjh',
+      name: '吴家豪',
+    },
+    {
+      id: 'zxx',
+      name: '周星星',
+    },
+    {
+      id: 'zly',
+      name: '赵丽颖',
+    },
+    {
+      id: 'ym',
+      name: '姚明',
+    },
+  ];
+
+  const IconText: React.FC<{
+    type: string;
+    text: React.ReactNode;
+  }> = ({ type, text }) => {
+    switch (type) {
+      case 'star-o':
+        return (
+          <span>
+            <StarOutlined style={{ marginRight: 8 }} />
+            {text}
+          </span>
+        );
+      case 'like-o':
+        return (
+          <span>
+            <LikeOutlined style={{ marginRight: 8 }} />
+            {text}
+          </span>
+        );
+      case 'message':
+        return (
+          <span>
+            <MessageOutlined style={{ marginRight: 8 }} />
+            {text}
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const formItemLayout = {
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 24 },
+      md: { span: 12 },
+    },
+  };
+
+  const loadMoreDom = list.length > 0 && (
+    <div style={{ textAlign: 'center', marginTop: 16 }}>
+      <Button onClick={loadMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
+        {loadingMore ? (
+          <span>
+            <LoadingOutlined /> 加载中...
+          </span>
+        ) : (
+          '加载更多'
+        )}
+      </Button>
+    </div>
+  );
+
+  return (
+    <>
+      <Card bordered={false}>
+        <Form
+          layout="inline"
+          form={form}
+          initialValues={{
+            owner: ['wjh', 'zxx'],
+          }}
+          onValuesChange={reload}
+        >
+          <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>
+              </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>
+            </FormItem>
+            <a className={styles.selfTrigger} onClick={setOwner}>
+              只看自己的
+            </a>
+          </StandardFormRow>
+          <StandardFormRow title="其它选项" grid last>
+            <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>
+                </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>
+                </FormItem>
+              </Col>
+            </Row>
+          </StandardFormRow>
+        </Form>
+      </Card>
+      <Card
+        style={{ marginTop: 24 }}
+        bordered={false}
+        bodyStyle={{ padding: '8px 32px 32px 32px' }}
+      >
+        <List<ListItemDataType>
+          size="large"
+          loading={loading}
+          rowKey="id"
+          itemLayout="vertical"
+          loadMore={loadMoreDom}
+          dataSource={list}
+          renderItem={(item) => (
+            <List.Item
+              key={item.id}
+              actions={[
+                <IconText key="star" type="star-o" text={item.star} />,
+                <IconText key="like" type="like-o" text={item.like} />,
+                <IconText key="message" type="message" text={item.message} />,
+              ]}
+              extra={<div className={styles.listItemExtra} />}
+            >
+              <List.Item.Meta
+                title={
+                  <a className={styles.listItemMetaTitle} href={item.href}>
+                    {item.title}
+                  </a>
+                }
+                description={
+                  <span>
+                    <Tag>Ant Design</Tag>
+                    <Tag>设计语言</Tag>
+                    <Tag>蚂蚁金服</Tag>
+                  </span>
+                }
+              />
+              <ArticleListContent data={item} />
+            </List.Item>
+          )}
+        />
+      </Card>
+    </>
+  );
+};
+
+export default Articles;
diff --git a/src/pages/list/search/projects/index.tsx b/src/pages/list/search/projects/index.tsx
index c4be6ef7..2edec8ca 100644
--- a/src/pages/list/search/projects/index.tsx
+++ b/src/pages/list/search/projects/index.tsx
@@ -9,7 +9,9 @@ import TagSelect from './components/TagSelect';
 import type { ListItemDataType } from './data.d';
 import { queryFakeList } from './service';
 import useStyles from './style.style';
+
 dayjs.extend(relativeTime);
+
 const { Option } = Select;
 const FormItem = Form.Item;
 const { Paragraph } = Typography;