红色资源

scss混入:（`src\App.scss`）scss混入

接口：（`src\util\user.ts`）

baseurl配置：（`src\util\config.ts`）

自定义指令：（`src\util\directives.ts`）

element-ui样式文件(`src\util\fonts`,`index.css`)

项目配置：(`vue.config.js`)

Vue对象混入公共方法（`src\main.ts`）

### 全局组件

NAV（`src\components\Page\Home\Nav.vue`）

> 从vuex里拿数据，数据为：$store.state.routerArr，函数式渲染一级二级路由
>
> 跳转是从$store.state.routerArr里面递归出一条路由对象，然后生成一个兼容好的路由对象，跳转到该页面，如：目录1下面包含目录1-1，就会跳转到目录1-1

map（`src\components\Page\Home\map.vue`）

> 首先给svg-dom绑定鼠标事件，鼠标划上去显示addresss里对应的数量
>
> 然后从接口里拿到数据，构造数据，赋给addresss

Header（`src\components\Page\Header.vue`）

Footer（`src\components\Page\Footer.vue`）

Breadcrumb（）

> 未进入详情页里面的面包屑，通过路由元信息($route.meta)里拿到面包屑，然后从全局路由数据（$store.state.routerArr）里构造出一个兼容的返回的页面地址

BreadcrumbDetail（`src\components\Page\BreadcrumbDetail.vue`）

> 详情页里面的面包屑，通过接口获取数据，然后从全局路由数据（$store.state.routerArr）里构造出一个兼容的返回的页面地址

#### 面包屑和详情面包屑跳转方法

> 方法1：都会一个方法根据id或者name从全局router里递归出一个router对象
>
> ```typescript
>   /**
>    * 根据全局路由递归对应的目录的路由数据
>    */
>   private getItem(name: string) {
>     let current = null
>     const fun = (arr: Array<any>) => {
>       arr.forEach((item) => {
>         if (item.name == name) {
>           return (current = item)
>         }
>         if (item.children && item.children.length !== 0) {
>           fun(item.children)
>         }
>       })
>     }
>     fun(this.$store.state.routerArr)
>     return current
>   }
> ```
>
> 方法2：根据上面方法获取到的route对象来判断点击它应该要跳转到的位置
>
> ```typescript
>  /**
>    * 根据这个路由的to_path和children获取点击他应该跳转到的导航
>    */
>   private getpath(item: any, items: Array<any>, index: number) {
>     if (!item) {
>       console.warn('导航栏数据加载中')
>       return {}
>     }
> 
>     const to = {
>       path: item.to_path,
>       query: { id: item.id, contentID: item.id },
>       data: item,
>       title: item.name
>     }
> 
>     if (
>       item.children &&
>       item.children instanceof Array &&
>       item.children.length !== 0
>     ) {
>       const item1 = item.children[0]
>       // console.error('item1item1item1', item1)
>       to.path = item1.to_path || item.to_path
> 
>       to.query = { id: item1.id, contentID: item1.id }
>       if (
>         item1.children &&
>         item1.children instanceof Array &&
>         item1.children.length !== 0
>       ) {
>         const item2 = item1.children[0]
>         to.path = item2.to_path || item1.to_path
>         to.query = { id: item2.id, contentID: item2.id }
>       }
>     }
>     // *** 时期没有to_path问题
>     if (to.path == null) {
>       to.path = items[index - 1].to_path || items[index - 2].to_path
>     }
> 
>     if (index === items.length - 1) {
>       return false
>     }
>     return to
>   }
> ```
>
>

高级检索（`src\components\Page\Search_GJJS`）目录

> - src\components\Page\Search_GJJS\Selects.vue
>   1. 选择分类的组件
> - src\components\Page\Search_GJJS\SearchItem.vue
>   1. 输入多条件联合的组件
> - src\components\Page\Search_GJJS\TimeHorizon.vue
>   1. ·选择发布时间区间的组件
> - src/components/global/search_advanced_result_render.vue
>   1. 渲染工具，负责把搜索的结果分类显示出不同的样式，里面带了分页，收藏，排序，下载的功能

普通搜索（`src\views\SearchList.vue`）

> - src/components/global/search_advanced_result_render.vue
>   1. 渲染工具，负责把搜索的结果分类显示出不同的样式，里面带了分页，收藏，排序，下载的功能
> - src/components/Page/Search/SearchSearchList.vue
>   1. 选择类别的组件，要搜索不同分类的数据（文章、文档、音频、图片、视频）
> - src/components/Page/Search/SearchSelect.vue
>   1. 选择类别的组件，要搜索不同分类的数据（文章、文档、音频、图片、视频）

左侧导航栏组件

> 有左侧导航栏组件的一级路由对应的目录下都可以找到NavListCol.vue
>
> 文件，如：`src\views\audioAndVideoVideo\NavListCol.vue`
>
> 交互实现了点击跳转到对应的路由下，并且可以监听到路由的变化从而改变已选择的状态

其他页面

其他页面在（`src\router\routers.ts`,`src\router\index.ts`）里卖都能找到对应的模板