SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ detail list development

Browse Source
This commit is contained in:
landaiqing
2025-02-13 18:19:39 +08:00
parent 76d72182f9
commit d5fd626242
17 changed files with 1048 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@@ -101,11 +101,13 @@ declare module 'vue' {
GradientText: typeof import('./src/components/MyUI/GradientText/GradientText.vue')['default']
Image: typeof import('./src/components/MyUI/Image/Image.vue')['default']
ImageShare: typeof import('./src/views/ImageShare/ImageShare.vue')['default']
ImageToolbar: typeof import('./src/views/Photograph/ImageToolbar/ImageToolbar.vue')['default']
ImageUpload: typeof import('./src/views/Photograph/ImageUpload/ImageUpload.vue')['default']
ImageWaterfall: typeof import('./src/components/MyUI/Waterfall/ImageWaterfall.vue')['default']
Input: typeof import('./src/components/MyUI/Input/Input.vue')['default']
InputSearch: typeof import('./src/components/MyUI/InputSearch/InputSearch.vue')['default']
LandingPage: typeof import('./src/views/Landing/LandingPage.vue')['default']
LeftOutlined: typeof import('@ant-design/icons-vue')['LeftOutlined']
List: typeof import('./src/components/MyUI/List/List.vue')['default']
LoadingBar: typeof import('./src/components/MyUI/LoadingBar/LoadingBar.vue')['default']
LoadingGraphic: typeof import('./src/components/LoadingGraphic/LoadingGraphic.vue')['default']

149
src/api/storage/index.ts
View File

@@ -33,6 +33,29 @@ export const getFaceSamplesList = (type: number) => {
hitSource: ["modify-face-sample-name", "modify-face-sample-type"],
});
};
/**
* 获取人脸样本详情列表
* @param face_id
* @param provider
* @param bucket
*/
export const getFaceSamplesDetailList = (face_id: number, provider: string, bucket: string) => {
return service.Post('/api/auth/storage/face/detail/list', {
face_id: face_id,
provider: provider,
bucket: bucket,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
},
hitSource: ["modify-face-sample-name", "modify-face-sample-type"],
});
};
/**
* 修改人脸样本名称
* @param id
@@ -103,6 +126,28 @@ export const albumListApi = (type: string, sort: boolean) => {
hitSource: ["create-album", "rename-album", "delete-album"],
});
};
/**
* 获取相册详情列表
* @param id
* @param provider
* @param bucket
*/
export const queryAlbumDetailListApi = (id: number, provider: string, bucket: string) => {
return service.Post('/api/auth/storage/album/detail/list', {
id: id,
provider: provider,
bucket: bucket,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
},
});
};
/**
* 重命名相册
@@ -161,3 +206,107 @@ export const queryAllImagesApi = (type: string, sort: boolean, provider: string,
hitSource: ["upload-file"],
});
};
/**
* 获取最近照片列表
*/
export const queryRecentImagesApi = () => {
return service.Post('/api/auth/storage/image/recent/list', {}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
},
hitSource: ["upload-file"],
});
};
/**
* 获取地址相册列表
*/
export const queryLocationAlbumApi = (provider: string, bucket: string) => {
return service.Post('/api/auth/storage/image/location/list', {
provider: provider,
bucket: bucket,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
},
hitSource: ["upload-file"],
});
};
/**
* 获取地址相册列表详情
* @param id
* @param provider
* @param bucket
*/
export const queryLocationDetailListApi = (id: number, provider: string, bucket: string) => {
return service.Post('/api/auth/storage/image/location/detail/list', {
provider: provider,
bucket: bucket,
id: id,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
},
hitSource: ["upload-file"],
});
};
/**
* 获取标签相册列表
*/
export const queryThingAlbumApi = (provider: string, bucket: string) => {
return service.Post('/api/auth/storage/image/thing/list', {
provider: provider,
bucket: bucket,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
},
hitSource: ["upload-file"],
});
};
/**
* 获取事物标签列表详情
* @param tag_name
* @param provider
* @param bucket
*/
export const queryThingDetailListApi = (tag_name: string, provider: string, bucket: string) => {
return service.Post('/api/auth/storage/image/thing/detail/list', {
provider: provider,
bucket: bucket,
tag_name: tag_name,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
},
hitSource: ["upload-file"],
});
};

2
src/components/MyUI/PhotoStack/PhotoStack.vue
View File

