Add multi-theme system with random theme selection on app startup

2025-06-07 22:58:23 +08:00 · 2025-06-07 22:58:23 +08:00 · 7e8f95e73e
commit 7e8f95e73e
47 changed files with 7677 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,42 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 # private key and sensitive files
 keystore.properties
 upload-keystore.properties
 upload-keystore.jks
 *.jks
 *.pem
 *.p12
 *.pfx
 .env*
 *.key
 # Tauri build artifacts and generated files
 src-tauri/gen/
 src-tauri/target/
 src-tauri/.gradle/
 *.apk
 *.aab
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -0,0 +1,48 @@
 # CLAUDE.md
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 ## Development Commands
 ### Frontend Development
 - `pnpm dev` - Start the frontend development server (runs Vite on localhost:1420)
 - `pnpm build` - Build the frontend for production (TypeScript compilation + Vite build)
 - `pnpm preview` - Preview the production build
 ### Tauri Development
 - `pnpm tauri dev` - Start Tauri development mode (builds Rust backend + starts frontend)
 - `pnpm tauri build` - Build the complete Tauri application for production
 ### Build Scripts
 - `./build_desktop.sh` - Build desktop application
 - `./build_android.sh` - Build Android application
 ## Architecture Overview
 This is a **Tauri application** combining a Rust backend with a React/TypeScript frontend for building cross-platform desktop and mobile apps.
 ### Backend (Rust)
 - **Database**: SQLite with rusqlite for storing anniversary records
 - **Location**: Database stored in app data directory (`anniversaries.db`)
 - **Schema**: `anniversaries` table with id, title, start_date, created_at
 - **Core Commands**: All database operations exposed as Tauri commands in `src-tauri/src/lib.rs`
  - `get_anniversaries` - Fetch all anniversaries with calculated days
  - `get_anniversary_by_id` - Fetch single anniversary by ID
  - `add_anniversary` - Add new anniversary
  - `delete_anniversary` - Delete anniversary by ID
 ### Frontend (React + TypeScript)
 - **Router**: React Router DOM with three main routes:
  - `/` - HomePage (list all anniversaries)
  - `/detail/:id` - DetailPage (view/delete specific anniversary)
  - `/add` - AddPage (create new anniversary)
 - **Data Flow**: Frontend calls Tauri commands to interact with Rust backend
 - **Styling**: Component-specific CSS files for each page
 ### Key Dependencies
 - **Frontend**: React 18, React Router DOM, Tauri API
 - **Backend**: rusqlite (SQLite), chrono (date handling), serde (serialization)
 - **Build**: Vite, TypeScript, Tauri CLI
 ### Package Manager
 This project uses **pnpm** as specified in `tauri.conf.json` build commands.
