Story排版修改

src/pages/story/index.tsx

@@ -0,0 +1,237 @@
+import { DownOutlined, PlusOutlined } from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-components';
+import { history, useRequest } from '@umijs/max';
+import { Avatar, Button, Card, Dropdown, Input, List, Modal, Radio } from 'antd';
+import type { FC } from 'react';
+import React, { useState } from 'react';
+import OperationModal from './components/OperationModal';
+import type { StoryType } from './data.d';
+import { addStory, deleteStory, queryTimelineList, updateStory } from './service';
+import useStyles from './style.style';
+
+/*const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;*/
+const { Search } = Input;
+
+const ListContent = ({
+  data: { ownerId, updatedId, createTime, updateTime, status },
+}: {
+  data: StoryType;
+}) => {
+  const { styles } = useStyles();
+  return (
+    <div>
+      <div className={styles.listContentItem}>
+        <span>创建人</span>
+        <p>{ownerId}</p>
+      </div>
+      <div className={styles.listContentItem}>
+        <span>最近更新人</span>
+        <p>{updatedId}</p>
+      </div>
+      <div className={styles.listContentItem}>
+        <span>节点数</span>
+        <p>{111}</p>
+      </div>
+      <div className={styles.listContentItem}>
+        <span>开始时间</span>
+        <p>{createTime}</p>
+      </div>
+      <div className={styles.listContentItem}>
+        <span>更新时间</span>
+        <p>{updateTime}</p>
+      </div>
+    </div>
+  );
+};
+export const BasicList: FC = () => {
+  const { styles } = useStyles();
+  const [done, setDone] = useState<boolean>(false);
+  const [open, setVisible] = useState<boolean>(false);
+  const [current, setCurrent] = useState<Partial<StoryType> | undefined>(undefined);
+  const {
+    data: listData,
+    loading,
+    run,
+  } = useRequest((storyName?: string) => {
+    return queryTimelineList({
+      count: 50,
+      storyName,
+    });
+  });
+  const { run: postRun } = useRequest(
+    (method, params) => {
+      if (method === 'remove') {
+        return deleteStory(params);
+      }
+      if (method === 'update') {
+        return updateStory(params);
+      }
+      return addStory(params);
+    },
+    {
+      manual: true,
+      onSuccess: () => {
+        run();
+      },
+    },
+  );
+  const list = listData || [];
+  const paginationProps = {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    pageSize: 5,
+    total: list.length,
+  };
+  const showEditModal = (item: StoryType) => {
+    setVisible(true);
+    setCurrent(item);
+  };
+  const deleteItem = (id: string) => {
+    postRun('remove', {
+      instanceId: id,
+    });
+  };
+  const editAndDelete = (key: string | number, currentItem: StoryType) => {
+    console.log(currentItem);
+    if (key === 'edit') showEditModal(currentItem);
+    else if (key === 'delete') {
+      Modal.confirm({
+        title: '删除故事',
+        content: '确定删除该故事吗？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => deleteItem(currentItem.instanceId ?? ''),
+      });
+    }
+  };
+  const extraContent = (
+    <div>
+      {/*<RadioGroup defaultValue="all">
+        <RadioButton value="all">全部</RadioButton>
+        <RadioButton value="progress">进行中</RadioButton>
+        <RadioButton value="waiting">等待中</RadioButton>
+      </RadioGroup>*/}
+      <Search
+        className={styles.extraContentSearch}
+        placeholder="请输入"
+        onSearch={(value) => {
+          run(value);
+        }}
+      />
+    </div>
+  );
+  const MoreBtn: React.FC<{
+    item: StoryType;
+  }> = ({ item }) => (
+    <Dropdown
+      menu={{
+        onClick: ({ key }) => editAndDelete(key, item),
+        items: [
+          {
+            key: 'edit',
+            label: '编辑',
+          },
+          {
+            key: 'delete',
+            label: '删除',
+          },
+        ],
+      }}
+    >
+      <a>
+        更多 <DownOutlined />
+      </a>
+    </Dropdown>
+  );
+  const handleDone = () => {
+    setDone(false);
+    setVisible(false);
+    setCurrent({});
+  };
+  const handleSubmit = (values: StoryType) => {
+    setDone(true);
+    const method = current?.instanceId ? 'update' : 'add';
+    postRun(method, { ...current, ...values });
+    run();
+  };
+  return (
+    <div>
+      <PageContainer title={"Timeline"}>
+        <div className={styles.standardList}>
+          <Card
+            className={styles.listCard}
+            variant={undefined}
+            style={{
+              marginTop: 24,
+            }}
+            bodyStyle={{
+              padding: '0 32px 40px 32px',
+            }}
+            extra={extraContent}
+          >
+            <List
+              size="large"
+              rowKey="id"
+              loading={loading}
+              pagination={paginationProps}
+              dataSource={list}
+              renderItem={(item: StoryType) => (
+                <List.Item
+                  actions={[
+                    <a
+                      key="edit"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        showEditModal(item);
+                      }}
+                    >
+                      编辑
+                    </a>,
+                    <MoreBtn key="more" item={item} />,
+                  ]}
+                >
+                  <List.Item.Meta
+                    avatar={<Avatar src={item.logo} shape="square" size="large" />}
+                    title={
+                      <a
+                        onClick={() => {
+                          history.push(`/timeline/${item.instanceId}`);
+                        }}
+                      >
+                        {item.title}
+                      </a>
+                    }
+                    description={item.description}
+                  />
+                  <ListContent data={item} />
+                </List.Item>
+              )}
+            />
+          </Card>
+        </div>
+      </PageContainer>
+      <Button
+        type="dashed"
+        onClick={() => {
+          setVisible(true);
+        }}
+        style={{
+          width: '100%',
+          marginBottom: 8,
+        }}
+      >
+        <PlusOutlined />
+        添加
+      </Button>
+      <OperationModal
+        done={done}
+        open={open}
+        current={current}
+        onDone={handleDone}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  );
+};
+export default BasicList;