feat: 显示设置

ui/src/styles/app.scss

@@ -245,6 +245,12 @@ h5 {
   align-items: center;
 }
 
+.flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+}
+
 .align-center {
   align-items: center;
 }

ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue

@@ -0,0 +1,456 @@
+<template>
+  <el-dialog
+    title="显示设置"
+    width="900"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    align-center
+    class="display-setting-dialog"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="flex-between mb-8">
+        <h4 :id="titleId" :class="titleClass">显示设置</h4>
+        <div class="flex align-center">
+          <el-button type="primary" @click.prevent="resetForm" link>
+            <el-icon class="mr-4"><Refresh /></el-icon>
+            恢复默认
+          </el-button>
+          <el-divider direction="vertical" />
+        </div>
+      </div>
+    </template>
+
+    <el-row :gutter="8">
+      <el-col :span="12">
+        <div class="setting-preview border border-r-4 mr-16">
+          <div class="setting-preview-container">
+            <div class="setting-preview-header" :class="!isDefaultTheme ? 'custom-header' : ''">
+              <div class="flex-between">
+                <div class="flex align-center">
+                  <div class="mr-12 ml-24 flex">
+                    <AppAvatar
+                      v-if="isAppIcon(detail?.icon)"
+                      shape="square"
+                      :size="32"
+                      style="background: none"
+                    >
+                      <img :src="detail?.icon" alt="" />
+                    </AppAvatar>
+                    <AppAvatar
+                      v-else-if="detail?.name"
+                      :name="detail?.name"
+                      pinyinColor
+                      shape="square"
+                      :size="32"
+                    />
+                  </div>
+
+                  <h4>
+                    {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
+                  </h4>
+                </div>
+                <div class="mr-16">
+                  <el-button link>
+                    <AppIcon
+                      :iconName="'app-magnify'"
+                      class="color-secondary"
+                      style="font-size: 20px"
+                    ></AppIcon>
+                  </el-button>
+                  <el-button link>
+                    <el-icon :size="20" class="color-secondary"><Close /></el-icon>
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="p-16" style="position: relative">
+                <div class="flex">
+                  <div class="avatar">
+                    <el-image
+                      v-if="imgUrl.avatar"
+                      :src="imgUrl.avatar"
+                      alt=""
+                      fit="cover"
+                      style="width: 35px; height: 35px; display: block"
+                    />
+                    <LogoIcon
+                      v-else
+                      height="35px"
+                      style="width: 35px; height: 35px; display: block"
+                    />
+                  </div>
+
+                  <img src="@/assets/display-bg2.png" alt="" width="270" />
+                </div>
+                <div class="flex-between">
+                  <div class="avatar">
+                    <el-image
+                      v-if="imgUrl.user_avatar"
+                      :src="imgUrl.user_avatar"
+                      alt=""
+                      fit="cover"
+                      style="width: 35px; height: 35px; display: block"
+                    />
+                    <LogoIcon
+                      v-else
+                      height="35px"
+                      style="width: 35px; height: 35px; display: block"
+                    />
+                  </div>
+                  <img src="@/assets/user-icon.svg" width="270" alt="" />
+
+                  <img src="@/assets/display-bg3.png" alt="" width="270" />
+                </div>
+              </div>
+              <div style="position: absolute; bottom: 0">
+                <img src="@/assets/display-bg1.png" alt="" class="w-full" />
+              </div>
+            </div>
+          </div>
+
+          <div class="float_icon">
+            <el-image
+              v-if="imgUrl.float_icon"
+              :src="imgUrl.float_icon"
+              alt=""
+              fit="cover"
+              style="width: 40px; height: 40px; display: block"
+            />
+            <img
+              v-else
+              src="@/assets/logo/logo.svg"
+              height="50px"
+              style="width: 40px; height: 40px; display: block"
+            />
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <el-form ref="displayFormRef" :model="form">
+          <el-row class="w-full mb-8">
+            <el-col :span="12">
+              <h5 class="mb-8">自定义主题色</h5>
+              <el-color-picker v-model="form.custom_theme.theme_color"
+            /></el-col>
+            <el-col :span="12">
+              <h5 class="mb-8">头部标题字体颜色</h5>
+              <el-color-picker v-model="form.custom_theme.header_font_color" />
+            </el-col>
+          </el-row>
+          <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, 'user_avatar')"
+              >
+                <el-button size="small"> 替换 </el-button>
+              </el-upload>
+            </div>
+            <el-text type="info" size="small"
+              >建议尺寸 64*64，支持 JPG、PNG, GIF，大小不超过 10 MB</el-text
+            >
+          </el-card>
+          <el-card shadow="never" class="mb-8">
+            <div class="flex-between mb-8">
+              <span class="lighter">AI 回复头像</span>
+
+              <el-upload
+                ref="uploadRef"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                accept="image/*"
+                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
+              >
+                <el-button size="small"> 替换 </el-button>
+              </el-upload>
+            </div>
+            <el-text type="info" size="small"
+              >建议尺寸 32*32，支持 JPG、PNG, GIF，大小不超过 10 MB</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, 'float_icon')"
+              >
+                <el-button size="small"> 替换 </el-button>
+              </el-upload>
+            </div>
+            <el-text type="info" size="small">
+              建议尺寸 64*64，支持 JPG、PNG, GIF，大小不超过 10 MB
+            </el-text>
+            <div class="border-t mt-8">
+              <div class="flex-between mb-8">
+                <span class="lighter">图标默认位置</span>
+                <el-checkbox v-model="form.draggable" label="可拖拽位置" />
+              </div>
+              <el-row :gutter="8" class="w-full mb-8">
+                <el-col :span="12">
+                  <div class="flex align-center">
+                    <el-select v-model="form.float_location.x.type" style="width: 80px">
+                      <el-option label="左" value="left" />
+                      <el-option label="右" value="right" />
+                    </el-select>
+                    <el-input-number
+                      v-model="form.float_location.x.value"
+                      :min="0"
+                      controls-position="right"
+                    />
+                    <span class="ml-4">px</span>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="flex align-center">
+                    <el-select v-model="form.float_location.y.type" style="width: 80px">
+                      <el-option label="上" value="top" />
+                      <el-option label="下" value="bottom" />
+                    </el-select>
+                    <el-input-number
+                      v-model="form.float_location.y.value"
+                      :min="0"
+                      controls-position="right"
+                    />
+                    <span class="ml-4">px</span>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-card>
+
+          <el-space direction="vertical" alignment="start" :size="2">
+            <el-checkbox v-model="form.show_source" label="显示知识来源" />
+            <el-checkbox v-model="form.show_history" label="显示历史记录" />
+            <el-checkbox v-model="form.show_guide" label="显示引导图（浮窗模式）" />
+            <el-checkbox v-model="form.disclaimer" label="免责声明" />
+            <el-input
+              v-if="form.disclaimer"
+              v-model="form.disclaimer_value"
+              style="width: 422px; margin-bottom: 10px"
+            />
+          </el-space>
+        </el-form>
+      </el-col>
+    </el-row>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"
+          >{{ $t('views.applicationOverview.appInfo.LimitDialog.cancelButtonText') }}
+        </el-button>
+        <el-button type="primary" @click="submit(displayFormRef)" :loading="loading">
+          {{ $t('views.applicationOverview.appInfo.LimitDialog.saveButtonText') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
+import { isAppIcon } from '@/utils/application'
+import applicationXpackApi from '@/api/application-xpack'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { t } from '@/locales'
+import useStore from '@/stores'
+const { user } = useStore()
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const defaultSetting = {
+  show_source: false,
+  show_history: true,
+  draggable: true,
+  show_guide: true,
+  avatar: '',
+  float_icon: '',
+  user_avatar: '',
+  disclaimer: true,
+  disclaimer_value: '「以上内容均由AI生成，仅供参考和借鉴」',
+  custom_theme: {
+    theme_color: '',
+    header_font_color: ''
+  },
+  float_location: {
+    x: { type: '', value: '' },
+    y: { type: '', value: '' }
+  }
+}
+
+const displayFormRef = ref()
+const form = ref<any>({
+  show_source: false
+})
+
+const xpackForm = ref<any>({
+  show_source: false,
+  show_history: false,
+  draggable: false,
+  show_guide: false,
+  avatar: '',
+  float_icon: '',
+  user_avatar: '',
+  disclaimer: true,
+  disclaimer_value: '「以上内容均由AI生成，仅供参考和借鉴」',
+  custom_theme: {
+    theme_color: '',
+    header_font_color: ''
+  },
+  float_location: {
+    x: { type: '', value: '' },
+    y: { type: '', value: '' }
+  }
+})
+
+const imgUrl = ref<any>({
+  avatar: '',
+  float_icon: ''
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const detail = ref<any>(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      show_source: false
+    }
+    imgUrl.value = {
+      avatar: '',
+      float_icon: ''
+    }
+  }
+})
+
+function resetForm() {
+  form.value = {
+    ...defaultSetting
+  }
+  imgUrl.value = {
+    avatar: '',
+    float_icon: ''
+  }
+}
+
+const onChange = (file: any, fileList: UploadFiles, attr: string) => {
+  //1、判断文件大小是否合法，文件限制不能大于 10 MB
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    // @ts-ignore
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
+    return false
+  } else {
+    xpackForm.value[attr] = file.raw
+    imgUrl.value[attr] = URL.createObjectURL(file.raw)
+  }
+}
+
+const open = (data: any, content: any) => {
+  detail.value = content
+  xpackForm.value.show_source = data.show_source
+  xpackForm.value.show_history = data.show_history
+  xpackForm.value.draggable = data.draggable
+  xpackForm.value.show_guide = data.show_guide
+  xpackForm.value.avatar = data.avatar
+  xpackForm.value.float_icon = data.float_icon
+  imgUrl.value.avatar = data.avatar
+  imgUrl.value.float_icon = data.float_icon
+  imgUrl.value.user_avatar = data.user_avatar
+  xpackForm.value.user_avatar = data.user_avatar
+  xpackForm.value.disclaimer = data.disclaimer
+  xpackForm.value.disclaimer_value = data.disclaimer_value
+  xpackForm.value.custom_theme = JSON.parse(data.custom_theme)
+  xpackForm.value.float_location = JSON.parse(data.float_location)
+  form.value = xpackForm.value
+
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      let fd = new FormData()
+      form.value.custom_theme = JSON.stringify(form.value.custom_theme)
+      form.value.float_location = JSON.stringify(form.value.float_location)
+      Object.keys(form.value).map((item) => {
+        fd.append(item, form.value[item])
+      })
+      applicationXpackApi.putAccessToken(id as string, fd, loading).then((res) => {
+        emit('refresh')
+        // @ts-ignore
+        MsgSuccess(t('views.applicationOverview.appInfo.LimitDialog.settingSuccessMessage'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.setting-preview {
+  background: #f5f6f7;
+  height: 570px;
+  position: relative;
+  .float_icon {
+    position: absolute;
+    right: 8px;
+    bottom: 15px;
+  }
+  .setting-preview-container {
+    position: absolute;
+    left: 16px;
+    top: 25px;
+    border-radius: 8px;
+    border: 1px solid #ffffff;
+    background: linear-gradient(
+        188deg,
+        rgba(235, 241, 255, 0.2) 39.6%,
+        rgba(231, 249, 255, 0.2) 94.3%
+      ),
+      #eff0f1;
+    box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+    overflow: hidden;
+    width: 330px;
+    height: 520px;
+    .setting-preview-header {
+      background: var(--app-header-bg-color);
+      height: var(--app-header-height);
+      line-height: var(--app-header-height);
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--el-border-color);
+    }
+  }
+}
+.display-setting-dialog {
+  .el-dialog__header {
+    padding-right: 16px;
+  }
+  .el-dialog__headerbtn {
+    top: 13px;
+  }
+}
+</style>

ui/src/views/application-overview/index.vue

@@ -164,7 +164,12 @@
     <APIKeyDialog ref="APIKeyDialogRef" />
     <LimitDialog ref="LimitDialogRef" @refresh="refresh" />
     <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
-    <DisplaySettingDialog ref="DisplaySettingDialogRef" @refresh="refresh" />
+    <XPackDisplaySettingDialog
+      ref="XPackDisplaySettingDialogRef"
+      @refresh="refresh"
+      v-if="user.isEnterprise()"
+    />
+    <DisplaySettingDialog ref="DisplaySettingDialogRef" @refresh="refresh" v-else />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -174,7 +179,7 @@ import EmbedDialog from './component/EmbedDialog.vue'
 import APIKeyDialog from './component/APIKeyDialog.vue'
 import LimitDialog from './component/LimitDialog.vue'
 import DisplaySettingDialog from './component/DisplaySettingDialog.vue'
-
+import XPackDisplaySettingDialog from './component/XPackDisplaySettingDialog.vue'
 import EditAvatarDialog from './component/EditAvatarDialog.vue'
 import StatisticsCharts from './component/StatisticsCharts.vue'
 import applicationApi from '@/api/application'
@@ -185,7 +190,7 @@ import { copyClick } from '@/utils/clipboard'
 import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 import { t } from '@/locales'
-const { application } = useStore()
+const { user, application } = useStore()
 const route = useRoute()
 const {
   params: { id }
@@ -196,6 +201,7 @@ const apiUrl = window.location.origin + '/doc/chat/'
 const baseUrl = window.location.origin + '/api/application/'
 
 const DisplaySettingDialogRef = ref()
+const XPackDisplaySettingDialogRef = ref()
 const EditAvatarDialogRef = ref()
 const LimitDialogRef = ref()
 const APIKeyDialogRef = ref()
@@ -258,7 +264,11 @@ function toUrl(url: string) {
   window.open(url, '_blank')
 }
 function openDisplaySettingDialog() {
-  DisplaySettingDialogRef.value.open(accessToken.value)
+  if (user.isEnterprise()) {
+    XPackDisplaySettingDialogRef.value?.open(accessToken.value, detail.value)
+  } else {
+    DisplaySettingDialogRef.value?.open(accessToken.value)
+  }
 }
 function openEditAvatar() {
   EditAvatarDialogRef.value.open(detail.value)