feat: 访问设置

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

@@ -0,0 +1,91 @@
+<template>
+  <el-dialog title="访问限制" v-model="dialogVisible">
+    <el-form label-position="top" ref="limitFormRef" :model="form">
+      <el-form-item label="文档地址" prop="source_url">
+        <el-input-number
+          v-model="form.min_star"
+          :min="0"
+          :step="1"
+          controls-position="right"
+          step-strictly
+        />
+        次 / 天
+      </el-form-item>
+      <el-form-item label="白名单" @click.prevent>
+        <el-switch size="small" v-model="form.multiple_rounds_dialogue"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="form.source_url"
+          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 { copyClick } from '@/utils/clipboard'
+import overviewApi from '@/api/application-overview'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import useStore from '@/stores'
+const route = useRoute()
+const {
+  params: { id }
+} = route
+const { application } = useStore()
+
+const emit = defineEmits(['addData'])
+
+const limitFormRef = ref()
+const form = ref<any>({
+  type: '0',
+  source_url: '',
+  selector: ''
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      type: '0',
+      source_url: '',
+      selector: ''
+    }
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+function submit() {}
+
+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" />
   </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()
+}
+
 function openAPIKeyDialog() {
   APIKeyDialogRef.value.open()
 }