# HuSNS Mobile Pro 主题使用手册

> 版本：v4.1.0  
> 日期：2026年5月22日  
> 作者：HuSNS 开发团队

---

## 一、主题概述

### 1.1 主题简介

**Mobile Pro** 是 HuSNS 社交平台的移动端专用主题，采用仿微信朋友圈风格设计，为用户提供接近原生APP的移动端体验。

### 1.2 功能特性

| 特性 | 说明 |
|------|------|
| 🎨 **现代设计** | iOS风格配色，圆润卡片设计 |
| 🌙 **深色模式** | 支持护眼模式切换 |
| ⚡ **流畅交互** | 触摸优化，动画流畅 |
| 📱 **响应式布局** | 适配各种移动设备尺寸 |
| 🔄 **无限滚动** | 信息流自动加载 |

### 1.3 页面结构

```
移动端主题包含以下功能页面：

├── 社交核心
│   ├── 首页 (index)      - 朋友圈风格动态流
│   ├── 热门 (hot)        - 热门内容排行
│   ├── 详情 (detail)     - 帖子详情页
│   ├── 发布 (publish)    - 发布动态
│   └── 转发 (repost)     - 转发动态
├── 用户关系
│   ├── 关注 (follows)    - 我的关注列表
│   ├── 粉丝 (fans)       - 我的粉丝列表
│   └── 推荐 (recommend)  - 推荐关注
├── 消息通知
│   ├── 消息 (messages)   - 私信列表
│   ├── 通知 (notification) - 系统通知
│   └── 聊天 (chat)       - 即时聊天
├── 话题圈子
│   ├── 话题 (topics)     - 热门话题
│   ├── 话题详情 (topic)  - 话题内容页
│   ├── 圈子 (circles)    - 圈子列表
│   └── 圈子动态 (circle-posts)
├── 个人中心
│   ├── 个人主页 (profile) - 我的主页
│   ├── 用户主页 (user)    - 他人主页
│   ├── 收藏 (favorites)  - 我的收藏
│   └── 积分 (points)     - 积分中心
├── 设置安全
│   ├── 设置 (settings)   - 通用设置
│   ├── 隐私 (privacy)    - 隐私设置
│   └── 举报管理 (report_manage)
└── 认证页面
    ├── 登录 (login)      - 用户登录
    ├── 注册 (register)   - 用户注册
    └── 密码 (password)   - 找回密码
```

---

## 二、安装与配置

### 2.1 主题安装

移动端主题已内置在 HuSNS 系统中，无需额外安装。系统会自动检测移动端访问并使用此主题。

### 2.2 目录结构

```
templates/mobile/
├── app/                    # 应用页面目录
│   ├── css/               # 页面样式
│   ├── js/                # 页面脚本
│   └── *.php              # 页面模板
├── components/             # 可复用组件
│   └── post-card.php      # 帖子卡片组件
├── css/                    # 公共样式
│   ├── app-layout.css     # 布局样式
│   ├── dark-mode.css      # 深色模式
│   └── variables.css      # CSS变量
├── js/                     # 公共脚本
│   ├── app-layout.js      # 布局脚本
│   ├── modal-controller.js # 弹窗控制
│   └── auth-modal.js      # 登录弹窗
├── layouts/                # 布局文件
│   ├── app.php            # 主布局
│   └── partials/          # 布局片段
├── modules/chat/           # 聊天模块
├── theme.json             # 主题配置文件
└── index.php              # 主题入口
```

### 2.3 主题配置文件

主题配置文件位于 `templates/mobile/theme.json`：

```json
{
    "name": "Mobile Pro",
    "version": "1.0.0",
    "description": "更接近原生APP的移动端主题",
    "author": "HuSNS",
    "preview": "/templates/mobile/screenshot.png",
    "type": "mobile",
    "dark_mode_support": true,
    "config": {
        "primary_color": "#007AFF",
        "secondary_color": "#5856D6",
        "accent_color": "#FF9500",
        "background_color": "#F2F2F7",
        "card_color": "#FFFFFF",
        "text_color": "#000000",
        "text_secondary_color": "#8E8E93",
        "border_color": "#C6C6C8"
    }
}
```

---

## 三、配置说明

### 3.1 颜色配置

您可以通过修改 `theme.json` 中的颜色配置来自定义主题外观：

| 配置项 | 说明 | 默认值 |
|--------|------|--------|
| `primary_color` | 主题主色调 | `#007AFF` |
| `secondary_color` | 次要颜色 | `#5856D6` |
| `accent_color` | 强调颜色（用于按钮等） | `#FF9500` |
| `background_color` | 页面背景色 | `#F2F2F7` |
| `card_color` | 卡片背景色 | `#FFFFFF` |
| `text_color` | 主要文字颜色 | `#000000` |
| `text_secondary_color` | 次要文字颜色 | `#8E8E93` |
| `border_color` | 边框颜色 | `#C6C6C8` |

### 3.2 自定义颜色示例

```json
{
    "config": {
        "primary_color": "#10B981",    // 绿色主题
        "secondary_color": "#3B82F6",  // 蓝色次要
        "accent_color": "#F59E0B",     // 橙色强调
        "background_color": "#F3F4F6", // 浅灰背景
        "card_color": "#FFFFFF",       // 白色卡片
        "text_color": "#1F2937",       // 深灰文字
        "text_secondary_color": "#6B7280",
        "border_color": "#E5E7EB"
    }
}
```

