refactor: allow chinese layer names

docs/markdown.md

@@ -80,6 +80,22 @@
 
 图标会渲染为 `<icon class="icon-attack"></icon>` 形式。
 
+### 支持多种图片格式
+
+默认情况下，`:[icon-name]` 会查找 `.png` 文件。你也可以显式指定其他支持的格式：
+
+```markdown
+:[attack]           <!-- 查找 attack.png -->
+:[attack.svg]       <!-- 查找 attack.svg -->
+:[shield.gif]       <!-- 查找 shield.gif -->
+:[photo.jpg]        <!-- 查找 photo.jpg -->
+:[icon.webp]        <!-- 查找 icon.webp -->
+```
+
+**支持的扩展名：** `.svg`、`.png`、`.gif`、`.jpg`、`.jpeg`、`.webp`
+
+**注意：** CSS class 名称始终使用不带扩展名的图标名称（如 `icon-attack`），方便统一样式控制。
+
 ### 配置图标前缀
 
 可通过 `iconPath` 属性指定图标目录：

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

@@ -1,4 +1,4 @@
-import { createStore } from 'solid-js/store';
+import { createStore } from 'solid-js/store';
 import { calculateDimensions } from './dimensions';
 import { loadCSV, CSV } from '../../utils/csv-loader';
 import { initLayerConfigs, formatLayers, initLayerConfigsForSide } from './layer-parser';
@@ -321,7 +321,7 @@ export function createDeckStore(
 
       if (data.length === 0) {
         setState({
-          error: 'CSV 文件为空或格式不正确',
+          error: `CSV ${path} 文件为空或格式不正确`,
           isLoading: false
         });
         return;
@@ -337,7 +337,7 @@ export function createDeckStore(
       updateDimensions();
     } catch (err) {
       setState({
-        error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
+        error: `加载 CSV ${path} 失败：${err instanceof Error ? err.message : '未知错误'}`,
         isLoading: false
       });
     }

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

@@ -11,7 +11,7 @@ export function parseLayers(layersStr: string): Layer[] {
 
   const layers: Layer[] = [];
   // 匹配：prop:x1,y1-x2,y2[ffontSize][direction][align]
-  const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?([lcr])?/g;
+  const regex = /([^: ]+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?([lcr])?/g;
   let match;
 
   while ((match = regex.exec(layersStr)) !== null) {

src/markdown/index.ts

@@ -36,11 +36,31 @@ const marked = new Marked()
     {
         level: 'inline',
         marker: ':',
-        // :[blah] becomes <i class="icon icon-blah"></i>
+        // :[icon] 或 :[icon.ext] 语法
+        // 支持的扩展名: .svg, .png, .gif, .jpg, .jpeg, .webp
+        // 如果不指定扩展名，默认为 .png
         renderer(token) {
             if (!token.meta.name) {
-                const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${token.text}.png')"` : '';
+                const iconText = token.text || '';
-                return `<icon ${style} class="icon-${token.text} ${token.attrs?.class || ""}"></icon>`;
+                
+                // 已知支持的图片扩展名
+                const supportedExtensions = ['svg', 'png', 'gif', 'jpg', 'jpeg', 'webp'];
+                
+                // 检查是否包含扩展名（查找最后一个点）
+                let iconName = iconText;
+                let extension = 'png'; // 默认扩展名
+                
+                const lastDotIndex = iconName.lastIndexOf('.');
+                if (lastDotIndex > 0) {
+                    const potentialExt = iconName.slice(lastDotIndex + 1).toLowerCase();
+                    if (supportedExtensions.includes(potentialExt)) {
+                        extension = potentialExt;
+                        iconName = iconName.slice(0, lastDotIndex);
+                    }
+                }
+                
+                const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${iconName}.${extension}')"` : '';
+                return `<icon ${style} class="icon-${iconName} ${token.attrs?.class || ""}"></icon>`;
             }
             return false;
         }