medical-mall/pages/mall/admin/setting/system/config.uvue

<template>
  <AdminLayout current-page="setting_system_config">
  <view class="admin-page">
    <view class="admin-sections">
      <view class="admin-card settings-card">
        <!-- 顶部导航标签 (1:1 复刻 CRMEB 截图 Pic 0) -->
        <view class="tabs-container">
          <scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false" :enable-flex="true">
            <view class="tabs-bar">
              <view 
                v-for="(tab, index) in tabs" 
                :key="index"
                class="tab-item"
                :class="{ active: currentTab === index }"
                @click="currentTab = index"
              >
                <text class="tab-text">{{ tab.name }}</text>
                <view class="tab-line" v-if="currentTab === index"></view>
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 表单区域 (复刻 Pic 0 WAF 配置) -->
        <view class="form-container">
          
          <!-- 此处根据 currentTab 渲染内容，主要展示截图中选中的 WAF 状态 -->
          <view v-if="currentTab === 8" class="form-content">
            <!-- WAF类型 -->
            <view class="form-item">
              <view class="form-label">WAF类型:</view>
              <view class="form-right">
                <radio-group class="radio-group" @change="formData.waf_type = parseInt(($event.detail.value as string))">
                  <label class="radio-item"><radio value="0" :checked="formData.waf_type == 0" color="#1890ff" /><text class="radio-text">关闭</text></label>
                  <label class="radio-item"><radio value="1" :checked="formData.waf_type == 1" color="#1890ff" /><text class="radio-text">拦截</text></label>
                  <label class="radio-item"><radio value="2" :checked="formData.waf_type == 2" color="#1890ff" /><text class="radio-text">过滤</text></label>
                </radio-group>
                <view class="form-tip">WAF类型：关闭（所有参数都能正常请求），拦截（匹配到WAF配置的参数阻断接口请求），过滤（匹配到WAF配置的参数过滤参数，正常请求接口）</view>
              </view>
            </view>

            <!-- WAF配置 -->
            <view class="form-item">
              <view class="form-label middle-label">WAF配置:</view>
              <view class="form-right">
                <textarea 
                  class="form-textarea code-textarea" 
                  v-model="formData.waf_config" 
                  placeholder="请输入 WAF 配置"
                  maxlength="-1"
                />
                <view class="form-tip">WAF配置验证参数，过滤掉不需要的参数或拦截请求，多个参数用回车换行分隔</view>
              </view>
            </view>

            <!-- 提交按钮 -->
            <view class="submit-row">
              <view class="form-label"></view>
              <view class="form-right">
                <button class="btn-submit" @click="handleSubmit">提交</button>
              </view>
            </view>
          </view>

          <!-- 暂未切换的其他 Tab -->
          <view v-else class="placeholder-content">
            <text class="placeholder-text">此处为【{{ tabs[currentTab].name }}】的复刻内容</text>
            <view class="form-tip">（已按 CRMEB 截图逻辑预置字段，点击“提交”可测试反馈）</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  </AdminLayout>
</template>

<script setup lang="uts">
import { ref } from "vue"
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'

const currentTab = ref(8) // 默认打开截图中的“WAF配置”
const tabs = [
  { name: "基础配置" }, { name: "分享配置" }, { name: "LOGO配置" },
  { name: "自定义JS" }, { name: "地图配置" }, { name: "备案配置" },
  { name: "模块配置" }, { name: "远程登录配置" }, { name: "WAF配置" }
]

const formData = ref({
  waf_type: 2, // 截图中的“过滤”
  waf_config: `/\\.\\.\\./
/\\<\\?/
/\\bor\\b.*=.*|/i
/(select[\\s\\S]*?)(from|limit)/i
/(union[\\s\\S]*?select)/i
/(having[\\s\\S]*?updatexml|extractvalue)/i`
})

const handleSubmit = () => {
  uni.showToast({ title: "保存成功", icon: "success" })
}
</script>

<style scoped>
.admin-page {
  background-color: transparent; /* 已由 AdminLayout 处理 */
  min-height: auto;
  padding: 0; /* 已由 AdminLayout 处理 */
}
.settings-card {
  background-color: #fff;
  border-radius: 8px; /* 统一为 8px */
  min-height: calc(100vh - 150px);
  padding: 0; /* 使用 admin-card 统一 padding */
}

/* 标签栏 - 保持不变 */
.tabs-container {
  border-bottom: 1px solid #f0f2f5;
  padding: 0 10px;
}
.tabs-scroll {
  width: 100%;
}
.tabs-bar {
  display: flex;
  flex-direction: row;
}
.tab-item {
  padding: 16px 20px;
  font-size: 14px;
  color: #515a6e;
  position: relative;
  cursor: pointer;
}
.tab-item.active {
  color: #1890ff;
}
.tab-line {
  position: absolute;
  bottom: 0px;
  left: 20px;
  right: 20px;
  height: 2px;
  background-color: #1890ff;
}

/* 表单布局复刻 */
.form-container {
  padding: 30px 20px;
}
.form-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
}
.form-label {
  width: 120px;
  text-align: right;
  padding-right: 20px;
  font-size: 14px;
  color: #303133;
  line-height: 32px;
}
.middle-label {
  padding-top: 10px;
}
.form-right {
  flex: 1;
}

/* Radio 样式 */
.radio-group {
  display: flex;
  flex-direction: row;
  height: 32px;
  align-items: center;
}
.radio-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 24px;
}
.radio-text {
  font-size: 14px;
  color: #606266;
  margin-left: 6px;
}

/* Textarea 样式 像素级对齐 */
.code-textarea {
  width: 600px;
  height: 200px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  color: #303133;
  font-family: 'Courier New', Courier, monospace;
}

/* 提示文本 1:1 复刻颜色 */
.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
  line-height: 1.6;
  width: 600px;
}

/* 按钮样式 */
.submit-row {
  margin-top: 20px;
}
.btn-submit {
  background-color: #1890ff;
  color: #fff;
  width: 64px;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  border-radius: 4px;
  text-align: center;
  border: none;
  padding: 0;
  margin: 0;
}

.placeholder-content {
  padding: 50px;
  text-align: center;
}
.placeholder-text {
  font-size: 16px;
  color: #909399;
}
</style>