辣评系统名称与品牌统一（二十三）

品牌统一背景

在项目发展过程中，系统名称在不同地方的显示不一致，缺乏统一的品牌形象。本次优化统一了系统名称为”辣评”，并设计了专属的 Logo，建立了完整的品牌识别系统。

优化前的问题

名称不统一
- 代码中使用 “SamgeBotWx”
- 页面显示 “投稿评论系统”
- 文档中使用 “LaPing”
- 用户困惑，缺乏品牌认知
缺少 Logo
- 使用通用图标
- 没有品牌识别度
- 界面缺乏特色
配置分散
- 系统名称硬编码在各处
- 修改困难
- 不便于定制

Logo 设计演进

设计理念

“辣评”品牌含义：

辣 - 犀利、直接、有态度的评论
评 - 评论、评价、评判

设计元素：

翻开的书本 - 代表小说、文学、阅读
辣椒笔 - 代表犀利的评论、有态度的书写
红色主色调 - 热情、活力、辣味

Logo 设计过程

第一版：简单文字 Logo

辣评

问题：

过于简单
缺乏识别度
不够生动

第二版：辣椒图标

<svg viewBox="0 0 100 100">
  <!-- 辣椒形状 -->
  <path d="M50,20 Q60,30 55,50 Q50,70 45,50 Q40,30 50,20"
        fill="#ff4444" />
  <!-- 辣椒蒂 -->
  <path d="M50,15 L50,25" stroke="#00aa00" stroke-width="3" />
</svg>

问题：

与评论主题关联不够
缺少文学元素

第三版：翻开的书本与辣椒笔（最终版）

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 翻开的书本 -->
  <g id="book">
    <!-- 左页 -->
    <path d="M 40,60 Q 40,50 50,50 L 95,50 L 95,140 L 50,140 Q 40,140 40,130 Z"
          fill="#f5f5f5"
          stroke="#333"
          stroke-width="2"/>

    <!-- 右页 -->
    <path d="M 105,50 L 150,50 Q 160,50 160,60 L 160,130 Q 160,140 150,140 L 105,140 Z"
          fill="#ffffff"
          stroke="#333"
          stroke-width="2"/>

    <!-- 书脊 -->
    <line x1="100" y1="50" x2="100" y2="140"
          stroke="#333"
          stroke-width="2"/>

    <!-- 页面线条 -->
    <line x1="50" y1="70" x2="90" y2="70" stroke="#ccc" stroke-width="1"/>
    <line x1="50" y1="80" x2="90" y2="80" stroke="#ccc" stroke-width="1"/>
    <line x1="50" y1="90" x2="90" y2="90" stroke="#ccc" stroke-width="1"/>

    <line x1="110" y1="70" x2="150" y2="70" stroke="#ccc" stroke-width="1"/>
    <line x1="110" y1="80" x2="150" y2="80" stroke="#ccc" stroke-width="1"/>
    <line x1="110" y1="90" x2="150" y2="90" stroke="#ccc" stroke-width="1"/>
  </g>

  <!-- 辣椒笔 -->
  <g id="pepper-pen">
    <!-- 笔杆（辣椒形状） -->
    <path d="M 140,100 Q 145,110 143,125 Q 140,140 137,125 Q 135,110 140,100"
          fill="#ff4444"
          stroke="#cc0000"
          stroke-width="1.5"/>

    <!-- 笔尖 -->
    <path d="M 140,140 L 138,145 L 142,145 Z"
          fill="#333"/>

    <!-- 辣椒蒂（笔帽） -->
    <ellipse cx="140" cy="98" rx="4" ry="3"
             fill="#00aa00"/>
    <line x1="138" y1="95" x2="142" y2="95"
          stroke="#00aa00"
          stroke-width="2"/>
  </g>

  <!-- 文字 -->
  <text x="100" y="170"
        font-family="Arial, sans-serif"
        font-size="24"
        font-weight="bold"
        text-anchor="middle"
        fill="#333">
    辣评
  </text>
</svg>

优势：

结合了文学（书本）和评论（笔）元素
辣椒形状的笔增加了趣味性和品牌识别度
简洁明了，易于识别
适合各种尺寸显示

