为什么值得关注

它巧妙融合了男性兴趣圈子、节日彩蛋（8月3日作为妇女节的善意反转）以及实用的双模式架构——既可零部署在线演示，也可通过 Docker 一键自托管成为真正的社交平台，并内置私信、图片上传等功能，视觉风格独特。

适合谁使用

对健身、机械键盘、钓鱼、篮球、数码等男性兴趣话题感兴趣的用户
希望学习或自部署完整前后端项目（React + Vite + Node + SQLite）的开发者
想要快速搭建主题兴趣分享社区（例如群晖 NAS）的组织者或站长
喜欢互联网文化、梗和趣味性节日特色的用户

典型使用场景

发布和浏览各类男性兴趣爱好的笔记（瀑布流），按圈子筛选或搜索
通过“搭子广场”寻找运动、游戏或生活互助伙伴（如搬家、修电脑）
在自托管的服务器上运行私有社区，支持多用户注册、关注、私信和持久化数据
体验离线可用的前端应用，并自动检测后端是否存在以实现功能切换

项目优势

双模式设计（localStorage 演示 + 后端 API）降低使用门槛，无需部署即可试用
功能全面：发帖、点赞、评论、关注、私信、图片上传、圈子分类，满足社区基本需求
自托管方便：提供 Docker Compose 和群晖 NAS 部署文档，一键启动
独特的赛博朋克 UI 和节日主题（8·3 散帅节、6·20 男生节）赋予项目鲜明的个性

使用前须知

尚不支持第三方登录（仅用户名密码注册），演示版密码无加密
演示版数据仅保存在浏览器 localStorage，无法跨设备或持久化
目前界面和内容主要为中文，非中文用户使用门槛较高

README 快速开始

大蓝本儿 · Sunshine-note 💙

一个瀑布流式的男性社群兴趣分享社区 主题：8·3 国际散帅节（International Sunshine Day）

散散帅 · 交交友 · 互帮互助

🔗 在线体验：https://kraolacy.github.io/dalanbener/

🌞 这是什么

大蓝本儿（Sunshine-note） 是一个开源的社区应用，采用瀑布流笔记的形态（发帖 + 点赞收藏评论 + 关注 + 私信），界面是 赛博朋克 2077 风格。内容聚焦 男性社群的兴趣、生活与互助：健身撸铁、机械键盘、钓鱼、篮球、数码、汽车、下厨房、露营、手冲咖啡、程序人生、球鞋、摄影……

它有两种运行方式：① 纯前端演示版（数据存浏览器、零部署、可离线 / GitHub Pages）；② 自托管联网版（带后端，多人注册共享、私信可用，可跑在自己的 NAS / 服务器）。前端会自动判断走哪种。

节日彩蛋是 8 月 3 日「国际散帅节」：

三月八号是女神节，八月三号是散帅节。今天，放下手机，散步、散心、散个帅 —— 做一个阳光、松弛、爱交朋友的男人。

（"散帅" ≈ Sunshine 的谐音梗，8·3 也是 3·8 妇女节的一个善意反转。）

ℹ️ 说明：这是一个轻松、包容的趣味项目，纯属自娱与技术练习，不针对、不冒犯任何群体。欢迎所有人来玩。

✨ 功能一览

模块	说明
🏠 首页瀑布流	双列/多列 masonry 笔记流，16 个兴趣圈子分类筛选，关键词搜索
🌞 散帅节专题	到 8·3 的实时倒计时、节日话题、精选散帅动态
🎉 男生节专栏	6·20 男生节专栏，带节日倒计时介绍条
⚔️ 海克斯大乱斗专栏	英雄联盟大乱斗专区：上分心得、英雄强度榜、五黑招募
🤝 散帅互助	搭子广场：求助 / 帮忙两类帖，搬家、修电脑、找搭子、约球局
🔐 登录 / 注册	账号体系（用户名 + 密码 + 头像），未登录时互动会引导登录
😎 个人主页	我的发布、我的收藏、点赞/关注/粉丝数、散帅节徽章、退出登录
➕ 发帖	封面 emoji 或上传图片、标题正文、圈子、话题标签、一键参加散帅节话题
❤️ 互动	点赞、收藏、评论
➕ 关注	关注作者、「关注」信息流只看已关注的人、关注/粉丝数
✉️ 私信	一对一聊天、会话列表、未读提醒（联网版功能）
🖼 图片上传	发帖上传图片作封面（联网版存服务器，演示版存本地）

两种模式自动切换：前端启动时探测后端——连得上就走后端 API（真账号、多人共享、私信可用）；连不上退回浏览器 localStorage（单机演示、数据存本地、可离线）。

🔒 关于安全：演示版账号只存在你本机浏览器（无加密），请勿用真实密码；联网版密码用 bcrypt 加密存服务器数据库。

🛠 技术栈

前端：React 18 + Vite 6，单文件可离线打开（vite-plugin-singlefile）
后端（可选）：Node + Express + 内置 node:sqlite（免原生编译）、bcrypt 密码加密、JWT 鉴权
状态：React Context，双模式（后端 API / localStorage），见 src/store.jsx、src/api.js
样式：原生 CSS（src/styles.css），赛博朋克 2077 风格，移动端优先，响应式 masonry
演示版不依赖任何外链资源，可离线运行

🚀 快速开始

# 1. 安装依赖
npm install

# 2. 启动开发服务器（默认 http://localhost:5173 ）
npm run dev

# 3. 生产构建
npm run build

# 4. 本地预览构建产物
npm run preview

需要 Node.js ≥ 18。

📁 项目结构

.
├── index.html · vite.config.js
├── src/                        # 前端
│   ├── main.jsx / App.jsx      # 入口 / 外壳（顶栏·分类·底部导航·弹层）
│   ├── store.jsx               # 全局状态（后端 API + localStorage 双模式）
│   ├── api.js                  # 后端 API 客户端
│   ├── data.js                 # 分类定义 + 种子内容
│   ├── styles.css              # 赛博朋克 2077 样式
│   └── components/             # Feed·PostCard·PostDetail·CreatePost·Festival
│                               # Help·Me·AuthModal·ColumnIntro·

项目描述

大蓝本儿 Sunshine-note · 男性社群兴趣/生活/互助分享社区（8·3 国际散帅节）

dalanbener