refactor(tags-bar): new tags design

src/components/DigestSentence/index.tsx

@@ -21,6 +21,7 @@ import {
   PreviewWrapper,
   PreviewText,
   PreviewIcon,
+  ThunderIcon,
 } from './styles'
 
 /* eslint-disable-next-line */
@@ -69,7 +70,7 @@ const DigestSentence: FC<TProps> = ({
       </MediaHintWrapper>
       <PreviewWrapper>
         <PreviewText>预览</PreviewText>
-        <PreviewIcon src={`${ICON}/shape/arrow-simple.svg`} />
+        <ThunderIcon />
       </PreviewWrapper>
     </Wrapper>
   )

src/components/DigestSentence/styles/index.ts

@@ -1,7 +1,9 @@
 import styled from 'styled-components'
 
 import type { TTestable, TSpace, TSIZE_SM } from '@/spec'
+
 import Img from '@/Img'
+import ThunderSVG from '@/icons/Thunder'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
@@ -66,5 +68,9 @@ export const PreviewIcon = styled(Img)`
 export const PreviewText = styled.span`
   color: ${theme('thread.extraInfo')};
   font-size: 12px;
-  margin-right: 5px;
+`
+export const ThunderIcon = styled(ThunderSVG)`
+  fill: ${theme('thread.extraInfo')};
+  ${css.size(18)};
+  transform: rotate(12deg);
 `

src/components/Icons/Thunder.tsx

@@ -0,0 +1,21 @@
+import { memo, SVGProps } from 'react'
+
+const Thunder = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="prefix__icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <defs>
+        <style />
+      </defs>
+      <path d="M668.672 468.053L385.877 833.024c-9.13 9.13-18.261 0-18.261-9.13L422.4 531.967H312.917c-9.13 0-9.13-9.13-9.13-9.13L586.58 157.866c9.131-9.131 18.262 0 18.262 9.13l-45.568 291.926h100.352c9.045 0 9.045 9.13 9.045 9.13z" />
+    </svg>
+  )
+}
+
+export default memo(Thunder)

src/components/Img/LazyLoadImg.tsx

@@ -1,7 +1,6 @@
 import { FC, Fragment, ReactNode, memo, useState } from 'react'
 
 import { LazyLoadImage } from 'react-lazy-load-image-component'
-import 'react-lazy-load-image-component/src/effects/blur.css'
 
 import { Wrapper, FallbackWrapper } from './styles/lazy_load_image'
 
@@ -24,7 +23,7 @@ const LazyLoadImg: FC<TProps> = ({
   src,
   alt = 'image',
   fallback = null,
-  visibleByDefault = false,
+  visibleByDefault = true,
 }) => {
   const [imgLoaded, setImgLoaded] = useState(false)
 

src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts

@@ -58,6 +58,24 @@ const CustomOverWrite = createGlobalStyle`
     font-size: 1.3em;
     color: ${theme('editor.content')};
   }
