تخصيص السمات

توفّر lh-ui-plus نظامًا متكاملًا للسمات يعتمد متغيرات CSS، مع قدرات تخصيص غنية تشمل ألوان النمط الصيني، والوضع الداكن، وخلفيات الأنماط، والتبديل وقت التشغيل.

ترغب في ضبط الألوان بصريًا وتصدير ملف scss مباشرة؟ انظر استوديو السمات.

نظام ألوان النمط الصيني

تستلهم المكتبة تصميمها من ألوان الحبر التقليدية، وتُعرّف 8 ألوانًا صينية الأساسية:

اللون	الدلالة	اللون الأساسي	hover	الاستخدام
النيلي	أزرق الخزف 青花瓷	`#2B4C7C`	`#3D649E`	الأزرار الرئيسية، والروابط، وحالة التركيز
أخضر الصنوبر 松花绿	خضرة ظلال الخيزران	`#5B8C5A`	`#6FA36E`	حالة النجاح
الأصفر العشبي 藤黄	ذهبي أوراق الخريف	`#C4A35A`	`#D4B76F`	حالة التحذير
الزنجفر 朱砂 (خطر)	أحمر أختام الحبر	`#B23A3A`	`#C45050`	حالة الخطر/الخطأ (`--lh-danger-*`)
الداكن الرمادي	ألوان الحبر الخفيفة	`#7A7A7A`	`#8F8F8F`	حالة المعلومات
الذهبي	سحر عتيق فاخر	`#B8860B`	`#D4A843`	لمسات زخرفية (`--lh-gold-*`)
الزنجفر الأحمر 朱砂红 (تأكيد)	صيغة تأكيد مائلة إلى الحمرة من الزنجفر	`#C43A31`	`#E85D4A`	لون التأكيد (`--lh-vermilion-*`)
اليشم	أناقة الخيزران الأخضر	`#5B8C5A`	`#7AAE7A`	النجاح/الزخرفة (نفس قيمة أخضر الصنوبر)

يتضمن كل لون عادةً 4 مستويات (الأساسي/hover/active/خلفية فاتحة light)، ويوفّر اللون الأساسي واللون الذهبي إضافيًا لون حد lighter (*-color-border) لضمان تباين مناسب في السيناريوهات المختلفة.

نظام سمات متغيرات CSS

تتحقّق جميع ألوان السمة عبر خصائص CSS المخصّصة (--lh-*)، بإجمالي أكثر من 88 متغيرًا تغطّي الفئات التالية:

متغيرات الألوان

بادئة المتغير	الوصف	مثال
`--lh-primary-color`	القيمة الأساسية للون الأساسي	`#2B4C7C`
`--lh-primary-color-hover`	حالة hover للون الأساسي	`#3D649E`
`--lh-primary-color-active`	حالة active للون الأساسي	`#1F3A5F`
`--lh-primary-color-bg`	الخلفية الفاتحة للون الأساسي	`#E8EDF3`
`--lh-success-color`	لون النجاح	`#5B8C5A`
`--lh-warning-color`	لون التحذير	`#C4A35A`
`--lh-danger-color`	لون الخطر	`#B23A3A`
`--lh-info-color`	لون المعلومات	`#7A7A7A`

متغيرات النص

اسم المتغير	الوصف	القيمة الافتراضية
`--lh-text-primary`	النص الرئيسي	`#2C2C2C`
`--lh-text-regular`	النص الاعتيادي	`#5A5A5A`
`--lh-text-secondary`	النص الثانوي	`#8A8A8A`
`--lh-text-placeholder`	العنصر النائب	`#B0B0B0`
`--lh-text-disabled`	النص المعطّل	`#C8C8C8`

متغيرات الحدود

اسم المتغير	الوصف	القيمة الافتراضية
`--lh-border-color-base`	الحدود الافتراضية	`#D8D3CC`
`--lh-border-color-light`	حدود خفيفة	`#E5E0D8`
`--lh-border-radius-base`	نصف القطر الأساسي	`2px`
`--lh-border-radius-round`	نصف قطر الكبسولة	`20px`

متغيرات الخلفية

اسم المتغير	الوصف	القيمة الافتراضية
`--lh-bg-color`	خلفية المكوّن	`#FAF6F0` (لون ورق الأرز 宣纸白)
`--lh-bg-color-page`	خلفية الصفحة	`#F5F0EB`
`--lh-bg-color-overlay`	خلفية الغطاء	`rgba(26, 26, 26, 0.4)`

متغيرات الظل

اسم المتغير	الوصف
`--lh-box-shadow-base`	الظل الافتراضي
`--lh-box-shadow-light`	ظل خفيف
`--lh-box-shadow-lighter`	ظل خفيف جدًا

