react+tailwindcss实现一个磁盘硬盘存储空间大小分布代码-html代码-BFW代码库

react+tailwindcss实现一个磁盘硬盘存储空间大小分布代码

代码语言：html

所属分类：其他

代码描述：react+tailwindcss实现一个磁盘硬盘存储空间大小分布代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  
  
  

  
</head>

<body translate="no">
  <body class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition">
	<div id="root"></div>
</body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <!-- 添加 React 和 Babel CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
  <script type="text/babel">
    // 移除 import 语句，因为我们已经通过 CDN 引入了依赖
    const { useState, useRef, StrictMode ,useEffect } = React;
    const { createRoot } = ReactDOM;

function fakeData() {
	const KB = 1024;
	const MB = KB * 1024;
	const GB = MB * 1024;
	const maxMemory = 64 * GB;
	const randomIDAndMemory = () => ({
		id: crypto.randomUUID(),
		memory: Math.round(maxMemory * (Utils.randomFloat(0.1,0.33)))
	});

	return {
		maxMemory,
		data: [
			{
				...randomIDAndMemory(),
				name: "Regular",
				color: "cyan"
			},
			{
				...randomIDAndMemory(),
				name: "System",
				color: "red"
			},
			{
				...randomIDAndMemory(),
				name: "Shared",
				color: "yellow"
			}
		]
	};
}
function Icon({ icon }: .........完整代码请登录后点击上方下载按钮下载查看