added more help

2026-07-06 18:30:21 +03:30
parent 53ccb2fc30
commit 232422d182
8 changed files with 226 additions and 61 deletions
@@ -0,0 +1,25 @@
+<template>
+  <p v-if="text" class="admin-field-help" :class="rootClass">{{ text }}</p>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    text?: string
+    rootClass?: string
+  }>(),
+  {
+    text: '',
+    rootClass: '',
+  }
+)
+</script>
+
+<style scoped lang="less">
+.admin-field-help {
+  margin: 0;
+  font-size: 11px;
+  color: var(--admin-text-secondary);
+  line-height: 1.5;
+}
+</style>
@@ -1,84 +1,124 @@
 <template>
  <div class="p-4">
-    <BaseButton size="small" type="primary" @click="addRow">
-      <span> افزودن بنر</span>
-      <BaseIcon icon="vuesax-linear:add" size="17"/>
-    </BaseButton>
-    <div class="flex my-4 flex-col gap-2">
-      <div class="grid md:grid-cols-3 grid-cols-1   gap-4 overflow-y-scroll max-h-52vh md:max-h-75vh " >
-        <Card v-for="(item, index) in benefitsList">
-          <div class="grid grid-cols-1 gap-4 mt-3">
+    <AdminFieldHelp :text="bannersPageIntro" root-class="mb-4 text-xs md:text-sm" />

-            <div class="flex items-center justify-between gap-2 my-2">
-              <div class="text">(16 در 9)</div>
-              <div class="flex  items-center gap-2">
-                <span>نمایش:</span>
-                <a-switch v-model:checked="item.show"/>
+    <BaseButton size="small" type="primary" @click="addRow">
+      <span>افزودن بنر</span>
+      <BaseIcon icon="vuesax-linear:add" size="17" />
+    </BaseButton>
+    <AdminFieldHelp
+      text="هر بار «افزودن بنر» یک اسلاید جدید به انتهای لیست اضافه می‌کند."
+      root-class="mt-2"
+    />
+
+    <div class="my-4 flex flex-col gap-2">
+      <div
+        class="grid max-h-52vh grid-cols-1 gap-4 overflow-y-scroll md:max-h-75vh md:grid-cols-3"
+      >
+        <Card v-for="(item, index) in benefitsList" :key="index">
+          <div class="mt-3 grid grid-cols-1 gap-4">
+            <div class="my-2 flex items-center justify-between gap-2">
+              <div class="flex flex-col gap-0.5">
+                <div class="text-sm font-medium">نسبت تصویر ۱۶:۹</div>
+                <AdminFieldHelp :text="bannersAspectHelp" />
+              </div>
+              <div class="flex shrink-0 flex-col items-end gap-0.5">
+                <div class="flex items-center gap-2">
+                  <span>نمایش:</span>
+                  <a-switch v-model:checked="item.show" />
+                </div>
+                <AdminFieldHelp :text="bannersShowHelp" root-class="text-left" />
              </div>
            </div>
+
            <div class="text-center">
+              <AdminFieldHelp :text="bannersImageHelp" root-class="mb-2 text-center" />
              <UploadPic
-                  :compressed="true"
-                  @upload="handleUpload($event, index, 'icon')"
-                  @remove="handelRemoveFile(index, 'icon')"
-                  :imageUrl="item.icon"
+                :compressed="true"
+                @upload="handleUpload($event, index, 'icon')"
+                @remove="handelRemoveFile(index, 'icon')"
+                :imageUrl="item.icon"
              />
            </div>
          </div>
-          <div class="flex items-center justify-between ">
-            <div class="w-full gap-1 flex flex-col ">
-              <div>
-                انتخاب رویداد (پس از کلیک):
-              </div>
-              <BasicSelect v-model:value="item.typeClick" :items="typeList" value-name="lable" key-name="value"></BasicSelect>
-            </div>

+          <div class="mt-3 flex flex-col gap-1">
+            <div class="text-sm font-medium">انتخاب رویداد (پس از کلیک):</div>
+            <AdminFieldHelp :text="bannersEventHelp" />
+            <BasicSelect
+              v-model:value="item.typeClick"
+              :items="typeList"
+              value-name="lable"
+              key-name="value"
+            />
+            <AdminFieldHelp v-if="item.typeClick === 'link'" :text="bannersLinkHelp" />
+            <AdminFieldHelp v-else-if="item.typeClick === 'modal'" :text="bannersModalHelp" />
+            <AdminFieldHelp v-else-if="item.typeClick === 'share'" :text="bannersShareHelp" />
+            <AdminFieldHelp v-else :text="bannersNoEventHelp" />
          </div>
