Add user profile detail page (新增用户详情页)

components/Git/Issue/Card.tsx

@@ -1,7 +1,7 @@
 import { Icon, Nameplate, text2color } from 'idea-react';
 import { marked } from 'marked';
 import { Issue } from 'mobx-github';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Badge, Card, CardProps, Stack } from 'react-bootstrap';
 
 export type IssueCardProps = Issue & Omit<CardProps, 'id' | 'body'>;
@@ -19,56 +19,68 @@ export const IssueCard: FC<IssueCardProps> = ({
   comments,
   created_at,
   ...props
-}) => (
-  <Card {...{ ...props, bg, text }}>
-    <Card.Header
-      as="h4"
-      className="d-flex justify-content-between align-items-center gap-3"
-    >
-      <a
-        className="text-decoration-none text-secondary text-truncate"
-        title={title}
-        href={html_url}
-        target="_blank"
-        rel="noreferrer"
+}) => {
+  const [html, setHtml] = useState('');
+
+  useEffect(() => {
+    const result = marked(body || '');
+    if (result instanceof Promise) {
+      result.then(setHtml);
+    } else {
+      setHtml(result);
+    }
+  }, [body]);
+
+  return (
+    <Card {...{ ...props, bg, text }}>
+      <Card.Header
+        as="h4"
+        className="d-flex justify-content-between align-items-center gap-3"
       >
-        #{number} {title}
-      </a>
-      <Stack direction="horizontal" gap={2}>
-        {labels.map(
-          label =>
-            typeof label === 'object' && (
-              <Badge
-                key={label.name}
-                className="fs-6"
-                {...(label.color
-                  ? {
-                      bg: '',
-                      style: { background: `#${label.color}` },
-                    }
-                  : {
-                      bg: text2color(label.name || '', ['light']),
-                    })}
-              >
-                {label.name}
-              </Badge>
-            ),
-        )}
-      </Stack>
-    </Card.Header>
-    <Card.Body
-      as="article"
-      dangerouslySetInnerHTML={{ __html: marked(body || '') }}
-    />
-    <Card.Footer className="d-flex justify-content-between align-items-center">
-      {user && <Nameplate name={user.name || ''} avatar={user.avatar_url} />}
+        <a
+          className="text-decoration-none text-secondary text-truncate"
+          title={title}
+          href={html_url}
+          target="_blank"
+          rel="noreferrer"
+        >
+          #{number} {title}
+        </a>
+        <Stack direction="horizontal" gap={2}>
+          {labels.map(
+            label =>
+              typeof label === 'object' && (
+                <Badge
+                  key={label.name}
+                  className="fs-6"
+                  {...(label.color
+                    ? {
+                        bg: '',
+                        style: { background: `#${label.color}` },
+                      }
+                    : {
+                        bg: text2color(label.name || '', ['light']),
+                      })}
+                >
+                  {label.name}
+                </Badge>
+              ),
+          )}
+        </Stack>
+      </Card.Header>
+      <Card.Body as="article" dangerouslySetInnerHTML={{ __html: html }} />
+      <Card.Footer className="d-flex justify-content-between align-items-center">
+        {user && <Nameplate name={user.name || ''} avatar={user.avatar_url} />}
 
-      <Stack direction="horizontal" gap={2}>
-        <Icon name="chat-left-text" />
-        {comments}
-      </Stack>
+        <Stack direction="horizontal" gap={2}>
+          <Icon name="chat-left-text" />
+          {comments}
+        </Stack>
 
-      <time dateTime={created_at}>{new Date(created_at).toLocaleString()}</time>
-    </Card.Footer>
-  </Card>
-);
+        <time dateTime={created_at}>
+          {new Date(created_at).toLocaleString()}
+        </time>
+      </Card.Footer>
+    </Card>
+  );
+};

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.