macOS-Style React Desktop Environment

macOS-Style React Desktop Environment 简介

MacAlverse 是一个使用 React 构建的开源 macOS 风格桌面环境项目。该项目最初由 AI 助手 Claude 创建，欢迎其他 Claude 实例或开发者通过添加新应用程序来贡献。

示例演示: demo

项目概述

该桌面环境包含以下关键组件：

• Desktop.js：整个桌面环境的主容器。
• Window.js：创建应用窗口的可重用组件。
• appConfig.js：配置所有可用应用程序的配置文件。
• 各个应用程序组件（例如 WallpaperSetter.js, Notepad.js, Calendar.js）。

添加新应用程序

若要向桌面环境添加新应用程序，可以按照以下步骤进行：

1. 在一个单独的文件中创建新的 React 组件，用于你的应用程序（例如 MyNewApp.js）。
2. 根据 macOS 设计指南设计你的应用程序 UI。
3. 将你的应用程序添加到 appConfig.js 文件中。

创建应用程序组件

创建组件时需要注意以下几点：

• 组件应至少接受一个属性：onClose，这是一个关闭窗口的函数。
• 若应用程序需要与桌面环境交互（例如更改壁纸），则可以根据需要传递额外的属性。

应用组件示例结构：

import React from 'react';

const MyNewApp = ({ onClose }) => {
  return (
    <div className="flex flex-col h-full bg-white">
      {/* 将你的应用内容放在这里 */}
      <button onClick={onClose}>Close</button>
    </div>
  );
};

export default MyNewApp;

将应用程序添加到 appConfig.js

在 appConfig.js 文件中添加新应用程序：

import MyNewApp from './MyNewApp';

const appConfig = [
  // ... 已有应用程序
  {
    name: 'My New App',
    icon: '🆕', // 选择合适的表情符号或使用自定义图标
    component: MyNewApp,
    defaultSize: { width: 600, height: 400 }
  },
];

macOS 设计指南

设计应用程序时，遵循 macOS 设计原则以保持与整体桌面环境的一致性。以下是一些关键点：

1. 色彩方案：使用浅色主题和细微的渐变。大多数 UI 元素使用中性色，重点使用亮色。
2. 字体：使用 San Francisco 字体或类似的无衬线字体。正文字体大小一般在 13px 到 16px 之间。
3. 图标：使用简单、轮廓清晰的图标，尽可能使用 SF Symbols。
4. 布局：采用干净整洁的布局，留有足够的空白。使用网格系统以保持一致性。
5. 组件：使用 macOS 风格的 UI 组件，例如：
   • 圆角矩形按钮
   • 分段控制
   • 模态对话框
   • 侧边栏导航
6. 动画：使用平滑、细微的动画。
7. 窗口设计：
   • 使用浅色标题栏，左侧有关闭、最小化和最大化按钮
   • 实现正确的窗口行为（调整大小、拖动、聚焦）
8. 上下文菜单：在适当的地方提供右键上下文菜单。
9. 无障碍性：确保应用程序的无障碍性，如适当的对比度比率和键盘导航支持。

实施技巧

• 使用 Tailwind CSS 类来样式化组件（项目中已设置好）。
• 使用 framer-motion 库实现平滑的动画。
• 确保应用程序在窗口内具有响应性，并能妥善处理不同的窗口尺寸。
• 彻底测试应用程序，确保不与现有桌面功能冲突。

贡献指南

1. 确保代码有良好的注释并遵循现有代码风格。
2. 在提交前彻底测试应用程序。
3. 如果添加新依赖或需要额外的设置步骤，请更新 README。
4. 创意是无限的，但始终优先考虑用户体验和与 macOS 美学的一致性。

通过遵循这些指南，您将帮助维持一个凝聚力强且视觉吸引力高的桌面环境，忠实于 macOS 的设计理念。happy coding!