perf: integrate Pinia store for log cache management

[ocetars]

尝试修复控制台日志在后台时停止更新的问题

问题

#3769 - 网页仪表盘控制台的 log 在浏览器后台挂一会儿后停止更新

修复方案

使用 Pinia 的 storeToRefs 获取 log_cache 的响应式引用，替代原来的 useCommonStore().getLogCache() 方法。

修复理由

使用 storeToRefs 可以确保获取的是一个真正的响应式 ref，Vue 的响应式系统能够更可靠地追踪其变化，从而在日志更新时正确触发 watch 回调。

备注

由于bug不是必现，因此这是一个尝试性修复。如果问题仍然存在，可能需要进一步添加 visibilitychange 事件监听来主动同步后台期间遗漏的日志。

---

Checklist / 检查清单

• 😊 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。/ If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
• 👀 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。/ My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
• 🤓 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到了 requirements.txt 和 pyproject.toml 文件相应位置。/ I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
• 😮 我的更改没有引入恶意代码。/ My changes do not introduce malicious code.

Summary by Sourcery

Bug Fixes:

• 通过直接绑定到响应式的 store ref 而不是快照值，确保控制台日志查看器与 Pinia 日志缓存保持同步。

Original summary in English

Summary by Sourcery

Bug Fixes:

• Ensure the console log viewer stays in sync with the Pinia log cache by binding directly to a reactive store ref instead of a snapshot value.

[sourcery-ai]

你好——我已经review了你的改动，这里是一些反馈：

• 现在这个组件同时使用了一个只包含 import 的 <script setup> 块和一个 Options API 的 export default 块；建议要么把 Pinia 的 import 移到 Options 脚本里，要么彻底迁移到 <script setup>，以避免出现重复的 script 块以及潜在的困惑。
• 你把 log_cache（从 storeToRefs 得到的 ref）直接赋值到 data() 里的 logCache；请再检查一下在 template / methods 中是如何使用 logCache 的，以确保 ref 的自动解包行为与之前 getLogCache() 的返回类型一致（例如，如果你期望的是一个普通数组，可能需要使用 log_cache.value，或者用一个 computed 包一层）。

给 AI Agent 的提示

Please address the comments from this code review:

## Overall Comments
- The component is now mixing a `<script setup>` block (with imports only) and an Options API `export default` block; consider moving the Pinia imports into the Options script (or fully migrating to `<script setup>`) to avoid redundant script blocks and potential confusion.
- You are assigning `log_cache` (a ref from `storeToRefs`) directly into `data()` as `logCache`; double‑check how `logCache` is used in the template/methods to ensure that the ref unwrapping behavior matches the previous `getLogCache()` return type (e.g., if you expect a plain array, you may want to use `log_cache.value` or a computed wrapper instead).

---

Sourcery 对开源项目是免费的——如果你觉得我们的 review 有帮助，欢迎分享 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据你的反馈改进后续的 review。}

Original comment in English

Hey there - I've reviewed your changes - here's some feedback:

• The component is now mixing a <script setup> block (with imports only) and an Options API export default block; consider moving the Pinia imports into the Options script (or fully migrating to <script setup>) to avoid redundant script blocks and potential confusion.
• You are assigning log_cache (a ref from storeToRefs) directly into data() as logCache; double‑check how logCache is used in the template/methods to ensure that the ref unwrapping behavior matches the previous getLogCache() return type (e.g., if you expect a plain array, you may want to use log_cache.value or a computed wrapper instead).

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The component is now mixing a `<script setup>` block (with imports only) and an Options API `export default` block; consider moving the Pinia imports into the Options script (or fully migrating to `<script setup>`) to avoid redundant script blocks and potential confusion.
- You are assigning `log_cache` (a ref from `storeToRefs`) directly into `data()` as `logCache`; double‑check how `logCache` is used in the template/methods to ensure that the ref unwrapping behavior matches the previous `getLogCache()` return type (e.g., if you expect a plain array, you may want to use `log_cache.value` or a computed wrapper instead).

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Copilot]

Pull request overview

This PR attempts to fix a console log update issue where logs stop updating when the browser tab is in the background (issue #3769). The fix replaces direct method call useCommonStore().getLogCache() with Pinia's storeToRefs to obtain a reactive reference to the log cache.

However, the implementation has critical issues:

• Using storeToRefs in Options API's data() function won't maintain reactivity as intended
• Mixing <script setup> and <script> blocks creates confusing scope patterns

[Copilot]

This component mixes <script setup> and <script> (Options API) approaches. The imports in <script setup> (lines 2-3) are not accessible in the Options API <script> block below (line 24+). Each script block has its own scope.

To fix this, either:

1. Move the imports into the regular <script> block and remove <script setup>
2. Convert the entire component to use Composition API with a proper setup() function that returns the reactive data

Currently, the imports work because they're hoisted by the module system, but this pattern is confusing and not the intended way to structure Vue 3 components.