sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

照片墙加回搜索条件

Browse Source
This commit is contained in:
灌糖包子 2026-06-02 10:15:57 +08:00
parent 4305eb3fe6
commit 0ecb6010e2
Signed by: sookie
GPG Key ID: 67E8D0AE905C79B0
6 changed files with 105 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -31,6 +31,7 @@ declare module '@vue/runtime-core' {
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']

3
src/i18n/locales/en.ts
View File

@ -297,6 +297,9 @@ export default {
typeRequired: 'Please select type',
},
photoWall: {
searchFileName: 'Filename',
searchWidth: 'Width',
searchHeight: 'Height',
uploadTooltip: 'Image formats: {exts}, max file size 10MB.',
uploadBtn: 'Upload Image',
deleteSelected: 'Delete Selected ({count})',

3
src/i18n/locales/zh-CN.ts
View File

@ -297,6 +297,9 @@ export default {
typeRequired: '请选择类型',
},
photoWall: {
searchFileName: '文件名',
searchWidth: '宽度',
searchHeight: '高度',
uploadTooltip: '图片格式为{exts}，文件大小不超过10MB。',
uploadBtn: '上传图片',
deleteSelected: '删除选中 ({count})',

3
src/i18n/locales/zh-TW.ts
View File

@ -297,6 +297,9 @@ export default {
typeRequired: '請選擇類型',
},
photoWall: {
searchFileName: '檔案名稱',
searchWidth: '寬度',
searchHeight: '高度',
uploadTooltip: '圖片格式為{exts}，檔案大小不超過10MB。',
uploadBtn: '上傳圖片',
deleteSelected: '刪除選中 ({count})',

50
src/views/api/PhotoWall.vue
View File

@ -1,6 +1,33 @@
<template>
<div class="page-wrapper" ref="rootEl">
<!-- 搜索栏 -->
<el-form inline :model="search" @submit.prevent>
<el-form-item :label="t('api.photoWall.searchFileName')">
<el-input v-model="search.name" />
</el-form-item>
<el-form-item :label="t('api.photoWall.searchWidth')">
<el-input-number v-model="search.widthMin" :min="0" controls-position="right" step-strictly>
<template #prefix>≥</template>
<template #suffix>px</template>
</el-input-number>
<el-input-number v-model="search.widthMax" :min="0" controls-position="right" step-strictly style="margin-left: 8px;">
<template #prefix>≤</template>
<template #suffix>px</template>
</el-input-number>
</el-form-item>
<el-form-item :label="t('api.photoWall.searchHeight')">
<el-input-number v-model="search.heightMin" :min="0" controls-position="right" step-strictly>
<template #prefix>≥</template>
<template #suffix>px</template>
</el-input-number>
<el-input-number v-model="search.heightMax" :min="0" controls-position="right" step-strictly style="margin-left: 8px;">
<template #prefix>≤</template>
<template #suffix>px</template>
</el-input-number>
</el-form-item>
</el-form>
<!-- 操作栏 -->
<div class="btn-container">
<el-upload
@ -31,6 +58,8 @@
<el-button link type="primary" :disabled="!photos.length" @click="selectAll" v-if="!isAllSelected">{{ t('api.photoWall.selectAll') }}</el-button>
<el-button link type="primary" @click="clearSelect" v-else>{{ t('api.photoWall.deselectAll') }}</el-button>
<el-button link type="primary" :disabled="!photos.length" @click="invertSelect">{{ t('api.photoWall.invertSelect') }}</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search" plain>{{ t('common.search') }}</el-button>
<el-button @click="reset" icon="RefreshLeft" plain>{{ t('common.reset') }}</el-button>
</div>
</div>
@ -136,9 +165,23 @@ const isUploading = ref(false)
const allowUploadExt = ['jpg', 'jpeg', 'png']
class GalleryPage extends Page {
name?: string
widthMin?: number | null
widthMax?: number | null
heightMin?: number | null
heightMax?: number | null
constructor() { super(); this.limit = 50 }
reset() {
super.reset()
this.limit = 50
this.name = undefined
this.widthMin = null
this.widthMax = null
this.heightMin = null
this.heightMax = null
}
}
const { loading, total, search, setLoadData, pageChange, pageSizeChange } = useBaseList(new GalleryPage())
const { loading, total, search, setLoadData, loadDataBase, reset, pageChange, pageSizeChange } = useBaseList(new GalleryPage())
const cdnBase = ref('')
const selected = ref<Set<string>>(new Set())
@ -167,14 +210,13 @@ const columns = computed<PhotoWallModel[][]>(() => {
// --- 数据加载 ---
async function loadData() {
loading.value = true
selected.value = new Set()
entered.value = new Set()
try {
if (!cdnBase.value) {
cdnBase.value = await http.get('/common/config/picture_cdn')
}
const data = await http.get<any, any>('/photoWall/list', {
params: { pageNum: search.pageNum, limit: search.limit }
})
const data = await http.get<any, any>('/photoWall/list', { params: search })
total.value = data.total
photos.value = data.list as PhotoWallModel[]
previewUrls.value = photos.value.map(item => `${cdnBase.value}/${item.name}`)

63
yarn.lock
View File

@ -54,6 +54,36 @@
dependencies:
"@floating-ui/core" "^1.0.5"
"@intlify/core-base@11.4.4":
version "11.4.4"
resolved "http://192.168.102.20:28080/repository/npm/@intlify/core-base/-/core-base-11.4.4.tgz"
integrity sha512-w/vItlylrAmhebkIbVl5YY8XMCtj8Mb2g70ttxktMYuf5AuRahgEHL2iLgLIsZBIbTSgs4hkUo7ucCL0uTJvOg==
dependencies:
"@intlify/devtools-types" "11.4.4"
"@intlify/message-compiler" "11.4.4"
"@intlify/shared" "11.4.4"
"@intlify/devtools-types@11.4.4":
version "11.4.4"
resolved "http://192.168.102.20:28080/repository/npm/@intlify/devtools-types/-/devtools-types-11.4.4.tgz"
integrity sha512-PcBLmGmDQsTSVV911P8upzpcLJO1CNVYi/IH6bGnLR2nA+0L963+kXN1ZrisTEnbtw2ewN6HMMSldqzjronA0Q==
dependencies:
"@intlify/core-base" "11.4.4"
"@intlify/shared" "11.4.4"
"@intlify/message-compiler@11.4.4":
version "11.4.4"
resolved "http://192.168.102.20:28080/repository/npm/@intlify/message-compiler/-/message-compiler-11.4.4.tgz"
integrity sha512-vn0OAV9pYkJlPPmgnsSm5eAG3mL0+9C/oaded2JY9jmxBbhmUXT3TcAUY8WRgLY9Hte7lkUJKpXrVlYjMXBD2w==
dependencies:
"@intlify/shared" "11.4.4"
source-map-js "^1.0.2"
"@intlify/shared@11.4.4":
version "11.4.4"
resolved "http://192.168.102.20:28080/repository/npm/@intlify/shared/-/shared-11.4.4.tgz"
integrity sha512-QRUCHqda1U6aR14FR0vvXD4+4gj6+fm0AhAozvSuRCw0fCvrmCugWpgiR4xH2NI6s8am6N9p5OhirplsX8ZS3g==
"@jridgewell/gen-mapping@^0.3.5":
version "0.3.13"
resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz"
@ -119,10 +149,10 @@
resolved "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
"@rolldown/binding-darwin-arm64@1.0.1":
"@rolldown/binding-win32-x64-msvc@1.0.1":
version "1.0.1"
resolved "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.1.tgz"
integrity sha512-cKnAhWEsV7TPcA/5EAteDp6KcJZBQ2G+BqE7zayMMi7kMvwRsbv7WT9aOnn0WNl4SKEIf43vjS31iUPu80nzXg==
resolved "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.1.tgz"
integrity sha512-INAycaWuhlOK3wk4mRHGsdgwYWmd9cChdPdE9bwWmy6rn9VqVNYNFGhOdXrofXUxwHIncSiPNb8tNm8knDVIeQ==
"@rolldown/pluginutils@^1.0.0", "@rolldown/pluginutils@^1.0.1":
version "1.0.1"
@ -216,7 +246,7 @@
"@vue/compiler-dom" "3.5.30"
"@vue/shared" "3.5.30"
"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.6.4":
"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.4":
version "6.6.4"
resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz"
integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
@ -558,11 +588,6 @@ form-data@^4.0.5:
hasown "^2.0.2"
mime-types "^2.1.12"
fsevents@~2.3.2, fsevents@~2.3.3:
version "2.3.3"
resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
function-bind@^1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@ -715,10 +740,10 @@ less@^4.0.0, less@^4.6.4:
needle "^3.1.0"
source-map "~0.6.0"
lightningcss-darwin-arm64@1.32.0:
lightningcss-win32-x64-msvc@1.32.0:
version "1.32.0"
resolved "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz"
integrity sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==
resolved "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz"
integrity sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==
lightningcss@^1.32.0:
version "1.32.0"
@ -1024,7 +1049,7 @@ semver@^5.6.0:
resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
source-map-js@^1.2.1:
source-map-js@^1.0.2, source-map-js@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@ -1167,6 +1192,16 @@ unplugin@^1.0.1:
optionalDependencies:
fsevents "~2.3.3"
vue-i18n@^11.4.4:
version "11.4.4"
resolved "http://192.168.102.20:28080/repository/npm/vue-i18n/-/vue-i18n-11.4.4.tgz"
integrity sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==
dependencies:
"@intlify/core-base" "11.4.4"
"@intlify/devtools-types" "11.4.4"
"@intlify/shared" "11.4.4"
"@vue/devtools-api" "^6.5.0"
vue-router@^4.6.4:
version "4.6.4"
resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz"
@ -1174,7 +1209,7 @@ vue-router@^4.6.4:
dependencies:
"@vue/devtools-api" "^6.6.4"
vue@^3.2.0, vue@^3.2.25, vue@^3.3.0, vue@^3.5.0, vue@^3.5.13, vue@^3.5.30, "vue@2 || 3", vue@3.5.30:
vue@^3.0.0, vue@^3.2.0, vue@^3.2.25, vue@^3.3.0, vue@^3.5.0, vue@^3.5.13, vue@^3.5.30, "vue@2 || 3", vue@3.5.30:
version "3.5.30"
resolved "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz"
integrity sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg==