feat(about): about

frontend/src/assets/svg/icon_info_outlined_1.svg

@@ -0,0 +1,17 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3692_433)">
+<g clip-path="url(#clip1_3692_433)">
+<path d="M8.00002 3.66667C8.46025 3.66667 8.83335 4.03977 8.83335 4.5C8.83335 4.96023 8.46025 5.33333 8.00002 5.33333C7.53979 5.33333 7.16669 4.96023 7.16669 4.5C7.16669 4.03977 7.53979 3.66667 8.00002 3.66667Z" fill="#646A73"/>
+<path d="M8.16669 6H7.33335C7.05721 6 6.83335 6.22386 6.83335 6.5V6.83333C6.83335 7.10948 7.05721 7.33333 7.33335 7.33333H7.50002V10.6667H6.83335C6.55721 10.6667 6.33335 10.8905 6.33335 11.1667V11.5C6.33335 11.7761 6.55721 12 6.83335 12H9.50002C9.77616 12 10 11.7761 10 11.5V11.1667C10 10.8905 9.77616 10.6667 9.50002 10.6667H8.83335V6.66667C8.83335 6.29848 8.53488 6 8.16669 6Z" fill="#646A73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00002 15.3332C3.95002 15.3332 0.666687 12.0498 0.666687 7.99984C0.666687 3.94984 3.95002 0.666504 8.00002 0.666504C12.05 0.666504 15.3334 3.94984 15.3334 7.99984C15.3334 12.0498 12.05 15.3332 8.00002 15.3332ZM8.00002 13.9998C11.3137 13.9998 14 11.3135 14 7.99984C14 4.68617 11.3137 1.99984 8.00002 1.99984C4.68636 1.99984 2.00002 4.68617 2.00002 7.99984C2.00002 11.3135 4.68636 13.9998 8.00002 13.9998Z" fill="#646A73"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_3692_433">
+<rect width="16" height="16" rx="4" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3692_433">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/components/about/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import logo from '@/assets/svg/logo.svg'
-import aboutBg from '@/assets/img/about-bg.png'
+import aboutBg from '@/assets/embedded/LOGO-about.png'
+
 import { ref, reactive, onMounted } from 'vue'
 import type { F2CLicense } from './index.ts'
 import { licenseApi } from '@/api/license'
