# Muse Blog

一个基于 Laravel 12 + Filament 4 构建的 ins 风格简约大气响应式博客系统。

![Laravel](https://img.shields.io/badge/Laravel-12.x-red?style=flat-square&logo=laravel)
![Filament](https://img.shields.io/badge/Filament-4.x-yellow?style=flat-square)
![TailwindCSS](https://img.shields.io/badge/TailwindCSS-4.x-blue?style=flat-square&logo=tailwindcss)
![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)

## ✨ 特性

- 🎨 **ins 风格设计** - 简约大气的现代化 UI，支持图片墙展示
- 📱 **完全响应式** - 适配桌面、平板、手机等各种设备
- 🔧 **强大后台** - 基于 Filament 4 的现代化管理面板
- 🏷️ **分类与标签** - 灵活的内容组织方式
- 🔍 **全文搜索** - 快速找到想要的内容
- ⭐ **精选文章** - 首页突出展示重要内容
- 📊 **阅读统计** - 文章浏览量自动统计
- 🖼️ **图片管理** - 支持封面图和多图图片墙

## 📸 截图

### 前台首页
- 精选文章轮播展示
- ins 风格瀑布流布局
- 分类标签快速筛选

### 后台管理
- 文章管理（富文本编辑、图片上传）
- 分类管理
- 标签管理（支持自定义颜色）

## 🛠️ 技术栈

- **后端框架**: Laravel 12
- **管理面板**: Filament 4
- **前端框架**: TailwindCSS 4
- **构建工具**: Vite
- **数据库**: MySQL / SQLite / PostgreSQL

## 📦 安装

### 环境要求

- PHP >= 8.2
- Composer
- Node.js >= 18
- MySQL 8.0+ / SQLite / PostgreSQL

### 安装步骤

1. **克隆项目**
   ```bash
   git clone <repository-url> blog
   cd blog
   ```

2. **安装 PHP 依赖**
   ```bash
   composer install
   ```

3. **安装前端依赖**
   ```bash
   npm install
   ```

4. **环境配置**
   ```bash
   cp .env.example .env
   php artisan key:generate
   ```

5. **配置数据库**
   
   编辑 `.env` 文件，设置数据库连接：
   ```env
   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=blog
   DB_USERNAME=root
   DB_PASSWORD=
   ```

6. **运行数据库迁移和填充**
   ```bash
   php artisan migrate
   php artisan db:seed
   ```

7. **创建存储链接**
   ```bash
   php artisan storage:link
   ```

8. **发布资源文件**
   ```bash
   php artisan filament:assets
   php artisan livewire:publish --assets
   ```

9. **构建前端资源**
   ```bash
   npm run build
   ```

10. **启动开发服务器**
    ```bash
    php artisan serve
    ```

## 🚀 使用

### 访问地址

- **博客前台**: http://localhost:8000
- **后台管理**: http://localhost:8000/admin

### 默认管理员账户

- **邮箱**: `admin@example.com`
- **密码**: `password`

> ⚠️ 请在生产环境中修改默认密码！

## 📁 项目结构

```
blog/
├── app/
│   ├── Filament/
│   │   └── Resources/          # Filament 后台资源
│   │       ├── CategoryResource.php
│   │       ├── TagResource.php
│   │       └── PostResource.php
│   ├── Http/
│   │   └── Controllers/
│   │       └── BlogController.php  # 前台控制器
│   └── Models/
│       ├── Category.php
│       ├── Tag.php
│       ├── Post.php
│       └── User.php
├── database/
│   ├── migrations/             # 数据库迁移
│   ├── factories/              # 模型工厂
│   └── seeders/
│       └── BlogSeeder.php      # 示例数据填充
├── resources/
│   ├── css/
│   │   └── app.css             # 样式文件
│   └── views/
│       ├── components/
│       │   ├── layout.blade.php
│       │   └── post-card.blade.php
│       └── blog/
│           ├── index.blade.php     # 首页
│           ├── show.blade.php      # 文章详情
│           ├── category.blade.php  # 分类页
│           ├── tag.blade.php       # 标签页
│           └── search.blade.php    # 搜索页
└── routes/
    └── web.php                 # 路由定义
```

## 📊 数据库结构

### categories 分类表
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| name | string | 分类名称 |
| slug | string | URL 别名 |
| description | text | 描述 |
| cover_image | string | 封面图片 |
| sort_order | int | 排序 |
| is_active | boolean | 是否启用 |

### tags 标签表
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| name | string | 标签名称 |
| slug | string | URL 别名 |
| color | string | 标签颜色 |

### posts 文章表
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| user_id | bigint | 作者 ID |
| category_id | bigint | 分类 ID |
| title | string | 标题 |
| slug | string | URL 别名 |
| excerpt | text | 摘要 |
| content | longtext | 正文 |
| cover_image | string | 封面图片 |
| gallery | json | 图片墙 |
| status | enum | 状态 (draft/published/scheduled) |
| published_at | timestamp | 发布时间 |
| is_featured | boolean | 是否精选 |
| views_count | int | 浏览量 |
| likes_count | int | 点赞数 |

## 🎨 自定义

### 修改主题颜色

编辑 `resources/css/app.css` 文件中的 CSS 变量。

### 修改字体

在 `resources/views/components/layout.blade.php` 中修改 Google Fonts 链接和 CSS 变量。

### 添加新功能

1. 创建迁移：`php artisan make:migration`
2. 创建模型：`php artisan make:model`
3. 创建 Filament 资源：`php artisan make:filament-resource`

## 🔧 常用命令

```bash
# 开发环境
npm run dev                     # 启动 Vite 开发服务器
php artisan serve               # 启动 Laravel 开发服务器

# 构建生产环境
npm run build                   # 构建前端资源

# 数据库
php artisan migrate             # 运行迁移
php artisan migrate:fresh --seed # 重置数据库并填充数据

# 缓存
php artisan optimize:clear      # 清除所有缓存
php artisan filament:assets     # 发布 Filament 资源
```

## 📝 开发计划

- [ ] 评论系统
- [ ] 用户注册登录
- [ ] 文章点赞收藏
- [ ] 社交媒体分享
- [ ] RSS 订阅
- [ ] SEO 优化
- [ ] 多语言支持

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

本项目采用 [MIT](LICENSE) 许可证。

---

Made with ❤️ using Laravel & Filament