feat(app): 更新应用配置和页面结构

- 修改 app.config.ts 中的页面路由配置，将购物车和发现页面替换为消息和工具箱页面 - 更新导航栏样式配置，包括背景色、标题文本和文字颜色 - 添加完整的底部标签栏配置，包含首页、消息、工具箱和个人中心四个选项 - 更改租户ID从10582到10589，并相应更新package.json和project.config.json中的项目名称 - 重构首页(index.tsx)界面布局，实现新的品牌标识卡片和功能入口网格设计 - 新增消息页面(message)的基本结构和样式文件 - 新增工具箱页面(toolbox)的功能模块和网格布局 - 添加标签栏图标资源和相关脚本文件
2026-03-11 13:08:48 +08:00
parent 6e8d6b1c0d
commit 610aded9d5
24 changed files with 675 additions and 173 deletions
--- a/assets/assets/tabbar/home-active.png
+++ b/assets/assets/tabbar/home-active.png
--- a/assets/assets/tabbar/home.png
+++ b/assets/assets/tabbar/home.png
--- a/assets/assets/tabbar/message-active.png
+++ b/assets/assets/tabbar/message-active.png
--- a/assets/assets/tabbar/message.png
+++ b/assets/assets/tabbar/message.png
--- a/assets/assets/tabbar/toolbox-active.png
+++ b/assets/assets/tabbar/toolbox-active.png
--- a/assets/assets/tabbar/toolbox.png
+++ b/assets/assets/tabbar/toolbox.png
--- a/assets/assets/tabbar/user-active.png
+++ b/assets/assets/tabbar/user-active.png
--- a/assets/assets/tabbar/user.png
+++ b/assets/assets/tabbar/user.png
--- a/assets/tabbar/create-icons.sh
+++ b/assets/tabbar/create-icons.sh
@@ -0,0 +1,21 @@
+#!/bin/bash
+# 创建简单的占位图标（实际项目中应该使用设计好的图标）
+
+# 使用 ImageMagick 创建简单的彩色圆点作为占位图标
+# 首页图标
+convert -size 48x48 xc:none -fill '#999999' -draw "circle 24,24 24,12" assets/tabbar/home.png
+convert -size 48x48 xc:none -fill '#1890FF' -draw "circle 24,24 24,12" assets/tabbar/home-active.png
+
+# 消息图标
+convert -size 48x48 xc:none -fill '#999999' -draw "rectangle 12,16 36,32" assets/tabbar/message.png
+convert -size 48x48 xc:none -fill '#1890FF' -draw "rectangle 12,16 36,32" assets/tabbar/message-active.png
+
+# 工具箱图标
+convert -size 48x48 xc:none -fill '#999999' -draw "rectangle 10,18 38,34" assets/tabbar/toolbox.png
+convert -size 48x48 xc:none -fill '#1890FF' -draw "rectangle 10,18 38,34" assets/tabbar/toolbox-active.png
+
+# 我的图标
+convert -size 48x48 xc:none -fill '#999999' -draw "circle 24,18 24,8" assets/tabbar/user.png
+convert -size 48x48 xc:none -fill '#1890FF' -draw "circle 24,18 24,8" assets/tabbar/user-active.png
+
+echo "图标创建完成"
--- a/assets/tabbar/create-placeholders.js
+++ b/assets/tabbar/create-placeholders.js
@@ -0,0 +1,42 @@
+const fs = require('fs');
+const path = require('path');
+
+// 简单的 1x1 像素 PNG（白色）
+const whitePixel = Buffer.from([
+  0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A,
+  0x00, 0x00, 0x00, 0x0D, 0x49, 0x48, 0x44, 0x52,
+  0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01,
+  0x08, 0x06, 0x00, 0x00, 0x00, 0x1F, 0x15, 0xC4,
+  0x89, 0x00, 0x00, 0x00, 0x0A, 0x49, 0x44, 0x41,
+  0x54, 0x78, 0x9C, 0x63, 0x00, 0x01, 0x00, 0x00,
+  0x05, 0x00, 0x01, 0x0D, 0x0A, 0x2D, 0xB4, 0x00,
+  0x00, 0x00, 0x00, 0x49, 0x45, 0x4E, 0x44, 0xAE,
+  0x42, 0x60, 0x82
+]);
+
+// 创建目录
+const dir = path.join(__dirname, '..', 'assets', 'tabbar');
+if (!fs.existsSync(dir)) {
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+// 创建占位图标文件
+const icons = [
+  'home.png',
+  'home-active.png',
+  'message.png',
+  'message-active.png',
+  'toolbox.png',
+  'toolbox-active.png',
+  'user.png',
+  'user-active.png'
+];
+
+icons.forEach(icon => {
+  const filePath = path.join(dir, icon);
+  fs.writeFileSync(filePath, whitePixel);
+  console.log(`Created: ${icon}`);
+});
+
+console.log('\n占位图标创建完成！请替换为实际图标文件。');
+console.log('图标尺寸建议：81x81 像素（微信小程序推荐）');
--- a/config/app.ts
+++ b/config/app.ts
@@ -1,7 +1,7 @@
 import { API_BASE_URL } from './env'

 // 租户ID - 请根据实际情况修改
-export const TenantId = '10582';
+export const TenantId = '10589';
 // 接口地址 - 请根据实际情况修改
 export const BaseUrl = API_BASE_URL;
 // 当前版本
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "template-10582",
+  "name": "template-10589",
  "version": "1.0.0",
  "private": true,
  "description": "WebSoft Inc.",
--- a/project.config.json
+++ b/project.config.json
@@ -1,6 +1,6 @@
 {
 	"miniprogramRoot": "dist/",
-	"projectname": "template-10582",
+	"projectname": "template-10589",
 	"description": "南南佐顿门窗",
 	"appid": "wx644669e2da8d6519",
 	"setting": {
--- a/src/api/json/regions-data.json
+++ b/src/api/json/regions-data.json
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -1,8 +1,8 @@
 export default defineAppConfig({
  pages: [
    'pages/index/index',
-    'pages/cart/cart',
-    'pages/find/find',
+    'pages/message/message',
+    'pages/toolbox/toolbox',
    'pages/user/user'
  ],
  "subpackages": [
@@ -95,42 +95,43 @@ export default defineAppConfig({
  ],
  window: {
    backgroundTextStyle: 'dark',
-    navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
+    navigationBarBackgroundColor: '#1890FF',
+    navigationBarTitleText: '工具箱',
+    navigationBarTextStyle: 'white'
+  },
+  tabBar: {
+    custom: false,
+    color: "#999999",
+    selectedColor: "#1890FF",
+    backgroundColor: "#F8F8F8",
+    borderStyle: "black",
+    list: [
+      {
+        pagePath: "pages/index/index",
+        iconPath: "assets/tabbar/home.png",
+        selectedIconPath: "assets/tabbar/home-active.png",
+        text: "首页",
+      },
+      {
+        pagePath: "pages/message/message",
+        iconPath: "assets/tabbar/message.png",
+        selectedIconPath: "assets/tabbar/message-active.png",
+        text: "消息",
+      },
+      {
+        pagePath: "pages/toolbox/toolbox",
+        iconPath: "assets/tabbar/toolbox.png",
+        selectedIconPath: "assets/tabbar/toolbox-active.png",
+        text: "工具箱",
+      },
+      {
+        pagePath: "pages/user/user",
+        iconPath: "assets/tabbar/user.png",
+        selectedIconPath: "assets/tabbar/user-active.png",
+        text: "我的",
+      },
+    ],
  },
-  // tabBar: {
-  //   custom: false,
-  //   color: "#8a8a8a",
-  //   selectedColor: "#0e932e",
-  //   backgroundColor: "#ffffff",
-  //   list: [
-      // {
-      //   pagePath: "pages/index/index",
-      //   iconPath: "assets/tabbar/index.png",
-      //   selectedIconPath: "assets/tabbar/index-active.png",
-      //   text: "首页",
-      // },
-      // {
-      //   pagePath: "pages/find/find",
-      //   iconPath: "assets/tabbar/find.png",
-      //   selectedIconPath: "assets/tabbar/find-active.png",
-      //   text: "发现",
-      // },
-      // {
-      //   pagePath: "pages/cart/cart",
-      //   iconPath: "assets/tabbar/cart.png",
-      //   selectedIconPath: "assets/tabbar/cart-active.png",
-      //   text: "购物车",
-      // },
-      // {
-      //   pagePath: "pages/user/user",
-      //   iconPath: "assets/tabbar/user.png",
-      //   selectedIconPath: "assets/tabbar/user-active.png",
-      //   text: "我的",
-      // },
-    // ],
-  // },
  requiredPrivateInfos: [
    "getLocation",
    "chooseLocation",
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -1,20 +1,196 @@
 page {
-  //background: url('https://oss.wsdns.cn/20250621/33ca4ca532e647bc918a59d01f5d88a9.jpg?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90') no-repeat top center;
-  //background-size: 100%;
-  background: linear-gradient(to bottom, #00eda3, #ffffff);
+  background-color: #F8F8F8;
+  min-height: 100vh;
 }

-.buy-btn{
-  height: 70px;
-  background: linear-gradient(to bottom, #1cd98a, #24ca94);
-  border-radius: 100px;
-  color: #ffffff;
+.container {
+  min-height: 100vh;
+  padding-bottom: 50px; /* 为底部导航栏留出空间 */
+}
+
+/* 顶部导航栏 */
+.navbar {
+  background-color: #1890FF;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.navbar-title {
+  color: #FFFFFF;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: 'PingFang SC', 'HarmonyOS Sans', 'Source Han Sans', sans-serif;
+}
+
+.navbar-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.customer-service-icon {
+  width: 24px;
+  height: 24px;
+}
+
+/* 品牌标识卡片 */
+.brand-card {
+  background-color: #FFFFFF;
+  border-radius: 12px;
+  margin: 20px 16px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.brand-logo {
+  width: 60px;
+  height: 60px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-image {
+  width: 100%;
+  height: 100%;
+}
+
+.brand-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.brand-name {
+  color: #0A2E5A;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: 'PingFang SC', 'HarmonyOS Sans', 'Source Han Sans', sans-serif;
+  line-height: 28px;
+}
+
+.brand-en {
+  color: #666666;
+  font-size: 12px;
+  font-family: 'Helvetica Neue', 'Roboto', sans-serif;
+  letter-spacing: 0.5px;
+  margin-top: 4px;
+}
+
+/* 功能入口网格 */
+.menu-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 16px;
+  gap: 16px;
+}
+
+.menu-item {
+  width: calc(25% - 12px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 8px;
+  background-color: #FFFFFF;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+}
+
+.menu-item-single {
+  width: calc(25% - 12px);
+}
+
+.menu-icon-wrapper {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.menu-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.menu-name {
+  color: #333333;
+  font-size: 14px;
+  text-align: center;
+  line-height: 20px;
+  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;
-  .cart-icon{
-    background: linear-gradient(to bottom, #bbe094, #4ee265);
-    border-radius: 100px 0 0 100px;
-    height: 70px;
-  }
+  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;
 }
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,134 +1,161 @@
-import Header from './Header';
-import BestSellers from './BestSellers';
 import Taro from '@tarojs/taro';
-import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
-import {useEffect, useState} from "react";
-import {getShopInfo} from "@/api/layout";
-import {Sticky, NoticeBar} from '@nutui/nutui-react-taro'
-import {View} from '@tarojs/components'
-import Menu from "./Menu";
-import Banner from "./Banner";
-import './index.scss'
-import Grid from "@/pages/index/Grid";
-import PopUpAd from "@/pages/index/PopUpAd";
-import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
-import type {Config} from "@/api/cms/cmsWebsiteField/model";
+import { View, Image, Text } from '@tarojs/components';
+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',
+  },
+];

 function Home() {
-  // 吸顶状态
-  const [stickyStatus, setStickyStatus] = useState<boolean>(false)
-  const [config, setConfig] = useState<Config>()
-
-  useShareTimeline(() => {
-    return {
-      title: '南南佐顿门窗 - 网宿软件',
-      path: `/pages/index/index`
-    };
-  });
-
-  useShareAppMessage(() => {
-    return {
-      title: '南南佐顿门窗 - 网宿软件',
-      path: `/pages/index/index`,
-      success: function () {
-        console.log('分享成功');
-      },
-      fail: function () {
-        console.log('分享失败');
-      }
-    };
-  });
-
-  const showAuthModal = () => {
-    Taro.showModal({
-      title: '授权提示',
-      content: '需要获取您的用户信息',
-      confirmText: '去授权',
-      cancelText: '取消',
-      success: (res) => {
-        if (res.confirm) {
-          // 用户点击确认，打开授权设置页面
-          openSetting();
-        }
-      }
+  // 处理客服点击
+  const handleCustomerService = () => {
+    Taro.showToast({
+      title: '联系客服',
+      icon: 'none',
    });
  };

-  const openSetting = () => {
-    // Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
-    Taro.openSetting({
-      success: (res) => {
-        if (res.authSetting['scope.userInfo']) {
-          // 用户授权成功，可以获取用户信息
-          reload();
-        } else {
-          // 用户拒绝授权，提示授权失败
-          Taro.showToast({
-            title: '授权失败',
-            icon: 'none'
-          });
-        }
-      }
+  // 处理菜单点击
+  const handleMenuClick = (item: typeof menuItems[0]) => {
+    Taro.showToast({
+      title: `点击了${item.name}`,
+      icon: 'none',
    });
  };

-  const onSticky = (item: IArguments) => {
-    if(item){
-      setStickyStatus(!stickyStatus)
+  // 处理底部导航切换
+  const handleTabChange = (tab: string) => {
+    if (tab === 'toolbox') {
+      // 当前页面
+      return;
    }
-  }
-
-  const reload = () => {
-
+    Taro.switchTab({
+      url: `/pages/${tab}/index`,
+    });
  };

-  useEffect(() => {
-    // 获取站点信息
-    getShopInfo().then(() => {
-
-    })
-    // 获取配置信息
-    configWebsiteField({}).then(data => {
-      setConfig(data)
-    })
-    // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
-    Taro.getSetting({
-      success: (res) => {
-        if (res.authSetting['scope.userInfo']) {
-          // 用户已经授权过，可以直接获取用户信息
-          console.log('用户已经授权过，可以直接获取用户信息')
-          reload();
-        } else {
-          // 用户未授权，需要弹出授权窗口
-          console.log('用户未授权，需要弹出授权窗口')
-          showAuthModal();
-        }
-      }
-    });
-    // 获取用户信息
-    Taro.getUserInfo({
-      success: (res) => {
-        const avatar = res.userInfo.avatarUrl;
-        console.log(avatar, 'avatarUrl')
-      }
-    });
-  }, []);
-
  return (
-    <>
-      <Sticky threshold={0} onChange={() => onSticky(arguments)}>
-        <Header stickyStatus={stickyStatus}/>
-      </Sticky>
-      <View className={'flex flex-col mt-1'}>
-        <Menu/>
-        <Banner/>
-        <NoticeBar content={config?.NoticeBar || '主营直购电售电业务,以更优惠电价、更全面的服务，致力为工商企业创造更优越经营环境，帮助企业减负排压，深度赋能'} />
-        <BestSellers/>
-        <Grid />
+    <View className="container">
+      {/* 顶部导航栏 */}
+      <View className="navbar">
+        <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"
+          />
+        </View>
      </View>
-      <PopUpAd />
-    </>
-  )
+
+      {/* 品牌标识卡片 */}
+      <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>
+        ))}
+      </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>
+      </View>
+    </View>
+  );
 }

-export default Home
+export default Home;
--- a/src/pages/message/message.config.ts
+++ b/src/pages/message/message.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '消息',
+});
--- a/src/pages/message/message.scss
+++ b/src/pages/message/message.scss
@@ -0,0 +1,17 @@
+.message-page {
+  min-height: 100vh;
+  background-color: #F8F8F8;
+  padding-bottom: 50px;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.empty-text {
+  color: #999999;
+  font-size: 16px;
+}
--- a/src/pages/message/message.tsx
+++ b/src/pages/message/message.tsx
@@ -0,0 +1,15 @@
+import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import './message.scss';
+
+function Message() {
+  return (
+    <View className="message-page">
+      <View className="empty-state">
+        <Text className="empty-text">消息页面</Text>
+      </View>
+    </View>
+  );
+}
+
+export default Message;
--- a/src/pages/toolbox/toolbox.config.ts
+++ b/src/pages/toolbox/toolbox.config.ts
@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '工具箱',
+  navigationBarBackgroundColor: '#1890FF',
+  navigationBarTextStyle: 'white'
+});
--- a/src/pages/toolbox/toolbox.scss
+++ b/src/pages/toolbox/toolbox.scss
@@ -0,0 +1,101 @@
+page {
+  background-color: #F8F8F8;
+  min-height: 100vh;
+}
+
+.toolbox-container {
+  min-height: 100vh;
+  padding-bottom: 20px;
+}
+
+/* 品牌标识卡片 */
+.brand-card {
+  background-color: #FFFFFF;
+  border-radius: 12px;
+  margin: 16px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.brand-logo {
+  width: 60px;
+  height: 60px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 12px;
+}
+
+.brand-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.brand-name {
+  color: #0A2E5A;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: 'PingFang SC', 'HarmonyOS Sans', 'Source Han Sans', sans-serif;
+  line-height: 28px;
+}
+
+.brand-en {
+  color: #666666;
+  font-size: 12px;
+  font-family: 'Helvetica Neue', 'Roboto', sans-serif;
+  letter-spacing: 0.5px;
+  margin-top: 4px;
+}
+
+/* 功能入口网格 */
+.menu-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 16px;
+  gap: 16px;
+}
+
+.menu-item {
+  width: calc(25% - 12px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 8px;
+  background-color: #FFFFFF;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.menu-item:active {
+  transform: scale(0.95);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.menu-icon-wrapper {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.menu-name {
+  color: #333333;
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+  font-family: 'PingFang SC', 'HarmonyOS Sans', 'Source Han Sans', sans-serif;
+  word-break: break-word;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+}
--- a/src/pages/toolbox/toolbox.tsx
+++ b/src/pages/toolbox/toolbox.tsx
@@ -0,0 +1,94 @@
+import Taro from '@tarojs/taro';
+import { View, Text, Image } from '@tarojs/components';
+import './toolbox.scss';
+
+// 功能入口数据 - 使用 icons8 的在线图标
+const menuItems = [
+  {
+    id: 1,
+    name: '综合运维工单',
+    icon: 'https://img.icons8.com/ios-filled/100/ffffff/document.png',
+    bgColor: '#1890FF',
+  },
+  {
+    id: 2,
+    name: '缺陷管理',
+    icon: 'https://img.icons8.com/ios-filled/100/ffffff/puzzle.png',
+    bgColor: '#FA8C16',
+  },
+  {
+    id: 3,
+    name: '应急报修',
+    icon: 'https://img.icons8.com/ios-filled/100/ffffff/lightning-bolt.png',
+    bgColor: '#F59E0B',
+  },
+  {
+    id: 4,
+    name: '自动派单配置',
+    icon: 'https://img.icons8.com/ios-filled/100/ffffff/settings.png',
+    bgColor: '#1890FF',
+  },
+  {
+    id: 5,
+    name: '人员轨迹信息',
+    icon: 'https://img.icons8.com/ios-filled/100/ffffff/map-marker.png',
+    bgColor: '#1890FF',
+  },
+  {
+    id: 6,
+    name: '任务工单',
+    icon: 'https://img.icons8.com/ios-filled/100/ffffff/clipboard.png',
+    bgColor: '#1890FF',
+  },
+];
+
+function Toolbox() {
+  // 处理菜单点击
+  const handleMenuClick = (item: typeof menuItems[0]) => {
+    Taro.showToast({
+      title: `点击了${item.name}`,
+      icon: 'none',
+    });
+  };
+
+  return (
+    <View className="toolbox-container">
+      {/* 品牌标识卡片 */}
+      <View className="brand-card">
+        <View className="brand-logo">
+          <Image
+            className="logo-image"
+            src="https://img.icons8.com/color/96/environmental-technology.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) => (
+          <View
+            key={item.id}
+            className="menu-item"
+            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>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+export default Toolbox;
--- a/src/utils/server.ts
+++ b/src/utils/server.ts
@@ -2,7 +2,7 @@ import Taro from '@tarojs/taro';
 import {User} from "@/api/system/user/model";

 // 模版套餐ID - 请根据实际情况修改
-export const TEMPLATE_ID = '10582';
+export const TEMPLATE_ID = '10589';
 // 服务接口 - 请根据实际情况修改
 export const SERVER_API_URL = 'https://server.websoft.top/api';
 // export const SERVER_API_URL = 'http://127.0.0.1:8000/api';