refactor: new oss upload (#1185)

* refactor(uploader): use new FC version

* refactor(user-profile): banner pad align adjust

* refactor(oss-uploader): add upload icon effect

* refactor(oss uploader): add turbo loading effect

* refactor(oss-uploader): user avatar works

* refactor(works-editor): cover done

Author: mydearxym

package-lock.json

@@ -50,6 +50,7 @@
     "@tippyjs/react": "4.2.5",
     "@zeit/next-source-maps": "0.0.4-canary.1",
     "accepts": "^1.3.4",
+    "ali-oss": "^5.3.2",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-styled-components": "^1.12.0",
     "cacheable-response": "^2.0.9",

package.json

@@ -51,7 +51,7 @@ const WorksLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article, tab }) => {
     <Fragment>
       <Main metric={metric}>
         <WorksWrapper>
-          <Cover src="https://avatars.githubusercontent.com/u/2041385?s=64&v=4" />
+          <Cover src={article.cover} />
           <Intro>
             <Title>
               <WorkName>{title}</WorkName>

src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx

@@ -12,7 +12,8 @@ import { closeDrawer } from '@/utils/helper'
 
 import SubmitButton from '@/widgets/Buttons/SubmitButton'
 import Tooltip from '@/widgets/Tooltip'
-import { Divider, SpaceGrow } from '@/widgets/Common'
+import { Divider, SpaceGrow, Br } from '@/widgets/Common'
+import OSSUploader from '@/widgets/OSSUploader'
 
 import SexInputer from './SexInputer'
 import SocialInputer from './SocialInputer'
@@ -52,7 +53,12 @@ const AccountEditorContainer: FC<TProps> = ({ accountEditor: store }) => {
 
   return (
     <Wrapper className="normal-form">
-      {profile.avatar && <AvatarPic src={profile.avatar} />}
+      <OSSUploader onUploadDone={(url) => inputOnChange(url, 'avatar')}>
+        {profile.avatar && <AvatarPic src={profile.avatar} />}
+      </OSSUploader>
+
+      <Br bottom={50} />
+
       <FormsWrapper>
         <LoginSection>
           <Label>登入名称</Label>

src/containers/editor/AccountEditor/index.tsx

@@ -25,7 +25,6 @@ export const AvatarPic = styled(Img)`
   border-radius: 42%;
   border: 4px solid;
   border-color: #043443;
-  margin-bottom: 50px;
   margin-left: -5px;
 `
 export const FormsWrapper = styled.div`

src/containers/editor/AccountEditor/styles/index.ts

@@ -1,25 +1,38 @@
 import { FC, memo } from 'react'
 
-import { ICON } from '@/config'
+import OSSUploader from '@/widgets/OSSUploader'
+import { nilOrEmpty } from '@/utils/validator'
 
 import {
   Wrapper,
-  IntroImgHolder,
+  HolderWrapper,
   HolderIcon,
+  RealCover,
   Section,
   Title,
   Desc,
 } from '../../styles/content/basic_info_part/cover_uploader'
+import { inputOnChange } from '../../logic'
 
-const CoverUploader: FC = () => {
+type TProps = {
+  cover?: string | null
+}
+
+const CoverUploader: FC<TProps> = ({ cover }) => {
   return (
     <Wrapper>
-      <IntroImgHolder>
-        <HolderIcon src={`${ICON}/shape/add-square.svg`} />
-      </IntroImgHolder>
+      <OSSUploader onUploadDone={(url) => inputOnChange(url, 'cover')}>
+        {nilOrEmpty(cover) ? (
+          <HolderWrapper>
+            <HolderIcon />
+          </HolderWrapper>
+        ) : (
+          <RealCover src={cover} />
+        )}
+      </OSSUploader>
       <Section>
-        <Title>介绍图片</Title>
-        <Desc>上传图片或输入图片URL，请确保图片比例为 1:1，上限 300 KB</Desc>
+        <Title>封面图片</Title>
+        <Desc>展示图片的比例为 1:1, 最大不超过 300 KB, 支持常见图片格式。</Desc>
       </Section>
     </Wrapper>
   )

src/containers/editor/WorksEditor/Content/BasicInfoPart/CoverUploader.tsx

@@ -57,6 +57,7 @@ type TProps = {
 
 const BasicInfoPart: FC<TProps> = ({ inputData, socialOptions }) => {
   const {
+    cover,
     title,
     homeLink,
     desc,
@@ -70,7 +71,7 @@ const BasicInfoPart: FC<TProps> = ({ inputData, socialOptions }) => {
   return (
     <Wrapper>
       <Section>
-        <CoverUploader />
+        <CoverUploader cover={cover} />
       </Section>
       <Section>
         <Label>主页地址</Label>

src/containers/editor/WorksEditor/Content/BasicInfoPart/index.tsx

@@ -3,7 +3,10 @@ import { P } from '@/schemas'
 
 const createWorks = gql`
   mutation (
+    $cover: String!
     $title: String!
+    $homeLink: String!
+    $desc: String
     $body: String
     $communityId: ID!
     $profitMode: ProfitMode
@@ -15,7 +18,10 @@ const createWorks = gql`
     $articleTags: [Id]
   ) {
     createWorks(
+      cover: $cover
       title: $title
+      desc: $desc
+      homeLink: $homeLink
       body: $body
       communityId: $communityId
       profitMode: $profitMode
@@ -36,6 +42,7 @@ const updateWorks = gql`
   mutation (
     $id: ID!
     $title: String
+    $cover: String
     $desc: String
     $homeLink: String
     $body: String
@@ -50,6 +57,7 @@ const updateWorks = gql`
     updateWorks(
       id: $id
       title: $title
+      cover: $cover
       desc: $desc
       homeLink: $homeLink
       body: $body

src/containers/editor/WorksEditor/schema.ts

@@ -9,6 +9,7 @@ export type TSocialInfo = {
 
 export type TInputData = {
   title: string
+  cover: string
   desc: string
   body: string
   homeLink: string

src/containers/editor/WorksEditor/spec.ts

@@ -50,6 +50,7 @@ const WorksEditor = T.model('WorksEditor', {
   community: T.optional(Community, {}),
 
   id: T.maybeNull(T.string),
+  cover: T.maybeNull(T.string),
   title: T.maybeNull(T.string),
   body: T.optional(T.string, '{}'),
   desc: T.optional(T.string, ''),
@@ -90,7 +91,7 @@ const WorksEditor = T.model('WorksEditor', {
     get previewData(): TWorks {
       const slf = self as TStore
       const { techCommunities } = slf
-      const basic = pick(['title', 'desc'], slf)
+      const basic = pick(['cover', 'title', 'desc'], slf)
 
       const { lang, framework, database, devOps, design } = techCommunities
 
@@ -128,7 +129,15 @@ const WorksEditor = T.model('WorksEditor', {
       const slf = self as TStore
       const { socialInfo, cities, techstacks, teammates, community } = slf
       const basic = pick(
-        ['title', 'desc', 'body', 'homeLink', 'profitMode', 'workingMode'],
+        [
+          'cover',
+          'title',
+          'desc',
+          'body',
+          'homeLink',
+          'profitMode',
+          'workingMode',
+        ],
         slf,
       )
 
@@ -184,9 +193,9 @@ const WorksEditor = T.model('WorksEditor', {
       return !nilOrEmpty(self.title)
     },
     get isBasicInfoValid(): boolean {
-      const { homeLink, desc } = self
+      const { cover, homeLink, desc } = self
 
-      return !nilOrEmpty(desc) && isURL(homeLink)
+      return !nilOrEmpty(cover) && !nilOrEmpty(desc) && isURL(homeLink)
     },
     get isTechStackValid(): boolean {
       const slf = self as TStore
@@ -308,6 +317,7 @@ const WorksEditor = T.model('WorksEditor', {
 
     reset(): void {
       self.mode = 'publish'
+      self.cover = null
       self.title = ''
       self.body = '{}'
 

src/containers/editor/WorksEditor/store.ts

@@ -5,6 +5,8 @@ import Img from '@/Img'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
+import WorksHolderSVG from '@/icons/WorksHolder'
+
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
@@ -14,21 +16,24 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   padding: 0 10px;
   margin-bottom: 20px;
 `
-export const IntroImgHolder = styled.div`
+export const RealCover = styled(Img)`
+  ${css.size(70)};
+  border-radius: 6px;
+`
+export const HolderWrapper = styled.div`
   ${css.size(70)};
   ${css.flex('align-both')};
-  border-radius: 5px;
+  border-radius: 6px;
   background-color: #03343f;
-  cursor: pointer;
 `
-export const HolderIcon = styled(Img)`
-  ${css.size(30)};
+export const HolderIcon = styled(WorksHolderSVG)`
+  ${css.size(48)};
   fill: ${theme('thread.articleDigest')};
-  opacity: 0.4;
+  opacity: 0.3;
   transform: rotate(90deg);
 
-  ${IntroImgHolder}:hover & {
-    opacity: 0.6;
+  ${HolderWrapper}:hover & {
+    opacity: 0;
   }
   transition: all 0.2s;
 `

src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts

@@ -28,7 +28,6 @@ export const Input = styled(BaseInput)`
   padding: 3px 15px;
   height: 45px;
   width: calc(100% - 70px);
-  margin-left: 35px;
   font-size: 18px;
   margin-top: 10px;
   margin-bottom: 6px;