tab1

app/tab1/tab1.page.html

@@ -1,17 +1,23 @@
 <ion-header>
   <ion-toolbar>
-      <ion-title>
-          Photos
-      </ion-title>
+    <ion-title>
+      Photos
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
   <ion-searchbar (ionInput)="onSearch($event)"></ion-searchbar>
 
+  <!-- 图片上传按钮和标签输入框 -->
+  <ion-button (click)="openFilePicker()">
+    Upload Photo
+  </ion-button>
+  <ion-input placeholder="Tags (comma separated)" [(ngModel)]="newPhotoTags"></ion-input>
+
   <div class="photo-container">
-      <div class="photo-wrapper" *ngFor="let photo of displayedPhotos">
-          <ion-img [src]="photo.url" alt="Photo"></ion-img>
-      </div>
+    <div class="photo-wrapper" *ngFor="let photo of displayedPhotos; let i = index">
+      <ion-img [src]="photo.url" alt="Photo {{photo.id}}" (click)="openFullscreen(photo.url)"></ion-img>
+    </div>
   </div>
 </ion-content>

app/tab1/tab1.page.scss

@@ -1,32 +1,27 @@
-ion-content {
-  --ion-background-color: #f2f2f2;
-  padding: 16px;
-}
-
-ion-searchbar {
-  margin-bottom: 16px;
-}
+page-tab1 {
+  .photo-wrapper {
+    width: calc(50% - 8px);
+    margin-bottom: 8px;
+    box-sizing: border-box;
+    float: left;
+    clear: none;
+  }
 
-.photo-container {
-  display: flex;
-  flex-wrap: wrap; /* 允许图片换行 */
-  gap: 8px; /* 图片之间的空隙 */
-  justify-content: flex-start; /* 左对齐排列 */
-}
+  .photo-wrapper:nth-child(2n+1) {
+    margin-right: 8px;
+  }
 
-.photo-wrapper {
-  width: calc(50% - 8px); /* 每张图片容器宽度为父容器宽度的一半减去间隙 */
-  margin-bottom: 8px; /* 底部间隙 */
-  box-sizing: border-box; /* 包含内边距和边框的大小 */
-}
-
-.photo-wrapper:nth-child(2n+1) {
-  margin-right: 8px; /* 每行第一张图片右侧间隙 */
-}
+  .photo-container {
+    display: block;
+    overflow: hidden;
+  }
 
-ion-img {
-  width: 100%; /* 图片宽度 100% */
-  height: auto; /* 自动调整高度 */
-  object-fit: cover; /* 裁剪图片以填充容器 */
-  border-radius: 8px; /* 图片圆角 */
+  ion-img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    border-radius: 8px;
+    display: block;
+    cursor: pointer;
+  }
 }

app/tab1/tab1.page.ts

@@ -1,41 +1,80 @@
 import { Component } from '@angular/core';
 
 interface Photo {
-    id: number;
-    url: string;
-    tags: string[];
+  id: number;
+  url: string;
+  tags: string[];
 }
 
 @Component({
-    selector: 'app-tab1',
-    templateUrl: 'tab1.page.html',
-    styleUrls: ['tab1.page.scss'],
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
 })
 export class Tab1Page {
-    photos: Photo[] = [
-        { id: 1, url: 'assets/photos/photo1.jpg', tags: ['赛马娘', '东商改革'] },
-        { id: 2, url: 'assets/photos/photo2.jpg', tags: ['赛马娘', '东海帝皇','目白麦昆'] },
-        { id: 3, url: 'assets/photos/photo3.jpg', tags: ['赛马娘', '东海帝皇'] },
-        { id: 4, url: 'assets/photos/photo4.jpg', tags: ['赛马娘', '目白麦昆'] },
-        { id: 5, url: 'assets/photos/photo5.jpg', tags: ['赛马娘', '草上飞'] },
-        { id: 6, url: 'assets/photos/photo6.jpg', tags: ['赛马娘', '北部玄驹'] },
-        // 添加更多照片
-    ];
-
-    displayedPhotos: Photo[] = [];
-
-    constructor() {
-        this.displayedPhotos = [...this.photos]; // 初始显示所有照片
+  photos: Photo[] = [
+    { id: 1, url: 'assets/photos/photo1.jpg', tags: ['赛马娘', '东商改革'] },
+    { id: 2, url: 'assets/photos/photo2.jpg', tags: ['赛马娘', '东海帝皇', '目白麦昆'] },
+    { id: 3, url: 'assets/photos/photo3.jpg', tags: ['赛马娘', '东海帝皇'] },
+    { id: 4, url: 'assets/photos/photo4.jpg', tags: ['赛马娘', '目白麦昆'] },
+    { id: 5, url: 'assets/photos/photo5.jpg', tags: ['赛马娘', '草上飞'] },
+    { id: 6, url: 'assets/photos/photo6.jpg', tags: ['赛马娘', '北部玄驹'] },
+    // 添加更多照片
+  ];
+
+  displayedPhotos: Photo[] = [];
+  newPhotoTags: string = '';
+
+  constructor() {
+    this.displayedPhotos = [...this.photos]; // 初始显示所有照片
+  }
+
+  onSearch(event: CustomEvent) {
+    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
+    if (searchTerm === '') {
+      this.displayedPhotos = [...this.photos]; // 重置显示所有照片
+    } else {
+      this.displayedPhotos = this.photos.filter(photo =>
+        photo.tags.some(tag => tag.toLowerCase().includes(searchTerm))
+      );
     }
+  }
+
+  openFullscreen(imageUrl: string) {
+    window.open(imageUrl, '_blank');
+  }
+
+  // 打开文件选择器
+  openFilePicker() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = (event: Event) => this.handleFileSelect(event);
+    input.click();
+  }
 
-    onSearch(event: CustomEvent) {
-        const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
-        if (searchTerm === '') {
-            this.displayedPhotos = [...this.photos]; // 重置显示所有照片
-        } else {
-            this.displayedPhotos = this.photos.filter(photo =>
-                photo.tags.some(tag => tag.toLowerCase().includes(searchTerm))
-            );
-        }
+  // 处理文件选择和标签输入
+  handleFileSelect(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      const file = input.files[0];
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        const imageUrl = reader.result as string;
+        const newTags = this.newPhotoTags.split(',').map(tag => tag.trim());
+        const newPhoto: Photo = {
+          id: this.photos.length + 1,
+          url: imageUrl,
+          tags: newTags,
+        };
+        this.photos.push(newPhoto);
+        this.displayedPhotos = [...this.photos]; // 更新显示的照片列表
+        this.newPhotoTags = ''; // 清空标签输入框
+      };
+      reader.onerror = error => {
+        console.error('FileReader error:', error);
+      };
     }
+  }
 }