-          <div v-if="item.typeClick=='link'" class="flex flex-col gap-1 mt-1">
-            <div>آدرس لینک</div>
-            <BasicInput v-model:value="item.link"></BasicInput>
+
+          <div v-if="item.typeClick == 'link'" class="mt-2 flex flex-col gap-1">
+            <div class="text-sm font-medium">آدرس لینک</div>
+            <BasicInput v-model:value="item.link" placeholder="https://..." />
          </div>
-          <div class="flex flex-col gap-1" v-if="item.typeClick=='modal'">
-            <div>متن پیام</div>
+
+          <div v-if="item.typeClick == 'modal'" class="mt-2 flex flex-col gap-1">
+            <div class="text-sm font-medium">متن پیام</div>
            <QuillEditor
-                placeholder=" متن پیام"
-                v-model:content="item.modalText"
-                toolbar="full"
-                theme="snow"
-                content-type="html"
-                class="editor-box2"
+              placeholder="متن پیام"
+              v-model:content="item.modalText"
+              toolbar="full"
+              theme="snow"
+              content-type="html"
+              class="editor-box2"
            />
          </div>
        </Card>
      </div>
    </div>
-    <div class="text-left mt-5 md:mt-0">
+
+    <div class="mt-5 text-left md:mt-0">
      <BaseButton type="primary" @click="handleSubmit">
        <span>ذخیره تغییرات</span>
      </BaseButton>
+      <AdminFieldHelp
+        text="بدون زدن این دکمه، هیچ‌کدام از تغییرات بالا در اپ مشتری دیده نمی‌شود."
+        root-class="mt-2"
+      />
    </div>
  </div>
-
 </template>

 <script setup lang="ts">
-import {Card, message} from "ant-design-vue"
-import type {IBenefits} from "@/model/banner"
-import UploadPic from "@/components/UploadPic.vue"
-import {updateBannerConst, getHeaderBannerConst} from "@/api/consts"
+import { Card, message } from 'ant-design-vue'
+import type { IBenefits } from '@/model/banner'
+import UploadPic from '@/components/UploadPic.vue'
+import AdminFieldHelp from '@/components/AdminFieldHelp.vue'
+import { updateBannerConst, getHeaderBannerConst } from '@/api/consts'
+import {
+  bannersAspectHelp,
+  bannersEventHelp,
+  bannersImageHelp,
+  bannersLinkHelp,
+  bannersModalHelp,
+  bannersNoEventHelp,
+  bannersPageIntro,
+  bannersShareHelp,
+  bannersShowHelp,
+} from '@/utils/adminHelpCopy'
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
-import {QuillEditor} from '@vueup/vue-quill'
-import {baseURL} from "@root/config";
+import { QuillEditor } from '@vueup/vue-quill'
+import { baseURL } from '@root/config'

 const benefitsList = ref<IBenefits[]>([])
 let id: number | null = null
 const typeList = ref([
-  {lable: 'باز شدن لینک', value: 'link'},
-  {lable: ' پنجره بازشو', value: 'modal'},
-  {lable: 'اشتراک گذاری', value: 'share'},
-  {lable: 'بدون رویداد', value: null},
-
+  { lable: 'باز شدن لینک', value: 'link' },
+  { lable: 'پنجره بازشو', value: 'modal' },
+  { lable: 'اشتراک گذاری', value: 'share' },
+  { lable: 'بدون رویداد', value: null },
 ])
