@titaui/pc 1.7.101 → 1.8.3

package/src/pages/personal-info/components/person-photo/index.scss

@@ -0,0 +1,80 @@
+.titaui-personal-info-person-photo {
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  border-radius: 12px;
+  padding: 20px 32px;
+  margin-top: 10px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    &-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #141c28;
+      line-height: 24px;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      &::before {
+        content: "";
+        width: 4px;
+        height: 16px;
+        background: linear-gradient(90deg, #4e90ff 0%, #2879ff 100%);
+        border-radius: 2px;
+        display: inline-block;
+        position: absolute;
+        left: -8px;
+        top: 3px;
+      }
+    }
+  }
+  &__main {
+    display: flex;
+    align-items: center;
+    &-mask {
+      position: absolute;
+      width: 160px;
+      height: 32px;
+      box-sizing: border-box;
+      padding: 7px 52px;
+      background: rgba(20, 28, 40, 0.5);
+      // filter: blur(4px);
+      font-size: 12px;
+      color: #FFFFFF;
+      line-height: 18px;
+    }
+    & > span {
+      margin-left: 24px;
+      font-size: 12px;
+      color: #A4ACB9;
+      line-height: 20px;
+    }
+  }
+  .titaui-pc-avator-container {
+    cursor: pointer;
+  }
+  .titaui-pc-avator-wrapper {
+    &::before {
+      position: absolute;
+      bottom:0;
+      display: block;
+      content: "点击修改";
+      width: 160px;
+      height: 32px;
+      background: rgba(20, 28, 40, 0.5);
+      color: #FFFFFF;
+      font-size: 12px;
+      line-height: 18px;
+      text-align: center;
+      box-sizing: border-box;
+      padding: 7px 0;
+      backdrop-filter: blur(4px);
+    }
+    &:hover::before {
+      background: rgba(20, 28, 40, 0.4);
+    }
+  }
+}

package/src/pages/personal-info/components/person-photo/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { getUserInfo } from '../../../../utils/bs-global';
+import Avatar from '../../../../components/avatar';
+import ChangePhotoModal from '../../../../components/upload-photo-modal';
+import './index.scss';
+
+const prefix = 'titaui-personal-info-person-photo';
+
+const { Id, Name, UserAvatar } = getUserInfo();
+
+const PersonPhoto = () => {
+
+  const [visible, setVisible] = useState(false);
+
+  const handleChangePhoto = () => {
+    setVisible(true);
+  }
+
+  const handleCancel = () => {
+    setVisible(false);
+  }
+
+	return (
+		<div className={prefix}>
+			<div className={`${prefix}__header`}>
+				<span className={`${prefix}__header-title`}>上传头像</span>
+			</div>
+			<div className={`${prefix}__main`}>
+				<Avatar
+					userId={Id}
+					name={Name}
+					color={UserAvatar.Color}
+					src={UserAvatar.Large}
+					size={{
+						width: 160,
+						textNum: 1,
+						fontSize: 24
+					}}
+          onClick={handleChangePhoto}
+				/>
+        <span>· 建议图片最小尺寸 150*150px</span>
+			</div>
+      <ChangePhotoModal visible={visible} onCancel={handleCancel} type="person"/>
+    </div>
+	);
+};
+
+export default PersonPhoto;

package/src/pages/personal-info/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import BaseInfo from "./components/base-info";
+import PersonPhoto from './components/person-photo'
 import Aha2021Page from '../aha2021';
 import "./index.scss";
 
@@ -10,6 +11,7 @@ const PersonalInfo = () => {
     <Aha2021Page.ContentTemplate>
       <div className={prefix}>
         <BaseInfo />
+        <PersonPhoto />
       </div>
     </Aha2021Page.ContentTemplate>
   );