# 功能地图前端

**Repository Path**: mingyu-java/front-end-of-functional-map

## Basic Information

- **Project Name**: 功能地图前端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-26
- **Last Updated**: 2026-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HJDB 前端项目

金融系统功能与代码影响分析平台 - 前端部分

## 📋 项目简介

本项目是 HJDB 系统的前端部分，使用 Vue 3 + Element Plus 构建，实现了功能地图、版本对比、技术栈分析等核心功能。

## 🎨 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Element Plus** - 基于 Vue 3 的组件库
- **Pinia** - Vue 状态管理
- **Vue Router** - 路由管理
- **Axios** - HTTP 客户端
- **Vite** - 构建工具
- **SCSS** - CSS 预处理器

## 🗂️ 项目结构

```
hjdb-frontend/
├── index.html                    # 入口 HTML
├── package.json                  # 包配置
├── vite.config.js                # Vite 配置
├── src/
│   ├── main.js                   # 入口文件
│   ├── App.vue                   # 根组件
│   ├──
│   ├── api/                      # API 接口
│   │   └── index.js              # 所有 API 接口
│   ├──
│   ├── components/               # 公共组件
│   │   └── FunctionDetail.vue    # 功能详情组件
│   ├──
│   ├── pages/                    # 页面组件
│   │   ├── FunctionMap.vue       # 功能地图（主页面）
│   │   ├── ChannelManage.vue     # 渠道管理
│   │   ├── VersionManage.vue     # 版本管理
│   │   ├── DomainManage.vue      # 领域管理
│   │   ├── FunctionManage.vue    # 功能管理
│   │   ├── PageManage.vue        # 页面管理
│   │   ├── JsFileManage.vue      # JS文件管理
│   │   ├── JsMethodManage.vue    # JS方法管理
│   │   ├── ApiManage.vue         # API管理
│   │   ├── SdkManage.vue         # SDK管理
│   │   ├── PermissionManage.vue  # 权限管理
│   │   └── CodeChangeManage.vue  # 代码变更管理
│   ├──
│   ├── router/                   # 路由配置
│   │   └── index.js              # 路由定义
│   ├──
│   ├── store/                    # 状态管理
│   │   └── index.js              # Pinia Store
│   ├──
│   └── utils/                    # 工具函数
│       └── index.js              # 常用工具函数
```

## 🚀 快速开始

### 1. 环境要求

- Node.js 18+
- npm 9+ 或 yarn 1.22+

### 2. 安装依赖

```bash
cd /home/admin/hjdb-frontend
npm install
```

### 3. 配置代理

编辑 `vite.config.js`，确保代理配置正确：

```javascript
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',  // 后端地址
      changeOrigin: true
    }
  }
}
```

### 4. 启动开发服务器

```bash
npm run dev
```

### 5. 构建生产版本

```bash
npm run build
```

## 📖 页面说明

### 主页面 - 功能地图 (/)

核心功能页面，包含：
- 渠道选择（块状按钮）
- 版本选择（基线版本 vs 对比版本）
- 领域筛选标签
- 功能树形列表（按领域分组）
- 功能详情面板（点击功能显示）
- 导出测试范围

### 管理页面

- **/channels** - 渠道管理
- **/versions** - 版本管理
- **/domains** - 领域管理
- **/functions** - 功能管理
- **/pages** - 页面管理
- **/js-files** - JS文件管理
- **/js-methods** - JS方法管理
- **/apis** - API管理
- **/sdks** - SDK管理
- **/permissions** - 权限管理
- **/code-changes** - 代码变更管理

## 🔌 API 接口

所有 API 接口定义在 `src/api/index.js` 中：

### 功能地图 API
- `functionMapApi.getFunctionMap(params)` - 获取功能地图
- `functionMapApi.getFunctionDetail(functionId, params)` - 获取功能详情
- `functionMapApi.exportTestScope(data)` - 导出测试范围

### 基础数据 API
- `channelApi.getList()` - 获取渠道列表
- `versionApi.getList()` - 获取版本列表
- `domainApi.getList()` - 获取领域列表

### 业务数据 API
- `functionApi.getList(params)` - 获取功能列表
- `pageApi.getList()` - 获取页面列表
- `jsFileApi.getList()` - 获取JS文件列表
- `jsMethodApi.getList()` - 获取JS方法列表
- `apiInfoApi.getList()` - 获取API列表

## 🎨 设计规范

### 颜色规范

```scss
// 主色调
--primary-color: #165DFF;
--primary-light: #E8F3FF;
--primary-hover: #4080FF;

// 状态色
--success-color: #00B42A;
--warning-color: #FF7D00;
--danger-color: #F53F3F;

// 文字色
--text-primary: #1D2129;
--text-secondary: #4E5969;
--text-tertiary: #86909C;

// 背景色
--bg-primary: #FFFFFF;
--bg-secondary: #F7F8FA;
```

### 组件规范

- 使用 Element Plus 组件
- 卡片使用 `el-card`，shadow="never"
- 表格使用 `el-table`，size="small"
- 按钮使用 `el-button`，大小：small/default
- 标签使用 `el-tag`，size="small"

## 📦 依赖列表

### 核心依赖
- vue: ^3.4.0
- vue-router: ^4.2.0
- pinia: ^2.1.0
- axios: ^1.6.0
- element-plus: ^2.5.0

### 开发依赖
- vite: ^5.0.0
- sass: ^1.69.0
- eslint: ^8.54.0

## 🔧 配置说明

### vite.config.js

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
})
```

## 🐛 常见问题

### 1. 跨域问题

确保后端已配置跨域，或检查 `vite.config.js` 中的代理配置。

### 2. API 请求失败

检查：
- 后端服务是否启动
- 代理配置是否正确
- 网络连接是否正常

### 3. Element Plus 组件不显示

确保已正确引入样式：
```javascript
import 'element-plus/dist/index.css'
```

## 📝 更新日志

### v1.0.0 (2025-03-24)
- 初始版本
- 完成功能地图页面
- 完成14个管理页面
- 集成 Element Plus UI
- 实现所有 API 接口对接

## 📞 联系方式

如有问题，请参考后端项目文档或联系开发团队。

---

**项目位置**: `/home/admin/hjdb-frontend/`

**后端项目**: `/home/admin/hjdb-backend/`