add i18n step1
This commit is contained in:
wjqserver
parent
34d553a890
commit
79e3db6078
23 changed files with 2309 additions and 450 deletions
1094
frontend/css/.style.css
Normal file
1094
frontend/css/.style.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -46,6 +46,7 @@ body {
|
|||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
/* 防止主页面滚动条出现, 内部组件自行管理滚动 */
|
||||
transition: background-color var(--transition-speed), color var(--transition-speed);
|
||||
}
|
||||
|
||||
|
|
@ -53,8 +54,7 @@ body {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
/* --- 新增: 自定义滚动条样式 --- */
|
||||
/* 适用于 Webkit 内核浏览器 (Chrome, Safari, Edge) */
|
||||
/* --- 自定义滚动条样式 (适用于 Webkit 内核浏览器) --- */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
|
@ -69,18 +69,21 @@ body {
|
|||
border-radius: 10px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
/* 使边框内缩 */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scrollbar-thumb-hover-color);
|
||||
}
|
||||
|
||||
/* 适用于 Firefox */
|
||||
/* --- 自定义滚动条样式 (适用于 Firefox) --- */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
/* 使滚动条更窄 */
|
||||
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
|
||||
}
|
||||
|
||||
/* --- 登录页样式 --- */
|
||||
.login-page-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -130,10 +133,12 @@ body {
|
|||
margin-top: 16px;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
/* 内部元素左右对齐 */
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
/* --- Toast 提示样式 --- */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
|
|
@ -156,12 +161,14 @@ body {
|
|||
width: 320px;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
/* 初始位置在屏幕外 */
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
/* 显示时滑入 */
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
|
|
@ -195,6 +202,7 @@ body {
|
|||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* --- Dialog 确认框样式 --- */
|
||||
#dialog-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -208,6 +216,7 @@ body {
|
|||
background-color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
/* 默认隐藏 */
|
||||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
}
|
||||
|
||||
|
|
@ -225,11 +234,13 @@ body {
|
|||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
transform: scale(0.95);
|
||||
/* 初始略微缩小 */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
#dialog-container.active .dialog-box {
|
||||
transform: scale(1);
|
||||
/* 显示时放大 */
|
||||
}
|
||||
|
||||
.dialog-message {
|
||||
|
|
@ -246,8 +257,10 @@ body {
|
|||
|
||||
.dialog-actions .btn {
|
||||
width: auto;
|
||||
/* 按钮宽度自适应 */
|
||||
}
|
||||
|
||||
/* --- Modal 模态框样式 --- */
|
||||
#modal-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -261,6 +274,7 @@ body {
|
|||
background-color: rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
/* 默认隐藏 */
|
||||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
}
|
||||
|
||||
|
|
@ -277,11 +291,13 @@ body {
|
|||
text-align: left;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
/* 初始略微缩小并上移 */
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
#modal-container.active .modal-box {
|
||||
transform: scale(1) translateY(0);
|
||||
/* 显示时放大并恢复位置 */
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
@ -300,7 +316,9 @@ body {
|
|||
.modal-content {
|
||||
padding: 24px;
|
||||
max-height: 60vh;
|
||||
/* 限制内容高度, 避免模态框过高 */
|
||||
overflow-y: auto;
|
||||
/* 内容超出时显示滚动条 */
|
||||
}
|
||||
|
||||
ul.preset-list {
|
||||
|
|
@ -326,6 +344,7 @@ ul.preset-list li p {
|
|||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* --- 主应用布局 --- */
|
||||
.app-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
|
@ -333,16 +352,20 @@ ul.preset-list li p {
|
|||
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
/* 占据剩余空间 */
|
||||
padding: 24px 32px;
|
||||
overflow-y: auto;
|
||||
/* 允许内容垂直滚动 */
|
||||
}
|
||||
|
||||
/* --- 视图切换动画 --- */
|
||||
#view-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view {
|
||||
animation: fadeIn 0.5s ease;
|
||||
/* 视图切换时的淡入动画 */
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
|
|
@ -357,6 +380,7 @@ ul.preset-list li p {
|
|||
}
|
||||
}
|
||||
|
||||
/* --- 侧边栏 --- */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background-color: var(--surface-color);
|
||||
|
|
@ -365,6 +389,7 @@ ul.preset-list li p {
|
|||
flex-direction: column;
|
||||
border-right: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
/* 防止侧边栏被挤压 */
|
||||
transition: transform var(--transition-speed) ease, background-color var(--transition-speed), border-color var(--transition-speed);
|
||||
}
|
||||
|
||||
|
|
@ -385,6 +410,7 @@ ul.preset-list li p {
|
|||
|
||||
.sidebar-nav {
|
||||
flex-grow: 1;
|
||||
/* 占据剩余空间 */
|
||||
}
|
||||
|
||||
.sidebar-nav ul li a {
|
||||
|
|
@ -414,6 +440,7 @@ ul.preset-list li p {
|
|||
|
||||
.sidebar-bottom {
|
||||
margin-top: auto;
|
||||
/* 推到底部 */
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
transition: border-color var(--transition-speed);
|
||||
|
|
@ -536,6 +563,28 @@ input:checked+.slider:before {
|
|||
transition: border-color var(--transition-speed);
|
||||
}
|
||||
|
||||
/* 侧边栏遮罩层 (仅用于移动端) */
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 199;
|
||||
/* 位于侧边栏下方 */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
/* 默认隐藏 */
|
||||
transition: opacity 0.3s ease, visibility 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-overlay.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* --- 主内容区头部样式 --- */
|
||||
.main-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -550,9 +599,11 @@ input:checked+.slider:before {
|
|||
|
||||
#menu-toggle-btn {
|
||||
display: none;
|
||||
/* 默认隐藏, 仅在小屏幕显示 */
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
/* --- 卡片面板样式 --- */
|
||||
.card-panel {
|
||||
background-color: var(--surface-color);
|
||||
border-radius: var(--border-radius-large);
|
||||
|
|
@ -574,6 +625,7 @@ input:checked+.slider:before {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* --- 按钮样式 --- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -586,10 +638,12 @@ input:checked+.slider:before {
|
|||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
/* 默认宽度为100% */
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.97);
|
||||
/* 点击时轻微缩小 */
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
|
|
@ -598,6 +652,7 @@ input:checked+.slider:before {
|
|||
cursor: not-allowed;
|
||||
border-color: transparent;
|
||||
transform: none;
|
||||
/* 禁用时无动画 */
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn:disabled {
|
||||
|
|
@ -656,6 +711,7 @@ input:checked+.slider:before {
|
|||
padding: 6px 12px;
|
||||
font-size: 0.875rem;
|
||||
width: auto;
|
||||
/* 小按钮宽度自适应 */
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
|
|
@ -668,6 +724,7 @@ input:checked+.slider:before {
|
|||
font-size: 1.1rem;
|
||||
border-radius: 50%;
|
||||
width: auto;
|
||||
/* 图标按钮宽度自适应 */
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
|
|
@ -683,6 +740,7 @@ input:checked+.slider:before {
|
|||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
width: auto;
|
||||
/* 链接按钮宽度自适应 */
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
|
|
@ -691,12 +749,15 @@ input:checked+.slider:before {
|
|||
|
||||
.main-header .btn-primary {
|
||||
width: auto;
|
||||
/* 主头部按钮宽度自适应 */
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
width: auto;
|
||||
/* 表单操作按钮宽度自适应 */
|
||||
}
|
||||
|
||||
/* --- 配置列表样式 --- */
|
||||
.config-list-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -715,6 +776,7 @@ input:checked+.slider:before {
|
|||
|
||||
.config-item:hover {
|
||||
transform: translateY(-2px);
|
||||
/* 悬停时轻微上浮 */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
|
|
@ -728,9 +790,11 @@ input:checked+.slider:before {
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
/* --- 表单样式 --- */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
/* 响应式网格布局 */
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
@ -761,14 +825,16 @@ fieldset legend {
|
|||
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
|
||||
/* 新增: 重置数字输入框的默认样式 */
|
||||
/* 重置数字输入框的默认样式 (移除上下箭头) */
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
/* Chrome, Safari */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -820,6 +886,7 @@ fieldset {
|
|||
|
||||
.custom-checkbox input {
|
||||
display: none;
|
||||
/* 隐藏原生复选框 */
|
||||
}
|
||||
|
||||
.custom-checkbox .checkmark {
|
||||
|
|
@ -837,6 +904,7 @@ fieldset {
|
|||
|
||||
.custom-checkbox .checkmark::after {
|
||||
content: "\f00c";
|
||||
/* Font Awesome 对勾图标 */
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
|
|
@ -845,20 +913,23 @@ fieldset {
|
|||
top: 3px;
|
||||
left: 3px;
|
||||
transform: scale(0);
|
||||
/* 默认隐藏 */
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.custom-checkbox input:checked+.checkmark::after {
|
||||
transform: scale(1);
|
||||
/* 选中时显示 */
|
||||
}
|
||||
|
||||
.header-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr auto;
|
||||
/* 键、值、删除按钮 */
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
/* 修改: 确保所有元素垂直居中对齐 */
|
||||
/* 确保所有元素垂直居中对齐 */
|
||||
}
|
||||
|
||||
.header-entry input {
|
||||
|
|
@ -870,6 +941,7 @@ fieldset {
|
|||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* --- 分段控制器样式 --- */
|
||||
.segmented-control {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -883,6 +955,7 @@ fieldset {
|
|||
|
||||
.segmented-control button {
|
||||
flex: 1;
|
||||
/* 均分空间 */
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
|
@ -891,6 +964,7 @@ fieldset {
|
|||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
z-index: 2;
|
||||
/* 确保按钮在滑块之上 */
|
||||
}
|
||||
|
||||
.segmented-control button:hover {
|
||||
|
|
@ -903,6 +977,7 @@ fieldset {
|
|||
|
||||
[data-theme="dark"] .segmented-control button.active {
|
||||
color: var(--text-color);
|
||||
/* 深色模式下保持文本颜色 */
|
||||
}
|
||||
|
||||
#segmented-control-slider {
|
||||
|
|
@ -913,14 +988,16 @@ fieldset {
|
|||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
/* 平滑过渡 */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* --- 自定义选择框样式 --- */
|
||||
.custom-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 修改: 统一 .select-selected 的外观, 使其与 input 一致 */
|
||||
/* 统一 .select-selected 的外观, 使其与 input 文本框一致 */
|
||||
.select-selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -938,8 +1015,8 @@ fieldset {
|
|||
transition: border-color 0.2s, box-shadow 0.2s, background-color var(--transition-speed);
|
||||
line-height: 1.5;
|
||||
/* 与input的字体和内边距计算出的行高一致 */
|
||||
height: calc(1.5em + 24px + 2px);
|
||||
/* font-size * line-height + padding * 2 + border * 2 */
|
||||
/* 准确计算高度: font-size * line-height + padding-top + padding-bottom + border-top + border-bottom */
|
||||
height: calc(1em * 1.5 + 12px * 2 + 1px * 2);
|
||||
}
|
||||
|
||||
.select-selected.select-arrow-active {
|
||||
|
|
@ -949,6 +1026,7 @@ fieldset {
|
|||
|
||||
.select-selected::after {
|
||||
content: '\f078';
|
||||
/* Font Awesome 向下箭头图标 */
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
transition: transform var(--transition-speed) ease;
|
||||
|
|
@ -956,12 +1034,14 @@ fieldset {
|
|||
|
||||
.select-selected.select-arrow-active::after {
|
||||
transform: rotate(180deg);
|
||||
/* 展开时箭头旋转 */
|
||||
}
|
||||
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: var(--surface-color);
|
||||
top: 100%;
|
||||
/* 位于选择框下方 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 1px solid var(--border-color);
|
||||
|
|
@ -971,9 +1051,12 @@ fieldset {
|
|||
margin-top: 8px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
/* 选项过多时滚动 */
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
/* 默认略微上移 */
|
||||
visibility: hidden;
|
||||
/* 默认隐藏 */
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||
}
|
||||
|
||||
|
|
@ -994,48 +1077,102 @@ fieldset {
|
|||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* --- 渲染输出面板样式 --- */
|
||||
#rendered-output-panel pre {
|
||||
background-color: var(--bg-color);
|
||||
padding: 16px;
|
||||
border-radius: var(--border-radius-small);
|
||||
overflow-x: auto;
|
||||
/* 允许代码水平滚动 */
|
||||
white-space: pre-wrap;
|
||||
/* 自动换行 */
|
||||
word-break: break-all;
|
||||
/* 单词内断行 */
|
||||
border: 1px solid var(--border-color);
|
||||
transition: background-color var(--transition-speed);
|
||||
}
|
||||
|
||||
/* --- 角落语言切换器样式 --- */
|
||||
.language-switcher-corner {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
.language-switcher-corner .btn-icon {
|
||||
background-color: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.language-switcher-corner .btn-icon:hover {
|
||||
background-color: var(--bg-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
.language-switcher-corner ul {
|
||||
position: absolute;
|
||||
bottom: 60px; /* 在按钮上方 */
|
||||
right: 0;
|
||||
list-style: none;
|
||||
padding: 8px;
|
||||
margin: 0;
|
||||
background-color: var(--surface-color);
|
||||
border-radius: var(--border-radius-small);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
border: 1px solid var(--border-color);
|
||||
width: 150px;
|
||||
}
|
||||
.language-switcher-corner ul li {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.language-switcher-corner ul li:hover {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
.language-switcher-corner ul li.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
/* --- 响应式设计 (媒体查询) --- */
|
||||
@media (max-width: 992px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
/* 在小屏幕上脱离文档流 */
|
||||
z-index: 200;
|
||||
/* 确保在最上层 */
|
||||
height: 100%;
|
||||
transform: translateX(-100%);
|
||||
/* 默认隐藏在左侧 */
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
/* 添加阴影效果 */
|
||||
}
|
||||
|
||||
.sidebar.is-open {
|
||||
transform: translateX(0);
|
||||
/* 打开时滑入 */
|
||||
}
|
||||
|
||||
#menu-toggle-btn {
|
||||
display: inline-flex;
|
||||
/* 仅在小屏幕上显示菜单切换按钮 */
|
||||
}
|
||||
|
||||
.main-header .btn-text {
|
||||
display: none;
|
||||
/* 在小屏幕上隐藏按钮内的长文本 */
|
||||
}
|
||||
|
||||
.sidebar-nav span,
|
||||
.logout-section span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.caddy-control-panel .btn span {
|
||||
display: inline;
|
||||
/* 隐藏侧边栏导航和底部区域的文本, 只显示图标 */
|
||||
.main-header .btn-primary .btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 16px;
|
||||
/* 调整小屏幕内边距 */
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue