Merge branch 'feat/ui-v0.4' of git.backyard.segmentfault.com:opensource/answer into feat/ui-v0.4

ui/src/components/Tag/index.tsx

@@ -11,8 +11,10 @@ interface IProps {
 }
 
 const Index: FC<IProps> = ({ className = '', href, data }) => {
-  href =
-    href || `/tags/${data.main_tag_slug_name || data.slug_name}`.toLowerCase();
+  href ||= `/tags/${encodeURIComponent(
+    data.main_tag_slug_name || data.slug_name,
+  )}`.toLowerCase();
+
   return (
     <a
       href={href}

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

@@ -14,7 +14,7 @@ const Questions: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'tags' });
   const navigate = useNavigate();
   const routeParams = useParams();
-  const curTagName = routeParams.tagName;
+  const curTagName = routeParams.tagName || '';
   const [tagInfo, setTagInfo] = useState<any>({});
   const [tagFollow, setTagFollow] = useState<Type.FollowParams>();
   const { data: tagResp } = useTagInfo({ name: curTagName });
@@ -71,7 +71,11 @@ const Questions: FC = () => {
 
               <p className="text-break">
                 {escapeRemove(tagInfo.excerpt) || t('no_description')}
-                <Link to={`/tags/${curTagName}/info`}> [{t('more')}]</Link>
+                <Link
+                  to={`/tags/${encodeURIComponent(curTagName)}/info`}
+                  className="ms-1">
+                  [{t('more')}]
+                </Link>
               </p>
 
               <div className="box-ft">

ui/src/pages/Tags/Info/index.tsx

@@ -154,7 +154,6 @@ const TagIntroduction = () => {
                       {t('synonyms.text')}{' '}
                       <Tag
                         className="me-2 mb-2"
-                        href="#"
                         data={{
                           slug_name: tagName || '',
                           main_tag_slug_name: '',

ui/src/services/client/tag.ts

@@ -41,6 +41,7 @@ export const useTagInfo = ({ id = '', name = '' }) => {
   if (id) {
     apiUrl = `/answer/api/v1/tag/?id=${id}`;
   } else if (name) {
+    name = encodeURIComponent(name);
     apiUrl = `/answer/api/v1/tag/?name=${name}`;
   }
   const { data, error } = useSWR<Type.TagInfo>(apiUrl, request.instance.get);