نظام خلفيات الأنماط

توفّر lh-ui-plus نظام خلفيات بأنماط صينية شاعرية، يدعم 6 أنماط مسبقة، وتُطبَّق عبر متغيرات CSS (bg-pattern) أو عبر خاصية bgPattern في المكوّن. أما تبديل الوضعين الفاتح والداكن فهو قدرة مستقلة، وانظر نهاية الصفحة في قسم «الوضعان الفاتح والداكن».

الأنماط المسبقة

يتضمن النظام الأنماط الستة التالية:

اسم النمط	متغير CSS	الوصف
بلا	--lh-pattern-none	بلا نمط افتراضيًا
أوراق الصفصاف 柳叶	--lh-pattern-willow	أوراق صفصاف نحيلة بتوزيع متناغم
السحابة الميمونة 祥云	--lh-pattern-cloud	سُحُب متدفّقة بانحناءات لولبية
تموّجات الماء 水波	--lh-pattern-water	تموّجات خفيفة تتكرر طبقات
ندفات الثلج 雪花	--lh-pattern-snow	بلورات ثلج سداسية بفروع دقيقة
أزهار البرقوق 梅花	--lh-pattern-plum	بتلات خمس ممتدة وقلب البتلة واضح
أوراق الخيزران 竹叶	--lh-pattern-bamboo	أوراق خيزران رمحية متناثرة بانتظام

طريقة الاستخدام

الإعداد العام عبر ConfigProvider

<template>
  <LhConfigProvider :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-willow)' }">
    <LhButton>افتراضي</LhButton>
    <LhButton type="primary">رئيسي</LhButton>
  </LhConfigProvider>
</template>

التحكم في نطاق تطبيق النمط (القائمة البيضاء patternComponents)

بشكل افتراضي لا يُطبَّق bg-pattern العام على أي مكوّن، بل يجب تفعيله صراحةً عبر القائمة البيضاء patternComponents:

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <LhConfigProvider
    :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-cloud)' }"
    :pattern-components="['button', 'input']"
  >
    <!-- يُطبَّق النمط على الزر وحقل الإدخال، وليس على Dialog -->
    <LhButton>زر بنمط</LhButton>
    <LhInput placeholder="حقل إدخال بنمط" />
    <LhDialog v-model="visible">مربع الحوار هذا بلا نمط</LhDialog>
  </LhConfigProvider>
</template>

تهيئة النمط على مستوى المكوّن

لا تخضع الأنماط التي يضبطها المكوّن نفسه عبر خاصية bgPattern أو themeVars لقيد القائمة البيضاء:

<template>
  <LhButton :bg-pattern="'var(--lh-pattern-bamboo)'">
    هذا الزر ذو نمط دائمًا
  </LhButton>
</template>

تخصيص شفافية النمط

<template>
  <LhConfigProvider
    :theme-vars="{
      'bg-pattern': 'var(--lh-pattern-snow)',
      'bg-pattern-opacity': '0.3',
      'bg-pattern-color': 'rgba(255, 0, 0, 0.2)',
    }"
  >
    <LhButton>شفافية مخصصة</LhButton>
  </LhConfigProvider>
</template>

مرجع متغيرات CSS

اسم المتغير	الوصف	القيمة الافتراضية
--lh-bg-pattern	عنوان نمط الخلفية	none
--lh-bg-pattern-repeat	نمط تكرار النمط	repeat
--lh-bg-pattern-size	حجم النمط	40px
--lh-bg-pattern-opacity	شفافية النمط	0.15
--lh-bg-pattern-color	لون النمط	var(--lh-decoration-color, rgba(184, 134, 11, 0.12))
--lh-bg-pattern-blend	وضع مزج النمط	soft-light

الوضعان الفاتح والداكن

يُدار نظام الأنماط في حد ذاته عبر متغيرات CSS، ولا يؤثر في الوضعين الفاتح والداكن ولا يتأثر بهما. ويتم التبديل بينهما عبر الدالة التركيبية useLhTheme (التي تكتب الخاصية data-theme):

<script setup lang="ts">
import { useLhTheme } from '@lh-ui/vue3'

const { theme, toggleTheme, setTheme } = useLhTheme()

// تبديل السمة الفاتحة والداكنة
function onToggle() {
  toggleTheme()
}
</script>

<template>
  <div>
    <LhButton @click="onToggle">
      {{ theme === 'dark' ? 'تبديل إلى الفاتح' : 'تبديل إلى الداكن' }}
    </LhButton>
  </div>
</template>

أولوية متغيرات السمة

تُدمج متغيرات CSS النهائية للمكوّن وفق الأولويات التالية (كلٌّ يليه يتجاوز سابقه):

1. themeVars العام في ConfigProvider (الأولوية الأدنى)
2. componentTheme[اسم المكوّن] لكل مكوّن في ConfigProvider
3. خاصية themeVars الخاصة بالمكوّن
4. خاصية bgPattern الخاصة بالمكوّن (الأولوية الأعلى)

بالنسبة إلى متغير bg-pattern، يخضع إضافيًا لقيد القائمة البيضاء patternComponents: لا تُطبَّق قيمة bg-pattern المُعدَّة عامةً سوى على المكوّنات المدرجة في القائمة البيضاء.