chore: links texts (#1152)

mydearxym · web-flow · commit ee19f18a14cc · 2021-08-18T23:02:45.000+08:00
* chore(header): links &amp; tests

* chore(footer): links &amp; tests
diff --git a/src/components/Header/UserAccount.tsx b/src/components/Header/UserAccount.tsx
@@ -7,6 +7,7 @@ import { useAccount } from '@/stores/init'
 
 import Tooltip from '@/components/Tooltip'
 import Button from '@/components/Buttons/Button'
+import { Space } from '@/components/Common'
 
 // import { onLogin, onLogout, previewAccount } from './logic'
 
@@ -93,17 +94,15 @@ const UserAccount: FC = () => {
         </Wrapper>
       )}
 
-      <MembershipHint>
-        {/* 升&nbsp;级- */}
-        <Button
-          size="tiny"
-          type="primary"
-          ghost
-          onClick={() => router.push(`/${ROUTE.MEMBERSHIP}`)}
-        >
-          升&nbsp;级
-        </Button>
-      </MembershipHint>
+      <Space left={12} />
+      <Button
+        size="tiny"
+        type="primary"
+        ghost
+        onClick={() => router.push(`/${ROUTE.MEMBERSHIP}`)}
+      >
+        <MembershipHint>升舱</MembershipHint>
+      </Button>
     </Fragment>
   )
 }
diff --git a/src/components/Header/styles/user_account.ts b/src/components/Header/styles/user_account.ts
@@ -77,5 +77,6 @@ export const DefaultUserIcon = styled(Img)`
   opacity: 0.5;
 `
 export const MembershipHint = styled.div`
-  margin-left: 12px;
+  letter-spacing: 2px;
+  padding: 0 4px;
 `
diff --git a/src/components/Navigator/MorePanel/DesktopView.tsx b/src/components/Navigator/MorePanel/DesktopView.tsx
@@ -32,29 +32,41 @@ const MoreContent: FC = () => {
           </Main>
           <Desc>贴纸/冰箱贴/各种奇奇怪怪。。</Desc>
         </Entry> */}
+        <Entry>
+          <Main>
+            <Logo src={`${ICON}/menu/lifebuoy.png`} />
+            <Link href={`/${ROUTE.SUPPORT_US}`} passHref>
+              <Title>
+                支持我们
+                <Wip>help</Wip>
+              </Title>
+            </Link>
+          </Main>
+          <Desc>帮助我们一起将社区维持下去</Desc>
+        </Entry>
         <Entry>
           <Main>
             <Logo src={`${ICON}/menu/hot.svg`} />
             <Link href={`/${ROUTE.TRENDING}`} passHref>
-              <Title>热门</Title>
+              <Title>趋势讨论</Title>
             </Link>
           </Main>
-          <Desc>各社区近期热门内容</Desc>
+          <Desc>站内外近期热门讨论</Desc>
         </Entry>
         <Entry>
           <Main>
             <Logo src={`${ICON}/menu/makers.svg`} />
-            <Title>创作者社区</Title>
+            <Title>Makers</Title>
           </Main>
-          <Desc>经验交流，开发者访谈</Desc>
+          <Desc>创作者经验交流，开发者访谈</Desc>
         </Entry>
         <Link href={`/${ROUTE.RECIPES}`} passHref>
           <Entry>
             <Main>
               <Logo src={`${ICON}/menu/snippets.svg`} />
-              <Title>代码片段</Title>
+              <Title>创建子社区</Title>
             </Main>
-            <Desc>各语言实用 Snippets，小技巧</Desc>
+            <Desc>在 CP 上创建一个子社区</Desc>
           </Entry>
         </Link>
         <Entry>
@@ -71,17 +83,7 @@ const MoreContent: FC = () => {
             <ChartLogo src={`${ICON}/menu/chart.svg`} />
             <Title offset="8px">社区统计</Title>
           </Main>
-          <Desc>各社区各项统计数据</Desc>
-        </Entry>
-
-        <Entry>
-          <Main>
-            <Logo src={`${ICON}/menu/ear.svg`} />
-            <Link href={`/${ROUTE.MEMBERSHIP}`} passHref>
-              <Title>建议与反馈</Title>
-            </Link>
-          </Main>
-          <Desc>关于社区的任何问题或建议</Desc>
+          <Desc>社区各项统计数据</Desc>
         </Entry>
       </BodyWrapper>
       <Footer />
diff --git a/src/components/Navigator/MorePanel/Footer.tsx b/src/components/Navigator/MorePanel/Footer.tsx
@@ -10,34 +10,32 @@ import {
   Wrapper,
   Entry,
   Logo,
-  SupportLogo,
   Main,
   Title,
   Desc,
-  Notice,
 } from '../styles/more_panel/footer'
 
 const MoreContent: FC = () => {
   return (
     <Wrapper>
       <Entry>
-        <Link href={`/${ROUTE.SUPPORT_US}`} passHref>
+        <Link href={`/${GITHUB}`} passHref>
           <Main>
-            <SupportLogo src={`${ICON}/menu/lifebuoy.png`} noLazy />
-            <Title>支持我们</Title>
+            <Logo src={`${ICON}/menu/github.svg`} />
+            <Title>Open Source</Title>
           </Main>
         </Link>
-        <Desc>帮助我们一起将社区维持下去</Desc>
-        <Notice>Help</Notice>
+        <Desc>本站全部代码开源在 Github 上，欢迎参与</Desc>
       </Entry>
+
       <Entry>
-        <Link href={`/${GITHUB}`} passHref>
+        <Link href={`/${ROUTE.MEMBERSHIP}`} passHref>
           <Main>
-            <Logo src={`${ICON}/menu/github.svg`} />
-            <Title>Open Source</Title>
+            <Logo src={`${ICON}/menu/ear.svg`} noLazy />
+            <Title>建议与反馈</Title>
           </Main>
         </Link>
-        <Desc>本站全部代码开源在 Github 上，欢迎参与</Desc>
+        <Desc>关于本站的任何吐槽，建议，反馈。</Desc>
       </Entry>
     </Wrapper>
   )
diff --git a/src/components/Navigator/styles/more_panel/index.ts b/src/components/Navigator/styles/more_panel/index.ts
@@ -6,7 +6,7 @@ import Img from '@/Img'
 
 export const Wrapper = styled.div<{ mobile?: boolean }>`
   ${css.flexColumn('align-center')};
-  width: ${({ mobile }) => (!mobile ? '455px' : '100%')};
+  width: ${({ mobile }) => (!mobile ? '430px' : '100%')};
   min-height: 300px;
   margin-top: 0;
 `
@@ -17,7 +17,7 @@ export const BodyWrapper = styled.div`
 `
 export const Entry = styled.div<{ mobile?: boolean }>`
   ${css.flexColumn('align-start')};
-  width: ${({ mobile }) => (!mobile ? '225px' : '48%')};
+  width: ${({ mobile }) => (!mobile ? '210px' : '48%')};
   height: 75px;
   padding-left: 20px;
 
@@ -69,11 +69,11 @@ export const Desc = styled.div`
   margin-left: 28px;
 `
 export const Wip = styled.div`
-  color: #007372;
+  color: #398a89;
   border: 1px solid;
   border-color: #007372;
   margin-left: 10px;
   font-size: 10px;
-  padding: 0 2px;
+  padding: 0 4px;
   border-radius: 4px;
 `
diff --git a/src/containers/unit/Footer/DesktopView/HomeView.tsx b/src/containers/unit/Footer/DesktopView/HomeView.tsx
@@ -4,6 +4,7 @@ import { useTheme } from 'styled-components'
 import type { TThemeMap, TC11NLayout, TMetric } from '@/spec'
 import { GITHUB, API_SERVER_ADDR, ISSUE_ADDR, BUILD_VERSION } from '@/config'
 import { ROUTE } from '@/constant'
+import { siteBirthDay } from '@/utils/helper'
 
 import TopInfo from './TopInfo'
 import BottomInfo from './BottomInfo'
@@ -54,43 +55,35 @@ const HomeView: FC<TProps> = ({ metric, layout }) => {
                 来一杯
               </LinkItem>
               <LinkItem href={`${ROUTE.SUPPORT_US}`} {...linkColors}>
-                活动
+                小聚
               </LinkItem>
               <LinkItem href={`${ROUTE.SUPPORT_US}`} {...linkColors}>
-                工作
-              </LinkItem>
-              <LinkItem href={`${ROUTE.SUPPORT_US}`} {...linkColors}>
-                更多 ..
+                Makers
               </LinkItem>
             </Body>
           </Column>
 
           <Column>
-            <Title>会员</Title>
+            <Title>使用指南</Title>
             <Body>
               <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
-                志愿者
+                发帖须知
               </LinkItem>
               <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
-                成为会员
+                会员福利
               </LinkItem>
               <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
-                打赏支持
+                隐私说明
+              </LinkItem>
+              <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
+                反馈&nbsp;&amp;&nbsp;建议
+              </LinkItem>
+              <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
+                加入我们
+              </LinkItem>
+              <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
+                免责声明
               </LinkItem>
-            </Body>
-
-            <br />
-            <Title>商务</Title>
-            <Body>
-              <Item as="span" normal>
-                投放广告
-              </Item>
-              <Item as="span" normal>
-                赞助商
-              </Item>
-              {/* <LinkItem href={`${ROUTE.SUPPORT_US}`} {...linkColors}>
-                支持我们
-              </LinkItem> */}
             </Body>
           </Column>
 
@@ -109,7 +102,7 @@ const HomeView: FC<TProps> = ({ metric, layout }) => {
               <LinkItem href={`${API_SERVER_ADDR}`} {...linkColors}>
                 API
               </LinkItem>
-              <LinkItem href={`${GITHUB}`} {...linkColors}>
+              <LinkItem href={`${API_SERVER_ADDR}`} {...linkColors}>
                 Github
               </LinkItem>
             </Body>
@@ -119,7 +112,10 @@ const HomeView: FC<TProps> = ({ metric, layout }) => {
             <Title>网站状态</Title>
             <Body>
               <Item as="span" normal>
-                建造纪元: {BUILD_VERSION}
+                版本: {BUILD_VERSION}
+              </Item>
+              <Item as="span" normal>
+                年龄: {siteBirthDay('2019/02/01')}
               </Item>
             </Body>
             <br />
@@ -132,25 +128,22 @@ const HomeView: FC<TProps> = ({ metric, layout }) => {
                 在线人数: --
               </Item>
               <Item as="span" normal>
-                小黑屋: --
+                黑洞: --
               </Item>
             </Body>
           </Column>
 
           <Column>
-            <Title>支持</Title>
+            <Title>Brand</Title>
             <Body>
-              <LinkItem href="/home/post/1" {...linkColors}>
-                违规举报
-              </LinkItem>
-              <LinkItem href="/cps-support/posts" {...linkColors}>
-                反馈与建议
+              <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
+                价值观
               </LinkItem>
-              <LinkItem href={`${ISSUE_ADDR}`} {...linkColors}>
-                帮助中心
+              <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
+                名词解释
               </LinkItem>
-              <LinkItem href={`${ROUTE.SUPPORT_US}`} {...linkColors}>
-                内容订阅
+              <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
+                Logo &amp; 资源
               </LinkItem>
             </Body>
             <br />
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx
@@ -20,10 +20,9 @@ const HomeCommunity: FC<TProps> = ({ title = 'oderPlanets' }) => {
       </InfoBar>
       <SiteTitle>{title}</SiteTitle>
       <Linker>关于</Linker>
-      <Linker>创建社区</Linker>
-      <Linker>加入我们</Linker>
+      <Linker>支持我们</Linker>
       <Linker>特别感谢</Linker>
-      <Linker>Github</Linker>
+      <Linker>反馈 &amp; 建议</Linker>
       <Linker>访问统计</Linker>
     </Wrapper>
   )
diff --git a/src/containers/unit/Footer/styles/desktop_view/top_info/index.ts b/src/containers/unit/Footer/styles/desktop_view/top_info/index.ts
@@ -31,7 +31,7 @@ export const SiteTitle = styled.div`
   font-size: 18px;
   font-weight: bold;
   margin-left: 4px;
-  margin-right: 56px;
+  margin-right: 52px;
   letter-spacing: 1px;
 `
 export const ArrowDividerIcon = styled(Img)`
diff --git a/src/containers/unit/Header/DesktopView/CommunityView.tsx b/src/containers/unit/Header/DesktopView/CommunityView.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, useEffect } from 'react'
+import { FC, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 
 import type { TMetric } from '@/spec'
diff --git a/utils/helper.ts b/utils/helper.ts
@@ -384,3 +384,29 @@ export const openShareWindow = (
 
   Global.open(targetUrl, '_blank', 'height=500, width=600')
 }
+
+// https://stackoverflow.com/a/2627482/4050784
+export const daysBetween = (date1, date2) => {
+  // The number of milliseconds in one day
+  const ONE_DAY = 1000 * 60 * 60 * 24
+
+  // Calculate the difference in milliseconds
+  const differenceMs = Math.abs(date1 - date2)
+
+  // Convert back to days and return
+  return Math.round(differenceMs / ONE_DAY)
+}
+
+// birthday is a Date
+const calculateAge = (birthday) => {
+  const ageDifMs = Date.now() - birthday.getTime()
+  const ageDate = new Date(ageDifMs) // miliseconds from epoch
+  return Math.abs(ageDate.getUTCFullYear() - 1970)
+}
+
+export const siteBirthDay = (birthday: string): string => {
+  const year = calculateAge(new Date(birthday))
+  const days = daysBetween(new Date(birthday), Date.now()) - 365 * year
+
+  return `${year}年${days}天`
+}

Original file line number	Diff line number	Diff line change
@@ -77,5 +77,6 @@ export const DefaultUserIcon = styled(Img)`
`77`	`77`	`opacity: 0.5;`
`78`	`78`	`
`79`	`79`	export const MembershipHint = styled.div`
`80`		`- margin-left: 12px;`
	`80`	`+ letter-spacing: 2px;`
	`81`	`+ padding: 0 4px;`
`81`	`82`	`
Original file line number	Diff line number	Diff line change
@@ -31,7 +31,7 @@ export const SiteTitle = styled.div`
`31`	`31`	`font-size: 18px;`
`32`	`32`	`font-weight: bold;`
`33`	`33`	`margin-left: 4px;`
`34`		`- margin-right: 56px;`
	`34`	`+ margin-right: 52px;`
`35`	`35`	`letter-spacing: 1px;`
`36`	`36`	`
`37`	`37`	export const ArrowDividerIcon = styled(Img)`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`*`
`5`	`5`	`*/`
`6`	`6`
`7`		`-import React, { FC, useEffect } from 'react'`
	`7`	`+import { FC, useEffect } from 'react'`
`8`	`8`	`import dynamic from 'next/dynamic'`
`9`	`9`
`10`	`10`	`import type { TMetric } from '@/spec'`