boursecu/boursecu_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
mohmdsdg
2026-07-15 12:51:05 +03:30
parent e83daaf28b
commit 87b60a17d0
12 changed files with 623 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProductUploader/IndexImageUploader.vue
+248 -51
View File
@@ -1,33 +1,84 @@
<template>
<div :class="[prefixCls]">
<div
class="w-[96px] h-[96px] overflow-hidden border border-solid border-blue-600 bg-gray-50 rounded-md p-2"
>
<div :class="[prefixCls]" class="index-image-uploader">
<div class="index-image-uploader__card">
<div class="index-image-uploader__header">
<div class="index-image-uploader__title">تصویر شاخص محصول</div>
<p class="index-image-uploader__desc">
این تصویر در لیست محصولات و صفحه جزئیات نمایش داده می‌شود.
</p>
</div>
<AUpload
class="fix-capture"
accept="image/*"
v-model:file-list="fileList"
name="file"
list-type="picture-card"
:showUploadList="true"
:multiple="false"
:max-count="1"
:action="uploadURL"
:headers="fileHeader"
:before-upload="beforeUpload"
@change="handleChange"
@preview="handlePreview"
v-if="!currentImageUrl"
class="fix-capture index-image-uploader__zone"
accept="image/*"
name="file"
:show-upload-list="false"
:multiple="false"
:max-count="1"
:action="uploadURL"
:headers="fileHeader"
:before-upload="beforeUpload"
:file-list="fileList"
@change="handleChange"
@update:file-list="onFileListUpdate"
>
<div v-if="fileList.length === 0">
<loading-outlined v-if="loading"></loading-outlined>
<BaseIcon v-else icon="vuesax-linear:add" color="#6B7280" />
<div class="text-gray-500 text-center text-xs font-normal">تصویر شاخص</div>
<div class="index-image-uploader__empty">
<div v-if="loading" class="index-image-uploader__loading">
<LoadingOutlined />
<span>در حال بارگذاری...</span>
</div>
<template v-else>
<BaseIcon icon="vuesax-linear:gallery-add" size="40" class="index-image-uploader__icon" />
<span class="index-image-uploader__cta">افزودن تصویر شاخص</span>
<span class="index-image-uploader__hint">JPG، PNG یا WEBP — حداکثر ۲۰۰ کیلوبایت</span>
<span class="index-image-uploader__hint">نسبت مربعی برای نمایش بهتر توصیه می‌شود</span>
</template>
</div>
</AUpload>
<AModal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</AModal>
<div v-else class="index-image-uploader__filled">
<img :src="currentImageUrl" alt="تصویر شاخص" class="index-image-uploader__img" />
<div class="index-image-uploader__bar">
<button
type="button"
class="index-image-uploader__btn"
@click="openPreview"
>
پیش‌نمایش
</button>
<AUpload
class="fix-capture"
accept="image/*"
name="file"
:show-upload-list="false"
:multiple="false"
:max-count="1"
:action="uploadURL"
:headers="fileHeader"
:before-upload="beforeUpload"
:file-list="fileList"
@change="handleChange"
@update:file-list="onFileListUpdate"
>
<button type="button" class="index-image-uploader__btn index-image-uploader__btn--primary">
تغییر تصویر
</button>
</AUpload>
<button
type="button"
class="index-image-uploader__btn index-image-uploader__btn--danger"
@click="removeImage"
>
حذف تصویر
</button>
</div>
</div>
</div>
<AModal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
<img alt="preview" class="w-full" :src="previewImage" />
</AModal>
</div>
</template>
@@ -45,9 +96,9 @@ import { computed, onMounted, ref } from 'vue'
const { prefixCls } = usePrefix('index-image-uploader')
const previewVisible = ref(false)
const previewImage = ref('')
const previewTitle = ref('')
const previewTitle = ref('تصویر شاخص')
const loading = ref<boolean>(false)
const loading = ref(false)
const fileHeader = {
Authorization: `Bearer ${getToken()}`
}
@@ -73,16 +124,30 @@ const fileList = computed({
}
})
const handlePreview = async (file: UploadProps['fileList'][number]) => {
previewImage.value = file.url || file.thumbUrl || file.src
previewVisible.value = true
previewTitle.value =
file.name || (file.url ? file.url.substring(file.url.lastIndexOf('/') + 1) : 'image')
const currentImageUrl = computed(() => {
const file = fileList.value?.[0] as { url?: string; thumbUrl?: string; src?: string } | undefined
return file?.url || file?.thumbUrl || file?.src || ''
})
function onFileListUpdate(value: UploadProps['fileList']) {
fileList.value = value
}
const handleCancel = () => {
function openPreview() {
previewImage.value = currentImageUrl.value
previewVisible.value = true
}
function handleCancel() {
previewVisible.value = false
previewTitle.value = ''
}
function removeImage() {
const uid = (fileList.value?.[0] as { uid?: string } | undefined)?.uid
fileList.value = []
if (uid) {
emits('delete', uid)
}
}
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
@@ -150,28 +215,160 @@ onMounted(() => {
@prefix: ~'@{prefixCls}-index-image-uploader';
.@{prefix} {
.ant-upload-rtl.ant-upload.ant-upload-select-picture-card {
margin: 0 !important;
border: none;
}
width: 100%;
}
.index-image-uploader__card {
border: 1px solid var(--admin-border, var(--ant-color-border-secondary, rgba(0, 0, 0, 0.06)));
border-radius: 12px;
background: var(--admin-bg-muted, var(--ant-color-fill-alter, rgba(0, 0, 0, 0.02)));
padding: 1rem 1.25rem;
}
.index-image-uploader__header {
margin-bottom: 1rem;
}
.index-image-uploader__title {
font-size: 0.875rem;
font-weight: 700;
color: var(--admin-text, inherit);
}
.index-image-uploader__desc {
margin: 0.35rem 0 0;
font-size: 0.75rem;
line-height: 1.6;
color: var(--admin-text-secondary, #6b7280);
}
.index-image-uploader__zone {
display: block;
width: 100%;
.ant-upload {
width: 78px !important;
height: 78px !important;
background-color: #eff6ff;
border: dashed 1px #93c5fd;
border-radius: 4px;
display: block;
width: 100%;
}
.ant-upload-list-picture-card-container {
margin: 0;
width: 78px !important;
height: 78px !important;
.ant-upload-select {
display: block !important;
width: 100% !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
}
.ant-upload-list-picture-card .ant-upload-list-item {
padding: 0;
border: none;
}
.index-image-uploader__empty {
display: flex;
width: 100%;
min-height: 12rem;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 1.5rem 1.25rem;
border: 2px dashed color-mix(in srgb, var(--admin-primary, #f5b800) 45%, var(--admin-border, #d9d9d9));
border-radius: 12px;
background: color-mix(in srgb, var(--admin-bg-muted, #f5f5f5) 85%, transparent);
color: var(--admin-text-secondary, #6b7280);
text-align: center;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
&:hover {
border-color: var(--admin-primary, #f5b800);
background: color-mix(in srgb, var(--admin-primary, #f5b800) 8%, var(--admin-bg-muted, #f5f5f5));
}
.ant-upload-list-picture-card .ant-upload-list-item-info {
border-radius: 4px;
}
.index-image-uploader__icon {
color: var(--admin-primary, #f5b800);
opacity: 0.9;
margin-bottom: 0.25rem;
}
.index-image-uploader__cta {
font-size: 0.9375rem;
font-weight: 600;
color: var(--admin-text, inherit);
}
.index-image-uploader__hint {
font-size: 0.75rem;
line-height: 1.5;
}
.index-image-uploader__loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
}
.index-image-uploader__filled {
position: relative;
width: 100%;
max-width: 22rem;
aspect-ratio: 1;
overflow: hidden;
border-radius: 12px;
border: 1px solid var(--admin-border, #d9d9d9);
background: #000;
}
.index-image-uploader__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.index-image-uploader__bar {
position: absolute;
inset: auto 0 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
.ant-upload {
display: inline-block;
}
.ant-upload-select {
display: inline-block !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
}
}
.index-image-uploader__btn {
padding: 0.4rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 8px;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 0.8125rem;
cursor: pointer;
transition: background 0.15s ease;
&--primary:hover {
background: rgba(0, 0, 0, 0.65);
}
&--danger {
border-color: rgba(255, 77, 79, 0.55);
color: #ffb3b3;
}
&--danger:hover {
background: rgba(255, 77, 79, 0.35);
}
}
</style>