refactor(help-thread): add FAQ sidebar (#1287)

Author: mydearxym

src/containers/thread/HelpThread/Sidebar.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react'
+
+import {
+  Wrapper,
+  Header,
+  FAQIcon,
+  Title,
+  Section,
+  Footer,
+  MoreLink,
+} from './styles/sidebar'
+
+const Sidebar: FC = () => {
+  return (
+    <Wrapper>
+      <Header>
+        <FAQIcon />
+        <Title>常见问题</Title>
+      </Header>
+      <Section>购买标准版或者高级版是否可开具发票？</Section>
+      <Section>高级版使用过程中如何增加团队人数？ </Section>
+      <Section>小画桌如何保障数据安全？ </Section>
+      <Section>标准版是否可以升级为高级版？ </Section>
+      <Section>小画桌语音是否支持额外购买？ </Section>
+      <Section>是否支持7天无理由退款？ </Section>
+      <Section>
+        为什么修改了环境变量（或全局变量）值，而引用的地方没有生效？
+      </Section>
+      <Footer>
+        <div>如果还有疑问，请</div>
+        <MoreLink>告诉我们</MoreLink>。
+      </Footer>
+    </Wrapper>
+  )
+}
+
+export default Sidebar

src/containers/thread/HelpThread/index.tsx

@@ -9,6 +9,8 @@ import { FC } from 'react'
 import { bond } from '@/utils/mobx'
 
 import type { TStore } from './store'
+
+import Sidebar from './Sidebar'
 import Category from './Category'
 
 import { Wrapper, MainWrapper, CatsWapper } from './styles'
@@ -78,6 +80,7 @@ const HelpThreadContainer: FC<TProps> = ({
           />
         </CatsWapper>
       </MainWrapper>
+      <Sidebar />
     </Wrapper>
   )
 }

src/containers/thread/HelpThread/styles/category.ts

@@ -11,7 +11,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 }))<TWrapper>`
   ${css.flexColumn()};
   background: transparent;
-  width: 33%;
+  width: 50%;
   min-height: 80px;
   padding: 15px 20px;
   padding-left: 0;
@@ -47,9 +47,8 @@ export const Item = styled.div<{ color: string }>`
 
   transition: all 0.2s;
 `
-
 export const MoreLink = styled.div`
-  color: #175199; // to-theme
+  color: ${theme('link')};
   font-size: 13px;
   margin-top: 5px;
   margin-left: 24px;

src/containers/thread/HelpThread/styles/index.ts

@@ -20,6 +20,8 @@ export const MainWrapper = styled.div`
   margin-top: 12px;
   padding-left: 25px;
   padding-right: 80px;
+
+  border-right: 1px solid #eae9e9;
 `
 export const CatsWapper = styled.div`
   ${css.flex()};

src/containers/thread/HelpThread/styles/sidebar.ts

@@ -0,0 +1,68 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+import css, { theme } from '@/utils/css'
+import FAQSVG from '@/icons/FAQ'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flexColumn()};
+  width: 320px;
+  min-width: 320px;
+  color: ${theme('thread.articleDigest')};
+  padding-top: 25px;
+  padding-left: 50px;
+`
+export const Header = styled.div`
+  ${css.flex('align-center')};
+  margin-bottom: 20px;
+`
+export const FAQIcon = styled(FAQSVG)`
+  ${css.size(15)};
+  fill: ${theme('thread.articleDigest')};
+  margin-right: 10px;
+  opacity: 0.8;
+  margin-top: 2px;
+`
+export const Title = styled.div`
+  color: ${theme('thread.articleDigest')};
+`
+export const Section = styled.div`
+  font-size: 15px;
+  color: ${theme('thread.articleTitle')};
+  font-weight: 400;
+  margin-bottom: 14px;
+
+  position: relative;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+
+  &:hover {
+    font-weight: 500;
+    cursor: pointer;
+  }
+  transition: all 0.2s;
+`
+export const Footer = styled.div`
+  ${css.flex('align-center')};
+  margin-top: 15px;
+  border-top: 1px solid #eae9e9;
+  padding-top: 20px;
+  font-size: 12px;
+  color: ${theme('thread.articleDigest')};
+`
+export const MoreLink = styled.div`
+  color: ${theme('link')};
+  margin-left: 1px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  transition: all 0.2s;
+`

src/widgets/Icons/FAQ.tsx

@@ -0,0 +1,19 @@
+import { memo, SVGProps } from 'react'
+
+const FAQ = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="M721.067 337.067c-25.6 0-42.667 8.533-59.734 25.6-12.8 12.8-21.333 29.866-21.333 59.733 0 25.6 8.533 46.933 21.333 64 12.8 17.067 29.867 25.6 59.734 25.6 17.066 0 29.866-4.267 42.666-12.8-12.8-17.067-25.6-25.6-34.133-38.4l21.333-21.333c12.8 12.8 25.6 25.6 34.134 38.4 8.533-17.067 12.8-29.867 12.8-51.2 0-25.6-4.267-46.934-21.334-68.267-21.333-12.8-34.133-21.333-55.466-21.333zm-234.667 12.8-42.667 102.4H524.8z" />
+      <path d="M861.867 42.667H162.133c-68.266 0-119.466 51.2-119.466 119.466V691.2c0 68.267 51.2 119.467 119.466 119.467h59.734v170.666L456.533 806.4h409.6c68.267 0 119.467-51.2 119.467-119.467v-524.8c-4.267-68.266-55.467-119.466-123.733-119.466zM366.933 341.333H247.467V409.6h115.2v29.867h-115.2v102.4h-38.4v-230.4h157.866v29.866zm187.734 200.534-25.6-59.734h-98.134l-25.6 59.734H371.2l89.6-230.4h38.4l89.6 230.4h-34.133zm273.066 4.266-25.6 21.334c-8.533-12.8-17.066-25.6-25.6-34.134-17.066 12.8-38.4 17.067-64 17.067-34.133 0-64-12.8-81.066-34.133-21.334-25.6-25.6-51.2-25.6-85.334s8.533-64 25.6-85.333c21.333-25.6 46.933-34.133 81.066-34.133 34.134 0 64 12.8 81.067 34.133 21.333 25.6 25.6 51.2 25.6 85.333s-8.533 64-25.6 85.334c17.067 8.533 25.6 21.333 34.133 29.866z" />
+    </svg>
+  )
+}
+
+export default memo(FAQ)

utils/themes/skins/github.ts

@@ -39,7 +39,7 @@ const github = {
   },
 
   font: fontColor,
-  link: 'orange',
+  link: '#175199',
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#FFFEDE',