متغيرات الخط

اسم المتغير	الوصف	القيمة الافتراضية
`--lh-font-family`	عائلة الخط	`Noto Serif SC, STSong, SimSun...`
`--lh-font-size-base`	الحجم الأساسي	`14px`
`--lh-font-size-small`	الحجم الصغير	`13px`
`--lh-font-weight-primary`	سمك الخط الاعتيادي	`400`
`--lh-font-line-height-primary`	ارتفاع السطر	`1.8`

متغيرات المسافات

اسم المتغير	القيمة	الاستخدام
`--lh-spacing-xs`	`4px`	مسافة صغيرة جدًا
`--lh-spacing-sm`	`8px`	مسافة صغيرة
`--lh-spacing-md`	`12px`	مسافة متوسطة
`--lh-spacing-base`	`16px`	المسافة الأساسية
`--lh-spacing-lg`	`20px`	مسافة كبيرة
`--lh-spacing-xl`	`24px`	مسافة كبيرة جدًا

متغيرات Z-Index

اسم المتغير	القيمة	الاستخدام
`--lh-z-index-dropdown`	`1000`	القوائم المنسدلة
`--lh-z-index-modal`	`1050`	الصناديق المشروطة (modal)
`--lh-z-index-tooltip`	`2000`	صناديق التلميحات

متغيرات الانتقال

اسم المتغير	القيمة	الوصف
`--lh-transition-duration-fast`	`0.25s`	انتقال سريع
`--lh-transition-duration-base`	`0.3s`	انتقال افتراضي
`--lh-transition-duration-slow`	`0.4s`	انتقال بطيء

السمة الداكنة

تتضمّن المكتبة تنسيقات السمة الداكنة مدمجة، وتبدّل جميع متغيرات CSS تلقائيًا إلى قيم ملائمة في الوضع الداكن.

الطريقة الأولى: الدالة التركيبية `useLhTheme`

Composition API

vue

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

const { theme, toggleTheme, setTheme } = useLhTheme()
</script>

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

Options API

vue

<script>
import { useLhTheme } from '@lh-ui/vue3'

export default {
  setup() {
    const { theme, toggleTheme, setTheme } = useLhTheme()
    return { theme, toggleTheme, setTheme }
  },
}
</script>

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

يحفظ useLhTheme حالة السمة تلقائيًا في localStorage (المفتاح: lh-ui-theme)، فلا تفقد السمة بعد تحديث الصفحة.

الطريقة الثانية: التبديل عبر خاصية HTML

يُكتفى بضبط data-theme="dark" على العنصر الجذري لتفعيل الوضع الداكن عموميًا:

html

<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
  <!-- ... -->
</html>

ألوان سمات مخصصة (الخزف الأزرق 青花瓷 / أخضر الصنوبر 松花绿 / الزنجفر الأحمر 朱砂红)

بالإضافة إلى السمتين الفاتحة والداكنة المدمجتين، تدعم المكتبة تخصيص أي مجموعة ألوان عبر themeVars لتحقيق سمة شخصية.

المثال أدناه عرض لـ كتابة متغيرات مخصصة يدويًا، وقد عُدِّلت قيمه لأغراض الشرح، وهو لا يتطابق تمامًا مع السمات المسبقة المدمجة في السمات المسبقة (cerblue / songhua / zhusha). ولاستخدام سمة مسبقة مدمجة مباشرة، استخدم useLhPresetTheme أو getThemeVars(name).

سمة الخزف الأزرق 青花瓷

تعتمد النيلي الداكن لونًا أساسيًا، مستوحاة من الخزف الأزرق التقليدي.

Composition API

vue

<script setup lang="ts">
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-active': '#1F3A5F',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
  'border-color-base': '#C8D6E5',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhButton type="primary">زر الخزف الأزرق</LhButton>
    <LhInput placeholder="حقل إدخال الخزف الأزرق" />
  </LhConfigProvider>
</template>

Options API

vue

<script>
import { LhConfigProvider, LhButton, LhInput } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton, LhInput },
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhButton type="primary">زر الخزف الأزرق</LhButton>
  </LhConfigProvider>
</template>

سمة أخضر الصنوبر 松花绿

تعتمد أخضر الخيزران لمسةً لخلق أسلوب منعش وطبيعي.

vue

<script setup lang="ts">
const bambooTheme = {
  'primary-color': '#5B8C5A',
  'primary-color-hover': '#6FA36E',
  'primary-color-bg': '#EDF5EC',
  'success-color': '#5B8C5A',
  'bg-color': '#F6FAF5',
}
</script>

