新增配置页面
This commit is contained in:
zyj
883
frontend/app/pages/settings/index.vue
Normal file
883
frontend/app/pages/settings/index.vue
Normal file
@@ -0,0 +1,883 @@
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="background-decoration">
|
||||
<div class="gradient-blob blob-1"></div>
|
||||
<div class="gradient-blob blob-2"></div>
|
||||
<div class="gradient-blob blob-3"></div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main-container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="title-section">
|
||||
<setting-outlined class="page-icon" />
|
||||
<div>
|
||||
<h1 class="page-title">系统设置</h1>
|
||||
<p class="page-subtitle">配置应用参数和系统行为</p>
|
||||
</div>
|
||||
</div>
|
||||
<a-space>
|
||||
<a-button size="large" @click="handleReset">
|
||||
<template #icon><undo-outlined /></template>
|
||||
重置默认
|
||||
</a-button>
|
||||
<a-button type="primary" size="large" @click="handleSave" :loading="saving">
|
||||
<template #icon><save-outlined /></template>
|
||||
保存配置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配置面板 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :xs="24" :lg="16">
|
||||
<!-- 基础配置 -->
|
||||
<a-card class="config-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title-wrapper">
|
||||
<control-outlined class="title-icon" />
|
||||
<span>基础配置</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-form :model="config" layout="vertical">
|
||||
<a-form-item label="应用名称">
|
||||
<a-input
|
||||
v-model:value="config.appName"
|
||||
placeholder="Go Site Clone"
|
||||
size="large"
|
||||
>
|
||||
<template #prefix>
|
||||
<appstore-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="监听端口">
|
||||
<a-input-number
|
||||
v-model:value="config.port"
|
||||
:min="1024"
|
||||
:max="65535"
|
||||
placeholder="6997"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #prefix>
|
||||
<api-outlined />
|
||||
</template>
|
||||
</a-input-number>
|
||||
<div class="form-tip">
|
||||
<info-circle-outlined />
|
||||
<span>应用启动时监听的端口号,修改后需要重启应用</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 路径配置 -->
|
||||
<a-card class="config-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title-wrapper">
|
||||
<folder-outlined class="title-icon" />
|
||||
<span>路径配置</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-form :model="config" layout="vertical">
|
||||
<a-form-item label="网站文件保存目录">
|
||||
<a-input
|
||||
v-model:value="config.siteFileDir"
|
||||
placeholder="www"
|
||||
size="large"
|
||||
>
|
||||
<template #prefix>
|
||||
<folder-open-outlined />
|
||||
</template>
|
||||
<template #suffix>
|
||||
<a-button type="link" size="small" @click="selectDirectory('siteFileDir')">
|
||||
浏览
|
||||
</a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
<div class="form-tip">
|
||||
<info-circle-outlined />
|
||||
<span>下载的网站文件存储位置,相对于应用根目录</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="打包软件保存目录">
|
||||
<a-input
|
||||
v-model:value="config.packSiteFileDir"
|
||||
placeholder="site-dist"
|
||||
size="large"
|
||||
>
|
||||
<template #prefix>
|
||||
<inbox-outlined />
|
||||
</template>
|
||||
<template #suffix>
|
||||
<a-button type="link" size="small" @click="selectDirectory('packSiteFileDir')">
|
||||
浏览
|
||||
</a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
<div class="form-tip">
|
||||
<info-circle-outlined />
|
||||
<span>打包后的应用程序存储位置</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 下载配置 -->
|
||||
<a-card class="config-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title-wrapper">
|
||||
<cloud-download-outlined class="title-icon" />
|
||||
<span>下载配置</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-form :model="downloadConfig" layout="vertical">
|
||||
<a-row :gutter="16">
|
||||
<a-col :xs="24" :sm="12">
|
||||
<a-form-item label="并发下载数">
|
||||
<a-input-number
|
||||
v-model:value="downloadConfig.concurrency"
|
||||
:min="1"
|
||||
:max="20"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12">
|
||||
<a-form-item label="超时时间(秒)">
|
||||
<a-input-number
|
||||
v-model:value="downloadConfig.timeout"
|
||||
:min="10"
|
||||
:max="300"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :xs="24" :sm="12">
|
||||
<a-form-item label="重试次数">
|
||||
<a-input-number
|
||||
v-model:value="downloadConfig.retryTimes"
|
||||
:min="0"
|
||||
:max="10"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12">
|
||||
<a-form-item label="User-Agent">
|
||||
<a-select
|
||||
v-model:value="downloadConfig.userAgent"
|
||||
size="large"
|
||||
>
|
||||
<a-select-option value="chrome">Chrome</a-select-option>
|
||||
<a-select-option value="firefox">Firefox</a-select-option>
|
||||
<a-select-option value="safari">Safari</a-select-option>
|
||||
<a-select-option value="edge">Edge</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="下载选项">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-checkbox v-model:checked="downloadConfig.downloadImages">
|
||||
下载图片资源
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="downloadConfig.downloadCSS">
|
||||
下载 CSS 样式
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="downloadConfig.downloadJS">
|
||||
下载 JavaScript 脚本
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="downloadConfig.downloadFonts">
|
||||
下载字体文件
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- Nginx 配置 -->
|
||||
<a-card class="config-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title-wrapper">
|
||||
<global-outlined class="title-icon" />
|
||||
<span>Nginx 配置</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-form :model="nginxConfig" layout="vertical">
|
||||
<a-row :gutter="16">
|
||||
<a-col :xs="24" :sm="12">
|
||||
<a-form-item label="默认端口">
|
||||
<a-input-number
|
||||
v-model:value="nginxConfig.defaultPort"
|
||||
:min="80"
|
||||
:max="65535"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12">
|
||||
<a-form-item label="工作进程数">
|
||||
<a-input-number
|
||||
v-model:value="nginxConfig.workerProcesses"
|
||||
:min="1"
|
||||
:max="16"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="Nginx 选项">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-checkbox v-model:checked="nginxConfig.autoStart">
|
||||
应用启动时自动启动 Nginx
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="nginxConfig.gzip">
|
||||
启用 Gzip 压缩
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="nginxConfig.accessLog">
|
||||
记录访问日志
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 界面配置 -->
|
||||
<a-card class="config-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title-wrapper">
|
||||
<bg-colors-outlined class="title-icon" />
|
||||
<span>界面配置</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-form :model="uiConfig" layout="vertical">
|
||||
<a-form-item label="主题模式">
|
||||
<a-radio-group v-model:value="uiConfig.theme" size="large" button-style="solid">
|
||||
<a-radio-button value="light">
|
||||
<sun-outlined /> 浅色
|
||||
</a-radio-button>
|
||||
<a-radio-button value="dark">
|
||||
<moon-outlined /> 深色
|
||||
</a-radio-button>
|
||||
<a-radio-button value="auto">
|
||||
<sync-outlined /> 自动
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="语言">
|
||||
<a-select v-model:value="uiConfig.language" size="large">
|
||||
<a-select-option value="zh-CN">简体中文</a-select-option>
|
||||
<a-select-option value="zh-TW">繁體中文</a-select-option>
|
||||
<a-select-option value="en-US">English</a-select-option>
|
||||
<a-select-option value="ja-JP">日本語</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="界面选项">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-checkbox v-model:checked="uiConfig.showNotification">
|
||||
显示系统通知
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="uiConfig.autoRefresh">
|
||||
自动刷新数据
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="uiConfig.compactMode">
|
||||
紧凑模式
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 右侧信息栏 -->
|
||||
<a-col :xs="24" :lg="8">
|
||||
<!-- 系统信息 -->
|
||||
<a-card class="info-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title-wrapper">
|
||||
<info-circle-outlined class="title-icon" />
|
||||
<span>系统信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="info-list">
|
||||
<div class="info-item-row">
|
||||
<span class="info-label">应用版本</span>
|
||||
<span class="info-value">v1.0.0</span>
|
||||
</div>
|
||||
<a-divider style="margin: 12px 0" />
|
||||
<div class="info-item-row">
|
||||
<span class="info-label">运行环境</span>
|
||||
<span class="info-value">Windows</span>
|
||||
</div>
|
||||
<a-divider style="margin: 12px 0" />
|
||||
<div class="info-item-row">
|
||||
<span class="info-label">配置文件</span>
|
||||
<span class="info-value">config.yaml</span>
|
||||
</div>
|
||||
<a-divider style="margin: 12px 0" />
|
||||
<div class="info-item-row">
|
||||
<span class="info-label">数据目录</span>
|
||||
<a-button type="link" size="small" @click="openDataDir">
|
||||
打开
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<a-card class="info-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title-wrapper">
|
||||
<thunderbolt-outlined class="title-icon" />
|
||||
<span>快捷操作</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-space direction="vertical" style="width: 100%" :size="12">
|
||||
<a-button block size="large" @click="clearCache">
|
||||
<template #icon><clear-outlined /></template>
|
||||
清理缓存
|
||||
</a-button>
|
||||
<a-button block size="large" @click="exportConfig">
|
||||
<template #icon><export-outlined /></template>
|
||||
导出配置
|
||||
</a-button>
|
||||
<a-button block size="large" @click="importConfig">
|
||||
<template #icon><import-outlined /></template>
|
||||
导入配置
|
||||
</a-button>
|
||||
<a-button block size="large" @click="checkUpdate">
|
||||
<template #icon><sync-outlined /></template>
|
||||
检查更新
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
|
||||
<!-- 帮助提示 -->
|
||||
<a-card class="info-card help-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title-wrapper">
|
||||
<question-circle-outlined class="title-icon" />
|
||||
<span>配置说明</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="help-content">
|
||||
<p><strong>注意事项：</strong></p>
|
||||
<ul>
|
||||
<li>修改端口号后需要重启应用才能生效</li>
|
||||
<li>路径配置使用相对路径或绝对路径</li>
|
||||
<li>并发下载数过高可能影响性能</li>
|
||||
<li>配置会自动保存到 config.yaml</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
SettingOutlined,
|
||||
UndoOutlined,
|
||||
SaveOutlined,
|
||||
ControlOutlined,
|
||||
FolderOutlined,
|
||||
FolderOpenOutlined,
|
||||
CloudDownloadOutlined,
|
||||
GlobalOutlined,
|
||||
BgColorsOutlined,
|
||||
InfoCircleOutlined,
|
||||
ThunderboltOutlined,
|
||||
ClearOutlined,
|
||||
ExportOutlined,
|
||||
ImportOutlined,
|
||||
SyncOutlined,
|
||||
QuestionCircleOutlined,
|
||||
AppstoreOutlined,
|
||||
ApiOutlined,
|
||||
InboxOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
// 保存状态
|
||||
const saving = ref(false);
|
||||
|
||||
// 基础配置
|
||||
const config = reactive({
|
||||
appName: 'Go Site Clone',
|
||||
port: 6997,
|
||||
siteFileDir: 'www',
|
||||
packSiteFileDir: 'site-dist'
|
||||
});
|
||||
|
||||
// 下载配置
|
||||
const downloadConfig = reactive({
|
||||
concurrency: 5,
|
||||
timeout: 30,
|
||||
retryTimes: 3,
|
||||
userAgent: 'chrome',
|
||||
downloadImages: true,
|
||||
downloadCSS: true,
|
||||
downloadJS: true,
|
||||
downloadFonts: true
|
||||
});
|
||||
|
||||
// Nginx 配置
|
||||
const nginxConfig = reactive({
|
||||
defaultPort: 80,
|
||||
workerProcesses: 4,
|
||||
autoStart: false,
|
||||
gzip: true,
|
||||
accessLog: true
|
||||
});
|
||||
|
||||
// 界面配置
|
||||
const uiConfig = reactive({
|
||||
theme: 'light',
|
||||
language: 'zh-CN',
|
||||
showNotification: true,
|
||||
autoRefresh: true,
|
||||
compactMode: false
|
||||
});
|
||||
|
||||
// 默认配置(用于重置)
|
||||
const defaultConfig = {
|
||||
appName: 'Go Site Clone',
|
||||
port: 6997,
|
||||
siteFileDir: 'www',
|
||||
packSiteFileDir: 'site-dist'
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadConfig();
|
||||
});
|
||||
|
||||
// 加载配置
|
||||
const loadConfig = async () => {
|
||||
try {
|
||||
// TODO: 从后端加载配置
|
||||
message.success('配置加载成功');
|
||||
} catch (error) {
|
||||
console.error('加载配置失败:', error);
|
||||
message.error('加载配置失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 保存配置
|
||||
const handleSave = async () => {
|
||||
saving.value = true;
|
||||
try {
|
||||
// TODO: 调用后端保存配置
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
const allConfig = {
|
||||
...config,
|
||||
download: downloadConfig,
|
||||
nginx: nginxConfig,
|
||||
ui: uiConfig
|
||||
};
|
||||
|
||||
console.log('保存配置:', allConfig);
|
||||
message.success('配置保存成功');
|
||||
} catch (error) {
|
||||
console.error('保存配置失败:', error);
|
||||
message.error('保存配置失败');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置配置
|
||||
const handleReset = () => {
|
||||
Modal.confirm({
|
||||
title: '确认重置',
|
||||
content: '确定要恢复所有默认配置吗？此操作不可撤销。',
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
Object.assign(config, defaultConfig);
|
||||
downloadConfig.concurrency = 5;
|
||||
downloadConfig.timeout = 30;
|
||||
downloadConfig.retryTimes = 3;
|
||||
downloadConfig.userAgent = 'chrome';
|
||||
downloadConfig.downloadImages = true;
|
||||
downloadConfig.downloadCSS = true;
|
||||
downloadConfig.downloadJS = true;
|
||||
downloadConfig.downloadFonts = true;
|
||||
|
||||
nginxConfig.defaultPort = 80;
|
||||
nginxConfig.workerProcesses = 4;
|
||||
nginxConfig.autoStart = false;
|
||||
nginxConfig.gzip = true;
|
||||
nginxConfig.accessLog = true;
|
||||
|
||||
uiConfig.theme = 'light';
|
||||
uiConfig.language = 'zh-CN';
|
||||
uiConfig.showNotification = true;
|
||||
uiConfig.autoRefresh = true;
|
||||
uiConfig.compactMode = false;
|
||||
|
||||
message.success('已恢复默认配置');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 选择目录
|
||||
const selectDirectory = (field: string) => {
|
||||
// TODO: 调用系统文件选择器
|
||||
message.info('选择目录功能待实现');
|
||||
};
|
||||
|
||||
// 打开数据目录
|
||||
const openDataDir = () => {
|
||||
// TODO: 打开文件管理器
|
||||
message.info('打开数据目录功能待实现');
|
||||
};
|
||||
|
||||
// 清理缓存
|
||||
const clearCache = () => {
|
||||
Modal.confirm({
|
||||
title: '确认清理',
|
||||
content: '确定要清理所有缓存吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
// TODO: 调用清理接口
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
message.success('缓存已清理');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 导出配置
|
||||
const exportConfig = () => {
|
||||
const allConfig = {
|
||||
...config,
|
||||
download: downloadConfig,
|
||||
nginx: nginxConfig,
|
||||
ui: uiConfig
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(allConfig, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'config-backup.json';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
message.success('配置已导出');
|
||||
};
|
||||
|
||||
// 导入配置
|
||||
const importConfig = () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
input.onchange = (e: any) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event: any) => {
|
||||
try {
|
||||
const imported = JSON.parse(event.target.result);
|
||||
Object.assign(config, imported);
|
||||
if (imported.download) Object.assign(downloadConfig, imported.download);
|
||||
if (imported.nginx) Object.assign(nginxConfig, imported.nginx);
|
||||
if (imported.ui) Object.assign(uiConfig, imported.ui);
|
||||
message.success('配置已导入');
|
||||
} catch (error) {
|
||||
message.error('配置文件格式错误');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
// 检查更新
|
||||
const checkUpdate = async () => {
|
||||
const hide = message.loading('检查更新中...', 0);
|
||||
try {
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
hide();
|
||||
message.info('当前已是最新版本');
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('检查更新失败');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面布局 */
|
||||
.settings-page {
|
||||
min-height: calc(100vh - 120px);
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.background-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gradient-blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(100px);
|
||||
opacity: 0.25;
|
||||
animation: float 25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.blob-1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
top: -15%;
|
||||
right: -15%;
|
||||
}
|
||||
|
||||
.blob-2 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
bottom: -15%;
|
||||
left: -15%;
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
.blob-3 {
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
animation-delay: 8s;
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.main-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
/* 页面标题 */
|
||||
.page-header {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
animation: fadeInDown 0.6s ease-out;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 48px;
|
||||
color: #722ed1;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.config-card,
|
||||
.info-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 24px;
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.card-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 20px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 表单提示 */
|
||||
.form-tip {
|
||||
margin-top: 8px;
|
||||
padding: 8px 12px;
|
||||
background: #e6f7ff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: #1890ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* 信息列表 */
|
||||
.info-list {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.info-item-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 帮助卡片 */
|
||||
.help-card .help-content {
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.help-content strong {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.help-content ul {
|
||||
margin: 8px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.help-content li {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
33% {
|
||||
transform: translate(40px, -40px) rotate(120deg);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-30px, 30px) rotate(240deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.main-container {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user