feat: optimize (#28)

* chore: ignore env * feat: mod compoenent for antd * feat: remove pro-list & pro-table * feat: use external lib
cnodejs · Jan 8, 2022 · 087ee91 · 087ee91
1 parent 3226ff3
commit 087ee91
Show file tree

Hide file tree

Showing 13 changed files with 235 additions and 218 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,4 +18,6 @@ dist.zip
 /src/.umi
 /src/.umi-production
 /src/.umi-test
-/.env.local
+
+# env
+.env.local
diff --git a/config/config.ts b/config/config.ts
@@ -46,43 +46,69 @@ export default defineConfig({
   },
 
   // umi.js
+  hash: true,
   singular: true,
 
   fastRefresh: {},
-
   mfsu: {},
+  esbuild: {},
+  webpack5: {},
+
+  nodeModulesTransform: {
+    type: 'none',
+    exclude: [],
+  },
+
+  targets: {
+    chrome: 79,
+    firefox: false,
+    safari: false,
+    edge: false,
+    ios: false,
+  },
 
   externals: {
     react: 'window.React',
-    'react-dom': 'ReactDOM',
-    antd: 'antd',
-    dayjs: 'dayjs',
+    'react-dom': 'window.ReactDOM',
+    antd: 'window.antd',
+    dayjs: 'window.dayjs',
+    '@ant-design/icons': 'window.icons',
+    'markdown-it': 'window.markdownit',
+    'react-markdown-editor-lite': 'window.ReactMarkdownEditorLite',
   },
 
   styles:
     process.env.NODE_ENV === 'development'
-      ? ['//unpkg.com/[email protected]/dist/antd.css']
-      : ['//unpkg.com/[email protected]/dist/antd.min.css'],
+      ? [
+          '//unpkg.com/[email protected]/dist/antd.css',
+          '//unpkg.com/[email protected]/lib/index.css',
+        ]
+      : [
+          '//unpkg.com/[email protected]/dist/antd.min.css',
+          '//unpkg.com/[email protected]/lib/index.css',
+        ],
 
   scripts:
     process.env.NODE_ENV === 'development'
       ? [
           '//unpkg.com/[email protected]/umd/react.development.js',
           '//unpkg.com/[email protected]/umd/react-dom.development.js',
           '//unpkg.com/[email protected]/dist/antd.js',
+          '//unpkg.com/@ant-design/[email protected]/dist/index.umd.js',
           '//unpkg.com/[email protected]/dayjs.min.js',
+          '//unpkg.com/[email protected]/dist/markdown-it.js',
+          '//unpkg.com/[email protected]/lib/index.js',
         ]
       : [
           '//unpkg.com/[email protected]/umd/react.production.min.js',
           '//unpkg.com/[email protected]/umd/react-dom.production.min.js',
           '//unpkg.com/[email protected]/dist/antd.min.js',
+          '//unpkg.com/@ant-design/[email protected]/dist/index.umd.min.js',
           '//unpkg.com/[email protected]/dayjs.min.js',
+          '//unpkg.com/[email protected]/dist/markdown-it.min.js',
+          '//unpkg.com/[email protected]/lib/index.js',
         ],
 
-  nodeModulesTransform: {
-    type: 'none',
-  },
-
   antd: {},
 
   theme: {
@@ -95,6 +121,8 @@ export default defineConfig({
 
   layout: {},
 
+  locale: false,
+
   qiankun: {
     master: {
       apps: [],

diff --git a/package.json b/package.json
@@ -66,8 +66,6 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-card": "^1.18.20",
     "@ant-design/pro-layout": "^6.32.1",
-    "@ant-design/pro-list": "^1.21.12",
-    "@ant-design/pro-table": "^2.61.9",
     "@semantic-release/changelog": "^6.0.1",
     "@types/dotenv": "^8.2.0",
     "@types/jest": "^27.4.0",

diff --git a/src/component/CommentList/index.tsx b/src/component/CommentList/index.tsx
@@ -6,8 +6,8 @@ import Markdown from '@/component/Markdown';
 import { Comment, Avatar, Divider } from 'antd';
 import {
   LikeFilled,
-  EditFilled,
-  DeleteFilled,
+  // EditFilled,
+  // DeleteFilled,
   CommentOutlined,
 } from '@ant-design/icons';
 
@@ -53,8 +53,9 @@ const CommentList: React.FC<Props> = (props) => {
                 onLike && onLike(data);
               }}
             />,
-            <EditFilled />,
-            <DeleteFilled />,
+            // access.admin
+            // <EditFilled />,
+            // <DeleteFilled />,
             <CommentOutlined
               onClick={() => {
                 onReply && onReply(data);

diff --git a/src/component/Markdown/index.tsx b/src/component/Markdown/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import MarkdownIt from 'markdown-it';
 import MdEditor from 'react-markdown-editor-lite';
-import 'react-markdown-editor-lite/lib/index.css';
+// import 'react-markdown-editor-lite/esm/index.less';
 
 import * as styles from './index.less';
 

diff --git a/src/component/MessageList/index.tsx b/src/component/MessageList/index.tsx
@@ -1,85 +1,65 @@
 import React from 'react';
 import dayjs from 'dayjs';
-import { useHistory, Link } from 'umi';
-import { Space, Avatar, Tag } from 'antd';
-import { ListToolBarProps } from '@ant-design/pro-table';
-import ProList, { ProListMetas } from '@ant-design/pro-list';
+import { Link } from 'umi';
+import { Space, Avatar, Tag, List } from 'antd';
 
 import { MESSAGE_TYPE_MAP, MessageType } from '@/constants';
 
 import * as styles from './index.less';
 
-const MessageList: React.FC<Props> = ({
-  dataSource,
-  loading,
-  toolbar,
-  onClick,
-}) => {
-  const metas: ProListMetas = {
-    avatar: {
-      dataIndex: 'author.avatar_url',
-      render: (_, entity: MessageModel) => {
-        const { type: _type, author } = entity;
-        const type = MESSAGE_TYPE_MAP[_type as MessageType];
-        const { loginname, avatar_url } = author;
-
-        return (
-          <Space size={16}>
-            <div
-              style={{
-                width: '200px',
-              }}
-            >
-              <Link to={`/user/${loginname}`} className={styles.link}>
-                <Space size={8}>
-                  <Avatar size="small" src={avatar_url} />
-                  <span>{loginname}</span>
-                </Space>
-              </Link>
-            </div>
-
-            <Tag color={type.color}>{type.name}</Tag>
-          </Space>
-        );
-      },
-    },
-    title: {
-      dataIndex: 'title',
-      valueType: 'text',
-      render: (_, entity: MessageModel) => {
+const MessageList: React.FC<Props> = ({ dataSource, loading, onClick }) => {
+  return (
+    <List
+      loading={loading}
+      dataSource={dataSource}
+      renderItem={(item) => {
         const {
           id: messageId,
+          type: _type,
+          create_at,
           topic: { id, title },
-        } = entity;
+          author: { loginname, avatar_url },
+        } = item;
+
+        const type = MESSAGE_TYPE_MAP[_type as MessageType];
+
         return (
-          <Link
-            to={`/topic/${id}`}
-            className={styles.link}
-            onClick={() => {
-              onClick && onClick(messageId);
-            }}
-          >
-            {title}
-          </Link>
-        );
-      },
-    },
-    actions: {
-      render: (_, entity: MessageModel) => {
-        return dayjs(entity.create_at).fromNow();
-      },
-    },
-  };
+          <List.Item>
+            <List.Item.Meta
+              avatar={
+                <Space size={16}>
+                  <div
+                    style={{
+                      width: '200px',
+                    }}
+                  >
+                    <Link to={`/user/${loginname}`} className={styles.link}>
+                      <Space size={8}>
+                        <Avatar size="small" src={avatar_url} />
+                        <span>{loginname}</span>
+                      </Space>
+                    </Link>
+                  </div>
 
-  return (
-    <ProList
-      rowKey="id"
-      showActions="always"
-      dataSource={dataSource}
-      loading={loading}
-      metas={metas}
-      className={styles.list}
-      toolbar={toolbar}
+                  <Tag color={type.color}>{type.name}</Tag>
+                </Space>
+              }
+              title={
+                <Link
+                  to={`/topic/${id}`}
+                  className={styles.link}
+                  onClick={() => {
+                    onClick && onClick(messageId);
+                  }}
+                >
+                  {title}
+                </Link>
+              }
+            />
+            <div>{dayjs(create_at).fromNow()}</div>
+          </List.Item>
+        );
+      }}
     />
   );
 };
@@ -89,6 +69,5 @@ export default MessageList;
 interface Props {
   dataSource?: MessageModel[];
   loading?: boolean;
-  toolbar?: ListToolBarProps;
   onClick?: (id: string) => void;
 }
diff --git a/src/component/ModComponent/Calendar.tsx b/src/component/ModComponent/Calendar.tsx
@@ -0,0 +1,8 @@
+import { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
+import generateCalendar from 'antd/es/calendar/generateCalendar';
+import 'antd/es/calendar/style';
+
+const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
+
+export default Calendar;
diff --git a/src/component/ModComponent/DatePicker.tsx b/src/component/ModComponent/DatePicker.tsx
@@ -0,0 +1,8 @@
+import { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
+import generatePicker from 'antd/es/date-picker/generatePicker';
+import 'antd/es/date-picker/style/index';
+
+const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
+
+export default DatePicker;
diff --git a/src/component/ModComponent/TimePicker.tsx b/src/component/ModComponent/TimePicker.tsx
@@ -0,0 +1,15 @@
+import { Dayjs } from 'dayjs';
+import * as React from 'react';
+import DatePicker from './DatePicker';
+import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
+
+export interface TimePickerProps
+  extends Omit<PickerTimeProps<Dayjs>, 'picker'> {}
+
+const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
+  return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
+});
+
+TimePicker.displayName = 'TimePicker';
+
+export default TimePicker;
diff --git a/src/component/ModComponent/index.tsx b/src/component/ModComponent/index.tsx
@@ -0,0 +1,5 @@
+import Calendar from './Calendar';
+import DatePicker from './DatePicker';
+import TimePicker from './TimePicker';
+
+export { Calendar, DatePicker, TimePicker };