--- a/README.md
+++ b/README.md
@ -0,0 +1,7 @@
 # Tauri + React + Typescript
 This template should help get you started developing with Tauri, React and Typescript in Vite.
 ## Recommended IDE Setup
 - [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
--- a/build_android.sh
+++ b/build_android.sh
@ -0,0 +1 @@
 pnpm tauri android build --apk -t aarch64
--- a/build_desktop.sh
+++ b/build_desktop.sh
@ -0,0 +1 @@
 pnpm tauri build --no-bundle
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri + React + Typescript</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,27 @@
 {
  "name": "countdown",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "cargo tauri"
  },
  "dependencies": {
    "@tauri-apps/api": "^2.5.0",
    "@tauri-apps/plugin-opener": "^2.2.7",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^7.1.3"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.4",
    "typescript": "~5.6.2",
    "vite": "^6.0.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@ -0,0 +1,7 @@
 # Generated by Cargo
 # will have compiled files and executables
 /target/
 # Generated by Tauri
 # will have schema files for capabilities auto-completion
 /gen/schemas
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -0,0 +1,26 @@
 [package]
 name = "countdown"
 version = "0.1.0"
 description = "A Countdown app"
 authors = ["sangge"]
 edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 [lib]
 # The `_lib` suffix may seem redundant but it is necessary
 # to make the lib name unique and wouldn't conflict with the bin name.
 # This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
 name = "countdown_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]
 [build-dependencies]
 tauri-build = { version = "2", features = [] }
 [dependencies]
 rusqlite = { version = "0.33.0", features = ["bundled"] }
 tauri = { version = "2", features = [] }
 tauri-plugin-opener = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 chrono = "0.4.39"
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@ -0,0 +1,3 @@
 fn main() {
    tauri_build::build()
 }
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@ -0,0 +1,10 @@
 {
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "opener:default"
  ]
 }
--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/4096x4096.png
+++ b/src-tauri/icons/4096x4096.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@ -0,0 +1,174 @@
 use chrono::{Local, NaiveDate};
 use rusqlite::{Connection, Result};
 use serde::Serialize;
 use std::fs;
 use tauri::Manager;
 fn init_database(app: &tauri::App) -> Result<(), Box<dyn std::error::Error>> {
    // 获取应用数据目录
    let app_dir = app.path().app_data_dir()?;
    // 确保目录存在
    fs::create_dir_all(&app_dir)?;
    // 构建数据库文件路径
    let db_path = app_dir.join("anniversaries.db");
    // 打开数据库连接
    let conn = Connection::open(db_path)?;
    // 创建表
    conn.execute(
        "CREATE TABLE IF NOT EXISTS anniversaries (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            title TEXT NOT NULL,
            start_date TEXT NOT NULL,
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP
        )",
        [],
    )?;
    Ok(())
 }
 #[derive(Serialize)]
 struct Anniversary {
    id: i32,
    title: String,
    start_date: String,
    days: i64,
 }
 #[tauri::command]
 async fn get_anniversaries(app_handle: tauri::AppHandle) -> Result<Vec<Anniversary>, String> {
    // 返回主页数据
    let app_dir = app_handle
        .path()
        .app_data_dir()
        .map_err(|e| e.to_string())?;
    let db_path = app_dir.join("anniversaries.db");
    let conn = Connection::open(db_path).map_err(|e| e.to_string())?;
    let mut stmt = conn
        .prepare("SELECT id, title, start_date FROM anniversaries ORDER BY created_at DESC")
        .map_err(|e| e.to_string())?;
    let today = Local::now().date_naive();
    let anniversaries = stmt
        .query_map([], |row| {
            let id: i32 = row.get(0)?;
            let title: String = row.get(1)?;
            let start_date: String = row.get(2)?;
            // 计算天数
            let start = NaiveDate::parse_from_str(&start_date, "%Y-%m-%d")
                .map_err(|e| rusqlite::Error::InvalidParameterName(e.to_string()))?;
            let days = (today - start).num_days();
            Ok(Anniversary {
                id,
                title,
                start_date,
                days,
            })
        })
        .map_err(|e| e.to_string())?;
    let result: Result<Vec<_>, _> = anniversaries.collect();
    result.map_err(|e| e.to_string())
 }
 #[tauri::command]
 async fn get_anniversary_by_id(
    app_handle: tauri::AppHandle,
    id: i32,
 ) -> Result<Anniversary, String> {
    // 返回详情页数据
    let app_dir = app_handle
        .path()
        .app_data_dir()
        .map_err(|e| e.to_string())?;
    let db_path = app_dir.join("anniversaries.db");
    let conn = Connection::open(db_path).map_err(|e| e.to_string())?;
    let mut stmt = conn
        .prepare("SELECT title, start_date FROM anniversaries WHERE id = ?")
        .map_err(|e| e.to_string())?;
    let today = Local::now().date_naive();
    let result = stmt
        .query_row([id], |row| {
            let title: String = row.get(0)?;
            let start_date: String = row.get(1)?;
            // 计算天数
            let start = NaiveDate::parse_from_str(&start_date, "%Y-%m-%d")
                .map_err(|e| rusqlite::Error::InvalidParameterName(e.to_string()))?;
            let days = (today - start).num_days();
            Ok(Anniversary {
                id,
                title,
                start_date,
                days,
            })
        })
        .map_err(|e| e.to_string())?;
    Ok(result)
 }
 #[tauri::command]
 async fn delete_anniversary(app_handle: tauri::AppHandle, id: i64) -> Result<(), String> {
    // 详情页删除
    let app_dir = app_handle
        .path()
        .app_data_dir()
        .map_err(|e| e.to_string())?;
    let db_path = app_dir.join("anniversaries.db");
    let conn = Connection::open(db_path).map_err(|e| e.to_string())?;
    conn.execute("DELETE FROM anniversaries WHERE id = ?", [id])
        .map_err(|e| e.to_string())?;
    Ok(())
 }
 #[tauri::command]
 async fn add_anniversary(
    app_handle: tauri::AppHandle,
    title: String,
    start_date: String,
 ) -> Result<(), String> {
    // 主页添加
    let app_dir = app_handle
        .path()
        .app_data_dir()
        .map_err(|e| e.to_string())?;
    let db_path = app_dir.join("anniversaries.db");
    let conn = Connection::open(db_path).map_err(|e| e.to_string())?;
    conn.execute(
        "INSERT INTO anniversaries (title, start_date) VALUES (?1, ?2)",
        [&title, &start_date],
    )
    .map_err(|e| e.to_string())?;
    Ok(())
 }
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .setup(|app| {
            init_database(app).expect("failed to initialize database");
            Ok(())
        })
        .invoke_handler(tauri::generate_handler![
            get_anniversaries,
            get_anniversary_by_id,
            add_anniversary,
            delete_anniversary,
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
 }
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@ -0,0 +1,6 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 fn main() {
    countdown_lib::run()
 }
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -0,0 +1,36 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "countdown",
  "version": "0.1.0",
  "identifier": "com.countdown.app",
  "build": {
    "beforeDevCommand": "pnpm dev",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "pnpm build",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "title": "countdown",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'"
    }
  },
  "bundle": {
    "active": true,
    "targets": ["deb", "rpm", "appimage", "nsis", "msi", "dmg", "app"],
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
 }
