lyf/Astral3D
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1dd65ad0e1a52f42d0e6c62c539b76e02b98cb40
Astral3D/docs/二开改造方案.md
lyf 8402f1bc2d 优化项目配置并更新文档 
- 更新 README 文档，增加项目介绍和说明
- 优化 Vite 配置，支持多页面入口和路径别名
- 移除未使用的 MyProject.vue 组件
- 更新项目依赖包版本
- 添加 Tailwind CSS 相关配置
- 优化编辑器布局和样式
- 添加 UI 组件库支持
- 更新 Logo 和加载动画
- 修复国际化配置

Made-with: Cursor
2026-03-13 23:24:54 +08:00

11 KiB
Raw Blame History

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相关标识

<!-- 删除或替换以下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：

<!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：

<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 配置：

// 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 全局样式中添加：

: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：修改加载界面

查找加载动画/欢迎页组件：

grep -r "loading\|splash\|welcome" src --include="*.vue" -l

常见的加载组件位置：

  • src/App.vue
  • src/components/Loading/ 或类似目录
  • src/views/ 下的首页

如有自定义加载画面，更新其中的logo和品牌名。

步骤6：更新关于页面

查找关于页面/版权信息：

grep -r "关于\|about\|copyright\|版本" src --include="*.vue" -i -l

编辑相关文件，更新：

  • 版本号
  • 版权信息
  • 技术支持联系方式

三、进阶视觉改造建议

1. 更换字体

在 index.html 引入新字体：

<link href="https://fonts.googleapis.com/css2?family=你的字体&display=swap" rel="stylesheet">

在样式中应用：

body {
  font-family: '你的字体', -apple-system, BlinkMacSystemFont, sans-serif;
}

推荐科技字体：

  • 英文字体：JetBrains Mono (编辑器核心), Poppins (标题), Inter (正文)
  • 中文字体：思源黑体、钉钉进步体

2. 更换背景图

# 查看现有背景图
find public -name "*bg*" -o -name "*background*" -o -name "*banner*"

替换首页/编辑器的背景图片。

3. 自定义加载动画

创建新的加载组件，替换原有的loading spinner。

4. 修改预设模板和示例

# 查找预设内容
grep -r "Astral\|示例\|Demo" src --include="*.vue" --include="*.ts" -l

四、代码执行示例

一键查找品牌关键词

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

批量替换（谨慎使用）

# 备份原文件
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. 版本控制：

    git checkout -b feature/rebrand
git add .
git commit -m "rebrand: 更新品牌标识和视觉风格"

  5. 测试构建：

    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小时（不含设计时间） 风险等级：低（纯视觉层修改，不影响核心功能）

Reference in New Issue View Git Blame Copy Permalink