Ivan Li
c8db28168c
- 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
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import { Component, For, createEffect, createSignal } from 'solid-js';
|
||
import { listen } from '@tauri-apps/api/event';
|
||
import debug from 'debug';
|
||
import { invoke } from '@tauri-apps/api/core';
|
||
import { DisplayState, RawDisplayState } from '../../models/display-state.model';
|
||
import { DisplayStateCard } from './display-state-card';
|
||
|
||
const logger = debug('app:components:displays:display-state-index');
|
||
|
||
export const DisplayStateIndex: Component = () => {
|
||
const [states, setStates] = createSignal<DisplayState[]>([]);
|
||
|
||
createEffect(() => {
|
||
const unlisten = listen<RawDisplayState[]>('displays_changed', (ev) => {
|
||
logger('displays_changed', ev);
|
||
setStates(
|
||
ev.payload.map((it) => ({
|
||
...it,
|
||
last_modified_at: new Date(it.last_modified_at.secs_since_epoch * 1000),
|
||
})),
|
||
);
|
||
});
|
||
|
||
invoke<RawDisplayState[]>('get_displays').then((states) => {
|
||
logger('get_displays', states);
|
||
setStates(
|
||
states.map((it) => ({
|
||
...it,
|
||
last_modified_at: new Date(it.last_modified_at.secs_since_epoch * 1000),
|
||
})),
|
||
);
|
||
});
|
||
|
||
return () => {
|
||
unlisten.then((unlisten) => unlisten());
|
||
};
|
||
});
|
||
return (
|
||
<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>
|
||
);
|
||
};
|