refactor: Reformat code and update z-index class
Reformat md-table.tsx to use double quotes and consistent code style. Change z-index class in PrintPreview from `z-[60]` to `z-60`.
This commit is contained in:
hyper
parent
a20063c624
commit
c071cad50a
|
|
@ -115,7 +115,7 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
<PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} />
|
||||
}
|
||||
>
|
||||
<div class="fixed inset-0 bg-black/50 z-[60] overflow-auto">
|
||||
<div class="fixed inset-0 bg-black/50 z-60 overflow-auto">
|
||||
<div class="min-h-screen py-20 px-4">
|
||||
<PrintPreviewHeader
|
||||
store={store}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,19 @@
|
|||
import { customElement, noShadowDOM } from 'solid-element';
|
||||
import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
|
||||
import { marked } from '../markdown';
|
||||
import { loadCSV, CSV, processVariables, isCSV } from './utils/csv-loader';
|
||||
import { resolvePath } from './utils/path';
|
||||
import { areAllLabelsNumeric, weightedRandomIndex } from './utils/weighted-random';
|
||||
import { customElement, noShadowDOM } from "solid-element";
|
||||
import {
|
||||
createSignal,
|
||||
For,
|
||||
Show,
|
||||
createEffect,
|
||||
createMemo,
|
||||
createResource,
|
||||
} from "solid-js";
|
||||
import { marked } from "../markdown";
|
||||
import { loadCSV, CSV, processVariables, isCSV } from "./utils/csv-loader";
|
||||
import { resolvePath } from "./utils/path";
|
||||
import {
|
||||
areAllLabelsNumeric,
|
||||
weightedRandomIndex,
|
||||
} from "./utils/weighted-random";
|
||||
|
||||
export interface TableProps {
|
||||
roll?: boolean;
|
||||
|
|
@ -16,28 +26,35 @@ interface TableRow {
|
|||
[key: string]: string;
|
||||
}
|
||||
|
||||
customElement('md-table', { roll: false, remix: false }, (props, { element }) => {
|
||||
customElement(
|
||||
"md-table",
|
||||
{ roll: false, remix: false },
|
||||
(props, { element }) => {
|
||||
noShadowDOM();
|
||||
const [rows, setRows] = createSignal<CSV<TableRow>>([] as unknown as CSV<TableRow>);
|
||||
const [rows, setRows] = createSignal<CSV<TableRow>>(
|
||||
[] as unknown as CSV<TableRow>,
|
||||
);
|
||||
const [activeTab, setActiveTab] = createSignal(0);
|
||||
const [activeGroup, setActiveGroup] = createSignal<string | null>(null);
|
||||
const [bodyHtml, setBodyHtml] = createSignal('');
|
||||
const [bodyHtml, setBodyHtml] = createSignal("");
|
||||
let tabsContainer: HTMLDivElement | undefined;
|
||||
|
||||
// 从 element 的 textContent 获取 CSV 路径或 inline CSV 数据
|
||||
const rawContent = element?.textContent?.trim() || '';
|
||||
const rawContent = element?.textContent?.trim() || "";
|
||||
|
||||
// 隐藏原始文本内容
|
||||
if (element) {
|
||||
element.textContent = '';
|
||||
element.textContent = "";
|
||||
}
|
||||
|
||||
// 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
|
||||
const articleEl = element?.closest('article[data-src]');
|
||||
const articlePath = articleEl?.getAttribute('data-src') || '';
|
||||
const articleEl = element?.closest("article[data-src]");
|
||||
const articlePath = articleEl?.getAttribute("data-src") || "";
|
||||
|
||||
// 如果是 inline CSV，直接使用；否则解析相对路径
|
||||
const contentOrPath = isCSV(rawContent) ? rawContent : resolvePath(articlePath, rawContent);
|
||||
const contentOrPath = isCSV(rawContent)
|
||||
? rawContent
|
||||
: resolvePath(articlePath, rawContent);
|
||||
|
||||
// 使用 createResource 加载 CSV，自动响应路径变化并避免重复加载
|
||||
const [csvData] = createResource(() => contentOrPath, loadCSV);
|
||||
|
|
@ -54,7 +71,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
|||
// 检测是否有 group 列
|
||||
const hasGroup = createMemo(() => {
|
||||
const allRows = rows();
|
||||
return allRows.length > 0 && 'group' in allRows[0];
|
||||
return allRows.length > 0 && "group" in allRows[0];
|
||||
});
|
||||
|
||||
// 获取所有分组
|
||||
|
|
@ -75,13 +92,15 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
|||
const allRows = rows();
|
||||
const group = activeGroup();
|
||||
if (!group) return allRows;
|
||||
return allRows.filter(row => row.group === group);
|
||||
return allRows.filter((row) => row.group === group);
|
||||
});
|
||||
|
||||
// 处理 body 内容中的 {{prop}} 语法并解析 markdown
|
||||
const processBody = (body: string, currentRow: TableRow): string => {
|
||||
// 使用 marked 解析 markdown
|
||||
return marked.parse(processVariables(body, currentRow, rows(), filteredRows(), props.remix)) as string;
|
||||
return marked.parse(
|
||||
processVariables(body, currentRow, rows(), filteredRows(), props.remix),
|
||||
) as string;
|
||||
};
|
||||
|
||||
// 更新 body 内容
|
||||
|
|
@ -113,7 +132,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
|||
if (filtered.length === 0) return;
|
||||
|
||||
// 检查所有 label 是否都是整数/整数范围格式
|
||||
const labels = filtered.map(row => row.label);
|
||||
const labels = filtered.map((row) => row.label);
|
||||
if (areAllLabelsNumeric(labels)) {
|
||||
// 使用加权随机
|
||||
const randomIndex = weightedRandomIndex(labels);
|
||||
|
|
@ -128,8 +147,12 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
|||
|
||||
// 滚动到可视区域
|
||||
setTimeout(() => {
|
||||
const activeButton = tabsContainer?.querySelector('.border-blue-600');
|
||||
activeButton?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
|
||||
const activeButton = tabsContainer?.querySelector(".border-blue-600");
|
||||
activeButton?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "nearest",
|
||||
});
|
||||
}, 50);
|
||||
};
|
||||
|
||||
|
|
@ -144,8 +167,8 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
|||
onClick={() => handleGroupChange(null)}
|
||||
class={`font-medium transition-colors ${
|
||||
activeGroup() === null
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
全部
|
||||
|
|
@ -156,8 +179,8 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
|||
onClick={() => handleGroupChange(group)}
|
||||
class={`font-medium transition-colors ${
|
||||
activeGroup() === group
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{group}
|
||||
|
|
@ -171,21 +194,24 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
|||
<Show when={props.roll}>
|
||||
<button
|
||||
onClick={handleRoll}
|
||||
class="text-gray-500 hover:text-gray-700 flex-shrink-0 cursor-pointer"
|
||||
class="text-gray-500 hover:text-gray-700 shrink-0 cursor-pointer"
|
||||
title="随机切换"
|
||||
>
|
||||
🎲
|
||||
</button>
|
||||
</Show>
|
||||
<div ref={tabsContainer} class="flex gap-1 overflow-x-auto flex-1 min-w-0">
|
||||
<div
|
||||
ref={tabsContainer}
|
||||
class="flex gap-1 overflow-x-auto flex-1 min-w-0"
|
||||
>
|
||||
<For each={filteredRows()}>
|
||||
{(row, index) => (
|
||||
<button
|
||||
onClick={() => setActiveTab(index())}
|
||||
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer ${
|
||||
class={`font-medium transition-colors shrink-0 min-w-[1.6em] cursor-pointer ${
|
||||
activeTab() === index()
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{row.label}
|
||||
|
|
@ -203,4 +229,5 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
},
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue