feat: 引入 banner

Author: sunxianfu

src/vue/about/App.vue

@@ -1,14 +1,6 @@
 <template>
     <div class="container">
-        <el-header class="header_box">
-            <div class="header_logo">
-              <img class="logo_img" :src="imgUrl['head-logo']" alt="" />
-              <div class="logo_text">
-                <p>扩展工具 - 关于</p>
-                <span>v{{ extensionInfo.version }}</span>
-              </div>
-            </div>
-        </el-header>
+        <Banner />
 
         <div class="content_area">
             <div v-html="readmeMarkdown"></div>
@@ -23,6 +15,7 @@ import { onMounted, ref } from 'vue';
 import { imgUrl } from '../assets/img';
 import { sendCommand } from '../api/vscode';
 import { extensionInfo } from '../setting/data';
+import Banner from '../components/Banner.vue';
 
 let readmeMarkdown = ref('');
 

src/vue/create-project/App.vue

@@ -1,14 +1,6 @@
 <template>
     <div class="container">
-        <el-header class="header_box">
-            <div class="header_logo">
-                <img class="logo_img" :src="imgUrl['head-logo']" alt="" />
-                <div class="logo_text">
-                    <p>扩展工具 - 创建工程</p>
-                    <span>v{{ extensionInfo.version }}</span>
-                </div>
-            </div>
-        </el-header>
+        <Banner />
 
         <div class="content_area">
             <div class="body-box">
@@ -64,6 +56,7 @@ import { computed, onMounted, onUpdated } from "vue";
 import { projectInfo, extensionInfo, envInfo } from "./data";
 import { sendCommand, sendCommandData } from "../api/vscode";
 import { imgUrl } from '../assets/img';
+import Banner from "../components/Banner.vue";
 
 onUpdated(() => {
     console.log('CreateProject App updated');

src/vue/projects/App.vue

@@ -1,14 +1,6 @@
 <template>
     <div class="container">
-        <el-header class="header_box">
-            <div class="header_logo">
-              <img class="logo_img" :src="imgUrl['head-logo']" alt="" />
-              <div class="logo_text">
-                <p>扩展工具 - workspace工程列表</p>
-                <span>v{{ extensionInfo.version }}</span>
-              </div>
-            </div>
-        </el-header>
+        <Banner />
 
         <div class="content_area">
             <br>
@@ -37,6 +29,7 @@ import type { ElTable } from 'element-plus';
 import { imgUrl } from '../assets/img';
 import { sendCommand } from '../api/vscode';
 import { extensionInfo } from '../setting/data';
+import Banner from '../components/Banner.vue';
 
 const loading = ref(false); // 是否加载中
 

src/vue/setting/view/layout/index.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="common-layout">
     <el-container>
-      <el-header class="header_box">
-        <div class="header_logo">
-          <img class="logo_img" :src="imgUrl['head-logo']" alt="" />
-          <div class="logo_text">
-            <p>扩展工具 - 配置</p>
-            <span>v{{ extensionInfo.version }}</span>
-          </div>
-        </div>
-      </el-header>
+      <Banner />
 
       <el-aside>
         <el-menu
@@ -46,6 +38,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { routes } from '../../router';
 import { extensionInfo } from '../../data';
 import { imgUrl } from '../../../assets/img'
+import Banner from '../../../components/Banner.vue';
 
 interface MenuRoute {
   path: string