归档

.doc/frontend-interactive-test-report.md

@@ -0,0 +1,105 @@
+---
+title: 前端整体交互测试报告
+author: AI Assistant
+date: 2026-02-21
+status: draft
+category: 测试
+---
+
+# 前端整体交互测试报告
+
+## 一、测试目标
+
+第一步：对 `http://localhost:5173/` 前端页面进行逐页面、按钮与输入控件的基础交互测试。
+第二步：检查是否存在明显样式崩坏、按钮不可点击或无响应的情况。
+第三步：记录控制台错误与异常行为，形成后续修复依据。
+
+## 二、测试范围
+
+- 页面范围：底部导航 5 个页面（日历、统计、账单、预算、设置）
+- 控件范围：可见按钮、链接、开关、输入/文本域/下拉框（不含上传功能）
+- 非目标：不做业务流程深度验证、不做上传功能测试、不做截图对比
+
+## 三、测试环境与前置条件
+
+- 地址：`http://localhost:5173/`
+- 工具：Playwright（自动化点击与输入）
+- 说明：已跳过文件上传输入控件（`input[type=file]`）
+
+## 四、测试方法
+
+第一步：通过底部导航依次进入 5 个页面。
+第二步：对每个页面所有 `button`、`a`、`.van-switch` 进行点击。
+第三步：对可编辑输入控件执行填入与清空。
+第四步：记录页面路由变化与控制台异常。
+
+## 五、测试结果概览
+
+- 样式检查：未发现明显崩坏（基于 DOM 与可见结构的自动化判断）
+- 点击响应：大多数按钮可触发交互或弹窗
+- 控制台异常：存在路由错误与 Vue 警告（详见第七节）
+
+## 六、逐页面结果
+
+### 1) 日历页 `/calendar-v2`
+
+| 项目 | 结果 | 备注 |
+| --- | --- | --- |
+| 按钮点击 | 通过 | 存在未命名按钮，点击后跳转至 `/balance?tab=message` |
+| 链接点击 | 无 | 未检测到 `a` 标签 |
+| 输入控件 | 无 | 未检测到输入控件 |
+| 样式 | 正常 | 未见崩坏 |
+
+### 2) 统计页 `/statistics-v2`
+
+| 项目 | 结果 | 备注 |
+| --- | --- | --- |
+| 按钮点击 | 通过 | 包含“取消/确认”按钮 |
+| 链接点击 | 无 | 未检测到 `a` 标签 |
+| 输入控件 | 无 | 未检测到输入控件 |
+| 样式 | 正常 | 未见崩坏 |
+
+### 3) 账单页 `/balance`
+
+| 项目 | 结果 | 备注 |
+| --- | --- | --- |
+| 按钮点击 | 通过 | 存在大量“删除”按钮，点击可触发确认弹窗 |
+| 链接点击 | 无 | 未检测到 `a` 标签 |
+| 输入控件 | 无 | 未检测到输入控件 |
+| 样式 | 正常 | 未见崩坏 |
+
+### 4) 预算页 `/budget-v2`
+
+| 项目 | 结果 | 备注 |
+| --- | --- | --- |
+| 按钮点击 | 通过 | 包含“取消/确认”按钮 |
+| 链接点击 | 无 | 未检测到 `a` 标签 |
+| 输入控件 | 无 | 未检测到输入控件 |
+| 样式 | 正常 | 未见崩坏 |
+
+### 5) 设置页 `/setting`
+
+| 项目 | 结果 | 备注 |
+| --- | --- | --- |
+| 按钮点击 | 通过 | 包含“取消/确认”按钮 |
+| 开关点击 | 通过 | `.van-switch` 可点击切换 |
+| 输入控件 | 跳过 | `input[type=file]` 按要求跳过 |
+| 样式 | 正常 | 未见崩坏 |
+
+## 七、控制台异常记录
+
+- Vue 警告：Invalid prop type check failed
+- Vue 警告：Unhandled error during execution（出现多次）
+- 路由错误：No match for {"name":"statistics","params":...}
+
+## 八、结论与建议
+
+- 结论：基础可见交互大多可点击，页面样式未见明显崩坏，但存在控制台错误与警告，需优先排查。
+- 建议：
+  1. 修复路由名称与参数不匹配问题（统计页相关）。
+  2. 排查触发弹窗/确认按钮时的异常栈（Vue Unhandled error）。
+  3. 如需“功能正常且符合逻辑”的强结论，建议补充关键业务流程的人工验证。
+
+## 更新日志
+
+- 2026-02-21：首次生成前端整体交互测试报告（自动化点击/输入）。