--- a/src/AddPage.css
+++ b/src/AddPage.css
@ -0,0 +1,222 @@
 /* 基础样式 */
 .container {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  background: var(--bg-secondary);
  min-height: 100vh;
 }
 .nav-bar {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
 }
 .back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 16px;
  color: var(--color-primary);
  cursor: pointer;
  transition: transform 0.2s ease;
 }
 .back-button:hover {
  transform: translateX(-4px);
 }
 .back-icon {
  font-size: 20px;
 }
 .page-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text);
 }
 .form-card {
  background: var(--bg-card);
  padding: 32px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
 }
 .form-group {
  margin-bottom: 24px;
 }
 .form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
 }
 .form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
  outline: none;
  background: var(--bg-card);
  color: var(--color-text);
 }
 .form-group input:focus {
  border-color: var(--color-primary);
 }
 .form-group input::placeholder {
  color: var(--color-text-muted);
 }
 .submit-button {
  width: 100%;
  padding: 14px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
 }
 .submit-button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
 }
 .submit-button:active {
  transform: translateY(0);
 }
 /* 桌面端样式 */
@media screen and (min-width: 768px) {
  .container {
    padding: 32px;
  }
  .form-card {
    padding: 40px;
  }
 }
 /* 平板端样式 */
@media screen and (max-width: 767px) and (min-width: 481px) {
  .container {
    padding: 20px;
  }
  .form-card {
    padding: 24px;
  }
  .page-title {
    font-size: 22px;
  }
 }
 /* 移动端样式 */
@media screen and (max-width: 480px) {
  .container {
    padding: 16px;
  }
  .nav-bar {
    margin-bottom: 24px;
  }
  .back-button {
    padding: 6px 12px;
    font-size: 14px;
  }
  .back-icon {
    font-size: 18px;
  }
  .page-title {
    font-size: 20px;
  }
  .form-card {
    padding: 20px;
    border-radius: 12px;
  }
  .form-group {
    margin-bottom: 20px;
  }
  .form-group label {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .form-group input {
    padding: 10px 14px;
    font-size: 14px;
  }
  .submit-button {
    padding: 12px;
    font-size: 14px;
  }
 }
 /* 特小屏幕样式 */
@media screen and (max-width: 320px) {
  .container {
    padding: 12px;
  }
  .form-card {
    padding: 16px;
  }
  .back-button {
    padding: 4px 8px;
    font-size: 13px;
  }
  .page-title {
    font-size: 18px;
  }
 }
 /* 确保所有元素使用 border-box */
 * {
  box-sizing: border-box;
 }
 /* 优化输入控件在移动端的表现 */
@media (hover: none) {
  input {
    font-size: 16px !important; /* 防止 iOS 自动缩放 */
  }
 }
 /* 针对暗色模式的优化 */
@media (prefers-color-scheme: dark) {
  .form-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  }
 }
