yukina/src/
├── pages/admin/
│   ├── login.astro          # 登录页面
│   ├── dashboard.astro      # 管理面板主页
│   └── editor/
│       ├── new.astro        # 新建文章页面
│       └── [slug].astro     # 编辑文章页面
├── components/admin/
│   ├── Editor.svelte        # Monaco编辑器组件
│   └── PostTable.svelte     # 文章管理表格
├── layouts/
│   └── AdminLayout.astro    # 管理面板布局
└── services/
    ├── apiClient.ts         # API客户端
    ├── authService.ts       # 认证服务
    └── postService.ts       # 文章服务

class AuthService {
  private tokenKey = 'admin_token';

  async login(credentials: LoginCredentials): Promise<boolean> {
    const formData = new FormData();
    formData.append('username', credentials.username);
    formData.append('password', credentials.password);

    const response = await fetch('http://localhost:8000/token', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      const data: AuthResponse = await response.json();
      this.setToken(data.access_token);
      return true;
    }
    return false;
  }

  getAuthHeader(): string | null {
    const token = this.getToken();
    return token ? `Bearer ${token}` : null;
  }
}

class ApiClient {
  private baseURL = 'http://localhost:8000';

  private async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
    const headers: Record<string, string> = {
      'Content-Type': 'application/json',
      ...options.headers as Record<string, string>,
    };

    // 自动添加认证头
    const authHeader = authService.getAuthHeader();
    if (authHeader) {
      headers['Authorization'] = authHeader;
    }

    const response = await fetch(`${this.baseURL}${endpoint}`, {
      ...options,
      headers,
    });

    // 处理认证失败
    if (response.status === 401) {
      authService.logout();
      throw new Error('Authentication failed, please login again');
    }

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
    }

    return await response.json();
  }
}

// CDN加载Monaco Editor
function loadMonacoFromCDN() {
  return new Promise((resolve, reject) => {
    if (window.monaco) {
      resolve(window.monaco);
      return;
    }

    // 加载CSS
    const cssLink = document.createElement('link');
    cssLink.rel = 'stylesheet';
    cssLink.href = 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.css';
    document.head.appendChild(cssLink);

    // 加载JS
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js';
    script.onload = () => {
      window.require.config({
        paths: { vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' }
      });
      window.require(['vs/editor/editor.main'], () => {
        resolve(window.monaco);
      });
    };
    document.head.appendChild(script);
  });
}

// 创建编辑器实例
editor = monaco.editor.create(editorContainer, {
  value: value,
  language: 'markdown',
  theme: 'vs-dark',
  automaticLayout: true,
  wordWrap: 'on',
  fontSize: 14,
  minimap: { enabled: !isMobile },
  scrollBeyondLastLine: false,
  folding: true,
  lineNumbers: 'on',
  renderWhitespace: 'boundary',
  bracketPairColorization: { enabled: true }
});

// 响应式数据过滤
$: filteredPosts = posts.filter(post => {
  const matchesSearch = !searchTerm ||
    post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    post.tags?.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));

  const matchesCategory = !selectedCategory ||
    `${post.first_level_category}/${post.second_level_category}` === selectedCategory;

  return matchesSearch && matchesCategory;
});

// 动态分类生成
$: categories = [...new Set(posts.map(post =>
  `${post.first_level_category}/${post.second_level_category}`
))].sort();

// 文章删除确认
async function confirmDelete() {
  if (!postToDelete) return;

  try {
    await postService.deletePost(postToDelete.slug);
    posts = posts.filter(p => p.slug !== postToDelete.slug);
    showDeleteModal = false;
  } catch (err) {
    error = 'Failed to delete post: ' + (err.message || 'Unknown error');
  }
}

# 原始实现 - 依赖外部 Node.js 脚本
def create_post(post_data: Dict[str, Any]) -> bool:
    result = _call_nodejs_script("create", node_data)
    # ... 容易因环境问题失败

