Reward

frontend/public/index.html

@@ -40,4 +40,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script src="%PUBLIC_URL%/iconfont.js"></script>
 </html>

frontend/src/components/AppFooter.tsx

@@ -2,8 +2,9 @@ import React, { memo, useEffect, useState } from "react";
 import pb from "../api/compiled";
 import { version as versionApi } from "../api/version";
 import dayjs from "dayjs";
-import { Button } from "antd";
+import { Button, Popover } from "antd";
 import { GithubOutlined } from "@ant-design/icons";
+import Coffee from "./Coffee";
 
 require("dayjs/locale/zh-cn");
 
@@ -17,7 +18,14 @@ const AppFooter: React.FC = () => {
   return (
     <div className="copyright">
       <div style={{ fontSize: 14 }}>created by duc@2021.</div>
-      <div style={{ fontSize: 12 }}>
+      <div
+        style={{
+          fontSize: 12,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
         version: {version?.version}, build at{" "}
         {dayjs(version?.build_date).format("YYYY-MM-DD HH:mm:ss")}
         <Button
@@ -26,6 +34,19 @@ const AppFooter: React.FC = () => {
           href={version?.git_repo}
           type="link"
         ></Button>
+        <Popover
+          content={<Coffee />}
+          overlayInnerStyle={{ padding: 0, margin: 0 }}
+          trigger="click"
+        >
+          <svg
+            style={{ width: 18, height: 18, cursor: "pointer" }}
+            className="icon"
+            aria-hidden="true"
+          >
+            <use xlinkHref="#icon-dashang"></use>
+          </svg>
+        </Popover>
       </div>
     </div>
   );

frontend/src/components/Coffee.tsx

@@ -0,0 +1,57 @@
+import React, { memo } from "react";
+import Alipay from "../assets/alipay.jpg";
+import WechatPay from "../assets/wechatpay.jpg";
+import styled from "@emotion/styled";
+import theme from "../styles/theme";
+
+const Coffee: React.FC = () => {
+  return (
+    <Wrap>
+      <Front className="front">
+        <Image src={Alipay} alt="alipay" />
+      </Front>
+      <Back className="back">
+        <Image src={WechatPay} alt="wechatpay" />
+      </Back>
+    </Wrap>
+  );
+};
+
+export default memo(Coffee);
+
+const Item = styled.div`
+  position: absolute;
+  backface-visibility: hidden;
+  transition: 0.3s;
+`;
+
+const Front = styled(Item)`
+  transform: rotateX(0deg);
+`;
+
+const Back = styled(Item)`
+  transform: rotateX(-180deg);
+`;
+
+const Wrap = styled.div`
+  perspective: 700px;
+  width: 200px;
+  height: 273px;
+  margin: 0 auto;
+
+  &:hover .front {
+    outline: 1px solid blue;
+    transform: rotateX(180deg);
+  }
+
+  &:hover .back {
+    transform: rotateX(0deg);
+  }
+`;
+
+const Image = styled.img`
+  width: 200px;
+  height: 273px;
+  border-radius: 5px;
+  box-shadow: 1px 1px 10px ${theme.lightMainColor};
+`;

frontend/src/styles/index.css

@@ -64,3 +64,11 @@ body {
 .ant-tabs-tabpane-active {
   height: 100% !important;
 }
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}