前段
Change-Id: I718d4d07ea03c6d2b6bcbd4d426c5d1af2201bf4
diff --git a/src/components/HelpDetail.css b/src/components/HelpDetail.css
new file mode 100644
index 0000000..94d791b
--- /dev/null
+++ b/src/components/HelpDetail.css
@@ -0,0 +1,557 @@
+/* HelpDetail.css */
+.help-detail-container {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+
+ .back-button {
+ background: none;
+ border: none;
+ color: #1890ff;
+ cursor: pointer;
+ font-size: 16px;
+ margin-bottom: 20px;
+ padding: 5px 0;
+ }
+
+ .help-post {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ }
+
+ .help-post.solved {
+ border-left: 4px solid #52c41a;
+ }
+
+ .post-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+ position: relative;
+ }
+
+ .post-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 10px;
+ }
+
+ .post-meta {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .post-author {
+ font-weight: bold;
+ }
+
+ .post-date {
+ color: #888;
+ font-size: 14px;
+ }
+
+ .solved-badge {
+ position: absolute;
+ right: 0;
+ top: 0;
+ background: #52c41a;
+ color: white;
+ padding: 2px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ }
+
+ .post-title {
+ font-size: 20px;
+ margin: 0 0 15px;
+ }
+
+ .post-content {
+ line-height: 1.6;
+ margin-bottom: 15px;
+ }
+
+ .post-actions {
+ display: flex;
+ gap: 15px;
+ }
+
+ .like-button, .favorite-button, .solve-button {
+ padding: 5px 15px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ background: #f5f5f5;
+ cursor: pointer;
+ }
+
+ .like-button.liked {
+ background: #e6f7ff;
+ border-color: #91d5ff;
+ color: #1890ff;
+ }
+
+ .favorite-button.favorited {
+ background: #fff7e6;
+ border-color: #ffd591;
+ color: #fa8c16;
+ }
+
+ .solve-button.solved {
+ background: #f6ffed;
+ border-color: #b7eb8f;
+ color: #52c41a;
+ }
+
+ .comments-section {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ }
+
+ .comment-form {
+ margin-bottom: 20px;
+ }
+
+ .comment-form textarea {
+ width: 100%;
+ padding: 10px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ resize: vertical;
+ min-height: 80px;
+ margin-bottom: 10px;
+ }
+
+ .image-upload {
+ margin-bottom: 10px;
+ }
+
+ .upload-button {
+ background: #f5f5f5;
+ border: 1px dashed #d9d9d9;
+ border-radius: 4px;
+ padding: 8px 16px;
+ cursor: pointer;
+ margin-bottom: 10px;
+ }
+
+ .image-preview {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+
+ .preview-item {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ }
+
+ .preview-item img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 4px;
+ }
+
+ .remove-image {
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ width: 20px;
+ height: 20px;
+ background: #ff4d4f;
+ color: white;
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ }
+
+ .submit-button {
+ background: #1890ff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 8px 16px;
+ cursor: pointer;
+ }
+
+ .comment-list {
+ margin-top: 20px;
+ }
+
+ .comment-item {
+ display: flex;
+ padding: 15px 0;
+ border-bottom: 1px solid #f0f0f0;
+ }
+
+ .comment-item:last-child {
+ border-bottom: none;
+ }
+
+ .comment-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 15px;
+ flex-shrink: 0;
+ }
+
+ .comment-content {
+ flex-grow: 1;
+ }
+
+ .comment-header {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ }
+
+ .comment-author {
+ font-weight: bold;
+ }
+
+ .comment-date {
+ color: #888;
+ font-size: 14px;
+ }
+
+ .comment-text {
+ line-height: 1.6;
+ margin-bottom: 8px;
+ }
+
+ .comment-images {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+ }
+
+ .comment-image {
+ max-width: 200px;
+ max-height: 150px;
+ border-radius: 4px;
+ }
+
+ .comment-actions {
+ margin-top: 10px;
+ }
+
+ .reply-form {
+ margin-top: 10px;
+ display: flex;
+ gap: 10px;
+ }
+
+ .reply-form textarea {
+ flex-grow: 1;
+ padding: 8px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ resize: vertical;
+ min-height: 40px;
+ }
+
+ .submit-reply {
+ background: #f5f5f5;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ padding: 0 15px;
+ cursor: pointer;
+ align-self: flex-end;
+ margin-bottom: 5px;
+ }
+
+ .reply-list {
+ margin-top: 10px;
+ padding-left: 15px;
+ border-left: 2px solid #f0f0f0;
+ }
+
+ .reply-item {
+ display: flex;
+ margin-top: 10px;
+ }
+
+ .reply-avatar {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ margin-right: 10px;
+ }
+
+ .reply-content {
+ flex-grow: 1;
+ }
+
+ .reply-header {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 5px;
+ }
+
+ .reply-author {
+ font-weight: bold;
+ font-size: 14px;
+ }
+
+ .reply-date {
+ color: #888;
+ font-size: 12px;
+ }
+
+ .reply-text {
+ font-size: 14px;
+ line-height: 1.5;
+ }
+
+ /* 评论项样式 */
+.comment-item {
+ display: flex;
+ margin-bottom: 20px;
+ padding: 15px;
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.comment-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 15px;
+ object-fit: cover;
+}
+
+.comment-content {
+ flex: 1;
+}
+
+.comment-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+}
+
+.comment-author {
+ font-weight: bold;
+ margin-right: 10px;
+ color: #333;
+}
+
+.comment-date {
+ font-size: 12px;
+ color: #999;
+}
+
+.comment-text {
+ margin-bottom: 10px;
+ line-height: 1.5;
+ color: #333;
+}
+
+.comment-actions {
+ display: flex;
+ align-items: center;
+ margin-top: 10px;
+}
+
+.like-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: #666;
+ font-size: 14px;
+ padding: 4px 8px;
+ display: flex;
+ align-items: center;
+}
+
+.like-button.liked {
+ color: #1877f2;
+}
+
+.like-button:hover {
+ text-decoration: underline;
+}
+
+/* 回复控制按钮 */
+.reply-controls {
+ margin: 10px 0;
+}
+
+.toggle-replies-btn {
+ background: none;
+ border: none;
+ color: #666;
+ cursor: pointer;
+ font-size: 14px;
+ padding: 4px 8px;
+}
+
+.toggle-replies-btn:hover {
+ color: #333;
+ text-decoration: underline;
+}
+
+.toggle-replies-btn:disabled {
+ color: #ccc;
+ cursor: not-allowed;
+}
+
+/* 回复表单 */
+.reply-form {
+ margin-top: 10px;
+ width: 100%;
+}
+
+.reply-form textarea {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ resize: vertical;
+ min-height: 60px;
+ margin-bottom: 8px;
+}
+
+.submit-reply {
+ background-color: #f0f2f5;
+ border: none;
+ border-radius: 4px;
+ padding: 6px 12px;
+ cursor: pointer;
+ color: #333;
+}
+
+.submit-reply:hover {
+ background-color: #e4e6eb;
+}
+
+/* 回复列表 */
+.reply-list {
+ margin-left: 55px; /* 头像宽度 + 边距 */
+ border-left: 2px solid #eee;
+ padding-left: 15px;
+ margin-top: 15px;
+}
+
+.reply-item {
+ display: flex;
+ margin-bottom: 15px;
+ padding: 12px;
+ background: #f9f9f9;
+ border-radius: 6px;
+}
+
+.reply-avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ margin-right: 10px;
+ object-fit: cover;
+}
+
+.reply-content {
+ flex: 1;
+}
+
+.reply-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 5px;
+}
+
+.reply-author {
+ font-weight: bold;
+ margin-right: 8px;
+ font-size: 14px;
+ color: #333;
+}
+
+.reply-date {
+ font-size: 12px;
+ color: #999;
+}
+
+.reply-text {
+ font-size: 14px;
+ line-height: 1.4;
+ color: #333;
+ margin-bottom: 5px;
+}
+
+.reply-actions {
+ margin-top: 5px;
+}
+
+/* 回复弹窗样式 */
+.reply-modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.reply-modal {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ width: 500px;
+ max-width: 90%;
+}
+
+.reply-modal h3 {
+ margin-top: 0;
+ margin-bottom: 15px;
+}
+
+.reply-modal textarea {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ resize: vertical;
+ min-height: 100px;
+ margin-bottom: 15px;
+}
+
+.modal-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+}
+
+.cancel-button {
+ background: #f5f5f5;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ padding: 8px 16px;
+ cursor: pointer;
+}
+
+.submit-button {
+ background: #1890ff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 8px 16px;
+ cursor: pointer;
+}
\ No newline at end of file