From 2d8044c98c0ca4614559298d05815dd60410e064 Mon Sep 17 00:00:00 2001
From: virzs <2369310227@qq.com>
Date: Tue, 1 Jun 2021 16:25:55 +0800
Subject: [PATCH] =?UTF-8?q?chore=20commit=20card=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../update-record-dialog/commits.tsx          | 39 +++++++------------
 .../update-record-dialog/releases.tsx         |  4 +-
 .../update-record-dialog/style/index.less     | 34 ++++++++++++++++
 src/locales/en-US/global.json                 |  3 +-
 src/locales/zh-CN/global.json                 |  3 +-
 5 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/components/update-record-dialog/commits.tsx b/src/components/update-record-dialog/commits.tsx
index 8215fbdb..79e56f6c 100644
--- a/src/components/update-record-dialog/commits.tsx
+++ b/src/components/update-record-dialog/commits.tsx
@@ -11,10 +11,9 @@ import {
   gitCommitColorByType,
   githubCommitTypes,
 } from '@/utils/common';
-import { Typography, Chip, Card, CardContent } from '@material-ui/core';
+import { Chip, Card, CardContent } from '@material-ui/core';
 import dayjs from 'dayjs';
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { LoadMore, Empty } from '../global';
 
 export interface CommitValueTypes {
@@ -41,18 +40,10 @@ export interface CommitPagePropsType {
   onAfterLoading: () => void;
 }
 
-const useStyles = makeStyles({
-  root: {
-    margin: '10px 0',
-  },
-});
-
 const CommitPage: React.FC<CommitPagePropsType> = ({
   loading,
   onAfterLoading,
 }) => {
-  const classes = useStyles();
-
   const [commits, setCommits] = React.useState([] as CommitValueTypes[]);
   const [nomore, setNomore] = React.useState<boolean>(false);
   const [page, setPage] = React.useState<number>(1);
@@ -94,22 +85,22 @@ const CommitPage: React.FC<CommitPagePropsType> = ({
       {commits.length ? (
         <>
           {commits.map((i, j) => (
-            <Card key={j} className={classes.root}>
-              <CardContent>
-                <Typography variant="h6" color="textSecondary">
-                  {dayjs(i.author.date).format('YYYY/MM/DD')}
-                </Typography>
-                <Chip
-                  style={{
-                    backgroundColor: gitCommitColorByType(i.type),
-                    color: '#fff',
-                  }}
-                  label={i.type}
-                  size="small"
-                ></Chip>
+            <Card key={j} className="commit-card-root">
+              <p
+                className="commit-tag"
+                style={{ backgroundColor: gitCommitColorByType(i.type) }}
+              >
+                {i.type}
+              </p>
+              <CardContent className="commit-card-content">
+                <div className="commit-author-container">
+                  <img src={i.author.avatar_url} alt="" />
+                  <span>{i.author.name}</span>
+                  <span>{dayjs(i.author.date).format('YYYY/MM/DD')}</span>
+                </div>
                 <React.Fragment>
                   <a href={i.url} target="_break">
-                    {i.author.name} - {i.message}
+                    {i.message}
                   </a>
                 </React.Fragment>
               </CardContent>
diff --git a/src/components/update-record-dialog/releases.tsx b/src/components/update-record-dialog/releases.tsx
index fd66ff41..3363a3b7 100644
--- a/src/components/update-record-dialog/releases.tsx
+++ b/src/components/update-record-dialog/releases.tsx
@@ -9,6 +9,7 @@ import { GithubReleaseType } from '@/apis/github/interface';
 import { Card, CardContent, CardHeader } from '@material-ui/core';
 import dayjs from 'dayjs';
 import React from 'react';
+import { useIntl } from 'umi';
 import { Empty, LoadMore } from '../global';
 
 export interface ReleasePagePropsType {
@@ -21,6 +22,7 @@ const ReleasePage: React.FC<ReleasePagePropsType> = ({
   loading,
   onAfterLoading,
 }) => {
+  const { formatMessage } = useIntl();
   const [releases, setReleases] = React.useState([] as GithubReleaseType[]);
   const [nomore, setNomore] = React.useState<boolean>(false);
   const [page, setPage] = React.useState<number>(1);
@@ -64,7 +66,7 @@ const ReleasePage: React.FC<ReleasePagePropsType> = ({
                 </div>
                 <pre className="release-body">{i.body}</pre>
                 <a className="release-more" href={i.html_url} target="_blank">
-                  查看更多
+                  {formatMessage({ id: 'app.global.link.show_more' })}
                 </a>
               </CardContent>
             </Card>
diff --git a/src/components/update-record-dialog/style/index.less b/src/components/update-record-dialog/style/index.less
index d264f979..483d6cd3 100644
--- a/src/components/update-record-dialog/style/index.less
+++ b/src/components/update-record-dialog/style/index.less
@@ -75,4 +75,38 @@
       }
     }
   }
+  .commit-card-root {
+    margin: 10px 0;
+    position: relative;
+    .commit-tag {
+      position: absolute;
+      color: #fff;
+      transform: rotate(45deg);
+      top: 10px;
+      right: -20px;
+      width: 80px;
+      text-align: center;
+      font-size: 12px;
+    }
+    .commit-card-content {
+      padding: 20px;
+      .commit-author-container {
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        margin: 5px 0 14px;
+        img {
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+          margin-right: 5px;
+          border-radius: 10px;
+        }
+        span {
+          display: inline-block;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
 }
diff --git a/src/locales/en-US/global.json b/src/locales/en-US/global.json
index 58a1fe01..26c5ce81 100644
--- a/src/locales/en-US/global.json
+++ b/src/locales/en-US/global.json
@@ -1,4 +1,5 @@
 {
   "app.global.dialog.cancel": "Cancel",
-  "app.global.dialog.confirm": "Confirm"
+  "app.global.dialog.confirm": "Confirm",
+  "app.global.link.show_more": "see more"
 }
diff --git a/src/locales/zh-CN/global.json b/src/locales/zh-CN/global.json
index 5f299531..aede763d 100644
--- a/src/locales/zh-CN/global.json
+++ b/src/locales/zh-CN/global.json
@@ -1,4 +1,5 @@
 {
   "app.global.dialog.cancel": "取消",
-  "app.global.dialog.confirm": "确认"
+  "app.global.dialog.confirm": "确认",
+  "app.global.link.show_more": "查看更多"
 }