React Hooks + TypeScript 仿 MacOS 桌面，创建低仿但不失优雅

2024-02-16 16:10:20

初识低仿 macOS 项目

对于很多设计和开发人员来说，macOS 系统是心目中的白月光。不仅界面精美，而且功能强大。然而，由于种种原因，我们无法在自己的电脑上使用 macOS 系统。于是，诞生了仿 macOS 项目。

仿 macOS 项目，顾名思义，就是模仿 macOS 系统的外观和功能，在其他操作系统上打造一个虚拟的 macOS 桌面。这些项目通常使用前端技术，如 HTML、CSS、JavaScript 等，来实现 macOS 系统的界面和功能。

项目初始化

为了打造一个低仿但不失优雅的 macOS 桌面，我选择了 React + TypeScript 作为技术栈。React 是一个强大的前端框架，可以帮助我们轻松构建出复杂的 UI 界面。TypeScript 是 JavaScript 的超集，具有更强的类型检查功能，可以帮助我们编写出更加健壮的代码。

首先，我们创建一个新的 React 项目：

npx create-react-app my-macos-desktop

然后，安装 TypeScript：

npm install typescript @types/react @types/react-dom

最后，将项目中的 tsconfig.json 文件替换为以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015", "react"],
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

打造 Dock

Dock 是 macOS 系统中一个非常重要的元素，它位于屏幕底部，可以快速启动应用程序和切换任务。我们要做的第一件事，就是打造一个低仿的 Dock。

首先，我们在项目中创建一个新的组件，名为 Dock.tsx：

import React from "react";

const Dock: React.FC = () => {
  return (
    <div className="dock">
      <div className="dock-item">
        <img src="./icons/finder.png" alt="Finder" />
        <span>Finder</span>
      </div>
      <div className="dock-item">
        <img src="./icons/safari.png" alt="Safari" />
        <span>Safari</span>
      </div>
      <div className="dock-item">
        <img src="./icons/mail.png" alt="Mail" />
        <span>Mail</span>
      </div>
      <div className="dock-item">
        <img src="./icons/messages.png" alt="Messages" />
        <span>Messages</span>
      </div>
      <div className="dock-item">
        <img src="./icons/maps.png" alt="Maps" />
        <span>Maps</span>
      </div>
    </div>
  );
};

export default Dock;

然后，我们在项目中创建一个新的 CSS 文件，名为 dock.css：

.dock {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
}

.dock-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 10px;
}

.dock-item img {
  width: 24px;
  height: 24px;
  margin: 10px;
}

.dock-item span {
  font-size: 12px;
  color: #fff;
}

最后，我们在 App.tsx 文件中引入 Dock 组件和 dock.css 文件：

import Dock from "./components/Dock";
import "./styles/dock.css";

const App: React.FC = () => {
  return (
    <div className="app">
      <Dock />
    </div>
  );
};

export default App;