fix(step-form):fix from error when the page reload #58
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughThe changes update several Vue form components to expose additional internal state and control properties via Changes
Sequence Diagram(s)sequenceDiagram
participant Parent
participant CoachForm
participant DirectorForm
participant SummationForm
participant TargetForm
Parent->>CoachForm: Access state, disabled via defineExpose
Parent->>DirectorForm: Access state, disabled via defineExpose
Parent->>SummationForm: Access state, disabled via defineExpose
Parent->>TargetForm: Access targetModel via defineExpose
sequenceDiagram
participant User
participant CollapseForm
participant localStorage
User->>CollapseForm: Submit step form
CollapseForm->>CollapseForm: Validate form
alt Valid
CollapseForm->>localStorage: saveCache(step, formData)
CollapseForm->>User: Show success modal
CollapseForm->>CollapseForm: Proceed to next step
else Invalid
CollapseForm->>User: Show error modal
end
User->>CollapseForm: Reset step form
CollapseForm->>localStorage: clearCache()
CollapseForm->>CollapseForm: Reset form
User->>CollapseForm: Restore all
CollapseForm->>localStorage: clearCache()
CollapseForm->>CollapseForm: Reset all forms and steps
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
template/tinyvue/src/views/form/step/components/collapse-form.vue (1)
197-201: Consider adding cache expiration mechanism.The current implementation stores form data indefinitely in localStorage. Consider adding a timestamp and expiration logic to prevent stale data issues.
function saveCache(step: number, data: any) { try { const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}'); - cache[step] = data; + cache[step] = { + data, + timestamp: Date.now() + }; localStorage.setItem(FORM_CACHE_KEY, JSON.stringify(cache)); } catch (error) { console.warn('Failed to save form cache:', error); } } function loadCache(step: number) { try { const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}'); - return cache[step] || null; + const cached = cache[step]; + if (cached && Date.now() - cached.timestamp < 24 * 60 * 60 * 1000) { // 24 hours + return cached.data; + } + return null; } catch (error) { console.warn('Failed to load form cache:', error); return null; } }Also applies to: 204-207, 211-213, 217-219
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
template/tinyvue/src/views/form/step/components/coach-form.vue(1 hunks)template/tinyvue/src/views/form/step/components/collapse-form.vue(9 hunks)template/tinyvue/src/views/form/step/components/director-form.vue(1 hunks)template/tinyvue/src/views/form/step/components/summation-form.vue(1 hunks)template/tinyvue/src/views/form/step/components/target-form.vue(3 hunks)
🔇 Additional comments (6)
template/tinyvue/src/views/form/step/components/director-form.vue (1)
171-172: State exposure implementation looks good.The addition of
stateanddisabledtodefineExposefollows the composition API pattern correctly and enables the parent component to access internal reactive state for caching functionality. This is consistent with similar changes across other step form components.template/tinyvue/src/views/form/step/components/summation-form.vue (1)
87-88: Consistent state exposure pattern.The exposed
stateanddisabledproperties align with the pattern used across other step form components, enabling proper integration with the parent component's caching mechanism.template/tinyvue/src/views/form/step/components/target-form.vue (1)
5-6: Variable renaming improves code clarity.The refactoring from
arr/lengthtotargetData/targetModelmakes the code more readable and semantically clear. All references are updated consistently throughout the component, and exposingtargetModelaligns with this component's role in the transfer selection workflow.Also applies to: 24-24, 26-27, 33-33, 36-37, 46-46, 52-52
template/tinyvue/src/views/form/step/components/coach-form.vue (1)
223-224: State exposure follows established pattern.The addition of
stateanddisabledto the exposed interface maintains consistency with other step form components and supports the caching functionality implemented in the parent component.template/tinyvue/src/views/form/step/components/collapse-form.vue (2)
5-5: Internationalization update is correct.The change from
$t()tot()properly uses the destructuredtfunction fromuseI18n(), which is the recommended approach in the composition API.Also applies to: 14-14, 24-24, 30-30
98-242: Overall caching implementation addresses the PR objective effectively.The localStorage-based caching mechanism successfully solves the form data loss issue on page reload. The implementation correctly:
- Saves form data on successful validation
- Restores cached data on component mount
- Clears cache on reset/restore operations
- Uses optional chaining to prevent runtime errors
This provides a robust solution to the problem described in the PR objectives.
Comment on lines
+98
to
+113
| const FORM_CACHE_KEY = 'step-form-cache'; | ||
| // 保存当前步骤表单数据到 localStorage | ||
| function saveCache(step: number, data: any) { | ||
| const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}'); | ||
| cache[step] = data; | ||
| localStorage.setItem(FORM_CACHE_KEY, JSON.stringify(cache)); | ||
| } | ||
| // 读取指定步骤的缓存数据 | ||
| function loadCache(step: number) { | ||
| const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}'); | ||
| return cache[step] || null; | ||
| } | ||
| // 清空所有步骤缓存 | ||
| function clearCache() { | ||
| localStorage.removeItem(FORM_CACHE_KEY); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for localStorage operations.
The caching functions lack error handling for localStorage operations. This could cause issues in environments where localStorage is disabled or when storage quota is exceeded.
function saveCache(step: number, data: any) {
- const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}');
- cache[step] = data;
- localStorage.setItem(FORM_CACHE_KEY, JSON.stringify(cache));
+ try {
+ const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}');
+ cache[step] = data;
+ localStorage.setItem(FORM_CACHE_KEY, JSON.stringify(cache));
+ } catch (error) {
+ console.warn('Failed to save form cache:', error);
+ }
}
function loadCache(step: number) {
- const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}');
- return cache[step] || null;
+ try {
+ const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}');
+ return cache[step] || null;
+ } catch (error) {
+ console.warn('Failed to load form cache:', error);
+ return null;
+ }
}
function clearCache() {
- localStorage.removeItem(FORM_CACHE_KEY);
+ try {
+ localStorage.removeItem(FORM_CACHE_KEY);
+ } catch (error) {
+ console.warn('Failed to clear form cache:', error);
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const FORM_CACHE_KEY = 'step-form-cache'; | |
| // 保存当前步骤表单数据到 localStorage | |
| function saveCache(step: number, data: any) { | |
| const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}'); | |
| cache[step] = data; | |
| localStorage.setItem(FORM_CACHE_KEY, JSON.stringify(cache)); | |
| } | |
| // 读取指定步骤的缓存数据 | |
| function loadCache(step: number) { | |
| const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}'); | |
| return cache[step] || null; | |
| } | |
| // 清空所有步骤缓存 | |
| function clearCache() { | |
| localStorage.removeItem(FORM_CACHE_KEY); | |
| } | |
| const FORM_CACHE_KEY = 'step-form-cache'; | |
| // 保存当前步骤表单数据到 localStorage | |
| function saveCache(step: number, data: any) { | |
| try { | |
| const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}'); | |
| cache[step] = data; | |
| localStorage.setItem(FORM_CACHE_KEY, JSON.stringify(cache)); | |
| } catch (error) { | |
| console.warn('Failed to save form cache:', error); | |
| } | |
| } | |
| // 读取指定步骤的缓存数据 | |
| function loadCache(step: number) { | |
| try { | |
| const cache = JSON.parse(localStorage.getItem(FORM_CACHE_KEY) || '{}'); | |
| return cache[step] || null; | |
| } catch (error) { | |
| console.warn('Failed to load form cache:', error); | |
| return null; | |
| } | |
| } | |
| // 清空所有步骤缓存 | |
| function clearCache() { | |
| try { | |
| localStorage.removeItem(FORM_CACHE_KEY); | |
| } catch (error) { | |
| console.warn('Failed to clear form cache:', error); | |
| } | |
| } |
🤖 Prompt for AI Agents
In template/tinyvue/src/views/form/step/components/collapse-form.vue around
lines 98 to 113, the localStorage operations in saveCache, loadCache, and
clearCache functions lack error handling. Wrap the localStorage getItem,
setItem, and removeItem calls in try-catch blocks to catch and handle exceptions
such as quota exceeded or disabled storage. In the catch block, log the error or
handle it gracefully to prevent the app from crashing.
Comment on lines
116
to
142
| onMounted(() => { | ||
| fetchData(); | ||
| // coach 步骤缓存恢复 | ||
| const coachCache = loadCache(0); | ||
| if (coachCache && coachFormRef.value?.state) { | ||
| coachFormRef.value.state.filterOptions = coachCache; | ||
| if (coachFormRef.value.disabled !== undefined) coachFormRef.value.disabled = true; | ||
| } | ||
| // director 步骤缓存恢复 | ||
| const directorCache = loadCache(1); | ||
| if (directorCache && directorRef.value?.state) { | ||
| directorRef.value.state.filterOptions = directorCache; | ||
| if (directorRef.value.disabled !== undefined) directorRef.value.disabled = true; | ||
| } | ||
| // target 步骤缓存恢复 | ||
| const targetCache = loadCache(2); | ||
| if (targetCache && targetRef.value) { | ||
| targetRef.value.targetModel = targetCache || []; | ||
| targetRef.value.targetSubmit(); | ||
| } | ||
| // summation 步骤缓存恢复 | ||
| const summationCache = loadCache(3); | ||
| if (summationCache && summationRef.value?.state) { | ||
| summationRef.value.state.filterOptions = summationCache; | ||
| if (summationRef.value.disabled !== undefined) summationRef.value.disabled = true; | ||
| } | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Cache restoration logic needs timing consideration.
The cache restoration in onMounted may execute before child components are fully initialized. Consider using nextTick to ensure component refs are available.
+import { ref, reactive, onMounted, watch, defineExpose, nextTick } from 'vue';
onMounted(() => {
fetchData();
- // coach 步骤缓存恢复
- const coachCache = loadCache(0);
- if (coachCache && coachFormRef.value?.state) {
- coachFormRef.value.state.filterOptions = coachCache;
- if (coachFormRef.value.disabled !== undefined) coachFormRef.value.disabled = true;
- }
- // ... rest of cache restoration
+ nextTick(() => {
+ // coach 步骤缓存恢复
+ const coachCache = loadCache(0);
+ if (coachCache && coachFormRef.value?.state) {
+ coachFormRef.value.state.filterOptions = coachCache;
+ if (coachFormRef.value.disabled !== undefined) coachFormRef.value.disabled = true;
+ }
+ // ... rest of cache restoration
+ });
});Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In template/tinyvue/src/views/form/step/components/collapse-form.vue around
lines 116 to 142, the cache restoration logic inside onMounted may run before
child components are fully initialized, causing refs to be undefined or
incomplete. Wrap the cache restoration code inside a nextTick callback to ensure
all component refs are properly set before accessing and modifying their state
and properties.
| packaged(vaild, 1, '2'); | ||
| } else if (appStore.step === 1) { | ||
| const vaild = directorRef.value.directorValid(); | ||
| } if (appStore.step === 1) { |
There was a problem hiding this comment.
Fix syntax error in conditional statement.
There's a missing else keyword that will cause the second condition to always execute.
- } if (appStore.step === 1) {
+ } else if (appStore.step === 1) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| } if (appStore.step === 1) { | |
| } else if (appStore.step === 1) { |
🤖 Prompt for AI Agents
In template/tinyvue/src/views/form/step/components/collapse-form.vue at line
203, the conditional statement is missing an else keyword before the second if,
causing both conditions to execute independently. Add the else keyword before
the second if to ensure proper conditional branching and prevent the second
block from always running.
kagol
approved these changes
Jul 25, 2025
kagol
pushed a commit
that referenced
this pull request
Aug 26, 2025
* fix(tinyvue): fix attribute order to satisfy ESLint * feat: configure TinyVue mobile mode and add UnoCSS responsive breakpoints * style: remove console.log (#57) * feat: change the style of the home page and menu page (#51) * feat: change the style of the home page and menu page * feat: revise inspection comments * feat: Optimize the query table page, add corresponding functions, and modify the overall margin layout of Pro (#50) * feat: 优化查询表格页面，增加相应功能，修改pro整体边距布局 * feat: 优化数据算法 * fix: 根据意见修改页面查询表格、用户管理、国际化管理页面 (#59) * fix: 根据意见修改页面查询表格、用户管理、国际化管理页面 * fix: 统一分页pageSizes配置 * fix:修复刷新后表单数据丢失导致校验报错 (#58) * fix:表单校验以及分页条目修改 (#61) * feat: 监控页样式修改和解决初始化问题 (#60) * feat: change the style of the home page and menu page * feat: revise inspection comments * feat: 监控页样式修改和解决初始化问题 * feat: 修改表格pageSizes格式 * fix: 表格和弹出框优化 (#62) * fix: 表格和弹出框优化 * fix: 增加国际化 * feat: 解决查看菜单下级不能展开的问题 (#63) * feat: enhance mobile responsiveness with device detection and layout adjustments - Add device type detection in main.ts - Auto-collapse menu sidebar on mobile devices - Optimize login form layout for mobile screens * feat: improve mobile responsiveness for base-form * feat: optimize mobile responsive layout for work page - Add responsive grid and flex layouts for all work components - Implement mobile breakpoints with max-md and max-sm classes - Improve text sizing and spacing for mobile devices * feat: optimize mobile responsive layout for form/step page - Enable responsive flex layout using flex-wrap - Implement mobile breakpoints with max-md and max-sm classes - Improve form spacing and layout for mobile devices * feat: optimize mobile responsive layout for profile/detail page - Enable responsive flex layout using flex-wrap - Implement mobile breakpoints with max-md and max-sm classes - Simplify pager layout for mobile devices * feat: improve responsive font sizes for result/error, result/success, and cloud/hello * fix:i18n (#70) * fix(web): data struct (#76) * feat: enhance chart components responsive design in board/home page - Add dynamic width calculation based on screen size - Implement proper resize event handling with cleanup - Add mobile responsive breakpoints and padding adjustments - Optimize chart layout for better mobile experience * feat: setup UnoCSS with custom breakpoints and text utilities - Define responsive breakpoints from 376px to 1921px - Add max-width media query variants - Include line-clamp utility and safelist * feat: optimize mobile responsive layout for user/info page - head.vue: refine responsive layout for header section - info-table.vue: use useResponsiveGrid and enable auto-resize - info-tasksTip.vue: wrap layout for small screens; adjust widths/margins - info-card.vue: responsive card layout (flex-wrap, gap, widths); center content on small screens * feat: make tables mobile-friendly with gridSize - apply useResponsiveGrid(gridSize) across views - remove extra padding in global/search-table for mini gridSize * feat: improve mobile behavior for charts, plan, base form, and search styles * Update template/nestJs/src/app.module.ts --------- Co-authored-by: GaoNeng <31283122+GaoNeng-wWw@users.noreply.github.com> Co-authored-by: wuyiping <42107997+wuyiping0628@users.noreply.github.com> Co-authored-by: chenxi-20 <2465950588@qq.com> Co-authored-by: liukun <953831480@qq.com>
kagol
added a commit
that referenced
this pull request
Sep 28, 2025
* style: remove console.log (#57) * feat: change the style of the home page and menu page (#51) * feat: change the style of the home page and menu page * feat: revise inspection comments * feat: Optimize the query table page, add corresponding functions, and modify the overall margin layout of Pro (#50) * feat: 优化查询表格页面，增加相应功能，修改pro整体边距布局 * feat: 优化数据算法 * fix: 根据意见修改页面查询表格、用户管理、国际化管理页面 (#59) * fix: 根据意见修改页面查询表格、用户管理、国际化管理页面 * fix: 统一分页pageSizes配置 * fix:修复刷新后表单数据丢失导致校验报错 (#58) * fix:表单校验以及分页条目修改 (#61) * feat: 监控页样式修改和解决初始化问题 (#60) * feat: change the style of the home page and menu page * feat: revise inspection comments * feat: 监控页样式修改和解决初始化问题 * feat: 修改表格pageSizes格式 * fix: 表格和弹出框优化 (#62) * fix: 表格和弹出框优化 * fix: 增加国际化 * feat: 解决查看菜单下级不能展开的问题 (#63) * fix:i18n (#70) * fix(web): data struct (#76) * fix(web): select change (#81) * fix(web): select change * feat: uncomment search-box style * fix(tiny-vue): user-manageer info-tab role id select * fix(tiny-pro): if role id is undefined will send empty array not [null] (#83) * fix(nestJS): added lost permissions (#89) * fix(web): if not batch-remove should not display i18n or user batch-remove button (#90) * chore: add `--no-frozen-lockfile` (#91) * chore: release v1.3.0 (#95) * fix:历史记录功能恢复 (#98) * fix: fix tabs style (#100) * fix(web): role table pager (#97) * fix(web): role table pager * chore: change default page-size to `10` * fix(web): role filter (#99) * feat: 支持初始化低代码设计器 --------- Co-authored-by: GaoNeng <31283122+GaoNeng-wWw@users.noreply.github.com> Co-authored-by: wuyiping <42107997+wuyiping0628@users.noreply.github.com> Co-authored-by: chenxi-20 <2465950588@qq.com> Co-authored-by: liukun <953831480@qq.com> Co-authored-by: Kagol <kagol@sina.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR
fix:修复刷新后表单数据丢失导致校验报错
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Refactor
Bug Fixes