重构

apps/admin/src/views/matches/MatchEventEditor.vue

@@ -194,9 +194,9 @@ async function saveMeta() {
           </el-row>
         </div>
 
-        <div class="form-section">
+        <div class="form-section form-section--schedule">
           <div class="section-label">{{ t('matchEditor.group.schedule') }}</div>
-          <el-row :gutter="12">
+          <el-row :gutter="12" class="schedule-fields">
             <el-col :xs="24" :sm="12">
               <el-form-item :label="t('match.field.kickoff')" required>
                 <el-date-picker
@@ -207,6 +207,7 @@ async function saveMeta() {
                   :placeholder="t('matchEditor.ph.kickoff')"
                   style="width: 100%"
                 />
+                <p class="field-hint schedule-timezone-hint">{{ t('match.timezone.platform_hint') }}</p>
               </el-form-item>
             </el-col>
             <el-col :xs="24" :sm="12">
@@ -234,11 +235,6 @@ async function saveMeta() {
                 <el-switch v-model="form.isHot" size="small" />
               </el-form-item>
             </el-col>
-            <el-col :xs="12" :sm="6">
-              <el-form-item :label="t('matchEditor.field.correct_score_enabled')">
-                <el-switch v-model="form.correctScoreEnabled" size="small" />
-              </el-form-item>
-            </el-col>
           </el-row>
         </div>
       </el-form>
@@ -258,13 +254,15 @@ async function saveMeta() {
   flex-direction: column;
   gap: 12px;
   padding-bottom: 24px;
+  color: var(--text);
 }
 
 .panel {
-  background: #111;
-  border: 1px solid #252525;
+  background: #ffffff;
+  border: 1px solid var(--border);
   border-radius: 10px;
   padding: 12px 14px;
+  box-shadow: var(--shadow);
 }
 
 .panel-head {
@@ -274,14 +272,14 @@ async function saveMeta() {
   gap: 10px;
   margin-bottom: 10px;
   padding-bottom: 8px;
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid var(--border-soft);
 }
 
 .panel-title {
   font-size: 13px;
   font-weight: 700;
-  color: #ccc;
-  letter-spacing: 0.04em;
+  color: var(--text);
+  letter-spacing: 0;
 }
 
 .panel-foot {
@@ -289,7 +287,7 @@ async function saveMeta() {
   justify-content: flex-end;
   margin-top: 8px;
   padding-top: 12px;
-  border-top: 1px solid #222;
+  border-top: 1px solid var(--border-soft);
 }
 
 .form-section {
@@ -303,9 +301,9 @@ async function saveMeta() {
 .section-label {
   font-size: 11px;
   font-weight: 700;
-  color: var(--green-text);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  color: var(--success-text);
+  letter-spacing: 0;
+  text-transform: none;
   margin-bottom: 6px;
 }
 
@@ -313,6 +311,44 @@ async function saveMeta() {
   margin-bottom: 8px;
 }
 
+.form-section--schedule {
+  padding-top: 2px;
+}
+
+.schedule-fields {
+  row-gap: 8px;
+}
+
+.schedule-fields :deep(.el-form-item) {
+  align-items: center;
+  min-width: 0;
+}
+
+.schedule-fields :deep(.el-form-item__label) {
+  flex: 0 0 auto;
+  width: auto !important;
+  min-width: 64px;
+  padding-right: 10px;
+  white-space: nowrap;
+  word-break: keep-all;
+  line-height: 32px;
+}
+
+.schedule-fields :deep(.el-form-item__content) {
+  flex: 1;
+  min-width: 0;
+}
+
+.schedule-fields :deep(.el-date-editor),
+.schedule-fields :deep(.el-input),
+.schedule-fields :deep(.el-input-number) {
+  width: 100%;
+}
+
+.schedule-fields :deep(.el-switch) {
+  flex-shrink: 0;
+}
+
 .logo-inline {
   display: flex;
   align-items: center;
@@ -339,7 +375,7 @@ async function saveMeta() {
 
 .meta-form :deep(.el-input__inner),
 .meta-form :deep(.el-input-number .el-input__inner) {
-  color: #fff !important;
+  color: var(--text) !important;
 }
 
 .field-hint {
@@ -349,6 +385,10 @@ async function saveMeta() {
   line-height: 1.4;
 }
 
+.schedule-timezone-hint {
+  margin: 4px 0 0;
+}
+
 .league-readonly-grid {
   display: flex;
   align-items: flex-start;
@@ -360,7 +400,7 @@ async function saveMeta() {
   height: 40px;
   object-fit: contain;
   border-radius: 6px;
-  background: #1a1a1a;
+  background: #f4f0e8;
 }
 
 .league-readonly-names {
@@ -374,7 +414,7 @@ async function saveMeta() {
   display: flex;
   gap: 8px;
   font-size: 13px;
-  color: #ddd;
+  color: var(--text);
 }
 
 .league-readonly-lang {
@@ -382,4 +422,58 @@ async function saveMeta() {
   color: #8e8e93;
   font-size: 12px;
 }
+
+.panel-head,
+.panel-foot {
+  border-color: var(--border-soft);
+}
+
+.panel-title,
+.preview-title,
+.preview-bar-title,
+.league-readonly-line {
+  color: var(--text);
+}
+
+.section-label {
+  color: var(--success-text);
+  letter-spacing: 0;
+}
+
+.logo-inline-label,
+.meta-form :deep(.el-form-item__label),
+.field-hint,
+.league-readonly-lang {
+  color: var(--text-muted) !important;
+}
+
+.meta-form :deep(.el-input__inner),
+.meta-form :deep(.el-input-number .el-input__inner) {
+  color: var(--text) !important;
+}
+
+.league-readonly-logo img {
+  background: #f4f0e8;
+}
+
+@media (max-width: 760px) {
+  .panel-head,
+  .panel-foot,
+  .league-readonly-grid {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .schedule-fields :deep(.el-form-item) {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .schedule-fields :deep(.el-form-item__label) {
+    width: auto !important;
+    min-width: 0;
+    padding-right: 0;
+    line-height: 1.4;
+  }
+}
 </style>