update frontend

Makefile

@@ -0,0 +1,12 @@
+.PHONY: build run clean
+
+build:
+	cd backend && \
+	GOOS=linux GOARCH=amd64 go build -o ../bin/navigation-server
+
+run: build
+	./bin/navigation-server
+
+clean:
+	rm -f bin/navigation-server
+	rm -f data/navigation.db

README.md

@@ -1,2 +1,280 @@
+[TOC]
+
+
+
 # navigation-app
 
+from deepseek
+
+## 详细部署流程
+
+### 1. 开发环境准备
+
+1. **安装Go语言环境** (仅开发机需要):
+
+   bash
+
+   复制
+
+   ```
+   # Linux
+   sudo apt update && sudo apt install -y golang
+   
+   # Mac
+   brew install go
+   
+   # Windows
+   # 从 https://golang.org/dl/ 下载安装包
+   ```
+
+2. **初始化Go模块**:
+
+   bash
+
+   复制
+
+   ```
+   cd backend
+   go mod init navigation/backend
+   go mod tidy
+   ```
+
+### 2. 编译应用程序
+
+1. **编译Linux可执行文件**:
+
+   bash
+
+   复制
+
+   ```
+   make build
+   ```
+
+   这会在`bin/`目录下生成`navigation-server`二进制文件
+
+### 3. VPS部署步骤
+
+1. **上传文件到VPS**:
+
+   bash
+
+   复制
+
+   ```
+   scp -r bin/ navigation-server config/ frontend/ data/ user@your_vps_ip:/opt/navigation-app
+   ```
+
+2. **SSH登录VPS**:
+
+   bash
+
+   复制
+
+   ```
+   ssh user@your_vps_ip
+   ```
+
+3. **设置文件权限**:
+
+   bash
+
+   复制
+
+   ```
+   cd /opt/navigation-app
+   chmod +x bin/navigation-server
+   mkdir -p data
+   chmod 700 data
+   ```
+
+4. **运行应用程序** (测试运行):
+
+   bash
+
+   复制
+
+   ```
+   cd /opt/navigation-app
+   ./bin/navigation-server
+   ```
+
+5. **配置持久化运行** (使用systemd):
+
+   创建服务文件`/etc/systemd/system/navigation.service`:
+
+   ini
+
+   复制
+
+   ```
+   [Unit]
+   Description=Navigation Server
+   After=network.target
+   
+   [Service]
+   Type=simple
+   User=www-data
+   WorkingDirectory=/opt/navigation-app
+   ExecStart=/opt/navigation-app/bin/navigation-server
+   Restart=always
+   RestartSec=10
+   
+   [Install]
+   WantedBy=multi-user.target
+   ```
+
+   启用并启动服务:
+
+   bash
+
+   复制
+
+   ```
+   sudo systemctl daemon-reload
+   sudo systemctl enable navigation
+   sudo systemctl start navigation
+   ```
+
+6. **验证服务运行**:
+
+   bash
+
+   复制
+
+   ```
+   sudo systemctl status navigation
+   curl http://localhost:8080/api/sites
+   ```
+
+### 4. 配置反向代理 (可选，推荐)
+
+使用Nginx作为反向代理:
+
+1. **安装Nginx**:
+
+   bash
+
+   复制
+
+   ```
+   sudo apt update && sudo apt install -y nginx
+   ```
+
+2. **创建配置文件** `/etc/nginx/sites-available/navigation`:
+
+   nginx
+
+   复制
+
+   ```
+   server {
+       listen 80;
+       server_name yourdomain.com;
+   
+       location / {
+           proxy_pass http://127.0.0.1:8080;
+           proxy_set_header Host $host;
+           proxy_set_header X-Real-IP $remote_addr;
+           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+       }
+   }
+   ```
+
+3. **启用配置**:
+
+   bash
+
+   复制
+
+   ```
+   sudo ln -s /etc/nginx/sites-available/navigation /etc/nginx/sites-enabled/
+   sudo nginx -t
+   sudo systemctl reload nginx
+   ```
+
+4. **配置HTTPS (使用Let's Encrypt)**:
+
+   bash
+
+   复制
+
+   ```
+   sudo apt install -y certbot python3-certbot-nginx
+   sudo certbot --nginx -d yourdomain.com
+   ```
+
+## 维护与管理
+
+### 常用命令
+
+- **查看日志**:
+
+  bash
+
+  复制
+
+  ```
+  journalctl -u navigation -f
+  ```
+
+- **重启服务**:
+
+  bash
+
+  复制
+
+  ```
+  sudo systemctl restart navigation
+  ```
+
+- **备份数据库**:
+
+  bash
+
+  复制
+
+  ```
+  cp /opt/navigation-app/data/navigation.db /path/to/backup/navigation_$(date +%F).db
+  ```
+
+### 更新流程
+
+1. 本地修改代码后重新编译:
+
+   bash
+
+   复制
+
+   ```
+   make build
+   ```
+
+2. 上传新版本到VPS:
+
+   bash
+
+   复制
+
+   ```
+   scp bin/navigation-server user@your_vps_ip:/opt/navigation-app/bin/
+   ```
+
+3. 重启服务:
+
+   bash
+
+   复制
+
+   ```
+   ssh user@your_vps_ip
+   sudo systemctl restart navigation
+   ```
+
+这个方案提供了完整的、生产就绪的Go后端实现，具有以下优点：
+
+1. 单个静态二进制文件，部署简单
+2. 使用SQLite数据库，无需额外服务
+3. 完整的CRUD API实现
+4. 包含生产环境部署配置
+5. 易于维护和更新

backend/main.go

@@ -0,0 +1,447 @@
+package main
+
+import (
+	"database/sql"
+	"encoding/json"
+	"log"
+	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+	"time"
+
+	"github.com/dgrijalva/jwt-go"
+	_ "github.com/mattn/go-sqlite3"
+	"golang.org/x/crypto/bcrypt"
+	"gopkg.in/yaml.v2"
+)
+
+// 配置结构体
+type Config struct {
+	Server struct {
+		Port      string `yaml:"port"`
+		SecretKey string `yaml:"secret_key"`
+	} `yaml:"server"`
+	Database struct {
+		Path string `yaml:"path"`
+	} `yaml:"database"`
+	Admin struct {
+		Username string `yaml:"username"`
+		Password string `yaml:"password"`
+	} `yaml:"admin"`
+}
+
+// 网站结构体
+type Site struct {
+	ID       int    `json:"id"`
+	Name     string `json:"name"`
+	URL      string `json:"url"`
+	Icon     string `json:"icon,omitempty"`
+	Category string `json:"category"`
+	Order    int    `json:"order"`
+}
+
+// 登录凭据
+type Credentials struct {
+	Username string `json:"username"`
+	Password string `json:"password"`
+}
+
+// JWT声明
+type Claims struct {
+	Username string `json:"username"`
+	jwt.StandardClaims
+}
+
+// 全局变量
+var (
+	db     *sql.DB
+	config *Config
+)
+
+func main() {
+	// 加载配置
+	var err error
+	config, err = loadConfig("config/config.yaml")
+	if err != nil {
+		log.Fatalf("Error loading config: %v", err)
+	}
+
+	// 初始化数据库
+	err = initDB(config.Database.Path)
+	if err != nil {
+		log.Fatal(err)
+	}
+	defer db.Close()
+
+	// 设置路由
+	http.HandleFunc("/api/login", loginHandler)
+	http.HandleFunc("/api/validate", authMiddleware(validateHandler))
+	http.HandleFunc("/api/sites", sitesHandler)
+	http.HandleFunc("/api/sites/order", authMiddleware(updateSitesOrderHandler))
+	http.HandleFunc("/api/sites/add", authMiddleware(addSiteHandler))
+	http.HandleFunc("/api/sites/delete", authMiddleware(deleteSiteHandler))
+	http.HandleFunc("/api/export", authMiddleware(exportHandler))
+	http.HandleFunc("/api/import", authMiddleware(importHandler))
+
+	// 静态文件服务
+	fs := http.FileServer(http.Dir("../frontend"))
+	http.Handle("/", fs)
+
+	// 启动服务器
+	log.Printf("Server starting on :%s", config.Server.Port)
+	log.Fatal(http.ListenAndServe(":"+config.Server.Port, nil))
+}
+
+// 加载配置文件
+func loadConfig(path string) (*Config, error) {
+	cfg := &Config{}
+	file, err := os.Open(path)
+	if err != nil {
+		return nil, err
+	}
+	defer file.Close()
+
+	d := yaml.NewDecoder(file)
+	if err := d.Decode(&cfg); err != nil {
+		return nil, err
+	}
+
+	return cfg, nil
+}
+
+// 初始化数据库
+func initDB(dbPath string) error {
+	var err error
+	os.MkdirAll(filepath.Dir(dbPath), 0755)
+
+	db, err = sql.Open("sqlite3", dbPath)
+	if err != nil {
+		return err
+	}
+
+	// 创建网站表
+	_, err = db.Exec(`CREATE TABLE IF NOT EXISTS sites (
+		id INTEGER PRIMARY KEY AUTOINCREMENT,
+		name TEXT NOT NULL,
+		url TEXT NOT NULL,
+		icon TEXT,
+		category TEXT NOT NULL,
+		sort_order INTEGER DEFAULT 0
+	)`)
+	if err != nil {
+		return err
+	}
+
+	// 创建管理员表
+	_, err = db.Exec(`CREATE TABLE IF NOT EXISTS admin_users (
+		id INTEGER PRIMARY KEY AUTOINCREMENT,
+		username TEXT UNIQUE NOT NULL,
+		password TEXT NOT NULL
+	)`)
+	if err != nil {
+		return err
+	}
+
+	// 初始化管理员账户
+	hashedPassword, err := bcrypt.GenerateFromPassword([]byte(config.Admin.Password), bcrypt.DefaultCost)
+	if err != nil {
+		return err
+	}
+
+	_, err = db.Exec("INSERT OR IGNORE INTO admin_users (username, password) VALUES (?, ?)", 
+		config.Admin.Username, string(hashedPassword))
+	return err
+}
+
+// 登录处理器
+func loginHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var creds Credentials
+	if err := json.NewDecoder(r.Body).Decode(&creds); err != nil {
+		http.Error(w, "Bad request", http.StatusBadRequest)
+		return
+	}
+
+	// 验证用户
+	var storedPassword string
+	err := db.QueryRow("SELECT password FROM admin_users WHERE username = ?", creds.Username).Scan(&storedPassword)
+	if err != nil {
+		http.Error(w, "Invalid credentials", http.StatusUnauthorized)
+		return
+	}
+
+	// 验证密码
+	if err := bcrypt.CompareHashAndPassword([]byte(storedPassword), []byte(creds.Password)); err != nil {
+		http.Error(w, "Invalid credentials", http.StatusUnauthorized)
+		return
+	}
+
+	// 创建JWT令牌
+	expirationTime := time.Now().Add(24 * time.Hour)
+	claims := &Claims{
+		Username: creds.Username,
+		StandardClaims: jwt.StandardClaims{
+			ExpiresAt: expirationTime.Unix(),
+		},
+	}
+
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
+	tokenString, err := token.SignedString([]byte(config.Server.SecretKey))
+	if err != nil {
+		http.Error(w, "Error generating token", http.StatusInternalServerError)
+		return
+	}
+
+	// 返回令牌
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]string{
+		"token": tokenString,
+	})
+}
+
+// 验证处理器
+func validateHandler(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]bool{
+		"valid": true,
+	})
+}
+
+// 认证中间件
+func authMiddleware(next http.HandlerFunc) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		authHeader := r.Header.Get("Authorization")
+		if authHeader == "" {
+			http.Error(w, "Authorization header required", http.StatusUnauthorized)
+			return
+		}
+
+		tokenString := strings.TrimPrefix(authHeader, "Bearer ")
+		claims := &Claims{}
+
+		token, err := jwt.ParseWithClaims(tokenString, claims, func(token *jwt.Token) (interface{}, error) {
+			return []byte(config.Server.SecretKey), nil
+		})
+
+		if err != nil {
+			if err == jwt.ErrSignatureInvalid {
+				http.Error(w, "Invalid token signature", http.StatusUnauthorized)
+				return
+			}
+			http.Error(w, "Invalid token", http.StatusUnauthorized)
+			return
+		}
+
+		if !token.Valid {
+			http.Error(w, "Invalid token", http.StatusUnauthorized)
+			return
+		}
+
+		next(w, r)
+	}
+}
+
+// 获取所有网站
+func sitesHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "GET" {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	rows, err := db.Query("SELECT id, name, url, icon, category, sort_order FROM sites ORDER BY category, sort_order, name")
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	defer rows.Close()
+
+	var sites []Site
+	for rows.Next() {
+		var s Site
+		if err := rows.Scan(&s.ID, &s.Name, &s.URL, &s.Icon, &s.Category, &s.Order); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		sites = append(sites, s)
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(sites)
+}
+
+// 更新网站排序
+func updateSitesOrderHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var sites []Site
+	if err := json.NewDecoder(r.Body).Decode(&sites); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	tx, err := db.Begin()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	for _, site := range sites {
+		_, err = tx.Exec("UPDATE sites SET sort_order = ? WHERE id = ?", site.Order, site.ID)
+		if err != nil {
+			tx.Rollback()
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+}
+
+// 添加网站
+func addSiteHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var s Site
+	if err := json.NewDecoder(r.Body).Decode(&s); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	// 验证数据
+	if s.Name == "" || s.URL == "" || s.Category == "" {
+		http.Error(w, "Name, URL and Category are required", http.StatusBadRequest)
+		return
+	}
+
+	// 插入数据库
+	res, err := db.Exec("INSERT INTO sites (name, url, icon, category, sort_order) VALUES (?, ?, ?, ?, ?)",
+		s.Name, s.URL, s.Icon, s.Category, s.Order)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	id, _ := res.LastInsertId()
+	s.ID = int(id)
+
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusCreated)
+	json.NewEncoder(w).Encode(s)
+}
+
+// 删除网站
+func deleteSiteHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var request struct {
+		ID int `json:"id"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	_, err := db.Exec("DELETE FROM sites WHERE id = ?", request.ID)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(map[string]string{"status": "success"})
+}
+
+// 导出数据
+func exportHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "GET" {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	rows, err := db.Query("SELECT id, name, url, icon, category, sort_order FROM sites ORDER BY category, sort_order, name")
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	defer rows.Close()
+
+	var sites []Site
+	for rows.Next() {
+		var s Site
+		if err := rows.Scan(&s.ID, &s.Name, &s.URL, &s.Icon, &s.Category, &s.Order); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		sites = append(sites, s)
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Content-Disposition", "attachment; filename=navigation-sites.json")
+	json.NewEncoder(w).Encode(sites)
+}
+
+// 导入数据
+func importHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "POST" {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var sites []Site
+	if err := json.NewDecoder(r.Body).Decode(&sites); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	tx, err := db.Begin()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// 清空现有数据
+	_, err = tx.Exec("DELETE FROM sites")
+	if err != nil {
+		tx.Rollback()
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// 插入新数据
+	for _, site := range sites {
+		_, err = tx.Exec("INSERT INTO sites (name, url, icon, category, sort_order) VALUES (?, ?, ?, ?, ?)",
+			site.Name, site.URL, site.Icon, site.Category, site.Order)
+		if err != nil {
+			tx.Rollback()
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(map[string]string{"status": "success"})
+}

config/config.yaml

@@ -0,0 +1,10 @@
+server:
+  port: "8080"
+  secret_key: "6Sc1OTEaU3n9t80ijBptYYYSEwPx2Y5t"  # 用于JWT签名的密钥
+
+database:
+  path: "data/navigation.db"
+
+admin:
+  username: "admin"
+  password: "123456"  # 首次运行后请修改

frontend/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>我的导航网站</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="header-left">
+                <h1><i class="fas fa-compass"></i> 我的导航</h1>
+                <div class="search-box">
+                    <input type="text" id="searchInput" placeholder="搜索网站...">
+                    <i class="fas fa-search"></i>
+                </div>
+            </div>
+            <div class="header-right">
+                <button id="themeBtn"><i class="fas fa-moon"></i></button>
+                <button id="loginBtn"><i class="fas fa-sign-in-alt"></i> 登录</button>
+                <button id="logoutBtn" style="display: none;"><i class="fas fa-sign-out-alt"></i> 注销</button>
+                <!-- 管理员功能默认隐藏 -->
+                <button id="addSiteBtn" style="display: none;"><i class="fas fa-plus"></i> 添加</button>
+                <button id="exportBtn" style="display: none;"><i class="fas fa-file-export"></i> 导出</button>
+                <button id="importBtn" style="display: none;"><i class="fas fa-file-import"></i> 导入</button>
+                <input type="file" id="importFile" style="display: none;" accept=".json">
+            </div>
+        </header>
+        
+        <div class="categories" id="categories">
+            <div class="loading">加载中...</div>
+        </div>
+        
+        <!-- 添加网站模态框 -->
+        <div class="modal" id="addSiteModal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <h2><i class="fas fa-plus-circle"></i> 添加新网站</h2>
+                <form id="addSiteForm">
+                    <div class="form-group">
+                        <label for="siteName"><i class="fas fa-heading"></i> 网站名称</label>
+                        <input type="text" id="siteName" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="siteUrl"><i class="fas fa-link"></i> 网站URL</label>
+                        <input type="url" id="siteUrl" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="siteCategory"><i class="fas fa-tag"></i> 分类</label>
+                        <input type="text" id="siteCategory" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="siteIcon"><i class="fas fa-image"></i> 图标URL (可选)</label>
+                        <input type="url" id="siteIcon" placeholder="https://example.com/favicon.ico">
+                    </div>
+                    <button type="submit"><i class="fas fa-save"></i> 保存</button>
+                </form>
+            </div>
+        </div>
+        
+        <!-- 登录模态框 -->
+        <div class="modal" id="loginModal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <h2><i class="fas fa-sign-in-alt"></i> 管理员登录</h2>
+                <form id="loginForm">
+                    <div class="form-group">
+                        <label for="username"><i class="fas fa-user"></i> 用户名</label>
+                        <input type="text" id="username" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="password"><i class="fas fa-lock"></i> 密码</label>
+                        <input type="password" id="password" required>
+                    </div>
+                    <button type="submit"><i class="fas fa-sign-in-alt"></i> 登录</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

frontend/script.js

@@ -0,0 +1,488 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM元素
+    const categoriesContainer = document.getElementById('categories');
+    const addSiteModal = document.getElementById('addSiteModal');
+    const loginModal = document.getElementById('loginModal');
+    const addSiteBtn = document.getElementById('addSiteBtn');
+    const loginBtn = document.getElementById('loginBtn');
+    const logoutBtn = document.getElementById('logoutBtn');
+    const exportBtn = document.getElementById('exportBtn');
+    const importBtn = document.getElementById('importBtn');
+    const closeButtons = document.querySelectorAll('.close');
+    const addSiteForm = document.getElementById('addSiteForm');
+    const loginForm = document.getElementById('loginForm');
+    const searchInput = document.getElementById('searchInput');
+    const themeBtn = document.getElementById('themeBtn');
+    const importFile = document.getElementById('importFile');
+
+    // 状态变量
+    let authToken = localStorage.getItem('authToken');
+    let isAdmin = false;
+    let currentTheme = localStorage.getItem('theme') || 'light';
+    
+    // 初始化
+    initTheme();
+    checkAuthStatus();
+    setupEventListeners();
+    loadSites();
+
+    // 初始化主题
+    function initTheme() {
+        document.documentElement.setAttribute('data-theme', currentTheme);
+        themeBtn.innerHTML = currentTheme === 'light' ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
+    }
+
+    // 检查认证状态
+    async function checkAuthStatus() {
+        if (authToken) {
+            try {
+                const response = await fetchWithAuth('/api/validate');
+                if (response.ok) {
+                    isAdmin = true;
+                    setupAdminFeatures();
+                }
+            } catch (error) {
+                console.error('Auth check failed:', error);
+                logout();
+            }
+        }
+        updateAuthUI();
+    }
+
+    // 设置管理员功能
+    function setupAdminFeatures() {
+        // 显示管理按钮
+        addSiteBtn.style.display = 'flex';
+        exportBtn.style.display = 'flex';
+        importBtn.style.display = 'flex';
+        
+        // 设置拖拽排序
+        setupDragAndDrop();
+    }
+
+    // 更新认证UI
+    function updateAuthUI() {
+        if (isAdmin) {
+            loginBtn.style.display = 'none';
+            logoutBtn.style.display = 'flex';
+        } else {
+            loginBtn.style.display = 'flex';
+            logoutBtn.style.display = 'none';
+        }
+    }
+
+    // 设置拖拽排序
+    function setupDragAndDrop() {
+        let draggedItem = null;
+
+        // 拖拽开始
+        const handleDragStart = (e) => {
+            draggedItem = e.target;
+            e.target.classList.add('dragging');
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/html', e.target.innerHTML);
+        };
+
+        // 拖拽结束
+        const handleDragEnd = () => {
+            draggedItem.classList.remove('dragging');
+            draggedItem = null;
+        };
+
+        // 拖拽经过
+        const handleDragOver = (e) => {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            
+            const afterElement = getDragAfterElement(categoriesContainer, e.clientY);
+            if (afterElement == null) {
+                categoriesContainer.appendChild(draggedItem);
+            } else {
+                categoriesContainer.insertBefore(draggedItem, afterElement);
+            }
+        };
+
+        // 获取拖拽后的元素
+        const getDragAfterElement = (container, y) => {
+            const draggableElements = [...container.querySelectorAll('.site:not(.dragging)')];
+            
+            return draggableElements.reduce((closest, child) => {
+                const box = child.getBoundingClientRect();
+                const offset = y - box.top - box.height / 2;
+                if (offset < 0 && offset > closest.offset) {
+                    return { offset: offset, element: child };
+                } else {
+                    return closest;
+                }
+            }, { offset: Number.NEGATIVE_INFINITY }).element;
+        };
+
+        // 为所有网站添加拖拽事件
+        document.querySelectorAll('.site').forEach(site => {
+            site.draggable = isAdmin;
+            site.addEventListener('dragstart', handleDragStart);
+            site.addEventListener('dragend', handleDragEnd);
+        });
+
+        categoriesContainer.addEventListener('dragover', handleDragOver);
+        categoriesContainer.addEventListener('dragend', async () => {
+            // 更新排序
+            const sites = [];
+            document.querySelectorAll('.site').forEach((siteEl, index) => {
+                sites.push({
+                    id: parseInt(siteEl.dataset.id),
+                    order: index
+                });
+            });
+            
+            try {
+                const response = await fetchWithAuth('/api/sites/order', {
+                    method: 'POST',
+                    body: JSON.stringify(sites)
+                });
+                
+                if (!response.ok) throw new Error('Failed to update order');
+            } catch (error) {
+                console.error('Error updating order:', error);
+                alert('排序更新失败');
+            }
+        });
+    }
+
+    // 设置事件监听器
+    function setupEventListeners() {
+        // 主题切换
+        themeBtn.addEventListener('click', toggleTheme);
+        
+        // 打开添加网站模态框
+        addSiteBtn.addEventListener('click', () => addSiteModal.style.display = 'block');
+        
+        // 打开登录模态框
+        loginBtn.addEventListener('click', () => loginModal.style.display = 'block');
+        
+        // 注销
+        logoutBtn.addEventListener('click', logout);
+        
+        // 关闭模态框
+        closeButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                this.closest('.modal').style.display = 'none';
+            });
+        });
+        
+        // 点击模态框外部关闭
+        window.addEventListener('click', (e) => {
+            if (e.target.classList.contains('modal')) {
+                e.target.style.display = 'none';
+            }
+        });
+        
+        // 添加网站表单提交
+        addSiteForm.addEventListener('submit', handleAddSite);
+        
+        // 登录表单提交
+        loginForm.addEventListener('submit', handleLogin);
+        
+        // 搜索功能
+        searchInput.addEventListener('input', handleSearch);
+        
+        // 导出数据
+        exportBtn.addEventListener('click', handleExport);
+        
+        // 导入数据
+        importBtn.addEventListener('click', () => importFile.click());
+        importFile.addEventListener('change', handleImport);
+    }
+
+    // 添加网站处理
+    async function handleAddSite(e) {
+        e.preventDefault();
+        
+        const name = document.getElementById('siteName').value.trim();
+        let url = document.getElementById('siteUrl').value.trim();
+        const category = document.getElementById('siteCategory').value.trim();
+        const icon = document.getElementById('siteIcon').value.trim();
+        
+        // 确保URL有协议
+        if (!url.startsWith('http://') && !url.startsWith('https://')) {
+            url = 'https://' + url;
+        }
+        
+        try {
+            const response = await fetchWithAuth('/api/sites/add', {
+                method: 'POST',
+                body: JSON.stringify({
+                    name,
+                    url,
+                    icon: icon || null,
+                    category,
+                    order: 0
+                })
+            });
+            
+            if (!response.ok) throw new Error('添加失败');
+            
+            // 清空表单并关闭模态框
+            addSiteForm.reset();
+            addSiteModal.style.display = 'none';
+            
+            // 重新加载数据
+            loadSites();
+        } catch (error) {
+            console.error('Error:', error);
+            alert('添加网站时出错: ' + error.message);
+        }
+    }
+
+    // 登录处理
+    async function handleLogin(e) {
+        e.preventDefault();
+        const username = document.getElementById('username').value.trim();
+        const password = document.getElementById('password').value.trim();
+        
+        try {
+            const response = await fetch('/api/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ username, password })
+            });
+            
+            if (!response.ok) throw new Error('登录失败');
+            
+            const data = await response.json();
+            authToken = data.token;
+            localStorage.setItem('authToken', authToken);
+            isAdmin = true;
+            
+            loginModal.style.display = 'none';
+            loginForm.reset();
+            setupAdminFeatures();
+            updateAuthUI();
+            loadSites();
+        } catch (error) {
+            console.error('Login error:', error);
+            alert('登录失败: ' + error.message);
+        }
+    }
+
+    // 注销处理
+    function logout() {
+        localStorage.removeItem('authToken');
+        authToken = null;
+        isAdmin = false;
+        updateAuthUI();
+        window.location.reload();
+    }
+
+    // 搜索处理
+    function handleSearch(e) {
+        const searchTerm = e.target.value.toLowerCase();
+        document.querySelectorAll('.site').forEach(site => {
+            const name = site.getAttribute('data-name') || '';
+            const url = site.getAttribute('data-url') || '';
+            if (name.includes(searchTerm) || url.includes(searchTerm)) {
+                site.style.display = 'flex';
+            } else {
+                site.style.display = 'none';
+            }
+        });
+    }
+
+    // 导出处理
+    async function handleExport() {
+        try {
+            const response = await fetchWithAuth('/api/export');
+            if (!response.ok) throw new Error('导出失败');
+            
+            const data = await response.json();
+            const dataStr = JSON.stringify(data, null, 2);
+            const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+            
+            const exportFileDefaultName = `导航数据_${new Date().toISOString().slice(0,10)}.json`;
+            
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', dataUri);
+            linkElement.setAttribute('download', exportFileDefaultName);
+            linkElement.click();
+        } catch (error) {
+            console.error('导出失败:', error);
+            alert('导出数据时出错');
+        }
+    }
+
+    // 导入处理
+    async function handleImport(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+        
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+            try {
+                const importedData = JSON.parse(e.target.result);
+                
+                if (confirm('确定要导入数据吗？这将覆盖当前所有导航数据。')) {
+                    const response = await fetchWithAuth('/api/import', {
+                        method: 'POST',
+                        body: JSON.stringify(importedData)
+                    });
+                    
+                    if (!response.ok) throw new Error('导入失败');
+                    
+                    alert('数据导入成功！');
+                    loadSites();
+                }
+            } catch (error) {
+                console.error('导入失败:', error);
+                alert('导入数据时出错: ' + error.message);
+            }
+        };
+        reader.readAsText(file);
+        
+        // 清空input，以便可以重复导入同一文件
+        e.target.value = '';
+    }
+
+    // 切换主题
+    function toggleTheme() {
+        currentTheme = currentTheme === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', currentTheme);
+        localStorage.setItem('theme', currentTheme);
+        themeBtn.innerHTML = currentTheme === 'light' ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
+    }
+
+    // 带认证的fetch
+    async function fetchWithAuth(url, options = {}) {
+        const headers = {
+            'Content-Type': 'application/json',
+            ...options.headers
+        };
+        
+        if (authToken) {
+            headers['Authorization'] = `Bearer ${authToken}`;
+        }
+        
+        return fetch(url, {
+            ...options,
+            headers
+        });
+    }
+
+    // 加载网站数据
+    async function loadSites() {
+        categoriesContainer.innerHTML = '<div class="loading">加载中...</div>';
+        
+        try {
+            const response = await fetchWithAuth('/api/sites');
+            if (!response.ok) throw new Error('Network response was not ok');
+            
+            const sites = await response.json();
+            renderSites(sites);
+        } catch (error) {
+            console.error('Error loading sites:', error);
+            categoriesContainer.innerHTML = '<div class="error">加载失败，请刷新重试</div>';
+        }
+    }
+
+    // 渲染网站
+    function renderSites(sites) {
+        if (!sites || sites.length === 0) {
+            categoriesContainer.innerHTML = '<p>暂无网站，请添加您的第一个网站。</p>';
+            return;
+        }
+        
+        // 按分类分组
+        const categories = {};
+        sites.forEach(site => {
+            if (!categories[site.category]) {
+                categories[site.category] = [];
+            }
+            categories[site.category].push(site);
+        });
+        
+        // 清空容器
+        categoriesContainer.innerHTML = '';
+        
+        // 渲染每个分类
+        for (const category in categories) {
+            const categoryElement = document.createElement('div');
+            categoryElement.className = 'category';
+            
+            const categoryTitle = document.createElement('h2');
+            categoryTitle.innerHTML = `<i class="fas fa-folder"></i> ${category}`;
+            
+            const sitesContainer = document.createElement('div');
+            sitesContainer.className = 'sites';
+            
+            categories[category].forEach(site => {
+                const siteElement = document.createElement('a');
+                siteElement.className = 'site';
+                siteElement.href = site.url;
+                siteElement.target = '_blank';
+                siteElement.dataset.id = site.id;
+                siteElement.dataset.name = site.name.toLowerCase();
+                siteElement.dataset.url = site.url.toLowerCase();
+                siteElement.draggable = isAdmin;
+                
+                const iconElement = document.createElement('div');
+                iconElement.className = 'site-icon';
+                
+                if (site.icon) {
+                    const img = document.createElement('img');
+                    img.src = site.icon;
+                    img.alt = site.name;
+                    iconElement.appendChild(img);
+                } else {
+                    iconElement.textContent = site.name.charAt(0).toUpperCase();
+                }
+                
+                const nameElement = document.createElement('span');
+                nameElement.className = 'site-name';
+                nameElement.textContent = site.name;
+                
+                // 管理员功能：删除按钮
+                if (isAdmin) {
+                    const deleteBtn = document.createElement('button');
+                    deleteBtn.className = 'delete-btn';
+                    deleteBtn.innerHTML = '×';
+                    deleteBtn.addEventListener('click', async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (confirm(`确定要删除 "${site.name}" 吗？`)) {
+                            try {
+                                const response = await fetchWithAuth('/api/sites/delete', {
+                                    method: 'POST',
+                                    body: JSON.stringify({ id: site.id })
+                                });
+                                
+                                if (response.ok) {
+                                    loadSites();
+                                } else {
+                                    throw new Error('删除失败');
+                                }
+                            } catch (error) {
+                                console.error('Error deleting site:', error);
+                                alert('删除网站时出错');
+                            }
+                        }
+                    });
+                    siteElement.appendChild(deleteBtn);
+                }
+                
+                siteElement.appendChild(iconElement);
+                siteElement.appendChild(nameElement);
+                sitesContainer.appendChild(siteElement);
+            });
+            
+            categoryElement.appendChild(categoryTitle);
+            categoryElement.appendChild(sitesContainer);
+            categoriesContainer.appendChild(categoryElement);
+        }
+        
+        // 如果是管理员，设置拖拽功能
+        if (isAdmin) {
+            setupDragAndDrop();
+        }
+    }
+});

frontend/styles.css

@@ -0,0 +1,360 @@
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2ecc71;
+    --danger-color: #e74c3c;
+    --warning-color: #f39c12;
+    --text-color: #333;
+    --bg-color: #f5f5f5;
+    --card-color: #fff;
+    --border-color: #ddd;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+    --primary-color: #2980b9;
+    --secondary-color: #27ae60;
+    --danger-color: #c0392b;
+    --warning-color: #d35400;
+    --text-color: #f5f5f5;
+    --bg-color: #121212;
+    --card-color: #1e1e1e;
+    --border-color: #333;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Arial', sans-serif;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid var(--border-color);
+    flex-wrap: wrap;
+}
+
+.header-left, .header-right {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+
+h1 {
+    font-size: 2rem;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.search-box {
+    position: relative;
+    min-width: 250px;
+}
+
+.search-box input {
+    width: 100%;
+    padding: 8px 15px 8px 35px;
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    background-color: var(--card-color);
+    color: var(--text-color);
+}
+
+.search-box i {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-color);
+    opacity: 0.7;
+}
+
+button {
+    padding: 8px 16px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.9rem;
+}
+
+button:hover {
+    opacity: 0.9;
+}
+
+button i {
+    font-size: 0.9rem;
+}
+
+#loginBtn, #logoutBtn {
+    background-color: var(--secondary-color);
+}
+
+#logoutBtn {
+    background-color: var(--warning-color);
+}
+
+.loading, .error {
+    text-align: center;
+    padding: 20px;
+    color: var(--primary-color);
+}
+
+.error {
+    color: var(--danger-color);
+}
+
+.categories {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.category {
+    background-color: var(--card-color);
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 5px var(--shadow-color);
+}
+
+.category h2 {
+    margin-bottom: 15px;
+    color: var(--primary-color);
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.sites {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 15px;
+}
+
+.site {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: var(--text-color);
+    transition: all 0.2s;
+    position: relative;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: var(--bg-color);
+}
+
+.site:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px var(--shadow-color);
+}
+
+.site-icon {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 8px;
+    border-radius: 50%;
+    object-fit: cover;
+    background-color: var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: var(--primary-color);
+}
+
+.site-icon img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.site-name {
+    text-align: center;
+    font-size: 0.9rem;
+    word-break: break-word;
+    width: 100%;
+}
+
+.delete-btn {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background-color: var(--danger-color);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    font-size: 12px;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.site:hover .delete-btn {
+    display: flex;
+}
+
+/* 拖拽相关样式 */
+.site[draggable="true"] {
+    cursor: grab;
+}
+
+.site[draggable="true"]:active {
+    cursor: grabbing;
+}
+
+.site.dragging {
+    opacity: 0.5;
+    background-color: var(--primary-color);
+}
+
+/* 模态框样式 */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background-color: var(--card-color);
+    margin: 10% auto;
+    padding: 25px;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 4px 8px var(--shadow-color);
+    position: relative;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.modal h2 {
+    margin-bottom: 20px;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.close {
+    position: absolute;
+    top: 15px;
+    right: 20px;
+    font-size: 28px;
+    font-weight: bold;
+    color: var(--text-color);
+    cursor: pointer;
+    opacity: 0.7;
+}
+
+.close:hover {
+    opacity: 1;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+form button {
+    background-color: var(--secondary-color);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+form button:hover {
+    opacity: 0.9;
+}
+
+@media (max-width: 768px) {
+    header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 15px;
+    }
+    
+    .header-left, .header-right {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 15px;
+    }
+    
+    .search-box {
+        width: 100%;
+    }
+    
+    .header-right button {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .sites {
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    }
+    
+    .modal-content {
+        margin: 20% auto;
+    }
+}

go.mod

@@ -0,0 +1,8 @@
+module navigation/backend
+
+go 1.24.1
+
+require (
+	github.com/mattn/go-sqlite3 v1.14.24
+	gopkg.in/yaml.v2 v2.4.0
+)

go.sum

@@ -0,0 +1,6 @@
+github.com/mattn/go-sqlite3 v1.14.24 h1:tpSp2G2KyMnnQu99ngJ47EIkWVmliIizyZBfPrBWDRM=
+github.com/mattn/go-sqlite3 v1.14.24/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.4.0 h1:D8xgwECY7CYvx+Y2n4sBz93Jn9JRvxdiyyo8CTfuKaY=
+gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=