Merge remote-tracking branch 'origin/main'

ui/src/components/icons/index.ts

@@ -551,6 +551,27 @@ export const iconMap: any = {
       ])
     }
   },
+  'app-warning-colorful': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M42.666667 512c0 259.2 210.133333 469.333333 469.333333 469.333333s469.333333-210.133333 469.333333-469.333333S771.2 42.666667 512 42.666667 42.666667 252.8 42.666667 512z m469.333333-277.333333A53.333333 53.333333 0 1 1 512 341.333333a53.333333 53.333333 0 0 1 0-106.666666zM458.666667 384h64a42.666667 42.666667 0 0 1 42.666666 42.666667v256h53.333334a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333H426.666667a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h53.333333v-213.333334h-21.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333z',
+              fill: '#3370FF'
+            })
+          ]
+        )
+      ])
+    }
+  },
   'app-operation': {
     iconReader: () => {
       return h('i', [
@@ -906,23 +927,7 @@ export const iconMap: any = {
           },
           [
             h('path', {
-              d: 'M494.592 165.12l-320 208a32 32 0 0 0-14.592 26.88v224a32 32 0 0 0 14.592 26.88l320 208a32 32 0 0 0 34.88 0l320-208a32 32 0 0 0 14.528-26.88v-224a32 32 0 0 0-14.528-26.88l-320-208a32 32 0 0 0-34.88 0zM224 417.408L512 230.144l288 187.2V606.72L512 793.856 224 606.656V417.28z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M512 592a32 32 0 0 0-32 32V832a32 32 0 0 0 64 0V624a32 32 0 0 0-32-32z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M165.76 381.632a32 32 0 0 0 7.872 44.608l320 224a32 32 0 0 0 36.736 0l320-224a32 32 0 0 0-36.736-52.48L512 584.96l-301.632-211.2a32 32 0 0 0-44.608 7.872z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M493.632 373.76a32 32 0 0 1 36.736 0l320 224a32 32 0 0 1-36.736 52.48L512 439.04l-301.632 211.2a32 32 0 1 1-36.736-52.48l320-224z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M512 160a32 32 0 0 0-32 32v208a32 32 0 0 0 64 0V192a32 32 0 0 0-32-32z',
+              d: 'M512 170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334h256a85.333333 85.333333 0 0 1 85.333334 85.333334v256a85.333333 85.333333 0 0 1-85.333334 85.333333h-256a85.333333 85.333333 0 0 1-85.333333-85.333333V170.666667z m85.333333 0v256h256V170.666667h-256zM85.333333 597.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h256a85.333333 85.333333 0 0 1 85.333333 85.333333v256a85.333333 85.333333 0 0 1-85.333333 85.333334H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333334v-256z m85.333334 0v256h256v-256H170.666667zM128 298.666667a213.333333 213.333333 0 0 1 213.333333-213.333334h85.333334v85.333334H341.333333a128 128 0 0 0-128 128h57.514667a12.8 12.8 0 0 1 9.728 21.12l-100.181333 116.906666a12.8 12.8 0 0 1-19.456 0l-100.181334-116.906666A12.8 12.8 0 0 1 70.485333 298.666667H128zM896 725.333333a213.333333 213.333333 0 0 1-213.333333 213.333334h-85.333334v-85.333334h85.333334a128 128 0 0 0 128-128v-21.333333h-57.514667a12.8 12.8 0 0 1-9.728-21.12l100.181333-116.906667a12.8 12.8 0 0 1 19.456 0l100.181334 116.906667a12.8 12.8 0 0 1-9.728 21.12H896v21.333333z',
               fill: 'currentColor'
             })
           ]

ui/src/layout/components/top-bar/index.vue

@@ -20,28 +20,43 @@
         <AppIcon iconName="app-pricing" class="mr-8" style="font-size: 20px"></AppIcon>
         购买专业版
       </el-button>
-      <el-tooltip effect="dark" :content="$t('layout.topbar.github')" placement="top">
+      <el-tooltip
+        effect="dark"
+        :content="$t('layout.topbar.github')"
+        placement="top"
+        v-if="user.themeInfo?.showProject"
+      >
         <AppIcon
           iconName="app-github"
           class="cursor color-secondary mr-8 ml-8"
           style="font-size: 20px"
-          @click="toUrl('https://github.com/1Panel-dev/MaxKB')"
+          @click="toUrl(user.themeInfo?.projectUrl)"
         ></AppIcon>
       </el-tooltip>
-      <el-tooltip effect="dark" :content="$t('layout.topbar.wiki')" placement="top">
+      <el-tooltip
+        effect="dark"
+        :content="$t('layout.topbar.wiki')"
+        placement="top"
+        v-if="user.themeInfo?.showUserManual"
+      >
         <AppIcon
           iconName="app-reading"
           class="cursor color-secondary mr-8 ml-8"
           style="font-size: 20px"
-          @click="toUrl('https://maxkb.cn/docs/')"
+          @click="toUrl(user.themeInfo?.userManualUrl)"
         ></AppIcon>
       </el-tooltip>
-      <el-tooltip effect="dark" :content="$t('layout.topbar.forum')" placement="top">
+      <el-tooltip
+        effect="dark"
+        :content="$t('layout.topbar.forum')"
+        placement="top"
+        v-if="user.themeInfo?.showForum"
+      >
         <AppIcon
           iconName="app-help"
           class="cursor color-secondary mr-16 ml-8"
           style="font-size: 20px"
-          @click="toUrl('https://bbs.fit2cloud.com/c/mk/11')"
+          @click="toUrl(user.themeInfo?.forumUrl)"
         ></AppIcon>
       </el-tooltip>
       <el-dropdown v-if="false" trigger="click" type="primary">

ui/src/stores/modules/user.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { type Ref } from 'vue'
 import type { User } from '@/api/type/user'
-
+import { cloneDeep } from 'lodash'
 import UserApi from '@/api/user'
 import ThemeApi from '@/api/theme'
 import { useElementPlusTheme } from 'use-element-plus-theme'
@@ -38,7 +38,7 @@ const useUserStore = defineStore({
     setTheme(data: any) {
       const { changeTheme } = useElementPlusTheme(this.themeInfo?.theme)
       changeTheme(data?.['theme'])
-      this.themeInfo = data
+      this.themeInfo = cloneDeep(data)
     },
     isExpire() {
       return this.isXPack && !this.XPACK_LICENSE_IS_VALID

ui/src/styles/app.scss

@@ -699,10 +699,11 @@ h5 {
     font-weight: 400;
   }
   .el-radio-button__original-radio:checked + .el-radio-button__inner {
-    color: var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
-    border: none;
-    box-shadow: none;
+    color: var(--el-color-primary) !important;
+    background: var(--el-color-primary-light-9) !important;
+    border: none !important;
+    box-shadow: none !important;
+    font-weight: 500;
   }
 }
 

ui/src/utils/theme.ts

@@ -37,3 +37,12 @@ export const defaultSetting = {
   title: 'MaxKB',
   slogan: '欢迎使用 MaxKB 智能知识库'
 }
+
+export const defaultPlatformSetting = {
+  showUserManual: true,
+  userManualUrl: 'https://maxkb.cn/docs/',
+  showForum: true,
+  forumUrl: 'https://bbs.fit2cloud.com/c/mk/11',
+  showProject: true,
+  projectUrl: 'https://github.com/1Panel-dev/MaxKB'
+}

ui/src/utils/utils.ts

@@ -38,7 +38,7 @@ export function fileType(name: string) {
   获得文件对应图片
 */
 const typeList: any = {
-  txt: ['txt', 'pdf', 'docx', 'csv', 'md', 'html', 'PDF'],
+  txt: ['txt', 'pdf', 'docx', 'csv', 'md', 'html'],
   table: ['xlsx', 'xls', 'csv'],
   QA: ['xlsx', 'csv', 'xls']
 }
@@ -46,12 +46,12 @@ const typeList: any = {
 export function getImgUrl(name: string) {
   const list = Object.values(typeList).flat()
 
-  const type = list.includes(fileType(name.toLowerCase())) ? fileType(name.toLowerCase()) : 'unknow'
+  const type = list.includes(fileType(name).toLowerCase()) ? fileType(name).toLowerCase() : 'unknow'
   return new URL(`../assets/${type}-icon.svg`, import.meta.url).href
 }
 // 是否是白名单后缀
 export function isRightType(name: string, type: string) {
-  return typeList[type].includes(fileType(name))
+  return typeList[type].includes(fileType(name).toLowerCase())
 }
 
 /*

ui/src/views/dataset/component/UploadComponent.vue

@@ -7,14 +7,33 @@
     label-position="top"
     require-asterisk-position="right"
   >
-    <el-form-item>
-      <el-radio-group v-model="form.fileType" @change="radioChange">
-        <el-radio value="txt">文本文件</el-radio>
-        <el-radio value="table">表格</el-radio>
-        <el-radio value="QA">QA 问答对</el-radio>
+    <div class="mt-16 mb-16">
+      <el-radio-group v-model="form.fileType" @change="radioChange" class="app-radio-button-group">
+        <el-radio-button value="txt">文本文件</el-radio-button>
+        <el-radio-button value="table">表格</el-radio-button>
+        <el-radio-button value="QA">QA 问答对</el-radio-button>
       </el-radio-group>
-    </el-form-item>
+    </div>
+
     <el-form-item prop="fileList" v-if="form.fileType === 'QA'">
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>
+            1、点击下载对应模版并完善信息：
+            <el-button type="primary" link @click="downloadTemplate('excel')">
+              下载 Excel 模版
+            </el-button>
+            <el-button type="primary" link @click="downloadTemplate('csv')">
+              下载 CSV 模版
+            </el-button>
+          </p>
+          <p>2、上传的表格文件中每个 sheet 会作为一个文档，sheet名称为文档名称</p>
+          <p>3、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
       <el-upload
         :webkitdirectory="false"
         class="w-full mb-4"
@@ -38,18 +57,31 @@
             <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
           </p>
           <div class="upload__decoration">
-            <p>当前支持 XLSX / XLS / CSV 格式的文档</p>
-            <p>每次最多上传50个文件，每个文件不超过 100MB</p>
+            <p>支持格式：EXCEL、CSV</p>
           </div>
         </div>
       </el-upload>
-      <el-button type="primary" link @click="downloadTemplate('excel')">
-        下载 Excel 模板
-      </el-button>
-      <el-divider direction="vertical" />
-      <el-button type="primary" link @click="downloadTemplate('csv')"> 下载 CSV 模板 </el-button>
     </el-form-item>
     <el-form-item prop="fileList" v-else-if="form.fileType === 'table'">
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>
+            1、点击下载对应模版并完善信息：
+            <el-button type="primary" link @click="downloadTableTemplate('excel')">
+              下载 Excel 模版
+            </el-button>
+            <el-button type="primary" link @click="downloadTableTemplate('csv')">
+              下载 CSV 模版
+            </el-button>
+          </p>
+          <p>2、第一行必须是列标题，且列标题必须是有意义的术语，表中每条记录将作为一个分段</p>
+          <p>3、上传的表格文件中每个 sheet 会作为一个文档，sheet名称为文档名称</p>
+          <p>4、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
       <el-upload
         :webkitdirectory="false"
         class="w-full mb-4"
@@ -73,19 +105,21 @@
             <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
           </p>
           <div class="upload__decoration">
-            <p>当前支持 EXCEL和CSV 格式文件。</p>
-            <p>第一行必须是列标题，且列标题必须是有意义的术语，表中每条记录将作为一个分段。</p>
-            <p>每次最多上传50个文档，每个文档最大不能超过100MB。</p>
+            <p>支持格式：EXCEL 和 CSV</p>
           </div>
         </div>
       </el-upload>
-      <el-button type="primary" link @click="downloadTableTemplate('excel')">
-        下载 Excel 模板
-      </el-button>
-      <el-divider direction="vertical" />
-      <el-button type="primary" link @click="downloadTableTemplate('csv')"> 下载 CSV 模板 </el-button>
     </el-form-item>
     <el-form-item prop="fileList" v-else>
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>1、文件上传前，建议规范文件的分段标识</p>
+          <p>2、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
       <el-upload
         :webkitdirectory="false"
         class="w-full"
@@ -95,7 +129,7 @@
         action="#"
         :auto-upload="false"
         :show-file-list="false"
-        accept=".txt, .md, .csv, .log, .docx, .pdf, .html, .PDF"
+        accept=".txt, .md, .csv, .log, .docx, .pdf, .html"
         :limit="50"
         :on-exceed="onExceed"
         :on-change="fileHandleChange"
@@ -109,10 +143,7 @@
             <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
           </p>
           <div class="upload__decoration">
-            <p>
-              支持格式：TXT、Markdown、PDF、DOCX、HTML、Excel、CSV 每次最多上传50个文件，每个文件不超过 100MB
-            </p>
-            <p>若使用【高级分段】建议上传前规范文件的分段标识</p>
+            <p>支持格式：TXT、Markdown、PDF、DOCX、HTML</p>
           </div>
         </div>
       </el-upload>
@@ -253,4 +284,8 @@ defineExpose({
     color: var(--el-color-primary-light-5);
   }
 }
+.update-info {
+  background: #d6e2ff;
+  line-height: 25px;
+}
 </style>

ui/src/views/document/index.vue

@@ -153,6 +153,13 @@
                     </el-button>
                   </el-tooltip>
                 </span>
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="设置" placement="top">
+                    <el-button type="primary" text @click.stop="settingDoc(row)">
+                      <el-icon><Setting /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
                 <span @click.stop>
                   <el-dropdown trigger="click">
                     <el-button text type="primary">
@@ -160,10 +167,6 @@
                     </el-button>
                     <template #dropdown>
                       <el-dropdown-menu>
-                        <el-dropdown-item @click="settingDoc(row)">
-                          <el-icon><Setting /></el-icon>
-                          设置
-                        </el-dropdown-item>
                         <el-dropdown-item @click="openDatasetDialog(row)">
                           <AppIcon iconName="app-migrate"></AppIcon>
                           迁移
@@ -181,11 +184,21 @@
                 </span>
               </div>
               <div v-if="datasetDetail.type === '1'">
-                <el-tooltip effect="dark" content="同步" placement="top">
-                  <el-button type="primary" text @click.stop="syncDocument(row)">
-                    <el-icon><Refresh /></el-icon>
-                  </el-button>
-                </el-tooltip>
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="同步" placement="top">
+                    <el-button type="primary" text @click.stop="syncDocument(row)">
+                      <el-icon><Refresh /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="重新向量化" placement="top">
+                    <el-button type="primary" text @click.stop="refreshDocument(row)">
+                      <AppIcon iconName="app-document-refresh" style="font-size: 16px"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+
                 <span @click.stop>
                   <el-dropdown trigger="click">
                     <el-button text type="primary">
@@ -193,13 +206,6 @@
                     </el-button>
                     <template #dropdown>
                       <el-dropdown-menu>
-                        <el-dropdown-item @click="refreshDocument(row)">
-                          <AppIcon
-                            iconName="app-document-refresh"
-                            style="font-size: 16px"
-                          ></AppIcon>
-                          重新向量化</el-dropdown-item
-                        >
                         <el-dropdown-item icon="Setting" @click="settingDoc(row)"
                           >设置</el-dropdown-item
                         >

ui/src/views/theme/index.vue

@@ -25,7 +25,7 @@
           <el-card shadow="never" class="layout-bg">
             <div class="flex-between">
               <h5 class="mb-16">页面预览</h5>
-              <el-button type="primary" link @click="resetForm"> 恢复默认 </el-button>
+              <el-button type="primary" link @click="resetForm('login')"> 恢复默认 </el-button>
             </div>
             <el-scrollbar>
               <div class="theme-preview">
@@ -133,6 +133,85 @@
             </div>
           </el-card>
         </div>
+        <div class="app-card p-24 mt-16">
+          <h5 class="mb-16">平台设置</h5>
+          <el-card shadow="never" class="layout-bg">
+            <div class="flex-between">
+              <h5 class="mb-16">页面预览</h5>
+              <el-button type="primary" link @click="resetForm('platform')"> 恢复默认 </el-button>
+            </div>
+            <el-scrollbar>
+              <div class="theme-preview">
+                <el-row :gutter="8">
+                  <el-col :span="16">
+                    <div class="theme-platform mr-16">
+                      <div
+                        class="theme-platform-header border-b flex-between"
+                        :class="!isDefaultTheme ? 'custom-header' : ''"
+                      >
+                        <div class="flex-center h-full">
+                          <div class="app-title-container cursor">
+                            <div class="logo flex-center">
+                              <LogoFull height="25px" />
+                            </div>
+                          </div>
+                        </div>
+                        <div class="flex-center">
+                          <AppIcon
+                            iconName="app-github"
+                            class="cursor color-secondary mr-8 ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showProject"
+                          ></AppIcon>
+                          <AppIcon
+                            iconName="app-reading"
+                            class="cursor color-secondary mr-8 ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showUserManual"
+                          ></AppIcon>
+                          <AppIcon
+                            iconName="app-help"
+                            class="cursor color-secondary ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showForum"
+                          ></AppIcon>
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="theme-form">
+                      <div>
+                        <el-checkbox v-model="themeForm.showUserManual" label="显示用户手册" />
+                        <div class="ml-16">
+                          <el-input
+                            v-model="themeForm.userManualUrl"
+                            placeholder="请输入 URL 地址"
+                          />
+                        </div>
+                      </div>
+                      <div class="my-2">
+                        <el-checkbox v-model="themeForm.showForum" label="显示论坛求助" />
+                        <div class="ml-16">
+                          <el-input v-model="themeForm.forumUrl" placeholder="请输入 URL 地址" />
+                        </div>
+                      </div>
+                      <div class="mt-2">
+                        <el-checkbox v-model="themeForm.showProject" label="显示项目地址" />
+                        <div class="ml-16">
+                          <el-input v-model="themeForm.projectUrl" placeholder="请输入 URL 地址" />
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-scrollbar>
+            <div class="mt-16">
+              <el-text type="info">默认为 MaxKB 登录界面，支持自定义设置</el-text>
+            </div>
+          </el-card>
+        </div>
       </div>
     </el-scrollbar>
     <div class="theme-setting__operate w-full p-16-24">
@@ -143,12 +222,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { useRouter, onBeforeRouteLeave } from 'vue-router'
 import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
 import { cloneDeep } from 'lodash'
 import LoginPreview from './LoginPreview.vue'
-import { themeList, defaultSetting } from '@/utils/theme'
+import { themeList, defaultSetting, defaultPlatformSetting } from '@/utils/theme'
 import ThemeApi from '@/api/theme'
 import { MsgSuccess, MsgError } from '@/utils/message'
 import useStore from '@/stores'
@@ -161,6 +240,9 @@ onBeforeRouteLeave((to, from) => {
 })
 
 const themeInfo = computed(() => user.themeInfo)
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
 
 const themeFormRef = ref<FormInstance>()
 const loading = ref(false)
@@ -171,7 +253,13 @@ const themeForm = ref<any>({
   loginLogo: '',
   loginImage: '',
   title: 'MaxKB',
-  slogan: '欢迎使用 MaxKB 智能知识库'
+  slogan: '欢迎使用 MaxKB 智能知识库',
+  showUserManual: false,
+  userManualUrl: '',
+  showForum: false,
+  forumUrl: '',
+  showProject: false,
+  projectUrl: ''
 })
 const themeRadio = ref('')
 const customColor = ref('')
@@ -201,6 +289,7 @@ const onChange = (file: any, fileList: UploadFiles, attr: string) => {
       themeForm.value[attr] = file.raw
     }
   }
+  user.setTheme(themeForm.value)
 }
 
 function changeThemeHandle(val: string) {
@@ -219,11 +308,20 @@ function resetTheme() {
   themeForm.value = cloneDeep(themeInfo.value)
 }
 
-function resetForm() {
-  themeForm.value = {
-    theme: themeForm.value.theme,
-    ...defaultSetting
-  }
+function resetForm(val: string) {
+  themeForm.value =
+    val === 'base'
+      ? {
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultSetting
+        }
+      : {
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultPlatformSetting
+        }
+
   user.setTheme(themeForm.value)
 }
 
@@ -249,11 +347,11 @@ onMounted(() => {
     router.push({ path: `/application` })
   }
   if (themeInfo.value) {
-    themeRadio.value = themeList.some((v) => v === themeInfo.value.theme)
+    themeRadio.value = themeList.some((v) => v.value === themeInfo.value.theme)
       ? themeInfo.value.theme
       : 'custom'
     customColor.value = themeInfo.value.theme
-    themeForm.value = themeInfo.value
+    themeForm.value = cloneDeep(themeInfo.value)
     cloneTheme.value = cloneDeep(themeInfo.value)
   }
 })
@@ -281,5 +379,13 @@ onMounted(() => {
   .theme-preview {
     min-width: 1000px;
   }
+  .theme-platform {
+    background: #ffffff;
+    height: 220px;
+    .theme-platform-header {
+      padding: 10px 20px;
+      background: var(--app-header-bg-color);
+    }
+  }
 }
 </style>