Halolight Svelte | Admin Pro

基于 SvelteKit 2 + Svelte 5 的现代化中文后台管理系统，具备编译时优化、Runes 响应式系统和极致性能。

• 在线预览：https://halolight-svelte.h7ml.cn
• GitHub：https://github.com/halolight/halolight-svelte

功能亮点

• Svelte 5 Runes：$state、$derived、$effect、$props 全新响应式系统
• SvelteKit 2：文件路由、SSR/SSG、API 端点、布局嵌套
• 编译时优化：无虚拟 DOM，极小运行时开销
• TypeScript 5.9：完整类型安全与自动类型推导
• Tailwind CSS v4：原子化样式 + @tailwindcss/postcss 插件
• View Transitions API：主题/皮肤切换动画
• Cloudflare Pages：边缘部署，全球加速
• shadcn-svelte：高质量 UI 组件库

目录结构

src/
├── routes/                    # 文件路由
│   ├── (dashboard)/           # 仪表盘路由组
│   │   ├── dashboard/         # 首页
│   │   ├── analytics/         # 数据分析
│   │   ├── users/             # 用户管理
│   │   ├── settings/          # 系统设置
│   │   └── +layout.svelte     # 仪表盘布局
│   ├── auth/                  # 认证相关
│   │   ├── login/             # 登录
│   │   ├── register/          # 注册
│   │   └── forgot-password/   # 忘记密码
│   ├── +layout.svelte         # 根布局
│   └── +error.svelte          # 错误页面
├── lib/                       # 库代码 ($lib 别名)
│   ├── components/            # 可复用组件
│   │   ├── layout/            # 布局组件
│   │   └── ui/                # UI 组件 (shadcn-svelte)
│   ├── config/                # 配置文件
│   ├── stores/                # 状态管理
│   ├── types/                 # 类型定义
│   └── utils/                 # 工具函数
├── app.html                   # HTML 模板
├── app.css                    # 全局样式 (Tailwind)
└── hooks.server.ts            # 服务端钩子

快速开始

环境要求

• Node.js >= 20
• pnpm >= 9

安装与运行

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 类型检查
pnpm check

# 生产构建
pnpm build

# 预览构建产物
pnpm preview

代码质量

# ESLint 检查
pnpm lint

# ESLint 自动修复
pnpm lint:fix

# Prettier 格式化
pnpm format

# Prettier 检查
pnpm format:check

# 运行测试
pnpm test

# 测试覆盖率
pnpm test:coverage

# 完整 CI 检查
pnpm ci

技术栈

Svelte 5 Runes 示例

<script lang="ts">
  import { SvelteSet } from 'svelte/reactivity';

  // $state - 响应式状态
  let count = $state(0);
  let items = $state<string[]>([]);
  let selected = new SvelteSet<string>();

  // $derived - 派生值（自动追踪依赖）
  let doubled = $derived(count * 2);
  let total = $derived(items.length);

  // $effect - 副作用（自动清理）
  $effect(() => {
    console.log('count changed:', count);
    return () => console.log('cleanup');
  });

  // $props - 组件属性
  interface Props {
    title: string;
    onSave?: (data: unknown) => void;
  }
  let { title, onSave }: Props = $props();
</script>

<h1>{title}</h1>
<button onclick={() => count++}>
  Count: {count}, Doubled: {doubled}
</button>

SvelteKit 路由约定

环境变量

部署

项目已配置 Cloudflare Pages 适配器，支持边缘部署：

# 本地构建
pnpm build

# Cloudflare Pages 会自动部署 main 分支

CI/CD

GitHub Actions 自动运行以下检查：

1. lint - ESLint 代码检查
2. format - Prettier 格式检查
3. type-check - TypeScript 类型检查
4. test - Vitest 单元测试
5. build - 生产构建验证

与其他 Halolight 项目的对照

贡献指南

1. Fork 本仓库
2. 创建功能分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 创建 Pull Request

许可证

MIT © 2024 h7ml