Reinit project

src/components/AccountItem/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { formatMessage } from 'umi-plugin-locale';
+import { Icon } from 'antd';
+
+import styles from './style.less';
+
+export interface AccountItemProps {
+  title: string;
+  message?: string;
+  preview?: string;
+  onClick?: () => any;
+  className?: string;
+  showGo?: boolean;
+}
+
+const AccountItem: React.FC<AccountItemProps> = ({
+  title,
+  message = '',
+  preview = '',
+  onClick,
+  className = '',
+  showGo = true,
+}) => {
+  const titleText = formatMessage({ id: title });
+  return (
+    <div className={`${styles.item} ${className}`} onClick={onClick}>
+      <span className={styles.title}>{titleText}</span>
+      <span className={styles.message}>{message}</span>
+      <span className={styles.preview}>{preview}</span>
+      {showGo && <Icon className={styles.go} type="right" />}
+    </div>
+  );
+};
+
+export default AccountItem;

src/components/AccountItem/style.less

@@ -0,0 +1,43 @@
+
+@import '../../global.less';
+
+.item {
+  background-color: #fff;
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  transition: background-color .2s;
+  user-select: none;
+
+  &:active {
+    background-color: @bg-color;
+  }
+}
+
+.title {
+  @titleWidth: 80px;
+  // flex-basis: @titleWidth;
+  min-width: @titleWidth;
+}
+
+.message {
+  flex-grow: 1;
+  flex-basis: 0;
+  margin: 0 10px;
+  color: @primary-color;
+}
+
+.preview {
+  flex-grow: 1;
+  flex-basis: 0;
+  margin: 0 10px;
+  color: @hint-color;
+  text-align: right;
+}
+
+.go {
+  flex-shrink: 0;
+  color: lightgrey;
+  font-size: 1.2rem;
+}