@@ -138,16 +138,13 @@ defineExpose({
 <template>
   <el-dialog
     v-model="dialogVisible"
-    :append-to-body="true"
     :title="t('about.title')"
     width="840px"
-    class="about-dialog"
+    modal-class="about-dialog"
   >
-    <img width="792" height="180" :src="aboutBg" />
-    <div class="color-overlay"></div>
-    <el-icon class="logo">
-      <icon name="logo"><logo class="svg-icon" /></icon>
-    </el-icon>
+    <div class="color-overlay flex-center">
+      <img width="368" height="84" :src="aboutBg" />
+    </div>
     <div class="content">
       <div class="item">
         <div class="label">{{ $t('about.auth_to') }}</div>
@@ -163,12 +160,6 @@ defineExpose({
           {{ license.expired }}
         </div>
       </div>
-      <div class="item">
-        <div class="label">{{ $t('about.auth_num') }}</div>
-        <div class="value">
-          {{ license.status === 'valid' ? `${license.count} ${tipsSuffix}` : '' }}
-        </div>
-      </div>
       <div class="item">
         <div class="label">{{ $t('about.version') }}</div>
         <div class="value">
@@ -208,63 +199,59 @@ defineExpose({
         >
           <el-button plain> {{ $t('about.update_license') }} </el-button>
         </el-upload>
-        <el-button plain @click="support"> {{ $t('about.support') }} </el-button>
       </div>
     </div>
+    <div class="name">2014-2025 版权所有 © 杭州飞致云信息科技有限公司</div>
   </el-dialog>
 </template>
 
 <style lang="less">
 .about-dialog {
-  img {
-    border-radius: 4px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
   .color-overlay {
-    position: absolute;
-    border-radius: 4px;
-    width: 792px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    background: #1cba901a;
+    border: 1px solid #dee0e3;
+    border-bottom: 0;
     height: 180px;
-    top: 72px;
-    background-color: #7394f0;
-    mix-blend-mode: multiply;
   }
-  .logo {
-    font-size: 400px;
-    position: absolute;
-    top: -40px;
-    left: 228px;
-    color: #fff;
+
+  .name {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 22px;
+    text-align: center;
+    margin-top: 16px;
+    color: #8F959E;
   }
 
   .content {
-    border-radius: 4px;
+    border-radius: 6px;
     border: 1px solid #dee0e3;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+    border-top: 0;
     padding: 24px 40px;
-    margin-top: -7px;
 
     .item {
-      font-family: var(--de-custom_font, 'PingFang');
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
       line-height: 24px;
       margin-bottom: 16px;
       display: flex;
+      font-weight: 400;
       .expired-mark {
         color: red;
       }
       .label {
         color: #646a73;
-        width: 300px;
+        width: 240px;
       }
 
       .value {
         margin-left: 24px;
-        max-width: 388px;
+        max-width: 448px;
       }
     }
   }

frontend/src/components/layout/Person.vue

@@ -2,17 +2,21 @@
 import { ref, computed } from 'vue'
 import Default_avatar from '@/assets/workspace/default_avatar.png'
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
+import icon_info_outlined_1 from '@/assets/svg/icon_info_outlined_1.svg'
+
 import icon_maybe_outlined from '@/assets/svg/icon-maybe_outlined.svg'
 import icon_key_outlined from '@/assets/svg/icon-key_outlined.svg'
 import icon_translate_outlined from '@/assets/svg/icon_translate_outlined.svg'
 import icon_logout_outlined from '@/assets/svg/icon_logout_outlined.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
+import AboutDialog from '@/components/about/index.vue'
 import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
 import { useI18n } from 'vue-i18n'
 import PwdForm from './PwdForm.vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { userApi } from '@/api/auth'
+
 const router = useRouter()
 const userStore = useUserStore()
 const pwdFormRef = ref()
@@ -27,7 +31,7 @@ const account = computed(() => userStore.getAccount)
 const currentLanguage = computed(() => userStore.getLanguage)
 const isAdmin = computed(() => userStore.isAdmin)
 const dialogVisible = ref(false)
-
+const aboutRef = ref()
 const languageList = [
   {
     name: 'English',
@@ -63,6 +67,10 @@ const openPwd = () => {
 const closePwd = () => {
   dialogVisible.value = false
 }
+
+const toAbout = () => {
+  aboutRef.value?.open()
+}
 const savePwdHandler = () => {
   pwdFormRef.value?.submit()
 }
@@ -126,7 +134,12 @@ const logout = () => {
             </div>
           </div>
         </el-popover>
-
+        <div class="popover-item" @click="toAbout">
+          <el-icon size="16">
+            <icon_info_outlined_1></icon_info_outlined_1>
+          </el-icon>
+          <div class="datasource-name">{{ $t('about.title') }}</div>
+        </div>
         <div class="popover-item">
           <el-icon size="16">
             <icon_maybe_outlined></icon_maybe_outlined>
@@ -152,6 +165,7 @@ const logout = () => {
       </div>
     </template>
   </el-dialog>
+  <AboutDialog ref="aboutRef" />
 </template>
 
 <style lang="less" scoped>

frontend/src/style.less

@@ -32,6 +32,7 @@
   --ed-color-primary-1a: #1cba901a;
   --ed-color-primary-light-5: #3ec4a1 !important;
   --ed-border-color: #d9dcdf !important;
+  --ed-color-primary-light-7: #d2f1e9 !important;
 }
 
 a {
@@ -205,3 +206,7 @@ em {
 strong {
   font-synthesis: style weight !important;
 }
+
+.ed-button.is-plain:active {
+  background-color: #a4e3d3 !important;
+}