Merge branch 'main' of github.com:maxkb-dev/maxkb

ui/src/styles/app.scss

@@ -518,3 +518,11 @@ h4 {
     }
   }
 }
+
+// markdown
+
+.ͼ1 .cm-placeholder {
+  color: var(--app-input-color-placeholder);
+  font-size: 14px;
+  font-weight: 400;
+}

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

@@ -0,0 +1,110 @@
+<template>
+  <el-dialog title="访问限制" v-model="dialogVisible">
+    <el-form label-position="top" ref="limitFormRef" :model="form">
+      <el-form-item label="客户端提问限制">
+        <el-input-number
+          v-model="form.access_num"
+          :min="0"
+          :step="1"
+          controls-position="right"
+          step-strictly
+        />
+        <span class="ml-4">次 / 天</span>
+      </el-form-item>
+      <el-form-item label="白名单" @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="请输入域名或IP地址，一行一个。"
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(limitFormRef)" :loading="loading">
+          保存
+        </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'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+
+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: ''
+})
+
+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?.join('\n')
+  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.split('\n'),
+        white_active: form.value.white_active,
+        access_num: form.value.access_num
+      }
+      applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
+        emit('refresh')
+        MsgSuccess('设置成功')
+        dialogVisible.value = false
+      })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.embed-dialog {
+  .code {
+    color: var(--app-text-color) !important;
+    background: var(--app-layout-bg-color);
+    font-weight: 400;
+    font-size: 13px;
+    white-space: pre;
+    height: 180px;
+  }
+}
+</style>

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

@@ -50,6 +50,7 @@
               <el-button :disabled="!accessToken?.is_active" @click="openDialog">
                 嵌入第三方
               </el-button>
+              <el-button @click="openLimitDialog"> 访问限制 </el-button>
             </div>
           </el-col>
           <el-col :span="12" class="mt-16">
@@ -74,6 +75,7 @@
     </div>
     <EmbedDialog ref="EmbedDialogRef" />
     <APIKeyDialog ref="APIKeyDialogRef" />
+    <LimitDialog ref="LimitDialogRef" @refresh="refresh" />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -81,6 +83,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import EmbedDialog from './component/EmbedDialog.vue'
 import APIKeyDialog from './component/APIKeyDialog.vue'
+import LimitDialog from './component/LimitDialog.vue'
 import applicationApi from '@/api/application'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { copyClick } from '@/utils/clipboard'
@@ -94,6 +97,7 @@ const {
 
 const apiUrl = window.location.origin + '/doc'
 
+const LimitDialogRef = ref()
 const APIKeyDialogRef = ref()
 const EmbedDialogRef = ref()
 
@@ -126,6 +130,10 @@ function updateAccessToken(obj: any, str: string) {
   })
 }
 
+function openLimitDialog() {
+  LimitDialogRef.value.open(accessToken.value)
+}
+
 function openAPIKeyDialog() {
   APIKeyDialogRef.value.open()
 }
@@ -143,6 +151,10 @@ function getDetail() {
     detail.value = res.data
   })
 }
+
+function refresh() {
+  getAccessToken()
+}
 onMounted(() => {
   getDetail()
   getAccessToken()

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="编辑分段" v-model="dialogVisible" width="600" destroy-on-close>
+  <el-dialog title="编辑分段" v-model="dialogVisible" width="80%" destroy-on-close>
     <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
     <template #footer>
       <span class="dialog-footer">

ui/src/views/paragraph/component/ParagraphDialog.vue

@@ -2,13 +2,13 @@
   <el-dialog
     :title="title"
     v-model="dialogVisible"
-    width="800"
+    width="80%"
     class="paragraph-dialog"
     destroy-on-close
   >
     <el-row v-loading="loading">
-      <el-col :span="16">
-        <el-scrollbar height="370" wrap-class="paragraph-scrollbar">
+      <el-col :span="18">
+        <el-scrollbar height="500" wrap-class="paragraph-scrollbar">
           <div class="p-24" style="padding-bottom: 8px">
             <div class="flex-between mb-16">
               <div class="bold title align-center">分段内容</div>
@@ -27,7 +27,7 @@
           </el-button>
         </div>
       </el-col>
-      <el-col :span="8" class="border-l">
+      <el-col :span="6" class="border-l">
         <!-- 关联问题 -->
         <ProblemComponent
           :problemId="problemId"

ui/src/views/paragraph/component/ParagraphForm.vue

@@ -12,7 +12,7 @@
       <span class="lighter" v-else>{{ form.title || '-' }}</span>
     </el-form-item>
     <el-form-item label="分段内容" prop="content">
-      <el-input
+      <!-- <el-input
         v-if="isEdit"
         v-model="form.content"
         placeholder="请输入分段内容"
@@ -20,16 +20,25 @@
         show-word-limit
         :rows="8"
         type="textarea"
-      >
-      </el-input>
-      <span v-else class="break-all lighter">{{ form.content }}</span>
+      > 
+     </el-input>-->
+      <MdEditor
+        v-if="isEdit"
+        v-model="form.content"
+        placeholder="请输入分段内容"
+        :maxLength="4096"
+        :preview="false"
+        style="height: 300px;"
+      />
+      <MdPreview v-else ref="editorRef" editorId="preview-only" :modelValue="form.content" />
+      <!-- <span v-else class="break-all lighter">{{ form.content }}</span> -->
     </el-form-item>
   </el-form>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onUnmounted, watch } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
-
+import { MdEditor, MdPreview } from 'md-editor-v3'
 const props = defineProps({
   data: {
     type: Object,
@@ -44,7 +53,10 @@ const form = ref<any>({
 })
 
 const rules = reactive<FormRules>({
-  content: [{ required: true, message: '请输入分段内容', trigger: 'blur' }]
+  content: [
+    { required: true, message: '请输入分段内容', trigger: 'blur' },
+    { max: 4096, message: '内容最多不超过 4096 个字', trigger: 'blur' }
+  ]
 })
 
 const paragraphFormRef = ref<FormInstance>()