系统名称统一

配置文件管理

// config.json
{
  "system": {
    "name": "辣评",
    "fullName": "辣评小说投稿评论平台",
    "description": "专业的小说投稿与评论管理系统",
    "version": "1.5.0",
    "logo": "/assets/logo.svg",
    "favicon": "/favicon.ico"
  },
  "branding": {
    "primaryColor": "#ff4444",
    "secondaryColor": "#333333",
    "accentColor": "#00aa00"
  }
}

后端配置加载

// cmd/server/config/config.go
package config

type SystemConfig struct {
    Name        string `json:"name"`
    FullName    string `json:"fullName"`
    Description string `json:"description"`
    Version     string `json:"version"`
    Logo        string `json:"logo"`
    Favicon     string `json:"favicon"`
}

type BrandingConfig struct {
    PrimaryColor   string `json:"primaryColor"`
    SecondaryColor string `json:"secondaryColor"`
    AccentColor    string `json:"accentColor"`
}

type Config struct {
    System   SystemConfig   `json:"system"`
    Branding BrandingConfig `json:"branding"`
    // ... 其他配置
}

var globalConfig *Config

func LoadConfig() *Config {
    if globalConfig != nil {
        return globalConfig
    }

    data, err := os.ReadFile("config.json")
    if err != nil {
        log.Fatalf("读取配置文件失败: %v", err)
    }

    var cfg Config
    if err := json.Unmarshal(data, &cfg); err != nil {
        log.Fatalf("解析配置文件失败: %v", err)
    }

    globalConfig = &cfg
    return globalConfig
}

func GetSystemConfig() SystemConfig {
    return LoadConfig().System
}

func GetBrandingConfig() BrandingConfig {
    return LoadConfig().Branding
}

前端配置使用

// admin-vue/src/config/index.js
import axios from 'axios'

let systemConfig = null

// 从后端加载系统配置
export async function loadSystemConfig() {
  if (systemConfig) {
    return systemConfig
  }

  try {
    const response = await axios.get('/api/system/config')
    systemConfig = response.data.data
    return systemConfig
  } catch (error) {
    console.error('加载系统配置失败:', error)
    // 使用默认配置
    return getDefaultConfig()
  }
}

// 默认配置
function getDefaultConfig() {
  return {
    name: '辣评',
    fullName: '辣评小说投稿评论平台',
    description: '专业的小说投稿与评论管理系统',
    version: '1.5.0',
    logo: '/assets/logo.svg',
    favicon: '/favicon.ico',
    primaryColor: '#ff4444',
    secondaryColor: '#333333',
    accentColor: '#00aa00'
  }
}

// 获取系统名称
export function getSystemName() {
  return systemConfig?.name || '辣评'
}

// 获取完整名称
export function getSystemFullName() {
  return systemConfig?.fullName || '辣评小说投稿评论平台'
}

// 获取 Logo 路径
export function getLogoPath() {
  return systemConfig?.logo || '/assets/logo.svg'
}

// 获取主题色
export function getPrimaryColor() {
  return systemConfig?.primaryColor || '#ff4444'
}

品牌色彩定义

主色调

/* admin-vue/src/styles/variables.css */
:root {
  /* 主色 - 辣椒红 */
  --color-primary: #ff4444;
  --color-primary-light: #ff6666;
  --color-primary-dark: #cc0000;

  /* 辅助色 - 深灰 */
  --color-secondary: #333333;
  --color-secondary-light: #666666;
  --color-secondary-dark: #000000;

  /* 强调色 - 辣椒蒂绿 */
  --color-accent: #00aa00;
  --color-accent-light: #00cc00;
  --color-accent-dark: #008800;

  /* 背景色 */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #fafafa;

  /* 文字色 */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-placeholder: #cccccc;

  /* 边框色 */
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;

  /* 状态色 */
  --color-success: #00aa00;
  --color-warning: #ff9900;
  --color-danger: #ff4444;
  --color-info: #0099ff;
}

Element Plus 主题定制

// admin-vue/src/styles/element-variables.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #ff4444,
    ),
    'success': (
      'base': #00aa00,
    ),
    'warning': (
      'base': #ff9900,
    ),
    'danger': (
      'base': #ff4444,
    ),
    'info': (
      'base': #0099ff,
    ),
  )
);

