Browse Source

✨ feat(page): add label and input components to home page
- import Label and Input components in index page
- add Label and Input elements to home page content

♻️ refactor(label): remove debug console logs
- delete console.log statements in Label component

⚡️ perf(cn): optimize twMerge configuration for environment
- import create function from @weapp-tailwindcss/merge/v4
- add environment detection for WeChat mini program
- configure twMerge to disable escape in non-WeChat environments
- simplify cn function parameters

yourname 4 tháng trước cách đây
mục cha
commit
ddefcdc2e8
3 tập tin đã thay đổi với 18 bổ sung2 xóa
  1. 2 0
      mini/src/components/ui/label.tsx
  2. 4 0
      mini/src/pages/index/index.tsx
  3. 12 2
      mini/src/utils/cn.ts

+ 2 - 0
mini/src/components/ui/label.tsx

@@ -36,6 +36,8 @@ export interface LabelProps {
 
 const Label = forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, variant, size, children, required, htmlFor, ...props }, ref) => {
+    // console.log(labelVariants({ variant, size, className }))
+    // console.log(cn(labelVariants({ variant, size, className })))
     return (
       <View className="mb-2">
         <Text

+ 4 - 0
mini/src/pages/index/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { View, Text } from '@tarojs/components'
 import { TabBarLayout } from '@/layouts/tab-bar-layout'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 
 const HomePage: React.FC = () => {
   return (
@@ -9,6 +11,8 @@ const HomePage: React.FC = () => {
         <Text className="text-2xl font-bold text-gray-900">首页</Text>
         <View className="mt-4">
           <Text className="text-gray-600">欢迎来到首页!</Text>
+          <Label>abc</Label>
+          <Input />
         </View>
       </View>
     </TabBarLayout>

+ 12 - 2
mini/src/utils/cn.ts

@@ -1,6 +1,16 @@
 import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from '@weapp-tailwindcss/merge'
+// @ts-ignore
+import { create } from '@weapp-tailwindcss/merge/v4';
+import Taro from '@tarojs/taro';
+
+// 根据当前环境判断是否需要转义
+const isWeapp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP;
+
+const { twMerge } = create({
+  // 仅在小程序环境下启用转义,H5环境禁用
+  disableEscape: !isWeapp
+});
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(inputs)
 }