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/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
+78 -44
View File
@@ -1,19 +1,21 @@
<template>
<div class="command-history-view">
<!-- 移除 PaneTitleBar -->
<div class="history-controls">
<input
type="text"
:placeholder="$t('commandHistory.searchPlaceholder', '搜索历史记录...')"
:value="searchTerm"
@input="updateSearchTerm($event)"
class="search-input"
/>
<button @click="confirmClearAll" class="clear-button" :title="$t('commandHistory.clear', '清空')">
<i class="fas fa-trash-alt"></i> <!-- 假设使用 Font Awesome -->
</button>
</div>
<!-- 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', '搜索历史记录...')"
:value="searchTerm"
@input="updateSearchTerm($event)"
class="search-input"
/>
<button @click="confirmClearAll" class="clear-button" :title="$t('commandHistory.clear', '清空')">
<i class="fas fa-trash-alt"></i>
</button>
</div>
<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
+129 -85
View File
@@ -1,26 +1,23 @@
<template>
<div class="quick-commands-view">
<div class="view-header">
<input
type="text"
:placeholder="$t('quickCommands.searchPlaceholder', '搜索名称或指令...')"
:value="searchTerm"
@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>
</div>
<!-- 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', '搜索名称或指令...')"
:value="searchTerm"
@input="updateSearchTerm($event)"
class="search-input"
/>
<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>
<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;
quickCommandsStore.setSortBy(newSortBy);
// 切换排序方式
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 处理 */