更新代理套餐优化

src/views/system/tenant/TenantForm.vue

@@ -1,19 +1,18 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%" :draggable="false">
     <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="120px">
-      <!-- ========== 1. 基础信息 ========== -->
       <el-divider>基础信息</el-divider>
       <el-form-item label="租户名" prop="name">
         <el-input v-model="formData.name" placeholder="请输入租户名" />
       </el-form-item>
+
       <el-form-item v-if="tenantLevel <= 1" label="租户类型" prop="tenantType">
-        <el-radio-group v-model="formData.tenantType">
+        <el-radio-group v-model="formData.tenantType" @change="handleTenantTypeChange">
           <el-radio value="代理">代理</el-radio>
           <el-radio value="用户">用户</el-radio>
         </el-radio-group>
       </el-form-item>
 
-
       <el-form-item label="联系人" prop="contactName">
         <el-input v-model="formData.contactName" placeholder="请输入联系人" />
       </el-form-item>
@@ -43,23 +42,20 @@
         <el-date-picker v-model="formData.brotherExpireTime" clearable placeholder="请选择爬大哥过期时间" type="date"
           value-format="x" />
       </el-form-item>
+
       <el-form-item v-if="tenantLevel == 0" label="爬虫过期时间" prop="crawlExpireTime">
         <el-date-picker v-model="formData.crawlExpireTime" clearable placeholder="请选择爬虫过期时间" type="date"
           value-format="x" />
       </el-form-item>
 
-
       <el-form-item v-if="tenantLevel == 0" label="后台过期时间" prop="expireTime">
         <el-date-picker v-model="formData.expireTime" clearable placeholder="请选择过期时间" type="date" value-format="x" />
       </el-form-item>
-
       <el-form-item v-else label="后台过期时间" prop="expireTime">
         <el-date-picker v-model="formData.expireTime" clearable placeholder="请选择过期时间" disabled type="date"
           value-format="x" />
       </el-form-item>
 
-
-
       <el-form-item label="绑定域名" prop="website">
         <el-input v-model="formData.website" placeholder="请输入绑定域名" />
       </el-form-item>
@@ -82,105 +78,110 @@
         </el-select>
       </el-form-item>
 
-      <!-- 爬虫：不受限制 -->
+      <template v-if="userData.id">
-      <el-form-item v-if="userData.id" label="爬虫" prop="status">
+        <el-form-item label="爬虫" prop="status">
           <el-radio-group v-model="userData.crawl">
             <el-radio :value="1">开启</el-radio>
             <el-radio :value="0">关闭</el-radio>
           </el-radio-group>
         </el-form-item>
-
+        <el-form-item label="爬大哥" prop="status">
-      <!-- 爬大哥：依赖爬大哥过期时间 -->
-      <el-form-item v-if="userData.id" label="爬大哥" prop="status">
           <el-radio-group v-model="userData.bigBrother" :disabled="!formData.brotherExpireTime">
             <el-radio :value="1">开启</el-radio>
             <el-radio :value="0">关闭</el-radio>
           </el-radio-group>
         </el-form-item>
-
+        <el-form-item label="ios自动化" prop="status">
-      <!-- ai自动化：依赖 AI 过期时间 -->
-      <el-form-item v-if="userData.id" label="ai自动化" prop="status">
           <el-radio-group v-model="userData.aiChat" :disabled="!formData.aiExpireTime">
             <el-radio :value="1">开启</el-radio>
             <el-radio :value="0">关闭</el-radio>
           </el-radio-group>
         </el-form-item>
-
+        <el-form-item label="ai回复" prop="status">
-      <!-- ai回复：依赖 AI 过期时间 -->
-      <el-form-item v-if="userData.id" label="ai回复" prop="status">
           <el-radio-group v-model="userData.aiReplay" :disabled="!formData.aiExpireTime">
             <el-radio :value="1">开启</el-radio>
             <el-radio :value="0">关闭</el-radio>
           </el-radio-group>
         </el-form-item>
-
+        <el-form-item label="即时消息" prop="status">
-      <!--WEB回复：依赖 AI 过期时间 -->
-      <el-form-item v-if="userData.id" label="WEB客户端" prop="status">
           <el-radio-group v-model="userData.webAi" :disabled="!formData.aiExpireTime">
             <el-radio :value="1">开启</el-radio>
             <el-radio :value="0">关闭</el-radio>
           </el-radio-group>
         </el-form-item>
