yunzerwebsite/yunzerwebsiteallinone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加通知模块

Browse Source
This commit is contained in:
扫地僧 2026-06-17 21:44:08 +08:00
parent 4e1b30b3cc
commit d3886e2475
9 changed files with 1569 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
platform/components.d.ts vendored
View File

@ -18,7 +18,6 @@ declare module 'vue' {
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBacktop: typeof import('element-plus/es')['ElBacktop']
ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElCard: typeof import('element-plus/es')['ElCard']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
@ -40,7 +39,6 @@ declare module 'vue' {
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
@ -56,6 +54,7 @@ declare module 'vue' {
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']

53
platform/src/api/reminder.js Normal file
View File

@ -0,0 +1,53 @@
import request from "@/utils/request";
/** 提醒列表 */
export function getReminderList(params) {
return request({
url: "/platform/reminder/list",
method: "get",
params,
});
}
/** 提醒详情 */
export function getReminderDetail(id) {
return request({
url: `/platform/reminder/${id}`,
method: "get",
});
}
/** 新增提醒 */
export function createReminder(data) {
return request({
url: "/platform/reminder",
method: "post",
data,
});
}
/** 更新提醒 */
export function updateReminder(id, data) {
return request({
url: `/platform/reminder/${id}`,
method: "post",
data,
});
}
/** 删除提醒 */
export function deleteReminder(id) {
return request({
url: `/platform/reminder/${id}`,
method: "delete",
});
}
/** 批量删除提醒 */
export function batchDeleteReminder(ids) {
return request({
url: "/platform/reminder/batchDelete",
method: "post",
data: { ids },
});
}

765
platform/src/views/system/platformsettings/components/notificationSettings.vue Normal file
View File

@ -0,0 +1,765 @@
<template>
<div class="notification-settings">
<div class="settings-content">
<el-tabs v-model="activeSubTab" tab-position="left" class="sub-tabs-container">
<!-- 邮箱 -->
<el-tab-pane name="email">
<template #label>
<span class="tab-label-item">
<el-icon><Message /></el-icon>
<span>邮箱配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>邮箱通知配置</span>
</div>
</template>
<el-form :model="formData.email" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.email.enabled" />
</el-form-item>
<el-form-item label="发件人邮箱" required>
<el-input v-model="formData.email.fromAddress" placeholder="例如：noreply@example.com" clearable />
</el-form-item>
<el-form-item label="发件人名称">
<el-input v-model="formData.email.fromName" placeholder="例如：官方网站" clearable />
</el-form-item>
<el-form-item label="SMTP 服务器" required>
<el-input v-model="formData.email.host" placeholder="例如：smtp.qq.com" clearable />
</el-form-item>
<el-form-item label="SMTP 端口" required>
<el-input v-model="formData.email.port" placeholder="例如：465 或 587" clearable />
</el-form-item>
<el-form-item label="授权码/密码" required>
<el-input v-model="formData.email.password" type="password" show-password placeholder="邮箱授权码或登录密码" clearable />
</el-form-item>
<el-form-item label="加密方式">
<el-radio-group v-model="formData.email.encryption">
<el-radio label="ssl">SSL</el-radio>
<el-radio label="tls">TLS</el-radio>
<el-radio label="none">无加密</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="超时时间(秒)">
<el-input-number v-model="formData.email.timeout" :min="1" :max="300" controls-position="right" />
</el-form-item>
<el-form-item label="测试收件邮箱">
<el-input v-model="formData.email.testEmail" placeholder="输入邮箱地址用于测试发信" clearable />
<div style="margin-top: 8px;">
<el-button type="success" plain size="small" :loading="emailTestLoading" @click="handleSendEmailTest">
发送测试邮件
</el-button>
</div>
</el-form-item>
</el-form>
</el-card>
</div>
</el-tab-pane>
<!-- 短信 -->
<el-tab-pane name="sms">
<template #label>
<span class="tab-label-item">
<el-icon><Cellphone /></el-icon>
<span>短信配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>短信配置</span>
</div>
</template>
<el-form :model="formData.sms" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.sms.enabled" />
</el-form-item>
<el-form-item label="服务商">
<el-radio-group v-model="formData.sms.provider">
<el-radio label="aliyun">阿里云短信</el-radio>
<el-radio label="tencent">腾讯云短信</el-radio>
<el-radio label="custom">自定义</el-radio>
</el-radio-group>
</el-form-item>
<!-- 阿里云/腾讯云服务商配置 -->
<template v-if="formData.sms.provider !== 'custom'">
<el-form-item label="AccessKey ID">
<el-input v-model="formData.sms.access_key" placeholder="请输入 AccessKey ID" />
</el-form-item>
<el-form-item label="AccessKey Secret">
<el-input v-model="formData.sms.secret_key" type="password" show-password placeholder="请输入 AccessKey Secret" />
</el-form-item>
<el-form-item label="短信签名">
<el-input v-model="formData.sms.sign_name" placeholder="例如：云泽科技" />
</el-form-item>
<el-form-item label="短信模板 Code">
<el-input v-model="formData.sms.template_code" placeholder="例如：SMS_200300400" />
</el-form-item>
</template>
<!-- 自定义网关配置 -->
<template v-else>
<el-divider content-position="left">自定义短信网关</el-divider>
<el-form-item label="短信网关地址" required>
<el-input
v-model="formData.sms.backendUrl"
placeholder="例如：https://yzsms.yunzer.cn"
clearable
/>
</el-form-item>
<el-form-item label="短信API KEY" required>
<el-input
v-model="formData.sms.apiKey"
placeholder="请输入 API_KEY"
clearable
/>
</el-form-item>
<el-form-item label="测试手机号">
<el-input
v-model="formData.sms.testPhone"
placeholder="国际格式号码，例如 +8613712345678"
clearable
/>
<div style="margin-top: 8px;">
<el-button type="success" plain size="small" :loading="testLoading" @click="handleSendTest">
发送测试短信
</el-button>
</div>
</el-form-item>
</template>
</el-form>
</el-card>
</div>
</el-tab-pane>
<!-- 站内信配置 -->
<el-tab-pane name="sitemsg">
<template #label>
<span class="tab-label-item">
<el-icon><Bell /></el-icon>
<span>站内信配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>站内信通知配置</span>
</div>
</template>
<el-form :model="formData.sitemsg" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.sitemsg.enabled" />
</el-form-item>
<el-form-item label="保留天数">
<el-input-number v-model="formData.sitemsg.retention_days" :min="1" :max="365" controls-position="right" />
<span class="form-tip-inline">天（过期消息将自动清理）</span>
</el-form-item>
<el-form-item label="自动标记已读">
<el-switch v-model="formData.sitemsg.auto_read" />
<div class="form-tip">用户打开消息中心列表时是否自动将所有消息标记为已读</div>
</el-form-item>
</el-form>
</el-card>
</div>
</el-tab-pane>
<!-- 钉钉配置 -->
<el-tab-pane name="dingtalk">
<template #label>
<span class="tab-label-item">
<el-icon><ChatDotSquare /></el-icon>
<span>钉钉配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>钉钉群机器人配置</span>
</div>
</template>
<el-form :model="formData.dingtalk" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.dingtalk.enabled" />
</el-form-item>
<el-form-item label="Webhook 地址">
<el-input v-model="formData.dingtalk.webhook_url" type="textarea" :rows="3" placeholder="请输入钉钉机器人的 Webhook 地址 (https://oapi.dingtalk.com/robot/send?access_token=...)" />
</el-form-item>
<el-form-item label="加签密钥">
<el-input v-model="formData.dingtalk.secret" type="password" show-password placeholder="请输入安全配置中加签的密钥（可选）" />
<div class="form-tip">如果机器人的安全配置开启了“加签”，请在此处填写对应的秘钥</div>
</el-form-item>
</el-form>
</el-card>
</div>
</el-tab-pane>
<!-- Webhook配置 -->
<el-tab-pane name="WebHook配置">
<template #label>
<span class="tab-label-item">
<el-icon><Connection /></el-icon>
<span>WebHook配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>HTTP Webhook 配置</span>
</div>
</template>
<el-form :model="formData.webhook" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.webhook.enabled" />
</el-form-item>
<el-form-item label="推送 URL">
<el-input v-model="formData.webhook.url" type="textarea" :rows="2" placeholder="请输入通知推送的 Webhook 目标 URL" />
</el-form-item>
<el-form-item label="请求方式">
<el-select v-model="formData.webhook.method" style="width: 120px">
<el-option label="POST" value="POST" />
<el-option label="GET" value="GET" />
</el-select>
</el-form-item>
<el-form-item label="签名密钥 (Token)">
<el-input v-model="formData.webhook.token" type="password" show-password placeholder="请输入用于验证的 Token 密钥" />
<div class="form-tip">该 Token 将被包含在请求 Header 的 X-Webhook-Token 中以供接收方校验</div>
</el-form-item>
</el-form>
</el-card>
</div>
</el-tab-pane>
<!-- 飞书配置 -->
<el-tab-pane name="feishu">
<template #label>
<span class="tab-label-item">
<el-icon><Coordinate /></el-icon>
<span>飞书配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>飞书机器人配置</span>
</div>
</template>
<el-form :model="formData.feishu" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.feishu.enabled" />
</el-form-item>
<el-form-item label="Webhook 地址">
<el-input v-model="formData.feishu.webhook_url" type="textarea" :rows="3" placeholder="请输入飞书机器人的 Webhook 地址 (https://open.feishu.cn/open-apis/bot/v2/hook/...)" />
</el-form-item>
<el-form-item label="加签密钥">
<el-input v-model="formData.feishu.secret" type="password" show-password placeholder="请输入安全配置中加签的密钥（可选）" />
</el-form-item>
</el-form>
</el-card>
</div>
</el-tab-pane>
<!-- Bark配置 -->
<el-tab-pane name="Bark配置">
<template #label>
<span class="tab-label-item">
<el-icon><ChatRound /></el-icon>
<span>Bark配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>Bark 推送配置</span>
</div>
</template>
<el-form :model="formData.bark" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.bark.enabled" />
</el-form-item>
<el-form-item label="推送服务器">
<el-input v-model="formData.bark.server_url" placeholder="默认官方服务：https://api.day.app" />
<div class="form-tip">支持自建 Bark 服务，如：https://bark.yourdomain.com</div>
</el-form-item>
<el-form-item label="设备 Key">
<el-input v-model="formData.bark.device_key" placeholder="请输入您的 Bark Device Key" />
</el-form-item>
</el-form>
</el-card>
</div>
</el-tab-pane>
<!-- 微信配置 -->
<el-tab-pane name="wechat">
<template #label>
<span class="tab-label-item">
<el-icon><ChatDotRound /></el-icon>
<span>微信配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>微信公众号/企业微信推送</span>
</div>
</template>
<el-form :model="formData.wechat" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.wechat.enabled" />
</el-form-item>
<el-form-item label="AppID / CorpID">
<el-input v-model="formData.wechat.app_id" placeholder="请输入公众号 AppID 或企业微信 CorpID" />
</el-form-item>
<el-form-item label="AppSecret / Secret">
<el-input v-model="formData.wechat.app_secret" type="password" show-password placeholder="请输入 AppSecret" />
</el-form-item>
<el-form-item label="模版ID / AgentID">
<el-input v-model="formData.wechat.template_id" placeholder="请输入模版消息 ID 或企业微信应用 AgentID" />
</el-form-item>
</el-form>
</el-card>
</div>
</el-tab-pane>
<!-- Telegram配置 -->
<el-tab-pane name="Telegram配置">
<template #label>
<span class="tab-label-item">
<el-icon><Promotion /></el-icon>
<span>Telegram配置</span>
</span>
</template>
<div class="tab-pane-content">
<el-card shadow="never" class="settings-card">
<template #header>
<div class="card-header">
<span>Telegram Bot 推送</span>
</div>
</template>
<el-form :model="formData.telegram" label-width="140px" label-position="right">
<el-form-item label="启用状态">
<el-switch v-model="formData.telegram.enabled" />
</el-form-item>
<el-form-item label="Bot Token">
<el-input v-model="formData.telegram.bot_token" type="password" show-password placeholder="例如：123456789:ABCdefGhIJKlmNoPQRsTUVwxyZ" />
</el-form-item>
<el-form-item label="Chat ID">
<el-input v-model="formData.telegram.chat_id" placeholder="例如：123456789 或 @my_channel" />
<div class="form-tip">支持个人 Chat ID、群组 ID (通常为负数) 或公开频道 Username</div>
</el-form-item>
</el-form>
</el-card>
</div>
</el-tab-pane>
</el-tabs>
</div>
<!-- 底部操作按钮 -->
<div class="footer-actions">
<el-button @click="handleReset">重置</el-button>
<el-button type="primary" :loading="submitting" @click="handleSubmit">
保存配置
</el-button>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import {
Message,
Cellphone,
Bell,
ChatDotSquare,
Connection,
Coordinate,
ChatRound,
ChatDotRound,
Promotion
} from "@element-plus/icons-vue";
import { getSmsInfo, editSmsInfo, sendTestSms } from "@/api/sms";
import { getEmailInfo, editEmailInfo, sendTestEmail } from "@/api/email";
const STORAGE_KEY = "notification_settings_draft";
const activeSubTab = ref("email");
const submitting = ref(false);
const formData = reactive({
email: {
enabled: false,
fromAddress: "",
fromName: "",
host: "",
port: "",
password: "",
encryption: "ssl",
timeout: 30,
testEmail: "",
},
sms: {
enabled: false,
provider: "aliyun",
access_key: "",
secret_key: "",
sign_name: "",
template_code: "",
backendUrl: "",
apiKey: "",
testPhone: "",
},
sitemsg: {
enabled: false,
retention_days: 30,
auto_read: false,
},
dingtalk: {
enabled: false,
webhook_url: "",
secret: "",
},
webhook: {
enabled: false,
url: "",
method: "POST",
token: "",
},
feishu: {
enabled: false,
webhook_url: "",
secret: "",
},
bark: {
enabled: false,
server_url: "https://api.day.app",
device_key: "",
},
wechat: {
enabled: false,
app_id: "",
app_secret: "",
template_id: "",
},
telegram: {
enabled: false,
bot_token: "",
chat_id: "",
}
});
const testLoading = ref(false);
const emailTestLoading = ref(false);
const loadDraft = () => {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return;
try {
const data = JSON.parse(raw);
for (const key in data) {
if (formData[key] && typeof data[key] === 'object') {
Object.assign(formData[key], data[key]);
}
}
} catch (e) {
console.error("加载本地通知配置失败", e);
}
};
const loadEmailConfig = async () => {
try {
const res = await getEmailInfo();
if (res.code === 200 && Array.isArray(res.data) && res.data.length > 0) {
const item = res.data[0];
formData.email.fromAddress = item.from_address || "";
formData.email.fromName = item.from_name || "";
formData.email.host = item.host || "";
formData.email.port = item.port != null ? String(item.port) : "";
formData.email.password = item.password || "";
formData.email.encryption = item.encryption || "ssl";
formData.email.timeout = item.timeout != null ? item.timeout : 30;
formData.email.enabled = Number(item.enabled ?? 0) === 1;
}
} catch (error) {
console.error("加载邮箱配置失败:", error);
}
};
const loadSmsConfig = async () => {
try {
const res = await getSmsInfo();
if (res.code === 200 && Array.isArray(res.data) && res.data.length > 0) {
const item = res.data[0];
formData.sms.backendUrl = item.backend_url || item.backendUrl || "";
formData.sms.apiKey = item.api_key || item.apiKey || "";
}
} catch (error) {
console.error("加载自定义短信配置失败:", error);
}
};
const saveDraft = () => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(formData));
};
const handleReset = () => {
const defaults = {
email: { enabled: false, fromAddress: "", fromName: "", host: "", port: "", password: "", encryption: "ssl", timeout: 30, testEmail: "" },
sms: { enabled: false, provider: "aliyun", access_key: "", secret_key: "", sign_name: "", template_code: "", backendUrl: "", apiKey: "", testPhone: "" },
sitemsg: { enabled: false, retention_days: 30, auto_read: false },
dingtalk: { enabled: false, webhook_url: "", secret: "" },
webhook: { enabled: false, url: "", method: "POST", token: "" },
feishu: { enabled: false, webhook_url: "", secret: "" },
bark: { enabled: false, server_url: "https://api.day.app", device_key: "" },
wechat: { enabled: false, app_id: "", app_secret: "", template_id: "" },
telegram: { enabled: false, bot_token: "", chat_id: "" },
};
const currentTab = activeSubTab.value;
Object.assign(formData[currentTab], defaults[currentTab]);
saveDraft();
ElMessage.success("已重置当前配置");
};
const handleSendEmailTest = async () => {
if (!formData.email.testEmail) {
ElMessage.warning("请先输入测试收件邮箱");
return;
}
try {
emailTestLoading.value = true;
const payload = {
fromAddress: formData.email.fromAddress,
fromName: formData.email.fromName,
host: formData.email.host,
port: formData.email.port,
password: formData.email.password,
encryption: formData.email.encryption,
timeout: formData.email.timeout,
testEmail: formData.email.testEmail
};
const res = await sendTestEmail(payload);
if (res.code === 200) {
ElMessage.success("测试邮件发送成功");
} else {
ElMessage.error(res.msg || "测试邮件发送失败，请稍后重试");
}
} catch (error) {
ElMessage.error(error?.message || "测试邮件发送失败，请稍后重试");
} finally {
emailTestLoading.value = false;
}
};
const handleSendTest = async () => {
const phone = (formData.sms.testPhone || "").trim();
if (!phone) {
ElMessage.warning("请先输入测试收件手机号");
return;
}
if (!/^\+\d{6,15}$/.test(phone)) {
ElMessage.warning("请使用国际格式号码（以 + 开头，后面为数字）");
return;
}
try {
testLoading.value = true;
const res = await sendTestSms({
backendUrl: formData.sms.backendUrl,
apiKey: formData.sms.apiKey,
phone
});
if (res.code === 200) {
ElMessage.success(res.msg || "短信测试任务入队成功");
} else {
ElMessage.error(res.msg || "短信测试失败，请稍后重试");
}
} catch (e) {
ElMessage.error(e?.message || "短信测试失败，请稍后重试");
} finally {
testLoading.value = false;
}
};
const handleSubmit = async () => {
submitting.value = true;
try {
if (activeSubTab.value === 'email') {
if (!formData.email.fromAddress || !formData.email.host || !formData.email.port) {
ElMessage.error("发件人邮箱、SMTP 服务器和 SMTP 端口不能为空");
submitting.value = false;
return;
}
const res = await editEmailInfo({
fromAddress: formData.email.fromAddress,
fromName: formData.email.fromName,
host: formData.email.host,
port: formData.email.port,
password: formData.email.password,
encryption: formData.email.encryption,
timeout: formData.email.timeout,
enabled: formData.email.enabled ? 1 : 0
});
if (res.code === 200) {
ElMessage.success("邮箱配置保存成功");
} else {
throw new Error(res.msg || "保存邮箱配置失败");
}
} else if (activeSubTab.value === 'sms' && formData.sms.provider === 'custom') {
if (!formData.sms.backendUrl || !formData.sms.apiKey) {
ElMessage.error("自定义短信网关地址和API KEY不能为空");
submitting.value = false;
return;
}
const res = await editSmsInfo({
backendUrl: formData.sms.backendUrl,
apiKey: formData.sms.apiKey
});
if (res.code === 200) {
ElMessage.success("自定义短信网关配置保存成功");
} else {
throw new Error(res.msg || "保存自定义短信配置失败");
}
}
saveDraft();
ElMessage.success("保存配置成功");
} catch (e) {
ElMessage.error(e?.message || "保存配置失败");
} finally {
submitting.value = false;
}
};
onMounted(() => {
loadDraft();
loadSmsConfig();
loadEmailConfig();
});
</script>
<style scoped>
.notification-settings {
display: flex;
flex-direction: column;
gap: 20px;
}
.settings-content {
background-color: var(--el-bg-color-overlay);
border: 1px solid var(--el-border-color-light);
border-radius: 8px;
overflow: hidden;
}
.sub-tabs-container {
/* height: 520px; */
}
/* Make tabs look extra sleek */
:deep(.el-tabs--left .el-tabs__header.is-left) {
margin-right: 0;
border-right: 1px solid var(--el-border-color-light);
background-color: var(--el-fill-color-blank);
width: 180px;
}
:deep(.el-tabs--left .el-tabs__nav-wrap.is-left) {
padding-top: 10px;
padding-bottom: 10px;
}
:deep(.el-tabs__item) {
height: 44px;
line-height: 44px;
font-weight: 500;
padding: 0 20px !important;
color: var(--el-text-color-regular);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
:deep(.el-tabs__item:hover) {
color: var(--el-color-primary);
background-color: var(--el-fill-color-light);
}
:deep(.el-tabs__item.is-active) {
color: var(--el-color-primary);
background-color: var(--el-color-primary-light-9);
font-weight: 600;
}
:deep(.el-tabs__active-bar) {
width: 3px !important;
}
.tab-label-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.tab-label-item .el-icon {
font-size: 16px;
}
.tab-pane-content {
padding: 24px;
height: 100%;
box-sizing: border-box;
overflow-y: auto;
}
.settings-card {
border: none;
}
:deep(.el-card__header) {
padding: 0 0 16px 0;
border-bottom: 1px dashed var(--el-border-color-light);
margin-bottom: 20px;
}
.card-header {
font-weight: 600;
font-size: 16px;
color: var(--el-text-color-primary);
display: flex;
align-items: center;
}
.form-tip {
font-size: 12px;
color: var(--el-text-color-secondary);
margin-top: 4px;
line-height: 1.5;
}
.form-tip-inline {
font-size: 12px;
color: var(--el-text-color-secondary);
margin-left: 12px;
}
.footer-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 10px 0;
}
</style>

9
platform/src/views/system/platformsettings/index.vue
View File

@ -23,6 +23,14 @@
v-if="activeTab === 'storage'"
/>
</el-tab-pane>
<!-- 通知配置 -->
<el-tab-pane label="通知配置" name="notification">
<notificationSettings
ref="notificationSettingsRef"
v-if="activeTab === 'notification'"
/>
</el-tab-pane>
</el-tabs>
</div>
</div>
@ -32,6 +40,7 @@
import { ref } from "vue";
import platformSettings from "./components/platformSettings.vue";
import storageSettings from "./components/storageSettings.vue";
import notificationSettings from "./components/notificationSettings.vue";
const activeTab = ref("platform");
</script>

3
platform/src/views/tools/notebook/components/index.vue
View File

@ -0,0 +1,3 @@
<template>
<div>Notebook Component</div>
</template>

148
platform/src/views/tools/notebook/test-api.js
View File

@ -1,148 +0,0 @@
/**
* 记事本模块 API 测试脚本
* 在浏览器控制台中运行此脚本测试 API
*/
// 测试配置
const API_BASE = '/platform/notebook';
// 辅助函数：发送请求
async function request(url, options = {}) {
const token = localStorage.getItem('token');
const headers = {
'Content-Type': 'application/json',
'Authorization': token ? `Bearer ${token}` : '',
...options.headers,
};
try {
const response = await fetch(url, { ...options, headers });
const data = await response.json();
console.log(`✅ ${options.method || 'GET'} ${url}`, data);
return data;
} catch (error) {
console.error(`❌ ${options.method || 'GET'} ${url}`, error);
throw error;
}
}
// 测试函数
const NotebookTest = {
// 1. 创建笔记
async create() {
return await request(`${API_BASE}/create`, {
method: 'POST',
body: JSON.stringify({
title: '测试笔记 - ' + new Date().toLocaleString(),
content: '<p>这是一条测试笔记</p><p>内容包含<strong>富文本</strong>格式</p>',
}),
});
},
// 2. 获取笔记列表
async list(params = {}) {
const query = new URLSearchParams({
page: params.page || 1,
pageSize: params.pageSize || 20,
keyword: params.keyword || '',
}).toString();
return await request(`${API_BASE}/list?${query}`);
},
// 3. 获取笔记详情
async detail(id) {
return await request(`${API_BASE}/detail/${id}`);
},
// 4. 更新笔记
async update(id, data) {
return await request(`${API_BASE}/update/${id}`, {
method: 'POST',
body: JSON.stringify(data),
});
},
// 5. 删除笔记
async delete(id) {
return await request(`${API_BASE}/delete/${id}`, {
method: 'DELETE',
});
},
// 完整测试流程
async runFullTest() {
console.log('🚀 开始测试记事本模块 API...\n');
try {
// 1. 创建笔记
console.log('📝 测试1: 创建笔记');
const createResult = await this.create();
if (createResult.code !== 200) {
throw new Error('创建笔记失败');
}
const noteId = createResult.data.id;
console.log(`✅ 创建成功，笔记ID: ${noteId}\n`);
// 2. 获取笔记列表
console.log('📋 测试2: 获取笔记列表');
const listResult = await this.list();
if (listResult.code !== 200) {
throw new Error('获取列表失败');
}
console.log(`✅ 获取成功，共 ${listResult.data.total} 条笔记\n`);
// 3. 获取笔记详情
console.log('🔍 测试3: 获取笔记详情');
const detailResult = await this.detail(noteId);
if (detailResult.code !== 200) {
throw new Error('获取详情失败');
}
console.log(`✅ 获取成功，标题: ${detailResult.data.title}\n`);
// 4. 更新笔记
console.log('✏️ 测试4: 更新笔记');
const updateResult = await this.update(noteId, {
title: '更新后的标题 - ' + new Date().toLocaleString(),
content: '<p>这是更新后的内容</p>',
});
if (updateResult.code !== 200) {
throw new Error('更新笔记失败');
}
console.log(`✅ 更新成功\n`);
// 5. 搜索笔记
console.log('🔎 测试5: 搜索笔记');
const searchResult = await this.list({ keyword: '更新' });
if (searchResult.code !== 200) {
throw new Error('搜索失败');
}
console.log(`✅ 搜索成功，找到 ${searchResult.data.total} 条匹配笔记\n`);
// 6. 删除笔记
console.log('🗑️ 测试6: 删除笔记');
const deleteResult = await this.delete(noteId);
if (deleteResult.code !== 200) {
throw new Error('删除笔记失败');
}
console.log(`✅ 删除成功\n`);
console.log('🎉 所有测试通过！');
return true;
} catch (error) {
console.error('❌ 测试失败:', error);
return false;
}
},
};
// 导出到全局
window.NotebookTest = NotebookTest;
console.log('📚 记事本模块测试工具已加载');
console.log('使用方法:');
console.log(' NotebookTest.create() - 创建笔记');
console.log(' NotebookTest.list() - 获取列表');
console.log(' NotebookTest.detail(id) - 获取详情');
console.log(' NotebookTest.update(id, data) - 更新笔记');
console.log(' NotebookTest.delete(id) - 删除笔记');
console.log(' NotebookTest.runFullTest() - 运行完整测试');

148
platform/src/views/tools/reminder/components/detail.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<el-drawer v-model="visible" title="提醒详情" size="520px" destroy-on-close>
<div v-if="detail" class="detail-wrap" v-loading="loading">
<el-descriptions :column="2" border>
<el-descriptions-item label="ID" label-width="110px">
{{ detail.id }}
</el-descriptions-item>
<el-descriptions-item label="状态" label-width="110px">
<el-tag :type="detail.status === 1 ? 'success' : 'info'" size="small">
{{ detail.status === 1 ? '启用' : '禁用' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="标题" :span="2" label-width="110px">
{{ detail.title }}
</el-descriptions-item>
<el-descriptions-item label="类型" label-width="110px">
<el-tag :type="typeTagType(detail.type)" size="small">
{{ typeText(detail.type) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="接收范围" label-width="110px">
<el-tag type="info" size="small">{{ targetTypeText(detail.targetType) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item
v-if="[2, 3].includes(detail.targetType)"
label="接收 ID"
:span="2"
label-width="110px"
>
{{ detail.targetIds || '—' }}
</el-descriptions-item>
<el-descriptions-item label="提醒时间" label-width="110px">
{{ detail.remindTime || '—' }}
</el-descriptions-item>
<el-descriptions-item label="是否重复" label-width="110px">
<el-tag :type="detail.isRepeat === 1 ? 'warning' : 'info'" size="small">
{{ detail.isRepeat === 1 ? '是' : '否' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
v-if="detail.isRepeat === 1"
label="重复周期"
label-width="110px"
>
{{ repeatCycleText(detail.repeatCycle) }}
</el-descriptions-item>
<el-descriptions-item label="内容" :span="2" label-width="110px">
<div class="content-text">{{ detail.content || '—' }}</div>
</el-descriptions-item>
<el-descriptions-item v-if="detail.remark" label="备注" :span="2" label-width="110px">
<div class="content-text">{{ detail.remark }}</div>
</el-descriptions-item>
<el-descriptions-item label="创建时间" label-width="110px">
{{ detail.createTime || '—' }}
</el-descriptions-item>
<el-descriptions-item label="更新时间" label-width="110px">
{{ detail.updateTime || '—' }}
</el-descriptions-item>
</el-descriptions>
</div>
<div v-else-if="loading" class="empty-wrap">
<el-skeleton :rows="8" animated />
</div>
<div v-else class="empty-wrap">
<el-empty description="暂无数据" />
</div>
<template #footer>
<el-button @click="visible = false">关闭</el-button>
</template>
</el-drawer>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getReminderDetail } from '@/api/reminder'
const visible = ref(false)
const loading = ref(false)
const detail = ref(null)
function typeText(type) {
const map = { 1: '系统通知', 2: '待办提醒', 3: '活动提醒', 4: '自定义' }
return map[type] ?? '未知'
}
function typeTagType(type) {
const map = { 1: 'primary', 2: 'warning', 3: 'success', 4: '' }
return map[type] ?? 'info'
}
function targetTypeText(targetType) {
const map = { 1: '全体用户', 2: '指定用户', 3: '指定角色', 4: '仅管理员' }
return map[targetType] ?? '—'
}
function repeatCycleText(cycle) {
const map = { daily: '每天', weekly: '每周', monthly: '每月' }
return map[cycle] ?? cycle ?? '—'
}
async function open(id) {
detail.value = null
visible.value = true
loading.value = true
try {
const res = await getReminderDetail(id)
if (res?.code === 200 && res.data) {
detail.value = res.data
} else {
ElMessage.error(res?.msg || '加载失败')
visible.value = false
}
} finally {
loading.value = false
}
}
defineExpose({ open })
</script>
<style lang="less" scoped>
.detail-wrap {
padding: 4px 0 20px;
}
.content-text {
white-space: pre-wrap;
word-break: break-all;
color: #606266;
line-height: 1.6;
}
.empty-wrap {
padding: 40px 20px;
}
</style>

272
platform/src/views/tools/reminder/components/edit.vue Normal file
View File

@ -0,0 +1,272 @@
<template>
<el-drawer
v-model="visible"
:title="isAdd ? '新增提醒' : '编辑提醒'"
size="520px"
destroy-on-close
@closed="onClosed"
>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="100px"
v-loading="loading"
>
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入提醒标题" maxlength="100" show-word-limit />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
<el-option label="系统通知" :value="1" />
<el-option label="待办提醒" :value="2" />
<el-option label="活动提醒" :value="3" />
<el-option label="自定义" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input
v-model="form.content"
type="textarea"
:rows="5"
placeholder="请输入提醒内容"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="提醒时间" prop="remindTime">
<el-date-picker
v-model="form.remindTime"
type="datetime"
placeholder="请选择提醒时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="接收范围" prop="targetType">
<el-select v-model="form.targetType" placeholder="请选择接收范围" style="width: 100%">
<el-option label="全体用户" :value="1" />
<el-option label="指定用户" :value="2" />
<el-option label="指定角色" :value="3" />
<el-option label="仅管理员" :value="4" />
</el-select>
</el-form-item>
<!-- 指定用户时展示 -->
<el-form-item
v-if="form.targetType === 2"
label="指定用户"
prop="targetIds"
>
<el-input
v-model="form.targetIds"
placeholder="多个用户 ID，用英文逗号分隔，如：1,2,3"
/>
</el-form-item>
<!-- 指定角色时展示 -->
<el-form-item
v-if="form.targetType === 3"
label="指定角色"
prop="targetIds"
>
<el-input
v-model="form.targetIds"
placeholder="多个角色 ID，用英文逗号分隔，如：1,2,3"
/>
</el-form-item>
<el-form-item label="是否重复">
<el-switch v-model="form.isRepeat" :active-value="1" :inactive-value="0" />
<span class="form-tip">开启后按下方周期重复发送</span>
</el-form-item>
<el-form-item v-if="form.isRepeat === 1" label="重复周期" prop="repeatCycle">
<el-select v-model="form.repeatCycle" placeholder="请选择" style="width: 100%">
<el-option label="每天" value="daily" />
<el-option label="每周" value="weekly" />
<el-option label="每月" value="monthly" />
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
:rows="2"
placeholder="选填"
maxlength="200"
/>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio-button :value="1">启用</el-radio-button>
<el-radio-button :value="0">禁用</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="submit">保存</el-button>
</template>
</el-drawer>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { getReminderDetail, createReminder, updateReminder } from '@/api/reminder'
const emit = defineEmits(['saved'])
const visible = ref(false)
const loading = ref(false)
const saving = ref(false)
const isAdd = ref(true)
const formRef = ref(null)
const form = reactive({
id: 0,
title: '',
type: 1,
content: '',
remindTime: '',
targetType: 1,
targetIds: '',
isRepeat: 0,
repeatCycle: '',
remark: '',
status: 1,
})
const rules = {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
type: [{ required: true, message: '请选择类型', trigger: 'change' }],
content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
remindTime: [{ required: true, message: '请选择提醒时间', trigger: 'change' }],
targetType: [{ required: true, message: '请选择接收范围', trigger: 'change' }],
repeatCycle: [
{
validator: (rule, value, callback) => {
if (form.isRepeat === 1 && !value) {
callback(new Error('请选择重复周期'))
} else {
callback()
}
},
trigger: 'change',
},
],
}
function resetForm() {
form.id = 0
form.title = ''
form.type = 1
form.content = ''
form.remindTime = ''
form.targetType = 1
form.targetIds = ''
form.isRepeat = 0
form.repeatCycle = ''
form.remark = ''
form.status = 1
}
async function open(id) {
resetForm()
isAdd.value = !id
visible.value = true
await nextTick()
formRef.value?.clearValidate?.()
if (id) {
loading.value = true
try {
const res = await getReminderDetail(id)
if (res?.code !== 200 || !res.data) {
ElMessage.error(res?.msg || '加载失败')
visible.value = false
return
}
const d = res.data
form.id = d.id
form.title = d.title || ''
form.type = d.type ?? 1
form.content = d.content || ''
form.remindTime = d.remindTime || ''
form.targetType = d.targetType ?? 1
form.targetIds = d.targetIds || ''
form.isRepeat = d.isRepeat ?? 0
form.repeatCycle = d.repeatCycle || ''
form.remark = d.remark || ''
form.status = d.status ?? 1
} finally {
loading.value = false
}
}
}
function onClosed() {
resetForm()
}
async function submit() {
if (!formRef.value) return
try {
await formRef.value.validate()
} catch {
return
}
saving.value = true
try {
const payload = {
title: form.title,
type: form.type,
content: form.content,
remindTime: form.remindTime,
targetType: form.targetType,
targetIds: [2, 3].includes(form.targetType) ? form.targetIds : undefined,
isRepeat: form.isRepeat,
repeatCycle: form.isRepeat === 1 ? form.repeatCycle : undefined,
remark: form.remark || undefined,
status: form.status,
}
let res
if (isAdd.value) {
res = await createReminder(payload)
} else {
res = await updateReminder(form.id, payload)
}
if (res?.code === 200) {
ElMessage.success(isAdd.value ? '新增成功' : '保存成功')
visible.value = false
emit('saved')
} else {
ElMessage.error(res?.msg || '操作失败')
}
} finally {
saving.value = false
}
}
defineExpose({ open })
</script>
<style lang="less" scoped>
.form-tip {
margin-left: 10px;
font-size: 12px;
color: #909399;
}
</style>

318
platform/src/views/tools/reminder/index.vue Normal file
View File

@ -0,0 +1,318 @@
<template>
<div class="container-box">
<div class="header-bar">
<h2>提醒管理</h2>
<div class="header-actions">
<el-button type="primary" @click="editRef.open()">
<el-icon><Plus /></el-icon>
新增提醒
</el-button>
<el-button @click="fetchList" :loading="loading">
<el-icon><Refresh /></el-icon>
刷新
</el-button>
</div>
</div>
<el-divider />
<!-- 搜索筛选 -->
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item label="关键词">
<el-input
v-model="searchForm.keyword"
placeholder="标题/内容"
clearable
style="width: 200px"
@keyup.enter="handleSearch"
@clear="handleSearch"
/>
</el-form-item>
<el-form-item label="类型">
<el-select
v-model="searchForm.type"
placeholder="全部"
clearable
style="width: 130px"
>
<el-option label="系统通知" :value="1" />
<el-option label="待办提醒" :value="2" />
<el-option label="活动提醒" :value="3" />
<el-option label="自定义" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select
v-model="searchForm.status"
placeholder="全部"
clearable
style="width: 110px"
>
<el-option label="启用" :value="1" />
<el-option label="禁用" :value="0" />
</el-select>
</el-form-item>
<el-form-item label="提醒时间">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 240px"
@change="handleSearch"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">
<el-icon><Search /></el-icon>
查询
</el-button>
<el-button @click="resetSearch">重置</el-button>
</el-form-item>
</el-form>
<!-- 批量操作 -->
<div v-if="selectedIds.length > 0" class="batch-bar">
<span class="selected-tip">已选 {{ selectedIds.length }} 条</span>
<el-button type="danger" size="small" @click="handleBatchDelete">批量删除</el-button>
</div>
<!-- 列表表格 -->
<el-table
:data="list"
v-loading="loading"
border
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="id" label="ID" width="70" align="center" />
<el-table-column prop="title" label="标题" min-width="160" show-overflow-tooltip />
<el-table-column prop="type" label="类型" width="110" align="center">
<template #default="{ row }">
<el-tag :type="typeTagType(row.type)" size="small">{{ typeText(row.type) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="content" label="内容摘要" min-width="200" show-overflow-tooltip />
<el-table-column prop="remindTime" label="提醒时间" width="170" align="center" />
<el-table-column prop="targetType" label="接收范围" width="110" align="center">
<template #default="{ row }">
<el-tag type="info" size="small">{{ targetTypeText(row.targetType) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="90" align="center">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="170" align="center" />
<el-table-column label="操作" width="150" align="center" fixed="right">
<template #default="{ row }">
<el-button text type="primary" size="small" @click="handleViewDetail(row)">详情</el-button>
<el-button text type="primary" size="small" @click="editRef.open(row.id)">编辑</el-button>
<el-button text type="danger" size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pager">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:total="pagination.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="fetchList"
@size-change="fetchList"
/>
</div>
<!-- 新增/编辑抽屉 -->
<ReminderEdit ref="editRef" @saved="fetchList" />
<!-- 详情抽屉 -->
<ReminderDetail ref="detailRef" />
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Search } from '@element-plus/icons-vue'
import { getReminderList, deleteReminder, batchDeleteReminder } from '@/api/reminder'
import ReminderEdit from './components/edit.vue'
import ReminderDetail from './components/detail.vue'
const editRef = ref(null)
const detailRef = ref(null)
const loading = ref(false)
const list = ref([])
const selectedIds = ref([])
const dateRange = ref(null)
const searchForm = reactive({
keyword: '',
type: null,
status: null,
startDate: '',
endDate: '',
})
const pagination = reactive({
page: 1,
pageSize: 20,
total: 0,
})
// 类型文本
function typeText(type) {
const map = { 1: '系统通知', 2: '待办提醒', 3: '活动提醒', 4: '自定义' }
return map[type] ?? '未知'
}
// 类型标签颜色
function typeTagType(type) {
const map = { 1: 'primary', 2: 'warning', 3: 'success', 4: '' }
return map[type] ?? 'info'
}
// 接收范围文本
function targetTypeText(targetType) {
const map = { 1: '全体用户', 2: '指定用户', 3: '指定角色', 4: '仅管理员' }
return map[targetType] ?? '—'
}
// 获取列表
async function fetchList() {
loading.value = true
try {
const params = {
page: pagination.page,
pageSize: pagination.pageSize,
keyword: searchForm.keyword || undefined,
type: searchForm.type != null ? searchForm.type : undefined,
status: searchForm.status != null ? searchForm.status : undefined,
startDate: searchForm.startDate || undefined,
endDate: searchForm.endDate || undefined,
}
const res = await getReminderList(params)
if (res?.code === 200 && res.data) {
list.value = res.data.list || []
pagination.total = res.data.total ?? 0
} else {
list.value = []
ElMessage.error(res?.msg || '加载失败')
}
} finally {
loading.value = false
}
}
// 搜索
function handleSearch() {
if (dateRange.value && dateRange.value.length === 2) {
searchForm.startDate = dateRange.value[0]
searchForm.endDate = dateRange.value[1]
} else {
searchForm.startDate = ''
searchForm.endDate = ''
}
pagination.page = 1
fetchList()
}
// 重置搜索
function resetSearch() {
searchForm.keyword = ''
searchForm.type = null
searchForm.status = null
searchForm.startDate = ''
searchForm.endDate = ''
dateRange.value = null
pagination.page = 1
fetchList()
}
// 多选变化
function handleSelectionChange(rows) {
selectedIds.value = rows.map((r) => r.id)
}
// 查看详情
function handleViewDetail(row) {
detailRef.value?.open(row.id)
}
// 删除单条
async function handleDelete(row) {
try {
await ElMessageBox.confirm(`确定删除提醒「${row.title}」吗？`, '提示', { type: 'warning' })
} catch {
return
}
const res = await deleteReminder(row.id)
if (res?.code === 200) {
ElMessage.success('已删除')
fetchList()
} else {
ElMessage.error(res?.msg || '删除失败')
}
}
// 批量删除
async function handleBatchDelete() {
try {
await ElMessageBox.confirm(`确定批量删除选中的 ${selectedIds.value.length} 条提醒吗？`, '提示', {
type: 'warning',
})
} catch {
return
}
const res = await batchDeleteReminder(selectedIds.value)
if (res?.code === 200) {
ElMessage.success('已批量删除')
selectedIds.value = []
fetchList()
} else {
ElMessage.error(res?.msg || '批量删除失败')
}
}
onMounted(() => {
fetchList()
})
</script>
<style lang="less" scoped>
.batch-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
padding: 6px 12px;
background: #ecf5ff;
border-radius: 4px;
border: 1px solid #b3d8ff;
.selected-tip {
color: #409eff;
font-size: 13px;
}
}
.pager {
margin-top: 16px;
display: flex;
justify-content: flex-end;
}
.search-form {
margin-bottom: 12px;
}
</style>