优化项目配置并更新文档

- 更新 README 文档，增加项目介绍和说明 - 优化 Vite 配置，支持多页面入口和路径别名 - 移除未使用的 MyProject.vue 组件 - 更新项目依赖包版本 - 添加 Tailwind CSS 相关配置 - 优化编辑器布局和样式 - 添加 UI 组件库支持 - 更新 Logo 和加载动画 - 修复国际化配置 Made-with: Cursor
2026-03-13 23:24:54 +08:00
parent cded246736
commit 8402f1bc2d
48 changed files with 3072 additions and 1038 deletions
--- a/docs/css-migration-spec.md
+++ b/docs/css-migration-spec.md
@@ -0,0 +1,329 @@
+# Astral3D UI 样式迁移规范 (CSS & Vue Style Guide)
+
+> **项目**: Astral3D Web 3D 编辑器  
+> **迁移目标**: NaiveUI → Shadcn UI + Tailwind CSS  
+> **风格**: 现代简约 / Minimalist Modern  
+> **版本**: 1.0
+
+---
+
+## 1. 主题与色彩系统 (Theme & Colors)
+
+### 1.1 色彩变量 (CSS Variables)
+我们将在 Tailwind 的默认调色板基础上，定义与当前 NaiveUI 浅色主题兼容的 CSS 变量。
+
+**建议配置 (`tailwind.config.ts` & `globals.css`)**:
+
+| 用途 | Tailwind 映射 | 变量名 | 当前值 (NaiveUI Light) | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| **主色 (Primary)** | `primary` | `--color-primary` | `#63E2B7` (Mint Green) | 品牌色，用于按钮、选中态 |
+| **主色悬停** | `primary-hover` | `--color-primary-hover` | `#7FE7C4` | 鼠标悬停 |
+| **主色按下** | `primary-pressed` | `--color-primary-pressed` | `#5ACEA7` | 鼠标按下 |
+| **背景 (Background)** | `background` | `--background` | `#ffffff` (White) | 页面主背景 |
+| **侧边栏背景** | `sidebar-bg` | `--sidebar-background` | `#f8fafc` (Slate 50) | 侧边栏容器 |
+| **卡片/面板背景** | `card-bg` | `--card-background` | `#ffffff` (White) | 表单、卡片背景 |
+| **边框 (Border)** | `border` | `--border` | `#e2e8f0` (Slate 200) | 分割线、输入框边框 |
+| **文字主色** | `foreground` | `--foreground` | `#0f172a` (Slate 900) | 标题、主要文字 |
+| **文字次要** | `muted-foreground` | `--muted-foreground` | `#64748b` (Slate 500) | 标签、占位符 |
+
+### 1.2 暗色模式适配 (Dark Mode)
+我们将默认配置为浅色，支持通过 class 切换到深色：
+
+```typescript
+// tailwind.config.ts
+export default {
+  darkMode: 'class', // 允许通过添加 'dark' class 切换主题
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+          hover: 'var(--color-primary-hover)',
+          pressed: 'var(--color-primary-pressed)',
+        },
+        background: 'var(--background)',
+        surface: 'var(--sidebar-background)',
+        border: 'var(--border)',
+      }
+    }
+  }
+}
+```
+
+---
+
+## 2. 间距与排版 (Spacing & Typography)
+
+### 2.1 间距系统 (Spacing)
+迁移 `n-space` 和 NaiveUI 的 padding/margin 逻辑。
+
+| NaiveUI Size | Tailwind Class | 用途 |
+| :--- | :--- | :--- |
+| `size="small"` | `gap-2` (8px) | 紧凑列表、工具栏 |
+| `size="medium"` (默认) | `gap-3` (12px) | 通用表单、卡片 |
+| `size="large"` | `gap-4` (16px) | 模块间距、大间距 |
+| `n-layout-sider` padding | `p-3` (12px) | 侧边栏内容 padding |
+| `n-card` padding | `p-4` (16px) | 卡片内边距 |
+
+### 2.2 圆角系统 (Border Radius)
+
+| NaiveUI | Tailwind Class | 说明 |
+| :--- | :--- | :--- |
+| `bordered` (默认) | `rounded-md` (6px) | 按钮、输入框 |
+| `round` | `rounded-full` | 标签、头像 |
+| - | `rounded-lg` (8px) | 模态框、卡片 |
+
+---
+
+## 3. 组件映射速查 (Component Mapping)
+
+### 3.1 基础组件 (Basic Components)
+
+#### Button 按钮
+- **NaiveUI**: `<n-button type="primary">Save</n-button>`
+- **Shadcn/Vue + Tailwind**:
+  ```vue
+  <Button variant="default">Save</Button>
+  ```
+- **属性映射**:
+  - `type="primary"` -> `variant="default"` (Primary Color Background)
+  - `type="default"` -> `variant="outline"`
+  - `type="tertiary"` -> `variant="ghost"`
+  - `size="small"` -> `size="sm"`
+  - `ghost=true` -> `variant="ghost"`
+
+#### Input 输入框
+- **NaiveUI**: `<n-input v-model:value="text" placeholder="Enter..." />`
+- **Shadcn/Vue + Tailwind**:
+  ```vue
+  <Input v-model="text" placeholder="Enter..." />
+  ```
+- **样式调整**:
+  - 当前项目输入框通常为白色背景，需覆盖 `shadcn` 默认样式：
+    ```css
+    .Input {
+      @apply bg-white border-slate-300 text-slate-900 focus:ring-primary;
+    }
+    ```
+
+#### Select 选择器
+- **NaiveUI**: `<n-select v-model:value="val" :options="options" />`
+- **Shadcn**: 使用 `Select` 组件或自定义封装。
+- **Tailwind 实现 (自定义封装示例)**:
+  ```vue
+  <div class="relative">
+    <select v-model="val" class="appearance-none bg-white border border-slate-300 rounded-md px-3 py-2 text-sm w-full text-slate-900">
+      <option v-for="opt in options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+    </select>
+    <!-- 自定义箭头图标 -->
+  </div>
+  ```
+
+---
+
+### 3.2 布局组件 (Layout Components)
+
+#### Tabs 标签页 (侧边栏)
+- **NaiveUI**: `<n-tabs placement="left">` (侧边栏常规模式)
+- **Shadcn 实现**: Shadcn 默认 Tabs 是水平顶部排列。
+- **Tailwind 实现 (自定义侧边栏 Tabs)**:
+  需要使用 Flexbox 布局模拟侧边栏 Tab。
+  ```vue
+  <div class="flex h-full w-full">
+    <!-- 竖向 Tab 列表 -->
+    <div class="flex flex-col border-r border-slate-200 w-12 items-center py-2 gap-2 bg-slate-50">
+       <button 
+         v-for="tab in tabs" 
+         :key="tab.name"
+         :class="['p-2 rounded', activeTab === tab.name ? 'bg-primary/10 text-primary' : 'text-slate-500 hover:bg-slate-100']"
+         @click="activeTab = tab.name"
+       >
+         <component :is="tab.icon" class="w-4 h-4" />
+       </button>
+    </div>
+    <!-- Tab 内容区 -->
+    <div class="flex-1 p-4 overflow-y-auto">
+       <component :is="activeComponent" />
+    </div>
+  </div>
+  ```
+
+#### Layout 布局容器
+- **NaiveUI**:
+  ```vue
+  <n-layout has-sider>
+    <n-layout-sider>...</n-layout-sider>
+    <n-layout-content>...</n-layout-content>
+  </n-layout>
+  ```
+- **Tailwind 实现**:
+  ```vue
+  <div class="flex h-screen bg-background text-foreground">
+    <aside class="w-64 border-r border-border bg-sidebar p-3 overflow-y-auto">
+      <!-- 侧边栏内容 -->
+    </aside>
+    <main class="flex-1 overflow-hidden relative">
+      <!-- 主内容区 -->
+    </main>
+  </div>
+  ```
+
+#### Card 卡片
+- **NaiveUI**: `<n-card title="Title" size="small">Content</n-card>`
+- **Shadcn 实现**:
+  ```vue
+  <Card class="w-full bg-white border-slate-200">
+    <CardHeader>
+      <CardTitle>Title</CardTitle>
+    </CardHeader>
+    <CardContent>
+      Content
+    </CardContent>
+  </Card>
+  ```
+
+#### Collapse 折叠面板
+- **NaiveUI**:
+  ```vue
+  <n-collapse>
+    <n-collapse-item title="Group" name="1">Content</n-collapse-item>
+  </n-collapse>
+  ```
+- **Tailwind 实现**:
+  ```vue
+  <Accordion type="single" collapsible>
+    <AccordionItem value="1">
+      <AccordionTrigger>Group</AccordionTrigger>
+      <AccordionContent>Content</AccordionContent>
+    </AccordionItem>
+  </Accordion>
+  ```
+
+---
+
+### 3.3 反馈组件 (Feedback Components)
+
+#### Modal 对话框
+- **NaiveUI**: `<n-modal v-model:show="show" preset="card" title="Title" />`
+- **Shadcn 实现**:
+  ```vue
+  <Dialog v-model:open="show">
+    <DialogContent class="sm:max-w-[425px] bg-white border-slate-200">
+      <DialogHeader>
+        <DialogTitle>Title</DialogTitle>
+      </DialogHeader>
+      <DialogFooter>
+        <!-- actions -->
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+  ```
+
+#### Message 消息提示
+- **NaiveUI**: `window.$message.success('Success')`
+- **迁移方案**: 使用 `sonner` 或自定义 Toast 组件。
+- **Tailwind 样式 (浅色)**:
+  ```css
+  .toast-success {
+    @apply bg-white border-l-4 border-primary text-slate-900 shadow-lg;
+  }
+  ```
+
+#### Loading 加载
+- **NaiveUI**: `<n-spin />` 或 `v-loading`
+- **Tailwind 实现**:
+  ```vue
+  <div class="flex items-center justify-center">
+    <Loader2 class="h-8 w-8 animate-spin text-primary" />
+  </div>
+  ```
+
+---
+
+## 4. 样式覆盖规范 (Style Overrides)
+
+为了保持项目当前的视觉风格（浅色为主），需要在全局 CSS 中添加以下覆盖：
+
+```css
+/* src/assets/globals.css */
+
+@layer base {
+  :root {
+    /* 浅色模式 (默认) */
+    --background: 255 255 255; /* White */
+    --foreground: 15 23 42; /* Slate 900 */
+    
+    --card: 255 255 255;
+    --card-foreground: 15 23 42;
+    
+    --primary: 99 226 183; /* Mint Green #63E2B7 */
+    --primary-foreground: 15 23 42;
+    
+    --secondary: 241 245 249; /* Slate 100 */
+    --secondary-foreground: 15 23 42;
+    
+    --muted: 241 245 249; /* Slate 100 */
+    --muted-foreground: 100 116 139; /* Slate 500 */
+    
+    --accent: 241 245 249;
+    --accent-foreground: 15 23 42;
+    
+    --destructive: 239 68 68; /* Red 500 */
+    --destructive-foreground: 255 255 255;
+    
+    --border: 226 232 240; /* Slate 200 */
+    --input: 226 232 240;
+    --ring: 99 226 183;
+    
+    --radius: 0.5rem;
+  }
+
+  /* 暗色模式 (可选) */
+  .dark {
+    --background: 15 23 42; /* Slate 950 */
+    --foreground: 248 250 252; /* Slate 50 */
+    
+    --card: 30 41 59; /* Slate 800 */
+    --card-foreground: 248 250 252;
+    
+    --secondary: 51 65 85; /* Slate 700 */
+    --secondary-foreground: 248 250 252;
+    
+    --muted: 51 65 85;
+    --muted-foreground: 148 163 184;
+    
+    --accent: 51 65 85;
+    --accent-foreground: 248 250 252;
+    
+    --destructive: 239 68 68;
+    --destructive-foreground: 248 250 252;
+    
+    --border: 51 65 85;
+    --input: 51 65 85;
+  }
+}
+
+/* 自定义组件样式适配当前项目 (浅色) */
+.btn-primary {
+  @apply bg-primary text-slate-900 hover:bg-primary/90;
+}
+
+.input-light {
+  @apply bg-white border-slate-200 text-slate-900 focus:ring-primary rounded-md;
+}
+
+/* 侧边栏样式适配 */
+.sidebar {
+  @apply bg-slate-50 border-r border-slate-200;
+}
+```
+
+---
+
+## 5. 迁移步骤建议
+
+1.  **安装依赖**: 运行 TODO 文档中的安装命令。
+2.  **配置 Tailwind**: 创建 `tailwind.config.ts` 并配置颜色。
+3.  **全局样式**: 创建 `globals.css` 并填入上方 CSS 变量。
+4.  **组件替换**: 按照 "组件映射速查" 表格，逐页面替换 `naive-ui` 组件。
+5.  **样式微调**: 针对特定的 NaiveUI 样式类（如 `.n-form-item`），使用 `@apply` 或 Tailwind 工具类进行覆盖。
--- a/docs/digital-atelier-philosophy.md
+++ b/docs/digital-atelier-philosophy.md
@@ -0,0 +1,26 @@
+# Design Philosophy: "Digital Atelier"
+
+## Philosophy Name
+**Digital Atelier** — The marriage of classical gallery aesthetics with digital precision.
+
+## Visual Expression
+
+### Form and Space
+The logo draws from the architectural language of galleries—clean lines, intentional negative space, and frames that create depth. The composition suggests a portal or viewing window, evoking the experience of entering a sacred art space. Geometric forms reference cockpit instrumentation—subtle dials, data points, and interface elements—seamlessly integrated into the visual structure.
+
+### Color and Material
+A restrained palette anchored in deep charcoal and warm ivory, with a single accent color—deep teal—that suggests both vintage museum label text and digital interface highlights. The contrast creates hierarchy without aggression. Colors should feel timeless, like aged paper against polished brass.
+
+### Scale and Rhythm
+Proportions follow classical composition rules (golden ratio relationships), while the internal elements pulse with digital life. Typography is architectural—tall, narrow letterforms that suggest both museum signage and futuristic readouts.
+
+### Composition and Balance
+Asymmetric equilibrium creates tension and interest. The eye moves through a deliberate path—from the frame to the core symbol to the text. Every element relates to others through proportion and spacing, creating a cohesive whole that feels inevitable.
+
+### Visual Hierarchy
+The central mark commands attention, with supporting elements receding. Text serves as foundation, the mark hovers as experience, and negative space connects them. The result is a logo that works at multiple scales—from favicon to billboard.
+
+---
+
+## Subtle Conceptual Thread
+The logo subtly references the Japanese concept of "Ma" (間)—the negative space between things that gives them meaning. The cockpit elements are abstracted enough to suggest depth and complexity without overwhelming the elegant gallery essence. It's a mark that promises: *here, art meets intelligence.*
--- a/docs/ui-migration-todo.md
+++ b/docs/ui-migration-todo.md
@@ -0,0 +1,92 @@
+# Astral3D UI Migration TODO - NaiveUI to Shadcn UI + Tailwind CSS
+
+> **Project**: Astral3D Web 3D Editor
+> **Goal**: Migrate from NaiveUI to Shadcn UI + Tailwind CSS
+> **Style**: Minimalist Modern
+> **Created**: 2026-03-12
+
+---
+
+## Progress Overview
+
+| Phase | Status | Progress | Est. Time |
+|-------|--------|----------|-----------|
+| **Phase 1: Environment Setup** | Done | 100% | 2-4 hours |
+| **Phase 2: Basic Components** | In Progress | ~30% | 6-8 hours |
+| **Phase 3: Layout Components** | Pending | 0% | 4-6 hours |
+| **Phase 4: Feedback Components** | Pending | 0% | 4-6 hours |
+| **Phase 5: Data Components** | Pending | 0% | 4-6 hours |
+| **Phase 6: Verification** | Pending | 0% | 4-8 hours |
+| **Phase 7: Optimization** | Pending | 0% | 2-4 hours |
+
+**Overall Progress: ~15%**
+
+---
+
+## Phase 1: Environment Setup (Complete)
+
+### 1.1 Dependencies
+
+- [x] Tailwind CSS v4 installed
+- [x] @tailwindcss/postcss installed
+- [x] Shadcn Vue dependencies (radix-vue, class-variance-authority, clsx, tailwind-merge)
+- [x] Dark mode support (@vueuse/core)
+
+### 1.2 Configuration Files
+
+- [x] `tailwind.config.ts` created
+- [x] `postcss.config.js` updated (using @tailwindcss/postcss)
+- [x] `src/lib/utils.ts` (cn() utility function)
+- [x] `src/assets/css/globals.css` with Tailwind v4 syntax and CSS variables
+
+### 1.3 Theme Design System
+
+- [x] Color system defined (matching NaiveUI theme)
+- [x] Spacing system
+- [x] Border radius system
+
+---
+
+## Phase 2: Basic Components Migration (In Progress)
+
+### 2.1 Button
+- [x] Component: `Button` created
+- [x] Location: `src/components/ui/Button/Button.vue`
+
+### 2.2 Input
+- [x] Component: `Input` created
+- [x] Location: `src/components/ui/Input/Input.vue`
+
+### 2.3 Card
+- [x] Components: Card, CardHeader, CardDescription, CardTitle, CardContent, CardFooter
+- [x] Location: `src/components/ui/Card/`
+
+### 2.4 Dialog
+- [x] Components: Dialog, DialogHeader, DialogTitle, DialogDescription, DialogClose
+- [x] Location: `src/components/ui/Dialog/`
+
+### 2.5 Select
+- [ ] Pending implementation
+
+### 2.6 Checkbox / Radio
+- [ ] Pending implementation
+
+### 2.7 Switch
+- [ ] Pending implementation
+
+---
+
+## Completed Components
+
+```typescript
+// Available from: src/components/ui/index.ts
+import { Button, Input, Card, CardHeader, CardDescription, CardTitle, CardContent, CardFooter } from '@/components/ui'
+```
+
+---
+
+## Build Status
+
+- Project builds successfully with Vite
+- Tailwind CSS v4 configured correctly
+- PostCSS with @tailwindcss/postcss plugin working
--- a/docs/二开改造方案.md
+++ b/docs/二开改造方案.md
@@ -0,0 +1,333 @@
+# Astral3D 二次开发视觉改造方案
+
+> 目标：将Astral3D编辑器视觉风格与原项目显著区分，建立独立品牌识别
+> 时间：2026-03-13
+> 作者：AI Assistant
+
+## 一、需要修改的品牌元素清单
+
+### 1. 核心Logo文件
+
+| 文件路径 | 描述 | 优先级 |
+|---------|------|--------|
+| `/public/static/images/logo/logo.svg` | 主logo（SVG格式）| ⭐⭐⭐ |
+| `/public/static/images/logo/logo.png` | 主logo（PNG格式）| ⭐⭐⭐ |
+| `/public/static/images/logo/logo256x256.ico` | 网站favicon | ⭐⭐⭐ |
+| `/public/static/images/logo/pwa/pwa-*.png` | PWA各尺寸图标（16x16至1024x1024）| ⭐⭐⭐ |
+
+**建议**：使用AI设计工具（如Canva、Midjourney、DALL-E）生成全新logo，风格建议：
+- 科技感几何图形
+- 3D立体效果
+- 与元宇宙/数字孪生相关的视觉符号
+- 避免与原Astral品牌配色（绿色#63E2B7）相似
+
+### 2. 品牌名称与文字标识
+
+| 位置 | 当前内容 | 修改建议 |
+|------|---------|---------|
+| `index.html` title | "Astral 3D Editor - 高效的三维可视化编辑工具" | 改为新品牌名如 "NeonVision 3D - 新一代数字孪生编辑器" |
+| `index.html` meta keywords | 包含"Astral"关键词 | 替换为新品牌关键词 |
+| `index.html` meta description | 原描述 | 重写描述，突出新品牌定位 |
+| `src/views/home/components/SidebarTopInfo.vue` | "Astral 3D Editor" | 改为新品牌名 |
+
+### 3. 主题配色系统
+
+> ⚠️ **重要更新 (2026-03-13)**：根据甲方需求，否定深色方案。确定采用**专业浅色 (Professional Light)** 风格，参考 Apple/SaaS 设计趋势，清爽高效。
+
+#### 当前状态
+当前代码中实际配置的主色调为 Emerald Green (`#10B981`)。原项目曾使用 Mint Green (`#63E2B7`)。
+
+#### 目标配色方案：专业浅色系 (Professional Clean)
+
+本方案采用 **Trust Blue (信任蓝)** 作为主色，辅以 **Emerald (翠绿)** 体现成功状态，整体保持浅色背景，确保长时间使用的舒适度。
+
+**需要修改的文件：**
+- `src/App.vue` - Naive UI 主题覆盖配置
+- `index.html` - `<meta name="theme-color" ... />`
+
+**配色参数表：**
+
+| 角色 | 颜色代码 | 名称 | 用途 |
+|:-----|:---------|:-----|:-----|
+| **主色 (Primary)** | `#0EA5E9` | **Sky Blue** | 核心按钮、侧边栏选中态、品牌标识 |
+| **辅助色 (Secondary)** | `#38BDF8` | **Light Sky** | 悬停状态、次级选中态 |
+| **强调色 (Accent)** | `#F59E0B` | **Amber** | 警告、新功能提示、关键CTA |
+| **成功色 (Success)** | `#10B981` | **Emerald** | 确认操作、运行状态（保留现有配置）|
+| **背景色 (Background)** | `#F8FAFC` | **Slate 50** | 主背景（微灰，不刺眼） |
+| **面板色 (Surface)** | `#FFFFFF` | **White** | 侧边栏、属性面板、卡片 |
+| **文字色 (Text)** | `#1E293B` | **Slate 800** | 主要文字（深灰，比纯黑柔和） |
+| **边框色 (Border)** | `#E2E8F0` | **Slate 200** | 分割线、输入框边框 |
+
+### 4. UI组件样式
+
+> ⚡ 详细内容已整合至 **步骤4：配置主题色**。主要通过修改 `src/App.vue` 中的 Naive UI 主题配置 `themeOverrides` 来实现。
+
+#### UnoCSS/Tailwind 配置（如有定制）
+位置：`uno.config.ts`, `tailwind.config.ts`
+
+如有UnoCSS或Tailwind配置，需同步更新对应的颜色别名（如 `primary`, `secondary`）以匹配上述Hex值。
+
+### 5. 版权与作者信息
+
+| 位置 | 当前内容 | 建议修改 |
+|------|---------|---------|
+| `index.html` | `author="ErSan,mlt131220@163.com"` | 改为新公司/团队信息 |
+| `index.html` | `copyright="ErSan,mlt131220@163.com"` | 改为新版权声明 |
+| `README.md` | 原作者信息 | 保留原项目致谢，添加二开说明 |
+
+### 6. SEO相关标识
+```html
+<!-- 删除或替换以下SEO验证代码 -->
+<meta name="baidu-site-verification" content="codeva-AVKCbnEhHf" />
+<meta name="msvalidate.01" content="51C05441E591099C88B3C1975F9B9D73" />
+<meta name="google-site-verification" content="_hU0qCzBII0F3mupE17AaGpLznXbpQ89WGNaxrhVqfE" />
+```
+
+## 二、具体修改步骤
+
+### 步骤1：准备新Logo素材
+
+1. 设计新logo（建议512x512以上）
+2. 导出以下格式：
+   - SVG（矢量，用于web显示）
+   - PNG（多种尺寸：32, 64, 128, 256, 512, 1024）
+   - ICO（256x256，用于favicon）
+3. 按原目录结构替换文件
+
+### 步骤2：修改品牌和元信息
+
+编辑 `/packages/editor/index.html`：
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8"/>
+  <!-- Logo -->
+  <link rel="icon" sizes="any" type="image/svg+xml" href="/static/images/logo/logo.svg"/>
+  <link rel="mask-icon" href="/static/images/logo/logo.svg" color="#新主色" />
+  <link rel="apple-touch-icon" href="/static/images/logo/pwa/pwa-180x180.png" sizes="180x180" />
+  
+  <!-- 主题色 -->
+  <meta name="theme-color" content="#新主色" />
+  
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="author" content="你的公司/团队名">
+  <meta name="copyright" content="你的公司/团队名">
+  <meta name="keywords" content="新关键词,数字孪生,3D编辑器,threejs,...">
+  <meta name="description" content="新品牌描述">
+  
+  <!-- 删除原SEO验证代码，添加自己的 -->
+  
+  <title>新品牌名 - 新的Slogan</title>
+</head>
+```
+
+### 步骤3：修改侧边栏品牌显示
+
+编辑 `src/views/home/components/SidebarTopInfo.vue`：
+```vue
+<template>
+  <div class="pt-24px w-full flex justify-center items-center">
+    <div class="min-w-40px">
+      <Logo />
+    </div>
+    <transition enter-active-class="animate__animated animate__fadeInRight" 
+                leave-active-class="animate__animated animate__fadeOutRight">
+      <n-gradient-text :size="24" type="success" class="ml-5px" v-if="!collapsed">
+        新品牌名 <!-- 替换这里 -->
+      </n-gradient-text>
+    </transition>
+  </div>
+</template>
+```
+
+### 步骤4：配置主题色（核心修改）
+
+#### 方式A：修改Naive UI主题（推荐）
+
+在 `src/App.vue` 的 `themeOverrides` 对象中更新 `common` 配置：
+
+```typescript
+// src/App.vue
+const themeOverrides = computed<GlobalThemeOverrides>(() => {
+  return {
+    common: {
+      // 专业浅色主题：天空蓝
+      primaryColor: '#0EA5E9',      // Sky Blue
+      primaryColorHover: '#0284C7',  // Darker Sky
+      primaryColorPressed: '#0369A1',// Even Darker
+      primaryColorSuppl: '#0EA5E9',
+      
+      // 成功色
+      successColor: '#10B981',
+      
+      // 警告色
+      warningColor: '#F59E0B',
+      
+      // 边框圆角
+      borderRadius: '0.5rem',
+    }
+  }
+})
+```
+
+#### 方式B：使用CSS变量覆盖
+
+在 `src/assets/css/globals.css` 或 `src/App.vue` 全局样式中添加：
+
+```css
+:root {
+  --primary-color: #0EA5E9;
+  --primary-color-hover: #0284C7;
+  --primary-color-pressed: #0369A1;
+  
+  --background-color: #F8FAFC;
+  --surface-color: #FFFFFF;
+  --text-color: #1E293B;
+  --border-color: #E2E8F0;
+}
+```
+
+> ⚠️ 注意：确保 `src/store/modules/globalConfig.ts` 中的默认主题设置为 `lightTheme` 或 `osTheme`（浅色模式），否则深色主题配置会覆盖此处设置。
+
+### 步骤5：修改加载界面
+
+查找加载动画/欢迎页组件：
+```bash
+grep -r "loading\|splash\|welcome" src --include="*.vue" -l
+```
+
+常见的加载组件位置：
+- `src/App.vue`
+- `src/components/Loading/` 或类似目录
+- `src/views/` 下的首页
+
+如有自定义加载画面，更新其中的logo和品牌名。
+
+### 步骤6：更新关于页面
+
+查找关于页面/版权信息：
+```bash
+grep -r "关于\|about\|copyright\|版本" src --include="*.vue" -i -l
+```
+
+编辑相关文件，更新：
+- 版本号
+- 版权信息
+- 技术支持联系方式
+
+## 三、进阶视觉改造建议
+
+### 1. 更换字体
+
+在 `index.html` 引入新字体：
+```html
+<link href="https://fonts.googleapis.com/css2?family=你的字体&display=swap" rel="stylesheet">
+```
+
+在样式中应用：
+```css
+body {
+  font-family: '你的字体', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+```
+
+推荐科技字体：
+- 英文字体：**JetBrains Mono** (编辑器核心), **Poppins** (标题), **Inter** (正文)
+- 中文字体：思源黑体、钉钉进步体
+
+### 2. 更换背景图
+
+```bash
+# 查看现有背景图
+find public -name "*bg*" -o -name "*background*" -o -name "*banner*"
+```
+
+替换首页/编辑器的背景图片。
+
+### 3. 自定义加载动画
+
+创建新的加载组件，替换原有的loading spinner。
+
+### 4. 修改预设模板和示例
+
+```bash
+# 查找预设内容
+grep -r "Astral\|示例\|Demo" src --include="*.vue" --include="*.ts" -l
+```
+
+## 四、代码执行示例
+
+### 一键查找品牌关键词
+```bash
+cd /opt/Big-Screen/Astral3D-Projects/Astral3D/packages/editor
+
+# 查找包含"Astral"的所有文件
+grep -r "Astral" src public --include="*.vue" --include="*.ts" --include="*.html" --include="*.json" -l
+
+# 查找包含作者邮箱的文件
+grep -r "mlt131220" src public --include="*.vue" --include="*.ts" --include="*.html" -l
+
+# 查找包含原版权信息的文件
+grep -r "ErSan\|星孪数字" src public --include="*.vue" --include="*.ts" --include="*.html" -l
+```
+
+### 批量替换（谨慎使用）
+```bash
+# 备份原文件
+cp -r src src.backup
+
+# 使用sed替换（建议先手动确认）
+# sed -i 's/Astral 3D Editor/新品牌名/g' src/views/home/components/SidebarTopInfo.vue
+```
+
+## 五、验证清单
+
+修改完成后，检查以下位置是否正确显示：
+
+- [ ] 浏览器标签页图标（favicon）
+- [ ] 浏览器标签页标题
+- [ ] PWA安装图标
+- [ ] 侧边栏顶部logo和名称
+- [ ] 登录页面（如有）品牌标识
+- [ ] 关于页面版权信息
+- [ ] 右键菜单/上下文菜单品牌名
+- [ ] 导出文件的默认命名
+- [ ] 错误页面的品牌展示
+
+## 六、注意事项
+
+1. **版权合规**：保留原项目的LICENSE和版权声明，添加NOTICE文件说明二次开发
+
+2. **技术栈保持**：不要修改技术栈（Vue3 + Three.js + NaiveUI），只改视觉层
+
+3. **渐进式修改**：建议分阶段修改，每改完一部分进行测试
+
+4. **版本控制**：
+   ```bash
+   git checkout -b feature/rebrand
+   git add .
+   git commit -m "rebrand: 更新品牌标识和视觉风格"
+   ```
+
+5. **测试构建**：
+   ```bash
+   pnpm run editor:build
+   # 检查dist目录中的资源是否正确
+   ```
+
+## 七、推荐工具
+
+| 用途 | 工具推荐 |
+|-----|---------|
+| Logo设计 | Canva、Figma、Midjourney、Stable Diffusion |
+| 配色方案 | Coolors.co、ColorHunt、Adobe Color |
+| 图标生成 | Favicon.io、realfavicongenerator.net |
+| 字体资源 | Google Fonts、字由、阿里巴巴普惠体 |
+| 图片压缩 | TinyPNG、Squoosh |
+
+---
+
+**修改难度评估**：⭐⭐（简单）
+**预计耗时**：2-4小时（不含设计时间）
+**风险等级**：低（纯视觉层修改，不影响核心功能）