+
+  .lazy-load-image-background.blur {
+    filter: blur(3px);
+  }
+
+  .lazy-load-image-background.blur.lazy-load-image-loaded {
+    filter: blur(0);
+    transition: filter 0.2s;
+  }
+
+  .lazy-load-image-background.blur > img {
+    opacity: 0;
+  }
+
+  .lazy-load-image-background.blur.lazy-load-image-loaded > img {
+    opacity: 1;
+    transition: opacity 0.2s;
+  }
 `
 
 export default CustomOverWrite

src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx

@@ -14,7 +14,7 @@ import Sticky from '@/components/Sticky'
 import PublishButton from '@/components/Buttons/PublishButton'
 import CommunityJoinBadge from '@/containers/tool/CommunityJoinBadge'
 import TagsBar from '@/containers/unit/TagsBar'
-import PromotionList from '@/components/PromotionList'
+// import PromotionList from '@/components/PromotionList'
 
 import type { TBaseProps } from '../index'
 
@@ -46,7 +46,7 @@ const ClassicLayout: FC<TProps> = ({
       <TagsBarWrapper>
         <TagsBar onSelect={onTagSelect} />
       </TagsBarWrapper>
-      <PromotionList onClose={onAdsClose} />
+      {/* <PromotionList onClose={onAdsClose} /> */}
     </Sticky>
   )
 }

src/containers/unit/TagsBar/DesktopView/Folder.tsx

@@ -82,7 +82,7 @@ const Folder: FC<TProps> = ({
         />
         <Title>{title}</Title>
         {!isFolderOpen && isActiveTagInFolder && (
-          <TagItem tag={activeTag} active inline />
+          <TagItem tag={activeTag} active />
         )}
       </Header>
 
@@ -109,7 +109,7 @@ const Folder: FC<TProps> = ({
               )
             }}
           >
-            <SubTogglePrefixIcon src={`${ICON}/shape/more.svg`} />
+            <SubTogglePrefixIcon src={`${ICON}/shape/more-l.svg`} />
             <SubToggleTitle>
               {curDisplayCount === MAX_DISPLAY_COUNT ? '展开更多' : '收起'}
             </SubToggleTitle>

src/containers/unit/TagsBar/DesktopView/GobackTag.tsx

@@ -12,7 +12,7 @@ type TProps = {
 const GobackTag: FC<TProps> = ({ onSelect }) => {
   return (
     <Wrapper onClick={() => onSelect(emptyTag)}>
-      <TagIcon src={`${ICON}/hash-solid.svg`} />
+      <TagIcon src={`${ICON}/shape/reset.svg`} />
       <TagTitle>全部标签</TagTitle>
     </Wrapper>
   )

src/containers/unit/TagsBar/DesktopView/TagItem.tsx

@@ -1,46 +1,42 @@
 import { FC } from 'react'
 
-import { Trans } from '@/utils/i18n'
 import type { TTag } from '@/spec'
+import { cutRest } from '@/utils/helper'
+import { Trans } from '@/utils/i18n'
 
+// import DotDivider from '@/components/DotDivider'
 // import TagCount from './TagCount'
 
 import {
   Wrapper,
   HashWrapper,
   HashSign,
-  TagTitle,
-  // CountInfoWrapper,
+  Tag,
+  Title,
+  RawWrapper,
+  Raw,
 } from '../styles/desktop_view/tag_item'
 
 type TProps = {
   tag: TTag
   active: boolean
   activeid?: string | null
-  inline?: boolean
   onSelect?: (tag?: TTag) => void
 }
 
-const TagItem: FC<TProps> = ({
-  tag,
-  active,
-  activeid,
-  inline = false,
-  onSelect,
-}) => {
+const TagItem: FC<TProps> = ({ tag, active, activeid, onSelect }) => {
   return (
-    <Wrapper $active={active} $inline={inline}>
+    <Wrapper $active={active}>
       <HashWrapper>
-        <HashSign
-          color={tag.color}
-          $active={active}
-          $inline={inline}
-          activeid={activeid}
-        />
+        <HashSign color={tag.color} $active={active} activeid={activeid} />
       </HashWrapper>
-      <TagTitle $active={active} $inline={inline} onClick={() => onSelect(tag)}>
-        {Trans(tag.title)}
-      </TagTitle>
+      <Tag $active={active} color={tag.color} onClick={() => onSelect(tag)}>
+        <Title>{cutRest(Trans(tag.title), 10)}</Title>
+        <RawWrapper $active={active}>
+          {/* <DotDivider radius={2} space={6} /> */}
+          <Raw>{tag.raw}</Raw>
+        </RawWrapper>
+      </Tag>
       {/* <SpaceGrow />
 
       {!inline && (

src/containers/unit/TagsBar/DesktopView/index.tsx

@@ -27,6 +27,7 @@ type TProps = Omit<TTagProps, 'view'>
 const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
   useInit(store)
   const { groupedTags, tagsData, activeTagData } = store
+  console.log('# groupedTags -> ', groupedTags)
   const groupsKeys = keys(groupedTags) as string[]
 
   return (
@@ -35,7 +36,7 @@ const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
         <GobackTag
           onSelect={(tag) => {
             onTagSelect(tag)
-            onSelect()
+            onSelect?.()
           }}
         />
       )}
@@ -48,7 +49,7 @@ const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
           activeTag={activeTagData}
           onSelect={(tag) => {
             onTagSelect(tag)
-            onSelect()
+            onSelect?.()
           }}
         />
       ))}

src/containers/unit/TagsBar/store.ts

@@ -16,6 +16,8 @@ import type {
 
 import { markStates, toJS } from '@/utils/mobx'
 import { groupByKey } from '@/utils/helper'
+import { mockTags } from '@/utils/mock'
+
 import { Tag, emptyTag } from '@/model'
 
 const TagsBar = T.model('TagsBar', {
@@ -35,25 +37,16 @@ const TagsBar = T.model('TagsBar', {
       return root.viewing.activeThread
     },
     get tagsData(): TTag[] {
-      return toJS(self.tags)
+      // return toJS(self.tags)
+      return mockTags(15)
     },
     get activeTagData(): TTag {
       return toJS(self.activeTag) || emptyTag
     },
     get groupedTags(): TGroupedTags {
       const { tagsData } = self as TStore
 
-      return groupByKey(
-        tagsData.map((tag) => {
-          if (parseInt(tag.id, 10) < 4) {
-            tag.group = '这是第一组'
-          } else {
-            tag.group = '这是第二组' // '__default__'
-          }
-          return tag
-        }),
-        'group',
-      )
+      return groupByKey(tagsData, 'group')
     },
   }))
   .actions((self) => ({

src/containers/unit/TagsBar/styles/desktop_view/folder.ts

@@ -41,8 +41,9 @@ export const Content = styled.div<{ isOpen: boolean }>`
 `
 export const SubToggle = styled.div`
   ${css.flex('align-center')};
-  margin-left: 5px;
-  opacity: 0.5;
+  margin-top: 5px;
+  margin-left: 2px;
+  opacity: 0.6;
 
   &:hover {
     opacity: 0.8;
@@ -52,12 +53,11 @@ export const SubToggle = styled.div`
 export const SubToggleTitle = styled.div`
   color: ${theme('tags.text')};
   font-size: 12px;
-  margin-left: 5px;
+  margin-left: 6px;
   padding: 2px;
   border-radius: 5px;
 `
 export const SubTogglePrefixIcon = styled(Img)`
   fill: ${theme('tags.text')};
-  ${css.size(14)};
-  transform: rotate(90deg);
+  ${css.size(13)};
 `

src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts

@@ -5,29 +5,20 @@ import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 import Img from '@/Img'
 
-export const Wrapper = styled.div<TActive>`
+export const Wrapper = styled.div`
   ${css.flex('align-center')};
-  margin-bottom: 5px;
+  margin-bottom: 8px;
   max-width: 180px;
-  padding: 5px;
-  border-radius: 5px;
-
-  background: ${({ active }) => (active ? '#0e303d' : 'transparent')};
-
-  &:hover {
-    background: #0e303d;
-  }
+  padding: 5px 2px;
 `
 export const TagIcon = styled(Img)`
   fill: ${theme('banner.desc')};
-  margin-right: 10px;
+  margin-right: 6px;
   ${css.size(14)};
-  transform: rotate(17deg);
 `
-
 export const TagTitle = styled.div`
   color: ${theme('tags.text')};
-  font-size: 15px;
+  font-size: 14px;
   letter-spacing: 1px;
 
   &:hover {