From 160d1e994b8996f3a30e93f704e572f5cf9d726a Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 10:37:17 +0800
Subject: [PATCH 01/21] chore(abuse-report): basic setup && fix generator typo

---
 src/containers/tool/AbuseReport/index.tsx     | 40 +++++++++++++++++++
 src/containers/tool/AbuseReport/logic.ts      | 28 +++++++++++++
 src/containers/tool/AbuseReport/schema.ts     | 23 +++++++++++
 src/containers/tool/AbuseReport/store.ts      | 30 ++++++++++++++
 .../tool/AbuseReport/styles/index.ts          | 11 +++++
 .../tool/AbuseReport/tests/index.test.js      | 10 +++++
 .../tool/AbuseReport/tests/store.test.js      | 10 +++++
 src/stores/RootStore/index.ts                 |  2 +
 src/stores/index.ts                           |  1 +
 .../generators/container/hooks.tsx.hbs        |  4 +-
 10 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100755 src/containers/tool/AbuseReport/index.tsx
 create mode 100755 src/containers/tool/AbuseReport/logic.ts
 create mode 100755 src/containers/tool/AbuseReport/schema.ts
 create mode 100755 src/containers/tool/AbuseReport/store.ts
 create mode 100755 src/containers/tool/AbuseReport/styles/index.ts
 create mode 100755 src/containers/tool/AbuseReport/tests/index.test.js
 create mode 100755 src/containers/tool/AbuseReport/tests/store.test.js

diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
new file mode 100755
index 000000000..41508474c
--- /dev/null
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -0,0 +1,40 @@
+//
+
+/*
+ *
+ * AbuseReport
+ *
+ */
+
+import React from 'react'
+
+import { pluggedIn, buildLog } from '@/utils'
+
+import type { TStore } from './store'
+
+import { Wrapper } from './styles'
+import { useInit } from './logic'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:AbuseReport')
+
+type TProps = {
+  abuseReport?: TStore
+  testid: string
+}
+
+const AbuseReportContainer: React.FC<TProps> = ({
+  abuseReport: store,
+  testid,
+}) => {
+  useInit(store)
+
+  return (
+    <Wrapper testid={testid}>
+      <h2>AbuseReport hooks container!</h2>
+      <div>impress me!</div>
+    </Wrapper>
+  )
+}
+
+export default pluggedIn(AbuseReportContainer)
diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
new file mode 100755
index 000000000..05377d497
--- /dev/null
+++ b/src/containers/tool/AbuseReport/logic.ts
@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+// import { } from 'ramda'
+
+import { buildLog } from '@/utils'
+
+// import S from './service'
+import type { TStore } from './store'
+
+let store: TStore | undefined
+
+/* eslint-disable-next-line */
+const log = buildLog('L:AbuseReport')
+
+export const someMethod = (): void => {
+  //
+}
+
+// ###############################
+// init & uninit handlers
+// ###############################
+
+export const useInit = (_store: TStore): void => {
+  useEffect(() => {
+    store = _store
+    log('useInit: ', store)
+    // return () => store.reset()
+  }, [_store])
+}
diff --git a/src/containers/tool/AbuseReport/schema.ts b/src/containers/tool/AbuseReport/schema.ts
new file mode 100755
index 000000000..0035db982
--- /dev/null
+++ b/src/containers/tool/AbuseReport/schema.ts
@@ -0,0 +1,23 @@
+import gql from 'graphql-tag'
+
+const simpleMutation = gql`
+  mutation($id: ID!) {
+    post(id: $id) {
+      id
+    }
+  }
+`
+const simpleQuery = gql`
+  query($filter: filter!) {
+    post(id: $id) {
+      id
+    }
+  }
+`
+
+const schema = {
+  simpleMutation,
+  simpleQuery,
+}
+
+export default schema
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
new file mode 100755
index 000000000..81fef82fc
--- /dev/null
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -0,0 +1,30 @@
+/*
+ * AbuseReport store
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+// import {} from 'ramda'
+
+import type { TCommunity, TRootStore } from '@/spec'
+import { markStates, buildLog, stripMobx } from '@/utils'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:AbuseReport')
+
+const AbuseReport = T.model('AbuseReport', {})
+  .views((self) => ({
+    get curCommunity(): TCommunity {
+      const root = getParent(self) as TRootStore
+
+      return stripMobx(root.viewing.community)
+    },
+  }))
+  .actions((self) => ({
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof AbuseReport>
+
+export default AbuseReport
diff --git a/src/containers/tool/AbuseReport/styles/index.ts b/src/containers/tool/AbuseReport/styles/index.ts
new file mode 100755
index 000000000..1c0b72a65
--- /dev/null
+++ b/src/containers/tool/AbuseReport/styles/index.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+// import { theme } from '@/utils'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  //
+`
+export const Title = styled.div``
diff --git a/src/containers/tool/AbuseReport/tests/index.test.js b/src/containers/tool/AbuseReport/tests/index.test.js
new file mode 100755
index 000000000..fe0894312
--- /dev/null
+++ b/src/containers/tool/AbuseReport/tests/index.test.js
@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import AbuseReport from '../index'
+
+describe('TODO <AbuseReport />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})
diff --git a/src/containers/tool/AbuseReport/tests/store.test.js b/src/containers/tool/AbuseReport/tests/store.test.js
new file mode 100755
index 000000000..f2764f3e3
--- /dev/null
+++ b/src/containers/tool/AbuseReport/tests/store.test.js
@@ -0,0 +1,10 @@
+/*
+ * AbuseReport store test
+ *
+ */
+
+// import AbuseReport from '../index'
+
+it('TODO: store test AbuseReport', () => {
+  expect(1 + 1).toBe(2)
+})
diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts
index 2c00e0c4c..696f76c69 100755
--- a/src/stores/RootStore/index.ts
+++ b/src/stores/RootStore/index.ts
@@ -99,6 +99,7 @@ import {
   CoolGuideContentStore,
 
   // GEN: IMPORT SUBSTORE
+  AbuseReportStore,
   HelpCenterContentStore,
   CommunityJoinBadgeStore,
   ArticleEditorStore,
@@ -219,6 +220,7 @@ const rootStore = T.model({
   coolGuideContent: T.optional(CoolGuideContentStore, {}),
 
   // GEN: PLUG SUBSTORE TO ROOTSTORE
+  abuseReport: T.optional(AbuseReportStore, {}),
   helpCenterContent: T.optional(HelpCenterContentStore, {}),
   communityJoinBadge: T.optional(CommunityJoinBadgeStore, {}),
   articleEditor: T.optional(ArticleEditorStore, {}),
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 6dc12199f..a894505ed 100755
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -106,6 +106,7 @@ export { default as CommunityEditorStore } from '@/containers/editor/CommunityEd
 export { default as WorksEditorStore } from '@/containers/editor/WorksEditor/store'
 
 // GEN: EXPORT CONTAINERS STORE HERE
+export { default as AbuseReportStore } from '@/containers/tool/AbuseReport/store'
 export { default as HelpCenterContentStore } from '@/containers/content/HelpCenterContent/store'
 export { default as CommunityJoinBadgeStore } from '@/containers/tool/CommunityJoinBadge/store'
 export { default as ArticleEditorStore } from '@/containers/editor/ArticleEditor/store'
diff --git a/utils/scripts/generators/container/hooks.tsx.hbs b/utils/scripts/generators/container/hooks.tsx.hbs
index 844ab9d61..1382788d6 100755
--- a/utils/scripts/generators/container/hooks.tsx.hbs
+++ b/utils/scripts/generators/container/hooks.tsx.hbs
@@ -13,7 +13,7 @@ import { pluggedIn, buildLog } from '@/utils'
 import { useTrans } from '@/hooks'
 {{/if}}
 
-import type { IStore } from './store'
+import type { TStore } from './store'
 
 import { Wrapper } from './styles'
 import { useInit } from './logic'
@@ -22,7 +22,7 @@ import { useInit } from './logic'
 const log = buildLog('C:{{ properCase name }}')
 
 type TProps = {
-  {{ camelCase name }}?: IStore
+  {{ camelCase name }}?: TStore
   testid: string
 }
 

From bc7db91d45d3bc190f8a96296a43021a2e145ea1 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 11:18:49 +0800
Subject: [PATCH 02/21] chore(abuse-report): wip

---
 src/containers/layout/GlobalLayout/index.tsx  |  3 ++
 .../GlobalLayout/{logic.js => logic.ts}       | 20 ++++++++-----
 .../tool/AbuseReport/ArticleReport/index.tsx  | 14 ++++++++++
 src/containers/tool/AbuseReport/Header.tsx    | 16 +++++++++++
 src/containers/tool/AbuseReport/index.tsx     | 14 ++++++----
 .../styles/article_report/index.tsx           |  8 ++++++
 .../tool/AbuseReport/styles/header.ts         | 28 +++++++++++++++++++
 .../tool/AbuseReport/styles/index.ts          |  5 ++--
 8 files changed, 94 insertions(+), 14 deletions(-)
 rename src/containers/layout/GlobalLayout/{logic.js => logic.ts} (84%)
 create mode 100644 src/containers/tool/AbuseReport/ArticleReport/index.tsx
 create mode 100644 src/containers/tool/AbuseReport/Header.tsx
 create mode 100644 src/containers/tool/AbuseReport/styles/article_report/index.tsx
 create mode 100644 src/containers/tool/AbuseReport/styles/header.ts

diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index ce6f638ae..d17c492b2 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -17,6 +17,8 @@ import Header from '@/containers/unit/Header'
 import Sidebar from '@/containers/unit/Sidebar'
 import ModeLine from '@/containers/unit/ModeLine'
 import Drawer from '@/containers/tool/Drawer'
+import AbuseReport from '@/containers/tool/AbuseReport'
+
 import CustomScroller from '@/components/CustomScroller'
 
 import type { TStore } from './store'
@@ -91,6 +93,7 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
+                <AbuseReport />
                 {!noSidebar && <Sidebar />}
                 <Drawer />
                 <Doraemon />
diff --git a/src/containers/layout/GlobalLayout/logic.js b/src/containers/layout/GlobalLayout/logic.ts
similarity index 84%
rename from src/containers/layout/GlobalLayout/logic.js
rename to src/containers/layout/GlobalLayout/logic.ts
index f1d0c65b5..08369f7e2 100755
--- a/src/containers/layout/GlobalLayout/logic.js
+++ b/src/containers/layout/GlobalLayout/logic.ts
@@ -1,22 +1,25 @@
 import React, { useEffect } from 'react'
 
+import type { TScrollDirection } from '@/spec'
 import { buildLog } from '@/utils'
+import type { TStore } from './store'
 
 /* eslint-disable-next-line */
 const log = buildLog('L:GlobalLayout')
 
-let store = null
+let store: TStore | undefined
 
-export const openDoraemon = () => store.openDoraemon()
+export const openDoraemon = (): void => store.openDoraemon()
 
 // custromScroll's scroll direction change
-export const bodyScrollDirectionOnChange = (bodyScrollDirection) =>
-  store.mark({ bodyScrollDirection })
+export const bodyScrollDirectionOnChange = (
+  bodyScrollDirection: TScrollDirection,
+): void => store.mark({ bodyScrollDirection })
 /**
  * log ascii Buddha just for fun
  * 控制台打印佛祖保佑
  */
-export const logBuddha = () => {
+export const logBuddha = (): void => {
   if (process.env.NODE_ENV === 'production') {
     /* eslint-disable */
     console.log(
@@ -50,7 +53,10 @@ export const logBuddha = () => {
 
 // cloning children with new props
 // see detail: https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children
-export const childrenWithProps = (children, props) => {
+export const childrenWithProps = (
+  children: React.ReactNode,
+  props: Record<string, unknown>,
+): React.ReactNode => {
   return React.Children.map(children, (child) => {
     // checking isValidElement is the safe way and avoids a typescript error too
     if (React.isValidElement(child)) {
@@ -63,7 +69,7 @@ export const childrenWithProps = (children, props) => {
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store, extra) => {
+export const useInit = (_store: TStore, extra): void => {
   useEffect(() => {
     store = _store
 
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
new file mode 100644
index 000000000..c4bc3b49c
--- /dev/null
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { Wrapper } from '../styles/article_report'
+
+const ArticleReport: React.FC = () => {
+  return (
+    <Wrapper>
+      <div>header</div>
+      <div>content</div>
+    </Wrapper>
+  )
+}
+
+export default ArticleReport
diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
new file mode 100644
index 000000000..74cf708b1
--- /dev/null
+++ b/src/containers/tool/AbuseReport/Header.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { ICON } from '@/config'
+import { Wrapper, ReportIcon, Text, ContentTitle } from './styles/header'
+
+const Header = () => {
+  return (
+    <Wrapper>
+      <ReportIcon src={`${ICON}/article/report.svg`} />
+      <Text>举报内容</Text>
+      <ContentTitle>这是一首简单的小情歌</ContentTitle>
+    </Wrapper>
+  )
+}
+
+export default Header
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 41508474c..3679b8e33 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -10,8 +10,11 @@ import React from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 
-import type { TStore } from './store'
+import Modal from '@/components/Modal'
+
+import Header from './Header'
 
+import type { TStore } from './store'
 import { Wrapper } from './styles'
 import { useInit } from './logic'
 
@@ -30,10 +33,11 @@ const AbuseReportContainer: React.FC<TProps> = ({
   useInit(store)
 
   return (
-    <Wrapper testid={testid}>
-      <h2>AbuseReport hooks container!</h2>
-      <div>impress me!</div>
-    </Wrapper>
+    <Modal width="500px" show showCloseBtn onClose={() => console.log('close')}>
+      <Wrapper testid={testid}>
+        <Header />
+      </Wrapper>
+    </Modal>
   )
 }
 
diff --git a/src/containers/tool/AbuseReport/styles/article_report/index.tsx b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
new file mode 100644
index 000000000..a7518f034
--- /dev/null
+++ b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flexColumn()};
+`
+export const Title = styled.div``
diff --git a/src/containers/tool/AbuseReport/styles/header.ts b/src/containers/tool/AbuseReport/styles/header.ts
new file mode 100644
index 000000000..9b9db7d9e
--- /dev/null
+++ b/src/containers/tool/AbuseReport/styles/header.ts
@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center')};
+  color: ${theme('thread.articleDigest')};
+`
+export const ReportIcon = styled(Img)`
+  ${css.size(16)};
+  fill: ${theme('baseColor.red')};
+`
+export const Text = styled.div`
+  color: ${theme('thread.articleTitle')};
+  margin-left: 5px;
+`
+export const ContentTitle = styled.div`
+  color: ${theme('thread.articleDigest')};
+  margin-left: 3px;
+  margin-right: 3px;
+  &:before {
+    content: '(';
+  }
+  &:after {
+    content: ')';
+  }
+`
diff --git a/src/containers/tool/AbuseReport/styles/index.ts b/src/containers/tool/AbuseReport/styles/index.ts
index 1c0b72a65..758f118c3 100755
--- a/src/containers/tool/AbuseReport/styles/index.ts
+++ b/src/containers/tool/AbuseReport/styles/index.ts
@@ -1,11 +1,12 @@
 import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
-// import { theme } from '@/utils'
+import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  //
+  padding: 15px 30px;
+  color: ${theme('thread.articleDigest')};
 `
 export const Title = styled.div``

From ba1b4ea1c5b64ae8370c53a94ef20ba1f29ea8f1 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 12:37:45 +0800
Subject: [PATCH 03/21] chore(abuse-report): wip

---
 public/icons/static/article/report-solid.svg  |  1 +
 src/components/Checker/index.tsx              |  8 ++--
 src/components/Checker/styles/index.ts        |  5 +-
 .../tool/AbuseReport/ArticleReport/index.tsx  | 47 +++++++++++++++++--
 src/containers/tool/AbuseReport/Header.tsx    |  2 +-
 src/containers/tool/AbuseReport/index.tsx     |  2 +
 .../styles/article_report/index.tsx           | 34 +++++++++++++-
 .../tool/AbuseReport/styles/header.ts         |  5 +-
 .../tool/AbuseReport/styles/index.ts          |  2 +-
 9 files changed, 92 insertions(+), 14 deletions(-)
 create mode 100644 public/icons/static/article/report-solid.svg

diff --git a/public/icons/static/article/report-solid.svg b/public/icons/static/article/report-solid.svg
new file mode 100644
index 000000000..d4b35a49a
--- /dev/null
+++ b/public/icons/static/article/report-solid.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1619320834796" class="icon" viewBox="0 0 1125 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4643" xmlns:xlink="http://www.w3.org/1999/xlink" width="219.7265625" height="200"><defs><style type="text/css"></style></defs><path d="M938.138307 1023.996742H186.481911a184.271947 184.271947 0 0 1-161.232135-93.090148 184.225402 184.225402 0 0 1 0-186.180294l375.804925-651.631033a184.271947 184.271947 0 0 1 161.278681-93.090147 184.318492 184.318492 0 0 1 161.27868 93.090147l375.804925 651.631033a184.318492 184.318492 0 0 1 0 186.180294 184.318492 184.318492 0 0 1-161.27868 93.090148z m-375.804925-277.548275a75.5892 75.5892 0 0 0-77.776819 74.937569 75.5892 75.5892 0 0 0 77.776819 74.937569 75.5892 75.5892 0 0 0 77.776818-74.937569 75.5892 75.5892 0 0 0-77.776818-74.937569zM490.747058 195.68061l11.450088 462.006402h120.272471L633.96625 195.68061h-143.172647z" p-id="4644"></path></svg>
\ No newline at end of file
diff --git a/src/components/Checker/index.tsx b/src/components/Checker/index.tsx
index 1554b79c6..b3c5350a6 100755
--- a/src/components/Checker/index.tsx
+++ b/src/components/Checker/index.tsx
@@ -17,11 +17,11 @@ import { Wrapper, IconWrapper, Icon, ChildWrapper } from './styles'
 const log = buildLog('c:Checker:index')
 
 type TProps = {
-  children: React.ReactNode
+  children?: React.ReactNode | null
   checked?: boolean
-  hiddenMode: boolean
+  hiddenMode?: boolean
   size?: TSIZE_SM
-  onChange: (checked: boolean) => void
+  onChange?: (checked: boolean) => void
 }
 
 const Checker: React.FC<TProps> = ({
@@ -29,7 +29,7 @@ const Checker: React.FC<TProps> = ({
   onChange = log,
   hiddenMode = false,
   size = SIZE.MEDIUM,
-  children,
+  children = null,
 }) => {
   const show = checked || !hiddenMode
 
diff --git a/src/components/Checker/styles/index.ts b/src/components/Checker/styles/index.ts
index 95d1f21be..46b3719f5 100755
--- a/src/components/Checker/styles/index.ts
+++ b/src/components/Checker/styles/index.ts
@@ -14,13 +14,12 @@ export const Wrapper = styled.div<TActive>`
 `
 export const IconWrapper = styled.div<TItem>`
   position: relative;
-  background: ${({ checked }) => (checked ? '#114759' : '#00262F')};
+  background: ${({ checked }) => (checked ? '#0d3d4e' : '#012f3a')};
   width: ${({ size }) => getIconSize(size)};
   height: ${({ size }) => getIconSize(size)};
   ${css.flex('align-both')};
   border: 1px solid;
-  border-color: ${({ checked }) => (checked ? 'transparent' : '#114759')};
-
+  border-color: ${({ checked }) => (checked ? '#246b8c' : '#1c5975')};
   border-radius: ${({ size }) => getBorderRadius(size)};
 
   transition: all 0.2s;
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
index c4bc3b49c..ca8f44cfd 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -1,12 +1,53 @@
 import React from 'react'
 
-import { Wrapper } from '../styles/article_report'
+import { ICON } from '@/config'
+import Checker from '@/components/Checker'
+
+import {
+  Wrapper,
+  Option,
+  Title,
+  QuestionIcon,
+  Note,
+} from '../styles/article_report'
 
 const ArticleReport: React.FC = () => {
   return (
     <Wrapper>
-      <div>header</div>
-      <div>content</div>
+      <Option>
+        <Checker checked />
+        <Title>重复内容</Title>
+        <QuestionIcon src={`${ICON}/shape/question.svg`} />
+      </Option>
+      <Option>
+        <Checker />
+        <Title>标题党</Title>
+        <QuestionIcon src={`${ICON}/shape/question.svg`} />
+      </Option>
+      <Option>
+        <Checker />
+        <Title>硬广，软广</Title>
+        <QuestionIcon src={`${ICON}/shape/question.svg`} />
+      </Option>
+      <Option>
+        <Checker />
+        <Title>坏问题</Title>
+        <QuestionIcon src={`${ICON}/shape/question.svg`} />
+      </Option>
+      <Option>
+        <Checker />
+        <Title>违规信息</Title>
+        <QuestionIcon src={`${ICON}/shape/question.svg`} />
+      </Option>
+      <Option>
+        <Checker />
+        <Title>其他</Title>
+        <QuestionIcon src={`${ICON}/shape/question.svg`} />
+      </Option>
+
+      <Note>
+        举报成功后社区志愿者会在第一时间处理，处理结果会公示在这里。如果你对社区治理有更好的想法或建议，请联系我们。
+      </Note>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
index 74cf708b1..9aaf01717 100644
--- a/src/containers/tool/AbuseReport/Header.tsx
+++ b/src/containers/tool/AbuseReport/Header.tsx
@@ -6,7 +6,7 @@ import { Wrapper, ReportIcon, Text, ContentTitle } from './styles/header'
 const Header = () => {
   return (
     <Wrapper>
-      <ReportIcon src={`${ICON}/article/report.svg`} />
+      <ReportIcon src={`${ICON}/article/report-solid.svg`} />
       <Text>举报内容</Text>
       <ContentTitle>这是一首简单的小情歌</ContentTitle>
     </Wrapper>
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 3679b8e33..056e43778 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -13,6 +13,7 @@ import { pluggedIn, buildLog } from '@/utils'
 import Modal from '@/components/Modal'
 
 import Header from './Header'
+import ArticleReport from './ArticleReport'
 
 import type { TStore } from './store'
 import { Wrapper } from './styles'
@@ -36,6 +37,7 @@ const AbuseReportContainer: React.FC<TProps> = ({
     <Modal width="500px" show showCloseBtn onClose={() => console.log('close')}>
       <Wrapper testid={testid}>
         <Header />
+        <ArticleReport />
       </Wrapper>
     </Modal>
   )
diff --git a/src/containers/tool/AbuseReport/styles/article_report/index.tsx b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
index a7518f034..48d0b035c 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/index.tsx
+++ b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
@@ -1,8 +1,40 @@
 import styled from 'styled-components'
 
+import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
 `
-export const Title = styled.div``
+export const Option = styled.div`
+  ${css.flex('align-center')};
+  font-size: 16px;
+  padding: 12px 0;
+  border-bottom: 1px solid;
+  border-bottom-color: #125065;
+
+  &:hover {
+    cursor: pointer;
+  }
+`
+export const Title = styled.div`
+  color: ${theme('thread.articleTitle')};
+  margin-left: 5px;
+  flex-grow: 1;
+`
+export const QuestionIcon = styled(Img)`
+  fill: ${theme('thread.articleTitle')};
+  ${css.size(16)};
+  margin-right: 10px;
+  opacity: 0;
+
+  ${Option}:hover & {
+    opacity: 1;
+  }
+  transition: all 0.25s;
+`
+export const Note = styled.div`
+  color: ${theme('thread.articleDigest')};
+  margin-top: 22px;
+  font-size: 14px;
+`
diff --git a/src/containers/tool/AbuseReport/styles/header.ts b/src/containers/tool/AbuseReport/styles/header.ts
index 9b9db7d9e..cc0d48bc4 100644
--- a/src/containers/tool/AbuseReport/styles/header.ts
+++ b/src/containers/tool/AbuseReport/styles/header.ts
@@ -6,6 +6,7 @@ import { theme, css } from '@/utils'
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
+  margin-bottom: 20px;
 `
 export const ReportIcon = styled(Img)`
   ${css.size(16)};
@@ -13,10 +14,12 @@ export const ReportIcon = styled(Img)`
 `
 export const Text = styled.div`
   color: ${theme('thread.articleTitle')};
-  margin-left: 5px;
+  margin-left: 8px;
+  margin-right: 6px;
 `
 export const ContentTitle = styled.div`
   color: ${theme('thread.articleDigest')};
+  font-size: 15px;
   margin-left: 3px;
   margin-right: 3px;
   &:before {
diff --git a/src/containers/tool/AbuseReport/styles/index.ts b/src/containers/tool/AbuseReport/styles/index.ts
index 758f118c3..2840f2116 100755
--- a/src/containers/tool/AbuseReport/styles/index.ts
+++ b/src/containers/tool/AbuseReport/styles/index.ts
@@ -6,7 +6,7 @@ import { theme } from '@/utils'
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  padding: 15px 30px;
+  padding: 25px 40px;
   color: ${theme('thread.articleDigest')};
 `
 export const Title = styled.div``

From f378e63b099e0dbf1ff514db293a918917e55a12 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 13:38:48 +0800
Subject: [PATCH 04/21] chore(abuse-report): wip

---
 src/components/Buttons/YesOrNoButtons.tsx     | 34 +++++++++++++++++++
 src/components/Buttons/index.tsx              |  1 +
 .../Buttons/styles/yes_or_no_buttons.ts       | 15 ++++++++
 src/containers/layout/GlobalLayout/index.tsx  |  2 ++
 .../tool/AbuseReport/ArticleReport/index.tsx  |  7 +++-
 src/containers/tool/AbuseReport/Footer.tsx    | 15 ++++++++
 src/containers/tool/AbuseReport/Header.tsx    |  2 +-
 src/containers/tool/AbuseReport/index.tsx     |  2 ++
 .../tool/AbuseReport/styles/footer.ts         |  9 +++++
 9 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Buttons/YesOrNoButtons.tsx
 create mode 100644 src/components/Buttons/styles/yes_or_no_buttons.ts
 create mode 100644 src/containers/tool/AbuseReport/Footer.tsx
 create mode 100644 src/containers/tool/AbuseReport/styles/footer.ts

diff --git a/src/components/Buttons/YesOrNoButtons.tsx b/src/components/Buttons/YesOrNoButtons.tsx
new file mode 100644
index 000000000..20239f1bc
--- /dev/null
+++ b/src/components/Buttons/YesOrNoButtons.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Space } from '@/components/Common'
+import Button from './Button'
+
+import { Wrapper, CancelBtn } from './styles/yes_or_no_buttons'
+
+type TProps = {
+  align?: 'center' | 'right'
+  cancelText?: string
+  confirmText?: string
+  onCancel?: () => void
+  onConfirm?: () => void
+}
+
+const YesOrNoButton: React.FC<TProps> = ({
+  align = 'center',
+  cancelText = '取消',
+  confirmText = '确定',
+  onCancel = console.log,
+  onConfirm = console.log,
+}) => {
+  return (
+    <Wrapper align={align}>
+      <CancelBtn onClick={() => onCancel?.()}>{cancelText}</CancelBtn>
+      <Space left={5} right={10} />
+      <Button size="small" type="primary" onClick={() => onConfirm?.()}>
+        {confirmText}
+      </Button>
+    </Wrapper>
+  )
+}
+
+export default YesOrNoButton
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
index a9e14362a..911f53b88 100755
--- a/src/components/Buttons/index.tsx
+++ b/src/components/Buttons/index.tsx
@@ -6,3 +6,4 @@ export { default as OrButton } from './OrButton'
 export { default as DropdownButton } from './DropdownButton'
 export { default as NotifyButton } from './NotifyButton'
 export { default as FollowButton } from './FollowButton'
+export { default as YesOrNoButtons } from './YesOrNoButtons'
diff --git a/src/components/Buttons/styles/yes_or_no_buttons.ts b/src/components/Buttons/styles/yes_or_no_buttons.ts
new file mode 100644
index 000000000..0a30e4e54
--- /dev/null
+++ b/src/components/Buttons/styles/yes_or_no_buttons.ts
@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+import { css, theme } from '@/utils'
+
+type TWrapper = { align: 'center' | 'right' }
+export const Wrapper = styled.div<TWrapper>`
+  ${css.flex('align-center')};
+  width: 100%;
+  justify-content: ${({ align }) =>
+    align === 'center' ? 'center' : 'flex-end'};
+`
+export const CancelBtn = styled.div`
+  color: ${theme('button.primary')};
+  font-size: 14px;
+`
diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index d17c492b2..97bc0dc6b 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -93,7 +93,9 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
+                <div>reload</div>
                 <AbuseReport />
+
                 {!noSidebar && <Sidebar />}
                 <Drawer />
                 <Doraemon />
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
index ca8f44cfd..3dca080fc 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -29,6 +29,11 @@ const ArticleReport: React.FC = () => {
         <Title>硬广，软广</Title>
         <QuestionIcon src={`${ICON}/shape/question.svg`} />
       </Option>
+      <Option>
+        <Checker />
+        <Title>侵权内容</Title>
+        <QuestionIcon src={`${ICON}/shape/question.svg`} />
+      </Option>
       <Option>
         <Checker />
         <Title>坏问题</Title>
@@ -36,7 +41,7 @@ const ArticleReport: React.FC = () => {
       </Option>
       <Option>
         <Checker />
-        <Title>违规信息</Title>
+        <Title>违法违规</Title>
         <QuestionIcon src={`${ICON}/shape/question.svg`} />
       </Option>
       <Option>
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
new file mode 100644
index 000000000..4dcafc2bf
--- /dev/null
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { YesOrNoButtons } from '@/components/Buttons'
+
+import { Wrapper } from './styles/footer'
+
+const Footer: React.FC = () => {
+  return (
+    <Wrapper>
+      <YesOrNoButtons confirmText="举报" />
+    </Wrapper>
+  )
+}
+
+export default Footer
diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
index 9aaf01717..155dbb8fe 100644
--- a/src/containers/tool/AbuseReport/Header.tsx
+++ b/src/containers/tool/AbuseReport/Header.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { ICON } from '@/config'
 import { Wrapper, ReportIcon, Text, ContentTitle } from './styles/header'
 
-const Header = () => {
+const Header: React.FC = () => {
   return (
     <Wrapper>
       <ReportIcon src={`${ICON}/article/report-solid.svg`} />
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 056e43778..0c44ef6a4 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -13,6 +13,7 @@ import { pluggedIn, buildLog } from '@/utils'
 import Modal from '@/components/Modal'
 
 import Header from './Header'
+import Footer from './Footer'
 import ArticleReport from './ArticleReport'
 
 import type { TStore } from './store'
@@ -38,6 +39,7 @@ const AbuseReportContainer: React.FC<TProps> = ({
       <Wrapper testid={testid}>
         <Header />
         <ArticleReport />
+        <Footer />
       </Wrapper>
     </Modal>
   )
diff --git a/src/containers/tool/AbuseReport/styles/footer.ts b/src/containers/tool/AbuseReport/styles/footer.ts
new file mode 100644
index 000000000..def8a67c2
--- /dev/null
+++ b/src/containers/tool/AbuseReport/styles/footer.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+// import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div`
+  margin-top: 20px;
+`
+
+export const Holder = styled.div``

From 1980ef4744de9f2de2c874df6baf0eed21bb6731 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 16:40:20 +0800
Subject: [PATCH 05/21] chore(abuse-report): wip

---
 src/containers/layout/GlobalLayout/index.tsx  |  2 +-
 .../tool/AbuseReport/ArticleReport/Detail.tsx | 11 ++++
 .../tool/AbuseReport/ArticleReport/index.tsx  | 54 +++++++------------
 .../tool/AbuseReport/defaults/article.ts      | 49 +++++++++++++++++
 src/containers/tool/AbuseReport/index.tsx     |  3 +-
 src/containers/tool/AbuseReport/spec.ts       |  7 +++
 src/containers/tool/AbuseReport/store.ts      | 22 +++++++-
 .../styles/article_report/index.tsx           | 12 +++--
 utils/constant/index.ts                       |  1 +
 9 files changed, 116 insertions(+), 45 deletions(-)
 create mode 100644 src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
 create mode 100644 src/containers/tool/AbuseReport/defaults/article.ts
 create mode 100644 src/containers/tool/AbuseReport/spec.ts

diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 97bc0dc6b..2f25e6a1d 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -93,7 +93,7 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
-                <div>reload</div>
+                <div>eload</div>
                 <AbuseReport />
 
                 {!noSidebar && <Sidebar />}
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
new file mode 100644
index 000000000..d770f4741
--- /dev/null
+++ b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Detail: React.FC = () => {
+  return (
+    <div>
+      <div>Detail</div>
+    </div>
+  )
+}
+
+export default Detail
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
index 3dca080fc..c478c14fd 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -1,8 +1,13 @@
 import React from 'react'
 
 import { ICON } from '@/config'
+import { REPORT } from '@/constant'
+
+import { SpaceGrow } from '@/components/Common'
 import Checker from '@/components/Checker'
 
+import type { TREPORT_ITEM } from '../spec'
+
 import {
   Wrapper,
   Option,
@@ -11,44 +16,21 @@ import {
   Note,
 } from '../styles/article_report'
 
-const ArticleReport: React.FC = () => {
+type TProps = {
+  items: TREPORT_ITEM[]
+}
+
+const ArticleReport: React.FC<TProps> = ({ items }) => {
   return (
     <Wrapper>
-      <Option>
-        <Checker checked />
-        <Title>重复内容</Title>
-        <QuestionIcon src={`${ICON}/shape/question.svg`} />
-      </Option>
-      <Option>
-        <Checker />
-        <Title>标题党</Title>
-        <QuestionIcon src={`${ICON}/shape/question.svg`} />
-      </Option>
-      <Option>
-        <Checker />
-        <Title>硬广，软广</Title>
-        <QuestionIcon src={`${ICON}/shape/question.svg`} />
-      </Option>
-      <Option>
-        <Checker />
-        <Title>侵权内容</Title>
-        <QuestionIcon src={`${ICON}/shape/question.svg`} />
-      </Option>
-      <Option>
-        <Checker />
-        <Title>坏问题</Title>
-        <QuestionIcon src={`${ICON}/shape/question.svg`} />
-      </Option>
-      <Option>
-        <Checker />
-        <Title>违法违规</Title>
-        <QuestionIcon src={`${ICON}/shape/question.svg`} />
-      </Option>
-      <Option>
-        <Checker />
-        <Title>其他</Title>
-        <QuestionIcon src={`${ICON}/shape/question.svg`} />
-      </Option>
+      {items.map((item) => (
+        <Option key={item.raw}>
+          <Checker checked={item.checked} />
+          <Title>{item.title}</Title>
+          <SpaceGrow />
+          <QuestionIcon src={`${ICON}/shape/question.svg`} />
+        </Option>
+      ))}
 
       <Note>
         举报成功后社区志愿者会在第一时间处理，处理结果会公示在这里。如果你对社区治理有更好的想法或建议，请联系我们。
diff --git a/src/containers/tool/AbuseReport/defaults/article.ts b/src/containers/tool/AbuseReport/defaults/article.ts
new file mode 100644
index 000000000..10c3a5281
--- /dev/null
+++ b/src/containers/tool/AbuseReport/defaults/article.ts
@@ -0,0 +1,49 @@
+import { REPORT } from '@/constant'
+
+const items = [
+  {
+    title: '重复内容',
+    raw: REPORT.ARTICLE.DUPLICATE,
+    checked: true,
+    // info: "",
+    detail: '',
+  },
+  {
+    title: '标题党',
+    raw: REPORT.ARTICLE.CLICKBAIT,
+    checked: false,
+    detail: '',
+  },
+  {
+    title: '硬广，软广',
+    raw: REPORT.ARTICLE.AD,
+    checked: false,
+    detail: '',
+  },
+  {
+    title: '侵权内容',
+    raw: REPORT.ARTICLE.VIOLATION,
+    checked: false,
+    detail: '',
+  },
+  {
+    title: '坏问题',
+    raw: REPORT.ARTICLE.BAD_QUESTION,
+    checked: false,
+    detail: '',
+  },
+  {
+    title: '违法违规',
+    raw: REPORT.ARTICLE.LAWS,
+    checked: false,
+    detail: '',
+  },
+  {
+    title: '其他',
+    raw: REPORT.ARTICLE.OTHERS,
+    checked: false,
+    detail: '',
+  },
+]
+
+export default items
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 0c44ef6a4..c3a84fb02 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -33,12 +33,13 @@ const AbuseReportContainer: React.FC<TProps> = ({
   testid,
 }) => {
   useInit(store)
+  const { itemsData } = store
 
   return (
     <Modal width="500px" show showCloseBtn onClose={() => console.log('close')}>
       <Wrapper testid={testid}>
         <Header />
-        <ArticleReport />
+        <ArticleReport items={itemsData} />
         <Footer />
       </Wrapper>
     </Modal>
diff --git a/src/containers/tool/AbuseReport/spec.ts b/src/containers/tool/AbuseReport/spec.ts
new file mode 100644
index 000000000..a03d2d576
--- /dev/null
+++ b/src/containers/tool/AbuseReport/spec.ts
@@ -0,0 +1,7 @@
+export type TREPORT_ITEM = {
+  title: string
+  raw: string
+  checked: boolean
+  info?: string
+  detail: string
+}
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
index 81fef82fc..023772444 100755
--- a/src/containers/tool/AbuseReport/store.ts
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -3,21 +3,39 @@
  */
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
-// import {} from 'ramda'
+import { values } from 'ramda'
+
+import { REPORT_TYPE, REPORT } from '@/constant'
 
 import type { TCommunity, TRootStore } from '@/spec'
 import { markStates, buildLog, stripMobx } from '@/utils'
 
+import type { TREPORT_ITEM } from './spec'
+import articleItems from './defaults/article'
 /* eslint-disable-next-line */
 const log = buildLog('S:AbuseReport')
 
-const AbuseReport = T.model('AbuseReport', {})
+const Item = T.model('AbuseReport', {
+  title: T.string,
+  raw: T.enumeration(values(REPORT.ARTICLE)),
+  checked: T.optional(T.boolean, false),
+  info: T.optional(T.string, ''),
+  detail: T.optional(T.string, ''),
+})
+
+const AbuseReport = T.model('AbuseReport', {
+  type: T.optional(T.enumeration(values(REPORT_TYPE)), REPORT_TYPE.ARTICLE),
+  items: T.optional(T.array(Item), articleItems),
+})
   .views((self) => ({
     get curCommunity(): TCommunity {
       const root = getParent(self) as TRootStore
 
       return stripMobx(root.viewing.community)
     },
+    get itemsData(): TREPORT_ITEM[] {
+      return stripMobx(self.items)
+    },
   }))
   .actions((self) => ({
     mark(sobj: Record<string, unknown>): void {
diff --git a/src/containers/tool/AbuseReport/styles/article_report/index.tsx b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
index 48d0b035c..7fd70e353 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/index.tsx
+++ b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
@@ -12,15 +12,13 @@ export const Option = styled.div`
   padding: 12px 0;
   border-bottom: 1px solid;
   border-bottom-color: #125065;
-
-  &:hover {
-    cursor: pointer;
-  }
 `
 export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
   margin-left: 5px;
-  flex-grow: 1;
+  &:hover {
+    cursor: pointer;
+  }
 `
 export const QuestionIcon = styled(Img)`
   fill: ${theme('thread.articleTitle')};
@@ -31,6 +29,10 @@ export const QuestionIcon = styled(Img)`
   ${Option}:hover & {
     opacity: 1;
   }
+
+  &:hover {
+    cursor: pointer;
+  }
   transition: all 0.25s;
 `
 export const Note = styled.div`
diff --git a/utils/constant/index.ts b/utils/constant/index.ts
index cc735c86a..cbb7cb268 100755
--- a/utils/constant/index.ts
+++ b/utils/constant/index.ts
@@ -21,6 +21,7 @@ export { default as SIZE } from './size'
 export { default as URL_QUERY } from './url_query'
 
 export { PAYMENT_USAGE, PAYMENT_METHOD } from './payment'
+export { REPORT, REPORT_TYPE } from './report'
 
 /* some svg icon are sensitive to fill color */
 /* some community svg need fill color, like city etc.. */

From 8c9584d747963aaaea152ab04449716e68add3a7 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 17:17:21 +0800
Subject: [PATCH 06/21] chore(abuse-report): wip

---
 src/containers/layout/GlobalLayout/index.tsx  |  2 +-
 .../tool/AbuseReport/ArticleReport/index.tsx  | 12 ++++++----
 .../tool/AbuseReport/defaults/article.ts      |  2 +-
 src/containers/tool/AbuseReport/index.tsx     |  6 +++--
 src/containers/tool/AbuseReport/logic.ts      |  4 ++--
 src/containers/tool/AbuseReport/store.ts      | 22 ++++++++++++++++++-
 .../styles/article_report/index.tsx           |  5 ++++-
 7 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 2f25e6a1d..97bc0dc6b 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -93,7 +93,7 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
-                <div>eload</div>
+                <div>reload</div>
                 <AbuseReport />
 
                 {!noSidebar && <Sidebar />}
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
index c478c14fd..0336e27cf 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { ICON } from '@/config'
-import { REPORT } from '@/constant'
 
 import { SpaceGrow } from '@/components/Common'
 import Checker from '@/components/Checker'
@@ -11,22 +10,27 @@ import type { TREPORT_ITEM } from '../spec'
 import {
   Wrapper,
   Option,
+  SelectWrapper,
   Title,
   QuestionIcon,
   Note,
 } from '../styles/article_report'
+import { selectItem } from '../logic'
 
 type TProps = {
   items: TREPORT_ITEM[]
+  activeItem: TREPORT_ITEM
 }
 
-const ArticleReport: React.FC<TProps> = ({ items }) => {
+const ArticleReport: React.FC<TProps> = ({ items, activeItem }) => {
   return (
     <Wrapper>
       {items.map((item) => (
         <Option key={item.raw}>
-          <Checker checked={item.checked} />
-          <Title>{item.title}</Title>
+          <SelectWrapper onClick={() => selectItem(item.raw)}>
+            <Checker checked={item.raw === activeItem.raw} />
+            <Title>{item.title}</Title>
+          </SelectWrapper>
           <SpaceGrow />
           <QuestionIcon src={`${ICON}/shape/question.svg`} />
         </Option>
diff --git a/src/containers/tool/AbuseReport/defaults/article.ts b/src/containers/tool/AbuseReport/defaults/article.ts
index 10c3a5281..b38179ce7 100644
--- a/src/containers/tool/AbuseReport/defaults/article.ts
+++ b/src/containers/tool/AbuseReport/defaults/article.ts
@@ -4,7 +4,7 @@ const items = [
   {
     title: '重复内容',
     raw: REPORT.ARTICLE.DUPLICATE,
-    checked: true,
+    checked: false,
     // info: "",
     detail: '',
   },
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index c3a84fb02..761f56fb9 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -33,13 +33,15 @@ const AbuseReportContainer: React.FC<TProps> = ({
   testid,
 }) => {
   useInit(store)
-  const { itemsData } = store
+  const { itemsData, activeItem } = store
+
+  console.log('# activeItem -> ', activeItem)
 
   return (
     <Modal width="500px" show showCloseBtn onClose={() => console.log('close')}>
       <Wrapper testid={testid}>
         <Header />
-        <ArticleReport items={itemsData} />
+        <ArticleReport items={itemsData} activeItem={activeItem} />
         <Footer />
       </Wrapper>
     </Modal>
diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
index 05377d497..f18346cfa 100755
--- a/src/containers/tool/AbuseReport/logic.ts
+++ b/src/containers/tool/AbuseReport/logic.ts
@@ -11,8 +11,8 @@ let store: TStore | undefined
 /* eslint-disable-next-line */
 const log = buildLog('L:AbuseReport')
 
-export const someMethod = (): void => {
-  //
+export const selectItem = (checkedItemRaw: string): void => {
+  store.mark({ checkedItemRaw })
 }
 
 // ###############################
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
index 023772444..8a5a0f62f 100755
--- a/src/containers/tool/AbuseReport/store.ts
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -3,7 +3,7 @@
  */
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
-import { values } from 'ramda'
+import { values, find, propEq } from 'ramda'
 
 import { REPORT_TYPE, REPORT } from '@/constant'
 
@@ -15,6 +15,14 @@ import articleItems from './defaults/article'
 /* eslint-disable-next-line */
 const log = buildLog('S:AbuseReport')
 
+const initItem = {
+  title: '',
+  raw: '',
+  checked: false,
+  info: '',
+  detail: '',
+}
+
 const Item = T.model('AbuseReport', {
   title: T.string,
   raw: T.enumeration(values(REPORT.ARTICLE)),
@@ -26,6 +34,8 @@ const Item = T.model('AbuseReport', {
 const AbuseReport = T.model('AbuseReport', {
   type: T.optional(T.enumeration(values(REPORT_TYPE)), REPORT_TYPE.ARTICLE),
   items: T.optional(T.array(Item), articleItems),
+  checkedItemRaw: T.maybeNull(T.string),
+  view: T.optional(T.enumeration(['main', 'detail', 'info']), 'main'),
 })
   .views((self) => ({
     get curCommunity(): TCommunity {
@@ -36,6 +46,16 @@ const AbuseReport = T.model('AbuseReport', {
     get itemsData(): TREPORT_ITEM[] {
       return stripMobx(self.items)
     },
+
+    get activeItem(): TREPORT_ITEM {
+      const { itemsData, checkedItemRaw } = self as TStore
+      const findItem = find(
+        propEq('raw', checkedItemRaw),
+        itemsData,
+      ) as TREPORT_ITEM
+
+      return findItem || initItem
+    },
   }))
   .actions((self) => ({
     mark(sobj: Record<string, unknown>): void {
diff --git a/src/containers/tool/AbuseReport/styles/article_report/index.tsx b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
index 7fd70e353..173a7abcd 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/index.tsx
+++ b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
@@ -11,7 +11,10 @@ export const Option = styled.div`
   font-size: 16px;
   padding: 12px 0;
   border-bottom: 1px solid;
-  border-bottom-color: #125065;
+  border-bottom-color: #114b5f;
+`
+export const SelectWrapper = styled.div`
+  ${css.flex('align-center')};
 `
 export const Title = styled.div`
   color: ${theme('thread.articleTitle')};

From add3391fb05b1c4c9f0b64ad6e5e034d6f30db6c Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 17:28:37 +0800
Subject: [PATCH 07/21] chore(abuse-report): wip

---
 src/containers/tool/AbuseReport/ArticleReport/index.tsx  | 5 -----
 src/containers/tool/AbuseReport/Footer.tsx               | 6 +++++-
 .../tool/AbuseReport/styles/article_report/index.tsx     | 5 -----
 src/containers/tool/AbuseReport/styles/footer.ts         | 9 +++++++--
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
index 0336e27cf..9e797f760 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -13,7 +13,6 @@ import {
   SelectWrapper,
   Title,
   QuestionIcon,
-  Note,
 } from '../styles/article_report'
 import { selectItem } from '../logic'
 
@@ -35,10 +34,6 @@ const ArticleReport: React.FC<TProps> = ({ items, activeItem }) => {
           <QuestionIcon src={`${ICON}/shape/question.svg`} />
         </Option>
       ))}
-
-      <Note>
-        举报成功后社区志愿者会在第一时间处理，处理结果会公示在这里。如果你对社区治理有更好的想法或建议，请联系我们。
-      </Note>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
index 4dcafc2bf..abeb84abb 100644
--- a/src/containers/tool/AbuseReport/Footer.tsx
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -2,11 +2,15 @@ import React from 'react'
 
 import { YesOrNoButtons } from '@/components/Buttons'
 
-import { Wrapper } from './styles/footer'
+import { Wrapper, Note } from './styles/footer'
 
 const Footer: React.FC = () => {
   return (
     <Wrapper>
+      <Note>
+        举报成功后社区志愿者会在第一时间处理，处理结果会公示在这里。如果你对社区治理有更好的想法或建议，请联系我们。
+      </Note>
+
       <YesOrNoButtons confirmText="举报" />
     </Wrapper>
   )
diff --git a/src/containers/tool/AbuseReport/styles/article_report/index.tsx b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
index 173a7abcd..da2a63fee 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/index.tsx
+++ b/src/containers/tool/AbuseReport/styles/article_report/index.tsx
@@ -38,8 +38,3 @@ export const QuestionIcon = styled(Img)`
   }
   transition: all 0.25s;
 `
-export const Note = styled.div`
-  color: ${theme('thread.articleDigest')};
-  margin-top: 22px;
-  font-size: 14px;
-`
diff --git a/src/containers/tool/AbuseReport/styles/footer.ts b/src/containers/tool/AbuseReport/styles/footer.ts
index def8a67c2..f8ec6f0a5 100644
--- a/src/containers/tool/AbuseReport/styles/footer.ts
+++ b/src/containers/tool/AbuseReport/styles/footer.ts
@@ -1,9 +1,14 @@
 import styled from 'styled-components'
 
-// import { theme, css } from '@/utils'
+import { theme } from '@/utils'
 
 export const Wrapper = styled.div`
   margin-top: 20px;
 `
 
-export const Holder = styled.div``
+export const Note = styled.div`
+  color: ${theme('thread.articleDigest')};
+  margin-top: 22px;
+  margin-bottom: 18px;
+  font-size: 14px;
+`

From 2b4f54d2cb0581ac9d4438d495af90f1e5b7bbd4 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 20:39:54 +0800
Subject: [PATCH 08/21] chore(abuse-report): wip

---
 src/containers/layout/GlobalLayout/index.tsx  |  2 +-
 .../tool/AbuseReport/ArticleReport/Info.tsx   | 13 +++++
 .../tool/AbuseReport/ArticleReport/Main.tsx   | 40 ++++++++++++++++
 .../tool/AbuseReport/ArticleReport/index.tsx  | 47 ++++++++-----------
 src/containers/tool/AbuseReport/index.tsx     |  4 +-
 .../styles/article_report/info.tsx            | 11 +++++
 .../article_report/{index.tsx => main.ts}     |  7 ++-
 .../tool/AbuseReport/styles/footer.ts         |  1 -
 .../tool/AbuseReport/styles/index.ts          |  2 +-
 9 files changed, 93 insertions(+), 34 deletions(-)
 create mode 100644 src/containers/tool/AbuseReport/ArticleReport/Info.tsx
 create mode 100644 src/containers/tool/AbuseReport/ArticleReport/Main.tsx
 create mode 100644 src/containers/tool/AbuseReport/styles/article_report/info.tsx
 rename src/containers/tool/AbuseReport/styles/article_report/{index.tsx => main.ts} (77%)

diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 97bc0dc6b..2f25e6a1d 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -93,7 +93,7 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
-                <div>reload</div>
+                <div>eload</div>
                 <AbuseReport />
 
                 {!noSidebar && <Sidebar />}
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Info.tsx b/src/containers/tool/AbuseReport/ArticleReport/Info.tsx
new file mode 100644
index 000000000..f7a54a926
--- /dev/null
+++ b/src/containers/tool/AbuseReport/ArticleReport/Info.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { Wrapper } from '../styles/article_report/info'
+
+const Info: React.FC = () => {
+  return (
+    <Wrapper>
+      <div>Info</div>
+    </Wrapper>
+  )
+}
+
+export default Info
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Main.tsx b/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
new file mode 100644
index 000000000..b51ff6cd0
--- /dev/null
+++ b/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { ICON } from '@/config'
+
+import { SpaceGrow } from '@/components/Common'
+import Checker from '@/components/Checker'
+
+import type { TREPORT_ITEM } from '../spec'
+
+import {
+  Option,
+  SelectWrapper,
+  Title,
+  QuestionIcon,
+} from '../styles/article_report/main'
+import { selectItem } from '../logic'
+
+type TProps = {
+  items: TREPORT_ITEM[]
+  activeItem: TREPORT_ITEM
+}
+
+const Main: React.FC<TProps> = ({ items, activeItem }) => {
+  return (
+    <React.Fragment>
+      {items.map((item) => (
+        <Option key={item.raw}>
+          <SelectWrapper onClick={() => selectItem(item.raw)}>
+            <Checker checked={item.raw === activeItem.raw} />
+            <Title active={item.raw === activeItem.raw}>{item.title}</Title>
+          </SelectWrapper>
+          <SpaceGrow />
+          <QuestionIcon src={`${ICON}/shape/question.svg`} />
+        </Option>
+      ))}
+    </React.Fragment>
+  )
+}
+
+export default Main
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
index 9e797f760..f800b2437 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -1,41 +1,32 @@
 import React from 'react'
 
-import { ICON } from '@/config'
-
-import { SpaceGrow } from '@/components/Common'
-import Checker from '@/components/Checker'
-
 import type { TREPORT_ITEM } from '../spec'
 
-import {
-  Wrapper,
-  Option,
-  SelectWrapper,
-  Title,
-  QuestionIcon,
-} from '../styles/article_report'
-import { selectItem } from '../logic'
+import Main from './Main'
+import Detail from './Detail'
+import Info from './Info'
 
 type TProps = {
+  view: 'main' | 'detail' | 'info'
   items: TREPORT_ITEM[]
   activeItem: TREPORT_ITEM
 }
 
-const ArticleReport: React.FC<TProps> = ({ items, activeItem }) => {
-  return (
-    <Wrapper>
-      {items.map((item) => (
-        <Option key={item.raw}>
-          <SelectWrapper onClick={() => selectItem(item.raw)}>
-            <Checker checked={item.raw === activeItem.raw} />
-            <Title>{item.title}</Title>
-          </SelectWrapper>
-          <SpaceGrow />
-          <QuestionIcon src={`${ICON}/shape/question.svg`} />
-        </Option>
-      ))}
-    </Wrapper>
-  )
+const ArticleReport: React.FC<TProps> = ({ view, items, activeItem }) => {
+  // const child =
+  switch (view) {
+    case 'info': {
+      return <Info />
+    }
+
+    case 'detail': {
+      return <Detail />
+    }
+
+    default: {
+      return <Main items={items} activeItem={activeItem} />
+    }
+  }
 }
 
 export default ArticleReport
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 761f56fb9..2bb488aa9 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -33,7 +33,7 @@ const AbuseReportContainer: React.FC<TProps> = ({
   testid,
 }) => {
   useInit(store)
-  const { itemsData, activeItem } = store
+  const { view, itemsData, activeItem } = store
 
   console.log('# activeItem -> ', activeItem)
 
@@ -41,7 +41,7 @@ const AbuseReportContainer: React.FC<TProps> = ({
     <Modal width="500px" show showCloseBtn onClose={() => console.log('close')}>
       <Wrapper testid={testid}>
         <Header />
-        <ArticleReport items={itemsData} activeItem={activeItem} />
+        <ArticleReport view={view} items={itemsData} activeItem={activeItem} />
         <Footer />
       </Wrapper>
     </Modal>
diff --git a/src/containers/tool/AbuseReport/styles/article_report/info.tsx b/src/containers/tool/AbuseReport/styles/article_report/info.tsx
new file mode 100644
index 000000000..b562c17fb
--- /dev/null
+++ b/src/containers/tool/AbuseReport/styles/article_report/info.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flexColumn()};
+`
+export const Title = styled.div`
+  ${css.flexColumn()};
+`
diff --git a/src/containers/tool/AbuseReport/styles/article_report/index.tsx b/src/containers/tool/AbuseReport/styles/article_report/main.ts
similarity index 77%
rename from src/containers/tool/AbuseReport/styles/article_report/index.tsx
rename to src/containers/tool/AbuseReport/styles/article_report/main.ts
index da2a63fee..913df98c3 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/index.tsx
+++ b/src/containers/tool/AbuseReport/styles/article_report/main.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
@@ -16,11 +17,15 @@ export const Option = styled.div`
 export const SelectWrapper = styled.div`
   ${css.flex('align-center')};
 `
-export const Title = styled.div`
+export const Title = styled.div<TActive>`
   color: ${theme('thread.articleTitle')};
   margin-left: 5px;
+  font-weight: ${({ active }) => (active ? 'bold' : 'normal')};
+  opacity: ${({ active }) => (active ? 1 : 0.9)};
+
   &:hover {
     cursor: pointer;
+    opacity: 1;
   }
 `
 export const QuestionIcon = styled(Img)`
diff --git a/src/containers/tool/AbuseReport/styles/footer.ts b/src/containers/tool/AbuseReport/styles/footer.ts
index f8ec6f0a5..06fc52029 100644
--- a/src/containers/tool/AbuseReport/styles/footer.ts
+++ b/src/containers/tool/AbuseReport/styles/footer.ts
@@ -5,7 +5,6 @@ import { theme } from '@/utils'
 export const Wrapper = styled.div`
   margin-top: 20px;
 `
-
 export const Note = styled.div`
   color: ${theme('thread.articleDigest')};
   margin-top: 22px;
diff --git a/src/containers/tool/AbuseReport/styles/index.ts b/src/containers/tool/AbuseReport/styles/index.ts
index 2840f2116..5112363e3 100755
--- a/src/containers/tool/AbuseReport/styles/index.ts
+++ b/src/containers/tool/AbuseReport/styles/index.ts
@@ -9,4 +9,4 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   padding: 25px 40px;
   color: ${theme('thread.articleDigest')};
 `
-export const Title = styled.div``
+export const ContentWrapper = styled.div``

From 95f83af712488a02d4a6f455104ebbc7e1711b33 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 21:27:04 +0800
Subject: [PATCH 09/21] chore(abuse-report): wip

---
 src/components/Buttons/ArrowButton.tsx        |  2 +-
 src/containers/layout/GlobalLayout/index.tsx  |  2 +-
 .../tool/AbuseReport/ArticleReport/Detail.tsx | 23 +++++++++++++++++--
 .../tool/AbuseReport/ArticleReport/Info.tsx   | 22 ++++++++++++++++--
 .../tool/AbuseReport/ArticleReport/Main.tsx   |  7 ++++--
 .../tool/AbuseReport/ArticleReport/index.tsx  | 14 +++++++----
 src/containers/tool/AbuseReport/Footer.tsx    |  8 ++++++-
 .../tool/AbuseReport/defaults/article.ts      | 19 +++++++++------
 src/containers/tool/AbuseReport/index.tsx     | 13 +++++++----
 src/containers/tool/AbuseReport/logic.ts      | 10 +++++++-
 src/containers/tool/AbuseReport/store.ts      | 11 +++++++++
 11 files changed, 105 insertions(+), 26 deletions(-)

diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
index 082d22e3d..6c237cf6b 100755
--- a/src/components/Buttons/ArrowButton.tsx
+++ b/src/components/Buttons/ArrowButton.tsx
@@ -23,7 +23,7 @@ type TProps = {
   direction?: 'left' | 'right'
   dimWhenIdle?: boolean
   disabled?: boolean
-  arrowStyle?: string
+  arrowStyle?: 'default' | 'simple'
 }
 
 const ArrowButton: React.FC<TProps> = ({
diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 2f25e6a1d..97bc0dc6b 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -93,7 +93,7 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
-                <div>eload</div>
+                <div>reload</div>
                 <AbuseReport />
 
                 {!noSidebar && <Sidebar />}
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
index d770f4741..1aa2cc557 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
@@ -1,9 +1,28 @@
 import React from 'react'
 
-const Detail: React.FC = () => {
+import { Br } from '@/components/Common'
+import { ArrowButton } from '@/components/Buttons'
+
+import type { TREPORT_ITEM } from '../spec'
+import { goBack } from '../logic'
+
+type TProps = {
+  explainItem: TREPORT_ITEM
+}
+
+const Detail: React.FC<TProps> = ({ explainItem }) => {
   return (
     <div>
-      <div>Detail</div>
+      <ArrowButton
+        size="small"
+        direction="left"
+        arrowStyle="simple"
+        onClick={() => goBack()}
+      >
+        {explainItem.title}
+      </ArrowButton>
+      <Br bottom={20} />
+      <div>{explainItem.detail}</div>
     </div>
   )
 }
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Info.tsx b/src/containers/tool/AbuseReport/ArticleReport/Info.tsx
index f7a54a926..754727dc2 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Info.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/Info.tsx
@@ -1,11 +1,29 @@
 import React from 'react'
 
+import { Br } from '@/components/Common'
+import { ArrowButton } from '@/components/Buttons'
+
+import type { TREPORT_ITEM } from '../spec'
 import { Wrapper } from '../styles/article_report/info'
+import { goBack } from '../logic'
+
+type TProps = {
+  activeItem: TREPORT_ITEM
+}
 
-const Info: React.FC = () => {
+const Info: React.FC<TProps> = ({ activeItem }) => {
   return (
     <Wrapper>
-      <div>Info</div>
+      <ArrowButton
+        size="small"
+        direction="left"
+        arrowStyle="simple"
+        onClick={() => goBack()}
+      >
+        {activeItem.title}
+      </ArrowButton>
+      <Br bottom={20} />
+      <div>这里是 info 信息</div>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Main.tsx b/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
index b51ff6cd0..97aeaddbb 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
@@ -13,7 +13,7 @@ import {
   Title,
   QuestionIcon,
 } from '../styles/article_report/main'
-import { selectItem } from '../logic'
+import { selectItem, explainItem } from '../logic'
 
 type TProps = {
   items: TREPORT_ITEM[]
@@ -30,7 +30,10 @@ const Main: React.FC<TProps> = ({ items, activeItem }) => {
             <Title active={item.raw === activeItem.raw}>{item.title}</Title>
           </SelectWrapper>
           <SpaceGrow />
-          <QuestionIcon src={`${ICON}/shape/question.svg`} />
+          <QuestionIcon
+            src={`${ICON}/shape/question.svg`}
+            onClick={() => explainItem(item.raw)}
+          />
         </Option>
       ))}
     </React.Fragment>
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
index f800b2437..4942b192a 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -10,17 +10,23 @@ type TProps = {
   view: 'main' | 'detail' | 'info'
   items: TREPORT_ITEM[]
   activeItem: TREPORT_ITEM
+  explainItem: TREPORT_ITEM
 }
 
-const ArticleReport: React.FC<TProps> = ({ view, items, activeItem }) => {
-  // const child =
+const ArticleReport: React.FC<TProps> = ({
+  view,
+  items,
+  activeItem,
+  explainItem,
+}) => {
+  console.log('view -> ', view)
   switch (view) {
     case 'info': {
-      return <Info />
+      return <Info activeItem={activeItem} />
     }
 
     case 'detail': {
-      return <Detail />
+      return <Detail explainItem={explainItem} />
     }
 
     default: {
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
index abeb84abb..344b0deb5 100644
--- a/src/containers/tool/AbuseReport/Footer.tsx
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -4,7 +4,13 @@ import { YesOrNoButtons } from '@/components/Buttons'
 
 import { Wrapper, Note } from './styles/footer'
 
-const Footer: React.FC = () => {
+type TProps = {
+  view: 'main' | 'detail' | 'info'
+}
+
+const Footer: React.FC<TProps> = ({ view }) => {
+  if (view === 'detail') return null
+
   return (
     <Wrapper>
       <Note>
diff --git a/src/containers/tool/AbuseReport/defaults/article.ts b/src/containers/tool/AbuseReport/defaults/article.ts
index b38179ce7..d47540b5c 100644
--- a/src/containers/tool/AbuseReport/defaults/article.ts
+++ b/src/containers/tool/AbuseReport/defaults/article.ts
@@ -6,43 +6,48 @@ const items = [
     raw: REPORT.ARTICLE.DUPLICATE,
     checked: false,
     // info: "",
-    detail: '',
+    detail: '已有类似的讨论、问题，或者常见的日经贴、月经贴。',
   },
   {
     title: '标题党',
     raw: REPORT.ARTICLE.CLICKBAIT,
     checked: false,
-    detail: '',
+    detail:
+      '包括但不限于有意夸大，制造焦虑，引战等标题。即便你是出于好意，也请停止使用各类雷人标题骗取点击，在这里只会适得其反。',
   },
   {
     title: '硬广，软广',
     raw: REPORT.ARTICLE.AD,
     checked: false,
-    detail: '',
+    detail: '包括但不限于各种厂商活动推广，公众号、面经推广等等。',
   },
   {
     title: '侵权内容',
     raw: REPORT.ARTICLE.VIOLATION,
     checked: false,
-    detail: '',
+    detail:
+      '包括但不限于盗版话题讨论，未授权转载，人身攻击，无根据造谣等内容。',
   },
   {
     title: '坏问题',
     raw: REPORT.ARTICLE.BAD_QUESTION,
     checked: false,
-    detail: '',
+    detail:
+      '求助类问题没有明确的上下文信息，或所提问题过于宽泛、空洞。比如：怎样学习操作系统 ? ',
   },
   {
     title: '违法违规',
     raw: REPORT.ARTICLE.LAWS,
     checked: false,
-    detail: '',
+    detail:
+      '包括但不限于黄赌毒、涉政，涉暴以及民族宗教等明确不适合在本站讨论的信息。一经查实，账号将被永久封禁。',
   },
   {
     title: '其他',
     raw: REPORT.ARTICLE.OTHERS,
     checked: false,
-    detail: '',
+    detail:
+      '其他你认为不适合发表在本站的内容。如果你有合适的标签能代表此类内容，请在提交时一并附上。',
   },
 ]
 
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 2bb488aa9..247e731ba 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -33,16 +33,19 @@ const AbuseReportContainer: React.FC<TProps> = ({
   testid,
 }) => {
   useInit(store)
-  const { view, itemsData, activeItem } = store
-
-  console.log('# activeItem -> ', activeItem)
+  const { view, itemsData, activeItem, explainItem } = store
 
   return (
     <Modal width="500px" show showCloseBtn onClose={() => console.log('close')}>
       <Wrapper testid={testid}>
         <Header />
-        <ArticleReport view={view} items={itemsData} activeItem={activeItem} />
-        <Footer />
+        <ArticleReport
+          view={view}
+          items={itemsData}
+          activeItem={activeItem}
+          explainItem={explainItem}
+        />
+        <Footer view={view} />
       </Wrapper>
     </Modal>
   )
diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
index f18346cfa..605075017 100755
--- a/src/containers/tool/AbuseReport/logic.ts
+++ b/src/containers/tool/AbuseReport/logic.ts
@@ -11,8 +11,16 @@ let store: TStore | undefined
 /* eslint-disable-next-line */
 const log = buildLog('L:AbuseReport')
 
+export const goBack = (): void => {
+  store.mark({ view: 'main' })
+}
+
+export const explainItem = (explainItemRaw: string): void => {
+  store.mark({ explainItemRaw, view: 'detail' })
+}
+
 export const selectItem = (checkedItemRaw: string): void => {
-  store.mark({ checkedItemRaw })
+  store.mark({ checkedItemRaw, view: 'info' })
 }
 
 // ###############################
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
index 8a5a0f62f..964226324 100755
--- a/src/containers/tool/AbuseReport/store.ts
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -35,6 +35,7 @@ const AbuseReport = T.model('AbuseReport', {
   type: T.optional(T.enumeration(values(REPORT_TYPE)), REPORT_TYPE.ARTICLE),
   items: T.optional(T.array(Item), articleItems),
   checkedItemRaw: T.maybeNull(T.string),
+  explainItemRaw: T.maybeNull(T.string),
   view: T.optional(T.enumeration(['main', 'detail', 'info']), 'main'),
 })
   .views((self) => ({
@@ -56,6 +57,16 @@ const AbuseReport = T.model('AbuseReport', {
 
       return findItem || initItem
     },
+
+    get explainItem(): TREPORT_ITEM {
+      const { itemsData, explainItemRaw } = self as TStore
+      const findItem = find(
+        propEq('raw', explainItemRaw),
+        itemsData,
+      ) as TREPORT_ITEM
+
+      return findItem || initItem
+    },
   }))
   .actions((self) => ({
     mark(sobj: Record<string, unknown>): void {

From 495d4b8c1560a8254436902c83a601a35092986e Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 21:46:30 +0800
Subject: [PATCH 10/21] chore(abuse-report): wip

---
 .../tool/AbuseReport/ArticleReport/Detail.tsx | 15 ++++-----
 .../tool/AbuseReport/ArticleReport/Info.tsx   | 31 -------------------
 .../tool/AbuseReport/ArticleReport/Main.tsx   | 13 ++------
 .../tool/AbuseReport/ArticleReport/index.tsx  | 18 ++---------
 src/containers/tool/AbuseReport/Footer.tsx    |  4 +--
 src/containers/tool/AbuseReport/index.tsx     |  9 ++----
 src/containers/tool/AbuseReport/logic.ts      |  6 +---
 src/containers/tool/AbuseReport/store.ts      | 13 +-------
 .../styles/article_report/info.tsx            |  3 +-
 .../AbuseReport/styles/article_report/main.ts | 19 +++---------
 10 files changed, 24 insertions(+), 107 deletions(-)
 delete mode 100644 src/containers/tool/AbuseReport/ArticleReport/Info.tsx

diff --git a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
index 1aa2cc557..7766d3dc3 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
@@ -4,27 +4,28 @@ import { Br } from '@/components/Common'
 import { ArrowButton } from '@/components/Buttons'
 
 import type { TREPORT_ITEM } from '../spec'
+import { Wrapper } from '../styles/article_report/info'
 import { goBack } from '../logic'
 
 type TProps = {
-  explainItem: TREPORT_ITEM
+  activeItem: TREPORT_ITEM
 }
 
-const Detail: React.FC<TProps> = ({ explainItem }) => {
+const Info: React.FC<TProps> = ({ activeItem }) => {
   return (
-    <div>
+    <Wrapper>
       <ArrowButton
         size="small"
         direction="left"
         arrowStyle="simple"
         onClick={() => goBack()}
       >
-        {explainItem.title}
+        {activeItem.title}
       </ArrowButton>
       <Br bottom={20} />
-      <div>{explainItem.detail}</div>
-    </div>
+      <div>{activeItem.detail}</div>
+    </Wrapper>
   )
 }
 
-export default Detail
+export default Info
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Info.tsx b/src/containers/tool/AbuseReport/ArticleReport/Info.tsx
deleted file mode 100644
index 754727dc2..000000000
--- a/src/containers/tool/AbuseReport/ArticleReport/Info.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-
-import { Br } from '@/components/Common'
-import { ArrowButton } from '@/components/Buttons'
-
-import type { TREPORT_ITEM } from '../spec'
-import { Wrapper } from '../styles/article_report/info'
-import { goBack } from '../logic'
-
-type TProps = {
-  activeItem: TREPORT_ITEM
-}
-
-const Info: React.FC<TProps> = ({ activeItem }) => {
-  return (
-    <Wrapper>
-      <ArrowButton
-        size="small"
-        direction="left"
-        arrowStyle="simple"
-        onClick={() => goBack()}
-      >
-        {activeItem.title}
-      </ArrowButton>
-      <Br bottom={20} />
-      <div>这里是 info 信息</div>
-    </Wrapper>
-  )
-}
-
-export default Info
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Main.tsx b/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
index 97aeaddbb..1c104b280 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
@@ -7,13 +7,8 @@ import Checker from '@/components/Checker'
 
 import type { TREPORT_ITEM } from '../spec'
 
-import {
-  Option,
-  SelectWrapper,
-  Title,
-  QuestionIcon,
-} from '../styles/article_report/main'
-import { selectItem, explainItem } from '../logic'
+import { Option, SelectWrapper, Title } from '../styles/article_report/main'
+import { selectItem } from '../logic'
 
 type TProps = {
   items: TREPORT_ITEM[]
@@ -30,10 +25,6 @@ const Main: React.FC<TProps> = ({ items, activeItem }) => {
             <Title active={item.raw === activeItem.raw}>{item.title}</Title>
           </SelectWrapper>
           <SpaceGrow />
-          <QuestionIcon
-            src={`${ICON}/shape/question.svg`}
-            onClick={() => explainItem(item.raw)}
-          />
         </Option>
       ))}
     </React.Fragment>
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
index 4942b192a..f5b2fcf47 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/index.tsx
@@ -4,29 +4,17 @@ import type { TREPORT_ITEM } from '../spec'
 
 import Main from './Main'
 import Detail from './Detail'
-import Info from './Info'
 
 type TProps = {
-  view: 'main' | 'detail' | 'info'
+  view: 'main' | 'detail'
   items: TREPORT_ITEM[]
   activeItem: TREPORT_ITEM
-  explainItem: TREPORT_ITEM
 }
 
-const ArticleReport: React.FC<TProps> = ({
-  view,
-  items,
-  activeItem,
-  explainItem,
-}) => {
-  console.log('view -> ', view)
+const ArticleReport: React.FC<TProps> = ({ view, items, activeItem }) => {
   switch (view) {
-    case 'info': {
-      return <Info activeItem={activeItem} />
-    }
-
     case 'detail': {
-      return <Detail explainItem={explainItem} />
+      return <Detail activeItem={activeItem} />
     }
 
     default: {
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
index 344b0deb5..7b1567d1b 100644
--- a/src/containers/tool/AbuseReport/Footer.tsx
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -5,11 +5,11 @@ import { YesOrNoButtons } from '@/components/Buttons'
 import { Wrapper, Note } from './styles/footer'
 
 type TProps = {
-  view: 'main' | 'detail' | 'info'
+  view: 'main' | 'detail'
 }
 
 const Footer: React.FC<TProps> = ({ view }) => {
-  if (view === 'detail') return null
+  if (view !== 'detail') return null
 
   return (
     <Wrapper>
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 247e731ba..c9bb8abbc 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -33,18 +33,13 @@ const AbuseReportContainer: React.FC<TProps> = ({
   testid,
 }) => {
   useInit(store)
-  const { view, itemsData, activeItem, explainItem } = store
+  const { view, itemsData, activeItem } = store
 
   return (
     <Modal width="500px" show showCloseBtn onClose={() => console.log('close')}>
       <Wrapper testid={testid}>
         <Header />
-        <ArticleReport
-          view={view}
-          items={itemsData}
-          activeItem={activeItem}
-          explainItem={explainItem}
-        />
+        <ArticleReport view={view} items={itemsData} activeItem={activeItem} />
         <Footer view={view} />
       </Wrapper>
     </Modal>
diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
index 605075017..c89801ab1 100755
--- a/src/containers/tool/AbuseReport/logic.ts
+++ b/src/containers/tool/AbuseReport/logic.ts
@@ -15,12 +15,8 @@ export const goBack = (): void => {
   store.mark({ view: 'main' })
 }
 
-export const explainItem = (explainItemRaw: string): void => {
-  store.mark({ explainItemRaw, view: 'detail' })
-}
-
 export const selectItem = (checkedItemRaw: string): void => {
-  store.mark({ checkedItemRaw, view: 'info' })
+  store.mark({ checkedItemRaw, view: 'detail' })
 }
 
 // ###############################
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
index 964226324..2c51b750a 100755
--- a/src/containers/tool/AbuseReport/store.ts
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -35,8 +35,7 @@ const AbuseReport = T.model('AbuseReport', {
   type: T.optional(T.enumeration(values(REPORT_TYPE)), REPORT_TYPE.ARTICLE),
   items: T.optional(T.array(Item), articleItems),
   checkedItemRaw: T.maybeNull(T.string),
-  explainItemRaw: T.maybeNull(T.string),
-  view: T.optional(T.enumeration(['main', 'detail', 'info']), 'main'),
+  view: T.optional(T.enumeration(['main', 'detail']), 'main'),
 })
   .views((self) => ({
     get curCommunity(): TCommunity {
@@ -57,16 +56,6 @@ const AbuseReport = T.model('AbuseReport', {
 
       return findItem || initItem
     },
-
-    get explainItem(): TREPORT_ITEM {
-      const { itemsData, explainItemRaw } = self as TStore
-      const findItem = find(
-        propEq('raw', explainItemRaw),
-        itemsData,
-      ) as TREPORT_ITEM
-
-      return findItem || initItem
-    },
   }))
   .actions((self) => ({
     mark(sobj: Record<string, unknown>): void {
diff --git a/src/containers/tool/AbuseReport/styles/article_report/info.tsx b/src/containers/tool/AbuseReport/styles/article_report/info.tsx
index b562c17fb..f9ae7d61a 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/info.tsx
+++ b/src/containers/tool/AbuseReport/styles/article_report/info.tsx
@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 
-import Img from '@/Img'
-import { css, theme } from '@/utils'
+import { css } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
diff --git a/src/containers/tool/AbuseReport/styles/article_report/main.ts b/src/containers/tool/AbuseReport/styles/article_report/main.ts
index 913df98c3..8f9dcab86 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/main.ts
+++ b/src/containers/tool/AbuseReport/styles/article_report/main.ts
@@ -13,6 +13,10 @@ export const Option = styled.div`
   padding: 12px 0;
   border-bottom: 1px solid;
   border-bottom-color: #114b5f;
+
+  :last-child {
+    border-bottom: none;
+  }
 `
 export const SelectWrapper = styled.div`
   ${css.flex('align-center')};
@@ -28,18 +32,3 @@ export const Title = styled.div<TActive>`
     opacity: 1;
   }
 `
-export const QuestionIcon = styled(Img)`
-  fill: ${theme('thread.articleTitle')};
-  ${css.size(16)};
-  margin-right: 10px;
-  opacity: 0;
-
-  ${Option}:hover & {
-    opacity: 1;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-  transition: all 0.25s;
-`

From dd5650c3ee54cf47ddcf49f7a05e79140db68366 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 22:46:36 +0800
Subject: [PATCH 11/21] chore(abuse-report): wip

---
 src/components/FormItem/styles/index.ts       |  1 +
 src/components/Input/Textarea.js              | 51 ---------------
 src/components/Input/Textarea.tsx             | 43 +++++++++++++
 src/components/Input/{index.js => index.tsx}  | 62 +++++++------------
 src/components/Input/styles/index.ts          |  1 +
 src/components/Input/styles/textarea.ts       |  9 ++-
 src/containers/layout/GlobalLayout/index.tsx  |  2 +-
 .../tool/AbuseReport/ArticleReport/Detail.tsx |  9 +++
 .../tool/AbuseReport/defaults/article.ts      |  3 +-
 .../AbuseReport/styles/article_report/main.ts |  1 -
 10 files changed, 87 insertions(+), 95 deletions(-)
 delete mode 100644 src/components/Input/Textarea.js
 create mode 100644 src/components/Input/Textarea.tsx
 rename src/components/Input/{index.js => index.tsx} (56%)

diff --git a/src/components/FormItem/styles/index.ts b/src/components/FormItem/styles/index.ts
index 01b710844..129daa95b 100755
--- a/src/components/FormItem/styles/index.ts
+++ b/src/components/FormItem/styles/index.ts
@@ -26,6 +26,7 @@ export const TextAreaInput = styled(Input)<{ error: string }>`
     error === 'true' ? theme('baseColor.red') : ''};
   border-right-color: ${({ error }) =>
     error === 'true' ? theme('baseColor.red') : ''};
+  border: 1px solid tomato;
 `
 
 export const FormItemWrapper = styled.div<TSpace>`
diff --git a/src/components/Input/Textarea.js b/src/components/Input/Textarea.js
deleted file mode 100644
index 1ada89659..000000000
--- a/src/components/Input/Textarea.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- *
- * Input
- *
- */
-
-import React, { useCallback } from 'react'
-import T from 'prop-types'
-import { pickBy } from 'ramda'
-
-import { buildLog } from '@/utils'
-
-import { Wrapper } from './styles/textarea'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:Input:index')
-
-const Textarea = ({ onChange, testid, ...restProps }) => {
-  const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange])
-  const validProps = pickBy((v) => v !== null, restProps)
-
-  return (
-    <Wrapper
-      testid={testid}
-      onChange={handleOnChange}
-      minRows={1}
-      spellcheck="false"
-      {...validProps}
-    />
-  )
-}
-
-Textarea.propTypes = {
-  placeholder: T.string,
-  value: T.oneOfType([T.string, T.instanceOf(null)]),
-  onChange: T.oneOfType([T.func, T.instanceOf(null)]),
-  disabled: T.bool,
-  autoFocus: T.bool,
-  testid: T.string,
-}
-
-Textarea.defaultProps = {
-  placeholder: '',
-  value: null,
-  onChange: null,
-  disabled: false,
-  autoFocus: false,
-  testid: 'input',
-}
-
-export default React.memo(Textarea)
diff --git a/src/components/Input/Textarea.tsx b/src/components/Input/Textarea.tsx
new file mode 100644
index 000000000..751fc0594
--- /dev/null
+++ b/src/components/Input/Textarea.tsx
@@ -0,0 +1,43 @@
+/*
+ *
+ * Input
+ *
+ */
+
+import React, { useCallback } from 'react'
+import { pickBy } from 'ramda'
+
+import { buildLog } from '@/utils'
+
+import { Wrapper } from './styles/textarea'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Input:index')
+
+type TProps = {
+  testid?: string
+  placeholder?: string
+  value?: string | null
+  onChange?: (e) => void | null
+}
+
+const Textarea: React.FC<TProps> = ({
+  onChange = null,
+  testid = 'textarea',
+  ...restProps
+}) => {
+  const handleOnChange = useCallback((e) => onChange?.(e), [onChange])
+  const validProps = pickBy((v) => v !== null, restProps)
+
+  return (
+    <Wrapper
+      testid={testid}
+      onChange={handleOnChange}
+      minRows={1}
+      spellcheck="false"
+      {...validProps}
+    />
+  )
+}
+
+export default React.memo(Textarea)
diff --git a/src/components/Input/index.js b/src/components/Input/index.tsx
similarity index 56%
rename from src/components/Input/index.js
rename to src/components/Input/index.tsx
index 44161e2aa..eeb4c32af 100755
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import React, { useCallback } from 'react'
-import T from 'prop-types'
 import { pickBy } from 'ramda'
 
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -22,14 +21,29 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:Input:index')
 
-const Input = ({
-  behavior,
-  onChange,
-  prefixIcon,
-  prefixActive,
-  suffixIcon,
-  suffixActive,
-  testid,
+type TProps = {
+  testid?: string
+  behavior?: 'default' | 'textarea'
+  placeholder?: string
+  value?: string | null
+  prefixIcon?: string | null
+  prefixActive?: boolean
+  suffixIcon?: string | null
+  suffixActive?: boolean
+  disabled?: boolean
+  autoFocus?: boolean
+
+  onChange?: (e) => void | null
+}
+
+const Input: React.FC<TProps> = ({
+  behavior = 'default',
+  onChange = null,
+  prefixIcon = null,
+  prefixActive = false,
+  suffixIcon = null,
+  suffixActive = false,
+  testid = 'input',
   ...restProps
 }) => {
   const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange])
@@ -53,36 +67,8 @@ const Input = ({
       </SuffixWrapper>
     </Wrapper>
   ) : (
-    <Textarea testid={testid} onChange={onChange} minRows={1} {...restProps} />
+    <Textarea testid={testid} onChange={onChange} {...restProps} />
   )
 }
 
-Input.propTypes = {
-  behavior: T.oneOf(['default', 'textarea']),
-  placeholder: T.string,
-  value: T.oneOfType([T.string, T.instanceOf(null)]),
-  onChange: T.oneOfType([T.func, T.instanceOf(null)]),
-  prefixIcon: T.oneOfType([T.string, T.instanceOf(null)]),
-  prefixActive: T.bool,
-  suffixIcon: T.oneOfType([T.string, T.instanceOf(null)]),
-  suffixActive: T.bool,
-  disabled: T.bool,
-  autoFocus: T.bool,
-  testid: T.string,
-}
-
-Input.defaultProps = {
-  behavior: 'default',
-  placeholder: '',
-  value: null,
-  onChange: null,
-  prefixIcon: null,
-  prefixActive: false,
-  suffixIcon: null,
-  suffixActive: false,
-  disabled: false,
-  autoFocus: false,
-  testid: 'input',
-}
-
 export default React.memo(Input)
diff --git a/src/components/Input/styles/index.ts b/src/components/Input/styles/index.ts
index c3e5bd775..aca079664 100755
--- a/src/components/Input/styles/index.ts
+++ b/src/components/Input/styles/index.ts
@@ -7,6 +7,7 @@ import { css, theme } from '@/utils'
 type IInput = {
   hasPrefix: boolean
   hasSuffix: boolean
+  spellcheck: string
 }
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/components/Input/styles/textarea.ts b/src/components/Input/styles/textarea.ts
index 1a277bab1..2afc041de 100644
--- a/src/components/Input/styles/textarea.ts
+++ b/src/components/Input/styles/textarea.ts
@@ -6,13 +6,18 @@ import { theme } from '@/utils'
 
 import { baseInput } from './index'
 
+type TWrapper = TTestable | { spellcheck: string }
+
 export const Wrapper = styled(TextareaAutosize).attrs(
   ({ testid }: TTestable) => ({
     'data-test-id': testid,
   }),
-)<TTestable>`
+)<TWrapper>`
   ${baseInput};
-  background-color: #0b2631;
+  color: ${theme('form.text')};
+  min-height: 56px;
+  padding: 6px 10px;
+  background-color: #06303b;
   border: 1px solid;
   border-color: ${theme('editor.border')};
   resize: none;
diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 97bc0dc6b..58d2ba7f3 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -93,7 +93,7 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
-                <div>reload</div>
+                <div>reod</div>
                 <AbuseReport />
 
                 {!noSidebar && <Sidebar />}
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
index 7766d3dc3..e4fe140d7 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import Input from '@/components/Input'
+import FormItem from '@/components/FormItem'
 import { Br } from '@/components/Common'
 import { ArrowButton } from '@/components/Buttons'
 
@@ -24,6 +26,13 @@ const Info: React.FC<TProps> = ({ activeItem }) => {
       </ArrowButton>
       <Br bottom={20} />
       <div>{activeItem.detail}</div>
+      <Br bottom={15} />
+      <Input
+        onChange={() => console.log}
+        placeholder="补充信息 (可选)"
+        behavior="textarea"
+        autoFocus
+      />
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/defaults/article.ts b/src/containers/tool/AbuseReport/defaults/article.ts
index d47540b5c..a56a52e10 100644
--- a/src/containers/tool/AbuseReport/defaults/article.ts
+++ b/src/containers/tool/AbuseReport/defaults/article.ts
@@ -12,8 +12,7 @@ const items = [
     title: '标题党',
     raw: REPORT.ARTICLE.CLICKBAIT,
     checked: false,
-    detail:
-      '包括但不限于有意夸大，制造焦虑，引战等标题。即便你是出于好意，也请停止使用各类雷人标题骗取点击，在这里只会适得其反。',
+    detail: '包括但不限于有意夸大，制造焦虑，引战等内容。',
   },
   {
     title: '硬广，软广',
diff --git a/src/containers/tool/AbuseReport/styles/article_report/main.ts b/src/containers/tool/AbuseReport/styles/article_report/main.ts
index 8f9dcab86..89e027e44 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/main.ts
+++ b/src/containers/tool/AbuseReport/styles/article_report/main.ts
@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
-import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`

From b0ad3f5c84ea3dc375d4fb96d2a0ff0b4e0d7dd9 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 25 Apr 2021 23:18:07 +0800
Subject: [PATCH 12/21] chore(abuse-report): wip

---
 src/containers/tool/AbuseReport/ArticleReport/Detail.tsx | 9 ++++-----
 src/containers/tool/AbuseReport/Footer.tsx               | 7 ++-----
 .../styles/article_report/{info.tsx => detail.tsx}       | 3 +++
 src/containers/tool/AbuseReport/styles/footer.ts         | 2 +-
 4 files changed, 10 insertions(+), 11 deletions(-)
 rename src/containers/tool/AbuseReport/styles/article_report/{info.tsx => detail.tsx} (76%)

diff --git a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
index e4fe140d7..cca9d6ba5 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
@@ -1,19 +1,18 @@
 import React from 'react'
 
 import Input from '@/components/Input'
-import FormItem from '@/components/FormItem'
 import { Br } from '@/components/Common'
 import { ArrowButton } from '@/components/Buttons'
 
 import type { TREPORT_ITEM } from '../spec'
-import { Wrapper } from '../styles/article_report/info'
+import { Wrapper, DetailDesc } from '../styles/article_report/detail'
 import { goBack } from '../logic'
 
 type TProps = {
   activeItem: TREPORT_ITEM
 }
 
-const Info: React.FC<TProps> = ({ activeItem }) => {
+const Detail: React.FC<TProps> = ({ activeItem }) => {
   return (
     <Wrapper>
       <ArrowButton
@@ -25,7 +24,7 @@ const Info: React.FC<TProps> = ({ activeItem }) => {
         {activeItem.title}
       </ArrowButton>
       <Br bottom={20} />
-      <div>{activeItem.detail}</div>
+      <DetailDesc>{activeItem.detail}</DetailDesc>
       <Br bottom={15} />
       <Input
         onChange={() => console.log}
@@ -37,4 +36,4 @@ const Info: React.FC<TProps> = ({ activeItem }) => {
   )
 }
 
-export default Info
+export default Detail
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
index 7b1567d1b..bfab17e52 100644
--- a/src/containers/tool/AbuseReport/Footer.tsx
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { YesOrNoButtons } from '@/components/Buttons'
 
-import { Wrapper, Note } from './styles/footer'
+import { Wrapper } from './styles/footer'
 
 type TProps = {
   view: 'main' | 'detail'
@@ -13,10 +13,7 @@ const Footer: React.FC<TProps> = ({ view }) => {
 
   return (
     <Wrapper>
-      <Note>
-        举报成功后社区志愿者会在第一时间处理，处理结果会公示在这里。如果你对社区治理有更好的想法或建议，请联系我们。
-      </Note>
-
+      {/* <Note>举报后社区志愿者会在第一时间【处理】。</Note> */}
       <YesOrNoButtons confirmText="举报" />
     </Wrapper>
   )
diff --git a/src/containers/tool/AbuseReport/styles/article_report/info.tsx b/src/containers/tool/AbuseReport/styles/article_report/detail.tsx
similarity index 76%
rename from src/containers/tool/AbuseReport/styles/article_report/info.tsx
rename to src/containers/tool/AbuseReport/styles/article_report/detail.tsx
index f9ae7d61a..082e6b6ec 100644
--- a/src/containers/tool/AbuseReport/styles/article_report/info.tsx
+++ b/src/containers/tool/AbuseReport/styles/article_report/detail.tsx
@@ -8,3 +8,6 @@ export const Wrapper = styled.div`
 export const Title = styled.div`
   ${css.flexColumn()};
 `
+export const DetailDesc = styled.div`
+  padding: 0 5px;
+`
diff --git a/src/containers/tool/AbuseReport/styles/footer.ts b/src/containers/tool/AbuseReport/styles/footer.ts
index 06fc52029..3df4814ae 100644
--- a/src/containers/tool/AbuseReport/styles/footer.ts
+++ b/src/containers/tool/AbuseReport/styles/footer.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div`
-  margin-top: 20px;
+  margin-top: 35px;
 `
 export const Note = styled.div`
   color: ${theme('thread.articleDigest')};

From 2f1fa084ea27a5c0e5fdb22d2907c1ed391fca20 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 08:30:55 +0800
Subject: [PATCH 13/21] chore(abuse-report): wip

---
 src/containers/layout/GlobalLayout/index.tsx             | 2 +-
 src/containers/tool/AbuseReport/ArticleReport/Detail.tsx | 4 ++--
 src/containers/tool/AbuseReport/defaults/article.ts      | 3 ++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 58d2ba7f3..e7a0f450b 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -93,7 +93,7 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
-                <div>reod</div>
+                <div>rreod</div>
                 <AbuseReport />
 
                 {!noSidebar && <Sidebar />}
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
index cca9d6ba5..39a1c6169 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
+++ b/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
@@ -23,9 +23,9 @@ const Detail: React.FC<TProps> = ({ activeItem }) => {
       >
         {activeItem.title}
       </ArrowButton>
-      <Br bottom={20} />
+      <Br bottom={10} />
       <DetailDesc>{activeItem.detail}</DetailDesc>
-      <Br bottom={15} />
+      <Br bottom={25} />
       <Input
         onChange={() => console.log}
         placeholder="补充信息 (可选)"
diff --git a/src/containers/tool/AbuseReport/defaults/article.ts b/src/containers/tool/AbuseReport/defaults/article.ts
index a56a52e10..160999b38 100644
--- a/src/containers/tool/AbuseReport/defaults/article.ts
+++ b/src/containers/tool/AbuseReport/defaults/article.ts
@@ -12,7 +12,8 @@ const items = [
     title: '标题党',
     raw: REPORT.ARTICLE.CLICKBAIT,
     checked: false,
-    detail: '包括但不限于有意夸大，制造焦虑，引战等内容。',
+    detail:
+      '包括但不限于有意夸大，制造焦虑，引战等内容。一般来说，含有「史上」，「xx万字吐血整理」，「必问/必考」以及包含一个甚至多个感叹号的标题大概率属于此类。',
   },
   {
     title: '硬广，软广',

From 04a3acb8f65efd02ad88bf56f7f014234b160791 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 10:58:06 +0800
Subject: [PATCH 14/21] refactor(reporter): update docs

---
 .../tool/AbuseReport/defaults/article.ts      | 17 ++++---
 .../tool/AbuseReport/defaults/comment.ts      | 45 +++++++++++++++++++
 .../tool/AbuseReport/defaults/community.ts    | 27 +++++++++++
 .../tool/AbuseReport/defaults/user.ts         | 39 ++++++++++++++++
 4 files changed, 119 insertions(+), 9 deletions(-)
 create mode 100644 src/containers/tool/AbuseReport/defaults/comment.ts
 create mode 100644 src/containers/tool/AbuseReport/defaults/community.ts
 create mode 100644 src/containers/tool/AbuseReport/defaults/user.ts

diff --git a/src/containers/tool/AbuseReport/defaults/article.ts b/src/containers/tool/AbuseReport/defaults/article.ts
index 160999b38..521156f3a 100644
--- a/src/containers/tool/AbuseReport/defaults/article.ts
+++ b/src/containers/tool/AbuseReport/defaults/article.ts
@@ -5,7 +5,6 @@ const items = [
     title: '重复内容',
     raw: REPORT.ARTICLE.DUPLICATE,
     checked: false,
-    // info: "",
     detail: '已有类似的讨论、问题，或者常见的日经贴、月经贴。',
   },
   {
@@ -13,17 +12,17 @@ const items = [
     raw: REPORT.ARTICLE.CLICKBAIT,
     checked: false,
     detail:
-      '包括但不限于有意夸大，制造焦虑，引战等内容。一般来说，含有「史上」，「xx万字吐血整理」，「必问/必考」以及包含一个甚至多个感叹号的标题大概率属于此类。',
+      '包括但不限于有意夸大，制造焦虑，引战等引流内容。一般来说含有「史上」，「xx万字吐血整理」，「必问/必考」以及包含一个甚至多个「!」或 emoji 的标题大概率属于此类。',
   },
   {
-    title: '硬广，软广',
-    raw: REPORT.ARTICLE.AD,
+    title: '传单',
+    raw: REPORT.FLYER,
     checked: false,
-    detail: '包括但不限于各种厂商活动推广，公众号、面经推广等等。',
+    detail: '包括但不限于各种厂商活动推广，公众号、面经推广等硬/软广内容。',
   },
   {
     title: '侵权内容',
-    raw: REPORT.ARTICLE.VIOLATION,
+    raw: REPORT.VIOLATION,
     checked: false,
     detail:
       '包括但不限于盗版话题讨论，未授权转载，人身攻击，无根据造谣等内容。',
@@ -37,14 +36,14 @@ const items = [
   },
   {
     title: '违法违规',
-    raw: REPORT.ARTICLE.LAWS,
+    raw: REPORT.LAWS,
     checked: false,
     detail:
-      '包括但不限于黄赌毒、涉政，涉暴以及民族宗教等明确不适合在本站讨论的信息。一经查实，账号将被永久封禁。',
+      '包括但不限于黄赌毒、涉政，涉暴以及民族宗教等明确不适合在本站讨论的信息。一经查实，相关账号将同时被永久封禁。',
   },
   {
     title: '其他',
-    raw: REPORT.ARTICLE.OTHERS,
+    raw: REPORT.OTHERS,
     checked: false,
     detail:
       '其他你认为不适合发表在本站的内容。如果你有合适的标签能代表此类内容，请在提交时一并附上。',
diff --git a/src/containers/tool/AbuseReport/defaults/comment.ts b/src/containers/tool/AbuseReport/defaults/comment.ts
new file mode 100644
index 000000000..73fac2ee8
--- /dev/null
+++ b/src/containers/tool/AbuseReport/defaults/comment.ts
@@ -0,0 +1,45 @@
+import { REPORT } from '@/constant'
+
+const items = [
+  {
+    title: '不良信息',
+    raw: REPORT.COMMENT.BAD_INFO,
+    checked: false,
+    detail:
+      '包括但不限于无意义灌水、阴阳怪气、杠精言论、制造焦虑、人身攻击、低俗言论、不友善、无聊引战等内容。',
+  },
+  {
+    title: '跑题内容',
+    raw: REPORT.COMMENT.OFF_TOPIC,
+    checked: false,
+    detail: '所讨论或回答的内容与主题无关，且没有建设性。',
+  },
+  {
+    title: '传单',
+    raw: REPORT.FLYER,
+    checked: false,
+    detail: '包括但不限于各种厂商活动推广，公众号、面经推广等各种硬/软广内容。',
+  },
+  {
+    title: '侵权内容',
+    raw: REPORT.VIOLATION,
+    checked: false,
+    detail: '包括但不限于盗版话题讨论，无根据造谣等内容。',
+  },
+  {
+    title: '违法违规',
+    raw: REPORT.LAWS,
+    checked: false,
+    detail:
+      '包括但不限于黄赌毒、涉政，涉暴以及民族宗教等明确不适合在本站讨论的信息。一经查实，相关账号将同时被永久封禁。',
+  },
+  {
+    title: '其他',
+    raw: REPORT.OTHERS,
+    checked: false,
+    detail:
+      '其他你认为不适合发表在评论区的内容。如果你有合适的标签能代表此类内容，请在提交时一并附上。',
+  },
+]
+
+export default items
diff --git a/src/containers/tool/AbuseReport/defaults/community.ts b/src/containers/tool/AbuseReport/defaults/community.ts
new file mode 100644
index 000000000..454d65d8c
--- /dev/null
+++ b/src/containers/tool/AbuseReport/defaults/community.ts
@@ -0,0 +1,27 @@
+import { REPORT } from '@/constant'
+
+const items = [
+  {
+    title: '不良风气',
+    raw: REPORT.COMMUNITY.BAD_ETHOS,
+    checked: false,
+    detail:
+      '该社区内多数内容令人不适，存在明显违背主流价值观的内容，包括但不限于教唆炒X，无底线割韭菜等。',
+  },
+  {
+    title: '违法违规',
+    raw: REPORT.LAWS,
+    checked: false,
+    detail:
+      '该社区经常出现黄赌毒、涉政，涉暴以及民族宗教等明确不适合在本站讨论的内容，一经查实，相关账号将同时被永久封禁。',
+  },
+  {
+    title: '其他',
+    raw: REPORT.OTHERS,
+    checked: false,
+    detail:
+      '该社区不适合本站。如果你有合适的标签能代表此类账户，请在提交时一并附上。',
+  },
+]
+
+export default items
diff --git a/src/containers/tool/AbuseReport/defaults/user.ts b/src/containers/tool/AbuseReport/defaults/user.ts
new file mode 100644
index 000000000..e2ac19b4d
--- /dev/null
+++ b/src/containers/tool/AbuseReport/defaults/user.ts
@@ -0,0 +1,39 @@
+import { REPORT } from '@/constant'
+
+const items = [
+  {
+    title: '散播不良信息',
+    raw: REPORT.USER.SPAMMER,
+    checked: false,
+    detail:
+      '该用户所发布内容多为无意义灌水、阴阳怪气、杠精言论、制造焦虑、人身攻击、低俗言论、不友善、无聊引战等负能量内容。',
+  },
+  {
+    title: '乱发传单',
+    raw: REPORT.FLYER,
+    checked: false,
+    detail: '该用户所发布内容多为低质量产品/服务广告，标题党等 SEO 引流内容。',
+  },
+  {
+    title: '滥用权限',
+    raw: REPORT.USER.ABUSE_POWER,
+    checked: false,
+    detail: '该用户滥用社区管理权限，给社区造成不良影响或不必要的麻烦。',
+  },
+  {
+    title: '违法违规',
+    raw: REPORT.LAWS,
+    checked: false,
+    detail:
+      '该用户发布过黄赌毒、涉政，涉暴以及民族宗教等明确不适合在本站讨论的信息。一经查实，账号将被永久封禁。',
+  },
+  {
+    title: '其他',
+    raw: REPORT.OTHERS,
+    checked: false,
+    detail:
+      '该用户不适合本社区。如果你有合适的标签能代表此类账户，请在提交时一并附上。',
+  },
+]
+
+export default items

From f8067adc983816b15161756cee783f5e26d27d06 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 11:50:13 +0800
Subject: [PATCH 15/21] chore(abuse-report): wip

---
 src/containers/layout/GlobalLayout/index.tsx  |  1 -
 src/containers/tool/AbuseReport/Header.tsx    | 26 +++++++-
 .../Detail.tsx                                |  2 +-
 .../{ArticleReport => ReportContent}/Main.tsx |  4 +-
 .../index.tsx                                 |  4 +-
 src/containers/tool/AbuseReport/index.tsx     | 12 ++--
 src/containers/tool/AbuseReport/logic.ts      | 63 +++++++++++++++++--
 src/containers/tool/AbuseReport/store.ts      |  5 +-
 .../detail.tsx                                |  0
 .../main.ts                                   |  0
 src/containers/tool/Drawer/logic.ts           |  2 +-
 src/containers/unit/Header/index.tsx          | 10 ++-
 src/spec/index.ts                             |  2 +
 src/spec/utils.ts                             |  8 +++
 utils/constant/event.ts                       |  3 +
 utils/constant/type.ts                        |  7 +++
 utils/helper.ts                               |  9 ++-
 utils/index.ts                                |  1 +
 18 files changed, 135 insertions(+), 24 deletions(-)
 rename src/containers/tool/AbuseReport/{ArticleReport => ReportContent}/Detail.tsx (92%)
 rename src/containers/tool/AbuseReport/{ArticleReport => ReportContent}/Main.tsx (87%)
 rename src/containers/tool/AbuseReport/{ArticleReport => ReportContent}/index.tsx (81%)
 rename src/containers/tool/AbuseReport/styles/{article_report => report_content}/detail.tsx (100%)
 rename src/containers/tool/AbuseReport/styles/{article_report => report_content}/main.ts (100%)

diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index e7a0f450b..b08b9e5a3 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -93,7 +93,6 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
-                <div>rreod</div>
                 <AbuseReport />
 
                 {!noSidebar && <Sidebar />}
diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
index 155dbb8fe..391053ad9 100644
--- a/src/containers/tool/AbuseReport/Header.tsx
+++ b/src/containers/tool/AbuseReport/Header.tsx
@@ -1,13 +1,35 @@
 import React from 'react'
 
+import { REPORT_TYPE } from '@/constant'
 import { ICON } from '@/config'
 import { Wrapper, ReportIcon, Text, ContentTitle } from './styles/header'
 
-const Header: React.FC = () => {
+const getCustomTitle = (type: string): string => {
+  switch (type) {
+    case REPORT_TYPE.USER: {
+      return '用户'
+    }
+    case REPORT_TYPE.COMMENT: {
+      return '评论'
+    }
+    case REPORT_TYPE.COMMUNITY: {
+      return '社区'
+    }
+    default: {
+      return '帖子'
+    }
+  }
+}
+
+type TProps = {
+  type: string
+}
+
+const Header: React.FC<TProps> = ({ type }) => {
   return (
     <Wrapper>
       <ReportIcon src={`${ICON}/article/report-solid.svg`} />
-      <Text>举报内容</Text>
+      <Text>举报{getCustomTitle(type)}</Text>
       <ContentTitle>这是一首简单的小情歌</ContentTitle>
     </Wrapper>
   )
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx b/src/containers/tool/AbuseReport/ReportContent/Detail.tsx
similarity index 92%
rename from src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
rename to src/containers/tool/AbuseReport/ReportContent/Detail.tsx
index 39a1c6169..3dd8cac0c 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Detail.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Detail.tsx
@@ -5,7 +5,7 @@ import { Br } from '@/components/Common'
 import { ArrowButton } from '@/components/Buttons'
 
 import type { TREPORT_ITEM } from '../spec'
-import { Wrapper, DetailDesc } from '../styles/article_report/detail'
+import { Wrapper, DetailDesc } from '../styles/report_content/detail'
 import { goBack } from '../logic'
 
 type TProps = {
diff --git a/src/containers/tool/AbuseReport/ArticleReport/Main.tsx b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
similarity index 87%
rename from src/containers/tool/AbuseReport/ArticleReport/Main.tsx
rename to src/containers/tool/AbuseReport/ReportContent/Main.tsx
index 1c104b280..52e14fe74 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/Main.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
 
-import { ICON } from '@/config'
-
 import { SpaceGrow } from '@/components/Common'
 import Checker from '@/components/Checker'
 
 import type { TREPORT_ITEM } from '../spec'
 
-import { Option, SelectWrapper, Title } from '../styles/article_report/main'
+import { Option, SelectWrapper, Title } from '../styles/report_content/main'
 import { selectItem } from '../logic'
 
 type TProps = {
diff --git a/src/containers/tool/AbuseReport/ArticleReport/index.tsx b/src/containers/tool/AbuseReport/ReportContent/index.tsx
similarity index 81%
rename from src/containers/tool/AbuseReport/ArticleReport/index.tsx
rename to src/containers/tool/AbuseReport/ReportContent/index.tsx
index f5b2fcf47..843e59b87 100644
--- a/src/containers/tool/AbuseReport/ArticleReport/index.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/index.tsx
@@ -11,7 +11,7 @@ type TProps = {
   activeItem: TREPORT_ITEM
 }
 
-const ArticleReport: React.FC<TProps> = ({ view, items, activeItem }) => {
+const ReportContent: React.FC<TProps> = ({ view, items, activeItem }) => {
   switch (view) {
     case 'detail': {
       return <Detail activeItem={activeItem} />
@@ -23,4 +23,4 @@ const ArticleReport: React.FC<TProps> = ({ view, items, activeItem }) => {
   }
 }
 
-export default ArticleReport
+export default ReportContent
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index c9bb8abbc..936f221be 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -14,11 +14,11 @@ import Modal from '@/components/Modal'
 
 import Header from './Header'
 import Footer from './Footer'
-import ArticleReport from './ArticleReport'
+import ReportContent from './ReportContent'
 
 import type { TStore } from './store'
 import { Wrapper } from './styles'
-import { useInit } from './logic'
+import { useInit, close } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:AbuseReport')
@@ -33,13 +33,13 @@ const AbuseReportContainer: React.FC<TProps> = ({
   testid,
 }) => {
   useInit(store)
-  const { view, itemsData, activeItem } = store
+  const { show, type, view, itemsData, activeItem } = store
 
   return (
-    <Modal width="500px" show showCloseBtn onClose={() => console.log('close')}>
+    <Modal width="500px" show={show} showCloseBtn onClose={() => close()}>
       <Wrapper testid={testid}>
-        <Header />
-        <ArticleReport view={view} items={itemsData} activeItem={activeItem} />
+        <Header type={type} />
+        <ReportContent view={view} items={itemsData} activeItem={activeItem} />
         <Footer view={view} />
       </Wrapper>
     </Modal>
diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
index c89801ab1..5aab7d2b5 100755
--- a/src/containers/tool/AbuseReport/logic.ts
+++ b/src/containers/tool/AbuseReport/logic.ts
@@ -1,32 +1,87 @@
 import { useEffect } from 'react'
-// import { } from 'ramda'
 
-import { buildLog } from '@/utils'
+import { TYPE, EVENT } from '@/constant'
+import { buildLog, asyncSuit } from '@/utils'
+
+import articleItems from './defaults/article'
+import userItems from './defaults/user'
+import commentItems from './defaults/comment'
+import communityItems from './defaults/community'
 
 // import S from './service'
 import type { TStore } from './store'
 
+const { SR71, $solver, asyncRes } = asyncSuit
+const sr71$ = new SR71({
+  receive: EVENT.REPORT,
+})
+
 let store: TStore | undefined
+let sub$ = null
 
 /* eslint-disable-next-line */
 const log = buildLog('L:AbuseReport')
 
+/**
+ * go back to select items view
+ */
 export const goBack = (): void => {
   store.mark({ view: 'main' })
 }
 
+/**
+ * select one reason, then goto detail view
+ */
 export const selectItem = (checkedItemRaw: string): void => {
   store.mark({ checkedItemRaw, view: 'detail' })
 }
 
+export const close = (): void => store.mark({ show: false })
+
+const DataResolver = [
+  {
+    match: asyncRes(EVENT.REPORT),
+    action: (res) => {
+      const payload = res[EVENT.REPORT]
+      console.log('payload --> ', payload)
+
+      switch (payload.type) {
+        case TYPE.REPORT.USER: {
+          return store.mark({ items: userItems, show: true })
+        }
+
+        case TYPE.REPORT.COMMUNITY: {
+          return store.mark({ items: communityItems, show: true })
+        }
+
+        case TYPE.REPORT.COMMENT: {
+          return store.mark({ items: commentItems, show: true })
+        }
+
+        default: {
+          return store.mark({ items: articleItems, show: true })
+        }
+      }
+    },
+  },
+]
+
 // ###############################
 // init & uninit handlers
 // ###############################
 
 export const useInit = (_store: TStore): void => {
-  useEffect(() => {
+  useEffect((): (() => void) => {
     store = _store
+    if (!sub$) {
+      sub$ = sr71$.data().subscribe($solver(DataResolver, []))
+    }
     log('useInit: ', store)
-    // return () => store.reset()
+    return () => {
+      if (!sub$) return
+      sr71$.stop()
+      sub$.unsubscribe()
+      sub$ = null
+    }
   }, [_store])
 }
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
index 2c51b750a..16c2713cd 100755
--- a/src/containers/tool/AbuseReport/store.ts
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -25,14 +25,15 @@ const initItem = {
 
 const Item = T.model('AbuseReport', {
   title: T.string,
-  raw: T.enumeration(values(REPORT.ARTICLE)),
+  raw: T.string,
   checked: T.optional(T.boolean, false),
   info: T.optional(T.string, ''),
   detail: T.optional(T.string, ''),
 })
 
 const AbuseReport = T.model('AbuseReport', {
-  type: T.optional(T.enumeration(values(REPORT_TYPE)), REPORT_TYPE.ARTICLE),
+  show: T.optional(T.boolean, false),
+  type: T.optional(T.string, REPORT_TYPE.ARTICLE),
   items: T.optional(T.array(Item), articleItems),
   checkedItemRaw: T.maybeNull(T.string),
   view: T.optional(T.enumeration(['main', 'detail']), 'main'),
diff --git a/src/containers/tool/AbuseReport/styles/article_report/detail.tsx b/src/containers/tool/AbuseReport/styles/report_content/detail.tsx
similarity index 100%
rename from src/containers/tool/AbuseReport/styles/article_report/detail.tsx
rename to src/containers/tool/AbuseReport/styles/report_content/detail.tsx
diff --git a/src/containers/tool/AbuseReport/styles/article_report/main.ts b/src/containers/tool/AbuseReport/styles/report_content/main.ts
similarity index 100%
rename from src/containers/tool/AbuseReport/styles/article_report/main.ts
rename to src/containers/tool/AbuseReport/styles/report_content/main.ts
diff --git a/src/containers/tool/Drawer/logic.ts b/src/containers/tool/Drawer/logic.ts
index eb4f63672..0e3dd0bfb 100755
--- a/src/containers/tool/Drawer/logic.ts
+++ b/src/containers/tool/Drawer/logic.ts
@@ -228,7 +228,7 @@ export const useInit = (_store: TStore, windowWidth: number): void => {
     store.mark({ windowWidth })
 
     return () => {
-      if (!sub$) return false
+      if (!sub$) return
       sr71$.stop()
       sub$.unsubscribe()
       sub$ = null
diff --git a/src/containers/unit/Header/index.tsx b/src/containers/unit/Header/index.tsx
index 2198e7559..69e5c8f49 100755
--- a/src/containers/unit/Header/index.tsx
+++ b/src/containers/unit/Header/index.tsx
@@ -8,6 +8,7 @@ import React from 'react'
 
 import { ANCHOR } from '@/constant'
 import { useDevice } from '@/hooks'
+import { report } from '@/utils'
 
 import DesktopView from './DesktopView/index'
 
@@ -17,7 +18,14 @@ const HeaderContainer = ({ metric }) => {
   const { isMobile } = useDevice()
 
   return (
-    <Wrapper id={ANCHOR.GLOBAL_HEADER_ID} testid="">
+    <Wrapper
+      id={ANCHOR.GLOBAL_HEADER_ID}
+      testid=""
+      onClick={() => {
+        console.log('report it!')
+        report('ARTICLE')
+      }}
+    >
       {!isMobile ? <DesktopView metric={metric} /> : <MobileWrapper />}
     </Wrapper>
   )
diff --git a/src/spec/index.ts b/src/spec/index.ts
index 508b0897f..293496213 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -30,6 +30,8 @@ export type {
   TScrollDirection,
   TTooltipAnimation,
   TTooltipPlacement,
+  TReportType,
+  TAttInfo,
 } from './utils'
 
 export type { TGQLError } from './graphql'
diff --git a/src/spec/utils.ts b/src/spec/utils.ts
index 7063cb2b0..22adec087 100644
--- a/src/spec/utils.ts
+++ b/src/spec/utils.ts
@@ -69,3 +69,11 @@ export type TTooltipPlacement =
   | 'right'
   | 'right-start'
   | 'right-end'
+
+export type TReportType = 'ARTICLE' | 'USER' | 'COMMENT' | 'COMMUNITY'
+
+export type TAttInfo = {
+  id: string
+  title: string
+  // ...
+}
diff --git a/utils/constant/event.ts b/utils/constant/event.ts
index ac9decdc1..1a7c26fe8 100755
--- a/utils/constant/event.ts
+++ b/utils/constant/event.ts
@@ -14,6 +14,9 @@ const EVENT = {
     AFTER_CLOSE: 'AFTER_DRAWER_CLOSE',
     CONTENT_DRAGABLE: 'CONTENT_DRAGABLE',
   },
+
+  // report
+  REPORT: 'REPORT',
   // new end
   USER_LISTER_OPEN: 'USER_LISTER_OPEN',
   CALL_CASHIER: 'CALL_CASHIER',
diff --git a/utils/constant/type.ts b/utils/constant/type.ts
index 82faae163..b08d9fe9a 100755
--- a/utils/constant/type.ts
+++ b/utils/constant/type.ts
@@ -58,6 +58,13 @@ const TYPE = {
     MODELINE_MENU: 'MODELINE_MENU',
   },
 
+  REPORT: {
+    ARTICLE: 'ARTICLE',
+    USER: 'USER',
+    COMMENT: 'COMMENT',
+    COMMUNITY: 'COMMUNITY',
+  },
+
   // modeline menu type
   MM_TYPE: {
     GLOBAL_MENU: 'global_menu',
diff --git a/utils/helper.ts b/utils/helper.ts
index 33ec3ad02..72534faeb 100755
--- a/utils/helper.ts
+++ b/utils/helper.ts
@@ -2,7 +2,7 @@ import { curry, reduce, keys, sort, uniq, tap } from 'ramda'
 import PubSub from 'pubsub-js'
 import { limit, length } from 'stringz'
 
-import type { TGQLError } from '@/spec'
+import type { TGQLError, TReportType, TAttInfo } from '@/spec'
 import { TAG_COLOR_ORDER } from '@/config'
 import { EVENT } from '@/constant'
 
@@ -146,6 +146,13 @@ export const send = (msg: string, data = {}): void => {
 export const closeDrawer = (type = ''): void =>
   send(EVENT.DRAWER.CLOSE, { type })
 
+/**
+ * report content
+ */
+export const report = (type: TReportType, data?: TAttInfo): void => {
+  send(EVENT.REPORT, { type, data })
+}
+
 /**
  * hepler for call the JoinModal Container to show wechatQRCode or mail scriscribe list etc ..
  *
diff --git a/utils/index.ts b/utils/index.ts
index df130753e..f1dc40cf2 100755
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -28,6 +28,7 @@ export {
   countWords,
   joinUS,
   closeDrawer,
+  report,
   errRescue,
   debounce,
   extractMentions,

From ae7d3e25b787314da08b00bdb5c2e6f7d8d2118f Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 11:59:44 +0800
Subject: [PATCH 16/21] chore(abuse-report): wip

---
 src/containers/tool/AbuseReport/logic.ts | 15 +++++++--------
 src/containers/tool/AbuseReport/store.ts |  4 ++--
 src/containers/unit/Header/index.tsx     |  2 +-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
index 5aab7d2b5..11e628491 100755
--- a/src/containers/tool/AbuseReport/logic.ts
+++ b/src/containers/tool/AbuseReport/logic.ts
@@ -42,24 +42,23 @@ const DataResolver = [
   {
     match: asyncRes(EVENT.REPORT),
     action: (res) => {
-      const payload = res[EVENT.REPORT]
-      console.log('payload --> ', payload)
-
-      switch (payload.type) {
+      const { type } = res[EVENT.REPORT]
+      switch (type) {
+        // load user info
         case TYPE.REPORT.USER: {
-          return store.mark({ items: userItems, show: true })
+          return store.mark({ type, items: userItems, show: true })
         }
 
         case TYPE.REPORT.COMMUNITY: {
-          return store.mark({ items: communityItems, show: true })
+          return store.mark({ type, items: communityItems, show: true })
         }
 
         case TYPE.REPORT.COMMENT: {
-          return store.mark({ items: commentItems, show: true })
+          return store.mark({ type, items: commentItems, show: true })
         }
 
         default: {
-          return store.mark({ items: articleItems, show: true })
+          return store.mark({ type, items: articleItems, show: true })
         }
       }
     },
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
index 16c2713cd..f63d90d51 100755
--- a/src/containers/tool/AbuseReport/store.ts
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -3,9 +3,9 @@
  */
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
-import { values, find, propEq } from 'ramda'
+import { find, propEq } from 'ramda'
 
-import { REPORT_TYPE, REPORT } from '@/constant'
+import { REPORT_TYPE } from '@/constant'
 
 import type { TCommunity, TRootStore } from '@/spec'
 import { markStates, buildLog, stripMobx } from '@/utils'
diff --git a/src/containers/unit/Header/index.tsx b/src/containers/unit/Header/index.tsx
index 69e5c8f49..9b9ae608c 100755
--- a/src/containers/unit/Header/index.tsx
+++ b/src/containers/unit/Header/index.tsx
@@ -23,7 +23,7 @@ const HeaderContainer = ({ metric }) => {
       testid=""
       onClick={() => {
         console.log('report it!')
-        report('ARTICLE')
+        report('USER')
       }}
     >
       {!isMobile ? <DesktopView metric={metric} /> : <MobileWrapper />}

From d1ee67219fbb60fd9b93193f98ae20fb688d34fe Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 12:08:21 +0800
Subject: [PATCH 17/21] chore(abuse-report): wip

---
 .../layout/GlobalLayout/dynamic.tsx           |  9 +++++++++
 src/containers/layout/GlobalLayout/index.tsx  |  6 ++----
 .../tool/AbuseReport/ReportContent/Main.tsx   | 19 ++++++++++---------
 src/containers/tool/AbuseReport/store.ts      |  5 ++---
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/containers/layout/GlobalLayout/dynamic.tsx b/src/containers/layout/GlobalLayout/dynamic.tsx
index 70f9b7248..56c3948e5 100644
--- a/src/containers/layout/GlobalLayout/dynamic.tsx
+++ b/src/containers/layout/GlobalLayout/dynamic.tsx
@@ -9,6 +9,15 @@ export const Doraemon = dynamic(() => import('@/containers/tool/Doraemon'), {
   ssr: false,
 })
 
+export const AbuseReport = dynamic(
+  () => import('@/containers/tool/AbuseReport'),
+  {
+    /* eslint-disable react/display-name */
+    loading: () => <div />,
+    ssr: false,
+  },
+)
+
 export const ErrorBox = dynamic(() => import('@/containers/tool/ErrorBox'), {
   /* eslint-disable react/display-name */
   loading: () => <div />,
diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index b08b9e5a3..9747c1883 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -17,13 +17,12 @@ import Header from '@/containers/unit/Header'
 import Sidebar from '@/containers/unit/Sidebar'
 import ModeLine from '@/containers/unit/ModeLine'
 import Drawer from '@/containers/tool/Drawer'
-import AbuseReport from '@/containers/tool/AbuseReport'
 
 import CustomScroller from '@/components/CustomScroller'
 
 import type { TStore } from './store'
 import SEO from './SEO'
-import { Doraemon, ErrorBox, Footer, ErrorPage } from './dynamic'
+import { AbuseReport, Doraemon, ErrorBox, Footer, ErrorPage } from './dynamic'
 
 import { Wrapper, InnerWrapper, BodyWrapper, ContentWrapper } from './styles'
 
@@ -93,9 +92,8 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                 sidebarPin={sidebarPin}
                 // noSidebar={noSidebar}
               >
-                <AbuseReport />
-
                 {!noSidebar && <Sidebar />}
+                <AbuseReport />
                 <Drawer />
                 <Doraemon />
                 <ErrorBox />
diff --git a/src/containers/tool/AbuseReport/ReportContent/Main.tsx b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
index 52e14fe74..26befd6ce 100644
--- a/src/containers/tool/AbuseReport/ReportContent/Main.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
@@ -16,15 +16,16 @@ type TProps = {
 const Main: React.FC<TProps> = ({ items, activeItem }) => {
   return (
     <React.Fragment>
-      {items.map((item) => (
-        <Option key={item.raw}>
-          <SelectWrapper onClick={() => selectItem(item.raw)}>
-            <Checker checked={item.raw === activeItem.raw} />
-            <Title active={item.raw === activeItem.raw}>{item.title}</Title>
-          </SelectWrapper>
-          <SpaceGrow />
-        </Option>
-      ))}
+      {items &&
+        items.map((item) => (
+          <Option key={item.raw}>
+            <SelectWrapper onClick={() => selectItem(item.raw)}>
+              <Checker checked={item.raw === activeItem.raw} />
+              <Title active={item.raw === activeItem.raw}>{item.title}</Title>
+            </SelectWrapper>
+            <SpaceGrow />
+          </Option>
+        ))}
     </React.Fragment>
   )
 }
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
index f63d90d51..4336f5c29 100755
--- a/src/containers/tool/AbuseReport/store.ts
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -11,7 +11,6 @@ import type { TCommunity, TRootStore } from '@/spec'
 import { markStates, buildLog, stripMobx } from '@/utils'
 
 import type { TREPORT_ITEM } from './spec'
-import articleItems from './defaults/article'
 /* eslint-disable-next-line */
 const log = buildLog('S:AbuseReport')
 
@@ -34,7 +33,7 @@ const Item = T.model('AbuseReport', {
 const AbuseReport = T.model('AbuseReport', {
   show: T.optional(T.boolean, false),
   type: T.optional(T.string, REPORT_TYPE.ARTICLE),
-  items: T.optional(T.array(Item), articleItems),
+  items: T.maybeNull(T.array(Item)),
   checkedItemRaw: T.maybeNull(T.string),
   view: T.optional(T.enumeration(['main', 'detail']), 'main'),
 })
@@ -45,7 +44,7 @@ const AbuseReport = T.model('AbuseReport', {
       return stripMobx(root.viewing.community)
     },
     get itemsData(): TREPORT_ITEM[] {
-      return stripMobx(self.items)
+      return stripMobx(self.items || [])
     },
 
     get activeItem(): TREPORT_ITEM {

From 241f3ef4d1476379021ce92ec92b2915761c05d3 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 12:19:36 +0800
Subject: [PATCH 18/21] chore(abuse-report): remove old informer system

---
 src/components/ArticleActionsPanel/index.js   | 11 +--
 .../ArticleActionsPanel/styles/index.ts       | 30 +------
 .../content/JobContent/SideCards.js           |  6 +-
 src/containers/content/JobContent/store.js    |  3 -
 .../content/JobContent/styles/side_cards.js   |  4 +-
 src/containers/content/PostContent/logic.ts   |  2 -
 src/containers/content/PostContent/store.ts   |  4 -
 .../content/RepoContent/SideCards.js          |  6 +-
 .../content/RepoContent/styles/side_cards.ts  |  4 +-
 .../content/VideoContent/SideCards.js         |  6 +-
 src/containers/content/VideoContent/store.js  |  3 -
 .../content/VideoContent/styles/side_cards.ts |  4 +-
 src/containers/tool/Informer/Form.js          | 61 --------------
 src/containers/tool/Informer/Header.js        | 12 ---
 src/containers/tool/Informer/Overview.js      | 64 ---------------
 src/containers/tool/Informer/index.js         | 67 ---------------
 src/containers/tool/Informer/logic.js         | 81 -------------------
 src/containers/tool/Informer/schema.ts        | 23 ------
 src/containers/tool/Informer/store.js         | 49 -----------
 src/containers/tool/Informer/styles/form.ts   | 20 -----
 src/containers/tool/Informer/styles/header.ts | 12 ---
 src/containers/tool/Informer/styles/index.ts  | 28 -------
 .../tool/Informer/styles/overview.ts          | 11 ---
 .../tool/Informer/tests/index.test.ts         | 10 ---
 .../tool/Informer/tests/store.test.ts         | 10 ---
 .../unit/ArticleBodyHeader/logic.js           |  6 +-
 .../unit/ArticleBodyHeader/store.js           |  3 -
 src/stores/RootStore/index.ts                 |  5 --
 src/stores/index.ts                           |  1 -
 29 files changed, 12 insertions(+), 534 deletions(-)
 delete mode 100755 src/containers/tool/Informer/Form.js
 delete mode 100755 src/containers/tool/Informer/Header.js
 delete mode 100755 src/containers/tool/Informer/Overview.js
 delete mode 100755 src/containers/tool/Informer/index.js
 delete mode 100755 src/containers/tool/Informer/logic.js
 delete mode 100755 src/containers/tool/Informer/schema.ts
 delete mode 100755 src/containers/tool/Informer/store.js
 delete mode 100755 src/containers/tool/Informer/styles/form.ts
 delete mode 100755 src/containers/tool/Informer/styles/header.ts
 delete mode 100755 src/containers/tool/Informer/styles/index.ts
 delete mode 100755 src/containers/tool/Informer/styles/overview.ts
 delete mode 100755 src/containers/tool/Informer/tests/index.test.ts
 delete mode 100755 src/containers/tool/Informer/tests/store.test.ts

diff --git a/src/components/ArticleActionsPanel/index.js b/src/components/ArticleActionsPanel/index.js
index 639a4cd7b..37c78b2fd 100755
--- a/src/components/ArticleActionsPanel/index.js
+++ b/src/components/ArticleActionsPanel/index.js
@@ -8,18 +8,16 @@ import React from 'react'
 import T from 'prop-types'
 import { values } from 'ramda'
 
-import { ICON_CMD } from '@/config'
 import { THREAD } from '@/constant'
 import { buildLog } from '@/utils'
 
-import Informer from '@/containers/tool/Informer'
 import PinOption from './PinOption'
 import RefineOption from './RefineOption'
 import EditOption from './EditOption'
 import CommunitySetterOption from './CommunitySetterOption'
 import DeleteOption from './DeleteOption'
 
-import { Wrapper, Option, OptionIcon, OptionTitle } from './styles'
+import { Wrapper } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:ArticleActionsPanel:index')
@@ -66,13 +64,6 @@ const ArticleActionsPanel = ({
         onCommunitySet={onCommunitySet}
       />
 
-      <Informer>
-        <Option onClick={onInform}>
-          <OptionIcon src={`${ICON_CMD}/flag.svg`} />
-          <OptionTitle>举报该内容</OptionTitle>
-        </Option>
-      </Informer>
-
       <DeleteOption
         passport="owner"
         ownerId={data.author?.id}
diff --git a/src/components/ArticleActionsPanel/styles/index.ts b/src/components/ArticleActionsPanel/styles/index.ts
index 35457dda0..8df6290d3 100755
--- a/src/components/ArticleActionsPanel/styles/index.ts
+++ b/src/components/ArticleActionsPanel/styles/index.ts
@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 
-import { theme, css } from '@/utils'
-import Img from '@/Img'
+import { css } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
@@ -9,30 +8,5 @@ export const Wrapper = styled.div`
   padding-left: 10px;
   padding-bottom: 0;
 `
-export const Option = styled.div<{ red: boolean }>`
-  ${css.flex('align-center')};
-  color: ${theme('banner.desc')};
-  margin-bottom: 8px;
 
-  &:hover {
-    color: ${({ red }) => (red ? 'tomato' : theme('banner.title'))};
-
-    cursor: pointer;
-  }
-`
-type TOptionIcon = {
-  red: boolean
-  reverse: boolean
-}
-export const OptionIcon = styled(Img)<TOptionIcon>`
-  fill: ${theme('banner.desc')};
-  ${css.size(18)};
-  margin-right: 6px;
-  transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')};
-  ${Option}:hover & {
-    fill: ${({ red }) => (red ? 'tomato' : theme('banner.title'))};
-  }
-`
-export const OptionTitle = styled.div`
-  font-size: 0.9rem;
-`
+export const holder = 1
diff --git a/src/containers/content/JobContent/SideCards.js b/src/containers/content/JobContent/SideCards.js
index 82ee844b8..f29873ca3 100755
--- a/src/containers/content/JobContent/SideCards.js
+++ b/src/containers/content/JobContent/SideCards.js
@@ -1,20 +1,16 @@
 import React from 'react'
 
-import Informer from '@/containers/tool/Informer'
 import ArticleAuthorCard from '@/containers/unit/ArticleAuthorCard'
 import ContentSourceCard from '@/components/ContentSourceCard'
 
 import CompanyCard from './CommunityCard'
-import { Wrapper, ReportWrapper } from './styles/side_cards'
+import { Wrapper } from './styles/side_cards'
 
 const SideCards = ({ data }) => (
   <Wrapper>
     <CompanyCard data={data} />
     <ArticleAuthorCard user={data.author} />
     <ContentSourceCard data={data} />
-    <ReportWrapper>
-      <Informer />
-    </ReportWrapper>
   </Wrapper>
 )
 
diff --git a/src/containers/content/JobContent/store.js b/src/containers/content/JobContent/store.js
index d785c29d8..d178fdc83 100755
--- a/src/containers/content/JobContent/store.js
+++ b/src/containers/content/JobContent/store.js
@@ -29,9 +29,6 @@ const JobContent = T.model('JobContent', {})
     },
   }))
   .actions((self) => ({
-    callInformer() {
-      self.root.callInformer()
-    },
     setViewing(sobj) {
       self.root.setViewing(sobj)
     },
diff --git a/src/containers/content/JobContent/styles/side_cards.js b/src/containers/content/JobContent/styles/side_cards.js
index 93801dd07..e9de58a2a 100755
--- a/src/containers/content/JobContent/styles/side_cards.js
+++ b/src/containers/content/JobContent/styles/side_cards.js
@@ -7,6 +7,4 @@ export const Wrapper = styled.div`
   min-width: 250px;
   ${css.media.tablet`display: none`};
 `
-export const ReportWrapper = styled.div`
-  padding: 0 10px;
-`
+export const holder = 1
diff --git a/src/containers/content/PostContent/logic.ts b/src/containers/content/PostContent/logic.ts
index 00c1bf8bc..722d68db2 100755
--- a/src/containers/content/PostContent/logic.ts
+++ b/src/containers/content/PostContent/logic.ts
@@ -34,8 +34,6 @@ const loadPost = (): void => {
   sr71$.query(S.post, { id, userHasLogin: store.isLogin })
 }
 
-export const callInformer = (): void => store.callInformer()
-
 // ###############################
 // Data & Error handlers
 // ###############################
diff --git a/src/containers/content/PostContent/store.ts b/src/containers/content/PostContent/store.ts
index 35b7ad9d4..9ba9a9d6d 100755
--- a/src/containers/content/PostContent/store.ts
+++ b/src/containers/content/PostContent/store.ts
@@ -29,10 +29,6 @@ const PostContentStore = T.model('PostContentStore', {
     },
   }))
   .actions((self) => ({
-    callInformer(): void {
-      const root = getParent(self) as TRootStore
-      root.callInformer()
-    },
     setViewing(sobj: Record<string, unknown>): void {
       const root = getParent(self) as TRootStore
       root.setViewing(sobj)
diff --git a/src/containers/content/RepoContent/SideCards.js b/src/containers/content/RepoContent/SideCards.js
index f463050ce..7323eebf1 100755
--- a/src/containers/content/RepoContent/SideCards.js
+++ b/src/containers/content/RepoContent/SideCards.js
@@ -1,21 +1,17 @@
 import React from 'react'
 
-import Informer from '@/containers/tool/Informer'
 import ArticleAuthorCard from '@/containers/unit/ArticleAuthorCard'
 import ContentSourceCard from '@/components/ContentSourceCard'
 
 import RepoStatusCard from './RepoStatusCard'
 
-import { Wrapper, ReportWrapper } from './styles/side_cards'
+import { Wrapper } from './styles/side_cards'
 
 const SideCards = ({ data }) => (
   <Wrapper>
     <RepoStatusCard data={data} />
     <ArticleAuthorCard user={data.author} />
     <ContentSourceCard data={data} />
-    <ReportWrapper>
-      <Informer />
-    </ReportWrapper>
   </Wrapper>
 )
 
diff --git a/src/containers/content/RepoContent/styles/side_cards.ts b/src/containers/content/RepoContent/styles/side_cards.ts
index 93801dd07..e9de58a2a 100755
--- a/src/containers/content/RepoContent/styles/side_cards.ts
+++ b/src/containers/content/RepoContent/styles/side_cards.ts
@@ -7,6 +7,4 @@ export const Wrapper = styled.div`
   min-width: 250px;
   ${css.media.tablet`display: none`};
 `
-export const ReportWrapper = styled.div`
-  padding: 0 10px;
-`
+export const holder = 1
diff --git a/src/containers/content/VideoContent/SideCards.js b/src/containers/content/VideoContent/SideCards.js
index c5028175f..b6be0fb19 100755
--- a/src/containers/content/VideoContent/SideCards.js
+++ b/src/containers/content/VideoContent/SideCards.js
@@ -1,18 +1,14 @@
 import React from 'react'
 
-import Informer from '@/containers/tool/Informer'
 import ArticleAuthorCard from '@/containers/unit/ArticleAuthorCard'
 import ContentSourceCard from '@/components/ContentSourceCard'
 
-import { Wrapper, ReportWrapper } from './styles/side_cards'
+import { Wrapper } from './styles/side_cards'
 
 const SideCards = ({ data }) => (
   <Wrapper>
     <ArticleAuthorCard user={data.author} />
     <ContentSourceCard data={data} />
-    <ReportWrapper>
-      <Informer />
-    </ReportWrapper>
   </Wrapper>
 )
 
diff --git a/src/containers/content/VideoContent/store.js b/src/containers/content/VideoContent/store.js
index 3b2b78697..4ef4e093b 100755
--- a/src/containers/content/VideoContent/store.js
+++ b/src/containers/content/VideoContent/store.js
@@ -26,9 +26,6 @@ const VideoContent = T.model('VideoContent', {})
     },
   }))
   .actions((self) => ({
-    callInformer() {
-      self.root.callInformer()
-    },
     setViewing(sobj) {
       self.root.setViewing(sobj)
     },
diff --git a/src/containers/content/VideoContent/styles/side_cards.ts b/src/containers/content/VideoContent/styles/side_cards.ts
index 5633cda99..6b2e15402 100755
--- a/src/containers/content/VideoContent/styles/side_cards.ts
+++ b/src/containers/content/VideoContent/styles/side_cards.ts
@@ -8,6 +8,4 @@ export const Wrapper = styled.div`
   min-width: 250px;
   ${css.media.tablet`display: none`};
 `
-export const ReportWrapper = styled.div`
-  padding: 0 10px;
-`
+export const holder = 1
diff --git a/src/containers/tool/Informer/Form.js b/src/containers/tool/Informer/Form.js
deleted file mode 100755
index d8362b68d..000000000
--- a/src/containers/tool/Informer/Form.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-
-import Input from '@/components/Input'
-import { Button } from '@/components/Buttons'
-
-import { Space } from '@/components/Common'
-import SectionLabel from '@/components/SectionLabel'
-import { ICON_CMD } from '@/config'
-
-import { Wrapper, Footer, Back, Submit } from './styles/form'
-
-import { backToOverview, onMessageChange, onConfirm } from './logic'
-
-const CurLabel = ({ type }) => {
-  switch (type) {
-    case 'pirate':
-      return (
-        <SectionLabel
-          title="侵权/盗版举报"
-          iconSrc={`${ICON_CMD}/police1.svg`}
-        />
-      )
-
-    case 'sensitive':
-      return (
-        <SectionLabel
-          title="违法信息举报"
-          iconSrc={`${ICON_CMD}/police2.svg`}
-        />
-      )
-
-    default:
-      return (
-        <SectionLabel title="杠精举报" iconSrc={`${ICON_CMD}/gangjing.svg`} />
-      )
-  }
-}
-
-const Form = ({ message, type }) => (
-  <Wrapper className="normal-form">
-    <CurLabel type={type} />
-    <Input
-      value={message}
-      onChange={onMessageChange}
-      placeholder="详细信息"
-      behavior="textarea"
-    />
-    <Footer>
-      <Button type="primary" onClick={backToOverview} ghost>
-        <Back>重新选择</Back>
-      </Button>
-      <Space right={15} />
-
-      <Button type="primary" onClick={onConfirm}>
-        <Submit>提 交</Submit>
-      </Button>
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(Form)
diff --git a/src/containers/tool/Informer/Header.js b/src/containers/tool/Informer/Header.js
deleted file mode 100755
index 2f8cd585b..000000000
--- a/src/containers/tool/Informer/Header.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-
-import { cutRest } from '@/utils'
-import { Wrapper } from './styles/header'
-
-const Header = ({ data }) => (
-  <Wrapper>
-    <div>【 {cutRest(data.title, 15)} 】</div>
-  </Wrapper>
-)
-
-export default React.memo(Header)
diff --git a/src/containers/tool/Informer/Overview.js b/src/containers/tool/Informer/Overview.js
deleted file mode 100755
index fb094bf9b..000000000
--- a/src/containers/tool/Informer/Overview.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-
-import { Button } from '@/components/Buttons'
-import SectionLabel from '@/components/SectionLabel'
-
-import { Wrapper, Divider } from './styles/overview'
-
-import { yesReport } from './logic'
-
-const Content = () => (
-  <Wrapper>
-    <SectionLabel
-      title="杠精举报"
-      iconSrc={`${ICON_CMD}/gangjing.svg`}
-      desc="言语不友善, 无依据的抬杠/诋毁他人, 低俗无聊言论等"
-      addonNode={
-        <Button
-          size="small"
-          type="primary"
-          ghost
-          onClick={() => yesReport('gangjing')}
-        >
-          是的, 去举报
-        </Button>
-      }
-    />
-    <Divider />
-    <SectionLabel
-      title="侵权/盗版举报"
-      iconSrc={`${ICON_CMD}/police1.svg`}
-      desc="该内容侵犯了我的版权, 或包含盗版 / 违规转载等。"
-      addonNode={
-        <Button
-          size="small"
-          type="primary"
-          ghost
-          onClick={() => yesReport('pirate')}
-        >
-          是的, 去举报
-        </Button>
-      }
-    />
-    <Divider />
-    <SectionLabel
-      title="违法信息举报"
-      iconSrc={`${ICON_CMD}/police2.svg`}
-      desc="该内容涉及政治，色情，暴力，民族宗教, 地域攻击等违法信息。"
-      addonNode={
-        <Button
-          size="small"
-          type="primary"
-          ghost
-          onClick={() => yesReport('sensitive')}
-        >
-          是的, 去举报
-        </Button>
-      }
-    />
-  </Wrapper>
-)
-
-export default React.memo(Content)
diff --git a/src/containers/tool/Informer/index.js b/src/containers/tool/Informer/index.js
deleted file mode 100755
index 5dbf8f122..000000000
--- a/src/containers/tool/Informer/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- *
- * Informer
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { ICON_CMD } from '@/config'
-import { pluggedIn, buildLog } from '@/utils'
-
-import Modal from '@/components/Modal'
-import Header from './Header'
-import Overview from './Overview'
-import Form from './Form'
-
-import { Wrapper, Title, Icon } from './styles'
-import { useInit, toggleModal } from './logic'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:Informer')
-
-const InformerContainer = ({ informer: store, title, children }) => {
-  useInit(store)
-
-  const { showModal, curView, viewingData, type, message } = store
-
-  return (
-    <React.Fragment>
-      <Modal width="500px" show={showModal} showCloseBtn onClose={toggleModal}>
-        <>
-          <Header data={viewingData} />
-          {curView === 'form' ? (
-            <Form type={type} message={message} />
-          ) : (
-            <Overview />
-          )}
-        </>
-      </Modal>
-      <>
-        {children ? (
-          <>{children}</>
-        ) : (
-          <Wrapper onClick={toggleModal}>
-            <Icon src={`${ICON_CMD}/flag.svg`} />
-            <Title>{title}</Title>
-          </Wrapper>
-        )}
-      </>
-    </React.Fragment>
-  )
-}
-
-InformerContainer.propTypes = {
-  // https://www.npmjs.com/package/prop-types
-  title: T.string,
-  informer: T.any.isRequired,
-  children: T.node,
-}
-
-InformerContainer.defaultProps = {
-  title: '举报内容',
-  children: null,
-}
-
-export default pluggedIn(InformerContainer)
diff --git a/src/containers/tool/Informer/logic.js b/src/containers/tool/Informer/logic.js
deleted file mode 100755
index d8d4e34ba..000000000
--- a/src/containers/tool/Informer/logic.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useEffect } from 'react'
-
-import { ERR } from '@/constant'
-import { asyncSuit, buildLog, errRescue } from '@/utils'
-// import S from './schema'
-
-/* eslint-disable-next-line */
-const log = buildLog('L:Informer')
-
-const { SR71, $solver, asyncErr } = asyncSuit
-const sr71$ = new SR71()
-
-let sub$ = null
-let store = null
-
-export const toggleModal = () =>
-  store.mark({
-    showModal: !store.showModal,
-  })
-
-export const backToOverview = () =>
-  store.mark({
-    curView: 'overview',
-  })
-
-export const onMessageChange = (e) => store.mark({ message: e.target.value })
-
-export const onConfirm = () => {
-  log('onConfirm')
-  store.toastDone({
-    title: '感谢提交',
-    msg: '我们会尽快处理您举报的内容，为民除害。',
-  })
-  backToOverview()
-  toggleModal()
-}
-
-export const yesReport = (type) =>
-  store.mark({
-    curView: 'form',
-    type,
-  })
-
-// ###############################
-// Data & Error handlers
-// ###############################
-
-const DataSolver = []
-const ErrSolver = [
-  {
-    match: asyncErr(ERR.GRAPHQL),
-    action: () => {},
-  },
-  {
-    match: asyncErr(ERR.TIMEOUT),
-    action: ({ details }) =>
-      errRescue({ type: ERR.TIMEOUT, details, path: 'Informer' }),
-  },
-  {
-    match: asyncErr(ERR.NETWORK),
-    action: () => errRescue({ type: ERR.NETWORK, path: 'Informer' }),
-  },
-]
-
-// ###############################
-// init & uninit
-// ###############################
-export const useInit = (_store) =>
-  useEffect(() => {
-    store = _store
-    // log('effect init')
-    sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
-
-    return () => {
-      if (!sub$) return false
-      store.mark({ curView: 'overview' })
-      sr71$.stop()
-      sub$.unsubscribe()
-      sub$ = null
-    }
-  }, [_store])
diff --git a/src/containers/tool/Informer/schema.ts b/src/containers/tool/Informer/schema.ts
deleted file mode 100755
index 0035db982..000000000
--- a/src/containers/tool/Informer/schema.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import gql from 'graphql-tag'
-
-const simpleMutation = gql`
-  mutation($id: ID!) {
-    post(id: $id) {
-      id
-    }
-  }
-`
-const simpleQuery = gql`
-  query($filter: filter!) {
-    post(id: $id) {
-      id
-    }
-  }
-`
-
-const schema = {
-  simpleMutation,
-  simpleQuery,
-}
-
-export default schema
diff --git a/src/containers/tool/Informer/store.js b/src/containers/tool/Informer/store.js
deleted file mode 100755
index e3a1a0730..000000000
--- a/src/containers/tool/Informer/store.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Informer store
- *
- */
-
-import { types as T, getParent } from 'mobx-state-tree'
-import { merge } from 'ramda'
-
-import { markStates, buildLog } from '@/utils'
-
-/* eslint-disable-next-line */
-const log = buildLog('S:Informer')
-
-const Informer = T.model('Informer', {
-  showModal: T.optional(T.boolean, false),
-  curView: T.optional(
-    T.enumeration('curView', ['overview', 'form']),
-    'overview',
-  ),
-  type: T.optional(T.string, ''),
-  message: T.optional(T.string, ''),
-})
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get accountInfo() {
-      return self.root.accountInfo
-    },
-    get viewingData() {
-      return self.root.viewingData
-    },
-  }))
-  .actions((self) => ({
-    show() {
-      self.showModal = true
-    },
-    toastDone(options) {
-      self.root.toast('success', merge({ position: 'topCenter' }, options))
-    },
-    toastError(options) {
-      self.root.toast('error', merge({ position: 'topCenter' }, options))
-    },
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-  }))
-
-export default Informer
diff --git a/src/containers/tool/Informer/styles/form.ts b/src/containers/tool/Informer/styles/form.ts
deleted file mode 100755
index cf1a27d87..000000000
--- a/src/containers/tool/Informer/styles/form.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components'
-
-import { css } from '@/utils'
-
-export const Wrapper = styled.div`
-  ${css.flexColumn('justify-center')};
-
-  width: 100%;
-  padding: 20px;
-`
-export const Footer = styled.div`
-  ${css.flex('justify-center')};
-  margin-top: 30px;
-`
-export const Submit = styled.div`
-  padding: 0 30px;
-`
-export const Back = styled.div`
-  padding: 0 10px;
-`
diff --git a/src/containers/tool/Informer/styles/header.ts b/src/containers/tool/Informer/styles/header.ts
deleted file mode 100755
index 47802489d..000000000
--- a/src/containers/tool/Informer/styles/header.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components'
-
-import { theme, css } from '@/utils'
-
-export const Wrapper = styled.div`
-  ${css.flex('align-center')};
-  color: ${theme('banner.title')};
-  font-size: 1rem;
-  padding: 20px 18px;
-  padding-bottom: 10px;
-`
-export const Holder = 1
diff --git a/src/containers/tool/Informer/styles/index.ts b/src/containers/tool/Informer/styles/index.ts
deleted file mode 100755
index 400143910..000000000
--- a/src/containers/tool/Informer/styles/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import styled from 'styled-components'
-
-import Img from '@/Img'
-import { theme, css } from '@/utils'
-
-export const Wrapper = styled.div`
-  ${css.flex('align-center')};
-`
-export const Title = styled.div`
-  color: ${theme('thread.articleDigest')};
-  ${Wrapper}:hover & {
-    color: ${theme('thread.articleTitle')};
-  }
-  &:hover {
-    cursor: pointer;
-  }
-`
-export const Icon = styled(Img)`
-  fill: ${theme('thread.articleDigest')};
-  ${css.size(16)};
-  margin-right: 3px;
-  ${Wrapper}:hover & {
-    color: ${theme('thread.articleTitle')};
-  }
-  &:hover {
-    cursor: pointer;
-  }
-`
diff --git a/src/containers/tool/Informer/styles/overview.ts b/src/containers/tool/Informer/styles/overview.ts
deleted file mode 100755
index 6b3080ce2..000000000
--- a/src/containers/tool/Informer/styles/overview.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from 'styled-components'
-
-import { css } from '@/utils'
-
-export const Wrapper = styled.div`
-  ${css.flexColumn()};
-  padding: 20px;
-`
-export const Divider = styled.div`
-  margin-top: 30px;
-`
diff --git a/src/containers/tool/Informer/tests/index.test.ts b/src/containers/tool/Informer/tests/index.test.ts
deleted file mode 100755
index 50c763542..000000000
--- a/src/containers/tool/Informer/tests/index.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// import React from 'react'
-// import { shallow } from 'enzyme'
-
-// import Informer from '../index'
-
-describe('TODO <Informer />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true)
-  })
-})
diff --git a/src/containers/tool/Informer/tests/store.test.ts b/src/containers/tool/Informer/tests/store.test.ts
deleted file mode 100755
index 9cbb56396..000000000
--- a/src/containers/tool/Informer/tests/store.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Informer store test
- *
- */
-
-// import Informer from '../index'
-
-it('TODO: store test Informer', () => {
-  expect(1 + 1).toBe(2)
-})
diff --git a/src/containers/unit/ArticleBodyHeader/logic.js b/src/containers/unit/ArticleBodyHeader/logic.js
index 5d2f0f209..0e3c97fc1 100755
--- a/src/containers/unit/ArticleBodyHeader/logic.js
+++ b/src/containers/unit/ArticleBodyHeader/logic.js
@@ -143,8 +143,6 @@ export const onTagUnselect = (tagId) => {
   sr71$.mutate(S.unsetTag, { thread, id, tagId, communityId })
 }
 
-export const onInform = () => store.callInformer()
-
 const backToParentThread = () => {
   let REFRESH_EVENT
   if (store.activeThread === THREAD.POST) {
@@ -240,7 +238,9 @@ const DataSolver = [
 const ErrSolver = [
   {
     match: asyncErr(ERR.GRAPHQL),
-    action: () => {},
+    action: () => {
+      //
+    },
   },
   {
     match: asyncErr(ERR.TIMEOUT),
diff --git a/src/containers/unit/ArticleBodyHeader/store.js b/src/containers/unit/ArticleBodyHeader/store.js
index bc449b422..156e9e80b 100755
--- a/src/containers/unit/ArticleBodyHeader/store.js
+++ b/src/containers/unit/ArticleBodyHeader/store.js
@@ -36,9 +36,6 @@ const ArticleBodyHeader = T.model('ArticleBodyHeader', {})
     },
   }))
   .actions((self) => ({
-    callInformer() {
-      self.root.callInformer()
-    },
     setViewing(sobj) {
       self.root.setViewing(sobj)
     },
diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts
index 696f76c69..bacfcfa98 100755
--- a/src/stores/RootStore/index.ts
+++ b/src/stores/RootStore/index.ts
@@ -80,7 +80,6 @@ import {
   AvatarAdderStore,
   TagsBarStore,
   UserListerStore,
-  InformerStore,
   GirlVerifierStore,
   CashierStore,
   ArticleAuthorCardStore,
@@ -190,7 +189,6 @@ const rootStore = T.model({
 
   tagsBar: T.optional(TagsBarStore, {}),
   userLister: T.optional(UserListerStore, {}),
-  informer: T.optional(InformerStore, {}),
   girlVerifier: T.optional(GirlVerifierStore, {}),
   cashier: T.optional(CashierStore, {}),
   articleAuthorCard: T.optional(ArticleAuthorCardStore, {}),
@@ -325,9 +323,6 @@ const rootStore = T.model({
       // @ts-ignore TODO:
       self.toast('error', options)
     },
-    callInformer(): void {
-      self.informer.show()
-    },
     callGirlVerifier(): void {
       self.girlVerifier.show()
     },
diff --git a/src/stores/index.ts b/src/stores/index.ts
index a894505ed..b40933003 100755
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -27,7 +27,6 @@ export { default as MailBoxStore } from '@/containers/tool/MailBox/store'
 export { default as AvatarAdderStore } from '@/containers/tool/AvatarAdder/store'
 
 export { default as UserListerStore } from '@/containers/user/UserLister/store'
-export { default as InformerStore } from '@/containers/tool/Informer/store'
 export { default as GirlVerifierStore } from '@/containers/tool/GirlVerifier/store'
 export { default as CashierStore } from '@/containers/tool/Cashier/store'
 

From 1b064e5bba832a38fda922d0fafc043154cdbe07 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 12:32:31 +0800
Subject: [PATCH 19/21] chore(abuse-report): ignore error

---
 .gitignore                             |  1 -
 public/icons/static/article/report.svg |  1 +
 utils/constant/report.ts               | 31 ++++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 public/icons/static/article/report.svg
 create mode 100644 utils/constant/report.ts

diff --git a/.gitignore b/.gitignore
index 7feb5f152..01377a572 100755
--- a/.gitignore
+++ b/.gitignore
@@ -12,5 +12,4 @@ cypress//integration/examples
 cypress/videos/
 .vscode/
 .DS_Store
-report.*
 .eslintcache
diff --git a/public/icons/static/article/report.svg b/public/icons/static/article/report.svg
new file mode 100644
index 000000000..5619a8598
--- /dev/null
+++ b/public/icons/static/article/report.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1604326288416" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4527" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M881.664 973.824H142.336c-49.664 0-94.72-25.6-119.296-69.12-24.576-43.52-24.576-94.72 0-137.216l369.664-640c24.576-42.496 69.12-69.12 119.296-69.12s94.72 25.6 119.296 69.12l369.664 640c24.576 42.496 24.576 94.72 0 137.216s-70.144 69.12-119.296 69.12zM459.264 165.376l-369.664 640c-11.264 18.432-11.264 41.984 0 60.416 11.264 18.944 30.72 30.72 52.736 30.72h738.816c22.016 0 41.984-11.264 52.736-30.72 11.264-18.944 11.264-41.984 0-60.416l-369.664-640c-11.264-18.944-30.72-30.72-52.736-30.72s-41.472 12.288-52.224 30.72z" p-id="4528"></path><path d="M512 644.096c-16.896 0-30.72-12.8-31.744-29.696l-12.8-221.696c-1.536-25.6 18.944-47.104 44.544-47.104s46.08 21.504 44.544 47.104l-12.8 221.696c-1.024 16.896-14.848 29.696-31.744 29.696zM460.8 751.104c0 28.16 23.04 51.2 51.2 51.2s51.2-23.04 51.2-51.2-23.04-51.2-51.2-51.2-51.2 22.528-51.2 51.2z" p-id="4529"></path></svg>
\ No newline at end of file
diff --git a/utils/constant/report.ts b/utils/constant/report.ts
new file mode 100644
index 000000000..72caa5864
--- /dev/null
+++ b/utils/constant/report.ts
@@ -0,0 +1,31 @@
+export const REPORT_TYPE = {
+  ARTICLE: 'ARTICLE',
+  USER: 'USER',
+  COMMUNITY: 'COMMUNITY',
+  // WORKS: 'WORKS', // TODO
+  // JOB: 'JOB', // TODO
+  COMMENT: 'COMMENT',
+}
+
+export const REPORT = {
+  FLYER: 'FLYER',
+  LAWS: 'LAWS',
+  OTHERS: 'OTHERS',
+  VIOLATION: 'VIOLATION',
+  ARTICLE: {
+    DUPLICATE: 'DUPLICATE',
+    CLICKBAIT: 'CLICKBAIT',
+    BAD_QUESTION: 'BAD_QUESTION',
+  },
+  COMMENT: {
+    OFF_TOPIC: 'OFF_TOPIC',
+    BAD_INFO: 'BAD_INFO',
+  },
+  USER: {
+    SPAMMER: 'SPAMMER',
+    ABUSE_POWER: 'ABUSE_POWER',
+  },
+  COMMUNITY: {
+    BAD_ETHOS: 'BAD_ETHOS',
+  },
+}

From d996f8282ff74be353df3c6d2ef7cbe958af902c Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 12:45:27 +0800
Subject: [PATCH 20/21] chore(abuse-report): build error

---
 .../ArticleActionsPanel/styles/index.ts       | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/ArticleActionsPanel/styles/index.ts b/src/components/ArticleActionsPanel/styles/index.ts
index 8df6290d3..35457dda0 100755
--- a/src/components/ArticleActionsPanel/styles/index.ts
+++ b/src/components/ArticleActionsPanel/styles/index.ts
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
-import { css } from '@/utils'
+import { theme, css } from '@/utils'
+import Img from '@/Img'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
@@ -8,5 +9,30 @@ export const Wrapper = styled.div`
   padding-left: 10px;
   padding-bottom: 0;
 `
+export const Option = styled.div<{ red: boolean }>`
+  ${css.flex('align-center')};
+  color: ${theme('banner.desc')};
+  margin-bottom: 8px;
 
-export const holder = 1
+  &:hover {
+    color: ${({ red }) => (red ? 'tomato' : theme('banner.title'))};
+
+    cursor: pointer;
+  }
+`
+type TOptionIcon = {
+  red: boolean
+  reverse: boolean
+}
+export const OptionIcon = styled(Img)<TOptionIcon>`
+  fill: ${theme('banner.desc')};
+  ${css.size(18)};
+  margin-right: 6px;
+  transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')};
+  ${Option}:hover & {
+    fill: ${({ red }) => (red ? 'tomato' : theme('banner.title'))};
+  }
+`
+export const OptionTitle = styled.div`
+  font-size: 0.9rem;
+`

From b42b55db3ec3aa000e69d3e66b8732611ff203a2 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Apr 2021 12:58:55 +0800
Subject: [PATCH 21/21] chore(abuse-report): build error

---
 src/components/ArticleActionsPanel/index.js    | 3 ---
 src/containers/unit/ArticleBodyHeader/index.js | 2 --
 2 files changed, 5 deletions(-)

diff --git a/src/components/ArticleActionsPanel/index.js b/src/components/ArticleActionsPanel/index.js
index 37c78b2fd..597c09309 100755
--- a/src/components/ArticleActionsPanel/index.js
+++ b/src/components/ArticleActionsPanel/index.js
@@ -31,7 +31,6 @@ const ArticleActionsPanel = ({
   onSetRefined,
   onUnsetRefined,
   onEdit,
-  onInform,
   onDelete,
   onCommunitySet,
 }) => {
@@ -91,7 +90,6 @@ ArticleActionsPanel.propTypes = {
   }).isRequired,
   communityRaw: T.string.isRequired,
   thread: T.oneOf(values(THREAD)),
-  onInform: T.func,
   onDelete: T.func,
   onEdit: T.func,
   onPin: T.func,
@@ -103,7 +101,6 @@ ArticleActionsPanel.propTypes = {
 
 ArticleActionsPanel.defaultProps = {
   thread: THREAD.POST,
-  onInform: log,
   onDelete: log,
   onEdit: log,
   onPin: log,
diff --git a/src/containers/unit/ArticleBodyHeader/index.js b/src/containers/unit/ArticleBodyHeader/index.js
index 00ae08cb5..a31a11327 100755
--- a/src/containers/unit/ArticleBodyHeader/index.js
+++ b/src/containers/unit/ArticleBodyHeader/index.js
@@ -29,7 +29,6 @@ import {
   onUndoPin,
   onSetRefined,
   onUnsetRefined,
-  onInform,
   onDelete,
   onCommunitySet,
   onTagSelect,
@@ -64,7 +63,6 @@ const ArticleBodyHeaderContainer = ({
               onUndoPin={onUndoPin}
               onSetRefined={onSetRefined}
               onUnsetRefined={onUnsetRefined}
-              onInform={onInform}
               onDelete={onDelete}
               onCommunitySet={onCommunitySet}
             />