@@ -25,7 +25,7 @@ const imageSrc = computed(() => props.src || props.defaultSrc);
height: 180px;
vertical-align: bottom;
border: 5px #fff solid;
border-radius: 10px;
border-radius: 15px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

15
src/constant/coco_ssd_label_category.ts
View File

@@ -9,14 +9,14 @@ export const CATEGORIES = {
ELECTRONICS: {en: 'electronics', zh: '电子产品'},
EVERYDAY_ITEMS: {en: 'everyday_items', zh: '日常物品'},
HOUSEHOLD: {en: 'household', zh: '家居用品'},
HUMAN: {en: 'human', zh: '人类'},
HUMAN: {en: 'human', zh: '人物'},
} as const;
// 为每个标签提供中文名称的映射
export const LABELS = {
// Human 人类
'person': {en: 'person', zh: '人'},
'person': {en: 'person', zh: '人物'},
// Vehicles 交通工具
'bicycle': {en: 'bicycle', zh: '自行车'},
@@ -237,6 +237,17 @@ export function getLabelName(label: string, lang: 'en' | 'zh' = 'en'): string |
return labelInfo ? labelInfo[lang] : undefined;
}
// 获取标签的中文名称
export const getZhCategoryNameByEnName = (enName: string): string | undefined => {
const category = Object.values(CATEGORIES).find(cat => cat.en.toLowerCase() === enName.toLowerCase());
return category?.zh;
};
// 获取标签的中文名称
export const getZhLabelNameByEnName = (enName: string): string | undefined => {
const labelInfo = LABELS[enName.toLowerCase()];
return labelInfo?.zh;
};
// 使用示例
// console.log(getLabelName('person')); // 输出: 'person' (英文)
// console.log(getLabelName('person', 'zh')); // 输出: '人' (中文)

16
src/store/modules/uploadStore.ts
View File

@@ -2,13 +2,14 @@ import localforage from 'localforage';
interface UploadPredictResult {
isAnime: boolean;
objectArray: string[] | unknown[];
tagName: string | null;
landscape: 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | null;
isScreenshot: boolean;
topCategory: string | undefined;
exif: object | "";
width: number | null;
height: number | null;
latitude: number | null;
longitude: number | null;
}
@@ -19,13 +20,14 @@ export const useUploadStore = defineStore(
const predictResult = reactive<UploadPredictResult>({
isAnime: false,
objectArray: [],
tagName: null,
landscape: null,
isScreenshot: false,
topCategory: '',
exif: "",
width: null,
height: null,
latitude: null,
longitude: null,
});
/**
@@ -40,11 +42,13 @@ export const useUploadStore = defineStore(
*/
function clearPredictResult() {
predictResult.isAnime = false;
predictResult.objectArray = [];
predictResult.tagName = null;
predictResult.landscape = null;
predictResult.isScreenshot = false;
predictResult.topCategory = '';
predictResult.exif = "";
predictResult.width = null;
predictResult.height = null;
predictResult.latitude = null;
}

87
src/views/Album/LocationAlbum/LocationAlbumDetail.vue
View File

@@ -1,11 +1,92 @@
<template>
<div class="location-album-detail">
<div class="location-album-detail-header">
<div class="location-detail-content-nav">
<AButton size="large" type="text" class="location-detail-content-nav-title">地点</AButton>
<span class="location-detail-content-nav-separator"> > </span>
<span class="location-detail-content-nav-name">乌鲁木齐</span>
</div>
</div>
<div class="location-album-detail-info">
<span style="font-size: 14px;color: #999999">共12张照片</span>
</div>
<div class="location-album-detail-list">
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.location-album-detail {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
gap: 10px;
position: relative;
<template>
.location-album-detail-header {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
border-bottom: 1px solid #e2e2e2;
</template>
.location-detail-content-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 1000%;
height: 100%;
gap: 10px;
<style scoped lang="less">
.location-detail-content-nav-title {
font-size: 20px;
color: rgb(59, 117, 255);
display: flex;
align-items: center;
justify-content: center;
}
.location-detail-content-nav-separator {
font-size: 20px;
font-weight: bold;
color: rgba(90, 90, 90, 0.62);
}
.location-detail-content-nav-name {
font-size: 20px;
color: #333333;
}
}
}
.location-album-detail-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-left: 15px;
width: 100%;
height: 22px;
}
.location-album-detail-list {
width: 99%;
height: 100%;
margin-left: 5px;
background: #e2e2e2;
}
}
</style>