+
 function parseBannerList(value: string | null | undefined): IBenefits[] {
  if (!value) return []
  try {
@@ -93,20 +133,21 @@ function addRow() {
  if (!Array.isArray(benefitsList.value)) {
    benefitsList.value = []
  }
-  benefitsList.value.push({icon: null, show: true, caption: null, link: null, typeClick: null, modalText: null})
-}
-
-function removeRow(index: number) {
-  benefitsList.value.splice(index, 1)
+  benefitsList.value.push({
+    icon: null,
+    show: true,
+    caption: null,
+    link: null,
+    typeClick: null,
+    modalText: null,
+  })
 }

 async function handleUpload(file: any, index: number, size: string) {
  benefitsList.value[index][size] = `${baseURL}/${file.src}`
 }

-function handelRemoveFile(index: number, size: string) {
-  // console.log(  benefitsList.value.splice(benefitsList?.value[index], 1))
-
+function handelRemoveFile(index: number, _size: string) {
  benefitsList.value.splice(index, 1)
 }

@@ -143,7 +184,7 @@ onMounted(async () => {
 })
 </script>

-<style  lang="less">
+<style lang="less">
 .editor-box2 {
  max-height: 40vh;
  overflow-y: auto;
@@ -277,6 +277,8 @@ export function switchLabels(key: string | undefined): { on: string; off: string
 const KEY_HELP_FALLBACK: Record<string, string> = {
  name_fa:
    'نام فارسی برند که در پیامک‌ها، عنوان صفحات و بخش‌های عمومی اپ به مشتری نشان داده می‌شود.',
+  banner_enabled:
+    'روشن: منوی «بنرها» در تنظیمات فعال می‌شود و می‌توانید اسلایدر بالای صفحهٔ اصلی اپ را مدیریت کنید. خاموش: بنرها در اپ نشان داده نمی‌شوند.',
  open_register:
    'روشن: کاربران جدید می‌توانند ثبت‌نام کنند. خاموش: فقط ورود کاربران قبلی مجاز است.',
  sms_panel:
@@ -3,10 +3,12 @@
    <div class="space-y-3">
      <a-form-item label="شماره موبایل مشتری" name="mobile" :rules="inputLenRules(11)">
        <BasicInput v-model:value="form.mobile" type="tel" placeholder="09123456789" />
+        <AdminFieldHelp :text="giftCardMobileHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item label="نام مشتری" name="name" :rules="inputRules()">
        <BasicInput v-model:value="form.name" placeholder="نام و نام خانوادگی مشتری" />
+        <AdminFieldHelp :text="giftCardNameHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item label="نوع کارت هدیه" name="unit" :rules="inputRules()">
@@ -14,10 +16,12 @@
          <a-radio-button value="1">ریالی</a-radio-button>
          <a-radio-button value="2">{{ metalLabel.goldWalletShort() }}</a-radio-button>
        </a-radio-group>
+        <AdminFieldHelp :text="giftCardUnitHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item label="تعداد کدها" name="count" :rules="inputRulesNumber()">
        <BasicInput v-model:value="form.count" type="tel" placeholder="تعداد کدهای کارت هدیه" />
+        <AdminFieldHelp :text="giftCardCountHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item
@@ -31,14 +35,16 @@
          type="tel"
          placeholder="مقدار کارت هدیه"
        />
+        <AdminFieldHelp :text="giftCardAmountHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item label="تاریخ انقضا" name="expiry_date" :rules="inputRules()">
        <BaseDatePicker v-model:value="form.expiry_date" format="YYYY-MM-DD" />
+        <AdminFieldHelp :text="giftCardExpiryHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item label="توضیحات" name="description" class="mb-0">
-        <BasicTextArea v-model:value="form.description" place-holder="توضیحات اختیاری" />
+        <BasicTextArea v-model:value="form.description" place-holder="توضیحات اختیاری — فقط برای یادداشت شما در پنل" />
      </a-form-item>
    </div>
  </a-form>
@@ -47,6 +53,15 @@
 <script setup lang="ts">
 import type { FormInstance } from 'ant-design-vue'
 import type { GiftcardInput } from '@/model/giftCard'
+import AdminFieldHelp from '@/components/AdminFieldHelp.vue'
+import {
+  giftCardAmountHelp,
+  giftCardCountHelp,
+  giftCardExpiryHelp,
+  giftCardMobileHelp,
+  giftCardNameHelp,
+  giftCardUnitHelp,
+} from '@/utils/adminHelpCopy'
 import { inputLenRules, inputRules, inputRulesNumber } from '@/utils/inputRules'
 import { metalLabel } from '@/utils/adminMetalLabels'

@@ -58,6 +73,6 @@ const formRef = ref<FormInstance>()

 defineExpose({
  validateFields: () => formRef.value?.validateFields(),
-  resetFields: () => formRef.value?.resetFields()
+  resetFields: () => formRef.value?.resetFields(),
 })
 </script>
@@ -36,18 +36,22 @@
      <a-form :model="discountForm" ref="discountFormRef" autocomplete="off" layout="vertical">
        <a-form-item label="نام پویش" name="name" :rules="inputRules()">
          <BasicInput v-model:value="discountForm.name" placeholder="نام پویش" />
+          <AdminFieldHelp :text="discountNameHelp" root-class="mt-1" />
        </a-form-item>
        <a-form-item label="درصد تخفیف" name="amount" :rules="inputRulesNumber()">
          <BasicInput v-model:value="discountForm.amount" type="tel" placeholder="مثلاً 10" addon-before="%" />
+          <AdminFieldHelp :text="discountPercentHelp" root-class="mt-1" />
        </a-form-item>
        <a-form-item label="تعداد کدها" name="count" :rules="inputRulesNumber()">
          <BasicInput v-model:value="discountForm.count" type="tel" />
+          <AdminFieldHelp :text="discountCountHelp" root-class="mt-1" />
        </a-form-item>
        <a-form-item label="تاریخ انقضا" name="expiry_date" :rules="inputRules()">
          <BaseDatePicker v-model:value="discountForm.expiry_date" format="YYYY-MM-DD" />
+          <AdminFieldHelp :text="discountExpiryHelp" root-class="mt-1" />
        </a-form-item>
        <a-form-item label="توضیحات" name="description">
-          <BasicTextArea v-model:value="discountForm.description" place-holder="توضیحات اختیاری" />
+          <BasicTextArea v-model:value="discountForm.description" place-holder="توضیحات اختیاری — فقط برای یادداشت شما" />
        </a-form-item>
      </a-form>
    </BasicActionSheet>
@@ -111,6 +115,13 @@ import { isStoreApp } from '@/utils/config'
 import { inputRules, inputRulesNumber } from '@/utils/inputRules'
 import BasicInput from '@/components/BasicInput.vue'
 import BasicTextArea from '@/components/BasicTextArea.vue'
+import AdminFieldHelp from '@/components/AdminFieldHelp.vue'
+import {
+  discountCountHelp,
+  discountExpiryHelp,
+  discountNameHelp,
+  discountPercentHelp,
+} from '@/utils/adminHelpCopy'
 import BaseDatePicker from '@core/components/BaseDatePicker'

 //loading
@@ -1,6 +1,7 @@
 <template>
  <div>
    <BasicShowContext title="هشدار قیمت">
+      <AdminFieldHelp :text="priceTriggersPageIntro" root-class="mb-3 px-1" />
      <BaseTable v-bind="tblProps" @register="submit" ref="tbl">
 <!--        <template #extraHeader>
          <BaseButton type="primary" size="small" class="flex" @click="emits('add')">
@@ -40,7 +41,9 @@ import { changeUserActivation, getUserTable } from '@/api/user'
 import { useUserStore } from '@/store/userStore'
 import { cols } from '../hooks/priceTriggersColumns'
 import { changeCustomerActivation } from '@/api/customer'
-import {getPriceTriggersTable} from "@/api/priceTriggers";
+import { getPriceTriggersTable } from '@/api/priceTriggers'
+import AdminFieldHelp from '@/components/AdminFieldHelp.vue'
+import { priceTriggersPageIntro } from '@/utils/adminHelpCopy'

 const [submit, reload] = useBaseTable()

@@ -14,6 +14,8 @@
        </BaseButton>
      </template>

+      <AdminFieldHelp :text="pricingPageIntro" root-class="mb-3 px-1" />
+
      <div class="flex h-full min-h-0 flex-col">
        <BaseTable v-if="!isMobile" class="h-full min-h-0 min-w-0" v-bind="tblProps" @register="submit" ref="tbl">
          <template #extraHeader>
@@ -58,6 +60,8 @@ import { storePriceColumns } from '../hooks/storePriceColumns'
 import { usePrefix } from '@core/composable/usePrefix'
 import { getPriceSyncLogTable } from '@/api/price'
 import PriceMobileCardList from './PriceMobileCardList.vue'
+import AdminFieldHelp from '@/components/AdminFieldHelp.vue'
+import { pricingPageIntro } from '@/utils/adminHelpCopy'
 import { isMobile } from '@core/utils/is'
 import type { PriceSyncLog } from '@/model/priceSyncLog'

@@ -0,0 +1,64 @@
+/** توضیحات ساده فارسی برای فرم‌های ادمین — قابل فهم بدون دانش فنی */
+
+export const bannersPageIntro =
+  'بنرها همان تصاویر اسلایدر بالای صفحهٔ اصلی اپ مشتری هستند. هر کارت = یک اسلاید. بعد از هر تغییر حتماً «ذخیره تغییرات» را بزنید؛ تا آن لحظه در اپ دیده نمی‌شود.'
+
+export const bannersShowHelp =
+  'روشن = این بنر در اپ مشتری نشان داده می‌شود. خاموش = موقتاً مخفی می‌شود (حذف نمی‌شود).'
+
+export const bannersAspectHelp =
+  'عکس باید افقی و با نسبت ۱۶:۹ باشد (مثل تصویر تلویزیون). اگر بلند و باریک یا مربع باشد، در اپ کشیده یا بریده می‌شود.'
+
+export const bannersImageHelp =
+  'روی «افزودن عکس» بزنید و یک تصویر با کیفیت مناسب انتخاب کنید. آیکون سطل زباله کل این بنر را از لیست حذف می‌کند.'
+
+export const bannersEventHelp =
+  'وقتی مشتری روی بنر ضربه می‌زند چه اتفاقی بیفتد؟ اگر مطمئن نیستید «بدون رویداد» را بگذارید.'
+
+export const bannersLinkHelp =
+  'آدرس کامل صفحه‌ای که باید باز شود. مثال: https://bazretala.ir یا tel:02112345678'
+
+export const bannersModalHelp =
+  'متنی که داخل خود اپ به مشتری نشان داده می‌شود. می‌توانید بولد، لیست و لینک هم بگذارید.'
+
+export const bannersShareHelp =
+  'با انتخاب این گزینه، منوی اشتراک‌گذاری گوشی مشتری باز می‌شود (واتساپ، تلگرام و...). نیازی به پر کردن فیلد دیگر نیست.'
+
+export const bannersNoEventHelp =
+  'فقط تصویر دیده می‌شود؛ کلیک هیچ کاری نمی‌کند. برای بنرهای تزئینی مناسب است.'
+
+export const pricingPageIntro =
+  'اینجا تاریخچهٔ همگام‌سازی قیمت را می‌بینید. دکمهٔ «به‌روزرسانی قیمت» همان لحظه قیمت را از منبعی که در تنظیمات مشخص کرده‌اید می‌گیرد و روی محصولات اعمال می‌کند. اگر قیمت عوض نشده باشد پیام «تغییری نکرد» می‌آید.'
+
+export const giftCardMobileHelp =
+  'شماره موبایلی که کارت هدیه برایش ساخته می‌شود. باید ۱۱ رقم و با ۰۹ شروع شود.'
+
+export const giftCardNameHelp =
+  'نام مشتری فقط برای شناسایی در پنل شماست؛ روی اپ مشتری تأثیر مستقیم ندارد.'
+
+export const giftCardUnitHelp =
+  'ریالی = اعتبار کیف پول (ریال). طلا = وزن طلا به گرم که به کیف مشتری واریز می‌شود.'
+
+export const giftCardCountHelp =
+  'چند کد یکتا ساخته شود. هر کد فقط یک‌بار قابل استفاده است.'
+
+export const giftCardAmountHelp =
+  'مقدار هر کد: اگر ریالی انتخاب کردید مبلغ به ریال؛ اگر طلا انتخاب کردید وزن به گرم.'
+
+export const giftCardExpiryHelp =
+  'بعد از این تاریخ کدها دیگر قابل استفاده نیستند. تاریخ را با دقت انتخاب کنید.'
+
+export const discountNameHelp =
+  'نامی که در لیست پویش‌های تخفیف در پنل می‌بینید؛ فقط برای مدیریت داخلی است.'
+
+export const discountPercentHelp =
+  'درصد تخفیف روی سفارش. مثلاً ۱۰ یعنی ده درصد کمتر از مبلغ اصلی.'
+
+export const discountCountHelp =
+  'چند کد تخفیف یکتا ساخته شود. هر کد یک‌بار مصرف می‌شود.'
+
+export const discountExpiryHelp =
+  'بعد از این تاریخ کدهای این پویش دیگر کار نمی‌کنند.'
+
+export const priceTriggersPageIntro =
+  'لیست درخواست‌های «هشدار قیمت» مشتریان. وقتی قیمت به عددی که مشتری گفته برسد، به او اطلاع داده می‌شود. از آیکون مداد می‌توانید وضعیت را ببینید یا ویرایش کنید.'