🎨 新增ip检测功能模块，新增支付配置模块
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -5,3 +5,5 @@ bun.lockb
|
||||
config.yaml
|
||||
.idea
|
||||
dist
|
||||
.claude
|
||||
.vscode
|
||||
63
src/api/payConfig/index.js
Normal file
63
src/api/payConfig/index.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import service from '@/utils/request'
|
||||
|
||||
// 获取支付配置列表
|
||||
export const list = (params) => {
|
||||
return service({
|
||||
url: '/payConfig/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取单个支付配置详情
|
||||
export const detail = (id) => {
|
||||
return service({
|
||||
url: `/payConfig/${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取启用的支付配置（按编码）
|
||||
export const getEnabled = (params) => {
|
||||
return service({
|
||||
url: '/payConfig/enabled',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 创建支付配置
|
||||
export const createPayConfig = (data) => {
|
||||
return service({
|
||||
url: '/payConfig',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新支付配置
|
||||
export const updatePayConfig = (data) => {
|
||||
return service({
|
||||
url: '/payConfig',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除支付配置
|
||||
export const removePayConfig = (id) => {
|
||||
return service({
|
||||
url: `/payConfig/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 切换启用状态
|
||||
export const togglePayConfig = (data) => {
|
||||
return service({
|
||||
url: '/payConfig/toggle',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -123,3 +123,30 @@ export const setTeacherRate = (data) => {
|
||||
})
|
||||
}
|
||||
|
||||
// =============IP检测相关=================
|
||||
export const getIpCon = () => {
|
||||
return service({
|
||||
url: '/app_user/ipCon',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
export const setIpCon = (data) => {
|
||||
return service({
|
||||
url: '/app_user/ipCon',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
export const setIpStatus = (data) => {
|
||||
return service({
|
||||
url: '/app_user/ipStatus',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
export const getIpStatus = () => {
|
||||
return service({
|
||||
url: '/app_user/ipStatus',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
556
src/components/richtext/rich-edit.vue.backup
Normal file
556
src/components/richtext/rich-edit.vue.backup
Normal file
@@ -0,0 +1,556 @@
|
||||
<template>
|
||||
<div class="rich-edit-wrapper border border-solid border-gray-100 h-full">
|
||||
<Toolbar
|
||||
:editor="editorRef"
|
||||
:default-config="toolbarConfig"
|
||||
mode="default"
|
||||
/>
|
||||
<Editor
|
||||
v-model="valueHtml"
|
||||
class="overflow-y-hidden mt-0.5"
|
||||
style="min-height: 25rem; height: 400px;"
|
||||
:default-config="editorConfig"
|
||||
mode="default"
|
||||
@onCreated="handleCreated"
|
||||
@onChange="change"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
||||
|
||||
const basePath = import.meta.env.VITE_BASE_API
|
||||
|
||||
import { onBeforeUnmount, ref, shallowRef, watch, computed } from 'vue'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getUrl } from '@/utils/image'
|
||||
import botLogo from '@/assets/bot_logo.png'
|
||||
import { useUserStore } from '@/pinia/modules/user'
|
||||
|
||||
const emits = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
const change = (editor) => {
|
||||
emits('change', editor)
|
||||
emits('update:modelValue', valueHtml.value)
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
useWatermark: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// 调试：监听 props 变化
|
||||
watch(() => props.useWatermark, (newVal) => {
|
||||
console.log('useWatermark prop changed to:', newVal)
|
||||
}, { immediate: true })
|
||||
|
||||
const editorRef = shallowRef()
|
||||
const valueHtml = ref('')
|
||||
const userStore = useUserStore()
|
||||
|
||||
const toolbarConfig = {}
|
||||
|
||||
// 创建自定义上传函数，直接检查当前 props 值
|
||||
const createCustomUpload = () => {
|
||||
return async (file, insertFn) => {
|
||||
// 直接获取当前的 props.useWatermark 值
|
||||
const shouldUseWatermark = props.useWatermark
|
||||
console.log('customUpload called, useWatermark:', shouldUseWatermark)
|
||||
console.log('props.useWatermark:', props.useWatermark)
|
||||
|
||||
// 未开启水印则直接上传原图
|
||||
if (!shouldUseWatermark) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const resp = await fetch(basePath + '/fileUploadAndDownload/upload?noSave=1', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'x-token': userStore.token,
|
||||
'x-user-id': userStore.userInfo.ID
|
||||
}
|
||||
})
|
||||
const res = await resp.json()
|
||||
if (res.code === 0) {
|
||||
const urlPath = getUrl(res.data.file.url)
|
||||
insertFn(urlPath, res.data.file.name)
|
||||
} else {
|
||||
ElMessage.error(res.msg || '上传失败')
|
||||
}
|
||||
return
|
||||
}
|
||||
try {
|
||||
console.log('开始添加水印，文件:', file.name)
|
||||
const watermarkedBlob = await addBottomWatermark(file, {
|
||||
stripRatio: 0.18, // 水印条高度占原图高度比例
|
||||
background: 'rgba(255,255,255,0.96)',
|
||||
text: '好运助手',
|
||||
textColor: '#333',
|
||||
fontFamily: 'PingFang SC, Microsoft YaHei, Arial',
|
||||
logo: botLogo
|
||||
})
|
||||
console.log('水印处理完成，新文件大小:', watermarkedBlob.size)
|
||||
|
||||
const newFile = new File([watermarkedBlob], file.name, { type: watermarkedBlob.type || file.type })
|
||||
const formData = new FormData()
|
||||
formData.append('file', newFile)
|
||||
const resp = await fetch(basePath + '/fileUploadAndDownload/upload?noSave=1', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'x-token': userStore.token,
|
||||
'x-user-id': userStore.userInfo.ID
|
||||
}
|
||||
})
|
||||
const res = await resp.json()
|
||||
if (res.code === 0) {
|
||||
const urlPath = getUrl(res.data.file.url)
|
||||
insertFn(urlPath, res.data.file.name)
|
||||
} else {
|
||||
ElMessage.error(res.msg || '上传失败')
|
||||
}
|
||||
} catch {
|
||||
ElMessage.error('处理水印失败')
|
||||
// 降级：直接走原图上传
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const resp = await fetch(basePath + '/fileUploadAndDownload/upload?noSave=1', { method: 'POST', body: formData })
|
||||
const res = await resp.json()
|
||||
if (res.code === 0) {
|
||||
const urlPath = getUrl(res.data.file.url)
|
||||
insertFn(urlPath, res.data.file.name)
|
||||
} else {
|
||||
ElMessage.error(res.msg || '上传失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 将 editorConfig 改为计算属性，使其响应 props 变化
|
||||
const editorConfig = computed(() => ({
|
||||
showFullScreen: true,
|
||||
placeholder: '请输入内容...',
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
server: basePath + '/fileUploadAndDownload/upload?noSave=1',
|
||||
fieldName: 'file',
|
||||
maxFileSize: 1024 * 1024 * 10, // 限制图片大小为10MB
|
||||
maxNumberOfFiles: 1,
|
||||
customUpload: createCustomUpload(),
|
||||
customInsert(res, insertFn) {
|
||||
if (res.code === 0) {
|
||||
const urlPath = getUrl(res.data.file.url)
|
||||
insertFn(urlPath, res.data.file.name)
|
||||
return
|
||||
}
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
},
|
||||
uploadVideo: {
|
||||
server: basePath + '/fileUploadAndDownload/upload?noSave=1',
|
||||
fieldName: 'file',
|
||||
maxFileSize: 1024 * 1024 * 100, // 限制视频大小为100MB
|
||||
maxNumberOfFiles: 1,
|
||||
customInsert(res, insertFn) {
|
||||
if (res.code === 0) {
|
||||
const urlPath = getUrl(res.data.file.url)
|
||||
insertFn(urlPath, res.data.file.name)
|
||||
return
|
||||
}
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
})
|
||||
|
||||
const handleCreated = (editor) => {
|
||||
editorRef.value = editor
|
||||
valueHtml.value = props.modelValue
|
||||
|
||||
// 动态更新上传配置
|
||||
if (editor && editor.getConfig) {
|
||||
const config = editor.getConfig()
|
||||
if (config.MENU_CONF && config.MENU_CONF.uploadImage) {
|
||||
config.MENU_CONF.uploadImage.customUpload = createCustomUpload()
|
||||
}
|
||||
}
|
||||
|
||||
// 修复点击区域问题
|
||||
setTimeout(() => {
|
||||
const editorContainer = editor.getEditableContainer()
|
||||
if (editorContainer) {
|
||||
// 确保整个编辑器区域都可以点击
|
||||
editorContainer.style.cursor = 'text'
|
||||
editorContainer.style.minHeight = '300px'
|
||||
|
||||
// 添加点击事件监听器
|
||||
editorContainer.addEventListener('click', (e) => {
|
||||
if (e.target === editorContainer) {
|
||||
// 如果点击的是容器本身，聚焦到编辑器
|
||||
editor.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
valueHtml.value = props.modelValue
|
||||
}
|
||||
)
|
||||
|
||||
// 监听 useWatermark 变化，动态更新编辑器配置
|
||||
watch(
|
||||
() => props.useWatermark,
|
||||
() => {
|
||||
if (editorRef.value && editorRef.value.getConfig) {
|
||||
const config = editorRef.value.getConfig()
|
||||
if (config.MENU_CONF && config.MENU_CONF.uploadImage) {
|
||||
config.MENU_CONF.uploadImage.customUpload = createCustomUpload()
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
async function addBottomWatermark(file, options) {
|
||||
console.log('addBottomWatermark 开始处理，文件:', file.name, '大小:', file.size)
|
||||
const { stripRatio = 0.18, background = 'rgba(255,255,255,0.96)', text = '', textColor = '#333', fontFamily = 'Arial', logo } = options || {}
|
||||
|
||||
const img = await fileToImage(file)
|
||||
const width = img.naturalWidth || img.width
|
||||
const height = img.naturalHeight || img.height
|
||||
const stripHeight = Math.max(60, Math.floor(height * stripRatio))
|
||||
console.log('图片尺寸:', width, 'x', height, '水印条高度:', stripHeight)
|
||||
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height + stripHeight
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
// 原图
|
||||
ctx.drawImage(img, 0, 0, width, height)
|
||||
|
||||
// 底部水印条背景
|
||||
ctx.fillStyle = background
|
||||
ctx.fillRect(0, height, width, stripHeight)
|
||||
|
||||
// 左侧 Logo（可选）
|
||||
let logoSize = Math.floor(stripHeight * 0.6)
|
||||
let logoPadding = Math.floor(stripHeight * 0.2)
|
||||
if (logo) {
|
||||
try {
|
||||
const logoImg = await srcToImage(logo)
|
||||
const ratio = logoImg.width / logoImg.height
|
||||
const drawW = logoSize
|
||||
const drawH = Math.floor(drawW / ratio)
|
||||
const y = height + Math.floor((stripHeight - drawH) / 2)
|
||||
ctx.drawImage(logoImg, logoPadding, y, drawW, drawH)
|
||||
} catch { void 0 }
|
||||
}
|
||||
|
||||
// 右侧文字
|
||||
ctx.fillStyle = textColor
|
||||
const fontSize = Math.floor(stripHeight * 0.38)
|
||||
ctx.font = `${fontSize}px ${fontFamily}`
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.textAlign = 'right'
|
||||
const textPadding = Math.floor(stripHeight * 0.25)
|
||||
ctx.fillText(text, width - textPadding, height + Math.floor(stripHeight / 2))
|
||||
|
||||
const blob = await canvasToBlob(canvas, file.type || 'image/png')
|
||||
return blob
|
||||
}
|
||||
|
||||
function fileToImage(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
console.log('图片加载成功，尺寸:', img.naturalWidth, 'x', img.naturalHeight)
|
||||
resolve(img)
|
||||
}
|
||||
img.onerror = (error) => {
|
||||
console.error('图片加载失败:', error)
|
||||
reject(error)
|
||||
}
|
||||
img.src = reader.result
|
||||
}
|
||||
reader.onerror = (error) => {
|
||||
console.error('文件读取失败:', error)
|
||||
reject(error)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
function srcToImage(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'anonymous'
|
||||
img.onload = () => {
|
||||
console.log('Logo 加载成功，尺寸:', img.naturalWidth, 'x', img.naturalHeight)
|
||||
resolve(img)
|
||||
}
|
||||
img.onerror = (error) => {
|
||||
console.error('Logo 加载失败:', error, 'src:', src)
|
||||
reject(error)
|
||||
}
|
||||
img.src = src
|
||||
})
|
||||
}
|
||||
|
||||
function canvasToBlob(canvas, mime) {
|
||||
return new Promise((resolve) => {
|
||||
if (canvas.toBlob) {
|
||||
canvas.toBlob((blob) => {
|
||||
console.log('Canvas 转 Blob 成功，大小:', blob.size, '类型:', blob.type)
|
||||
resolve(blob)
|
||||
}, mime, 0.92)
|
||||
} else {
|
||||
// 兼容处理
|
||||
const dataURL = canvas.toDataURL(mime)
|
||||
const arr = dataURL.split(',')
|
||||
const bstr = atob(arr[1])
|
||||
let n = bstr.length
|
||||
const u8arr = new Uint8Array(n)
|
||||
while (n--) u8arr[n] = bstr.charCodeAt(n)
|
||||
const blob = new Blob([u8arr], { type: mime })
|
||||
console.log('Canvas 转 Blob (兼容模式) 成功，大小:', blob.size, '类型:', blob.type)
|
||||
resolve(blob)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 确保富文本编辑器的点击区域
|
||||
:deep(.w-e-text-container) {
|
||||
min-height: 300px !important;
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
:deep(.w-e-scroll) {
|
||||
min-height: 300px !important;
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
:deep(.w-e-text-placeholder) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 确保整个编辑器区域都可以点击
|
||||
:deep(.w-e-text-container .w-e-scroll) {
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
// 修复编辑器内容区域的点击问题
|
||||
:deep(.w-e-text-container .w-e-scroll .w-e-text) {
|
||||
min-height: 300px !important;
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
// 全屏关闭按钮样式
|
||||
.fullscreen-close-btn {
|
||||
position: fixed !important;
|
||||
top: 20px !important;
|
||||
right: 20px !important;
|
||||
z-index: 100000 !important; // 确保在最上层
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
background: rgba(0, 0, 0, 0.85) !important;
|
||||
color: white !important;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
|
||||
font-weight: 500;
|
||||
pointer-events: auto !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.95) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// 全局样式：全屏模式下隐藏其他元素
|
||||
body.editor-fullscreen-mode {
|
||||
overflow: hidden !important;
|
||||
|
||||
// 隐藏顶层主要容器
|
||||
.gva-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gva-aside {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gva-tabs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 隐藏页面内容区域中不包含全屏编辑器的元素
|
||||
// 使用 :has() 选择器（现代浏览器都支持）
|
||||
.gva-container:not(:has(.w-e-full-screen-editor)),
|
||||
.gva-container2:not(:has(.w-e-full-screen-editor)) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 隐藏容器包装器（如果不包含全屏编辑器）
|
||||
.container-wrapper:not(:has(.w-e-full-screen-editor)) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 在包含全屏编辑器的容器内，隐藏其他元素
|
||||
.el-form:has(.w-e-full-screen-editor) {
|
||||
// 让表单占满全屏
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 9998 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: #fff !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
// 隐藏 ColumnItem 中不包含全屏编辑器的内容
|
||||
.column-item:has(.w-e-full-screen-editor) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
// 隐藏 ColumnItem 的标题
|
||||
> *:not(.cont) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 让 .cont 占满空间
|
||||
> .cont {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏不包含全屏编辑器的 ColumnItem
|
||||
.column-item:not(:has(.w-e-full-screen-editor)) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 隐藏 el-row 中不包含全屏编辑器的内容
|
||||
.el-row:has(.w-e-full-screen-editor) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
|
||||
// 隐藏其他 el-row
|
||||
& ~ .el-row {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-row:not(:has(.w-e-full-screen-editor)) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// el-col 处理
|
||||
.el-col:has(.w-e-full-screen-editor) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
// el-form-item 处理
|
||||
.el-form-item:has(.w-e-full-screen-editor) {
|
||||
// 隐藏 label
|
||||
.el-form-item__label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 确保 form-item 占满全屏
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
.el-form-item__content {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item:not(:has(.w-e-full-screen-editor)) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 隐藏底部按钮区域
|
||||
.footer-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 确保全屏编辑器正确显示
|
||||
.w-e-full-screen-editor {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 99999 !important;
|
||||
background: #fff !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
// 确保全屏关闭按钮始终可见
|
||||
.fullscreen-close-btn {
|
||||
z-index: 100000 !important;
|
||||
display: flex !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -393,7 +393,13 @@ export const LOGIN_LOG_SEARCH_CONFIG = [
|
||||
prop: 'user_name',
|
||||
label: '用户名称',
|
||||
placeholder: '请输入用户名称',
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'ip',
|
||||
label: '登录IP',
|
||||
placeholder: '请输入登录IP地址',
|
||||
},
|
||||
]
|
||||
|
||||
// 用户登录日志表格配置
|
||||
@@ -537,7 +543,9 @@ export const USER_TABLE_CONFIG = {
|
||||
|
||||
// 文章列表
|
||||
export const ARTICLE_TABLE_CONFIG = {
|
||||
select: true,
|
||||
index: true,
|
||||
rowKey: 'ID',
|
||||
schemes: [
|
||||
{
|
||||
attrs: {
|
||||
|
||||
@@ -33,6 +33,24 @@ const routes = [
|
||||
},
|
||||
component: () => import('@/view/example/upload/scanUpload.vue')
|
||||
},
|
||||
{
|
||||
path: '/ipConfig',
|
||||
name: 'IpConfig',
|
||||
meta: {
|
||||
title: 'IP检测配置',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/view/system/ipConfig.vue')
|
||||
},
|
||||
{
|
||||
path: '/cdkManagement',
|
||||
name: 'CdkManage',
|
||||
meta: {
|
||||
title: '兑换码管理',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/view/cdk/cdkManage.vue')
|
||||
},
|
||||
{
|
||||
path: '/:catchAll(.*)',
|
||||
meta: {
|
||||
|
||||
355
src/view/goods/article/edit.vue.backup
Normal file
355
src/view/goods/article/edit.vue.backup
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="container-wrapper">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
style="margin-top: 0.5rem; "
|
||||
>
|
||||
<ColumnItem title="文章编辑">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入文章标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="分类" prop="categoryId">
|
||||
<el-select v-model="formData.categoryId" placeholder="请选择文章分类" clearable style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in articleCategoryList"
|
||||
:key="item.ID"
|
||||
:label="item.name"
|
||||
:value="item.ID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="讲师" prop="teacherId">
|
||||
<el-input v-model="formData.teacherName" readonly placeholder="点击选择讲师" @click="() => userDialogRef.open()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否免费" prop="isFree">
|
||||
<el-radio-group v-model="formData.isFree">
|
||||
<el-radio :label="1">免费</el-radio>
|
||||
<el-radio :label="0">付费</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" v-if="formData.isFree === 0">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="价格(元)" prop="price">
|
||||
<el-input v-model="formData.price" type="number" placeholder="请输入价格，单位：元" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="封面图片" prop="coverImg">
|
||||
<SelectImage v-model="formData.coverImg" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 文章介绍（放在文章详情上方，使用富文本） -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文章介绍" prop="desc">
|
||||
<RichEdit style="width: 100%" v-model="formData.desc"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文章详情" prop="content">
|
||||
<RichEdit style="width: 100%" v-model="formData.content"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 定时发布选项 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="定时发布">
|
||||
<el-switch
|
||||
v-model="formData.isScheduled"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
@change="handleScheduledChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.isScheduled">
|
||||
<el-form-item label="发布时间" prop="publishTime">
|
||||
<el-date-picker
|
||||
v-model="formData.publishTime"
|
||||
type="datetime"
|
||||
placeholder="选择发布时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:disabled-date="disabledDate"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</ColumnItem>
|
||||
</el-form>
|
||||
<div class="gva-table-box footer-box">
|
||||
<el-button @click="$router.back()">返回</el-button>
|
||||
<el-button type="primary" @click="submit(ruleFormRef)">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选择人员弹窗-->
|
||||
<userChoose
|
||||
ref="userDialogRef"
|
||||
@getRecipientInfo="getStaffInfo"
|
||||
title="讲师人员"
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import SelectImage from '@/components/selectImage/selectImage.vue'
|
||||
import {onMounted, ref, computed } from 'vue'
|
||||
import userChoose from '@/components/userChoose/index.vue'
|
||||
import { useRouter, useRoute} from 'vue-router'
|
||||
import { add, detail, edit } from '@/api/goods/index.js'
|
||||
import { getCategoryList } from '@/api/category/category.js'
|
||||
import ColumnItem from '@/components/columnItem/ColumnItem.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import RichEdit from '@/components/richtext/rich-edit.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const userDialogRef = ref()
|
||||
const isEdit = ref(false)
|
||||
const categoryList = ref([])
|
||||
|
||||
const ruleFormRef = ref(null), formData = ref({
|
||||
isFree: 0, // 默认付费
|
||||
price: 0,
|
||||
isScheduled: false, // 定时发布开关
|
||||
publishTime: '' // 发布时间
|
||||
}), rules = ref({
|
||||
title: [
|
||||
{ required: true, message: '请输入文章标题', trigger: 'blur' }
|
||||
],
|
||||
categoryId: [
|
||||
{ required: true, message: '请选择文章分类', trigger: 'change' }
|
||||
],
|
||||
teacherId: [
|
||||
{ required: true, message: '请选择讲师', trigger: 'blur' }
|
||||
],
|
||||
isFree: [
|
||||
{ required: true, message: '请选择是否免费', trigger: 'change' }
|
||||
],
|
||||
price: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入价格',
|
||||
trigger: 'blur',
|
||||
validator: (rule, value, callback) => {
|
||||
if (formData.value.isFree === 0 && (!value || value <= 0)) {
|
||||
callback(new Error('付费文章请输入大于0的价格'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
coverImg: [
|
||||
{ required: true, message: '请上传封面', trigger: 'blur' }
|
||||
],
|
||||
// 文章介绍改为富文本，也做必填校验
|
||||
desc: [
|
||||
{ required: true, message: '请输入文章介绍', trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入文章内容', trigger: 'blur' }
|
||||
],
|
||||
publishTime: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择发布时间',
|
||||
trigger: 'change',
|
||||
validator: (rule, value, callback) => {
|
||||
if (formData.value.isScheduled && (!value || value === '')) {
|
||||
callback(new Error('启用定时发布时，请选择发布时间'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 计算属性：筛选出文章分类（url字段为空的分类）
|
||||
const articleCategoryList = computed(() => {
|
||||
return categoryList.value.filter(item => !item.url || item.url === '')
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
console.log(route.query.id)
|
||||
getCategoryData()
|
||||
if(route.query.id) {
|
||||
isEdit.value = true
|
||||
getDetail()
|
||||
}
|
||||
})
|
||||
|
||||
// 获取分类数据
|
||||
async function getCategoryData() {
|
||||
try {
|
||||
const res = await getCategoryList()
|
||||
if (res.code === 0) {
|
||||
categoryList.value = res.data.list || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取分类数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
async function getDetail() {
|
||||
const res = await detail(route.query.id)
|
||||
if(res.code === 0) {
|
||||
formData.value = res.data
|
||||
// 如果数据库存储的是分，转换为元显示
|
||||
if (formData.value.price) {
|
||||
formData.value.price = (formData.value.price / 100).toFixed(2)
|
||||
}
|
||||
// 确保isFree字段有值
|
||||
if (formData.value.isFree === undefined || formData.value.isFree === null) {
|
||||
formData.value.isFree = 0
|
||||
}
|
||||
// 处理定时发布字段
|
||||
if (formData.value.publishTime) {
|
||||
formData.value.isScheduled = true
|
||||
} else {
|
||||
formData.value.isScheduled = false
|
||||
formData.value.publishTime = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getStaffInfo(data) {
|
||||
console.log(formData)
|
||||
formData.value.teacherId = data.id
|
||||
formData.value.teacherName = data.nick_name
|
||||
}
|
||||
|
||||
// 处理定时发布开关变化
|
||||
function handleScheduledChange(value) {
|
||||
if (!value) {
|
||||
// 关闭定时发布时，清空发布时间
|
||||
formData.value.publishTime = ''
|
||||
} else {
|
||||
// 开启定时发布时，设置默认发布时间为当前时间
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
const hours = String(now.getHours()).padStart(2, '0')
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0')
|
||||
formData.value.publishTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用过去的日期
|
||||
function disabledDate(time) {
|
||||
return time.getTime() < Date.now() - 8.64e7 // 禁用今天之前的日期
|
||||
}
|
||||
|
||||
function submit(formRef) {
|
||||
if(!formRef) return
|
||||
// 校验
|
||||
formRef.validate(async (valid) => {
|
||||
if(!valid) return
|
||||
let fn = isEdit.value ? edit : add
|
||||
|
||||
// 处理价格字段
|
||||
if (formData.value.isFree === 1) {
|
||||
// 免费文章，价格设为0
|
||||
formData.value.price = 0
|
||||
} else {
|
||||
// 付费文章，价格转为分（数据库存储单位）
|
||||
if (formData.value.price) {
|
||||
formData.value.price = Math.round(Number(formData.value.price) * 100)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理定时发布参数
|
||||
const submitData = { ...formData.value }
|
||||
if (!submitData.isScheduled) {
|
||||
// 如果未启用定时发布，则不传递publishTime参数
|
||||
delete submitData.publishTime
|
||||
}
|
||||
delete submitData.isScheduled // 移除前端使用的开关字段
|
||||
|
||||
const res = await fn(submitData)
|
||||
console.log(res)
|
||||
if(res.code === 0) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: isEdit.value ? '编辑成功' : '添加成功!'
|
||||
})
|
||||
router.back()
|
||||
} else {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: res.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color) !important;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep{
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-form{
|
||||
flex: 1;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
476
src/view/payConfig/index.vue
Normal file
476
src/view/payConfig/index.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="gva-search-box">
|
||||
<el-form :inline="true" :model="searchForm" class="demo-form-inline" @keyup.enter="handleSearch">
|
||||
<el-form-item label="支付名称">
|
||||
<el-input v-model="searchForm.name" placeholder="输入名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付编码">
|
||||
<el-input v-model="searchForm.code" placeholder="输入编码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付类型">
|
||||
<el-select v-model="searchForm.type" placeholder="全部" clearable style="width: 160px">
|
||||
<el-option v-for="opt in typeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态">
|
||||
<el-select v-model="searchForm.enable" placeholder="全部" clearable style="width: 140px">
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="禁用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="gva-table-box">
|
||||
<div class="gva-btn-list">
|
||||
<el-button type="primary" icon="plus" @click="openCreate">新增支付配置</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
v-loading="tableLoading"
|
||||
style="width: 100%"
|
||||
row-key="ID"
|
||||
>
|
||||
<el-table-column prop="ID" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="名称" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="code" label="编码" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="类型" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.type === 'wechat' ? 'success' : 'primary'">
|
||||
{{ formatType(row.type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" width="90" />
|
||||
<el-table-column label="启用" width="110">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.enable"
|
||||
:loading="row._toggleLoading"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
@change="() => handleToggle(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="CreatedAt" label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.CreatedAt) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" min-width="230">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="openDetail(row)">查看</el-button>
|
||||
<el-button link type="primary" icon="edit" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="danger" icon="delete" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="gva-pagination">
|
||||
<el-pagination
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
destroy-on-close
|
||||
v-model="formVisible"
|
||||
:size="appStore.drawerSize"
|
||||
:show-close="false"
|
||||
:before-close="closeForm"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-lg">{{ isEdit ? '编辑支付配置' : '新增支付配置' }}</span>
|
||||
<div>
|
||||
<el-button type="primary" :loading="btnLoading" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="closeForm">取 消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-position="top">
|
||||
<el-form-item label="支付名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="例如：微信支付-主账号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付编码（唯一，创建后不建议修改）" prop="code">
|
||||
<el-input v-model="formData.code" :disabled="isEdit" placeholder="例如：wechat_main" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付类型" prop="type">
|
||||
<el-radio-group v-model="formData.type" @change="handleTypeChange">
|
||||
<el-radio label="shenqi">神奇支付</el-radio>
|
||||
<el-radio label="wechat">微信支付</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="enable">
|
||||
<el-switch v-model="formData.enable" active-text="启用" inactive-text="禁用" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序（越小越靠前，建议10的倍数）" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" :step="1" controls-position="right" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" type="textarea" :rows="2" placeholder="备注说明" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider>神奇支付配置</el-divider>
|
||||
<template v-if="formData.type === 'shenqi'">
|
||||
<el-form-item label="神奇支付商户ID" prop="shenqiPid">
|
||||
<el-input-number v-model="formData.shenqiPid" :min="1" :step="1" controls-position="right" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商户私钥" prop="shenqiPrivateKey">
|
||||
<el-input v-model="formData.shenqiPrivateKey" type="textarea" :rows="4" placeholder="支持Base64或PEM格式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="平台公钥" prop="shenqiPlatformPubKey">
|
||||
<el-input v-model="formData.shenqiPlatformPubKey" type="textarea" :rows="3" placeholder="平台公钥" />
|
||||
</el-form-item>
|
||||
<el-form-item label="异步回调地址" prop="shenqiNotifyUrl">
|
||||
<el-input v-model="formData.shenqiNotifyUrl" placeholder="http://your-domain.com/app_order/shenqi/notify/{code}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="同步跳转地址" prop="shenqiReturnUrl">
|
||||
<el-input v-model="formData.shenqiReturnUrl" placeholder="http://your-domain.com/pay/success" />
|
||||
</el-form-item>
|
||||
<el-form-item label="API基础地址" prop="shenqiBaseUrl">
|
||||
<el-input v-model="formData.shenqiBaseUrl" placeholder="默认：https://www.shenqiyzf.cn" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<el-divider>微信支付配置</el-divider>
|
||||
<template v-if="formData.type === 'wechat'">
|
||||
<el-form-item label="微信AppID" prop="wechatAppId">
|
||||
<el-input v-model="formData.wechatAppId" placeholder="微信开放平台AppID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商户号" prop="wechatMchId">
|
||||
<el-input v-model="formData.wechatMchId" placeholder="微信商户号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="API V3密钥" prop="wechatMchApiV3Key">
|
||||
<el-input v-model="formData.wechatMchApiV3Key" placeholder="32位API V3密钥" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商户私钥" prop="wechatPrivateKey">
|
||||
<el-input v-model="formData.wechatPrivateKey" type="textarea" :rows="4" placeholder="PEM格式私钥" />
|
||||
</el-form-item>
|
||||
<el-form-item label="证书序列号" prop="wechatSerialNo">
|
||||
<el-input v-model="formData.wechatSerialNo" placeholder="证书序列号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="回调地址" prop="wechatNotifyUrl">
|
||||
<el-input v-model="formData.wechatNotifyUrl" placeholder="http://your-domain.com/app_order/notify/{code}" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer destroy-on-close v-model="detailVisible" :size="appStore.drawerSize" title="支付配置详情">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="名称">{{ detailData.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="编码">{{ detailData.code }}</el-descriptions-item>
|
||||
<el-descriptions-item label="类型">{{ formatType(detailData.type) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="启用">{{ detailData.enable ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="排序">{{ detailData.sort ?? '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">{{ detailData.remark || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ formatDate(detailData.CreatedAt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">{{ formatDate(detailData.UpdatedAt) }}</el-descriptions-item>
|
||||
<template v-if="detailData.type === 'shenqi'">
|
||||
<el-descriptions-item label="商户ID">{{ detailData.shenqiPid }}</el-descriptions-item>
|
||||
<el-descriptions-item label="商户私钥">
|
||||
<div class="secret-text">{{ detailData.shenqiPrivateKey || '-' }}</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="平台公钥">
|
||||
<div class="secret-text">{{ detailData.shenqiPlatformPubKey || '-' }}</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="回调地址">{{ detailData.shenqiNotifyUrl || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="跳转地址">{{ detailData.shenqiReturnUrl || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="基础地址">{{ detailData.shenqiBaseUrl || '-' }}</el-descriptions-item>
|
||||
</template>
|
||||
<template v-else-if="detailData.type === 'wechat'">
|
||||
<el-descriptions-item label="AppID">{{ detailData.wechatAppId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="商户号">{{ detailData.wechatMchId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="API V3密钥">{{ detailData.wechatMchApiV3Key || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="商户私钥">
|
||||
<div class="secret-text">{{ detailData.wechatPrivateKey || '-' }}</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="证书序列号">{{ detailData.wechatSerialNo || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="回调地址">{{ detailData.wechatNotifyUrl || '-' }}</el-descriptions-item>
|
||||
</template>
|
||||
</el-descriptions>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { list, detail, createPayConfig, updatePayConfig, removePayConfig, togglePayConfig } from '@/api/payConfig/index.js'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ref, reactive, computed, nextTick } from 'vue'
|
||||
import { formatDate } from '@/utils/format'
|
||||
import { useAppStore } from '@/pinia'
|
||||
|
||||
defineOptions({ name: 'PayConfig' })
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const typeOptions = [
|
||||
{ label: '神奇支付', value: 'shenqi' },
|
||||
{ label: '微信支付', value: 'wechat' }
|
||||
]
|
||||
|
||||
const searchForm = ref({
|
||||
name: '',
|
||||
code: '',
|
||||
type: '',
|
||||
enable: ''
|
||||
})
|
||||
|
||||
const tableData = ref([])
|
||||
const tableLoading = ref(false)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
|
||||
const btnLoading = ref(false)
|
||||
const formVisible = ref(false)
|
||||
const formRef = ref(null)
|
||||
const formType = ref('create')
|
||||
|
||||
const initForm = () => ({
|
||||
ID: undefined,
|
||||
name: '',
|
||||
code: '',
|
||||
type: 'shenqi',
|
||||
enable: false,
|
||||
sort: 10,
|
||||
remark: '',
|
||||
shenqiPid: null,
|
||||
shenqiPrivateKey: '',
|
||||
shenqiPlatformPubKey: '',
|
||||
shenqiNotifyUrl: '',
|
||||
shenqiReturnUrl: '',
|
||||
shenqiBaseUrl: 'https://www.shenqiyzf.cn',
|
||||
wechatAppId: '',
|
||||
wechatMchId: '',
|
||||
wechatMchApiV3Key: '',
|
||||
wechatPrivateKey: '',
|
||||
wechatSerialNo: '',
|
||||
wechatNotifyUrl: ''
|
||||
})
|
||||
|
||||
const formData = ref(initForm())
|
||||
|
||||
const isEdit = computed(() => formType.value === 'update')
|
||||
|
||||
const requiredWhen = (type, message) => ({
|
||||
validator: (_, value, callback) => {
|
||||
if (formData.value.type !== type) return callback()
|
||||
if (value === null || value === undefined || value === '') return callback(new Error(message))
|
||||
callback()
|
||||
},
|
||||
trigger: 'blur'
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入支付名称', trigger: ['blur', 'input'] }],
|
||||
code: [{ required: true, message: '请输入支付编码', trigger: ['blur', 'input'] }],
|
||||
type: [{ required: true, message: '请选择支付类型', trigger: 'change' }],
|
||||
shenqiPid: [requiredWhen('shenqi', '请输入神奇支付商户ID')],
|
||||
shenqiPrivateKey: [requiredWhen('shenqi', '请输入商户私钥')],
|
||||
shenqiPlatformPubKey: [requiredWhen('shenqi', '请输入平台公钥')],
|
||||
shenqiNotifyUrl: [requiredWhen('shenqi', '请输入神奇支付回调地址')],
|
||||
shenqiReturnUrl: [requiredWhen('shenqi', '请输入神奇支付跳转地址')],
|
||||
wechatAppId: [requiredWhen('wechat', '请输入微信AppID')],
|
||||
wechatMchId: [requiredWhen('wechat', '请输入微信商户号')],
|
||||
wechatMchApiV3Key: [requiredWhen('wechat', '请输入API V3密钥')],
|
||||
wechatPrivateKey: [requiredWhen('wechat', '请输入微信商户私钥')],
|
||||
wechatSerialNo: [requiredWhen('wechat', '请输入证书序列号')],
|
||||
wechatNotifyUrl: [requiredWhen('wechat', '请输入微信回调地址')]
|
||||
})
|
||||
|
||||
const formatType = (type) => (type === 'wechat' ? '微信支付' : '神奇支付')
|
||||
|
||||
const fetchList = async () => {
|
||||
tableLoading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
...searchForm.value
|
||||
}
|
||||
const res = await list(params)
|
||||
if (res.code === 0) {
|
||||
tableData.value = (res.data?.list || []).map((item) => ({
|
||||
...item,
|
||||
enable: !!item.enable,
|
||||
_toggleLoading: false
|
||||
}))
|
||||
total.value = res.data?.total || 0
|
||||
page.value = res.data?.page || page.value
|
||||
pageSize.value = res.data?.pageSize || pageSize.value
|
||||
}
|
||||
} finally {
|
||||
tableLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
page.value = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.value = {
|
||||
name: '',
|
||||
code: '',
|
||||
type: '',
|
||||
enable: ''
|
||||
}
|
||||
page.value = 1
|
||||
pageSize.value = 10
|
||||
fetchList()
|
||||
}
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val
|
||||
fetchList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
page.value = val
|
||||
fetchList()
|
||||
}
|
||||
|
||||
const closeForm = () => {
|
||||
formVisible.value = false
|
||||
formRef.value?.resetFields()
|
||||
formData.value = initForm()
|
||||
}
|
||||
|
||||
const handleTypeChange = () => {
|
||||
// 清空另一类型的字段，避免脏数据提交
|
||||
if (formData.value.type === 'shenqi') {
|
||||
formData.value.wechatAppId = ''
|
||||
formData.value.wechatMchId = ''
|
||||
formData.value.wechatMchApiV3Key = ''
|
||||
formData.value.wechatPrivateKey = ''
|
||||
formData.value.wechatSerialNo = ''
|
||||
formData.value.wechatNotifyUrl = ''
|
||||
} else {
|
||||
formData.value.shenqiPid = null
|
||||
formData.value.shenqiPrivateKey = ''
|
||||
formData.value.shenqiPlatformPubKey = ''
|
||||
formData.value.shenqiNotifyUrl = ''
|
||||
formData.value.shenqiReturnUrl = ''
|
||||
formData.value.shenqiBaseUrl = 'https://www.shenqiyzf.cn'
|
||||
}
|
||||
nextTick(() => formRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
const openCreate = () => {
|
||||
formType.value = 'create'
|
||||
formData.value = initForm()
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
const normalizeDetail = (data) => ({
|
||||
...initForm(),
|
||||
...(data || {}),
|
||||
enable: !!data?.enable
|
||||
})
|
||||
|
||||
const openEdit = async (row) => {
|
||||
const res = await detail(row.ID)
|
||||
if (res.code === 0) {
|
||||
formType.value = 'update'
|
||||
formData.value = normalizeDetail(res.data)
|
||||
formVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
btnLoading.value = true
|
||||
try {
|
||||
const payload = { ...formData.value }
|
||||
const api = isEdit.value ? updatePayConfig : createPayConfig
|
||||
const res = await api(payload)
|
||||
if (res.code === 0) {
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
|
||||
closeForm()
|
||||
fetchList()
|
||||
}
|
||||
} finally {
|
||||
btnLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = async (row) => {
|
||||
await ElMessageBox.confirm('确定删除该支付配置吗？', '提示', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
})
|
||||
const res = await removePayConfig(row.ID)
|
||||
if (res.code === 0) {
|
||||
ElMessage.success('删除成功')
|
||||
if (tableData.value.length === 1 && page.value > 1) {
|
||||
page.value--
|
||||
}
|
||||
fetchList()
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggle = async (row) => {
|
||||
const nextVal = row.enable
|
||||
row._toggleLoading = true
|
||||
try {
|
||||
const res = await togglePayConfig({ id: row.ID, enable: nextVal })
|
||||
if (res.code === 0) {
|
||||
ElMessage.success(nextVal ? '已启用' : '已禁用')
|
||||
} else {
|
||||
row.enable = !nextVal
|
||||
ElMessage.error(res.msg || '操作失败')
|
||||
}
|
||||
} catch (e) {
|
||||
row.enable = !nextVal
|
||||
} finally {
|
||||
row._toggleLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref({})
|
||||
|
||||
const openDetail = async (row) => {
|
||||
const res = await detail(row.ID)
|
||||
if (res.code === 0) {
|
||||
detailData.value = normalizeDetail(res.data)
|
||||
detailVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
fetchList()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gva-pagination {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.secret-text {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
358
src/view/system/ipConfig.vue
Normal file
358
src/view/system/ipConfig.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div class="ip-config-container">
|
||||
<div class="config-header">
|
||||
<h2>IP检测配置</h2>
|
||||
<p class="config-desc">配置允许访问的地区IP范围，控制用户访问权限</p>
|
||||
</div>
|
||||
|
||||
<div class="config-content">
|
||||
<!-- 开关控制 -->
|
||||
<el-card class="config-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>IP检测开关</span>
|
||||
<el-switch
|
||||
v-model="configData.status"
|
||||
:loading="statusLoading"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
@change="handleStatusChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="status-info">
|
||||
<el-alert
|
||||
:title="configData.status ? 'IP检测已开启' : 'IP检测已关闭'"
|
||||
:type="configData.status ? 'success' : 'info'"
|
||||
:description="configData.status ? '系统将根据配置的地区限制用户访问' : '系统不会进行IP地区检测'"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 重定向URL配置 -->
|
||||
<el-card class="config-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>重定向URL</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="url-config">
|
||||
<el-form :model="configData" label-width="100px">
|
||||
<el-form-item label="跳转地址" required>
|
||||
<el-input
|
||||
v-model="configData.toUrl"
|
||||
placeholder="请输入重定向URL，如：https://news.qq.com"
|
||||
type="url"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-text type="info" size="small">
|
||||
当用户IP不在允许地区时，将重定向到此URL
|
||||
</el-text>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 地区配置 -->
|
||||
<el-card class="config-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>允许访问地区</span>
|
||||
<el-button type="primary" icon="plus" @click="showAddDialog = true">
|
||||
添加地区
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="region-list">
|
||||
<el-empty v-if="!regionList.length" description="暂无配置地区" />
|
||||
<div v-else class="region-tags">
|
||||
<el-tag
|
||||
v-for="(region, index) in regionList"
|
||||
:key="index"
|
||||
closable
|
||||
type="success"
|
||||
size="large"
|
||||
@close="removeRegion(index)"
|
||||
class="region-tag"
|
||||
>
|
||||
{{ region }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="saveLoading"
|
||||
@click="saveConfig"
|
||||
:disabled="!regionList.length || !configData.toUrl"
|
||||
>
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button @click="resetConfig">重置</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 添加地区对话框 -->
|
||||
<el-dialog
|
||||
v-model="showAddDialog"
|
||||
title="添加允许访问地区"
|
||||
width="400px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model="addForm" label-width="80px">
|
||||
<el-form-item label="地区名称" required>
|
||||
<el-input
|
||||
v-model="addForm.region"
|
||||
placeholder="请输入地区名称，如：北京、上海、广东"
|
||||
maxlength="20"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="showAddDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="addRegion" :disabled="!addForm.region.trim()">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getIpCon, setIpCon, setIpStatus } from '@/api/user/index.js'
|
||||
|
||||
// 响应式数据
|
||||
const configData = ref({
|
||||
ID: null,
|
||||
status: false,
|
||||
toUrl: '',
|
||||
addrs: ''
|
||||
})
|
||||
const statusLoading = ref(false)
|
||||
const regionList = ref([])
|
||||
const saveLoading = ref(false)
|
||||
const showAddDialog = ref(false)
|
||||
const addForm = ref({ region: '' })
|
||||
|
||||
// 获取IP检测配置
|
||||
async function getIpDetectionConfig() {
|
||||
try {
|
||||
const res = await getIpCon()
|
||||
if (res.code === 0) {
|
||||
const data = res.data
|
||||
configData.value = {
|
||||
ID: data.ID,
|
||||
status: data.status,
|
||||
toUrl: data.toUrl || '',
|
||||
addrs: data.addrs || ''
|
||||
}
|
||||
// 解析地区字符串为数组
|
||||
regionList.value = data.addrs ? data.addrs.split(',').filter(addr => addr.trim()) : []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取IP检测配置失败:', error)
|
||||
ElMessage.error('获取IP检测配置失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 切换IP检测状态
|
||||
async function handleStatusChange(value) {
|
||||
statusLoading.value = true
|
||||
try {
|
||||
const res = await setIpStatus({ status: value })
|
||||
if (res.code === 0) {
|
||||
ElMessage.success(value ? 'IP检测已开启' : 'IP检测已关闭')
|
||||
configData.value.status = value
|
||||
} else {
|
||||
ElMessage.error(res.msg || '状态更新失败')
|
||||
configData.value.status = !value // 恢复原状态
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('状态更新失败')
|
||||
configData.value.status = !value // 恢复原状态
|
||||
} finally {
|
||||
statusLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 添加地区
|
||||
function addRegion() {
|
||||
const region = addForm.value.region.trim()
|
||||
if (!region) {
|
||||
ElMessage.warning('请输入地区名称')
|
||||
return
|
||||
}
|
||||
|
||||
if (regionList.value.includes(region)) {
|
||||
ElMessage.warning('该地区已存在')
|
||||
return
|
||||
}
|
||||
|
||||
regionList.value.push(region)
|
||||
addForm.value.region = ''
|
||||
showAddDialog.value = false
|
||||
ElMessage.success('地区添加成功')
|
||||
}
|
||||
|
||||
// 删除地区
|
||||
function removeRegion(index) {
|
||||
ElMessageBox.confirm('确定要删除该地区吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
regionList.value.splice(index, 1)
|
||||
ElMessage.success('地区删除成功')
|
||||
}).catch(() => {
|
||||
// 用户取消删除
|
||||
})
|
||||
}
|
||||
|
||||
// 保存完整配置
|
||||
async function saveConfig() {
|
||||
if (!regionList.value.length) {
|
||||
ElMessage.warning('请至少添加一个地区')
|
||||
return
|
||||
}
|
||||
|
||||
if (!configData.value.toUrl.trim()) {
|
||||
ElMessage.warning('请输入重定向URL')
|
||||
return
|
||||
}
|
||||
|
||||
saveLoading.value = true
|
||||
try {
|
||||
const saveData = {
|
||||
ID: configData.value.ID,
|
||||
status: configData.value.status,
|
||||
toUrl: configData.value.toUrl.trim(),
|
||||
addrs: regionList.value.join(',')
|
||||
}
|
||||
|
||||
const res = await setIpCon(saveData)
|
||||
if (res.code === 0) {
|
||||
ElMessage.success('配置保存成功')
|
||||
// 更新本地配置数据
|
||||
if (res.data && res.data.ID) {
|
||||
configData.value.ID = res.data.ID
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.msg || '保存失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('保存失败')
|
||||
} finally {
|
||||
saveLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置配置
|
||||
function resetConfig() {
|
||||
ElMessageBox.confirm('确定要重置所有配置吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
regionList.value = []
|
||||
configData.value.toUrl = ''
|
||||
ElMessage.success('配置已重置')
|
||||
}).catch(() => {
|
||||
// 用户取消重置
|
||||
})
|
||||
}
|
||||
|
||||
// 页面初始化
|
||||
onMounted(() => {
|
||||
getIpDetectionConfig()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ip-config-container {
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.config-desc {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.config-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.config-card {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.url-config {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.region-list {
|
||||
margin: 16px 0;
|
||||
min-height: 60px;
|
||||
|
||||
.region-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.region-tag {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
:deep(.el-alert) {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user