135
src/views/Album/LocationAlbum/LocationAlbumList.vue
View File

@@ -2,27 +2,49 @@
<div class="location-album">
<div class="location-album-header">
<AButton type="link" size="large" class="location-album-button">地点</AButton>
<span class="location-album-count">你一共在2个地点留下足迹</span>
<span class="location-album-count">你一共在{{ locationAlbums ? locationAlbums.length : 0 }}个地点留下足迹</span>
</div>
<div class="location-album-content">
<div class="location-album-container" @click="handleClick">
<img class="background-image" src="/test/5.png" alt=""/>
<div class="overlay">
<span>乌鲁木齐市</span>
<span class="location-album-overlay-count">---</span>
<span class="location-album-overlay-count">16张照片</span>
<div class="location-album-content-item" v-for="(item, index) in locationAlbums" :key="index">
<span class="location-album-description">{{ item.location }}</span>
<div class="location-album-location-list">
<div class="location-album-container" @click="handleClick(itemList.id)"
v-for="(itemList, indexItem) in item.list" :key="indexItem">
<img class="background-image" :src="itemList.cover_image" :alt="itemList.city"/>
<div class="overlay">
<span>{{ itemList.city }}</span>
<span class="location-album-overlay-count">---</span>
<span class="location-album-overlay-count">{{ itemList.total }}张照片</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {queryLocationAlbumApi} from "@/api/storage";
const route = useRoute();
const router = useRouter();
function handleClick() {
router.push({ path: route.path + '/1' });
function handleClick(id: number) {
router.push({path: route.path + `/${id}`});
}
const locationAlbums = ref<any[]>([]);
async function getLocationAlbums(provider: string, bucket: string) {
const res: any = await queryLocationAlbumApi(provider, bucket);
console.log(res);
if (res && res.code === 200) {
locationAlbums.value = res.data.records;
}
}
onMounted(() => {
getLocationAlbums("ali", "schisandra-album");
});
</script>
<style scoped lang="scss">
.location-album {
@@ -61,59 +83,84 @@ function handleClick() {
.location-album-content {
display: flex;
flex-direction: row;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
height: 100%;
overflow-y: auto;
padding-top: 20px;
padding-left: 25px;
gap: 20px;
.location-album-container {
width: 180px;
height: 180px;
position: relative;
display: inline-block;
background-color: #f5f5f5;
.location-album-content-item {
display: flex;
flex-direction: column;
.background-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
.location-album-description {
font-size: 13px;
color: #333;
padding-bottom: 10px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2); /* 黑色半透明 */
backdrop-filter: blur(2px); /* 背景虚化 */
.location-album-location-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
gap: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
.location-album-overlay-count {
font-size: 12px;
color: white;
.location-album-container {
width: 180px;
height: 180px;
position: relative;
display: inline-block;
background-color: #f5f5f5;
.background-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2); /* 黑色半透明 */
backdrop-filter: blur(2px); /* 背景虚化 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
gap: 0;
.location-album-overlay-count {
font-size: 12px;
color: white;
}
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1); /* 黑色半透明 */
backdrop-filter: blur(0px); /* 背景虚化 */
cursor: pointer;
}
}
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1); /* 黑色半透明 */
backdrop-filter: blur(0px); /* 背景虚化 */
cursor: pointer;
}
}
.location-album-container:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

90
src/views/Album/PeopleAlbum/PeopleAlbumDetail.vue
View File

@@ -1,9 +1,97 @@
<template>
<div class="people-album-detail">
<div class="people-album-detail-header">
<div class="people-album-detail-nav">
<AButton type="text" size="large" class="people-album-detail-nav-button">
<template #icon>
<LeftOutlined style="font-size: 13px;font-weight: bolder"/>
</template>
返回
</AButton>
</div>
<div class="people-album-detail-toolbar">
<AAvatar shape="circle" size="default"></AAvatar>
<span style="font-size: 14px;color: #333333">张皓扬</span>
</div>
</div>
<div class="people-album-detail-info">
<span style="font-size: 14px;color: #999999">共12张照片</span>
</div>
<div class="people-album-detail-list">
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
<style scoped lang="scss">
.people-album-detail {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
height: 100%;
gap: 10px;
position: relative;
.people-album-detail-header {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
border-bottom: 1px solid #e2e2e2;
.people-album-detail-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 8%;
height: 100%;
.people-album-detail-nav-button {
font-size: 20px;
color: rgb(59, 117, 255);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.people-album-detail-toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 72%;
height: 100%;
}
}
.people-album-detail-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-left: 10px;
width: 100%;
height: 22px;
}
.people-album-detail-list {
width: 99%;
height: 100%;
margin-left: 10px;
background: #e2e2e2;
}
}
</style>

12
src/views/Album/PeopleAlbum/PeopleAlbumList.vue
View File

@@ -55,6 +55,7 @@
<CheckCard
v-for="(item, index) in faceList"
:key="index"
@click="handleClick(item.id)"
class="photo-item"
margin="0"
border-radius="0"
@@ -208,6 +209,17 @@ async function hiddenFace() {
}
}
const route = useRoute();
const router = useRouter();
/**
* 点击人物跳转到详情页
* @param id
*/
function handleClick(id: number) {
router.push({path: route.path + `/${id}`});
}
onMounted(() => {
getFaceList();
});

