From a5a9c960f0a9cc2aab2d2093d619d0797af64235 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 24 Mar 2021 21:37:54 +0800 Subject: [PATCH 1/8] chore: wip --- src/components/CommunityFaceLogo/index.js | 3 ++- src/containers/unit/Footer/DesktopView/DigestView/index.js | 5 ++++- .../unit/Footer/styles/desktop_view/digest_view/index.ts | 5 ++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/CommunityFaceLogo/index.js b/src/components/CommunityFaceLogo/index.js index 5742dfe7e..5eeb6b783 100755 --- a/src/components/CommunityFaceLogo/index.js +++ b/src/components/CommunityFaceLogo/index.js @@ -21,7 +21,8 @@ const CommunityFaceLogo = ({ noFill, src, raw, loading, className }) => { if (raw === HCN || isEmpty(src)) { return ( diff --git a/src/containers/unit/Footer/DesktopView/DigestView/index.js b/src/containers/unit/Footer/DesktopView/DigestView/index.js index 6147fe31b..ed770c314 100644 --- a/src/containers/unit/Footer/DesktopView/DigestView/index.js +++ b/src/containers/unit/Footer/DesktopView/DigestView/index.js @@ -10,6 +10,7 @@ import ContactBar from './ContactBar' import { Wrapper, InnerWrapper, + TopBarInfos, MainInfos, MainColumn, SiteInfo, @@ -36,7 +37,7 @@ const DigestView = ({ layout, metric }) => { return ( - + @@ -59,6 +60,8 @@ const DigestView = ({ layout, metric }) => { + + About diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts index 55622cfd3..54a6ef157 100644 --- a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts +++ b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts @@ -19,8 +19,11 @@ export const InnerWrapper = styled.div` width: 100%; padding-bottom: 0; ` +export const TopBarInfos = styled.div` + ${css.flex('align-center')}; +` export const MainInfos = styled.div` - ${css.flex('justify-start')}; + ${css.flexColumn('justify-start')}; margin-bottom: 20px; margin-top: 20px; margin-bottom: 30px; From c4d7fa3cbbf0b3160de12ee8022ef4fae42edf31 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 24 Mar 2021 22:29:51 +0800 Subject: [PATCH 2/8] chore: covert FaceLogo to ts --- src/components/CommunityFaceLogo/index.js | 60 ------------------- src/components/CommunityFaceLogo/index.tsx | 49 +++++++++++++++ .../CommunityFaceLogo/styles/index.ts | 8 ++- .../styles/desktop_view/digest_view/index.ts | 2 +- 4 files changed, 55 insertions(+), 64 deletions(-) delete mode 100755 src/components/CommunityFaceLogo/index.js create mode 100755 src/components/CommunityFaceLogo/index.tsx diff --git a/src/components/CommunityFaceLogo/index.js b/src/components/CommunityFaceLogo/index.js deleted file mode 100755 index 5eeb6b783..000000000 --- a/src/components/CommunityFaceLogo/index.js +++ /dev/null @@ -1,60 +0,0 @@ -/* - * - * CommunityFaceLogo - * - */ - -import React from 'react' -import T from 'prop-types' -import { isEmpty } from 'ramda' - -import { HCN } from '@/constant' -import { ICON_BASE } from '@/config' -import { buildLog } from '@/utils' - -import { Logo } from './styles' - -/* eslint-disable-next-line */ -const log = buildLog('c:CommunityFaceLogo:index') - -const CommunityFaceLogo = ({ noFill, src, raw, loading, className }) => { - if (raw === HCN || isEmpty(src)) { - return ( - - ) - } - - return ( - - ) -} - -CommunityFaceLogo.propTypes = { - noFill: T.bool, - src: T.string, - raw: T.string, - // just for clean styled-component warnings - className: T.string, - loading: T.any, -} - -CommunityFaceLogo.defaultProps = { - src: '', - raw: HCN, - noFill: false, - className: 'community-facelogo-class', - loading: null, -} - -export default React.memo(CommunityFaceLogo) diff --git a/src/components/CommunityFaceLogo/index.tsx b/src/components/CommunityFaceLogo/index.tsx new file mode 100755 index 000000000..e9bc6b6af --- /dev/null +++ b/src/components/CommunityFaceLogo/index.tsx @@ -0,0 +1,49 @@ +/* + * + * CommunityFaceLogo + * + */ + +import React from 'react' +import { isEmpty } from 'ramda' + +import { HCN } from '@/constant' +// import { ICON_BASE } from '@/config' +import { buildLog } from '@/utils' + +import { Logo, HomeLogo } from './styles' + +/* eslint-disable-next-line */ +const log = buildLog('c:CommunityFaceLogo:index') + +type TProps = { + noFill: boolean + src?: string + raw?: string + loading?: boolean | null + className?: string +} + +const CommunityFaceLogo: React.FC = ({ + noFill = false, + src = '', + raw = HCN, + loading, + className = 'community-facelogo-class', +}) => { + if (raw === HCN || isEmpty(src)) { + return ( + + ) + } + + return ( + + ) +} + +export default React.memo(CommunityFaceLogo) diff --git a/src/components/CommunityFaceLogo/styles/index.ts b/src/components/CommunityFaceLogo/styles/index.ts index 6416c7e95..d70948d6c 100755 --- a/src/components/CommunityFaceLogo/styles/index.ts +++ b/src/components/CommunityFaceLogo/styles/index.ts @@ -3,9 +3,11 @@ import styled from 'styled-components' import { theme } from '@/utils' import Img from '@/Img' -export const Logo = styled(Img)<{ nonFill: boolean }>` - fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.desc'))}; +export const Logo = styled(Img)<{ noFill?: boolean }>` + fill: ${({ noFill }) => (noFill ? '' : theme('banner.desc'))}; display: block; ` -export const holder = 1 +export const HomeLogo = styled(Logo)` + transform: rotate(20deg); +` diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts index 54a6ef157..26a0659de 100644 --- a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts +++ b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts @@ -23,7 +23,7 @@ export const TopBarInfos = styled.div` ${css.flex('align-center')}; ` export const MainInfos = styled.div` - ${css.flexColumn('justify-start')}; + ${css.flex('justify-start')}; margin-bottom: 20px; margin-top: 20px; margin-bottom: 30px; From 2b40ad40822e866b122f3008ead90e49df633b79 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 24 Mar 2021 23:25:59 +0800 Subject: [PATCH 3/8] chore(Footer): re-org items wip --- .../Footer/DesktopView/DigestView/index.js | 59 +++++++++++++++---- .../styles/desktop_view/digest_view/index.ts | 39 ++++++------ utils/themes/skins/solarized_dark.ts | 2 +- 3 files changed, 72 insertions(+), 28 deletions(-) diff --git a/src/containers/unit/Footer/DesktopView/DigestView/index.js b/src/containers/unit/Footer/DesktopView/DigestView/index.js index ed770c314..e5647f300 100644 --- a/src/containers/unit/Footer/DesktopView/DigestView/index.js +++ b/src/containers/unit/Footer/DesktopView/DigestView/index.js @@ -42,26 +42,55 @@ const DigestView = ({ layout, metric }) => { -
- coderplanets - coderplanets + 关于 + 加入我们 + OpenSource + 友情链接 + 特别感谢 + {/* Power By Groupher | 2020 - - */} + {/* 蜀ICP备17043722号-4 - -
+ */} + + 网站地图 + + + 子社区 + + + 作品集市 + + + 酷导航 + + + 来一杯 + + + 活动 + + + 工作 + + + 更多 .. + + + About @@ -98,8 +127,11 @@ const DigestView = ({ layout, metric }) => { 开发者 + + 技术栈 + - 开发者指南 + 文档中心 API @@ -121,11 +153,18 @@ const DigestView = ({ layout, metric }) => { - 本站状态 + 网站状态 - 构建版本: {BUILD_VERSION} + 部署版本: {BUILD_VERSION} + + + 开发计划 + +
+ 用户 + 注册人数: -- diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts index 26a0659de..a952cfbf4 100644 --- a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts +++ b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts @@ -21,6 +21,10 @@ export const InnerWrapper = styled.div` ` export const TopBarInfos = styled.div` ${css.flex('align-center')}; + margin-bottom: 30px; + padding-bottom: 20px; + border-bottom: 1px solid; + border-bottom-color: #003949; ` export const MainInfos = styled.div` ${css.flex('justify-start')}; @@ -41,42 +45,43 @@ export const Column = styled.div<{ margin: string }>` min-width: 100px; margin-right: ${({ margin }) => margin || '50px'}; ` -export const MainColumn = styled(Column)` +export const MainColumn = styled.div` + ${css.flex('align-center')}; min-width: 240px; flex-grow: 1; ` export const SiteInfo = styled.div` - ${css.flex()}; - align-items: end; - margin-bottom: 10px; + ${css.flex('align-center')}; margin-top: 3px; ` +export const SiteLogo = styled(CommunityFaceLogo)` + ${css.size(22)}; + margin-right: 12px; + margin-top: -5px; + margin-left: 2px; +` export const SiteTitle = styled.div` - margin-bottom: 5px; - color: ${theme('footer.text')}; - font-size: 15px; + color: ${theme('footer.title')}; + font-size: 18px; font-weight: bold; - margin-bottom: 5px; + margin-right: 25px; ` export const SiteDesc = styled.a` - margin-bottom: 5px; - color: ${theme('footer.text')}; + color: ${theme('footer.title')}; display: block; text-decoration: none; + margin-left: 24px; + opacity: 0.8; - font-size: 13px; + font-size: 14px; &:hover { color: ${theme('footer.hover')}; text-decoration: underline; cursor: pointer; + opacity: 1; } - transition: color 0.2s; -` -export const SiteLogo = styled(CommunityFaceLogo)` - ${css.size(32)}; - margin-bottom: 18px; - margin-left: 3px; + transition: all 0.2s; ` export const Title = styled.div` color: ${theme('footer.title')}; diff --git a/utils/themes/skins/solarized_dark.ts b/utils/themes/skins/solarized_dark.ts index 36114d780..e856b30f6 100755 --- a/utils/themes/skins/solarized_dark.ts +++ b/utils/themes/skins/solarized_dark.ts @@ -101,7 +101,7 @@ const solarizedDark = { footer: { text: '#065365', hover: '#147f7e', - title: '#195D61', + title: '#277ea5', bottomBg: '#061b20', }, sidebar: { From 76ec4c318533f1c12b011fa4a23ba6e725fe384a Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 25 Mar 2021 00:34:55 +0800 Subject: [PATCH 4/8] chore(Footer): adjust color --- .../unit/Footer/styles/desktop_view/digest_view/index.ts | 3 ++- utils/themes/skins/solarized_dark.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts index a952cfbf4..4eb86faec 100644 --- a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts +++ b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts @@ -61,7 +61,7 @@ export const SiteLogo = styled(CommunityFaceLogo)` margin-left: 2px; ` export const SiteTitle = styled.div` - color: ${theme('footer.title')}; + color: #007fa8; font-size: 18px; font-weight: bold; margin-right: 25px; @@ -87,6 +87,7 @@ export const Title = styled.div` color: ${theme('footer.title')}; margin-bottom: 15px; font-size: 14px; + font-weight: bold; ` export const Body = styled.div` ${css.flexColumn('justify-start')}; diff --git a/utils/themes/skins/solarized_dark.ts b/utils/themes/skins/solarized_dark.ts index e856b30f6..1d89ac895 100755 --- a/utils/themes/skins/solarized_dark.ts +++ b/utils/themes/skins/solarized_dark.ts @@ -101,7 +101,7 @@ const solarizedDark = { footer: { text: '#065365', hover: '#147f7e', - title: '#277ea5', + title: '#1a687d', bottomBg: '#061b20', }, sidebar: { From cea836f8fc09c1688d9f27d5dddf8c8596174827 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 25 Mar 2021 12:58:55 +0800 Subject: [PATCH 5/8] refactor(footer): redesign digest view --- src/components/Buttons/ArrowLink.tsx | 4 +- src/components/CommunityFaceLogo/index.tsx | 2 +- .../unit/Footer/DesktopView/BottomInfo.js | 55 -------- .../unit/Footer/DesktopView/BottomInfo.tsx | 27 ++++ .../DesktopView/DigestView/ContactBar.js | 27 ---- .../DigestView/{index.js => index.tsx} | 123 +++++++++--------- src/containers/unit/Footer/SocialList.js | 9 -- .../Footer/styles/desktop_view/bottom_info.ts | 8 +- .../desktop_view/digest_view/contact_bar.ts | 15 --- .../styles/desktop_view/digest_view/index.ts | 11 +- src/spec/theme.ts | 4 + 11 files changed, 105 insertions(+), 180 deletions(-) delete mode 100755 src/containers/unit/Footer/DesktopView/BottomInfo.js create mode 100755 src/containers/unit/Footer/DesktopView/BottomInfo.tsx delete mode 100644 src/containers/unit/Footer/DesktopView/DigestView/ContactBar.js rename src/containers/unit/Footer/DesktopView/DigestView/{index.js => index.tsx} (78%) delete mode 100644 src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts diff --git a/src/components/Buttons/ArrowLink.tsx b/src/components/Buttons/ArrowLink.tsx index 374d85255..a6d90d9da 100644 --- a/src/components/Buttons/ArrowLink.tsx +++ b/src/components/Buttons/ArrowLink.tsx @@ -17,11 +17,11 @@ import { Wrapper, Text, RightIcon } from './styles/arrow_link' const log = buildLog('c:Buttons:ArrowLink') type TProps = { - className: string + className?: string children?: React.ReactNode size?: TSIZE href: string - target: '_blank' | '' + target?: '_blank' | '' color?: string hoverColor?: string } diff --git a/src/components/CommunityFaceLogo/index.tsx b/src/components/CommunityFaceLogo/index.tsx index e9bc6b6af..c3ea8191a 100755 --- a/src/components/CommunityFaceLogo/index.tsx +++ b/src/components/CommunityFaceLogo/index.tsx @@ -17,7 +17,7 @@ import { Logo, HomeLogo } from './styles' const log = buildLog('c:CommunityFaceLogo:index') type TProps = { - noFill: boolean + noFill?: boolean src?: string raw?: string loading?: boolean | null diff --git a/src/containers/unit/Footer/DesktopView/BottomInfo.js b/src/containers/unit/Footer/DesktopView/BottomInfo.js deleted file mode 100755 index 9ac7538d0..000000000 --- a/src/containers/unit/Footer/DesktopView/BottomInfo.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react' -import Link from 'next/link' - -import { ROUTE } from '@/constant' - -import { - Wrapper, - InnerWrapper, - Links, - Site, - MoreText, -} from '../styles/desktop_view/bottom_info' - -const FRIENDS = [ - { - title: 'aab', - link: 'https://cps.fun', - }, - { - title: 'bbb', - link: 'https://cps.fun', - }, - { - title: 'ccc', - link: 'https://cps.fun', - }, - { - title: 'ddd', - link: 'https://cps.fun', - }, - { - title: '暗黑设计', - link: 'https://cps.fun', - }, -] - -const BottomInfo = ({ layout, metric }) => ( - - - - {FRIENDS.map((site, index) => ( - // eslint-disable-next-line react/no-array-index-key - - {site.title} - - ))} - - - 更多赞助商 - - - -) - -export default React.memo(BottomInfo) diff --git a/src/containers/unit/Footer/DesktopView/BottomInfo.tsx b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx new file mode 100755 index 000000000..1548fe0ee --- /dev/null +++ b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import Link from 'next/link' + +import { ROUTE } from '@/constant' + +import { + Wrapper, + InnerWrapper, + Links, + Site, + MoreText, +} from '../styles/desktop_view/bottom_info' + +const BottomInfo: React.FC = () => ( + + + + 蜀ICP备17043722号-4 + + + Power By Groupher @ 2021 + + + +) + +export default React.memo(BottomInfo) diff --git a/src/containers/unit/Footer/DesktopView/DigestView/ContactBar.js b/src/containers/unit/Footer/DesktopView/DigestView/ContactBar.js deleted file mode 100644 index d1b8a3b14..000000000 --- a/src/containers/unit/Footer/DesktopView/DigestView/ContactBar.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' - -import { useDevice } from '@/hooks' -import EmailSubscriber from '@/components/EmailSubscriber' - -import SocialList from '../../SocialList' -import { - Wrapper, - InnerWrapper, -} from '../../styles/desktop_view/digest_view/contact_bar' - -const ContactBar = ({ layout, metric }) => { - const { isMobile } = useDevice() - - return ( - - - - {!isMobile && ( - - )} - - - ) -} - -export default React.memo(ContactBar) diff --git a/src/containers/unit/Footer/DesktopView/DigestView/index.js b/src/containers/unit/Footer/DesktopView/DigestView/index.tsx similarity index 78% rename from src/containers/unit/Footer/DesktopView/DigestView/index.js rename to src/containers/unit/Footer/DesktopView/DigestView/index.tsx index e5647f300..eaffa9591 100644 --- a/src/containers/unit/Footer/DesktopView/DigestView/index.js +++ b/src/containers/unit/Footer/DesktopView/DigestView/index.tsx @@ -1,11 +1,12 @@ import React from 'react' import { useTheme } from 'styled-components' +import type { TThemeMap } from '@/spec' import { GITHUB, API_SERVER_ADDR, ISSUE_ADDR, BUILD_VERSION } from '@/config' import { ROUTE } from '@/constant' import BottomInfo from '../BottomInfo' -import ContactBar from './ContactBar' +import SocialList from '../../SocialList' import { Wrapper, @@ -26,8 +27,12 @@ import { import { toggleBusBanner } from '../../logic' -const DigestView = ({ layout, metric }) => { - const theme = useTheme() +type TProps = { + metric: string +} + +const DigestView: React.FC = ({ metric }) => { + const theme = useTheme() as TThemeMap const linkColors = { color: theme.footer.text, @@ -36,7 +41,7 @@ const DigestView = ({ layout, metric }) => { return ( - + @@ -44,24 +49,10 @@ const DigestView = ({ layout, metric }) => { coderplanets 关于 + 创建社区 加入我们 OpenSource - 友情链接 特别感谢 - {/* - Power By Groupher | 2020 - */} - {/* - 蜀ICP备17043722号-4 - */} @@ -91,48 +82,48 @@ const DigestView = ({ layout, metric }) => { - - About - - - 关于本站 - - - 反馈与建议 - - - 加入我们 - - - 使用指南 - - - 友情链接 - - - - 增值服务 + 会员 + + 志愿者 + 成为会员 - 打赏支持(todo) + 打赏支持 + +
+ 商务 + + + 投放广告 + + + 赞助商 + + {/* + 友情链接 + */} + 开发者 - - 技术栈 - + + 开发计划 + 文档中心 + + 技术栈 + API @@ -141,26 +132,13 @@ const DigestView = ({ layout, metric }) => { - - 商务合作 - - - 赞助社区 - - - 商务合作 - - - + 网站状态 部署版本: {BUILD_VERSION} - - 开发计划 -
用户 @@ -171,12 +149,37 @@ const DigestView = ({ layout, metric }) => { 在线人数: -- + + 小黑屋: -- + + + + + + 支持 + + + 违规举报 + + + 反馈与建议 + + + 帮助中心 + + + 内容订阅 + + +
+ 联系 + + - - + ) } diff --git a/src/containers/unit/Footer/SocialList.js b/src/containers/unit/Footer/SocialList.js index 2f1634ff5..357b9097d 100755 --- a/src/containers/unit/Footer/SocialList.js +++ b/src/containers/unit/Footer/SocialList.js @@ -35,15 +35,6 @@ const SocialList = () => ( - - - - - ) diff --git a/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts b/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts index 3e265012a..ab2729870 100755 --- a/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts +++ b/src/containers/unit/Footer/styles/desktop_view/bottom_info.ts @@ -18,13 +18,13 @@ export const InnerWrapper = styled.div` color: ${theme('thread.articleDigest')}; align-items: center; width: 100%; - padding-left: 2px; + margin-right: 20px; ` export const Links = styled.div` ${css.flex('align-center')}; ` export const Site = styled.a` - color: ${theme('thread.articleDigest')}; + color: ${theme('footer.text')}; cursor: pointer; text-decoration: none; &:hover { @@ -32,6 +32,4 @@ export const Site = styled.a` color: ${theme('footer.hover')}; } ` -export const MoreText = styled(Site)` - text-decoration: underline; -` +export const MoreText = styled(Site)`` diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts deleted file mode 100644 index 09c13d679..000000000 --- a/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components' - -import { css } from '@/utils' - -export const Wrapper = styled.footer` - ${css.flexColumn('align-center')}; - width: 100%; -` -export const InnerWrapper = styled.div<{ isMobile: boolean }>` - ${css.flex('align-center')}; - justify-content: ${({ isMobile }) => - !isMobile ? 'space-between' : 'center'}; - width: 100%; - height: 68px; -` diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts index 4eb86faec..93826501c 100644 --- a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts +++ b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts @@ -7,8 +7,6 @@ import { ArrowLink } from '@/components/Buttons' // import { getPadding } from '../../metrics' -type TItem = { normal: boolean; offsetTop: string } - export const Wrapper = styled.footer<{ metric: string }>` ${css.flexColumn('align-center')}; width: 100%; @@ -22,15 +20,15 @@ export const InnerWrapper = styled.div` export const TopBarInfos = styled.div` ${css.flex('align-center')}; margin-bottom: 30px; - padding-bottom: 20px; + padding-bottom: 35px; border-bottom: 1px solid; border-bottom-color: #003949; ` export const MainInfos = styled.div` - ${css.flex('justify-start')}; - margin-bottom: 20px; + ${css.flex('justify-between')}; margin-top: 20px; margin-bottom: 30px; + margin-right: 12px; opacity: 0.9; &:hover { @@ -40,7 +38,7 @@ export const MainInfos = styled.div` ${css.media.tablet`display: none;`}; ` -export const Column = styled.div<{ margin: string }>` +export const Column = styled.div<{ margin?: string }>` ${css.flexColumn()}; min-width: 100px; margin-right: ${({ margin }) => margin || '50px'}; @@ -93,6 +91,7 @@ export const Body = styled.div` ${css.flexColumn('justify-start')}; color: ${theme('footer.text')}; ` +type TItem = { normal: boolean; offsetTop?: string } export const Item = styled.a` color: ${theme('footer.text')}; diff --git a/src/spec/theme.ts b/src/spec/theme.ts index bbd74aba9..dc28a76f7 100644 --- a/src/spec/theme.ts +++ b/src/spec/theme.ts @@ -22,4 +22,8 @@ export type TThemeMap = { warnBar: string infoBar: string } + footer?: { + text: string + hover: string + } } From 49131022c7b21987a512f96a6e7cd367799a52d3 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Thu, 25 Mar 2021 17:07:10 +0800 Subject: [PATCH 6/8] refactor(footer): re-org --- .../unit/Footer/DesktopView/BottomInfo.tsx | 15 ++--- .../unit/Footer/DesktopView/BriefView.js | 5 +- .../unit/Footer/DesktopView/BusinessNote.js | 19 ------ .../Footer/DesktopView/DigestView/index.tsx | 27 ++------ .../unit/Footer/DesktopView/GitSource.js | 22 ------- .../unit/Footer/DesktopView/TopInfo.tsx | 31 +++++++++ .../DesktopView/{index.js => index.tsx} | 27 ++++---- .../unit/Footer/{logic.js => logic.ts} | 18 +++--- src/containers/unit/Footer/store.js | 46 -------------- src/containers/unit/Footer/store.ts | 48 ++++++++++++++ .../Footer/styles/desktop_view/bottom_info.ts | 19 +++--- .../styles/desktop_view/business_note.ts | 32 ---------- .../styles/desktop_view/digest_view/index.ts | 47 +------------- .../styles/desktop_view/git_source_tag.ts | 14 ----- .../Footer/styles/desktop_view/top_info.ts | 63 +++++++++++++++++++ 15 files changed, 183 insertions(+), 250 deletions(-) delete mode 100755 src/containers/unit/Footer/DesktopView/BusinessNote.js delete mode 100755 src/containers/unit/Footer/DesktopView/GitSource.js create mode 100644 src/containers/unit/Footer/DesktopView/TopInfo.tsx rename src/containers/unit/Footer/DesktopView/{index.js => index.tsx} (77%) rename src/containers/unit/Footer/{logic.js => logic.ts} (70%) delete mode 100755 src/containers/unit/Footer/store.js create mode 100755 src/containers/unit/Footer/store.ts delete mode 100755 src/containers/unit/Footer/styles/desktop_view/business_note.ts delete mode 100755 src/containers/unit/Footer/styles/desktop_view/git_source_tag.ts create mode 100644 src/containers/unit/Footer/styles/desktop_view/top_info.ts diff --git a/src/containers/unit/Footer/DesktopView/BottomInfo.tsx b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx index 1548fe0ee..ede53870a 100755 --- a/src/containers/unit/Footer/DesktopView/BottomInfo.tsx +++ b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx @@ -6,20 +6,17 @@ import { ROUTE } from '@/constant' import { Wrapper, InnerWrapper, - Links, - Site, - MoreText, + BeianLink, + CompanyLink, } from '../styles/desktop_view/bottom_info' const BottomInfo: React.FC = () => ( - - 蜀ICP备17043722号-4 - - - Power By Groupher @ 2021 - + + Groupher @ 2021. 保留所有权利。 + + 蜀ICP备17043722号-4 ) diff --git a/src/containers/unit/Footer/DesktopView/BriefView.js b/src/containers/unit/Footer/DesktopView/BriefView.js index 924660277..ff43d86bc 100755 --- a/src/containers/unit/Footer/DesktopView/BriefView.js +++ b/src/containers/unit/Footer/DesktopView/BriefView.js @@ -16,7 +16,7 @@ import { GithubLogo, } from '../styles/desktop_view/brief_view' -import { toggleSponsorHelper, toggleBusBanner } from '../logic' +import { toggleSponsorHelper } from '../logic' const BriefView = ({ curView, metric }) => { return ( @@ -55,9 +55,6 @@ const BriefView = ({ curView, metric }) => { > API - | - 商务合作 - | 打赏 | diff --git a/src/containers/unit/Footer/DesktopView/BusinessNote.js b/src/containers/unit/Footer/DesktopView/BusinessNote.js deleted file mode 100755 index a99d2bd12..000000000 --- a/src/containers/unit/Footer/DesktopView/BusinessNote.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' - -import { ICON_CMD, EMAIL_BUSINESS } from '@/config' -import { - Wrapper, - MailIcon, - Title, - MailLink, -} from '../styles/desktop_view/business_note' - -const BusinessNote = () => ( - - - 希望 coderplanets 能与您一起成长 - {`${EMAIL_BUSINESS}`} - -) - -export default React.memo(BusinessNote) diff --git a/src/containers/unit/Footer/DesktopView/DigestView/index.tsx b/src/containers/unit/Footer/DesktopView/DigestView/index.tsx index eaffa9591..b2f73dbe9 100644 --- a/src/containers/unit/Footer/DesktopView/DigestView/index.tsx +++ b/src/containers/unit/Footer/DesktopView/DigestView/index.tsx @@ -5,19 +5,14 @@ import type { TThemeMap } from '@/spec' import { GITHUB, API_SERVER_ADDR, ISSUE_ADDR, BUILD_VERSION } from '@/config' import { ROUTE } from '@/constant' +import TopInfo from '../TopInfo' import BottomInfo from '../BottomInfo' import SocialList from '../../SocialList' import { Wrapper, InnerWrapper, - TopBarInfos, MainInfos, - MainColumn, - SiteInfo, - SiteTitle, - SiteDesc, - SiteLogo, Column, Title, Body, @@ -25,8 +20,6 @@ import { LinkItem, } from '../../styles/desktop_view/digest_view' -import { toggleBusBanner } from '../../logic' - type TProps = { metric: string } @@ -42,19 +35,7 @@ const DigestView: React.FC = ({ metric }) => { return ( - - - - - - coderplanets - 关于 - 创建社区 - 加入我们 - OpenSource - 特别感谢 - - + 网站地图 @@ -100,10 +81,10 @@ const DigestView: React.FC = ({ metric }) => {
商务 - + 投放广告 - + 赞助商 {/* diff --git a/src/containers/unit/Footer/DesktopView/GitSource.js b/src/containers/unit/Footer/DesktopView/GitSource.js deleted file mode 100755 index bf0b28b7a..000000000 --- a/src/containers/unit/Footer/DesktopView/GitSource.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' - -// import { ICON_CMD } from '@/config' -import { Wrapper, Title, Tag } from '../styles/desktop_view/git_source_tag' - -const GitSourceTag = ({ title, addr }) => ( - - {title} - -