refactor: general cu workflow (radar & job)

server/routes.js

@@ -89,11 +89,21 @@ router.route('/post/:id').get((req, res) => {
   return renderAndCache({ req, res, path: `/post/${id}` })
 })
 
+// 工作页
+router.route('/job/:id').get((req, res) => {
+  const { id } = req.params
+  return renderAndCache({ req, res, path: `/job/${id}` })
+})
+
 router.route('/blog/:id').get((req, res) => {
   const { id } = req.params
   return renderAndCache({ req, res, path: `/blog/${id}` })
 })
 
+router.route('/radar/:id').get((req, res) => {
+  const { id } = req.params
+  return renderAndCache({ req, res, path: `/radar/${id}` })
+})
 // repo 帖子页
 // router.route('/:community/repo/:id').get((req, res) => {
 //   return renderAndCache({ req, res, path: '/repo' })
@@ -109,12 +119,23 @@ router.route('/publish/post').get((req, res) => {
   return renderAndCache({ req, res, page: '/publish/post' })
 })
 
-// 编辑新帖子
+// 编辑帖子
 router.route('/update/post/:id').get((req, res) => {
   const { id } = req.params
   return renderAndCache({ req, res, path: `/update/post/${id}` })
 })
 
+// 创建新工作
+router.route('/publish/job').get((req, res) => {
+  return renderAndCache({ req, res, page: '/publish/job' })
+})
+
+// 编辑工作
+router.route('/update/job/:id').get((req, res) => {
+  const { id } = req.params
+  return renderAndCache({ req, res, path: `/update/job/${id}` })
+})
+
 // 创建新博客
 router.route('/publish/blog').get((req, res) => {
   return renderAndCache({ req, res, page: '/publish/blog' })
@@ -136,6 +157,17 @@ router.route('/update/works/:id').get((req, res) => {
   return renderAndCache({ req, res, path: `/update/works/${id}` })
 })
 
+// 创建新雷达
+router.route('/publish/radar').get((req, res) => {
+  return renderAndCache({ req, res, page: '/publish/radar' })
+})
+
+// 编辑雷达
+router.route('/update/radar/:id').get((req, res) => {
+  const { id } = req.params
+  return renderAndCache({ req, res, path: `/update/radar/${id}` })
+})
+
 // 所有社区
 router.route('/explore').get((req, res) => res.redirect('/explore/pl'))
 

src/containers/content/ArticleContent/DesktopView/PostLayout.tsx → src/containers/content/ArticleContent/DesktopView/ArticleLayout.tsx

@@ -13,6 +13,7 @@ import { pluggedIn } from '@/utils/mobx'
 import { ArticleFooter, Comments } from '@/containers/dynamic'
 import ArticleSticker from '@/containers/tool/ArticleSticker'
 import ArtimentBody from '@/widgets/ArtimentBody'
+import Linker from '@/widgets/Linker'
 
 import ViewportTracker from '@/widgets/ViewportTracker'
 
@@ -25,7 +26,7 @@ import {
   SidebarWrapper,
   ArticleWrapper,
   CommentsWrapper,
-} from '../styles/desktop_view/post_layout'
+} from '../styles/desktop_view/article_layout'
 
 import { useInit, checkAnchor } from '../logic'
 
@@ -45,10 +46,10 @@ const ArticleContentContainer: FC<TProps> = ({
 }) => {
   useInit(store)
 
-  const { viewingArticle } = store
+  const { viewingArticle: article } = store
   const ref = useRef()
 
-  if (!viewingArticle.id) return null
+  if (!article.id) return null
 
   return (
     <Wrapper testid={testid}>
@@ -59,7 +60,10 @@ const ArticleContentContainer: FC<TProps> = ({
         />
         <MainWrapper metric={metric}>
           <ArticleWrapper ref={ref}>
-            <ArtimentBody document={viewingArticle.document} />
+            {!!article.linkAddr && (
+              <Linker src={article.linkAddr} bottom={22} hint="原文:" />
+            )}
+            <ArtimentBody document={article.document} />
             <ArticleFooter metric={metric} />
           </ArticleWrapper>
 

src/containers/content/ArticleContent/DesktopView/BlogLayout/index.tsx

@@ -38,8 +38,9 @@ const ArticleContentContainer: FC<TProps> = ({
 }) => {
   useInit(store)
 
-  const { viewingArticle, articleTab, blogRssInfoData } = store
-  if (!viewingArticle.id) return null
+  const { viewingArticle: article, articleTab, blogRssInfoData } = store
+  if (!article.id) return null
+
   if (articleTab === BLOG_TAB.FEEDS) {
     return (
       <Wrapper testid={testid}>
@@ -69,7 +70,7 @@ const ArticleContentContainer: FC<TProps> = ({
   return (
     <Wrapper testid={testid}>
       <InnerWrapper>
-        <ArticleTab metric={metric} article={viewingArticle} />
+        <ArticleTab metric={metric} article={article} />
         <SidebarWrapper>
           <ArticleSticker metric={metric} />
         </SidebarWrapper>

src/containers/content/ArticleContent/DesktopView/WorksLayout/index.tsx

@@ -37,14 +37,14 @@ const ArticleContentContainer: FC<TProps> = ({
 }) => {
   useInit(store)
 
-  const { viewingArticle, articleTab } = store
-  if (!viewingArticle.id) return null
+  const { viewingArticle: works, articleTab } = store
+  if (!works.id) return null
 
   if (articleTab === WORKS_TAB.TECHSTACKS) {
     return (
       <Wrapper testid={testid}>
         <InnerWrapper>
-          <TechStackTab metric={metric} article={viewingArticle} />
+          <TechStackTab metric={metric} article={works} />
           <SidebarWrapper>
             <ArticleSticker metric={metric} />
           </SidebarWrapper>
@@ -56,7 +56,7 @@ const ArticleContentContainer: FC<TProps> = ({
   return (
     <Wrapper testid={testid}>
       <InnerWrapper>
-        <ArticleTab metric={metric} article={viewingArticle} />
+        <ArticleTab metric={metric} article={works} />
         <SidebarWrapper>
           <ArticleSticker metric={metric} />
         </SidebarWrapper>

src/containers/content/ArticleContent/DesktopView/index.tsx

@@ -1,6 +1,6 @@
 import { METRIC } from '@/constant'
 
-import PostLayout from './PostLayout'
+import ArticleLayout from './ArticleLayout'
 import BlogLayout from './BlogLayout'
 import WorksLayout from './WorksLayout'
 
@@ -15,7 +15,7 @@ const ArticleContent = (props) => {
       return <WorksLayout {...props} />
     }
     default: {
-      return <PostLayout {...props} />
+      return <ArticleLayout {...props} />
     }
   }
 }

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

@@ -0,0 +1,74 @@
+/*
+ * JobLayout
+ */
+
+import { FC, Fragment, memo } from 'react'
+
+import type { TJob, TMetric } from '@/spec'
+import { METRIC } from '@/constant'
+import { buildLog } from '@/utils/logger'
+
+import { SpaceGrow } from '@/widgets/Common'
+import ArticleBaseStats from '@/widgets/ArticleBaseStats'
+import ArticleBelongCommunity from '@/widgets/ArticleBelongCommunity'
+import DotDivider from '@/widgets/DotDivider'
+import ArchivedSign from '@/widgets/ArchivedSign'
+import ArticleMenu from '@/widgets/ArticleMenu'
+import ReadableDate from '@/widgets/ReadableDate'
+import Linker from '@/widgets/Linker'
+
+import {
+  Main,
+  Header,
+  PublishDateInfo,
+  Title,
+  BottomInfo,
+  CommunityInfo,
+  CompanyWrapper,
+  LaptopIcon,
+  CompanyName,
+} from '../styles/desktop_view/job_layout'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:ArticleDigest')
+
+type TProps = {
+  article: TJob
+  metric?: TMetric
+}
+
+const JobLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article }) => {
+  return (
+    <Fragment>
+      <Main metric={metric}>
+        <Header>
+          <PublishDateInfo>
+            <ReadableDate date={article.insertedAt} fmt="absolute" />
+          </PublishDateInfo>
+          {article.isArchived && (
+            <Fragment>
+              <DotDivider space={8} />
+              <ArchivedSign date={article.archivedAt} />
+            </Fragment>
+          )}
+          <SpaceGrow />
+          <ArticleMenu article={article} />
+        </Header>
+        <Title>{article.title}</Title>
+        <BottomInfo>
+          <CompanyWrapper>
+            <LaptopIcon />
+            <CompanyName>{article.company}</CompanyName>
+            <Linker src={article.companyLink} right={5} left={10} />
+          </CompanyWrapper>
+          <ArticleBaseStats article={article} />
+        </BottomInfo>
+      </Main>
+      <CommunityInfo>
+        <ArticleBelongCommunity article={article} />
+      </CommunityInfo>
+    </Fragment>
+  )
+}
+
+export default memo(JobLayout)

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

@@ -4,6 +4,7 @@ import type { TArticle, TMetric, TThread } from '@/spec'
 import { THREAD, METRIC } from '@/constant'
 
 import PostLayout from './PostLayout'
+import JobLayout from './JobLayout'
 import BlogLayout from './BlogLayout'
 import WorksLayout from './WorksLayout'
 
@@ -25,6 +26,10 @@ const Layout: FC<TProps> = ({
       return <WorksLayout article={article} metric={metric} tab={tab} />
     }
 
+    case THREAD.JOB: {
+      return <JobLayout article={article} metric={metric} />
+    }
+
     case THREAD.BLOG: {
       return <BlogLayout article={article} metric={metric} tab={tab} />
     }

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

@@ -8,11 +8,11 @@ import type { TPost, TMetric } from '@/spec'
 import { METRIC } from '@/constant'
 import { buildLog } from '@/utils/logger'
 
+import { ArchivedSign } from '@/widgets/dynamic'
 import { SpaceGrow } from '@/widgets/Common'
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
 import ArticleBelongCommunity from '@/widgets/ArticleBelongCommunity'
 import DotDivider from '@/widgets/DotDivider'
-import ArchivedSign from '@/widgets/ArchivedSign'
 import ArticleMenu from '@/widgets/ArticleMenu'
 import ReadableDate from '@/widgets/ReadableDate'
 

src/containers/digest/ArticleDigest/styles/desktop_view/job_layout.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+
+import LaptopSVG from '@/icons/Laptop'
+
+export {
+  Main,
+  Header,
+  PublishDateInfo,
+  Title,
+  BottomInfo,
+  CommunityInfo,
+} from './post_layout'
+
+export const CompanyWrapper = styled.div`
+  ${css.flex('align-center')};
+  color: ${theme('thread.articleDigest')};
+`
+export const LaptopIcon = styled(LaptopSVG)`
+  ${css.size(16)};
+  fill: ${theme('thread.articleDigest')};
+  margin-right: 4px;
+`
+export const CompanyName = styled.div`
+  font-size: 13px;
+  color: ${theme('thread.articleTitle')};
+`

src/containers/editor/ArticleEditor/AddOn/JobAddOn.tsx

@@ -0,0 +1,49 @@
+import { FC, memo, useState } from 'react'
+
+import { isURL } from '@/utils/validator'
+
+import type { TEditData } from '../spec'
+import {
+  Wrapper,
+  LaptopIcon,
+  LinkIcon,
+  CompanyInput,
+  LinkInput,
+} from '../styles/addon/job_addon'
+import { editOnChange } from '../logic'
+
+type TProps = {
+  editData: TEditData
+}
+
+const JobAddOn: FC<TProps> = ({ editData }) => {
+  const [invalid, setInvalid] = useState(false)
+
+  return (
+    <Wrapper>
+      <LaptopIcon />
+      <CompanyInput
+        value={editData.company}
+        placeholder="公司 / 团队"
+        onChange={(v) => editOnChange(v, 'company')}
+      />
+      <LinkIcon />
+      <LinkInput
+        invalid={invalid}
+        value={editData.companyLink}
+        placeholder="主页地址（可选）"
+        onChange={(v) => {
+          if (!isURL(v.target.value)) {
+            setInvalid(true)
+          } else {
+            setInvalid(false)
+          }
+
+          editOnChange(v, 'companyLink')
+        }}
+      />
+    </Wrapper>
+  )
+}
+
+export default memo(JobAddOn)