feat: application

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

@@ -7,12 +7,6 @@
     width="650"
   >
     <el-form label-position="top" ref="limitFormRef" :model="form">
-      <!-- <el-form-item
-        :label="$t('views.applicationOverview.appInfo.LimitDialog.showSourceLabel')"
-        @click.prevent
-      >
-        <el-switch size="small" v-model="form.show_source"></el-switch>
-      </el-form-item> -->
       <el-form-item
         :label="$t('views.applicationOverview.appInfo.LimitDialog.clientQueryLimitLabel')"
       >
@@ -30,50 +24,7 @@
           $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
         }}</span>
       </el-form-item>
-      <!--     身份验证 -->
-      <el-form-item
-        :label="$t('views.applicationOverview.appInfo.LimitDialog.authentication')"
-        v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')"
-      >
-        <el-switch size="small" v-model="form.authentication" @change="firstGeneration"></el-switch>
-      </el-form-item>
-      <el-form-item
-        prop="authentication_value"
-        v-if="form.authentication"
-        :label="$t('views.applicationOverview.appInfo.LimitDialog.authenticationValue')"
-        v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')"
-      >
-        <el-input
-          class="authentication-append-input"
-          v-model="form.authentication_value"
-          readonly
-          style="width: 268px"
-          disabled
-        >
-          <template #append>
-            <el-tooltip :content="$t('common.copy')" placement="top">
-              <el-button
-                type="primary"
-                text
-                @click="copyClick(form.authentication_value)"
-                style="margin: 0 4px !important"
-              >
-                <AppIcon iconName="app-copy"></AppIcon>
-              </el-button>
-            </el-tooltip>
-            <el-tooltip :content="$t('common.refresh')" placement="top">
-              <el-button
-                @click="refreshAuthentication"
-                type="primary"
-                text
-                style="margin: 0 4px 0 0 !important"
-              >
-                <el-icon><RefreshRight /></el-icon>
-              </el-button>
-            </el-tooltip>
-          </template>
-        </el-input>
-      </el-form-item>
+
       <el-form-item
         :label="$t('views.applicationOverview.appInfo.LimitDialog.whitelistLabel')"
         @click.prevent
@@ -106,12 +57,10 @@ import type { FormInstance, FormRules } from 'element-plus'
 import applicationApi from '@/api/application/application'
 import { MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
-import { copyClick } from '@/utils/clipboard'
-import { ComplexPermission } from '@/utils/permission/type'
 
 const route = useRoute()
 const {
-  params: { id }
+  params: { id },
 } = route
 
 const emit = defineEmits(['refresh'])
@@ -122,7 +71,7 @@ const form = ref<any>({
   white_active: true,
   white_list: '',
   authentication_value: '',
-  authentication: false
+  authentication: false,
 })
 
 const dialogVisible = ref<boolean>(false)
@@ -133,7 +82,7 @@ watch(dialogVisible, (bool) => {
     form.value = {
       access_num: 0,
       white_active: true,
-      white_list: ''
+      white_list: '',
     }
   }
 })
@@ -156,7 +105,7 @@ const submit = async (formEl: FormInstance | undefined) => {
         white_active: form.value.white_active,
         access_num: form.value.access_num,
         authentication: form.value.authentication,
-        authentication_value: form.value.authentication_value
+        authentication_value: form.value.authentication_value,
       }
       applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
         emit('refresh')
@@ -167,30 +116,8 @@ const submit = async (formEl: FormInstance | undefined) => {
     }
   })
 }
-function generateAuthenticationValue(length: number = 10) {
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  const randomValues = new Uint8Array(length)
-  window.crypto.getRandomValues(randomValues)
-  return Array.from(randomValues)
-    .map((value) => chars[value % chars.length])
-    .join('')
-}
-function refreshAuthentication() {
-  form.value.authentication_value = generateAuthenticationValue()
-}
-
-function firstGeneration() {
-  if (form.value.authentication && !form.value.authentication_value) {
-    form.value.authentication_value = generateAuthenticationValue()
-  }
-}
-
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
-.authentication-append-input {
-  .el-input-group__append {
-    padding: 0 !important;
-  }
-}
+
 </style>

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

@@ -1,7 +1,6 @@
 <template>
   <div class="p-16-24">
     <h2 class="mb-16">{{ $t('views.applicationOverview.title') }}</h2>
-
     <el-scrollbar>
       <div class="main-calc-height">
         <el-card style="--el-card-padding: 24px">
@@ -53,7 +52,10 @@
                     :active-text="$t('views.applicationOverview.appInfo.openText')"
                     :inactive-text="$t('views.applicationOverview.appInfo.closeText')"
                     :before-change="() => changeState(accessToken.is_active)"
-                    v-hasPermission="[RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,PermissionConst.APPLICATION_EDIT.getWorkspacePermission]"
+                    v-hasPermission="[
+                      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                      PermissionConst.APPLICATION_EDIT.getWorkspacePermission,
+                    ]"
                   />
                 </div>
 
@@ -92,20 +94,35 @@
                     <AppIcon iconName="app-create-chat" class="mr-4"></AppIcon>
                     {{ $t('views.application.operation.toChat') }}
                   </el-button>
-                  <el-button :disabled="!accessToken?.is_active" @click="openDialog"
-                    v-hasPermission="[RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,PermissionConst.APPLICATION_OVERVIEW_EMBEDDED.getWorkspacePermission]"
+                  <el-button
+                    :disabled="!accessToken?.is_active"
+                    @click="openDialog"
+                    v-hasPermission="[
+                      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                      PermissionConst.APPLICATION_OVERVIEW_EMBEDDED.getWorkspacePermission,
+                    ]"
                   >
                     <AppIcon iconName="app-export" class="mr-4"></AppIcon>
                     {{ $t('views.applicationOverview.appInfo.embedInWebsite') }}
                   </el-button>
-                  <el-button @click="openLimitDialog"
-                    v-hasPermission="[RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,PermissionConst.APPLICATION_OVERVIEW_ACCESS.getWorkspacePermission]"
+                  <!-- 访问限制 -->
+                  <el-button
+                    @click="openLimitDialog"
+                    v-hasPermission="[
+                      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                      PermissionConst.APPLICATION_OVERVIEW_ACCESS.getWorkspacePermission,
+                    ]"
                   >
                     <el-icon class="mr-4"><Lock /></el-icon>
                     {{ $t('views.applicationOverview.appInfo.accessControl') }}
                   </el-button>
-                  <el-button @click="openDisplaySettingDialog"
-                    v-hasPermission="[RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,PermissionConst.APPLICATION_OVERVIEW_DISPLAY.getWorkspacePermission]"
+                  <!-- 显示设置 -->
+                  <el-button
+                    @click="openDisplaySettingDialog"
+                    v-hasPermission="[
+                      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                      PermissionConst.APPLICATION_OVERVIEW_DISPLAY.getWorkspacePermission,
+                    ]"
                   >
                     <el-icon class="mr-4"><Setting /></el-icon>
                     {{ $t('views.applicationOverview.appInfo.displaySetting') }}
@@ -146,8 +163,12 @@
                   </div>
                 </div>
                 <div>
-                  <el-button @click="openAPIKeyDialog"
-                  v-hasPermission="[RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,PermissionConst.APPLICATION_OVERVIEW_API_KEY.getWorkspacePermission]"
+                  <el-button
+                    @click="openAPIKeyDialog"
+                    v-hasPermission="[
+                      RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                      PermissionConst.APPLICATION_OVERVIEW_API_KEY.getWorkspacePermission,
+                    ]"
                   >
                     <el-icon class="mr-4"><Key /></el-icon>
                     {{ $t('views.applicationOverview.appInfo.apiKey') }}</el-button
@@ -199,32 +220,33 @@
       :api-input-params="mapToUrlParams(apiInputParams)"
     />
     <APIKeyDialog ref="APIKeyDialogRef" />
-    <LimitDialog ref="LimitDialogRef" @refresh="refresh" />
     <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
-    <XPackDisplaySettingDialog ref="XPackDisplaySettingDialogRef" @refresh="refresh" />
-    <!-- v-if="user.isEnterprise()" -->
-    <DisplaySettingDialog ref="DisplaySettingDialogRef" @refresh="refresh" />
+
+    <!-- 社区版访问限制 -->
+    <component :is="currentLimitDialog" ref="LimitDialogRef" @refresh="refresh" />
+    <!-- 显示设置 -->
+    <component :is="currentDisplaySettingDialog" ref="DisplaySettingDialogRef" @refresh="refresh" />
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, shallowRef, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import EmbedDialog from './component/EmbedDialog.vue'
 import APIKeyDialog from './component/APIKeyDialog.vue'
 import LimitDialog from './component/LimitDialog.vue'
+import XPackLimitDrawer from './xpack-component/XPackLimitDrawer.vue'
 import DisplaySettingDialog from './component/DisplaySettingDialog.vue'
-import XPackDisplaySettingDialog from './component/XPackDisplaySettingDialog.vue'
+import XPackDisplaySettingDialog from './xpack-component/XPackDisplaySettingDialog.vue'
 import EditAvatarDialog from './component/EditAvatarDialog.vue'
 import StatisticsCharts from './component/StatisticsCharts.vue'
 import applicationApi from '@/api/application/application'