214
src/views/Album/Phoalbum/PhoalbumDetail.vue
View File

@@ -1,9 +1,219 @@
<template>
<div class="phoalbum-detail">
<div class="phoalbum-detail-header">
<AButton type="primary" shape="round" size="middle">
<template #icon>
<PlusSquareOutlined/>
</template>
上传
</AButton>
<AButton type="default" shape="round" size="middle">
<template #icon>
<PlusSquareOutlined/>
</template>
重命名
</AButton>
<AButton type="default" shape="round" size="middle">
<template #icon>
<PlusSquareOutlined/>
</template>
删除相册
</AButton>
<AButton type="default" shape="round" size="middle">
<template #icon>
<PlusSquareOutlined/>
</template>
下载相册
</AButton>
</div>
<ImageToolbar :selected="selected"/>
<div class="phoalbum-detail-content">
<div class="phoalbum-detail-content-nav">
<div class="phoalbum-detail-content-nav-left">
<AButton type="text" size="large" class="phoalbum-detail-content-nav-title" @click="goBack()">全部相册
</AButton>
<span class="phoalbum-detail-content-nav-separator"> > </span>
<span class="phoalbum-detail-content-nav-name">网盘导入</span>
</div>
<div class="phoalbum-detail-content-nav-right">
<span class="phoalbum-detail-content-nav-date">共15张照片,1个视频，创建于2025年1月1日</span>
</div>
</div>
<div class="phoalbum-detail-content-desc">
<span>描述：</span>
<span>相册描述</span>
</div>
<div class="phoalbum-detail-content-list">
<div style="width:100%;height:100%;">
<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="selected"
:showHoverCircle="true"
:iconSize="20"
:showSelectedEffect="true"
:value="item.id">
<AImage :src="item.url"
:alt="item.file_name"
:key="index"
style="height: 200px"
:previewMask="false"
fallback="data:image/png;base64,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"
loading="lazy"/>
</CheckCard>
</template>
</Vue3JustifiedLayout>
</AImagePreviewGroup>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Vue3JustifiedLayout from "vue3-justified-layout";
import 'vue3-justified-layout/dist/style.css';
import {queryAlbumDetailListApi} from "@/api/storage";
import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
const selected = ref<(string | number)[]>([]);
const albumList = ref<any[]>([]);
const route = useRoute();
const router = useRouter();
const options = reactive({
targetRowHeight: 200 // 高度
});
async function getAlbumList(id: number) {
const res: any = await queryAlbumDetailListApi(id, "ali", "schisandra-album");
if (res && res.code === 200) {
albumList.value = res.data.records;
}
}
onMounted(() => {
const idParam = route.params.id;
const albumId = Array.isArray(idParam) ? idParam[0] : idParam;
getAlbumList(parseInt(albumId, 10));
});
/**
* 返回上一页
*/
function goBack(): void {
router.go(-1);
}
</script>
<style scoped lang="less">
<style scoped lang="scss">
.phoalbum-detail {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
position: relative;
.phoalbum-detail-header {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
border-bottom: 1px solid #e2e2e2;
}
.phoalbum-detail-content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
gap: 10px;
height: calc(100% - 65px);
.phoalbum-detail-content-nav {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
width: 100%;
height: 40px;
.phoalbum-detail-content-nav-left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 50%;
height: 100%;
gap: 5px;
.phoalbum-detail-content-nav-title {
font-size: 20px;
color: rgb(59, 117, 255);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.phoalbum-detail-content-nav-separator {
font-size: 20px;
font-weight: bold;
color: rgba(90, 90, 90, 0.62);
}
.phoalbum-detail-content-nav-name {
font-size: 20px;
color: #333333;
}
}
.phoalbum-detail-content-nav-right {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
width: 50%;
height: 100%;
.phoalbum-detail-content-nav-date {
font-size: 14px;
color: #999999;
}
}
}
.phoalbum-detail-content-desc {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 15px;
font-size: 13px;
color: #333333;
padding-left: 10px;
}
.phoalbum-detail-content-list {
width: 100%;
//height: 100%;
margin-top: 10px;
}
}
}
</style>

