# 奇思妙想小鱼博物馆

**Repository Path**: libihao520/LeSi-V2-Fish

## Basic Information

- **Project Name**: 奇思妙想小鱼博物馆
- **Description**: 鱼类信息管理与展示平台，基于 ABP Framework 10.1.0 构建，后端采用 .NET 10.0 + SQLite，前端使用 Vue 3 + Tailwind CSS。支持鱼类分类管理、数据增删改查、权限控制及美观的响应式展示界面。
- **Primary Language**: C#
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-05-08
- **Last Updated**: 2026-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LeSi-V2-Fish

一个基于 ABP Framework 和 Vue 3 的鱼类管理系统

## 📝 项目简介

LeSi-V2-Fish 是一个鱼类分类与展示系统，包含管理后台（基于 ABP MVC）和前端展示（基于 Vue 3）。

## 🌐 演示地址

- **前端展示**: [http://libihao.cn/](http://libihao.cn/)

## 🚀 技术栈

### 后端
- **.NET 10.0**
- **ABP Framework 10.1.0** - DDD 架构框架
- **SQLite** - 数据库
- **Entity Framework Core** - ORM

### 前端
- **Vue 3** - 前端框架
- **Vite** - 构建工具
- **Tailwind CSS** - CSS 框架
- **Vue Router** - 路由管理

## 📂 项目结构

```
LeSi-V2-Fish/
├── LeSi.V2.Fish.Core/    # ABP 后端项目
│   ├── src/
│   │   ├── Domain/         # 领域层 - 实体定义
│   │   │   └── Fishes/
│   │   │       ├── Fish.cs              # 鱼类主体实体
│   │   │       ├── FishCategory.cs      # 鱼类分类实体
│   │   │       ├── FishSubCategory.cs   # 鱼类子分类实体
│   │   │       └── FishCharacteristic.cs # 鱼类特征实体
│   │   ├── Application/    # 应用层 - 业务逻辑
│   │   ├── EntityFrameworkCore/  # 数据访问层
│   │   ├── Web/            # MVC 管理后台
│   │   └── ...
│   └── Core.db             # SQLite 数据库
├── LeSi.V2.Fish.Web/     # Vue 3 前端项目
│   ├── src/
│   │   ├── components/     # 公共组件
│   │   │   ├── Header.vue         # 顶部导航栏
│   │   │   ├── Footer.vue         # 底部页脚
│   │   │   ├── Hero.vue           # 首页横幅
│   │   │   ├── FishCard.vue       # 鱼类卡片
│   │   │   ├── FishList.vue       # 鱼类列表
│   │   │   ├── FishModal.vue      # 鱼类详情弹窗
│   │   │   └── LoginModal.vue     # 登录弹窗
│   │   ├── views/          # 页面视图
│   │   │   └── Home.vue           # 首页
│   │   ├── admin/          # 管理后台
│   │   │   ├── layouts/
│   │   │   │   └── AdminLayout.vue    # 后台布局
│   │   │   └── views/
│   │   │       ├── CategoryManagement.vue    # 分类管理
│   │   │       └── SubCategoryManagement.vue # 子类管理
│   │   ├── api/            # API 服务
│   │   │   └── fishService.js     # 鱼类相关接口
│   │   └── router/         # 路由配置
│   └── package.json
└── README.md
```

## 🖼️ 截图

![项目截图](docs/images/screenshot.png)
![项目截图](docs/images/screenshot2.png)
![项目截图](docs/images/screenshot3.png)

> **截图说明：**
> - `screenshot.png`：前端首页 - 包含 Hero 横幅区域和鱼类图鉴卡片列表
> - `screenshot2.png`：管理后台 - 分类管理页面，展示分类列表、分页和编辑弹窗

## 🛠️ 快速开始

### 后端运行

```bash
cd LeSi.V2.Fish.Core

# 安装客户端依赖
abp install-libs

# 运行数据库迁移（首次运行）
dotnet run --project src/LeSi.V2.Fish.Core.DbMigrator

# 运行 Web 项目
dotnet run --project src/LeSi.V2.Fish.Core.Web
```

### 前端运行

```bash
cd LeSi.V2.Fish.Web

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

## 📋 功能特性

### 前端展示
- 🐠 **鱼类图鉴展示** - 响应式卡片布局，支持分类筛选
- 🔍 **多级分类筛选** - 按分类和子分类筛选鱼类
- 📄 **鱼类详情弹窗** - 展示鱼类的完整信息（科属、分布、栖息地、体长、寿命、食性、水温、pH 等）
- 🏷️ **保护状态标识** - 无危/易危/濒危状态标签
- ✨ **特征标签展示** - 鱼类主要特征标签
- 📱 **响应式设计** - 适配桌面端和移动端
- 🫧 **动画效果** - 首页气泡动画、鱼类游动动画

### 管理后台
- 🔐 **JWT 登录认证** - 支持记住密码
- 📁 **鱼类分类管理** - 分类的增删改查、图片上传、排序、启用/禁用
- 📂 **鱼类子类管理** - 子类的增删改查、所属分类、图片上传、搜索筛选
- 📊 **分页功能** - 支持分页和每页条数设置
- 🖼️ **图片上传** - 支持分类/子类图标上传（最大 10MB）

### 数据模型
- **鱼类主体** - 名称、英文名、学名、科属、分布、栖息地、体型、寿命、食性、温度、pH、描述、保护状态、图片、价格、排序、启用状态
- **分类** - 名称、图标、排序、启用状态
- **子分类** - 名称、图标、所属分类、排序、启用状态
- **特征** - 关联鱼类，特征描述

## 📖 相关资源

- [ABP Framework 文档](https://abp.io/docs/)
- [Vue 3 文档](https://cn.vuejs.org/)
- [Tailwind CSS 文档](https://tailwindcss.com/)

## 📄 License

MIT