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 22:48:10 +08:00
parent f8e4c14fa8
commit ce58aec85f
6 changed files with 176 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/AddConnectionForm.vue
+92 -31
View File
@@ -287,7 +287,7 @@ const handleSubmit = async () => {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.6); /* 加深背景 */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -295,28 +295,37 @@ const handleSubmit = async () => {
} }
.add-connection-form { .add-connection-form {
background-color: white; background-color: var(--app-bg-color, white);
padding: 2rem; color: var(--text-color, #333);
padding: calc(var(--base-padding, 1rem) * 2);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* 调整阴影 */
min-width: 300px; min-width: 350px; /* 稍微加宽 */
max-width: 500px; max-width: 550px; /* 调整最大宽度 */
border: 1px solid var(--border-color, #ccc);
} }
h3 { h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 1.5rem; margin-bottom: calc(var(--base-margin, 0.5rem) * 4); /* 增加标题下边距 */
text-align: center; text-align: center;
color: var(--text-color, #333);
font-family: var(--font-family-sans-serif, sans-serif);
font-size: 1.4em; /* 稍微增大标题字号 */
font-weight: 600; /* 加粗标题 */
} }
.form-group { .form-group {
margin-bottom: 1rem; margin-bottom: calc(var(--base-margin, 0.5rem) * 2.5); /* 增加组间距 */
} }
label { label {
display: block; display: block;
margin-bottom: 0.3rem; margin-bottom: calc(var(--base-margin, 0.5rem) * 0.8); /* 调整标签下边距 */
font-weight: bold; font-weight: 500; /* 调整标签字重 */
font-size: 0.95em; /* 调整标签字号 */
color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
font-family: var(--font-family-sans-serif, sans-serif);
} }
input[type="text"], input[type="text"],
@@ -325,58 +334,110 @@ input[type="password"],
select, select,
textarea { textarea {
width: 100%; width: 100%;
padding: 0.5rem; padding: calc(var(--base-padding, 1rem) * 0.6); /* 调整输入框内边距 */
border: 1px solid #ccc; border: 1px solid var(--border-color, #ccc);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; /* Include padding and border in element's total width and height */ box-sizing: border-box;
} background-color: var(--app-bg-color, white);
color: var(--text-color, #333);
font-family: var(--font-family-sans-serif, sans-serif);
font-size: 1em; /* 确保字体大小 */
transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
}
/* 移除旧的标签选择样式 */ input[type="text"]:focus,
/* .tag-checkbox-group ... */ input[type="number"]:focus,
/* .tag-checkbox-label ... */ input[type="password"]:focus,
select:focus,
textarea:focus {
outline: none; /* 移除默认 outline */
border-color: var(--button-bg-color, #007bff); /* 聚焦时使用按钮背景色 (保持) */
box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* 恢复光晕效果并使用主题色 */
}
.loading-small, .error-small, .info-small { textarea {
font-size: 0.9em; min-height: 80px; /* 设置文本域最小高度 */
color: #666; resize: vertical; /* 允许垂直调整大小 */
margin-top: 0.2rem; }
select {
appearance: none; /* 移除默认下拉箭头 (可能需要自定义箭头) */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* 添加自定义箭头 */
background-repeat: no-repeat;
background-position: right calc(var(--base-padding, 1rem) * 0.6) center;
background-size: 16px 12px;
padding-right: calc(var(--base-padding, 1rem) * 2); /* 为箭头腾出空间 */
}
.loading-small, .info-small {
font-size: 0.85em; /* 调整字号 */
color: var(--text-color-secondary, #666);
margin-top: calc(var(--base-margin, 0.5rem) * 0.5); /* 调整上边距 */
font-family: var(--font-family-sans-serif, sans-serif);
} }
.error-small { .error-small {
font-size: 0.85em; /* 调整字号 */
color: red; color: red;
margin-top: calc(var(--base-margin, 0.5rem) * 0.5); /* 调整上边距 */
font-family: var(--font-family-sans-serif, sans-serif);
} }
.error-message { .error-message {
color: red; color: red;
margin-bottom: 1rem; margin-bottom: var(--base-margin, 0.5rem);
text-align: center; text-align: center;
font-family: var(--font-family-sans-serif, sans-serif);
font-weight: 500; /* 加粗错误信息 */
padding: calc(var(--base-padding, 1rem) * 0.5); /* 添加内边距 */
background-color: rgba(255, 0, 0, 0.05); /* 添加淡红色背景 */
border: 1px solid rgba(255, 0, 0, 0.2); /* 添加边框 */
border-radius: 4px;
} }
.form-actions { .form-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: 1.5rem; margin-top: calc(var(--base-margin, 0.5rem) * 4); /* 增加顶部间距 */
padding-top: calc(var(--base-padding, 1rem) * 1); /* 在按钮上方增加间距 */
border-top: 1px solid var(--border-color, #eee); /* 添加分隔线 */
} }
.form-actions button { .form-actions button {
margin-left: 0.5rem; margin-left: var(--base-margin, 0.5rem);
padding: 0.6rem 1.2rem; padding: calc(var(--base-padding, 1rem) * 0.7) calc(var(--base-padding, 1rem) * 1.4); /* 调整按钮内边距 */
cursor: pointer; cursor: pointer;
border: none;
border-radius: 4px; border-radius: 4px;
font-family: var(--font-family-sans-serif, sans-serif);
font-weight: 500; /* 调整按钮字重 */
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; /* 添加过渡 */
} }
.form-actions button[type="submit"] { .form-actions button[type="submit"] {
background-color: #007bff; background-color: var(--button-bg-color, #007bff);
color: white; color: var(--button-text-color, white);
border: 1px solid var(--button-bg-color, #007bff); /* 添加边框 */
}
.form-actions button[type="submit"]:hover:not(:disabled) {
background-color: var(--button-hover-bg-color, #0056b3);
border-color: var(--button-hover-bg-color, #0056b3); /* 同步边框色 */
} }
.form-actions button[type="button"] { .form-actions button[type="button"] {
background-color: #ccc; background-color: transparent; /* 取消按钮透明背景 */
color: #333; color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
border: 1px solid var(--border-color, #ccc); /* 添加边框 */
}
.form-actions button[type="button"]:hover:not(:disabled) {
background-color: var(--border-color, #eee); /* 悬停时淡灰色背景 */
border-color: var(--text-color-secondary, #bbb); /* 悬停时边框变深 */
color: var(--text-color, #333); /* 悬停时文本变深 */
} }
.form-actions button:disabled { .form-actions button:disabled {
opacity: 0.6; opacity: 0.5; /* 调整禁用透明度 */
cursor: not-allowed; cursor: not-allowed;
} }
</style> </style>
packages/frontend/src/components/AddProxyForm.vue
+80 -26
View File
@@ -172,14 +172,14 @@ const handleSubmit = async () => {
</template> </template>
<style scoped> <style scoped>
/* 样式可以复用 AddConnectionForm 的，或者根据需要调整 */ /* 应用更详细的美化样式 */
.add-proxy-form-overlay { .add-proxy-form-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.6); /* 加深背景 */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -187,28 +187,37 @@ const handleSubmit = async () => {
} }
.add-proxy-form { .add-proxy-form {
background-color: white; background-color: var(--app-bg-color, white);
padding: 2rem; color: var(--text-color, #333);
padding: calc(var(--base-padding, 1rem) * 2);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* 调整阴影 */
min-width: 300px; min-width: 350px; /* 稍微加宽 */
max-width: 500px; max-width: 550px; /* 调整最大宽度 */
border: 1px solid var(--border-color, #ccc);
} }
h3 { h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 1.5rem; margin-bottom: calc(var(--base-margin, 0.5rem) * 4); /* 增加标题下边距 */
text-align: center; text-align: center;
color: var(--text-color, #333);
font-family: var(--font-family-sans-serif, sans-serif);
font-size: 1.4em; /* 稍微增大标题字号 */
font-weight: 600; /* 加粗标题 */
} }
.form-group { .form-group {
margin-bottom: 1rem; margin-bottom: calc(var(--base-margin, 0.5rem) * 2.5); /* 增加组间距 */
} }
label { label {
display: block; display: block;
margin-bottom: 0.3rem; margin-bottom: calc(var(--base-margin, 0.5rem) * 0.8); /* 调整标签下边距 */
font-weight: bold; font-weight: 500; /* 调整标签字重 */
font-size: 0.95em; /* 调整标签字号 */
color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
font-family: var(--font-family-sans-serif, sans-serif);
} }
input[type="text"], input[type="text"],
@@ -216,51 +225,96 @@ input[type="number"],
input[type="password"], input[type="password"],
select { select {
width: 100%; width: 100%;
padding: 0.5rem; padding: calc(var(--base-padding, 1rem) * 0.6); /* 调整输入框内边距 */
border: 1px solid #ccc; border: 1px solid var(--border-color, #ccc);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--app-bg-color, white);
color: var(--text-color, #333);
font-family: var(--font-family-sans-serif, sans-serif);
font-size: 1em; /* 确保字体大小 */
transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus {
outline: none; /* 移除默认 outline */
border-color: var(--button-bg-color, #007bff); /* 聚焦时使用按钮背景色 */
box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* 恢复光晕效果并使用主题色 */
}
select {
appearance: none; /* 移除默认下拉箭头 (可能需要自定义箭头) */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* 添加自定义箭头 */
background-repeat: no-repeat;
background-position: right calc(var(--base-padding, 1rem) * 0.6) center;
background-size: 16px 12px;
padding-right: calc(var(--base-padding, 1rem) * 2); /* 为箭头腾出空间 */
} }
small { small {
display: block; display: block;
margin-top: 0.25rem; margin-top: calc(var(--base-margin, 0.5rem) * 0.5); /* 调整上边距 */
font-size: 0.8em; font-size: 0.85em; /* 调整字号 */
color: #666; color: var(--text-color-secondary, #666);
font-family: var(--font-family-sans-serif, sans-serif);
} }
.error-message { .error-message {
color: red; color: red;
margin-bottom: 1rem; margin-bottom: var(--base-margin, 0.5rem);
text-align: center; text-align: center;
font-family: var(--font-family-sans-serif, sans-serif);
font-weight: 500; /* 加粗错误信息 */
padding: calc(var(--base-padding, 1rem) * 0.5); /* 添加内边距 */
background-color: rgba(255, 0, 0, 0.05); /* 添加淡红色背景 */
border: 1px solid rgba(255, 0, 0, 0.2); /* 添加边框 */
border-radius: 4px;
} }
.form-actions { .form-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: 1.5rem; margin-top: calc(var(--base-margin, 0.5rem) * 4); /* 增加顶部间距 */
padding-top: calc(var(--base-padding, 1rem) * 1); /* 在按钮上方增加间距 */
border-top: 1px solid var(--border-color, #eee); /* 添加分隔线 */
} }
.form-actions button { .form-actions button {
margin-left: 0.5rem; margin-left: var(--base-margin, 0.5rem);
padding: 0.6rem 1.2rem; padding: calc(var(--base-padding, 1rem) * 0.7) calc(var(--base-padding, 1rem) * 1.4); /* 调整按钮内边距 */
cursor: pointer; cursor: pointer;
border: none;
border-radius: 4px; border-radius: 4px;
font-family: var(--font-family-sans-serif, sans-serif);
font-weight: 500; /* 调整按钮字重 */
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; /* 添加过渡 */
} }
.form-actions button[type="submit"] { .form-actions button[type="submit"] {
background-color: #007bff; background-color: var(--button-bg-color, #007bff);
color: white; color: var(--button-text-color, white);
border: 1px solid var(--button-bg-color, #007bff); /* 添加边框 */
}
.form-actions button[type="submit"]:hover:not(:disabled) {
background-color: var(--button-hover-bg-color, #0056b3);
border-color: var(--button-hover-bg-color, #0056b3); /* 同步边框色 */
} }
.form-actions button[type="button"] { .form-actions button[type="button"] {
background-color: #ccc; background-color: transparent; /* 取消按钮透明背景 */
color: #333; color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
border: 1px solid var(--border-color, #ccc); /* 添加边框 */
}
.form-actions button[type="button"]:hover:not(:disabled) {
background-color: var(--border-color, #eee); /* 悬停时淡灰色背景 */
border-color: var(--text-color-secondary, #bbb); /* 悬停时边框变深 */
color: var(--text-color, #333); /* 悬停时文本变深 */
} }
.form-actions button:disabled { .form-actions button:disabled {
opacity: 0.6; opacity: 0.5; /* 调整禁用透明度 */
cursor: not-allowed; cursor: not-allowed;
} }
</style> </style>
packages/frontend/src/components/CommandInputBar.vue
+1 -1
View File
@@ -64,7 +64,7 @@ const sendCommand = () => {
.command-input:focus { .command-input:focus {
border-color: var(--button-bg-color); /* Use theme variable */ 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 */ box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* Use theme variable for glow */
} }
/* 可以添加按钮样式 */ /* 可以添加按钮样式 */
packages/frontend/src/components/WorkspaceConnectionList.vue
+1 -1
View File
@@ -293,7 +293,7 @@ const handleOpenInNewTab = (connectionId: number) => {
} }
.search-input:focus { .search-input:focus {
border-color: var(--button-bg-color); /* Use theme variable */ 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 */ box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* Use theme variable for glow */
} }
.add-button { .add-button {
packages/frontend/src/views/CommandHistoryView.vue
+1 -1
View File
@@ -154,7 +154,7 @@ const executeCommand = (command: string) => {
.search-input:focus { .search-input:focus {
outline: none; outline: none;
border-color: var(--button-bg-color); /* Highlight border on focus */ 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 */ box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* Use theme variable for glow */
} }
.clear-button { .clear-button {
packages/frontend/src/views/QuickCommandsView.vue
+1 -1
View File
@@ -187,7 +187,7 @@ const executeCommand = (command: QuickCommandFE) => {
.search-input:focus { .search-input:focus {
outline: none; outline: none;
border-color: var(--button-bg-color); /* Highlight border on focus */ 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 */ box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* Use theme variable for glow */
} }
/* 移除 .sort-controls 和 select 样式 */ /* 移除 .sort-controls 和 select 样式 */