first commit

src/pages/topic/publish.less

@@ -0,0 +1,176 @@
+.publishPage {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 24px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  gap: 16px;
+
+  .backButton {
+    border-radius: 6px;
+  }
+
+  h2 {
+    margin: 0;
+    color: #333;
+  }
+}
+
+.publishCard {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .ant-card-body {
+    padding: 32px;
+  }
+}
+
+.publishForm {
+  max-width: 800px;
+  margin: 0 auto;
+
+  .ant-form-item-label > label {
+    font-weight: 600;
+    color: #333;
+  }
+
+  .titleInput {
+    border-radius: 6px;
+    font-size: 16px;
+  }
+
+  .categorySelect {
+    border-radius: 6px;
+
+    .ant-select-selector {
+      border-radius: 6px;
+    }
+  }
+
+  .contentInput {
+    border-radius: 6px;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  .tagsInput {
+    border-radius: 6px;
+  }
+
+  .uploadComponent {
+    .ant-upload-select-picture-card {
+      width: 200px;
+      height: 120px;
+      border-radius: 8px;
+      border: 2px dashed #d9d9d9;
+      transition: border-color 0.3s;
+
+      &:hover {
+        border-color: #6f8cff;
+      }
+    }
+
+    .uploadImage {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .uploadPlaceholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #999;
+      font-size: 14px;
+
+      .anticon {
+        font-size: 24px;
+        color: #d9d9d9;
+      }
+    }
+
+    .uploadText {
+      margin-top: 8px;
+    }
+  }
+
+  .submitSection {
+    margin-bottom: 0;
+    padding-top: 24px;
+    border-top: 1px solid #f0f0f0;
+
+    .submitButton {
+      height: 44px;
+      padding: 0 32px;
+      border-radius: 22px;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .cancelButton {
+      height: 44px;
+      padding: 0 32px;
+      border-radius: 22px;
+      font-size: 16px;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .publishPage {
+    padding-bottom: 16px;
+  }
+
+  .header {
+    margin-bottom: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+
+    h2 {
+      font-size: 20px;
+    }
+  }
+
+  .publishCard {
+    .ant-card-body {
+      padding: 20px;
+    }
+  }
+
+  .publishForm {
+    .uploadComponent {
+      .ant-upload-select-picture-card {
+        width: 150px;
+        height: 90px;
+      }
+    }
+
+    .submitSection {
+      .submitButton,
+      .cancelButton {
+        width: 100%;
+        height: 40px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .publishForm {
+    .uploadComponent {
+      .ant-upload-select-picture-card {
+        width: 120px;
+        height: 72px;
+      }
+    }
+  }
+}