16
src/views/Album/Phoalbum/PhoalbumList.vue
View File

@@ -60,6 +60,7 @@
<div class="phoalbum-item"
v-for="(album, index) in albumList"
:key="album.id"
@click.prevent="handleClick(album.id)"
@mouseover="isHovered = index"
@mouseleave="isHovered = null">
<PhotoStack :src="album.cover_image" :default-src="default_cover"/>
@@ -69,8 +70,8 @@
</div>
<div class="phoalbum-item-operation"
:class="{ 'fade-in': isHovered === index, 'fade-out': isHovered !== index }">
<ADropdown trigger="click">
<AButton type="text" shape="circle" size="small">
<ADropdown trigger="click" @click.stop>
<AButton type="text" shape="circle" size="small" @click.prevent>
<template #icon>
<AAvatar shape="circle" size="small" :src="more"/>
</template>
@@ -208,6 +209,17 @@ async function deleteAlbum(id: number) {
}
}
const route = useRoute();
const router = useRouter();
/**
* 点击相册跳转到详情页
* @param id
*/
function handleClick(id: number) {
router.push({path: route.path + `/${id}`});
}
onMounted(() => {
getAlbumList("0", selecetedKey.value);
});

87
src/views/Album/ThingAlbum/ThingAlbumDetail.vue
View File

@@ -1,11 +1,92 @@
<template>
<div class="thing-album-detail">
<div class="thing-album-detail-header">
<div class="thing-detail-content-nav">
<AButton size="large" type="text" class="thing-detail-content-nav-title">人物</AButton>
<span class="thing-detail-content-nav-separator"> > </span>
<span class="thing-detail-content-nav-name">人物</span>
</div>
</div>
<div class="thing-album-detail-info">
<span style="font-size: 14px;color: #999999">共12张照片</span>
</div>
<div class="thing-album-detail-list">
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.thing-album-detail {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
gap: 10px;
position: relative;
<template>
.thing-album-detail-header {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
border-bottom: 1px solid #e2e2e2;
</template>
.thing-detail-content-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 1000%;
height: 100%;
gap: 10px;
<style scoped lang="less">
.thing-detail-content-nav-title {
font-size: 20px;
color: rgb(59, 117, 255);
display: flex;
align-items: center;
justify-content: center;
}
.thing-detail-content-nav-separator {
font-size: 20px;
font-weight: bold;
color: rgba(90, 90, 90, 0.62);
}
.thing-detail-content-nav-name {
font-size: 20px;
color: #333333;
}
}
}
.thing-album-detail-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-left: 15px;
width: 100%;
height: 22px;
}
.thing-album-detail-list {
width: 99%;
height: 100%;
margin-left: 5px;
background: #e2e2e2;
}
}
</style>

146
src/views/Album/ThingAlbum/ThingAlbumList.vue
View File

