feat: portal

Author: wangdan-fit2cloud

ui/src/views/VIEW_README.md

@@ -419,7 +419,9 @@ Dialog。新增或重命名文件时，应同步更新所有导入和页面功
 ## 备注要求
 
 门户设置的 `components/ButtonEditPortal.vue`、`ButtonPortalAuthSetting.vue` 和
-`ButtonPortalCorsSetting.vue` 分别封装对应按钮、浮层及表单状态。认证组件使用 `MkDrawer`，
+`ButtonPortalCorsSetting.vue` 分别封装对应按钮、浮层及表单状态，通过 `disabled` 接收页面统一的
+编辑限制。页面使用 `perm.system.portal.edit()` 判断门户编辑权限，无权限时禁用配置、复制按钮、
+访问开关及浮层表单和按钮，保存入口同步校验权限。认证组件使用 `MkDrawer`，
 打开时与系统 `LoginSetting` 共用 `AuthSettingApi.getLoginSetting()`，通过返回的 `login_methods`
 生成登录方式选项，复用登录方式标签，初始保留账号登录。提供默认登录方式及验证码与账号锁定设置；默认方式
 仅可选已勾选项，取消勾选当前默认项时回退到首个可选项。认证组件暴露 `open()` 供首次开启认证

ui/src/views/system/chat-management/portal-setting/PortalSettingView.vue

@@ -6,6 +6,7 @@ import LogoIcon from '@/components/mk-logo/LogoIcon.vue'
 import { copyText } from '@/utils/clipboard'
 import { resetUrl } from '@/utils/icon'
 import { MsgSuccess } from '@/utils/message'
+import { perm } from '@/permission'
 import PortalPreview from './components/PortalPreview.vue'
 import ButtonEditPortal from './components/ButtonEditPortal.vue'
 import ButtonPortalAuthSetting from './components/ButtonPortalAuthSetting.vue'
