tang-ui-x 1.1.2 → 1.1.3

package/components/TCheckboxGroup/index.uvue

@@ -13,6 +13,9 @@ type Props = Omit<TCheckboxGroupProps, 'modelValue'>
 const props = withDefaults(defineProps<Props>(), {
   options: () => [] as CheckboxOption[],
   direction: 'vertical',
+  size: 'medium',
+  activeColor: '#00bba7',
+  inactiveColor: '#c8c9cc',
   max: -1,
   disabled: false,
   customClass: '',
@@ -56,20 +59,36 @@ const handleChange = (option: CheckboxOption): void => {
 const isChecked = (option: CheckboxOption): boolean => {
   return modelValue.value.includes(option.value)
 }
+
+// 尺寸映射
+const sizeMap = {
+  small: { icon: 32, fontSize: 20 },
+  medium: { icon: 40, fontSize: 24 },
+  large: { icon: 48, fontSize: 28 }
+}
+
+const currentSize = computed(() => sizeMap[props.size])
+
+const cssVars = computed(() => ({
+  '--icon-size': `${currentSize.value.icon}rpx`,
+  '--checkmark-size': `${currentSize.value.fontSize}rpx`,
+  '--active-color': props.activeColor,
+  '--inactive-color': props.inactiveColor
+}))
 </script>
 
 <template>
   <view
     class="t-checkbox-group"
     :class="[`t-checkbox-group--${direction}`, customClass]"
-    :style="customStyle"
+    :style="[customStyle, cssVars]"
   >
     <view
       v-for="(option, index) in options"
       :key="index"
       class="t-checkbox-group__item"
       :class="{ 't-checkbox-group__item--disabled': disabled || option.disabled }"
-      @click="() => handleChange(option)"
+      @click="handleChange(option)"
     >
       <view class="t-checkbox-group__icon" :class="{ 't-checkbox-group__icon--checked': isChecked(option) }">
         <text v-if="isChecked(option)" class="t-checkbox-group__check">✓</text>
@@ -95,7 +114,7 @@ const isChecked = (option: CheckboxOption): boolean => {
 
 .t-checkbox-group__item {
   display: flex;
-  align-items: center;
+	flex-direction: row;
   padding: 12px 0;
   cursor: pointer;
 
@@ -110,24 +129,24 @@ const isChecked = (option: CheckboxOption): boolean => {
 }
 
 .t-checkbox-group__icon {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #c8c9cc;
-  border-radius: 4px;
-  margin-right: 8px;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  border: 2rpx solid var(--inactive-color);
+  border-radius: 8rpx;
+  margin-right: 16rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
 
   &--checked {
-    background-color: #1890ff;
-    border-color: #1890ff;
+    background-color: var(--active-color);
+    border-color: var(--active-color);
   }
 }
 
 .t-checkbox-group__check {
-  font-size: 14px;
+  font-size: var(--checkmark-size);
   color: #fff;
   font-weight: bold;
 }

package/components/TCheckboxGroup/type.uts

@@ -3,6 +3,7 @@
  */
 
 export type CheckboxDirection = 'horizontal' | 'vertical'
+export type CheckboxSize = 'small' | 'medium' | 'large'
 
 export interface CheckboxOption {
   label: string
@@ -14,8 +15,17 @@ export interface TCheckboxGroupProps {
   modelValue?: (string | number)[]
   options?: CheckboxOption[]
   direction?: CheckboxDirection
+  /** 按钮尺寸 */
+  size?: CheckboxSize
+  /** 激活状态颜色 */
+  activeColor?: string
+  /** 非激活状态颜色 */
+  inactiveColor?: string
+  /** 最大可选数量 */
   max?: number
   disabled?: boolean
+  /** 名称属性（用于表单提交） */
+  name?: string
   customClass?: string
   customStyle?: string
 }