--- a/src/AddPage.tsx
+++ b/src/AddPage.tsx
@ -0,0 +1,59 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { invoke } from "@tauri-apps/api/core";
 import "./AddPage.css";
 function AddPage() {
  const navigate = useNavigate();
  const [title, setTitle] = useState("");
  const [date, setDate] = useState("");
  const handleSubmit = async () => {
    try {
      await invoke("add_anniversary", {
        title,
        startDate: date,
      });
      // 添加成功后返回主页
      navigate("/");
    } catch (error) {
      console.error("Failed to add anniversary:", error);
    }
  };
  return (
    <div className="container">
      <div className="nav-bar">
        <button className="back-button" onClick={() => navigate("/")}>
          <span className="back-icon">←</span>
          <span>Back</span>
        </button>
        <h1 className="page-title">Add New</h1>
      </div>
      <div className="form-card">
        <div className="form-group">
          <label>Title</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Enter anniversary title"
          />
        </div>
        <div className="form-group">
          <label>Start Date</label>
          <input
            type="date"
            value={date}
            onChange={(e) => setDate(e.target.value)}
          />
        </div>
        <button className="submit-button" onClick={handleSubmit}>
          Create Anniversary
        </button>
      </div>
    </div>
  );
 }
 export default AddPage;
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1 @@
 /* App.css */
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,36 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useEffect } from "react";
 import HomePage from "./HomePage";
 import DetailPage from "./DetailPage";
 import AddPage from "./AddPage";
 import "./themes.css";
 const THEMES = [
  "blue",
  "green", 
  "purple",
  "orange",
  "pink",
  "cyan",
  "dark",
  "gradient"
 ];
 function App() {
  useEffect(() => {
    const randomTheme = THEMES[Math.floor(Math.random() * THEMES.length)];
    document.documentElement.setAttribute('data-theme', randomTheme);
  }, []);
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/detail/:id" element={<DetailPage />} />
        <Route path="/add" element={<AddPage />} />
      </Routes>
    </BrowserRouter>
  );
 }
 export default App;
--- a/src/DetailPage.css
+++ b/src/DetailPage.css
@ -0,0 +1,79 @@
 .container {
  padding: 24px;
  background: var(--bg-secondary);
  min-height: 100vh;
  max-width: 800px;
  margin: 0 auto;
 }
 .nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
 }
 .back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 16px;
  cursor: pointer;
  padding: 8px 16px;
  transition: transform 0.2s ease;
 }
 .back-button:hover {
  transform: translateX(-4px);
 }
 .delete-button {
  background-color: var(--color-danger);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s ease;
 }
 .delete-button:hover {
  background-color: var(--color-danger-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.2);
 }
 .card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  text-align: center;
 }
 .title {
  font-size: 32px;
  color: var(--color-text);
  margin: 0 0 24px 0;
  font-weight: 600;
  text-align: center;
 }
 .days {
  font-size: 64px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 32px 0;
  line-height: 1;
 }
 .start-date {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-top: 16px;
 }
--- a/src/DetailPage.tsx
+++ b/src/DetailPage.tsx
@ -0,0 +1,66 @@
 import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { invoke } from "@tauri-apps/api/core";
 import "./DetailPage.css";
 interface Anniversary {
  id: number;
  title: string;
  start_date: string;
  days: number;
 }
 function DetailPage() {
  const { id } = useParams(); // 获取路由参数
  const navigate = useNavigate(); // 获取导航函数
  const [anniversary, setAnniversary] = useState<Anniversary>({
    id: 0,
    title: "",
    start_date: "",
    days: 0,
  });
  useEffect(() => {
    const getAnniversaryData = async () => {
      if (id) {
        const result = await invoke<Anniversary>("get_anniversary_by_id", {
          id: parseInt(id),
        });
        setAnniversary(result);
      }
    };
    getAnniversaryData();
  }, [id]);
  const handleDelete = async () => {
    if (id) {
      try {
        await invoke("delete_anniversary", { id: parseInt(id) });
        navigate("/"); // 删除成功后返回主页
      } catch (error) {
        console.error("Failed to delete anniversary:", error);
      }
    }
  };
  return (
    <div className="container">
      <div className="nav-bar">
        <button className="back-button" onClick={() => navigate("/")}>
          <span className="back-icon">←</span>
          <span>Back</span>
        </button>
        <button className="delete-button" onClick={handleDelete}>
          Delete
        </button>
      </div>
      <div className="card">
        <h1 className="title">{anniversary.title}</h1>
        <div className="days">{anniversary.days}</div>
        <div className="start-date">Start Date: {anniversary.start_date}</div>
      </div>
    </div>
  );
 }
 export default DetailPage;
