added function for trigger in admin

2026-07-06 19:06:57 +03:30
parent c380fc89d3
commit 6756641efd
14 changed files with 1072 additions and 442 deletions
@@ -0,0 +1,227 @@
+<template>
+  <div class="banner-image-upload">
+    <a-upload
+      v-if="!imageUrl"
+      class="banner-image-upload__zone"
+      name="file"
+      accept="image/*"
+      :show-upload-list="false"
+      :action="uploadURL"
+      :headers="fileHeader"
+      @change="onChange"
+    >
+      <div class="banner-image-upload__empty">
+        <div v-if="loading" class="banner-image-upload__loading">
+          <LoadingOutlined />
+          <span>در حال آپلود...</span>
+        </div>
+        <template v-else>
+          <BaseIcon icon="vuesax-linear:gallery-add" size="40" class="banner-image-upload__icon" />
+          <span class="banner-image-upload__cta">افزودن تصویر بنر</span>
+          <span class="banner-image-upload__hint">کلیک کنید — تصویر افقی با نسبت ۱۶:۹</span>
+        </template>
+      </div>
+    </a-upload>
+
+    <div v-else class="banner-image-upload__filled">
+      <img :src="imageUrl" alt="" class="banner-image-upload__img" />
+      <div class="banner-image-upload__bar">
+        <a-upload
+          name="file"
+          accept="image/*"
+          :show-upload-list="false"
+          :action="uploadURL"
+          :headers="fileHeader"
+          @change="onChange"
+        >
+          <button type="button" class="banner-image-upload__btn banner-image-upload__btn--primary">
+            تغییر تصویر
+          </button>
+        </a-upload>
+        <button
+          type="button"
+          class="banner-image-upload__btn banner-image-upload__btn--danger"
+          @click="emit('remove')"
+        >
+          حذف تصویر
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LoadingOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import { uploadURL } from '@root/config'
+import { getToken } from '@/utils'
+import { normalizeUploadFileResponse } from '@/utils/file'
+
+defineProps<{
+  imageUrl?: string | null
+}>()
+
+const emit = defineEmits<{
+  upload: [url: string]
+  remove: []
+}>()
+
+const loading = ref(false)
+
+const fileHeader = computed(() => ({
+  Authorization: `Bearer ${getToken()}`,
+}))
+
+function onChange({ file }: { file: { status?: string; response?: unknown } }) {
+  if (file.status === 'uploading') {
+    loading.value = true
+    return
+  }
+
+  if (file.status === 'error') {
+    loading.value = false
+    message.error('خطا در آپلود تصویر')
+    return
+  }
+
+  if (file.status === 'done') {
+    loading.value = false
+    const fileResource = normalizeUploadFileResponse(file.response)
+    if (!fileResource?.full_src) {
+      message.error('خطا در ساخت آدرس تصویر')
+      return
+    }
+    emit('upload', fileResource.full_src)
+    message.success('تصویر با موفقیت آپلود شد')
+  }
+}
+</script>
+
+<style scoped lang="less">
+.banner-image-upload {
+  width: 100%;
+  height: 100%;
+}
+
+.banner-image-upload__zone {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  :deep(.ant-upload) {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  :deep(.ant-upload-select) {
+    display: block !important;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0 !important;
+    border: none !important;
+    background: transparent !important;
+  }
+}
+
+.banner-image-upload__empty {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 10rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1.25rem;
+  border: 2px dashed color-mix(in srgb, var(--admin-primary, #f5b800) 45%, var(--admin-border));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--admin-bg-muted) 85%, transparent);
+  color: var(--admin-text-secondary);
+  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));
+  }
+}
+
+.banner-image-upload__icon {
+  color: var(--admin-primary, #f5b800);
+  opacity: 0.9;
+}
+
+.banner-image-upload__cta {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--admin-text);
+}
+
+.banner-image-upload__hint {
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.banner-image-upload__loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+}
+
+.banner-image-upload__filled {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 10rem;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid var(--admin-border);
+  background: #000;
+}
+
+.banner-image-upload__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.banner-image-upload__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);
+}
+
+.banner-image-upload__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>