@@ -6,13 +6,18 @@
</div>
<div class="thing-album-content">
<span class="thing-album-title">动物</span>
<div class="thing-album-container">
<img class="background-image" src="/test/7.png" alt=""/>
<div class="overlay">
<span>猫</span>
<span class="thing-album-overlay-count">---</span>
<span class="thing-album-overlay-count">16张照片</span>
<div class="thing-album-content-item" v-for="(item, index) in thingAlbumList" :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"
@click="handleClick(tags.tag_name)">
<img class="background-image" :src="tags.cover_image" :alt="tags.tag_name"/>
<div class="overlay">
<span>{{ getZhLabelNameByEnName(tags.tag_name) }}</span>
<span class="thing-album-overlay-count">---</span>
<span class="thing-album-overlay-count">{{ tags.tag_count }}张照片</span>
</div>
</div>
</div>
</div>
</div>
@@ -20,6 +25,35 @@
</template>
<script setup lang="ts">
import {queryThingAlbumApi} from "@/api/storage";
import {getZhCategoryNameByEnName, getZhLabelNameByEnName} from "@/constant/coco_ssd_label_category.ts";
const thingAlbumList = ref<any[]>([]);
async function getThingAlbumList(provider: string, bucket: string) {
const res: any = await queryThingAlbumApi(provider, bucket);
console.log(res);
if (res && res.code === 200) {
thingAlbumList.value = res.data.records;
}
}
const route = useRoute();
const router = useRouter();
/**
* 点击事件
* @param id
*/
function handleClick(id: string) {
router.push({path: route.path + `/${id}`});
}
onMounted(() => {
getThingAlbumList("ali", 'schisandra-album');
});
</script>
<style scoped lang="scss">
.thing-album {
@@ -63,53 +97,71 @@
padding-left: 25px;
gap: 20px;
.thing-album-title {
font-size: 14px;
color: #999;
}
.thing-album-content-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
.thing-album-container {
width: 180px;
height: 180px;
position: relative;
display: inline-block;
background-color: #f5f5f5;
.background-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
.thing-album-title {
font-size: 14px;
color: #999;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2); /* 黑色半透明 */
backdrop-filter: blur(2px); /* 背景虚化 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
gap: 0;
.thing-album-wrapper {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
.thing-album-overlay-count {
font-size: 12px;
color: white;
.thing-album-container {
width: 180px;
height: 180px;
position: relative;
display: inline-block;
background-color: #f5f5f5;
.background-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2); /* 黑色半透明 */
backdrop-filter: blur(2px); /* 背景虚化 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
gap: 0;
.thing-album-overlay-count {
font-size: 12px;
color: white;
}
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1); /* 黑色半透明 */
backdrop-filter: blur(0px); /* 背景虚化 */
cursor: pointer;
}
}
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1); /* 黑色半透明 */
backdrop-filter: blur(0px); /* 背景虚化 */
cursor: pointer;
}
}
.thing-album-container:hover {

121
src/views/Photograph/AllPhoto/AllPhoto.vue
View File

@@ -14,49 +14,7 @@
创建相册
</AButton>
</div>
<transition name="slide-fade">
<div v-show="selected.length !== 0" class="photo-toolbar-header">
<div class="photo-toolbar-left">
<AButton type="text" shape="circle" size="large" class="photo-toolbar-btn">
<template #icon>
<CloseOutlined class="photo-toolbar-icon"/>
</template>
</AButton>
<span style="font-size: 16px;font-weight: bold">
已选择 {{ selected.length }} 张照片
</span>
<AButton type="text" shape="default" class="photo-toolbar-btn" size="middle">
全选
</AButton>
</div>
<div class="photo-toolbar-right">
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<PlusSquareOutlined class="photo-toolbar-icon"/>
</template>
添加到
</AButton>
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<DownloadOutlined class="photo-toolbar-icon"/>
</template>
下载原图
</AButton>
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<ShareAltOutlined class="photo-toolbar-icon"/>
</template>
分享
</AButton>
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<DeleteOutlined class="photo-toolbar-icon"/>
</template>
删除
</AButton>
</div>
</div>
</transition>
<image-toolbar :selected="selected" />
<div class="photo-list">
<ATabs size="small" :tabBarGutter="50" type="line" tabPosition="top" :tabBarStyle="{position:'unset'}"
style="width: 99%;">
@@ -66,7 +24,7 @@
<ATabPane key="image" tab="全部">
<div style="width:100%;height:100%;">
<div v-for="(itemList, index) in images" :key="index">
<span style="margin-left: 10px;font-size: 14px">{{ itemList.date }}</span>
<span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
<AImagePreviewGroup>
<Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
<template #default="{ item }">
@@ -116,6 +74,7 @@ import 'vue3-justified-layout/dist/style.css';
import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
import useStore from "@/store";
import {queryAllImagesApi} from "@/api/storage";
import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
const selected = ref<(string | number)[]>([]);
@@ -132,7 +91,6 @@ const images = ref<any[]>([]);
async function getAllImages() {
const res: any = await queryAllImagesApi("image", false, "ali", "schisandra-album");
if (res && res.code === 200) {
console.log(res);
images.value = res.data.records;
}
}
@@ -164,60 +122,6 @@ onMounted(() => {
}
.photo-toolbar-header {
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;
.photo-toolbar-left {
width: 50%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 20px;
}
.photo-toolbar-right {
height: 100%;
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 30px;
}
.photo-toolbar-icon {
font-size: 20px;
font-weight: bold;
color: #fff;
}
.photo-toolbar-btn {
font-size: 16px;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
}
.photo-list {
display: flex;
flex-direction: column;
@@ -228,25 +132,6 @@ onMounted(() => {
}
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all 0.5s ease;
}
.slide-fade-enter-from, .slide-fade-leave-to { /* .slide-fade-leave-active 在离开之前 */
transform: translateY(-20px);
opacity: 0;
}
.slide-fade-enter-from {
transform: translateY(-30px);
opacity: 0;
}
.slide-fade-enter-to {
transform: translateY(0);
opacity: 1;
}
.photo-item:hover {
transition: all 0.3s ease-in-out, transform 0.3s ease-in-out;
//transform: scale(0.99);

130
src/views/Photograph/ImageToolbar/ImageToolbar.vue Normal file
View File

@@ -0,0 +1,130 @@
<script setup lang="ts">
const props = defineProps({
selected: {
type: Array,
default: () => []
}
});
</script>
<template>
<transition name="slide-fade">
<div v-show="props.selected.length > 0" class="photo-toolbar-header">
<div class="photo-toolbar-left">
<AButton type="text" shape="circle" size="large" class="photo-toolbar-btn">
<template #icon>
<CloseOutlined class="photo-toolbar-icon"/>
</template>
</AButton>
<span style="font-size: 16px;font-weight: bold">
已选择 {{ props.selected.length }} 张照片
</span>
<AButton type="text" shape="default" class="photo-toolbar-btn" size="middle">
全选
</AButton>
</div>
<div class="photo-toolbar-right">
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<PlusSquareOutlined class="photo-toolbar-icon"/>
</template>
添加到
</AButton>
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<DownloadOutlined class="photo-toolbar-icon"/>
</template>
下载原图
</AButton>
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<ShareAltOutlined class="photo-toolbar-icon"/>
</template>
分享
</AButton>
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<DeleteOutlined class="photo-toolbar-icon"/>
</template>
删除
</AButton>
</div>
</div>
</transition>
</template>
<style scoped lang="scss">
.photo-toolbar-header {
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;
.photo-toolbar-left {
width: 50%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 20px;
}
.photo-toolbar-right {
height: 100%;
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 30px;
}
.photo-toolbar-icon {
font-size: 20px;
font-weight: bold;
color: #fff;
}
.photo-toolbar-btn {
font-size: 16px;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all 0.5s ease;
}
.slide-fade-enter-from, .slide-fade-leave-to { /* .slide-fade-leave-active 在离开之前 */
transform: translateY(-20px);
opacity: 0;
}
.slide-fade-enter-from {
transform: translateY(-30px);
opacity: 0;
}
.slide-fade-enter-to {
transform: translateY(0);
opacity: 1;
}
</style>

23
src/views/Photograph/ImageUpload/ImageUpload.vue
View File

@@ -145,9 +145,10 @@ async function beforeUpload(file: File, fileList: File[]) {
}
// 提取 EXIF 数据
const exifData = await extractAllExifData(file);
if (exifData) {
upload.predictResult.exif = exifData ? exifData : "";
const gpsData = await extractGPSExifData(file);
if (gpsData) {
upload.predictResult.longitude = gpsData.longitude;
upload.predictResult.latitude = gpsData.latitude;
}
// 判断是否为截图
@@ -177,13 +178,13 @@ async function beforeUpload(file: File, fileList: File[]) {
// 如果只有一个结果，直接取第一个
if (cocoResults.length === 1) {
upload.predictResult.topCategory = getCategoryByLabel(cocoResults[0].class);
upload.predictResult.tagName = cocoResults[0].class;
} else {
// 多个结果时，按 score 排序，取置信度最高的结果
const sortedResults = cocoResults.sort((a, b) => b.score - a.score);
upload.predictResult.topCategory = getCategoryByLabel(sortedResults[0].class);
upload.predictResult.tagName = sortedResults[0].class;
}
const classSet = new Set(cocoResults.map(result => result.class));
upload.predictResult.objectArray = Array.from(classSet);
}
upload.predictResult.landscape = landscape as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | null;
@@ -268,7 +269,7 @@ function removeFile(file: any) {
* @param {File} file - 图片文件
* @returns {Promise<Object|null>} - 返回所有 EXIF 数据或 null（如果格式不支持或提取失败）
*/
async function extractAllExifData(file) {
async function extractGPSExifData(file) {
const supportedFormats = ['image/jpeg', 'image/tiff', 'image/iiq', 'image/heif', 'image/heic', 'image/avif', 'image/png'];
// 判断文件格式是否支持
@@ -276,11 +277,11 @@ async function extractAllExifData(file) {
return null;
}
try {
// 提取所有 EXIF 数据
return await exifr.parse(file, {ifd0: false, exif: true} as any);
} catch (error) {
console.error("提取 EXIF 数据失败:", error);
// 提取GPS EXIF 数据
let {latitude, longitude} = await exifr.gps(file);
if (latitude && longitude) {
return {latitude, longitude};
} else {
return null;
}
}

120
src/views/Photograph/RecentUpload/RecentUpload.vue
View File

@@ -14,99 +14,65 @@
创建相册
</AButton>
</div>
<image-toolbar :selected="selected" />
<div class="photo-list">
<div style="width:100%;height:100%;" v-if="images.length !== 0">
<span style="margin-left: 10px;font-size: 13px">2024年12月27日 星期日</span>
<AImagePreviewGroup>
<Waterfall :list="images"
:backgroundColor="`transparent`"
:width="400"
:gutter="15"
align="left"
:lazyload="true"
:animationDelay="300"
:animationDuration="1000"
:animationCancel="false"
:hasAroundGutter="true"
rowKey="id"
:imgSelector="'src'"
:loadProps="loadProps"
:breakpoints="breakpoints">
<template #default="{ item, url, index }">
<CheckCard :key="index"
margin="0"
border-radius="0"
v-model="selected"
:showHoverCircle="true"
:iconSize="20"
:value="url">
<AImage :src="url"
:alt="item.title"
:key="index"
:previewMask="false"
loading="lazy"/>
</CheckCard>
</template>
</Waterfall>
</AImagePreviewGroup>
<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.url"
:alt="item.file_name"
:key="index"
style="height: 200px"
:previewMask="false"
loading="lazy"/>
</CheckCard>
</template>
</Vue3JustifiedLayout>
</AImagePreviewGroup>
</div>
</div>
</div>
<ImageUpload/>
</div>
</template>
<script setup lang="ts">
import {Waterfall} from 'vue-waterfall-plugin-next';
import 'vue-waterfall-plugin-next/dist/style.css';
import loading from '@/assets/gif/loading.gif';
import error from '@/assets/svgs/no-image.svg';
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 {queryRecentImagesApi} from "@/api/storage";
import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
const upload = useStore().upload;
const selected = ref<(string | number)[]>([]);
const breakpoints = reactive({
breakpoints: {
1200: {
// 当屏幕宽度小于等于1200
rowPerView: 4,
},
800: {
// 当屏幕宽度小于等于800
rowPerView: 3,
},
500: {
// 当屏幕宽度小于等于500
rowPerView: 2,
},
},
});
const loadProps = reactive({
loading,
error,
ratioCalculator: (_width: number, _height: number) => {
// 我设置了最小宽高比
const minRatio = 3 / 4;
const maxRatio = 4 / 3;
return Math.random() > 0.5 ? minRatio : maxRatio;
},
});
const upload = useStore().upload;
const images = ref<any[]>([]);
const options = reactive({
targetRowHeight: 200 // 高度
});
function loadImages() {
for (let i = 1; i < 10; i++) {
images.value.push({
title: `image-${i}`,
link: '',
src: `https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/${i}.jpg`,
tag: '全部',
date: '2022-01-01',
});
const getRecentImages = async () => {
const res: any = await queryRecentImagesApi();
console.log(res);
if (res && res.code === 200) {
images.value = res.data.records;
}
}
};
onBeforeMount(() => { // 组件已完成响应式状态设置，但未创建DOM节点
loadImages();
onMounted(() => {
getRecentImages();
});
</script>