diff --git a/project.config.json b/project.config.json
index 278d859..4c18b08 100644
--- a/project.config.json
+++ b/project.config.json
@@ -1,8 +1,8 @@
 {
 	"miniprogramRoot": "dist/",
 	"projectname": "template-10589",
-	"description": "南南佐顿门窗",
-	"appid": "wx644669e2da8d6519",
+	"description": "网神泛能运维",
+	"appid": "wxb69547a97b5f5931",
 	"setting": {
 		"urlCheck": true,
 		"es6": false,
diff --git a/src/app.config.ts b/src/app.config.ts
index 265a76b..da68cfe 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -3,7 +3,8 @@ export default defineAppConfig({
     'pages/index/index',
     'pages/message/message',
     'pages/toolbox/toolbox',
-    'pages/user/user'
+    'pages/user/user',
+    'pages/feature/index'
   ],
   "subpackages": [
     {
diff --git a/src/assets/tabbar/message-active.png b/src/assets/tabbar/message-active.png
new file mode 100644
index 0000000..91a99b9
Binary files /dev/null and b/src/assets/tabbar/message-active.png differ
diff --git a/src/assets/tabbar/message.png b/src/assets/tabbar/message.png
new file mode 100644
index 0000000..91a99b9
Binary files /dev/null and b/src/assets/tabbar/message.png differ
diff --git a/src/assets/tabbar/toolbox-active.png b/src/assets/tabbar/toolbox-active.png
new file mode 100644
index 0000000..91a99b9
Binary files /dev/null and b/src/assets/tabbar/toolbox-active.png differ
diff --git a/src/assets/tabbar/toolbox.png b/src/assets/tabbar/toolbox.png
new file mode 100644
index 0000000..91a99b9
Binary files /dev/null and b/src/assets/tabbar/toolbox.png differ
diff --git a/src/pages/feature/index.config.ts b/src/pages/feature/index.config.ts
new file mode 100644
index 0000000..cb30b0d
--- /dev/null
+++ b/src/pages/feature/index.config.ts
@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationBarTitleText: '功能',
+  navigationBarBackgroundColor: '#1890FF',
+  navigationBarTextStyle: 'white'
+})
+
diff --git a/src/pages/feature/index.scss b/src/pages/feature/index.scss
new file mode 100644
index 0000000..00b835a
--- /dev/null
+++ b/src/pages/feature/index.scss
@@ -0,0 +1,29 @@
+page {
+  background-color: #f8f8f8;
+  min-height: 100vh;
+}
+
+.feature-page {
+  padding: 16px;
+}
+
+.feature-card {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.feature-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0a2e5a;
+  margin-bottom: 8px;
+}
+
+.feature-desc {
+  font-size: 14px;
+  color: #666666;
+  line-height: 22px;
+}
+
diff --git a/src/pages/feature/index.tsx b/src/pages/feature/index.tsx
new file mode 100644
index 0000000..695c119
--- /dev/null
+++ b/src/pages/feature/index.tsx
@@ -0,0 +1,33 @@
+import Taro, { useRouter } from '@tarojs/taro'
+import { useEffect, useMemo } from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.scss'
+
+function FeaturePage() {
+  const { params } = useRouter()
+
+  const title = useMemo(() => {
+    const raw = params?.title || '功能'
+    try {
+      return decodeURIComponent(raw)
+    } catch {
+      return raw
+    }
+  }, [params?.title])
+
+  useEffect(() => {
+    Taro.setNavigationBarTitle({ title })
+  }, [title])
+
+  return (
+    <View className="feature-page">
+      <View className="feature-card">
+        <Text className="feature-title">{title}</Text>
+        <Text className="feature-desc">这是占位页面，可在此接入实际业务功能与路由。</Text>
+      </View>
+    </View>
+  )
+}
+
+export default FeaturePage
+
diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts
index 09f9fa8..941de64 100644
--- a/src/pages/index/index.config.ts
+++ b/src/pages/index/index.config.ts
@@ -1,5 +1,6 @@
 export default definePageConfig({
-  navigationBarTitleText: 'shopLnk.cn - 数灵云店',
-  navigationBarTextStyle: 'black',
+  navigationBarTitleText: '工具箱',
+  navigationBarTextStyle: 'white',
+  navigationBarBackgroundColor: '#1890FF',
   navigationStyle: 'custom'
 })
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 0ac3be2..0ac591f 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -5,7 +5,6 @@ page {
 
 .container {
   min-height: 100vh;
-  padding-bottom: 50px; /* 为底部导航栏留出空间 */
 }
 
 /* 顶部导航栏 */
@@ -29,51 +28,54 @@ page {
 }
 
 .navbar-icon {
-  width: 24px;
-  height: 24px;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.customer-service-icon {
-  width: 24px;
-  height: 24px;
+.content {
+  padding: 16px 16px 24px;
 }
 
-/* 品牌标识卡片 */
-.brand-card {
+/* 公司信息卡片 */
+.company-card {
   background-color: #FFFFFF;
   border-radius: 12px;
-  margin: 20px 16px;
-  padding: 20px;
+  padding: 16px;
   display: flex;
   align-items: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  margin-bottom: 16px;
 }
 
-.brand-logo {
+.company-logo {
   width: 60px;
   height: 60px;
   margin-right: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #1890FF, #40A9FF);
 }
 
-.logo-image {
-  width: 100%;
-  height: 100%;
+.company-logo-text {
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 1px;
 }
 
-.brand-text {
+.company-text {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
-.brand-name {
+.company-name {
   color: #0A2E5A;
   font-size: 20px;
   font-weight: bold;
@@ -81,7 +83,7 @@ page {
   line-height: 28px;
 }
 
-.brand-en {
+.company-en {
   color: #666666;
   font-size: 12px;
   font-family: 'Helvetica Neue', 'Roboto', sans-serif;
@@ -89,16 +91,14 @@ page {
   margin-top: 4px;
 }
 
-/* 功能入口网格 */
-.menu-grid {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 16px;
-  gap: 16px;
+/* 功能模块网格 */
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
 }
 
-.menu-item {
-  width: calc(25% - 12px);
+.feature-item {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -108,11 +108,7 @@ page {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
 }
 
-.menu-item-single {
-  width: calc(25% - 12px);
-}
-
-.menu-icon-wrapper {
+.feature-icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
@@ -122,12 +118,7 @@ page {
   margin-bottom: 8px;
 }
 
-.menu-icon {
-  width: 28px;
-  height: 28px;
-}
-
-.menu-name {
+.feature-title {
   color: #333333;
   font-size: 14px;
   text-align: center;
@@ -135,62 +126,8 @@ page {
   font-family: 'PingFang SC', 'HarmonyOS Sans', 'Source Han Sans', sans-serif;
 }
 
-/* 底部导航栏 */
-.tab-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 50px;
-  background-color: #F8F8F8;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  border-top: 1px solid #E8E8E8;
-  z-index: 1000;
-}
-
-.tab-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.tab-icon {
-  width: 24px;
-  height: 24px;
-  margin-bottom: 2px;
-}
-
-.tab-icon-active {
-  /* 选中状态的图标 */
-}
-
-.tab-text {
-  color: #999999;
-  font-size: 12px;
-  font-family: 'PingFang SC', 'HarmonyOS Sans', 'Source Han Sans', sans-serif;
-}
-
-.tab-text-active {
-  color: #1890FF;
-  font-weight: bold;
-}
-
-.tab-item.active {
-  position: relative;
-}
-
-.tab-item.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 30px;
-  height: 2px;
-  background-color: #1890FF;
+@media (max-width: 360px) {
+  .feature-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 67f1843..1d45560 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,157 +1,123 @@
+import { useEffect, useMemo, useState } from 'react';
 import Taro from '@tarojs/taro';
-import { View, Image, Text } from '@tarojs/components';
+import { View, Text } from '@tarojs/components';
+import { Apps, File, Location, Orderlist, People, Power, Service } from '@nutui/icons-react-taro';
 import './index.scss';
 
-// 功能入口数据
-const menuItems = [
-  {
-    id: 1,
-    name: '综合运维工单',
-    icon: 'https://oss.wsdns.cn/20260311/icon-workorder.svg',
-    bgColor: '#1890FF',
-  },
-  {
-    id: 2,
-    name: '缺陷管理',
-    icon: 'https://oss.wsdns.cn/20260311/icon-defect.svg',
-    bgColor: '#FA8C16',
-  },
-  {
-    id: 3,
-    name: '应急报修',
-    icon: 'https://oss.wsdns.cn/20260311/icon-emergency.svg',
-    bgColor: '#F59E0B',
-  },
-  {
-    id: 4,
-    name: '自动派单配置',
-    icon: 'https://oss.wsdns.cn/20260311/icon-dispatch.svg',
-    bgColor: '#1890FF',
-  },
-  {
-    id: 5,
-    name: '人员轨迹信息',
-    icon: 'https://oss.wsdns.cn/20260311/icon-tracker.svg',
-    bgColor: '#1890FF',
-  },
-  {
-    id: 6,
-    name: '任务工单',
-    icon: 'https://oss.wsdns.cn/20260311/icon-task.svg',
-    bgColor: '#1890FF',
-  },
-];
+type FeatureKey =
+  | 'opsWorkorder'
+  | 'defect'
+  | 'emergencyRepair'
+  | 'autoDispatch'
+  | 'staffTrack'
+  | 'taskWorkorder';
+
+type Feature = {
+  key: FeatureKey;
+  title: string;
+  color: string;
+  icon: JSX.Element;
+};
 
 function Home() {
-  // 处理客服点击
+  const [statusBarHeight, setStatusBarHeight] = useState<number>(0);
+
+  useEffect(() => {
+    Taro.getSystemInfo({
+      success: (res) => setStatusBarHeight(res.statusBarHeight ?? 0),
+      fail: () => setStatusBarHeight(0),
+    });
+  }, []);
+
+  const features: Feature[] = useMemo(
+    () => [
+      {
+        key: 'opsWorkorder',
+        title: '综合运维工单',
+        color: '#1890FF',
+        icon: <File size={22} color="#FFFFFF" />,
+      },
+      {
+        key: 'defect',
+        title: '缺陷管理',
+        color: '#FA8C16',
+        icon: <Apps size={22} color="#FFFFFF" />,
+      },
+      {
+        key: 'emergencyRepair',
+        title: '应急报修',
+        color: '#F59E0B',
+        icon: <Power size={22} color="#FFFFFF" />,
+      },
+      {
+        key: 'autoDispatch',
+        title: '自动派单配置',
+        color: '#1890FF',
+        icon: <Orderlist size={22} color="#FFFFFF" />,
+      },
+      {
+        key: 'staffTrack',
+        title: '人员轨迹信息',
+        color: '#1890FF',
+        icon: <People size={22} color="#FFFFFF" />,
+      },
+      {
+        key: 'taskWorkorder',
+        title: '任务工单',
+        color: '#1890FF',
+        icon: <Location size={22} color="#FFFFFF" />,
+      },
+    ],
+    []
+  );
+
   const handleCustomerService = () => {
-    Taro.showToast({
-      title: '联系客服',
-      icon: 'none',
-    });
+    // 微信小程序可替换为 openCustomerServiceChat
+    Taro.showToast({ title: '联系客服', icon: 'none' });
   };
 
-  // 处理菜单点击
-  const handleMenuClick = (item: typeof menuItems[0]) => {
-    Taro.showToast({
-      title: `点击了${item.name}`,
-      icon: 'none',
-    });
-  };
-
-  // 处理底部导航切换
-  const handleTabChange = (tab: string) => {
-    if (tab === 'toolbox') {
-      // 当前页面
-      return;
-    }
-    Taro.switchTab({
-      url: `/pages/${tab}/index`,
+  const handleFeatureClick = (feature: Feature) => {
+    Taro.navigateTo({
+      url: `/pages/feature/index?key=${feature.key}&title=${encodeURIComponent(feature.title)}`,
     });
   };
 
   return (
     <View className="container">
       {/* 顶部导航栏 */}
-      <View className="navbar">
+      <View className="navbar" style={{ paddingTop: `${statusBarHeight}px` }}>
         <Text className="navbar-title">工具箱</Text>
         <View className="navbar-icon" onClick={handleCustomerService}>
-          <Image
-            className="customer-service-icon"
-            src="https://oss.wsdns.cn/20260311/icon-customer-service.svg"
-            mode="aspectFit"
-          />
+          <Service size={22} color="#FFFFFF" />
         </View>
       </View>
 
-      {/* 品牌标识卡片 */}
-      <View className="brand-card">
-        <View className="brand-logo">
-          <Image
-            className="logo-image"
-            src="https://oss.wsdns.cn/20260311/logo-wangshen.png"
-            mode="aspectFit"
-          />
-        </View>
-        <View className="brand-text">
-          <Text className="brand-name">网神环保科技</Text>
-          <Text className="brand-en">WANG SHEN HUAN BAO TECHNOLOGY</Text>
-        </View>
-      </View>
-
-      {/* 功能入口网格 */}
-      <View className="menu-grid">
-        {menuItems.map((item, index) => (
-          <View
-            key={item.id}
-            className={`menu-item ${index >= 4 ? 'menu-item-single' : ''}`}
-            onClick={() => handleMenuClick(item)}
-          >
-            <View className="menu-icon-wrapper" style={{ backgroundColor: item.bgColor }}>
-              <Image
-                className="menu-icon"
-                src={item.icon}
-                mode="aspectFit"
-              />
-            </View>
-            <Text className="menu-name">{item.name}</Text>
+      <View className="content">
+        {/* 公司信息卡片 */}
+        <View className="company-card">
+          <View className="company-logo">
+            <Text className="company-logo-text">网神</Text>
           </View>
-        ))}
-      </View>
+          <View className="company-text">
+            <Text className="company-name">网神环保科技</Text>
+            <Text className="company-en">WANG SHEN HUAN BAO TECHNOLOGY</Text>
+          </View>
+        </View>
 
-      {/* 底部导航栏 */}
-      <View className="tab-bar">
-        <View className="tab-item" onClick={() => handleTabChange('index')}>
-          <Image
-            className="tab-icon"
-            src="https://oss.wsdns.cn/20260311/icon-home.svg"
-            mode="aspectFit"
-          />
-          <Text className="tab-text">首页</Text>
-        </View>
-        <View className="tab-item" onClick={() => handleTabChange('message')}>
-          <Image
-            className="tab-icon"
-            src="https://oss.wsdns.cn/20260311/icon-message.svg"
-            mode="aspectFit"
-          />
-          <Text className="tab-text">消息</Text>
-        </View>
-        <View className="tab-item active" onClick={() => handleTabChange('toolbox')}>
-          <Image
-            className="tab-icon tab-icon-active"
-            src="https://oss.wsdns.cn/20260311/icon-toolbox-active.svg"
-            mode="aspectFit"
-          />
-          <Text className="tab-text tab-text-active">工具箱</Text>
-        </View>
-        <View className="tab-item" onClick={() => handleTabChange('user')}>
-          <Image
-            className="tab-icon"
-            src="https://oss.wsdns.cn/20260311/icon-user.svg"
-            mode="aspectFit"
-          />
-          <Text className="tab-text">我的</Text>
+        {/* 功能模块网格 */}
+        <View className="feature-grid">
+          {features.map((feature) => (
+            <View
+              key={feature.key}
+              className="feature-item"
+              onClick={() => handleFeatureClick(feature)}
+            >
+              <View className="feature-icon" style={{ backgroundColor: feature.color }}>
+                {feature.icon}
+              </View>
+              <Text className="feature-title">{feature.title}</Text>
+            </View>
+          ))}
         </View>
       </View>
     </View>