feat(strategy): 文件树分组支持点击折叠/展开(箭头旋转动效) [nas]

frontend/src/views/strategy/Code.vue

@@ -26,11 +26,15 @@ const syntaxOk = ref<boolean | null>(null)
 
 const active = computed(() => files.value.find((f) => f.name === activeName.value))
 
-// 文件树按类型分组:组合策略在前(常用),个股策略在后
+// 文件树按类型分组:组合策略在前(常用),个股策略在后;组头可点击折叠/展开
 const fileGroups = computed(() => [
   { label: '组合策略', items: files.value.filter((f) => f.type === 'portfolio') },
   { label: '个股策略', items: files.value.filter((f) => f.type !== 'portfolio') },
 ].filter((g) => g.items.length))
+const collapsed = ref<Record<string, boolean>>({})
+function toggleGroup(label: string): void {
+  collapsed.value = { ...collapsed.value, [label]: !collapsed.value[label] }
+}
 
 onMounted(async () => {
   try {
@@ -122,12 +126,14 @@ function runBacktest(): void {
           <span class="section-mark"></span>策略文件
         </div>
         <template v-for="g in fileGroups" :key="g.label">
-          <div class="tree-group">
+          <div class="tree-group" @click="toggleGroup(g.label)">
+            <span class="tree-arrow" :class="{ folded: collapsed[g.label] }">▾</span>
             {{ g.label }}
             <span class="tree-count mono">{{ g.items.length }}</span>
           </div>
           <div
             v-for="f in g.items"
+            v-show="!collapsed[g.label]"
             :key="f.name"
             class="tree-item"
             :class="{ active: f.name === activeName, dirty: f.name === activeName && dirty }"
@@ -220,7 +226,16 @@ function runBacktest(): void {
   font-size: 11px;
   font-weight: 600;
   color: var(--text-2);
+  cursor: pointer;
+  user-select: none;
 }
+.tree-arrow {
+  display: inline-block;
+  font-size: 9px;
+  color: var(--text-3);
+  transition: transform 0.15s var(--ease);
+}
+.tree-arrow.folded { transform: rotate(-90deg); }
 .tree-count {
   font-size: 10px;
   color: var(--text-3);