# useGraphStageLib

**Repository Path**: staion/useGraphStageLib

## Basic Information

- **Project Name**: useGraphStageLib
- **Description**: 配置组件库发布使用，编写组件库demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-20
- **Last Updated**: 2025-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# knowledgeGraphLib

#### 介绍
配合组件库发布使用，编写网关使用demo
知识图谱首页组件使用

[自适应组件](README_adaptive.md)
#### 安装教程

``` js
// 切换npm源：http://verdaccio.iflyhed.com/
pnpm install fif-graph fif-utils

// main.ts  引入js和组件
import 'fif-graph/style.css'

// 包含FifKnowledgeGraph、f-image组件
import fifGraph from 'fif-graph'
app.use(fifGraph)

```

#### 依赖库
```js 
// 组件依赖库 注意版本
"element-plus": "~2.3.14",
"@element-plus/icons-vue": "^2.0.10",
"fif-base": "^0.0.131",
"pinia": "^2.0.28"

// main.ts 引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
const pinia = createPinia()
import 'fif-base/style.css'
import FifBase from 'fif-base'

let app = createApp(App)
app.use(ElementPlus)
app.use(pinia)
app.use(FifBase)
```


#### vue页面使用
```vue
<FifKnowledgeGraph v-if="graphConfig.graphId" :graphConfig=graphConfig></FifKnowledgeGraph>
```
```js
import { ref, onMounted } from "vue"
import { Getway } from "fif-utils"

// 实例化网关
const getway = new Getway({
  appCode: 'adopt',
  tokenKey: "test-token",
  baseUrl: 'https://apics.fifedu.com/',
  timeout: 5000,
  isLog: false,
  toLogin: async () => {
    // 未登录
    window.location.replace(`${'https://hecs.fifedu.com'}/iplat/fifLogin/index.html?service=${encodeURIComponent(window.location.href)}`)
  }
})

let graphConfig = ref({
  graphId: ''
})

onMounted(async () => {
  // 通过网关创建Axios
  const GETWAY = await getway.createAxios()

  // 解决data返回值问题，如果项目已有，不用配置
  GETWAY.Axios.interceptors.response.use(function (response) {
    let data = response.data
    if (response.status == 200 && data.status == 1) {
      return data
    }
  }, function (error) {
    return Promise.reject(error || 'Error')
  })
  
  let userInfo = {
    schoolId: '2811000226000001210',
  }
  graphConfig.value = {
    graphId: '259af2465ebe4dcaaeb25b778a7f52e0', //图谱id 必填
    courseId: '', // 课程id
    compile: 0, // 0可以编辑，1无权限编辑
    page: null, // iframe = 隐藏返回、切换课程、绑定课程、分享共建、保存状态
    hidePreview: 0, // 隐藏图谱预览按钮 1=隐藏
    userInfo: userInfo, // npm组件必传
    getway: GETWAY // 网关实例 如果项目已经接入网关，直接传入即可 必填
  }
})
```