<template>
  <LhConfigProvider :theme-vars="bambooTheme">
    <LhButton type="primary">درب الخيزران</LhButton>
    <LhTag type="success">أوراق جديدة</LhTag>
  </LhConfigProvider>
</template>

سمة الزنجفر الأحمر 朱砂红

تعتمد أحمر أختام الحبر لونًا أساسيًا، لتبريز أجواء فاخرة وأنيقة.

vue

<script setup lang="ts">
const vermilionTheme = {
  'primary-color': '#C43A31',
  'primary-color-hover': '#E85D4A',
  'primary-color-bg': '#FDF0EE',
  'bg-color': '#FFFBF9',
  'border-color-base': '#F0D5CF',
}
</script>

<template>
  <LhConfigProvider :theme-vars="vermilionTheme">
    <LhButton type="primary">ميثاق مختوم</LhButton>
  </LhConfigProvider>
</template>

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

توفّر المكتبة نظام خلفيات بأنماط صينية شاعرية يدعم 6 أنماط مسبقة، مع تحديد دقيق لنطاق التطبيق عبر القائمة البيضاء patternComponents.

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

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

الإعداد العام للنمط

Composition API

vue

<script setup lang="ts">
const config = {
  themeVars: {
    'bg-pattern': 'var(--lh-pattern-cloud)',
    'bg-pattern-opacity': '0.15',
  },
  patternComponents: ['button', 'input'] as const,
}
</script>

<template>
  <LhConfigProvider
    :theme-vars="config.themeVars"
    :pattern-components="config.patternComponents"
  >
    <!-- يُطبَّق النمط على الزر وحقل الإدخال، وليس على Dialog -->
    <LhButton>زر بنمط</LhButton>
    <LhInput placeholder="حقل إدخال بنمط" />
  </LhConfigProvider>
</template>

Options API

vue

