♻️ refactored code

.dockerignore

@@ -1,2 +1,7 @@
 node_modules
 *.log
+# 忽略大模型目录
+dist/tfjs/
+dist/caffemodel/
+
+default.conf

Dockerfile

@@ -1,12 +1,30 @@
 
-FROM nginx:latest
+FROM nginx:alpine
 
 LABEL maintainer="landaiqing <<landaiqing@126.com>>"
 
 ENV TimeZone=Asia/Shanghai
 
+# 创建空目录用于后续挂载
+RUN mkdir -p /usr/share/nginx/html/tfjs \
+    && mkdir -p /usr/share/nginx/html/caffemodel \
+    && mkdir -p /etc/nginx/conf.d
+
 COPY dist/  /usr/share/nginx/html/
 
-COPY default.conf /etc/nginx/conf.d/default.conf
+# 强制删除模型目录（确保后续挂载覆盖）
+RUN rm -rf /usr/share/nginx/html/tfjs \
+    && rm -rf /usr/share/nginx/html/caffemodel \
+    && rm -f /etc/nginx/conf.d/default.conf
 
 EXPOSE 80
+
+#docker run -d \
+#  -v /your_host/nginx.conf:/etc/nginx/nginx.conf \
+#  -v /your_host/conf.d/:/etc/nginx/conf.d/ \
+#  -v /your_host/tfjs:/usr/share/nginx/html/tfjs \
+#  -v /your_host/caffemodel:/usr/share/nginx/html/caffemodel \
+#   --restart unless-stopped \
+#  -p 80:80 \
+#  --name your_image
+#  your_image

auto-import.d.ts