-import overviewApi from '@/api/application/application-key'
 import { nowDate, beforeDay } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { copyClick } from '@/utils/clipboard'
 import { isAppIcon } from '@/utils/common'
 import useStore from '@/stores'
 import { t } from '@/locales'
-import { PermissionConst, RoleConst } from '@/utils/permission/data'
+import { PermissionConst, RoleConst, EditionConst } from '@/utils/permission/data'
 import { hasPermission } from '@/utils/permission/index'
 const { user, application } = useStore()
 const route = useRoute()
@@ -236,10 +258,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()
 const EmbedDialogRef = ref()
 
@@ -299,13 +318,39 @@ const apiInputParams = ref([])
 function toUrl(url: string) {
   window.open(url, '_blank')
 }
+
+// 显示设置
+const DisplaySettingDialogRef = ref()
+const currentDisplaySettingDialog = shallowRef<any>(null)
 function openDisplaySettingDialog() {
-  // if (user.isEnterprise()) {
-  XPackDisplaySettingDialogRef.value?.open(accessToken.value, detail.value)
-  // } else {
-  //   DisplaySettingDialogRef.value?.open(accessToken.value, detail.value)
-  // }
+  // 企业版和专业版
+  if (hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR')) {
+    currentDisplaySettingDialog.value = XPackDisplaySettingDialog
+  } else {
+    // 社区版
+    currentDisplaySettingDialog.value = DisplaySettingDialog
+  }
+  nextTick(() => {
+    DisplaySettingDialogRef.value?.open(accessToken.value, detail.value)
+  })
 }
+
+// 访问限制
+const LimitDialogRef = ref()
+const currentLimitDialog = shallowRef<any>(null)
+function openLimitDialog() {
+  // 企业版和专业版
+  if (hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR')) {
+    currentLimitDialog.value = XPackLimitDrawer
+  } else {
+    // 社区版
+    currentLimitDialog.value = LimitDialog
+  }
+  nextTick(() => {
+    LimitDialogRef.value.open(accessToken.value)
+  })
+}
+
 function openEditAvatar() {
   EditAvatarDialogRef.value.open(detail.value)
 }
@@ -370,10 +415,6 @@ async function updateAccessToken(obj: any, str: string) {
   })
 }
 
-function openLimitDialog() {
-  LimitDialogRef.value.open(accessToken.value)
-}
-
 function openAPIKeyDialog() {
   APIKeyDialogRef.value.open()
 }

ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue

