optimize HistoryItem

neos-assets/arrow.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<polygon fill="#6E83B7" points="502,256 302,106 302,186 146,186 146,326 302,326 302,406 		"/>
+	</g>
+	<g>
+		<rect x="78" y="186" fill="#6E83B7" width="40" height="140"/>
+	</g>
+	<g>
+		<rect x="10" y="186" fill="#6E83B7" width="40" height="140"/>
+	</g>
+</g>
+</svg>

src/stores/historyStore.ts

 import { proxy } from "valtio";
 
-import { fetchCard, ygopro } from "@/api";
+import { ygopro } from "@/api";
 import { Context } from "@/container";
 
 import { NeosStore } from "./shared";
@@ -17,7 +17,7 @@ export enum HistoryOp {
 }
 
 export interface History {
-  card?: string;
+  card: number;
   opponent: boolean;
   currentLocation?: ygopro.CardLocation;
   operation: HistoryOp;
@@ -35,7 +35,7 @@ export class HistoryStore implements NeosStore {
   ) {
     // TODO: Refinement
     this.historys.push({
-      card: fetchCard(card).text.name,
+      card,
       opponent: !context.matStore.isMe(from.controller),
       currentLocation: from,
       operation: HistoryOp.MOVE,
@@ -45,7 +45,7 @@ export class HistoryStore implements NeosStore {
 
   putEffect(context: Context, card: number, location: ygopro.CardLocation) {
     this.historys.push({
-      card: fetchCard(card).text.name,
+      card,
       opponent: !context.matStore.isMe(location.controller),
       currentLocation: location,
       operation: HistoryOp.EFFECT,
@@ -54,7 +54,7 @@ export class HistoryStore implements NeosStore {
 
   putTargeted(context: Context, card: number, location: ygopro.CardLocation) {
     this.historys.push({
-      card: fetchCard(card).text.name,
+      card,
       opponent: !context.matStore.isMe(location.controller),
       currentLocation: location,
       operation: HistoryOp.TARGETED,
@@ -63,7 +63,7 @@ export class HistoryStore implements NeosStore {
 
   putConfirmed(context: Context, card: number, location: ygopro.CardLocation) {
     this.historys.push({
-      card: fetchCard(card).text.name,
+      card,
       opponent: !context.matStore.isMe(location.controller),
       currentLocation: location,
       operation: HistoryOp.CONFIRMED,
@@ -72,7 +72,7 @@ export class HistoryStore implements NeosStore {
 
   putSummon(context: Context, card: number, location: ygopro.CardLocation) {
     this.historys.push({
-      card: fetchCard(card).text.name,
+      card,
       opponent: !context.matStore.isMe(location.controller),
       operation: HistoryOp.SUMMON,
     });
@@ -80,7 +80,7 @@ export class HistoryStore implements NeosStore {
 
   putSpSummon(context: Context, card: number, location: ygopro.CardLocation) {
     this.historys.push({
-      card: fetchCard(card).text.name,
+      card,
       opponent: !context.matStore.isMe(location.controller),
       operation: HistoryOp.SP_SUMMON,
     });
@@ -88,7 +88,7 @@ export class HistoryStore implements NeosStore {
 
   putFlipSummon(context: Context, card: number, location: ygopro.CardLocation) {
     this.historys.push({
-      card: fetchCard(card).text.name,
+      card,
       opponent: !context.matStore.isMe(location.controller),
       operation: HistoryOp.FLIP_SUMMON,
     });

src/ui/Duel/Message/ActionHistory/index.module.scss

@@ -34,23 +34,55 @@
   height: 100%;
 
   .timeline {
+    display: flex;
+    flex-direction: column;
     margin-top: 1rem;
-    p {
+    gap: 0.5rem;
+
+    .history {
+      display: flex;
       font-family: var(--theme-font);
-      font-size: 1rem;
 
-      .card {
-          color: #48faf0;
-      }
-      .current-location {
+      .card-container {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+
+        .card {
+          width: 4rem;
+          height: auto;
+        }
+
+        .location {
+          margin-top: 3rem;
+          margin-left: 1rem;
+          font-size: 1.2rem;
           color: #8484ff;
+        }
       }
-      .op {
-          color: yellow;
+
+      .op-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 0 0.8rem;
+
+        .op {
           font-size: 1.2rem;
+          color: #48faf0;
+        }
+
+        .arrow {
+          display: flex;
+          width: 3rem;
+          height: auto;
+        }
       }
+
       .target {
-          color: #f16b3f;
+        margin-top: 3rem;
+        font-size: 1.2rem;
+        color: #f16b3f;
       }
     }
   }

src/ui/Duel/Message/ActionHistory/index.tsx

 import { RightOutlined } from "@ant-design/icons";
-import { Drawer, Timeline } from "antd";
+import { Drawer } from "antd";
 import React from "react";
 import { proxy, useSnapshot } from "valtio";
 
 import { fetchStrings, Region, ygopro } from "@/api";
+import { useConfig } from "@/config";
 import { History, HistoryOp, historyStore } from "@/stores";
-import { ScrollableArea } from "@/ui/Shared";
+import { ScrollableArea, YgoCard } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 
+const { assetsPath } = useConfig();
+
 const defaultStore = {
   isOpen: false,
 };
@@ -30,13 +33,11 @@ export const ActionHistory: React.FC = () => {
       title="操作历史" // TODO: I18N
     >
       <ScrollableArea className={styles.container} maxHeight="var(--height)">
-        <Timeline
-          className={styles.timeline}
-          items={historys.map((history) => ({
-            color: history.opponent ? "red" : "blue",
-            children: <HistoryItem {...(history as History)} />,
-          }))}
-        />
+        <div className={styles.timeline}>
+          {historys.map((history) => (
+            <HistoryItem {...(history as History)} />
+          ))}
+        </div>
       </ScrollableArea>
     </Drawer>
   );
@@ -48,22 +49,21 @@ const HistoryItem: React.FC<History> = ({
   operation,
   target,
 }) => (
-  <p>
-    <span className={styles.card}>{card ?? "未知卡片"}</span>
-    {currentLocation && (
-      <span className={styles["current-location"]}>{` [${zone2Text(
-        currentLocation.zone,
-      )}]`}</span>
-    )}
-    <span>{"  "}</span>
-    <span className={styles.op}>{Op2Text(operation)}</span>
-    {target && (
-      <>
-        <span>{"  "}</span>
-        <span className={styles.target}>{`[${zone2Text(target)}]`}</span>
-      </>
-    )}
-  </p>
+  <div className={styles.history}>
+    <div className={styles["card-container"]}>
+      <YgoCard className={styles.card} code={card} />
+      {currentLocation && (
+        <div className={styles.location}>{`${zone2Text(
+          currentLocation.zone,
+        )}`}</div>
+      )}
+    </div>
+    <div className={styles["op-container"]}>
+      <div className={styles.op}>{Op2Text(operation)}</div>
+      <img src={`${assetsPath}/arrow.svg`} className={styles.arrow} />
+    </div>
+    {target && <div className={styles.target}>{`${zone2Text(target)}`}</div>}
+  </div>
 );
 
 function zone2Text(zone: ygopro.CardZone): string {