feat: add animation tags cloud

* feat: add animation tags cloud

* refactor: tag style perfect

Author: fecommunity

client/pages/category/[category].tsx

@@ -90,7 +90,7 @@ const Home: NextPage<IProps> = ({ articles: defaultArticles = [], total, categor
         rightNode={
           <div className="sticky">
             <ArticleRecommend mode="inline" />
-            <Tags tags={tags} />
+            <Tags tags={tags} animationMode />
             <AboutUs className={style.footer} setting={setting} />
           </div>
         }

client/pages/index.module.scss

@@ -21,6 +21,7 @@
   p {
     margin-bottom: 0;
     color: var(--font-color-base);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     &:first-of-type {
       margin-top: 80px;
       font-size: 2rem;

client/pages/index.tsx

@@ -113,8 +113,8 @@ const Home: NextPage<IHomeProps> = ({ articles: defaultArticles = [], recommende
         }
         rightNode={
           <div className="sticky">
-            <Tags tags={tags} />
             <ArticleRecommend mode="inline" />
+            <Tags tags={tags} animationMode />
             <AboutUs className={style.footer} setting={setting} />
           </div>
         }

client/pages/nav/[id].tsx

@@ -149,7 +149,7 @@ const Article: NextPage<IProps> = ({ siteKey }) => {
       }
       rightNode={
         <div className={'sticky'}>
-          <Tags tags={tags} />
+          <Tags tags={tags} animationMode />
           <AboutUs setting={setting} />
         </div>
       }

client/src/components/ArticleList/index.module.scss

@@ -31,8 +31,8 @@
     &:hover {
       opacity: 0.7;
     }
-    > * {
-      margin-left: 4px;
+    .category {
+      color: var(--second-text-color);
     }
   }
 

client/src/components/ArticleList/index.tsx

@@ -56,8 +56,7 @@ export const ArticleList: React.FC<IProps> = ({ articles = [] }) => {
                             as={`/category/${article?.category?.value}`}
                             scroll={false}
                           >
-                            <Tag className={style.antBadge} color={getColorFromNumber(categoryIndex)}>
-                              <FolderOutlined />
+                            <Tag className={style.antBadge} icon={<FolderOutlined />}>
                               <span className={style.category}>{article.category?.label}</span>
                             </Tag>
                           </Link>

client/src/components/ArticleRecommend/index.module.scss

@@ -23,6 +23,41 @@
   ul.inlineWrapper {
     padding: 0 1rem 1rem;
 
+    .article {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      .seqId {
+        display: inline-block;
+        width: 40px;
+        border-radius: 4px;
+        background-color: var(--primary-color);
+      }
+      .articleTitle {
+        flex: 1;
+        width: 100%;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &::before {
+          background-color: var(--primary-color);
+          color: #fff;
+          content: attr(data-num);
+          display: inline-block;
+          font-size: 14px;
+          line-height: 18px;
+          margin-right: 5px;
+          text-align: center;
+          width: 18px;
+        }
+      }
+      .views {
+        display: inline-block;
+        width: 54px;
+        color: var(--second-text-color);
+      }
+    }
+
     li {
       display: flex;
       flex-wrap: nowrap;

client/src/components/ArticleRecommend/index.tsx

@@ -5,10 +5,9 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
-import { LocaleTime } from '@/components/LocaleTime';
 import { useAsyncLoading } from '@/hooks/useAsyncLoading';
 import { ArticleProvider } from '@/providers/article';
-import { LikeOutlined } from '@ant-design/icons';
+import { LikeOutlined, EyeOutlined } from '@ant-design/icons';
 
 import style from './index.module.scss';
 
@@ -22,12 +21,14 @@ export const ArticleRecommend: React.FC<IProps> = ({ mode = 'vertical', articleI
   const t = useTranslations();
   const [getRecommend, loading] = useAsyncLoading(ArticleProvider.getRecommend, 150, true);
   const [fetched, setFetched] = useState('');
-  const [articles, setArticles] = useState([]);
+  const [articles, setArticles] = useState<IArticle[]>([]);
 
   useEffect(() => {
     if (fetched === articleId) return;
     getRecommend(articleId).then((res) => {
-      setArticles(res.slice(0, 6));
+      const articles = res.slice(0, 6);
+      articles.sort((a, b) => b.views - a.views);
+      setArticles(articles);
       setFetched(articleId);
     });
   }, [articleId, getRecommend, fetched]);
@@ -36,7 +37,7 @@ export const ArticleRecommend: React.FC<IProps> = ({ mode = 'vertical', articleI
     <div className={cls(style.wrapper, mode === 'inline' && style.inline)}>
       {needTitle && (
         <div className={style.title}>
-          <LikeOutlined className={style.recommendIcon}/>
+          <LikeOutlined className={style.recommendIcon} />
           <span>{t('recommendToReading')}</span>
         </div>
       )}
@@ -53,15 +54,17 @@ export const ArticleRecommend: React.FC<IProps> = ({ mode = 'vertical', articleI
             )
           ) : (
             <ul className={style.inlineWrapper}>
-              {articles.map((article) => {
+              {articles.map((article, index) => {
                 return (
                   <li key={article.id}>
                     <Link href={`/article/[id]`} as={`/article/${article.id}`} scroll={false}>
-                      <a>
-                        <span>{article.title}</span>
-                        {' · '}
-                        <span>
-                          <LocaleTime date={article.publishAt} timeago={true} />
+                      <a className={style.article} title={article.title}>
+                        <span className={style.articleTitle} data-num={index + 1}>
+                          <span>{article.title}</span>
+                        </span>
+                        <span className={style.views}>
+                          <EyeOutlined />
+                          <span className={style.number}>{article.views}</span>
                         </span>
                       </a>
                     </Link>

client/src/components/TagCloud/index.module.scss

@@ -0,0 +1,29 @@
+.tagCloud {
+  width: 250px;
+  height: 260px;
+  position: relative;
+  font-size: 12px;
+  color: #333;
+  margin: 0 20px;
+  text-align: center;
+
+  a {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    color: rgb(255, 255, 255);
+    text-decoration: none;
+    margin: 0 10px 15px 0;
+    line-height: 18px;
+    text-align: center;
+    font-size: 12px;
+    padding: 5px 8px;
+    display: inline-block;
+    border-radius: 3px;
+    white-space: nowrap;
+  }
+
+  a:hover {
+    background: var(--primary-color) !important;
+  }
+}

client/src/components/TagCloud/index.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef, FC, ReactNode } from 'react';
+import styles from './index.module.scss';
+import Tag from './tag';
+
+interface IProps {
+  children: ReactNode;
+  className: string;
+}
+
+const TagCloud: FC<IProps> = (props) => {
+  const ref = useRef<HTMLDivElement>();
+  const tagInstance = useRef<Tag>(new Tag()).current;
+
+  useEffect(() => {
+    tagInstance.init(ref.current);
+  }, []);
+
+  return (
+    <div className={styles.tagCloud} ref={ref}>
+      {props.children}
+    </div>
+  );
+};
+
+export default TagCloud;