🚧 development of image display interfaces

src/views/Photograph/RecentUpload/RecentUpload.vue

@@ -1,7 +1,35 @@
 <template>
+  <div class="recent-upload">
+    <div class="photo-header">
+      <AButton type="primary" shape="round" size="middle">
+        <template #icon>
+          <PlusOutlined/>
+        </template>
+        上传照片
+      </AButton>
+      <AButton type="default" shape="round" size="middle">
+        <template #icon>
+          <PlusSquareOutlined/>
+        </template>
+        创建相册
+      </AButton>
+    </div>
+    <div class="photo-list">
+      <CheckCard style="margin-top: 20px;" v-for="item in items" :key="item.id" :value="item.id" v-model="selectedItems">
+        {{ item.name }}
+      </CheckCard>
+      <div>Selected Items: {{ selectedItems }}</div>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
+const items = ref([
+  { id: 1, name: 'Item 1' },
+  { id: 2, name: 'Item 2' },
+  { id: 3, name: 'Item 3' },
+]);
 
+const selectedItems = ref<(string | number)[]>([]);
 
 </script>
 <style scoped lang="scss" src="./index.scss">

src/views/Photograph/RecentUpload/index.scss

@@ -0,0 +1,19 @@
+.recent-upload {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 100%;
+
+    .photo-header {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        border-bottom: 1px solid #e2e2e2;
+    }
+}