Compare commits
15 Commits
561d647bce
...
0e2f214552
| Author | SHA1 | Date |
|---|---|---|
 hypercross
|
0e2f214552 | |
|
hypercross
|
23d6d81532 | |
|
hypercross
|
ce01044c41 | |
|
hypercross
|
c6580b7c69 | |
|
hypercross
|
8ddc2a672a | |
|
hypercross
|
0aaadea2da | |
|
hypercross
|
72285e093f | |
|
hypercross
|
14ce2e1a6b | |
|
hypercross
|
fdecd0fb6e | |
|
hypercross
|
b83e884f6f | |
|
hypercross
|
a292624c08 | |
|
hypercross
|
5638b6200b | |
|
hypercross
|
a409efaf95 | |
|
hypercross
|
807ce5a406 | |
|
hypercross
|
88cfe03779 |
|
|
@ -0,0 +1,10 @@
|
||||||
|
# 默认忽略的文件
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Rider 忽略的文件
|
||||||
|
/projectSettingsUpdater.xml
|
||||||
|
/modules.xml
|
||||||
|
/.idea.ttrpg-tools.iml
|
||||||
|
/contentModel.xml
|
||||||
|
# 基于编辑器的 HTTP 客户端请求
|
||||||
|
/httpRequests/
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="UserContentModel">
|
||||||
|
<attachedFolders />
|
||||||
|
<explicitIncludes />
|
||||||
|
<explicitExcludes />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -26,8 +26,6 @@ export const Article: Component<ArticleProps> = (props) => {
|
||||||
fetchArticleContent
|
fetchArticleContent
|
||||||
);
|
);
|
||||||
|
|
||||||
let articleRef: HTMLArticleElement | undefined;
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const data = content();
|
const data = content();
|
||||||
if (data) {
|
if (data) {
|
||||||
|
|
@ -40,7 +38,7 @@ export const Article: Component<ArticleProps> = (props) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<article ref={articleRef} class={`prose ${props.class || ''}`} data-src={props.src}>
|
<article class={`prose ${props.class || ''}`} data-src={props.src}>
|
||||||
<Show when={content.loading}>
|
<Show when={content.loading}>
|
||||||
<div class="text-gray-500">加载中...</div>
|
<div class="text-gray-500">加载中...</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
|
||||||
|
|
@ -3,21 +3,23 @@ import { generateToc, type FileNode, type TocNode } from "../data-loader";
|
||||||
import { useLocation } from "@solidjs/router";
|
import { useLocation } from "@solidjs/router";
|
||||||
import { FileTreeNode, HeadingNode } from "./FileTree";
|
import { FileTreeNode, HeadingNode } from "./FileTree";
|
||||||
|
|
||||||
interface SidebarProps {
|
export interface SidebarProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SidebarContentProps {
|
||||||
|
fileTree: FileNode[];
|
||||||
|
pathHeadings: Record<string, TocNode[]>;
|
||||||
|
currentPath: string;
|
||||||
|
onClose: () => void;
|
||||||
isDesktop?: boolean;
|
isDesktop?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 侧边栏内容组件
|
* 侧边栏内容组件
|
||||||
*/
|
*/
|
||||||
const SidebarContent: Component<{
|
const SidebarContent: Component<SidebarContentProps> = (props) => {
|
||||||
fileTree: FileNode[];
|
|
||||||
pathHeadings: Record<string, TocNode[]>;
|
|
||||||
currentPath: string;
|
|
||||||
onClose: () => void;
|
|
||||||
}> = (props) => {
|
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
// 响应式获取当前文件的标题列表
|
// 响应式获取当前文件的标题列表
|
||||||
|
|
@ -82,9 +84,7 @@ const SidebarContent: Component<{
|
||||||
export const MobileSidebar: Component<SidebarProps> = (props) => {
|
export const MobileSidebar: Component<SidebarProps> = (props) => {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
|
const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
|
||||||
const [pathHeadings, setPathHeadings] = createSignal<
|
const [pathHeadings, setPathHeadings] = createSignal<Record<string, TocNode[]>>({});
|
||||||
Record<string, TocNode[]>
|
|
||||||
>({});
|
|
||||||
|
|
||||||
// 加载目录数据
|
// 加载目录数据
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
|
@ -122,12 +122,10 @@ export const MobileSidebar: Component<SidebarProps> = (props) => {
|
||||||
/**
|
/**
|
||||||
* 桌面端固定侧边栏
|
* 桌面端固定侧边栏
|
||||||
*/
|
*/
|
||||||
export const DesktopSidebar: Component = () => {
|
export const DesktopSidebar: Component<{}> = () => {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
|
const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
|
||||||
const [pathHeadings, setPathHeadings] = createSignal<
|
const [pathHeadings, setPathHeadings] = createSignal<Record<string, TocNode[]>>({});
|
||||||
Record<string, TocNode[]>
|
|
||||||
>({});
|
|
||||||
|
|
||||||
// 加载目录数据
|
// 加载目录数据
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
|
@ -143,7 +141,7 @@ export const DesktopSidebar: Component = () => {
|
||||||
pathHeadings={pathHeadings()}
|
pathHeadings={pathHeadings()}
|
||||||
currentPath={location.pathname}
|
currentPath={location.pathname}
|
||||||
onClose={() => {}}
|
onClose={() => {}}
|
||||||
isDesktop={true}
|
isDesktop
|
||||||
/>
|
/>
|
||||||
</aside>
|
</aside>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// 导入以注册自定义元素
|
// 导入自定义元素以注册
|
||||||
import './dice';
|
import './md-dice';
|
||||||
import './table';
|
import './md-table';
|
||||||
import './md-link';
|
import './md-link';
|
||||||
import './md-pins';
|
import './md-pins';
|
||||||
import './md-deck';
|
import './md-deck';
|
||||||
|
|
@ -13,5 +13,5 @@ export type { SidebarProps } from './Sidebar';
|
||||||
export { FileTreeNode, HeadingNode } from './FileTree';
|
export { FileTreeNode, HeadingNode } from './FileTree';
|
||||||
|
|
||||||
// 导出数据类型
|
// 导出数据类型
|
||||||
export type { DiceProps } from './dice';
|
export type { DiceProps } from './md-dice';
|
||||||
export type { TableProps } from './table';
|
export type { TableProps } from './md-table';
|
||||||
|
|
|
||||||
|
|
@ -1,558 +0,0 @@
|
||||||
import { customElement, noShadowDOM } from 'solid-element';
|
|
||||||
import { createSignal, For, Show, createEffect, createMemo, createResource, onMount } from 'solid-js';
|
|
||||||
import { parse } from 'csv-parse/browser/esm/sync';
|
|
||||||
import { marked } from '../markdown';
|
|
||||||
import { resolvePath } from '../utils/path';
|
|
||||||
|
|
||||||
interface CardData {
|
|
||||||
[key: string]: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Layer {
|
|
||||||
prop: string;
|
|
||||||
x1: number;
|
|
||||||
y1: number;
|
|
||||||
x2: number;
|
|
||||||
y2: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LayerConfig {
|
|
||||||
prop: string;
|
|
||||||
visible: boolean;
|
|
||||||
x1: number;
|
|
||||||
y1: number;
|
|
||||||
x2: number;
|
|
||||||
y2: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1"
|
|
||||||
function parseLayers(layersStr: string): Layer[] {
|
|
||||||
if (!layersStr) return [];
|
|
||||||
|
|
||||||
const layers: Layer[] = [];
|
|
||||||
const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)/g;
|
|
||||||
let match;
|
|
||||||
|
|
||||||
while ((match = regex.exec(layersStr)) !== null) {
|
|
||||||
layers.push({
|
|
||||||
prop: match[1],
|
|
||||||
x1: parseInt(match[2]),
|
|
||||||
y1: parseInt(match[3]),
|
|
||||||
x2: parseInt(match[4]),
|
|
||||||
y2: parseInt(match[5])
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return layers;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 格式化 layers 为字符串
|
|
||||||
function formatLayers(layers: LayerConfig[]): string {
|
|
||||||
return layers
|
|
||||||
.filter(l => l.visible)
|
|
||||||
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
|
|
||||||
.join(' ');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 全局缓存已加载的 CSV 内容
|
|
||||||
const csvCache = new Map<string, CardData[]>();
|
|
||||||
|
|
||||||
customElement('md-deck', {
|
|
||||||
size: '54x86',
|
|
||||||
grid: '5x8',
|
|
||||||
bleed: '1',
|
|
||||||
padding: '2',
|
|
||||||
layers: '',
|
|
||||||
fixed: false
|
|
||||||
}, (props, { element }) => {
|
|
||||||
noShadowDOM();
|
|
||||||
|
|
||||||
const [cards, setCards] = createSignal<CardData[]>([]);
|
|
||||||
const [activeTab, setActiveTab] = createSignal(0);
|
|
||||||
let tabsContainer: HTMLDivElement | undefined;
|
|
||||||
|
|
||||||
// 编辑器状态
|
|
||||||
const [isEditing, setIsEditing] = createSignal(false);
|
|
||||||
const [editingLayer, setEditingLayer] = createSignal<string | null>(null);
|
|
||||||
const [layerConfigs, setLayerConfigs] = createSignal<LayerConfig[]>([]);
|
|
||||||
|
|
||||||
// 框选状态
|
|
||||||
const [isSelecting, setIsSelecting] = createSignal(false);
|
|
||||||
const [selectStart, setSelectStart] = createSignal<{ x: number; y: number } | null>(null);
|
|
||||||
const [selectEnd, setSelectEnd] = createSignal<{ x: number; y: number } | null>(null);
|
|
||||||
|
|
||||||
// 本地编辑的属性
|
|
||||||
const [localSize, setLocalSize] = createSignal(props.size as string || '54x86');
|
|
||||||
const [localGrid, setLocalGrid] = createSignal(props.grid as string || '5x8');
|
|
||||||
const [localBleed, setLocalBleed] = createSignal(props.bleed as string || '1');
|
|
||||||
const [localPadding, setLocalPadding] = createSignal(props.padding as string || '2');
|
|
||||||
|
|
||||||
// 从 element 的 textContent 获取 CSV 路径
|
|
||||||
const src = element?.textContent?.trim() || '';
|
|
||||||
|
|
||||||
// 隐藏原始文本内容
|
|
||||||
if (element) {
|
|
||||||
element.textContent = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
|
|
||||||
const articleEl = element?.closest('article[data-src]');
|
|
||||||
const articlePath = articleEl?.getAttribute('data-src') || '';
|
|
||||||
|
|
||||||
// 解析相对路径
|
|
||||||
const resolvedSrc = resolvePath(articlePath, src);
|
|
||||||
|
|
||||||
// 加载 CSV 文件的函数
|
|
||||||
const loadCSV = async (path: string): Promise<CardData[]> => {
|
|
||||||
if (csvCache.has(path)) {
|
|
||||||
return csvCache.get(path)!;
|
|
||||||
}
|
|
||||||
const response = await fetch(path);
|
|
||||||
const content = await response.text();
|
|
||||||
const records = parse(content, {
|
|
||||||
columns: true,
|
|
||||||
comment: '#',
|
|
||||||
trim: true,
|
|
||||||
skipEmptyLines: true
|
|
||||||
});
|
|
||||||
const result = records as CardData[];
|
|
||||||
csvCache.set(path, result);
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const [csvData] = createResource(() => resolvedSrc, loadCSV);
|
|
||||||
|
|
||||||
createEffect(() => {
|
|
||||||
const data = csvData();
|
|
||||||
if (data) {
|
|
||||||
setCards(data);
|
|
||||||
// 初始化 layer configs
|
|
||||||
const parsed = parseLayers(props.layers as string || '');
|
|
||||||
const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
|
|
||||||
const configs: LayerConfig[] = allProps.map(prop => {
|
|
||||||
const existing = parsed.find(l => l.prop === prop);
|
|
||||||
return {
|
|
||||||
prop,
|
|
||||||
visible: !!existing,
|
|
||||||
x1: existing?.x1 || 1,
|
|
||||||
y1: existing?.y1 || 1,
|
|
||||||
x2: existing?.x2 || 2,
|
|
||||||
y2: existing?.y2 || 2
|
|
||||||
};
|
|
||||||
});
|
|
||||||
setLayerConfigs(configs);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 检查是否 fixed
|
|
||||||
const isFixed = () => props.fixed === true || props.fixed === 'true';
|
|
||||||
|
|
||||||
// 解析尺寸
|
|
||||||
const dimensions = createMemo(() => {
|
|
||||||
const [width, height] = localSize().split('x').map(Number);
|
|
||||||
const [bleedW, bleedH] = localBleed().includes('x')
|
|
||||||
? localBleed().split('x').map(Number)
|
|
||||||
: [Number(localBleed()), Number(localBleed())];
|
|
||||||
const [padW, padH] = localPadding().includes('x')
|
|
||||||
? localPadding().split('x').map(Number)
|
|
||||||
: [Number(localPadding()), Number(localPadding())];
|
|
||||||
|
|
||||||
// 实际卡牌尺寸（含出血）
|
|
||||||
const cardWidth = width + bleedW * 2;
|
|
||||||
const cardHeight = height + bleedH * 2;
|
|
||||||
|
|
||||||
// 网格区域尺寸（减去 padding）
|
|
||||||
const gridAreaWidth = width - padW * 2;
|
|
||||||
const gridAreaHeight = height - padH * 2;
|
|
||||||
|
|
||||||
// 解析网格
|
|
||||||
const [gridW, gridH] = localGrid().split('x').map(Number);
|
|
||||||
|
|
||||||
// 每个网格单元的尺寸（mm）
|
|
||||||
const cellWidth = gridAreaWidth / gridW;
|
|
||||||
const cellHeight = gridAreaHeight / gridH;
|
|
||||||
|
|
||||||
// 网格区域起点（相对于卡牌左上角，含 bleed 和 padding）
|
|
||||||
const gridOriginX = bleedW + padW;
|
|
||||||
const gridOriginY = bleedH + padH;
|
|
||||||
|
|
||||||
return {
|
|
||||||
cardWidth,
|
|
||||||
cardHeight,
|
|
||||||
gridAreaWidth,
|
|
||||||
gridAreaHeight,
|
|
||||||
cellWidth,
|
|
||||||
cellHeight,
|
|
||||||
gridW,
|
|
||||||
gridH,
|
|
||||||
gridOriginX,
|
|
||||||
gridOriginY
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// 渲染 layer 内容
|
|
||||||
const renderLayer = (layer: Layer, cardData: CardData): string => {
|
|
||||||
const content = cardData[layer.prop] || '';
|
|
||||||
return marked.parse(content) as string;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 计算 layer 位置样式（单位：mm）
|
|
||||||
const getLayerStyle = (layer: Layer, dims: ReturnType<typeof dimensions>) => {
|
|
||||||
const left = (layer.x1 - 1) * dims.cellWidth;
|
|
||||||
const top = (layer.y1 - 1) * dims.cellHeight;
|
|
||||||
const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
|
|
||||||
const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
|
|
||||||
|
|
||||||
return {
|
|
||||||
left: `${left}mm`,
|
|
||||||
top: `${top}mm`,
|
|
||||||
width: `${width}mm`,
|
|
||||||
height: `${height}mm`
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// 开始框选
|
|
||||||
const handleCardMouseDown = (e: MouseEvent) => {
|
|
||||||
if (!isEditing() || !editingLayer()) return;
|
|
||||||
|
|
||||||
const cardEl = e.currentTarget as HTMLElement;
|
|
||||||
const rect = cardEl.getBoundingClientRect();
|
|
||||||
const dims = dimensions();
|
|
||||||
|
|
||||||
// 计算相对于网格区域起点的坐标（网格单位）
|
|
||||||
const offsetX = (e.clientX - rect.left) / rect.width * dims.cardWidth;
|
|
||||||
const offsetY = (e.clientY - rect.top) / rect.height * dims.cardHeight;
|
|
||||||
|
|
||||||
const gridX = Math.max(1, Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1);
|
|
||||||
const gridY = Math.max(1, Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1);
|
|
||||||
|
|
||||||
setSelectStart({ x: gridX, y: gridY });
|
|
||||||
setSelectEnd({ x: gridX, y: gridY });
|
|
||||||
setIsSelecting(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新框选结束位置
|
|
||||||
const handleCardMouseMove = (e: MouseEvent) => {
|
|
||||||
if (!isSelecting()) return;
|
|
||||||
|
|
||||||
const cardEl = e.currentTarget as HTMLElement;
|
|
||||||
const rect = cardEl.getBoundingClientRect();
|
|
||||||
const dims = dimensions();
|
|
||||||
|
|
||||||
const offsetX = (e.clientX - rect.left) / rect.width * dims.cardWidth;
|
|
||||||
const offsetY = (e.clientY - rect.top) / rect.height * dims.cardHeight;
|
|
||||||
|
|
||||||
const gridX = Math.max(1, Math.min(dims.gridW, Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1));
|
|
||||||
const gridY = Math.max(1, Math.min(dims.gridH, Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1));
|
|
||||||
|
|
||||||
setSelectEnd({ x: gridX, y: gridY });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 结束框选
|
|
||||||
const handleCardMouseUp = () => {
|
|
||||||
if (!isSelecting() || !editingLayer()) return;
|
|
||||||
|
|
||||||
const start = selectStart()!;
|
|
||||||
const end = selectEnd()!;
|
|
||||||
|
|
||||||
const x1 = Math.min(start.x, end.x);
|
|
||||||
const y1 = Math.min(start.y, end.y);
|
|
||||||
const x2 = Math.max(start.x, end.x);
|
|
||||||
const y2 = Math.max(start.y, end.y);
|
|
||||||
|
|
||||||
setLayerConfigs(configs => configs.map(c =>
|
|
||||||
c.prop === editingLayer() ? { ...c, x1, y1, x2, y2 } : c
|
|
||||||
));
|
|
||||||
|
|
||||||
setIsSelecting(false);
|
|
||||||
setSelectStart(null);
|
|
||||||
setSelectEnd(null);
|
|
||||||
setEditingLayer(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 切换图层可见性
|
|
||||||
const toggleLayerVisible = (prop: string) => {
|
|
||||||
setLayerConfigs(configs => configs.map(c =>
|
|
||||||
c.prop === prop ? { ...c, visible: !c.visible } : c
|
|
||||||
));
|
|
||||||
};
|
|
||||||
|
|
||||||
// 开始编辑图层位置
|
|
||||||
const startEditingLayer = (prop: string) => {
|
|
||||||
setEditingLayer(prop);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生成 md-deck 代码
|
|
||||||
const generateCode = () => {
|
|
||||||
const layersStr = formatLayers(layerConfigs());
|
|
||||||
return `:md-deck[${src}]{size="${localSize()}" grid="${localGrid()}" bleed="${localBleed()}" padding="${localPadding()}" layers="${layersStr}"}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 复制代码
|
|
||||||
const copyCode = () => {
|
|
||||||
const code = generateCode();
|
|
||||||
navigator.clipboard.writeText(code).then(() => {
|
|
||||||
alert('已复制到剪贴板！');
|
|
||||||
}).catch(err => {
|
|
||||||
console.error('复制失败:', err);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新 CSV 数据
|
|
||||||
const updateCardData = (key: string, value: string) => {
|
|
||||||
setCards(cards => cards.map((card, i) =>
|
|
||||||
i === activeTab() ? { ...card, [key]: value } : card
|
|
||||||
));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="md-deck flex gap-4">
|
|
||||||
{/* 左侧：CSV 数据编辑 */}
|
|
||||||
<Show when={isEditing() && !isFixed()}>
|
|
||||||
<div class="w-64 flex-shrink-0">
|
|
||||||
<h3 class="font-bold mb-2">卡牌数据</h3>
|
|
||||||
<div class="space-y-2 max-h-96 overflow-y-auto">
|
|
||||||
<For each={Object.keys(cards()[activeTab()] || {})}>
|
|
||||||
{(key) => (
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700">{key}</label>
|
|
||||||
<textarea
|
|
||||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
|
||||||
rows={3}
|
|
||||||
value={cards()[activeTab()]?.[key] || ''}
|
|
||||||
onInput={(e) => updateCardData(key, e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
{/* 中间：卡牌预览 */}
|
|
||||||
<div class="flex-1">
|
|
||||||
{/* Tab 选择器 */}
|
|
||||||
<div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
|
|
||||||
<button
|
|
||||||
onClick={() => setIsEditing(!isEditing())}
|
|
||||||
class={`px-3 py-1 rounded text-sm font-medium transition-colors ${
|
|
||||||
isEditing() && !isFixed()
|
|
||||||
? 'bg-blue-100 text-blue-600'
|
|
||||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
||||||
} cursor-pointer`}
|
|
||||||
>
|
|
||||||
{isEditing() ? '✓ 编辑中' : '✏️ 编辑'}
|
|
||||||
</button>
|
|
||||||
<div ref={tabsContainer} class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
|
|
||||||
<For each={cards()}>
|
|
||||||
{(card, index) => (
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab(index())}
|
|
||||||
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
|
|
||||||
activeTab() === index()
|
|
||||||
? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
|
|
||||||
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{card.label || card.name || `Card ${index() + 1}`}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 卡牌预览 */}
|
|
||||||
<Show when={!csvData.loading && cards().length > 0}>
|
|
||||||
<div class="flex justify-center">
|
|
||||||
<Show when={activeTab() < cards().length}>
|
|
||||||
{(() => {
|
|
||||||
const currentCard = cards()[activeTab()];
|
|
||||||
const dims = dimensions();
|
|
||||||
const visibleLayers = layerConfigs().filter(l => l.visible);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
class="relative bg-white border border-gray-300 shadow-lg"
|
|
||||||
style={{
|
|
||||||
width: `${dims.cardWidth}mm`,
|
|
||||||
height: `${dims.cardHeight}mm`
|
|
||||||
}}
|
|
||||||
onMouseDown={handleCardMouseDown}
|
|
||||||
onMouseMove={handleCardMouseMove}
|
|
||||||
onMouseUp={handleCardMouseUp}
|
|
||||||
onMouseLeave={handleCardMouseUp}
|
|
||||||
>
|
|
||||||
{/* 框选遮罩 */}
|
|
||||||
<Show when={isSelecting() && selectStart() && selectEnd()}>
|
|
||||||
{(() => {
|
|
||||||
const start = selectStart()!;
|
|
||||||
const end = selectEnd()!;
|
|
||||||
const x1 = Math.min(start.x, end.x);
|
|
||||||
const y1 = Math.min(start.y, end.y);
|
|
||||||
const x2 = Math.max(start.x, end.x);
|
|
||||||
const y2 = Math.max(start.y, end.y);
|
|
||||||
|
|
||||||
const left = dims.gridOriginX + (x1 - 1) * dims.cellWidth;
|
|
||||||
const top = dims.gridOriginY + (y1 - 1) * dims.cellHeight;
|
|
||||||
const width = (x2 - x1 + 1) * dims.cellWidth;
|
|
||||||
const height = (y2 - y1 + 1) * dims.cellHeight;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
|
|
||||||
style={{
|
|
||||||
left: `${left}mm`,
|
|
||||||
top: `${top}mm`,
|
|
||||||
width: `${width}mm`,
|
|
||||||
height: `${height}mm`
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
{/* 网格区域容器 */}
|
|
||||||
<div
|
|
||||||
class="absolute"
|
|
||||||
style={{
|
|
||||||
left: `${dims.gridOriginX}mm`,
|
|
||||||
top: `${dims.gridOriginY}mm`,
|
|
||||||
width: `${dims.gridAreaWidth}mm`,
|
|
||||||
height: `${dims.gridAreaHeight}mm`
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* 编辑模式下的网格线 */}
|
|
||||||
<Show when={isEditing() && !isFixed()}>
|
|
||||||
<div class="absolute inset-0 pointer-events-none">
|
|
||||||
<For each={Array.from({ length: dims.gridW - 1 })}>
|
|
||||||
{(_, i) => (
|
|
||||||
<div
|
|
||||||
class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
|
|
||||||
style={{ left: `${(i() + 1) * dims.cellWidth}mm` }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
<For each={Array.from({ length: dims.gridH - 1 })}>
|
|
||||||
{(_, i) => (
|
|
||||||
<div
|
|
||||||
class="absolute left-0 right-0 border-b border-dashed border-gray-300"
|
|
||||||
style={{ top: `${(i() + 1) * dims.cellHeight}mm` }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
{/* 渲染每个 layer */}
|
|
||||||
<For each={visibleLayers}>
|
|
||||||
{(layer) => {
|
|
||||||
const style = getLayerStyle(layer, dims);
|
|
||||||
const isEditingThis = editingLayer() === layer.prop;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
class={`absolute flex items-center justify-center text-center prose prose-sm ${
|
|
||||||
isEditingThis ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
|
|
||||||
}`}
|
|
||||||
style={style}
|
|
||||||
innerHTML={renderLayer(layer, currentCard)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 右侧：属性编辑表单 */}
|
|
||||||
<Show when={isEditing() && !isFixed()}>
|
|
||||||
<div class="w-64 flex-shrink-0">
|
|
||||||
<h3 class="font-bold mb-2">卡牌属性</h3>
|
|
||||||
|
|
||||||
<div class="space-y-3">
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700">尺寸 (mm)</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
|
||||||
value={localSize()}
|
|
||||||
onInput={(e) => setLocalSize(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700">网格</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
|
||||||
value={localGrid()}
|
|
||||||
onInput={(e) => setLocalGrid(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700">出血 (mm)</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
|
||||||
value={localBleed()}
|
|
||||||
onInput={(e) => setLocalBleed(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700">内边距 (mm)</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
|
||||||
value={localPadding()}
|
|
||||||
onInput={(e) => setLocalPadding(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-4" />
|
|
||||||
|
|
||||||
<h4 class="font-medium text-sm text-gray-700">图层</h4>
|
|
||||||
<For each={layerConfigs()}>
|
|
||||||
{(layer) => (
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={layer.visible}
|
|
||||||
onChange={() => toggleLayerVisible(layer.prop)}
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
<span class="text-sm flex-1">{layer.prop}</span>
|
|
||||||
<button
|
|
||||||
onClick={() => startEditingLayer(layer.prop)}
|
|
||||||
class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
|
|
||||||
editingLayer() === layer.prop
|
|
||||||
? 'bg-blue-500 text-white'
|
|
||||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{editingLayer() === layer.prop ? '✓ 框选' : '编辑位置'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
|
|
||||||
<hr class="my-4" />
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={copyCode}
|
|
||||||
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
|
|
||||||
>
|
|
||||||
📋 复制代码
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
import { Show, For, createMemo } from 'solid-js';
|
||||||
|
import { marked } from '../../markdown';
|
||||||
|
import { getLayerStyle } from './hooks/dimensions';
|
||||||
|
import { useCardSelection } from './hooks/useCardSelection';
|
||||||
|
import { getSelectionBoxStyle } from './hooks/useCardSelection';
|
||||||
|
import type { DeckStore } from './hooks/deckStore';
|
||||||
|
|
||||||
|
export interface CardPreviewProps {
|
||||||
|
store: DeckStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 渲染 layer 内容（提取为纯工具函数）
|
||||||
|
*/
|
||||||
|
function renderLayerContent(layer: { prop: string }, cardData: DeckStore['state']['cards'][number]): string {
|
||||||
|
const content = cardData[layer.prop] || '';
|
||||||
|
return marked.parse(content) as string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 卡牌预览组件
|
||||||
|
*/
|
||||||
|
export function CardPreview(props: CardPreviewProps) {
|
||||||
|
const { store } = props;
|
||||||
|
|
||||||
|
// 使用 createMemo 优化计算
|
||||||
|
const currentCard = createMemo(() => store.state.cards[store.state.activeTab]);
|
||||||
|
const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
|
||||||
|
const selectionStyle = createMemo(() =>
|
||||||
|
getSelectionBoxStyle(store.state.selectStart, store.state.selectEnd, store.state.dimensions)
|
||||||
|
);
|
||||||
|
|
||||||
|
const selection = useCardSelection(store);
|
||||||
|
|
||||||
|
let cardRef: HTMLDivElement | undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<Show when={store.state.activeTab < store.state.cards.length}>
|
||||||
|
<div
|
||||||
|
ref={cardRef}
|
||||||
|
class="relative bg-white border border-gray-300 shadow-lg"
|
||||||
|
style={{
|
||||||
|
width: `${store.state.dimensions?.cardWidth}mm`,
|
||||||
|
height: `${store.state.dimensions?.cardHeight}mm`
|
||||||
|
}}
|
||||||
|
onMouseDown={(e) => selection.onMouseDown(e, cardRef!)}
|
||||||
|
onMouseMove={(e) => selection.onMouseMove(e, cardRef!)}
|
||||||
|
onMouseUp={selection.onMouseUp}
|
||||||
|
onMouseLeave={selection.onMouseLeave}
|
||||||
|
>
|
||||||
|
{/* 框选遮罩 */}
|
||||||
|
<Show when={store.state.isSelecting && selectionStyle()}>
|
||||||
|
<div
|
||||||
|
class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
|
||||||
|
style={selectionStyle()!}
|
||||||
|
/>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* 网格区域容器 */}
|
||||||
|
<div
|
||||||
|
class="absolute"
|
||||||
|
style={{
|
||||||
|
left: `${store.state.dimensions?.gridOriginX}mm`,
|
||||||
|
top: `${store.state.dimensions?.gridOriginY}mm`,
|
||||||
|
width: `${store.state.dimensions?.gridAreaWidth}mm`,
|
||||||
|
height: `${store.state.dimensions?.gridAreaHeight}mm`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 编辑模式下的网格线 */}
|
||||||
|
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||||
|
<div class="absolute inset-0 pointer-events-none">
|
||||||
|
<For each={Array.from({ length: (store.state.dimensions?.gridW || 0) - 1 })}>
|
||||||
|
{(_, i) => (
|
||||||
|
<div
|
||||||
|
class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
|
||||||
|
style={{ left: `${(i() + 1) * (store.state.dimensions?.cellWidth || 0)}mm` }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
<For each={Array.from({ length: (store.state.dimensions?.gridH || 0) - 1 })}>
|
||||||
|
{(_, i) => (
|
||||||
|
<div
|
||||||
|
class="absolute left-0 right-0 border-b border-dashed border-gray-300"
|
||||||
|
style={{ top: `${(i() + 1) * (store.state.dimensions?.cellHeight || 0)}mm` }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* 渲染每个 layer */}
|
||||||
|
<For each={visibleLayers()}>
|
||||||
|
{(layer) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
class={`absolute flex items-center justify-center text-center prose prose-sm ${
|
||||||
|
store.state.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
...getLayerStyle(layer, store.state.dimensions!),
|
||||||
|
'font-size': `${store.state.dimensions?.fontSize}mm`
|
||||||
|
}}
|
||||||
|
innerHTML={renderLayerContent(layer, currentCard())}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { Show } from 'solid-js';
|
||||||
|
import { CardPreview } from './CardPreview';
|
||||||
|
import type { DeckStore } from './hooks/deckStore';
|
||||||
|
|
||||||
|
export interface DeckContentProps {
|
||||||
|
store: DeckStore;
|
||||||
|
isLoading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 卡牌预览内容区域：错误/加载/卡牌预览/空状态
|
||||||
|
*/
|
||||||
|
export function DeckContent(props: DeckContentProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* 错误提示 */}
|
||||||
|
<Show when={props.store.state.error}>
|
||||||
|
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
|
||||||
|
{props.store.state.error}
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* 加载状态 */}
|
||||||
|
<Show when={props.isLoading}>
|
||||||
|
<div class="text-center text-gray-500 py-8">
|
||||||
|
加载卡牌数据中...
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* 卡牌预览 */}
|
||||||
|
<Show when={!props.isLoading && props.store.state.cards.length > 0 && !props.store.state.error}>
|
||||||
|
<CardPreview store={props.store} />
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* 空状态 */}
|
||||||
|
<Show when={!props.isLoading && props.store.state.cards.length === 0 && !props.store.state.error}>
|
||||||
|
<div class="text-center text-gray-500 py-8">
|
||||||
|
暂无卡牌数据
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { For } from 'solid-js';
|
||||||
|
import type { DeckStore } from './hooks/deckStore';
|
||||||
|
|
||||||
|
export interface DeckHeaderProps {
|
||||||
|
store: DeckStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 卡牌预览头部：编辑按钮和 Tab 选择器
|
||||||
|
*/
|
||||||
|
export function DeckHeader(props: DeckHeaderProps) {
|
||||||
|
const { store } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
|
||||||
|
{/* 编辑按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
|
||||||
|
class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
|
||||||
|
store.state.isEditing && !store.state.fixed
|
||||||
|
? 'bg-blue-100 text-blue-600'
|
||||||
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Tab 选择器 */}
|
||||||
|
<div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
|
||||||
|
<For each={store.state.cards}>
|
||||||
|
{(card, index) => (
|
||||||
|
<button
|
||||||
|
onClick={() => store.actions.setActiveTab(index())}
|
||||||
|
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
|
||||||
|
store.state.activeTab === index()
|
||||||
|
? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
|
||||||
|
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{card.label || card.name || `Card ${index() + 1}`}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { For } from 'solid-js';
|
||||||
|
import type { DeckStore } from '../hooks/deckStore';
|
||||||
|
|
||||||
|
export interface DataEditorPanelProps {
|
||||||
|
activeTab: number;
|
||||||
|
cards: DeckStore['state']['cards'];
|
||||||
|
updateCardData: DeckStore['actions']['updateCardData'];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 左侧：CSV 数据编辑面板
|
||||||
|
*/
|
||||||
|
export function DataEditorPanel(props: DataEditorPanelProps) {
|
||||||
|
return (
|
||||||
|
<div class="w-64 flex-shrink-0">
|
||||||
|
<h3 class="font-bold mb-2">卡牌数据</h3>
|
||||||
|
<div class="space-y-2 max-h-96 overflow-y-auto">
|
||||||
|
<For each={Object.keys(props.cards[props.activeTab] || {})}>
|
||||||
|
{(key) => (
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700">{key}</label>
|
||||||
|
<textarea
|
||||||
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
|
rows={3}
|
||||||
|
value={props.cards[props.activeTab]?.[key] || ''}
|
||||||
|
onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
import { For } from 'solid-js';
|
||||||
|
import type { DeckStore } from '../hooks/deckStore';
|
||||||
|
|
||||||
|
export interface LayerEditorPanelProps {
|
||||||
|
store: DeckStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图层编辑面板：图层可见性切换、位置编辑、复制代码
|
||||||
|
*/
|
||||||
|
export function LayerEditorPanel(props: LayerEditorPanelProps) {
|
||||||
|
const { store } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="w-64 flex-shrink-0">
|
||||||
|
<h3 class="font-bold mb-2">图层</h3>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<For each={store.state.layerConfigs}>
|
||||||
|
{(layer) => (
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={layer.visible}
|
||||||
|
onChange={() => store.actions.toggleLayerVisible(layer.prop)}
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span class="text-sm flex-1">{layer.prop}</span>
|
||||||
|
<button
|
||||||
|
onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
|
||||||
|
class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
|
||||||
|
store.state.editingLayer === layer.prop
|
||||||
|
? 'bg-blue-500 text-white'
|
||||||
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{store.state.editingLayer === layer.prop ? '✓ 框选' : '编辑'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="my-4" />
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={store.actions.copyCode}
|
||||||
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
|
||||||
|
>
|
||||||
|
📋 复制代码
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
import type { DeckStore } from '../hooks/deckStore';
|
||||||
|
|
||||||
|
export interface PropertiesEditorPanelProps {
|
||||||
|
store: DeckStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 卡牌属性编辑面板：尺寸、网格、字体、出血、内边距
|
||||||
|
*/
|
||||||
|
export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
||||||
|
const { store } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="w-64 flex-shrink-0">
|
||||||
|
<h3 class="font-bold mb-2">卡牌属性</h3>
|
||||||
|
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700">尺寸 (mm)</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
|
value={store.state.sizeW}
|
||||||
|
onChange={(e) => store.actions.setSizeW(Number(e.target.value))}
|
||||||
|
placeholder="宽"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
|
value={store.state.sizeH}
|
||||||
|
onChange={(e) => store.actions.setSizeH(Number(e.target.value))}
|
||||||
|
placeholder="高"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700">网格</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
|
value={store.state.gridW}
|
||||||
|
onChange={(e) => store.actions.setGridW(Number(e.target.value))}
|
||||||
|
placeholder="宽"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
|
value={store.state.gridH}
|
||||||
|
onChange={(e) => store.actions.setGridH(Number(e.target.value))}
|
||||||
|
placeholder="高"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700">牌面字体 (mm)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
|
value={store.state.fontSize}
|
||||||
|
onChange={(e) => store.actions.setFontSize(Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700">出血 (mm)</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
|
value={store.state.bleed}
|
||||||
|
onChange={(e) => store.actions.setBleed(Number(e.target.value))}
|
||||||
|
placeholder="出血"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700">内边距 (mm)</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
|
value={store.state.padding}
|
||||||
|
onChange={(e) => store.actions.setPadding(Number(e.target.value))}
|
||||||
|
placeholder="内边距"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export { DataEditorPanel } from './DataEditorPanel';
|
||||||
|
export { PropertiesEditorPanel } from './PropertiesEditorPanel';
|
||||||
|
export { LayerEditorPanel } from './LayerEditorPanel';
|
||||||
|
export type { DataEditorPanelProps } from './DataEditorPanel';
|
||||||
|
export type { PropertiesEditorPanelProps } from './PropertiesEditorPanel';
|
||||||
|
export type { LayerEditorPanelProps } from './LayerEditorPanel';
|
||||||
|
|
@ -0,0 +1,297 @@
|
||||||
|
import { createStore } from 'solid-js/store';
|
||||||
|
import { calculateDimensions } from './dimensions';
|
||||||
|
import { loadCSV } from '../../utils/csv-loader';
|
||||||
|
import { initLayerConfigs } from './layer-parser';
|
||||||
|
import type { CardData, LayerConfig, Dimensions } from '../types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 默认配置常量
|
||||||
|
*/
|
||||||
|
export const DECK_DEFAULTS = {
|
||||||
|
SIZE_W: 54,
|
||||||
|
SIZE_H: 86,
|
||||||
|
GRID_W: 5,
|
||||||
|
GRID_H: 8,
|
||||||
|
BLEED: 1,
|
||||||
|
PADDING: 2,
|
||||||
|
FONT_SIZE: 3
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export interface DeckState {
|
||||||
|
// 基本属性
|
||||||
|
sizeW: number;
|
||||||
|
sizeH: number;
|
||||||
|
gridW: number;
|
||||||
|
gridH: number;
|
||||||
|
bleed: number;
|
||||||
|
padding: number;
|
||||||
|
fontSize: number;
|
||||||
|
fixed: boolean;
|
||||||
|
src: string;
|
||||||
|
|
||||||
|
// 解析后的尺寸
|
||||||
|
dimensions: Dimensions | null;
|
||||||
|
|
||||||
|
// 卡牌数据
|
||||||
|
cards: CardData[];
|
||||||
|
activeTab: number;
|
||||||
|
|
||||||
|
// 图层配置
|
||||||
|
layerConfigs: LayerConfig[];
|
||||||
|
|
||||||
|
// 编辑状态
|
||||||
|
isEditing: boolean;
|
||||||
|
editingLayer: string | null;
|
||||||
|
|
||||||
|
// 框选状态
|
||||||
|
isSelecting: boolean;
|
||||||
|
selectStart: { x: number; y: number } | null;
|
||||||
|
selectEnd: { x: number; y: number } | null;
|
||||||
|
|
||||||
|
// 加载状态
|
||||||
|
isLoading: boolean;
|
||||||
|
|
||||||
|
// 错误状态
|
||||||
|
error: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeckActions {
|
||||||
|
// 基本属性设置
|
||||||
|
setSizeW: (size: number) => void;
|
||||||
|
setSizeH: (size: number) => void;
|
||||||
|
setGridW: (grid: number) => void;
|
||||||
|
setGridH: (grid: number) => void;
|
||||||
|
setBleed: (bleed: number) => void;
|
||||||
|
setPadding: (padding: number) => void;
|
||||||
|
setFontSize: (size: number) => void;
|
||||||
|
|
||||||
|
// 数据设置
|
||||||
|
setCards: (cards: CardData[]) => void;
|
||||||
|
setActiveTab: (index: number) => void;
|
||||||
|
updateCardData: (index: number, key: string, value: string) => void;
|
||||||
|
|
||||||
|
// 图层操作
|
||||||
|
setLayerConfigs: (configs: LayerConfig[]) => void;
|
||||||
|
updateLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
|
||||||
|
toggleLayerVisible: (prop: string) => void;
|
||||||
|
|
||||||
|
// 编辑状态
|
||||||
|
setIsEditing: (editing: boolean) => void;
|
||||||
|
setEditingLayer: (layer: string | null) => void;
|
||||||
|
updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
|
||||||
|
|
||||||
|
// 框选操作
|
||||||
|
setIsSelecting: (selecting: boolean) => void;
|
||||||
|
setSelectStart: (pos: { x: number; y: number } | null) => void;
|
||||||
|
setSelectEnd: (pos: { x: number; y: number } | null) => void;
|
||||||
|
cancelSelection: () => void;
|
||||||
|
|
||||||
|
// 数据加载
|
||||||
|
loadCardsFromPath: (path: string, layersStr?: string) => Promise<void>;
|
||||||
|
setError: (error: string | null) => void;
|
||||||
|
clearError: () => void;
|
||||||
|
|
||||||
|
// 生成代码
|
||||||
|
generateCode: () => string;
|
||||||
|
copyCode: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeckStore {
|
||||||
|
state: DeckState;
|
||||||
|
actions: DeckActions;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建 deck store
|
||||||
|
*/
|
||||||
|
export function createDeckStore(
|
||||||
|
initialSrc: string = '',
|
||||||
|
initialLayers: string = ''
|
||||||
|
): DeckStore {
|
||||||
|
const [state, setState] = createStore<DeckState>({
|
||||||
|
sizeW: DECK_DEFAULTS.SIZE_W,
|
||||||
|
sizeH: DECK_DEFAULTS.SIZE_H,
|
||||||
|
gridW: DECK_DEFAULTS.GRID_W,
|
||||||
|
gridH: DECK_DEFAULTS.GRID_H,
|
||||||
|
bleed: DECK_DEFAULTS.BLEED,
|
||||||
|
padding: DECK_DEFAULTS.PADDING,
|
||||||
|
fontSize: DECK_DEFAULTS.FONT_SIZE,
|
||||||
|
fixed: false,
|
||||||
|
src: initialSrc,
|
||||||
|
dimensions: null,
|
||||||
|
cards: [],
|
||||||
|
activeTab: 0,
|
||||||
|
layerConfigs: [],
|
||||||
|
isEditing: false,
|
||||||
|
editingLayer: null,
|
||||||
|
isSelecting: false,
|
||||||
|
selectStart: null,
|
||||||
|
selectEnd: null,
|
||||||
|
isLoading: false,
|
||||||
|
error: null
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新尺寸并重新计算 dimensions
|
||||||
|
const updateDimensions = () => {
|
||||||
|
const dims = calculateDimensions({
|
||||||
|
sizeW: state.sizeW,
|
||||||
|
sizeH: state.sizeH,
|
||||||
|
gridW: state.gridW,
|
||||||
|
gridH: state.gridH,
|
||||||
|
bleed: state.bleed,
|
||||||
|
padding: state.padding,
|
||||||
|
fontSize: state.fontSize
|
||||||
|
});
|
||||||
|
setState({ dimensions: dims });
|
||||||
|
};
|
||||||
|
|
||||||
|
const setSizeW = (size: number) => {
|
||||||
|
setState({ sizeW: size });
|
||||||
|
updateDimensions();
|
||||||
|
};
|
||||||
|
const setSizeH = (size: number) => {
|
||||||
|
setState({ sizeH: size });
|
||||||
|
updateDimensions();
|
||||||
|
};
|
||||||
|
const setGridW = (grid: number) => {
|
||||||
|
setState({ gridW: grid });
|
||||||
|
updateDimensions();
|
||||||
|
};
|
||||||
|
const setGridH = (grid: number) => {
|
||||||
|
setState({ gridH: grid });
|
||||||
|
updateDimensions();
|
||||||
|
};
|
||||||
|
const setBleed = (bleed: number) => {
|
||||||
|
setState({ bleed });
|
||||||
|
updateDimensions();
|
||||||
|
};
|
||||||
|
const setPadding = (padding: number) => {
|
||||||
|
setState({ padding });
|
||||||
|
updateDimensions();
|
||||||
|
};
|
||||||
|
const setFontSize = (size: number) => {
|
||||||
|
setState({ fontSize: size });
|
||||||
|
updateDimensions();
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCards = (cards: 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);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setLayerConfigs = (configs: LayerConfig[]) => setState({ layerConfigs: configs });
|
||||||
|
const updateLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
|
||||||
|
setState('layerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
|
||||||
|
};
|
||||||
|
const toggleLayerVisible = (prop: string) => {
|
||||||
|
setState('layerConfigs', (prev) => prev.map((config) =>
|
||||||
|
config.prop === prop ? { ...config, visible: !config.visible } : config
|
||||||
|
));
|
||||||
|
};
|
||||||
|
|
||||||
|
const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
|
||||||
|
const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
|
||||||
|
const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
|
||||||
|
const layer = state.editingLayer;
|
||||||
|
if (!layer) return;
|
||||||
|
setState('layerConfigs', (prev) => prev.map((config) =>
|
||||||
|
config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
|
||||||
|
));
|
||||||
|
setState({ editingLayer: null });
|
||||||
|
};
|
||||||
|
|
||||||
|
const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
|
||||||
|
const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
|
||||||
|
const setSelectEnd = (pos: { x: number; y: number } | null) => setState({ selectEnd: pos });
|
||||||
|
const cancelSelection = () => {
|
||||||
|
setState({ isSelecting: false, selectStart: null, selectEnd: null });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载卡牌数据（核心逻辑）
|
||||||
|
const loadCardsFromPath = async (path: string, layersStr: string = '') => {
|
||||||
|
if (!path) {
|
||||||
|
setState({ error: '未指定 CSV 文件路径' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setState({ isLoading: true, error: null, src: path });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await loadCSV(path);
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
setState({
|
||||||
|
error: 'CSV 文件为空或格式不正确',
|
||||||
|
isLoading: false
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setState({
|
||||||
|
cards: data,
|
||||||
|
activeTab: 0,
|
||||||
|
layerConfigs: initLayerConfigs(data, layersStr),
|
||||||
|
isLoading: false
|
||||||
|
});
|
||||||
|
updateDimensions();
|
||||||
|
} catch (err) {
|
||||||
|
setState({
|
||||||
|
error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
|
||||||
|
isLoading: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setError = (error: string | null) => setState({ error });
|
||||||
|
const clearError = () => setState({ error: null });
|
||||||
|
|
||||||
|
const generateCode = () => {
|
||||||
|
const layersStr = state.layerConfigs
|
||||||
|
.filter(l => l.visible)
|
||||||
|
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
|
||||||
|
.join(' ');
|
||||||
|
return `:md-deck[${state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" fontSize="${state.fontSize}" layers="${layersStr}"}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyCode = async () => {
|
||||||
|
const code = generateCode();
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(code);
|
||||||
|
alert('已复制到剪贴板！');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('复制失败:', err);
|
||||||
|
alert('复制失败，请手动复制');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const actions: DeckActions = {
|
||||||
|
setSizeW,
|
||||||
|
setSizeH,
|
||||||
|
setGridW,
|
||||||
|
setGridH,
|
||||||
|
setBleed,
|
||||||
|
setPadding,
|
||||||
|
setFontSize,
|
||||||
|
setCards,
|
||||||
|
setActiveTab,
|
||||||
|
updateCardData,
|
||||||
|
setLayerConfigs,
|
||||||
|
updateLayerConfig,
|
||||||
|
toggleLayerVisible,
|
||||||
|
setIsEditing,
|
||||||
|
setEditingLayer,
|
||||||
|
updateLayerPosition,
|
||||||
|
setIsSelecting,
|
||||||
|
setSelectStart,
|
||||||
|
setSelectEnd,
|
||||||
|
cancelSelection,
|
||||||
|
loadCardsFromPath,
|
||||||
|
setError,
|
||||||
|
clearError,
|
||||||
|
generateCode,
|
||||||
|
copyCode
|
||||||
|
};
|
||||||
|
|
||||||
|
return { state, actions };
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import type { Dimensions } from '../types';
|
||||||
|
|
||||||
|
export interface DimensionOptions {
|
||||||
|
sizeW: number;
|
||||||
|
sizeH: number;
|
||||||
|
bleed: number;
|
||||||
|
padding: number;
|
||||||
|
gridW: number;
|
||||||
|
gridH: number;
|
||||||
|
fontSize?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析卡牌尺寸和网格配置
|
||||||
|
*/
|
||||||
|
export function calculateDimensions(options: DimensionOptions): Dimensions {
|
||||||
|
// 实际卡牌尺寸（含出血）
|
||||||
|
const cardWidth = options.sizeW + options.bleed * 2;
|
||||||
|
const cardHeight = options.sizeH + options.bleed * 2;
|
||||||
|
|
||||||
|
// 网格区域尺寸（减去 padding）
|
||||||
|
const gridAreaWidth = options.sizeW - options.padding * 2;
|
||||||
|
const gridAreaHeight = options.sizeH - options.padding * 2;
|
||||||
|
|
||||||
|
// 每个网格单元的尺寸（mm）
|
||||||
|
const cellWidth = gridAreaWidth / options.gridW;
|
||||||
|
const cellHeight = gridAreaHeight / options.gridH;
|
||||||
|
|
||||||
|
// 网格区域起点（相对于卡牌左上角，含 bleed 和 padding）
|
||||||
|
const gridOriginX = options.bleed + options.padding;
|
||||||
|
const gridOriginY = options.bleed + options.padding;
|
||||||
|
|
||||||
|
return {
|
||||||
|
cardWidth,
|
||||||
|
cardHeight,
|
||||||
|
gridAreaWidth,
|
||||||
|
gridAreaHeight,
|
||||||
|
cellWidth,
|
||||||
|
cellHeight,
|
||||||
|
gridW: options.gridW,
|
||||||
|
gridH: options.gridH,
|
||||||
|
gridOriginX,
|
||||||
|
gridOriginY,
|
||||||
|
fontSize: options.fontSize ?? 3
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算 layer 位置样式（单位：mm）
|
||||||
|
*/
|
||||||
|
export function getLayerStyle(
|
||||||
|
layer: { x1: number; y1: number; x2: number; y2: number },
|
||||||
|
dims: Dimensions
|
||||||
|
): { left: string; top: string; width: string; height: string } {
|
||||||
|
const left = (layer.x1 - 1) * dims.cellWidth;
|
||||||
|
const top = (layer.y1 - 1) * dims.cellHeight;
|
||||||
|
const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
|
||||||
|
const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
|
||||||
|
|
||||||
|
return {
|
||||||
|
left: `${left}mm`,
|
||||||
|
top: `${top}mm`,
|
||||||
|
width: `${width}mm`,
|
||||||
|
height: `${height}mm`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import type { Layer, LayerConfig } from '../types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1"
|
||||||
|
*/
|
||||||
|
export function parseLayers(layersStr: string): Layer[] {
|
||||||
|
if (!layersStr) return [];
|
||||||
|
|
||||||
|
const layers: Layer[] = [];
|
||||||
|
const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)/g;
|
||||||
|
let match;
|
||||||
|
|
||||||
|
while ((match = regex.exec(layersStr)) !== null) {
|
||||||
|
layers.push({
|
||||||
|
prop: match[1],
|
||||||
|
x1: parseInt(match[2]),
|
||||||
|
y1: parseInt(match[3]),
|
||||||
|
x2: parseInt(match[4]),
|
||||||
|
y2: parseInt(match[5])
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return layers;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化 layers 为字符串
|
||||||
|
*/
|
||||||
|
export function formatLayers(layers: LayerConfig[]): string {
|
||||||
|
return layers
|
||||||
|
.filter(l => l.visible)
|
||||||
|
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
|
||||||
|
.join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化图层配置
|
||||||
|
*/
|
||||||
|
export function initLayerConfigs(
|
||||||
|
data: any[],
|
||||||
|
existingLayersStr: string
|
||||||
|
): LayerConfig[] {
|
||||||
|
const parsed = parseLayers(existingLayersStr);
|
||||||
|
const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
|
||||||
|
|
||||||
|
return allProps.map(prop => {
|
||||||
|
const existing = parsed.find(l => l.prop === prop);
|
||||||
|
return {
|
||||||
|
prop,
|
||||||
|
visible: !!existing,
|
||||||
|
x1: existing?.x1 || 1,
|
||||||
|
y1: existing?.y1 || 1,
|
||||||
|
x2: existing?.x2 || 2,
|
||||||
|
y2: existing?.y2 || 2
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import type { DeckStore } from './deckStore';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 框选相关的操作（已整合到 deckStore）
|
||||||
|
* 此 hook 用于处理卡牌预览区域的鼠标交互
|
||||||
|
*/
|
||||||
|
export function useCardSelection(store: DeckStore) {
|
||||||
|
const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['state']['dimensions']) => {
|
||||||
|
if (!dimensions) return { gridX: 1, gridY: 1 };
|
||||||
|
|
||||||
|
const rect = cardEl.getBoundingClientRect();
|
||||||
|
|
||||||
|
const offsetX = (e.clientX - rect.left) / rect.width * dimensions.cardWidth;
|
||||||
|
const offsetY = (e.clientY - rect.top) / rect.height * dimensions.cardHeight;
|
||||||
|
|
||||||
|
const gridX = Math.max(1, Math.floor((offsetX - dimensions.gridOriginX) / dimensions.cellWidth) + 1);
|
||||||
|
const gridY = Math.max(1, Math.floor((offsetY - dimensions.gridOriginY) / dimensions.cellHeight) + 1);
|
||||||
|
|
||||||
|
return {
|
||||||
|
gridX: Math.max(1, Math.min(dimensions.gridW, gridX)),
|
||||||
|
gridY: Math.max(1, Math.min(dimensions.gridH, gridY))
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseDown = (e: MouseEvent, cardEl: HTMLElement) => {
|
||||||
|
if (!store.state.isEditing || !store.state.editingLayer) return;
|
||||||
|
|
||||||
|
const { gridX, gridY } = calculateGridCoords(e, cardEl, store.state.dimensions);
|
||||||
|
|
||||||
|
store.actions.setSelectStart({ x: gridX, y: gridY });
|
||||||
|
store.actions.setSelectEnd({ x: gridX, y: gridY });
|
||||||
|
store.actions.setIsSelecting(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseMove = (e: MouseEvent, cardEl: HTMLElement) => {
|
||||||
|
if (!store.state.isSelecting) return;
|
||||||
|
|
||||||
|
const { gridX, gridY } = calculateGridCoords(e, cardEl, store.state.dimensions);
|
||||||
|
|
||||||
|
store.actions.setSelectEnd({ x: gridX, y: gridY });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseUp = () => {
|
||||||
|
if (!store.state.isSelecting || !store.state.editingLayer) return;
|
||||||
|
|
||||||
|
const start = store.state.selectStart!;
|
||||||
|
const end = store.state.selectEnd!;
|
||||||
|
|
||||||
|
const x1 = Math.min(start.x, end.x);
|
||||||
|
const y1 = Math.min(start.y, end.y);
|
||||||
|
const x2 = Math.max(start.x, end.x);
|
||||||
|
const y2 = Math.max(start.y, end.y);
|
||||||
|
|
||||||
|
store.actions.updateLayerPosition(x1, y1, x2, y2);
|
||||||
|
store.actions.cancelSelection();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
onMouseDown: handleMouseDown,
|
||||||
|
onMouseMove: handleMouseMove,
|
||||||
|
onMouseUp: handleMouseUp,
|
||||||
|
onMouseLeave: handleMouseUp
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算框选区域的样式
|
||||||
|
*/
|
||||||
|
export function getSelectionBoxStyle(
|
||||||
|
selectStart: { x: number; y: number } | null,
|
||||||
|
selectEnd: { x: number; y: number } | null,
|
||||||
|
dims: { gridOriginX: number; gridOriginY: number; cellWidth: number; cellHeight: number } | null
|
||||||
|
): { left: string; top: string; width: string; height: string } | null {
|
||||||
|
if (!selectStart || !selectEnd || !dims) return null;
|
||||||
|
|
||||||
|
const x1 = Math.min(selectStart.x, selectEnd.x);
|
||||||
|
const y1 = Math.min(selectStart.y, selectEnd.y);
|
||||||
|
const x2 = Math.max(selectStart.x, selectEnd.x);
|
||||||
|
const y2 = Math.max(selectStart.y, selectEnd.y);
|
||||||
|
|
||||||
|
const left = dims.gridOriginX + (x1 - 1) * dims.cellWidth;
|
||||||
|
const top = dims.gridOriginY + (y1 - 1) * dims.cellHeight;
|
||||||
|
const width = (x2 - x1 + 1) * dims.cellWidth;
|
||||||
|
const height = (y2 - y1 + 1) * dims.cellHeight;
|
||||||
|
|
||||||
|
return {
|
||||||
|
left: `${left}mm`,
|
||||||
|
top: `${top}mm`,
|
||||||
|
width: `${width}mm`,
|
||||||
|
height: `${height}mm`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
import { customElement, noShadowDOM } from 'solid-element';
|
||||||
|
import { Show, createEffect, onCleanup } from 'solid-js';
|
||||||
|
import { resolvePath } from '../utils/path';
|
||||||
|
import { createDeckStore } from './hooks/deckStore';
|
||||||
|
import { DeckHeader } from './DeckHeader';
|
||||||
|
import { DeckContent } from './DeckContent';
|
||||||
|
import {DataEditorPanel, LayerEditorPanel, PropertiesEditorPanel} from './editor-panel';
|
||||||
|
|
||||||
|
interface DeckProps {
|
||||||
|
size?: string;
|
||||||
|
sizeW?: number;
|
||||||
|
sizeH?: number;
|
||||||
|
grid?: string;
|
||||||
|
gridW?: number;
|
||||||
|
gridH?: number;
|
||||||
|
bleed?: number | string;
|
||||||
|
padding?: number | string;
|
||||||
|
fontSize?: number;
|
||||||
|
layers?: string;
|
||||||
|
fixed?: boolean | string;
|
||||||
|
}
|
||||||
|
|
||||||
|
customElement<DeckProps>('md-deck', {
|
||||||
|
size: '',
|
||||||
|
sizeW: 54,
|
||||||
|
sizeH: 86,
|
||||||
|
grid: '',
|
||||||
|
gridW: 5,
|
||||||
|
gridH: 8,
|
||||||
|
bleed: 1,
|
||||||
|
padding: 2,
|
||||||
|
fontSize: 3,
|
||||||
|
layers: '',
|
||||||
|
fixed: false
|
||||||
|
}, (props, { element }) => {
|
||||||
|
noShadowDOM();
|
||||||
|
|
||||||
|
// 从 element 的 textContent 获取 CSV 路径
|
||||||
|
const csvPath = element?.textContent?.trim() || '';
|
||||||
|
|
||||||
|
// 隐藏原始文本内容
|
||||||
|
if (element) {
|
||||||
|
element.textContent = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
|
||||||
|
const articleEl = element?.closest('article[data-src]');
|
||||||
|
const articlePath = articleEl?.getAttribute('data-src') || '';
|
||||||
|
|
||||||
|
// 解析相对路径
|
||||||
|
const resolvedSrc = resolvePath(articlePath, csvPath);
|
||||||
|
|
||||||
|
// 创建 store 并加载数据
|
||||||
|
const store = createDeckStore(resolvedSrc, (props.layers as string) || '');
|
||||||
|
|
||||||
|
// 解析 size 属性（支持旧格式 "54x86" 和新格式）
|
||||||
|
if (props.size && props.size.includes('x')) {
|
||||||
|
const [w, h] = props.size.split('x').map(Number);
|
||||||
|
store.actions.setSizeW(w);
|
||||||
|
store.actions.setSizeH(h);
|
||||||
|
} else {
|
||||||
|
store.actions.setSizeW(props.sizeW ?? 54);
|
||||||
|
store.actions.setSizeH(props.sizeH ?? 86);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析 grid 属性（支持旧格式 "5x8" 和新格式）
|
||||||
|
if (props.grid && props.grid.includes('x')) {
|
||||||
|
const [w, h] = props.grid.split('x').map(Number);
|
||||||
|
store.actions.setGridW(w);
|
||||||
|
store.actions.setGridH(h);
|
||||||
|
} else {
|
||||||
|
store.actions.setGridW(props.gridW ?? 5);
|
||||||
|
store.actions.setGridH(props.gridH ?? 8);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析 bleed 和 padding（支持旧字符串格式和新数字格式）
|
||||||
|
if (typeof props.bleed === 'string') {
|
||||||
|
store.actions.setBleed(Number(props.bleed));
|
||||||
|
} else {
|
||||||
|
store.actions.setBleed(props.bleed ?? 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof props.padding === 'string') {
|
||||||
|
store.actions.setPadding(Number(props.padding));
|
||||||
|
} else {
|
||||||
|
store.actions.setPadding(props.padding ?? 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
store.actions.setFontSize(props.fontSize ?? 3);
|
||||||
|
|
||||||
|
// 加载 CSV 数据
|
||||||
|
store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
|
||||||
|
|
||||||
|
// 清理函数
|
||||||
|
onCleanup(() => {
|
||||||
|
store.actions.clearError();
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="md-deck flex gap-4">
|
||||||
|
{/* 左侧：CSV 数据编辑 */}
|
||||||
|
{/*<Show when={store.state.isEditing && !store.state.fixed}>*/}
|
||||||
|
{/* <DataEditorPanel*/}
|
||||||
|
{/* activeTab={store.state.activeTab}*/}
|
||||||
|
{/* cards={store.state.cards}*/}
|
||||||
|
{/* updateCardData={store.actions.updateCardData}*/}
|
||||||
|
{/* />*/}
|
||||||
|
{/*</Show>*/}
|
||||||
|
|
||||||
|
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||||
|
<div class="flex-1">
|
||||||
|
<PropertiesEditorPanel store={store} />
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* 中间：卡牌预览和控制 */}
|
||||||
|
<div class="flex-1">
|
||||||
|
{/* Tab 选择器和编辑按钮 */}
|
||||||
|
<Show when={store.state.cards.length > 0 && !store.state.error}>
|
||||||
|
<DeckHeader store={store} />
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* 内容区域：错误/加载/卡牌预览/空状态 */}
|
||||||
|
<DeckContent store={store} isLoading={store.state.isLoading} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧：属性/图层编辑面板 */}
|
||||||
|
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||||
|
<div class="flex-1">
|
||||||
|
<LayerEditorPanel store={store} />
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
export interface CardData {
|
||||||
|
[key: string]: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Layer {
|
||||||
|
prop: string;
|
||||||
|
x1: number;
|
||||||
|
y1: number;
|
||||||
|
x2: number;
|
||||||
|
y2: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LayerConfig {
|
||||||
|
prop: string;
|
||||||
|
visible: boolean;
|
||||||
|
x1: number;
|
||||||
|
y1: number;
|
||||||
|
x2: number;
|
||||||
|
y2: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Dimensions {
|
||||||
|
cardWidth: number;
|
||||||
|
cardHeight: number;
|
||||||
|
gridAreaWidth: number;
|
||||||
|
gridAreaHeight: number;
|
||||||
|
cellWidth: number;
|
||||||
|
cellHeight: number;
|
||||||
|
gridW: number;
|
||||||
|
gridH: number;
|
||||||
|
gridOriginX: number;
|
||||||
|
gridOriginY: number;
|
||||||
|
fontSize: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SelectionState {
|
||||||
|
isSelecting: boolean;
|
||||||
|
selectStart: { x: number; y: number } | null;
|
||||||
|
selectEnd: { x: number; y: number } | null;
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,10 @@
|
||||||
import { customElement, noShadowDOM } from "solid-element";
|
import { customElement, noShadowDOM } from "solid-element";
|
||||||
import { createSignal, onMount } from "solid-js";
|
import { createSignal, onMount } from "solid-js";
|
||||||
|
|
||||||
|
export interface DiceProps {
|
||||||
|
key?: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface RollResult {
|
interface RollResult {
|
||||||
total: number;
|
total: number;
|
||||||
rolls: number[];
|
rolls: number[];
|
||||||
|
|
@ -2,7 +2,7 @@ import { customElement, noShadowDOM } from "solid-element";
|
||||||
import { createSignal, onCleanup } from "solid-js";
|
import { createSignal, onCleanup } from "solid-js";
|
||||||
import { render } from "solid-js/web";
|
import { render } from "solid-js/web";
|
||||||
import { Article } from "./Article";
|
import { Article } from "./Article";
|
||||||
import { resolvePath } from "../utils/path";
|
import { resolvePath } from "./utils/path";
|
||||||
|
|
||||||
customElement("md-link", {}, (props, { element }) => {
|
customElement("md-link", {}, (props, { element }) => {
|
||||||
noShadowDOM();
|
noShadowDOM();
|
||||||
|
|
@ -11,7 +11,7 @@ customElement("md-link", {}, (props, { element }) => {
|
||||||
const [expanded, setExpanded] = createSignal(false);
|
const [expanded, setExpanded] = createSignal(false);
|
||||||
let articleContainer: HTMLDivElement | undefined;
|
let articleContainer: HTMLDivElement | undefined;
|
||||||
let disposeArticle: (() => void) | null = null;
|
let disposeArticle: (() => void) | null = null;
|
||||||
let articleElement: HTMLElement | undefined;
|
let articleElement: HTMLElement | null | undefined;
|
||||||
|
|
||||||
// 从 element 的 textContent 获取链接目标（支持 path#section 语法）
|
// 从 element 的 textContent 获取链接目标（支持 path#section 语法）
|
||||||
const rawLinkSrc = element?.textContent?.trim() || "";
|
const rawLinkSrc = element?.textContent?.trim() || "";
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,22 @@
|
||||||
import { customElement, noShadowDOM } from "solid-element";
|
import { customElement, noShadowDOM } from "solid-element";
|
||||||
import { createSignal, onMount, onCleanup, Show, For, createResource, createMemo } from "solid-js";
|
import {Show, For, createResource, createMemo, createSignal} from "solid-js";
|
||||||
import { resolvePath } from "../utils/path";
|
import { resolvePath } from "./utils/path";
|
||||||
|
import { createPinsStore } from "./stores/pinsStore";
|
||||||
interface Pin {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生成标签 A-Z, AA-ZZ, AAA-ZZZ ...
|
|
||||||
function generateLabel(index: number): string {
|
|
||||||
const labels: string[] = [];
|
|
||||||
let num = index;
|
|
||||||
|
|
||||||
do {
|
|
||||||
const remainder = num % 26;
|
|
||||||
labels.unshift(String.fromCharCode(65 + remainder));
|
|
||||||
num = Math.floor(num / 26) - 1;
|
|
||||||
} while (num >= 0);
|
|
||||||
|
|
||||||
return labels.join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析 pins 字符串 "A:30,40 B:10,30" -> Pin[]
|
|
||||||
function parsePins(pinsStr: string): Pin[] {
|
|
||||||
if (!pinsStr) return [];
|
|
||||||
|
|
||||||
const pins: Pin[] = [];
|
|
||||||
const regex = /([A-Z]+):(\d+),(\d+)/g;
|
|
||||||
let match;
|
|
||||||
|
|
||||||
while ((match = regex.exec(pinsStr)) !== null) {
|
|
||||||
pins.push({
|
|
||||||
label: match[1],
|
|
||||||
x: parseInt(match[2]),
|
|
||||||
y: parseInt(match[3])
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return pins;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 格式化 pins 为字符串 "A:30,40 B:10,30"
|
|
||||||
function formatPins(pins: Pin[]): string {
|
|
||||||
return pins.map(pin => `${pin.label}:${pin.x},${pin.y}`).join(' ');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 找到最早未使用的标签
|
|
||||||
function findNextUnusedLabel(pins: Pin[]): string {
|
|
||||||
const usedLabels = new Set(pins.map(p => p.label));
|
|
||||||
|
|
||||||
let index = 0;
|
|
||||||
while (true) {
|
|
||||||
const label = generateLabel(index);
|
|
||||||
if (!usedLabels.has(label)) {
|
|
||||||
return label;
|
|
||||||
}
|
|
||||||
index++;
|
|
||||||
if (index > 10000) break; // 安全限制
|
|
||||||
}
|
|
||||||
|
|
||||||
return generateLabel(pins.length);
|
|
||||||
}
|
|
||||||
|
|
||||||
customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
|
customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
|
||||||
noShadowDOM();
|
noShadowDOM();
|
||||||
|
|
||||||
const [pins, setPins] = createSignal<Pin[]>([]);
|
|
||||||
const [showToast, setShowToast] = createSignal(false);
|
const [showToast, setShowToast] = createSignal(false);
|
||||||
let editorContainer: HTMLDivElement | undefined;
|
|
||||||
|
// 创建 store
|
||||||
|
const store = createPinsStore(props.pins, props.fixed);
|
||||||
|
|
||||||
// 从 element 的 textContent 获取图片路径
|
// 从 element 的 textContent 获取图片路径
|
||||||
const rawSrc = element?.textContent?.trim() || '';
|
const rawSrc = element?.textContent?.trim() || '';
|
||||||
|
|
||||||
|
// 设置 rawSrc 到 store
|
||||||
|
store.setRawSrc(rawSrc);
|
||||||
|
|
||||||
// 隐藏原始文本内容
|
// 隐藏原始文本内容
|
||||||
if (element) {
|
if (element) {
|
||||||
element.textContent = "";
|
element.textContent = "";
|
||||||
|
|
@ -98,22 +42,12 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
|
||||||
const [image] = createResource(resolvedSrc, loadImage);
|
const [image] = createResource(resolvedSrc, loadImage);
|
||||||
const visible = createMemo(() => !image.loading && !!image());
|
const visible = createMemo(() => !image.loading && !!image());
|
||||||
|
|
||||||
// 从 props.pins 初始化 pins
|
|
||||||
onMount(() => {
|
|
||||||
if (props.pins) {
|
|
||||||
const parsed = parsePins(props.pins);
|
|
||||||
if (parsed.length > 0) {
|
|
||||||
setPins(parsed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加 pin
|
// 添加 pin
|
||||||
const addPin = (e: MouseEvent) => {
|
const addPin = (e: MouseEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
if (isFixed()) return;
|
if (props.fixed) return;
|
||||||
|
|
||||||
const imgRect = (e.target as Element).getBoundingClientRect();
|
const imgRect = (e.target as Element).getBoundingClientRect();
|
||||||
const clickX = ((e.clientX - imgRect.left) / imgRect.width) * 100;
|
const clickX = ((e.clientX - imgRect.left) / imgRect.width) * 100;
|
||||||
|
|
@ -121,25 +55,23 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
|
||||||
|
|
||||||
const x = Math.round(clickX);
|
const x = Math.round(clickX);
|
||||||
const y = Math.round(clickY);
|
const y = Math.round(clickY);
|
||||||
const label = findNextUnusedLabel(pins());
|
|
||||||
|
|
||||||
setPins([...pins(), { x, y, label }]);
|
store.addPin(x, y);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 删除 pin
|
// 删除 pin
|
||||||
const removePin = (index: number, e: MouseEvent) => {
|
const removePin = (index: number, e: MouseEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
if (isFixed()) return;
|
if (props.fixed) return;
|
||||||
|
|
||||||
setPins(pins().filter((_, i) => i !== index));
|
store.removePin(index);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 复制所有 pin 为 :md-editor-pin 格式
|
// 复制所有 pin 为 :md-editor-pin 格式
|
||||||
const copyPins = () => {
|
const copyPins = () => {
|
||||||
const pinsStr = formatPins(pins());
|
const text = store.getCopyText();
|
||||||
const text = `:md-pins[${rawSrc}]{pins="${pinsStr}" fixed}`;
|
|
||||||
|
|
||||||
navigator.clipboard.writeText(text).then(() => {
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
setShowToast(true);
|
setShowToast(true);
|
||||||
|
|
@ -149,26 +81,24 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const isFixed = () => props.fixed;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={editorContainer}>
|
<div>
|
||||||
<Show when={visible() && image()}>
|
<Show when={visible()}>
|
||||||
{/* 图片容器 */}
|
{/* 图片容器 */}
|
||||||
<div class="relative" onClick={addPin}>
|
<div class="relative" onClick={addPin}>
|
||||||
{/* 显示图片 */}
|
{/* 显示图片 */}
|
||||||
<img src={resolvedSrc} alt="" class="inset-0" />
|
<img src={resolvedSrc} alt="" class="inset-0" />
|
||||||
|
|
||||||
{/* 透明遮罩层 */}
|
{/* 透明遮罩层 */}
|
||||||
<Show when={!isFixed()}>
|
<Show when={!props.fixed}>
|
||||||
<div class="absolute inset-0 bg-transparent hover:bg-black/10 transition-colors cursor-crosshair" />
|
<div class="absolute inset-0 bg-transparent hover:bg-black/10 transition-colors cursor-crosshair" />
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={isFixed()}>
|
<Show when={props.fixed}>
|
||||||
<div class="absolute inset-0 pointer-events-none" />
|
<div class="absolute inset-0 pointer-events-none" />
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
{/* 复制按钮 HUD */}
|
{/* 复制按钮 HUD */}
|
||||||
<Show when={!isFixed()}>
|
<Show when={!props.fixed}>
|
||||||
<div class="absolute top-2 right-2 z-20">
|
<div class="absolute top-2 right-2 z-20">
|
||||||
<button
|
<button
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
|
|
@ -184,19 +114,19 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
{/* Pin 列表 */}
|
{/* Pin 列表 */}
|
||||||
<For each={pins()}>
|
<For each={store.state.pins}>
|
||||||
{(pin, index) => (
|
{(pin, index) => (
|
||||||
<span
|
<span
|
||||||
onClick={(e) => removePin(index(), e)}
|
onClick={(e) => removePin(index(), e)}
|
||||||
class={`absolute transform -translate-x-1/2 -translate-y-1/2 pointer-events-auto
|
class={`absolute transform -translate-x-1/2 -translate-y-1/2 pointer-events-auto
|
||||||
bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6
|
bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6
|
||||||
flex items-center justify-center shadow-lg
|
flex items-center justify-center shadow-lg
|
||||||
${!isFixed() ? 'cursor-pointer hover:bg-red-600 hover:scale-110 transition-all z-10' : 'cursor-default z-10'}`}
|
${!props.fixed ? 'cursor-pointer hover:bg-red-600 hover:scale-110 transition-all z-10' : 'cursor-default z-10'}`}
|
||||||
style={{
|
style={{
|
||||||
left: `${pin.x}%`,
|
left: `${pin.x}%`,
|
||||||
top: `${pin.y}%`
|
top: `${pin.y}%`
|
||||||
}}
|
}}
|
||||||
title={isFixed() ? `(${pin.x}, ${pin.y})` : `点击删除 (${pin.x}, ${pin.y})`}
|
title={props.fixed ? `(${pin.x}, ${pin.y})` : `点击删除 (${pin.x}, ${pin.y})`}
|
||||||
>
|
>
|
||||||
{pin.label}
|
{pin.label}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -208,7 +138,7 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
|
||||||
{/* Toast 提示 */}
|
{/* Toast 提示 */}
|
||||||
<Show when={showToast()}>
|
<Show when={showToast()}>
|
||||||
<div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded shadow-lg text-sm z-50">
|
<div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded shadow-lg text-sm z-50">
|
||||||
已复制 {pins().length} 个 pin 坐标
|
已复制 {store.state.pins.length} 个 pin 坐标
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,20 @@
|
||||||
import { customElement, noShadowDOM } from 'solid-element';
|
import { customElement, noShadowDOM } from 'solid-element';
|
||||||
import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
|
import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
|
||||||
import { parse } from 'csv-parse/browser/esm/sync';
|
|
||||||
import { marked } from '../markdown';
|
import { marked } from '../markdown';
|
||||||
import { resolvePath } from '../utils/path';
|
import { resolvePath } from './utils/path';
|
||||||
|
import { loadCSV } from './utils/csv-loader';
|
||||||
|
|
||||||
|
export interface TableProps {
|
||||||
|
roll?: boolean;
|
||||||
|
remix?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
interface TableRow {
|
interface TableRow {
|
||||||
label: string;
|
label: string;
|
||||||
body: string;
|
body: string;
|
||||||
group?: string;
|
|
||||||
[key: string]: string;
|
[key: string]: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 全局缓存已加载的 CSV 内容
|
|
||||||
const csvCache = new Map<string, TableRow[]>();
|
|
||||||
|
|
||||||
customElement('md-table', { roll: false, remix: false }, (props, { element }) => {
|
customElement('md-table', { roll: false, remix: false }, (props, { element }) => {
|
||||||
noShadowDOM();
|
noShadowDOM();
|
||||||
const [rows, setRows] = createSignal<TableRow[]>([]);
|
const [rows, setRows] = createSignal<TableRow[]>([]);
|
||||||
|
|
@ -37,26 +38,6 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
||||||
// 解析相对路径
|
// 解析相对路径
|
||||||
const resolvedSrc = resolvePath(articlePath, src);
|
const resolvedSrc = resolvePath(articlePath, src);
|
||||||
|
|
||||||
// 加载 CSV 文件的函数
|
|
||||||
const loadCSV = async (path: string): Promise<TableRow[]> => {
|
|
||||||
// 先从缓存获取
|
|
||||||
if (csvCache.has(path)) {
|
|
||||||
return csvCache.get(path)!;
|
|
||||||
}
|
|
||||||
const response = await fetch(path);
|
|
||||||
const content = await response.text();
|
|
||||||
const records = parse(content, {
|
|
||||||
columns: true,
|
|
||||||
comment: '#',
|
|
||||||
trim: true,
|
|
||||||
skipEmptyLines: true
|
|
||||||
});
|
|
||||||
const result = records as TableRow[];
|
|
||||||
// 缓存结果
|
|
||||||
csvCache.set(path, result);
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 使用 createResource 加载 CSV，自动响应路径变化并避免重复加载
|
// 使用 createResource 加载 CSV，自动响应路径变化并避免重复加载
|
||||||
const [csvData] = createResource(() => resolvedSrc, loadCSV);
|
const [csvData] = createResource(() => resolvedSrc, loadCSV);
|
||||||
|
|
||||||
|
|
@ -64,7 +45,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const data = csvData();
|
const data = csvData();
|
||||||
if (data) {
|
if (data) {
|
||||||
setRows(data);
|
setRows(data as any[]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
import { createStore } from "solid-js/store";
|
||||||
|
|
||||||
|
export interface Pin {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PinsState {
|
||||||
|
pins: Pin[];
|
||||||
|
rawSrc: string;
|
||||||
|
isFixed: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成标签 A-Z, AA-ZZ, AAA-ZZZ ...
|
||||||
|
export function generateLabel(index: number): string {
|
||||||
|
const labels: string[] = [];
|
||||||
|
let num = index;
|
||||||
|
|
||||||
|
do {
|
||||||
|
const remainder = num % 26;
|
||||||
|
labels.unshift(String.fromCharCode(65 + remainder));
|
||||||
|
num = Math.floor(num / 26) - 1;
|
||||||
|
} while (num >= 0);
|
||||||
|
|
||||||
|
return labels.join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析 pins 字符串 "A:30,40 B:10,30" -> Pin[]
|
||||||
|
export function parsePins(pinsStr: string): Pin[] {
|
||||||
|
if (!pinsStr) return [];
|
||||||
|
|
||||||
|
const pins: Pin[] = [];
|
||||||
|
const regex = /([A-Z]+):(\d+),(\d+)/g;
|
||||||
|
let match;
|
||||||
|
|
||||||
|
while ((match = regex.exec(pinsStr)) !== null) {
|
||||||
|
pins.push({
|
||||||
|
label: match[1],
|
||||||
|
x: parseInt(match[2]),
|
||||||
|
y: parseInt(match[3])
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return pins;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化 pins 为字符串 "A:30,40 B:10,30"
|
||||||
|
export function formatPins(pins: Pin[]): string {
|
||||||
|
return pins.map(pin => `${pin.label}:${pin.x},${pin.y}`).join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 找到最早未使用的标签
|
||||||
|
export function findNextUnusedLabel(pins: Pin[]): string {
|
||||||
|
const usedLabels = new Set(pins.map(p => p.label));
|
||||||
|
|
||||||
|
let index = 0;
|
||||||
|
while (true) {
|
||||||
|
const label = generateLabel(index);
|
||||||
|
if (!usedLabels.has(label)) {
|
||||||
|
return label;
|
||||||
|
}
|
||||||
|
index++;
|
||||||
|
if (index > 10000) break; // 安全限制
|
||||||
|
}
|
||||||
|
|
||||||
|
return generateLabel(pins.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 store 实例
|
||||||
|
export function createPinsStore(initialPinsStr: string = "", initialFixed: boolean = false) {
|
||||||
|
const [state, setState] = createStore<PinsState>({
|
||||||
|
pins: parsePins(initialPinsStr),
|
||||||
|
rawSrc: "",
|
||||||
|
isFixed: initialFixed
|
||||||
|
});
|
||||||
|
|
||||||
|
const setRawSrc = (src: string) => {
|
||||||
|
setState("rawSrc", src);
|
||||||
|
};
|
||||||
|
|
||||||
|
const addPin = (x: number, y: number) => {
|
||||||
|
const label = findNextUnusedLabel(state.pins);
|
||||||
|
setState("pins", [...state.pins, { x, y, label }]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removePin = (index: number) => {
|
||||||
|
setState("pins", state.pins.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCurrentPins = () => formatPins(state.pins);
|
||||||
|
|
||||||
|
const getCopyText = () => {
|
||||||
|
const pinsStr = formatCurrentPins();
|
||||||
|
return `:md-pins[${state.rawSrc}]{pins="${pinsStr}" fixed}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
state,
|
||||||
|
setState,
|
||||||
|
setRawSrc,
|
||||||
|
addPin,
|
||||||
|
removePin,
|
||||||
|
formatCurrentPins,
|
||||||
|
getCopyText
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { parse } from 'csv-parse/browser/esm/sync';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 全局缓存已加载的 CSV 内容
|
||||||
|
*/
|
||||||
|
const csvCache = new Map<string, Record<string, string>[]>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载 CSV 文件
|
||||||
|
* @template T 返回数据的类型，默认为 Record<string, string>
|
||||||
|
*/
|
||||||
|
export async function loadCSV<T = Record<string, string>>(path: string): Promise<T[]> {
|
||||||
|
if (csvCache.has(path)) {
|
||||||
|
return csvCache.get(path)! as T[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(path);
|
||||||
|
const content = await response.text();
|
||||||
|
const records = parse(content, {
|
||||||
|
columns: true,
|
||||||
|
comment: '#',
|
||||||
|
trim: true,
|
||||||
|
skipEmptyLines: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = records as Record<string, string>[];
|
||||||
|
csvCache.set(path, result);
|
||||||
|
return result as T[];
|
||||||
|
}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { resolvePath } from './path';
|
|
||||||
Loading…
Reference in New Issue