Super-frpc/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(ui): redesign interface with SF Pro fonts and modern styling

Browse Source 
- Update theme variables and styles for light/dark modes
- Implement SF Pro font family across all components
- Redesign cards, buttons, forms, and scrollbars
- Add backdrop filters and improve visual hierarchy
- Optimize spacing, typography, and interactive elements
This commit is contained in:
NanamiAdmin
2026-04-13 18:41:09 +08:00
parent 3859a4170c
commit d87b3268fb
16 changed files with 797 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -22,8 +22,9 @@ docs/_book
# TODO: where does this rule come from? # TODO: where does this rule come from?
test/ test/
dist/
node_modules/ node_modules/
design.md
agent.md agent.md
api-backend.md api-backend.md

8
src/App.vue
View File

@@ -34,10 +34,15 @@ export default {
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.47;
letter-spacing: -0.374px;
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--text-color); color: var(--text-color);
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
#app { #app {
@@ -48,5 +53,6 @@ body {
mark { mark {
background-color: var(--mark-bg); background-color: var(--mark-bg);
padding: 0 2px; padding: 0 2px;
border-radius: 2px;
} }
</style> </style>

99
src/components/SideBar.vue
View File

@@ -98,123 +98,141 @@ export default {
.sidebar { .sidebar {
position: fixed; position: fixed;
left: 0; left: 0;
top: 64px; top: 48px;
bottom: 0; bottom: 0;
width: 240px; width: 240px;
background: var(--sidebar-bg); background: rgba(0, 0, 0, 0.8);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
width: 8px; width: 4px;
} }
.sidebar::-webkit-scrollbar-track { .sidebar::-webkit-scrollbar-track {
background: var(--bg-color); background: transparent;
border-radius: 0 8px 8px 0;
} }
.sidebar::-webkit-scrollbar-thumb { .sidebar::-webkit-scrollbar-thumb {
background: var(--primary-color); background: rgba(255, 255, 255, 0.15);
border-radius: 4px; border-radius: 2px;
} }
.sidebar::-webkit-scrollbar-thumb:hover { .sidebar::-webkit-scrollbar-thumb:hover {
background: var(--sidebar-active-bg); background: rgba(255, 255, 255, 0.3);
} }
.menu { .menu {
padding: 16px 0; padding: 8px 0;
flex: 1; flex: 1;
} }
.menu-item { .menu-item {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 24px; padding: 12px 24px;
color: var(--sidebar-text); color: rgba(255, 255, 255, 0.8);
text-decoration: none; text-decoration: none;
transition: all 0.3s; transition: all 0.3s;
margin: 4px 12px; margin: 2px 12px;
border-radius: 6px; border-radius: 8px;
font-size: 15px;
line-height: 1.29;
letter-spacing: -0.224px;
font-weight: 400;
} }
.menu-item:hover { .menu-item:hover {
color: var(--sidebar-text-hover); color: #ffffff;
background: var(--sidebar-bg-hover); background: rgba(255, 255, 255, 0.1);
} }
.menu-item.active { .menu-item.active {
color: var(--sidebar-text-hover); color: #ffffff;
background: var(--sidebar-active-bg); background: var(--primary-color);
} }
.menu-icon { .menu-icon {
font-size: 18px; font-size: 14px;
margin-right: 12px; margin-right: 12px;
width: 24px; width: 20px;
text-align: center; text-align: center;
} }
.menu-text { .menu-text {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 400;
line-height: 1.29;
letter-spacing: -0.224px;
} }
.theme-toggle { .theme-toggle {
padding: 16px; padding: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.08);
} }
.theme-button { .theme-button {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 16px; padding: 8px 15px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
color: var(--sidebar-text); color: rgba(255, 255, 255, 0.8);
border: none; border: none;
border-radius: 6px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
font-size: 14px; font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
} }
.theme-button:hover { .theme-button:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
color: var(--sidebar-text-hover); color: #ffffff;
} }
.theme-icon { .theme-icon {
font-size: 16px; font-size: 14px;
margin-right: 8px; margin-right: 8px;
} }
.theme-text { .theme-text {
font-weight: 500; font-weight: 400;
} }
.status-info { .status-info {
padding: 16px; padding: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.08);
} }
.status-item { .status-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 12px;
margin-bottom: 8px; margin-bottom: 8px;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
color: var(--sidebar-text); line-height: 1.29;
font-weight: 500; letter-spacing: -0.224px;
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
}
.status-item p {
margin: 0;
} }
.status-dot { .status-dot {
width: 8px; width: 10px;
height: 8px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: #ff4d4f; background: #ff4d4f;
} }
@@ -224,8 +242,11 @@ export default {
} }
.status-text { .status-text {
font-size: 14px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: var(--sidebar-text); font-size: 12px;
font-weight: 500; line-height: 1.33;
letter-spacing: -0.12px;
color: rgba(255, 255, 255, 0.48);
font-weight: 400;
} }
</style> </style>

164
src/components/TopBar.vue
View File

@@ -23,7 +23,7 @@
<div class="avatar">{{ username.charAt(0).toUpperCase() }}</div> <div class="avatar">{{ username.charAt(0).toUpperCase() }}</div>
<span class="username">{{ username }}</span> <span class="username">{{ username }}</span>
</div> </div>
<div class="user-menu" v-show="menuVisible" @click.stop> <div class="user-menu" v-show="menuVisible && !showEditUser" @click.stop>
<button class="menu-item" @click="showEditUser = true"> <button class="menu-item" @click="showEditUser = true">
<i class="fas fa-user-cog"></i> <i class="fas fa-user-cog"></i>
<span>User Settings</span> <span>User Settings</span>
@@ -34,6 +34,8 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</div>
<div v-if="showEditUser" class="modal-overlay" @click="closeEditUserDialog"> <div v-if="showEditUser" class="modal-overlay" @click="closeEditUserDialog">
<div class="modal" @click.stop> <div class="modal" @click.stop>
<h3>User Settings</h3> <h3>User Settings</h3>
@@ -69,8 +71,6 @@
</form> </form>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@@ -227,15 +227,15 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 24px; padding: 0 24px;
height: 64px; height: 56px;
background: var(--card-bg); background: rgba(0, 0, 0, 0.8);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 100; z-index: 100;
transition: background-color 0.3s;
} }
.topbar-left { .topbar-left {
@@ -244,9 +244,12 @@ export default {
} }
.logo { .logo {
font-size: 24px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 600; font-weight: 600;
color: var(--primary-color); line-height: 1.19;
letter-spacing: 0.231px;
color: #ffffff;
margin: 0; margin: 0;
} }
@@ -264,20 +267,30 @@ export default {
} }
.search-box input { .search-box input {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%; width: 100%;
padding: 10px 40px 10px 16px; padding: 0px 14px;
border: 1px solid var(--border-color); padding-right: 36px;
border-radius: 20px; height: 32px;
font-size: 14px; border: 3px solid rgba(255, 255, 255, 0.08);
border-radius: 11px;
font-size: 12px;
line-height: 1.33;
letter-spacing: -0.12px;
transition: all 0.3s; transition: all 0.3s;
background: var(--bg-color); background: rgba(255, 255, 255, 0.1);
color: var(--text-color); color: #ffffff;
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.48);
} }
.search-box input:focus { .search-box input:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); box-shadow: 0 0 0 2px var(--focus-ring);
background: rgba(255, 255, 255, 0.15);
} }
.search-icon { .search-icon {
@@ -285,8 +298,8 @@ export default {
right: 12px; right: 12px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 16px; font-size: 12px;
color: #999; color: rgba(255, 255, 255, 0.48);
} }
.topbar-right { .topbar-right {
@@ -295,11 +308,12 @@ export default {
gap: 24px; gap: 24px;
} }
.version-info { .version-info {
font-size: 14px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #999; font-size: 12px;
line-height: 1.33;
letter-spacing: -0.12px;
color: rgba(255, 255, 255, 0.48);
} }
.user-profile { .user-profile {
@@ -309,39 +323,45 @@ export default {
.user-info { .user-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 8px;
cursor: pointer; cursor: pointer;
padding: 8px 12px; padding: 4px 8px;
border-radius: 8px; border-radius: 980px;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.user-info:hover { .user-info:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(255, 255, 255, 0.1);
} }
.user-profile:hover .user-info { .user-profile:hover .user-info {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(255, 255, 255, 0.1);
} }
.avatar { .avatar {
width: 36px; width: 28px;
height: 36px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%); background: var(--primary-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 12px;
line-height: 1.33;
letter-spacing: -0.12px;
flex-shrink: 0; flex-shrink: 0;
} }
.username { .username {
font-size: 14px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: var(--text-color); font-size: 12px;
font-weight: 500; line-height: 1.33;
letter-spacing: -0.12px;
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
white-space: nowrap; white-space: nowrap;
} }
@@ -351,17 +371,19 @@ export default {
right: 0; right: 0;
margin-top: 8px; margin-top: 8px;
min-width: 180px; min-width: 180px;
background: var(--card-bg); background: rgba(29, 29, 31, 0.95);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: var(--card-shadow);
overflow: hidden; overflow: hidden;
z-index: 101; z-index: 101;
border: 1px solid var(--border-color);
} }
.user-menu .menu-item { .user-menu .menu-item {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%; width: 100%;
padding: 12px 16px; padding: 8px 15px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@@ -369,16 +391,19 @@ export default {
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
color: var(--text-color); line-height: 1.29;
letter-spacing: -0.224px;
color: rgba(255, 255, 255, 0.8);
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.user-menu .menu-item:hover { .user-menu .menu-item:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: var(--primary-color);
color: #ffffff;
} }
.user-menu .menu-item i { .user-menu .menu-item i {
font-size: 16px; font-size: 14px;
width: 20px; width: 20px;
text-align: center; text-align: center;
} }
@@ -390,6 +415,7 @@ export default {
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -402,11 +428,15 @@ export default {
padding: 24px; padding: 24px;
width: 90%; width: 90%;
max-width: 500px; max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: var(--card-shadow);
} }
.modal h3 { .modal h3 {
font-size: 20px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
color: var(--text-color); color: var(--text-color);
margin: 0 0 20px 0; margin: 0 0 20px 0;
} }
@@ -416,27 +446,34 @@ export default {
} }
.form-group label { .form-group label {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
color: var(--text-color); line-height: 1.29;
letter-spacing: -0.224px;
color: var(--text-secondary);
} }
.form-group input { .form-group input {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%; width: 100%;
padding: 10px; padding: 10px 14px;
border: 1px solid var(--border-color); border: 3px solid var(--border-color);
border-radius: 6px; border-radius: 11px;
font-size: 14px; font-size: 17px;
background: var(--bg-color); line-height: 1.47;
letter-spacing: -0.374px;
background: var(--surface-light);
color: var(--text-color); color: var(--text-color);
transition: border-color 0.3s; transition: border-color 0.3s, background-color 0.3s;
} }
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--focus-ring);
} }
.form-actions { .form-actions {
@@ -447,27 +484,34 @@ export default {
} }
.cancel-btn { .cancel-btn {
padding: 10px 20px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 1px solid var(--border-color); padding: 8px 15px;
border-radius: 6px; border: 3px solid var(--border-color);
background: transparent; border-radius: 8px;
background: var(--surface-light);
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
transition: all 0.3s; transition: all 0.3s;
} }
.cancel-btn:hover { .cancel-btn:hover {
background: var(--hover-bg); background: var(--surface-hover);
border-color: var(--primary-color);
} }
.submit-btn { .submit-btn {
padding: 10px 20px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
border: none; border: none;
border-radius: 6px; border-radius: 8px;
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
transition: all 0.3s; transition: all 0.3s;
} }
@@ -476,7 +520,7 @@ export default {
} }
.submit-btn:disabled { .submit-btn:disabled {
opacity: 0.6; opacity: 0.48;
cursor: not-allowed; cursor: not-allowed;
} }
</style> </style>

388
src/styles/common.css
View File

@@ -3,9 +3,13 @@
} }
.page-header h2 { .page-header h2 {
font-size: 24px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 40px;
font-weight: 600;
line-height: 1.10;
color: var(--text-color); color: var(--text-color);
margin: 0; margin: 0;
letter-spacing: normal;
transition: color 0.3s; transition: color 0.3s;
} }
@@ -13,7 +17,7 @@
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: var(--card-shadow);
transition: background-color 0.3s; transition: background-color 0.3s;
} }
@@ -25,7 +29,11 @@
} }
.card-header h3 { .card-header h3 {
font-size: 16px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
color: var(--text-color); color: var(--text-color);
margin: 0; margin: 0;
transition: color 0.3s; transition: color 0.3s;
@@ -55,19 +63,38 @@
} }
.form-group label { .form-group label {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
color: var(--text-color); line-height: 1.29;
letter-spacing: -0.224px;
color: var(--text-secondary);
} }
.form-group input, .form-group input,
.form-group select { .form-group select {
padding: 10px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 1px solid var(--border-color); padding: 10px 14px;
border-radius: 4px; border: 3px solid var(--border-color);
font-size: 14px; border-radius: 11px;
background: var(--bg-color); font-size: 17px;
line-height: 1.47;
letter-spacing: -0.374px;
background: var(--surface-light);
color: var(--text-color); color: var(--text-color);
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--focus-ring);
}
.form-group input:disabled {
opacity: 0.48;
cursor: not-allowed;
} }
.form-group.checkbox-group { .form-group.checkbox-group {
@@ -80,164 +107,85 @@
width: auto; width: auto;
} }
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 60px 20px; padding: 60px 20px;
color: #999; color: var(--text-tertiary);
font-size: 16px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.47;
letter-spacing: -0.374px;
} }
.action-btn { .action-btn {
padding: 8px 16px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
border: none; border: none;
border-radius: 6px; border-radius: 8px;
font-size: 14px; font-size: 17px;
font-weight: 500; font-weight: 400;
line-height: 2.41;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
} }
.delete-btn { .delete-btn {
background: #ff4d4f; background: var(--status-stopped);
color: white; color: white;
border-radius: 8px;
} }
.delete-btn:hover { .delete-btn:hover {
background: #f04142; opacity: 0.85;
} }
.edit-btn { .edit-btn {
background: #f0f0f0; background: var(--surface-light);
color: var(--text-color); color: var(--text-color);
border-radius: 8px;
} }
.edit-btn:hover { .edit-btn:hover {
background: #e0e0e0; background: var(--surface-hover);
} }
.start-btn { .start-btn {
background: #52c41a; background: var(--primary-color);
color: white; color: white;
border-radius: 8px;
} }
.start-btn:hover { .start-btn:hover {
background: #45a049; background: var(--primary-hover);
} }
.stop-btn { .stop-btn {
background: #ff4d4f; background: var(--status-stopped);
color: white; color: white;
border-radius: 8px;
} }
.stop-btn:hover { .stop-btn:hover {
background: #f04142; opacity: 0.85;
} }
.add-btn { .add-btn {
padding: 10px 20px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 980px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 400;
line-height: 1.43;
letter-spacing: -0.224px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
} }
.add-btn:hover { .add-btn:hover {
background: #5568d3; background: var(--primary-hover);
}
.form {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.form-group input,
.form-group select {
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-color);
}
.form-group input:disabled {
background: #f5f5f5;
cursor: not-allowed;
}
.dark .form-group label {
color: #b0b0b0;
}
.dark .form-group input,
.dark .form-group select {
background: #3d3d3d;
color: var(--text-color);
border-color: var(--border-color);
}
.dark .form-group input:disabled {
background: #2a2a2a;
color: #666;
}
.dark .cancel-btn {
background: #3d3d3d;
color: var(--text-color);
}
.dark .cancel-btn:hover {
background: #4d4d4d;
}
.dark .info-row .label,
.dark .info-label,
.dark .detail-key,
.dark .config-key {
color: #b0b0b0;
}
.dark .log-item {
background: #2a2a2a;
}
.dark .proxy-item,
.dark .config-item {
background: #2a2a2a;
}
.dark .common-btn {
background: #3d3d3d;
color: var(--text-color);
}
.dark .common-btn:hover {
background: #4d4d4d;
} }
.form-actions { .form-actions {
@@ -248,23 +196,26 @@
.cancel-btn, .cancel-btn,
.submit-btn { .submit-btn {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
flex: 1; flex: 1;
padding: 10px; padding: 8px 15px;
border: none; border: none;
border-radius: 6px; border-radius: 8px;
font-size: 14px; font-size: 17px;
font-weight: 500; font-weight: 400;
line-height: 2.41;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
} }
.cancel-btn { .cancel-btn {
background: #f0f0f0; background: var(--surface-light);
color: var(--text-color); color: var(--text-color);
border: 3px solid var(--border-color);
} }
.cancel-btn:hover { .cancel-btn:hover {
background: #e0e0e0; background: var(--surface-hover);
} }
.submit-btn { .submit-btn {
@@ -273,22 +224,25 @@
} }
.submit-btn:hover:not(:disabled) { .submit-btn:hover:not(:disabled) {
background: #5568d3; background: var(--primary-hover);
} }
.submit-btn:disabled { .submit-btn:disabled {
opacity: 0.6; opacity: 0.48;
cursor: not-allowed; cursor: not-allowed;
} }
.info-row { .info-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
} }
.info-row .label { .info-row .label {
color: #666; color: var(--text-tertiary);
} }
.info-row .value { .info-row .value {
@@ -300,11 +254,14 @@
.info-item { .info-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
} }
.info-label { .info-label {
color: #666; color: var(--text-tertiary);
font-weight: 500; font-weight: 500;
} }
@@ -317,69 +274,60 @@
} }
.status-badge { .status-badge {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 4px 12px; padding: 4px 12px;
border-radius: 12px; border-radius: 980px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 600;
line-height: 1.33;
letter-spacing: -0.12px;
} }
.status-badge.running { .status-badge.running {
background: #f6ffed; background: var(--status-running-bg);
color: #52c41a; color: var(--status-running);
} }
.status-badge.stopped { .status-badge.stopped {
background: #fff1f0; background: var(--status-stopped-bg);
color: #ff4d4f; color: var(--status-stopped);
} }
.status-badge.active { .status-badge.active {
background: #f6ffed; background: var(--status-running-bg);
color: #52c41a; color: var(--status-running);
} }
.status-badge.inactive { .status-badge.inactive {
background: #fff1f0; background: var(--status-stopped-bg);
color: #ff4d4f; color: var(--status-stopped);
} }
.type-badge { .type-badge {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 980px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 600;
line-height: 1.33;
letter-spacing: -0.12px;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
.type-badge.superuser { .type-badge.superuser {
background: #fff7e6; background: var(--type-superuser-bg);
color: #fa8c16; color: var(--type-superuser-color);
} }
.type-badge.admin { .type-badge.admin {
background: #e6f7ff; background: var(--type-admin-bg);
color: #1890ff; color: var(--type-admin-color);
} }
.type-badge.visitor { .type-badge.visitor {
background: #f9f9f9; background: var(--type-visitor-bg);
color: #666; color: var(--type-visitor-color);
}
.dark .type-badge.superuser {
background: #3a2510;
color: #ffb74d;
}
.dark .type-badge.admin {
background: #0d2633;
color: #40a9ff;
}
.dark .type-badge.visitor {
background: #2a2a2a;
color: #b0b0b0;
} }
.modal-overlay { .modal-overlay {
@@ -389,6 +337,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -400,12 +349,16 @@
border-radius: 12px; border-radius: 12px;
padding: 24px; padding: 24px;
width: 400px; width: 400px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); box-shadow: var(--card-shadow);
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.modal h3 { .modal h3 {
font-size: 20px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
color: var(--text-color); color: var(--text-color);
margin: 0 0 20px 0; margin: 0 0 20px 0;
transition: color 0.3s; transition: color 0.3s;
@@ -421,14 +374,16 @@
display: flex; display: flex;
gap: 12px; gap: 12px;
padding: 12px; padding: 12px;
background: #f9f9f9; background: var(--surface-light);
border-radius: 6px; border-radius: 8px;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
font-size: 14px; font-size: 14px;
font-family: 'Consolas', 'Monaco', monospace; line-height: 1.29;
letter-spacing: -0.224px;
} }
.log-time { .log-time {
color: #999; color: var(--text-tertiary);
min-width: 160px; min-width: 160px;
} }
@@ -437,32 +392,32 @@
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 980px;
} }
.log-level.DEBUG { .log-level.DEBUG {
color: #52c41a; color: var(--log-debug-color);
background: #f6ffed; background: var(--log-debug-bg);
} }
.log-level.INFO { .log-level.INFO {
color: #1890ff; color: var(--log-info-color);
background: #e6f7ff; background: var(--log-info-bg);
} }
.log-level.WARN { .log-level.WARN {
color: #faad14; color: var(--log-warn-color);
background: #fffbe6; background: var(--log-warn-bg);
} }
.log-level.ERROR { .log-level.ERROR {
color: #ff4d4f; color: var(--log-error-color);
background: #fff1f0; background: var(--log-error-bg);
} }
.log-level.FATAL { .log-level.FATAL {
color: #cf1322; color: var(--log-fatal-color);
background: #fff1f0; background: var(--log-fatal-bg);
} }
.log-message { .log-message {
@@ -476,43 +431,55 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%); background: var(--primary-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
} }
.common-btn { .common-btn {
padding: 8px 16px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #f0f0f0; padding: 8px 15px;
background: var(--surface-light);
border: none; border: none;
border-radius: 6px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 17px;
font-weight: 400;
line-height: 2.41;
transition: all 0.3s; transition: all 0.3s;
} }
.common-btn:hover { .common-btn:hover {
background: #e0e0e0; background: var(--surface-hover);
} }
.config-item { .config-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 12px; padding: 12px;
background: #f9f9f9; background: var(--surface-light);
border-radius: 6px; border-radius: 8px;
} }
.config-key { .config-key {
color: #666; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
color: var(--text-tertiary);
font-weight: 500; font-weight: 500;
} }
.config-value { .config-value {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
color: var(--text-color); color: var(--text-color);
transition: color 0.3s; transition: color 0.3s;
} }
@@ -522,8 +489,8 @@
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
padding: 12px; padding: 12px;
background: #f9f9f9; background: var(--surface-light);
border-radius: 6px; border-radius: 8px;
} }
.proxy-header { .proxy-header {
@@ -533,8 +500,11 @@
} }
.proxy-name { .proxy-name {
font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 1.14;
letter-spacing: 0.196px;
color: var(--text-color); color: var(--text-color);
transition: color 0.3s; transition: color 0.3s;
} }
@@ -546,12 +516,15 @@
} }
.proxy-type { .proxy-type {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: inline-block; display: inline-block;
padding: 4px 12px; padding: 4px 12px;
border-radius: 12px; border-radius: 980px;
font-size: 14px; font-size: 12px;
font-weight: 500; font-weight: 600;
background: var(--primary-bg); line-height: 1.33;
letter-spacing: -0.12px;
background: var(--status-running-bg);
color: var(--primary-color); color: var(--primary-color);
text-transform: uppercase; text-transform: uppercase;
} }
@@ -566,11 +539,14 @@
.proxy-detail { .proxy-detail {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
} }
.detail-key { .detail-key {
color: #666; color: var(--text-tertiary);
} }
.detail-value { .detail-value {
@@ -582,12 +558,16 @@
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: var(--card-shadow);
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.section h3 { .section h3 {
font-size: 18px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
color: var(--text-color); color: var(--text-color);
margin: 0 0 16px 0; margin: 0 0 16px 0;
transition: color 0.3s; transition: color 0.3s;
@@ -599,11 +579,14 @@
} }
.filter-controls select { .filter-controls select {
padding: 8px 16px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 1px solid var(--border-color); padding: 0px 14px;
border-radius: 6px; border: 3px solid var(--border-color);
font-size: 14px; border-radius: 11px;
background: var(--card-bg); font-size: 17px;
line-height: 1.47;
letter-spacing: -0.374px;
background: var(--surface-light);
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
@@ -612,6 +595,7 @@
.filter-controls select:focus { .filter-controls select:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--focus-ring);
} }
.proxy-actions { .proxy-actions {

95
src/styles/themes.css
View File

@@ -1,27 +1,82 @@
:root { :root {
--bg-color: #f5f5f5; --bg-color: #f5f5f7;
--text-color: #333; --text-color: #1d1d1f;
--sidebar-bg: #001529; --text-secondary: rgba(0, 0, 0, 0.8);
--sidebar-text: rgba(255, 255, 255, 0.65); --text-tertiary: rgba(0, 0, 0, 0.48);
--sidebar-text-hover: white; --sidebar-bg: rgba(0, 0, 0, 0.8);
--sidebar-text: rgba(255, 255, 255, 0.8);
--sidebar-text-hover: #ffffff;
--sidebar-bg-hover: rgba(255, 255, 255, 0.1); --sidebar-bg-hover: rgba(255, 255, 255, 0.1);
--sidebar-active-bg: #667eea; --sidebar-active-bg: #0071e3;
--card-bg: white; --card-bg: #ffffff;
--border-color: #e8e8e8; --border-color: rgba(0, 0, 0, 0.04);
--primary-color: #667eea; --primary-color: #0071e3;
--mark-bg: #fffb8f; --primary-hover: #0077ed;
--mark-bg: rgba(0, 113, 227, 0.12);
--link-color: #0066cc;
--link-dark-color: #2997ff;
--focus-ring: #0071e3;
--card-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
--surface-light: #fafafc;
--surface-hover: #ededf2;
--overlay-bg: rgba(210, 210, 215, 0.64);
--status-running: #0071e3;
--status-stopped: #ff4d4f;
--status-running-bg: rgba(0, 113, 227, 0.08);
--status-stopped-bg: rgba(255, 77, 79, 0.08);
--log-debug-color: #52c41a;
--log-info-color: #0071e3;
--log-warn-color: #faad14;
--log-error-color: #ff4d4f;
--log-fatal-color: #cf1322;
--log-debug-bg: rgba(82, 196, 26, 0.08);
--log-info-bg: rgba(0, 113, 227, 0.08);
--log-warn-bg: rgba(250, 173, 20, 0.08);
--log-error-bg: rgba(255, 77, 79, 0.08);
--log-fatal-bg: rgba(207, 19, 34, 0.08);
--type-superuser-bg: rgba(250, 140, 22, 0.1);
--type-superuser-color: #d48806;
--type-admin-bg: rgba(0, 113, 227, 0.1);
--type-admin-color: #0071e3;
--type-visitor-bg: rgba(0, 0, 0, 0.04);
--type-visitor-color: rgba(0, 0, 0, 0.48);
} }
.dark { .dark {
--bg-color: #1a1a1a; --bg-color: #000000;
--text-color: #e0e0e0; --text-color: #ffffff;
--sidebar-bg: #121212; --text-secondary: rgba(255, 255, 255, 0.8);
--sidebar-text: rgba(255, 255, 255, 0.7); --text-tertiary: rgba(255, 255, 255, 0.48);
--sidebar-text-hover: white; --sidebar-bg: rgba(0, 0, 0, 0.8);
--sidebar-text: rgba(255, 255, 255, 0.8);
--sidebar-text-hover: #ffffff;
--sidebar-bg-hover: rgba(255, 255, 255, 0.15); --sidebar-bg-hover: rgba(255, 255, 255, 0.15);
--sidebar-active-bg: #7f56d9; --sidebar-active-bg: #0071e3;
--card-bg: #2d2d2d; --card-bg: #1d1d1f;
--border-color: #3d3d3d; --border-color: rgba(255, 255, 255, 0.08);
--primary-color: #9e77ed; --primary-color: #2997ff;
--mark-bg: #4a4a00; --primary-hover: #3ba0ff;
--mark-bg: rgba(41, 151, 255, 0.2);
--link-color: #2997ff;
--link-dark-color: #2997ff;
--focus-ring: #2997ff;
--card-shadow: rgba(0, 0, 0, 0.5) 3px 5px 30px 0px;
--surface-light: #272729;
--surface-hover: #3a3a3c;
--overlay-bg: rgba(210, 210, 215, 0.64);
--status-running: #2997ff;
--status-stopped: #ff4d4f;
--status-running-bg: rgba(41, 151, 255, 0.15);
--status-stopped-bg: rgba(255, 77, 79, 0.15);
--log-debug-bg: rgba(82, 196, 26, 0.15);
--log-info-bg: rgba(41, 151, 255, 0.15);
--log-warn-bg: rgba(250, 173, 20, 0.15);
--log-error-bg: rgba(255, 77, 79, 0.15);
--log-fatal-bg: rgba(207, 19, 34, 0.15);
--type-superuser-bg: rgba(250, 140, 22, 0.2);
--type-superuser-color: #ffb74d;
--type-admin-bg: rgba(41, 151, 255, 0.2);
--type-admin-color: #40a9ff;
--type-visitor-bg: rgba(255, 255, 255, 0.08);
--type-visitor-color: rgba(255, 255, 255, 0.48);
} }

13
src/views/Home.vue
View File

@@ -46,27 +46,26 @@ export default {
.main-content { .main-content {
margin-left: 240px; margin-left: 240px;
margin-top: 64px; margin-top: 48px;
padding: 24px; padding: 24px;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.main-content::-webkit-scrollbar { .main-content::-webkit-scrollbar {
width: 8px; width: 4px;
} }
.main-content::-webkit-scrollbar-track { .main-content::-webkit-scrollbar-track {
background: var(--bg-color); background: transparent;
border-radius: 0 8px 8px 0;
} }
.main-content::-webkit-scrollbar-thumb { .main-content::-webkit-scrollbar-thumb {
background: var(--primary-color); background: rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 2px;
} }
.main-content::-webkit-scrollbar-thumb:hover { .main-content::-webkit-scrollbar-thumb:hover {
background: var(--sidebar-active-bg); background: rgba(0, 0, 0, 0.3);
} }
</style> </style>

238
src/views/InstanceDetail.vue
View File

@@ -776,8 +776,7 @@ export default {
.proxy-item { .proxy-item {
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
background: var(--card-bg); background: var(--surface-light);
border: 1px solid var(--border-color);
} }
.proxy-header { .proxy-header {
@@ -789,18 +788,24 @@ export default {
} }
.proxy-name { .proxy-name {
font-size: 16px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 1.14;
letter-spacing: 0.196px;
color: var(--text-color); color: var(--text-color);
} }
.proxy-type { .proxy-type {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: inline-block; display: inline-block;
padding: 4px 12px; padding: 4px 12px;
border-radius: 12px; border-radius: 980px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 600;
background: var(--primary-bg); line-height: 1.33;
letter-spacing: -0.12px;
background: var(--status-running-bg);
color: var(--primary-color); color: var(--primary-color);
text-transform: uppercase; text-transform: uppercase;
} }
@@ -809,24 +814,26 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
border: 5px solid var(--border-color); line-height: 1.29;
letter-spacing: -0.224px;
} }
.proxy-key { .proxy-key {
color: var(--text-secondary); color: var(--text-tertiary);
font-weight: 500; font-weight: 500;
min-width: 90px; min-width: 90px;
} }
.proxy-value { .proxy-value {
color: var(--text-color); color: var(--text-color);
font-family: monospace; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
} }
.log-item { .log-item {
padding: 8px; padding: 8px;
border-radius: 4px; border-radius: 8px;
} }
.log-time { .log-time {
@@ -835,34 +842,34 @@ export default {
.log-level { .log-level {
min-width: 60px; min-width: 60px;
font-weight: 500; font-weight: 600;
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 980px;
} }
.log-level.DEBUG { .log-level.DEBUG {
color: #52c41a; color: var(--log-debug-color);
background: #f6ffed; background: var(--log-debug-bg);
} }
.log-level.INFO { .log-level.INFO {
color: #1890ff; color: var(--log-info-color);
background: #e6f7ff; background: var(--log-info-bg);
} }
.log-level.WARN { .log-level.WARN {
color: #faad14; color: var(--log-warn-color);
background: #fffbe6; background: var(--log-warn-bg);
} }
.log-level.ERROR { .log-level.ERROR {
color: #ff4d4f; color: var(--log-error-color);
background: #fff1f0; background: var(--log-error-bg);
} }
.log-level.FATAL { .log-level.FATAL {
color: #cf1322; color: var(--log-fatal-color);
background: #fff1f0; background: var(--log-fatal-bg);
} }
.empty-state { .empty-state {
@@ -877,6 +884,7 @@ export default {
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -885,14 +893,19 @@ export default {
.modal { .modal {
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px; border-radius: 12px;
padding: 24px; padding: 24px;
width: 90%; width: 90%;
max-width: 500px; max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: var(--card-shadow);
} }
.modal h3 { .modal h3 {
font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
margin-top: 0; margin-top: 0;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--text-color); color: var(--text-color);
@@ -906,26 +919,34 @@ export default {
} }
.cancel-btn { .cancel-btn {
padding: 10px 20px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 1px solid var(--border-color); padding: 8px 15px;
border-radius: 4px; border: 3px solid var(--border-color);
background: transparent; border-radius: 8px;
background: var(--surface-light);
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
transition: all 0.3s; transition: all 0.3s;
} }
.cancel-btn:hover { .cancel-btn:hover {
background: var(--hover-bg); background: var(--surface-hover);
} }
.submit-btn { .submit-btn {
padding: 10px 20px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
transition: all 0.3s; transition: all 0.3s;
} }
@@ -934,7 +955,7 @@ export default {
} }
.submit-btn:disabled { .submit-btn:disabled {
background: var(--disabled-bg); opacity: 0.48;
cursor: not-allowed; cursor: not-allowed;
} }
@@ -960,79 +981,183 @@ export default {
.status-item { .status-item {
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
background: var(--card-bg); background: var(--surface-light);
border: 1px solid var(--border-color);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.status-key { .status-key {
color: var(--text-secondary); font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
color: var(--text-tertiary);
font-weight: 500; font-weight: 500;
min-width: 90px; min-width: 90px;
} }
.status-value { .status-value {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
color: var(--text-color); color: var(--text-color);
font-family: monospace;
} }
.status-value.running { .status-value.running {
color: #52c41a; color: var(--status-running);
font-weight: 600; font-weight: 600;
} }
.status-value.stopped { .status-value.stopped {
color: #ff4d4f; color: var(--status-stopped);
font-weight: 600; font-weight: 600;
} }
.common-btn.status-btn { .common-btn.status-btn {
padding: 8px 16px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
background: #52c41a; background: var(--primary-color);
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
display: flex; display: flex;
align-items: flex-end; align-items: center;
gap: 8px; gap: 8px;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
} }
.common-btn.status-btn:hover { .common-btn.status-btn:hover {
background: #40a412; background: var(--primary-hover);
} }
.common-btn.stop-btn { .common-btn.stop-btn {
background: #ff4d4f; background: var(--status-stopped);
} }
.common-btn.stop-btn:hover { .common-btn.stop-btn:hover {
background: #cf1616; opacity: 0.85;
} }
.common-btn.restart-btn { .common-btn.restart-btn {
padding: 8px 16px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
background: #1890ff; background: var(--surface-light);
color: white; color: var(--text-color);
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
display: flex; display: flex;
align-items: flex-end; align-items: center;
gap: 8px; gap: 8px;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
} }
.common-btn.restart-btn:hover { .common-btn.restart-btn:hover {
background: #096dd9; background: var(--surface-hover);
} }
.status-btn i, .status-btn i,
.restart-btn i { .restart-btn i {
font-size: 14px; font-size: 14px;
display: flex;
align-items: center;
}
.proxy-actions .common-btn {
padding: 6px 12px;
font-size: 12px;
color: var(--text-color);
}
.proxy-actions .delete-btn {
background: var(--status-stopped-bg);
color: var(--status-stopped);
}
.proxy-actions .delete-btn:hover {
background: var(--status-stopped);
color: white;
}
.proxy-actions .edit-btn {
background: var(--surface-light);
color: var(--text-color);
}
.proxy-actions .edit-btn:hover {
background: var(--surface-hover);
}
.proxy-actions .add-btn {
background: var(--primary-color);
color: white;
}
.proxy-actions .add-btn:hover {
background: var(--primary-hover);
}
.proxy-details .proxy-detail {
background: var(--surface-light);
border-radius: 8px;
padding: 12px;
}
.proxy-details .proxy-detail:last-child {
background: var(--surface-hover);
border-radius: 8px;
padding: 12px;
}
.page-header .common-btn {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
border: none;
border-radius: 8px;
background: var(--surface-light);
color: var(--text-color);
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
}
.page-header .common-btn:hover {
background: var(--surface-hover);
}
.section h3 .common-btn {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
border: none;
border-radius: 8px;
background: var(--surface-light);
color: var(--text-color);
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
}
.section h3 .common-btn:hover {
background: var(--surface-hover);
} }
.section:last-child .logs-container { .section:last-child .logs-container {
@@ -1041,20 +1166,19 @@ export default {
} }
.section:last-child .logs-container::-webkit-scrollbar { .section:last-child .logs-container::-webkit-scrollbar {
width: 8px; width: 4px;
} }
.section:last-child .logs-container::-webkit-scrollbar-track { .section:last-child .logs-container::-webkit-scrollbar-track {
background: var(--bg-color); background: transparent;
border-radius: 0 8px 8px 0;
} }
.section:last-child .logs-container::-webkit-scrollbar-thumb { .section:last-child .logs-container::-webkit-scrollbar-thumb {
background: var(--primary-color); background: rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 2px;
} }
.section:last-child .logs-container::-webkit-scrollbar-thumb:hover { .section:last-child .logs-container::-webkit-scrollbar-thumb:hover {
background: var(--sidebar-active-bg); background: rgba(0, 0, 0, 0.3);
} }
</style> </style>

44
src/views/Instances.vue
View File

@@ -339,11 +339,12 @@ export default {
background-color: var(--card-bg); background-color: var(--card-bg);
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
box-shadow: var(--card-shadow);
} }
.instance-card:hover { .instance-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); box-shadow: rgba(0, 0, 0, 0.22) 3px 8px 36px 0px;
} }
.card-footer { .card-footer {
@@ -353,8 +354,11 @@ export default {
} }
.instance-name { .instance-name {
font-size: 18px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600; font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
color: var(--text-color); color: var(--text-color);
margin: 0; margin: 0;
transition: color 0.3s; transition: color 0.3s;
@@ -367,6 +371,7 @@ export default {
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -375,14 +380,19 @@ export default {
.modal { .modal {
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px; border-radius: 12px;
padding: 24px; padding: 24px;
width: 90%; width: 90%;
max-width: 500px; max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: var(--card-shadow);
} }
.modal h3 { .modal h3 {
font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
margin-top: 0; margin-top: 0;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--text-color); color: var(--text-color);
@@ -396,26 +406,34 @@ export default {
} }
.cancel-btn { .cancel-btn {
padding: 10px 20px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 1px solid var(--border-color); padding: 8px 15px;
border-radius: 4px; border: 3px solid var(--border-color);
background: transparent; border-radius: 8px;
background: var(--surface-light);
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
transition: all 0.3s; transition: all 0.3s;
} }
.cancel-btn:hover { .cancel-btn:hover {
background: var(--hover-bg); background: var(--surface-hover);
} }
.submit-btn { .submit-btn {
padding: 10px 20px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 8px 15px;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 17px;
font-weight: 400;
line-height: 2.41;
transition: all 0.3s; transition: all 0.3s;
} }
@@ -424,7 +442,7 @@ export default {
} }
.submit-btn:disabled { .submit-btn:disabled {
background: var(--disabled-bg); opacity: 0.48;
cursor: not-allowed; cursor: not-allowed;
} }
</style> </style>

72
src/views/Login.vue
View File

@@ -136,46 +136,52 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #000000;
} }
.login-box { .login-box {
background: var(--card-bg, white); background: var(--card-bg);
padding: 40px; padding: 40px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); box-shadow: var(--card-shadow);
width: 400px; width: 400px;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.title { .title {
font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: center; text-align: center;
color: var(--text-color, #333); color: var(--text-color);
margin-bottom: 30px; margin-bottom: 30px;
font-size: 28px; font-size: 40px;
font-weight: 600;
line-height: 1.10;
transition: color 0.3s; transition: color 0.3s;
} }
.tabs { .tabs {
display: flex; display: flex;
margin-bottom: 30px; margin-bottom: 30px;
border-bottom: 2px solid var(--border-color, #e8e8e8); border-bottom: 2px solid var(--border-color);
} }
.tab { .tab {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
flex: 1; flex: 1;
padding: 12px; padding: 12px;
border: none; border: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 17px;
color: #666; line-height: 1.47;
letter-spacing: -0.374px;
color: var(--text-tertiary);
transition: all 0.3s; transition: all 0.3s;
} }
.tab.active { .tab.active {
color: var(--primary-color, #667eea); color: var(--primary-color);
border-bottom: 2px solid var(--primary-color, #667eea); border-bottom: 2px solid var(--primary-color);
margin-bottom: -2px; margin-bottom: -2px;
} }
@@ -192,45 +198,53 @@ export default {
} }
.form-group label { .form-group label {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
color: #666; font-weight: 600;
font-weight: 500; line-height: 1.29;
letter-spacing: -0.224px;
color: var(--text-secondary);
} }
.form-group input { .form-group input {
padding: 12px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 1px solid var(--border-color, #ddd); padding: 10px 14px;
border-radius: 6px; border: 3px solid var(--border-color);
font-size: 14px; border-radius: 11px;
transition: border-color 0.3s; font-size: 17px;
background: var(--bg-color, #f5f5f5); line-height: 1.47;
color: var(--text-color, #333); letter-spacing: -0.374px;
transition: border-color 0.3s, background-color 0.3s;
background: var(--surface-light);
color: var(--text-color);
} }
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: var(--primary-color, #667eea); border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--focus-ring);
} }
.submit-btn { .submit-btn {
padding: 12px; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, #764ba2 100%); padding: 8px 15px;
background: var(--primary-color);
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 8px;
font-size: 16px; font-size: 17px;
font-weight: 500; font-weight: 400;
line-height: 2.41;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s; transition: all 0.3s;
} }
.submit-btn:hover:not(:disabled) { .submit-btn:hover:not(:disabled) {
transform: translateY(-2px); background: var(--primary-hover);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
} }
.submit-btn:disabled { .submit-btn:disabled {
opacity: 0.6; opacity: 0.48;
cursor: not-allowed; cursor: not-allowed;
} }
</style> </style>

47
src/views/Logs.vue
View File

@@ -133,30 +133,29 @@ export default {
.logs-container { .logs-container {
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px 0 0 8px; border-radius: 8px;
padding: 20px; padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: var(--card-shadow);
max-height: calc(100vh - 200px); max-height: calc(100vh - 200px);
overflow-y: auto; overflow-y: auto;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.logs-container::-webkit-scrollbar { .logs-container::-webkit-scrollbar {
width: 8px; width: 4px;
} }
.logs-container::-webkit-scrollbar-track { .logs-container::-webkit-scrollbar-track {
background: var(--bg-color); background: transparent;
border-radius: 0 8px 8px 0;
} }
.logs-container::-webkit-scrollbar-thumb { .logs-container::-webkit-scrollbar-thumb {
background: var(--primary-color); background: rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 2px;
} }
.logs-container::-webkit-scrollbar-thumb:hover { .logs-container::-webkit-scrollbar-thumb:hover {
background: var(--sidebar-active-bg); background: rgba(0, 0, 0, 0.3);
} }
.log-list { .log-list {
@@ -169,14 +168,16 @@ export default {
display: flex; display: flex;
gap: 12px; gap: 12px;
padding: 12px; padding: 12px;
background: #f9f9f9; background: var(--surface-light);
border-radius: 6px; border-radius: 8px;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
font-size: 14px; font-size: 14px;
font-family: 'Consolas', 'Monaco', monospace; line-height: 1.29;
letter-spacing: -0.224px;
} }
.log-time { .log-time {
color: #999; color: var(--text-tertiary);
min-width: 160px; min-width: 160px;
} }
@@ -185,32 +186,32 @@ export default {
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 980px;
} }
.log-level.DEBUG { .log-level.DEBUG {
color: #52c41a; color: var(--log-debug-color);
background: #f6ffed; background: var(--log-debug-bg);
} }
.log-level.INFO { .log-level.INFO {
color: #1890ff; color: var(--log-info-color);
background: #e6f7ff; background: var(--log-info-bg);
} }
.log-level.WARN { .log-level.WARN {
color: #faad14; color: var(--log-warn-color);
background: #fffbe6; background: var(--log-warn-bg);
} }
.log-level.ERROR { .log-level.ERROR {
color: #ff4d4f; color: var(--log-error-color);
background: #fff1f0; background: var(--log-error-bg);
} }
.log-level.FATAL { .log-level.FATAL {
color: #cf1322; color: var(--log-fatal-color);
background: #fff1f0; background: var(--log-fatal-bg);
} }
.log-message { .log-message {

12
src/views/Monitor.vue
View File

@@ -276,8 +276,11 @@ export default {
} }
.card-value { .card-value {
font-size: 24px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600; font-size: 28px;
font-weight: 400;
line-height: 1.14;
letter-spacing: 0.196px;
color: var(--primary-color); color: var(--primary-color);
} }
@@ -296,11 +299,14 @@ export default {
.network-item { .network-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
} }
.network-label { .network-label {
color: #666; color: var(--text-tertiary);
} }
.network-value { .network-value {

17
src/views/Sessions.vue
View File

@@ -100,17 +100,19 @@ export default {
background-color: var(--card-bg); background-color: var(--card-bg);
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
box-shadow: var(--card-shadow);
} }
.session-icon { .session-icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%); background: var(--primary-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 24px; font-size: 24px;
color: #ffffff;
} }
.session-info { .session-info {
@@ -119,8 +121,11 @@ export default {
.session-user { .session-user {
margin-left: 8px; margin-left: 8px;
font-size: 16px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600; font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
color: var(--text-color); color: var(--text-color);
margin-bottom: 4px; margin-bottom: 4px;
transition: color 0.3s; transition: color 0.3s;
@@ -128,9 +133,11 @@ export default {
.session-id { .session-id {
margin-left: 8px; margin-left: 8px;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
font-size: 12px; font-size: 12px;
color: #999; line-height: 1.33;
font-family: 'Consolas', Courier, monospace; letter-spacing: -0.12px;
color: var(--text-tertiary);
} }
.card-body { .card-body {

1
src/views/SystemInfo.vue
View File

@@ -199,5 +199,6 @@ export default {
.card-icon { .card-icon {
font-size: 24px; font-size: 24px;
color: var(--primary-color);
} }
</style> </style>

36
src/views/Users.vue
View File

@@ -230,6 +230,7 @@ export default {
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: 8px;
background-color: var(--card-bg); background-color: var(--card-bg);
box-shadow: var(--card-shadow);
transition: background-color 0.3s; transition: background-color 0.3s;
} }
@@ -247,8 +248,11 @@ export default {
} }
.user-name { .user-name {
font-size: 16px; font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600; font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: 0.231px;
color: var(--text-color); color: var(--text-color);
transition: color 0.3s; transition: color 0.3s;
word-break: break-all; word-break: break-all;
@@ -269,12 +273,14 @@ export default {
.meta-item { .meta-item {
display: flex; display: flex;
gap: 8px; gap: 8px;
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.29;
letter-spacing: -0.224px;
} }
.meta-label { .meta-label {
color: var(--text-color); color: var(--text-tertiary);
opacity: 0.65;
} }
.meta-value { .meta-value {
@@ -286,26 +292,4 @@ export default {
display: flex; display: flex;
gap: 8px; gap: 8px;
} }
.dark .user-item {
background-color: var(--card-bg);
}
.dark .meta-label {
color: var(--text-color);
opacity: 0.65;
}
.dark .edit-btn {
background: #3d3d3d;
color: var(--text-color);
}
.dark .edit-btn:hover {
background: #4d4d4d;
}
.dark .delete-btn:hover {
background: #f04142;
}
</style> </style>

2
vite.config.js
View File

@@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
const APP_TARGET = '192.168.1.19:8080' const APP_TARGET = '10.0.64.19:8080'
export default defineConfig({ export default defineConfig({
define: { define: {