feature: 新增可配置化的 `帮助中心` 页面 (#408)

packages/core/src/config/index.js

@@ -419,4 +419,15 @@ module.exports = {
   },
   proxy: {},
   plugin: {},
+  help: {
+    data: [
+      {
+        title: '查看DevSidecar的说明文档（Wiki）',
+        url: 'https://github.com/docmirror/dev-sidecar/wiki',
+      },
+      {
+        title: '为了展示更多帮助信息，请启用 “远程配置” 功能！！！',
+      },
+    ],
+  },
 }

packages/gui/src/view/App.vue

@@ -42,11 +42,11 @@ export default {
     handleClick (e) {
       console.log('click', e)
     },
-    titleClick (e) {
+    titleClick (item) {
-      console.log('titleClick', e)
+      console.log('title click:', item)
     },
     menuClick (item) {
-      console.log('menu click', item)
+      console.log('menu click:', item)
       this.$router.replace(item.path)
     },
   },

packages/gui/src/view/components/tree-node.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+  name: 'TreeNode',
+  props: {
+    treeData: Array,
+  },
+  methods: {
+    async openExternal (url) {
+      await this.$api.ipc.openExternal(url)
+    },
+  },
+}
+</script>
+
+<template>
+  <ul>
+    <li v-for="node in treeData" :key="node.title">
+      <span v-if="node.url && (node.url.startsWith('http://') || node.url.startsWith('https://'))" :title="node.title">
+        <a @click="openExternal(node.url)">{{ node.title }}</a>
+      </span>
+      <span v-else :title="node.title">{{ node.title }}</span>
+      <tree-node v-if="node.children && node.children.length > 0" :tree-data="node.children" class="child-node" />
+    </li>
+  </ul>
+</template>

packages/gui/src/view/pages/help.vue

@@ -0,0 +1,37 @@
+<script>
+import Plugin from '../mixins/plugin'
+import TreeNode from '../components/tree-node'
+
+export default {
+  name: 'Help',
+  components: {
+    TreeNode,
+  },
+  mixins: [Plugin],
+  data () {
+    return {
+      key: 'help',
+    }
+  },
+  methods: {
+    async openExternal (url) {
+      await this.$api.ipc.openExternal(url)
+    },
+  },
+}
+</script>
+
+<template>
+  <ds-container>
+    <template slot="header">
+      帮助中心
+      <span>
+        <a-button @click="openExternal('https://github.com/docmirror/dev-sidecar/issues/new/choose')">反馈问题</a-button>
+      </span>
+    </template>
+
+    <div v-if="config" class="help-list">
+      <TreeNode :tree-data="config.help.dataList" />
+    </div>
+  </ds-container>
+</template>

packages/gui/src/view/router/index.js

@@ -6,6 +6,7 @@ import Pip from '../pages/plugin/pip'
 import Proxy from '../pages/proxy'
 import Server from '../pages/server'
 import Setting from '../pages/setting'
+import Help from '../pages/help'
 
 const routes = [
   { path: '/', redirect: '/index' },
@@ -13,6 +14,7 @@ const routes = [
   { path: '/server', component: Server },
   { path: '/proxy', component: Proxy },
   { path: '/setting', component: Setting },
+  { path: '/help', component: Help },
   { path: '/plugin/node', component: Node },
   { path: '/plugin/git', component: Git },
   { path: '/plugin/pip', component: Pip },

packages/gui/src/view/router/menu.js

@@ -15,6 +15,7 @@ export default function createMenus (app) {
       icon: 'api',
       children: plugins,
     },
+    { title: '帮助中心', path: '/help', icon: 'star' },
   ]
   if (app.$global && app.$global.setting && app.$global.setting.overwall) {
     plugins.push({ title: '功能增强', path: '/plugin/overwall', icon: 'global' })

packages/gui/src/view/style/index.scss

@@ -138,3 +138,29 @@ hr {
     margin: 0 5px 5px 5px;
   }
 }
+
+.help-list {
+  ul {
+    padding-left: 10px;
+    li {
+      list-style: none;
+      line-height: 35px;
+
+      span {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
+    }
+
+    // 嵌套列表
+    ul {
+      padding-left: 20px;
+    }
+  }
+}