# bttoxin_webserver

BtToxin 毒素数据库 Web 前端项目，基于 Vue 3 + TypeScript + Vite 构建。

## 快速启动

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev
```

启动后访问 http://localhost:5173/ 查看前端页面。

### 主要页面

| 路由 | 页面 | 功能 |
|------|------|------|
| `/` | 任务提交页 | 上传 .fna 文件并提交分析任务 |
| `/:sessionId` | 任务监控页 | 实时查看任务执行状态和日志 |

## 项目结构

```
bttoxin_webserver/
├── public/                    # 静态资源
│   └── favicon.ico
├── src/
│   ├── api/                   # API 请求层
│   │   ├── http.ts            # axios 实例、拦截器、错误规范
│   │   ├── types.ts           # API 类型定义
│   │   ├── bttoxin.ts         # 毒素接口：list/detail/download
│   │   └── task.ts            # 任务接口：createTask/getTaskState/downloadResult
│   ├── components/
│   │   └── task/              # 任务监控组件
│   │       ├── TaskFlowPanel.vue      # 工作流步骤可视化
│   │       ├── TaskStatusBar.vue      # 任务状态概览栏
│   │       ├── TaskStepLogDrawer.vue  # 步骤日志抽屉
│   │       └── TaskSubmitForm.vue     # 任务提交表单
│   ├── composables/           # 组合式函数
│   │   ├── useAsync.ts        # 通用异步状态封装
│   │   └── useTaskState.ts    # 任务状态管理
│   ├── router/                # 路由配置
│   │   └── index.ts
│   ├── stores/                # Pinia 状态管理
│   │   ├── counter.ts         # 示例 store
│   │   └── toxin.ts           # 毒素业务 store
│   ├── types/                 # TypeScript 类型定义
│   │   └── task.ts            # 任务相关类型
│   ├── utils/                 # 工具函数
│   │   ├── error.ts           # 错误格式化、文件下载
│   │   └── task.ts            # 任务工具函数
│   ├── views/                 # 页面视图
│   │   ├── TaskSubmitView.vue # 任务提交页
│   │   └── TaskMonitorView.vue# 任务监控页
│   ├── __tests__/             # 单元测试
│   │   └── App.spec.ts
│   ├── App.vue                # 根组件
│   └── main.ts                # 入口文件
├── .env.development           # 开发环境变量
├── .env.production            # 生产环境变量
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts
```

## 环境配置

开发环境 `.env.development`:
```
VITE_API_BASE_URL=http://127.0.0.1:8000
```

生产环境 `.env.production`:
```
VITE_API_BASE_URL=https://your.domain/api
```

## API 请求使用方式

### 1. 直接调用 API 函数

```ts
import { listToxins, getToxinDetail } from '@/api/bttoxin'

// 获取列表
const data = await listToxins({ q: 'Cry', page: 1, pageSize: 20 })
console.log(data.items, data.total)

// 获取详情
const detail = await getToxinDetail('toxin-id')
```

### 2. 通过 Pinia Store 调用（推荐）

```vue
<script setup lang="ts">
import { onMounted } from 'vue'
import { useToxinStore } from '@/stores/toxin'

const store = useToxinStore()

onMounted(() => {
  store.fetchList()
})

// 更新筛选条件
function onSearch(keyword: string) {
  store.updateQuery({ q: keyword })
}

// 翻页
function onPageChange(page: number) {
  store.goToPage(page)
}
</script>

<template>
  <div v-if="store.loading">加载中...</div>
  <div v-else-if="store.error">{{ store.error.message }}</div>
  <ul v-else>
    <li v-for="item in store.items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>
```

### 3. 使用 useAsync 组合式函数

```vue
<script setup lang="ts">
import { useAsync } from '@/composables/useAsync'
import { getToxinDetail } from '@/api/bttoxin'

const { loading, error, data, execute } = useAsync(getToxinDetail)

// 调用
execute('toxin-id')
</script>

<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <div v-else>{{ data?.name }}</div>
</template>
```

### 4. 文件下载

```ts
import { downloadFasta, downloadCsv } from '@/api/bttoxin'
import { downloadBlob } from '@/utils/error'

// 下载单个 FASTA
const blob = await downloadFasta('toxin-id')
downloadBlob(blob, 'toxin.fasta')

// 下载 CSV
const csvBlob = await downloadCsv({ family: 'Cry' })
downloadBlob(csvBlob, 'toxins.csv')
```

## 开发指南

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

访问 http://localhost:5173/ 查看前端页面。

### 构建生产版本

```bash
pnpm build
```

### 预览生产构建

```bash
pnpm preview
```

### 运行单元测试

```bash
pnpm test:unit
```

### 类型检查

```bash
pnpm type-check
```

### 代码检查

```bash
pnpm lint
```

## 推荐 IDE 配置

[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## 浏览器插件

- Chrome: [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- Firefox: [Vue.js devtools
](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)