-      <!-- ========== 2. 套餐 & 权限 ========== -->
+      </template>
+
       <el-divider>套餐 & 权限</el-divider>
       <el-form-item label="租户套餐" prop="packageId">
-        <!-- 顶层租户或无 parentId，走原来的下拉选择 -->
         <el-select v-if="(formData.parentId == 1 || formData.parentId == null) && tenantLevel == 0"
-          v-model="formData.packageId" clearable placeholder="请选择租户套餐">
+          v-model="formData.packageId" clearable placeholder="请选择租户套餐" style="width: 100%;">
           <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
 
-        <!-- 代理租户：用功能勾选 + 套餐单选 -->
+        <div v-else class="package-selection-container">
-        <div v-else style="display: block;">
+          <el-radio-group v-model="activePackageCategory" class="category-tabs">
-          <!-- 功能勾选：1=爬大哥，2=爬主播，3=AI套餐 -->
+            <el-radio-button label="normal" :disabled="formData.tenantType === '代理'">常规套餐</el-radio-button>
+
+            <el-radio-button label="agent" :disabled="formData.tenantType === '用户'">代理套餐</el-radio-button>
+
+            <el-radio-button label="test" :disabled="formData.tenantType === '代理'">测试套餐</el-radio-button>
+          </el-radio-group>
+
+          <div v-show="activePackageCategory === 'normal'" class="filter-section">
+            <div class="filter-row">
+              <span class="filter-label">包含功能：</span>
               <el-checkbox-group v-model="selectedFeatures">
                 <el-checkbox :label="1">爬主播</el-checkbox>
                 <el-checkbox :label="2">爬大哥</el-checkbox>
-            <el-checkbox :label="3">AI套餐</el-checkbox>
+                <el-checkbox :label="4">AI套餐</el-checkbox>
                 <el-checkbox :label="9">代理</el-checkbox>
               </el-checkbox-group>
-
+            </div>
-          <!-- 按天数过滤：30 / 180 / 360 天 -->
+            <div class="filter-row" style="margin-top: 8px;">
-          <div style="margin-top: 8px;">
+              <span class="filter-label">套餐周期：</span>
-            <el-radio-group v-model="selectedDays">
+              <el-radio-group v-model="selectedDays" size="small">
+                <el-radio-button :label="null">全部</el-radio-button>
                 <el-radio-button :label="30">30 天</el-radio-button>
-              <el-radio-button :label="180">180 天</el-radio-button>
+                <el-radio-button :label="180">185 天</el-radio-button>
                 <el-radio-button :label="365">365 天</el-radio-button>
               </el-radio-group>
             </div>
-          <!-- 根据勾选结果筛选套餐，用单选框选择一个套餐 -->
+          </div>
-          <div class="package-radio-wrapper">
-            <el-radio-group v-model="formData.packageId">
-              <el-radio-button v-for="item in filteredAgencyPackages" :key="item.id" :label="item.id"
-                class="package-radio">
 
-                {{ item.name }}
+          <div class="package-card-grid">
+            <div v-for="item in filteredAgencyPackages" :key="item.id" class="package-card"
+              :class="{ 'is-active': formData.packageId === item.id }" @click="formData.packageId = item.id">
+              <div v-if="formData.packageId === item.id" class="active-badge">
+                <el-icon>
+                  <Check />
+                </el-icon>
+              </div>
 
-              </el-radio-button>
+              <div class="card-title">{{ item.name }}</div>
-            </el-radio-group>
+              <div class="card-price">
-
+                <span class="currency">¥</span>
-            <div v-if="filteredAgencyPackages.length === 0" class="package-empty-tip">
+                <span class="amount">{{ item.price }}</span>
-              暂无匹配套餐，请调整上方功能勾选
+              </div>
+              <div class="card-desc">时长: {{ item.days === 9999 ? '永久有效' : item.days + ' 天' }}</div>
             </div>
           </div>
 
+          <el-empty v-if="filteredAgencyPackages.length === 0" description="暂无匹配的套餐，请调整筛选条件" :image-size="60" />
         </div>
       </el-form-item>
 
     </el-form>
 
     <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-        确 定
-      </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
 
-
 <script lang="ts" setup>
 import { ref, reactive, watch, computed } from 'vue'
+import { Check } from '@element-plus/icons-vue' // 引入对号图标
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as TenantApi from '@/api/system/tenant'
 import { getUserByTenant, updateRoleUser } from '@/api/system/user'