<script>
export default {
  data() {
    return {
      config: {
        themeVars: {
          'bg-pattern': 'var(--lh-pattern-cloud)',
          'bg-pattern-opacity': '0.15',
        },
        patternComponents: ['button', 'input'],
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider
    :theme-vars="config.themeVars"
    :pattern-components="config.patternComponents"
  >
    <LhButton>زر بنمط</LhButton>
  </LhConfigProvider>
</template>

مرجع متغيرات النمط

اسم المتغير	الوصف	القيمة الافتراضية
`--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`

مثال إعداد كامل

يعرض ما يلي الاستخدام الكامل لإعدادات ConfigProvider، بدمج جميع قدرات السمة واللغة والحجم والنمط.

Composition API

vue

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

const configProvider = {
  size: 'medium' as const,
  locale: zhCN,
  themeVars: {
    'primary-color': '#2B4C7C',
    'bg-pattern': 'var(--lh-pattern-cloud)',
    'bg-pattern-opacity': '0.15',
  },
  patternComponents: ['button', 'input', 'dialog'],
}
</script>

<template>
  <LhConfigProvider
    :size="configProvider.size"
    :locale="configProvider.locale"
    :theme-vars="configProvider.themeVars"
    :pattern-components="configProvider.patternComponents"
  >
    <slot />
  </LhConfigProvider>
</template>

Options API

vue

<script>
import { zhCN } from '@lh-ui/vue3'

export default {
  data() {
    return {
      configProvider: {
        size: 'medium',
        locale: zhCN,
        themeVars: {
          'primary-color': '#2B4C7C',
          'bg-pattern': 'var(--lh-pattern-cloud)',
        },
        patternComponents: ['button', 'input', 'dialog'],
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider
    :size="configProvider.size"
    :locale="configProvider.locale"
    :theme-vars="configProvider.themeVars"
    :pattern-components="configProvider.patternComponents"
  >
    <slot />
  </LhConfigProvider>
</template>

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

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

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

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

التخطيط السريع عبر sx

توفّر خاصية sx أسلوبًا تصريحيًا للتخطيط المضمّن، يتيح ضبط المسافات والأحجام دون كتابة CSS. وهي مدعومة حاليًا في المكوّنات التالية: Button وInput وDialog وTooltip وAlert وCard وEmpty وBreadcrumb وPagination وSteps وTabs وSkeleton.

المبدأ

يعتمد sx شبكة أساسها 8px، إذ يُضرب الرقم في 8 للحصول على قيمة البكسل الفعلية. فمثلًا يكافئ mt: 2 القيمة marginTop: 16px.

الخصائص المدعومة

المسافات

الخاصية	الوصف	مثال	CSS المكافئ
`m`	مسافة خارجية من الجهات الأربع	`m: 2`	`margin: 16px`
`mx`	مسافة خارجية أفقية	`mx: 1`	`marginLeft: 8px; marginRight: 8px`
`my`	مسافة خارجية عمودية	`my: 1`	`marginTop: 8px; marginBottom: 8px`
`mt`, `mr`, `mb`, `ml`	مسافة خارجية أحادية الجهة	`mt: 2`	`marginTop: 16px`
`p`	مسافة داخلية من الجهات الأربع	`p: 3`	`padding: 24px`
`px`	مسافة داخلية أفقية	`px: 2`	`paddingLeft: 16px; paddingRight: 16px`
`py`	مسافة داخلية عمودية	`py: 1`	`paddingTop: 8px; paddingBottom: 8px`
`pt`, `pr`, `pb`, `pl`	مسافة داخلية أحادية الجهة	`pt: 2`	`paddingTop: 16px`

الأحجام

الخاصية	الوصف	مثال
`w`	العرض (الرقم يمثّل px، والسلسلة النصية قيمتها)	`w: 200` أو `w: '100%'`
`h`	الارتفاع	`h: 100` أو `h: 'auto'`

تخطيط Flex

الخاصية	الوصف	مثال
`display`	نوع العرض	`display: 'flex'`
`flex`	اختصار flex	`flex: '1 1 0%'`
`flexDirection`	اتجاه المحور الرئيسي	`flexDirection: 'column'`
`alignItems`	محاذاة المحور المتقاطع	`alignItems: 'center'`
`justifyContent`	محاذاة المحور الرئيسي	`justifyContent: 'flex-end'`

أمثلة الاستخدام

vue

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

const visible = ref(false)
</script>

<template>
  <!-- مسافات الزر -->
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">زر بمسافات</LhButton>

  <!-- المسافة الخارجية لحقل الإدخال -->
  <LhInput placeholder="مسافات حقل الإدخال العمودية" :sx="{ my: 1 }" />

  <!-- عرض Dialog: لا يدعم sx سوى w/h والخصائص الشبيهة بالمسافات -->
  <LhDialog v-model="visible" title="مثال" :sx="{ w: 480 }">
    <p>مربع حوار بعرض ثابت</p>
  </LhDialog>
</template>

vue

<script>
export default {
  data() {
    return { visible: false }
  },
}
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">زر بمسافات</LhButton>
</template>

تخصيص السمات ​

نظام ألوان النمط الصيني ​

نظام سمات متغيرات CSS ​

متغيرات الألوان ​

متغيرات النص ​

متغيرات الحدود ​

متغيرات الخلفية ​

متغيرات الظل ​

متغيرات الخط ​

متغيرات المسافات ​

متغيرات Z-Index ​

متغيرات الانتقال ​

السمة الداكنة ​

الطريقة الأولى: الدالة التركيبية useLhTheme ​

Composition API ​

Options API ​

الطريقة الثانية: التبديل عبر خاصية HTML ​

ألوان سمات مخصصة (الخزف الأزرق 青花瓷 / أخضر الصنوبر 松花绿 / الزنجفر الأحمر 朱砂红) ​

سمة الخزف الأزرق 青花瓷 ​

Composition API ​

Options API ​

سمة أخضر الصنوبر 松花绿 ​

سمة الزنجفر الأحمر 朱砂红 ​

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

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

الإعداد العام للنمط ​

Composition API ​

Options API ​

مرجع متغيرات النمط ​

مثال إعداد كامل ​

Composition API ​

Options API ​

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

التخطيط السريع عبر sx ​

المبدأ ​

الخصائص المدعومة ​

المسافات ​

الأحجام ​

تخطيط Flex ​

أمثلة الاستخدام ​

تخصيص السمات

نظام ألوان النمط الصيني

نظام سمات متغيرات CSS

متغيرات الألوان

متغيرات النص

متغيرات الحدود

متغيرات الخلفية

متغيرات الظل

متغيرات الخط

متغيرات المسافات

متغيرات Z-Index

متغيرات الانتقال

السمة الداكنة

الطريقة الأولى: الدالة التركيبية `useLhTheme`

Composition API

Options API

الطريقة الثانية: التبديل عبر خاصية HTML

ألوان سمات مخصصة (الخزف الأزرق 青花瓷 / أخضر الصنوبر 松花绿 / الزنجفر الأحمر 朱砂红)

سمة الخزف الأزرق 青花瓷

Composition API

Options API

سمة أخضر الصنوبر 松花绿

سمة الزنجفر الأحمر 朱砂红

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

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

الإعداد العام للنمط

Composition API

Options API

مرجع متغيرات النمط

مثال إعداد كامل

Composition API

Options API

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

التخطيط السريع عبر sx

المبدأ

الخصائص المدعومة

المسافات

الأحجام

تخطيط Flex

أمثلة الاستخدام