# threads-app

**Repository Path**: goodffff/threads-app

## Basic Information

- **Project Name**: threads-app
- **Description**: ^_^
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-28
- **Last Updated**: 2025-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 资源网 - Threads App

一个现代化的信息资源展示平台，基于 Next.js 16 + React 19 构建，采用 shadcn/ui 设计语言。

## ✨ 特性

- 🎨 **现代化设计** - 参考 shadcn/ui 设计语言，简约不简单
- 📱 **响应式布局** - 完美适配桌面、平板、手机等多端设备
- ⚡ **极致性能** - 基于 Next.js 16 App Router，自动代码分割
- 🌙 **深色模式** - 自动跟随系统主题切换
- 🔍 **搜索筛选** - 支持关键词搜索、多维度排序
- 🖼️ **图片画廊** - 支持全屏预览、键盘导航、手势操作
- 📋 **一键复制** - 联系方式一键复制到剪贴板
- 🎭 **流畅动画** - 细腻的过渡效果和微交互

## 📦 技术栈

- **框架**: Next.js 16.1.1 (App Router)
- **前端**: React 19.2.3, TypeScript 5
- **样式**: Tailwind CSS 4
- **数据库**: SQLite (better-sqlite3) + TypeORM
- **字体**: Geist Sans & Mono

## 🚀 快速开始

### 安装依赖

```bash
yarn install
# 或
npm install
```

### 开发模式

```bash
yarn dev
# 或
npm run dev
```

访问 [http://localhost:3000](http://localhost:3000)

### 生产构建

```bash
yarn build
yarn start
```

## 📁 项目结构

```
src/
├── app/                    # Next.js App Router
│   ├── api/               # API Routes
│   │   ├── menus/         # 菜单分类接口
│   │   └── posts/         # 帖子列表/详情接口
│   ├── post/[id]/         # 帖子详情页
│   ├── globals.css        # 全局样式 + 设计系统
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 首页
│   ├── error.tsx          # 错误页面
│   ├── not-found.tsx      # 404页面
│   └── loading.tsx        # 加载状态
├── components/            # React 组件
│   ├── ui.tsx             # 基础UI组件库
│   ├── icons.tsx          # SVG图标组件
│   ├── header.tsx         # 页头导航
│   ├── post-card.tsx      # 帖子卡片
│   ├── search-filter.tsx  # 搜索筛选
│   ├── pagination.tsx     # 分页组件
│   ├── image-gallery.tsx  # 图片画廊
│   └── contact-info.tsx   # 联系信息
├── db/                    # 数据库配置
├── entities/              # TypeORM 实体
├── service/               # 业务服务层
└── types/                 # TypeScript 类型定义
```

## 🎨 设计系统

项目采用 CSS 变量实现完整的设计系统，支持亮色/暗色主题自动切换：

### 颜色变量
- `--background` / `--foreground` - 背景和前景色
- `--card` - 卡片背景
- `--primary` / `--secondary` - 主要/次要颜色
- `--muted` - 柔和色调
- `--accent` - 强调色
- `--border` / `--input` - 边框和输入框
- `--blue` / `--green` / `--amber` / `--rose` - 语义色彩

### 动画效果
- `animate-fade-in` - 淡入
- `animate-slide-up` - 向上滑入
- `animate-scale-in` - 缩放进入
- `animate-shimmer` - 骨架屏闪烁
- `stagger-children` - 子元素交错动画

## 📱 响应式断点

| 断点 | 尺寸 | 说明 |
|------|------|------|
| sm | 640px | 小屏手机 |
| md | 768px | 平板竖屏 |
| lg | 1024px | 平板横屏/小屏电脑 |
| xl | 1280px | 桌面显示器 |

## 🔌 API 接口

### 获取帖子列表
```
GET /api/posts?page=1&pageSize=12&keyword=xxx&sortField=price&sortOrder=DESC
```

### 获取帖子详情
```
GET /api/posts/[id]
```

### 获取菜单分类
```
GET /api/menus
```

## 📝 注意事项

1. 确保 `dataset.sqlite` 数据库文件存在于项目根目录
2. 图片资源需要配置正确的 CDN 或本地路径
3. 生产环境建议配置 Next.js 图片优化域名

## 📄 License

MIT