通过 CommonGround 构建更安全的在线空间

Source: Dev.to

请提供您希望翻译的具体文本内容，我将为您把它翻译成简体中文，并保留原始的格式、Markdown 语法以及技术术语。谢谢！

概览

CommonGround 为三个相互关联的社区而构建，这些社区需要安全、有尊严的空间来疗愈和联系：

该应用专为为这些人群提供服务的受众设计，提供创伤知情的数字工具，既保持尊严，又确保安全。

产品概述

CommonGround 是一款创伤知情的社区支持网络应用，提供安全的 AI 监管空间，让弱势群体能够相互连接、分享并共同疗愈。

🎭 三角色系统

• 安全寻求者 – 注重匿名的家庭暴力幸存者。
• 全新开始 – 提供无评判的再融入支持。
• 社区支持者 – 通过引导互动的志愿者。

🛡️ 创伤知情的入职流程

• 温和、非侵入式的角色选择。
• 使用尊严优先的语言设定目标。
• 隐私控制并提供清晰说明。
• 不强制披露或提出触发性问题。

💬 故事圈（AI 监管的群组空间）

• 通过实时 AI 监管的安全群组讨论。
• 提供温和的编辑建议以保持尊重的语气。
• 私密圈和公开圈两种选项。
• 使用维护尊严的提示进行故事分享。

🤝 共创活动

• 善意墙 – 社区感恩与肯定留言板。
• 共享故事 – 合作式叙事体验。
• 互动社区地图 – 基于 Leaflet 的真实地图，标记安全地点、资源和社区空间（集成 Google Maps）。

📍 支持服务

• 精选安全资源。
• 基于位置的服务查找器。
• 危机热线和即时支持选项。

🔔 完整通知系统

• 实时通知横幅，可滑动关闭。
• 导航至相关内容。
• 非侵扰、温和的提醒。

📊 反思工具

• 个人进度追踪。
• 心情日志。
• 安全的自我反思提示。

创伤安全配色方案

排版与用户体验模式

• 字体： Inter（可访问性与可读性）。
• 动画： 通过 Framer Motion 实现温和运动。
• 语言： 全程采用尊严优先。
• 无暗黑模式或强制参与。
• 每个界面均提供明确的退出路径。
• 尊重的微交互。

演示与来源

• 演示应用: [Demo URL]
• GitHub 仓库: [GitHub URL]

（将占位符替换为实际的 URL。）

我是如何构建它的

这是一个使用 Figma Make 完全可运行的 Web 应用程序。该应用包括：

• ✅ 完整的身份验证流程，包含角色选择。
• ✅ 三步创伤知情的入职流程。
• ✅ 完整的仪表板，所有功能均可访问。
• ✅ 可运行的故事圈，配有真实聊天界面。
• ✅ 交互式 CoCreate 活动，包括真实地图功能。
• ✅ 支持服务目录。
• ✅ 带路由的通知系统。
• ✅ 个人资料管理。
• ✅ 针对移动端和桌面的响应式设计。

关键用户流程

1. 登录 → 选择角色 → 入职（欢迎 → 目标 → 隐私）→ 仪表板
2. 仪表板 → 故事圈 → 加入圈子 → 分享故事
3. 仪表板 → CoCreate → 交互式地图 → 探索安全地点
4. 通知横幅 → 点击 → 导航至相关功能

技术细节

路由架构

// React Router Data Mode with protected routes
export const router = createBrowserRouter([
  {
    element: <App />,
    children: [
      { path: '/login', Component: Login },
      {
        path: '/',
        element: <HomeLayout />,
      },
      {
        path: '/home/*',
        element: <Home />,
      },
      // ... more routes
    ],
  },
]);

通知系统

// Swipeable notification banner with navigation
{
  if (Math.abs(info.offset.x) > 100) onDismiss();
}
onClick={() => navigate(notification.link)}
>
  {/* Notification content */}

使用 Leaflet 的交互式地图

// Real map with markers, popups, and Google Maps integration
{safeLocations.map((location) => (
  <Marker position={location.coords} key={location.id}>
    <Popup>
      <div>{location.name}</div>
      <button onClick={() => openDirections(location)}>Get Directions</button>
    </Popup>
  </Marker>
))}

前端技术栈

• 框架: React 18 + TypeScript（类型安全的组件开发）。
• 路由: React Router（数据模式）并使用受保护的路由。
• 构建工具: Vite（快速开发与优化构建）。

样式与设计

• Tailwind CSS v4 – 基于实用程序的首要样式，配合自定义设计令牌。
• Framer Motion – 温和、关注创伤的动画。
• CSS 变量 – 自定义创伤安全配色方案。

关键库

设计原则

1. 创伤知情为先

   • 每一次互动都保持尊严。
   • 温和的语言和不引发创伤的提示。
   • 明确的退出路径；不强制参与。
   • 默认隐私，需自行选择共享。

2. 基于角色的体验

   • 根据需求提供三条不同的用户旅程。
   • 为每种角色提供个性化的入职引导。
   • 针对不同用户类型定制内容和功能。
   • 灵活的导航，适应用户情境。

3. 组件驱动的架构

   • 可复用、模块化的组件。
   • 在各功能间保持一致的设计模式。
   • 易于维护和扩展。
   • 类型安全的属性和状态管理。

4. 状态管理策略

   • 使用本地存储保存认证信息和用户偏好。
   • 使用 Context API / React Query 进行数据获取与缓存。
   • 最小化全局状态，尽可能使用组件级状态。

登机状态

• React hooks (useState, useEffect) 用于组件状态
• 基于 URL 的路由 用于导航状态
• 面向未来，用于 Supabase 后端集成

可访问性与响应式

• 移动优先的响应式设计
• 全站语义化 HTML
• 键盘导航支持
• 屏幕阅读器友好结构

设计系统优先

• 建立了创伤安全的配色方案和排版

组件库

• 构建遵循设计系统的可复用 UI 组件

用户流程

• 为每个角色实现完整的用户旅程

交互功能

• 实时地图集成
• 通知
• 动态内容

打磨与精细化

• 柔和动画
• 微交互
• 用户体验改进

Supabase 集成

• 持久化数据存储

实时 AI 监管

• 使用 AI API 对故事圈进行监管

推送通知

• 移动网页体验

渐进式网络应用 (PWA)

• 离线支持

多语言支持

• 更广泛的可访问性

分析仪表板

• 面向项目管理员

以尊严构建，以疗愈为设计，以社区为动力。

CommonGround 代表了面向弱势群体的创伤知情数字服务的未来——在这里，技术以尊重、安全和同情心服务于人类。