fix: message format with imgs, downloading table style

src/components/buttons/more.tsx

@@ -0,0 +1,46 @@
+import { DoubleRightOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+interface MoreButtonProps {
+  show: boolean;
+  loadMore: () => void;
+  loading?: boolean;
+}
+
+const MoreWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-block: 16px;
+  opacity: 1;
+  transition: opacity 0.3s;
+  &.loading {
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+`;
+
+const MoreButton: React.FC<MoreButtonProps> = (props) => {
+  const { show, loading, loadMore } = props;
+  const intl = useIntl();
+  return (
+    <>
+      {show ? (
+        <MoreWrapper className={loading ? 'loading' : ''}>
+          <Button
+            onClick={loadMore}
+            size="middle"
+            type="text"
+            icon={<DoubleRightOutlined rotate={90} />}
+          >
+            {intl.formatMessage({ id: 'common.button.more' })}
+          </Button>
+        </MoreWrapper>
+      ) : null}
+    </>
+  );
+};
+
+export default MoreButton;

src/components/simple-table/index.less

@@ -8,25 +8,22 @@
     border-spacing: 0;
 
     td {
-      border-bottom: 1px solid rgba(255, 255, 255, 10%);
+      border-bottom: 1px solid var(--ant-color-split);
     }
 
     th {
-      border-bottom: 1px solid rgba(255, 255, 255, 10%);
-    }
-
-    tr:last-child td {
-      // border-bottom: none;
+      border-bottom: 1px solid var(--ant-color-split);
     }
   }
 
   th {
     height: 36px;
     font-weight: 600;
+    color: var(--ant-color-text);
   }
 
   td {
-    color: var(--color-white-quaternary);
+    color: var(--ant-color-text-secondary);
   }
 
   .cell-span {
@@ -38,16 +35,4 @@
   .cell-header {
     font-weight: var(--font-weight-medium);
   }
-
-  &.light {
-    th {
-      color: var(--ant-color-text);
-      border-bottom: 1px solid var(--ant-color-split);
-    }
-
-    td {
-      color: var(--ant-color-text);
-      border-bottom: 1px solid var(--ant-color-split);
-    }
-  }
 }