lyf
8402f1bc2d
- 更新 README 文档，增加项目介绍和说明 - 优化 Vite 配置，支持多页面入口和路径别名 - 移除未使用的 MyProject.vue 组件 - 更新项目依赖包版本 - 添加 Tailwind CSS 相关配置 - 优化编辑器布局和样式 - 添加 UI 组件库支持 - 更新 Logo 和加载动画 - 修复国际化配置 Made-with: Cursor
334 lines
11 KiB
Markdown
334 lines
11 KiB
Markdown
# 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小时（不含设计时间）
|
||
**风险等级**：低（纯视觉层修改，不影响核心功能）
|