From 76a995d7e3cef02c50081809b8f55b870efba40e Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 17 Jul 2024 15:24:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=B3=E4=BA=8E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/license.ts                         |  24 +++
 ui/src/enums/common.ts                        |   5 +
 .../components/top-bar/avatar/AboutDialog.vue |  99 +++++++---
 ui/src/locales/lang/zh_CN/layout.ts           |   2 +-
 ui/src/styles/app.scss                        |   4 +
 ui/src/views/theme/index.vue                  | 184 +++++++++---------
 6 files changed, 197 insertions(+), 121 deletions(-)
 create mode 100644 ui/src/api/license.ts

diff --git a/ui/src/api/license.ts b/ui/src/api/license.ts
new file mode 100644
index 000000000..16e5acdf6
--- /dev/null
+++ b/ui/src/api/license.ts
@@ -0,0 +1,24 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import { type Ref } from 'vue'
+
+const prefix = '/license'
+
+/**
+ * 获得license信息
+ */
+const getLicense: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}/profile`, undefined, loading)
+}
+/**
+ * 更新license信息
+ * @param 参数  license_file:file
+ */
+const putLicense: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (data, loading) => {
+  return put(`${prefix}/profile`, data, undefined, loading)
+}
+
+export default {
+  getLicense,
+  putLicense
+}
diff --git a/ui/src/enums/common.ts b/ui/src/enums/common.ts
index 3afd8fc26..e63bf033f 100644
--- a/ui/src/enums/common.ts
+++ b/ui/src/enums/common.ts
@@ -14,3 +14,8 @@ export enum ValidCount {
   Dataset = 50,
   User = 2
 }
+
+export enum EditionType {
+  Standard = '社区版',
+  Enterprise = '专业版'
+}
diff --git a/ui/src/layout/components/top-bar/avatar/AboutDialog.vue b/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
index 35e1f5308..16491b937 100644
--- a/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
+++ b/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
@@ -9,31 +9,55 @@
         <LogoFull height="59px" />
       </div>
     </template>
-    <div class="about-ui">
-      <el-card shadow="hover" class="mb-16" @click="toUrl('https://maxkb.cn/docs/')">
-        <div class="flex align-center cursor">
-          <AppIcon iconName="app-reading" class="mr-16 ml-8" style="font-size: 24px"></AppIcon>
-          <span>{{ $t('layout.topbar.wiki') }}</span>
-        </div>
-      </el-card>
-      <el-card shadow="hover" class="mb-16" @click="toUrl('https://github.com/1Panel-dev/MaxKB')">
-        <div class="flex align-center cursor">
-          <AppIcon iconName="app-github" class="mr-16 ml-8" style="font-size: 24px"></AppIcon>
-          <span>{{ $t('layout.topbar.github') }}</span>
-        </div>
-      </el-card>
-      <el-card shadow="hover" class="mb-16" @click="toUrl('https://bbs.fit2cloud.com/c/mk/11')">
-        <div class="flex align-center cursor">
-          <AppIcon iconName="app-help" class="mr-16 ml-8" style="font-size: 24px"></AppIcon>
-          <span>{{ $t('layout.topbar.forum') }}</span>
-        </div>
-      </el-card>
+    <div class="about-ui" v-loading="loading">
+      <div class="flex">
+        <span class="label">授权给</span><span>{{ licenseInfo?.corporation || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">ISV</span><span>{{ licenseInfo?.isv || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">过期时间</span><span>{{ licenseInfo?.expired || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">版本</span
+        ><span>{{
+          licenseInfo?.edition ? EditionType[licenseInfo.edition as keyof typeof EditionType] : '-'
+        }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">版本号</span><span>{{ licenseInfo?.licenseVersion || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">序列号</span><span>{{ licenseInfo?.serialNo || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">备注</span><span>{{ licenseInfo?.remark || '-' }}</span>
+      </div>
+
+      <div class="mt-16 flex align-center" v-hasPermission="new Role('ADMIN')">
+        <el-upload
+          ref="uploadRef"
+          action="#"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onChange"
+        >
+          <el-button class="border-primary">更新 License</el-button>
+        </el-upload>
+
+        <el-button class="border-primary ml-16" @click="toSupport">获取技术支持</el-button>
+      </div>
     </div>
-    <div class="text-center">{{ $t('layout.topbar.avatar.version') }}:{{ user.version }}</div>
+
+    <!-- <div class="text-center">{{ $t('layout.topbar.avatar.version') }}:{{ user.version }}</div> -->
   </el-dialog>
 </template>
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import licenseApi from '@/api/license'
+import { EditionType } from '@/enums/common'
+import { Role } from '@/utils/permission/type'
 import useStore from '@/stores'
 const { user } = useStore()
 const isDefaultTheme = computed(() => {
@@ -41,12 +65,29 @@ const isDefaultTheme = computed(() => {
 })
 
 const aboutDialogVisible = ref(false)
+const loading = ref(false)
+const licenseInfo = ref<any>(null)
 
 const open = () => {
+  getLicenseInfo()
   aboutDialogVisible.value = true
 }
 
-function toUrl(url: string) {
+const onChange = (file: any) => {
+  let fd = new FormData()
+  fd.append('license_file', file.raw)
+  licenseApi.putLicense(fd, loading).then((res: any) => {
+    getLicenseInfo()
+  })
+}
+function getLicenseInfo() {
+  licenseApi.getLicense(loading).then((res: any) => {
+    licenseInfo.value = res.data?.license
+  })
+}
+
+function toSupport() {
+  const url = 'https://support.fit2cloud.com/'
   window.open(url, '_blank')
 }
 
@@ -69,23 +110,23 @@ defineExpose({ open })
     box-sizing: border-box;
   }
   .about-ui {
-    width: 360px;
+    width: 450px;
     margin: 0 auto;
     font-weight: 400;
-    font-size: 16px;
+    font-size: 14px;
     margin-top: 24px;
+    line-height: 36px;
+
     .label {
-      width: 180px;
+      width: 150px;
       text-align: left;
       color: var(--app-text-color-secondary);
     }
   }
   &.custom-header {
-  .el-dialog__header {
-    background: var(--el-color-primary-light-9) !important;
+    .el-dialog__header {
+      background: var(--el-color-primary-light-9) !important;
+    }
   }
 }
-}
-
-
 </style>
diff --git a/ui/src/locales/lang/zh_CN/layout.ts b/ui/src/locales/lang/zh_CN/layout.ts
index 19132647e..7dd28aca8 100644
--- a/ui/src/locales/lang/zh_CN/layout.ts
+++ b/ui/src/locales/lang/zh_CN/layout.ts
@@ -12,7 +12,7 @@ export default {
         MenuItem: {
             application: "应用",
             dataset: "知识库",
-            setting: "系统设置"
+            setting: "系统管理"
         },
         avatar: {
             resetPassword: "修改密码",
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 1068aaba4..dc2ad7803 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -299,6 +299,10 @@ h5 {
 .border-t-dashed {
   border-top: 1px dashed var(--el-border-color);
 }
+.border-primary {
+  border: 1px solid var(--el-color-primary);
+  color: var(--el-color-primary);
+}
 
 .cursor {
   cursor: pointer;
diff --git a/ui/src/views/theme/index.vue b/ui/src/views/theme/index.vue
index d383179fa..4d02b448d 100644
--- a/ui/src/views/theme/index.vue
+++ b/ui/src/views/theme/index.vue
@@ -22,100 +22,102 @@
               <h5 class="mb-16">页面预览</h5>
               <el-button type="primary" link @click="resetForm"> 恢复默认 </el-button>
             </div>
-            <div class="theme-preview">
-              <el-row :gutter="8">
-                <el-col :span="16">
-                  <LoginPreview :data="themeForm" />
-                </el-col>
-                <el-col :span="8">
-                  <div class="theme-form">
-                    <el-card shadow="never" class="mb-8">
-                      <div class="flex-between mb-8">
-                        <span class="lighter">网站 Logo</span>
-                        <el-upload
-                          ref="uploadRef"
-                          action="#"
-                          :auto-upload="false"
-                          :show-file-list="false"
-                          accept="image/*"
-                          :on-change="
-                            (file: any, fileList: any) => onChange(file, fileList, 'icon')
-                          "
+            <el-scrollbar>
+              <div class="theme-preview">
+                <el-row :gutter="8">
+                  <el-col :span="16">
+                    <LoginPreview :data="themeForm" />
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="theme-form">
+                      <el-card shadow="never" class="mb-8">
+                        <div class="flex-between mb-8">
+                          <span class="lighter">网站 Logo</span>
+                          <el-upload
+                            ref="uploadRef"
+                            action="#"
+                            :auto-upload="false"
+                            :show-file-list="false"
+                            accept="image/*"
+                            :on-change="
+                              (file: any, fileList: any) => onChange(file, fileList, 'icon')
+                            "
+                          >
+                            <el-button size="small"> 替换图片 </el-button>
+                          </el-upload>
+                        </div>
+                        <el-text type="info" size="small"
+                          >顶部网站显示的 Logo，建议尺寸 48 x 48，支持 JPG、PNG、SVG，大小不超过
+                          200KB</el-text
                         >
-                          <el-button size="small"> 替换图片 </el-button>
-                        </el-upload>
-                      </div>
-                      <el-text type="info" size="small"
-                        >顶部网站显示的 Logo，建议尺寸 48 x 48，支持 JPG、PNG、SVG，大小不超过
-                        200KB</el-text
-                      >
-                    </el-card>
-                    <el-card shadow="never" class="mb-8">
-                      <div class="flex-between mb-8">
-                        <span class="lighter">登录 Logo</span>
-                        <el-upload
-                          ref="uploadRef"
-                          action="#"
-                          :auto-upload="false"
-                          :show-file-list="false"
-                          accept="image/*"
-                          :on-change="
-                            (file: any, fileList: any) => onChange(file, fileList, 'loginLogo')
-                          "
+                      </el-card>
+                      <el-card shadow="never" class="mb-8">
+                        <div class="flex-between mb-8">
+                          <span class="lighter">登录 Logo</span>
+                          <el-upload
+                            ref="uploadRef"
+                            action="#"
+                            :auto-upload="false"
+                            :show-file-list="false"
+                            accept="image/*"
+                            :on-change="
+                              (file: any, fileList: any) => onChange(file, fileList, 'loginLogo')
+                            "
+                          >
+                            <el-button size="small"> 替换图片 </el-button>
+                          </el-upload>
+                        </div>
+                        <el-text type="info" size="small"
+                          >登录页面右侧 Logo，建议尺寸 204*52，支持 JPG、PNG、SVG，大小不超过
+                          200KB</el-text
                         >
-                          <el-button size="small"> 替换图片 </el-button>
-                        </el-upload>
-                      </div>
-                      <el-text type="info" size="small"
-                        >登录页面右侧 Logo，建议尺寸 204*52，支持 JPG、PNG、SVG，大小不超过
-                        200KB</el-text
-                      >
-                    </el-card>
-                    <el-card shadow="never" class="mb-8">
-                      <div class="flex-between mb-8">
-                        <span class="lighter">登录背景图</span>
-                        <el-upload
-                          ref="uploadRef"
-                          action="#"
-                          :auto-upload="false"
-                          :show-file-list="false"
-                          accept="image/*"
-                          :on-change="
-                            (file: any, fileList: any) => onChange(file, fileList, 'loginImage')
-                          "
-                        >
-                          <el-button size="small"> 替换图片 </el-button>
-                        </el-upload>
-                      </div>
-                      <el-text type="info" size="small">
-                        左侧背景图，矢量图建议尺寸 576*900，位图建议尺寸1152*1800；支持
-                        JPG、PNG、SVG，大小不超过 5M
-                      </el-text>
-                    </el-card>
-
-                    <el-form
-                      ref="themeFormRef"
-                      :model="themeForm"
-                      label-position="top"
-                      require-asterisk-position="right"
-                      :rules="rules"
-                      @submit.prevent
-                    >
-                      <el-form-item label="网站名称" prop="title">
-                        <el-input v-model="themeForm.title" placeholder="请输入网站名称">
-                        </el-input>
-                        <el-text type="info"> 显示在网页 Tab 的平台名称 </el-text>
-                      </el-form-item>
-                      <el-form-item label="欢迎语" prop="slogan">
-                        <el-input v-model="themeForm.slogan" placeholder="请输入欢迎语"> </el-input>
-                        <el-text type="info"> 产品 Logo 下的 欢迎语 </el-text>
-                      </el-form-item>
-                    </el-form>
-                  </div></el-col
-                >
-              </el-row>
-            </div>
+                      </el-card>
+                      <el-card shadow="never" class="mb-8">
+                        <div class="flex-between mb-8">
+                          <span class="lighter">登录背景图</span>
+                          <el-upload
+                            ref="uploadRef"
+                            action="#"
+                            :auto-upload="false"
+                            :show-file-list="false"
+                            accept="image/*"
+                            :on-change="
+                              (file: any, fileList: any) => onChange(file, fileList, 'loginImage')
+                            "
+                          >
+                            <el-button size="small"> 替换图片 </el-button>
+                          </el-upload>
+                        </div>
+                        <el-text type="info" size="small">
+                          左侧背景图，矢量图建议尺寸 576*900，位图建议尺寸1152*1800；支持
+                          JPG、PNG、SVG，大小不超过 5M
+                        </el-text>
+                      </el-card>
 
+                      <el-form
+                        ref="themeFormRef"
+                        :model="themeForm"
+                        label-position="top"
+                        require-asterisk-position="right"
+                        :rules="rules"
+                        @submit.prevent
+                      >
+                        <el-form-item label="网站名称" prop="title">
+                          <el-input v-model="themeForm.title" placeholder="请输入网站名称">
+                          </el-input>
+                          <el-text type="info"> 显示在网页 Tab 的平台名称 </el-text>
+                        </el-form-item>
+                        <el-form-item label="欢迎语" prop="slogan">
+                          <el-input v-model="themeForm.slogan" placeholder="请输入欢迎语">
+                          </el-input>
+                          <el-text type="info"> 产品 Logo 下的 欢迎语 </el-text>
+                        </el-form-item>
+                      </el-form>
+                    </div></el-col
+                  >
+                </el-row>
+              </div>
+            </el-scrollbar>
             <div class="mt-16">
               <el-text type="info">默认为 MaxKB 登录界面，支持自定义设置</el-text>
             </div>