@@ -49,6 +50,8 @@ function loadPortalSetting() {
 
 /* 保存门户配置：接口返回完整配置，成功后整体回填作为页面唯一数据来源 */
 function savePortalSetting(payload: PortalSettingPayload | FormData): Promise<void> {
+  if (!canEditPortal.value || saving.value) return Promise.resolve()
+
   saving.value = true
   return PortalApi.putPortalSetting(payload)
     .then((setting) => {
@@ -61,7 +64,7 @@ function savePortalSetting(payload: PortalSettingPayload | FormData): Promise<vo
 }
 
 function handleAccessChange(field: AccessField, value: string | number | boolean) {
-  if (saving.value) return
+  if (!canEditPortal.value || saving.value) return
   if (field === 'enable_auth' && value && !portalSetting.auth_config.login_value?.length) {
     handleOpenAuthSetting(true)
     return
@@ -81,6 +84,8 @@ function savePortalCorsSetting(origins: string[]) {
 }
 
 function handleOpenAuthSetting(enableAfterSave = false) {
+  if (!canEditPortal.value || saving.value) return
+
   authSettingButtonRef.value?.open(enableAfterSave)
 }
 
@@ -97,6 +102,9 @@ const previewName = computed(() => portalSetting.name)
 const previewLogo = computed(() => resetUrl(portalSetting.logo))
 
 onMounted(() => loadPortalSetting())
+
+// 权限 控制
+const canEditPortal = computed(() => perm.system.portal.edit())
 </script>
 
 <template>
@@ -111,7 +119,7 @@ onMounted(() => loadPortalSetting())
               <h4 class="truncate" :title="previewName">{{ previewName }}</h4>
             </div>
             <!-- 编辑门户名称与 Logo -->
-            <ButtonEditPortal :setting="portalSetting" :saving="saving" :save="savePortalSetting" />
+            <ButtonEditPortal :setting="portalSetting" :saving="saving" :disabled="!canEditPortal" :save="savePortalSetting" />
           </div>
         </el-card>
         <el-card shadow="never">
@@ -122,6 +130,7 @@ onMounted(() => loadPortalSetting())
               <div class="flex-between mb-2 gap-2">
                 <span>门户公开访问链接</span>
                 <el-switch
+                  :disabled="!canEditPortal || saving"
                   :model-value="portalSetting.enable_public_access"
                   size="small"
                   @change="handleAccessChange('enable_public_access', $event)"
@@ -130,7 +139,7 @@ onMounted(() => loadPortalSetting())
               <el-input :model-value="portalAccessUrl" readonly>
                 <template #suffix>
                   <!-- 复制门户公开访问链接 -->
-                  <el-button text @click="copyText(portalAccessUrl)" class="-mr-1">
+                  <el-button text :disabled="!canEditPortal" @click="copyText(portalAccessUrl)" class="-mr-1">
                     <MkIcon name="icon_copy_outlined" class="text-N600" />
                   </el-button>
                 </template>
@@ -140,12 +149,17 @@ onMounted(() => loadPortalSetting())
             <div>
               <div class="flex-between mb-2 gap-2">
                 <span>智能体后端 API 访问</span>
-                <el-switch :model-value="portalSetting.enable_api" size="small" @change="handleAccessChange('enable_api', $event)" />
+                <el-switch
+                  :disabled="!canEditPortal || saving"
+                  :model-value="portalSetting.enable_api"
+                  size="small"
+                  @change="handleAccessChange('enable_api', $event)"
+                />
               </div>
               <el-input :model-value="portalApiUrl" readonly>
                 <template #suffix>
                   <!-- 复制智能体后端 API 访问 -->
-                  <el-button text @click="copyText(portalApiUrl)" class="-mr-1">
+                  <el-button text :disabled="!canEditPortal" @click="copyText(portalApiUrl)" class="-mr-1">
                     <MkIcon name="icon_copy_outlined" class="text-N600" />
                   </el-button>
                 </template>
@@ -156,6 +170,7 @@ onMounted(() => loadPortalSetting())
               <div class="flex-between mb-2 gap-2">
                 <span>知识库后端 API 检索</span>
                 <el-switch
+                  :disabled="!canEditPortal || saving"
                   :model-value="portalSetting.enable_knowledge_base_api"
                   size="small"
                   @change="handleAccessChange('enable_knowledge_base_api', $event)"
@@ -164,7 +179,7 @@ onMounted(() => loadPortalSetting())
               <el-input :model-value="portalApiUrl" readonly>
                 <template #suffix>
                   <!-- 复制知识库后端 API 检索 -->
-                  <el-button text @click="copyText(portalApiUrl)" class="-mr-1">
+                  <el-button text :disabled="!canEditPortal" @click="copyText(portalApiUrl)" class="-mr-1">
                     <MkIcon name="icon_copy_outlined" class="text-N600" />
                   </el-button>
                 </template>
@@ -174,16 +189,32 @@ onMounted(() => loadPortalSetting())
               <span>身份认证</span>
               <div class="flex-align-center gap-2">
                 <!-- 配置身份认证 -->
-                <ButtonPortalAuthSetting ref="authSettingButtonRef" :setting="portalSetting" :saving="saving" :save="savePortalAuthSetting" />
-                <el-switch :model-value="portalSetting.enable_auth" size="small" @change="handleAccessChange('enable_auth', $event)" />
+                <ButtonPortalAuthSetting
+                  ref="authSettingButtonRef"
+                  :setting="portalSetting"
+                  :saving="saving"
+                  :disabled="!canEditPortal"
+                  :save="savePortalAuthSetting"
+                />
+                <el-switch
+                  :disabled="!canEditPortal || saving"
+                  :model-value="portalSetting.enable_auth"
+                  size="small"
+                  @change="handleAccessChange('enable_auth', $event)"
+                />
               </div>
             </div>
             <div class="flex-between gap-2">
               <span>跨域设置</span>
               <div class="flex-align-center gap-2">
                 <!-- 配置跨域地址 -->
-                <ButtonPortalCorsSetting v-model="portalCorsOrigins" :saving="saving" :save="savePortalCorsSetting" />
-                <el-switch :model-value="portalSetting.enable_cors" size="small" @change="handleAccessChange('enable_cors', $event)" />
+                <ButtonPortalCorsSetting v-model="portalCorsOrigins" :saving="saving" :disabled="!canEditPortal" :save="savePortalCorsSetting" />
+                <el-switch
+                  :disabled="!canEditPortal || saving"
+                  :model-value="portalSetting.enable_cors"
+                  size="small"
+                  @change="handleAccessChange('enable_cors', $event)"
+                />
               </div>
             </div>
           </div>

ui/src/views/system/chat-management/portal-setting/components/ButtonEditPortal.vue

@@ -4,7 +4,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import type { PortalSetting } from '@/api/types'
 import MkEditAvatar from '@/components/mk-edit-avatar/index.vue'
 
-const props = defineProps<{ setting: PortalSetting; saving: boolean; save: (payload: FormData) => Promise<void> }>()
+const props = defineProps<{ disabled: boolean; setting: PortalSetting; saving: boolean; save: (payload: FormData) => Promise<void> }>()
 
 /* 门户名称与 Logo */
 const editVisible = ref(false)
@@ -17,6 +17,8 @@ const portalRules: FormRules = {
 }
 
 function handleOpenPortalEdit() {
+  if (props.disabled || props.saving) return
+
   handleClosePortalEdit()
   portalForm.name = props.setting.name
   portalForm.logo = props.setting.logo || ''
@@ -31,9 +33,9 @@ function handleLogoChange(icon: string, file: File | null) {
 }
 
 function handleSavePortalInfo() {
-  if (props.saving) return
+  if (props.disabled || props.saving) return
   portalFormRef.value?.validate((valid) => {
-    if (!valid || props.saving) return
+    if (!valid || props.disabled || props.saving) return
     const payload = new FormData()
     payload.append('name', portalForm.name.trim())
     if (logoChanged.value) payload.append('logo', logoFile.value || '')
@@ -54,14 +56,22 @@ function handleClosePortalEdit() {
 
 <template>
   <!-- 编辑门户名称与 Logo -->
-  <el-button text @click="handleOpenPortalEdit">
+  <el-button text :disabled="disabled || saving" @click="handleOpenPortalEdit">
     <MkIcon name="icon_edit_outlined" />
   </el-button>
   <MkDialog v-model="editVisible" title="编辑" @closed="handleClosePortalEdit">
-    <el-form ref="portalFormRef" :model="portalForm" :rules="portalRules" label-position="top" require-asterisk-position="right" @submit.prevent>
+    <el-form
+      v-loading="saving"
+      ref="portalFormRef"
+      :model="portalForm"
+      :rules="portalRules"
+      label-position="top"
+      require-asterisk-position="right"
+      @submit.prevent
+    >
       <el-form-item label="名称" prop="name">
         <div class="flex-align-center w-full gap-3">
-          <MkEditAvatar v-model="portalForm.logo" @change="handleLogoChange" :size="32">
+          <MkEditAvatar :editable="!saving" v-model="portalForm.logo" @change="handleLogoChange" :size="32">
             <template #default="{ icon }">
               <PortalIcon :icon="icon" />
             </template>

ui/src/views/system/chat-management/portal-setting/components/ButtonPortalAuthSetting.vue

@@ -6,7 +6,7 @@ import AuthSettingApi from '@/api/admin/system/settings/auth-setting'
 import type { LoginMethod, PortalSetting, PortalSettingPayload } from '@/api/types'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth'
 
-const props = defineProps<{ setting: PortalSetting; saving: boolean; save: (payload: PortalSettingPayload) => Promise<void> }>()
+const props = defineProps<{ disabled: boolean; setting: PortalSetting; saving: boolean; save: (payload: PortalSettingPayload) => Promise<void> }>()
 
 /* 登录方式与默认登录方式 */
 const loginMethodOptions = ref<string[]>([LOGIN_METHOD.LOCAL])
@@ -37,6 +37,8 @@ const authRules: FormRules<typeof authForm> = {
 
 /* 抽屉回填与重置，草稿不直接修改门户配置 */
 function open(enableAfterSave = false) {
+  if (props.disabled || props.saving) return
+
   enableAuthAfterSave.value = enableAfterSave
   const config = props.setting.auth_config
   Object.assign(authForm, {
@@ -66,8 +68,10 @@ function handleClosed() {
 
 /* 保存认证配置，仅提交后端读取的字段并保留其余配置 */
 function handleSaveAuthSetting() {
+  if (props.disabled || props.saving || loginMethodsLoading.value) return
+
   authFormRef.value?.validate((valid) => {
-    if (!valid || props.saving || loginMethodsLoading.value) return
+    if (!valid || props.disabled || props.saving || loginMethodsLoading.value) return
     return props
       .save({
         ...(enableAuthAfterSave.value ? { enable_auth: true } : {}),
@@ -90,12 +94,12 @@ defineExpose({ open })
 
 <template>
   <!-- 配置身份认证 -->
-  <el-button text type="primary" title="身份认证设置" :disabled="saving" @click="handleOpenAuthSetting">
+  <el-button text type="primary" title="身份认证设置" :disabled="disabled || saving" @click="handleOpenAuthSetting">
     <MkIcon name="icon_setting" />
   </el-button>
   <MkDrawer v-model="authVisible" title="身份认证设置" @closed="handleClosed">
     <el-form
-      v-loading="loginMethodsLoading"
+      v-loading="loginMethodsLoading || saving"
       ref="authFormRef"
       :model="authForm"
       :rules="authRules"

ui/src/views/system/chat-management/portal-setting/components/ButtonPortalCorsSetting.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const props = defineProps<{ saving?: boolean; save: (origins: string[]) => Promise<void> }>()
+const props = defineProps<{ disabled: boolean; saving?: boolean; save: (origins: string[]) => Promise<void> }>()
 const allowedOrigins = defineModel<string[]>({ default: () => [] })
 
 /* 跨域地址草稿，取消不修改已保存配置。 */
@@ -11,6 +11,8 @@ const corsAddressPlaceholder =
   '请输入允许的跨域地址，开启后不输入跨域地址则不限制。\n跨域地址一行一个，如：\nhttp://127.0.0.1:5678\nhttps://dataease.io'
 
 function handleOpenCorsSetting() {
+  if (props.disabled || props.saving) return
+
   corsAddressDraft.value = allowedOrigins.value.join('\n')
   corsVisible.value = true
 }
@@ -25,7 +27,7 @@ function parseCorsOrigins(value: string) {
 }
 
 function handleSaveCorsSetting() {
-  if (props.saving) return
+  if (props.disabled || props.saving) return
   return props.save(parseCorsOrigins(corsAddressDraft.value)).then(() => {
     corsVisible.value = false
   })
@@ -38,7 +40,7 @@ function handleClosed() {
 
 <template>
   <!-- 配置跨域地址 -->
-  <el-button text type="primary" title="跨域设置" @click="handleOpenCorsSetting">
+  <el-button text type="primary" title="跨域设置" :disabled="disabled || saving" @click="handleOpenCorsSetting">
     <MkIcon name="icon_setting" />
   </el-button>
   <MkDialog v-model="corsVisible" title="跨域设置" @closed="handleClosed">

ui/src/views/system/chat-management/portal-setting/components/PortalPreview.vue

@@ -25,7 +25,7 @@ defineProps<{ name: string; logo: string | null }>()
         <el-avatar :size="32" class="shrink-0 bg-primary-gradient!">
           <img src="@/assets/mk_icon_user_gradient.svg" alt="" style="width: 54%" />
         </el-avatar>
-        <span>用户名</span>
+        <span>姓名</span>
       </div>
     </div>
     <div class="min-w-0 flex-1 p-6">