feat(article-footer-log): basic UI & concept (#1324)

* chore: basic UI & concept

* chore: fix ci ts error

* chore: fix ci ts error

Author: mydearxym

src/containers/unit/ArticleFooter/Panel/ActivityInfo/index.tsx

@@ -1,8 +1,19 @@
 import { FC, memo } from 'react'
 
+import { Br } from '@/widgets/Common'
+
 import ActionItem from './ActionItem'
 
-import { Wrapper } from '../../styles/panel/activity_info'
+import {
+  Wrapper,
+  Item,
+  EditPenIcon,
+  UpdateTimeIcon,
+  CommentIcon,
+  Highlight,
+  Label,
+  Content,
+} from '../../styles/panel/activity_info'
 
 const tmpItems = [
   {
@@ -25,6 +36,32 @@ const tmpItems = [
 const ActivityInfo: FC = () => {
   return (
     <Wrapper>
+      <Item>
+        <EditPenIcon />
+        <Label>创建时间</Label>
+        <Content>
+          <Highlight>mydearxym</Highlight> 创建于 <Highlight>3 天前</Highlight>
+        </Content>
+      </Item>
+
+      <Item>
+        <UpdateTimeIcon />
+        <Label>更新时间</Label>
+        <Content>
+          <Highlight>longge</Highlight> 更新于 <Highlight>3 天前</Highlight>
+        </Content>
+      </Item>
+
+      <Item>
+        <CommentIcon />
+        <Label>最后回复</Label>
+        <Content>
+          <Highlight>longge2</Highlight> 评论于 <Highlight>10 天前</Highlight>
+        </Content>
+      </Item>
+
+      <Br top={15} />
+
       {tmpItems.map((item) => (
         <ActionItem key={item.id} item={item} />
       ))}

src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx

@@ -3,13 +3,47 @@ import styled from 'styled-components'
 import type { TActive } from '@/spec'
 import css, { theme } from '@/utils/css'
 
+import EditPenSVG from '@/icons/Calendar'
+import CommentSVG from '@/icons/Comment'
+import UpdateTimeSVG from '@/icons/UpdateTime'
+
 export const Wrapper = styled.div`
-  ${css.flex('align-center')};
+  ${css.flexColumn()};
 `
 export const Item = styled.div`
   ${css.flex('align-center')};
-  cursor: pointer;
+  color: ${theme('lightText')};
+  font-size: 12px;
+  margin-bottom: 12px;
+  margin-left: 3px;
+`
+export const Label = styled.div`
+  margin-right: 25px;
+`
+export const EditPenIcon = styled(EditPenSVG)`
+  ${css.size(12)};
+  fill: ${theme('lightText')};
+  margin-right: 9px;
+`
+export const UpdateTimeIcon = styled(UpdateTimeSVG)`
+  ${css.size(13)};
+  fill: ${theme('lightText')};
+  margin-right: 9px;
+  margin-left: -1px;
 `
+
+export const CommentIcon = styled(CommentSVG)`
+  ${css.size(10)};
+  fill: ${theme('lightText')};
+  margin-right: 10px;
+  opacity: 0.8;
+`
+
+export const Content = styled.div``
+export const Highlight = styled.span`
+  color: ${theme('thread.articleTitle')};
+`
+
 export const ReferNum = styled.span`
   font-size: 13px;
   font-weight: bold;

src/widgets/Icons/Calendar.tsx

@@ -0,0 +1,18 @@
+import { memo, SVGProps } from 'react'
+
+const SVG = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="M860.48 896c19.488 0 35.488-14.4 35.488-32l-27.84-319.04-29.088 327.36c-.64 8.32-2.56 16.32-5.12 23.68h26.56zm-85.12-29.12 56.608-640c0-20.48-14.368-34.88-32-34.88h-160v29.76c17.632 0 32 15.36 32 32.96 0 17.92-14.368 33.28-32 33.28-35.168 0-64-29.76-64-66.24V192h-192v29.76c17.632 0 32 15.36 32 32.96 0 17.92-14.368 33.28-32 33.28-35.168 0-64-29.76-64-66.24V192H248.64a32 32 0 0 0-32 29.12l-56.64 640c0 20.48 14.4 34.88 32 34.88h551.36c16.608 0 30.4-12.48 32-29.12zM959.68 856c.288 2.56.288 5.12.288 8 0 52.8-44.768 96-99.488 96H192a96.256 96.256 0 0 1-95.68-104.64l56.64-639.68A95.84 95.84 0 0 1 248.64 128h71.328c1.28-35.52 29.44-64 64-64s62.72 28.48 64 64h128c1.28-35.52 29.44-64 64-64s62.72 28.48 64 64h96c.992 0 1.632 0 2.56.32.672-.32.992-.32 1.6-.32 52.192 0 94.752 37.76 99.232 88l56.32 640zM609.984 400a32 32 0 1 1 0 64H348.128a32 32 0 0 1 0-64h261.856zm-60.16 160a32 32 0 1 1 0 64H351.968a32 32 0 0 1 0-64h197.856z" />
+    </svg>
+  )
+}
+
+export default memo(SVG)

src/widgets/Icons/UpdateTime.tsx

@@ -0,0 +1,19 @@
+import { memo, SVGProps } from 'react'
+
+const SVG = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="M492.308 315.077c-23.631 0-39.385 15.754-39.385 39.385v177.23c0 11.816 7.877 23.631 15.754 31.508l137.846 98.462c15.754 11.815 43.323 7.876 55.139-7.877 11.815-15.754 7.876-43.323-7.877-55.139L531.692 512V354.462c0-23.631-15.754-39.385-39.384-39.385z" />
+      <path d="M894.03 409.6C838.893 200.862 622.278 74.83 413.539 129.97c-78.769 23.63-141.784 63.015-192.984 118.153l-3.939-55.138c-3.938-19.693-19.692-35.447-43.323-35.447-19.692 3.939-39.384 19.693-35.446 43.324l11.816 126.03c3.938 31.508 27.569 55.139 59.076 55.139H334.77c23.631 0 39.385-15.754 39.385-39.385s-15.754-39.384-39.385-39.384h-59.077c39.385-43.324 90.585-78.77 153.6-94.524 169.354-43.323 342.646 55.139 385.97 224.493 43.323 169.354-55.139 342.646-224.493 385.969-169.354 43.323-342.646-55.138-385.969-224.492-3.938-19.693-27.57-35.446-47.262-27.57-19.692 3.939-35.446 27.57-27.569 47.262 55.139 208.738 271.754 334.77 480.493 279.63C823.138 834.955 949.169 618.339 894.03 409.6z" />
+    </svg>
+  )
+}
+
+export default memo(SVG)

src/widgets/Icons/Upvote.tsx

@@ -1,6 +1,6 @@
 import { memo, SVGProps } from 'react'
 
-const Upvote = (props: SVGProps<SVGSVGElement>) => {
+const SVG = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       className="icon"
@@ -15,4 +15,4 @@ const Upvote = (props: SVGProps<SVGSVGElement>) => {
   )
 }
 
-export default memo(Upvote)
+export default memo(SVG)

src/widgets/Input/Textarea.tsx

@@ -35,6 +35,7 @@ const Textarea: FC<TProps> = ({
       onChange={handleOnChange}
       minRows={1}
       spellCheck="false"
+      // @ts-ignore
       {...validProps}
     />
   )

src/widgets/Input/index.tsx

@@ -79,6 +79,7 @@ const Input: FC<TProps> = ({
         hasPrefix={!nilOrEmpty(prefixIcon)}
         hasSuffix={!nilOrEmpty(suffixIcon)}
         autoFocus={autoFocus}
+        // @ts-ignore
         {...validProps}
       />
       <SuffixWrapper show={!nilOrEmpty(suffixIcon)}>

utils/themes/skins/github.ts

@@ -54,6 +54,7 @@ const github = {
   bodyBg: contentBg,
   selectionBg: '#FFFEDE',
   textBadge: '#f6f6f6',
+  lightText: '#949494',
 
   gtdBadge: {
     feat: '#3871e0',