From 8bd82b7d1dae08b123afdedf2ebd6c9a48be852d Mon Sep 17 00:00:00 2001
From: geekgeekrun <geekgeekrun>
Date: Sun, 14 Apr 2024 21:40:53 +0800
Subject: [PATCH] add build info on ui

---
 .../ui/src/renderer/src/hooks/useBuildInfo.ts |  9 ++
 .../renderer/src/page/Configuration/index.vue | 86 ++++++++++++++-----
 2 files changed, 73 insertions(+), 22 deletions(-)
 create mode 100644 packages/ui/src/renderer/src/hooks/useBuildInfo.ts

diff --git a/packages/ui/src/renderer/src/hooks/useBuildInfo.ts b/packages/ui/src/renderer/src/hooks/useBuildInfo.ts
new file mode 100644
index 0000000..05700f6
--- /dev/null
+++ b/packages/ui/src/renderer/src/hooks/useBuildInfo.ts
@@ -0,0 +1,9 @@
+import _buildInfo from '../../../common/build-info.json'
+import { shallowRef } from 'vue'
+
+export default function useBuildInfo() {
+  const buildInfo = shallowRef(JSON.parse(JSON.stringify(_buildInfo)))
+  return {
+    buildInfo
+  }
+}
diff --git a/packages/ui/src/renderer/src/page/Configuration/index.vue b/packages/ui/src/renderer/src/page/Configuration/index.vue
index 89bdc4b..f18a738 100644
--- a/packages/ui/src/renderer/src/page/Configuration/index.vue
+++ b/packages/ui/src/renderer/src/page/Configuration/index.vue
@@ -1,10 +1,22 @@
 <template>
   <div class="flex h100vh">
-    <div class="flex flex-col w160px pt50px pl30px aside-nav">
-      <RouterLink to="./GeekAutoStartChatWithBoss">Boss炸弹</RouterLink>
-      <RouterLink to="./StartChatRecord">开聊记录</RouterLink>
+    <div class="flex flex-col w160px pt30px pl30px aside-nav of-hidden">
+      <div class="nav-list flex-1 of-auto">
+        <RouterLink to="./GeekAutoStartChatWithBoss">Boss炸弹</RouterLink>
+        <RouterLink to="./StartChatRecord">开聊记录</RouterLink>
+      </div>
+      <div class="pt-16px pb-16px flex-0 font-size-12px">
+        <div>当前版本: {{ buildInfo.version }}({{ buildInfo.buildVersion }})</div>
+        <div class="feedback-area flex flex-items-center mt-8px">
+          <el-button type="text" size="small" @click="handleGotoProjectPageClick"
+            >项目首页</el-button
+          >
+          |
+          <el-button type="text" size="small" @click="handleFeedbackClick">反馈问题</el-button>
+        </div>
+      </div>
     </div>
-    <RouterView #default="{ Component }" class="flex-1">
+    <RouterView v-slot="{ Component }" class="flex-1">
       <KeepAlive>
         <component :is="Component" />
       </KeepAlive>
@@ -15,6 +27,7 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
+import useBuildInfo from '@renderer/hooks/useBuildInfo'
 const router = useRouter()
 const unmountedCbs: Array<InstanceType<typeof Function>> = []
 onUnmounted(() => {
@@ -48,29 +61,58 @@ onUnmounted(() => {
     return
   }
 })()
+
+const { buildInfo } = useBuildInfo()
+const getIssueUrlWithBody = (issueBody: string = '') => {
+  const baseUrl = `https://github.com/geekgeekrun/geekgeekrun/issues/new`
+  issueBody = issueBody || ''
+  if (!issueBody || !issueBody.trim()) {
+    return baseUrl
+  }
+  const urlObj = new URL(baseUrl)
+  urlObj.searchParams.append('body', issueBody)
+
+  return urlObj.toString()
+}
+const handleFeedbackClick = () => {
+  electron.ipcRenderer.send(
+    'open-external-link',
+    getIssueUrlWithBody(`\n\n\n-----
+版本号：${buildInfo.value.version}(${buildInfo.value.buildVersion})
+提交：${buildInfo.value.buildHash.substring(0, 6)}`)
+  )
+}
+const handleGotoProjectPageClick = () => {
+  electron.ipcRenderer.send('open-external-link', 'https://github.com/geekgeekrun/geekgeekrun')
+}
 </script>
 
 <style lang="scss" scoped>
 .aside-nav {
-  background-image: linear-gradient(
-    45deg,
-    #eaf4f1,
-    #dcf6f2,
-  );
-  > a {
-    display: flex;
-    align-items: center;
-    height: 2.5em;
-    box-sizing: border-box;
-    padding-left: 2em;
-    & + a {
-      margin-top: 10px;
+  background-image: linear-gradient(45deg, #eaf4f1, #dcf6f2);
+  .nav-list {
+    > a {
+      display: flex;
+      align-items: center;
+      height: 2.5em;
+      box-sizing: border-box;
+      padding-left: 2em;
+      & + a {
+        margin-top: 10px;
+      }
+      &.router-link-active {
+        background-color: #fff;
+        font-weight: 700;
+        color: #2faa9e;
+        border-radius: 9999px 0 0 9999px;
+      }
     }
-    &.router-link-active {
-      background-color: #fff;
-      font-weight: 700;
-      color: #2faa9e;
-      border-radius: 9999px 0 0 9999px;
+  }
+  .feedback-area {
+    :deep(.el-button) {
+      height: fit-content;
+      padding: 0;
+      margin-left: 0;
     }
   }
 }