refactor(cool-guide): reorg with demo data

src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts

@@ -16,7 +16,7 @@ export const ArrowIcon = styled(Img)<{ reverse?: boolean }>`
     fill: ${theme('thread.articleTitle')};
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Text = styled.div`
   color: ${theme('thread.articleDigest')};
@@ -27,5 +27,5 @@ export const Text = styled.div`
     fill: ${theme('thread.articleTitle')};
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `

src/containers/content/CoolGuideContent/Content.tsx

@@ -14,8 +14,9 @@ import {
   PeopleGallery,
   ImageGallery,
 } from '@/widgets/GalleryHub'
+import NoticeBar from '@/widgets/NoticeBar'
 
-import SearchCover from './SearchCover'
+import HomeCover from './HomeCover'
 import Footer from './Footer'
 
 import { Wrapper, InnerWrapper, NormalListWrapper } from './styles/content'
@@ -28,10 +29,10 @@ const Content: FC<TProps> = ({ displayType }) => {
   let DisplayContent
 
   switch (displayType) {
-    case GUIDE.PREVIEW: {
+    case GUIDE.HOME: {
       DisplayContent = (
         <NormalListWrapper>
-          <SearchCover />
+          <HomeCover />
         </NormalListWrapper>
       )
       break
@@ -70,7 +71,7 @@ const Content: FC<TProps> = ({ displayType }) => {
       DisplayContent = (
         <NormalListWrapper>
           <ProductGallery />
-          <Pagi margin={{ top: '40px', bottom: '60px' }} />
+          <Pagi margin={{ top: '20px', bottom: '20px' }} />
           <Footer />
           <br />
         </NormalListWrapper>
@@ -81,6 +82,14 @@ const Content: FC<TProps> = ({ displayType }) => {
 
   return (
     <Wrapper>
+      {displayType !== GUIDE.HOME && (
+        <NoticeBar
+          type="info"
+          content="当前条目仅作无分类无立场 UI 展示，协作编辑系统、模板等功能仍在开发调试中，欢迎任何形式的参与。"
+          bottom={15}
+          right={10}
+        />
+      )}
       <InnerWrapper>{DisplayContent}</InnerWrapper>
     </Wrapper>
   )

src/containers/content/CoolGuideContent/FilterBar.tsx

@@ -13,11 +13,10 @@ import {
   TopFilter,
   Option,
   OptionItem,
-  // FavoriteIcon,
   ClockIcon,
 } from './styles/filter_bar'
 
-import { topFilterOnChange } from './logic'
+import { topFilterOnChange, goHomeContent } from './logic'
 
 type TProps = {
   topFilter: string
@@ -28,21 +27,18 @@ const FilterBar: FC<TProps> = ({ topFilter, menuOnSelect }) => {
   return (
     <Wrapper testid="filter-bar">
       <TopFilter>
-        <BrandTitle title="酷导航" desc="实用指南，启发灵感，找到有趣" />
+        <BrandTitle
+          title="酷导航"
+          desc="实用指南，启发灵感，找到有趣"
+          onClick={() => goHomeContent()}
+        />
         <Divider />
         {topFilter !== 'all' && (
           <Option onClick={() => topFilterOnChange('all')}>全部</Option>
         )}
-        {/* <Option
-          active={topFilter === 'favorite'}
-          onClick={() => topFilterOnChange('favorite')}
-        >
+        <Option>
           <OptionItem>我的收藏</OptionItem>
-          <FavoriteIcon
-            src={`${ICON_CMD}/navi/heart.svg`}
-            active={topFilter === 'favorite'}
-          />
-        </Option> */}
+        </Option>
         <Option
           active={topFilter === 'latest'}
           onClick={() => topFilterOnChange('latest')}
@@ -55,11 +51,13 @@ const FilterBar: FC<TProps> = ({ topFilter, menuOnSelect }) => {
         </Option>
       </TopFilter>
       <Divider />
-      <Sticky offsetTop={30}>
+      <Sticky offsetTop={100}>
         <Fragment>
           <NaviCatalog
-            title="分类"
-            onSelect={(id: string, type: string) => menuOnSelect(id, type)}
+            title="类别"
+            onSelect={(id: string, type: string) => {
+              menuOnSelect(id, type)
+            }}
             withDivider={false}
             tags={mockNaviCatalogTags()}
           />

src/containers/content/CoolGuideContent/Footer/index.tsx

@@ -6,20 +6,21 @@
 
 import { FC, memo } from 'react'
 
+import { mockUsers } from '@/utils/mock'
+
 import ArrowButton from '@/widgets/Buttons/ArrowButton'
+import TeamList from '@/widgets/TeamList'
+import { SpaceGrow } from '@/widgets/Common'
 
 import {
   Wrapper,
   AboutBlock,
   ContributorBlock,
   ContributorsWrapper,
   Desc,
-  Avatar,
+  ButtomWraper,
 } from '../styles/footer'
 
-const FAKE_AVATAR =
-  'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/cmd/hot/hackernews.jpeg'
-
 type TProps = {
   mode?: string
 }
@@ -29,26 +30,33 @@ const Footer: FC<TProps> = ({ mode }) => {
     <Wrapper center={mode === 'cover'}>
       <AboutBlock>
         关于酷导航
-        <Desc>共收录信息 3485 条，最后更新：3小时前</Desc>
-        <ArrowButton>更多</ArrowButton>
+        <Desc>
+          收集各种和开发设计群体直接间接相关的，具有一定水准的工具、产品、资源以及视角。
+        </Desc>
+        <ButtomWraper>
+          <ArrowButton>更多</ArrowButton>
+          <SpaceGrow />
+        </ButtomWraper>
       </AboutBlock>
       {mode !== 'cover' && (
         <AboutBlock>
-          关于本周热榜
-          <Desc>共有 RSS 源 334 个，最后抓取：3小时前</Desc>
-          <ArrowButton>参与贡献</ArrowButton>
+          关于本类别
+          <Desc>本类别收录日常使用频率较高的效率工具，最后更新于 5 天前</Desc>
+          <ButtomWraper>
+            <ArrowButton>参与贡献</ArrowButton>
+            <SpaceGrow />
+          </ButtomWraper>
         </AboutBlock>
       )}
       <ContributorBlock>
-        贡献者们
+        贡献者
         <ContributorsWrapper>
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
-          <Avatar src={FAKE_AVATAR} />
+          <TeamList users={mockUsers(5)} layout="guide-contribute" />
         </ContributorsWrapper>
-        <ArrowButton>参与贡献</ArrowButton>
+        <ButtomWraper>
+          <ArrowButton>参与贡献</ArrowButton>
+          <SpaceGrow />
+        </ButtomWraper>
       </ContributorBlock>
     </Wrapper>
   )

src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx → src/containers/content/CoolGuideContent/HomeCover/InputBox.tsx

@@ -6,7 +6,7 @@ import {
   InputMask,
   MaskNumer,
   InputBar,
-} from '../styles/search_cover/input_box'
+} from '../styles/home_cover/input_box'
 
 type TProps = {
   showMask?: boolean

src/containers/content/CoolGuideContent/HomeCover/index.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable jsx-a11y/accessible-emoji */
+import { FC, memo } from 'react'
+
+import Linker from '@/widgets/Linker'
+
+// import Footer from '../Footer'
+// import InputBox from './InputBox'
+
+import {
+  Wrapper,
+  Block,
+  Title,
+  Ul,
+  Li,
+  Strike,
+  Bold,
+} from '../styles/home_cover'
+
+type TProps = {
+  testid?: string
+}
+
+const HomeCover: FC<TProps> = ({ testid = 'search-cover' }) => {
+  return (
+    <Wrapper testid={testid}>
+      <Block>
+        <Title>关于酷导航</Title>
+        <Ul>
+          <Li>
+            这里收集各种和开发设计群体直接间接相关的，有<Strike>逼格</Strike>
+            一定水准的工具、产品、资源以及视角。
+          </Li>
+          <Li>
+            每个条目都会有客观的帖子介绍基本概况、使用场景、公认的一些优缺点等等。
+          </Li>
+          <Li>
+            是否收录与所在地域，是否开源，免费或付费等因素无关，但会列出。
+          </Li>
+          <Li>
+            大多数目录的收录标准只有一个：<Bold>The best or the unique</Bold>
+          </Li>
+          <Li>不恰烂钱，不讲人情，你行你上。</Li>
+        </Ul>
+      </Block>
+      <Block>
+        <Title>当前状态</Title>
+        <Ul>
+          <Li>
+            👈 &nbsp;初始分类及 UI 雏形已完成，欢迎体验后
+            <Linker
+              src="/feedback"
+              external={false}
+              text="给我们反馈"
+              inline
+              left={4}
+              right={4}
+            />
+            。
+          </Li>
+          <Li>目前已经完成大部分的后端工作。</Li>
+          <Li>前端富文本编辑/显示模板还有不少工作量</Li>
+          <Li>
+            协作编辑，编辑历史，参与贡献体系等已经基本设计完成，但还未正式编写相关模块。
+          </Li>
+        </Ul>
+      </Block>
+      <Block>
+        <Title>开发计划</Title>
+        <Ul>
+          <Li>
+            收集社区
+            <Linker
+              src="/feedback"
+              external={false}
+              text="建议反馈"
+              inline
+              left={4}
+              right={4}
+            />
+            ，完善设计。
+          </Li>
+          <Li>编码实施。计划在内测阶段完成。</Li>
+        </Ul>
+      </Block>
+      {/* <Br top={10} /> */}
+      {/* <InputBox /> */}
+      {/* <Br top={15} /> */}
+      {/* <Footer mode="cover" /> */}
+    </Wrapper>
+  )
+}
+
+export default memo(HomeCover)

src/containers/content/CoolGuideContent/logic.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-import { ERR } from '@/constant'
+import { ERR, GUIDE } from '@/constant'
 import { errRescue } from '@/utils/helper'
 import asyncSuit from '@/utils/async'
 import { buildLog } from '@/utils/logger'
@@ -30,6 +30,10 @@ export const menuOnSelect = (
   store.mark({ activeMenuId, displayType })
 }
 
+export const goHomeContent = (): void => {
+  store.mark({ displayType: GUIDE.HOME })
+}
+
 /**
  * favorite or latestUpdated filter change
  *

src/containers/content/CoolGuideContent/store.ts

@@ -14,7 +14,7 @@ const CoolGuideContent = T.model('CoolGuideContent', {
   activeMenuId: T.maybeNull(T.string),
   // initActiveMenuId: T.optional(T.string, ''),
   topFilter: T.optional(T.string, 'all'),
-  displayType: T.optional(T.enumeration(values(GUIDE)), GUIDE.PREVIEW),
+  displayType: T.optional(T.enumeration(values(GUIDE)), GUIDE.HOME),
 }).actions((self) => ({
   markRoute(query): void {
     const root = getParent(self) as TRootStore

src/containers/content/CoolGuideContent/styles/filter_bar.ts

@@ -38,7 +38,7 @@ export const Option = styled.div<TActive>`
     cursor: pointer;
   }
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const OptionItem = styled.div`
   flex-grow: 1;
@@ -47,7 +47,7 @@ const OptionIconBase = styled(Img)<TActive>`
   ${css.size(12)};
   opacity: ${({ active }) => (active ? '1' : '0')};
 
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const FavoriteIcon = styled(OptionIconBase)`
   fill: ${theme('baseColor.red')};