🎭 角色介绍页面配置说明

纸鸢博客提供了一个精美的角色介绍页面，支持展示多个角色的详细信息，包括头像、介绍、技能、所属组织等。页面还内置了搜索和组织筛选功能，方便访客快速找到感兴趣的角色。

📁 配置文件说明

角色介绍页面涉及两个主要配置文件：

配置文件	路径	说明
角色数据配置	`src/config/characters.ts`	定义角色列表、角色详细信息
页面功能配置	`src/config/charactersPage.ts`	定义页面标题、搜索、筛选等功能配置

🎭 角色数据配置 (characters.ts)

文件路径

src/config/characters.ts

配置结构

export interface CharactersConfig {
  /* 🏷️ 区域标题 */
  sectionTitle: string;
  /* 📝 区域副标题（支持换行，使用数组形式） */
  sectionSubtitle: string[];
  /* 🎭 角色列表 */
  characters: Character[];
}

角色信息接口

export interface Character {
  /* 🎨 头像图片路径 */
  avatar: string;
  /* 🏷️ 角色名称 */
  name: string;
  /* 📝 角色介绍 */
  description: string;
  /* 💬 口头禅 */
  catchphrase: string;
  /* 🏢 所属组织 */
  organization: CharacterOrganization;
  /* 🌐 社交链接列表 */
  socialLinks: CharacterSocialLink[];
  /* 🎯 技能列表 */
  skills: string[];
  /* 📄 关联文档链接 */
  docUrl?: string;
}

📝 角色数据配置详解

1️⃣ 页面标题和副标题

sectionTitle: '角色介绍',
sectionSubtitle: [
  '了解我们的异环成员，每个人都有独特的技能和个性',
  '一起创造更多精彩的世界'
],

字段	类型	说明
`sectionTitle`	`string`	页面主标题
`sectionSubtitle`	`string[]`	副标题，数组每个元素为一行

2️⃣ 角色信息配置

基础信息

{
  avatar: '/assets/zhiyuan/gura.avif',  // 头像图片路径
  name: '薄荷',                          // 角色名称
  description: '收容二组精英队员...',     // 角色详细介绍
  catchphrase: '冰淇淋是凉的...',         // 角色口头禅
}

所属组织

organization: {
  name: '收容二组',           // 组织名称
  color: 'primary',           // 组织颜色标识
  description: '负责异常收容...'  // 组织描述（鼠标悬停显示）
}

可选颜色值：

primary - 蓝色渐变
secondary - 紫色渐变
accent - 粉色渐变
info - 天蓝渐变
success - 绿色渐变
warning - 橙色渐变
danger - 红色渐变
cyan、teal、indigo、violet、fuchsia、rose 等 26 种颜色

社交链接

socialLinks: [
  {
    name: '攻略',           // 链接名称
    url: 'https://...',     // 链接地址
    icon: '<svg>...</svg>'  // SVG 图标
  },
  {
    name: '社区',
    url: 'https://...',
    icon: '<svg>...</svg>'
  }
],

技能列表

skills: ['霹雳疾风斩', '超级连风爪', '薄荷味旋风', '灵系伤害'],

关联文档

docUrl: '/basic-syntax-guide'  // 点击角色卡片跳转的文档链接

⚙️ 页面功能配置 (charactersPage.ts)

文件路径

src/config/charactersPage.ts

配置结构

export interface CharactersPageConfig {
  /* 📄 页面标题 */
  pageTitle: string;
  /* 📝 页面描述 */
  pageDescription: string;
  /* 🔍 搜索配置 */
  search: { ... };
  /* 🎨 筛选配置 */
  filter: { ... };
  /* ☀️ 空状态配置 */
  emptyState: { ... };
  /* ✨ 动画配置 */
  animation: { ... };
}

📋 页面功能配置详解

1️⃣ 页面元信息

pageTitle: '角色列表 - 异环成员介绍',
pageDescription: '了解异环游戏中的所有角色...',

字段	类型	说明
`pageTitle`	`string`	浏览器标签页标题
`pageDescription`	`string`	页面描述，用于 SEO

