欢迎加入开源鸿蒙PC社区：
https://harmonypc.csdn.net/

atomgit仓库地址： https://atomgit.com/xiaomei11/jinshuyingduyurongdian

🔧 金属硬度与熔点对照表APP - 完整技术实现指南

一、项目概述

金属硬度与熔点对照表APP是一个材料工程参考工具，为工程师、学生和研究人员提供常见金属材料的硬度等级、熔点温度等物理特性的快速查询和对比分析功能。

1.1 系统架构设计

┌─────────────────────────────────────────────────────────────┐
│                  金属硬度与熔点对照表系统                     │
├─────────────────────────────────────────────────────────────┤
│                    UI层 (index.html)                        │
│  ┌─────────────┬─────────────┬─────────────┬─────────────┐  │
│  │   硬度等级   │   熔点温度   │   对比分析   │   可视化图表  │  │
│  │    展示区    │    展示区    │    功能区    │    展示区    │  │
│  └─────────────┴─────────────┴─────────────┴─────────────┘  │
├─────────────────────────────────────────────────────────────┤
│                  业务逻辑层 (app.js)                         │
│  ┌────────────┬────────────┬────────────┬────────────┐    │
│  │  数据筛选   │  表格渲染   │  对比分析   │  图表绘制   │    │
│  └────────────┴────────────┴────────────┴────────────┘    │
├─────────────────────────────────────────────────────────────┤
│                  数据层 (metalData数组)                      │
│  ┌──────────────────────────────────────────────────────┐ │
│  │  18种金属数据：硬度、熔点、密度、应用领域等           │ │
│  └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

1.2 核心功能模块

模块	功能描述	技术要点
硬度等级表	展示金属的布氏、洛氏、维氏硬度	数据表格、筛选排序
熔点温度表	展示金属的熔点、沸点、密度	数据表格、等级分类
对比分析	多种金属物理特性对比	多选框、对比表格
可视化图表	硬度与熔点的条形图展示	CSS条形图、动态渲染
详情弹窗	展示金属详细信息	模态框、应用领域

1.3 设计理念

应用采用工程风格配色方案，以深灰蓝色为主色调，配合蓝、橙、红三色区分不同等级，营造专业、科学的视觉氛围。

---

二、数据模型设计

2.1 金属数据结构

{
    id: 1,                          // 唯一标识
    name: '金',                     // 金属名称
    symbol: 'Au',                   // 化学符号
    hardnessHB: 25,                 // 布氏硬度(HB)
    hardnessHRC: '-',               // 洛氏硬度(HRC)
    hardnessHV: 30,                 // 维氏硬度(HV)
    meltingPoint: 1064,             // 熔点(°C)
    boilingPoint: 2856,             // 沸点(°C)
    density: 19.32,                 // 密度(g/cm³)
    color: '#FFD700',               // 代表色
    applications: ['珠宝首饰', ...], // 主要应用
    description: '金是一种贵金属...' // 材料简介
}

设计要点：

• hardnessHB/HRC/HV：三种硬度标准，满足不同行业需求
• meltingPoint/boilingPoint：熔点和沸点，用于加工工艺参考
• density：材料密度，用于重量计算
• applications：应用领域数组，便于快速了解用途

2.2 硬度等级划分

等级	布氏硬度范围	典型金属
软金属	HB < 100	金、银、铝、锡、铅、钠
中等硬度	HB 100-300	钛、钴、锰、钼
硬金属	HB > 300	钨、铬

2.3 熔点等级划分

等级	熔点范围	典型金属
低熔点	< 500°C	锡、铅、钠、锌
中熔点	500-1500°C	金、银、铜、铝、铁、镍
高熔点	> 1500°C	钛、钨、铬、钼、铂

2.4 金属数据示例

金属	符号	布氏硬度	熔点(°C)	密度(g/cm³)
钨	W	350	3422	19.25
铬	Cr	350	1907	7.19
钛	Ti	150	1668	4.51
铁	Fe	80	1538	7.87
铜	Cu	40	1085	8.96
金	Au	25	1064	19.32
铝	Al	25	660	2.70
锡	Sn	5	232	7.31
钠	Na	0.5	98	0.97

---

三、UI组件设计

3.1 页面布局结构