界面统一应用

导航栏

<template>
  <div class="navbar">
    <div class="navbar-brand">
      <img :src="logoPath" alt="Logo" class="logo" />
      <span class="system-name"></span>
    </div>
    <!-- 其他导航内容 -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSystemName, getLogoPath } from '@/config'

const systemName = ref('辣评')
const logoPath = ref('/assets/logo.svg')

onMounted(async () => {
  systemName.value = getSystemName()
  logoPath.value = getLogoPath()
})
</script>

<style scoped>
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 40px;
  height: 40px;
}

.system-name {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-primary);
}
</style>

页面标题

<template>
  <div class="page-header">
    <h1></h1>
    <div class="breadcrumb">
      <span></span>
      <span class="separator">/</span>
      <span></span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { getSystemName } from '@/config'

const route = useRoute()
const systemName = getSystemName()

const pageTitle = computed(() => {
  return route.meta.title || '页面'
})

const currentPage = computed(() => {
  return route.meta.breadcrumb || route.name
})
</script>

登录页面

<template>
  <div class="login-page">
    <div class="login-card">
      <div class="login-header">
        <img :src="logoPath" alt="Logo" class="logo" />
        <h1></h1>
        <p class="description"></p>
      </div>

      <el-form :model="form" class="login-form">
        <!-- 登录表单 -->
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSystemFullName, getLogoPath } from '@/config'

const logoPath = ref('/assets/logo.svg')
const systemFullName = ref('辣评小说投稿评论平台')
const systemDescription = ref('专业的小说投稿与评论管理系统')

onMounted(async () => {
  const config = await loadSystemConfig()
  logoPath.value = config.logo
  systemFullName.value = config.fullName
  systemDescription.value = config.description
})
</script>

<style scoped>
.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.login-header h1 {
  font-size: 24px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.description {
  font-size: 14px;
  color: var(--color-text-secondary);
}
</style>

文档标题统一

HTML 标题

// admin-vue/src/utils/title.js
import { getSystemName } from '@/config'

const defaultTitle = getSystemName()

export function getPageTitle(pageTitle) {
  if (pageTitle) {
    return `${pageTitle} - ${defaultTitle}`
  }
  return defaultTitle
}

export function setPageTitle(title) {
  document.title = getPageTitle(title)
}

路由守卫

// admin-vue/src/router/index.js
import { setPageTitle } from '@/utils/title'

router.afterEach((to) => {
  // 设置页面标题
  setPageTitle(to.meta.title)
})

配置文件管理

环境变量

# .env.production
VITE_APP_TITLE=辣评
VITE_APP_DESCRIPTION=辣评小说投稿评论平台

构建时注入

// admin-vue/vite.config.js
export default defineConfig({
  define: {
    __APP_TITLE__: JSON.stringify(process.env.VITE_APP_TITLE),
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version)
  }
})

用户体验一致性

统一前的问题

用户看到不同的系统名称，感到困惑
缺乏品牌认知
界面缺乏特色

统一后的改进

所有地方显示统一的”辣评”名称
专属 Logo 增强品牌识别度
统一的色彩体系提升专业感
配置化管理便于定制

总结

系统名称与品牌统一工作显著提升了辣评平台的品牌形象和用户体验。通过设计专属 Logo、统一系统名称、定义品牌色彩，我们建立了完整的品牌识别系统。

关键成果

设计了独特的”翻开的书本与辣椒笔” Logo
统一了系统名称为”辣评”
定义了完整的品牌色彩体系
实现了配置化管理
提升了品牌识别度

技术亮点

配置文件统一管理
前后端配置同步
主题色彩定制
响应式 Logo 设计

用户反馈

Logo 设计独特，易于识别
系统名称统一，不再困惑
界面更加专业美观
品牌形象更加鲜明

这次品牌统一工作为辣评平台建立了独特的品牌形象，提升了用户对平台的认知度和信任度。

上篇辣评移动端界面全面优化（二十四）

下篇辣评 Docker 容器化与部署方案（二十六）