YYvanYang raspberry-dashboard .cursorrules file for Svelte

# 树莓派管理面板

一个用于监控和管理树莓派的全栈 Web 管理面板。

## 树莓派5多功能服务器完整解决方案

## 系统架构

```
[用户设备]
    ↓
[流量分流]
    |
    ├── Web管理面板访问 ─→ [Cloudflare CDN] ─→ [Cloudflare Tunnel] ─→ 树莓派
    |                                                                    ↓
    |                                                               [管理面板]
    |                                                               Go Backend
    |                                                             Svelte Frontend
    |
    ├── 科学上网请求 ──────→ [Hysteria2] ─────────────────────────→ 树莓派
    |                      (直连或可选CDN)                          ↓
    |                                                         [Hysteria2 Service]
    |
    └── 内网访问请求 ──────→ [WireGuard] ─────────────────────────→ 树莓派
                          (点对点直连)                              ↓
                                                              [WireGuard Service]
```

## 技术栈

### 前端 (frontend)
- SvelteKit 2.0
- Svelte 5.0 (使用 Runes)
- TailwindCSS
- TypeScript
- 主要功能组件:
  - 系统监控图表
  - 服务状态管理
  - 日志查看器
  - 配置编辑器
  - 用户认证

### 后端 (backend)
- Go
- SQLite
- Fiber Web 框架
- 主要功能:
  - RESTful API
  - JWT 认证
  - 系统监控
  - 服务管理
  - 日志管理
  - 配置管理

## 主要功能
- 实时系统资源监控 (CPU、内存、磁盘)
- 系统服务管理
- 系统日志查看
- 配置文件管理
- 用户认证和密码管理

## 项目结构
```
.
├── frontend/           # 前端项目目录
│   ├── src/           # 源代码
│   │   ├── lib/       # 组件和工具
│   │   └── routes/    # 页面路由
│   └── ...
└── backend/           # 后端项目目录
    ├── cmd/          # 入口文件
    └── internal/     # 内部包
        ├── api/      # API 处理
        ├── db/       # 数据库操作
        └── ...
```

# frontend

I'm using svelte 5 instead of svelte 4 here is an overview of the changes.

#### Overview

Svelte 5 introduces runes, a set of advanced primitives for controlling reactivity. The runes replace certain non-runes features and provide more explicit control over state and effects.

### Package manager
use pnpm instead of npm

### TypeScript
use typescript instead of javascript if possible

### Echarts
use echarts instead of chart.js

### fetch
use fetch instead of axios

#### $state

- **Purpose:** Declare reactive state.
- **Usage:**

```javascript
<script>let count = $state(0);</script>
```

- **Replaces:** Top-level `let` declarations in non-runes mode.
- **Class Fields:**

```javascript
class Todo {
	done = $state(false);
	text = $state();
	constructor(text) {
		this.text = text;
	}
}
```

- **Deep Reactivity:** Only plain objects and arrays become deeply reactive.

#### $state.raw

- **Purpose:** Declare state that cannot be mutated, only reassigned.
- **Usage:**

```javascript
<script>let numbers = $state.raw([1, 2, 3]);</script>
```

- **Performance:** Improves with large arrays and objects.

#### $state.snapshot

- **Purpose:** Take a static snapshot of $state.
- **Usage:**

```javascript
<script>
	let counter = $state({ count: 0 });

	function onClick() {
		console.log($state.snapshot(counter));
	}
</script>
```

#### $derived

- **Purpose:** Declare derived state.
- **Usage:**

```javascript
<script>
let count = $state(0); 
let doubled = $derived(count * 2);
</script>
```

- **Replaces:** Reactive variables computed using `$:` in non-runes mode.

#### $derived.by

- **Purpose:** Create complex derivations with a function.
- **Usage:**

```javascript
<script>
	let numbers = $state([1, 2, 3]); 
	let total = $derived.by(() => numbers.reduce((a, b) => a + b, 0));
</script>
```

#### $effect

- **Purpose:** Run side-effects when values change.
- **Usage:**

```javascript
<script>
	let size = $state(50);
	let color = $state('#ff3e00');

	$effect(() => {
		const context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.fillStyle = color;
		context.fillRect(0, 0, size, size);
	});
</script>
```

- **Replacements:** $effect replaces a substantial part of `$: {}` blocks triggering side-effects.

#### $effect.pre

- **Purpose:** Run code before the DOM updates.
- **Usage:**

```javascript
<script>
	$effect.pre(() => {
		// logic here
	});
</script>
```

- **Replaces:** beforeUpdate.

#### $props

- **Purpose:** Declare component props.
- **Usage:**

```javascript
<script>let { prop1, prop2 } = $props();</script>
```

- **Replaces:** export let syntax for declaring props.

#### $bindable

- **Purpose:** Declare bindable props.
- **Usage:**

```javascript
<script>let { bindableProp = $bindable('fallback') } = $props();</script>
```

#### Overview of snippets in svelte 5

Snippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.

#### Snippets Usage

- **Definition:** Use the `#snippet` syntax to define reusable markup sections.
- **Basic Example:**

```javascript
{#snippet figure(image)}
	<figure>
		<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
		<figcaption>{image.caption}</figcaption>
	</figure>
{/snippet}
```

- **Invocation:** Render predefined snippets with `@render`:

```javascript
{@render figure(image)}
```

#### Snippet Scope

- **Scope Rules:** Snippets have lexical scoping rules; they are visible to everything in the same lexical scope:

```javascript
<div>
	{#snippet x()}
		{#snippet y()}...{/snippet}

		<!-- valid usage -->
		{@render y()}
	{/snippet}

	<!-- invalid usage -->
	{@render y()}
</div>

<!-- invalid usage -->
{@render x()}
```

#### Passing Snippets to Components

- **Direct Passing:**

```javascript
<script>
	import Table from './Table.svelte';
	const fruits = [{ name: 'apples', qty: 5, price: 2 }, ...];
</script>

{#snippet header()}
	<th>fruit</th>
	<th>qty</th>
	<th>price</th>
	<th>total</th>
{/snippet}

{#snippet row(fruit)}
	<td>{fruit.name}</td>
	<td>{fruit.qty}</td>
	<td>{fruit.price}</td>
	<td>{fruit.qty * fruit.price}</td>
{/snippet}

<Table data={fruits} {header} {row} />
```

#### Typing Snippets

- **TypeScript Integration:**

```typescript
<script lang="ts">
	import type { Snippet } from 'svelte';

	let { data, children, row }: {
		data: T[];
		children: Snippet;
		row: Snippet<[T]>;
	} = $props();
</script>
```

# backend

You are an expert AI programming assistant specializing in building APIs with Go, using the standard library's net/http package and the new ServeMux.

Always use the latest stable version of Go (1.23) and be familiar with RESTful API design principles, best practices, and Go idioms.

CORE PRINCIPLES:
- Follow the user's requirements carefully & to the letter
- First think step-by-step - describe your plan for the API structure, endpoints, and data flow in pseudocode
- Confirm the plan, then write code
- Write correct, up-to-date, bug-free, fully functional, secure, and efficient Go code for APIs
- Leave NO todos, placeholders, or missing pieces in the API implementation
- If unsure about a best practice or implementation detail, say so instead of guessing

STANDARD LIBRARY USAGE:
1. HTTP Package
- Use net/http package for API development
- Utilize ServeMux for routing with new features:
  - Support multiple spaces/tabs after method names in patterns
  - Use wildcard matching and regex support
- Implement proper HTTP method handlers
- Use appropriate status codes
- Format JSON responses correctly

2. Cookie Handling (New in 1.23)
- Use Cookie.Quoted field for preserving double quotes
- Implement Request.CookiesNamed for multiple cookies
- Support Cookie.Partitioned attribute
- Use ParseCookie/ParseSetCookie functions appropriately

3. Iterator Support (New in 1.23)
- Use the iter package for user-defined iterators
- Implement iterator functions matching patterns:
  func(func() bool)
  func(func(K) bool)
  func(func(K, V) bool)
- Leverage slices package iterator functions:
  - All() for indexes and values
  - Values() for elements
  - Backward() for reverse iteration
  - Collect() for gathering values
  - AppendSeq() for appending values
  - Sorted/SortedFunc/SortedStableFunc for sorted collections

4. Maps Package (New in 1.23)
- Use maps package iterator functions:
  - All() for key-value pairs
  - Keys() for map keys
  - Values() for map values
  - Insert() for adding pairs
  - Collect() for gathering into maps

5. Value Management (New in 1.23)
- Use unique package for value canonicalization
- Apply Handle[T] for efficient comparisons
- Consider structs package for memory layout control
- Use HostLayout when interfacing with platform APIs

ERROR HANDLING AND LOGGING:
- Implement proper error handling, including custom error types
- Properly wrap errors from driver.Valuer implementations
- Use structured errors with unwrap support
- Implement proper logging using standard library
- Consider telemetry for monitoring and debugging

PERFORMANCE AND SECURITY:
- Timer Considerations (New in 1.23):
  - Handle unbuffered timer channels (capacity 0)
  - Manage timer garbage collection
  - Use GODEBUG=asynctimerchan=1 if needed
- Utilize Go's built-in concurrency features
- Implement rate limiting
- Implement authentication/authorization
- Apply proper input validation
- Consider performance implications of struct layout

MIDDLEWARE AND CROSS-CUTTING CONCERNS:
- Implement middleware for logging, authentication, etc.
- Consider cross-cutting concerns in API design
- Handle timeouts and cancellation properly

TESTING:
- Provide suggestions for testing endpoints
- Use Go's testing package effectively
- Consider both unit and integration tests

Always prioritize:
1. Security
2. Scalability
3. Maintainability
4. Performance
5. Code readability