SlugTeam

# Options

# 定义

interface ReportData {
  en: string
  zh: string
  type: string

  action?: string
  targetid?: string
  targettype?: string
  from?: string
}

type reportFn = (data: ReportData) => void

// simple fork from VueRouter's define
interface NavConfig {
  path?: string
  name?: string
  query?: any
  [k: string]: any
}

interface QANavConfig {
  back: boolean
  find: NavConfig | string
  search: NavConfig | string
  ask: NavConfig | string
  detail: (id: string) => NavConfig | string
}

interface Inject {
  report?: reportFn
  SlugUI?: string | SlugUI
  SlugShare?: string | Constructor
  shareURL?: (qid: number) => string | undefined
  // 尺寸 200*200
  // 大小 <32kb
  shareImg?: string
}

export interface Options {
  // 异步请求参数
  options?: {
    token?: any // 登录态，一般无需配置，可自动获取
    game: string
    bid?: string // 一般无需配置

    bhost?: string[] // 业务域名
  }

  // 导航
  nav?: QANavConfig

  // 主题
  theme?: {
    colors: { [i: number]: string | undefined }
    searchbg?: string // 搜索无内容背景图
    download?: {
      url: string // 下载链接
      img: string // 下载图 750*125
    }
  }

  // 组件依赖
  inject?: Inject
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# 重要参数专项说明（重点！）

  1. 登录态优先级：
    1. 组件配置 options.token
    2. sessionStorage.authMap（mdnf 首先使用的 map 结构登录态）
    3. sessionStorage.tokenParams（大部分项目使用该字段存储登录态）
    4. document.location.search
  2. options.bhost 业务域名用于检查是否请求正式接口，优先级：
    1. 打包时若 process.env.NODE_ENV === 'production'，将进行无用代码提示清除以及测试接口删除（安全考虑），bhost 将无效化
    2. bhost.includes(window.location.host) 为真将请求正式接口
    3. devServer 若 process.env.NODE_ENV !== 'development' 将请求正式接口
    4. 其它情况请求测试接口
  3. 导航配置将传给 VueRouter
  4. 主题
    1. 配色标准参见 PPT，组件无关色号：9、10、11、12、13、17、20 (TODO: 16 未定，后续可能调整)
    2. 搜索图默认通过高度适配，两侧自适应
    3. 下载图配置仅竖屏详情页有效
  5. Inject 部分
    1. 参数支持组件 CDN URL 异步引用以及直接传入组件对象两种方式
    2. SlugQA 依赖于 SlugUI 中的 Scroll、 Icon、$toast

← Example（async、建议） →