feature #10 add video page click up name skip to bilibili space page

src/routers/video/item/index.tsx

@@ -57,7 +57,8 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
           "coin",
           "favorite",
           "like",
-          "face"
+          "face",
+          "mid"
         )}
       />
     </section>

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;
                 }
             }
 

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>
   );

src/routers/video/tools.ts

@@ -43,6 +43,7 @@ export function PickVideoRouterImageCardType<
     "danmaku",
     "duration",
     "favorite",
-    "face"
+    "face",
+    "mid"
   );
 }

src/routers/video/videotype.ts

@@ -15,6 +15,7 @@ export type VideoRouterImageCardType = Pick<
   | "tname"
   | "copyright"
   | "title"
+  | "mid"
   | "pic"
   | "tag"
   | "view"