fix: icons

src/components/md-deck/CardLayer.tsx

@@ -4,6 +4,7 @@ import { getLayerStyle } from './hooks/dimensions';
 import type { CardData } from './types';
 import {DeckStore} from "./hooks/deckStore";
 import {processVariables} from "../utils/csv-loader";
+import {resolvePath} from "../utils/path";
 
 export interface CardLayerProps {
   cardData: CardData;
@@ -16,7 +17,8 @@ export function CardLayer(props: CardLayerProps) {
   const showBounds = () => props.store.state.isEditing;
   
   function renderLayerContent(content: string) {
-    return parseMarkdown(processVariables(content, props.cardData, props.store.state.cards), props.cardData.iconPath) as string;
+    const iconPath = resolvePath(props.store.state.cards.sourcePath, props.cardData.iconPath);
+    return parseMarkdown(processVariables(content, props.cardData, props.store.state.cards), iconPath) as string;
   }
   return (
     <For each={layers()}>

src/components/md-deck/hooks/deckStore.ts

@@ -74,7 +74,7 @@ export interface DeckActions {
   setPadding: (padding: number) => void;
 
   // 数据设置
-  setCards: (cards: CardData[]) => void;
+  setCards: (cards: CSV<CardData>) => void;
   setActiveTab: (index: number) => void;
   updateCardData: (index: number, key: string, value: string) => void;
 
@@ -139,7 +139,7 @@ export function createDeckStore(
     src: initialSrc,
     rawSrc: initialSrc,
     dimensions: null,
-    cards: [],
+    cards: [] as any,
     activeTab: 0,
     layerConfigs: [],
     isEditing: false,
@@ -195,7 +195,7 @@ export function createDeckStore(
     updateDimensions();
   };
 
-  const setCards = (cards: CardData[]) => setState({ cards, activeTab: 0 });
+  const setCards = (cards: CSV<CardData>) => setState({ cards, activeTab: 0 });
   const setActiveTab = (index: number) => setState({ activeTab: index });
   const updateCardData = (index: number, key: string, value: string) => {
     setState('cards', index, key, value);

src/components/md-deck/hooks/layer-parser.ts

@@ -57,9 +57,6 @@ export function initLayerConfigs(
 ): LayerConfig[] {
   const parsed = parseLayers(existingLayersStr);
   const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
-  if(data.frontmatter){
-    allProps.push(...Object.keys(data.frontmatter));
-  }
 
   return allProps.map(prop => {
     const existing = parsed.find(l => l.prop === prop);

src/components/utils/csv-loader.ts

@@ -71,6 +71,7 @@ export async function loadCSV<T = Record<string, string>>(path: string): Promise
       Object.assign(each, frontmatter);
     }
   }
+  csvResult.sourcePath = path;
   
   csvCache.set(path, result);
   return csvResult;
@@ -82,6 +83,7 @@ interface JSONObject extends Record<string, JSONData> {}
 
 export type CSV<T> = T[] & {
   frontmatter?: JSONObject;
+  sourcePath: string;
 }
 
 export function processVariables<T extends JSONObject> (body: string, currentRow: T, csv: CSV<T>, filtered?: T[], remix?: boolean): string {

src/markdown/index.ts

@@ -35,7 +35,7 @@ const marked = new Marked()
         // :[blah] becomes <i class="icon icon-blah"></i>
         renderer(token) {
             if (!token.meta.name) {
-                const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}${token.text}.png')"` : '';
+                const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${token.text}.png')"` : '';
                 return `<icon ${style} class="icon-${token.text}"></icon>`;
             }
             return false;

src/styles.css

@@ -2,7 +2,7 @@
 @plugin "@tailwindcss/typography";
 
 /* icon */
-icon{
+icon, pull{
     @apply inline-block;
     width: 1em;
     height: 1em;
@@ -11,6 +11,11 @@ icon{
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
+    margin-bottom: -0.1em;
+}
+pull{
+    margin-right: -.5em;
+    width: 0;
 }
 
 /* prose */