2️⃣ 搜索配置

search: {
  placeholder: '搜索角色名称、组织或口头禅...',
  clearButton: true,
  results: {
    found: (count: number) => `找到 ${count} 个角色`,
  },
},

字段	类型	说明
`placeholder`	`string`	搜索框占位提示文本
`clearButton`	`boolean`	是否显示清除按钮
`results.found`	`function`	搜索结果提示文本，接收角色数量参数

3️⃣ 筛选配置

filter: {
  allLabel: '全部角色',
  organizationLabel: '所属组织',
  organizationColors: ['primary', 'secondary', 'accent', ...],
},

字段	类型	说明
`allLabel`	`string`	「全部角色」按钮文本
`organizationLabel`	`string`	组织筛选区域标签
`organizationColors`	`string[]`	组织颜色列表，按顺序分配给各组织

4️⃣ 空状态配置

emptyState: {
  noCharacters: '暂无角色信息',
  noSearchResults: '没有找到匹配的角色',
  resetButton: '重置筛选',
},

字段	类型	说明
`noCharacters`	`string`	无角色时的提示文本
`noSearchResults`	`string`	搜索无结果时的提示文本
`resetButton`	`string`	重置按钮文本

5️⃣ 动画配置

animation: {
  duration: 600,       // 动画持续时间（毫秒）
  staggerDelay: 100,   // 卡片交错动画延迟（毫秒）
},

字段	类型	说明
`duration`	`number`	单个动画持续时间，单位毫秒
`staggerDelay`	`number`	卡片之间动画延迟，单位毫秒

🎯 完整配置示例

角色数据配置示例

const defaultCharactersConfig: CharactersConfig = {
  sectionTitle: '角色介绍',
  sectionSubtitle: [
    '了解我们的异环成员，每个人都有独特的技能和个性',
    '一起创造更多精彩的世界'
  ],
  characters: [
    {
      avatar: '/assets/characters/avatar1.avif',
      name: '角色名称',
      description: '角色的详细介绍文本...',
      catchphrase: '角色的经典台词',
      organization: {
        name: '所属组织',
        color: 'primary',
        description: '组织的详细描述'
      },
      socialLinks: [
        {
          name: '攻略',
          url: 'https://example.com/guide',
          icon: '<svg>...</svg>'
        }
      ],
      skills: ['技能1', '技能2', '技能3'],
      docUrl: '/doc/character-guide'
    }
  ]
};

页面功能配置示例

const defaultCharactersPageConfig: CharactersPageConfig = {
  pageTitle: '角色列表 - 我的团队',
  pageDescription: '了解我们团队的所有成员',

  search: {
    placeholder: '搜索成员名称或技能...',
    clearButton: true,
    results: {
      found: (count: number) => `共找到 ${count} 位成员`,
    },
  },

  filter: {
    allLabel: '全部成员',
    organizationLabel: '所属部门',
    organizationColors: [
      'primary', 'secondary', 'accent', 'success', 'warning'
    ],
  },

  emptyState: {
    noCharacters: '暂无成员信息',
    noSearchResults: '未找到匹配的成员',
    resetButton: '清除筛选',
  },

  animation: {
    duration: 500,
    staggerDelay: 80,
  },
};

💡 最佳实践

图片优化：角色头像建议使用 .avif 或 .webp 格式，尺寸建议 240x240 像素
描述长度：角色介绍建议控制在 100-150 字，保持卡片高度统一
组织颜色：为不同组织分配不同颜色，便于快速识别
技能数量：建议每个角色展示 3-5 个主要技能
社交链接：建议提供 2-3 个相关链接，如攻略、社区、视频等

⚠️ 注意事项

头像路径：确保头像图片路径正确，图片存放在 public 目录下
颜色值：组织颜色必须在 organizationColors 列表中存在
SVG 图标：社交链接的图标需要使用 SVG 格式
文档链接：docUrl 是可选的，不设置则点击卡片无跳转
配置热更新：修改配置后需要重新启动开发服务器才能生效

🔗 相关配置

🕊️ 白木原创开发 🔗 gl.baimu.live