# 简化实现 - 纯 Python 处理，无外部依赖
def create_post(post_data: Dict[str, Any]) -> bool:
    try:
        # 1. 根据标题生成文件名 (slug)
        slug = _generate_slug(post_data['title'])
        posts_dir = Path(settings.ASTRO_CONTENT_PATH)
        file_path = posts_dir / f"{slug}.md"

        # 2. 在内存中拼接 Frontmatter 和正文内容
        content_lines = ['---']
        for key, value in frontmatter_data.items():
            content_lines.append(f'{key}: "{value}"')
        content_lines.extend(['---', '', post_data['content']])

        # 3. 直接使用 Python 的文件操作写入 .md 文件
        with open(file_path, 'w', encoding='utf-8') as f:
            f.write('\n'.join(content_lines))
        return True
    except Exception as e:
        print(f"Error creating post: {e}")
        return False

# 问题代码 - 简单的字符串拼接，未处理类型
title: 1                    # 数字，但 Astro Schema 期望是字符串
published: "2025-01-20"     # 带引号的字符串，但 Schema 期望是日期类型
draft: False                # Python 的布尔值，YAML 无法正确解析

# 修复代码 - 增加一个智能的格式化函数
def format_frontmatter_value(key, value):
    if isinstance(value, list):
        # 列表转换为 JSON 数组字符串
        return f'{key}: {json.dumps(value, ensure_ascii=False)}'
    elif isinstance(value, bool):
        # Python 布尔值转为 YAML 的小写字符串
        return f'{key}: {str(value).lower()}'
    elif key == 'published' and isinstance(value, str):
        # 日期类型不加引号，让 YAML 解析器正确识别
        return f'{key}: {value}'
    elif isinstance(value, str):
        # 普通字符串加上引号，防止特殊字符问题
        return f'{key}: "{value}"'
    else:
        # 其他类型（如数字）直接输出
        return f'{key}: {value}'

// 问题代码 - 返回空数组，Astro 不会生成任何静态页面
export async function getStaticPaths() {
  return [];
}

// 修复代码 - 遍历所有文章，为每篇文章生成一个静态路由
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  try {
    // 1. 获取所有文章的集合
    const posts = await getCollection('posts');

    // 2. 遍历集合，为每篇文章创建一个路由对象
    return posts.map((post) => ({
      params: { slug: post.id }, // URL 参数，例如 /admin/editor/my-first-post
      props: { post },           // 传递给页面的数据
    }));
  } catch (error) {
    console.error('Error generating static paths for editor:', error);
    return []; // 出错时返回空，防止构建失败
  }
}

// services/apiClient.ts
class ApiClient {
  private async request<T>() {
    try {
      const response = await fetch(url, config);

      // 针对认证失败的特定处理
      if (response.status === 401) {
        authService.logout();  // 自动登出
        throw new Error('Authentication failed');
      }

      // 针对其他HTTP错误的通用处理
      if (!response.ok) {
        throw new Error(`HTTP Error: ${response.status}`);
      }

      return await response.json();
    } catch (error) {
      // 记录错误并向上层传播，供UI显示
      console.error('API request failed:', error);
      throw error;
    }
  }
}

// 定义严格的数据接口
export interface PostMetadata {
  slug: string;
  title: string;
  published: string;
  description?: string;
  tags?: string[];
  first_level_category: string;
  second_level_category: string;
  author?: string;
  draft?: boolean;
}

// 在接收用户输入时进行运行时验证
function validateForm(formData: any): string[] {
  const errors: string[] = [];
  if (!formData.title?.trim()) errors.push('Title is required');
  if (!formData.first_level_category?.trim()) errors.push('Category is required');
  return errors;
}

/* 移动优先设计：默认为单列布局 */
.editor-wrapper {
  display: flex;
  flex-direction: column;
}

/* 平板及以上设备 */
@media (max-width: 1024px) {
  .minimap { display: none; }
  .toolbar-title { font-size: 0.75rem; }
}

/* 手机设备 */
@media (max-width: 640px) {
  .hidden-mobile { display: none; }
  .mobile-info { display: flex; }
}