--- a/src/HomePage.css
+++ b/src/HomePage.css
@ -0,0 +1,181 @@
 .container {
  padding: 16px;
  background: var(--bg-primary);
  min-height: 100vh;
  margin: 0 auto;
 }
 .header-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
  padding: 16px 0;
 }
 h1 {
  margin: 0;
  font-size: 28px;
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: 0.5px;
 }
 .add-button {
  position: absolute;
  right: 20px;
  background-color: var(--color-primary);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-primary);
 }
 .add-button:hover {
  background-color: var(--color-primary-hover);
  transform: scale(1.05);
  box-shadow: var(--shadow-primary);
 }
 .plus-icon {
  color: white;
  font-size: 24px;
  line-height: 1;
  display: block;
  margin-top: -2px;
 }
 .anniversary-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-width: 800px;
  margin: 0 auto;
 }
 .anniversary-card {
  background: var(--bg-card);
  padding: 16px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
 }
 .anniversary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
 }
 .anniversary-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--color-text);
 }
 .anniversary-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-secondary);
 }
 .days-count {
  font-size: 20px;
  color: var(--color-primary);
  font-weight: 600;
 }
 /* 桌面端样式 */
@media screen and (min-width: 768px) {
  .container {
    max-width: 1200px;
    padding: 24px;
  }
  .anniversary-list {
    padding: 0 20px;
  }
  .anniversary-card {
    padding: 20px;
  }
 }
 /* 移动端样式 */
@media screen and (max-width: 767px) {
  .container {
    padding: 12px;
  }
  h1 {
    font-size: 24px;
  }
  .add-button {
    width: 36px;
    height: 36px;
    right: 12px;
  }
  .plus-icon {
    font-size: 20px;
  }
  .anniversary-card {
    padding: 14px;
  }
  .anniversary-title {
    font-size: 16px;
  }
  .days-count {
    font-size: 18px;
  }
 }
 /* 针对特别窄的屏幕 */
@media screen and (max-width: 320px) {
  .container {
    padding: 8px;
  }
  h1 {
    font-size: 20px;
  }
  .add-button {
    width: 32px;
    height: 32px;
    right: 8px;
  }
  .plus-icon {
    font-size: 18px;
  }
  .anniversary-title {
    font-size: 14px;
  }
  .days-count {
    font-size: 16px;
  }
 }
 /* 确保所有元素都使用 border-box */
 * {
  box-sizing: border-box;
 }