┌─────────────────────────────────────────────────────┐
│  Header: 标题 + 副标题                              │
├─────────────────────────────────────────────────────┤
│  Navigation: 硬度等级 | 熔点温度 | 对比分析 | 可视化图表 │
├─────────────────────────────────────────────────────┤
│  Filter Bar: 筛选条件 + 排序方式                    │
├─────────────────────────────────────────────────────┤
│  Data Table: 数据表格                              │
├─────────────────────────────────────────────────────┤
│  Scale Bar: 等级划分标准可视化                      │
└─────────────────────────────────────────────────────┘

3.2 颜色方案

颜色变量	色值	用途
--primary-color	#2C3E50	主色调，深灰蓝
--secondary-color	#3498DB	辅助色，蓝色
--soft-color	#3498DB	软金属/低熔点标识
--medium-color	#F39C12	中等硬度/中熔点标识
--hard-color	#E74C3C	硬金属/高熔点标识

3.3 核心组件设计

3.3.1 数据表格组件

<table class="data-table">
    <thead>
        <tr>
            <th>金属名称</th>
            <th>化学符号</th>
            <th>布氏硬度(HB)</th>
            <th>洛氏硬度(HRC)</th>
            <th>维氏硬度(HV)</th>
            <th>硬度等级</th>
        </tr>
    </thead>
    <tbody id="hardnessTableBody">
    </tbody>
</table>

3.3.2 等级标识组件

<span class="hardness-badge soft">软金属</span>
<span class="hardness-badge medium">中等硬度</span>
<span class="hardness-badge hard">硬金属</span>

3.3.3 条形图组件

<div class="bar-item">
    <span class="bar-label">W</span>
    <div class="bar-container">
        <div class="bar-fill hard" style="width: 100%"></div>
    </div>
    <span class="bar-value">350 HB</span>
</div>

---

四、核心代码实现

4.1 硬度等级判断函数

function getHardnessLevel(hb) {
    if (hb < 100) return 'soft';
    if (hb <= 300) return 'medium';
    return 'hard';
}

function getHardnessLevelName(hb) {
    if (hb < 100) return '软金属';
    if (hb <= 300) return '中等硬度';
    return '硬金属';
}

实现要点：

• 使用布氏硬度(HB)作为等级划分标准
• 返回等级标识用于CSS类名
• 返回等级名称用于显示

4.2 表格渲染与筛选排序

function renderHardnessTable(filter = 'all', sort = 'asc') {
    const tbody = document.getElementById('hardnessTableBody');
    let data = [...metalData];
    
    // 筛选
    if (filter === 'soft') {
        data = data.filter(m => m.hardnessHB < 100);
    } else if (filter === 'medium') {
        data = data.filter(m => m.hardnessHB >= 100 && m.hardnessHB <= 300);
    } else if (filter === 'hard') {
        data = data.filter(m => m.hardnessHB > 300);
    }
    
    // 排序
    if (sort === 'asc') {
        data.sort((a, b) => a.hardnessHB - b.hardnessHB);
    } else if (sort === 'desc') {
        data.sort((a, b) => b.hardnessHB - a.hardnessHB);
    } else if (sort === 'name') {
        data.sort((a, b) => a.name.localeCompare(b.name, 'zh'));
    }
    
    // 渲染...
}

实现要点：

• 使用展开运算符[...metalData]创建数据副本
• 筛选使用Array.filter()方法
• 排序使用Array.sort()方法
• 中文排序使用localeCompare()方法

4.3 对比分析功能

function performCompare() {
    const checkboxes = document.querySelectorAll('#metalCheckboxes input:checked');
    const selectedIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
    
    if (selectedIds.length < 2) {
        alert('请至少选择两种金属进行对比');
        return;
    }
    
    const selectedMetals = metalData.filter(m => selectedIds.includes(m.id));
    renderCompareResult(selectedMetals);
}

function renderCompareResult(metals) {
    const thead = table.querySelector('thead tr');
    thead.innerHTML = '<th>属性</th>' + metals.map(m => `<th>${m.name}</th>`).join('');
    
    const properties = [
        { name: '化学符号', key: 'symbol' },
        { name: '布氏硬度(HB)', key: 'hardnessHB' },
        // ...
    ];
    
    tbody.innerHTML = properties.map(prop => `
        <tr>
            <td><strong>${prop.name}</strong></td>
            ${metals.map(m => `<td>${m[prop.key]}</td>`).join('')}
        </tr>
    `).join('');
}

实现要点：

• 使用多选框收集用户选择
• 至少选择两种金属才能对比
• 动态生成对比表格的表头和内容

4.4 可视化图表渲染

