fix: improve error handling and styles in certificate components #1442

Author: 0xJacky

app/src/views/certificate/components/AutoCertManagement.vue

@@ -98,7 +98,5 @@ function handleRenewed() {
 </template>
 
 <style scoped lang="less">
-.auto-cert-management {
-  margin-bottom: 24px;
-}
+
 </style>

app/src/views/certificate/components/CertificateBasicInfo.vue

@@ -43,7 +43,7 @@ async function copyToClipboard(text: string, label: string) {
     <AFormItem
       :label="$gettext('Name')"
       :validate-status="errors?.name ? 'error' : ''"
-      :help="errors?.name === 'required'
+      :help="errors?.name?.includes('required')
         ? $gettext('This field is required')
         : ''"
     >
@@ -77,8 +77,8 @@ async function copyToClipboard(text: string, label: string) {
     <AFormItem
       :label="$gettext('SSL Certificate Path')"
       :validate-status="errors?.ssl_certificate_path ? 'error' : ''"
-      :help="errors?.ssl_certificate_path === 'required' ? $gettext('This field is required')
-        : errors?.ssl_certificate_path === 'certificate_path'
+      :help="errors?.ssl_certificate_path?.includes('required') ? $gettext('This field is required')
+        : errors?.ssl_certificate_path?.includes('certificate_path')
           ? $gettext('The path exists, but the file is not a certificate') : ''"
     >
       <div v-if="isManaged" class="copy-container">
@@ -111,8 +111,8 @@ async function copyToClipboard(text: string, label: string) {
     <AFormItem
       :label="$gettext('SSL Certificate Key Path')"
       :validate-status="errors?.ssl_certificate_key_path ? 'error' : ''"
-      :help="errors?.ssl_certificate_key_path === 'required' ? $gettext('This field is required')
-        : errors?.ssl_certificate_key_path === 'privatekey_path'
+      :help="errors?.ssl_certificate_key_path?.includes('required') ? $gettext('This field is required')
+        : errors?.ssl_certificate_key_path?.includes('privatekey_path')
           ? $gettext('The path exists, but the file is not a private key') : ''"
     >
       <div v-if="isManaged" class="copy-container">

app/src/views/certificate/components/CertificateContentEditor.vue

@@ -241,7 +241,6 @@ function handleDrop(e: DragEvent, type: 'certificate' | 'key') {
     width: 100%;
 
     .label-text {
-      font-weight: 500;
       color: rgba(0, 0, 0, 0.85);
     }
   }
@@ -282,4 +281,30 @@ function handleDrop(e: DragEvent, type: 'certificate' | 'key') {
     }
   }
 }
+
+// 暗夜模式适配
+.dark {
+  .certificate-content-editor {
+    .label-with-copy {
+      .label-text {
+        color: rgba(255, 255, 255, 0.85);
+      }
+    }
+
+    .code-editor-container {
+      .drag-overlay {
+        background-color: rgba(64, 169, 255, 0.15);
+        border-color: #177ddc;
+
+        .drag-content {
+          color: #40a9ff;
+
+          p {
+            color: #40a9ff;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

app/src/views/certificate/components/CertificateFileUpload.vue

@@ -143,7 +143,7 @@ const uploadText = computed(() => {
       </template>
       {{ uploadText }}
     </AButton>
-    <span class="ml-2 text-gray-500 text-sm">
+    <span class="ml-2 text-gray-500 text-sm hint-text">
       {{ $gettext('or drag file to editor below') }}
     </span>
   </div>
@@ -152,5 +152,18 @@ const uploadText = computed(() => {
 <style scoped lang="less">
 .certificate-file-upload {
   margin-bottom: 12px;
+
+  .hint-text {
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+
+// 暗夜模式适配
+.dark {
+  .certificate-file-upload {
+    .hint-text {
+      color: rgba(255, 255, 255, 0.45);
+    }
+  }
 }
 </style>