Merge branch 'ui' of git.backyard.segmentfault.com:opensource/answer into ui

ui/src/components/Mentions/index.tsx

@@ -73,7 +73,7 @@ const Mentions: FC<IProps> = ({ children, pageUsers, onSelected }) => {
       return;
     }
 
-    const text = `@${item?.displayName}[${item?.userName}] `;
+    const text = `@${item?.userName}`;
     onSelected(
       `${value.substring(
         0,

ui/src/pages/Admin/Flags/index.tsx

@@ -118,8 +118,8 @@ const Flags: FC = () => {
                       className="fs-14 text-secondary"
                     />
                     <BaseUserCard data={li.report_user} className="mt-2 mb-2" />
-                    {li.flaged_reason ? (
-                      <small>{li.flaged_content}</small>
+                    {li.flagged_reason ? (
+                      <small>{li.flagged_content}</small>
                     ) : (
                       <small>
                         {li.reason?.name}

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

@@ -412,7 +412,7 @@ const Ask = () => {
               )}
             </Form>
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Card className="mb-4">
               <Card.Header>
                 {t('title', { keyPrefix: 'how_to_format' })}

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

@@ -166,7 +166,7 @@ const Index = () => {
               />
             )}
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <RelatedQuestions id={question?.id || ''} />
           </Col>
         </Row>

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

@@ -217,7 +217,7 @@ const Ask = () => {
               </div>
             </Form>
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Card>
               <Card.Header>
                 {t('title', { keyPrefix: 'how_to_format' })}

ui/src/pages/Questions/index.tsx

@@ -29,7 +29,7 @@ const Questions: FC = () => {
           <Col xxl={7} lg={8} sm={12}>
             <QuestionList source="questions" />
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <FollowingTags />
             <HotQuestions />
           </Col>

ui/src/pages/Search/index.tsx

@@ -53,7 +53,7 @@ const Index = () => {
               />
             </div>
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Tips />
           </Col>
         </Row>

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

@@ -90,7 +90,7 @@ const Questions: FC = () => {
             </div>
             <QuestionList source="tag" />
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <FollowingTags />
             <HotQuestions />
           </Col>

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

@@ -249,7 +249,7 @@ const Ask = () => {
               </div>
             </Form>
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Card>
               <Card.Header>
                 {t('title', { keyPrefix: 'how_to_format' })}

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

@@ -93,7 +93,7 @@ const TagIntroduction = () => {
       <PageTitle title={pageTitle} />
       <Container className="pt-4 mt-2 mb-5">
         <Row className="justify-content-center">
-          <Col xs={7}>
+          <Col xxl={7} lg={8} sm={12}>
             <h3 className="mb-3">
               <Link
                 to={`/tags/${tagInfo?.slug_name}`}
@@ -133,7 +133,7 @@ const TagIntroduction = () => {
               })}
             </div>
           </Col>
-          <Col xs={3}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Card>
               <Card.Header className="d-flex justify-content-between">
                 <span>{t('synonyms.title')}</span>

ui/src/pages/Users/Notifications/index.tsx

@@ -120,7 +120,7 @@ const Notifications = () => {
               </div>
             )}
           </Col>
-          <Col xxl={3} lg={4} sm={12} />
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0" />
         </Row>
       </Container>
     </>

ui/src/pages/Users/Personal/index.tsx

@@ -60,7 +60,11 @@ const Personal: FC = () => {
         <Col xxl={7} lg={8} sm={12}>
           <UserInfo data={userInfo?.info} />
         </Col>
-        <Col xxl={3} lg={4} sm={12} className="d-flex justify-content-end">
+        <Col
+          xxl={3}
+          lg={4}
+          sm={12}
+          className="d-flex justify-content-end mt-5 mt-lg-0">
           {isSelf && (
             <div>
               <Button
@@ -111,7 +115,7 @@ const Personal: FC = () => {
             </div>
           )}
         </Col>
-        <Col xxl={3} lg={4} sm={12}>
+        <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
           <h5 className="mb-3">Stats</h5>
           {userInfo?.info && (
             <>

ui/src/utils/index.ts

@@ -78,8 +78,8 @@ function scrollTop(element) {
  * @returns Array<{displayName: string, userName: string}>
  */
 function matchedUsers(markdown) {
-  const globalReg = /@(.*?)\[(.*?)\]/gm;
-  const reg = /@(.*?)\[(.*?)\]/;
+  const globalReg = /\B@([\w|]+)/g;
+  const reg = /\B@([\w\\_\\.]+)/;
 
   const users = markdown.match(globalReg);
   if (!users) {
@@ -88,8 +88,7 @@ function matchedUsers(markdown) {
   return users.map((user) => {
     const matched = user.match(reg);
     return {
-      displayName: matched[2],
-      userName: matched[2],
+      userName: matched[1],
     };
   });
 }
@@ -100,8 +99,8 @@ function matchedUsers(markdown) {
  * @returns string
  */
 function parseUserInfo(markdown) {
-  const globalReg = /@(.*?)\[(.*?)\]/gm;
-  return markdown.replace(globalReg, '[@$1](/u/$2)');
+  const globalReg = /\B@([\w\\_\\.\\-]+)/g;
+  return markdown.replace(globalReg, '[@$1](/u/$1)');
 }
 
 export {