@@ -188,13 +189,17 @@ import { CommonStatusEnum } from '@/utils/constants'
 import * as TenantPackageApi from '@/api/system/tenantPackage'
 import * as userApi from '@/api/system/user'
 import { useUserStore } from '@/store/modules/user'
+// 假设有 useI18n 和 useMessage 的全局引入或在此处补全引入
+import { useI18n } from 'vue-i18n'
+import { useMessage } from '@/hooks/web/useMessage'
 
 defineOptions({ name: 'SystemTenantForm' })
+
 const tenantLevel = ref(3)
 TenantApi.getSelfTenantLevel().then(res => {
   tenantLevel.value = res.tenantLevel
-  console.log(tenantLevel.value)
 })
+
 const { t } = useI18n()
 const message = useMessage()
 const dialogVisible = ref(false)
@@ -202,6 +207,7 @@ const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref<'create' | 'update'>('create')
 const userStore = useUserStore()
+
 const formData = ref({
   id: 0,
   name: undefined as string | undefined,
@@ -218,21 +224,12 @@ const formData = ref({
   aiExpireTime: undefined as number | undefined,
   brotherExpireTime: undefined as number | undefined,
   crawlExpireTime: undefined as number | undefined,
-  tenantType: undefined as number | undefined,
+  tenantType: undefined as string | number | undefined, // 修改为兼容 string，因 radio 值是'代理'
   parentId: undefined as number | undefined,
-
 })
 
 const userData = ref({} as userApi.UserVO)
-
+const userList = ref<userApi.UserVO[]>([{ id: 0, aiChat: 0, bigBrother: 0, crawl: 0 } as any])
-const userList = ref<userApi.UserVO[]>([
-  {
-    id: 0,
-    aiChat: 0,
-    bigBrother: 0,
-    crawl: 0
-  } as any
-])
 
 const formRules = reactive({
   name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
@@ -252,60 +249,73 @@ const formRules = reactive({
 const formRef = ref()
 const packageList = ref([] as TenantPackageApi.TenantPackageVO[])
 const packageAgencyList = ref([] as TenantPackageApi.TenantPackageVO[])
-// 代理套餐功能勾选：1=爬大哥，2=爬主播，3=AI套餐
+
-const selectedFeatures = ref<number[]>([])
+// ====== 新增：UI 交互状态 ======
-// 按套餐天数筛选：30 / 180 / 360（不选则不过滤）
+const activePackageCategory = ref('normal') // 套餐大类：'normal' | 'agent' | 'test'
-const selectedDays = ref<number | null>(null)
+const selectedFeatures = ref<number[]>([]) // 代理套餐功能勾选
-// 二级代理套餐的 ID
+const selectedDays = ref<number | null>(null) // 按套餐天数筛选
-const SECOND_AGENT_PACKAGE_ID = 10001
+
-// 根据 selectedFeatures + packageAgencyList 计算可选套餐
+const SECOND_AGENT_PACKAGE_ID = 10001 // 二级代理套餐的 ID
-const filteredAgencyPackages = computed(() => {
+
-  // 1. 根据创建/编辑确定基础套餐列表
+// 当选择租户类型时，智能切换 Tab
-  let list: any[] = []
+const handleTenantTypeChange = (val: string) => {
-  if (formType.value === 'create') {
+  if (val === '代理') {
-    list = packageList.value || []
+    activePackageCategory.value = 'agent'  // 自动跳到代理套餐 Tab
-  } else {
+    formData.value.packageId = undefined // 清空之前选的错误套餐
-    list = packageAgencyList.value || []
+  } else if (val === '用户') {
+    activePackageCategory.value = 'normal' // 自动跳到常规套餐 Tab
+    formData.value.packageId = undefined // 清空之前选的错误套餐
   }
+}
+
+// ====== 核心：计算最终展示的套餐列表 ======
+const filteredAgencyPackages = computed(() => {
+  let list: any[] = formType.value === 'create' ? packageList.value || [] : packageAgencyList.value || []
   if (!list.length) return []
 
-  const selected = selectedFeatures.value
-
-  // 2. 先按功能勾选过滤（保持你原来的逻辑）
   let result: any[] = []
-  if (!selected.length) {
+
-    // 一个功能都没勾选时，直接返回全部套餐
+  // 1. 根据顶部 Tab 进行大类粗筛
-    result = list
+  if (activePackageCategory.value === 'agent') {
-  } else {
+    // 假设代理套餐特征：名称含'代理' 或 天数9999 或 ID是二级代理
-    // 有勾选时才进行过滤
+    result = list.filter(item => item.name.includes('代理') || item.days === 9999 || item.id === SECOND_AGENT_PACKAGE_ID)
-    result = list.filter((item: any) => {
+  }
+  else if (activePackageCategory.value === 'test') {
+    // 假设测试套餐特征：名称含'测试'
+    result = list.filter(item => item.name.includes('测试'))
+  }
+  else {
+    // 常规套餐：排除代理和测试套餐
+    result = list.filter(item => !item.name.includes('代理') && !item.name.includes('测试') && item.days !== 9999)
+
+    // 2. 常规套餐继续应用「功能勾选」过滤
+    if (selectedFeatures.value.length > 0) {
+      result = result.filter(item => {
         const typeStr = String(item.packageType ?? '')
-      // 要求选中的功能全部包含在 packageType 里
+        return selectedFeatures.value.every(flag => typeStr.includes(String(flag)))
-      // 例如勾选 [1,2] -> 匹配 '12'、'123' 等
-      return selected.every(flag => typeStr.includes(String(flag)))
       })
     }
 
-  // 3. 按天数过滤：item.days === 30 / 180 / 360
+    // 3. 常规套餐继续应用「天数过滤」
     if (selectedDays.value != null) {
-    result = result.filter((item: any) => item.days === selectedDays.value)
+      result = result.filter(item => item.days === selectedDays.value)
+    }
   }
 
-  // 4. 再根据租户类型进行限制
+  // 4. 原有的租户类型强制限制逻辑 (兜底保护)
+  // 4. 最终兜底：利用后端的 packageType 进行限制
   const tenantType = formData.value.tenantType
   if (tenantType === '代理') {
-    // 只能选二级代理套餐（10001）
+    // 租户类型选了“代理”，强制只能看到 packageType 为 999 的套餐
-    result = result.filter(item => item.id === SECOND_AGENT_PACKAGE_ID)
+    result = result.filter(item => item.packageType === 999)
-  } else if (tenantType === '租户') {
+  } else if (tenantType === '用户') {
-    // 租户不能选二级代理套餐
+    // 租户类型选了“用户”，强制不能看到代理(999)和测试(99)的套餐
-    result = result.filter(item => item.id !== SECOND_AGENT_PACKAGE_ID)
+    result = result.filter(item => item.packageType !== 999)
   }
 
   return result
 })
 
-
-
 /** 打开弹窗 */
 const open = async (type: 'create' | 'update', id?: number) => {
   dialogVisible.value = true
@@ -316,14 +326,9 @@ const open = async (type: 'create' | 'update', id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      // 1. 租户基础信息
       formData.value = await TenantApi.getTenant(id)
-
-      // 2. 拉取租户用户列表
       const res = await getUserByTenant(id)
       userList.value = res || []
-
-      // 3. 默认选中第一个用户（有的话）
       if (userList.value.length > 0) {
         userData.value = userList.value[0]
           ; (userData.value as any).tenantId = formData.value.id
@@ -333,7 +338,6 @@ const open = async (type: 'create' | 'update', id?: number) => {
     }
   }
 
-  // 套餐列表
   packageList.value = await TenantPackageApi.getTenantPackageList()
   if (userStore.getUser.id === 1) {
     packageAgencyList.value = await TenantPackageApi.getTenantPackageListagency()
@@ -382,24 +386,21 @@ const resetForm = () => {
     password: undefined,
     remark: undefined,
     aiExpireTime: undefined,
-    brotherExpireTime: undefined
+    brotherExpireTime: undefined,
+    tenantType: undefined,
+    parentId: undefined
   }
   userData.value = {} as any
-  userList.value = [
+  userList.value = [{ id: 0, aiChat: 0, bigBrother: 0, crawl: 0 } as any]
-    {
+
-      id: 0,
+  // 重置筛选条件
-      aiChat: 0,
-      bigBrother: 0,
-      crawl: 0
-    } as any
-  ]
-  // ⭐ 每次打开弹窗时都清空功能选择
   selectedFeatures.value = []
+  selectedDays.value = null
+  activePackageCategory.value = 'normal' // 回到默认Tab
 
   formRef.value?.resetFields?.()
 }
 
-
 /** 切换用户 */
 function changeUser(val: number) {
   userList.value.forEach((item) => {
@@ -410,18 +411,18 @@ function changeUser(val: number) {
   })
 }
 
-/** 联动：AI 过期时间 -> AI 权限 */
+/** 联动逻辑 */
 watch(
   () => formData.value.aiExpireTime,
   (val) => {
     if (!val && userData.value) {
       userData.value.aiChat = 0
       userData.value.aiReplay = 0
+      userData.value.webAi = 0
     }
   }
 )
 
-/** 联动：爬大哥过期时间 -> bigBrother 权限 */
 watch(
   () => formData.value.brotherExpireTime,
   (val) => {
@@ -431,35 +432,125 @@ watch(
   }
 )
 </script>
+
 <style scoped>
-.package-radio-wrapper {
+/* ================= 卡片与筛选样式 ================= */
-  margin-top: 10px;
+.package-selection-container {
-}
+  width: 100%;
-
-/* 让按钮自动换行，并留点间隔 */
-.package-radio-wrapper :deep(.el-radio-group) {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
-  gap: 8px;
+  gap: 16px;
 }
 
-/* 美化每个 radio-button 的外观（胶囊 + 内边距） */
+.category-tabs {
-.package-radio-wrapper :deep(.el-radio-button__inner) {
+  margin-bottom: 4px;
-  border-radius: 999px;
+}
-  padding: 4px 10px;
+
+/* 过滤区域样式 */
+.filter-section {
+  background-color: #f8f9fa;
+  padding: 12px 16px;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+}
+
+.filter-label {
+  font-size: 13px;
+  color: #606266;
+  width: 80px;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+/* 卡片网格布局：自适应排列 */
+.package-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 16px;
+  margin-top: 8px;
+}
+
+/* 单个套餐卡片 */
+.package-card {
+  position: relative;
+  background: #ffffff;
   border: 1px solid #dcdfe6;
-  height: 30px;
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  overflow: hidden;
 }
 
-/* 选中状态可以稍微加粗/加边框，Element Plus 自带选中样式，这里可选 */
+.package-card:hover {
-.package-radio-wrapper :deep(.is-active .el-radio-button__inner) {
+  border-color: #c0c4cc;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
+}
+
+/* 选中状态 */
+.package-card.is-active {
   border-color: #409eff;
+  background-color: #ecf5ff;
+  box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1);
 }
 
-/* 空数据提示 */
+/* 选中时的右上角角标 */
-.package-empty-tip {
+.active-badge {
-  color: #999;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-top: 36px solid #409eff;
+  border-left: 36px solid transparent;
+}
+
+.active-badge .el-icon {
+  position: absolute;
+  top: -32px;
+  right: 2px;
+  color: #fff;
+  font-size: 14px;
+}
+
+/* 卡片内部排版 */
+.card-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 12px;
+  line-height: 1.4;
+  height: 40px;
+  /* 固定高度防止因名称长短不同导致卡片高度不一 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.card-price {
+  color: #f56c6c;
+  margin-bottom: 6px;
+}
+
+.card-price .currency {
+  font-size: 14px;
+  margin-right: 2px;
+}
+
+.card-price .amount {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.card-desc {
   font-size: 12px;
-  margin-top: 5px;
+  color: #909399;
 }
 </style>

src/views/system/tenantagencypackage/TenantAgencyPackageForm.vue

@@ -55,21 +55,21 @@
       </el-form-item>
 
       <!-- ai回复：必须先选“AI过期时间” -->
-      <el-form-item label="AI客户端">
+      <!-- <el-form-item label="IOS权限>
         <el-radio-group v-model="formData.aiClient">
           <el-radio :value="1">开启</el-radio>
           <el-radio :value="0">关闭</el-radio>
         </el-radio-group>
-      </el-form-item>
+      </el-form-item> -->
       <!-- ai回复：必须先选“AI过期时间” -->
-      <el-form-item label="AI回复">
+      <!-- <el-form-item label="AI回复">
         <el-radio-group v-model="formData.aiReplay">
           <el-radio :value="1">开启</el-radio>
           <el-radio :value="0">关闭</el-radio>
         </el-radio-group>
-      </el-form-item>
+      </el-form-item> -->
       <!-- WEB回复：必须先选“AI过期时间” -->
-      <el-form-item label="WEB客户端">
+      <el-form-item label="即时消息">
         <el-radio-group v-model="formData.webAi">
           <el-radio :value="1">开启</el-radio>
           <el-radio :value="0">关闭</el-radio>