refactor: 重组项目结构,前端收拢至 frontend/,新增 backend/ 目录
- 前端文件移入 frontend/ 子目录 - 新建 backend/ 目录(待开发) - 新增 CLAUDE.md、claudehd.md、EXTERNAL_SERVICES.md Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
93017f291a
commit
04d8fbb740
@@ -0,0 +1,53 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Overview
|
||||
|
||||
This is a 1:1 pixel-perfect clone of the Google Gemini chat interface, built with Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, and shadcn/ui. It was generated via [v0.app](https://v0.app/chat/lx6pc6oofZh) and auto-synced to this repo. Deployed on Vercel.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
npm install # Install dependencies
|
||||
npm run dev # Start dev server (localhost:3000)
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
npm start # Start production server
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
### Entry Point
|
||||
- `app/page.tsx` — renders `<GeminiChat />` only; all logic lives in components
|
||||
|
||||
### Core Component: `components/gemini/GeminiChat.tsx`
|
||||
The root stateful component. Owns all state: sidebar open/close, active conversation, message list, typing indicator. Composes all other Gemini components.
|
||||
|
||||
### Gemini Component Breakdown
|
||||
|
||||
| Component | Purpose |
|
||||
|---|---|
|
||||
| `GeminiSidebar.tsx` | Left sidebar — logo, new chat button, conversation history list, bottom nav (Help/Activity/Extensions), user avatar |
|
||||
| `GeminiTopbar.tsx` | Top bar — hamburger toggle, model selector dropdown (Gemini 2.0 Flash etc.), settings + avatar |
|
||||
| `GeminiWelcome.tsx` | Empty state — gradient greeting, 4 suggestion cards |
|
||||
| `GeminiMessage.tsx` | Single message — user bubble (right-aligned, bg pill) vs AI response (left-aligned, ◆ icon, no bubble, markdown-like rendering) |
|
||||
| `GeminiInput.tsx` | Bottom input — rounded container, attachment icon, auto-resize textarea, mic + send button |
|
||||
| `GeminiTypingIndicator.tsx` | Animated dots shown while AI is "responding" |
|
||||
| `ExtensionsPanel.tsx` | Extensions panel UI |
|
||||
|
||||
### Styling
|
||||
- Tailwind CSS 4 with `@tailwindcss/postcss`
|
||||
- Dark theme only — hardcoded color palette:
|
||||
- Page bg: `#131314`, Sidebar: `#1e1e1e`, Hover/card: `#2a2a2a`, Border: `#3a3a3a`
|
||||
- Primary text: `#e3e3e3`, Muted: `#9aa0a6`
|
||||
- Accent gradient: `from-[#4285f4] to-[#a855f7]`
|
||||
- `components/ui/` — standard shadcn/ui primitives (do not modify directly)
|
||||
|
||||
### Key Patterns
|
||||
- All components use `"use client"` — no server components beyond the page shell
|
||||
- `cn()` from `@/lib/utils` for conditional class merging
|
||||
- No external API calls — all data is mock/local state in `GeminiChat.tsx`
|
||||
|
||||
## Sync Workflow
|
||||
This repo is auto-synced from v0.app. Changes made on v0.app are pushed here automatically, then deployed to Vercel. Manual edits here may be overwritten on the next v0 sync.
|
||||
Reference in New Issue
Block a user