function renderCharts() {
    const hardnessChart = document.getElementById('hardnessChart');
    const maxHardness = Math.max(...metalData.map(m => m.hardnessHB));
    
    hardnessChart.innerHTML = metalData.map(metal => {
        const percentage = (metal.hardnessHB / maxHardness) * 100;
        const level = getHardnessLevel(metal.hardnessHB);
        return `
            <div class="bar-item">
                <span class="bar-label">${metal.symbol}</span>
                <div class="bar-container">
                    <div class="bar-fill ${level}" style="width: ${percentage}%"></div>
                </div>
                <span class="bar-value">${metal.hardnessHB} HB</span>
            </div>
        `;
    }).join('');
}

实现要点：

• 使用CSS实现条形图，无需第三方图表库
• 计算最大值作为100%基准
• 根据等级设置不同颜色

---

五、CSS样式设计

5.1 等级标识样式

.hardness-badge, .melting-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.hardness-badge.soft, .melting-badge.low {
    background: rgba(52, 152, 219, 0.15);
    color: var(--soft-color);
}

.hardness-badge.medium, .melting-badge.medium {
    background: rgba(243, 156, 18, 0.15);
    color: var(--medium-color);
}

.hardness-badge.hard, .melting-badge.high {
    background: rgba(231, 76, 60, 0.15);
    color: var(--hard-color);
}

5.2 等级划分条样式

.scale-bar {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
}

.scale-segment.soft, .scale-segment.low-melt {
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%);
    color: white;
}

.scale-segment.medium, .scale-segment.medium-melt {
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    color: white;
}

.scale-segment.hard, .scale-segment.high-melt {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    color: white;
}

5.3 条形图样式

.bar-container {
    flex: 1;
    height: 24px;
    background: var(--bg-color);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bar-fill.soft {
    background: linear-gradient(90deg, #3498DB, #2980B9);
}

---

六、数据完整性验证

6.1 金属数据覆盖

分类	数量	代表金属
贵金属	3种	金、银、铂
常用工业金属	6种	铁、铜、铝、锌、镍、镁
难熔金属	3种	钨、钼、铬
特殊金属	4种	钛、钴、锰、锡
低熔点金属	2种	铅、钠
总计	18种	✅ 覆盖主要金属材料

6.2 硬度数据验证

验证项	结果
布氏硬度范围	0.5-350 HB ✅
洛氏硬度标注	硬金属已标注 ✅
维氏硬度对应	与布氏硬度成比例 ✅

6.3 熔点数据验证

验证项	结果
熔点范围	98-3422°C ✅
沸点数据	全部已填写 ✅
密度数据	全部已填写 ✅

---

七、功能测试清单

测试项	预期结果	测试状态
导航切换	Tab正确切换内容	✅ 通过
硬度筛选	按等级正确筛选	✅ 通过
硬度排序	升序/降序/名称排序	✅ 通过
熔点筛选	按范围正确筛选	✅ 通过
熔点排序	升序/降序/名称排序	✅ 通过
对比功能	至少选择2种金属	✅ 通过
图表渲染	条形图正确显示	✅ 通过
详情弹窗	点击行显示详情	✅ 通过
响应式	移动端显示正常	✅ 通过

---

八、扩展功能建议

8.1 搜索功能

function searchMetal(keyword) {
    return metalData.filter(m => 
        m.name.includes(keyword) ||
        m.symbol.toLowerCase().includes(keyword.toLowerCase())
    );
}

8.2 单位转换

function convertHardness(hb, toUnit) {
    switch(toUnit) {
        case 'HV': return Math.round(hb * 1.1);
        case 'HRC': return Math.round((hb - 100) / 10);
        default: return hb;
    }
}

8.3 数据导出

function exportToCSV(metals) {
    const headers = ['名称', '符号', '硬度HB', '熔点', '密度'];
    const rows = metals.map(m => [m.name, m.symbol, m.hardnessHB, m.meltingPoint, m.density]);
    // 生成CSV文件...
}

---

九、总结

金属硬度与熔点对照表APP通过清晰的数据展示和丰富的交互功能，为材料工程领域提供了便捷的参考工具。应用包含以下核心特性：

1. 全面的数据覆盖：18种常见金属的完整物理特性
2. 灵活的筛选排序：支持按等级筛选和多种排序方式
3. 直观的对比分析：多种金属特性横向对比
4. 可视化图表：条形图直观展示硬度与熔点分布
5. 专业的设计风格：工程风格配色，科学严谨

项目采用纯前端技术栈实现，无需后端支持，便于部署和维护。代码结构清晰，易于扩展新功能。