feat(pages): 重构首页界面并新增功能模块页面

- 在 app.config.ts 中添加 pages/feature/index 页面路径 - 更新首页标题为"工具箱"，修改导航栏样式配置 - 移除首页底部导航栏相关样式和代码逻辑 - 重命名品牌标识卡片为公司信息卡片，调整样式布局 - 将功能入口网格改为功能模块网格，使用 CSS Grid 布局 - 替换功能图标为 NutUI 图标组件，优化图标展示 - 新增 pages/feature/index 页面及相关配置文件 - 实现动态功能页面，支持通过参数显示不同功能模块 - 调整项目配置信息，更新描述和应用ID
2026-03-11 19:07:23 +08:00
parent 610aded9d5
commit 9c7f99d4fb
12 changed files with 205 additions and 232 deletions
--- 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,
--- 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": [
    {
--- a/src/assets/tabbar/message-active.png
+++ b/src/assets/tabbar/message-active.png
--- a/src/assets/tabbar/message.png
+++ b/src/assets/tabbar/message.png
--- a/src/assets/tabbar/toolbox-active.png
+++ b/src/assets/tabbar/toolbox-active.png
--- a/src/assets/tabbar/toolbox.png
+++ b/src/assets/tabbar/toolbox.png
--- a/src/pages/feature/index.config.ts
+++ b/src/pages/feature/index.config.ts
@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationBarTitleText: '功能',
+  navigationBarBackgroundColor: '#1890FF',
+  navigationBarTextStyle: 'white'
+})
+
--- a/src/pages/feature/index.scss
+++ 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;
+}
+
--- a/src/pages/feature/index.tsx
+++ 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
+
--- 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'
 })
--- 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);
+  }
 }
--- 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>