diff --git a/frontend/ops_uniapp/.workbuddy/expert-history.json b/frontend/ops_uniapp/.workbuddy/expert-history.json
index 94599c8..85bcbba 100644
--- a/frontend/ops_uniapp/.workbuddy/expert-history.json
+++ b/frontend/ops_uniapp/.workbuddy/expert-history.json
@@ -13,5 +13,5 @@
       }
     ]
   },
-  "lastUpdated": 1776168445262
+  "lastUpdated": 1776172462417
 }
\ No newline at end of file
diff --git a/frontend/ops_uniapp/App.vue b/frontend/ops_uniapp/App.vue
index e7339c3..a617340 100644
--- a/frontend/ops_uniapp/App.vue
+++ b/frontend/ops_uniapp/App.vue
@@ -4,14 +4,21 @@ export default {
     console.log('App Launch')
     
     // 初始化全局 API 地址
-    const DEFAULT_API_URL = 'http://192.168.13.105/api/'
-    const apiUrl = uni.getStorageSync('apiUrl') || DEFAULT_API_URL
+    const apiUrl = uni.getStorageSync('apiUrl')
     if (!getApp().globalData) {
       getApp().globalData = {}
     }
-    getApp().globalData.BASE_URL = apiUrl
     
-    this.checkLoginStatus()
+    // H5 端使用相对路径走代理，其他端使用完整 URL
+    // #ifdef H5
+    getApp().globalData.BASE_URL = '/api/'
+    // #endif
+    // #ifndef H5
+    getApp().globalData.BASE_URL = apiUrl
+    // #endif
+    
+    // 暂时禁用自动跳转登录
+    // this.checkLoginStatus()
   },
   onShow: function() {
     console.log('App Show')
@@ -21,10 +28,8 @@ export default {
   },
   methods: {
     checkLoginStatus() {
-      // 检查登录状态
       const sessionCookie = uni.getStorageSync('sessionCookie')
       if (!sessionCookie) {
-        // 未登录，跳转到登录页
         uni.reLaunch({
           url: '/pages/login/login'
         })
@@ -35,9 +40,129 @@ export default {
 </script>
 
 <style>
-/*每个页面公共css */
+/* 全局样式 */
 page {
   background-color: #f5f5f5;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #1f2937;
 }
+
+/* 移除默认按钮样式 */
+button::after {
+  border: none;
+}
+
+/* Flex 布局类 */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-1 { flex: 1; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.items-end { align-items: flex-end; }
+
+/* Grid */
+.grid { display: flex; flex-wrap: wrap; }
+.grid-cols-4 > view, .grid-cols-4 > .grid-item { width: 25%; }
+
+/* Gap */
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+
+/* Spacing */
+.mx-4 { margin-left: 1rem; margin-right: 1rem; }
+.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-4 { margin-top: 1rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
+.ml-2 { margin-left: 0.5rem; }
+.ml-4 { margin-left: 1rem; }
+.mr-4 { margin-right: 1rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.pb-8 { padding-bottom: 2rem; }
+
+/* 文字 */
+.text-sm { font-size: 0.875rem; }
+.text-base { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }
+.text-3xl { font-size: 1.875rem; }
+.text-4xl { font-size: 2.25rem; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.text-center { text-align: center; }
+.tracking-wider { letter-spacing: 0.05em; }
+
+/* 圆角 */
+.rounded-xl { border-radius: 0.75rem; }
+.rounded-2xl { border-radius: 1rem; }
+.rounded-3xl { border-radius: 1.5rem; }
+.rounded-full { border-radius: 9999px; }
+
+/* 阴影 */
+.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
+.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
+
+/* 背景 */
+.bg-white { background-color: #ffffff; }
+.bg-gray-100 { background-color: #f3f4f6; }
+.bg-gradient-to-br { background: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
+.bg-gradient-to-r { background: linear-gradient(to right, var(--tw-gradient-stops)); }
+
+/* 渐变颜色 - 需要在元素上直接指定 */
+.from-purple-500 { --tw-gradient-from: #8b5cf6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0)); }
+.to-purple-700 { --tw-gradient-to: #7c3aed; }
+.to-purple-800 { --tw-gradient-stops: var(--tw-gradient-from), #6b21a8; }
+
+/* 文字颜色 */
+.text-white { color: #ffffff; }
+.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
+.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
+.text-white\/40 { color: rgba(255, 255, 255, 0.4); }
+.text-gray-100 { color: #f3f4f6; }
+.text-gray-800 { color: #1f2937; }
+.text-gray-600 { color: #4b5563; }
+.text-gray-500 { color: #6b7280; }
+.text-gray-400 { color: #9ca3af; }
+
+/* 宽度高度 */
+.w-full { width: 100%; }
+.w-20 { width: 5rem; }
+.h-10 { height: 2.5rem; }
+.h-11 { height: 2.75rem; }
+.h-12 { height: 3rem; }
+.h-20 { height: 5rem; }
+.min-h-screen { min-height: 100vh; }
+
+/* 边框 */
+.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
+.border-gray-100 { border-color: #f3f4f6; }
+.border-2 { border-width: 2px; border-style: solid; }
+
+/* Overflow */
+.overflow-hidden { overflow: hidden; }
+
+/* 位置 */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.right-3 { right: 0.75rem; }
+.bottom-2\.5 { bottom: 0.625rem; }
+
+/* 其他 */
+.cursor-pointer { cursor: pointer; }
+.border { border-width: 1px; border-style: solid; }
 </style>
diff --git a/frontend/ops_uniapp/locales/en.js b/frontend/ops_uniapp/locales/en.js
index b30284c..ce7d82b 100644
--- a/frontend/ops_uniapp/locales/en.js
+++ b/frontend/ops_uniapp/locales/en.js
@@ -20,6 +20,8 @@ export default {
     ordered: 'Ordered',
     arrived: 'Arrived',
     received: 'Received',
+    pleaseLogin: 'Please login first',
+    login: 'Login',
   },
   // 登录页
   login: {
diff --git a/frontend/ops_uniapp/locales/zh.js b/frontend/ops_uniapp/locales/zh.js
index 3a7bd3d..2234012 100644
--- a/frontend/ops_uniapp/locales/zh.js
+++ b/frontend/ops_uniapp/locales/zh.js
@@ -20,6 +20,8 @@ export default {
     ordered: '已下单',
     arrived: '已到达',
     received: '已收件',
+    pleaseLogin: '请先登录',
+    login: '登 录',
   },
   // 登录页
   login: {
diff --git a/frontend/ops_uniapp/manifest.json b/frontend/ops_uniapp/manifest.json
index 83f1292..2eb784d 100644
--- a/frontend/ops_uniapp/manifest.json
+++ b/frontend/ops_uniapp/manifest.json
@@ -5,6 +5,23 @@
     "versionName" : "1.0.0",
     "versionCode" : "100",
     "transformPx" : false,
+    /* H5特有相关 */
+    "h5": {
+        "devServer": {
+            "https": false,
+            "port": 5173,
+            "proxy": {
+                "/api": {
+                    "target": "http://192.168.13.105",
+                    "changeOrigin": true,
+                    "secure": false
+                }
+            }
+        },
+        "router": {
+            "mode": "hash"
+        }
+    },
     /* 5+App特有相关 */
     "app-plus" : {
         "usingComponents" : true,
@@ -113,4 +130,5 @@
     },
     "vueVersion" : "3",
     "locale" : "auto"
+
 }
diff --git a/frontend/ops_uniapp/pages/index/index.vue b/frontend/ops_uniapp/pages/index/index.vue
index 83c0bf4..c0c7cb3 100644
--- a/frontend/ops_uniapp/pages/index/index.vue
+++ b/frontend/ops_uniapp/pages/index/index.vue
@@ -1,82 +1,123 @@
 <template>
-  <view class="index-container">
-    <!-- 顶部标题 -->
-    <view class="header">
-      <text class="title">{{ t('index.welcome') }}</text>
-      <text class="subtitle">{{ t('index.subtitle') }}</text>
-    </view>
-
-    <!-- 订单统计卡片 -->
-    <view class="stats-grid">
-      <view class="stat-card" @click="goToOrders('pending')">
-        <text class="stat-num">{{ stats.pending }}</text>
-        <text class="stat-label">{{ t('index.pending') }}</text>
-      </view>
-      <view class="stat-card" @click="goToOrders('ordered')">
-        <text class="stat-num">{{ stats.ordered }}</text>
-        <text class="stat-label">{{ t('index.ordered') }}</text>
-      </view>
-      <view class="stat-card" @click="goToOrders('arrived')">
-        <text class="stat-num">{{ stats.arrived }}</text>
-        <text class="stat-label">{{ t('index.arrived') }}</text>
-      </view>
-      <view class="stat-card" @click="goToOrders('received')">
-        <text class="stat-num">{{ stats.received }}</text>
-        <text class="stat-label">{{ t('index.received') }}</text>
-      </view>
-    </view>
-
-    <!-- 快捷操作 -->
-    <view class="section">
-      <text class="section-title">{{ t('index.quickActions') }}</text>
-      <view class="action-list">
-        <view class="action-item" @click="goToOrders('all')">
-          <text class="action-icon">📋</text>
-          <text class="action-text">{{ t('index.allOrders') }}</text>
-          <text class="action-arrow">→</text>
-        </view>
-        <view class="action-item" @click="goToAddOrder">
-          <text class="action-icon">➕</text>
-          <text class="action-text">{{ t('index.addOrder') }}</text>
-          <text class="action-arrow">→</text>
-        </view>
-        <view class="action-item" @click="goToSchedule">
-          <text class="action-icon">📅</text>
-          <text class="action-text">{{ t('index.schedule') }}</text>
-          <text class="action-arrow">→</text>
-        </view>
-      </view>
-    </view>
-
-    <!-- 语言切换入口 -->
-    <view class="section">
-      <view class="lang-card" @click="switchLang">
-        <text class="lang-icon">🌐</text>
-        <view class="lang-info">
-          <text class="lang-title">{{ t('index.language') }}</text>
-          <text class="lang-value">{{ locale === 'zh' ? '中文' : 'English' }}</text>
-        </view>
-        <text class="action-arrow">→</text>
-      </view>
-    </view>
-
-    <!-- 退出登录 -->
-    <view class="logout-section">
-      <button class="logout-btn" @click="handleLogout">
-        {{ t('index.logout') }}
+  <view class="min-h-screen" :style="{ paddingTop: statusBarHeight + 'px' }">
+    <!-- 未登录状态 -->
+    <view v-if="!isLoggedIn" class="flex flex-col items-center justify-center px-6" style="min-height: 80vh">
+      <text class="text-6xl mb-6">🔐</text>
+      <text class="block text-xl font-semibold text-center mb-8" style="color: #1f2937">{{ t('index.pleaseLogin') }}</text>
+      <button
+        class="w-full max-w-xs h-12 rounded-full flex items-center justify-center font-semibold text-base"
+        :style="{ background: 'linear-gradient(to right, #667eea, #764ba2)', color: '#fff' }"
+        @click="goToLogin"
+      >
+        {{ t('index.login') }}
       </button>
     </view>
+
+    <!-- 已登录状态 -->
+    <template v-else>
+      <!-- 顶部标题 -->
+      <view class="header mx-4 mt-4 rounded-3xl p-8 mb-6" :style="{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }">
+        <text class="block text-3xl font-bold text-white">{{ t('index.welcome') }}</text>
+        <text class="block text-base text-white/80 mt-2">{{ t('index.subtitle') }}</text>
+      </view>
+
+      <!-- 订单统计卡片 -->
+      <view class="grid grid-cols-4 gap-3 mx-4 mb-6">
+        <view class="stat-card rounded-2xl p-4 text-center shadow-sm" @click="goToOrders('pending')">
+          <text class="block text-3xl font-bold" style="color: #667eea">{{ stats.pending }}</text>
+          <text class="block text-sm mt-2" style="color: #6b7280">{{ t('index.pending') }}</text>
+        </view>
+        <view class="stat-card rounded-2xl p-4 text-center shadow-sm" @click="goToOrders('ordered')">
+          <text class="block text-3xl font-bold" style="color: #667eea">{{ stats.ordered }}</text>
+          <text class="block text-sm mt-2" style="color: #6b7280">{{ t('index.ordered') }}</text>
+        </view>
+        <view class="stat-card rounded-2xl p-4 text-center shadow-sm" @click="goToOrders('arrived')">
+          <text class="block text-3xl font-bold" style="color: #667eea">{{ stats.arrived }}</text>
+          <text class="block text-sm mt-2" style="color: #6b7280">{{ t('index.arrived') }}</text>
+        </view>
+        <view class="stat-card rounded-2xl p-4 text-center shadow-sm" @click="goToOrders('received')">
+          <text class="block text-3xl font-bold" style="color: #667eea">{{ stats.received }}</text>
+          <text class="block text-sm mt-2" style="color: #6b7280">{{ t('index.received') }}</text>
+        </view>
+      </view>
+
+      <!-- 快捷操作 -->
+      <view class="mx-4 mb-6">
+        <text class="block text-xl font-semibold mb-4" style="color: #1f2937">{{ t('index.quickActions') }}</text>
+        <view class="bg-white rounded-2xl overflow-hidden shadow-sm">
+          <view class="action-item flex items-center p-6 border-b border-gray-100" @click="goToOrders('all')">
+            <text class="text-2xl mr-4">📋</text>
+            <text class="flex-1 text-base" style="color: #1f2937">{{ t('index.allOrders') }}</text>
+            <text class="text-base" style="color: #d1d5db">→</text>
+          </view>
+          <view class="action-item flex items-center p-6 border-b border-gray-100" @click="goToAddOrder">
+            <text class="text-2xl mr-4">➕</text>
+            <text class="flex-1 text-base" style="color: #1f2937">{{ t('index.addOrder') }}</text>
+            <text class="text-base" style="color: #d1d5db">→</text>
+          </view>
+          <view class="action-item flex items-center p-6" @click="goToSchedule">
+            <text class="text-2xl mr-4">📅</text>
+            <text class="flex-1 text-base" style="color: #1f2937">{{ t('index.schedule') }}</text>
+            <text class="text-base" style="color: #d1d5db">→</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 语言切换入口 -->
+      <view class="mx-4 mb-6">
+        <view class="bg-white rounded-2xl p-6 flex items-center shadow-sm" @click="switchLang">
+          <text class="text-2xl mr-4">🌐</text>
+          <view class="flex-1">
+            <text class="block text-base" style="color: #1f2937">{{ t('index.language') }}</text>
+            <text class="block text-sm mt-1" style="color: #6b7280">{{ locale === 'zh' ? '中文' : 'English' }}</text>
+          </view>
+          <text class="text-base" style="color: #d1d5db">→</text>
+        </view>
+      </view>
+
+      <!-- 退出登录 -->
+      <view class="mx-4 pb-8">
+        <button class="w-full h-11 rounded-full text-center text-lg" 
+          style="background: #fff; color: #e53935" @click="handleLogout">
+          {{ t('index.logout') }}
+        </button>
+      </view>
+    </template>
   </view>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { setLocale, getCurrentLocale } from '../../locales/index.js'
 
 const { t, locale } = useI18n()
 
-// 统计数据
+const statusBarHeight = ref(20)
+const isLoggedIn = ref(false)
+
+// API 请求封装，解决路径拼接问题
+const request = (path, method = 'GET', data = {}) => {
+  return new Promise((resolve, reject) => {
+    // 确保 BASE_URL 不以 / 结尾
+    const baseUrl = (getApp().globalData.BASE_URL || '').replace(/\/$/, '')
+    // 确保 path 以 / 开头
+    const fullPath = path.startsWith('/') ? path : '/' + path
+    
+    uni.request({
+      url: baseUrl + fullPath,
+      method,
+      data,
+      header: {
+        'Content-Type': 'application/json',
+        'Cookie': uni.getStorageSync('sessionCookie') || ''
+      },
+      success: (res) => resolve(res),
+      fail: (err) => reject(err)
+    })
+  })
+}
+
 const stats = reactive({
   pending: 0,
   ordered: 0,
@@ -84,50 +125,42 @@ const stats = reactive({
   received: 0
 })
 
-// 获取订单统计
 const fetchStats = () => {
-  uni.request({
-    url: getApp().globalData.BASE_URL + '/purchase/getordercount',
-    method: 'POST',
-    header: {
-      'Content-Type': 'application/json',
-      'Cookie': uni.getStorageSync('sessionCookie') || ''
-    },
-    success: (res) => {
-      if (res.data.code === 0 && res.data.data) {
-        stats.pending = res.data.data.pending || 0
-        stats.ordered = res.data.data.ordered || 0
-        stats.arrived = res.data.data.arrived || 0
-        stats.received = res.data.data.received || 0
-      }
+  request('/purchase/getordercount', 'POST').then((res) => {
+    if (res.data.code === 0 && res.data.data) {
+      stats.pending = res.data.data.pending || 0
+      stats.ordered = res.data.data.ordered || 0
+      stats.arrived = res.data.data.arrived || 0
+      stats.received = res.data.data.received || 0
     }
+  }).catch(console.error)
+}
+
+const goToLogin = () => {
+  uni.navigateTo({
+    url: '/pages/login/login'
   })
 }
 
-// 跳转订单列表
 const goToOrders = (status) => {
   const url = status === 'all' ? '/pages/order/list' : `/pages/order/list?status=${status}`
   uni.navigateTo({ url })
 }
 
-// 跳转新增订单
 const goToAddOrder = () => {
   uni.navigateTo({ url: '/pages/order/add' })
 }
 
-// 跳转日程
 const goToSchedule = () => {
   uni.navigateTo({ url: '/pages/schedule/schedule' })
 }
 
-// 切换语言
 const switchLang = () => {
   const newLang = locale.value === 'zh' ? 'en' : 'zh'
   setLocale(newLang)
   locale.value = newLang
 }
 
-// 退出登录
 const handleLogout = () => {
   uni.showModal({
     title: t('index.logoutConfirm'),
@@ -136,173 +169,40 @@ const handleLogout = () => {
       if (res.confirm) {
         uni.removeStorageSync('sessionCookie')
         uni.removeStorageSync('userInfo')
-        uni.reLaunch({
-          url: '/pages/login/login'
-        })
+        isLoggedIn.value = false
       }
     }
   })
 }
 
-// 生命周期
 onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = systemInfo.statusBarHeight || 20
+  
   locale.value = getCurrentLocale()
-  fetchStats()
+  
+  // 检查登录状态
+  const sessionCookie = uni.getStorageSync('sessionCookie')
+  isLoggedIn.value = !!sessionCookie
+  
+  // 已登录才获取数据
+  if (isLoggedIn.value) {
+    fetchStats()
+  }
+})
+
+onUnmounted(() => {
+  uni.$off('localeChanged')
 })
 </script>
 
-<style lang="scss" scoped>
-.index-container {
+<style scoped>
+.min-h-screen {
   min-height: 100vh;
   background-color: #f5f5f5;
-  padding: 20rpx 30rpx;
-  padding-bottom: 140rpx;
 }
 
-.header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 24rpx;
-  padding: 40rpx 30rpx;
-  margin-bottom: 30rpx;
-}
-
-.title {
-  display: block;
-  font-size: 44rpx;
-  font-weight: 700;
-  color: #fff;
-}
-
-.subtitle {
-  display: block;
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
-  margin-top: 8rpx;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20rpx;
-  margin-bottom: 30rpx;
-}
-
-.stat-card {
-  background-color: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx 16rpx;
-  text-align: center;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-
-.stat-num {
-  display: block;
-  font-size: 40rpx;
-  font-weight: 700;
-  color: #667eea;
-}
-
-.stat-label {
-  display: block;
-  font-size: 22rpx;
-  color: #999;
-  margin-top: 8rpx;
-}
-
-.section {
-  margin-bottom: 30rpx;
-}
-
-.section-title {
-  display: block;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 20rpx;
-}
-
-.action-list {
-  background-color: #fff;
-  border-radius: 16rpx;
-  overflow: hidden;
-}
-
-.action-item {
-  display: flex;
-  align-items: center;
-  padding: 32rpx 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-  
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.action-icon {
-  font-size: 40rpx;
-  margin-right: 20rpx;
-}
-
-.action-text {
-  flex: 1;
-  font-size: 30rpx;
-  color: #333;
-}
-
-.action-arrow {
-  font-size: 28rpx;
-  color: #ccc;
-}
-
-.lang-card {
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  border-radius: 16rpx;
-  padding: 32rpx 30rpx;
-}
-
-.lang-icon {
-  font-size: 40rpx;
-  margin-right: 20rpx;
-}
-
-.lang-info {
-  flex: 1;
-}
-
-.lang-title {
-  display: block;
-  font-size: 30rpx;
-  color: #333;
-}
-
-.lang-value {
-  display: block;
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 4rpx;
-}
-
-.logout-section {
-  margin-top: 40rpx;
-  padding-bottom: 40rpx;
-}
-
-.logout-btn {
-  width: 100%;
-  height: 88rpx;
-  background-color: #fff;
-  color: #e53935;
-  font-size: 32rpx;
-  border-radius: 44rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-
-  &::after {
-    border: none;
-  }
-}
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
 </style>
diff --git a/frontend/ops_uniapp/pages/login/login.vue b/frontend/ops_uniapp/pages/login/login.vue
index ca33ce7..9531854 100644
--- a/frontend/ops_uniapp/pages/login/login.vue
+++ b/frontend/ops_uniapp/pages/login/login.vue
@@ -1,67 +1,70 @@
 <template>
-  <view class="login-container">
+  <view class="min-h-screen bg-gradient-to-br from-purple-500 to-purple-800 px-6" :style="{ paddingTop: statusBarHeight + 'px' }">
     <!-- 语言切换 -->
-    <view class="lang-switch">
+    <view class="flex justify-center items-center py-4">
       <text 
-        class="lang-btn" 
-        :class="{ active: locale === 'zh' }"
+        class="text-sm px-2"
+        :class="locale === 'zh' ? 'text-white font-semibold' : 'text-white/60'"
         @click="switchLang('zh')"
       >中文</text>
-      <text class="lang-divider">|</text>
+      <text class="text-white/40 mx-1">|</text>
       <text 
-        class="lang-btn" 
-        :class="{ active: locale === 'en' }"
+        class="text-sm px-2"
+        :class="locale === 'en' ? 'text-white font-semibold' : 'text-white/60'"
         @click="switchLang('en')"
       >EN</text>
     </view>
 
     <!-- Logo 区域 -->
-    <view class="logo-section">
-      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
-      <text class="app-name">OPS</text>
-      <text class="app-desc">{{ t('login.title') }}</text>
+    <view class="flex flex-col items-center mb-16">
+      <image class="w-20 h-20 rounded-2xl bg-white shadow-lg" src="/static/logo.png" mode="aspectFit"></image>
+      <text class="text-4xl font-bold text-white mt-4 tracking-wider">OPS</text>
+      <text class="text-sm text-white/80 mt-2">{{ t('login.title') }}</text>
     </view>
 
     <!-- 登录表单 -->
-    <view class="form-section">
-      <view class="input-group">
-        <text class="input-label">{{ t('login.username') }}</text>
+    <view class="bg-white rounded-3xl p-8 shadow-xl">
+      <view class="mb-6">
+        <text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('login.username') }}</text>
         <input
-          class="input-field"
+          class="w-full h-11 rounded-xl px-4 text-base"
+          style="background: #f3f4f6; color: #1f2937"
           type="text"
           v-model="form.username"
           :placeholder="t('login.usernamePlaceholder')"
-          placeholder-class="placeholder"
+          placeholder-class="placeholder-gray"
           @confirm="handleLogin"
         />
       </view>
 
-      <view class="input-group">
-        <text class="input-label">{{ t('login.password') }}</text>
+      <view class="mb-6 relative">
+        <text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('login.password') }}</text>
         <input
-          class="input-field"
+          class="w-full h-11 rounded-xl px-4 text-base pr-10"
+          style="background: #f3f4f6; color: #1f2937"
           :type="showPassword ? 'text' : 'password'"
           v-model="form.password"
           :placeholder="t('login.passwordPlaceholder')"
-          placeholder-class="placeholder"
+          placeholder-class="placeholder-gray"
           @confirm="handleLogin"
         />
-        <view class="password-toggle" @click="showPassword = !showPassword">
+        <view class="absolute right-3 bottom-2.5 text-xl" @click="showPassword = !showPassword">
           <text>{{ showPassword ? '👁️' : '👁️‍🗨️' }}</text>
         </view>
       </view>
 
-      <view class="remember-row">
+      <view class="mb-8 flex items-center">
         <checkbox-group @change="onRememberChange">
-          <label class="remember-label">
-            <checkbox value="1" :checked="form.remember" color="#007AFF" />
-            <text>{{ t('login.rememberMe') }}</text>
+          <label class="flex items-center text-sm" style="color: #6b7280">
+            <checkbox value="1" :checked="form.remember" color="#667eea" />
+            <text class="ml-2">{{ t('login.rememberMe') }}</text>
           </label>
         </checkbox-group>
       </view>
 
       <button
-        class="login-btn"
+        class="w-full h-12 rounded-full flex items-center justify-center font-semibold text-lg"
+        :style="{ background: 'linear-gradient(to right, #667eea, #764ba2)', color: '#fff' }"
         :loading="loading"
         :disabled="loading"
         @click="handleLogin"
@@ -69,29 +72,27 @@
         {{ loading ? t('login.logging') : t('login.loginBtn') }}
       </button>
 
-      <view class="error-tip" v-if="errorMsg">
-        <text>{{ errorMsg }}</text>
+      <view class="mt-4 p-4 rounded-xl text-center" style="background: #fef2f2" v-if="errorMsg">
+        <text class="text-sm" style="color: #ef4444">{{ errorMsg }}</text>
       </view>
     </view>
 
     <!-- 底部信息 -->
-    <view class="footer-section">
-      <text class="footer-text">{{ t('login.registerLink') }}</text>
-      <navigator url="/pages/register/register" class="link">{{ t('register.title') }}</navigator>
+    <view class="flex justify-center items-end pb-8 mt-8">
+      <text class="text-sm text-white/80">{{ t('login.registerLink') }}</text>
+      <navigator url="/pages/register/register" class="text-sm text-white font-semibold ml-1">{{ t('register.title') }}</navigator>
     </view>
-	
-	
   </view>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { setLocale, getCurrentLocale } from '../../locales/index.js'
 
 const { t, locale } = useI18n()
 
-// 响应式数据
+const statusBarHeight = ref(20)
 const form = reactive({
   username: '',
   password: '',
@@ -102,18 +103,15 @@ const showPassword = ref(false)
 const loading = ref(false)
 const errorMsg = ref('')
 
-// 切换语言
 const switchLang = (lang) => {
   setLocale(lang)
   locale.value = lang
 }
 
-// 记住密码勾选
 const onRememberChange = (e) => {
   form.remember = e.detail.value.length > 0
 }
 
-// 表单验证
 const validate = () => {
   if (!form.username.trim()) {
     errorMsg.value = t('login.usernameRequired')
@@ -127,7 +125,6 @@ const validate = () => {
   return true
 }
 
-// 登录处理
 const handleLogin = () => {
   if (!validate()) return
 
@@ -147,14 +144,10 @@ const handleLogin = () => {
     },
     success: (res) => {
       if (res.data.code === 0 && res.data.data && res.data.data.cookie) {
-        // 登录成功
         const cookie = res.data.data.cookie
-
-        // 保存 cookie 到本地
         uni.setStorageSync('sessionCookie', cookie.Value)
         uni.setStorageSync('userInfo', res.data.data)
 
-        // 处理记住密码
         if (form.remember) {
           uni.setStorageSync('savedUsername', form.username)
           uni.setStorageSync('savedRemember', true)
@@ -169,14 +162,12 @@ const handleLogin = () => {
           duration: 1500
         })
 
-        // 跳转到首页
         setTimeout(() => {
           uni.switchTab({
             url: '/pages/index/index'
           })
         }, 1500)
       } else {
-        // 登录失败
         const msgMap = {
           userNameNoFund: t('login.usernameNotFound'),
           userPassIncorrect: t('login.passwordIncorrect'),
@@ -196,12 +187,12 @@ const handleLogin = () => {
   })
 }
 
-// 生命周期
 onMounted(() => {
-  // 同步当前语言
+  const systemInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = systemInfo.statusBarHeight || 20
+  
   locale.value = getCurrentLocale()
   
-  // 从本地存储读取记住的登录状态
   const savedUsername = uni.getStorageSync('savedUsername')
   const savedRemember = uni.getStorageSync('savedRemember')
   if (savedUsername && savedRemember) {
@@ -209,7 +200,6 @@ onMounted(() => {
     form.remember = true
   }
 
-  // 监听语言切换
   uni.$on('localeChanged', (lang) => {
     locale.value = lang
   })
@@ -220,175 +210,8 @@ onUnmounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.login-container {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 80rpx 60rpx;
-  display: flex;
-  flex-direction: column;
-}
-
-.lang-switch {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20rpx;
-}
-
-.lang-btn {
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.6);
-  padding: 8rpx 16rpx;
-  
-  &.active {
-    color: #fff;
-    font-weight: 600;
-  }
-}
-
-.lang-divider {
-  color: rgba(255, 255, 255, 0.4);
-  margin: 0 8rpx;
-}
-
-.logo-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 80rpx;
-}
-
-.logo {
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 32rpx;
-  background-color: #fff;
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
-}
-
-.app-name {
-  font-size: 56rpx;
-  font-weight: 700;
-  color: #fff;
-  margin-top: 24rpx;
-  letter-spacing: 4rpx;
-}
-
-.app-desc {
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
-  margin-top: 8rpx;
-}
-
-.form-section {
-  background-color: #fff;
-  border-radius: 24rpx;
-  padding: 48rpx 40rpx;
-  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
-}
-
-.input-group {
-  margin-bottom: 32rpx;
-  position: relative;
-}
-
-.input-label {
-  display: block;
-  font-size: 28rpx;
-  color: #333;
-  font-weight: 500;
-  margin-bottom: 16rpx;
-}
-
-.input-field {
-  width: 100%;
-  height: 88rpx;
-  background-color: #f5f5f5;
-  border-radius: 16rpx;
-  padding: 0 32rpx;
-  font-size: 30rpx;
-  color: #333;
-}
-
-.placeholder {
-  color: #999;
-}
-
-.password-toggle {
-  position: absolute;
-  right: 24rpx;
-  bottom: 24rpx;
-  font-size: 36rpx;
-}
-
-.remember-row {
-  margin-bottom: 40rpx;
-}
-
-.remember-label {
-  display: flex;
-  align-items: center;
-  font-size: 28rpx;
-  color: #666;
-}
-
-.login-btn {
-  width: 100%;
-  height: 96rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
-  font-size: 34rpx;
-  font-weight: 600;
-  border-radius: 48rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-
-  &::after {
-    border: none;
-  }
-
-  &:active {
-    opacity: 0.9;
-  }
-
-  &[disabled] {
-    opacity: 0.6;
-  }
-}
-
-.error-tip {
-  margin-top: 24rpx;
-  padding: 20rpx;
-  background-color: #fff5f5;
-  border-radius: 12rpx;
-  text-align: center;
-
-  text {
-    color: #e53935;
-    font-size: 26rpx;
-  }
-}
-
-.footer-section {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  padding-bottom: 40rpx;
-}
-
-.footer-text {
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.link {
-  font-size: 28rpx;
-  color: #fff;
-  font-weight: 600;
-  margin-left: 8rpx;
+<style>
+.placeholder-gray {
+  color: #9ca3af;
 }
 </style>
diff --git a/frontend/ops_uniapp/pages/register/register.vue b/frontend/ops_uniapp/pages/register/register.vue
index ffdf962..a3355f0 100644
--- a/frontend/ops_uniapp/pages/register/register.vue
+++ b/frontend/ops_uniapp/pages/register/register.vue
@@ -1,78 +1,84 @@
 <template>
-  <view class="register-container">
+  <view class="min-h-screen bg-gradient-to-br from-purple-500 to-purple-800 px-6" :style="{ paddingTop: statusBarHeight + 'px' }">
     <!-- 语言切换 -->
-    <view class="lang-switch">
+    <view class="flex justify-center items-center py-4">
       <text 
-        class="lang-btn" 
-        :class="{ active: locale === 'zh' }"
+        class="text-sm px-2"
+        :class="locale === 'zh' ? 'text-white font-semibold' : 'text-white/60'"
         @click="switchLang('zh')"
       >中文</text>
-      <text class="lang-divider">|</text>
+      <text class="text-white/40 mx-1">|</text>
       <text 
-        class="lang-btn" 
-        :class="{ active: locale === 'en' }"
+        class="text-sm px-2"
+        :class="locale === 'en' ? 'text-white font-semibold' : 'text-white/60'"
         @click="switchLang('en')"
       >EN</text>
     </view>
 
     <!-- 返回按钮 -->
-    <view class="back-btn" @click="goBack">
-      <text>← {{ t('common.back') }}</text>
+    <view class="mb-8 py-3" @click="goBack">
+      <text class="text-lg text-white">← {{ t('common.back') }}</text>
     </view>
 
-    <view class="form-section">
-      <text class="title">{{ t('register.title') }}</text>
+    <!-- 注册表单 -->
+    <view class="bg-white rounded-3xl p-8 shadow-xl">
+      <text class="block text-3xl font-bold text-center mb-8" style="color: #1f2937">{{ t('register.title') }}</text>
 
-      <view class="input-group">
-        <text class="input-label">{{ t('register.username') }}</text>
+      <view class="mb-5">
+        <text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('register.username') }}</text>
         <input
-          class="input-field"
+          class="w-full h-11 rounded-xl px-4 text-base"
+          style="background: #f3f4f6; color: #1f2937"
           type="text"
           v-model="form.username"
           :placeholder="t('register.usernamePlaceholder')"
-          placeholder-class="placeholder"
+          placeholder-class="placeholder-gray"
         />
       </view>
 
-      <view class="input-group">
-        <text class="input-label">{{ t('register.email') }}</text>
+      <view class="mb-5">
+        <text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('register.email') }}</text>
         <input
-          class="input-field"
+          class="w-full h-11 rounded-xl px-4 text-base"
+          style="background: #f3f4f6; color: #1f2937"
           type="email"
           v-model="form.email"
           :placeholder="t('register.emailPlaceholder')"
-          placeholder-class="placeholder"
+          placeholder-class="placeholder-gray"
         />
       </view>
 
-      <view class="input-group">
-        <text class="input-label">{{ t('register.password') }}</text>
+      <view class="mb-5">
+        <text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('register.password') }}</text>
         <input
-          class="input-field"
+          class="w-full h-11 rounded-xl px-4 text-base"
+          style="background: #f3f4f6; color: #1f2937"
           :type="showPassword ? 'text' : 'password'"
           v-model="form.password"
           :placeholder="t('register.passwordPlaceholder')"
-          placeholder-class="placeholder"
+          placeholder-class="placeholder-gray"
         />
       </view>
 
-      <view class="input-group">
-        <text class="input-label">{{ t('register.confirmPassword') }}</text>
+      <view class="mb-5">
+        <text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('register.confirmPassword') }}</text>
         <input
-          class="input-field"
+          class="w-full h-11 rounded-xl px-4 text-base"
+          style="background: #f3f4f6; color: #1f2937"
           :type="showPassword ? 'text' : 'password'"
           v-model="form.confirmPassword"
           :placeholder="t('register.confirmPlaceholder')"
-          placeholder-class="placeholder"
+          placeholder-class="placeholder-gray"
         />
       </view>
 
-      <view class="password-toggle" @click="showPassword = !showPassword">
-        <text>{{ showPassword ? '👁️ ' : '👁️‍🗨️ ' }}{{ showPassword ? t('register.showPassword') : t('register.hidePassword') }}</text>
+      <view class="mb-6" @click="showPassword = !showPassword">
+        <text class="text-sm" style="color: #6b7280">{{ showPassword ? '👁️ ' : '👁️‍🗨️ ' }}{{ showPassword ? t('register.showPassword') : t('register.hidePassword') }}</text>
       </view>
 
       <button
-        class="register-btn"
+        class="w-full h-12 rounded-full flex items-center justify-center font-semibold text-lg"
+        :style="{ background: 'linear-gradient(to right, #667eea, #764ba2)', color: '#fff' }"
         :loading="loading"
         :disabled="loading"
         @click="handleRegister"
@@ -80,8 +86,8 @@
         {{ loading ? t('register.registering') : t('register.registerBtn') }}
       </button>
 
-      <view class="error-tip" v-if="errorMsg">
-        <text>{{ errorMsg }}</text>
+      <view class="mt-4 p-4 rounded-xl text-center" style="background: #fef2f2" v-if="errorMsg">
+        <text class="text-sm" style="color: #ef4444">{{ errorMsg }}</text>
       </view>
     </view>
   </view>
@@ -94,7 +100,7 @@ import { setLocale, getCurrentLocale } from '../../locales/index.js'
 
 const { t, locale } = useI18n()
 
-// 响应式数据
+const statusBarHeight = ref(20)
 const form = reactive({
   username: '',
   email: '',
@@ -106,18 +112,15 @@ const showPassword = ref(false)
 const loading = ref(false)
 const errorMsg = ref('')
 
-// 切换语言
 const switchLang = (lang) => {
   setLocale(lang)
   locale.value = lang
 }
 
-// 返回上一页
 const goBack = () => {
   uni.navigateBack()
 }
 
-// 表单验证
 const validate = () => {
   if (!form.username.trim()) {
     errorMsg.value = t('register.usernameRequired')
@@ -127,7 +130,6 @@ const validate = () => {
     errorMsg.value = t('register.emailRequired')
     return false
   }
-  // 简单邮箱验证
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
   if (!emailRegex.test(form.email)) {
     errorMsg.value = t('register.emailInvalid')
@@ -149,7 +151,6 @@ const validate = () => {
   return true
 }
 
-// 注册处理
 const handleRegister = () => {
   if (!validate()) return
 
@@ -197,8 +198,10 @@ const handleRegister = () => {
   })
 }
 
-// 生命周期
 onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = systemInfo.statusBarHeight || 20
+  
   locale.value = getCurrentLocale()
 
   uni.$on('localeChanged', (lang) => {
@@ -211,133 +214,8 @@ onUnmounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.register-container {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 40rpx 60rpx;
-}
-
-.lang-switch {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20rpx;
-}
-
-.lang-btn {
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.6);
-  padding: 8rpx 16rpx;
-  
-  &.active {
-    color: #fff;
-    font-weight: 600;
-  }
-}
-
-.lang-divider {
-  color: rgba(255, 255, 255, 0.4);
-  margin: 0 8rpx;
-}
-
-.back-btn {
-  margin-bottom: 40rpx;
-  padding: 16rpx 0;
-
-  text {
-    color: #fff;
-    font-size: 32rpx;
-  }
-}
-
-.form-section {
-  background-color: #fff;
-  border-radius: 24rpx;
-  padding: 48rpx 40rpx;
-  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
-}
-
-.title {
-  display: block;
-  font-size: 44rpx;
-  font-weight: 700;
-  color: #333;
-  text-align: center;
-  margin-bottom: 48rpx;
-}
-
-.input-group {
-  margin-bottom: 28rpx;
-}
-
-.input-label {
-  display: block;
-  font-size: 28rpx;
-  color: #333;
-  font-weight: 500;
-  margin-bottom: 16rpx;
-}
-
-.input-field {
-  width: 100%;
-  height: 88rpx;
-  background-color: #f5f5f5;
-  border-radius: 16rpx;
-  padding: 0 32rpx;
-  font-size: 30rpx;
-  color: #333;
-}
-
-.placeholder {
-  color: #999;
-}
-
-.password-toggle {
-  margin-bottom: 32rpx;
-
-  text {
-    color: #666;
-    font-size: 26rpx;
-  }
-}
-
-.register-btn {
-  width: 100%;
-  height: 96rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
-  font-size: 34rpx;
-  font-weight: 600;
-  border-radius: 48rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-
-  &::after {
-    border: none;
-  }
-
-  &:active {
-    opacity: 0.9;
-  }
-
-  &[disabled] {
-    opacity: 0.6;
-  }
-}
-
-.error-tip {
-  margin-top: 24rpx;
-  padding: 20rpx;
-  background-color: #fff5f5;
-  border-radius: 12rpx;
-  text-align: center;
-
-  text {
-    color: #e53935;
-    font-size: 26rpx;
-  }
+<style>
+.placeholder-gray {
+  color: #9ca3af;
 }
 </style>
diff --git a/frontend/ops_uniapp/pages/settings/apiConfig.vue b/frontend/ops_uniapp/pages/settings/apiConfig.vue
index 1db8b9d..464dc1f 100644
--- a/frontend/ops_uniapp/pages/settings/apiConfig.vue
+++ b/frontend/ops_uniapp/pages/settings/apiConfig.vue
@@ -1,34 +1,37 @@
 <template>
-  <view class="settings-container">
+  <view class="min-h-screen" :style="{ paddingTop: statusBarHeight + 'px' }">
     <!-- 页面标题 -->
-    <view class="page-header">
-      <text class="page-title">{{ t('apiConfig.title') }}</text>
+    <view class="mx-4 mt-4 mb-6">
+      <text class="block text-2xl font-bold" style="color: #1f2937">{{ t('apiConfig.title') }}</text>
     </view>
 
-    <!-- API 地址配置 -->
-    <view class="config-section">
-      <text class="section-title">{{ t('apiConfig.apiUrl') }}</text>
+    <!-- #ifndef H5 -->
+    <!-- API 地址配置 - 非H5端显示 -->
+    <view class="mx-4 mb-4 bg-white rounded-2xl p-6 shadow-sm">
+      <text class="block text-base font-semibold mb-4" style="color: #1f2937">{{ t('apiConfig.apiUrl') }}</text>
       
-      <view class="input-group">
+      <view class="mb-4">
         <input
-          class="input-field"
+          class="w-full h-11 rounded-xl px-4 text-base"
+          style="background: #f3f4f6; color: #1f2937"
           type="text"
           v-model="apiUrl"
           :placeholder="t('apiConfig.apiUrlPlaceholder')"
-          placeholder-class="placeholder"
+          placeholder-class="placeholder-gray"
         />
       </view>
 
-      <view class="info-text">
-        <text>{{ t('apiConfig.format') }}: http://192.168.1.100/api/</text>
+      <view class="mb-3">
+        <text class="block text-sm" style="color: #9ca3af">{{ t('apiConfig.format') }}: http://192.168.1.100/api/</text>
       </view>
 
-      <view class="info-text">
-        <text>{{ t('apiConfig.current') }}: {{ currentApiUrl }}</text>
+      <view class="mb-4">
+        <text class="block text-sm" style="color: #9ca3af">{{ t('apiConfig.current') }}: {{ currentApiUrl }}</text>
       </view>
 
       <button
-        class="save-btn"
+        class="w-full h-11 rounded-full flex items-center justify-center font-semibold text-base"
+        :style="{ background: 'linear-gradient(to right, #667eea, #764ba2)', color: '#fff' }"
         :loading="saving"
         @click="saveApiUrl"
       >
@@ -36,47 +39,47 @@
       </button>
     </view>
 
-    <!-- 测试连接 -->
-    <view class="config-section">
-      <text class="section-title">{{ t('apiConfig.testConnection') }}</text>
-      
-      <button
-        class="test-btn"
-        :loading="testing"
-        :disabled="!apiUrl"
-        @click="testConnection"
-      >
-        {{ testing ? t('apiConfig.testing') : t('apiConfig.testBtn') }}
-      </button>
-
-      <view class="test-result" v-if="testResult !== null">
-        <text 
-          class="result-text"
-          :class="testResult ? 'success' : 'failed'"
-        >
-          {{ testResult ? t('apiConfig.connectionSuccess') : t('apiConfig.connectionFailed') }}
-        </text>
-      </view>
-    </view>
+   
+    
+    <!-- #endif -->
+	<view class="mx-4 mb-4 bg-white rounded-2xl p-6 shadow-sm">
+	  <text class="block text-base font-semibold mb-4" style="color: #1f2937">{{ t('apiConfig.testConnection') }}</text>
+	  
+	  <button
+	    class="w-full h-10 rounded-full flex items-center justify-center text-base"
+	    :style="{ background: testResult === true ? '#dcfce7' : testResult === false ? '#fef2f2' : '#f3f4f6', color: testResult === true ? '#22c55e' : testResult === false ? '#ef4444' : '#1f2937' }"
+	    :loading="testing"
+	    :disabled="!apiUrl"
+	    @click="testConnection"
+	  >
+	    {{ testing ? t('apiConfig.testing') : t('apiConfig.testBtn') }}
+	  </button>
+	
+	  <view class="mt-4 text-center" v-if="testResult !== null">
+	    <text class="text-base font-medium" :style="{ color: testResult ? '#22c55e' : '#ef4444' }">
+	      {{ testResult ? t('apiConfig.connectionSuccess') : t('apiConfig.connectionFailed') }}
+	    </text>
+	  </view>
+	</view>
 
     <!-- 语言切换 -->
-    <view class="config-section">
-      <text class="section-title">{{ t('apiConfig.language') }}</text>
+    <view class="mx-4 mb-8 bg-white rounded-2xl p-6 shadow-sm">
+      <text class="block text-base font-semibold mb-4" style="color: #1f2937">{{ t('apiConfig.language') }}</text>
       
-      <view class="lang-options">
+      <view class="flex gap-4">
         <view 
-          class="lang-item"
-          :class="{ active: currentLang === 'zh' }"
+          class="flex-1 h-11 rounded-xl flex items-center justify-center border-2"
+          :style="currentLang === 'zh' ? { borderColor: '#667eea', backgroundColor: '#f0f5ff' } : { borderColor: 'transparent', backgroundColor: '#f3f4f6' }"
           @click="switchLang('zh')"
         >
-          <text>🇨🇳 {{ t('apiConfig.zh') }}</text>
+          <text class="text-base" :style="{ color: currentLang === 'zh' ? '#667eea' : '#1f2937' }">🇨🇳 中文</text>
         </view>
         <view 
-          class="lang-item"
-          :class="{ active: currentLang === 'en' }"
+          class="flex-1 h-11 rounded-xl flex items-center justify-center border-2"
+          :style="currentLang === 'en' ? { borderColor: '#667eea', backgroundColor: '#f0f5ff' } : { borderColor: 'transparent', backgroundColor: '#f3f4f6' }"
           @click="switchLang('en')"
         >
-          <text>🇺🇸 {{ t('apiConfig.en') }}</text>
+          <text class="text-base" :style="{ color: currentLang === 'en' ? '#667eea' : '#1f2937' }">🇺🇸 English</text>
         </view>
       </view>
     </view>
@@ -89,19 +92,17 @@ import { useI18n } from 'vue-i18n'
 
 const { t, locale } = useI18n()
 
-// 响应式数据
+const statusBarHeight = ref(20)
 const apiUrl = ref('')
 const saving = ref(false)
 const testing = ref(false)
 const testResult = ref(null)
 const currentLang = ref('zh')
 
-// 计算属性
 const currentApiUrl = computed(() => {
   return getApp().globalData.BASE_URL || t('apiConfig.notSet')
 })
 
-// 切换语言
 const switchLang = (lang) => {
   locale.value = lang
   currentLang.value = lang
@@ -109,7 +110,6 @@ const switchLang = (lang) => {
   uni.$emit('localeChanged', lang)
 }
 
-// 保存 API 地址
 const saveApiUrl = () => {
   if (!apiUrl.value) {
     uni.showToast({
@@ -119,7 +119,6 @@ const saveApiUrl = () => {
     return
   }
 
-  // 验证 URL 格式
   let url = apiUrl.value.trim()
   if (!url.startsWith('http://') && !url.startsWith('https://')) {
     url = 'http://' + url
@@ -130,11 +129,16 @@ const saveApiUrl = () => {
 
   saving.value = true
   
-  // 保存到本地
+  // 保存原始 URL 到本地存储
   uni.setStorageSync('apiUrl', url)
   
-  // 更新全局配置
+  // H5 端使用相对路径走代理，其他端使用完整 URL
+  // #ifdef H5
+  getApp().globalData.BASE_URL = '/api/'
+  // #endif
+  // #ifndef H5
   getApp().globalData.BASE_URL = url
+  // #endif
 
   setTimeout(() => {
     saving.value = false
@@ -145,18 +149,15 @@ const saveApiUrl = () => {
   }, 500)
 }
 
-// 测试连接
 const testConnection = () => {
   testing.value = true
   testResult.value = null
 
-  // 使用相对路径，走代理
   uni.request({
-    url: '/api/',
+    url: getApp().globalData.BASE_URL,
     method: 'GET',
     timeout: 5000,
     success: (res) => {
-      // 成功返回 {"err_code":0,"err_msg":"apiOK"}
       if (res.data && res.data.err_code === 0) {
         testResult.value = true
       } else {
@@ -172,9 +173,10 @@ const testConnection = () => {
   })
 }
 
-// 生命周期
 onMounted(() => {
-  // 读取当前配置
+  const systemInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = systemInfo.statusBarHeight || 20
+  
   const savedApiUrl = uni.getStorageSync('apiUrl')
   if (savedApiUrl) {
     apiUrl.value = savedApiUrl
@@ -186,159 +188,13 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.settings-container {
+<style scoped>
+.min-h-screen {
   min-height: 100vh;
   background-color: #f5f5f5;
-  padding: 40rpx 30rpx;
-  padding-bottom: 140rpx;
 }
 
-.page-header {
-  margin-bottom: 40rpx;
-}
-
-.page-title {
-  font-size: 40rpx;
-  font-weight: 700;
-  color: #333;
-}
-
-.config-section {
-  background-color: #fff;
-  border-radius: 16rpx;
-  padding: 32rpx;
-  margin-bottom: 30rpx;
-}
-
-.section-title {
-  display: block;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 24rpx;
-}
-
-.input-group {
-  margin-bottom: 20rpx;
-}
-
-.input-field {
-  width: 100%;
-  height: 88rpx;
-  background-color: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 0 24rpx;
-  font-size: 30rpx;
-  color: #333;
-}
-
-.placeholder {
-  color: #999;
-}
-
-.info-text {
-  margin-top: 16rpx;
-  
-  text {
-    font-size: 24rpx;
-    color: #999;
-  }
-}
-
-.save-btn {
-  width: 100%;
-  height: 88rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
-  font-size: 32rpx;
-  font-weight: 600;
-  border-radius: 44rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 30rpx;
-  border: none;
-
-  &::after {
-    border: none;
-  }
-
-  &:active {
-    opacity: 0.9;
-  }
-
-  &[disabled] {
-    opacity: 0.6;
-  }
-}
-
-.test-btn {
-  width: 100%;
-  height: 80rpx;
-  background-color: #f0f0f0;
-  color: #333;
-  font-size: 30rpx;
-  border-radius: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-
-  &::after {
-    border: none;
-  }
-
-  &:active {
-    background-color: #e0e0e0;
-  }
-
-  &[disabled] {
-    opacity: 0.5;
-  }
-}
-
-.test-result {
-  margin-top: 24rpx;
-  text-align: center;
-}
-
-.result-text {
-  font-size: 28rpx;
-  font-weight: 500;
-
-  &.success {
-    color: #52c41a;
-  }
-
-  &.failed {
-    color: #ff4d4f;
-  }
-}
-
-.lang-options {
-  display: flex;
-  gap: 20rpx;
-}
-
-.lang-item {
-  flex: 1;
-  height: 88rpx;
-  background-color: #f5f5f5;
-  border-radius: 12rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2rpx solid transparent;
-
-  &.active {
-    background-color: #f0f5ff;
-    border-color: #667eea;
-  }
-
-  text {
-    font-size: 28rpx;
-    color: #333;
-  }
+.placeholder-gray {
+  color: #9ca3af;
 }
 </style>
diff --git a/frontend/ops_uniapp/uni.scss b/frontend/ops_uniapp/uni.scss
deleted file mode 100644
index b9249e9..0000000
--- a/frontend/ops_uniapp/uni.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
- */
-
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
-
-/* 颜色变量 */
-
-/* 行为相关颜色 */
-$uni-color-primary: #007aff;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
-
-/* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
-$uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
-
-/* 背景颜色 */
-$uni-bg-color:#ffffff;
-$uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
-
-/* 边框颜色 */
-$uni-border-color:#c8c7cc;
-
-/* 尺寸变量 */
-
-/* 文字尺寸 */
-$uni-font-size-sm:12px;
-$uni-font-size-base:14px;
-$uni-font-size-lg:16px;
-
-/* 图片尺寸 */
-$uni-img-size-sm:20px;
-$uni-img-size-base:26px;
-$uni-img-size-lg:40px;
-
-/* Border Radius */
-$uni-border-radius-sm: 2px;
-$uni-border-radius-base: 3px;
-$uni-border-radius-lg: 6px;
-$uni-border-radius-circle: 50%;
-
-/* 水平间距 */
-$uni-spacing-row-sm: 5px;
-$uni-spacing-row-base: 10px;
-$uni-spacing-row-lg: 15px;
-
-/* 垂直间距 */
-$uni-spacing-col-sm: 4px;
-$uni-spacing-col-base: 8px;
-$uni-spacing-col-lg: 12px;
-
-/* 透明度 */
-$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
-
-/* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:20px;
-$uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:26px;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
diff --git a/frontend/ops_uniapp/vite.config.js b/frontend/ops_uniapp/vite.config.js
index cd18790..7cfd460 100644
--- a/frontend/ops_uniapp/vite.config.js
+++ b/frontend/ops_uniapp/vite.config.js
@@ -7,8 +7,7 @@ export default defineConfig({
     proxy: {
       '/api': {
         target: 'http://192.168.13.105',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '/api')
+        changeOrigin: true
       }
     }
   }