---
title: mushroom
canonical_url: "https://www.modelscope.cn/studios/kkz4022/mushroom"
md_url: "https://www.modelscope.cn/studios/kkz4022/mushroom.md"
repository: kkz4022/mushroom
chinese_name: "闻香识菌子"
last_updated: 2026-08-10
sdk_type: docker
sdk_version: 6.17.3
downloads: 0
stars: 0
---

# mushroom

> mushroom - kkz4022 在 ModelScope 创建的在线 Demo。《闻香识菌子》是一套面向云南野生菌的数字科普与文化交流平台，通过AI图片识别辅助、剪纸小纸人风险提示、云南菌种数据库、地域地图和用户故事社区，让用户更方便地认识菌子、理解风险、探索云南菌文化，同时避免将AI识别结果误用为野生菌食用判断依据。

kkz4022/mushroom 是 ModelScope 魔搭社区上的在线可交互 Demo（创空间），基于 docker 6.17.3 构建，中文名为「闻香识菌子」。

- **Repository**: kkz4022/mushroom
- **SDK**: docker
- **SDK version**: 6.17.3
- **Downloads**: 0
- **Stars**: 0
- **Last updated**: 2026-08-10

Source: https://www.modelscope.cn/studios/kkz4022/mushroom

---

# 闻香识菌子

## ⚠️ 安全声明

本项目提供的云南野生菌图鉴、风险提示、相似菌比较及其他相关信息，仅用于科普、自然教育、文化传播和技术展示，不能作为判断野生菌是否可以食用的依据。野生菌外观相似度高，仅凭图片、外观或网络资料可能发生误判。任何无法准确确认种类的野生菌请勿采食；如已经食用并出现身体不适，请立即就医，并尽可能携带剩余菌体或相关样本。

本项目未来如增加 AI 图片辅助识别功能，其识别结果也只能作为科普参考，不构成食用鉴定或医疗建议。

> 探索云南山林里的奇妙菌子。

《闻香识菌子》是一个基于 Vue 3 与 Vite 开发的云南野生菌数字科普网站 Demo。项目通过野生菌图鉴、剪纸小纸人风险系统、云南菌子地图、菌味菜谱和山野故事，展示云南丰富的野生菌资源与地域文化。

## 项目介绍

项目定位为云南野生菌数字博物馆、风险科普专题与地域文化展示网站。它面向产品演示、比赛展示和公网静态部署，不包含商业系统所需的后台服务。

## 项目功能

- **首页展示**：通过宽屏视觉、当季菌子、风险专题、地图、菌味和故事内容介绍项目。
- **云南野生菌图鉴**：展示 12 种云南代表菌，支持按食用状态筛选和查看详情。
- **菌子详情**：展示菌子名称、俗名、风险等级、外观特点、分布地区、生长季节、相似菌和推荐菜品。
- **小纸人风险系统**：使用 5 个固定剪纸人物的实心与空心状态表达风险等级。
- **云南菌子地图**：按昆明、楚雄、大理、迪庆等地区查看代表菌种。
- **云南菌味**：展示当地特色菌子菜品及关联菌种。
- **夜话菌子**：以模拟社区形式展示山野故事、菌味分享、中毒经历和菌子见闻。
- **关于项目**：介绍作品定位、核心功能和安全说明。

## 技术栈

| 类别 | 技术 |
| --- | --- |
| 前端框架 | Vue 3 |
| 构建工具 | Vite 6 |
| 路由 | Vue Router 4 |
| 开发语言 | JavaScript |
| 样式 | CSS3 |
| 数据 | 本地 JSON |
| 容器构建 | Docker、Node.js Alpine |
| 静态服务 | Nginx Alpine |

项目不依赖后端服务或数据库，页面数据均由本地 JSON 文件提供。

## 项目目录

```text
.
├── app/                       # Vue 3 前端工程
│   ├── src/
│   │   ├── assets/            # 菌子、生境和菜品图片
│   │   ├── components/        # 公共展示组件
│   │   ├── data/              # 菌子、地区、菜品和故事 JSON 数据
│   │   ├── router/            # Vue Router 路由配置
│   │   ├── styles/            # 全局样式
│   │   ├── utils/             # 图片资源辅助方法
│   │   ├── views/             # 首页、图鉴、详情、地图等页面
│   │   ├── App.vue            # 根组件
│   │   └── main.js            # 应用入口
│   ├── index.html             # Vite HTML 入口
│   ├── package.json           # 依赖与 npm 脚本
│   └── vite.config.js         # Vite 配置
├── Dockerfile                 # Node 构建 + Nginx 运行镜像
├── nginx.conf                 # Nginx 静态服务配置
└── README.md                  # 项目说明
```

## 环境要求

- Node.js 20 或更高版本
- npm 10 或更高版本
- Docker Desktop 或其他兼容 Docker Engine（仅 Docker 部署需要）

## 本地开发

Vue 工程位于 `app/` 目录。进入该目录后安装依赖并启动开发服务器：

```powershell
cd app
npm install
npm run dev
```

开发服务器默认监听：

```text
http://localhost:3000
```

## 生产构建

在 `app/` 目录执行：

```powershell
npm run build
```

构建产物生成在 `app/dist/`。如需在本机预览生产构建：

```powershell
npm run preview
```

## Docker 部署

Docker 使用多阶段构建：第一阶段通过 Node.js 安装依赖并执行 Vite 构建，第二阶段使用 Nginx 提供静态文件。

以下命令均在项目根目录执行。

### 构建镜像

```powershell
docker build -t wenxiang-shijunzi .
```

### 前台运行

```powershell
docker run --rm -p 8080:80 wenxiang-shijunzi
```

浏览器访问：

```text
http://localhost:8080
```

前台运行时按 `Ctrl+C` 停止容器。

### 后台运行

```powershell
docker run --rm -d --name wenxiang-shijunzi -p 8080:80 wenxiang-shijunzi
```

查看日志：

```powershell
docker logs -f wenxiang-shijunzi
```

停止容器：

```powershell
docker stop wenxiang-shijunzi
```

由于运行命令使用了 `--rm`，容器停止后会自动删除。

## 数据与图片资源

- 菌子、菜品、地区和故事数据位于 `app/src/data/`。
- 图片资源位于 `app/src/assets/`，构建时由 Vite 统一处理。
- 当前 Demo 收录 12 种云南代表菌，包含可食、条件可食、风险菌和剧毒菌等科普分类。
- 如需调整展示内容，请优先修改对应 JSON 数据，避免在页面组件中重复硬编码。

## 项目范围

- 本项目是用于产品展示和科普体验的前端 Demo，不是商业完整版。
- 项目没有用户认证、后端 API、数据库或真实社区发布功能。
- 收藏、故事等交互均为前端展示或本地模拟。
- 小纸人数量表示需要关注的风险程度，不代表绝对安全。

## 安全说明

野生菌的外观会受到生长阶段、环境和个体差异影响，仅凭照片或网页描述无法可靠鉴定。不要依据本项目内容采集、购买、加工或食用野生菌；出现疑似中毒症状时，请立即就医并联系当地专业机构。