✨ feat(mini): 集成Tailwind CSS并重构UI样式

- 安装@tailwindcss/postcss依赖包
- 配置webpack和postcss以支持Tailwind CSS
- 重构首页样式，使用Tailwind工具类替代传统CSS
- 优化用户界面，提升视觉层次感和交互体验
- 删除冗余的CSS文件，精简项目结构

💄 style(index): 使用Tailwind工具类重构页面样式

- 替换传统CSS类为Tailwind工具类
- 优化布局结构，使用grid和flex布局
- 统一颜色方案，使用Tailwind主题色
- 调整间距和边距，提升页面美观度
- 优化响应式设计，适配不同屏幕尺寸

mini/config/index.ts

@@ -52,10 +52,16 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => {
       },
       webpackChain(chain) {
         chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
-        chain.plugin('weapp-tailwindcss').use(UnifiedWebpackPluginV5, [{
-          appType: 'taro',
-          rem2rpx: true
-        }])
+        chain.merge({
+          plugin: {
+            install: {
+              plugin: UnifiedWebpackPluginV5,
+              args: [{
+                // 这里可以传参数
+              }]
+            }
+          }
+        })
       }
     },
     h5: {

mini/package.json

@@ -71,6 +71,7 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@tailwindcss/postcss": "^4.1.11",
     "@tarojs/cli": "4.1.4",
     "@tarojs/plugin-generator": "4.1.4",
     "@tarojs/taro-loader": "4.1.4",

mini/pnpm-lock.yaml

@@ -81,6 +81,9 @@ importers:
       '@pmmmwh/react-refresh-webpack-plugin':
         specifier: ^0.5.5
         version: 0.5.17(react-refresh@0.14.2)(type-fest@2.19.0)(webpack-dev-server@4.15.2(webpack@5.91.0(@swc/core@1.3.96)))(webpack@5.91.0(@swc/core@1.3.96))
+      '@tailwindcss/postcss':
+        specifier: ^4.1.11
+        version: 4.1.11
       '@tarojs/cli':
         specifier: 4.1.4
         version: 4.1.4
@@ -159,6 +162,10 @@ packages:
   '@adobe/css-tools@4.3.3':
     resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==}
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -1805,6 +1812,98 @@ packages:
   '@tailwindcss-mangle/shared@4.1.1':
     resolution: {integrity: sha512-bVRIDBJlo+ysYySVgP1GWC+uHQzlZi6w9Gsvm/UOUA9SXwzwUBlR+25YLJJ9MIT4oaHTK4a/w1kWKHRZnQDbhQ==}
 
+  '@tailwindcss/node@4.1.11':
+    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.11':
+    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.11':
+    resolution: {integrity: sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==}
+
   '@tarojs/api@4.1.4':
     resolution: {integrity: sha512-pIoP7TQLJSPtoCEQFY8qYllnPTH/K1Llz/nGQVWyVqMkKhK8HDpUlEqu21baR586AOrVxAWfmPD01n3XDm5AmA==}
     engines: {node: '>= 18'}
@@ -7277,6 +7376,8 @@ snapshots:
 
   '@adobe/css-tools@4.3.3': {}
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.12
@@ -8978,6 +9079,78 @@ snapshots:
 
   '@tailwindcss-mangle/shared@4.1.1': {}
 
+  '@tailwindcss/node@4.1.11':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.2
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.11
+
+  '@tailwindcss/oxide-android-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.11':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-arm64': 4.1.11
+      '@tailwindcss/oxide-darwin-x64': 4.1.11
+      '@tailwindcss/oxide-freebsd-x64': 4.1.11
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
+
+  '@tailwindcss/postcss@4.1.11':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.11
+      '@tailwindcss/oxide': 4.1.11
+      postcss: 8.5.6
+      tailwindcss: 4.1.11
+
   '@tarojs/api@4.1.4(@tarojs/runtime@4.1.4)(@tarojs/shared@4.1.4)':
     dependencies:
       '@tarojs/runtime': 4.1.4

mini/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    "@tailwindcss/postcss": {},
+  }
 }

mini/src/app.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "weapp-tailwindcss"

mini/src/pages/index/index.css

