From 9c7f99d4fb2eebfb26431bcba2ac7893e5390260 Mon Sep 17 00:00:00 2001 From: gxwebsoft <170083662@qq.com> Date: Wed, 11 Mar 2026 19:07:23 +0800 Subject: [PATCH] =?UTF-8?q?feat(pages):=20=E9=87=8D=E6=9E=84=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E7=95=8C=E9=9D=A2=E5=B9=B6=E6=96=B0=E5=A2=9E=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E6=A8=A1=E5=9D=97=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 app.config.ts 中添加 pages/feature/index 页面路径 - 更新首页标题为"工具箱"，修改导航栏样式配置 - 移除首页底部导航栏相关样式和代码逻辑 - 重命名品牌标识卡片为公司信息卡片，调整样式布局 - 将功能入口网格改为功能模块网格，使用 CSS Grid 布局 - 替换功能图标为 NutUI 图标组件，优化图标展示 - 新增 pages/feature/index 页面及相关配置文件 - 实现动态功能页面，支持通过参数显示不同功能模块 - 调整项目配置信息，更新描述和应用ID --- project.config.json | 4 +- src/app.config.ts | 3 +- src/assets/tabbar/message-active.png | Bin 0 -> 67 bytes src/assets/tabbar/message.png | Bin 0 -> 67 bytes src/assets/tabbar/toolbox-active.png | Bin 0 -> 67 bytes src/assets/tabbar/toolbox.png | Bin 0 -> 67 bytes src/pages/feature/index.config.ts | 6 + src/pages/feature/index.scss | 29 ++++ src/pages/feature/index.tsx | 33 ++++ src/pages/index/index.config.ts | 5 +- src/pages/index/index.scss | 125 ++++----------- src/pages/index/index.tsx | 232 ++++++++++++--------------- 12 files changed, 205 insertions(+), 232 deletions(-) create mode 100644 src/assets/tabbar/message-active.png create mode 100644 src/assets/tabbar/message.png create mode 100644 src/assets/tabbar/toolbox-active.png create mode 100644 src/assets/tabbar/toolbox.png create mode 100644 src/pages/feature/index.config.ts create mode 100644 src/pages/feature/index.scss create mode 100644 src/pages/feature/index.tsx 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 0846f13..cd0982b 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 0000000000000000000000000000000000000000..91a99b94e23a00cc8133f22e3fe2a0b48a015808 GIT binary patch literal 67 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k8}blE>9Q7kcv6UAQ@H$MqV!6EkIEQ MPgg&ebxsLQ07X&@0{{R3 literal 0 HcmV?d00001 diff --git a/src/assets/tabbar/message.png b/src/assets/tabbar/message.png new file mode 100644 index 0000000000000000000000000000000000000000..91a99b94e23a00cc8133f22e3fe2a0b48a015808 GIT binary patch literal 67 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k8}blE>9Q7kcv6UAQ@H$MqV!6EkIEQ MPgg&ebxsLQ07X&@0{{R3 literal 0 HcmV?d00001 diff --git a/src/assets/tabbar/toolbox-active.png b/src/assets/tabbar/toolbox-active.png new file mode 100644 index 0000000000000000000000000000000000000000..91a99b94e23a00cc8133f22e3fe2a0b48a015808 GIT binary patch literal 67 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k8}blE>9Q7kcv6UAQ@H$MqV!6EkIEQ MPgg&ebxsLQ07X&@0{{R3 literal 0 HcmV?d00001 diff --git a/src/assets/tabbar/toolbox.png b/src/assets/tabbar/toolbox.png new file mode 100644 index 0000000000000000000000000000000000000000..91a99b94e23a00cc8133f22e3fe2a0b48a015808 GIT binary patch literal 67 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k8}blE>9Q7kcv6UAQ@H$MqV!6EkIEQ MPgg&ebxsLQ07X&@0{{R3 literal 0 HcmV?d00001 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 ( + + + {title} + 这是占位页面，可在此接入实际业务功能与路由。 + + + ) +} + +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(0); + + useEffect(() => { + Taro.getSystemInfo({ + success: (res) => setStatusBarHeight(res.statusBarHeight ?? 0), + fail: () => setStatusBarHeight(0), + }); + }, []); + + const features: Feature[] = useMemo( + () => [ + { + key: 'opsWorkorder', + title: '综合运维工单', + color: '#1890FF', + icon: , + }, + { + key: 'defect', + title: '缺陷管理', + color: '#FA8C16', + icon: , + }, + { + key: 'emergencyRepair', + title: '应急报修', + color: '#F59E0B', + icon: , + }, + { + key: 'autoDispatch', + title: '自动派单配置', + color: '#1890FF', + icon: , + }, + { + key: 'staffTrack', + title: '人员轨迹信息', + color: '#1890FF', + icon: , + }, + { + key: 'taskWorkorder', + title: '任务工单', + color: '#1890FF', + icon: , + }, + ], + [] + ); + 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 ( {/* 顶部导航栏 */} - + 工具箱 - + - {/* 品牌标识卡片 */} - - - - - - 网神环保科技 - WANG SHEN HUAN BAO TECHNOLOGY - - - - {/* 功能入口网格 */} - - {menuItems.map((item, index) => ( - = 4 ? 'menu-item-single' : ''}`} - onClick={() => handleMenuClick(item)} - > - - - - {item.name} + + {/* 公司信息卡片 */} + + + 网神 - ))} - + + 网神环保科技 + WANG SHEN HUAN BAO TECHNOLOGY + + - {/* 底部导航栏 */} - - handleTabChange('index')}> - - 首页 - - handleTabChange('message')}> - - 消息 - - handleTabChange('toolbox')}> - - 工具箱 - - handleTabChange('user')}> - - 我的 + {/* 功能模块网格 */} + + {features.map((feature) => ( + handleFeatureClick(feature)} + > + + {feature.icon} + + {feature.title} + + ))}