From 808ed2a83b57093e52748df37f76ff092965a786 Mon Sep 17 00:00:00 2001
From: chenhaibo <495810242@qq.com>
Date: Tue, 4 Feb 2025 19:50:57 +0800
Subject: [PATCH] add  page:About

---
 html/NextGB/index.html                        |   2 +-
 html/NextGB/public/logo.svg                   |  44 ++++
 html/NextGB/src/App.vue                       |  25 ++-
 html/NextGB/src/assets/logo.svg               |  45 ++++-
 html/NextGB/src/router/index.ts               |  19 +-
 html/NextGB/src/views/setting/About.vue       | 191 ++++++++++++++++++
 .../NextGB/src/views/setting/SettingsView.vue |   4 +-
 7 files changed, 323 insertions(+), 7 deletions(-)
 create mode 100644 html/NextGB/public/logo.svg
 create mode 100644 html/NextGB/src/views/setting/About.vue
diff --git a/html/NextGB/index.html b/html/NextGB/index.html
index 0d41463..ed1b2b4 100644
--- a/html/NextGB/index.html
+++ b/html/NextGB/index.html
@@ -2,7 +2,7 @@
 <html lang="">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/logo.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NextGB</title>
   </head>
diff --git a/html/NextGB/public/logo.svg b/html/NextGB/public/logo.svg
new file mode 100644
index 0000000..f045388
--- /dev/null
+++ b/html/NextGB/public/logo.svg
@@ -0,0 +1,44 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 背景圆形 -->
+  <circle cx="64" cy="64" r="60" fill="#409EFF"/>
+  
+  <!-- 内部装饰六边形 -->
+  <path d="M64 24L96 42V86L64 104L32 86V42L64 24Z" stroke="white" stroke-width="1" stroke-opacity="0.2"/>
+  <path d="M64 32L88 45V83L64 96L40 83V45L64 32Z" stroke="white" stroke-width="1" stroke-opacity="0.1"/>
+  
+  <!-- 装饰性线条 -->
+  <path d="M32 64H40" stroke="white" stroke-width="1" stroke-opacity="0.3"/>
+  <path d="M88 64H96" stroke="white" stroke-width="1" stroke-opacity="0.3"/>
+  <path d="M64 96V104" stroke="white" stroke-width="1" stroke-opacity="0.3"/>
+  
+  <!-- N 字母 - 科技艺术风格 -->
+  <path d="M42 38H54V68L73 38H85V86H73V56L54 86H42V38Z" fill="white"/>
+  <!-- N 字母装饰线条 -->
+  <path d="M42 42H50" stroke="#409EFF" stroke-width="2"/>
+  <path d="M77 42H85" stroke="#409EFF" stroke-width="2"/>
+  <path d="M42 82H50" stroke="#409EFF" stroke-width="2"/>
+  <path d="M77 82H85" stroke="#409EFF" stroke-width="2"/>
+  <!-- N 字母内部装饰 -->
+  <path d="M54 45L73 38" stroke="white" stroke-width="1" stroke-opacity="0.5"/>
+  <path d="M54 79L73 86" stroke="white" stroke-width="1" stroke-opacity="0.5"/>
+  <!-- 点缀效果 -->
+  <circle cx="42" cy="38" r="2" fill="white" fill-opacity="0.6"/>
+  <circle cx="85" cy="38" r="2" fill="white" fill-opacity="0.6"/>
+  <circle cx="42" cy="86" r="2" fill="white" fill-opacity="0.6"/>
+  <circle cx="85" cy="86" r="2" fill="white" fill-opacity="0.6"/>
+  
+  <!-- G 字母 - 标准印刷体 -->
+  <path d="M42 90H52C54 90 55 92 55 94V94H42V90ZM42 92V94H52C53 94 53 93 53 92H42Z" fill="white"/>
+  
+  <!-- B 字母 - 标准印刷体 -->
+  <path d="M73 90H83C84 90 85 91 85 92C85 93 84 94 83 94H73V90ZM75 91V93H83C83.5 93 83.5 92 83.5 91.5C83.5 91 83.5 91 83 91H75Z" fill="white"/>
+  
+  <!-- 科技感装饰 -->
+  <circle cx="32" cy="64" r="2" fill="white" fill-opacity="0.2"/>
+  <circle cx="96" cy="64" r="2" fill="white" fill-opacity="0.2"/>
+  <circle cx="64" cy="104" r="2" fill="white" fill-opacity="0.2"/>
+  
+  <!-- 点缀线条 -->
+  <path d="M34 64C34 47.4315 47.4315 34 64 34" stroke="white" stroke-width="1" stroke-linecap="round" stroke-dasharray="2 4" opacity="0.2"/>
+  <path d="M94 64C94 80.5685 80.5685 94 64 94" stroke="white" stroke-width="1" stroke-linecap="round" stroke-dasharray="2 4" opacity="0.2"/>
+</svg> 
\ No newline at end of file
diff --git a/html/NextGB/src/App.vue b/html/NextGB/src/App.vue
index 01c928d..5947473 100644
--- a/html/NextGB/src/App.vue
+++ b/html/NextGB/src/App.vue
@@ -83,7 +83,8 @@ onMounted(() => {
             <el-icon><Tools /></el-icon>
             <span>系统设置</span>
           </template>
-          <el-menu-item index="settings" @click="$router.push('/settings')">基本设置</el-menu-item>
+          <el-menu-item index="settings" @click="$router.push('/settings/system')">基本设置</el-menu-item>
+          <el-menu-item index="about" @click="$router.push('/settings/about')">关于</el-menu-item>
         </el-sub-menu>
       </el-menu>
     </div>
@@ -98,6 +99,9 @@ onMounted(() => {
           </el-button>
         </div>
         <div class="header-right">
+          <a href="https://github.com/ossrs/srs-sip" target="_blank" class="github-link">
+            <el-icon><svg viewBox="0 0 1024 1024" width="1em" height="1em"><path fill="currentColor" d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></el-icon>
+          </a>
           <el-dropdown>
             <span class="user-info">
               <el-icon class="avatar-icon"><User /></el-icon>
@@ -263,6 +267,25 @@ onMounted(() => {
   padding: 0 20px;
 }
 
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.github-link {
+  color: #606266;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+.github-link:hover {
+  color: #1890ff;
+}
+
 .user-info {
   display: flex;
   align-items: center;
diff --git a/html/NextGB/src/assets/logo.svg b/html/NextGB/src/assets/logo.svg
index 7565660..f045388 100644
--- a/html/NextGB/src/assets/logo.svg
+++ b/html/NextGB/src/assets/logo.svg
@@ -1 +1,44 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 背景圆形 -->
+  <circle cx="64" cy="64" r="60" fill="#409EFF"/>
+  
+  <!-- 内部装饰六边形 -->
+  <path d="M64 24L96 42V86L64 104L32 86V42L64 24Z" stroke="white" stroke-width="1" stroke-opacity="0.2"/>
+  <path d="M64 32L88 45V83L64 96L40 83V45L64 32Z" stroke="white" stroke-width="1" stroke-opacity="0.1"/>
+  
+  <!-- 装饰性线条 -->
+  <path d="M32 64H40" stroke="white" stroke-width="1" stroke-opacity="0.3"/>
+  <path d="M88 64H96" stroke="white" stroke-width="1" stroke-opacity="0.3"/>
+  <path d="M64 96V104" stroke="white" stroke-width="1" stroke-opacity="0.3"/>
+  
+  <!-- N 字母 - 科技艺术风格 -->
+  <path d="M42 38H54V68L73 38H85V86H73V56L54 86H42V38Z" fill="white"/>
+  <!-- N 字母装饰线条 -->
+  <path d="M42 42H50" stroke="#409EFF" stroke-width="2"/>
+  <path d="M77 42H85" stroke="#409EFF" stroke-width="2"/>
+  <path d="M42 82H50" stroke="#409EFF" stroke-width="2"/>
+  <path d="M77 82H85" stroke="#409EFF" stroke-width="2"/>
+  <!-- N 字母内部装饰 -->
+  <path d="M54 45L73 38" stroke="white" stroke-width="1" stroke-opacity="0.5"/>
+  <path d="M54 79L73 86" stroke="white" stroke-width="1" stroke-opacity="0.5"/>
+  <!-- 点缀效果 -->
+  <circle cx="42" cy="38" r="2" fill="white" fill-opacity="0.6"/>
+  <circle cx="85" cy="38" r="2" fill="white" fill-opacity="0.6"/>
+  <circle cx="42" cy="86" r="2" fill="white" fill-opacity="0.6"/>
+  <circle cx="85" cy="86" r="2" fill="white" fill-opacity="0.6"/>
+  
+  <!-- G 字母 - 标准印刷体 -->
+  <path d="M42 90H52C54 90 55 92 55 94V94H42V90ZM42 92V94H52C53 94 53 93 53 92H42Z" fill="white"/>
+  
+  <!-- B 字母 - 标准印刷体 -->
+  <path d="M73 90H83C84 90 85 91 85 92C85 93 84 94 83 94H73V90ZM75 91V93H83C83.5 93 83.5 92 83.5 91.5C83.5 91 83.5 91 83 91H75Z" fill="white"/>
+  
+  <!-- 科技感装饰 -->
+  <circle cx="32" cy="64" r="2" fill="white" fill-opacity="0.2"/>
+  <circle cx="96" cy="64" r="2" fill="white" fill-opacity="0.2"/>
+  <circle cx="64" cy="104" r="2" fill="white" fill-opacity="0.2"/>
+  
+  <!-- 点缀线条 -->
+  <path d="M34 64C34 47.4315 47.4315 34 64 34" stroke="white" stroke-width="1" stroke-linecap="round" stroke-dasharray="2 4" opacity="0.2"/>
+  <path d="M94 64C94 80.5685 80.5685 94 64 94" stroke="white" stroke-width="1" stroke-linecap="round" stroke-dasharray="2 4" opacity="0.2"/>
+</svg> 
\ No newline at end of file
diff --git a/html/NextGB/src/router/index.ts b/html/NextGB/src/router/index.ts
index c5df5ca..c49662e 100644
--- a/html/NextGB/src/router/index.ts
+++ b/html/NextGB/src/router/index.ts
@@ -5,6 +5,8 @@ import PlaybackView from '@/views/playback/PlaybackView.vue'
 import MediaServerView from '@/views/mediaserver/MediaServerView.vue'
 import DashboardView from '@/views/DashboardView.vue'
 import DeviceListView from '@/views/DeviceListView.vue'
+import SystemForm from '@/views/setting/SystemForm.vue'
+import About from '@/views/setting/About.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -30,8 +32,23 @@ const router = createRouter({
     },
     {
       path: '/settings',
-      name: 'settings',
       component: SettingsView,
+      children: [
+        {
+          path: '',
+          redirect: 'system'
+        },
+        {
+          path: 'system',
+          name: 'settings-system',
+          component: SystemForm
+        },
+        {
+          path: 'about',
+          name: 'settings-about',
+          component: About
+        }
+      ]
     },
     {
       path: '/playback',
diff --git a/html/NextGB/src/views/setting/About.vue b/html/NextGB/src/views/setting/About.vue
new file mode 100644
index 0000000..6c31ff3
--- /dev/null
+++ b/html/NextGB/src/views/setting/About.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { Check, Link } from '@element-plus/icons-vue'
+
+const aboutInfo = {
+  name: 'NextGB',
+  version: 'v1.0.0',
+  description: '下一代国标平台，支持GB/T 28181-2016标准，同时支持SRS和ZLMediaKit',
+  background: {
+    title: '与 AI 共舞',
+    sections: [
+      {
+        subtitle: '',
+        content: '本项目是一次探索性实验，代码通过与Cursor AI助手对话生成。项目旨在验证当前AI技术在实际项目开发中的能力和潜力。从项目启动到完成基本功能，总计投入约40个小时，包括UI，架构，甚至目录结构。'
+      },
+      {
+        subtitle: '',
+        content: '对于我这样一个后端开发者而言，UI设计几乎是不可能完成的任务，而现在，竟成了对话框里的文字。"要一个左边设备树、右边视频墙的布局"，当这句话变成代码在浏览器上显示时，我竟有些兴奋。从"八方向的云台控制面板"到"能拖拽缩放的时间轴"，AI像一个魔术师，不断的给我惊喜。有时，我甚至不知如何描述，只会输入"帮我优化样式"，然后就是等待惊喜的出现。'
+      },
+      {
+        subtitle: '',
+        content: '看着这样一件由对话框诞生的作品，我有一种"作弊"的兴奋感，同时还有一些恍惚。坦白讲，我不知道这将会是替代，还是开发者能力的延伸。毫无疑问的是，它将推倒领域间的壁垒，而我们，也将成为这一切的参与者，抑或见证者。'
+      },
+      {
+        subtitle: '',
+        content: ''
+      }
+    ]
+  }
+}
+</script>
+
+<template>
+  <div class="about-container">
+    <div class="about-header">
+      <el-image class="logo" src="/logo.svg" fit="contain" />
+      <div class="title-section">
+        <h1>{{ aboutInfo.name }}</h1>
+        <div class="version-tag">{{ aboutInfo.version }}</div>
+      </div>
+    </div>
+
+    <div class="about-content">
+      <div class="description">
+        {{ aboutInfo.description }}
+      </div>
+    </div>
+
+    <div class="author-container">
+      <div class="divider"></div>
+      <div class="author-section">
+        <div class="author-info">
+          <div class="background-content">
+            <h4 class="story-title">{{ aboutInfo.background.title }}</h4>
+            <div v-for="(section, index) in aboutInfo.background.sections" 
+                 :key="index" 
+                 class="story-section">
+              <h5 v-if="section.subtitle" class="section-subtitle">{{ section.subtitle }}</h5>
+              <p class="section-content">{{ section.content }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.about-container {
+  max-width: 900px;
+  margin: 32px auto;
+  padding: 0 24px;
+}
+
+.about-header {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 48px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.logo {
+  width: 90px;
+  height: 90px;
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.title-section h1 {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 600;
+  background: linear-gradient(120deg, var(--el-color-primary), var(--el-color-primary-light-3));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.version-tag {
+  background-color: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  padding: 6px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(var(--el-color-primary-rgb), 0.1);
+}
+
+.about-content {
+  color: var(--el-text-color-regular);
+}
+
+.description {
+  font-size: 18px;
+  line-height: 1.7;
+  margin-bottom: 40px;
+  color: var(--el-text-color-secondary);
+}
+
+.author-container {
+  margin-top: 60px;
+}
+
+.divider {
+  height: 1px;
+  background: linear-gradient(90deg, 
+    transparent, 
+    var(--el-border-color-lighter) 20%,
+    var(--el-border-color-lighter) 80%,
+    transparent
+  );
+  margin-bottom: 32px;
+}
+
+.author-section {
+  padding: 32px;
+  background: linear-gradient(145deg, var(--el-bg-color), var(--el-fill-color-light));
+  border-radius: 16px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+}
+
+.author-section h3 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: var(--el-text-color-primary);
+  font-weight: 600;
+}
+
+.author-info {
+  margin-top: 24px;
+}
+
+.background-content {
+  margin-top: 0;
+}
+
+.story-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--el-color-primary);
+  margin-bottom: 24px;
+}
+
+.story-section {
+  margin-bottom: 24px;
+}
+
+.section-subtitle {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+  margin-bottom: 12px;
+}
+
+.section-content {
+  font-size: 16px;
+  line-height: 1.8;
+  color: var(--el-text-color-secondary);
+  text-align: justify;
+  margin-bottom: 16px;
+}
+
+.story-section:last-child .section-content {
+  margin-bottom: 0;
+}
+</style> 
\ No newline at end of file
diff --git a/html/NextGB/src/views/setting/SettingsView.vue b/html/NextGB/src/views/setting/SettingsView.vue
index 551acbf..fa2d8fb 100644
--- a/html/NextGB/src/views/setting/SettingsView.vue
+++ b/html/NextGB/src/views/setting/SettingsView.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import SystemForm from '@/views/setting/SystemForm.vue'
 </script>
 
 <template>
   <div class="settings-view">
-    <h1>系统设置</h1>
     <div class="settings-content">
-      <SystemForm />
+      <router-view></router-view>
     </div>
   </div>
 </template>
