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-13 12:56:41 +08:00
parent 765d94b0b4
commit 8b09bcaa14
13 changed files with 400 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/PropSidebar.tsx
View File

@@ -20,6 +20,7 @@ import {
type AlignMode,
} from '../elementAlign';
import { CollapsiblePanelSection } from './CollapsiblePanelSection';
import { FieldSelect } from './PsSelect';
import { CommitInput } from './CommitInput';
import { useAppDialog } from './AppDialog';
import { useIsNarrowScreen } from '../hooks/useIsMobile';
@@ -682,7 +683,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
<div className="text-[10px] font-bold text-[#31a8ff]">显示控制</div>
<div>
<label className="ps-field-label">显示模式</label>
<select
<FieldSelect
value={isConditionalVisibility(selectedElem) ? 'conditional' : 'always'}
onChange={(e) => {
const conditional = e.target.value === 'conditional';
@@ -710,7 +711,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
>
<option value="always">始终显示</option>
<option value="conditional">按条件显示</option>
</select>
</FieldSelect>
</div>
{isConditionalVisibility(selectedElem) && (() => {
const rules = resolveVisibilityRules(selectedElem);
@@ -962,7 +963,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
<div className="grid grid-cols-2 gap-2">
<div>
<label className="ps-field-label">显示格式</label>
<select
<FieldSelect
value={selectedElem.textFormat || 'text'}
onChange={(e) =>
handleElemChange({
@@ -980,7 +981,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
<option value="number">数值</option>
<option value="percent">百分比</option>
<option value="currency">货币 (¥)</option>
</select>
</FieldSelect>
</div>
{(selectedElem.textFormat === 'number' ||
selectedElem.textFormat === 'percent' ||
@@ -1004,7 +1005,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
</div>
<div className="col-span-2">
<label className="ps-field-label">数值显示部分</label>
<select
<FieldSelect
value={selectedElem.numberPartDisplay ?? 'full'}
onChange={(e) =>
handleElemChange({
@@ -1020,7 +1021,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
<option value="full">完整数值</option>
<option value="integer">仅整数部分（如 19.9 → 19）</option>
<option value="fraction">仅小数部分（如 19.9 → .9）</option>
</select>
</FieldSelect>
<p className="text-[9px] text-[#666] mt-1 leading-relaxed">
可将价格拆成两个文本元素分别设置字号，如「19」与「.9」
</p>
@@ -1045,7 +1046,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
</div>
<div>
<label className="ps-field-label">字体库</label>
<select
<FieldSelect
value={selectedElem.fontFamily}
onChange={(e) =>
handleElemChange({
@@ -1058,7 +1059,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
<option value="sans">黑体 (Sans)</option>
<option value="serif">宋体 (Serif)</option>
<option value="mono">等宽体 (Mono)</option>
</select>
</FieldSelect>
</div>
</div>
@@ -1303,7 +1304,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
</h5>
<div>
<label className="ps-field-label">条码码制</label>
<select
<FieldSelect
value={selectedElem.barcodeFormat}
onChange={(e) =>
handleElemChange({
@@ -1317,7 +1318,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
<option value="CODE39">CODE 39 (数字和字符)</option>
<option value="EAN13">EAN 13 (纯商品数字 13位)</option>
<option value="ITF">ITF (交插双五码)</option>
</select>
</FieldSelect>
</div>
<label className="flex items-center gap-2 cursor-pointer mt-1">
@@ -1341,7 +1342,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
</h5>
<div>
<label className="ps-field-label">适应方式</label>
<select
<FieldSelect
value={selectedElem.imageFit ?? 'contain'}
onChange={(e) =>
handleElemChange({
@@ -1354,7 +1355,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
<option value="contain">包含 (contain)</option>
<option value="cover">覆盖 (cover)</option>
<option value="fill">拉伸 (fill)</option>
</select>
</FieldSelect>
</div>
</div>
)}