# sfapp

**Repository Path**: deeyie/sfapp

## Basic Information

- **Project Name**: sfapp
- **Description**: app. mp
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-30
- **Last Updated**: 2026-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SFBlog Mobile

[![Vue](https://img.shields.io/badge/Vue-3.5-4FC08D?logo=vue.js)](https://vuejs.org/)
[![uni-app](https://img.shields.io/badge/uni--app-3.0-2B9939)](https://uniapp.dcloud.io/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.8-3178C6?logo=typescript)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-5.2-646CFF?logo=vite)](https://vitejs.dev/)
[![Pinia](https://img.shields.io/badge/Pinia-3.0-F7D849)](https://pinia.vuejs.org/)
[![License](https://img.shields.io/badge/License-MIT-blue)](#license)

**SFBlog Mobile** 是一款基于 Vue 3 + uni-app 构建的全功能移动端博客应用。它提供了丰富的内创作体验，包括文章、笔记、相册、视频、即时聊天和社交互动等功能——一套代码即可发布到 **H5（Web）**、**微信小程序**、**Android**、**iOS** 等多个平台。

> 本项目是 SFBlog 生态的移动端客户端。后端为独立的 Spring Boot / Java 项目。

---

## 截图

> _（在此处添加应用截图）_

| 首页 | 博客 | 广场 | 我的 |
|------|------|-------|------|
|      |      |       |      |

---

## 功能特性

### 📝 内容管理
- **文章** — 富文本博客文章，支持分类、标签、封面和评论
- **笔记** — 短文本动态（微博风格），支持图片/文件附件
- **相册** — 照片相册，支持批量上传和 OSS 集成
- **视频** — 视频分享，支持封面图和时长元数据
- **日记** — 个人日记记录

### 💬 社交互动
- **实时聊天** — 基于 WebSocket 的即时通讯，支持消息历史、已读回执和输入状态提示
- **社交关系** — 关注/取关、好友列表、粉丝与关注
- **点赞系统** — 点赞/取消点赞文章、相册、视频、笔记、评论和弹幕
- **评论系统** — 嵌套评论回复，支持置顶和管理员审核
- **弹幕** — 实时滚动评论叠加层

### 👤 用户系统
- **身份认证** — 邮箱 + 密码登录/注册，基于 JWT（Sa-Token）
- **个人资料管理** — 头像、昵称、个人简介、性别、生日
- **设备指纹** — 反滥用设备识别
- **验证机制** — 邮箱验证码、图形验证码和算术验证码

### 🛠 管理运营
- **用户管理** — 增删改查、角色分配、启用/禁用
- **角色与权限管理** — 基于 RBAC 的细粒度权限控制
- **操作日志** — 完整的审计追踪，含风险分析面板
- **反馈系统** — 用户反馈，支持优先级、状态跟踪和附件
- **公告系统** — 弹窗和轮播形式的系统公告
- **文件管理** — 文件列表、按类型筛选、OSS 清理

### 🎮 扩展功能
- **按钮游戏** — "假如" 风格的选择游戏，支持社区提交选项
- **课表管理** — 课程表工具，支持自动登录
- **搜索** — 全站内容搜索
- **AI 集成** — 模型选择（DeepSeek 等），支持思考模式和联网搜索

---

## 技术栈

| 层次 | 技术 |
|-------|-----------|
| **框架** | [uni-app 3.0](https://uniapp.dcloud.io/)（Vue 3 + Vite） |
| **语言** | TypeScript 5.8 |
| **状态管理** | [Pinia](https://pinia.vuejs.org/) + [pinia-plugin-persistedstate](https://prazdevs.github.io/pinia-plugin-persistedstate/) |
| **UI 组件** | 自定义 `sf-*` 组件 + [uni-ui](https://uniapp.dcloud.io/component/uni-ui) + [wot-design-uni](https://wot-design-uni.netlify.app/) |
| **HTTP 客户端** | 基于 `uni.request` 的自定义请求封装，含拦截器 |
| **实时通信** | WebSocket（自定义 `ChatWebSocket` 类） |
| **加密** | AES-256-CBC、RSA（JSEncrypt）、SHA-256、HMAC-MD5 |
| **样式** | 基于设计变量的 SCSS |
| **构建工具** | Vite 5.2 |
| **包管理** | pnpm |
| **代码质量** | ESLint、Prettier、Stylelint、Husky、Commitlint（约定式提交） |

---

## 架构

```
sfblog-mobile/
├── src/
│   ├── api/              # API 服务模块（25+ 模块）
│   ├── components/       # 可复用组件
│   │   ├── sf-*/         # 自定义设计系统组件
│   │   ├── uni-*/        # uni-ui 组件
│   │   └── ...           # 领域相关组件
│   ├── pages/            # 页面视图（17 个路由）
│   │   ├── index/        # 首页
│   │   ├── blog/         # 文章、相册、视频
│   │   ├── notes/        # 短内容（广场）
│   │   ├── message/      # 聊天与通知
│   │   ├── mine/         # 个人主页与设置
│   │   ├── login/        # 登录认证
│   │   ├── search/       # 搜索
│   │   └── ...           # 其他功能
│   ├── store/            # Pinia 状态仓库（auth、app）
│   ├── utils/            # 工具函数（AES、签名、通用工具）
│   ├── types/            # TypeScript 类型定义
│   ├── constants/        # 常量（表情、页面）
│   ├── hooks/            # 可组合 hooks
│   ├── static/           # 静态资源（图片、图标）
│   └── uni_modules/      # uni-app 插件
├── .env                  # 环境变量
├── vite.config.ts        # Vite 配置
└── package.json          # 依赖与脚本
```

### 数据流

```
用户操作 → Vue 组件 → API 服务 (request.ts) → HTTP/WebSocket → 后端
                              ↕
                         Pinia 状态仓库
                              ↕
                           本地存储（持久化）
```

### 认证流程

1. 用户提交邮箱 + 密码 + 图形验证码
2. AES 加密登录数据；服务器验证并返回 Sa-Token（JWT）
3. Token 存储在 Pinia 中（持久化到 `uni.getStorageSync`）
4. 后续所有请求通过请求拦截器自动附加 Token
5. 用户详情响应在客户端 AES 解密

---

## 快速开始

### 环境要求

- [Node.js](https://nodejs.org/) >= 18
- [pnpm](https://pnpm.io/) >= 8
- [HBuilderX](https://www.dcloud.io/hbuilderx.html)（推荐用于原生打包）
- 微信开发者工具（用于小程序开发）

### 安装

```bash
# 克隆仓库
git clone https://github.com/deeyie/sfblog-mobile.git
cd sfblog-mobile

# 安装依赖
pnpm install
```

### 环境配置

根据需要配置以下环境文件：

```bash
# 开发环境（已预设默认值）
.env.development

# 生产环境
.env.production
```

**核心环境变量：**

| 变量 | 说明 |
|----------|------|
| `VITE_APP_PLATFORM` | 平台标识（`app`） |
| `VITE_APP_BASE_API` | API 基础地址 / 代理前缀 |
| `VITE_APP_API_URL` | 生产环境 API 服务器地址 |
| `VITE_APP_WEBSOCKET_URL` | WebSocket 服务器地址 |
| `VITE_RSA_PUBLIC_KEY` | RSA 公钥，用于密码加密 |
| `VITE_BASE_SECRET_KEY` | HMAC 签名基础密钥 |

### 开发

```bash
# H5（Web）开发
pnpm dev:h5

# 微信小程序开发
pnpm dev:mp-weixin

# 自定义平台
pnpm dev:custom
```

### 生产构建

```bash
# 构建微信小程序
pnpm build

# 构建 H5
pnpm build:h5

# 构建其他平台
pnpm build:mp-qq
pnpm build:quickapp-webview
```

---

## 可用命令

| 命令 | 说明 |
|--------|------|
| `pnpm dev:h5` | 启动 H5 开发服务器 |
| `pnpm dev:mp-weixin` | 微信小程序开发模式 |
| `pnpm build` | 构建微信小程序 |
| `pnpm build:h5` | 构建 H5（Web） |
| `pnpm type-check` | 运行 TypeScript 类型检查 |
| `pnpm lint` | 对 `src/` 运行 ESLint |
| `pnpm format` | 使用 Prettier 格式化代码 |
| `pnpm commit` | 使用 Commitizen 交互式提交 |
| `pnpm lint:stylelint` | 检查 SCSS/Vue 样式 |

---

## 项目模块

### API 服务层（`src/api/`）

所有后端通信集中在 `src/api/`，按领域划分模块：

- `users.ts` — 身份认证、个人资料 CRUD、管理员用户管理
- `articles.ts` — 博客文章 CRUD 与状态管理
- `notes.ts` — 短内容动态，支持附件
- `albums.ts` — 相册与照片管理
- `videos.ts` — 视频管理
- `chat.ts` — 实时消息
- `comments.ts` — 评论与回复
- `likes.ts` — 点赞/取消点赞
- `social.ts` — 关注/取关、好友关系
- `barrages.ts` — 弹幕系统
- `announcements.ts` — 系统公告
- `feedbacks.ts` — 用户反馈
- `diary.ts` — 个人日记
- `file.ts` — OSS 文件上传与管理
- `verify.ts` — 邮箱验证和验证码
- `sys.ts` — 系统管理（验证码配置、健康检查、统计）
- `roles.ts` — RBAC 角色/权限管理
- `operationLogs.ts` — 审计日志与风险分析
- `schedules.ts` — 课表授权管理
- `buttonGames.ts` — "假如" 按钮游戏
- `personalInfo.ts` — 个人简历/作品集
- `visitorRecords.ts` — 访客记录

### UI 组件（`src/components/`）

**设计系统（`sf-*`）：**
- `sf-layout` — 页面布局容器，含导航栏
- `sf-navigation-bar` — 自定义导航栏
- `sf-tab-bar` — 自定义标签栏
- `sf-tabs` — 标签切换组件
- `sf-avatar` — 头像组件
- `sf-input` — 样式化文本输入框
- `sf-icons` — 图标系统
- `sf-more-actions` — 操作菜单 / 更多按钮

**领域组件：**
- `articles/` — 文章卡片与列表
- `notes/` — 笔记动态项
- `albums/` — 相册项
- `videos/` — 视频项
- `comments/` — 评论区域、评论、回复
- `announcements/` — 公告项
- `floating-ball/` — 浮动操作按钮
- `footer-actions/` — 底部操作栏（点赞、评论、分享）

### 状态管理（`src/store/`）

- **auth** — 认证状态（token、用户信息、登录/登出）
- **app** — 应用配置（UI 信息、模型选择、缓存、弹窗状态）

两个 store 均使用 `pinia-plugin-persistedstate` 自动持久化到 `uni.getStorageSync`。

---

## 安全机制

- **AES-256-CBC**：客户端加密登录数据和用户详情
- **RSA-OAEP**：敏感操作的密码加密
- **HMAC-SHA256**：基于动态密钥的请求签名
- **设备指纹**：反滥用设备识别
- **验证码**：图形验证码和算术验证码
- **JWT**：基于 Sa-Token 的身份认证，支持 token 刷新

---

## 部署

### 微信小程序

```bash
pnpm build
```

将 `dist/build/mp-weixin` 目录导入微信开发者工具，然后上传。

### H5（Web）

```bash
pnpm build:h5
```

将 `dist/build/h5` 目录部署到任意静态服务器。

### 多平台

在 `src/manifest.json` 中配置对应平台的 appid，然后构建：

```bash
pnpm dev:custom    # 交互式选择平台
pnpm build:custom  # 构建所选平台
```

---

## 贡献指南

我们使用 [约定式提交](https://www.conventionalcommits.org/zh-hans/) 规范，通过 Commitizen 提交：

```bash
pnpm commit
```

本项目通过以下工具保障代码质量：
- **ESLint** — JavaScript/TypeScript/Vue 代码检查
- **Prettier** — 代码格式化
- **Stylelint** — SCSS/CSS 样式检查
- **Husky** — 提交前钩子（lint-staged）
- **Commitlint** — 提交信息校验

欢迎提交 Pull Request。重大变更请先提 Issue 讨论。

---

## 开源协议

[MIT](LICENSE)

---

## 致谢

- [uni-app](https://uniapp.dcloud.io/) — 跨平台应用框架
- [Vue 3](https://vuejs.org/) — 前端框架
- [Vite](https://vitejs.dev/) — 构建工具
- [Pinia](https://pinia.vuejs.org/) — 状态管理
- [wot-design-uni](https://wot-design-uni.netlify.app/) — UI 组件库
- [HBuilderX](https://www.dcloud.io/hbuilderx.html) — 开发 IDE

---

*SFBlog Mobile — ❤️ 由 [deeyie](https://github.com/deeyie) 制作*