58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
|
|
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'
|
|
|
|
export default function CoreAlgorithm() {
|
|
const distanceCode = `
|
|
function calcMd5Distance(s1, s2) {
|
|
let distance = 0;
|
|
for (let i = 0; i < Math.min(s1.length, s2.length); i++) {
|
|
if (s1[i] === s2[i]) {
|
|
continue;
|
|
}
|
|
distance += Math.abs(s1.charCodeAt(i) - s2.charCodeAt(i));
|
|
}
|
|
return distance;
|
|
}
|
|
`
|
|
|
|
const sortCode = `
|
|
function makeSortedNameHashDistanceTuple(targetHash, names) {
|
|
let nameHashDistanceTuple = names.map((name) => {
|
|
let nameMd5 = makeMd5(name);
|
|
let distance = calcMd5Distance(targetHash, nameMd5);
|
|
return [name, nameMd5, distance];
|
|
});
|
|
// sort by distance
|
|
nameHashDistanceTuple.sort((a, b) => {
|
|
return a[2] - b[2];
|
|
});
|
|
return nameHashDistanceTuple;
|
|
}
|
|
`
|
|
|
|
return (
|
|
<div className="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-200">
|
|
<h2 className="text-2xl font-bold mb-4 text-indigo-800 dark:text-indigo-200">核心算法</h2>
|
|
<p className="mb-4 text-gray-600 dark:text-gray-300">md5 哈希计算依赖 js-md5 库。</p>
|
|
<div className="mb-6">
|
|
<SyntaxHighlighter language="html" style={tomorrow} className="rounded-md">
|
|
{'<script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js"></script>'}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
<div className="mb-6">
|
|
<h3 className="text-lg font-semibold mb-2 text-indigo-700 dark:text-indigo-300">哈希距离计算算法</h3>
|
|
<SyntaxHighlighter language="javascript" style={tomorrow} className="rounded-md">
|
|
{distanceCode}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2 text-indigo-700 dark:text-indigo-300">哈希距离排序算法</h3>
|
|
<SyntaxHighlighter language="javascript" style={tomorrow} className="rounded-md">
|
|
{sortCode}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|