@@ -0,0 +1,185 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.accessControl')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="650"
+  >
+    <el-form label-position="top" ref="limitFormRef" :model="form">
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.clientQueryLimitLabel')"
+      >
+        <el-input-number
+          v-model="form.access_num"
+          :min="0"
+          :step="1"
+          :max="10000"
+          :value-on-clear="0"
+          controls-position="right"
+          style="width: 268px"
+          step-strictly
+        />
+        <span class="ml-4">{{
+          $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
+        }}</span>
+      </el-form-item>
+      <!--     身份验证 -->
+      <el-form-item :label="$t('views.applicationOverview.appInfo.LimitDialog.authentication')">
+        <el-switch size="small" v-model="form.authentication" @change="firstGeneration"></el-switch>
+      </el-form-item>
+      <el-form-item
+        prop="authentication_value"
+        v-if="form.authentication"
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.authenticationValue')"
+      >
+        <el-input
+          class="authentication-append-input"
+          v-model="form.authentication_value"
+          readonly
+          style="width: 268px"
+          disabled
+        >
+          <template #append>
+            <el-tooltip :content="$t('common.copy')" placement="top">
+              <el-button
+                type="primary"
+                text
+                @click="copyClick(form.authentication_value)"
+                style="margin: 0 4px !important"
+              >
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </el-tooltip>
+            <el-tooltip :content="$t('common.refresh')" placement="top">
+              <el-button
+                @click="refreshAuthentication"
+                type="primary"
+                text
+                style="margin: 0 4px 0 0 !important"
+              >
+                <el-icon><RefreshRight /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.whitelistLabel')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.white_active"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="form.white_list"
+          :placeholder="$t('views.applicationOverview.appInfo.LimitDialog.whitelistPlaceholder')"
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(limitFormRef)" :loading="loading">
+          {{ $t('common.save') }}
+        </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 } from 'element-plus'
+import applicationApi from '@/api/application/application'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import { copyClick } from '@/utils/clipboard'
+
+const route = useRoute()
+const {
+  params: { id },
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const limitFormRef = ref()
+const form = ref<any>({
+  access_num: 0,
+  white_active: true,
+  white_list: '',
+  authentication_value: '',
+  authentication: false,
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      access_num: 0,
+      white_active: true,
+      white_list: '',
+    }
+  }
+})
+
+const open = (data: any) => {
+  form.value.access_num = data.access_num
+  form.value.white_active = data.white_active
+  form.value.white_list = data.white_list?.length ? data.white_list?.join('\n') : ''
+  form.value.authentication_value = data.authentication_value
+  form.value.authentication = data.authentication
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const obj = {
+        white_list: form.value.white_list ? form.value.white_list.split('\n') : [],
+        white_active: form.value.white_active,
+        access_num: form.value.access_num,
+        authentication: form.value.authentication,
+        authentication_value: form.value.authentication_value,
+      }
+      applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
+        emit('refresh')
+        // @ts-ignore
+        MsgSuccess(t('common.settingSuccess'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+function generateAuthenticationValue(length: number = 10) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  const randomValues = new Uint8Array(length)
+  window.crypto.getRandomValues(randomValues)
+  return Array.from(randomValues)
+    .map((value) => chars[value % chars.length])
+    .join('')
+}
+function refreshAuthentication() {
+  form.value.authentication_value = generateAuthenticationValue()
+}
+
+function firstGeneration() {
+  if (form.value.authentication && !form.value.authentication_value) {
+    form.value.authentication_value = generateAuthenticationValue()
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.authentication-append-input {
+  .el-input-group__append {
+    padding: 0 !important;
+  }
+}
+</style>

ui/src/views/application/index.vue

@@ -3,6 +3,7 @@
     <template #left>
       <h4 class="p-16 pb-0">{{ $t('views.application.title') }}</h4>
       <folder-tree
+        :source="FolderSource.TOOL"
         :data="folderList"
         :currentNodeKey="currentFolder?.id"
         @handleNodeClick="folderClickHandel"
@@ -304,6 +305,7 @@ import { isWorkFlow } from '@/utils/application'
 import { dateFormat } from '@/utils/time'
 import { PermissionConst, RoleConst } from '@/utils/permission/data'
 import { hasPermission } from '@/utils/permission/index'
+import { FolderSource } from '@/enums/common'
 
 const router = useRouter()
 const { folder, application, user } = useStore()
@@ -367,7 +369,7 @@ function getList() {
 
 function getFolder() {
   const params = {}
-  folder.asyncGetFolder('APPLICATION', params, loading).then((res: any) => {
+  folder.asyncGetFolder(FolderSource.APPLICATION, params, loading).then((res: any) => {
     folderList.value = res.data
     currentFolder.value = res.data?.[0] || {}
     getList()
@@ -482,7 +484,7 @@ const exportApplication = (application: any) => {
 
 const CreateFolderDialogRef = ref()
 function openCreateFolder() {
-  CreateFolderDialogRef.value.open('APPLICATION', currentFolder.value.parent_id)
+  CreateFolderDialogRef.value.open(FolderSource.APPLICATION, currentFolder.value.parent_id)
 }
 function refreshFolder() {
   applicationList.value = []

ui/src/views/tool/index.vue

@@ -3,6 +3,7 @@
     <template #left>
       <h4 class="p-16 pb-0">{{ $t('views.tool.title') }}</h4>
       <folder-tree
+        :source="FolderSource.TOOL"
         :data="folderList"
         :currentNodeKey="currentFolder?.id"
         @handleNodeClick="folderClickHandel"
@@ -307,6 +308,7 @@ import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import SharedWorkspace from '@/views/shared/tool-shared/SharedWorkspace.vue'
 import { PermissionConst, RoleConst } from '@/utils/permission/data'
 import { hasPermission } from '@/utils/permission/index'
+import { FolderSource } from '@/enums/common'
 
 const { folder, user } = useStore()
 
@@ -373,7 +375,7 @@ function getList() {
 
 function getFolder() {
   const params = {}
-  folder.asyncGetFolder('TOOL', params, loading).then((res: any) => {
+  folder.asyncGetFolder(FolderSource.TOOL, params, loading).then((res: any) => {
     folderList.value = res.data
     currentFolder.value = res.data?.[0] || {}
     getList()
@@ -506,7 +508,7 @@ function configInitParams(item: any) {
 
 const CreateFolderDialogRef = ref()
 function openCreateFolder() {
-  CreateFolderDialogRef.value.open('TOOL', currentFolder.value.parent_id)
+  CreateFolderDialogRef.value.open(FolderSource.TOOL, currentFolder.value.parent_id)
 }
 
 const elUploadRef = ref()