feat(about): about

Author: dataeaseShu

frontend/src/assets/embedded/LOGO-about.png

@@ -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/assets/svg/icon_info_outlined_1.svg

@@ -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/components/about/index.vue

@@ -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;
+}