Nov 9, 2021 · Nov 8, 2021 · Nov 8, 2021 · Nov 8, 2021 · Nov 9, 2021 · Nov 9, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
    "@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",
diff --git a/src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx b/src/containers/digest/ArticleDigest/DesktopView/WorksLayout.tsx
    <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>
diff --git a/src/containers/editor/AccountEditor/index.tsx b/src/containers/editor/AccountEditor/index.tsx

 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'

  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>
diff --git a/src/containers/editor/AccountEditor/styles/index.ts b/src/containers/editor/AccountEditor/styles/index.ts
  border-radius: 42%;
  border: 4px solid;
  border-color: #043443;
  margin-bottom: 50px;
  margin-left: -5px;
 `
 export const FormsWrapper = styled.div`
diff --git a/src/containers/editor/WorksEditor/Content/BasicInfoPart/CoverUploader.tsx b/src/containers/editor/WorksEditor/Content/BasicInfoPart/CoverUploader.tsx
 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>
  )
diff --git a/src/containers/editor/WorksEditor/Content/BasicInfoPart/index.tsx b/src/containers/editor/WorksEditor/Content/BasicInfoPart/index.tsx

 const BasicInfoPart: FC<TProps> = ({ inputData, socialOptions }) => {
  const {
    cover,
    title,
    homeLink,
    desc,
  return (
    <Wrapper>
      <Section>
        <CoverUploader />
        <CoverUploadercover={cover}/>
      </Section>
      <Section>
        <Label>主页地址</Label>
diff --git a/src/containers/editor/WorksEditor/schema.ts b/src/containers/editor/WorksEditor/schema.ts

 const createWorks = gql`
  mutation (
    $cover: String!
    $title: String!
    $homeLink: String!
    $desc: String
    $body: String
    $communityId: ID!
    $profitMode: ProfitMode
    $articleTags: [Id]
  ) {
    createWorks(
      cover: $cover
      title: $title
      desc: $desc
      homeLink: $homeLink
      body: $body
      communityId: $communityId
      profitMode: $profitMode
  mutation (
    $id: ID!
    $title: String
    $cover: String
    $desc: String
    $homeLink: String
    $body: String
    updateWorks(
      id: $id
      title: $title
      cover: $cover
      desc: $desc
      homeLink: $homeLink
      body: $body
diff --git a/src/containers/editor/WorksEditor/spec.ts b/src/containers/editor/WorksEditor/spec.ts

 export type TInputData = {
  title: string
  cover: string
  desc: string
  body: string
  homeLink: string
diff --git a/src/containers/editor/WorksEditor/store.ts b/src/containers/editor/WorksEditor/store.ts
  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, ''),
    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

      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,
      )

      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

    reset(): void {
      self.mode = 'publish'
      self.cover = null
      self.title = ''
      self.body = '{}'

diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts
 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>`
  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;
 `
diff --git a/src/containers/editor/WorksEditor/styles/content/name_part.ts b/src/containers/editor/WorksEditor/styles/content/name_part.ts
  padding: 3px 15px;
  height: 45px;
  width: calc(100% - 70px);
  margin-left: 35px;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 6px;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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'
Expand DownExpand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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`
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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>
		)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -57,6 +57,7 @@ type TProps = {

		const BasicInfoPart: FC<TProps> = ({ inputData, socialOptions }) => {
		const {
		cover,
		title,
		homeLink,
		desc,
Expand All		@@ -70,7 +71,7 @@ const BasicInfoPart: FC<TProps> = ({ inputData, socialOptions }) => {
		return (
		<Wrapper>
		<Section>
		<CoverUploader />
		<CoverUploadercover={cover}/>
		</Section>
		<Section>
		<Label>主页地址</Label>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand All		@@ -15,7 +18,10 @@ const createWorks = gql`
		$articleTags: [Id]
		) {
		createWorks(
		cover: $cover
		title: $title
		desc: $desc
		homeLink: $homeLink
		body: $body
		communityId: $communityId
		profitMode: $profitMode
Expand All		@@ -36,6 +42,7 @@ const updateWorks = gql`
		mutation (
		$id: ID!
		$title: String
		$cover: String
		$desc: String
		$homeLink: String
		$body: String
Expand All		@@ -50,6 +57,7 @@ const updateWorks = gql`
		updateWorks(
		id: $id
		title: $title
		cover: $cover
		desc: $desc
		homeLink: $homeLink
		body: $body
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,6 +9,7 @@ export type TSocialInfo = {

		export type TInputData = {
		title: string
		cover: string
		desc: string
		body: string
		homeLink: string
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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, ''),
Expand DownExpand Up		@@ -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

Expand DownExpand Up		@@ -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,
		)

Expand DownExpand Up		@@ -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
Expand DownExpand Up		@@ -308,6 +317,7 @@ const WorksEditor = T.model('WorksEditor', {

		reset(): void {
		self.mode = 'publish'
		self.cover = null
		self.title = ''
		self.body = '{}'

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>`
Expand All		@@ -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;
		`
Expand Down