SUSI Skill CMS高级技巧：自定义技能评分系统实现教程

SUSI Skill CMS是一个强大的Web应用框架，用于编辑SUSI技能，它提供了丰富的功能来帮助开发者创建、管理和优化AI技能。本文将详细介绍如何在SUSI Skill CMS中实现自定义技能评分系统，让你的AI技能能够收集用户反馈并不断改进。## 了解SUSI技能评分系统的基础SUSI Skill CMS的评分系统允许用户对技能进行星级评价，帮助开发者了解技能的表现和用户满意度。评

苏战锬Marvin

638人浏览 · 2026-03-05 00:25:18

苏战锬Marvin · 2026-03-05 00:25:18 发布

SUSI Skill CMS高级技巧：自定义技能评分系统实现教程

【免费下载链接】susi_skill_cms A web application framework to edit susi skills http://skills.susi.ai 项目地址: https://gitcode.com/gh_mirrors/su/susi_skill_cms

SUSI Skill CMS是一个强大的Web应用框架，用于编辑SUSI技能，它提供了丰富的功能来帮助开发者创建、管理和优化AI技能。本文将详细介绍如何在SUSI Skill CMS中实现自定义技能评分系统，让你的AI技能能够收集用户反馈并不断改进。

了解SUSI技能评分系统的基础

SUSI Skill CMS的评分系统允许用户对技能进行星级评价，帮助开发者了解技能的表现和用户满意度。评分系统主要由两个核心组件构成：

SkillRating组件：负责显示和处理用户的评分交互
SkillRatingCard组件：展示评分统计数据和可视化图表

SUSI AI聊天机器人界面，评分系统通常集成在类似这样的交互界面中

探索评分系统的核心代码结构

要自定义评分系统，首先需要了解其核心代码结构。评分相关的主要代码位于以下文件：

src/components/SkillRating/SkillRating.js：基础评分组件
src/components/SkillRating/SkillRatingCard.js：评分统计和图表展示组件

这些组件使用React框架构建，并结合了Redux进行状态管理，以及Recharts库进行数据可视化。

自定义评分星星样式的实用方法

评分星星是用户交互的核心元素，通过修改SkillRating.js文件，你可以轻松自定义星星的样式：

打开src/components/SkillRating/SkillRating.js文件
找到Ratings组件的配置部分：

<Ratings
  rating={props.rating}
  widgetRatedColors="#ffbb28"
  widgetDimensions="20px"
  widgetSpacings="0px"
>

修改以下属性来自定义星星样式：
- widgetRatedColors：已评分星星的颜色
- widgetDimensions：星星的大小
- widgetSpacings：星星之间的间距

例如，要将星星颜色改为蓝色且增大尺寸，可以这样修改：

<Ratings
  rating={props.rating}
  widgetRatedColors="#4285F4"
  widgetDimensions="24px"
  widgetSpacings="2px"
>

高级自定义：修改评分统计图表

SkillRatingCard组件提供了评分数据的可视化展示，包括柱状图和折线图。你可以通过修改src/components/SkillRating/SkillRatingCard.js来自定义这些图表。

更改柱状图颜色

在SkillRatingCard.js中，找到柱状图颜色配置：

fill={[
  '#81C784',
  '#AED581',
  '#FFF176',
  '#FFB74D',
  '#E57373',
][index % 5]}

你可以修改这些颜色值来自定义不同星级评分的柱状图颜色，例如使用更符合品牌风格的颜色方案。

调整图表尺寸和布局

通过修改chartWidth和ratingsOverTimeWidth状态变量，可以调整图表的尺寸：

this.setState({
  chartWidth: windowWidth * 0.8 > 500 ? 400 : windowWidth * 0.8,
  ratingsOverTimeWidth: windowWidth * 0.8 > 800 ? 800 : windowWidth * 0.8,
  // ...其他状态
});

添加自定义评分反馈消息

评分系统可以通过反馈消息增强用户体验。在SkillRatingCard.js中，getRatingMessage方法定义了不同评分对应的反馈文本：

getRatingMessage = () => {
  const { userRating } = this.props;
  switch (userRating) {
    case 0:
      return 'The skill has not been rated by you';
    case 1:
      return 'Hated it';
    case 2:
      return 'Disliked it';
    case 3:
      return "It's OK";
    case 4:
      return 'Liked it';
    case 5:
      return 'Loved it';
    default:
      return '';
  }
};

你可以根据需要修改这些消息，使其更符合你的应用风格或本地化需求。

集成自定义评分系统到技能页面

要将自定义的评分系统集成到技能页面，需要在技能详情页面组件中引入SkillRatingCard。通常这是在src/components/SkillPage/SkillListing.js文件中完成的。

确保你的评分组件被正确导入并在渲染方法中使用：

import SkillRatingCard from '../SkillRating/SkillRatingCard';

// ...

render() {
  return (
    <div>
      {/* 其他技能详情内容 */}
      <SkillRatingCard />
    </div>
  );
}