forked from Gitlink/gitlink_help_center
50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
import React from 'react';
|
||
import BrowserOnly from '@docusaurus/BrowserOnly';
|
||
import { useLocation } from '@docusaurus/router';
|
||
import styles from './RatingStats.module.css';
|
||
|
||
function RatingStatsContent() {
|
||
const location = useLocation();
|
||
|
||
// 为了演示，这里使用一个简单的哈希函数生成伪随机数
|
||
const generatePseudoRandom = (str, min, max) => {
|
||
let hash = 0;
|
||
for (let i = 0; i < str.length; i++) {
|
||
const char = str.charCodeAt(i);
|
||
hash = ((hash << 5) - hash) + char;
|
||
hash = hash & hash; // 转换为32位整数
|
||
}
|
||
|
||
// 将哈希值转换为min和max之间的数
|
||
const normalizedHash = Math.abs(hash) / 2147483647; // 2147483647是2^31-1，最大的32位有符号整数
|
||
return min + normalizedHash * (max - min);
|
||
};
|
||
|
||
// 基于当前路径生成伪随机的评分数据
|
||
const averageRating = generatePseudoRandom(location.pathname, 3.5, 5.0).toFixed(1);
|
||
const ratingCount = Math.floor(generatePseudoRandom(location.pathname, 10, 100));
|
||
|
||
// 计算星星的填充百分比
|
||
const fillPercentage = (averageRating / 5) * 100;
|
||
|
||
return (
|
||
<div className={styles.statsContainer}>
|
||
<div className={styles.ratingValue}>{averageRating}</div>
|
||
<div className={styles.starsOuter}>
|
||
<div
|
||
className={styles.starsInner}
|
||
style={{ width: `${fillPercentage}%` }}
|
||
></div>
|
||
</div>
|
||
<div className={styles.ratingCount}>{ratingCount} 人评分</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function RatingStats() {
|
||
return (
|
||
<BrowserOnly>
|
||
{() => <RatingStatsContent />}
|
||
</BrowserOnly>
|
||
);
|
||
}
|