feat: Add Daisy-UI and optimize LED strip configuration UI
- Install and configure Tailwind CSS 4.1 with Daisy-UI plugin - Redesign main navigation with responsive navbar and dark theme - Optimize LED strip configuration layout with modern card components - Improve screen preview performance with frame-based rendering - Reduce LED pixel size for better visual appearance - Remove excessive debug logging for better performance - Fix Tailwind CSS ESM compatibility issues with dynamic imports
This commit is contained in:
@ -11,26 +11,59 @@ type ItemProps = {
|
||||
|
||||
const Item: ParentComponent<ItemProps> = (props) => {
|
||||
return (
|
||||
<dl class="flex">
|
||||
<dt class="w-20">{props.label}</dt>
|
||||
<dd class="flex-auto">{props.children}</dd>
|
||||
</dl>
|
||||
<div class="flex justify-between items-center py-1">
|
||||
<dt class="text-sm font-medium text-base-content/70">{props.label}</dt>
|
||||
<dd class="text-sm font-mono text-base-content">{props.children}</dd>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DisplayStateCard: Component<DisplayStateCardProps> = (props) => {
|
||||
return (
|
||||
<section class="p-2 rounded shadow">
|
||||
<Item label="Brightness">{props.state.brightness}</Item>
|
||||
<Item label="Max Brightness">{props.state.max_brightness}</Item>
|
||||
<Item label="Min Brightness">{props.state.min_brightness}</Item>
|
||||
<Item label="Contrast">{props.state.contrast}</Item>
|
||||
<Item label="Max Contrast">{props.state.max_contrast}</Item>
|
||||
<Item label="Min Contrast">{props.state.min_contrast}</Item>
|
||||
<Item label="Max Mode">{props.state.max_mode}</Item>
|
||||
<Item label="Min Mode">{props.state.min_mode}</Item>
|
||||
<Item label="Mode">{props.state.mode}</Item>
|
||||
<Item label="Last Modified At">{props.state.last_modified_at.toISOString()}</Item>
|
||||
</section>
|
||||
<div class="card bg-base-200 shadow-lg hover:shadow-xl transition-shadow duration-200">
|
||||
<div class="card-body p-4">
|
||||
<div class="card-title text-base mb-3 flex items-center justify-between">
|
||||
<span>显示器状态</span>
|
||||
<div class="badge badge-primary badge-outline">实时</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
{/* 亮度信息 */}
|
||||
<div class="bg-base-100 rounded-lg p-3">
|
||||
<h4 class="text-sm font-semibold text-base-content mb-2">亮度设置</h4>
|
||||
<div class="space-y-1">
|
||||
<Item label="当前亮度">{props.state.brightness}</Item>
|
||||
<Item label="最大亮度">{props.state.max_brightness}</Item>
|
||||
<Item label="最小亮度">{props.state.min_brightness}</Item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 对比度信息 */}
|
||||
<div class="bg-base-100 rounded-lg p-3">
|
||||
<h4 class="text-sm font-semibold text-base-content mb-2">对比度设置</h4>
|
||||
<div class="space-y-1">
|
||||
<Item label="当前对比度">{props.state.contrast}</Item>
|
||||
<Item label="最大对比度">{props.state.max_contrast}</Item>
|
||||
<Item label="最小对比度">{props.state.min_contrast}</Item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 模式信息 */}
|
||||
<div class="bg-base-100 rounded-lg p-3">
|
||||
<h4 class="text-sm font-semibold text-base-content mb-2">模式设置</h4>
|
||||
<div class="space-y-1">
|
||||
<Item label="当前模式">{props.state.mode}</Item>
|
||||
<Item label="最大模式">{props.state.max_mode}</Item>
|
||||
<Item label="最小模式">{props.state.min_mode}</Item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 更新时间 */}
|
||||
<div class="text-xs text-base-content/50 text-center pt-2 border-t border-base-300">
|
||||
最后更新: {props.state.last_modified_at.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -36,17 +36,37 @@ export const DisplayStateIndex: Component = () => {
|
||||
};
|
||||
});
|
||||
return (
|
||||
<ol class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-2 gap-2">
|
||||
<For each={states()}>
|
||||
{(state, index) => (
|
||||
<li class="bg-slate-50 text-gray-800 relative border-2 border-slate-50 hover:border-sky-300 focus:border-sky-300 transition">
|
||||
<DisplayStateCard state={state} />
|
||||
<span class="absolute left-2 -top-3 bg-sky-300 text-white px-1 py-0.5 text-xs rounded-sm font-mono">
|
||||
#{index() + 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ol>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-base-content">显示器状态</h1>
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">显示器数量</div>
|
||||
<div class="stat-value text-primary">{states().length}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<For each={states()}>
|
||||
{(state, index) => (
|
||||
<div class="relative">
|
||||
<DisplayStateCard state={state} />
|
||||
<div class="absolute -top-2 -left-2 w-6 h-6 bg-primary text-primary-content rounded-full flex items-center justify-center text-xs font-bold">
|
||||
{index() + 1}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
{states().length === 0 && (
|
||||
<div class="text-center py-12">
|
||||
<div class="text-6xl mb-4">🖥️</div>
|
||||
<h3 class="text-lg font-semibold text-base-content mb-2">未检测到显示器</h3>
|
||||
<p class="text-base-content/70">请检查显示器连接状态</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user