refactor(article): article-footer with copyright setting

src/components/Buttons/IconButton.tsx

@@ -30,7 +30,7 @@ const IconButton: FC<TProps> = ({
   active = false,
   dimWhenIdle = false,
   hint = null,
-  hintDelay = 1000,
+  hintDelay = 500,
   hintPlacement = 'top',
   onClick = console.log,
 }) => {

src/components/Buttons/styles/arrow_link.ts

@@ -14,17 +14,17 @@ export const Wrapper = styled.a`
 `
 type TText = { hoverColor: string; size: string }
 export const Text = styled.div<TText>`
-  color: ${({ color }) => color || theme('thread.articleDigest')};
+  color: ${({ color }) => color || '#327ca1'};
   font-size: ${({ size }) => getTextSize(size)};
 
   ${Wrapper}:hover & {
-    color: ${({ hoverColor }) => hoverColor || theme('thread.articleTitle')};
+    color: ${({ hoverColor }) => hoverColor || '#327ca1'};
     visibility: visible;
   }
 `
 type TIcon = { color: string; size: string }
 const Icon = styled(Img)<TIcon>`
-  fill: ${({ color }) => color || theme('thread.articleDigest')};
+  fill: ${({ color }) => color || '#327ca1'};
   width: ${({ size }) => getIconSize(size)};
   height: ${({ size }) => getIconSize(size)};
   display: block;
@@ -37,7 +37,7 @@ export const RightIcon = styled(Icon)<{ hoverColor: string }>`
   visibility: hidden;
 
   ${Wrapper}:hover & {
-    fill: ${({ hoverColor }) => hoverColor || theme('thread.articleTitle')};
+    fill: ${({ hoverColor }) => hoverColor || '#327ca1'};
     margin-left: 10px;
     visibility: visible;
   }

src/components/Copyright/Label.tsx

@@ -0,0 +1,41 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+import { Wrapper, Icon, Text } from './styles/label'
+
+type TProps = {
+  type?: 'cc' | 'approve' | 'forbid'
+}
+
+const Label: FC<TProps> = ({ type }) => {
+  switch (type) {
+    case 'approve': {
+      return (
+        <Wrapper>
+          <Icon src={`${ICON}/article/copyright-approve.svg`} />
+          <Text>转载需授权</Text>
+        </Wrapper>
+      )
+    }
+
+    case 'forbid': {
+      return (
+        <Wrapper>
+          <Icon src={`${ICON}/article/copyright-forbid.svg`} />
+          <Text>禁止转载</Text>
+        </Wrapper>
+      )
+    }
+
+    default: {
+      return (
+        <Wrapper>
+          <Icon src={`${ICON}/article/cc-raw.svg`} />
+          <Text>知识共享 4.0</Text>
+        </Wrapper>
+      )
+    }
+  }
+}
+
+export default memo(Label)

src/components/Copyright/ReadOnlyPanel.tsx

@@ -0,0 +1,88 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+import { ArrowLink } from '@/components/Buttons'
+
+import {
+  Wrapper,
+  Header,
+  Icon,
+  Title,
+  Desc,
+  Items,
+  DescItem,
+  Footer,
+} from './styles/readonly_panel'
+
+type TProps = {
+  type?: 'cc' | 'approve' | 'forbid'
+}
+
+const ReadOnlyPanel: FC<TProps> = ({ type }) => {
+  switch (type) {
+    case 'approve': {
+      return (
+        <Wrapper>
+          <Header>
+            <Icon src={`${ICON}/article/copyright-approve.svg`} />
+            <Title>转载需授权</Title>
+          </Header>
+          <Desc>
+            根据作者设置，转载需获取本人授权。相关联系方式可参考作者主页。
+          </Desc>
+        </Wrapper>
+      )
+    }
+
+    case 'forbid': {
+      return (
+        <Wrapper>
+          <Header>
+            <Icon src={`${ICON}/article/copyright-forbid.svg`} />
+            <Title>禁止转载</Title>
+          </Header>
+          <Desc>
+            根据作者设置，本文严禁任何方式的转载，如有疑问，请尝试联系作者。
+          </Desc>
+        </Wrapper>
+      )
+    }
+
+    default: {
+      return (
+        <Wrapper>
+          <Header>
+            <Icon src={`${ICON}/article/cc.svg`} />
+            <Title>知识共享 4.0</Title>
+          </Header>
+
+          <Desc>
+            本作品采用知识共享「署名-非商业性使用-禁止演绎 4.0
+            国际」许可证授权。
+            <Items>
+              <DescItem path="article/cc-by.svg" size="large" highlight>
+                署名
+              </DescItem>
+              <DescItem path="article/cc-nc.svg" size="large" highlight>
+                非商业性使用
+              </DescItem>
+              <DescItem path="article/cc-nd.svg" size="large" highlight>
+                禁止演绎
+              </DescItem>
+            </Items>
+          </Desc>
+          <Footer>
+            <ArrowLink
+              size="tiny"
+              href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh"
+            >
+              查看完整版本
+            </ArrowLink>
+          </Footer>
+        </Wrapper>
+      )
+    }
+  }
+}
+
+export default memo(ReadOnlyPanel)

src/components/Copyright/index.tsx

@@ -0,0 +1,76 @@
+/*
+ *
+ * Copyright
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import type { TCopyright } from '@/spec'
+import Tooltip from '@/components/Tooltip'
+import { buildLog } from '@/utils'
+
+import Label from './Label'
+import SettingMenu from '@/components/SettingMenu'
+import ReadOnlyPanel from './ReadOnlyPanel'
+import { Wrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Copyright:index')
+
+const options = [
+  {
+    title: '知识共享 4.0',
+    desc: '署名-非商业性使用-禁止演绎',
+    key: 'cc',
+  },
+  {
+    title: '转载需授权',
+    desc: '转载需得到我的明确授权。',
+    key: 'approve',
+  },
+  {
+    title: '禁止转载',
+    desc: '禁止一切形式的转载，有疑问联系我。',
+    key: 'forbid',
+  },
+]
+
+type TProps = {
+  testid?: string
+  type?: TCopyright
+  mode?: 'readonly' | 'editable'
+  onChange?: (type: string) => void
+}
+
+const Copyright: FC<TProps> = ({
+  testid = 'copyright',
+  type = 'cc',
+  mode = 'readonly',
+  onChange = log,
+}) => {
+  return (
+    <Wrapper testid={testid}>
+      <Tooltip
+        content={
+          mode === 'readonly' ? (
+            <ReadOnlyPanel type={type} />
+          ) : (
+            <SettingMenu
+              options={options}
+              activeKey={type}
+              onChange={onChange}
+            />
+          )
+        }
+        placement="top"
+        trigger="click"
+        noPadding
+      >
+        <Label type={type} />
+      </Tooltip>
+    </Wrapper>
+  )
+}
+
+export default memo(Copyright)

src/components/Copyright/styles/index.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>``
+
+export const Label = styled.div`
+  ${css.flex('align-center')};
+`
+export const Icon = styled(Img)`
+  ${css.size(14)};
+  fill: ${theme('thread.articleDigest')};
+`
+export const Text = styled.div`
+  font-size: 12px;
+  color: ${theme('thread.articleDigest')};
+  margin-right: 5px;
+`

src/components/Copyright/styles/label.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center')};
+  cursor: pointer;
+`
+export const Icon = styled(Img)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(13)};
+
+  ${Wrapper}:hover & {
+    fill: ${theme('thread.articleTitle')};
+  }
+
+  transition: fill 0.2s;
+`
+export const Text = styled.div`
+  font-size: 13px;
+  color: ${theme('thread.articleDigest')};
+  margin-left: 6px;
+
+  ${Wrapper}:hover & {
+    color: ${theme('thread.articleTitle')};
+  }
+  transition: color 0.2s;
+`

src/components/Copyright/styles/readonly_panel.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+import IconText from '@/components/IconText'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flexColumn()};
+  width: 240px;
+  padding-left: 5px;
+`
+export const Header = styled.div`
+  ${css.flex('align-center')};
+`
+export const Icon = styled(Img)`
+  ${css.size(18)};
+  fill: ${theme('thread.articleTitle')};
+`
+export const Title = styled.div`
+  font-size: 16px;
+  color: ${theme('thread.articleTitle')};
+  margin-left: 8px;
+`
+export const Desc = styled.div`
+  font-size: 13px;
+  color: ${theme('thread.articleDigest')};
+  margin-top: 8px;
+  margin-bottom: 8px;
+`
+export const Items = styled.div`
+  margin-top: 10px;
+  margin-bottom: 6px;
+`
+export const DescItem = styled(IconText)`
+  margin-bottom: 3px;
+`
+export const Footer = styled.div`
+  ${css.flex('align-center')};
+`