From 4dacd825c835e513e229e29af2ceaed79e2a8ce3 Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Thu, 16 Feb 2023 23:09:04 +0800
Subject: [PATCH] feature #10 add video page click up name skip to bilibili
 space page

---
 src/routers/video/item/index.tsx        |  3 +-
 src/routers/video/item/item.module.less | 56 +++++++++++--------------
 src/routers/video/item/videoinfo.tsx    | 19 +++++----
 src/routers/video/tools.ts              |  3 +-
 src/routers/video/videotype.ts          |  1 +
 5 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/src/routers/video/item/index.tsx b/src/routers/video/item/index.tsx
index add8b4b..773f4e7 100644
--- a/src/routers/video/item/index.tsx
+++ b/src/routers/video/item/index.tsx
@@ -57,7 +57,8 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
           "coin",
           "favorite",
           "like",
-          "face"
+          "face",
+          "mid"
         )}
       />
     </section>
diff --git a/src/routers/video/item/item.module.less b/src/routers/video/item/item.module.less
index 8522e1f..1a866bb 100644
--- a/src/routers/video/item/item.module.less
+++ b/src/routers/video/item/item.module.less
@@ -67,46 +67,38 @@
         }
 
         .video-up {
+            @gap: 5px;
             display: flex;
-            align-items: stretch;
-
-            &>*:not(:first-child) {
-                margin-left: 5px;
-            }
+            align-items: center;
+            color: rgb(148, 153, 160);
+            font-size: 13px;
+            transition: color .2s linear;
+            column-gap: @gap;
 
-            &>svg {
+            &>svg:first-child {
                 flex-shrink: 0;
+                cursor: pointer;
             }
 
-            &-desc {
-                font-size: 13px;
-                display: flex;
-                flex-flow: column nowrap;
-
-
-
-                a {
-
-                    color: rgb(148, 153, 160);
-                    cursor: pointer;
-                    transition: color .2s linear;
-
-                    &:hover,
-                    &:active {
-                        color: #00aeec;
-                    }
+            &>span:last-child {
+                flex-shrink: 0;
 
-                    &>span {
-                        display: inline-block;
-                        height: 16px;
-                        line-height: 16px;
+                &::before {
+                    content: "·";
+                    margin-right: @gap;
+                }
+            }
 
-                        &:not(:first-of-type)::before {
-                            content: '·';
-                            margin: 0 4px;
-                        }
+            &>a {
+                flex-shrink: 1;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                cursor: pointer;
 
-                    }
+                &:hover,
+                &:active {
+                    color: #00aeec;
                 }
             }
 
diff --git a/src/routers/video/item/videoinfo.tsx b/src/routers/video/item/videoinfo.tsx
index 3a51055..a80a530 100644
--- a/src/routers/video/item/videoinfo.tsx
+++ b/src/routers/video/item/videoinfo.tsx
@@ -6,9 +6,9 @@ import { UPIcon } from "./icon";
 import styles from "./item.module.less";
 import { useScreenSize } from "@components/proview/screenSize";
 export const VideoInfo: FC<
-  Pick<VideoRouterImageCardType, "title" | "name" | "pubdate" | "bvid">
+  Pick<VideoRouterImageCardType, "title" | "name" | "pubdate" | "bvid" | "mid">
 > = (props) => {
-  const { title, name, bvid, pubdate } = props;
+  const { title, name, bvid, pubdate, mid } = props;
   const { sm } = useScreenSize();
   return (
     <div className={styles["video-info"]}>
@@ -22,12 +22,15 @@ export const VideoInfo: FC<
       </Link>
       <div className={styles["video-up"]}>
         <UPIcon height={16} width={32} title={`芝士${name.slice(0, 2)}`} />
-        <div className={styles["video-up-desc"]}>
-          <Link underline='none' color='inherit'>
-            <span title={name}>{name}</span>
-            {!sm && <span>{getrealtiveTime(pubdate * 1000)}</span>}
-          </Link>
-        </div>
+        <Link
+          underline='none'
+          color='inherit'
+          target='_blank'
+          href={`https://space.bilibili.com/${mid}`}
+        >
+          <span title={name}>{name}</span>
+        </Link>
+        {!sm && <span>{getrealtiveTime(pubdate * 1000)}</span>}
       </div>
     </div>
   );
diff --git a/src/routers/video/tools.ts b/src/routers/video/tools.ts
index 2f3f79e..ee6cd2d 100644
--- a/src/routers/video/tools.ts
+++ b/src/routers/video/tools.ts
@@ -43,6 +43,7 @@ export function PickVideoRouterImageCardType<
     "danmaku",
     "duration",
     "favorite",
-    "face"
+    "face",
+    "mid"
   );
 }
diff --git a/src/routers/video/videotype.ts b/src/routers/video/videotype.ts
index cb4f14f..cdd276a 100644
--- a/src/routers/video/videotype.ts
+++ b/src/routers/video/videotype.ts
@@ -15,6 +15,7 @@ export type VideoRouterImageCardType = Pick<
   | "tname"
   | "copyright"
   | "title"
+  | "mid"
   | "pic"
   | "tag"
   | "view"