完成代码路径重构
This commit is contained in:
234
pages/mall/admin/setting/system/index.uvue
Normal file
234
pages/mall/admin/setting/system/index.uvue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<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"
|
||||
></textarea>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from "vue"
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user