+
+
+
+
![Toolbox Logo]()
-
-
- {{ $t('TOOLBOX_TITLE') }}
-
-
- {{ $t('TOOLBOX_SUB_TITLE') }}
-
-
-
-
+
+
-
+
+
diff --git a/src/renderer/pages/UploaderConfigPage.vue b/src/renderer/pages/UploaderConfigPage.vue
index 55a4b616..3d435325 100644
--- a/src/renderer/pages/UploaderConfigPage.vue
+++ b/src/renderer/pages/UploaderConfigPage.vue
@@ -200,301 +200,5 @@ export default {
name: 'UploaderConfigPage'
}
-
+
diff --git a/src/renderer/pages/css/ShortKey.css b/src/renderer/pages/css/ShortKey.css
new file mode 100644
index 00000000..bfab6155
--- /dev/null
+++ b/src/renderer/pages/css/ShortKey.css
@@ -0,0 +1,452 @@
+.shortkey-container {
+ padding: 1.5rem;
+ min-height: 100vh;
+ background: var(--color-background-secondary);
+ color: var(--color-text-primary);
+ overflow-y: auto;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.shortkey-container::-webkit-scrollbar {
+ display: none;
+}
+
+/* Header */
+.shortkey-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--color-surface);
+ border-radius: 12px;
+ padding: 1.5rem;
+ margin-bottom: 1.5rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border: 1px solid var(--color-border);
+}
+
+.header-content {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.header-icon {
+ color: var(--color-accent);
+}
+
+.shortkey-header h1 {
+ margin: 0;
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.shortkey-header p {
+ margin: 0;
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+}
+
+/* Card */
+.shortkey-card {
+ background: var(--color-background-primary);
+ border-radius: 12px;
+ box-shadow: 0 2px 8px var(--color-border);
+ border: 1px solid var(--color-border);
+ overflow: hidden;
+}
+
+/* Table */
+.table-container {
+ overflow-x: auto;
+}
+
+.shortkey-table {
+ width: 100%;
+ border-collapse: collapse;
+ background: transparent;
+}
+
+.shortkey-table th {
+ background: var(--color-background-tertiary);
+ color: var(--color-text-primary);
+ font-weight: 600;
+ font-size: 0.875rem;
+ padding: 1rem;
+ text-align: left;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.shortkey-table td {
+ padding: 1rem;
+ border-bottom: 1px solid var(--color-border-secondary);
+ vertical-align: middle;
+}
+
+.table-row:hover {
+ background: var(--color-background-tertiary);
+}
+
+.table-row:last-child td {
+ border-bottom: none;
+}
+
+/* Table Cells */
+.name-cell {
+ font-weight: 500;
+ color: var(--color-text-primary);
+ width: 25%;
+}
+
+.key-cell {
+ width: 20%;
+}
+
+.key-binding {
+ display: flex;
+ align-items: center;
+}
+
+.key-display {
+ background: var(--color-background-tertiary);
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ padding: 0.25rem 0.5rem;
+ font-family: monospace;
+ font-size: 0.75rem;
+ color: var(--color-text-primary);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.no-binding {
+ color: var(--color-text-secondary);
+ font-style: italic;
+ font-size: 0.875rem;
+}
+
+.status-cell {
+ width: 15%;
+}
+
+.status-badge {
+ display: inline-block;
+ padding: 0.25rem 0.75rem;
+ border-radius: 12px;
+ font-size: 0.75rem;
+ font-weight: 500;
+}
+
+.status-enabled {
+ background: rgba(103, 194, 58, 0.1);
+ color: #67c23a;
+ border: 1px solid rgba(103, 194, 58, 0.2);
+}
+
+.status-disabled {
+ background: rgba(245, 108, 108, 0.1);
+ color: #f56c6c;
+ border: 1px solid rgba(245, 108, 108, 0.2);
+}
+
+.source-cell {
+ width: 15%;
+}
+
+.source-name {
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+}
+
+.actions-cell {
+ width: 25%;
+}
+
+.action-buttons {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+/* Buttons */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.375rem;
+ padding: 0.5rem 0.875rem;
+ border-radius: 6px;
+ border: none;
+ font-size: 0.75rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ min-width: fit-content;
+ text-decoration: none;
+}
+
+.btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.btn:hover:not(:disabled) {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.btn-sm {
+ padding: 0.375rem 0.75rem;
+ font-size: 0.75rem;
+}
+
+.btn-primary {
+ background: #409eff;
+ color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+ background: #66b1ff;
+}
+
+.btn-secondary {
+ background: var(--color-background-tertiary);
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+ background: var(--color-background-secondary);
+ border-color: var(--color-accent);
+}
+
+.btn-success {
+ background: #67c23a;
+ color: white;
+}
+
+.btn-success:hover:not(:disabled) {
+ background: #85ce61;
+}
+
+.btn-danger {
+ background: #f56c6c;
+ color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+ background: #f78989;
+}
+
+/* Modal */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ padding: 1rem;
+}
+
+.modal-content {
+ background: var(--color-background-primary);
+ border-radius: 12px;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ border: 1px solid var(--color-border);
+ max-width: 500px;
+ width: 100%;
+ max-height: 90vh;
+ overflow: hidden;
+}
+
+.modal-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem;
+ border-bottom: 1px solid var(--color-border-secondary);
+}
+
+.modal-title {
+ margin: 0;
+ font-size: 1.125rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.modal-close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 6px;
+ border: none;
+ background: var(--color-background-tertiary);
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+ background: var(--color-background-secondary);
+ color: var(--color-text-primary);
+}
+
+.modal-body {
+ padding: 1.5rem;
+}
+
+.modal-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 0.75rem;
+ padding: 1rem 1.5rem;
+ border-top: 1px solid var(--color-border-secondary);
+ background: var(--color-background-tertiary);
+}
+
+/* Form Elements */
+.form-group {
+ margin-bottom: 1rem;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+.form-input {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ background: var(--color-background-primary);
+ color: var(--color-text-primary);
+ font-size: 0.875rem;
+ transition: all 0.2s ease;
+ box-sizing: border-box;
+}
+
+.form-input:focus {
+ outline: none;
+ border-color: var(--color-blue-common);
+ box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.key-input {
+ font-family: monospace;
+ text-align: center;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+}
+
+.input-hint {
+ margin-top: 0.5rem;
+ font-size: 0.75rem;
+ color: var(--color-text-secondary);
+ text-align: center;
+}
+
+/* Transitions */
+.modal-enter-active,
+.modal-leave-active {
+ transition: all 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+ opacity: 0;
+ transform: scale(0.9);
+}
+
+.modal-enter-active .modal-content,
+.modal-leave-active .modal-content {
+ transition: all 0.3s ease;
+}
+
+.modal-enter-from .modal-content,
+.modal-leave-to .modal-content {
+ transform: translateY(-20px);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .shortkey-container {
+ padding: 1rem;
+ }
+
+ .shortkey-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1rem;
+ }
+
+ .table-container {
+ overflow-x: auto;
+ }
+
+ .shortkey-table th,
+ .shortkey-table td {
+ padding: 0.75rem 0.5rem;
+ }
+
+ .action-buttons {
+ flex-direction: column;
+ gap: 0.25rem;
+ }
+
+ .btn-sm {
+ padding: 0.25rem 0.5rem;
+ font-size: 0.7rem;
+ }
+
+ .modal-content {
+ margin: 1rem;
+ }
+
+ .modal-header,
+ .modal-body,
+ .modal-footer {
+ padding: 1rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .shortkey-container {
+ padding: 0.75rem;
+ }
+
+ .shortkey-header h1 {
+ font-size: 1.25rem;
+ }
+
+ .shortkey-table {
+ font-size: 0.875rem;
+ }
+
+ .shortkey-table th,
+ .shortkey-table td {
+ padding: 0.5rem 0.375rem;
+ }
+}
+
+/* Focus styles for accessibility */
+.btn:focus-visible,
+.modal-close:focus-visible {
+ outline: 2px solid var(--color-accent);
+ outline-offset: 2px;
+}
+
+.form-input:focus-visible {
+ outline: 2px solid var(--color-accent);
+ outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/src/renderer/pages/css/ToolboxPage.css b/src/renderer/pages/css/ToolboxPage.css
new file mode 100644
index 00000000..8986efa2
--- /dev/null
+++ b/src/renderer/pages/css/ToolboxPage.css
@@ -0,0 +1,371 @@
+/* Global scrolling behavior */
+html, body {
+ overflow-x: hidden;
+}
+
+/* Container */
+.toolbox-container {
+ padding: 1rem;
+ width: 100%;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ min-height: 100vh;
+ box-sizing: border-box;
+ overflow-y: auto;
+}
+
+/* Card Base */
+.toolbox-card {
+ background: var(--color-surface);
+ border: 1px solid var(--color-border-secondary);
+ border-radius: var(--radius-xl);
+ overflow: hidden;
+ transition: var(--transition-medium);
+ box-shadow: var(--shadow-sm);
+}
+
+.toolbox-card:hover {
+ box-shadow: var(--shadow-md);
+ border-color: var(--color-border);
+}
+
+/* Header Card */
+.header-card .card-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 1.5rem;
+ border-bottom: 1px solid var(--color-border-secondary);
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.header-content {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ flex: 1;
+}
+
+.header-logo {
+ width: 48px;
+ height: 48px;
+ border-radius: var(--radius-lg);
+ object-fit: cover;
+}
+
+.header-text {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.header-title {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin: 0;
+ letter-spacing: -0.025em;
+}
+
+.header-subtitle {
+ font-size: 0.875rem;
+ color: var(--color-text-secondary);
+ margin: 0;
+}
+
+.header-actions {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ flex-wrap: wrap;
+}
+
+.action-button {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1.25rem;
+ background: var(--color-accent);
+ color: white;
+ border: none;
+ border-radius: var(--radius-lg);
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: var(--transition-fast);
+ font-family: inherit;
+ min-width: 120px;
+ justify-content: center;
+}
+
+.action-button:hover:not(.disabled) {
+ background: var(--color-accent-hover);
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-md);
+}
+
+.action-button.disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.action-button.secondary {
+ background: var(--color-surface-elevated);
+ color: var(--color-text-primary);
+ border: 1px solid var(--color-border);
+}
+
+.action-button.secondary:hover {
+ background: var(--color-surface);
+ border-color: var(--color-accent);
+ color: var(--color-accent);
+}
+
+.action-button.small {
+ padding: 0.5rem 0.75rem;
+ font-size: 0.75rem;
+ min-width: auto;
+}
+
+.success-tips {
+ padding: 0.75rem 1.25rem;
+ background: linear-gradient(135deg, rgba(103, 194, 58, 0.1) 0%, var(--color-surface) 100%);
+ border: 1px solid rgba(103, 194, 58, 0.3);
+ border-radius: var(--radius-lg);
+ color: #67C23A;
+ font-size: 0.875rem;
+ font-weight: 500;
+}
+
+.cant-fix-container {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ flex-wrap: wrap;
+}
+
+.cant-fix-text {
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+}
+
+/* Progress Card */
+.progress-card {
+ border-radius: var(--radius-lg);
+}
+
+.progress-container {
+ padding: 1rem 1.5rem;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.progress-bar {
+ flex: 1;
+ height: 8px;
+ background: var(--color-surface-elevated);
+ border-radius: var(--radius-full);
+ overflow: hidden;
+ position: relative;
+}
+
+.progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+ border-radius: var(--radius-full);
+ transition: width 0.3s ease-in-out;
+ position: relative;
+}
+
+.progress-fill::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
+ animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(100%); }
+}
+
+.progress-text {
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ min-width: 40px;
+ text-align: right;
+}
+
+/* Items Card */
+.items-card {
+ border-radius: var(--radius-lg);
+}
+
+.card-title {
+ font-size: 1.125rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin: 0;
+}
+
+.items-list {
+ padding: 0;
+}
+
+.item {
+ border-bottom: 1px solid var(--color-border-secondary);
+ transition: var(--transition-fast);
+}
+
+.item:last-child {
+ border-bottom: none;
+}
+
+.item:hover {
+ background: var(--color-surface-elevated);
+}
+
+.item-active {
+ background: var(--color-surface-elevated);
+}
+
+.item-error {
+ border-left: 3px solid #F56C6C;
+}
+
+.item-success {
+ border-left: 3px solid #67C23A;
+}
+
+.item-loading {
+ border-left: 3px solid var(--color-accent);
+}
+
+.item-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 1.5rem;
+ cursor: pointer;
+ transition: var(--transition-fast);
+}
+
+.item-header:hover {
+ background: rgba(0, 0, 0, 0.02);
+}
+
+.item-title {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ flex: 1;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+.item-chevron {
+ color: var(--color-text-secondary);
+ transition: var(--transition-fast);
+ display: flex;
+ align-items: center;
+}
+
+.item-active .item-chevron {
+ transform: rotate(180deg);
+ color: var(--color-accent);
+}
+
+.item-content-enter-active,
+.item-content-leave-active {
+ transition: all 0.3s ease;
+ overflow: hidden;
+}
+
+.item-content-enter-from,
+.item-content-leave-to {
+ opacity: 0;
+ max-height: 0;
+}
+
+.item-content-enter-to,
+.item-content-leave-from {
+ opacity: 1;
+ max-height: 200px;
+}
+
+.item-content {
+ padding: 0 1.5rem 1rem;
+ border-top: 1px solid var(--color-border-secondary);
+ background: var(--color-surface);
+}
+
+.item-message {
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+ line-height: 1.5;
+ margin-bottom: 0.75rem;
+}
+
+.item-actions {
+ display: flex;
+ justify-content: flex-start;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .toolbox-container {
+ padding: 0.75rem;
+ gap: 1rem;
+ }
+
+ .header-card .card-header {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 1rem;
+ }
+
+ .header-content {
+ justify-content: center;
+ text-align: center;
+ }
+
+ .header-actions {
+ justify-content: center;
+ }
+
+ .cant-fix-container {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .progress-container {
+ padding: 0.75rem 1rem;
+ }
+
+ .item-header {
+ padding: 0.75rem 1rem;
+ }
+
+ .item-content {
+ padding: 0 1rem 0.75rem;
+ }
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+ .item-header:hover {
+ background: rgba(255, 255, 255, 0.05);
+ }
+}
diff --git a/src/renderer/pages/css/UploaderConfigPage.css b/src/renderer/pages/css/UploaderConfigPage.css
new file mode 100644
index 00000000..39427878
--- /dev/null
+++ b/src/renderer/pages/css/UploaderConfigPage.css
@@ -0,0 +1,296 @@
+/* Container */
+.config-container {
+ padding: 1rem;
+ width: 100%;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ min-height: 100vh;
+ box-sizing: border-box;
+ overflow-y: auto;
+}
+
+/* Card Base */
+.config-card {
+ background: var(--color-surface);
+ border: 1px solid var(--color-border-secondary);
+ border-radius: var(--radius-xl);
+ overflow: hidden;
+ transition: var(--transition-medium);
+ box-shadow: var(--shadow-sm);
+}
+
+.config-card:hover {
+ box-shadow: var(--shadow-md);
+ border-color: var(--color-border);
+}
+
+/* Header Card */
+.header-card .card-header {
+ padding: 1.5rem 2rem;
+ border-bottom: 1px solid var(--color-border-secondary);
+}
+
+.page-title {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin: 0;
+ letter-spacing: -0.025em;
+}
+
+/* Main Card */
+.main-card {
+ background: var( --color-background-tertiary);
+ padding: 1.5rem;
+}
+
+.config-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 1rem;
+ width: 100%;
+}
+
+@media (max-width: 768px) {
+ .config-grid {
+ grid-template-columns: 1fr;
+ gap: 0.75rem;
+ }
+}
+
+@media (min-width: 1200px) {
+ .config-grid {
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 1.25rem;
+ }
+}
+
+/* Config Items */
+.config-item {
+ background: var(--color-surface-elevated);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: 1.25rem;
+ cursor: pointer;
+ transition: var(--transition-medium);
+ position: relative;
+ min-height: 120px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.config-item:hover {
+ background: var(--color-surface);
+ border-color: var(--color-accent);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-md);
+}
+
+.config-item.selected {
+ border-color: var(--color-accent);
+ background: var(--color-surface);
+ box-shadow: var(--shadow-md);
+}
+
+.config-content {
+ flex: 1;
+ margin-right: 2rem;
+}
+
+.config-name {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: 0.5rem;
+ line-height: 1.4;
+}
+
+.config-update-time {
+ font-size: 0.875rem;
+ color: var(--color-text-secondary);
+ margin-bottom: 0.75rem;
+}
+
+.default-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.25rem 0.75rem;
+ background: var(--color-accent);
+ color: white;
+ font-size: 0.75rem;
+ font-weight: 500;
+ border-radius: var(--radius-md);
+ text-transform: uppercase;
+ letter-spacing: 0.025em;
+}
+
+.config-actions {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ display: flex;
+ gap: 0.5rem;
+}
+
+.action-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ background: var(--color-surface-elevated);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ cursor: pointer;
+ transition: var(--transition-fast);
+ color: var(--color-text-secondary);
+}
+
+.action-btn:hover {
+ background: var(--color-surface);
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-sm);
+}
+
+.edit-btn:hover {
+ border-color: var(--color-accent);
+ color: var(--color-accent);
+}
+
+.delete-btn:hover:not(.disabled) {
+ border-color: var(--color-danger);
+ color: var(--color-danger);
+}
+
+.delete-btn.disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+/* Add New Config Item */
+.config-item-add {
+ border: 2px dashed var(--color-border);
+ background: var(--color-surface);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 120px;
+}
+
+.config-item-add:hover {
+ border-color: var(--color-accent);
+ background: var(--color-surface-elevated);
+ transform: translateY(-2px);
+}
+
+.add-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.75rem;
+ color: var(--color-text-secondary);
+ transition: var(--transition-fast);
+}
+
+.config-item-add:hover .add-content {
+ color: var(--color-accent);
+}
+
+.add-text {
+ font-size: 0.875rem;
+ font-weight: 500;
+}
+
+/* Actions Card */
+.actions-card {
+ border-radius: var(--radius-lg);
+}
+
+.card-actions {
+ padding: 1.25rem 1.5rem;
+ display: flex;
+ justify-content: center;
+}
+
+.primary-button {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.875rem 2rem;
+ background: var(--color-accent);
+ color: white;
+ border: none;
+ border-radius: var(--radius-lg);
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: var(--transition-fast);
+ font-family: inherit;
+ min-width: 200px;
+ justify-content: center;
+}
+
+.primary-button:hover:not(:disabled) {
+ background: var(--color-accent-hover);
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-md);
+}
+
+.primary-button:disabled {
+ background: var(--color-border);
+ color: var(--color-text-secondary);
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .config-container {
+ padding: 0.75rem;
+ gap: 1rem;
+ }
+
+ .header-card .card-header {
+ padding: 1rem 1.25rem;
+ }
+
+ .page-title {
+ font-size: 1.25rem;
+ }
+
+ .main-card {
+ padding: 1rem;
+ }
+
+ .config-item {
+ padding: 1rem;
+ min-height: 100px;
+ }
+
+ .config-actions {
+ top: 0.75rem;
+ right: 0.75rem;
+ }
+
+ .action-btn {
+ width: 28px;
+ height: 28px;
+ }
+
+ .primary-button {
+ padding: 0.75rem 1.5rem;
+ min-width: 180px;
+ }
+}
+
+@media (min-width: 1024px) {
+ .config-container {
+ padding: 1.5rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+}
\ No newline at end of file
+
+ + {{ t('pages.toolbox.title') }} +
++ {{ t('pages.toolbox.description') }} +
+
-
- {{ $t('TOOLBOX_START_SCAN') }}
-
+ {{ t('pages.toolbox.startScan') }}
+
-
+
+
+
- {{ $t('TOOLBOX_SUCCESS_TIPS') }}
+
- {{ $t('TOOLBOX_START_FIX') }}
-
+ {{ t('pages.toolbox.startFix') }}
+
-
-
-
-
-
- {{ item.title }}
-
+
+
+ {{ t('pages.toolbox.success') }}
-
- {{ $t('TOOLBOX_CANT_AUTO_FIX') }}
-
+ {{ $t('pages.toolbox.autoFixFail') }}
+
+ {{ t('pages.toolbox.reScan') }}
+
-
-
-
-
- {{ item.msg || '' }}
-
-
-
+
+
+
+
+
+ {{ Math.round(progress) }}%
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+
+
+
+