tools/label-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
iqudoo
2026-06-15 16:21:23 +08:00
parent 1d506e0c71
commit fcd587bd50
7 changed files with 212 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/PropSidebar.tsx
View File

@@ -48,6 +48,8 @@ import {
HelpCircle,
Lock,
Unlock,
Eye,
EyeOff,
ArrowUp,
ArrowDown,
ArrowLeft,
@@ -570,6 +572,14 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
}
};
const toggleLayerVisibility = (idx: number) => {
const list = template.elements.map((el, i) => {
if (i !== idx) return el;
return { ...el, hidden: el.hidden ? undefined : true };
});
onChangeTemplate({ ...template, elements: list });
};
const deleteLayer = async (id: string) => {
const el = template.elements.find((x) => x.id === id);
if (el?.locked) return;
@@ -1535,6 +1545,60 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
/>
<span className="text-[12px] text-[#ccc]">自动换行</span>
</label>
<div className="grid grid-cols-2 gap-2">
<div>
<label className="ps-field-label">最大行数</label>
<PropInput
type="number"
min="0"
max="99"
step="1"
value={selectedElem.textMaxLines ?? ''}
onCommit={(val) => {
const raw = String(val).trim();
if (!raw) {
handleElemChange({
...selectedElem,
textMaxLines: undefined,
textEllipsis: undefined,
});
return;
}
const n = Math.max(0, Math.min(99, Math.floor(Number(val) || 0)));
handleElemChange({
...selectedElem,
textMaxLines: n > 0 ? n : undefined,
textEllipsis: n > 0 ? selectedElem.textEllipsis : undefined,
});
}}
className="ps-field font-mono"
placeholder="不限"
/>
<p className="text-[9px] text-[#666] mt-0.5">留空表示不限制</p>
</div>
<div className="flex items-end pb-5">
<label
className={`flex items-center gap-2 cursor-pointer ${
!selectedElem.textMaxLines ? 'opacity-40 cursor-not-allowed' : ''
}`}
>
<input
type="checkbox"
checked={selectedElem.textEllipsis === true}
disabled={!selectedElem.textMaxLines || selectedElem.textMaxLines <= 0}
onChange={(e) =>
handleElemChange({
...selectedElem,
textEllipsis: e.target.checked ? true : undefined,
})
}
className="ps-checkbox"
/>
<span className="text-[12px] text-[#ccc]">超出显示省略号</span>
</label>
</div>
</div>
</div>
)}
@@ -2116,6 +2180,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
const actualIdx = template.elements.length - 1 - revIdx;
const isSelected = selectedElementIds.includes(elem.id);
const isLocked = !!elem.locked;
const isHidden = elem.hidden === true;
return (
<div
@@ -2145,7 +2210,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
}
}
className={`ps-layer-item group ${isSelected && !isLocked ? 'selected' : ''} ${isLocked ? 'ps-layer-item-locked' : ''
}`}
}${isHidden ? ' ps-layer-item-hidden' : ''}`}
>
<div className="flex items-center gap-2 min-w-0 flex-1 pointer-events-none">
<span className="ps-layer-item-icon">
@@ -2186,6 +2251,14 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
</button>
</>
)}
<button
type="button"
onClick={(e) => { e.stopPropagation(); toggleLayerVisibility(actualIdx); }}
title={isHidden ? '显示图层' : '隐藏图层'}
className={isHidden ? 'text-[#666]' : 'text-[#ccc] hover:text-white'}
>
{isHidden ? <EyeOff /> : <Eye />}
</button>
<button
type="button"
onClick={(e) => { e.stopPropagation(); toggleLockLayer(actualIdx); }}

47
src/components/TableCellTextFields.tsx
View File

@@ -384,6 +384,53 @@ export const TableCellTextFields: React.FC<TableCellTextFieldsProps> = ({
<span className="text-[12px] text-[#ccc]">自动换行</span>
</label>
<div className="grid grid-cols-2 gap-2">
<div>
<label className="ps-field-label">最大行数</label>
<CommitInput
type="number"
min="0"
max="99"
step="1"
value={textElem.textMaxLines ?? ''}
onCommit={(val) => {
const raw = String(val).trim();
if (!raw) {
patchText({ ...textElem, textMaxLines: undefined, textEllipsis: undefined });
return;
}
const n = Math.max(0, Math.min(99, Math.floor(Number(val) || 0)));
patchText({
...textElem,
textMaxLines: n > 0 ? n : undefined,
textEllipsis: n > 0 ? textElem.textEllipsis : undefined,
});
}}
className="ps-field font-mono"
placeholder="不限"
/>
<p className="text-[9px] text-[#666] mt-0.5">留空表示不限制</p>
</div>
<div className="flex items-end pb-5">
<label
className={`flex items-center gap-2 cursor-pointer ${
!textElem.textMaxLines ? 'opacity-40 cursor-not-allowed' : ''
}`}
>
<input
type="checkbox"
checked={textElem.textEllipsis === true}
disabled={!textElem.textMaxLines || textElem.textMaxLines <= 0}
onChange={(e) =>
patchText({ ...textElem, textEllipsis: e.target.checked ? true : undefined })
}
className="ps-checkbox"
/>
<span className="text-[12px] text-[#ccc]">超出显示省略号</span>
</label>
</div>
</div>
<div className="grid grid-cols-2 gap-2 border-t border-[#3a3a3a] pt-2">
<div>
<label className="ps-field-label">单元格背景</label>