上传文件至 ''

db.json

@@ -0,0 +1,30 @@
+{
+  "designs": [
+    {
+      "id": 1,
+      "title": "森系小清新",
+      "comments": [
+        {"id": 1, "user": "用户A", "text": "这个设计太美了！", "time": "2025-07-03T10:00:00Z"}
+      ]
+    },
+    {
+      "id": 2,
+      "title": "复古摩登",
+      "comments": []
+    },
+    {
+      "id": 3,
+      "title": "森系小清新",
+      "comments": [
+        {"id": 3, "user": "用户C", "text": "这个设计太美了！3", "time": "2025-07-03T10:00:00Z"}
+      ]
+    },
+    {
+      "id": 4,
+      "title": "森系小清新",
+      "comments": [
+        {"id": 4, "user": "用户D", "text": "这个设计太美了！4", "time": "2025-07-03T10:00:00Z"}
+      ]
+    }
+  ]
+}

popular-designs.html

@@ -0,0 +1,22 @@
+<section class="popular-works">
+  <h3 class="section-title">热门作品</h3>
+  <div class="works-grid">
+    <div class="work-item" *ngFor="let design of designs" (click)="showWorkDetail(design.title)">
+      <div class="work-image" [style.background]="design.background">
+        {{design.emoji}}
+      </div>
+      <div class="work-info">
+        <div class="work-title">{{design.title}}</div>
+        <div class="work-stats">
+          <span (click)="toggleLike(design); $event.stopPropagation()" 
+                [class.liked]="design.isLiked">
+            {{design.isLiked ? '❤️' : '🤍'}} {{design.likes | number}}
+          </span>
+          <span (click)="showComments(design.id, $event)">
+            💬 {{design.comments}}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

popular-designs.scss

@@ -0,0 +1,97 @@
+// 在文件末尾添加
+.liked {
+  color: #ff6b6b; // 红色
+}
+
+// 阻止图标点击时的文本选中
+.work-stats span {
+  user-select: none;
+}
+
+.work-stats span {
+  transition: color 0.3s ease;
+}
+.popular-works {
+  margin: 20px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 15px;
+  color: #333;
+  position: relative;
+  padding-left: 15px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 20px;
+    background: linear-gradient(45deg, #ff6b6b, #ffa726);
+    border-radius: 2px;
+  }
+}
+
+.works-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+}
+
+.work-item {
+  background: #fff;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+  }
+}
+
+.work-image {
+  height: 120px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+}
+
+.work-info {
+  padding: 12px;
+}
+
+.work-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: #333;
+}
+
+.work-stats {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #666;
+
+  span {
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.liked {
+  color: #ff6b6b;
+}

popular-designs.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopularDesigns } from './popular-designs';
+
+describe('PopularDesigns', () => {
+  let component: PopularDesigns;
+  let fixture: ComponentFixture<PopularDesigns>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PopularDesigns]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PopularDesigns);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

server.js

@@ -0,0 +1,18 @@
+const jsonServer = require('json-server')
+const server = jsonServer.create()
+const router = jsonServer.router('db.json')
+const middlewares = jsonServer.defaults()
+
+// 允许所有跨域请求
+server.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*')
+  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
+  res.header('Access-Control-Allow-Headers', 'Content-Type')
+  next()
+})
+
+server.use(middlewares)
+server.use(router)
+server.listen(3000, () => {
+  console.log('JSON Server已启动，支持CORS，访问 http://localhost:3000')
+})