--- a/src/HomePage.tsx
+++ b/src/HomePage.tsx
@ -0,0 +1,61 @@
 import { useState, useEffect } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { useNavigate } from "react-router-dom";
 import "./HomePage.css";
 interface Anniversary {
  id: number;
  title: string;
  start_date: string;
  days: number;
 }
 function HomePage() {
  const [anniversaries, setAnniversaries] = useState<Anniversary[]>([]);
  useEffect(() => {
    const loadAnniversaries = async () => {
      const result = await invoke<Anniversary[]>("get_anniversaries");
      setAnniversaries(result);
    };
    loadAnniversaries();
  }, []);
  // 获取导航函数
  const navigate = useNavigate();
  // 点击卡片时跳转到详情页
  const handleCardClick = (id: number) => {
    navigate(`/detail/${id}`); // 例如：/detail/1
  };
  return (
    <div className="container">
      <div className="header-bar">
        <h1>Count Down</h1>
        <button className="add-button" onClick={() => navigate("/add")}>
          <span className="plus-icon">+</span>
        </button>
      </div>
      <div className="anniversary-list">
        {anniversaries.map((item) => (
          <div
            key={item.id}
            className="anniversary-card"
            onClick={() => {
              handleCardClick(item.id);
            }}
          >
            <div className="anniversary-title">{item.title}</div>
            <div className="anniversary-info">
              <span className="days-count">{item.days}</span>
              <span className="start-date">{item.start_date}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
 }
 export default HomePage;
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 );
--- a/src/themes.css
+++ b/src/themes.css
@ -0,0 +1,153 @@
 /* 主题系统 - CSS变量定义 */
 /* 默认主题（蓝色） */
 :root[data-theme="blue"] {
  --bg-primary: #f5f5f5;
  --bg-secondary: #f8f9fa;
  --bg-card: #ffffff;
  --color-primary: #4a90e2;
  --color-primary-hover: #357abd;
  --color-text: #2c3e50;
  --color-text-secondary: #666;
  --color-text-muted: #6c757d;
  --color-border: #e9ecef;
  --color-danger: #ff4444;
  --color-danger-hover: #e60000;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(74, 144, 226, 0.2);
 }
 /* 绿色主题 */
 :root[data-theme="green"] {
  --bg-primary: #f0f8f0;
  --bg-secondary: #f5fbf5;
  --bg-card: #ffffff;
  --color-primary: #28a745;
  --color-primary-hover: #218838;
  --color-text: #2d5016;
  --color-text-secondary: #555;
  --color-text-muted: #6c7b6c;
  --color-border: #d4edda;
  --color-danger: #dc3545;
  --color-danger-hover: #c82333;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(40, 167, 69, 0.2);
 }
 /* 紫色主题 */
 :root[data-theme="purple"] {
  --bg-primary: #f8f5ff;
  --bg-secondary: #faf7ff;
  --bg-card: #ffffff;
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-text: #4c1d95;
  --color-text-secondary: #666;
  --color-text-muted: #7c6c95;
  --color-border: #e9d5ff;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(139, 92, 246, 0.2);
 }
 /* 橙色主题 */
 :root[data-theme="orange"] {
  --bg-primary: #fff7ed;
  --bg-secondary: #fffbf5;
  --bg-card: #ffffff;
  --color-primary: #f97316;
  --color-primary-hover: #ea580c;
  --color-text: #9a3412;
  --color-text-secondary: #666;
  --color-text-muted: #a16c3c;
  --color-border: #fed7aa;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(249, 115, 22, 0.2);
 }
 /* 粉色主题 */
 :root[data-theme="pink"] {
  --bg-primary: #fdf2f8;
  --bg-secondary: #fef7f0;
  --bg-card: #ffffff;
  --color-primary: #ec4899;
  --color-primary-hover: #db2777;
  --color-text: #831843;
  --color-text-secondary: #666;
  --color-text-muted: #a15a7a;
  --color-border: #f9a8d4;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(236, 72, 153, 0.2);
 }
 /* 青色主题 */
 :root[data-theme="cyan"] {
  --bg-primary: #ecfdf5;
  --bg-secondary: #f0fdfa;
  --bg-card: #ffffff;
  --color-primary: #06b6d4;
  --color-primary-hover: #0891b2;
  --color-text: #164e63;
  --color-text-secondary: #666;
  --color-text-muted: #4c7a7a;
  --color-border: #a7f3d0;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(6, 182, 212, 0.2);
 }
 /* 暗色主题 */
 :root[data-theme="dark"] {
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --bg-card: #374151;
  --color-primary: #60a5fa;
  --color-primary-hover: #3b82f6;
  --color-text: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-border: #4b5563;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 2px 8px rgba(96, 165, 250, 0.3);
 }
 /* 渐变主题 */
 :root[data-theme="gradient"] {
  --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --bg-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --bg-card: rgba(255, 255, 255, 0.95);
  --color-primary: #667eea;
  --color-primary-hover: #5a6fd8;
  --color-text: #2d3748;
  --color-text-secondary: #4a5568;
  --color-text-muted: #718096;
  --color-border: rgba(255, 255, 255, 0.3);
  --color-danger: #e53e3e;
  --color-danger-hover: #c53030;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 2px 8px rgba(102, 126, 234, 0.3);
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,25 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,10 @@
 {
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,32 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
  plugins: [react()],
  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  //
  // 1. prevent vite from obscuring rust errors
  clearScreen: false,
  // 2. tauri expects a fixed port, fail if that port is not available
  server: {
    port: 1420,
    strictPort: true,
    host: host || false,
    hmr: host
      ? {
          protocol: "ws",
          host,
          port: 1421,
        }
      : undefined,
    watch: {
      // 3. tell vite to ignore watching `src-tauri`
      ignored: ["**/src-tauri/**"],
    },
  },
 }));