建筑网站-建筑导航网站代码汇总

批给精选 · 发表于 2026-5-11 21:45:13

项目概述

项目名称：建筑网站 - 建筑行业网址导航

技术栈：React + TypeScript + Tailwind CSS + Webpack

分类数量：28个建筑专业分类

网站数量：224+个精选网站

1. package.json

{
  "name": "arch-nav-pro",
  "version": "1.0.0",
  "scripts": {
"dev": "webpack serve",
"build": "webpack --mode production",
"typecheck": "tsc --noEmit"
  },
  "dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0",
"framer-motion": "^11.16.1",
"lucide-react": "^0.294.0"
  },
  "devDependencies": {
"@babel/core": "^7.23.5",
"@babel/preset-env": "^7.23.5",
"@babel/preset-react": "^7.23.5",
"@babel/preset-typescript": "^7.23.5",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"autoprefixer": "^10.4.16",
"babel-loader": "^9.1.3",
"css-loader": "^6.8.1",
"html-webpack-plugin": "^5.5.3",
"postcss": "^8.4.31",
"postcss-loader": "^7.3.3",
"style-loader": "^3.3.3",
"tailwindcss": "^3.3.5",
"typescript": "^5.3.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
  }
}

2. webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, argv) => {
  const isDev = argv.mode !== 'production';
  return {
mode: isDev ? 'development' : 'production',
entry: './src/index.tsx',
output: {
   path: path.resolve(__dirname, 'dist'),
   filename: 'bundle.js'
},
module: {
   rules: [
      {
      test: /\.(ts|tsx|js|jsx)$/,
      exclude: /node_modules/,
      use: {
         loader: 'babel-loader',
         options: {
            presets: [
            ['@babel/preset-react', { runtime: 'automatic', development: isDev }],
            '@babel/preset-env',
            '@babel/preset-typescript'
            ]
         }
      }
      },
      {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
      }
   ]
},
resolve: {
   extensions: ['.ts', '.tsx', '.js', '.jsx']
},
devServer: {
   port: 3266,
   allowedHosts: 'all',
   historyApiFallback: { index: '/index.html' }
},
plugins: [
   new HtmlWebpackPlugin({
      template: './index.html',
      inject: 'body'
   })
]
  };
};

3. tailwind.config.js

module.exports = {
  content: [
'./src/**/*.{js,jsx,ts,tsx}',
'./index.html'
  ],
  darkMode: 'class',
  theme: {
extend: {
   colors: {
      primary: '#2A5CAA',
   }
}
  },
  plugins: []
};

4. postcss.config.js

module.exports = {
  plugins: {
tailwindcss: {},
autoprefixer: {}
  }
};

5. tsconfig.json

{
  "compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
  },
  "include": ["src"]
}

6. index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>问筑网 - 建筑行业专业导航</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div id="root"></div>
</body>
</html>

7. src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles/index.css';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
<App />
  </React.StrictMode>
);

8. src/styles/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.scrollbar-thin::-webkit-scrollbar {
  height: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: #1e293b;
  border-radius: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

9. src/types/index.ts

export interface Category {
  id: string;
  name: string;
  icon: string;
  description: string;
  color: string;
}

export interface Website {
  id: string;
  name: string;
  url: string;
  description: string;
  categoryId: string;
  icon?: string;
  isHot?: boolean;
}

export type Theme = 'light' | 'dark';

10. src/data/categories.ts

export interface Category {
  id: string;
  name: string;
  icon: string;
  description: string;
  color: string;
}

export const categories: Category[] = [
  { id: 'design', name: '建筑设计', icon: '🏛️', description: '设计公司、作品展示、设计理念', color: '#2A5CAA' },
  { id: 'construction', name: '建筑施工', icon: '🏗️', description: '施工技术、项目管理、现场实务', color: '#E67E22' },
  { id: 'materials', name: '建筑材料', icon: '🧱', description: '材料选型、供应商、技术参数', color: '#8B4513' },
  { id: 'standards', name: '规范标准', icon: '📜', description: '国标地标、行业规范、技术规程', color: '#2C3E50' },
  { id: 'software', name: '专业软件', icon: '💻', description: '设计软件、算量工具、BIM平台', color: '#27AE60' },
  { id: 'news', name: '行业资讯', icon: '📰', description: '行业新闻、政策解读、市场动态', color: '#C0392B' },
  { id: 'education', name: '教育认证', icon: '🎓', description: '培训课程、资格考试、继续教育', color: '#8E44AD' },
  { id: 'procurement', name: '工程招采', icon: '📋', description: '招标信息、采购平台、供应商库', color: '#16A085' },
  { id: 'green', name: '绿色建筑', icon: '🌿', description: '节能技术、环保材料、认证体系', color: '#27AE60' },
  { id: 'smart', name: '智能建筑', icon: '🤖', description: '楼宇自控、智能家居、物联网', color: '#3498DB' },
  { id: 'prefab', name: '装配式建筑', icon: '🏭', description: '预制构件、装配技术、模块化', color: '#E67E22' },
  { id: 'bim', name: 'BIM技术', icon: '📐', description: '建模技术、协同设计、施工模拟', color: '#9B59B6' },
  { id: 'cost', name: '工程造价', icon: '💰', description: '造价咨询、预算编制、结算审核', color: '#F39C12' },
  { id: 'supervision', name: '工程监理', icon: '👁️', description: '监理服务、质量控制、进度管理', color: '#1ABC9C' },
  { id: 'fire', name: '建筑消防', icon: '🧯', description: '消防设计、防火材料、安全评估', color: '#E74C3C' },
  { id: 'electrical', name: '建筑电气', icon: '⚡', description: '电气设计、照明系统、弱电工程', color: '#F1C40F' },
  { id: 'plumbing', name: '建筑给排水', icon: '💧', description: '给排水设计、管道系统、水处理', color: '#3498DB' },
  { id: 'hvac', name: '建筑暖通', icon: '❄️', description: '暖通空调、通风系统、节能技术', color: '#00BCD4' },
  { id: 'structure', name: '建筑结构', icon: '🏗️', description: '结构设计、抗震技术、结构加固', color: '#795548' },
  { id: 'foundation', name: '地基基础', icon: '📍', description: '地基处理、桩基工程、基坑支护', color: '#607D8B' },
  { id: 'decoration', name: '装饰装修', icon: '🎨', description: '室内设计、装修施工、软装搭配', color: '#E91E63' },
  { id: 'curtain', name: '建筑幕墙', icon: '🪟', description: '幕墙设计、石材幕墙、玻璃幕墙', color: '#9E9E9E' },
  { id: 'landscape', name: '景观设计', icon: '🌳', description: '园林设计、景观规划、绿化配置', color: '#4CAF50' },
  { id: 'energy', name: '建筑节能', icon: '🔋', description: '能耗分析、节能改造、绿色认证', color: '#FF9800' },
  { id: 'inspection', name: '质量检测', icon: '🔍', description: '质量检测、工程验收、材料检测', color: '#795548' },
  { id: 'market', name: '材价行情', icon: '📊', description: '材料价格、市场行情、造价指标', color: '#607D8B' },
  { id: 'vacancy', name: '招聘求职', icon: '👷', description: '建筑设计岗位、行业招聘、求职信息', color: '#2196F3' },
  { id: 'forum', name: '社区论坛', icon: '💬', description: '同行交流、问题答疑、经验分享', color: '#9C27B0' }
];

来源：问筑 forum-51 | thread-11534