diff --git a/src/components/md-deck/CardLayer.tsx b/src/components/md-deck/CardLayer.tsx
index 2772cfc..e85d731 100644
--- a/src/components/md-deck/CardLayer.tsx
+++ b/src/components/md-deck/CardLayer.tsx
@@ -26,16 +26,23 @@ export function CardLayer(props: CardLayerProps) {
const iconPath = resolvePath(props.store.state.cards.sourcePath, props.cardData.iconPath ?? "./assets");
return parseMarkdown(processVariables(content, props.cardData, props.store.state.cards), iconPath) as string;
}
+
+ const getAlignStyle = (align?: 'l' | 'c' | 'r') => {
+ if (align === 'l') return 'left';
+ if (align === 'r') return 'right';
+ return 'center';
+ };
return (
{(layer) => {
return (
<>
diff --git a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
index 036e45f..6325d0a 100644
--- a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
@@ -12,6 +12,13 @@ const ORIENTATION_OPTIONS = [
{ value: 'w', label: '← 西' }
] as const;
+const ALIGN_OPTIONS = [
+ { value: '', label: '对齐' },
+ { value: 'l', label: '← 左' },
+ { value: 'c', label: '≡ 中' },
+ { value: 'r', label: '→ 右' }
+] as const;
+
/**
* 图层编辑面板:图层可见性切换、位置编辑、复制代码
*/
@@ -38,6 +45,13 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
updateFn(layerProp, { fontSize });
};
+ const updateLayerAlign = (layerProp: string, align?: 'l' | 'c' | 'r') => {
+ const updateFn = store.state.activeSide === 'front'
+ ? store.actions.updateFrontLayerConfig
+ : store.actions.updateBackLayerConfig;
+ updateFn(layerProp, { align });
+ };
+
const toggleLayerVisible = (layerProp: string) => {
const toggleFn = store.state.activeSide === 'front'
? store.actions.toggleFrontLayerVisible
@@ -94,6 +108,17 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
)}
+
diff --git a/src/components/md-deck/hooks/layer-parser.ts b/src/components/md-deck/hooks/layer-parser.ts
index 96dfe87..e723e0b 100644
--- a/src/components/md-deck/hooks/layer-parser.ts
+++ b/src/components/md-deck/hooks/layer-parser.ts
@@ -3,15 +3,15 @@ import {CSV} from "../../utils/csv-loader";
/**
* 解析 layers 字符串
- * 格式:body:1,7-5,8 title:1,1-4,1f6.6s
- * f[fontSize] 表示字体大小(可选),方向字母在最后(可选)
+ * 格式:body:1,7-5,8 title:1,1-4,1f6.6sl
+ * f[fontSize] 表示字体大小(可选),方向字母(可选),对齐字母 l/c/r(可选)
*/
export function parseLayers(layersStr: string): Layer[] {
if (!layersStr) return [];
const layers: Layer[] = [];
- // 匹配:prop:x1,y1-x2,y2[ffontSize][direction]
- const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?/g;
+ // 匹配:prop:x1,y1-x2,y2[ffontSize][direction][align]
+ const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?([lcr])?/g;
let match;
while ((match = regex.exec(layersStr)) !== null) {
@@ -22,7 +22,8 @@ export function parseLayers(layersStr: string): Layer[] {
x2: parseInt(match[4]),
y2: parseInt(match[5]),
fontSize: match[6] ? parseFloat(match[6]) : undefined,
- orientation: match[7] as 'n' | 's' | 'e' | 'w' | undefined
+ orientation: match[7] as 'n' | 's' | 'e' | 'w' | undefined,
+ align: match[8] as 'l' | 'c' | 'r' | undefined
});
}
@@ -43,6 +44,9 @@ export function formatLayers(layers: LayerConfig[]): string {
if (l.orientation && l.orientation !== 'n') {
str += l.orientation;
}
+ if (l.align) {
+ str += l.align;
+ }
return str;
})
.join(' ');
@@ -68,7 +72,8 @@ export function initLayerConfigsForSide(
x2: existing?.x2 || 2,
y2: existing?.y2 || 2,
orientation: existing?.orientation,
- fontSize: existing?.fontSize
+ fontSize: existing?.fontSize,
+ align: existing?.align
};
});
}
diff --git a/src/components/md-deck/types.ts b/src/components/md-deck/types.ts
index 34d50a9..e945fd5 100644
--- a/src/components/md-deck/types.ts
+++ b/src/components/md-deck/types.ts
@@ -14,6 +14,7 @@ export interface Layer {
y2: number;
orientation?: 'n' | 's' | 'e' | 'w';
fontSize?: number;
+ align?: 'l' | 'c' | 'r';
}
export interface LayerConfig {
@@ -25,6 +26,7 @@ export interface LayerConfig {
y2: number;
orientation?: 'n' | 's' | 'e' | 'w';
fontSize?: number;
+ align?: 'l' | 'c' | 'r';
}
export interface Dimensions {