# 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` - ``
**配色参数表：**
| 角色 | 颜色代码 | 名称 | 用途 |
|:-----|:---------|:-----|:-----|
| **主色 (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
```
## 二、具体修改步骤
### 步骤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
新品牌名 - 新的Slogan
```
### 步骤3：修改侧边栏品牌显示
编辑 `src/views/home/components/SidebarTopInfo.vue`：
```vue
```
### 步骤4：配置主题色（核心修改）
#### 方式A：修改Naive UI主题（推荐）
在 `src/App.vue` 的 `themeOverrides` 对象中更新 `common` 配置：
```typescript
// src/App.vue
const themeOverrides = computed(() => {
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
```
在样式中应用：
```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小时（不含设计时间）
**风险等级**：低（纯视觉层修改，不影响核心功能）