feat: group sidebar navigation

[IGCrystal-NEO]

解决了 #XYZ

Motivation

添加分组，减少视觉负担

Modifications

Check

• 😊 我的 Commit Message 符合良好的规范
• 👀 我的更改经过良好的测试
• 🤓 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到了 requirements.txt 和 pyproject.toml 文件相应位置。
• 😮 我的更改没有引入恶意代码

Sourcery 总结

将侧边栏项目分组为逻辑可折叠部分，并添加可调整大小的侧边栏功能。

新功能：

• 将侧边栏导航项分组到可折叠部分（平台、配置、其他）。
• 添加可拖动的调整大小手柄，以便在定义的范围内调整垂直侧边栏的宽度。

增强功能：

• 支持 NavItem 中基于层级结构的嵌套项目缩进。
• 将移动端 iframe 默认高度从 50% 增加到 80%，以提高可用性。

Original summary in English

Summary by Sourcery

Group sidebar items into logical collapsible sections and add resizable sidebar functionality.

New Features:

• Group sidebar navigation items into collapsible sections (Platforms, Configuration, Others).
• Add draggable resize handle to adjust vertical sidebar width within defined bounds.

Enhancements:

• Support nested item indentation in NavItem based on hierarchy level.
• Increase mobile iframe default height from 50% to 80% for better usability.

[sourcery-ai]

你好 - 我已审阅了你的更改 - 以下是一些反馈：

• 考虑在侧边栏调整大小逻辑中添加触摸支持 (touchmove 和 touchend)，以便用户可以在触摸设备和鼠标上进行调整。
• 对于 v-list-group 的 value/key，请使用唯一标识符（例如 item.id）而不是 item.title，以避免在标题更改或翻译时出现潜在冲突。
• 将侧边栏调整大小的常量和事件处理逻辑提取到一个可组合函数或实用工具中，以保持组件脚本的集中性和可维护性。

供 AI 代理的提示

请处理此代码审查中的注释：
## 总体评论
- 考虑在侧边栏调整大小逻辑中添加触摸支持 (touchmove 和 touchend)，以便用户可以在触摸设备和鼠标上进行调整。
- 对于 v-list-group 的 value/key，请使用唯一标识符（例如 item.id）而不是 item.title，以避免在标题更改或翻译时出现潜在冲突。
- 将侧边栏调整大小的常量和事件处理逻辑提取到一个可组合函数或实用工具中，以保持组件脚本的集中性和可维护性。

## 单独评论

### 评论 1
<location> `dashboard/src/layouts/full/vertical-sidebar/NavItem.vue:54` </location>
<code_context>
       <v-icon v-if="item.icon" :size="item.iconSize" class="hide-menu" :icon="item.icon"></v-icon>
     </template>
-    <v-list-item-title style="font-size: 14px;">{{ t(item.title) }}</v-list-item-title>
+    <v-list-item-title style="font-size: 14px; line-height: 1.2; word-break: break-word;">{{ t(item.title) }}</v-list-item-title>
     <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
       {{ item.subCaption }}
</code_context>

<issue_to_address>
列表项标题中重复的内联样式可以提取到 CSS 类中。

考虑为这些共享样式创建一个 CSS 类，以增强代码可维护性并确保一致的样式。

建议的实现：

```
    <v-list-item-title class="nav-list-item-title">{{ t(item.title) }}</v-list-item-title>

```

```
</code>

<style scoped>
.nav-list-item-title {
  font-size: 14px;
  line-height: 1.2;
  word-break: break-word;
}
</style>

```
</issue_to_address>

---

Sourcery 对开源项目免费 - 如果您喜欢我们的评论，请考虑分享它们 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮助我更有用！请点击每个评论上的 👍 或 👎，我将使用反馈来改进您的评论。}

Original comment in English

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

• Consider adding touch support (touchmove and touchend) to the sidebar resize logic so users can resize on touch devices as well as with a mouse.
• Use a unique identifier (e.g. item.id) instead of item.title for the v-list-group value/key to avoid potential conflicts when titles change or translate.
• Extract the sidebar resizing constants and event‐handler logic into a composable or utility to keep the component script focused and more maintainable.

Prompt for AI Agents

Please address the comments from this code review:
## Overall Comments
- Consider adding touch support (touchmove and touchend) to the sidebar resize logic so users can resize on touch devices as well as with a mouse.
- Use a unique identifier (e.g. item.id) instead of item.title for the v-list-group value/key to avoid potential conflicts when titles change or translate.
- Extract the sidebar resizing constants and event‐handler logic into a composable or utility to keep the component script focused and more maintainable.

## Individual Comments

### Comment 1
<location> `dashboard/src/layouts/full/vertical-sidebar/NavItem.vue:54` </location>
<code_context>
       <v-icon v-if="item.icon" :size="item.iconSize" class="hide-menu" :icon="item.icon"></v-icon>
     </template>
-    <v-list-item-title style="font-size: 14px;">{{ t(item.title) }}</v-list-item-title>
+    <v-list-item-title style="font-size: 14px; line-height: 1.2; word-break: break-word;">{{ t(item.title) }}</v-list-item-title>
     <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
       {{ item.subCaption }}
</code_context>

<issue_to_address>
Repeated inline styles for list item titles could be extracted into a CSS class.

Consider creating a CSS class for these shared styles to enhance code maintainability and ensure consistent styling.

Suggested implementation:

```
    <v-list-item-title class="nav-list-item-title">{{ t(item.title) }}</v-list-item-title>

```

```
</code>

<style scoped>
.nav-list-item-title {
  font-size: 14px;
  line-height: 1.2;
  word-break: break-word;
}
</style>

```
</issue_to_address>

---

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.}

[sourcery-ai]

suggestion: 列表项标题中重复的内联样式可以提取到 CSS 类中。

考虑为这些共享样式创建一个 CSS 类，以增强代码可维护性并确保一致的样式。

建议的实现：

    <v-list-item-title class="nav-list-item-title">{{ t(item.title) }}</v-list-item-title>

</code>

<style scoped>
.nav-list-item-title {
  font-size: 14px;
  line-height: 1.2;
  word-break: break-word;
}
</style>

Original comment in English

suggestion: Repeated inline styles for list item titles could be extracted into a CSS class.

Consider creating a CSS class for these shared styles to enhance code maintainability and ensure consistent styling.

Suggested implementation:

    <v-list-item-title class="nav-list-item-title">{{ t(item.title) }}</v-list-item-title>

</code>

<style scoped>
.nav-list-item-title {
  font-size: 14px;
  line-height: 1.2;
  word-break: break-word;
}
</style>

[Soulter]

好东西，但是感觉这样分类有点怪，但也暂时想不出该怎么改