optimize HistoryItem

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

@@ -35,22 +35,50 @@
 
   .timeline {
     margin-top: 1rem;
-    p {
+
+    .history {
+      display: flex;
       font-family: var(--theme-font);
-      font-size: 1rem;
 
-      .card {
-          color: #48faf0;
-      }
-      .current-location {
-          color: #8484ff;
+      .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;
+        }
       }
-      .op {
-          color: yellow;
+
+      .op-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 0 0.8rem;
+
+        .op {
           font-size: 1.2rem;
+        }
+
+        .arrow {
+          display: flex;
+          width: 4rem;
+          height: 2rem;
+        }
+
       }
+
       .target {
-          color: #f16b3f;
+        margin-top: 3rem;
+        font-size: 1.2rem;
+        color: #f16b3f;
       }
     }
   }

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

@@ -5,7 +5,7 @@ import { proxy, useSnapshot } from "valtio";
 
 import { fetchStrings, Region, ygopro } from "@/api";
 import { History, HistoryOp, historyStore } from "@/stores";
-import { ScrollableArea } from "@/ui/Shared";
+import { ScrollableArea, YgoCard } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 
@@ -48,22 +48,26 @@ 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={
+          "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOrl9DtS0_aFlpp1cYH1wVdoNSTesfK2VvbQ&s"
+        }
+        className={styles.arrow}
+      />
+    </div>
+    {target && <div className={styles.target}>{`${zone2Text(target)}`}</div>}
+  </div>
 );
 
 function zone2Text(zone: ygopro.CardZone): string {