From b57ddec8c005c9195911726893a74c8271da1dec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Sun, 1 Dec 2024 03:58:31 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=96=B0=E5=A2=9E=E5=8F=AF=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=8C=96=E7=9A=84=20`=E5=B8=AE=E5=8A=A9=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83`=20=E9=A1=B5=E9=9D=A2=20(#408)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/config/index.js             | 11 ++++++
 packages/gui/src/view/App.vue                 |  6 +--
 .../gui/src/view/components/tree-node.vue     | 25 +++++++++++++
 packages/gui/src/view/pages/help.vue          | 37 +++++++++++++++++++
 packages/gui/src/view/router/index.js         |  2 +
 packages/gui/src/view/router/menu.js          |  1 +
 packages/gui/src/view/style/index.scss        | 26 +++++++++++++
 7 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 packages/gui/src/view/components/tree-node.vue
 create mode 100644 packages/gui/src/view/pages/help.vue

diff --git a/packages/core/src/config/index.js b/packages/core/src/config/index.js
index 8417d3abc3..5020f34288 100644
--- a/packages/core/src/config/index.js
+++ b/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: '为了展示更多帮助信息，请启用 “远程配置” 功能！！！',
+      },
+    ],
+  },
 }
diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index bf54a31c5b..45744f7aa8 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -42,11 +42,11 @@ export default {
     handleClick (e) {
       console.log('click', e)
     },
-    titleClick (e) {
-      console.log('titleClick', e)
+    titleClick (item) {
+      console.log('title click:', item)
     },
     menuClick (item) {
-      console.log('menu click', item)
+      console.log('menu click:', item)
       this.$router.replace(item.path)
     },
   },
diff --git a/packages/gui/src/view/components/tree-node.vue b/packages/gui/src/view/components/tree-node.vue
new file mode 100644
index 0000000000..3e50a40f11
--- /dev/null
+++ b/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>
diff --git a/packages/gui/src/view/pages/help.vue b/packages/gui/src/view/pages/help.vue
new file mode 100644
index 0000000000..295c3b7985
--- /dev/null
+++ b/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>
diff --git a/packages/gui/src/view/router/index.js b/packages/gui/src/view/router/index.js
index d237950858..c67242f4da 100644
--- a/packages/gui/src/view/router/index.js
+++ b/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 },
diff --git a/packages/gui/src/view/router/menu.js b/packages/gui/src/view/router/menu.js
index f03e97c04f..5b06b4b68d 100644
--- a/packages/gui/src/view/router/menu.js
+++ b/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' })
diff --git a/packages/gui/src/view/style/index.scss b/packages/gui/src/view/style/index.scss
index cae283934e..6c50d5bb60 100644
--- a/packages/gui/src/view/style/index.scss
+++ b/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;
+    }
+  }
+}
\ No newline at end of file