@@ -6,7 +6,10 @@
 // biome-ignore lint: disable
 export {}
 declare global {
+  const AppstoreOutlined: typeof import('@ant-design/icons-vue')['AppstoreOutlined']
   const EffectScope: typeof import('vue')['EffectScope']
+  const MailOutlined: typeof import('@ant-design/icons-vue')['MailOutlined']
+  const SettingOutlined: typeof import('@ant-design/icons-vue')['SettingOutlined']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']

components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACascader: typeof import('ant-design-vue/es')['Cascader']
+    AccountSetting: typeof import('./src/views/User/AccountSetting/AccountSetting.vue')['default']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADivider: typeof import('ant-design-vue/es')['Divider']
@@ -28,9 +29,9 @@ declare module 'vue' {
     AImage: typeof import('ant-design-vue/es')['Image']
     AImagePreviewGroup: typeof import('ant-design-vue/es')['ImagePreviewGroup']
     AInput: typeof import('ant-design-vue/es')['Input']
-    AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AlbumCard: typeof import('./src/views/Album/Phoalbum/AlbumCard.vue')['default']
     AlbumShareModal: typeof import('./src/views/Album/Phoalbum/AlbumShareModal.vue')['default']
     AllPhoto: typeof import('./src/views/Photograph/AllPhoto/AllPhoto.vue')['default']
     AMenu: typeof import('ant-design-vue/es')['Menu']
@@ -43,7 +44,6 @@ declare module 'vue' {
     AProgress: typeof import('ant-design-vue/es')['Progress']
     AQrcode: typeof import('ant-design-vue/es')['QRCode']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
-    ArrowDownOutlined: typeof import('@ant-design/icons-vue')['ArrowDownOutlined']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpin: typeof import('ant-design-vue/es')['Spin']
@@ -79,15 +79,16 @@ declare module 'vue' {
     ForgetPage: typeof import('./src/views/Forget/ForgetPage.vue')['default']
     GradientText: typeof import('./src/components/MyUI/GradientText/GradientText.vue')['default']
     ImageShare: typeof import('./src/views/Share/ImageShare/ImageShare.vue')['default']
-    ImageToolbar: typeof import('./src/views/Photograph/ImageToolbar/ImageToolbar.vue')['default']
+    ImageToolbar: typeof import('./src/components/ImageToolbar/ImageToolbar.vue')['default']
-    ImageUpload: typeof import('./src/views/Photograph/ImageUpload/ImageUpload.vue')['default']
+    ImageUpload: typeof import('./src/components/ImageUpload/ImageUpload.vue')['default']
-    ItalicOutlined: typeof import('@ant-design/icons-vue')['ItalicOutlined']
+    ImageWaterfallList: typeof import('./src/components/ImageWaterfallList/ImageWaterfallList.vue')['default']
+    Index: typeof import('./src/views/Album/ThingAlbum/Index.vue')['default']
     LandingPage: typeof import('./src/views/Landing/LandingPage.vue')['default']
     LeftOutlined: typeof import('@ant-design/icons-vue')['LeftOutlined']
     LinkOutlined: typeof import('@ant-design/icons-vue')['LinkOutlined']
     LoadingGraphic: typeof import('./src/components/LoadingGraphic/LoadingGraphic.vue')['default']
-    LocationAlbum: typeof import('./src/views/Album/LocationAlbum/LocationAlbum.vue')['default']
     LocationAlbumDetail: typeof import('./src/views/Album/LocationAlbum/LocationAlbumDetail.vue')['default']
+    LocationAlbumIndex: typeof import('./src/views/Album/LocationAlbum/LocationAlbumIndex.vue')['default']
     LocationAlbumList: typeof import('./src/views/Album/LocationAlbum/LocationAlbumList.vue')['default']
     LockOutlined: typeof import('@ant-design/icons-vue')['LockOutlined']
     LoginFooter: typeof import('./src/views/Login/LoginFooter.vue')['default']
@@ -97,13 +98,14 @@ declare module 'vue' {
     NotFound: typeof import('./src/views/404/NotFound.vue')['default']
     OrderedListOutlined: typeof import('@ant-design/icons-vue')['OrderedListOutlined']
     ParameterSetting: typeof import('./src/views/Upscale/ParameterSetting.vue')['default']
-    PeopleAlbum: typeof import('./src/views/Album/PeopleAlbum/PeopleAlbum.vue')['default']
     PeopleAlbumDetail: typeof import('./src/views/Album/PeopleAlbum/PeopleAlbumDetail.vue')['default']
+    PeopleAlbumIndex: typeof import('./src/views/Album/PeopleAlbum/PeopleAlbumIndex.vue')['default']
     PeopleAlbumList: typeof import('./src/views/Album/PeopleAlbum/PeopleAlbumList.vue')['default']
-    Phoalbum: typeof import('./src/views/Album/Phoalbum/Phoalbum.vue')['default']
+    PeopleAlbumToolbar: typeof import('./src/views/Album/PeopleAlbum/PeopleAlbumToolbar.vue')['default']
+    PersonalCenter: typeof import('./src/views/User/PersonalCenter/PersonalCenter.vue')['default']
     PhoalbumDetail: typeof import('./src/views/Album/Phoalbum/PhoalbumDetail.vue')['default']
+    PhoalbumIndex: typeof import('./src/views/Album/Phoalbum/PhoalbumIndex.vue')['default']
     PhoalbumList: typeof import('./src/views/Album/Phoalbum/PhoalbumList.vue')['default']
-    PhoneOutlined: typeof import('@ant-design/icons-vue')['PhoneOutlined']
     PhotoStack: typeof import('./src/components/PhotoStack/PhotoStack.vue')['default']
     PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
     PlusSquareOutlined: typeof import('@ant-design/icons-vue')['PlusSquareOutlined']
@@ -129,14 +131,19 @@ declare module 'vue' {
     Spin: typeof import('./src/components/MyUI/Spin/Spin.vue')['default']
     StarButton: typeof import('./src/components/StarButton/StarButton.vue')['default']
     TabletOutlined: typeof import('@ant-design/icons-vue')['TabletOutlined']
-    ThingAlbum: typeof import('./src/views/Album/ThingAlbum/ThingAlbum.vue')['default']
     ThingAlbumDetail: typeof import('./src/views/Album/ThingAlbum/ThingAlbumDetail.vue')['default']
+    ThingAlbumIndex: typeof import('./src/views/Album/ThingAlbum/ThingAlbumIndex.vue')['default']
     ThingAlbumList: typeof import('./src/views/Album/ThingAlbum/ThingAlbumList.vue')['default']
     Tooltip: typeof import('./src/components/MyUI/Tooltip/Tooltip.vue')['default']
     UploadImage: typeof import('./src/views/Upscale/UploadImage.vue')['default']
-    UploadOutlined: typeof import('@ant-design/icons-vue')['UploadOutlined']
     Upscale: typeof import('./src/views/Upscale/index.vue')['default']
     UpscalePhoneUpload: typeof import('./src/views/Phone/UpscalePhoneUpload/UpscalePhoneUpload.vue')['default']
+    UserCenterAnalysis: typeof import('./src/views/User/PersonalCenter/components/UserCenterAnalysis/UserCenterAnalysis.vue')['default']
+    UserCenterDynamic: typeof import('./src/views/User/PersonalCenter/components/UserCenterDynamic/UserCenterDynamic.vue')['default']
+    UserCenterHome: typeof import('./src/views/User/PersonalCenter/components/UserCenterHome/UserCenterHome.vue')['default']
+    UserCenterInfo: typeof import('./src/views/User/PersonalCenter/components/UserCenterInfo/UserCenterInfo.vue')['default']
+    UserCenterSetting: typeof import('./src/views/User/PersonalCenter/components/UserCenterSetting/UserCenterSetting.vue')['default']
+    UserCenterShare: typeof import('./src/views/User/PersonalCenter/components/UserCenterShare/UserCenterShare.vue')['default']
     UserInfoCard: typeof import('./src/components/CommentReply/src/UserInfoCard/UserInfoCard.vue')['default']
     UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
     VueCompareImage: typeof import('./src/components/VueCompareImage/VueCompareImage.vue')['default']

default.conf

@@ -27,7 +27,7 @@ server {
        }
        location /sys/ {
              rewrite ^/sys/(.*)$ /$1 break;
-             proxy_pass http://127.0.0.1:80;
+             proxy_pass http://landaiqing.cn:80;
              proxy_redirect off;
              proxy_set_header Host $host;
              proxy_set_header X-Real-IP $remote_addr;

package.json

@@ -7,7 +7,7 @@
     "dev": "vite --mode development --host",
     "build": "vue-tsc -b  --noEmit  && vite build --mode production",
     "preview": "vite preview",
-    "docker-build": "docker build -t schisandra/schisandra-cloud-album-front ."
+    "docker-build": "docker build -t landaiqing/schisandra-album-front:v1.0.0 ."
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.13",
@@ -39,7 +39,7 @@
     "alova": "^3.2.8",
     "animejs": "^3.2.2",
     "ant-design-vue": "^4.2.6",
-    "axios": "^1.7.9",
+    "axios": "^1.8.1",
     "browser-image-compression": "^2.0.2",
     "buffer": "^6.0.3",
     "crypto-js": "^4.2.0",
@@ -55,6 +55,7 @@
     "moment": "^2.30.1",
     "nprogress": "^0.2.0",
     "nsfwjs": "^4.2.1",
+    "opencv-qr": "^0.7.0",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate-2": "^2.0.28",
     "qrcode": "^1",
@@ -77,18 +78,18 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^16.0.0",
-    "sass": "^1.85.0",
+    "sass": "^1.85.1",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.1",
+    "typescript-eslint": "^8.25.0",
     "unplugin-vue-components": "^28.4.0",
-    "vite": "^6.1.1",
+    "vite": "^6.2.0",
     "vite-plugin-bundle-obfuscator": "1.4.1",
     "vite-plugin-chunk-split": "^0.5.0",
-    "vue-tsc": "2.2.2"
+    "vue-tsc": "2.2.4"
   },
   "overrides": {
     "vite-plugin-chunk-split": {
-      "vite": "^6.1.1"
+      "vite": "^6.2.0"
     }
   }
 }

public/caffemodel/sr.prototxt

@@ -0,0 +1,403 @@
+layer {
+  name: "data"
+  type: "Input"
+  top: "data"
+  input_param {
+    shape {
+      dim: 1
+      dim: 1
+      dim: 224
+      dim: 224
+    }
+  }
+}
+layer {
+  name: "conv0"
+  type: "Convolution"
+  bottom: "data"
+  top: "conv0"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 32
+    bias_term: true
+    pad: 1
+    kernel_size: 3
+    group: 1
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "conv0/lrelu"
+  type: "ReLU"
+  bottom: "conv0"
+  top: "conv0"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "db1/reduce"
+  type: "Convolution"
+  bottom: "conv0"
+  top: "db1/reduce"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 8
+    bias_term: true
+    pad: 0
+    kernel_size: 1
+    group: 1
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "db1/reduce/lrelu"
+  type: "ReLU"
+  bottom: "db1/reduce"
+  top: "db1/reduce"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "db1/3x3"
+  type: "Convolution"
+  bottom: "db1/reduce"
+  top: "db1/3x3"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 8
+    bias_term: true
+    pad: 1
+    kernel_size: 3
+    group: 8
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "db1/3x3/lrelu"
+  type: "ReLU"
+  bottom: "db1/3x3"
+  top: "db1/3x3"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "db1/1x1"
+  type: "Convolution"
+  bottom: "db1/3x3"
+  top: "db1/1x1"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 32
+    bias_term: true
+    pad: 0
+    kernel_size: 1
+    group: 1
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "db1/1x1/lrelu"
+  type: "ReLU"
+  bottom: "db1/1x1"
+  top: "db1/1x1"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "db1/concat"
+  type: "Concat"
+  bottom: "conv0"
+  bottom: "db1/1x1"
+  top: "db1/concat"
+  concat_param {
+    axis: 1
+  }
+}
+layer {
+  name: "db2/reduce"
+  type: "Convolution"
+  bottom: "db1/concat"
+  top: "db2/reduce"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 8
+    bias_term: true
+    pad: 0
+    kernel_size: 1
+    group: 1
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "db2/reduce/lrelu"
+  type: "ReLU"
+  bottom: "db2/reduce"
+  top: "db2/reduce"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "db2/3x3"
+  type: "Convolution"
+  bottom: "db2/reduce"
+  top: "db2/3x3"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 8
+    bias_term: true
+    pad: 1
+    kernel_size: 3
+    group: 8
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "db2/3x3/lrelu"
+  type: "ReLU"
+  bottom: "db2/3x3"
+  top: "db2/3x3"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "db2/1x1"
+  type: "Convolution"
+  bottom: "db2/3x3"
+  top: "db2/1x1"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 32
+    bias_term: true
+    pad: 0
+    kernel_size: 1
+    group: 1
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "db2/1x1/lrelu"
+  type: "ReLU"
+  bottom: "db2/1x1"
+  top: "db2/1x1"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "db2/concat"
+  type: "Concat"
+  bottom: "db1/concat"
+  bottom: "db2/1x1"
+  top: "db2/concat"
+  concat_param {
+    axis: 1
+  }
+}
+layer {
+  name: "upsample/reduce"
+  type: "Convolution"
+  bottom: "db2/concat"
+  top: "upsample/reduce"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 32
+    bias_term: true
+    pad: 0
+    kernel_size: 1
+    group: 1
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "upsample/reduce/lrelu"
+  type: "ReLU"
+  bottom: "upsample/reduce"
+  top: "upsample/reduce"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "upsample/deconv"
+  type: "Deconvolution"
+  bottom: "upsample/reduce"
+  top: "upsample/deconv"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 32
+    bias_term: true
+    pad: 1
+    kernel_size: 3
+    group: 32
+    stride: 2
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "upsample/lrelu"
+  type: "ReLU"
+  bottom: "upsample/deconv"
+  top: "upsample/deconv"
+  relu_param {
+    negative_slope: 0.05000000074505806
+  }
+}
+layer {
+  name: "upsample/rec"
+  type: "Convolution"
+  bottom: "upsample/deconv"
+  top: "upsample/rec"
+  param {
+    lr_mult: 1.0
+    decay_mult: 1.0
+  }
+  param {
+    lr_mult: 1.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 1
+    bias_term: true
+    pad: 0
+    kernel_size: 1
+    group: 1
+    stride: 1
+    weight_filler {
+      type: "msra"
+    }
+  }
+}
+layer {
+  name: "nearest"
+  type: "Deconvolution"
+  bottom: "data"
+  top: "nearest"
+  param {
+    lr_mult: 0.0
+    decay_mult: 0.0
+  }
+  convolution_param {
+    num_output: 1
+    bias_term: false
+    pad: 0
+    kernel_size: 2
+    group: 1
+    stride: 2
+    weight_filler {
+      type: "constant"
+      value: 1.0
+    }
+  }
+}
+layer {
+  name: "Crop1"
+  type: "Crop"
+  bottom: "nearest"
+  bottom: "upsample/rec"
+  top: "Crop1"
+}
+layer {
+  name: "fc"
+  type: "Eltwise"
+  bottom: "Crop1"
+  bottom: "upsample/rec"
+  top: "fc"
+  eltwise_param {
+    operation: SUM
+  }
+}

src/assets/svgs/data_analysis.svg

@@ -0,0 +1 @@
+<svg t="1740650615689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7146" width="200" height="200"><path d="M723.2 188.8a106.88 106.88 0 1 0 213.76 0 106.88 106.88 0 1 0-213.76 0z" fill="#08979C" opacity=".3" p-id="7147"></path><path d="M857.267 361.62a151.199 151.199 0 0 1-60.938 12.816c-83.881 0-151.88-67.999-151.88-151.88 0-21.688 4.624-42.276 12.816-60.938-6.093-0.517-12.217-0.937-18.437-0.937H301.307C180.644 160.676 81.92 259.395 81.92 380.058v337.515c0 120.663 98.724 219.387 219.387 219.387h337.515c120.663 0 219.387-98.724 219.387-219.387V380.058c-0.005-6.221-0.425-12.345-0.942-18.438zM703.32 460.908l-135.004 168.76a39.357 39.357 0 0 1-55.957 5.647l-104.146-86.784-109.91 137.39a39.286 39.286 0 0 1-30.777 14.777 39.24 39.24 0 0 1-24.57-8.622 39.388 39.388 0 0 1-6.15-55.353l135.01-168.76a39.404 39.404 0 0 1 26.792-14.582 39.552 39.552 0 0 1 29.164 8.935L531.917 549.1l109.91-137.39c13.58-16.973 38.355-19.723 55.348-6.155a39.388 39.388 0 0 1 6.144 55.353z" fill="#08979C" p-id="7148"></path></svg>

src/assets/svgs/dynamic.svg

@@ -0,0 +1 @@
+<svg t="1740650748717" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9995" width="200" height="200"><path d="M608.09216 61.92128c0.64 0 1.26976 0 1.69984 0.10752 1.05984 5.72928 0.84992 20.26496-8.27904 44.76928l-79.03232 214.50752c-20.48 55.48032-67.89632 95.68768-112.768 95.68768-8.38144 0-16.54784-1.3824-24.192-4.2496-50.176-18.4576-75.84768-74.26048-57.39008-124.43648 22.912-62.06464 110.11584-149.89824 186.60352-187.8784l51.24096-25.46176c23.86432-11.77088 37.34528-13.04576 42.11712-13.04576M702.08 329.14944c11.35104 0 22.49216 2.01728 33.09568 5.9392 62.06464 22.91712 149.90336 110.11584 187.87328 186.5984l25.472 51.24096c11.65824 23.4496 13.35808 37.86752 13.05088 43.70944-1.28 0.20992-3.18976 0.43008-5.9392 0.43008-7.11168 0-19.52256-1.48992-38.93248-8.61184l-214.50752-79.03232c-67.69152-24.92928-109.57824-87.62368-91.43808-136.95488 13.99296-37.85728 50.69312-63.31904 91.32544-63.31904M61.00992 413.37856c7.10656 0 19.51744 1.48992 38.93248 8.59648l214.50752 79.03744c34.47808 12.72832 63.86688 35.95776 80.73216 63.75936 15.06304 24.92416 18.88256 50.9184 10.71104 73.1904-13.99808 37.87776-50.60096 63.33952-91.22816 63.33952-11.35104 0-22.49216-2.0224-33.1008-5.9392-62.05952-22.8096-149.89824-110.12096-187.87328-186.59328L68.22912 457.5232c-11.66848-23.44448-13.36832-37.87264-13.05088-43.70944 1.26464-0.22016 3.1744-0.4352 5.83168-0.4352M606.91968 613.3504c8.38144 0 16.54784 1.3824 24.192 4.24448 50.18112 18.45248 75.84768 74.26048 57.39008 124.43648-22.8096 62.06464-110.11584 149.89824-186.5984 187.99104L450.6624 955.4944c-23.6544 11.77088-37.23776 13.04576-42.0096 13.04576-0.64 0-1.27488 0-1.69984-0.10752-1.06496-5.72928-0.84992-20.25984 8.27904-44.76928l79.03232-214.50752c20.25984-55.49568 67.78368-95.80544 112.65536-95.80544" fill="" p-id="9996"></path><path d="M608.09216 16.62464c-16.8704 0-37.86752 5.72928-62.16704 17.71008l-51.24096 25.46176C406.73792 103.50592 312.74496 199.30624 285.696 272.60416c-27.05408 73.51808 10.81856 155.62752 84.23424 182.6816a114.39104 114.39104 0 0 0 39.7824 6.99904c62.90432 0 127.40608-49.54112 155.30496-125.3888l79.03232-214.5024c24.61184-66.62144 8.27392-105.76896-35.95776-105.76896z" fill="#F48134" p-id="9997"></path><path d="M702.08 283.8528c-57.92256 0-112.66048 35.64032-133.77536 93.03552-27.04896 73.40544 26.20416 161.2544 118.28736 195.09248l214.50752 79.03232c21.11488 7.7568 39.36256 11.45856 54.63552 11.45856 51.23584 0 67.1488-41.79968 33.52064-109.58848l-25.46176-51.22048c-43.70432-87.94624-139.50464-181.9392-212.80256-208.98816a139.14112 139.14112 0 0 0-48.91136-8.82176z" fill="#61F24C" p-id="9998"></path><path d="M61.00992 367.97952c-51.34336 0-67.15392 41.79456-33.52576 109.58848l25.46176 51.23072c43.70944 87.94624 139.50464 181.9392 212.80768 208.98816a140.49792 140.49792 0 0 0 48.79872 8.68864c57.92256 0 112.66048-35.64544 133.77024-93.04064 27.05408-73.41056-26.19904-161.24416-118.28224-195.08736L115.64032 379.43808c-21.10976-7.74656-39.45984-11.45856-54.6304-11.45856z" fill="#F2515D" p-id="9999"></path><path d="M606.91968 568.05376c-62.90944 0-127.4112 49.54112-155.30496 125.38368L372.5824 907.95008c-24.50432 66.62144-8.1664 105.8816 36.0704 105.8816 16.86528 0 37.86752-5.72928 62.16192-17.72032l51.24096-25.46176c87.94624-43.70944 181.93408-139.50976 208.98304-212.80768 27.04896-73.40032-10.9312-155.52-84.34176-182.56896a112.0512 112.0512 0 0 0-39.77728-7.2192z" fill="#4678F2" p-id="10000"></path></svg>

src/assets/svgs/home.svg

@@ -0,0 +1 @@
+<svg t="1740650417427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3483" width="200" height="200"><path d="M265.2 646.8v116.5c0 39.8 32.3 72.2 72.2 72.2h300.2V572c0-24.9 20.3-45.2 45.2-45.2 24.9 0 45.2 20.3 45.2 45.2v263.4h28.1c39.8 0 72.2-32.3 72.2-72.2V523.8c37.7 0 55.5-46.4 27.6-71.7L592.2 213.4c-25.8-23.4-65.2-23.4-91 0L237.6 452.1c-27.9 25.3-10 71.7 27.6 71.7v46.6" fill="#5CC7B9" p-id="3484"></path><path d="M700.6 848h-44.1V568.6c0-16.1-13.1-29.2-29.2-29.2s-29.2 13.1-29.2 29.2V848H281.9c-48.6 0-88.2-39.5-88.2-88.2V643.4c0-8.8 7.2-16 16-16s16 7.2 16 16v116.5c0 31 25.2 56.2 56.2 56.2h284.2V568.6c0-33.8 27.4-61.2 61.2-61.2 33.8 0 61.2 27.4 61.2 61.2V816h12.1c31 0 56.2-25.2 56.2-56.2V504.4h16c16 0 22-12.3 23.4-16.1 1.4-3.8 5.3-17-6.6-27.7L526 221.9c-19.7-17.9-49.9-17.9-69.6 0L192.9 460.6c-11.8 10.7-8.1 23.9-6.6 27.7 1.4 3.8 7.4 16.1 23.4 16.1h16V567c0 8.8-7.2 16-16 16s-16-7.2-16-16v-32.8c-16.9-4.8-30.7-17.3-37.4-34.3-8.6-22.2-2.7-47 15-63L435 198.2c15.4-14 35.4-21.7 56.2-21.7 20.8 0 40.8 7.7 56.2 21.7L811 436.8c17.7 16 23.5 40.7 15 63-6.6 17-20.5 29.5-37.4 34.3v225.8c0.1 48.6-39.4 88.1-88 88.1z m0 0" fill="#333333" p-id="3485"></path><path d="M327 645.2c-8.8 0-16-7.2-16-16v-91.4c0-8.8 7.2-16 16-16s16 7.2 16 16v91.4c0 8.8-7.1 16-16 16z m0 0M308.8 667.5c0 9.3 8.2 16.9 18.2 16.9 10.1 0 18.2-7.6 18.2-16.9 0-9.3-8.2-16.9-18.2-16.9s-18.2 7.6-18.2 16.9z m0 0" fill="#FBFFFD" p-id="3486"></path><path d="M215.2 240.6c0 12 9.7 21.8 21.8 21.8 12 0 21.8-9.7 21.8-21.8 0-12-9.7-21.8-21.8-21.8-12.1 0.1-21.8 9.8-21.8 21.8z m0 0M269.8 202.9c0 7.8 6.3 14.2 14.2 14.2 7.8 0 14.2-6.3 14.2-14.2 0-7.8-6.3-14.2-14.2-14.2-7.8 0-14.2 6.4-14.2 14.2z m0 0M756.5 181l10.7 32.9c0.6 1.7 2.2 2.9 4 2.9h34.6c4.1 0 5.8 5.2 2.5 7.6l-28 20.3c-1.5 1.1-2.1 3-1.5 4.7l10.7 32.9c1.3 3.9-3.2 7.1-6.5 4.7l-28-20.3a4.2 4.2 0 0 0-5 0L722 287c-3.3 2.4-7.7-0.8-6.5-4.7l10.7-32.9c0.6-1.7-0.1-3.6-1.5-4.7l-28-20.3c-3.3-2.4-1.6-7.6 2.5-7.6h34.6c1.8 0 3.4-1.2 4-2.9l10.7-32.9c1.3-3.8 6.8-3.8 8 0z" fill="#5CC7B9" p-id="3487"></path></svg>

src/components/ImageWaterfallList/ImageWaterfallList.vue

@@ -0,0 +1,69 @@
+<template>
+  <Spin size="middle" :spinning="imageStore.imageListLoading" indicator="spin-dot" tip="loading..." :rotate="true">
+    <div style="width:100%;height:100%;" v-if="props.imageList">
+      <div v-for="(itemList, index) in props.imageList" :key="index">
+        <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
+        <AImagePreviewGroup>
+          <Vue3JustifiedLayout v-model:list="itemList.list" :options="imageStore.JustifiedLayoutOptions"
+                               style="line-height: 0 !important;">
+            <template #default="{ item }">
+              <CheckCard :key="index"
+                         class="photo-item"
+                         margin="0"
+                         border-radius="0"
+                         v-model="imageStore.selected"
+                         :showHoverCircle="true"
+                         :iconSize="20"
+                         :showSelectedEffect="true"
+                         :value="item.id">
+                <AImage :src="item.thumbnail"
+                        :alt="item.file_name"
+                        :key="index"
+                        :height="200"
+                        :preview="{
+                                src: item.url,
+                               }"
+                        loading="lazy">
+                  <template #previewMask>
+                  </template>
+                </AImage>
+              </CheckCard>
+            </template>
+          </Vue3JustifiedLayout>
+        </AImagePreviewGroup>
+      </div>
+    </div>
+    <div v-if="!imageStore.imageListLoading && !props.imageList" class="empty-content">
+      <AEmpty :image="empty"
+              :image-style="{
+                   height: '100%',
+                   width: '100%',
+                 }">
+        <template #description>
+                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
+                  还没检测到任何图片，快去上传吧！
+                </span>
+        </template>
+      </AEmpty>
+    </div>
+  </Spin>
+</template>
+<script setup lang="ts">
+import Vue3JustifiedLayout from "vue3-justified-layout";
+import 'vue3-justified-layout/dist/style.css';
+import empty from "@/assets/svgs/empty.svg";
+import useStore from "@/store";
+
+const props = defineProps({
+  imageList: {
+    type: Array as () => any[],
+    default: () => []
+  }
+});
+
+const imageStore = useStore().image;
+</script>
+
+
+<style scoped lang="scss">
+</style>

src/layout/default/Header/Logo.vue

@@ -58,10 +58,10 @@
             </AFlex>
 
           </div>
-          <div class="header-logo-popover-card" @click="router.push('/main/photo/phone')">
+          <div class="header-logo-popover-card" @click="router.push('/main/photo/upscale')">
             <AFlex :vertical="false" align="center" justify="space-between">
               <AAvatar size="small" shape="square" :src="ai"/>
-              <span class="header-logo-popover-text">{{ t('album.phone') }}</span>
+              <span class="header-logo-popover-text">{{ t('album.upscale') }}</span>
             </AFlex>
 
           </div>
@@ -126,6 +126,7 @@ const cardStyle = computed(() => ({
     font-family: "Comic Sans MS", cursive;
     font-weight: bold;
     cursor: pointer;
+    text-shadow: 0px 1px 2px rgba(0, 0, 0, .4);
   }
 }
 

src/layout/default/Header/Menu.vue

@@ -112,13 +112,13 @@
               <ADivider/>
               <div class="avatar-content-menu">
                 <AMenu>
-                  <AMenuItem key="1">
+                  <AMenuItem key="1" @click="router.push('/main/user/center/home')">
                     <template #icon>
                       <AAvatar size="small" shape="circle" :src="personalCenter"/>
                     </template>
                     <span class="avatar-content-menu-item">个人中心</span>
                   </AMenuItem>
-                  <AMenuItem key="2">
+                  <AMenuItem key="2" @click="router.push('/main/user/setting')">
                     <template #icon>
                       <AAvatar size="small" shape="circle" :src="accountSetting"/>
                     </template>
@@ -154,10 +154,12 @@ import logout from "@/assets/svgs/logout.svg";
 import wenhao from "@/assets/svgs/wenhao.svg";
 
 import useStore from "@/store";
-import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
+import ImageUpload from "@/components/ImageUpload/ImageUpload.vue";
 import {getStorageConfigListApi} from "@/api/storage";
 import {ProviderIcon} from "@/constant/provider_icon.ts";
 
+const router = useRouter();
+
 
 const uploadStore = useStore().upload;
 const user = useStore().user;

src/router/modules/albums.ts

@@ -1,9 +1,9 @@
-import PhoalbumPhoalbum from "@/views/Album/Phoalbum/Phoalbum.vue";
+import AlbumPhoalbumIndex from "@/views/Album/Phoalbum/PhoalbumIndex.vue";
-import PeopleAlbumPeopleAlbum from "@/views/Album/PeopleAlbum/PeopleAlbum.vue";
+import PeoplePeopleAlbumIndex from "@/views/Album/PeopleAlbum/PeopleAlbumIndex.vue";
 import LocationAlbum from "@/views/Album/LocationAlbum/LocationAlbumList.vue";
-import LocationAlbumIndex from "@/views/Album/LocationAlbum/LocationAlbum.vue";
+import LocationLocationAlbumIndex from "@/views/Album/LocationAlbum/LocationAlbumIndex.vue";
 import ThingAlbum from "@/views/Album/ThingAlbum/ThingAlbumList.vue";
-import ThingAlbumThingAlbum from "@/views/Album/ThingAlbum/ThingAlbum.vue";
+import ThingThingAlbumIndex from "@/views/Album/ThingAlbum/ThingAlbumIndex.vue";
 import Phoalbum from "@/views/Album/Phoalbum/PhoalbumList.vue";
 import PeopleAlbum from "@/views/Album/PeopleAlbum/PeopleAlbumList.vue";
 import PhoalbumDetail from "@/views/Album/Phoalbum/PhoalbumDetail.vue";
@@ -14,7 +14,7 @@ import ThingAlbumDetail from "@/views/Album/ThingAlbum/ThingAlbumDetail.vue";
 export default [
     {
         path: '/main/album/albums',
-        component: PhoalbumPhoalbum,
+        component: AlbumPhoalbumIndex,
         redirect: '/main/album/albums',
         children: [
             {
@@ -39,7 +39,7 @@ export default [
     },
     {
         path: '/main/album/people',
-        component: PeopleAlbumPeopleAlbum,
+        component: PeoplePeopleAlbumIndex,
         redirect: '/main/album/people',
         children: [
             {
@@ -64,7 +64,7 @@ export default [
     },
     {
         path: '/main/album/location',
-        component: LocationAlbumIndex,
+        component: LocationLocationAlbumIndex,
         redirect: '/main/album/location',
         children: [
             {
@@ -89,7 +89,7 @@ export default [
     },
     {
         path: '/main/album/thing',
-        component: ThingAlbumThingAlbum,
+        component: ThingThingAlbumIndex,
         redirect: '/main/album/thing',
         children: [
             {

src/router/modules/main_router.ts

@@ -20,7 +20,6 @@ export default [
             ...recycling_bin,
             ...share,
             ...upscale,
-
         ]
     }, {
         path: '/main/share/list/:id',

src/router/modules/user.ts

@@ -0,0 +1,84 @@
+import UserCenterHome from "@/views/User/PersonalCenter/components/UserCenterHome/UserCenterHome.vue";
+import UserCenterDynamic from "@/views/User/PersonalCenter/components/UserCenterDynamic/UserCenterDynamic.vue";
+import UserCenterInfo from "@/views/User/PersonalCenter/components/UserCenterInfo/UserCenterInfo.vue";
+import UserCenterAnalysis from "@/views/User/PersonalCenter/components/UserCenterAnalysis/UserCenterAnalysis.vue";
+import UserCenterShare from "@/views/User/PersonalCenter/components/UserCenterShare/UserCenterShare.vue";
+import UserCenterSetting from "@/views/User/PersonalCenter/components/UserCenterSetting/UserCenterSetting.vue";
+export default [
+    {
+
+        path: '/main/user/center',
+        name: 'userCenter',
+        redirect: '/main/user/center/home',
+        component: () => import('@/views/User/PersonalCenter/PersonalCenter.vue'),
+        meta: {
+            requiresAuth: true,
+            title: '个人中心'
+        },
+        children: [
+            {
+                path: '/main/user/center/home',
+                name: 'home',
+                component: UserCenterHome,
+                meta: {
+                    requiresAuth: true,
+                    title: '主页'
+                },
+            },
+            {
+                path: '/main/user/center/dynamic',
+                name: 'dynamic',
+                component: UserCenterDynamic,
+                meta: {
+                    requiresAuth: true,
+                    title: '动态'
+                },
+            },
+            {
+                path: '/main/user/center/info',
+                name: 'info',
+                component: UserCenterInfo,
+                meta: {
+                    requiresAuth: true,
+                    title: '个人信息'
+                },
+            },
+            {
+                path: '/main/user/center/analysis',
+                name: 'analysis',
+                component: UserCenterAnalysis,
+                meta: {
+                    requiresAuth: true,
+                    title: '数据分析'
+                },
+            },
+            {
+                path: '/main/user/center/share',
+                name: 'share',
+                component: UserCenterShare,
+                meta: {
+                    requiresAuth: true,
+                    title: '我的分享'
+                },
+            },
+            {
+                path: '/main/user/center/setting',
+                name: 'setting',
+                component: UserCenterSetting,
+                meta: {
+                    requiresAuth: true,
+                    title: '设置'
+                },
+            }
+        ]
+    },
+    {
+        path: '/main/user/setting',
+        name: 'userSetting',
+        component: () => import('@/views/User/AccountSetting/AccountSetting.vue'),
+        meta: {
+            requiresAuth: true,
+            title: '账户设置'
+        }
+    }
+];

src/router/router.ts

@@ -8,6 +8,7 @@ import landing from "./modules/landing.ts";
 import mainRouter from "./modules/main_router.ts";
 import i18n from "@/locales";
 import phone_upload from "@/router/modules/phone_upload.ts";
+import user from "@/router/modules/user.ts";
 
 const routes: Array<RouteRecordRaw> = [
     ...login,
@@ -15,6 +16,7 @@ const routes: Array<RouteRecordRaw> = [
     ...landing,
     ...mainRouter,
     ...phone_upload,
+    ...user,
     {
         path: '/:pathMatch(.*)',
         redirect: '/404',

src/store/modules/imageStore.ts

@@ -1,16 +1,12 @@
 import {ImageList} from "@/types/image";
+import localForage from "localforage";
+import {albumListApi, getFaceSamplesList} from "@/api/storage";
 
 export const useImageStore = defineStore(
     'image',
     () => {
+        // 选择的图片列表
         const selected = ref<number[]>([]);
-        const tabActiveKey = ref<string>("-1");
-        const tabMap = reactive({
-            "-1": "全部相册",
-            "0": "我的相册",
-            "1": "我的分享",
-            "2": "我的收藏",
-        });
         const homeTabActiveKey = ref<string>("all");
         const homeTabMap = reactive({
             "all": "全部",
@@ -18,14 +14,72 @@ export const useImageStore = defineStore(
             "gif": "动图",
             "screenshot": "截图",
         });
-        // 清算模式切换
+        // 清爽模式切换
         const switchValue = ref<boolean>(false);
 
+
+        // 图片列表布局相关
+        const JustifiedLayoutOptions = reactive({
+            targetRowHeight: 200 // 高度
+        });
+        // 图片列表数据
+        const imageList = ref<any[]>([]);
+        const imageListLoading = ref<boolean>(false);
+
+        // 相册相关
+        const albumList = ref<any[]>([]);
+        const albumListLoading = ref<boolean>(false);
+        const sortSelectedKey = ref<boolean>(true);
+        const tabActiveKey = ref<string>("-1");
+        const tabMap = reactive({
+            "-1": "全部相册",
+            "0": "我的相册",
+            "1": "我的分享",
+            "2": "我的收藏",
+        });
+
         // 相册分享弹窗相关
         const openAlbumShareDialog = ref<boolean>(false);
         const albumShareCoverImage = ref<string>("");
         const albumShareId = ref<number>(0);
 
+        // 人脸相册
+        const faceSelectedKey = ref<string>("0");
+        const faceSelected = ref<number[]>([]);
+        const faceList = ref<any[]>([]);
+        const faceListLoading = ref<boolean>(false);
+
+        /**
+         * 获取人脸列表
+         */
+        async function getFaceList() {
+            faceListLoading.value = true;
+            faceList.value = [];
+            const res: any = await getFaceSamplesList(parseInt(faceSelectedKey.value));
+            if (res && res.code === 200 && res.data.faces) {
+                faceList.value = res.data.faces.map(face => ({
+                    ...face,
+                    showButton: false,
+                    showInput: false,
+                }));
+            }
+            faceListLoading.value = false;
+        }
+
+        /**
+         * 获取相册列表
+         */
+        async function getAlbumList() {
+            albumList.value = [];
+            albumListLoading.value = true;
+            const res: any = await albumListApi(parseInt(tabActiveKey.value), sortSelectedKey.value);
+            if (res && res.code === 200) {
+                albumList.value = res.data.albums;
+            }
+            albumListLoading.value = false;
+        }
+
+
         /**
          * 统计图片总数
          * @param imageList 图片列表数据
@@ -53,18 +107,38 @@ export const useImageStore = defineStore(
             homeTabActiveKey,
             albumShareCoverImage,
             albumShareId,
-            countTotalImages,
+            imageList,
+            imageListLoading,
+            albumListLoading,
+            albumList,
+            sortSelectedKey,
+            faceSelectedKey,
+            faceSelected,
+            faceList,
+            faceListLoading,
             openAlbumShareDialog,
+            JustifiedLayoutOptions,
+            countTotalImages,
             openAlbumShareDialogHandler,
+            getAlbumList,
+            getFaceList,
         };
     },
     {
         // 开启数据持久化
         persistedState: {
             persist: true,
-            storage: localStorage,
+            storage: localForage,
             key: 'image',
-            includePaths: ["tabActiveKey", "tabMap", "homeTabActiveKey", "homeTabMap", "switchValue"],
+            includePaths: [
+                "tabActiveKey",
+                "tabMap",
+                "homeTabActiveKey",
+                "homeTabMap",
+                "switchValue",
+                "faceSelectedKey",
+                "albumList"
+            ],
         }
     }
 );

src/store/modules/menuStore.ts

@@ -2,8 +2,11 @@ export const useMenuStore = defineStore(
     'menu',
     () => {
         const currentMenu = ref<string>('photo/all');
+
+        const userCenterMenu = ref<string>('home');
         return {
             currentMenu,
+            userCenterMenu,
         };
     },
     {
@@ -12,7 +15,7 @@ export const useMenuStore = defineStore(
             persist: true,
             storage: localStorage,
             key: 'menu',
-            includePaths: ['currentMenu']
+            includePaths: ['currentMenu', 'userCenterMenu']
         }
     }
 );

src/store/modules/uploadStore.ts

@@ -37,7 +37,7 @@ export const useUploadStore = defineStore(
 
         const storageSelected = ref<any[]>([]);
 
-        const albumSelected = ref<number>();
+        const albumSelected = ref<number>(0);
 
         /**
          * 打开上传抽屉

src/utils/QRDetection/qr_detection.ts

@@ -0,0 +1,10 @@
+import OpencvQr from "opencv-qr";
+
+/**
+ * OpenCV QR detection class
+ */
+const opencvQr = new OpencvQr({
+    dw: "/caffemodel/detect.caffemodel",
+    sw: "/caffemodel/sr.caffemodel",
+});
+export default opencvQr;

src/utils/tfjs/nsfw.ts

@@ -13,7 +13,7 @@ const initNSFWJs = async (): Promise<NSFWJS> => {
     } catch (_error) {
         console.warn("IndexedDB 中未找到模型，正在从网络加载...");
         // 如果 IndexedDB 加载失败，从 URL 加载模型并保存到 IndexedDB
-        nsfwModelCache = await nsfwjs.load("/nsfw/mobilenet_v2_mid/", {size: 224, type: "graph"});
+        nsfwModelCache = await nsfwjs.load("/tfjs/nsfw/mobilenet_v2_mid/", {size: 224, type: "graph"});
         await nsfwModelCache.model.save("indexeddb://nsfwjs-model");
         console.log("NSFWJS 模型已从网络加载并保存到 IndexedDB");
     }

src/views/Album/LocationAlbum/LocationAlbumDetail.vue

@@ -7,78 +7,39 @@
         <span class="location-detail-content-nav-name">{{ route.query.name }}</span>
       </div>
     </div>
-    <ImageToolbar :selected="imageStore.selected" :imageList="albumList"/>
+    <ImageToolbar :selected="imageStore.selected" :imageList="imageList"/>
     <div class="location-album-detail-info">
-      <span style="font-size: 14px;color: #999999">共{{ imageStore.countTotalImages(albumList) }}张照片</span>
+      <span style="font-size: 14px;color: #999999">共{{ imageStore.countTotalImages(imageList) }}张照片</span>
     </div>
     <div class="location-album-detail-list">
-      <div style="width:100%;height:100%;" v-if="albumList.length != 0">
+      <ImageWaterfallList :image-list="imageList"/>
-        <div v-for="(itemList, index) in albumList" :key="index">
-          <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-          <AImagePreviewGroup>
-            <Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
-              <template #default="{ item }">
-                <CheckCard :key="index"
-                           class="photo-item"
-                           margin="0"
-                           border-radius="0"
-                           v-model="imageStore.selected"
-                           :showHoverCircle="true"
-                           :iconSize="20"
-                           :showSelectedEffect="true"
-                           :value="item.id">
-                  <AImage :src="item.thumbnail"
-                          :alt="item.file_name"
-                          :key="index"
-                          :height="200"
-                          :previewMask="false"
-                          :preview="{
-                                src: item.url,
-                               }"
-                          loading="lazy"/>
-                </CheckCard>
-              </template>
-            </Vue3JustifiedLayout>
-          </AImagePreviewGroup>
-        </div>
-      </div>
-      <div v-else class="empty-content">
-        <AEmpty :image="empty" :image-style="{width: '100%', height: '100%'}">
-          <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无照片，快去上传吧
-                </span>
-          </template>
-        </AEmpty>
-      </div>
     </div>
-
   </div>
 </template>
 <script setup lang="ts">
-import Vue3JustifiedLayout from "vue3-justified-layout";
+
-import 'vue3-justified-layout/dist/style.css';
 import {queryLocationDetailListApi} from "@/api/storage";
 import useStore from "@/store";
-import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
+import ImageToolbar from "@/components/ImageToolbar/ImageToolbar.vue";
-import empty from "@/assets/svgs/empty.svg";
+
+import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
 
 const imageStore = useStore().image;
-const albumList = ref<any[]>([]);
+const imageList = ref<any[]>([]);
 
 const route = useRoute();
 const router = useRouter();
 const upload = useStore().upload;
-const options = reactive({
+
-  targetRowHeight: 200 // 高度
-});
 
 async function getImageList(id: number) {
+  imageStore.imageListLoading = true;
   const res: any = await queryLocationDetailListApi(id, upload.storageSelected?.[0], upload.storageSelected?.[1]);
   console.log(res);
   if (res && res.code === 200) {
-    albumList.value = res.data.records;
+    imageList.value = res.data.records;
   }
+  imageStore.imageListLoading = false;
 }
 
 onMounted(() => {

src/views/Album/PeopleAlbum/PeopleAlbumDetail.vue

@@ -14,78 +14,37 @@
         <span style="font-size: 14px;color: #333333">{{ route.query.name }}</span>
       </div>
     </div>
-    <ImageToolbar :selected="imageStore.selected" :imageList="images"/>
+    <ImageToolbar :selected="imageStore.selected" :imageList="imageList"/>
     <div class="people-album-detail-info">
-      <span style="font-size: 14px;color: #999999">共{{ imageStore.countTotalImages(images) }}张照片</span>
+      <span style="font-size: 14px;color: #999999">共{{ imageStore.countTotalImages(imageList) }}张照片</span>
     </div>
     <div class="people-album-detail-list">
-      <div style="width:100%;height:100%;" v-if="images &&images.length !== 0">
+      <ImageWaterfallList :image-list="imageList"/>
-        <div v-for="(itemList, index) in images" :key="index">
-          <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-          <AImagePreviewGroup>
-            <Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
-              <template #default="{ item }">
-                <CheckCard :key="index"
-                           class="photo-item"
-                           margin="0"
-                           border-radius="0"
-                           v-model="imageStore.selected"
-                           :showHoverCircle="true"
-                           :iconSize="20"
-                           :showSelectedEffect="true"
-                           :value="item.id">
-                  <AImage :src="item.thumbnail"
-                          :alt="item.file_name"
-                          :key="index"
-                          :height="200"
-                          :previewMask="false"
-                          :preview="{
-                                src: item.url,
-                               }"
-                          loading="lazy"/>
-                </CheckCard>
-              </template>
-            </Vue3JustifiedLayout>
-          </AImagePreviewGroup>
-        </div>
-      </div>
-      <div v-else class="empty-content">
-        <AEmpty :image="empty" :image-style="{width: '100%', height: '100%'}">
-          <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无照片，快去上传吧
-                </span>
-          </template>
-        </AEmpty>
-      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import Vue3JustifiedLayout from "vue3-justified-layout";
-import 'vue3-justified-layout/dist/style.css';
 import {getFaceSamplesDetailList} from "@/api/storage";
-import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
+import ImageToolbar from "@/components/ImageToolbar/ImageToolbar.vue";
 import useStore from "@/store";
-import empty from "@/assets/svgs/empty.svg";
+
+import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
 
 
 const imageStore = useStore().image;
-const images = ref<any[]>([]);
+const imageList = ref<any[]>([]);
 
 const route = useRoute();
 const router = useRouter();
 const upload = useStore().upload;
 
-const options = reactive({
-  targetRowHeight: 200 // 高度
-});
-
 async function getAlbumList(id: number) {
+  imageStore.imageListLoading = true;
   const res: any = await getFaceSamplesDetailList(id, upload.storageSelected?.[0], upload.storageSelected?.[1]);
   if (res && res.code === 200) {
-    images.value = res.data.records;
+    imageList.value = res.data.records;
   }
+  imageStore.imageListLoading = false;
 }
 
 onMounted(() => {

src/views/Album/PeopleAlbum/PeopleAlbumList.vue

@@ -3,70 +3,37 @@
     <div class="people-album-header">
       <ADropdown trigger="click">
         <AButton type="text" size="large" class="people-album-button">
-          {{ selectedKey === '0' ? '人 物' : '已隐藏' }}
+          {{ imageStore.faceSelectedKey === '0' ? '人 物' : '已隐藏' }}
           <DownOutlined class="people-album-icon"/>
         </AButton>
         <template #overlay>
-          <AMenu selectable :selectedKeys="[selectedKey]" @select="handleSelect">
+          <AMenu selectable :selectedKeys="[imageStore.faceSelectedKey]" @select="handleSelect">
             <AMenuItem key="0">人 物</AMenuItem>
             <AMenuItem key="1">已隐藏</AMenuItem>
           </AMenu>
         </template>
       </ADropdown>
-      <span class="people-album-count">共<span style="color: #0e87cc">{{ faceList.length }}</span>位</span>
+      <span class="people-album-count">共<span style="color: #0e87cc">{{ imageStore.faceList.length }}</span>位</span>
     </div>
-    <transition name="fade">
+    <PeopleAlbumToolbar :face-list="imageStore.faceList"/>
-      <div class="people-album-toolbar" v-show="selected.length !== 0">
-        <div class="people-album-toolbar-left">
-          <AButton type="text" shape="circle" size="large" class="people-album-toolbar-btn" @click="cancelSelectPeople">
-            <template #icon>
-              <CloseOutlined class="people-album-toolbar-icon"/>
-            </template>
-          </AButton>
-          <span style="font-size: 16px;font-weight: bold">
-          已选择 {{ selected.length }} 个人物
-        </span>
-          <AButton type="text" shape="default" class="people-album-toolbar-btn" size="middle" @click="selectAllPeople">
-            全选
-          </AButton>
-        </div>
-        <div class="people-album-toolbar-right">
-
-          <AButton type="text" shape="default" size="middle" class="people-album-toolbar-btn"
-                   :disabled="selected.length !== 2" v-if="selectedKey === '0'">
-            <template #icon>
-              <BlockOutlined class="people-album-toolbar-icon"/>
-            </template>
-            合并人物
-          </AButton>
-
-          <AButton type="text" shape="default" size="middle" class="people-album-toolbar-btn" @click="hiddenFace">
-            <template #icon>
-              <EyeInvisibleOutlined class="people-album-toolbar-icon"/>
-            </template>
-            {{ selectedKey === '0' ? '隐藏人物' : '取消隐藏' }}
-          </AButton>
-        </div>
-      </div>
-    </transition>
     <div class="people-album-container">
-      <ASpin :spinning="loading" size="large" wrapperClassName="spin-container">
+      <Spin :spinning="imageStore.faceListLoading" size="large" indicator="spin-dot">
-        <div class="people-album-content" v-if="faceList.length !== 0">
+        <div class="people-album-content" v-if="imageStore.faceList.length !== 0">
           <CheckCard
-              v-for="(item, index) in faceList"
+              v-for="(item, index) in imageStore.faceList"
               :key="index"
               @click="handleClick(item.id, item.face_name, item.face_image)"
               class="photo-item"
               margin="0"
               border-radius="0"
-              v-model="selected"
+              v-model="imageStore.faceSelected"
               :showHoverCircle="true"
               :background-color="'transparent'"
               :iconSize="20"
               :showSelectedEffect="false"
               :value="item.id">
             <div class="people-album-item"
-                 :class="{ 'selected-item': selected.includes(item.id) }"
+                 :class="{ 'selected-item': imageStore.faceSelected.includes(item.id) }"
                  @mouseover="item.showButton = true"
                  @mouseleave="item.showButton = false">
               <div class="people-album-item-avatar">
@@ -115,7 +82,7 @@
           </CheckCard>
 
         </div>
-        <div v-else class="empty-content">
+        <div v-if="!imageStore.imageListLoading&& imageStore.faceList.length === 0" class="empty-content">
           <AEmpty :image="empty" :image-style="{width: '100%', height: '100%'}">
             <template #description>
                 <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
@@ -124,49 +91,32 @@
             </template>
           </AEmpty>
         </div>
-      </ASpin>
+      </Spin>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import {getFaceSamplesList, modifyFaceSampleName, modifyFaceTypeBatch} from "@/api/storage";
+import {modifyFaceSampleName} from "@/api/storage";
 import empty from "@/assets/svgs/empty.svg";
+import useStore from "@/store";
+import PeopleAlbumToolbar from "@/views/Album/PeopleAlbum/PeopleAlbumToolbar.vue";
 
 
-const faceList = ref<any[]>([]);
 const addNameInputValue = ref<string>('');
-const selectedKey = ref<string>('0');
-const loading = ref<boolean>(false);
-const selected = ref<any[]>([]);
 
-/**
+const imageStore = useStore().image;
- * 获取人脸列表
- */
-async function getFaceList(type: number = 0) {
-  loading.value = true;
-  faceList.value = [];
-  const res: any = await getFaceSamplesList(type);
-  if (res && res.code === 200 && res.data.faces) {
-    faceList.value = res.data.faces.map(face => ({
-      ...face,
-      showButton: false,
-      showInput: false,
-    }));
-  }
-  loading.value = false;
-}
 
 function showAddNameInput(index: number) {
-  if (faceList.value[index]) {
+  if (imageStore.faceList[index]) {
-    faceList.value[index].showInput = true;
+    imageStore.faceList[index].showInput = true;
-    faceList.value[index].showButton = false;
+    imageStore.faceList[index].showButton = false;
   }
 }
 
 function hideAddNameInput(index: number) {
-  if (faceList.value[index]) {
+  if (imageStore.faceList[index]) {
-    faceList.value[index].showInput = false;
+    imageStore.faceList[index].showInput = false;
-    faceList.value[index].showButton = false;
+    imageStore.faceList[index].showButton = false;
   }
 }
 
@@ -179,7 +129,7 @@ async function modifyFaceName(id: number, index: number) {
   if (!addNameInputValue.value.trim()) return;
   const res: any = await modifyFaceSampleName(id, addNameInputValue.value);
   if (res && res.code === 200) {
-    faceList.value[index].face_name = res.data.face_name;
+    imageStore.faceList[index].face_name = res.data.face_name;
     addNameInputValue.value = '';
     hideAddNameInput(index);
   }
@@ -190,35 +140,10 @@ async function modifyFaceName(id: number, index: number) {
  * @param key
  */
 function handleSelect({key}) {
-  selectedKey.value = key;
+  imageStore.faceSelectedKey = key;
-  getFaceList(parseInt(key));
+  imageStore.getFaceList();
 }
 
-/**
- * 全选
- */
-function selectAllPeople() {
-  selected.value = faceList.value.map((item) => item.id);
-}
-
-/**
- * 取消选择
- */
-function cancelSelectPeople() {
-  selected.value = [];
-}
-
-/**
- * 隐藏人物
- */
-async function hiddenFace() {
-  if (selected.value.length === 0) return;
-  const res: any = await modifyFaceTypeBatch(selected.value, selectedKey.value === '0' ? 1 : 0);
-  if (res && res.code === 200) {
-    await getFaceList();
-    selected.value = [];
-  }
-}
 
 const route = useRoute();
 const router = useRouter();
@@ -229,12 +154,12 @@ const router = useRouter();
  * @param name
  * @param thumb
  */
-function handleClick(id: number, name: string | null,thumb: string | null) {
+function handleClick(id: number, name: string | null, thumb: string | null) {
   router.push({path: route.path + `/${id}`, query: {name: name, thumb: thumb}});
 }
 
 onMounted(() => {
-  getFaceList();
+  imageStore.getFaceList();
 });
 
 
@@ -283,57 +208,6 @@ onMounted(() => {
   }
 
 
-  .people-album-toolbar {
-    position: fixed;
-    width: calc(100% - 220px);
-    height: 70px;
-    top: 70px;
-    z-index: 3;
-    display: flex;
-    box-sizing: border-box;
-    justify-content: space-between;
-    align-items: center;
-    background-image: linear-gradient(45deg, #5789ff, #5c7bff 100%);
-    color: #fff;
-    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .06);
-    padding: 0 20px;
-
-    .people-album-toolbar-left {
-      width: 50%;
-      height: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 20px;
-    }
-
-    .people-album-toolbar-right {
-      height: 100%;
-      width: 50%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 30px;
-    }
-
-    .people-album-toolbar-icon {
-      font-size: 20px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .people-album-toolbar-btn {
-      font-size: 16px;
-      font-weight: bold;
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
   .people-album-container {
     width: 100%;
     height: 100%;

src/views/Album/PeopleAlbum/PeopleAlbumToolbar.vue

@@ -0,0 +1,127 @@
+<template>
+  <transition name="fade">
+    <div class="people-album-toolbar" v-show="imageStore.faceSelected.length !== 0">
+      <div class="people-album-toolbar-left">
+        <AButton type="text" shape="circle" size="large" class="people-album-toolbar-btn" @click="cancelSelectPeople">
+          <template #icon>
+            <CloseOutlined class="people-album-toolbar-icon"/>
+          </template>
+        </AButton>
+        <span style="font-size: 16px;font-weight: bold">
+          已选择 {{ imageStore.faceSelected.length }} 个人物
+        </span>
+        <AButton type="text" shape="default" class="people-album-toolbar-btn" size="middle" @click="selectAllPeople">
+          全选
+        </AButton>
+      </div>
+      <div class="people-album-toolbar-right">
+
+        <AButton type="text" shape="default" size="middle" class="people-album-toolbar-btn"
+                 :disabled="imageStore.faceSelected.length !== 2" v-if="imageStore.faceSelectedKey === '0'">
+          <template #icon>
+            <BlockOutlined class="people-album-toolbar-icon"/>
+          </template>
+          合并人物
+        </AButton>
+
+        <AButton type="text" shape="default" size="middle" class="people-album-toolbar-btn" @click="hiddenFace">
+          <template #icon>
+            <EyeInvisibleOutlined class="people-album-toolbar-icon"/>
+          </template>
+          {{ imageStore.faceSelectedKey === '0' ? '隐藏人物' : '取消隐藏' }}
+        </AButton>
+      </div>
+    </div>
+  </transition>
+</template>
+<script setup lang="ts">
+import useStore from "@/store";
+import {modifyFaceTypeBatch} from "@/api/storage";
+
+const props = defineProps({
+  faceList: {
+    type: Array as PropType<any[]>,
+    default: () => []
+  }
+});
+
+const imageStore = useStore().image;
+
+/**
+ * 全选
+ */
+function selectAllPeople() {
+  imageStore.faceSelected = props.faceList.map((item) => item.id);
+}
+
+/**
+ * 取消选择
+ */
+function cancelSelectPeople() {
+  imageStore.faceSelected = [];
+}
+
+/**
+ * 隐藏人物
+ */
+async function hiddenFace() {
+  if (imageStore.faceSelected.length === 0) return;
+  const res: any = await modifyFaceTypeBatch(imageStore.faceSelected, imageStore.faceSelectedKey === '0' ? 1 : 0);
+  if (res && res.code === 200) {
+    await  imageStore.getFaceList();
+    imageStore.faceSelected= [];
+  }
+}
+</script>
+<style scoped lang="scss">
+.people-album-toolbar {
+  position: fixed;
+  width: calc(100% - 220px);
+  height: 70px;
+  top: 70px;
+  z-index: 3;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  background-image: linear-gradient(45deg, #5789ff, #5c7bff 100%);
+  color: #fff;
+  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .06);
+  padding: 0 20px;
+
+  .people-album-toolbar-left {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+  }
+
+  .people-album-toolbar-right {
+    height: 100%;
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 30px;
+  }
+
+  .people-album-toolbar-icon {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .people-album-toolbar-btn {
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/views/Album/Phoalbum/AlbumCard.vue

@@ -0,0 +1,184 @@
+<template>
+  <Spin tip="Loading..." :spinning="imageStore.albumListLoading" size="middle">
+    <div class="phoalbum-item-container" v-if="imageStore.albumList">
+      <div class="phoalbum-item"
+           v-for="(album, index) in imageStore.albumList"
+           :key="album.id"
+           @click.prevent="handleClick(album.id,album.name)"
+           @mouseover="isHovered = index"
+           @mouseleave="isHovered = null">
+        <PhotoStack :src="album.cover_image ?`data:image/png;base64,`+album.cover_image: ``"
+                    :default-src="default_cover"/>
+        <div class="phoalbum-item-info">
+          <span class="phoalbum-item-name">{{ album.name }}</span>
+          <span class="phoalbum-item-date">{{ album.created_at }}</span>
+        </div>
+        <div class="phoalbum-item-operation"
+             :class="{ 'fade-in': isHovered === index, 'fade-out': isHovered !== index }">
+          <ADropdown trigger="click" @click.stop>
+            <AButton type="text" shape="circle" size="small" @click.prevent>
+              <template #icon>
+                <AAvatar shape="circle" size="small" :src="more"/>
+              </template>
+            </AButton>
+            <template #overlay>
+              <AMenu>
+                <APopover placement="left" trigger="click">
+                  <AMenuItem key="1">重命名相册</AMenuItem>
+                  <template #content>
+                    <AInput :placeholder="album.name" class="phoalbum-create-input"
+                            v-model:value="albumRenameValue">
+                      <template #suffix>
+                        <AButton type="text" @click.prevent size="small" style="color: #0e87cc"
+                                 @click="renameAlbum(album.id, albumRenameValue)">
+                          确认
+                        </AButton>
+                      </template>
+                    </AInput>
+                  </template>
+                </APopover>
+                <AMenuItem key="2"
+                           @click.prevent="imageStore.openAlbumShareDialogHandler(true,album.cover_image ?`data:image/png;base64,`+album.cover_image: ``,album.id)">
+                  分享相册
+                </AMenuItem>
+                <AMenuItem key="3" @click.prevent="deleteAlbum(album.id)">删除相册</AMenuItem>
+                <AMenuItem key="4">下载相册</AMenuItem>
+              </AMenu>
+            </template>
+          </ADropdown>
+        </div>
+      </div>
+    </div>
+    <div v-else class="empty-content">
+      <AEmpty :image="empty" :image-style="{ width: '100%', height: '100%' }">
+        <template #description>
+                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
+                  暂无相册，快去创建一个吧！
+                </span>
+        </template>
+      </AEmpty>
+    </div>
+  </Spin>
+</template>
+<script setup lang="ts">
+
+import default_cover from "@/assets/images/default-cover.png";
+import more from "@/assets/svgs/more.svg";
+import empty from "@/assets/svgs/empty.svg";
+import useStore from "@/store";
+import {message} from "ant-design-vue";
+import {deleteAlbumApi, renameAlbumApi} from "@/api/storage";
+
+const imageStore = useStore().image;
+const isHovered = ref<number | null>(null);
+const router = useRouter();
+const route = useRoute();
+
+const albumRenameValue = ref<string>("");
+
+/**
+ *  点击相册跳转到详情页
+ * @param id
+ * @param albumName
+ */
+function handleClick(id: number, albumName: string) {
+  router.push({
+    path: route.path + `/${id}`, query: {name: albumName}
+  });
+}
+
+/**
+ * 重命名相册
+ * @param id
+ * @param name
+ */
+async function renameAlbum(id: number, name: string) {
+  if (name.trim() === "") {
+    message.warning("相册名称不能为空");
+    return;
+  }
+  const res: any = await renameAlbumApi(id, name);
+  if (res && res.code === 200) {
+    albumRenameValue.value = "";
+    await imageStore.getAlbumList();
+  }
+}
+
+/**
+ * 删除相册
+ * @param id
+ */
+async function deleteAlbum(id: number) {
+  const res: any = await deleteAlbumApi(id);
+  if (res && res.code === 200) {
+    await imageStore.getAlbumList();
+  } else {
+    message.error("删除相册失败");
+  }
+}
+
+</script>
+<style scoped lang="scss">
+.phoalbum-item-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 40px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  .phoalbum-item {
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 15px;
+    padding: 10px;
+    position: relative;
+    cursor: pointer;
+
+    .phoalbum-item-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .phoalbum-item-name {
+        font-size: 14px;
+        font-weight: bold;
+        color: #333;
+      }
+
+      .phoalbum-item-date {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+
+    .phoalbum-item-operation {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      z-index: 10;
+      opacity: 0;
+      transform: scale(0);
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+
+    .fade-in {
+      opacity: 1; /* 显示时透明度为1 */
+      transform: scale(1); /* 显示时缩放为1 */
+      z-index: 10; /* 显示时z-index为10 */
+    }
+
+    .fade-out {
+      opacity: 0; /* 隐藏时透明度为0 */
+      transform: scale(0); /* 隐藏时缩放为0 */
+    }
+  }
+}
+</style>

src/views/Album/Phoalbum/PhoalbumDetail.vue

@@ -40,7 +40,7 @@
       </AButton>
     </div>
     <ImageUpload/>
-    <ImageToolbar :selected="imageStore.selected" :image-list="albumList"/>
+    <ImageToolbar :selected="imageStore.selected" :image-list="imageList"/>
     <div class="phoalbum-detail-content">
       <div class="phoalbum-detail-content-nav">
         <div class="phoalbum-detail-content-nav-left">
@@ -51,7 +51,7 @@
           <span class="phoalbum-detail-content-nav-name">{{ route.query.name }}</span>
         </div>
         <div class="phoalbum-detail-content-nav-right">
-          <span class="phoalbum-detail-content-nav-date">共 {{ imageStore.countTotalImages(albumList) }} 张照片</span>
+          <span class="phoalbum-detail-content-nav-date">共 {{ imageStore.countTotalImages(imageList) }} 张照片</span>
         </div>
       </div>
       <div class="phoalbum-detail-content-desc">
@@ -59,82 +59,44 @@
         <span>相册描述</span>
       </div>
       <div class="phoalbum-detail-content-list">
-        <div style="width:100%;height:100%;" v-if="albumList && albumList.length !== 0">
+        <ImageWaterfallList :image-list="imageList"/>
-          <div v-for="(itemList, index) in albumList" :key="index">
-            <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-            <AImagePreviewGroup>
-              <Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
-                <template #default="{ item }">
-                  <CheckCard :key="index"
-                             class="photo-item"
-                             margin="0"
-                             border-radius="0"
-                             v-model="imageStore.selected"
-                             :showHoverCircle="true"
-                             :iconSize="20"
-                             :showSelectedEffect="true"
-                             :value="item.id">
-                    <AImage :src="item.thumbnail"
-                            :alt="item.file_name"
-                            :key="index"
-                            :height="200"
-                            :previewMask="false"
-                            :preview="{
-                                src: item.url,
-                               }"
-                            loading="lazy"/>
-                  </CheckCard>
-                </template>
-              </Vue3JustifiedLayout>
-            </AImagePreviewGroup>
-          </div>
-        </div>
-        <div v-else class="empty-content">
-          <AEmpty :image="empty">
-            <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无照片，快去上传吧
-                </span>
-            </template>
-          </AEmpty>
-        </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import Vue3JustifiedLayout from "vue3-justified-layout";
+
-import 'vue3-justified-layout/dist/style.css';
 import {deleteAlbumApi, queryAlbumDetailListApi, renameAlbumApi} from "@/api/storage";
-import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
+import ImageToolbar from "@/components/ImageToolbar/ImageToolbar.vue";
 import useStore from "@/store";
-import empty from "@/assets/svgs/empty.svg";
+
-import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
+import ImageUpload from "@/components/ImageUpload/ImageUpload.vue";
 import {message} from "ant-design-vue";
+import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
 
 
 const imageStore = useStore().image;
-const albumList = ref<any[]>([]);
+const imageList = ref<any[]>([]);
 
 const route = useRoute();
 const router = useRouter();
-const options = reactive({
+
-  targetRowHeight: 200 // 高度
-});
 const upload = useStore().upload;
 
 
-async function getAlbumList(id: number) {
+async function getImageList(id: number) {
+  imageStore.imageListLoading = true;
   const res: any = await queryAlbumDetailListApi(id, upload.storageSelected?.[0], upload.storageSelected?.[1]);
   if (res && res.code === 200) {
-    albumList.value = res.data.records;
+    imageList.value = res.data.records;
   }
+  imageStore.imageListLoading = false;
 }
 
 onMounted(() => {
   const idParam = route.params.id;
   const albumId = Array.isArray(idParam) ? idParam[0] : idParam;
-  getAlbumList(parseInt(albumId, 10));
+  getImageList(parseInt(albumId, 10));
 });
 
 function openUploadModal(): void {
@@ -185,6 +147,7 @@ function goBack(): void {
   router.go(-1);
 }
 
+
 </script>
 <style scoped lang="scss">
 .phoalbum-detail {

src/views/Album/Phoalbum/PhoalbumList.vue

@@ -30,7 +30,7 @@
           排序
         </AButton>
         <template #overlay>
-          <AMenu selectable :selectedKeys="[selectedKey]" @select="handleSelect">
+          <AMenu selectable :selectedKeys="[imageStore.sortSelectedKey]" @select="handleSelect">
             <AMenuItem :key="true">按时间排序</AMenuItem>
             <AMenuItem :key="false">按名称排序</AMenuItem>
           </AMenu>
@@ -53,255 +53,21 @@
              @change="handleTabChange">
         <template #rightExtra>
           <span
-              style="color: #999; font-size: 12px;">已全部加载，共 {{ albumList ? albumList.length : 0 }} 个相册</span>
+              style="color: #999; font-size: 12px;">已全部加载，共 {{
+              imageStore.albumList ? imageStore.albumList.length : 0
+            }} 个相册</span>
         </template>
         <ATabPane key="-1" :tab="imageStore.tabMap[-1]">
-          <ASpin tip="Loading..." :spinning="loading" size="large" wrapperClassName="spin-container">
+          <AlbumCard/>
-            <div class="phoalbum-item-container" v-if="albumList && albumList.length != 0">
-              <div class="phoalbum-item"
-                   v-for="(album, index) in albumList"
-                   :key="album.id"
-                   @click.prevent="handleClick(album.id,album.name)"
-                   @mouseover="isHovered = index"
-                   @mouseleave="isHovered = null">
-                <PhotoStack :src="album.cover_image ?`data:image/png;base64,`+album.cover_image: ``"
-                            :default-src="default_cover"/>
-                <div class="phoalbum-item-info">
-                  <span class="phoalbum-item-name">{{ album.name }}</span>
-                  <span class="phoalbum-item-date">{{ album.created_at }}</span>
-                </div>
-                <div class="phoalbum-item-operation"
-                     :class="{ 'fade-in': isHovered === index, 'fade-out': isHovered !== index }">
-                  <ADropdown trigger="click" @click.stop>
-                    <AButton type="text" shape="circle" size="small" @click.prevent>
-                      <template #icon>
-                        <AAvatar shape="circle" size="small" :src="more"/>
-                      </template>
-                    </AButton>
-                    <template #overlay>
-                      <AMenu>
-                        <APopover placement="left" trigger="click">
-                          <AMenuItem key="1">重命名相册</AMenuItem>
-                          <template #content>
-                            <AInput :placeholder="album.name" class="phoalbum-create-input"
-                                    v-model:value="albumRenameValue">
-                              <template #suffix>
-                                <AButton type="text" @click.prevent size="small" style="color: #0e87cc"
-                                         @click="renameAlbum(album.id, albumRenameValue)">
-                                  确认
-                                </AButton>
-                              </template>
-                            </AInput>
-                          </template>
-                        </APopover>
-                        <AMenuItem key="2"
-                                   @click.prevent="imageStore.openAlbumShareDialogHandler(true,album.cover_image ?`data:image/png;base64,`+album.cover_image: ``,album.id)">
-                          分享相册
-                        </AMenuItem>
-                        <AMenuItem key="3" @click.prevent="deleteAlbum(album.id)">删除相册</AMenuItem>
-                        <AMenuItem key="4">下载相册</AMenuItem>
-                      </AMenu>
-                    </template>
-                  </ADropdown>
-                </div>
-              </div>
-            </div>
-            <div v-else class="empty-content">
-              <AEmpty :image="empty" :image-style="{ width: '100%', height: '100%' }">
-                <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无相册，快去创建一个吧！
-                </span>
-                </template>
-              </AEmpty>
-            </div>
-          </ASpin>
         </ATabPane>
         <ATabPane key="0" :tab="imageStore.tabMap[0]">
-          <ASpin tip="Loading..." :spinning="loading" size="large" wrapperClassName="spin-container">
+          <AlbumCard/>
-            <div class="phoalbum-item-container" v-if="albumList && albumList.length != 0">
-              <div class="phoalbum-item"
-                   v-for="(album, index) in albumList"
-                   :key="album.id"
-                   @click.prevent="handleClick(album.id,album.name)"
-                   @mouseover="isHovered = index"
-                   @mouseleave="isHovered = null">
-                <PhotoStack :src="album.cover_image ?`data:image/png;base64,`+album.cover_image: ``"
-                            :default-src="default_cover"/>
-                <div class="phoalbum-item-info">
-                  <span class="phoalbum-item-name">{{ album.name }}</span>
-                  <span class="phoalbum-item-date">{{ album.created_at }}</span>
-                </div>
-                <div class="phoalbum-item-operation"
-                     :class="{ 'fade-in': isHovered === index, 'fade-out': isHovered !== index }">
-                  <ADropdown trigger="click" @click.stop>
-                    <AButton type="text" shape="circle" size="small" @click.prevent>
-                      <template #icon>
-                        <AAvatar shape="circle" size="small" :src="more"/>
-                      </template>
-                    </AButton>
-                    <template #overlay>
-                      <AMenu>
-                        <APopover placement="left" trigger="click">
-                          <AMenuItem key="1">重命名相册</AMenuItem>
-                          <template #content>
-                            <AInput :placeholder="album.name" class="phoalbum-create-input"
-                                    v-model:value="albumRenameValue">
-                              <template #suffix>
-                                <AButton type="text" @click.prevent size="small" style="color: #0e87cc"
-                                         @click="renameAlbum(album.id, albumRenameValue)">
-                                  确认
-                                </AButton>
-                              </template>
-                            </AInput>
-                          </template>
-                        </APopover>
-                        <AMenuItem key="2"
-                                   @click.prevent="imageStore.openAlbumShareDialogHandler(true,album.cover_image ?`data:image/png;base64,`+album.cover_image: ``,album.id)">
-                          分享相册
-                        </AMenuItem>
-                        <AMenuItem key="3" @click.prevent="deleteAlbum(album.id)">删除相册</AMenuItem>
-                        <AMenuItem key="4">下载相册</AMenuItem>
-                      </AMenu>
-                    </template>
-                  </ADropdown>
-                </div>
-              </div>
-            </div>
-            <div v-else class="empty-content">
-              <AEmpty :image="empty" :image-style="{ width: '100%', height: '100%' }">
-                <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无相册，快去创建一个吧！
-                </span>
-                </template>
-              </AEmpty>
-            </div>
-          </ASpin>
         </ATabPane>
         <ATabPane key="1" :tab="imageStore.tabMap[1]">
-          <ASpin tip="Loading..." :spinning="loading" size="large" wrapperClassName="spin-container">
+          <AlbumCard/>
-            <div class="phoalbum-item-container" v-if="albumList && albumList.length != 0">
-              <div class="phoalbum-item"
-                   v-for="(album, index) in albumList"
-                   :key="album.id"
-                   @click.prevent="handleClick(album.id,album.name)"
-                   @mouseover="isHovered = index"
-                   @mouseleave="isHovered = null">
-                <PhotoStack :src="album.cover_image ?`data:image/png;base64,`+album.cover_image: ``"
-                            :default-src="default_cover"/>
-                <div class="phoalbum-item-info">
-                  <span class="phoalbum-item-name">{{ album.name }}</span>
-                  <span class="phoalbum-item-date">{{ album.created_at }}</span>
-                </div>
-                <div class="phoalbum-item-operation"
-                     :class="{ 'fade-in': isHovered === index, 'fade-out': isHovered !== index }">
-                  <ADropdown trigger="click" @click.stop>
-                    <AButton type="text" shape="circle" size="small" @click.prevent>
-                      <template #icon>
-                        <AAvatar shape="circle" size="small" :src="more"/>
-                      </template>
-                    </AButton>
-                    <template #overlay>
-                      <AMenu>
-                        <APopover placement="left" trigger="click">
-                          <AMenuItem key="1">重命名相册</AMenuItem>
-                          <template #content>
-                            <AInput :placeholder="album.name" class="phoalbum-create-input"
-                                    v-model:value="albumRenameValue">
-                              <template #suffix>
-                                <AButton type="text" @click.prevent size="small" style="color: #0e87cc"
-                                         @click="renameAlbum(album.id, albumRenameValue)">
-                                  确认
-                                </AButton>
-                              </template>
-                            </AInput>
-                          </template>
-                        </APopover>
-                        <AMenuItem key="2"
-                                   @click.prevent="imageStore.openAlbumShareDialogHandler(true,album.cover_image ?`data:image/png;base64,`+album.cover_image: ``,album.id)">
-                          分享相册
-                        </AMenuItem>
-                        <AMenuItem key="3" @click.prevent="deleteAlbum(album.id)">删除相册</AMenuItem>
-                        <AMenuItem key="4">下载相册</AMenuItem>
-                      </AMenu>
-                    </template>
-                  </ADropdown>
-                </div>
-              </div>
-            </div>
-            <div v-else class="empty-content">
-              <AEmpty :image="empty" :image-style="{ width: '100%', height: '100%' }">
-                <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无相册，快去创建一个吧！
-                </span>
-                </template>
-              </AEmpty>
-            </div>
-          </ASpin>
         </ATabPane>
         <ATabPane key="2" :tab="imageStore.tabMap[2]">
-          <ASpin tip="Loading..." :spinning="loading" size="large" wrapperClassName="spin-container">
+          <AlbumCard/>
-            <div class="phoalbum-item-container" v-if="albumList && albumList.length != 0">
-              <div class="phoalbum-item"
-                   v-for="(album, index) in albumList"
-                   :key="album.id"
-                   @click.prevent="handleClick(album.id,album.name)"
-                   @mouseover="isHovered = index"
-                   @mouseleave="isHovered = null">
-                <PhotoStack :src="album.cover_image ?`data:image/png;base64,`+album.cover_image: ``"
-                            :default-src="default_cover"/>
-                <div class="phoalbum-item-info">
-                  <span class="phoalbum-item-name">{{ album.name }}</span>
-                  <span class="phoalbum-item-date">{{ album.created_at }}</span>
-                </div>
-                <div class="phoalbum-item-operation"
-                     :class="{ 'fade-in': isHovered === index, 'fade-out': isHovered !== index }">
-                  <ADropdown trigger="click" @click.stop>
-                    <AButton type="text" shape="circle" size="small" @click.prevent>
-                      <template #icon>
-                        <AAvatar shape="circle" size="small" :src="more"/>
-                      </template>
-                    </AButton>
-                    <template #overlay>
-                      <AMenu>
-                        <APopover placement="left" trigger="click">
-                          <AMenuItem key="1">重命名相册</AMenuItem>
-                          <template #content>
-                            <AInput :placeholder="album.name" class="phoalbum-create-input"
-                                    v-model:value="albumRenameValue">
-                              <template #suffix>
-                                <AButton type="text" @click.prevent size="small" style="color: #0e87cc"
-                                         @click="renameAlbum(album.id, albumRenameValue)">
-                                  确认
-                                </AButton>
-                              </template>
-                            </AInput>
-                          </template>
-                        </APopover>
-                        <AMenuItem key="2"
-                                   @click.prevent="imageStore.openAlbumShareDialogHandler(true,album.cover_image ?`data:image/png;base64,`+album.cover_image: ``,album.id)">
-                          分享相册
-                        </AMenuItem>
-                        <AMenuItem key="3" @click.prevent="deleteAlbum(album.id)">删除相册</AMenuItem>
-                        <AMenuItem key="4">下载相册</AMenuItem>
-                      </AMenu>
-                    </template>
-                  </ADropdown>
-                </div>
-              </div>
-            </div>
-            <div v-else class="empty-content">
-              <AEmpty :image="empty" :image-style="{ width: '100%', height: '100%' }">
-                <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无相册，快去创建一个吧！
-                </span>
-                </template>
-              </AEmpty>
-            </div>
-          </ASpin>
         </ATabPane>
       </ATabs>
     </div>
@@ -309,27 +75,21 @@
   </div>
 </template>
 <script setup lang="ts">
-import more from "@/assets/svgs/more.svg";
+import {createAlbumApi} from "@/api/storage";
-import {albumListApi, createAlbumApi, deleteAlbumApi, renameAlbumApi} from "@/api/storage";
 import {message} from "ant-design-vue";
-import default_cover from "@/assets/images/default-cover.png";
-import useStore from "@/store";
-import empty from "@/assets/svgs/empty.svg";
-import AlbumShareModal from "@/views/Album/Phoalbum/AlbumShareModal.vue";
 
-const isHovered = ref<number | null>(null);
+import useStore from "@/store";
+
+import AlbumShareModal from "@/views/Album/Phoalbum/AlbumShareModal.vue";
+import AlbumCard from "@/views/Album/Phoalbum/AlbumCard.vue";
+
 
 const albumNameValue = ref<string>("未命名相册");
-const albumRenameValue = ref<string>("");
 
-const selectedKey = ref<boolean>(true);
-
-const albumList = ref<any[]>([]);
-
-const loading = ref<boolean>(false);
 
 const imageStore = useStore().image;
 
+
 /**
  * 创建相册
  */
@@ -341,7 +101,7 @@ async function createAlbumSubmit() {
   const res: any = await createAlbumApi(albumNameValue.value);
   if (res && res.code === 200) {
     albumNameValue.value = "未命名相册";
-    await getAlbumList(parseInt(imageStore.tabActiveKey), selectedKey.value);
+    await imageStore.getAlbumList();
   } else {
     message.error("创建相册失败");
   }
@@ -352,8 +112,8 @@ async function createAlbumSubmit() {
  * @param key
  */
 async function handleSelect({key}) {
-  selectedKey.value = key;
+  imageStore.sortSelectedKey = key;
-  await getAlbumList(parseInt(imageStore.tabActiveKey), key);
+  await imageStore.getAlbumList();
 }
 
 /**
@@ -362,70 +122,12 @@ async function handleSelect({key}) {
  */
 async function handleTabChange(activeKey: string) {
   imageStore.tabActiveKey = activeKey;
-  await getAlbumList(parseInt(activeKey), selectedKey.value);
+  await imageStore.getAlbumList();
 }
 
-/**
- * 获取相册列表
- * @param type
- * @param sort
- */
-async function getAlbumList(type: number = 0, sort: boolean = true) {
-  albumList.value = [];
-  loading.value = true;
-  const res: any = await albumListApi(type, sort);
-  if (res && res.code === 200) {
-    albumList.value = res.data.albums;
-  }
-  loading.value = false;
-}
-
-/**
- * 重命名相册
- * @param id
- * @param name
- */
-async function renameAlbum(id: number, name: string) {
-  if (name.trim() === "") {
-    message.warning("相册名称不能为空");
-    return;
-  }
-  const res: any = await renameAlbumApi(id, name);
-  if (res && res.code === 200) {
-    albumRenameValue.value = "";
-    await getAlbumList(parseInt(imageStore.tabActiveKey), selectedKey.value);
-  }
-}
-
-/**
- * 删除相册
- * @param id
- */
-async function deleteAlbum(id: number) {
-  const res: any = await deleteAlbumApi(id);
-  if (res && res.code === 200) {
-    await getAlbumList(parseInt(imageStore.tabActiveKey), selectedKey.value);
-  } else {
-    message.error("删除相册失败");
-  }
-}
-
-const route = useRoute();
-const router = useRouter();
-
-/**
- *  点击相册跳转到详情页
- * @param id
- * @param albumName
- */
-function handleClick(id: number, albumName: string) {
-  router.push({
-    path: route.path + `/${id}`, query: {name: albumName}
-  });
-}
 
 onMounted(() => {
-  getAlbumList(parseInt(imageStore.tabActiveKey), selectedKey.value);
+  imageStore.getAlbumList();
 });
 
 </script>
@@ -462,79 +164,6 @@ onMounted(() => {
     justify-content: flex-start;
     width: 100%;
     height: calc(100% - 65px);
-
-    .spin-container {
-      position: relative;
-      transition: opacity 0.3s;
-      width: 100%;
-      height: 70vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .phoalbum-item-container {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      justify-content: flex-start;
-      gap: 40px;
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-
-      .phoalbum-item {
-        width: 200px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        gap: 15px;
-        padding: 10px;
-        position: relative;
-        cursor: pointer;
-
-        .phoalbum-item-info {
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-start;
-          align-items: flex-start;
-
-          .phoalbum-item-name {
-            font-size: 14px;
-            font-weight: bold;
-            color: #333;
-          }
-
-          .phoalbum-item-date {
-            font-size: 12px;
-            color: #999;
-          }
-        }
-
-        .phoalbum-item-operation {
-          position: absolute;
-          top: 20px;
-          right: 20px;
-          z-index: 10;
-          opacity: 0;
-          transform: scale(0);
-          transition: opacity 0.3s ease, transform 0.3s ease;
-        }
-
-        .fade-in {
-          opacity: 1; /* 显示时透明度为1 */
-          transform: scale(1); /* 显示时缩放为1 */
-          z-index: 10; /* 显示时z-index为10 */
-        }
-
-        .fade-out {
-          opacity: 0; /* 隐藏时透明度为0 */
-          transform: scale(0); /* 隐藏时缩放为0 */
-        }
-      }
-    }
-
   }
 }
 

src/views/Album/ThingAlbum/ThingAlbumDetail.vue

@@ -9,69 +9,37 @@
         <span class="thing-detail-content-nav-name">{{ getZhLabelNameByEnName(route.query.tag as string) }}</span>
       </div>
     </div>
-    <ImageToolbar :selected="imageStore.selected" :image-list="albumList"/>
+    <ImageToolbar :selected="imageStore.selected" :image-list="imageList"/>
     <div class="thing-album-detail-info">
-      <span style="font-size: 14px;color: #999999">共{{ imageStore.countTotalImages(albumList) }}张照片</span>
+      <span style="font-size: 14px;color: #999999">共{{ imageStore.countTotalImages(imageList) }}张照片</span>
     </div>
     <div class="thing-album-detail-list">
-      <div style="width:100%;height:100%;">
+      <ImageWaterfallList :image-list="imageList"/>
-        <div v-for="(itemList, index) in albumList" :key="index">
-          <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-          <AImagePreviewGroup>
-            <Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
-              <template #default="{ item }">
-                <CheckCard :key="index"
-                           class="photo-item"
-                           margin="0"
-                           border-radius="0"
-                           v-model="imageStore.selected"
-                           :showHoverCircle="true"
-                           :iconSize="20"
-                           :showSelectedEffect="true"
-                           :value="item.id">
-                  <AImage :src="item.thumbnail"
-                          :alt="item.file_name"
-                          :key="index"
-                          :height="200"
-                          :previewMask="false"
-                          :preview="{
-                                src: item.url,
-                               }"
-                          loading="lazy"/>
-                </CheckCard>
-              </template>
-            </Vue3JustifiedLayout>
-          </AImagePreviewGroup>
-        </div>
-      </div>
     </div>
-
   </div>
 </template>
 <script setup lang="ts">
 
-import Vue3JustifiedLayout from "vue3-justified-layout";
-import 'vue3-justified-layout/dist/style.css';
 import {queryThingDetailListApi} from "@/api/storage";
-import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
+import ImageToolbar from "@/components/ImageToolbar/ImageToolbar.vue";
 import useStore from "@/store";
 import {getZhCategoryNameByEnName, getZhLabelNameByEnName} from "@/constant/coco_ssd_label_category.ts";
+import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
 
 
 const imageStore = useStore().image;
-const albumList = ref<any[]>([]);
+const imageList = ref<any[]>([]);
 const upload = useStore().upload;
 const route = useRoute();
 const router = useRouter();
-const options = reactive({
-  targetRowHeight: 200 // 高度
-});
 
 async function getImageList(tag_name: string) {
+  imageStore.imageListLoading = true;
   const res: any = await queryThingDetailListApi(tag_name, upload.storageSelected?.[0], upload.storageSelected?.[1]);
   if (res && res.code === 200) {
-    albumList.value = res.data.records;
+    imageList.value = res.data.records;
   }
+  imageStore.imageListLoading = false;
 }
 
 onMounted(() => {

src/views/Album/ThingAlbum/ThingAlbumList.vue

@@ -5,8 +5,8 @@
       <AButton type="link" size="large" class="thing-album-button">事物</AButton>
 
     </div>
-    <div class="thing-album-content" v-if="thingAlbumList && thingAlbumList.length>0">
+    <div class="thing-album-content" v-if="albumList && albumList.length>0">
-      <div class="thing-album-content-item" v-for="(item, index) in thingAlbumList" :key="index">
+      <div class="thing-album-content-item" v-for="(item, index) in albumList" :key="index">
         <span class="thing-album-title">{{ getZhCategoryNameByEnName(item.category) }}</span>
         <div class="thing-album-wrapper">
           <div class="thing-album-container" v-for="(tags, indexList) in item.list" :key="indexList"
@@ -40,12 +40,13 @@ import {getZhCategoryNameByEnName, getZhLabelNameByEnName} from "@/constant/coco
 import useStore from "@/store";
 import empty from "@/assets/svgs/empty.svg";
 
-const thingAlbumList = ref<any[]>([]);
 
-async function getThingAlbumList(provider: string, bucket: string) {
+const albumList = ref<any[]>([]);
+
+async function getAlbumList(provider: string, bucket: string) {
   const res: any = await queryThingAlbumApi(provider, bucket);
   if (res && res.code === 200) {
-    thingAlbumList.value = res.data.records;
+    albumList.value = res.data.records;
   }
 }
 
@@ -64,7 +65,7 @@ function handleClick(id: string, category: string, tag: string) {
 }
 
 onMounted(() => {
-  getThingAlbumList(upload.storageSelected?.[0], upload.storageSelected?.[1]);
+  getAlbumList(upload.storageSelected?.[0], upload.storageSelected?.[1]);
 });
 
 </script>

src/views/Phone/UpscalePhoneUpload/UpscalePhoneUpload.vue

@@ -62,9 +62,9 @@ import warn from '@/assets/svgs/warn.svg';
 import remove from '@/assets/svgs/remove.svg';
 import empty from '@/assets/svgs/empty.svg';
 import {blobToBase64} from "@/utils/imageUtils/blobToBase64.ts";
-import {uploadImage} from "src/api/phone";
 import {message} from "ant-design-vue";
 import {useI18n} from "vue-i18n";
+import {uploadImage} from "@/api/phone";
 
 const upscale = useStore().upscale;
 

src/views/Photograph/AllPhoto/AllPhoto.vue

@@ -29,7 +29,7 @@
         </template>
       </APopover>
     </div>
-    <image-toolbar :selected="imageStore.selected" :image-list="images"/>
+    <image-toolbar :selected="imageStore.selected" :image-list="imageList"/>
     <div class="photo-list">
       <ATabs size="small" :tabBarGutter="50" type="line" tabPosition="top" :tabBarStyle="{position:'unset'}"
              @change="handleTabChange"
@@ -41,214 +41,20 @@
             <ATooltip title="开启后即可隐藏已添加到相册的照片" placement="bottom">
               <QuestionCircleOutlined/>
             </ATooltip>
-            <ASwitch size="default" v-model:checked="imageStore.switchValue"/>
+            <ASwitch size="default" v-model:checked="imageStore.switchValue" @change="handleSwitchChange"/>
           </AFlex>
         </template>
         <ATabPane key="all" :tab="imageStore.homeTabMap['all']">
-          <ASpin size="large" :spinning="loading" :delay="500" wrapper-class-name="spin-wrapper">
+          <ImageWaterfallList :image-list="imageList"/>
-            <div style="width:100%;height:100%;" v-if="images">
-              <div v-for="(itemList, index) in images" :key="index">
-                <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-                <AImagePreviewGroup>
-                  <Vue3JustifiedLayout v-model:list="itemList.list" :options="options"
-                                       style="line-height: 0 !important;">
-                    <template #default="{ item }">
-                      <CheckCard :key="index"
-                                 class="photo-item"
-                                 margin="0"
-                                 border-radius="0"
-                                 v-model="imageStore.selected"
-                                 :showHoverCircle="true"
-                                 :iconSize="20"
-                                 :showSelectedEffect="true"
-                                 :value="item.id">
-                        <AImage :src="item.thumbnail"
-                                :alt="item.file_name"
-                                :key="index"
-                                :height="200"
-                                :preview="{
-                                src: item.url,
-                               }"
-                                loading="lazy">
-                          <template #previewMask>
-                          </template>
-                        </AImage>
-                      </CheckCard>
-                    </template>
-                  </Vue3JustifiedLayout>
-                </AImagePreviewGroup>
-              </div>
-            </div>
-            <div v-else class="empty-content">
-              <AEmpty :image="empty"
-                      :image-style="{
-                   height: '100%',
-                   width: '100%',
-                 }">
-                <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  还没检测到任何图片，快去上传吧！
-                </span>
-                </template>
-              </AEmpty>
-            </div>
-          </ASpin>
         </ATabPane>
         <ATabPane key="video" :tab="imageStore.homeTabMap['video']">
-          <ASpin size="large" :spinning="loading" :delay="500">
+          <ImageWaterfallList :image-list="imageList"/>
-            <div style="width:100%;height:100%;" v-if="images">
-              <div v-for="(itemList, index) in images" :key="index">
-                <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-                <AImagePreviewGroup>
-                  <Vue3JustifiedLayout v-model:list="itemList.list" :options="options"
-                                       style="line-height: 0 !important;">
-                    <template #default="{ item }">
-                      <CheckCard :key="index"
-                                 class="photo-item"
-                                 margin="0"
-                                 border-radius="0"
-                                 v-model="imageStore.selected"
-                                 :showHoverCircle="true"
-                                 :iconSize="20"
-                                 :showSelectedEffect="true"
-                                 :value="item.id">
-                        <AImage :src="item.thumbnail"
-                                :alt="item.file_name"
-                                :key="index"
-                                :height="200"
-                                :preview="{
-                                src: item.url,
-                               }"
-                                loading="lazy">
-                          <template #previewMask>
-                          </template>
-                        </AImage>
-                      </CheckCard>
-                    </template>
-                  </Vue3JustifiedLayout>
-                </AImagePreviewGroup>
-              </div>
-            </div>
-            <div v-else class="empty-content">
-              <AEmpty
-                  :image="empty"
-                  :image-style="{
-                   height: '100%',
-                   width: '100%',
-                 }"
-              >
-                <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  还没检测到任何视频，快去上传吧！
-                </span>
-                </template>
-              </AEmpty>
-            </div>
-          </ASpin>
         </ATabPane>
         <ATabPane key="gif" :tab="imageStore.homeTabMap['gif']">
-          <ASpin size="large" :spinning="loading" :delay="500">
+          <ImageWaterfallList :image-list="imageList"/>
-            <div style="width:100%;height:100%;" v-if="images">
-              <div v-for="(itemList, index) in images" :key="index">
-                <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-                <AImagePreviewGroup>
-                  <Vue3JustifiedLayout v-model:list="itemList.list" :options="options"
-                                       style="line-height: 0 !important;">
-                    <template #default="{ item }">
-                      <CheckCard :key="index"
-                                 class="photo-item"
-                                 margin="0"
-                                 border-radius="0"
-                                 v-model="imageStore.selected"
-                                 :showHoverCircle="true"
-                                 :iconSize="20"
-                                 :showSelectedEffect="true"
-                                 :value="item.id">
-                        <AImage :src="item.thumbnail"
-                                :alt="item.file_name"
-                                :key="index"
-                                :height="200"
-                                :preview="{
-                                src: item.url,
-                               }"
-                                loading="lazy">
-                          <template #previewMask>
-                          </template>
-                        </AImage>
-                      </CheckCard>
-                    </template>
-                  </Vue3JustifiedLayout>
-                </AImagePreviewGroup>
-              </div>
-            </div>
-            <div v-else class="empty-content">
-              <AEmpty
-                  :image="empty"
-                  :image-style="{
-                   height: '100%',
-                   width: '100%',
-                 }"
-              >
-                <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  还没检测到任何动图，快去上传吧！
-                </span>
-                </template>
-              </AEmpty>
-            </div>
-          </ASpin>
         </ATabPane>
         <ATabPane key="screenshot" :tab="imageStore.homeTabMap['screenshot']">
-          <ASpin size="large" :spinning="loading" :delay="500">
+          <ImageWaterfallList :image-list="imageList"/>
-            <div style="width:100%;height:100%;" v-if="images">
-              <div v-for="(itemList, index) in images" :key="index">
-                <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-                <AImagePreviewGroup>
-                  <Vue3JustifiedLayout v-model:list="itemList.list" :options="options"
-                                       style="line-height: 0 !important;">
-                    <template #default="{ item }">
-                      <CheckCard :key="index"
-                                 class="photo-item"
-                                 margin="0"
-                                 border-radius="0"
-                                 v-model="imageStore.selected"
-                                 :showHoverCircle="true"
-                                 :iconSize="20"
-                                 :showSelectedEffect="true"
-                                 :value="item.id">
-                        <AImage :src="item.thumbnail"
-                                :alt="item.file_name"
-                                :key="index"
-                                :height="200"
-                                :preview="{
-                                src: item.url,
-                               }"
-                                loading="lazy">
-                          <template #previewMask>
-                          </template>
-                        </AImage>
-                      </CheckCard>
-                    </template>
-                  </Vue3JustifiedLayout>
-                </AImagePreviewGroup>
-              </div>
-            </div>
-            <div v-else class="empty-content">
-              <AEmpty
-                  :image="empty"
-                  :image-style="{
-                   height: '100%',
-                   width: '100%',
-                 }"
-              >
-                <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  还没检测到任何屏幕截图，快去上传吧！
-                </span>
-                </template>
-              </AEmpty>
-            </div>
-          </ASpin>
         </ATabPane>
       </ATabs>
     </div>
@@ -257,40 +63,34 @@
 </template>
 
 <script setup lang="ts">
-
+import ImageUpload from "@/components/ImageUpload/ImageUpload.vue";
-import Vue3JustifiedLayout from "vue3-justified-layout";
-import 'vue3-justified-layout/dist/style.css';
-import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
 import useStore from "@/store";
 import {createAlbumApi, queryAllImagesApi} from "@/api/storage";
-import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
+
-import empty from "@/assets/svgs/empty.svg";
 import {message} from "ant-design-vue";
+import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
 
 const imageStore = useStore().image;
 
 
 const upload = useStore().upload;
 
-const options = reactive({
-  targetRowHeight: 200 // 高度
-});
 
-const images = ref<any[]>([]);
+const imageList = ref<any[]>([]);
-const loading = ref<boolean>(false);
+
 const router = useRouter();
 
 /**
  * 获取所有图片
  */
 async function getAllImages(type: string) {
-  images.value = [];
+  imageList.value = [];
-  loading.value = true;
+  imageStore.imageListLoading = true;
   const res: any = await queryAllImagesApi(type, imageStore.switchValue, upload.storageSelected?.[0], upload.storageSelected?.[1]);
   if (res && res.code === 200) {
-    images.value = res.data.records;
+    imageList.value = res.data.records;
   }
-  loading.value = false;
+  imageStore.imageListLoading = false;
 }
 
 async function handleTabChange(activeKey: string) {
@@ -319,6 +119,10 @@ async function createAlbumSubmit() {
   }
 }
 
+function handleSwitchChange(_checked: boolean) {
+  getAllImages(imageStore.homeTabActiveKey);
+}
+
 
 onMounted(() => {
   getAllImages(imageStore.homeTabActiveKey);
@@ -362,7 +166,4 @@ onMounted(() => {
   box-shadow: 0 0 10px 0 rgba(77, 167, 255, 0.89);
 }
 
-.spin-wrapper {
-}
-
 </style>

src/views/Photograph/RecentUpload/RecentUpload.vue

@@ -29,52 +29,10 @@
         </template>
       </APopover>
     </div>
-    <image-toolbar :selected="imageStore.selected" :image-list="images"/>
+    <image-toolbar :selected="imageStore.selected" :image-list="imageList"/>
     <div class="photo-list">
-      <div style="width:100%;height:100%;" v-if="images.length !== 0">
+      <div class="photo-list-container">
-        <div v-for="(itemList, index) in images" :key="index">
+        <ImageWaterfallList :image-list="imageList"/>
-          <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-          <AImagePreviewGroup>
-            <Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
-              <template #default="{ item }">
-                <CheckCard :key="index"
-                           class="photo-item"
-                           margin="0"
-                           border-radius="0"
-                           v-model="imageStore.selected"
-                           :showHoverCircle="true"
-                           :iconSize="20"
-                           :showSelectedEffect="true"
-                           :value="item.id">
-                  <AImage :src="item.thumbnail"
-                          :alt="item.file_name"
-                          :key="index"
-                          style="height: 200px"
-                          :preview="{
-                            src: item.url,
-                          }"
-                          loading="lazy">
-                    <template #previewMask>
-
-                    </template>
-                  </AImage>
-                </CheckCard>
-              </template>
-            </Vue3JustifiedLayout>
-          </AImagePreviewGroup>
-        </div>
-      </div>
-      <div v-else class="empty-content">
-        <AEmpty :image="empty" :image-style="{
-                   height: '100%',
-                   width: '100%',
-                 }">
-          <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无照片，快去上传吧
-                </span>
-          </template>
-        </AEmpty>
       </div>
     </div>
     <ImageUpload/>
@@ -82,28 +40,27 @@
 </template>
 <script setup lang="ts">
 
-import Vue3JustifiedLayout from "vue3-justified-layout";
-import 'vue3-justified-layout/dist/style.css';
 import useStore from "@/store";
-import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
+import ImageUpload from "@/components/ImageUpload/ImageUpload.vue";
 import {createAlbumApi, queryRecentImagesApi} from "@/api/storage";
-import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
+import ImageToolbar from "@/components/ImageToolbar/ImageToolbar.vue";
-import empty from "@/assets/svgs/empty.svg";
+
 import {message} from "ant-design-vue";
 import router from "@/router/router.ts";
+import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
 
 const imageStore = useStore().image;
 const upload = useStore().upload;
-const images = ref<any[]>([]);
+const imageList = ref<any[]>([]);
-const options = reactive({
+
-  targetRowHeight: 200 // 高度
-});
 
 const getRecentImages = async () => {
+  imageStore.imageListLoading = true;
   const res: any = await queryRecentImagesApi(upload.storageSelected?.[0], upload.storageSelected?.[1]);
   if (res && res.code === 200) {
-    images.value = res.data.records;
+    imageList.value = res.data.records;
   }
+  imageStore.imageListLoading = false;
 };
 
 const albumNameValue = ref<string>("未命名相册");
@@ -154,12 +111,21 @@ onMounted(() => {
 
   .photo-list {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
     justify-content: flex-start;
     width: 100%;
     height: calc(100% - 65px);
     margin-top: 10px;
+    .photo-list-container {
+       width: 100%;
+       height: 100%;
+       display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: flex-start;
+
+    }
   }
 }
 </style>

src/views/RecyclingBin/RecyclingBin.vue

@@ -5,74 +5,28 @@
       <span class="recycling-bin-desc">保存最近10天从云端删除的内容</span>
     </div>
     <div class="photo-list">
-      <div style="width:100%;height:100%;" v-if="images.length !== 0">
+      <ImageWaterfallList :image-list="imageList"/>
-        <div v-for="(itemList, index) in images" :key="index">
-          <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
-          <AImagePreviewGroup>
-            <Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
-              <template #default="{ item }">
-                <CheckCard :key="index"
-                           class="photo-item"
-                           margin="0"
-                           border-radius="0"
-                           v-model="selected"
-                           :showHoverCircle="true"
-                           :iconSize="20"
-                           :showSelectedEffect="true"
-                           :value="item.id">
-                  <AImage :src="item.thumbnail"
-                          :alt="item.file_name"
-                          :key="index"
-                          style="height: 200px"
-                          :preview="{
-                            src: item.url,
-                          }"
-                          loading="lazy">
-                    <template #previewMask>
-
-                    </template>
-                  </AImage>
-                </CheckCard>
-              </template>
-            </Vue3JustifiedLayout>
-          </AImagePreviewGroup>
-        </div>
-      </div>
-      <div v-else class="empty-content">
-        <AEmpty :image="empty" :image-style="{ width: '100%', height: '100%' }">
-          <template #description>
-                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
-                  暂无照片，快去上传吧
-                </span>
-          </template>
-        </AEmpty>
-      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import Vue3JustifiedLayout from "vue3-justified-layout";
-import 'vue3-justified-layout/dist/style.css';
 import {getDeletedRecordApi} from "@/api/storage";
 import useStore from "@/store";
-import empty from "@/assets/svgs/empty.svg";
+import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
 
-
+const imageList = ref<any[]>([]);
-const selected = ref<(string | number)[]>([]);
-const images = ref<any[]>([]);
-const options = reactive({
-  targetRowHeight: 200 // 高度
-});
 const upload = useStore().upload;
-
+const imageStore = useStore().image;
 /**
  * 查询回收站
  */
 async function queryRecyclingBin() {
+  imageStore.imageListLoading = true;
   const res: any = await getDeletedRecordApi(upload.storageSelected?.[0], upload.storageSelected?.[1]);
   if (res && res.code === 200) {
-    images.value = res.data.records;
+    imageList.value = res.data.records;
   }
+  imageStore.imageListLoading = false;
 }
 
 onMounted(() => {

src/views/Share/ShareViewList/index.vue

@@ -10,42 +10,11 @@
         <div class="share-content-header">
           <AButton type="link" size="large" class="share-content-header-button">图片列表</AButton>
         </div>
-        <div class="share-content-verify" v-if="images && images.length <= 0">
+        <div class="share-content-verify" v-if="imageList && imageList.length <= 0">
           <AInputPassword size="large" placeholder="请输入访问密码" style="width: 20%" @pressEnter="getShareImages"/>
           <p style="font-size: 12px;color: #999;">回车后可查看图片列表</p>
         </div>
-        <ASpin :spinning="loading" size="large">
+        <ImageWaterfallList :image-list="imageList"/>
-          <div v-if="images && images.length !== 0">
-            <AImagePreviewGroup>
-              <Vue3JustifiedLayout v-model:list="images" :options="options">
-                <template #default="{ item }">
-                  <CheckCard
-                      class="photo-item"
-                      margin="0"
-                      border-radius="0"
-                      v-model="selected"
-                      :showHoverCircle="true"
-                      :iconSize="20"
-                      :showSelectedEffect="true"
-                      :value="item.id">
-                    <AImage :src="item.thumbnail"
-                            :alt="item.file_name"
-                            style="height: 200px"
-                            :preview="{
-                        src: item.url,
-                      }"
-                            loading="lazy">
-                      <template #previewMask>
-
-                      </template>
-                    </AImage>
-                  </CheckCard>
-                </template>
-              </Vue3JustifiedLayout>
-            </AImagePreviewGroup>
-          </div>
-        </ASpin>
-
       </div>
     </div>
   </div>
@@ -54,31 +23,30 @@
 
 import Header from "@/layout/default/Header/Header.vue";
 import ShareSidebar from "@/views/Share/ShareViewList/ShareSidebar.vue";
-import Vue3JustifiedLayout from "vue3-justified-layout";
-import 'vue3-justified-layout/dist/style.css';
-import {queryShareImageApi} from "@/api/share";
 
-const selected = ref<(string | number)[]>([]);
+import {queryShareImageApi} from "@/api/share";
-const images = ref<any[]>([]);
+import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
-const options = reactive({
+import useStore from "@/store";
-  targetRowHeight: 200 // 高度
+
-});
+const imageList = ref<any[]>([]);
+
 const route = useRoute();
-const loading = ref<boolean>(false);
+
+const imageStore = useStore().image;
 
 /**
  * 获取分享图片列表
  * @param e
  */
 async function getShareImages(e) {
-  loading.value = true;
+  imageStore.imageListLoading = true;
   const invite_code = route.params.id;
   const code = Array.isArray(invite_code) ? invite_code[0] : invite_code;
   const res: any = await queryShareImageApi(code, e.target.value);
   if (res && res.code === 200) {
-    images.value = res.data.records;
+    imageList.value = res.data.records;
   }
-  loading.value = false;
+  imageStore.imageListLoading = false;
 }
 
 

src/views/User/AccountSetting/AccountSetting.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/User/PersonalCenter/PersonalCenter.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="personal-center">
+    <div class="personal-center-header">
+      <Header style="background: transparent;box-shadow: none;backdrop-filter: none;"/>
+      <div class="personal-center-header-info">
+        <div class="personal-center-header-info-container">
+          <div class="personal-center-header-info-container-avatar">
+            <AAvatar :size="80" :text-size="1.5" :round="true" :src="userStore.user.avatar"/>
+          </div>
+          <div class="personal-center-header-info-container-description">
+            <div class="personal-center-header-info-container-description-name">
+              <span>{{ userStore.user.nickname }}</span>
+              <img src="/level_icon/icon/lv1.png" class="personal-level" alt="level">
+            </div>
+            <div class="personal-center-header-info-container-description-introduce">
+              <span>描述信息</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="personal-center-content">
+      <AMenu :selectedKeys="[menuStore.userCenterMenu]" mode="horizontal" :selectable="true" :multiple="false"
+             @select="handleClick">
+        <AMenuItem key="home" :style="menuCSSStyle" title="主页">
+          <template #icon>
+            <AAvatar shape="square" size="small" :src="home"/>
+          </template>
+          <span class="ant-menu-item-title">主页</span>
+        </AMenuItem>
+        <AMenuItem key="dynamic" :style="menuCSSStyle" title="动态">
+          <template #icon>
+            <AAvatar shape="square" size="small" :src="dynamic"/>
+          </template>
+          <span class="ant-menu-item-title">动态</span>
+        </AMenuItem>
+        <AMenuItem key="info" :style="menuCSSStyle" title="个人信息">
+          <template #icon>
+            <AAvatar shape="square" size="small" :src="personal_info"/>
+          </template>
+          <span class="ant-menu-item-title">个人信息</span>
+        </AMenuItem>
+        <AMenuItem key="analysis" :style="menuCSSStyle" title="数据分析">
+          <template #icon>
+            <AAvatar shape="square" size="small" :src="data_analysis"/>
+          </template>
+          <span class="ant-menu-item-title">数据分析</span>
+        </AMenuItem>
+        <AMenuItem key="share" :style="menuCSSStyle" title="我的分享">
+          <template #icon>
+            <AAvatar shape="square" size="small" :src="share"/>
+          </template>
+          <span class="ant-menu-item-title">我的分享</span>
+        </AMenuItem>
+        <AMenuItem key="setting" :style="menuCSSStyle" title="设置">
+          <template #icon>
+            <AAvatar shape="square" size="small" :src="setting"/>
+          </template>
+          <span class="ant-menu-item-title">设置</span>
+        </AMenuItem>
+      </AMenu>
+      <div class="personal-center-content-container">
+        <router-view/>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import Header from "@/layout/default/Header/Header.vue";
+import useStore from "@/store";
+import home from "@/assets/svgs/home.svg";
+import data_analysis from "@/assets/svgs/data_analysis.svg";
+import dynamic from "@/assets/svgs/dynamic.svg";
+import share from "@/assets/svgs/share.svg";
+import setting from "@/assets/svgs/setting.svg";
+import personal_info from "@/assets/svgs/personal-center.svg";
+
+
+const userStore = useStore().user;
+const menuStore = useStore().menu;
+const router = useRouter();
+const menuCSSStyle: any = reactive({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+function handleClick({key}) {
+  menuStore.userCenterMenu = key;
+  router.push(`/main/user/center/${key}`);
+
+}
+</script>
+<style scoped lang="scss">
+.personal-center {
+  background-color: #eaeef6;
+
+  .personal-center-header {
+    width: 100%;
+    height: 200px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), url("@/assets/images/bg.webp");
+    background-size: cover;
+    background-position: center;
+    position: relative;
+
+    .personal-center-header-info {
+      width: 100%;
+      height: 130px;
+      display: flex;
+      flex-direction: row;
+
+      .personal-center-header-info-container {
+        width: 95%;
+        height: 110px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: flex-start;
+        gap: 20px;
+
+        .personal-center-header-info-container-avatar {
+          height: 80px;
+          width: 80px;
+          border: 2px solid #fff;
+          border-radius: 50%;
+        }
+
+        .personal-center-header-info-container-description {
+          height: 70px;
+          width: 80%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: flex-start;
+
+          .personal-center-header-info-container-description-name {
+            font-size: 24px;
+            font-weight: 700;
+            color: #fff;
+            text-shadow: 0px 1px 2px rgba(0, 0, 0, .4);
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 20px;
+
+            .personal-level {
+              width: auto;
+              height: 20px;
+            }
+          }
+
+          .personal-center-header-info-container-description-introduce {
+            font-size: 16px;
+            color: #fff;
+            background-color: rgba(255, 255, 255, .2);
+            box-shadow: 0 0 0 1px rgba(255, 255, 255, .5)
+          }
+        }
+
+      }
+    }
+  }
+
+  .personal-center-content {
+
+    .ant-menu-item-title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .personal-center-content-container {
+      width: 100%;
+      height: calc(100vh - 250px);
+      display: flex;
+    }
+  }
+}
+
+</style>

src/views/User/PersonalCenter/components/UserCenterAnalysis/UserCenterAnalysis.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/User/PersonalCenter/components/UserCenterDynamic/UserCenterDynamic.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/User/PersonalCenter/components/UserCenterHome/UserCenterHome.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+6666
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/User/PersonalCenter/components/UserCenterInfo/UserCenterInfo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/User/PersonalCenter/components/UserCenterSetting/UserCenterSetting.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/User/PersonalCenter/components/UserCenterShare/UserCenterShare.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>