refactor(styles): move common styles to shared CSS file

Extract duplicated styles across multiple components into a common CSS file and import it where needed. This improves maintainability by reducing code duplication and centralizing style definitions.

src/views/InstanceDetail.vue

@@ -144,6 +144,8 @@ export default {
 </script>
 
 <style scoped>
+@import '../styles/common.css';
+
 .instance-detail-page {
     padding: 24px;
 }
@@ -152,28 +154,6 @@ export default {
     display: flex;
     align-items: center;
     gap: 16px;
-    margin-bottom: 24px;
-}
-
-.back-btn {
-    padding: 8px 16px;
-    background: #f0f0f0;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: all 0.3s;
-}
-
-.back-btn:hover {
-    background: #e0e0e0;
-}
-
-.page-header h2 {
-    font-size: 24px;
-    color: var(--text-color);
-    margin: 0;
-    transition: color 0.3s;
 }
 
 .detail-content {
@@ -182,131 +162,24 @@ export default {
     gap: 24px;
 }
 
-.section {
-    background: var(--card-bg);
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    transition: background-color 0.3s;
-}
-
-.section h3 {
-    font-size: 18px;
-    color: var(--text-color);
-    margin: 0 0 16px 0;
-    transition: color 0.3s;
-}
-
 .config-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }
 
-.config-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 12px;
-    background: #f9f9f9;
-    border-radius: 6px;
-}
-
-.config-key {
-    color: #666;
-    font-weight: 500;
-}
-
-.config-value {
-    color: var(--text-color);
-    transition: color 0.3s;
-}
-
 .proxy-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }
 
-.proxy-item {
-    padding: 16px;
-    background: #f9f9f9;
-    border-radius: 6px;
-}
-
-.proxy-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-}
-
-.proxy-name {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--text-color);
-    transition: color 0.3s;
-}
-
-.proxy-status {
-    padding: 4px 12px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: 500;
-}
-
-.proxy-status.active {
-    background: #f6ffed;
-    color: #52c41a;
-}
-
-.proxy-status.inactive {
-    background: #fff1f0;
-    color: #ff4d4f;
-}
-
-.proxy-details {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.proxy-detail {
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-}
-
-.detail-key {
-    color: #666;
-}
-
-.detail-value {
-    color: var(--text-color);
-    transition: color 0.3s;
-}
-
-.logs-container {
-    max-height: 400px;
-    overflow-y: auto;
-}
-
-.log-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
 .log-item {
-    display: flex;
-    gap: 12px;
     padding: 8px;
-    background: #f9f9f9;
     border-radius: 4px;
-    font-size: 14px;
 }
 
 .log-time {
-    color: #999;
     min-width: 140px;
 }
 
@@ -327,16 +200,8 @@ export default {
     color: #ff4d4f;
 }
 
-.log-message {
-    color: var(--text-color);
-    flex: 1;
-    transition: color 0.3s;
-}
-
 .empty-state {
-    text-align: center;
     padding: 40px 20px;
-    color: #999;
     font-size: 14px;
 }
 </style>