### 3.3 深色模式配置

主题支持自动深色模式切换，系统会根据用户设备设置自动适配。

在 `css/dark-mode.css` 中定义了深色模式样式：

```css
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000000;
        --card-color: #1C1C1E;
        --text-color: #FFFFFF;
        --text-secondary-color: #8E8E93;
        --border-color: #38383A;
    }
}
```

---

## 四、功能说明

### 4.1 核心功能

#### 4.1.1 动态发布
- 支持发布文字、图片、视频内容
- 支持添加话题标签（#话题#）
- 支持 @提及用户
- 支持添加位置信息

#### 4.1.2 社交互动
- 点赞：点击心形图标点赞
- 评论：在详情页发表评论
- 收藏：收藏喜欢的动态
- 转发：转发动态给好友

#### 4.1.3 用户关系
- 关注：关注其他用户
- 粉丝：查看我的粉丝
- 推荐：系统推荐可能感兴趣的用户

#### 4.1.4 消息通知
- 私信：一对一聊天
- 通知：点赞、评论、@提醒
- 系统通知：系统消息推送

### 4.2 设置功能

#### 4.2.1 通用设置
- 护眼模式：切换深色/浅色主题
- 清除缓存：清除本地存储数据
- 消息通知开关：控制通知接收

#### 4.2.2 隐私设置
- 隐私权限管理
- 黑名单管理
- 账号安全设置
- 数据管理

---

## 五、自定义开发

### 5.1 添加新页面

如需添加新页面，请按照以下步骤：

1. **创建页面模板**：在 `app/` 目录下创建 `new_page.php`

```php
<?php
// 检查登录状态
$userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
if (!$userId) {
    $this->redirect(Helper::url('mobile/login'));
    return;
}

$currentPage = 'new_page';
$pageType = 'new_page';
$bodyClass = 'new-page';
$showBack = true;
$headerTitle = '新页面';

$this->setLayout('app');
?>

<div class="new-page-content">
    <!-- 页面内容 -->
</div>

<script>
// 页面脚本
document.addEventListener('DOMContentLoaded', function() {
    // 初始化逻辑
});
</script>
```

2. **注册路由**：在 `MobileController.php` 中添加方法

```php
public function newPage() {
    if (!isset($_SESSION['user_id'])) {
        $this->redirect(Helper::url('mobile/login'));
        return;
    }

    $this->render('app/new_page', [
        'currentPage' => 'new_page',
        'headerTitle' => '新页面',
        'pageType' => 'new_page',
        'bodyClass' => 'new-page',
        'userId' => $_SESSION['user_id'],
        'themeConfig' => $this->getMobileThemeConfig()
    ]);
}
```

3. **添加样式**：在 `app/css/` 目录下创建对应的 CSS 文件

### 5.2 修改布局

主布局文件位于 `layouts/app.php`，包含：
- 页面头部
- 主内容区域
- 底部导航栏
- 弹窗组件

### 5.3 使用组件

主题提供了可复用组件：

```php
<!-- 帖子卡片组件 -->
<?php include $this->themePath() . '/components/post-card.php'; ?>
```

---

## 六、常见问题

### 6.1 主题不生效

**问题**：访问移动端时没有显示 Mobile Pro 主题

**解决方案**：
1. 检查 `index.php` 中是否正确检测移动端
2. 确认主题目录存在：`templates/mobile/`
3. 清除浏览器缓存后重新访问

### 6.2 图片显示异常

**问题**：动态图片无法正常显示

**解决方案**：
1. 检查图片路径是否正确
2. 确认图片文件存在于上传目录
3. 检查服务器文件权限

### 6.3 深色模式不生效

**问题**：护眼模式切换后样式没有变化

**解决方案**：
1. 检查 `dark-mode.css` 文件是否存在
2. 确认 CSS 变量正确定义
3. 清除浏览器缓存

### 6.4 缓存清理功能

**问题**：清除缓存后数据仍存在

**解决方案**：
- 清除缓存功能仅清除浏览器 localStorage
- 服务器端数据不受影响
- 如需清除服务器缓存，请使用后台管理功能

---

## 七、更新日志

### v4.1.0 (2026-05-22)
- 修复清理缓存功能的 API 调用问题
- 更新版本号显示

### v4.0.4 (2026-05-10)
- 完善主题分析文档
- 优化深色模式支持
- 修复部分页面样式问题

### v4.0.0 (2026-05-01)
- 初始版本发布
- 包含26个功能页面
- 支持深色模式
- 朋友圈风格设计

---

## 八、技术支持

### 官方资源

| 资源 | 链接 |
|------|------|
| 官方网站 | https://huyourui.com |
| 文档中心 | https://docs.huyourui.com |
| GitHub | https://github.com/husns/husns |

### 联系方式

- **QQ**: 281900864
- **邮箱**: support@huyourui.com

---

## 九、许可证

HuSNS Mobile Pro 主题采用 **MIT License** 开源许可证。

```
MIT License

Copyright (c) 2026 HuSNS

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

---

*文档结束*
