Преглед на файлове

✨ feat(dependencies): 添加dayjs依赖并优化日期显示
- 添加dayjs依赖用于日期格式化
- 使用dayjs替代原生Date对象格式化创建时间和支付时间
- 统一日期显示格式为YYYY-MM-DD HH:mm:ss

💄 style(order-detail): 添加底部占位区域样式
- 添加.order-bottom-padding类用于底部内容占位
- 设置高度为120rpx与底部操作栏高度匹配

✨ feat(order-detail): 添加底部占位区域防止内容遮挡
- 在订单详情页面添加底部占位元素
- 防止底部操作栏遮挡页面内容

🔧 chore(dependencies): 调整依赖包顺序
- 移动@d8d/server依赖位置
- 调整测试相关依赖包位置

yourname преди 1 месец
родител
ревизия
8493f0cea3
променени са 4 файла, в които са добавени 24 реда и са изтрити 11 реда
  1. 10 9
      mini/package.json
  2. 5 0
      mini/src/pages/order-detail/index.css
  3. 6 2
      mini/src/pages/order-detail/index.tsx
  4. 3 0
      pnpm-lock.yaml

+ 10 - 9
mini/package.json

@@ -52,6 +52,7 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.24.4",
+    "@d8d/server": "workspace:*",
     "@hookform/resolvers": "^5.2.1",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "^5.84.1",
@@ -74,11 +75,11 @@
     "abortcontroller-polyfill": "^1.7.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
     "hono": "4.8.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.62.0",
-    "@d8d/server": "workspace:*",
     "zod": "^4.0.14"
   },
   "devDependencies": {
@@ -95,6 +96,10 @@
     "@tarojs/plugin-generator": "4.1.4",
     "@tarojs/taro-loader": "4.1.4",
     "@tarojs/webpack5-runner": "4.1.4",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
     "@types/node": "^18",
     "@types/react": "^18.0.0",
     "@types/webpack-env": "^1.13.6",
@@ -106,23 +111,19 @@
     "eslint-plugin-react-hooks": "^4.4.0",
     "html-webpack-plugin": "^5.6.3",
     "husky": "^9.1.7",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^16.1.2",
     "postcss": "^8.4.38",
     "react-refresh": "^0.14.0",
     "stylelint": "^16.4.0",
     "stylelint-config-standard": "^38.0.0",
     "tailwindcss": "^4.1.11",
+    "ts-jest": "^29.4.5",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.4.5",
     "weapp-tailwindcss": "^4.2.5",
     "webpack": "5.91.0",
-    "webpack-plugin-iframe-communicator": "^0.0.10",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "ts-jest": "^29.4.5"
+    "webpack-plugin-iframe-communicator": "^0.0.10"
   }
 }

+ 5 - 0
mini/src/pages/order-detail/index.css

@@ -282,6 +282,11 @@
   height: 100vh;
 }
 
+/* 底部占位区域 */
+.order-bottom-padding {
+  height: 120rpx; /* 与底部操作栏高度匹配 */
+}
+
 /* 响应式调整 */
 @media (max-width: 375px) {
   .order-content {

+ 6 - 2
mini/src/pages/order-detail/index.tsx

@@ -6,6 +6,7 @@ import { Navbar } from '@/components/ui/navbar'
 import OrderButtonBar from '@/components/order/OrderButtonBar'
 import CancelReasonDialog from '@/components/common/CancelReasonDialog'
 import { useState } from 'react'
+import dayjs from 'dayjs'
 import './index.css'
 
 export default function OrderDetailPage() {
@@ -319,17 +320,20 @@ export default function OrderDetailPage() {
               </View>
               <View className="order-info-item">
                 <Text className="order-info-label">创建时间</Text>
-                <Text className="order-info-value">{new Date(order.createdAt).toLocaleString()}</Text>
+                <Text className="order-info-value">{dayjs(order.createdAt).format('YYYY-MM-DD HH:mm:ss')}</Text>
               </View>
               {order.payState === 2 && (
                 <View className="order-info-item">
                   <Text className="order-info-label">支付时间</Text>
-                  <Text className="order-info-value">{new Date(order.createdAt).toLocaleString()}</Text>
+                  <Text className="order-info-value">{dayjs(order.createdAt).format('YYYY-MM-DD HH:mm:ss')}</Text>
                 </View>
               )}
             </View>
           </View>
         </View>
+
+        {/* 底部占位区域,防止操作栏遮挡内容 */}
+        <View className="order-bottom-padding" />
       </ScrollView>
 
       {/* 底部操作栏 */}

+ 3 - 0
pnpm-lock.yaml

@@ -86,6 +86,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      dayjs:
+        specifier: ^1.11.19
+        version: 1.11.19
       hono:
         specifier: 4.8.5
         version: 4.8.5