@@ -1,290 +0,0 @@
-/* 全局样式重置 */
-page {
-  background-color: #f5f5f5;
-}
-
-.index-container {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
-  padding: 32rpx;
-  box-sizing: border-box;
-}
-
-/* 用户已登录状态 */
-.user-welcome {
-  padding: 32rpx 0;
-}
-
-.user-card {
-  background: #ffffff;
-  border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  padding: 48rpx 32rpx;
-  margin-bottom: 32rpx;
-}
-
-.user-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 48rpx;
-}
-
-.user-avatar {
-  margin-right: 32rpx;
-}
-
-.avatar-image {
-  width: 128rpx;
-  height: 128rpx;
-  border-radius: 50%;
-  border: 4rpx solid #1890ff;
-  background: #f0f0f0;
-}
-
-.user-greeting {
-  flex: 1;
-}
-
-.welcome-text {
-  display: block;
-  font-size: 28rpx;
-  color: #8c8c8c;
-  margin-bottom: 8rpx;
-}
-
-.username {
-  display: block;
-  font-size: 36rpx;
-  font-weight: 600;
-  color: #262626;
-}
-
-.user-info {
-  margin-bottom: 48rpx;
-}
-
-.info-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24rpx 0;
-  border-bottom: 2rpx solid #f0f0f0;
-}
-
-.info-item:last-child {
-  border-bottom: none;
-}
-
-.info-label {
-  font-size: 28rpx;
-  color: #8c8c8c;
-}
-
-.info-value {
-  font-size: 28rpx;
-  color: #262626;
-  font-weight: 500;
-}
-
-.action-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 24rpx;
-}
-
-.action-button {
-  width: 100%;
-  height: 80rpx;
-  font-size: 32rpx;
-  font-weight: 500;
-  border-radius: 8rpx;
-  transition: opacity 0.2s ease;
-}
-
-.action-button:active {
-  opacity: 0.7;
-}
-
-.action-button.primary {
-  background: #1890ff;
-  color: #ffffff;
-  border: none;
-}
-
-.action-button.secondary {
-  background: #ffffff;
-  color: #1890ff;
-  border: 2rpx solid #1890ff;
-}
-
-.stats-section {
-  display: flex;
-  gap: 16rpx;
-  justify-content: space-between;
-}
-
-.stat-card {
-  flex: 1;
-  background: #ffffff;
-  border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  padding: 32rpx 24rpx;
-  text-align: center;
-}
-
-.stat-number {
-  display: block;
-  font-size: 48rpx;
-  font-weight: 600;
-  color: #1890ff;
-  margin-bottom: 8rpx;
-}
-
-.stat-label {
-  display: block;
-  font-size: 24rpx;
-  color: #8c8c8c;
-}
-
-/* 用户未登录状态 */
-.login-prompt {
-  padding: 32rpx 0;
-}
-
-.welcome-header {
-  text-align: center;
-  margin-bottom: 64rpx;
-}
-
-.welcome-icon {
-  width: 192rpx;
-  height: 192rpx;
-  margin-bottom: 32rpx;
-  border-radius: 16rpx;
-}
-
-.welcome-title {
-  display: block;
-  font-size: 36rpx;
-  font-weight: 600;
-  color: #262626;
-  margin-bottom: 16rpx;
-}
-
-.welcome-subtitle {
-  display: block;
-  font-size: 28rpx;
-  color: #8c8c8c;
-}
-
-.login-card {
-  background: #ffffff;
-  border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  padding: 48rpx 32rpx;
-  margin-bottom: 32rpx;
-}
-
-.login-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 24rpx;
-}
-
-.login-button {
-  width: 100%;
-  height: 80rpx;
-  font-size: 32rpx;
-  font-weight: 500;
-  border-radius: 8rpx;
-  transition: opacity 0.2s ease;
-}
-
-.login-button:active {
-  opacity: 0.7;
-}
-
-.login-button.primary {
-  background: #1890ff;
-  color: #ffffff;
-  border: none;
-}
-
-.login-button.secondary {
-  background: #ffffff;
-  color: #1890ff;
-  border: 2rpx solid #1890ff;
-}
-
-.features-section {
-  margin-top: 32rpx;
-}
-
-.features-title {
-  display: block;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #262626;
-  margin-bottom: 32rpx;
-  text-align: center;
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16rpx;
-}
-
-.feature-card {
-  background: #ffffff;
-  border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  padding: 32rpx 24rpx;
-  text-align: center;
-}
-
-.feature-icon {
-  font-size: 48rpx;
-  margin-bottom: 16rpx;
-}
-
-.feature-title {
-  display: block;
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #262626;
-  margin-bottom: 8rpx;
-}
-
-.feature-desc {
-  display: block;
-  font-size: 24rpx;
-  color: #8c8c8c;
-  line-height: 1.4;
-}
-
-/* 响应式设计 */
-@media screen and (max-width: 375rpx) {
-  .index-container {
-    padding: 24rpx;
-  }
-  
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media screen and (min-width: 768rpx) {
-  .index-container {
-    padding: 48rpx;
-  }
-  
-  .stats-section {
-    gap: 24rpx;
-  }
-  
-  .features-grid {
-    grid-template-columns: repeat(4, 1fr);
-    gap: 24rpx;
-  }
-}

mini/src/pages/index/index.tsx

@@ -56,47 +56,47 @@ export default function Index() {
   }
 
   return (
-    <View className="index-container">
+    <View className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       {user ? (
-        <View className="user-welcome">
-          <View className="user-card">
-            <View className="user-header">
-              <View className="user-avatar">
+        <View className="p-6">
+          <View className="bg-white rounded-2xl shadow-lg p-6 mb-6">
+            <View className="flex items-center mb-6">
+              <View className="w-20 h-20 rounded-full overflow-hidden mr-4">
                 <Image
-                  className="avatar-image"
+                  className="w-full h-full"
                   src={user.avatar || 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=160&h=160&fit=crop&crop=face'}
-                  mode="aspectFill"
+                  // mode="aspectFill"
                 />
               </View>
-              <View className="user-greeting">
-                <Text className="welcome-text">欢迎回来</Text>
-                <Text className="username">{user.username}</Text>
+              <View>
+                <Text className="text-gray-600 text-sm">欢迎回来</Text>
+                <Text className="text-2xl font-bold text-gray-900">{user.username}</Text>
               </View>
             </View>
             
-            <View className="user-info">
-              <View className="info-item">
-                <Text className="info-label">用户ID</Text>
-                <Text className="info-value">{user.id}</Text>
+            <View className="space-y-4 mb-6">
+              <View className="flex justify-between items-center py-3 border-b border-gray-100">
+                <Text className="text-gray-600">用户ID</Text>
+                <Text className="text-gray-900 font-mono">{user.id}</Text>
               </View>
               {user.email && (
-                <View className="info-item">
-                  <Text className="info-label">邮箱</Text>
-                  <Text className="info-value">{user.email}</Text>
+                <View className="flex justify-between items-center py-3 border-b border-gray-100">
+                  <Text className="text-gray-600">邮箱</Text>
+                  <Text className="text-gray-900">{user.email}</Text>
                 </View>
               )}
-              <View className="info-item">
-                <Text className="info-label">注册时间</Text>
-                <Text className="info-value">{new Date(user.createdAt).toLocaleDateString()}</Text>
+              <View className="flex justify-between items-center py-3">
+                <Text className="text-gray-600">注册时间</Text>
+                <Text className="text-gray-900">{new Date(user.createdAt).toLocaleDateString()}</Text>
               </View>
             </View>
             
-            <View className="action-buttons">
-              <Button className="action-button primary" type="primary" onClick={handleProfile}>
+            <View className="flex space-x-3">
+              <Button className="flex-1" type="primary" onClick={handleProfile}>
                 查看资料
               </Button>
               <Button
-                className="action-button secondary"
+                className="flex-1"
                 loading={loading}
                 onClick={handleLogout}
               >
@@ -105,44 +105,44 @@ export default function Index() {
             </View>
           </View>
           
-          <View className="stats-section">
-            <View className="stat-card">
-              <Text className="stat-number">1</Text>
-              <Text className="stat-label">今日访问</Text>
+          <View className="grid grid-cols-3 gap-4">
+            <View className="bg-white rounded-xl shadow-lg p-4 text-center">
+              <Text className="text-3xl font-bold text-blue-600 mb-1">1</Text>
+              <Text className="text-gray-600 text-sm">今日访问</Text>
             </View>
-            <View className="stat-card">
-              <Text className="stat-number">7</Text>
-              <Text className="stat-label">本周活跃</Text>
+            <View className="bg-white rounded-xl shadow-lg p-4 text-center">
+              <Text className="text-3xl font-bold text-green-600 mb-1">7</Text>
+              <Text className="text-gray-600 text-sm">本周活跃</Text>
             </View>
-            <View className="stat-card">
-              <Text className="stat-number">30</Text>
-              <Text className="stat-label">本月使用</Text>
+            <View className="bg-white rounded-xl shadow-lg p-4 text-center">
+              <Text className="text-3xl font-bold text-purple-600 mb-1">30</Text>
+              <Text className="text-gray-600 text-sm">本月使用</Text>
             </View>
           </View>
         </View>
       ) : (
-        <View className="login-prompt">
-          <View className="welcome-header">
+        <View className="p-6">
+          <View className="text-center mb-8">
             <Image
-              className="welcome-icon"
+              className="w-32 h-32 rounded-full mx-auto mb-4"
               src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=192&h=192&fit=crop"
-              // mode="aspectFit"
+              mode="aspectFit"
             />
-            <Text className="welcome-title">欢迎使用小程序</Text>
-            <Text className="welcome-subtitle">请先登录以使用完整功能</Text>
+            <Text className="text-3xl font-bold text-gray-900 mb-2">欢迎使用小程序</Text>
+            <Text className="text-gray-600 text-lg">请先登录以使用完整功能</Text>
           </View>
           
-          <View className="login-card">
-            <View className="login-buttons">
+          <View className="bg-white rounded-2xl shadow-lg p-6 mb-6">
+            <View className="space-y-4">
               <Button
-                className="login-button primary"
+                className="w-full"
                 type="primary"
                 onClick={handleLogin}
               >
                 立即登录
               </Button>
               <Button
-                className="login-button secondary"
+                className="w-full"
                 plain
                 onClick={goToRegister}
               >
@@ -151,28 +151,28 @@ export default function Index() {
             </View>
           </View>
           
-          <View className="features-section">
-            <Text className="features-title">功能特色</Text>
-            <View className="features-grid">
-              <View className="feature-card">
-                <View className="feature-icon">🔒</View>
-                <Text className="feature-title">安全认证</Text>
-                <Text className="feature-desc">多重加密保护账户安全</Text>
+          <View>
+            <Text className="text-xl font-bold text-gray-900 mb-4 block">功能特色</Text>
+            <View className="grid grid-cols-2 gap-4">
+              <View className="bg-white rounded-xl shadow-lg p-4">
+                <View className="text-2xl mb-2">🔒</View>
+                <Text className="font-bold text-gray-900 mb-1 block">安全认证</Text>
+                <Text className="text-gray-600 text-sm">多重加密保护账户安全</Text>
               </View>
-              <View className="feature-card">
-                <View className="feature-icon">👤</View>
-                <Text className="feature-title">用户管理</Text>
-                <Text className="feature-desc">完整的用户信息管理</Text>
+              <View className="bg-white rounded-xl shadow-lg p-4">
+                <View className="text-2xl mb-2">👤</View>
+                <Text className="font-bold text-gray-900 mb-1 block">用户管理</Text>
+                <Text className="text-gray-600 text-sm">完整的用户信息管理</Text>
               </View>
-              <View className="feature-card">
-                <View className="feature-icon">📱</View>
-                <Text className="feature-title">响应式设计</Text>
-                <Text className="feature-desc">完美适配各种设备</Text>
+              <View className="bg-white rounded-xl shadow-lg p-4">
+                <View className="text-2xl mb-2">📱</View>
+                <Text className="font-bold text-gray-900 mb-1 block">响应式设计</Text>
+                <Text className="text-gray-600 text-sm">完美适配各种设备</Text>
               </View>
-              <View className="feature-card">
-                <View className="feature-icon">⚡</View>
-                <Text className="feature-title">实时同步</Text>
-                <Text className="feature-desc">数据实时更新同步</Text>
+              <View className="bg-white rounded-xl shadow-lg p-4">
+                <View className="text-2xl mb-2">⚡</View>
+                <Text className="font-bold text-gray-900 mb-1 block">实时同步</Text>
+                <Text className="text-gray-600 text-sm">数据实时更新同步</Text>
               </View>
             </View>
           </View>