Merge branch 'feat/ui-1.0.3' into 'test'

Feat/ui 1.0.3

See merge request opensource/answer!399

ui/src/components/Comment/index.tsx

@@ -10,7 +10,7 @@ import { marked } from 'marked';
 import * as Types from '@/common/interface';
 import { Modal } from '@/components';
 import { usePageUsers, useReportModal } from '@/hooks';
-import { matchedUsers, parseUserInfo, scrollTop } from '@/utils';
+import { matchedUsers, parseUserInfo, scrollTop, bgFadeOut } from '@/utils';
 import { tryNormalLogged } from '@/utils/guard';
 import {
   useQueryComments,
@@ -44,6 +44,7 @@ const Comment = ({ objectId, mode, commentId }) => {
     if (pageIndex === 0 && co.comment_id === commentId) {
       setTimeout(() => {
         scrollTop(el);
+        bgFadeOut(el);
       }, 100);
     }
   }, []);

ui/src/hooks/useTagModal/index.tsx

@@ -95,13 +95,13 @@ const useTagModal = (props: IProps = {}) => {
         isInvalid: true,
         errorMsg: t('form.fields.slug_name.msg.range'),
       };
-    } else if (/[^a-z0-9+#\-.]/.test(slugName.value)) {
-      bol = false;
-      formData.slugName = {
-        value: slugName.value,
-        isInvalid: true,
-        errorMsg: t('form.fields.slug_name.msg.character'),
-      };
+      // } else if (/[^a-z0-9+#\-.]/.test(slugName.value)) {
+      //   bol = false;
+      //   formData.slugName = {
+      //     value: slugName.value,
+      //     isInvalid: true,
+      //     errorMsg: t('form.fields.slug_name.msg.character'),
+      //   };
     } else {
       formData.slugName = {
         value: slugName.value,
@@ -217,7 +217,9 @@ const useTagModal = (props: IProps = {}) => {
                 isInvalid={formData.slugName.isInvalid}
               />
 
-              <Form.Text as="div">{t('form.fields.slug_name.desc')}</Form.Text>
+              <Form.Text as="div">
+                {t('form.fields.slug_name.msg.range')}
+              </Form.Text>
               <Form.Control.Feedback type="invalid">
                 {formData.slugName.errorMsg}
               </Form.Control.Feedback>

ui/src/index.scss

@@ -283,3 +283,11 @@ a {
 .pre-line {
   white-space: pre-wrap;
 }
+
+@keyframes bg-fade-out {
+  0%, 25% {background-color: var(--bs-highlight-bg)}
+  100% { background-color: transparent }
+}
+.bg-fade-out {
+  animation: 2s ease 1s bg-fade-out;
+}

ui/src/pages/Questions/Detail/components/Answer/index.tsx

@@ -12,7 +12,7 @@ import {
   FormatTime,
   htmlRender,
 } from '@/components';
-import { scrollTop } from '@/utils';
+import { scrollTop, bgFadeOut } from '@/utils';
 import { AnswerItem } from '@/common/interface';
 import { acceptanceAnswer } from '@/services';
 
@@ -61,6 +61,7 @@ const Index: FC<Props> = ({
       }, 100);
     }
     htmlRender(answerRef.current.querySelector('.fmt'));
+    bgFadeOut(answerRef.current);
   }, [data.id, answerRef.current]);
   if (!data?.id) {
     return null;

ui/src/pages/Questions/Detail/index.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 import Pattern from '@/common/pattern';
 import { Pagination } from '@/components';
 import { loggedUserInfoStore, toastStore } from '@/stores';
-import { scrollTop } from '@/utils';
+import { scrollTop, bgFadeOut } from '@/utils';
 import { usePageTags, usePageUsers } from '@/hooks';
 import type {
   ListResult,
@@ -35,7 +35,9 @@ const Index = () => {
   const navigate = useNavigate();
   const { t } = useTranslation('translation');
   const { qid = '', slugPermalink = '' } = useParams();
-  // Compatible with Permalink
+  /**
+   * Note: Compatible with Permalink
+   */
   let { aid = '' } = useParams();
   if (!aid && Pattern.isAnswerId.test(slugPermalink)) {
     aid = slugPermalink;
@@ -77,6 +79,7 @@ const Index = () => {
         // scroll into view;
         const element = document.getElementById('answerHeader');
         scrollTop(element);
+        bgFadeOut(element);
       }
 
       res.list.forEach((item) => {

ui/src/utils/common.ts

@@ -36,6 +36,15 @@ function scrollTop(element) {
   });
 }
 
+const bgFadeOut = (el) => {
+  if (el && !el.classList.contains('bg-fade-out')) {
+    el.classList.add('bg-fade-out');
+    setTimeout(() => {
+      el.classList.remove('bg-fade-out');
+    }, 3200);
+  }
+};
+
 /**
  * Extract user info from markdown
  * @param markdown string
@@ -209,6 +218,7 @@ export {
   thousandthDivision,
   formatCount,
   scrollTop,
+  bgFadeOut,
   matchedUsers,
   parseUserInfo,
   formatUptime,