admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Baobhan Sith
2025-04-17 21:40:50 +08:00
parent 636ed5a2bb
commit 1c4ae3a3e1
17 changed files with 959 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/App.vue
+88 -15
View File
@@ -39,17 +39,20 @@ const closeStyleCustomizer = () => {
<div id="app-container">
<header>
<nav>
<RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink> |
<RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink> |
<RouterLink to="/workspace">{{ t('nav.terminal') }}</RouterLink> | <!-- 新增终端链接 -->
<RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink> | <!-- 新增代理链接 -->
<!-- <RouterLink to="/tags">{{ t('nav.tags') }}</RouterLink> | --> <!-- 移除标签链接 -->
<RouterLink to="/notifications">{{ t('nav.notifications') }}</RouterLink> | <!-- 新增通知链接 -->
<RouterLink to="/audit-logs">{{ t('nav.auditLogs') }}</RouterLink> | <!-- 新增审计日志链接 -->
<RouterLink to="/settings">{{ t('nav.settings') }}</RouterLink> | <!-- 新增设置链接 -->
<a href="#" @click.prevent="openStyleCustomizer" :title="t('nav.customizeStyle')">🎨</a> | <!-- 点击调用 openStyleCustomizer -->
<div class="nav-left"> <!-- Group left-aligned links -->
<RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink>
<RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink>
<RouterLink to="/workspace">{{ t('nav.terminal') }}</RouterLink>
<RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink>
<RouterLink to="/notifications">{{ t('nav.notifications') }}</RouterLink>
<RouterLink to="/audit-logs">{{ t('nav.auditLogs') }}</RouterLink>
<RouterLink to="/settings">{{ t('nav.settings') }}</RouterLink>
</div>
<div class="nav-right"> <!-- Group right-aligned links -->
<a href="#" @click.prevent="openStyleCustomizer" :title="t('nav.customizeStyle')">🎨</a>
<RouterLink v-if="!isAuthenticated" to="/login">{{ t('nav.login') }}</RouterLink>
<a href="#" v-if="isAuthenticated" @click.prevent="handleLogout">{{ t('nav.logout') }}</a>
</div>
</nav>
</header>
@@ -79,31 +82,101 @@ const closeStyleCustomizer = () => {
flex-direction: column;
min-height: 100vh;
font-family: var(--font-family-sans-serif); /* 使用字体变量 */
background-color: var(--app-bg-color); /* Set base background for the whole app */
}
header {
background-color: var(--header-bg-color); /* 使用头部背景色变量 */
padding: var(--base-padding); /* 使用基础内边距变量 */
padding: 0 calc(var(--base-padding) * 1.5); /* Adjust padding: 0 top/bottom, more left/right */
border-bottom: 1px solid var(--border-color); /* 使用边框颜色变量 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* Softer shadow */
height: 55px; /* Slightly taller header */
display: flex; /* Use flexbox for alignment */
align-items: center; /* Center items vertically */
position: sticky; /* Make header sticky */
top: 0;
z-index: 10; /* Ensure header stays on top */
}
nav {
display: flex;
align-items: center; /* Align nav items vertically */
width: 100%; /* Make nav take full width */
justify-content: space-between; /* Space out left and right groups */
}
.nav-left, .nav-right {
display: flex;
align-items: center;
gap: calc(var(--base-margin) / 3); /* Add small gap between items */
}
nav a {
margin: 0 var(--base-margin); /* 使用基础外边距变量 */
text-decoration: none;
color: var(--link-color); /* 使用链接颜色变量 */
color: var(--text-color-secondary); /* Use secondary text color for inactive links */
padding: 0.6rem 0.9rem; /* Adjust padding */
border-radius: 6px; /* Slightly more rounded */
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; /* Smooth transition */
font-size: 0.9rem;
line-height: 1;
white-space: nowrap;
position: relative; /* For potential pseudo-elements */
border: 1px solid transparent; /* Add transparent border for layout consistency */
}
nav a:hover {
color: var(--link-hover-color); /* 使用链接悬停颜色变量 */
color: var(--link-hover-color); /* Use specific hover color */
background-color: rgba(128, 128, 128, 0.1); /* Subtle grey background on hover */
}
nav a.router-link-exact-active {
font-weight: bold;
color: var(--link-active-color); /* 使用激活链接颜色变量 */
font-weight: 500; /* Medium weight */
color: var(--link-active-color); /* Use active link color */
background-color: transparent; /* Remove background for active link */
/* Add a bottom border for active state */
}
/* Add a pseudo-element for the active indicator */
nav a.router-link-exact-active::after {
content: '';
position: absolute;
bottom: -1px; /* Position slightly below the text, aligning with header border */
left: 10%; /* Start slightly indented */
right: 10%; /* End slightly indented */
height: 2px; /* Thickness of the indicator */
background-color: var(--link-active-color); /* Color of the indicator */
border-radius: 1px;
}
/* Style the theme icon link */
nav a[title*="t('nav.customizeStyle')"] {
padding: 0.5rem 0.7rem; /* Adjust padding for icon */
font-size: 1.1rem; /* Make icon slightly larger */
color: var(--text-color-secondary); /* Match other inactive links */
}
nav a[title*="t('nav.customizeStyle')"]:hover {
color: var(--link-hover-color);
background-color: rgba(128, 128, 128, 0.1);
}
/* Style logout/login link */
.nav-right a {
/* Specific styles if needed, e.g., slightly different color */
color: var(--text-color-secondary);
}
.nav-right a:hover {
color: var(--link-hover-color);
background-color: rgba(128, 128, 128, 0.1);
}
main {
flex-grow: 1;
/* padding: var(--base-padding); */ /* Keep padding removed from main */
}
footer {
padding: var(--base-padding); /* 使用基础内边距变量 */
}
packages/frontend/src/components/CommandInputBar.vue
+9 -7
View File
@@ -36,10 +36,10 @@ const sendCommand = () => {
.command-input-bar {
display: flex;
align-items: center;
padding: 5px 10px;
background-color: #f0f0f0; /* 背景色，可调整 */
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: var(--base-margin); /* Use theme variable */
background-color: var(--header-bg-color); /* Use theme variable */
border-top: 1px solid var(--border-color); /* Use theme variable */
border-bottom: 1px solid var(--border-color); /* Use theme variable */
min-height: 40px; /* 保证一定高度 */
}
@@ -51,9 +51,11 @@ const sendCommand = () => {
.command-input {
padding: 6px 10px;
border: 1px solid #ccc;
border: 1px solid var(--border-color); /* Use theme variable */
border-radius: 4px;
font-size: 0.9em;
background-color: var(--app-bg-color); /* Use theme variable */
color: var(--text-color); /* Use theme variable */
width: 60%; /* 输入框宽度，可调整 */
max-width: 800px; /* 最大宽度 */
outline: none;
@@ -61,8 +63,8 @@ const sendCommand = () => {
}
.command-input:focus {
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
border-color: var(--button-bg-color); /* Use theme variable */
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Keep existing shadow or define variable */
}
/* 可以添加按钮样式 */
packages/frontend/src/components/FileManager.vue
+46 -42
View File
@@ -845,24 +845,28 @@ const cancelPathEdit = () => {
<style scoped>
/* Styles remain the same, but add .selected style */
.file-manager { height: 100%; display: flex; flex-direction: column; font-family: sans-serif; font-size: 0.9rem; overflow: hidden; }
.toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background-color: #f0f0f0; border-bottom: 1px solid #ccc; flex-wrap: wrap; }
.path-bar { white-space: nowrap; overflow-x: auto; flex-grow: 1; margin-right: 1rem; padding: 0.2rem 0.4rem; border-radius: 3px; } /* Remove cursor:text and hover */
.file-manager { height: 100%; display: flex; flex-direction: column; font-family: var(--font-family-sans-serif); font-size: 0.9rem; overflow: hidden; background-color: var(--app-bg-color); color: var(--text-color); }
.toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--base-margin); background-color: var(--header-bg-color); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.path-bar { white-space: nowrap; overflow-x: auto; flex-grow: 1; margin-right: var(--base-padding); padding: 0.2rem 0.4rem; border-radius: 3px; } /* Remove cursor:text and hover */
.path-bar strong.editable-path {
font-weight: normal;
background-color: #e0e0e0;
background-color: var(--header-bg-color); /* Use header bg */
filter: brightness(0.95); /* Slightly darken */
padding: 0.1rem 0.4rem;
border-radius: 3px;
margin-left: 0.3rem;
cursor: text; /* Add cursor only to the clickable part */
}
.path-bar strong.editable-path:hover {
background-color: #d0d0d0; /* Slightly darker hover for the path */
background-color: var(--header-bg-color); /* Use header bg */
filter: brightness(0.9); /* Darker hover */
}
.path-input {
font-family: inherit;
font-size: inherit;
border: 1px solid #ccc;
border: 1px solid var(--border-color); /* Use theme variable */
background-color: var(--app-bg-color); /* Use theme variable */
color: var(--text-color); /* Use theme variable */
padding: 0.1rem 0.4rem;
border-radius: 3px;
width: calc(100% - 70px); /* Adjust width based on button sizes */
@@ -872,14 +876,14 @@ const cancelPathEdit = () => {
.path-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
.actions-bar button { padding: 0.3rem 0.6rem; cursor: pointer; margin-left: 0.5rem; }
.actions-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
.upload-popup { position: fixed; bottom: 1rem; right: 1rem; background-color: white; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); padding: 0.8rem; max-width: 300px; max-height: 200px; overflow-y: auto; z-index: 1001; }
.upload-popup h4 { margin: 0 0 0.5rem 0; font-size: 0.9em; border-bottom: 1px solid #eee; padding-bottom: 0.3rem; }
.upload-popup { position: fixed; bottom: var(--base-padding); right: var(--base-padding); background-color: var(--app-bg-color); border: 1px solid var(--border-color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); padding: 0.8rem; max-width: 300px; max-height: 200px; overflow-y: auto; z-index: 1001; color: var(--text-color); } /* Use theme variables */
.upload-popup h4 { margin: 0 0 var(--base-margin) 0; font-size: 0.9em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; } /* Use theme variables */
.upload-popup ul { list-style: none; padding: 0; margin: 0; }
.upload-popup li { margin-bottom: 0.4rem; font-size: 0.85em; display: flex; align-items: center; flex-wrap: wrap; }
.upload-popup li { margin-bottom: var(--base-margin); font-size: 0.85em; display: flex; align-items: center; flex-wrap: wrap; } /* Use theme variable */
.upload-popup progress { margin: 0 0.5rem; width: 80px; height: 0.8em; }
.upload-popup .error { color: red; margin-left: 0.5rem; flex-basis: 100%; font-size: 0.8em; }
.upload-popup .cancel-btn { margin-left: auto; padding: 0.1rem 0.4rem; font-size: 0.8em; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; cursor: pointer; }
.loading, .no-files { padding: 1rem; text-align: center; color: #666; }
.upload-popup .error { color: red; margin-left: 0.5rem; flex-basis: 100%; font-size: 0.8em; } /* Keep error color */
.upload-popup .cancel-btn { margin-left: auto; padding: 0.1rem 0.4rem; font-size: 0.8em; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; cursor: pointer; } /* Keep specific cancel button style */
.loading, .no-files { padding: var(--base-padding); text-align: center; color: var(--text-color-secondary); } /* Use theme variable */
/* 移除 .error-alert 和 .close-error-btn 样式 */
/* .error-alert { ... } */
/* .close-error-btn { ... } */
@@ -909,9 +913,9 @@ table.resizable-table {
table-layout: fixed; /* Crucial for resizing */
overflow: hidden; /* Prevent resizer overflow */
}
thead { background-color: #f8f8f8; position: sticky; top: 0; z-index: 1; }
thead { background-color: var(--header-bg-color); position: sticky; top: 0; z-index: 1; } /* Use theme variable */
th, td {
border: 1px solid #eee;
border: 1px solid var(--border-color); /* Use theme variable */
padding: 0.4rem 0.6rem;
text-align: left;
white-space: nowrap;
@@ -922,21 +926,21 @@ th {
position: relative; /* Needed for absolute positioning of resizer */
}
th.sortable { cursor: pointer; }
th.sortable:hover { background-color: #e9e9e9; }
th.sortable:hover { background-color: var(--header-bg-color); filter: brightness(0.95); } /* Use theme variable */
/* Removed fixed width for first column, handled by colgroup */
td:first-child {
text-align: center; /* Center the icon */
}
tbody tr:hover { background-color: #f5f5f5; }
tbody tr:hover { background-color: var(--header-bg-color); } /* Use theme variable */
tbody tr.clickable { cursor: pointer; user-select: none; /* Prevent text selection on click */ }
/* Removed .actions-cell style */
tbody tr.selected { background-color: #cce5ff; }
tbody tr.selected:hover { background-color: #b8daff; }
.context-menu { position: fixed; background-color: white; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 1002; min-width: 150px; }
.context-menu ul { list-style: none; padding: 5px 0; margin: 0; }
.context-menu li { padding: 8px 12px; cursor: pointer; }
.context-menu li:hover { background-color: #eee; }
.context-menu li.disabled { color: #aaa; cursor: not-allowed; background-color: white; }
tbody tr.selected { background-color: var(--button-bg-color); color: var(--button-text-color); } /* Use theme variables */
tbody tr.selected:hover { background-color: var(--button-hover-bg-color); color: var(--button-text-color); } /* Use theme variables */
.context-menu { position: fixed; background-color: var(--app-bg-color); border: 1px solid var(--border-color); box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 1002; min-width: 150px; } /* Use theme variables */
.context-menu ul { list-style: none; padding: var(--base-margin) 0; margin: 0; } /* Use theme variable */
.context-menu li { padding: var(--base-margin) var(--base-padding); cursor: pointer; color: var(--text-color); } /* Use theme variables */
.context-menu li:hover { background-color: var(--header-bg-color); } /* Use theme variable */
.context-menu li.disabled { color: var(--text-color-secondary); cursor: not-allowed; background-color: var(--app-bg-color); opacity: 0.6; } /* Use theme variables */
/* Resizer Handle Styles */
.resizer {
@@ -961,42 +965,42 @@ tbody tr.selected:hover { background-color: #b8daff; }
left: 0;
width: 100%;
height: 100%;
background-color: rgba(40, 40, 40, 0.95); /* Dark semi-transparent background */
background-color: rgba(40, 40, 40, 0.95); /* Keep dark background for overlay */
z-index: 1000; /* Ensure it's above the file list but below popups */
display: flex;
flex-direction: column;
color: #f0f0f0;
color: #f0f0f0; /* Keep light text for dark overlay */
}
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: #333;
border-bottom: 1px solid #555;
padding: var(--base-margin) var(--base-padding); /* Use theme variables */
background-color: #333; /* Keep dark header for overlay */
border-bottom: 1px solid #555; /* Keep dark border for overlay */
font-size: 0.9em;
}
.close-editor-btn {
background: none;
border: none;
color: #ccc;
color: #ccc; /* Keep light color for dark header */
font-size: 1.2em;
cursor: pointer;
padding: 0.2rem 0.5rem;
}
.close-editor-btn:hover {
color: white;
color: white; /* Keep light hover color */
}
.editor-loading, .editor-error {
padding: 2rem;
padding: calc(var(--base-padding) * 2); /* Use theme variable */
text-align: center;
font-size: 1.1em;
}
.editor-error {
color: #ff8a8a;
color: #ff8a8a; /* Keep specific error color */
}
.editor-actions {
@@ -1005,11 +1009,11 @@ tbody tr.selected:hover { background-color: #b8daff; }
}
.save-btn {
background-color: #4CAF50;
color: white;
background-color: var(--button-bg-color); /* Use theme variable */
color: var(--button-text-color); /* Use theme variable */
border: none;
padding: 0.4rem 0.8rem;
margin-left: 1rem;
margin-left: var(--base-padding); /* Use theme variable */
cursor: pointer;
border-radius: 3px;
font-size: 0.9em;
@@ -1019,25 +1023,25 @@ tbody tr.selected:hover { background-color: #b8daff; }
cursor: not-allowed;
}
.save-btn:hover:not(:disabled) {
background-color: #45a049;
background-color: var(--button-hover-bg-color); /* Use theme variable */
}
.save-status {
margin-left: 1rem;
margin-left: var(--base-padding); /* Use theme variable */
font-size: 0.9em;
padding: 0.2rem 0.5rem;
border-radius: 3px;
}
.save-status.saving {
color: #888;
color: var(--text-color-secondary); /* Use theme variable */
}
.save-status.success {
color: #4CAF50;
background-color: #e8f5e9;
color: #4CAF50; /* Keep specific success color */
background-color: #e8f5e9; /* Keep specific success background */
}
.save-status.error {
color: #f44336;
background-color: #ffebee;
color: #f44336; /* Keep specific error color */
background-color: #ffebee; /* Keep specific error background */
}
.editor-instance {
packages/frontend/src/components/LayoutConfigurator.vue
+217 -13
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, watch, type Ref } from 'vue';
import { ref, computed, watch, onMounted, onUnmounted, type Ref, reactive } from 'vue'; // 导入 reactive
import { useI18n } from 'vue-i18n';
import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
import draggable from 'vuedraggable';
@@ -26,18 +26,67 @@ const localLayoutTree: Ref<LayoutNode | null> = ref(null);
// 标记是否有更改未保存
const hasChanges = ref(false);
// --- Resizing State ---
const dialogRef = ref<HTMLElement | null>(null); // 对话框元素的引用
const initialDialogState = { width: 800, height: 600 }; // 初始/默认尺寸 (px)
const dialogStyle = reactive({
width: `${initialDialogState.width}px`,
height: `${initialDialogState.height}px`,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)', // 初始居中
position: 'absolute' as 'absolute', // 显式设置定位
});
const isResizing = ref(false);
const resizeHandle = ref<string | null>(null); // 记录当前拖拽的手柄 ('t', 'b', 'l', 'r', 'tl', 'tr', 'bl', 'br')
const startDragPos = { x: 0, y: 0 };
const startDialogRect = { width: 0, height: 0, top: 0, left: 0 };
const minDialogSize = { width: 400, height: 300 }; // 最小尺寸限制
// --- Watchers ---
// 当弹窗可见时，从 store 加载当前布局到本地副本
// 当弹窗可见时，从 store 加载当前布局并计算初始位置
watch(() => props.isVisible, (newValue) => {
if (newValue && layoutStore.layoutTree) {
// 深拷贝以避免直接修改 store 状态
if (newValue) {
// 加载布局
if (layoutStore.layoutTree) {
localLayoutTree.value = JSON.parse(JSON.stringify(layoutStore.layoutTree));
hasChanges.value = false; // 重置更改状态
}
hasChanges.value = false;
console.log('[LayoutConfigurator] 弹窗打开，已加载当前布局到本地副本。');
// 重置/计算初始位置和大小 (确保在 DOM 更新后执行，或给个延迟)
requestAnimationFrame(() => {
if (dialogRef.value) {
// 尝试读取当前计算出的尺寸，如果失败则使用默认值
const currentRect = dialogRef.value.getBoundingClientRect();
const initialWidth = currentRect.width > minDialogSize.width ? currentRect.width : initialDialogState.width;
const initialHeight = currentRect.height > minDialogSize.height ? currentRect.height : initialDialogState.height;
dialogStyle.width = `${initialWidth}px`;
dialogStyle.height = `${initialHeight}px`;
dialogStyle.left = `${(window.innerWidth - initialWidth) / 2}px`;
dialogStyle.top = `${(window.innerHeight - initialHeight) / 2}px`;
dialogStyle.transform = 'none'; // 移除 transform 居中
dialogStyle.position = 'absolute';
console.log('[LayoutConfigurator] Dialog initial position calculated:', dialogStyle);
} else {
// Fallback if ref not ready (less accurate centering)
dialogStyle.width = `${initialDialogState.width}px`;
dialogStyle.height = `${initialDialogState.height}px`;
dialogStyle.left = '50%';
dialogStyle.top = '50%';
dialogStyle.transform = 'translate(-50%, -50%)';
dialogStyle.position = 'absolute';
}
});
} else {
localLayoutTree.value = null; // 关闭时清空本地副本
isResizing.value = false; // 确保关闭时重置拖拽状态
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
}
});
}, { immediate: true }); // immediate: true 可能导致初始计算问题，先去掉试试
// 监听本地布局树的变化，标记有未保存更改
watch(localLayoutTree, (newValue, oldValue) => {
@@ -125,7 +174,99 @@ const resetToDefault = () => {
}
};
// --- Drag & Drop Methods ---
// --- Resizing Methods ---
const handleMouseDown = (event: MouseEvent, handle: string) => {
if (!dialogRef.value) return;
event.preventDefault(); // 阻止默认行为，如文本选择
event.stopPropagation();
isResizing.value = true;
resizeHandle.value = handle;
startDragPos.x = event.clientX;
startDragPos.y = event.clientY;
// 解析当前的 px 值
const currentWidth = parseFloat(dialogStyle.width);
const currentHeight = parseFloat(dialogStyle.height);
const currentTop = parseFloat(dialogStyle.top);
const currentLeft = parseFloat(dialogStyle.left);
startDialogRect.width = isNaN(currentWidth) ? initialDialogState.width : currentWidth;
startDialogRect.height = isNaN(currentHeight) ? initialDialogState.height : currentHeight;
startDialogRect.top = isNaN(currentTop) ? (window.innerHeight - startDialogRect.height) / 2 : currentTop;
startDialogRect.left = isNaN(currentLeft) ? (window.innerWidth - startDialogRect.width) / 2 : currentLeft;
console.log(`[LayoutConfigurator] MouseDown on handle ${handle}. Start rect:`, { ...startDialogRect });
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
};
const handleMouseMove = (event: MouseEvent) => {
if (!isResizing.value || !resizeHandle.value) return;
const deltaX = event.clientX - startDragPos.x;
const deltaY = event.clientY - startDragPos.y;
let newWidth = startDialogRect.width;
let newHeight = startDialogRect.height;
let newTop = startDialogRect.top;
let newLeft = startDialogRect.left;
// 根据拖拽的手柄计算新的尺寸和位置 (中心缩放)
if (resizeHandle.value.includes('r')) {
newWidth = startDialogRect.width + deltaX * 2;
newLeft = startDialogRect.left - deltaX;
}
if (resizeHandle.value.includes('l')) {
newWidth = startDialogRect.width - deltaX * 2;
newLeft = startDialogRect.left + deltaX;
}
if (resizeHandle.value.includes('b')) {
newHeight = startDialogRect.height + deltaY * 2;
newTop = startDialogRect.top - deltaY;
}
if (resizeHandle.value.includes('t')) {
newHeight = startDialogRect.height - deltaY * 2;
newTop = startDialogRect.top + deltaY;
}
// 应用最小尺寸限制
if (newWidth < minDialogSize.width) {
const diff = minDialogSize.width - newWidth;
newWidth = minDialogSize.width;
// 根据拖拽方向调整 left 以保持中心
if (resizeHandle.value.includes('r')) newLeft += diff / 2;
if (resizeHandle.value.includes('l')) newLeft -= diff / 2;
}
if (newHeight < minDialogSize.height) {
const diff = minDialogSize.height - newHeight;
newHeight = minDialogSize.height;
// 根据拖拽方向调整 top 以保持中心
if (resizeHandle.value.includes('b')) newTop += diff / 2;
if (resizeHandle.value.includes('t')) newTop -= diff / 2;
}
// 更新样式
dialogStyle.width = `${newWidth}px`;
dialogStyle.height = `${newHeight}px`;
dialogStyle.top = `${newTop}px`;
dialogStyle.left = `${newLeft}px`;
};
const handleMouseUp = () => {
if (isResizing.value) {
console.log(`[LayoutConfigurator] MouseUp. Final rect:`, { width: dialogStyle.width, height: dialogStyle.height, top: dialogStyle.top, left: dialogStyle.left });
isResizing.value = false;
resizeHandle.value = null;
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
}
};
// --- Drag & Drop Methods (for panes, unchanged) ---
// 克隆函数：当从可用列表拖拽时，创建新的 LayoutNode 对象
const clonePane = (paneName: PaneName): LayoutNode => {
console.log(`[LayoutConfigurator] 克隆面板: ${paneName}`);
@@ -204,7 +345,18 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
<template>
<div v-if="isVisible" class="layout-configurator-overlay" @click.self="closeDialog">
<div class="layout-configurator-dialog">
<!-- 应用动态样式，并添加 ref -->
<div ref="dialogRef" class="layout-configurator-dialog" :style="dialogStyle">
<!-- Resize Handles -->
<div class="resize-handle top" @mousedown.prevent="handleMouseDown($event, 't')"></div>
<div class="resize-handle bottom" @mousedown.prevent="handleMouseDown($event, 'b')"></div>
<div class="resize-handle left" @mousedown.prevent="handleMouseDown($event, 'l')"></div>
<div class="resize-handle right" @mousedown.prevent="handleMouseDown($event, 'r')"></div>
<div class="resize-handle top-left" @mousedown.prevent="handleMouseDown($event, 'tl')"></div>
<div class="resize-handle top-right" @mousedown.prevent="handleMouseDown($event, 'tr')"></div>
<div class="resize-handle bottom-left" @mousedown.prevent="handleMouseDown($event, 'bl')"></div>
<div class="resize-handle bottom-right" @mousedown.prevent="handleMouseDown($event, 'br')"></div>
<header class="dialog-header">
<h2>{{ t('layoutConfigurator.title', '配置工作区布局') }}</h2>
<button class="close-button" @click="closeDialog" :title="t('common.close', '关闭')">&times;</button>
@@ -287,20 +439,32 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* 低于 TerminalTabBar 的弹出窗口？可能需要调整 */
align-items: flex-start; /* 改为 flex-start 以配合 absolute 定位 */
/* 移除 justify-content: center; */
z-index: 1000;
/* 添加 pointer-events none 以允许点击穿透覆盖层，除非点在 dialog 上 */
pointer-events: none;
}
.layout-configurator-dialog {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
width: 80vw;
max-width: 900px; /* 增加最大宽度 */
max-height: 85vh;
/* width, height, top, left 由 dialogStyle 控制 */
/* 移除 max-width, max-height，由拖拽逻辑和 minSize 控制 */
display: flex;
flex-direction: column;
overflow: hidden; /* 防止内容溢出 */
position: absolute; /* 确保是 absolute */
/* 允许 dialog 接收点击事件 */
pointer-events: auto;
/* 添加 resize 光标，当悬停在 dialog 上但不在 handle 上时 */
cursor: default;
}
/* 当正在调整大小时，给 body 添加样式以覆盖其他元素的鼠标指针 */
body.resizing * {
cursor: grabbing !important; /* 或者根据 handle 方向设置不同的 cursor */
}
.dialog-header {
@@ -462,4 +626,44 @@ h3 {
background-color: #dee2e6;
}
/* --- Resize Handle Styles --- */
.resize-handle {
position: absolute;
background: transparent; /* 使手柄不可见，但可交互 */
z-index: 10; /* 确保在内容之上 */
}
.resize-handle.top, .resize-handle.bottom {
left: 10px; /* 调整手柄区域 */
right: 10px;
height: 10px; /* 手柄厚度 */
cursor: ns-resize;
}
.resize-handle.left, .resize-handle.right {
top: 10px;
bottom: 10px;
width: 10px;
cursor: ew-resize;
}
.resize-handle.top { top: -5px; }
.resize-handle.bottom { bottom: -5px; }
.resize-handle.left { left: -5px; }
.resize-handle.right { right: -5px; }
.resize-handle.top-left, .resize-handle.top-right, .resize-handle.bottom-left, .resize-handle.bottom-right {
width: 16px; /* 角落手柄稍大 */
height: 16px;
}
.resize-handle.top-left { top: -8px; left: -8px; cursor: nwse-resize; }
.resize-handle.top-right { top: -8px; right: -8px; cursor: nesw-resize; }
.resize-handle.bottom-left { bottom: -8px; left: -8px; cursor: nesw-resize; }
.resize-handle.bottom-right { bottom: -8px; right: -8px; cursor: nwse-resize; }
/* 可选：添加一个细微的边框或背景色以便调试 */
/*
.resize-handle {
border: 1px dotted rgba(255, 0, 0, 0.5);
}
*/
</style>
packages/frontend/src/components/LayoutRenderer.vue
+11 -11
View File
@@ -328,7 +328,7 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
display: flex;
flex-direction: column;
overflow: hidden; /* 隐藏内部滚动条，由子组件处理 */
background-color: #f8f9fa; /* 默认背景，可能被子组件覆盖 */
background-color: var(--app-bg-color); /* Use app background */
}
/* 确保动态加载的组件能正确应用 pane-content 样式 */
@@ -346,17 +346,17 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
justify-content: center;
align-items: center;
text-align: center;
color: #adb5bd;
background-color: #f8f9fa;
color: var(--text-color-secondary); /* Use secondary text color */
background-color: var(--header-bg-color); /* Use header background */
font-size: 0.9em;
padding: 1rem;
padding: var(--base-padding); /* Use base padding */
}
/* 增强空会话显示样式 */
:deep(.empty-session) {
background-color: #fcfcfc;
background-color: var(--app-bg-color); /* Use app background */
border-radius: 8px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
/* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03); */ /* Optional: Consider removing or using theme variables */
width: 100%;
height: 100%;
display: flex;
@@ -377,24 +377,24 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
:deep(.empty-session-content i) {
font-size: 2.5rem;
margin-bottom: 0.75rem;
color: #d1d5db;
color: var(--text-color-secondary); /* Use secondary text color */
}
:deep(.empty-session-content span) {
font-size: 1.1rem;
font-weight: 500;
color: #9ca3af;
color: var(--text-color-secondary); /* Use secondary text color */
margin-bottom: 0.5rem;
}
:deep(.empty-session-tip) {
font-size: 0.85rem;
color: #c0c5cc;
color: var(--text-color-secondary); /* Use secondary text color */
margin-top: 0.5rem;
}
:deep(.layout-pane-wrapper > .pane-placeholder.error) {
color: #dc3545; /* 错误用红色 */
background-color: #fdd;
color: #dc3545; /* Keep hardcoded error color for now */
background-color: #fdd; /* Keep hardcoded error background for now */
}
packages/frontend/src/components/NotificationSettings.vue
+55 -7
View File
@@ -118,18 +118,66 @@ const handleSave = (savedSetting: NotificationSetting) => {
<style scoped>
.notification-settings {
padding: 1rem;
padding: var(--base-padding, 1rem); /* 使用变量 */
/* Inherits text color and background from parent */
}
.loading-indicator, .error-message {
margin-top: 1rem;
margin-top: var(--base-margin, 1rem); /* 使用变量 */
color: var(--text-color-secondary); /* 使用次要文本颜色 */
}
.error-message {
color: var(--bs-danger);
color: var(--bs-danger); /* 保留 Bootstrap 变量或特定错误颜色 */
}
/* Apply variables to list items if needed (assuming Bootstrap classes handle most styling) */
.list-group-item {
background-color: var(--app-bg-color);
border-color: var(--border-color);
color: var(--text-color);
}
.list-group-item .text-muted {
color: var(--text-color-secondary);
}
/* Apply variables to buttons if not handled by global styles or Bootstrap */
.btn-primary {
background-color: var(--button-bg-color);
border-color: var(--button-bg-color);
color: var(--button-text-color);
}
.btn-primary:hover {
background-color: var(--button-hover-bg-color);
border-color: var(--button-hover-bg-color);
}
.btn-outline-secondary {
color: var(--text-color-secondary);
border-color: var(--border-color);
}
.btn-outline-secondary:hover {
background-color: var(--header-bg-color); /* Example hover */
color: var(--text-color);
}
.btn-outline-danger {
color: var(--bs-danger); /* Keep specific color */
border-color: var(--bs-danger);
}
.btn-outline-danger:hover {
background-color: var(--bs-danger);
color: var(--button-text-color);
}
/* Apply variables to badges if needed */
.badge.bg-secondary {
background-color: var(--text-color-secondary);
color: var(--button-text-color); /* Assuming high contrast needed */
}
/* Keep success/warning colors for status or define specific variables later */
/* .badge.bg-success {} */
/* .badge.bg-warning {} */
.modal-placeholder {
margin-top: 2rem;
padding: 1rem;
border: 1px dashed #ccc;
background-color: #f8f9fa;
margin-top: calc(var(--base-margin, 1rem) * 2); /* 使用变量 */
padding: var(--base-padding, 1rem); /* 使用变量 */
border: 1px dashed var(--border-color, #ccc); /* 使用变量 */
background-color: var(--header-bg-color, #f8f9fa); /* 使用变量 */
}
</style>
packages/frontend/src/components/StatusMonitor.vue
+15 -15
View File
@@ -190,9 +190,9 @@ const swapDisplay = computed(() => {
<style scoped>
.status-monitor {
padding: 1rem;
border-left: 1px solid #ccc;
background-color: #f9f9f9;
padding: var(--base-padding); /* Use theme variable */
border-left: 1px solid var(--border-color); /* Use theme variable */
background-color: var(--app-bg-color); /* Use theme variable */
height: 100%;
overflow-y: auto;
font-size: 0.9em;
@@ -200,17 +200,17 @@ const swapDisplay = computed(() => {
.status-monitor h4 {
margin-top: 0;
margin-bottom: 1rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.5rem;
margin-bottom: var(--base-padding); /* Use theme variable */
border-bottom: 1px solid var(--border-color); /* Use theme variable */
padding-bottom: var(--base-margin); /* Use theme variable */
font-size: 1em;
color: #333;
color: var(--text-color); /* Use theme variable */
}
.loading-status, .status-error {
color: #888;
color: var(--text-color-secondary); /* Use theme variable */
text-align: center;
margin-top: 1rem;
margin-top: var(--base-padding); /* Use theme variable */
}
.status-error {
color: #dc3545;
@@ -248,7 +248,7 @@ const swapDisplay = computed(() => {
text-overflow: ellipsis;
/* No longer needs grid-column span */
text-align: left;
color: #333;
color: var(--text-color); /* Use theme variable */
}
/* Specific style for OS name row - Keep consistent with general status-item */
@@ -265,20 +265,20 @@ const swapDisplay = computed(() => {
text-overflow: ellipsis;
text-align: left; /* Explicitly left align text */
/* justify-self: start; No longer needed with 2-col grid */
color: #333;
color: var(--text-color); /* Use theme variable */
min-width: auto; /* Override generic min-width */
}
.status-item label {
font-weight: bold;
color: #555;
color: var(--text-color-secondary); /* Use theme variable */
text-align: left; /* 改为左对齐 */
white-space: nowrap;
}
.progress-bar-container {
background-color: #e9ecef;
background-color: var(--header-bg-color); /* Use theme variable */
border-radius: 0.25rem;
height: 1rem; /* Adjust height */
overflow: hidden;
@@ -286,7 +286,7 @@ const swapDisplay = computed(() => {
}
.progress-bar {
background-color: #007bff; /* Blue for CPU/Mem/Disk */
background-color: var(--button-bg-color); /* Use theme variable for default bar */
height: 100%;
transition: width 0.3s ease-in-out;
text-align: center;
@@ -303,7 +303,7 @@ const swapDisplay = computed(() => {
font-variant-numeric: tabular-nums; /* Keep numbers aligned */
min-width: 45px; /* Ensure space for percentage */
text-align: left; /* 改为左对齐 */
color: #333;
color: var(--text-color); /* Use theme variable */
}
.mem-disk-details {
packages/frontend/src/components/TerminalTabBar.vue
+41 -35
View File
@@ -161,11 +161,17 @@ const handleTogglePane = (paneName: PaneName) => {
<style scoped>
.terminal-tab-bar {
display: flex;
background-color: #e0e0e0; /* 标签栏背景色 */
border-bottom: 1px solid #bdbdbd;
background-color: var(--header-bg-color, #e0e0e0); /* 使用变量 */
/* border-bottom: 1px solid var(--border-color, #bdbdbd); */ /* 移除底部边框，让主内容区处理 */
border: 1px solid var(--border-color, #bdbdbd); /* 添加完整边框 */
border-bottom: none; /* 明确移除底部边框 */
white-space: nowrap;
height: 2.5rem; /* 固定标签栏高度 */
box-sizing: border-box; /* 确保 padding 不会增加总高度 */
border-radius: 5px 5px 0 0; /* Top-left, Top-right, Bottom-right, Bottom-left */
margin: 0 var(--base-margin, 0.5rem); /* Add horizontal margin to match content area */
margin-top: var(--base-margin, 0.5rem); /* Add top margin */
overflow: hidden; /* Clip content to rounded corners */
}
/* 包裹标签和+按钮的容器 */
@@ -211,23 +217,22 @@ const handleTogglePane = (paneName: PaneName) => {
padding: 0 0.8rem; /* 基础内边距 */
height: 100%;
cursor: pointer;
border-right: 1px solid #bdbdbd;
border-right: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
box-sizing: border-box;
background-color: #f0f0f0; /* 未激活标签背景 */
color: #616161; /* 未激活标签文字颜色 */
background-color: var(--app-bg-color, #f0f0f0); /* 使用变量 - 未激活标签背景 */
color: var(--text-color-secondary, #616161); /* 使用变量 - 未激活标签文字颜色 */
transition: background-color 0.2s ease, color 0.2s ease;
/* max-width: 200px; */ /* 移除最大宽度限制 */
position: relative; /* 保持相对定位，以防万一需要定位子元素 */
}
.tab-item:hover {
background-color: #e0e0e0; /* 悬停时背景 */
background-color: var(--header-bg-color, #e0e0e0); /* 使用变量 - 悬停时背景 */
}
.tab-item.active {
background-color: #ffffff; /* 激活标签背景 */
color: #333333; /* 激活标签文字颜色 */
/* 移除所有可能影响高度的边框或伪元素 */
background-color: var(--app-bg-color, #ffffff); /* 使用变量 - 激活标签背景 */
color: var(--text-color, #333333); /* 使用变量 - 激活标签文字颜色 */
border-bottom-color: transparent; /* 隐藏激活标签的底部边框，模拟连接效果 */
position: relative;
z-index: 1;
}
@@ -244,10 +249,9 @@ const handleTogglePane = (paneName: PaneName) => {
}
.close-tab-button {
/* 恢复简单布局 */
background: none;
border: none;
color: #9e9e9e;
color: var(--text-color-secondary, #9e9e9e); /* 使用变量 */
cursor: pointer;
font-size: 1.1em;
padding: 0 0.3rem;
@@ -262,27 +266,27 @@ const handleTogglePane = (paneName: PaneName) => {
}
.close-tab-button:hover {
background-color: #bdbdbd;
color: #ffffff;
background-color: var(--border-color, #bdbdbd); /* 使用变量 */
color: var(--app-bg-color, #ffffff); /* 使用变量 */
}
.tab-item.active .close-tab-button {
color: #757575;
color: var(--text-color-secondary, #757575); /* 使用变量 */
}
.tab-item.active .close-tab-button:hover {
background-color: #e0e0e0;
color: #333333;
background-color: var(--header-bg-color, #e0e0e0); /* 使用变量 */
color: var(--text-color, #333333); /* 使用变量 */
}
/* 添加新标签按钮样式 */
.add-tab-button {
background: none;
border: none;
border-left: 1px solid #bdbdbd; /* 恢复左侧分隔线 */
border-left: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
padding: 0 0.8rem;
cursor: pointer;
font-size: 1.1em;
color: #616161;
color: var(--text-color-secondary, #616161); /* 使用变量 */
display: flex;
align-items: center;
justify-content: center;
@@ -290,7 +294,7 @@ const handleTogglePane = (paneName: PaneName) => {
flex-shrink: 0; /* 防止按钮被压缩 */
}
.add-tab-button:hover {
background-color: #d0d0d0;
background-color: var(--header-bg-color, #d0d0d0); /* 使用变量 */
}
.add-tab-button i {
line-height: 1; /* 确保图标垂直居中 */
@@ -309,11 +313,11 @@ const handleTogglePane = (paneName: PaneName) => {
.layout-config-button {
background: none;
border: none;
border-left: 1px solid #bdbdbd; /* 左侧分隔线 */
border-left: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
padding: 0 0.8rem;
cursor: pointer;
font-size: 1.1em; /* 与其他按钮一致 */
color: #616161;
color: var(--text-color-secondary, #616161); /* 使用变量 */
display: flex;
align-items: center;
justify-content: center;
@@ -321,7 +325,7 @@ const handleTogglePane = (paneName: PaneName) => {
flex-shrink: 0;
}
.layout-config-button:hover {
background-color: #d0d0d0;
background-color: var(--header-bg-color, #d0d0d0); /* 使用变量 */
}
.layout-config-button i {
line-height: 1;
@@ -343,7 +347,7 @@ const handleTogglePane = (paneName: PaneName) => {
}
.popup-content {
background-color: white;
background-color: var(--app-bg-color, white); /* 使用变量 */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
@@ -363,25 +367,25 @@ const handleTogglePane = (paneName: PaneName) => {
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #aaa;
color: var(--text-color-secondary, #aaa); /* 使用变量 */
line-height: 1;
}
.popup-close-button:hover {
color: #333;
color: var(--text-color, #333); /* 使用变量 */
}
.popup-content h3 {
margin-top: 0;
margin-bottom: 15px;
text-align: center;
color: #333;
color: var(--text-color, #333); /* 使用变量 */
}
.popup-connection-list {
flex-grow: 1; /* 让列表占据剩余空间 */
overflow-y: auto; /* 列表内容滚动 */
/* 可能需要覆盖 WorkspaceConnectionList 的一些默认样式 */
border: 1px solid #eee;
border: 1px solid var(--border-color); /* Use theme variable */
border-radius: 4px;
}
/* 覆盖 WorkspaceConnectionList 内部样式（如果需要） */
@@ -390,6 +394,7 @@ const handleTogglePane = (paneName: PaneName) => {
/* } */
:deep(.popup-connection-list .connection-list-area) {
padding: 0; /* 保持移除内边距 */
background-color: var(--app-bg-color); /* 确保列表背景 */
}
/* 调整：旧布局菜单容器样式 */
@@ -399,7 +404,7 @@ const handleTogglePane = (paneName: PaneName) => {
align-items: center;
height: 100%;
/* margin-left: auto; */ /* 移除：由父容器 .action-buttons-container 控制 */
border-left: 1px solid #bdbdbd; /* 保持左侧分隔线 */
border-left: 1px solid var(--border-color, #bdbdbd); /* 使用变量 */
flex-shrink: 0; /* 保持：防止被压缩 */
}
@@ -407,11 +412,11 @@ const handleTogglePane = (paneName: PaneName) => {
.layout-menu-button {
background: none;
border: none;
/* border-left: 1px solid #bdbdbd; */ /* 移除按钮左侧分隔线 */
/* border-left: 1px solid var(--border-color, #bdbdbd); */ /* 移除按钮左侧分隔线 */
padding: 0 0.8rem;
cursor: pointer;
font-size: 1.1em;
color: #616161;
color: var(--text-color-secondary, #616161); /* 使用变量 */
display: flex;
align-items: center;
justify-content: center;
@@ -419,7 +424,7 @@ const handleTogglePane = (paneName: PaneName) => {
flex-shrink: 0;
}
.layout-menu-button:hover {
background-color: #d0d0d0;
background-color: var(--header-bg-color, #d0d0d0); /* 使用变量 */
}
.layout-menu-button i {
line-height: 1;
@@ -429,9 +434,9 @@ const handleTogglePane = (paneName: PaneName) => {
position: absolute; /* 恢复绝对定位 */
top: 100%; /* 定位在按钮下方 */
right: 0; /* 对齐到右侧 */
background-color: white; /* 恢复默认背景色 */
background-color: var(--app-bg-color, white); /* 使用变量 */
/* min-height: 20px; */ /* 移除临时调试最小高度 */
border: 1px solid #ccc;
border: 1px solid var(--border-color, #ccc); /* 使用变量 */
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
z-index: 9999; /* 保持高 z-index */
min-width: 150px; /* 最小宽度 */
@@ -451,10 +456,11 @@ const handleTogglePane = (paneName: PaneName) => {
white-space: nowrap;
display: flex;
align-items: center;
color: var(--text-color); /* 使用变量 */
}
.layout-menu-dropdown li:hover {
background-color: #f0f0f0;
background-color: var(--header-bg-color, #f0f0f0); /* 使用变量 */
}
.layout-menu-dropdown .checkmark {
packages/frontend/src/components/WorkspaceConnectionList.vue
+41 -42
View File
@@ -265,41 +265,43 @@ const handleOpenInNewTab = (connectionId: number) => {
display: flex;
flex-direction: column;
overflow: hidden; /* 防止内部滚动条影响布局 */
background-color: #f8f9fa;
background-color: var(--app-bg-color); /* Use theme variable */
font-size: 0.9em;
}
.search-add-bar {
display: flex;
padding: 0.5rem;
border-bottom: 1px solid #dee2e6;
background-color: #e9ecef; /* 给搜索栏一个背景色 */
padding: var(--base-margin); /* Use theme variable */
border-bottom: 1px solid var(--border-color); /* Use theme variable */
background-color: var(--header-bg-color); /* Use theme variable */
}
.search-input {
flex-grow: 1;
padding: 0.4rem 0.6rem;
border: 1px solid #ced4da;
border: 1px solid var(--border-color); /* Use theme variable */
border-radius: 4px 0 0 4px; /* 左侧圆角 */
font-size: 0.9em;
outline: none;
background-color: var(--app-bg-color); /* Use theme variable */
color: var(--text-color); /* Use theme variable */
}
.search-input:focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
border-color: var(--button-bg-color); /* Use theme variable */
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Keep existing shadow or define a variable */
}
.add-button {
padding: 0.4rem 0.8rem;
border: 1px solid #ced4da;
border: 1px solid var(--border-color); /* Use theme variable */
border-left: none; /* 移除左边框，与输入框合并 */
background-color: #f8f9fa;
background-color: var(--app-bg-color); /* Use theme variable */
cursor: pointer;
border-radius: 0 4px 4px 0; /* 右侧圆角 */
color: #495057;
color: var(--text-color); /* Use theme variable */
}
.add-button:hover {
background-color: #e2e6ea;
background-color: var(--header-bg-color); /* Use theme variable */
}
.add-button i {
font-size: 1em; /* 图标大小 */
@@ -308,14 +310,13 @@ const handleOpenInNewTab = (connectionId: number) => {
.connection-list-area {
flex-grow: 1; /* 占据剩余空间 */
overflow-y: auto; /* 列表内容滚动 */
padding: 0.5rem 0;
}
.loading, .error, .no-connections, .no-results {
padding: 1rem;
padding: var(--base-padding); /* Use theme variable */
text-align: center;
color: #6c757d;
color: var(--text-color-secondary); /* Use theme variable */
}
.error {
color: #dc3545;
@@ -327,19 +328,20 @@ const handleOpenInNewTab = (connectionId: number) => {
.add-connection-button {
display: block;
width: calc(100% - 1rem); /* Adjust width */
margin: 0.5rem;
padding: 0.5rem;
width: calc(100% - 2 * var(--base-margin)); /* Use theme variable */
margin: var(--base-margin); /* Use theme variable */
padding: var(--base-margin); /* Use theme variable */
text-align: left;
background-color: #e9ecef;
border: 1px solid #ced4da;
background-color: var(--header-bg-color); /* Use theme variable */
border: 1px solid var(--border-color); /* Use theme variable */
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
color: #495057;
color: var(--text-color); /* Use theme variable */
}
.add-connection-button:hover {
background-color: #dee2e6;
background-color: var(--header-bg-color); /* Use theme variable (or darker variant) */
filter: brightness(0.95); /* Example: slightly darken */
}
.add-connection-button i {
margin-right: 0.5rem;
@@ -354,15 +356,16 @@ const handleOpenInNewTab = (connectionId: number) => {
padding: 0.4rem 0.8rem;
font-weight: bold;
cursor: pointer;
background-color: #e9ecef;
border-top: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
background-color: var(--header-bg-color); /* Use theme variable */
border-top: 1px solid var(--border-color); /* Use theme variable */
border-bottom: 1px solid var(--border-color); /* Use theme variable */
display: flex;
align-items: center;
color: #495057;
color: var(--text-color); /* Use theme variable */
}
.group-header:hover {
background-color: #ced4da;
background-color: var(--header-bg-color); /* Use theme variable */
filter: brightness(0.95); /* Example: slightly darken on hover */
}
.group-header i {
@@ -371,13 +374,7 @@ const handleOpenInNewTab = (connectionId: number) => {
text-align: center;
transition: transform 0.2s ease-in-out;
}
/* Rotate chevron when collapsed */
.group-header i.fa-chevron-right {
/* transform: rotate(0deg); */ /* Default state */
}
.group-header i.fa-chevron-down {
/* transform: rotate(90deg); */ /* Rotated state */
}
.connection-items {
@@ -391,19 +388,20 @@ const handleOpenInNewTab = (connectionId: number) => {
cursor: pointer;
display: flex;
align-items: center;
border-bottom: 1px solid #f1f3f5; /* Lighter separator */
border-bottom: 1px solid var(--border-color); /* Use theme variable */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-color); /* Use theme variable */
}
.connection-item:hover {
background-color: #e9ecef;
background-color: var(--header-bg-color); /* Use theme variable */
}
.connection-icon {
margin-right: 0.6rem;
color: #6c757d;
color: var(--text-color-secondary); /* Use theme variable */
width: 1em;
text-align: center;
}
@@ -418,11 +416,11 @@ const handleOpenInNewTab = (connectionId: number) => {
/* Context Menu Styles */
.context-menu {
position: fixed;
background-color: white;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
background-color: var(--app-bg-color); /* Use theme variable */
border: 1px solid var(--border-color); /* Use theme variable */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); /* Keep shadow or define variable */
border-radius: 4px;
padding: 0.5rem 0;
padding: var(--base-margin) 0; /* Use theme variable */
z-index: 1001; /* Above the list */
min-width: 150px;
}
@@ -438,14 +436,15 @@ const handleOpenInNewTab = (connectionId: number) => {
cursor: pointer;
display: flex;
align-items: center;
color: var(--text-color); /* Use theme variable */
}
.context-menu li:hover {
background-color: #f0f0f0;
background-color: var(--header-bg-color); /* Use theme variable */
}
.context-menu li i {
margin-right: 0.75rem;
width: 1em;
text-align: center;
color: #495057;
color: var(--text-color); /* Use theme variable */
}
</style>
packages/frontend/src/views/AuditLogView.vue
+139 -8
View File
@@ -145,24 +145,155 @@ const paginationRange = computed(() => {
<style scoped>
.audit-log-view {
padding: 20px;
padding: var(--base-padding, 20px); /* 使用变量 */
color: var(--text-color);
background-color: var(--app-bg-color);
min-height: calc(100vh - 60px); /* Example: Adjust based on header/footer height */
}
.audit-log-view h1 {
margin-bottom: calc(var(--base-margin, 1rem) * 2); /* Add space below title */
color: var(--text-color); /* Ensure title color */
}
.loading-indicator, .error-message {
margin-top: 1rem;
margin-top: var(--base-margin, 1rem); /* 使用变量 */
text-align: center;
color: var(--text-color-secondary); /* 使用次要文本颜色 */
}
.error-message {
color: var(--bs-danger);
color: var(--bs-danger); /* 保留特定错误颜色 */
}
/* 表格容器，增加边框和圆角 */
.table-container {
border: 1px solid var(--border-color, #dee2e6);
border-radius: 5px;
overflow: hidden; /* Ensures border-radius clips table corners */
margin-top: var(--base-margin, 1rem);
background-color: var(--app-bg-color); /* Ensure background */
}
/* 表格样式 */
.table {
width: 100%;
/* margin-top: var(--base-margin, 1rem); */ /* Moved margin to container */
border-collapse: collapse; /* 移除单元格间距 */
/* background-color: var(--app-bg-color); */ /* Background on container */
color: var(--text-color); /* 确保文本颜色 */
border: none; /* Remove table's own border if container has one */
}
.table th,
.table td {
padding: 0.8rem 1rem; /* Slightly increase padding */
vertical-align: middle; /* Align vertically in the middle */
border-top: 1px solid var(--border-color, #dee2e6); /* 使用变量 */
text-align: left; /* 确保左对齐 */
}
/* Remove top border for the first row */
.table tbody tr:first-child td {
border-top: none;
}
.table thead th {
padding: 0.8rem 1rem; /* Match cell padding */
vertical-align: bottom;
border-bottom: 2px solid var(--border-color, #dee2e6); /* 使用变量，加粗底部边框 */
border-top: none; /* No top border for header */
background-color: var(--header-bg-color, #f8f9fa); /* 使用变量 */
color: var(--text-color); /* 确保表头文本颜色 */
font-weight: 600; /* Slightly less bold */
white-space: nowrap; /* Prevent header text wrapping */
}
/* 条纹样式 */
.table-striped tbody tr:nth-of-type(odd) {
background-color: var(--header-bg-color, #f8f9fa); /* Use header bg for subtle stripe */
/* Ensure text color remains readable */
color: var(--text-color);
}
.table-striped tbody tr:nth-of-type(even) {
background-color: var(--app-bg-color); /* Ensure even rows match app background */
}
/* 悬停样式 */
.table-hover tbody tr:hover {
background-color: rgba(0, 0, 0, 0.05); /* Subtle hover effect */
/* Or use a variable like --row-hover-bg-color */
cursor: default; /* Indicate non-interactive rows */
}
pre {
white-space: pre-wrap; /* Allow wrapping */
word-break: break-all; /* Break long strings */
background-color: #f8f9fa;
padding: 0.5rem;
border-radius: 0.25rem;
font-size: 0.9em;
background-color: var(--app-bg-color); /* Match app background */
padding: calc(var(--base-padding, 0.5rem) * 0.8); /* Slightly smaller padding */
border: 1px solid var(--border-color, #dee2e6); /* 添加边框 */
border-radius: 4px; /* Consistent border radius */
font-size: 0.85em; /* Slightly smaller font */
color: var(--text-color); /* 确保文本颜色 */
max-height: 150px; /* Limit height */
overflow-y: auto; /* Add scroll if needed */
margin: 0; /* Remove default margin */
}
/* 分页样式 */
.pagination {
margin-top: 1.5rem;
margin-top: calc(var(--base-margin, 1rem) * 1.5); /* 使用变量 */
}
.page-item .page-link {
color: var(--link-color, #007bff); /* 使用变量 */
background-color: var(--app-bg-color);
border: 1px solid var(--border-color, #dee2e6);
margin: 0 2px; /* Add small horizontal margin */
border-radius: 4px; /* Add border radius */
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Smooth transition */
}
.page-item.active .page-link {
z-index: 3;
color: var(--button-text-color, #fff); /* 使用变量 */
background-color: var(--button-bg-color, #007bff); /* 使用变量 */
border-color: var(--button-bg-color, #007bff); /* 使用变量 */
}
.page-item.disabled .page-link {
color: var(--text-color-secondary, #6c757d); /* 使用变量 */
pointer-events: none;
background-color: var(--app-bg-color);
border-color: var(--border-color, #dee2e6);
opacity: 0.65; /* Indicate disabled state */
}
.page-link:hover:not(.active) { /* Apply hover only if not active */
color: var(--link-hover-color, #0056b3); /* 使用变量 */
background-color: var(--header-bg-color, #e9ecef); /* 使用变量 */
border-color: var(--border-color, #dee2e6);
}
/* Remove border from the pagination container itself */
.pagination {
border: none;
}
/* Alert 样式 */
.alert-info {
color: var(--text-color); /* 调整颜色使其更通用 */
background-color: var(--header-bg-color, #e9ecef); /* 使用变量 */
border-color: var(--border-color, #dee2e6); /* 使用变量 */
padding: var(--base-padding, 1rem);
margin-top: var(--base-margin, 1rem);
border-radius: 0.25rem;
}
.text-muted {
color: var(--text-color-secondary) !important; /* 确保覆盖 Bootstrap */
}
</style>
packages/frontend/src/views/CommandHistoryView.vue
+69 -35
View File
@@ -1,7 +1,10 @@
<template>
<div class="command-history-view">
<!-- 移除 PaneTitleBar -->
<div class="history-controls">
<!-- Removed original top controls -->
<div class="history-list-container">
<!-- Moved controls inside the container -->
<div class="embedded-controls">
<input
type="text"
:placeholder="$t('commandHistory.searchPlaceholder', '搜索历史记录...')"
@@ -10,10 +13,9 @@
class="search-input"
/>
<button @click="confirmClearAll" class="clear-button" :title="$t('commandHistory.clear', '清空')">
<i class="fas fa-trash-alt"></i> <!-- 假设使用 Font Awesome -->
<i class="fas fa-trash-alt"></i>
</button>
</div>
<div class="history-list-container">
<ul v-if="filteredHistory.length > 0" class="history-list">
<li
v-for="entry in filteredHistory"
@@ -120,45 +122,71 @@ const executeCommand = (command: string) => {
flex-direction: column;
height: 100%; /* 填充父 Pane 高度 */
overflow: hidden;
background-color: var(--color-bg-secondary);
background-color: var(--app-bg-color); /* Use standard app background */
padding: 0.5rem; /* Keep overall padding */
box-sizing: border-box;
}
.history-controls {
/* Remove original .history-controls styles */
/* .history-controls { ... } */
/* Styles for controls embedded within the list container */
.embedded-controls {
display: flex;
align-items: center;
padding: 8px;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg-tertiary);
flex-shrink: 0; /* 防止被压缩 */
padding: 0.5rem; /* Add padding around embedded controls */
/* Removed border-bottom and margin-bottom */
flex-shrink: 0;
gap: 0.25rem;
}
.search-input {
flex-grow: 1;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-input-bg);
color: var(--color-text);
margin-right: 8px;
min-width: 8px; /* Added smaller min-width */
padding: 0.3rem 0.5rem; /* Reduced padding */
border: 1px solid var(--border-color); /* Use standard border color */
border-radius: 4px; /* Consistent border radius */
background-color: var(--app-bg-color); /* Use app background */
color: var(--text-color); /* Use standard text color */
/* margin-right: 8px; */ /* Replaced by gap */
font-size: 0.9em;
}
.search-input:focus {
outline: none;
border-color: var(--button-bg-color); /* Highlight border on focus */
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Example focus shadow */
}
.clear-button {
background: none;
border: none;
color: var(--color-text-secondary);
border: 1px solid var(--border-color); /* Add border */
color: var(--text-color-secondary); /* Use standard secondary text color */
cursor: pointer;
padding: 5px;
font-size: 1.1em;
padding: 0.3rem 0.5rem; /* Reduced padding */
font-size: 0.9em; /* Match input font size */
line-height: 1;
border-radius: 4px; /* Consistent border radius */
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.clear-button:hover {
color: var(--color-danger);
color: var(--bs-danger, red); /* Use danger color on hover */
border-color: var(--bs-danger, red);
background-color: rgba(220, 53, 69, 0.1); /* Subtle danger background */
}
.clear-button i {
display: block; /* Ensure icon takes space */
}
.history-list-container {
flex-grow: 1; /* 占据剩余空间 */
overflow-y: auto; /* 超出时显示滚动条 */
border: 1px solid var(--border-color); /* Keep border */
border-radius: 5px; /* Keep radius */
background-color: var(--app-bg-color); /* Ensure background */
/* Add display:flex and flex-direction:column to stack controls and list */
display: flex;
flex-direction: column;
}
.history-list {
@@ -171,18 +199,18 @@ const executeCommand = (command: string) => {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
cursor: default; /* 列表项本身不可点击 */
border-bottom: 1px solid var(--color-border-light);
transition: background-color 0.2s ease;
padding: 0.4rem 0.75rem; /* Reduced padding */
cursor: pointer; /* Make item clickable */
border-bottom: 1px solid var(--border-color); /* Use standard border color */
transition: background-color 0.15s ease;
}
.history-item:last-child {
border-bottom: none;
border-bottom: none; /* Keep removing border for last item */
}
.history-item:hover {
background-color: var(--color-bg-hover);
background-color: var(--header-bg-color); /* Use header background for hover */
}
.command-text {
@@ -191,8 +219,9 @@ const executeCommand = (command: string) => {
text-overflow: ellipsis;
margin-right: 10px;
flex-grow: 1;
font-family: var(--font-family-mono);
font-family: var(--font-family-mono, monospace); /* Use mono font variable */
font-size: 0.9em;
color: var(--text-color); /* Use standard text color */
}
.item-actions {
@@ -204,26 +233,31 @@ const executeCommand = (command: string) => {
.action-button {
background: none;
border: none;
color: var(--color-text-secondary);
color: var(--text-color-secondary); /* Use standard secondary text color */
cursor: pointer;
padding: 2px 4px;
margin-left: 6px;
font-size: 0.9em;
padding: 2px 4px; /* Reduced padding */
margin-left: 4px; /* Reduced margin */
font-size: 1em; /* Slightly larger icon size */
line-height: 1;
border-radius: 4px; /* Add radius for hover */
transition: color 0.15s ease, background-color 0.15s ease;
}
.action-button:hover {
color: var(--color-primary);
background-color: rgba(128, 128, 128, 0.1); /* Subtle hover background */
color: var(--link-hover-color); /* Use link hover color */
}
.action-button.delete:hover {
color: var(--color-danger);
color: var(--bs-danger, red); /* Use danger color */
background-color: rgba(220, 53, 69, 0.1); /* Subtle danger background */
}
.loading-message,
.empty-message {
padding: 20px;
padding: calc(var(--base-padding, 1rem) * 2); /* Increase padding */
text-align: center;
color: var(--color-text-secondary);
color: var(--text-color-secondary); /* Use standard secondary text color */
font-style: italic;
}
</style>
packages/frontend/src/views/ConnectionsView.vue
+21 -3
View File
@@ -237,26 +237,44 @@ const handleFileChange = async (event: Event) => {
<style scoped>
.connections-view {
padding: 1rem;
padding: var(--base-padding, 1rem); /* 使用变量 */
color: var(--text-color);
background-color: var(--app-bg-color);
}
.actions-bar {
display: flex;
justify-content: space-between; /* 让按钮和下拉框分开 */
align-items: center;
margin-bottom: 1rem;
margin-bottom: var(--base-margin, 1rem); /* 使用变量 */
}
.actions-bar button {
/* margin-bottom: 1rem; */ /* 移除按钮的下边距 */
padding: 0.5rem 1rem;
cursor: pointer;
background-color: var(--button-bg-color, #007bff); /* 使用变量 */
color: var(--button-text-color, #ffffff); /* 使用变量 */
border: none; /* 移除默认边框 */
border-radius: 4px;
}
.actions-bar button:hover:not(:disabled) {
background-color: var(--button-hover-bg-color, #0056b3); /* 使用变量 */
}
.actions-bar button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.tag-filter-select {
padding: 0.4rem 0.8rem;
border: 1px solid #ccc;
border: 1px solid var(--border-color, #ccc); /* 使用变量 */
border-radius: 4px;
min-width: 150px; /* 给下拉框一个最小宽度 */
color: var(--text-color); /* 确保文本颜色 */
background-color: var(--app-bg-color); /* 确保背景色 */
font-family: var(--font-family-sans-serif, sans-serif); /* 使用变量 */
}
</style>
packages/frontend/src/views/NotificationsView.vue
+3 -1
View File
@@ -12,6 +12,8 @@ import NotificationSettings from '../components/NotificationSettings.vue';
<style scoped>
.notifications-view {
padding: 20px;
padding: var(--base-padding, 20px); /* 使用变量 */
color: var(--text-color);
background-color: var(--app-bg-color);
}
</style>
packages/frontend/src/views/ProxiesView.vue
+23 -6
View File
@@ -63,19 +63,36 @@ const closeForm = () => {
<style scoped>
.proxies-view {
padding: 1rem;
padding: var(--base-padding, 1rem); /* 使用变量 */
color: var(--text-color);
background-color: var(--app-bg-color);
}
button {
margin-bottom: 1rem;
margin-bottom: var(--base-margin, 1rem); /* 使用变量 */
padding: 0.5rem 1rem;
cursor: pointer;
background-color: var(--button-bg-color, #007bff); /* 使用变量 */
color: var(--button-text-color, #ffffff); /* 使用变量 */
border: none; /* 移除默认边框 */
border-radius: 4px;
}
button:hover:not(:disabled) {
background-color: var(--button-hover-bg-color, #0056b3); /* 使用变量 */
}
button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* 保持 placeholder 样式，但使用变量 */
.placeholder-form, .placeholder-list {
border: 1px dashed #ccc;
padding: 1rem;
margin-top: 1rem;
background-color: #f9f9f9;
border: 1px dashed var(--border-color, #ccc); /* 使用变量 */
padding: var(--base-padding, 1rem); /* 使用变量 */
margin-top: var(--base-margin, 1rem); /* 使用变量 */
background-color: var(--header-bg-color, #f9f9f9); /* 使用变量，选择一个合适的背景色 */
color: var(--text-color-secondary); /* 使用次要文本颜色 */
}
</style>
packages/frontend/src/views/QuickCommandsView.vue
+120 -76
View File
@@ -1,6 +1,9 @@
<template>
<div class="quick-commands-view">
<div class="view-header">
<!-- Removed original top controls -->
<div class="commands-list-container">
<!-- Moved controls inside the container -->
<div class="embedded-controls">
<input
type="text"
:placeholder="$t('quickCommands.searchPlaceholder', '搜索名称或指令...')"
@@ -8,19 +11,13 @@
@input="updateSearchTerm($event)"
class="search-input"
/>
<div class="sort-controls">
<label for="sort-select">{{ t('quickCommands.sortBy', '排序:') }}</label>
<select id="sort-select" :value="sortBy" @change="updateSortBy($event)">
<option value="name">{{ t('quickCommands.sortByName', '名称') }}</option>
<option value="usage_count">{{ t('quickCommands.sortByUsage', '使用频率') }}</option>
</select>
</div>
<button @click="openAddForm" class="add-button" :title="$t('quickCommands.add', '添加快捷指令')">
<i class="fas fa-plus"></i> {{ t('quickCommands.add', '添加') }}
<button @click="toggleSortBy" class="sort-toggle-button" :title="sortButtonTitle">
<i :class="sortButtonIcon"></i>
</button>
<button @click="openAddForm" class="add-button icon-only" :title="$t('quickCommands.add', '添加快捷指令')">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="commands-list-container">
<ul v-if="filteredAndSortedCommands.length > 0" class="commands-list">
<li
v-for="cmd in filteredAndSortedCommands"
@@ -100,12 +97,25 @@ const updateSearchTerm = (event: Event) => {
quickCommandsStore.setSearchTerm(target.value);
};
const updateSortBy = (event: Event) => {
const target = event.target as HTMLSelectElement;
const newSortBy = target.value as QuickCommandSortByType;
// 切换排序方式
const toggleSortBy = () => {
const newSortBy = sortBy.value === 'name' ? 'usage_count' : 'name';
quickCommandsStore.setSortBy(newSortBy);
};
// 计算排序按钮的 title 和 icon
const sortButtonTitle = computed(() => {
return sortBy.value === 'name'
? t('quickCommands.sortByName', '按名称排序')
: t('quickCommands.sortByUsage', '按使用频率排序');
});
const sortButtonIcon = computed(() => {
// 使用 Font Awesome 图标示例
return sortBy.value === 'name' ? 'fas fa-sort-alpha-down' : 'fas fa-sort-numeric-down';
});
const openAddForm = () => {
commandToEdit.value = null;
isFormVisible.value = true;
@@ -141,73 +151,103 @@ const executeCommand = (command: QuickCommandFE) => {
.quick-commands-view {
display: flex;
flex-direction: column;
height: 100%;
height: 100%; /* Occupy available height */
overflow: hidden;
background-color: var(--color-bg-secondary);
background-color: var(--app-bg-color); /* Use standard app background */
padding: 0.5rem; /* Keep overall padding */
box-sizing: border-box;
}
.view-header {
/* Remove original .view-header styles */
/* .view-header { ... } */
/* Styles for controls embedded within the list container */
.embedded-controls {
display: flex;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg-tertiary);
flex-wrap: wrap; /* Allow wrapping */
padding: 0.5rem; /* Add padding around embedded controls */
/* Removed border-bottom and margin-bottom */
flex-shrink: 0;
gap: 0.25rem;
}
.search-input {
flex-grow: 1;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-input-bg);
color: var(--color-text);
margin-right: 12px;
flex-grow: 1; /* Allow search to grow */
flex-basis: 10px; /* Give search a base width before growing */
min-width: 8px; /* Reduced min-width */
padding: 0.3rem 0.5rem; /* Reduced padding */
border: 1px solid var(--border-color); /* Use standard border color */
border-radius: 4px; /* Consistent border radius */
background-color: var(--app-bg-color); /* Use app background for input */
color: var(--text-color); /* Use standard text color */
/* margin-right: 12px; */ /* Replaced by gap */
font-size: 0.9em;
}
.sort-controls {
display: flex;
align-items: center;
margin-right: 12px;
.search-input:focus {
outline: none;
border-color: var(--button-bg-color); /* Highlight border on focus */
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Example focus shadow */
}
.sort-controls label {
margin-right: 6px;
font-size: 0.9em;
color: var(--color-text-secondary);
/* 移除 .sort-controls 和 select 样式 */
.sort-toggle-button {
background: none;
border: 1px solid var(--border-color);
color: var(--text-color-secondary);
cursor: pointer;
padding: 0.3rem 0.5rem; /* Match input padding */
font-size: 0.9em; /* Match input font size */
line-height: 1;
border-radius: 4px;
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
flex-shrink: 0; /* Prevent shrinking */
}
.sort-toggle-button:hover {
color: var(--text-color);
border-color: var(--button-bg-color);
background-color: rgba(128, 128, 128, 0.1);
}
.sort-toggle-button i {
display: block; /* Ensure icon takes space */
}
.sort-controls select {
padding: 5px 8px;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-input-bg);
color: var(--color-text);
font-size: 0.9em;
}
.add-button {
padding: 6px 12px;
background-color: var(--color-primary);
color: white;
padding: 0.3rem 0.6rem; /* Default padding */
background-color: var(--button-bg-color); /* Use standard button color */
color: var(--button-text-color); /* Use standard button text color */
border: none;
border-radius: 3px;
border-radius: 4px; /* Consistent border radius */
cursor: pointer;
font-size: 0.9em;
display: flex;
align-items: center;
white-space: nowrap;
transition: background-color 0.15s ease;
flex-shrink: 0; /* Prevent shrinking */
}
.add-button.icon-only {
padding: 0.3rem 0.5rem; /* Slightly adjust padding for icon only */
}
.add-button i {
margin-right: 4px;
margin-right: 0; /* Remove margin when text is gone */
}
.add-button:hover {
background-color: var(--color-primary-dark);
background-color: var(--button-hover-bg-color); /* Use standard hover color */
}
.commands-list-container {
flex-grow: 1;
overflow-y: auto;
/* Add subtle border/background for visual separation */
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--app-bg-color);
/* Add display:flex and flex-direction:column to stack controls and list */
display: flex;
flex-direction: column;
}
.commands-list {
@@ -220,18 +260,18 @@ const executeCommand = (command: QuickCommandFE) => {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
padding: 0.4rem 0.75rem; /* Reduced padding */
cursor: pointer;
border-bottom: 1px solid var(--color-border-light);
transition: background-color 0.2s ease;
border-bottom: 1px solid var(--border-color); /* Use standard border color */
transition: background-color 0.15s ease;
}
.command-item:last-child {
border-bottom: none;
border-bottom: none; /* Keep removing border for last item */
}
.command-item:hover {
background-color: var(--color-bg-hover);
background-color: var(--header-bg-color); /* Use header background for hover */
}
.command-info {
@@ -243,8 +283,8 @@ const executeCommand = (command: QuickCommandFE) => {
}
.command-name {
font-weight: bold;
color: var(--color-text);
font-weight: 500; /* Medium weight */
color: var(--text-color); /* Use standard text color */
font-size: 0.95em;
white-space: nowrap;
overflow: hidden;
@@ -256,13 +296,13 @@ const executeCommand = (command: QuickCommandFE) => {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-family-mono);
font-family: var(--font-family-mono, monospace); /* Use mono font variable */
font-size: 0.85em;
color: var(--color-text-secondary);
color: var(--text-color-secondary); /* Use standard secondary text color */
}
.command-text.full-width { /* 当没有名称时，指令占据全部空间 */
font-size: 0.9em; /* 可以稍微大一点 */
color: var(--color-text); /* 颜色也可以更深 */
color: var(--text-color); /* Use standard text color */
}
@@ -274,40 +314,44 @@ const executeCommand = (command: QuickCommandFE) => {
.usage-count {
font-size: 0.8em;
color: var(--color-text-muted);
margin-right: 8px;
background-color: var(--color-bg-tertiary);
padding: 2px 5px;
border-radius: 3px;
min-width: 18px; /* 保证宽度 */
color: var(--text-color-secondary); /* Use standard secondary text color */
margin-right: 4px; /* Reduced margin */
background-color: var(--header-bg-color); /* Use header background */
padding: 2px 4px; /* Reduced padding */
border-radius: 4px; /* Consistent border radius */
min-width: 18px; /* Adjust min-width */
text-align: center;
font-weight: 500;
}
.action-button {
background: none;
border: none;
color: var(--color-text-secondary);
color: var(--text-color-secondary); /* Use standard secondary text color */
cursor: pointer;
padding: 2px 4px;
margin-left: 6px;
font-size: 0.9em;
padding: 2px 4px; /* Reduced padding */
margin-left: 4px; /* Reduced margin */
font-size: 1em; /* Slightly larger icon size */
line-height: 1;
border-radius: 4px; /* Add radius for hover effect */
transition: color 0.15s ease, background-color 0.15s ease;
}
.action-button:hover {
color: var(--color-primary);
background-color: rgba(128, 128, 128, 0.1); /* Subtle hover background */
}
.action-button.edit:hover {
color: var(--color-warning); /* 编辑按钮用警告色 */
color: var(--bs-warning, orange); /* Use Bootstrap warning or fallback */
}
.action-button.delete:hover {
color: var(--color-danger);
color: var(--bs-danger, red); /* Use Bootstrap danger or fallback */
}
.loading-message,
.empty-message {
padding: 20px;
padding: var(--base-padding, 1rem) * 2; /* Increase padding */
text-align: center;
color: var(--color-text-secondary);
color: var(--text-color-secondary); /* Use standard secondary text color */
font-style: italic;
}
</style>
packages/frontend/src/views/SettingsView.vue
+30 -15
View File
@@ -574,14 +574,17 @@ onMounted(async () => {
<style scoped>
.settings-view {
padding: 20px;
padding: var(--base-padding, 20px); /* 使用变量，保留默认值 */
color: var(--text-color);
background-color: var(--app-bg-color);
}
.settings-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #ccc;
margin-bottom: calc(var(--base-margin, 0.5rem) * 3); /* 调整间距 */
padding: var(--base-padding, 20px); /* 使用变量 */
border: 1px solid var(--border-color, #ccc); /* 使用变量 */
border-radius: 5px;
background-color: var(--app-bg-color); /* 确保背景色一致 */
}
.form-group {
@@ -598,12 +601,14 @@ input[type="text"],
textarea,
select { /* Add select style */
width: 100%;
padding: 8px;
padding: 8px; /* 保持特定内边距 */
box-sizing: border-box;
border: 1px solid #ccc;
border: 1px solid var(--border-color, #ccc); /* 使用变量 */
border-radius: 4px;
font-family: inherit;
font-family: var(--font-family-sans-serif, sans-serif); /* 使用变量 */
font-size: inherit;
color: var(--text-color); /* 确保输入文本颜色 */
background-color: var(--app-bg-color); /* 确保输入背景色 */
}
textarea {
@@ -615,13 +620,21 @@ small {
display: block;
margin-top: 5px;
font-size: 0.85em;
color: #666;
color: var(--text-color-secondary, #666); /* 使用变量 */
}
button {
padding: 10px 15px;
cursor: pointer;
background-color: var(--button-bg-color, #007bff); /* 使用变量 */
color: var(--button-text-color, #ffffff); /* 使用变量 */
border: none; /* 移除默认边框 */
border-radius: 4px;
}
button:hover:not(:disabled) {
background-color: var(--button-hover-bg-color, #0056b3); /* 使用变量 */
}
button:disabled {
@@ -631,14 +644,15 @@ button:disabled {
hr {
border: none;
border-top: 1px solid #eee;
border-top: 1px solid var(--border-color, #eee); /* 使用变量 */
margin: 30px 0;
}
code {
background-color: #f1f1f1;
background-color: var(--header-bg-color, #f1f1f1); /* 使用变量 */
padding: 2px 4px;
border-radius: 3px;
color: var(--text-color); /* 确保代码文本颜色 */
font-family: monospace;
}
@@ -667,7 +681,7 @@ img {
.blacklist-table th,
.blacklist-table td {
border: 1px solid #ddd;
border: 1px solid var(--border-color, #ddd); /* 使用变量 */
padding: 8px;
text-align: left;
}
@@ -690,13 +704,14 @@ img {
}
.blacklist-table th {
background-color: #f2f2f2;
background-color: var(--header-bg-color, #f2f2f2); /* 使用变量 */
font-weight: bold;
color: var(--text-color); /* 确保表头文本颜色 */
}
.blacklist-table .btn-danger {
background-color: #dc3545;
color: white;
background-color: #dc3545; /* 保留危险色 */
color: var(--button-text-color, white); /* 使用变量 */
border: none;
padding: 5px 10px;
border-radius: 4px;
@@ -710,7 +725,7 @@ img {
.loading-message {
margin-top: 15px;
color: #666;
color: var(--text-color-secondary, #666); /* 使用变量 */
}
/* Pagination Styles (Optional) */
packages/frontend/src/views/WorkspaceView.vue
+10 -5
View File
@@ -299,13 +299,18 @@ onBeforeUnmount(() => {
flex-direction: column;
height: calc(100vh - 60px - 30px - 2rem); /* 保持原始高度计算 */
overflow: hidden;
background-color: var(--app-bg-color); /* Added app background */
}
.main-content-area {
display: flex;
flex: 1;
overflow: hidden;
border-top: 1px solid #ccc;
overflow: hidden; /* Keep overflow hidden */
border: 1px solid var(--border-color, #ccc); /* Use variable for border */
border-top: none; /* Remove top border as it's handled by the tab bar */
border-radius: 0 0 5px 5px; /* Top-left, Top-right, Bottom-right, Bottom-left */
margin: var(--base-margin, 0.5rem); /* Add some margin around the content area */
margin-top: 0; /* Remove top margin if tab bar is directly above */
}
.layout-renderer-wrapper {
@@ -322,10 +327,10 @@ onBeforeUnmount(() => {
justify-content: center;
align-items: center;
text-align: center;
color: #adb5bd;
background-color: #f8f9fa;
color: var(--text-color-secondary); /* Use secondary text color variable */
background-color: var(--header-bg-color); /* Use header background for slight contrast */
font-size: 0.9em;
padding: 1rem;
padding: var(--base-padding); /* Use base padding variable */
}
/* 移除旧的、不再需要的特定面板样式，因为渲染由 LayoutRenderer 处理 */