web/frpc: redesign dashboard (#5145)

web/frpc/src/assets/css/custom.css

@@ -1,32 +1,9 @@
-.el-form-item span {
-  margin-left: 15px;
-}
-
-.proxy-table-expand {
-  font-size: 0;
-}
-
-.proxy-table-expand .el-form-item__label{
-  width: 90px;
-  color: #99a9bf;
-}
-
-.proxy-table-expand .el-form-item {
-  margin-right: 0;
-  margin-bottom: 0;
-  width: 50%;
-}
-
-.el-table .el-table__expanded-cell {
-  padding: 20px 50px;
-}
-
-/* Modern styles */
+/* Modern Base Styles */
 * {
   box-sizing: border-box;
 }
 
-/* Smooth transitions */
+/* Smooth transitions for Element Plus components */
 .el-button,
 .el-card,
 .el-input,
@@ -37,7 +14,7 @@
 
 /* Card hover effects */
 .el-card:hover {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
 }
 
 /* Better scrollbar */
@@ -60,16 +37,6 @@
   background: #a8a8a8;
 }
 
-/* Page headers */
-.el-page-header {
-  padding: 16px 0;
-}
-
-.el-page-header__title {
-  font-size: 20px;
-  font-weight: 600;
-}
-
 /* Better form layouts */
 .el-form-item {
   margin-bottom: 18px;
@@ -87,3 +54,52 @@
     padding-right: 10px !important;
   }
 }
+
+/* Input enhancements */
+.el-input__wrapper {
+  transition: all 0.2s ease;
+}
+
+.el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
+}
+
+/* Button enhancements */
+.el-button {
+  font-weight: 500;
+}
+
+/* Tag enhancements */
+.el-tag {
+  font-weight: 500;
+}
+
+/* Card enhancements */
+.el-card__header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.el-card__body {
+  padding: 20px;
+}
+
+/* Table enhancements */
+.el-table {
+  font-size: 14px;
+}
+
+.el-table th {
+  font-weight: 600;
+}
+
+/* Empty state */
+.el-empty__description {
+  margin-top: 16px;
+  font-size: 14px;
+}
+
+/* Loading state */
+.el-loading-mask {
+  border-radius: 12px;
+}

web/frpc/src/assets/css/dark.css

@@ -1,11 +1,14 @@
+/* Dark Mode Theme */
 html.dark {
   --el-bg-color: #1e1e2e;
+  --el-bg-color-page: #1a1a2e;
+  --el-bg-color-overlay: #27293d;
   --el-fill-color-blank: #1e1e2e;
-  background-color: #1e1e2e;
+  background-color: #1a1a2e;
 }
 
 html.dark body {
-  background-color: #1e1e2e;
+  background-color: #1a1a2e;
   color: #e5e7eb;
 }
 
@@ -28,23 +31,50 @@ html.dark .el-card {
   border-color: #3a3d5c;
 }
 
+html.dark .el-card__header {
+  border-bottom-color: #3a3d5c;
+}
+
 /* Dark mode inputs */
 html.dark .el-input__wrapper {
   background-color: #27293d;
-  border-color: #3a3d5c;
+  box-shadow: 0 0 0 1px #3a3d5c inset;
+}
+
+html.dark .el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px #4a4d6c inset;
+}
+
+html.dark .el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
 }
 
 html.dark .el-input__inner {
   color: #e5e7eb;
 }
 
+html.dark .el-input__inner::placeholder {
+  color: #6b7280;
+}
+
+/* Dark mode textarea */
+html.dark .el-textarea__inner {
+  background-color: #1e1e2d;
+  border-color: #3a3d5c;
+  color: #e5e7eb;
+}
+
+html.dark .el-textarea__inner::placeholder {
+  color: #6b7280;
+}
+
 /* Dark mode table */
 html.dark .el-table {
   background-color: #27293d;
   color: #e5e7eb;
 }
 
-html.dark .el-table th {
+html.dark .el-table th.el-table__cell {
   background-color: #1e1e2e;
   color: #e5e7eb;
 }
@@ -53,6 +83,98 @@ html.dark .el-table tr {
   background-color: #27293d;
 }
 
-html.dark .el-table--striped .el-table__body tr.el-table__row--striped td {
+html.dark .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
   background-color: #1e1e2e;
 }
+
+html.dark .el-table__row:hover > td.el-table__cell {
+  background-color: #2a2a3c !important;
+}
+
+/* Dark mode tags */
+html.dark .el-tag--info {
+  background-color: #3a3d5c;
+  border-color: #3a3d5c;
+  color: #e5e7eb;
+}
+
+/* Dark mode buttons */
+html.dark .el-button--default {
+  background-color: #27293d;
+  border-color: #3a3d5c;
+  color: #e5e7eb;
+}
+
+html.dark .el-button--default:hover {
+  background-color: #2a2a3c;
+  border-color: #4a4d6c;
+  color: #fff;
+}
+
+/* Dark mode select */
+html.dark .el-select .el-input__wrapper {
+  background-color: #27293d;
+}
+
+html.dark .el-select-dropdown {
+  background-color: #27293d;
+  border-color: #3a3d5c;
+}
+
+html.dark .el-select-dropdown__item {
+  color: #e5e7eb;
+}
+
+html.dark .el-select-dropdown__item:hover {
+  background-color: #2a2a3c;
+}
+
+/* Dark mode dialog */
+html.dark .el-dialog {
+  background-color: #27293d;
+}
+
+html.dark .el-dialog__header {
+  border-bottom-color: #3a3d5c;
+}
+
+html.dark .el-dialog__title {
+  color: #e5e7eb;
+}
+
+html.dark .el-dialog__body {
+  color: #e5e7eb;
+}
+
+/* Dark mode message box */
+html.dark .el-message-box {
+  background-color: #27293d;
+  border-color: #3a3d5c;
+}
+
+html.dark .el-message-box__title {
+  color: #e5e7eb;
+}
+
+html.dark .el-message-box__message {
+  color: #e5e7eb;
+}
+
+/* Dark mode empty */
+html.dark .el-empty__description {
+  color: #9ca3af;
+}
+
+/* Dark mode loading */
+html.dark .el-loading-mask {
+  background-color: rgba(30, 30, 46, 0.9);
+}
+
+html.dark .el-loading-text {
+  color: #e5e7eb;
+}
+
+/* Dark mode tooltip */
+html.dark .el-tooltip__trigger {
+  color: #e5e7eb;
+}