Web/src/components/Transaction/TransactionDetailSheet.vue

@@ -105,7 +105,10 @@
             <div
               v-if="showSuggestionTip"
               class="suggestion-tip"
-              @click="applySuggestion"
+            >
+              <div
+                class="suggestion-content"
+                @click="showClassifySelector = !showClassifySelector"
               >
                 <van-icon
                   name="bulb-o"
@@ -117,7 +120,11 @@
                     ({{ getTypeName(props.transaction?.unconfirmedType) }})
                   </span>
                 </span>
-              <div class="suggestion-apply">
+              </div>
+              <div
+                class="suggestion-apply"
+                @click.stop="applySuggestion"
+              >
                 应用
               </div>
             </div>
@@ -648,13 +655,20 @@ const handleDelete = async () => {
 .suggestion-tip {
   display: flex;
   align-items: center;
-  padding: 8px 12px;
   background: var(--van-active-color);
   color: var(--van-primary-color);
   border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--van-primary-color);
+}
+
+.suggestion-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
   cursor: pointer;
   transition: opacity 0.2s;
-  border: 1px solid var(--van-primary-color);
 
   &:active {
     opacity: 0.8;
@@ -667,18 +681,22 @@ const handleDelete = async () => {
 }
 
 .suggestion-text {
-  flex: 1;
   font-size: 14px;
   font-weight: 500;
 }
 
 .suggestion-apply {
-  padding: 2px 10px;
+  padding: 10px 12px;
   background: var(--van-primary-color);
   color: #fff;
-  border-radius: 4px;
   font-size: 12px;
   font-weight: bold;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:active {
+    opacity: 0.8;
+  }
 }
 
 .classify-value {

warnings.txt

@@ -1,98 +0,0 @@
-Total messages: 12 (Errors: 1, Warnings: 8)
-Returning 9 messages for level "warning"
-
-[WARNING] [Vue warn]: Plugin has already been applied to target app. @ http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2194
-[WARNING] [Vue warn]: Property "chartData" was accessed during render but is not defined on instance. 
-  at <BaseChart type="doughnut" data= {datasets: Array(1)} options= {cutout: 75%, responsive: true, maintainAspectRatio: true, plugins: Object}  ... > 
-  at <BudgetChartAnalysis overall-stats= {month: Object, year: Object} budgets= [] active-tab=0  ... > 
-  at <ExpenseBudgetContent key=0 budgets= [] stats= {month: Object, year: Object}  ... > 
-  at <VanPullRefresh modelValue=false onUpdate:modelValue=fn onRefresh=fn<onRefresh> > 
-  at <VanConfigProvider theme="light" class="config-provider-full-height" > 
-  at <BudgetV2View onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="budget-v2" > 
-  at <KeepAlive include= [CalendarV2, StatisticsView, StatisticsV2View, BalanceView, BudgetV2View] max=8 > 
-  at <RouterView > 
-  at <VanConfigProvider theme="light" theme-vars= {navBarBackground: var(--bg-primary), navBarTextColor: var(--text-primary), cardBackground: var(--bg-secondary), cellBackground: var(--bg-secondary), background: var(--bg-primary)} class="app-provider" > 
-  at <App> @ http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2194
-[WARNING] [Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Undefined  
-  at <Anonymous key=2 data=undefined options= {responsive: true, maintainAspectRatio: true, animation: Object, plugins: Object, scales: Object}  ... > 
-  at <BaseChart type="doughnut" data= {datasets: Array(1)} options= {cutout: 75%, responsive: true, maintainAspectRatio: true, plugins: Object}  ... > 
-  at <BudgetChartAnalysis overall-stats= {month: Object, year: Object} budgets= [] active-tab=0  ... > 
-  at <ExpenseBudgetContent key=0 budgets= [] stats= {month: Object, year: Object}  ... > 
-  at <VanPullRefresh modelValue=false onUpdate:modelValue=fn onRefresh=fn<onRefresh> > 
-  at <VanConfigProvider theme="light" class="config-provider-full-height" > 
-  at <BudgetV2View onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="budget-v2" > 
-  at <KeepAlive include= [CalendarV2, StatisticsView, StatisticsV2View, BalanceView, BudgetV2View] max=8 > 
-  at <RouterView > 
-  at <VanConfigProvider theme="light" theme-vars= {navBarBackground: var(--bg-primary), navBarTextColor: var(--text-primary), cardBackground: var(--bg-secondary), cellBackground: var(--bg-secondary), background: var(--bg-primary)} class="app-provider" > 
-  at <App> @ http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2194
-[WARNING] [Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Undefined  
-  at <Anonymous ref=fn<reforwardRef> type="doughnut" data=undefined  ... > 
-  at <Anonymous key=2 data=undefined options= {responsive: true, maintainAspectRatio: true, animation: Object, plugins: Object, scales: Object}  ... > 
-  at <BaseChart type="doughnut" data= {datasets: Array(1)} options= {cutout: 75%, responsive: true, maintainAspectRatio: true, plugins: Object}  ... > 
-  at <BudgetChartAnalysis overall-stats= {month: Object, year: Object} budgets= [] active-tab=0  ... > 
-  at <ExpenseBudgetContent key=0 budgets= [] stats= {month: Object, year: Object}  ... > 
-  at <VanPullRefresh modelValue=false onUpdate:modelValue=fn onRefresh=fn<onRefresh> > 
-  at <VanConfigProvider theme="light" class="config-provider-full-height" > 
-  at <BudgetV2View onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="budget-v2" > 
-  at <KeepAlive include= [CalendarV2, StatisticsView, StatisticsV2View, BalanceView, BudgetV2View] max=8 > 
-  at <RouterView > 
-  at <VanConfigProvider theme="light" theme-vars= {navBarBackground: var(--bg-primary), navBarTextColor: var(--text-primary), cardBackground: var(--bg-secondary), cellBackground: var(--bg-secondary), background: var(--bg-primary)} class="app-provider" > 
-  at <App> @ http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2194
-[WARNING] [Vue warn]: Property "chartData" was accessed during render but is not defined on instance. 
-  at <BaseChart type="doughnut" data= {datasets: Array(1)} options= {cutout: 75%, responsive: true, maintainAspectRatio: true, plugins: Object}  ... > 
-  at <BudgetChartAnalysis overall-stats= {month: Object, year: Object} budgets= [] active-tab=0  ... > 
-  at <ExpenseBudgetContent key=0 budgets= [] stats= {month: Object, year: Object}  ... > 
-  at <VanPullRefresh modelValue=false onUpdate:modelValue=fn onRefresh=fn<onRefresh> > 
-  at <VanConfigProvider theme="light" class="config-provider-full-height" > 
-  at <BudgetV2View onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="budget-v2" > 
-  at <KeepAlive include= [CalendarV2, StatisticsView, StatisticsV2View, BalanceView, BudgetV2View] max=8 > 
-  at <RouterView > 
-  at <VanConfigProvider theme="light" theme-vars= {navBarBackground: var(--bg-primary), navBarTextColor: var(--text-primary), cardBackground: var(--bg-secondary), cellBackground: var(--bg-secondary), background: var(--bg-primary)} class="app-provider" > 
-  at <App> @ http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2194
-[WARNING] [Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Undefined  
-  at <Anonymous key=2 data=undefined options= {responsive: true, maintainAspectRatio: true, animation: Object, plugins: Object, scales: Object}  ... > 
-  at <BaseChart type="doughnut" data= {datasets: Array(1)} options= {cutout: 75%, responsive: true, maintainAspectRatio: true, plugins: Object}  ... > 
-  at <BudgetChartAnalysis overall-stats= {month: Object, year: Object} budgets= [] active-tab=0  ... > 
-  at <ExpenseBudgetContent key=0 budgets= [] stats= {month: Object, year: Object}  ... > 
-  at <VanPullRefresh modelValue=false onUpdate:modelValue=fn onRefresh=fn<onRefresh> > 
-  at <VanConfigProvider theme="light" class="config-provider-full-height" > 
-  at <BudgetV2View onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="budget-v2" > 
-  at <KeepAlive include= [CalendarV2, StatisticsView, StatisticsV2View, BalanceView, BudgetV2View] max=8 > 
-  at <RouterView > 
-  at <VanConfigProvider theme="light" theme-vars= {navBarBackground: var(--bg-primary), navBarTextColor: var(--text-primary), cardBackground: var(--bg-secondary), cellBackground: var(--bg-secondary), background: var(--bg-primary)} class="app-provider" > 
-  at <App> @ http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2194
-[WARNING] [Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Undefined  
-  at <Anonymous ref=fn<reforwardRef> type="doughnut" data=undefined  ... > 
-  at <Anonymous key=2 data=undefined options= {responsive: true, maintainAspectRatio: true, animation: Object, plugins: Object, scales: Object}  ... > 
-  at <BaseChart type="doughnut" data= {datasets: Array(1)} options= {cutout: 75%, responsive: true, maintainAspectRatio: true, plugins: Object}  ... > 
-  at <BudgetChartAnalysis overall-stats= {month: Object, year: Object} budgets= [] active-tab=0  ... > 
-  at <ExpenseBudgetContent key=0 budgets= [] stats= {month: Object, year: Object}  ... > 
-  at <VanPullRefresh modelValue=false onUpdate:modelValue=fn onRefresh=fn<onRefresh> > 
-  at <VanConfigProvider theme="light" class="config-provider-full-height" > 
-  at <BudgetV2View onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="budget-v2" > 
-  at <KeepAlive include= [CalendarV2, StatisticsView, StatisticsV2View, BalanceView, BudgetV2View] max=8 > 
-  at <RouterView > 
-  at <VanConfigProvider theme="light" theme-vars= {navBarBackground: var(--bg-primary), navBarTextColor: var(--text-primary), cardBackground: var(--bg-secondary), cellBackground: var(--bg-secondary), background: var(--bg-primary)} class="app-provider" > 
-  at <App> @ http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2194
-[WARNING] [Vue warn]: Unhandled error during execution of mounted hook 
-  at <Anonymous ref=fn<reforwardRef> type="doughnut" data=undefined  ... > 
-  at <Anonymous key=2 data=undefined options= {responsive: true, maintainAspectRatio: true, animation: Object, plugins: Object, scales: Object}  ... > 
-  at <BaseChart type="doughnut" data= {datasets: Array(1)} options= {cutout: 75%, responsive: true, maintainAspectRatio: true, plugins: Object}  ... > 
-  at <BudgetChartAnalysis overall-stats= {month: Object, year: Object} budgets= [] active-tab=0  ... > 
-  at <ExpenseBudgetContent key=0 budgets= [] stats= {month: Object, year: Object}  ... > 
-  at <VanPullRefresh modelValue=false onUpdate:modelValue=fn onRefresh=fn<onRefresh> > 
-  at <VanConfigProvider theme="light" class="config-provider-full-height" > 
-  at <BudgetV2View onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > key="budget-v2" > 
-  at <KeepAlive include= [CalendarV2, StatisticsView, StatisticsV2View, BalanceView, BudgetV2View] max=8 > 
-  at <RouterView > 
-  at <VanConfigProvider theme="light" theme-vars= {navBarBackground: var(--bg-primary), navBarTextColor: var(--text-primary), cardBackground: var(--bg-secondary), cellBackground: var(--bg-secondary), background: var(--bg-primary)} class="app-provider" > 
-  at <App> @ http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2194
-TypeError: Cannot read properties of undefined (reading 'labels')
-    at cloneData (http://localhost:5173/node_modules/.vite/deps/vue-chartjs.js?v=9b5e80e2:109:28)
-    at renderChart (http://localhost:5173/node_modules/.vite/deps/vue-chartjs.js?v=9b5e80e2:140:26)
-    at http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:5221:40
-    at callWithErrorHandling (http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2342:19)
-    at callWithAsyncErrorHandling (http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2349:17)
-    at hook.__weh.hook.__weh (http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:5201:19)
-    at flushPostFlushCbs (http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2527:28)
-    at flushJobs (http://localhost:5173/node_modules/.vite/deps/chunk-TTLTGI2G.js?v=9b5e80e2:2569:5)