From 42ea40380b7d9572e5f109fa76a388ba907a5592 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 5 Apr 2021 14:16:44 +0800
Subject: [PATCH] refactor(cool-guide): redesign cover content, UI

---
 src/components/Buttons/ArrowButton.tsx        |  2 +-
 .../content/CoolGuideContent/Content.tsx      | 11 +--
 .../Footer/{index.js => index.tsx}            | 26 ++++---
 .../CoolGuideContent/SearchCover/InputBox.tsx | 58 +++++++++++++++
 .../CoolGuideContent/SearchCover/index.tsx    | 29 ++++++++
 .../CoolGuideContent/styles/footer/index.ts   |  3 +-
 .../content/CoolGuideContent/styles/index.ts  |  1 +
 .../styles/search_cover/index.ts              | 26 +++++++
 .../styles/search_cover/input_box.ts          | 73 +++++++++++++++++++
 utils/mock.ts                                 | 13 ++--
 10 files changed, 216 insertions(+), 26 deletions(-)
 rename src/containers/content/CoolGuideContent/Footer/{index.js => index.tsx} (65%)
 create mode 100644 src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx
 create mode 100644 src/containers/content/CoolGuideContent/SearchCover/index.tsx
 create mode 100644 src/containers/content/CoolGuideContent/styles/search_cover/index.ts
 create mode 100644 src/containers/content/CoolGuideContent/styles/search_cover/input_box.ts

diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
index 316e81bdc..082d22e3d 100755
--- a/src/components/Buttons/ArrowButton.tsx
+++ b/src/components/Buttons/ArrowButton.tsx
@@ -20,7 +20,7 @@ type TProps = {
   children?: React.ReactNode
   onClick?: () => void
   size?: TSIZE
-  direction: 'left' | 'right'
+  direction?: 'left' | 'right'
   dimWhenIdle?: boolean
   disabled?: boolean
   arrowStyle?: string
diff --git a/src/containers/content/CoolGuideContent/Content.tsx b/src/containers/content/CoolGuideContent/Content.tsx
index 9193846ee..8f8613f8c 100755
--- a/src/containers/content/CoolGuideContent/Content.tsx
+++ b/src/containers/content/CoolGuideContent/Content.tsx
@@ -7,19 +7,18 @@
 import React from 'react'
 
 import { GUIDE } from '@/constant'
-import { mockNaviCatalogMenu } from '@/utils'
 
 import Pagi from '@/components/Pagi'
 
 import {
-  DirectoryGallery,
   ProductGallery,
   PeopleGallery,
   ImageGallery,
 } from '@/components/GalleryHub'
 
+import SearchCover from './SearchCover'
 import Footer from './Footer'
-// import NormalList from './NormalList'
+
 import { Wrapper, InnerWrapper, NormalListWrapper } from './styles/content'
 
 type TProps = {
@@ -33,11 +32,7 @@ const Content: React.FC<TProps> = ({ displayType }) => {
     case GUIDE.PREVIEW: {
       DisplayContent = (
         <NormalListWrapper>
-          <DirectoryGallery items={mockNaviCatalogMenu()} />
-          <br />
-          <Footer />
-          <br />
-          <br />
+          <SearchCover />
         </NormalListWrapper>
       )
       break
diff --git a/src/containers/content/CoolGuideContent/Footer/index.js b/src/containers/content/CoolGuideContent/Footer/index.tsx
similarity index 65%
rename from src/containers/content/CoolGuideContent/Footer/index.js
rename to src/containers/content/CoolGuideContent/Footer/index.tsx
index 6dd6edc1e..4ab1c2b54 100755
--- a/src/containers/content/CoolGuideContent/Footer/index.js
+++ b/src/containers/content/CoolGuideContent/Footer/index.tsx
@@ -20,21 +20,27 @@ import {
 const FAKE_AVATAR =
   'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/cmd/hot/hackernews.jpeg'
 
-const Footer = () => {
+type TProps = {
+  mode?: string
+}
+
+const Footer: React.FC<TProps> = ({ mode }) => {
   return (
-    <Wrapper>
+    <Wrapper center={mode === 'cover'}>
       <AboutBlock>
-        关于酷导游
+        关于酷导航
         <Desc>共收录信息 3485 条，最后更新：3小时前</Desc>
-        <ArrowButton>参与贡献</ArrowButton>
-      </AboutBlock>
-      <AboutBlock>
-        关于本周热榜
-        <Desc>共有 RSS 源 334 个，最后抓取：3小时前</Desc>
-        <ArrowButton>参与贡献</ArrowButton>
+        <ArrowButton>更多</ArrowButton>
       </AboutBlock>
+      {mode !== 'cover' && (
+        <AboutBlock>
+          关于本周热榜
+          <Desc>共有 RSS 源 334 个，最后抓取：3小时前</Desc>
+          <ArrowButton>参与贡献</ArrowButton>
+        </AboutBlock>
+      )}
       <ContributorBlock>
-        本条目贡献者
+        贡献者们
         <ContributorsWrapper>
           <Avatar src={FAKE_AVATAR} />
           <Avatar src={FAKE_AVATAR} />
diff --git a/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx b/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx
new file mode 100644
index 000000000..8f949fd90
--- /dev/null
+++ b/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx
@@ -0,0 +1,58 @@
+import React, { useRef } from 'react'
+import T from 'prop-types'
+
+import {
+  Wrapper,
+  InputWrapper,
+  InputMask,
+  MaskNumer,
+  InputBar,
+} from '../styles/search_cover/input_box'
+
+type TProps = {
+  showMask?: boolean
+  placeholder?: string
+  value?: string
+  autoFocus?: boolean
+  noRound?: boolean
+
+  onChange?: (e) => void
+  onBlur?: () => void
+}
+
+const InputBox: React.FC<TProps> = ({
+  showMask = false,
+  value = '',
+  placeholder = '',
+  autoFocus = false,
+  onChange = console.log,
+  onBlur = console.log,
+  noRound = false,
+}) => {
+  const ref = useRef(null)
+
+  return (
+    <Wrapper>
+      <InputWrapper noRound={noRound}>
+        <InputMask
+          show={showMask}
+          onClick={() => {
+            ref.current.focus()
+          }}
+        >
+          <MaskNumer>--</MaskNumer> xxx
+        </InputMask>
+        <InputBar
+          ref={ref}
+          onChange={onChange}
+          value={value}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          onBlur={onBlur}
+        />
+      </InputWrapper>
+    </Wrapper>
+  )
+}
+
+export default React.memo(InputBox)
diff --git a/src/containers/content/CoolGuideContent/SearchCover/index.tsx b/src/containers/content/CoolGuideContent/SearchCover/index.tsx
new file mode 100644
index 000000000..4b96b930a
--- /dev/null
+++ b/src/containers/content/CoolGuideContent/SearchCover/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { Br } from '@/components/Common'
+
+import Footer from '../Footer'
+import InputBox from './InputBox'
+
+import { Wrapper, Header, Title, Slogan } from '../styles/search_cover'
+
+type TProps = {
+  testid?: string
+}
+
+const SearchCover: React.FC<TProps> = ({ testid = 'search-cover' }) => {
+  return (
+    <Wrapper testid={testid}>
+      <Header>
+        <Title>「酷导航」</Title>
+        <Slogan>实用指南，启发灵感，找到有趣</Slogan>
+      </Header>
+      <Br top={10} />
+      <InputBox />
+      <Br top={15} />
+      <Footer mode="cover" />
+    </Wrapper>
+  )
+}
+
+export default React.memo(SearchCover)
diff --git a/src/containers/content/CoolGuideContent/styles/footer/index.ts b/src/containers/content/CoolGuideContent/styles/footer/index.ts
index 44d542885..9bd0ab6a4 100755
--- a/src/containers/content/CoolGuideContent/styles/footer/index.ts
+++ b/src/containers/content/CoolGuideContent/styles/footer/index.ts
@@ -3,8 +3,9 @@ import styled from 'styled-components'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ center: boolean }>`
   ${css.flex()};
+  justify-content: ${({ center }) => (center ? 'center' : 'flex-start')};
   width: 100%;
   min-height: 160px;
   color: ${theme('thread.articleTitle')};
diff --git a/src/containers/content/CoolGuideContent/styles/index.ts b/src/containers/content/CoolGuideContent/styles/index.ts
index 681f00d0a..7764633bd 100755
--- a/src/containers/content/CoolGuideContent/styles/index.ts
+++ b/src/containers/content/CoolGuideContent/styles/index.ts
@@ -9,6 +9,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 }))<TTestable>`
   ${css.flexColumn('align-both')}
   width: 100%;
+  margin-top: 12px;
 `
 export const InnerWrapper = styled.div<{ metric: string }>`
   ${css.flex('justify-center')};
diff --git a/src/containers/content/CoolGuideContent/styles/search_cover/index.ts b/src/containers/content/CoolGuideContent/styles/search_cover/index.ts
new file mode 100644
index 000000000..d0cdfc3eb
--- /dev/null
+++ b/src/containers/content/CoolGuideContent/styles/search_cover/index.ts
@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flexColumn('align-both')};
+  width: 100%;
+  min-height: 70vh;
+  padding-right: 10%;
+`
+export const Header = styled.div`
+  ${css.flexColumn('align-center')};
+  margin-bottom: 20px;
+`
+export const Title = styled.div`
+  font-size: 20px;
+  color: ${theme('thread.articleTitle')};
+`
+export const Slogan = styled.div`
+  font-size: 15px;
+  color: ${theme('thread.articleDigest')};
+  margin-top: 5px;
+`
diff --git a/src/containers/content/CoolGuideContent/styles/search_cover/input_box.ts b/src/containers/content/CoolGuideContent/styles/search_cover/input_box.ts
new file mode 100644
index 000000000..32f384fa4
--- /dev/null
+++ b/src/containers/content/CoolGuideContent/styles/search_cover/input_box.ts
@@ -0,0 +1,73 @@
+import styled from 'styled-components'
+
+import type { TActive } from '@/spec'
+// import Img from '@/Img'
+import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+`
+export const InputWrapper = styled.div<{ noRound: boolean }>`
+  position: relative;
+  width: 520px;
+  ${css.flex('align-center')};
+  border-radius: ${({ noRound }) => (noRound ? '6px' : '20px')};
+  padding: 10px 18px;
+  background-color: #093342; // ${theme('content.cardBg')};
+  margin-bottom: 8px;
+  opacity: 0.8;
+  border: 1px solid;
+  border-color: ${theme('content.cardBg')};
+  &:hover {
+    background-color: ${theme('content.cardBg')};
+    opacity: 1;
+    border: 1px solid #1e6184;
+  }
+
+  transition: all 0.25s ease-in;
+
+  ${css.media.mobile`
+    width: 70%;
+    margin-left: 15%;
+    padding: 8px;
+  `};
+`
+export const InputMask = styled.div<TActive>`
+  ${css.flex('align-both')};
+  position: absolute;
+  display: ${({ show }) => (show ? 'flex' : 'none')};
+  top: 0;
+  left: 18px;
+  width: 400px;
+  height: 40px;
+`
+export const MaskNumer = styled.span`
+  color: #327faf;
+  margin-right: 4px;
+`
+export const InputBar = styled.input.attrs(() => ({
+  spellCheck: 'false',
+  autoComplete: 'off',
+  autoCorrect: 'off',
+  autoCapitalize: 'off',
+}))`
+  text-align: left;
+  caret-color: #33b7b3;
+  flex-grow: 1;
+  height: 100%;
+  width: auto;
+  min-width: 420px;
+  outline: none;
+  color: #33b7b3;
+  font-size: 1.1rem;
+  max-height: none;
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  transition: all 400ms ease;
+
+  ::placeholder {
+    color: #135868;
+  }
+`
diff --git a/utils/mock.ts b/utils/mock.ts
index 686513381..8e1014d01 100644
--- a/utils/mock.ts
+++ b/utils/mock.ts
@@ -306,6 +306,12 @@ export const mockNaviCatalogMenu = (): TMenuItem[] => {
           icon: `${ICON_CMD}/navi/sci-fi.svg`,
           displayType: 'IMAGE',
         },
+        {
+          id: uid.gen(),
+          title: '在线教育',
+          icon: `${ICON_CMD}/navi/sci-fi.svg`,
+          displayType: 'IMAGE',
+        },
         {
           id: uid.gen(),
           title: '算法体操',
@@ -625,7 +631,7 @@ export const mockNaviCatalogMenu = (): TMenuItem[] => {
     },
     {
       id: uid.gen(),
-      title: '教程 / 翻译', // 技术书籍，中文文档, 翻译文章, 国外网校, 比如 https://web.stanford.edu/class/cs224n/
+      title: '教程 / 101', // 技术书籍，中文文档, 翻译(放标签里吧), 国外网校, 比如 https://web.stanford.edu/class/cs224n/
       icon: `${ICON_CMD}/navi/glasses.svg`,
       childMenu: [
         {
@@ -658,11 +664,6 @@ export const mockNaviCatalogMenu = (): TMenuItem[] => {
           title: '产品',
           icon: `${ICON_CMD}/navi/translate.svg`,
         },
-        {
-          id: uid.gen(),
-          title: '中文文档',
-          icon: `${ICON_CMD}/navi/translate.svg`,
-        },
         {
           id: uid.gen(),
           title: '奇奇怪怪',