chore commit card样式

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>

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>

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;
+        }
+      }
+    }
+  }
 }

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"
 }

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": "查看更多"
 }