提交代码

frontend/src/App.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-container class="app-root">
+    <el-aside width="220px" class="app-aside">
+      <div class="app-logo">
+        <span class="app-logo-title">MangTool</span>
+        <span class="app-logo-sub">音乐工具箱</span>
+      </div>
+      <el-menu
+        :default-active="activeKey"
+        class="app-menu"
+        @select="handleSelect"
+      >
+        <el-menu-item index="aggregate">01 音频文件汇聚</el-menu-item>
+        <el-menu-item index="convert">02 音频格式智能处理</el-menu-item>
+        <el-menu-item index="dedup">03 音乐去重</el-menu-item>
+        <el-menu-item index="zhconvert">04 元数据繁简转换</el-menu-item>
+        <el-menu-item index="organize">05 音乐整理</el-menu-item>
+        <el-menu-item index="merge">06 整理入库</el-menu-item>
+        <el-menu-item index="settings">全局设置</el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <el-container>
+      <el-header class="app-header">
+        <div class="app-header-title">
+          <h1>{{ currentTitle }}</h1>
+          <p>{{ currentSubtitle }}</p>
+        </div>
+      </el-header>
+      <el-main class="app-main">
+        <component :is="currentComponent" />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import AggregateTab from './components/AggregateTab.vue';
+import ConvertTab from './components/ConvertTab.vue';
+import DedupTab from './components/DedupTab.vue';
+import TraditionalFilterTab from './components/TraditionalFilterTab.vue';
+import RenameTab from './components/RenameTab.vue';
+import MergeTab from './components/MergeTab.vue';
+import SettingsTab from './components/SettingsTab.vue';
+
+type TabKey =
+  | 'aggregate'
+  | 'convert'
+  | 'dedup'
+  | 'zhconvert'
+  | 'organize'
+  | 'merge'
+  | 'settings';
+
+const activeKey = ref<TabKey>('aggregate');
+
+const currentComponent = computed(() => {
+  switch (activeKey.value) {
+    case 'aggregate':
+      return AggregateTab;
+    case 'convert':
+      return ConvertTab;
+    case 'dedup':
+      return DedupTab;
+    case 'zhconvert':
+      return TraditionalFilterTab;
+    case 'organize':
+      return RenameTab;
+    case 'merge':
+      return MergeTab;
+    case 'settings':
+      return SettingsTab;
+    default:
+      return AggregateTab;
+  }
+});
+
+const currentTitle = computed(() => {
+  switch (activeKey.value) {
+    case 'aggregate':
+      return '01 · 音频文件汇聚';
+    case 'convert':
+      return '02 · 音频格式智能处理';
+    case 'dedup':
+      return '03 · 音乐去重';
+    case 'zhconvert':
+      return '04 · 音乐元数据繁体转简体';
+    case 'organize':
+      return '05 · 音乐整理';
+    case 'merge':
+      return '06 · 整理入库';
+    case 'settings':
+      return '全局配置与路径设置';
+    default:
+      return '';
+  }
+});
+
+const currentSubtitle = computed(() => {
+  switch (activeKey.value) {
+    case 'aggregate':
+      return '将分散音频扁平化汇聚，为后续处理统一入口。';
+    case 'convert':
+      return '智能识别无损/有损格式并统一转码为 FLAC。';
+    case 'dedup':
+      return '基于 MD5 与元数据的双重策略进行音乐去重。';
+    case 'zhconvert':
+      return '批量检测并转换标签中的繁体中文。';
+    case 'organize':
+      return '按 Navidrome 规范重命名与整理目录结构。';
+    case 'merge':
+      return '将整理好的 staging 目录智能合并入主库。';
+    case 'settings':
+      return '配置全局工作目录与各阶段标准子目录。';
+    default:
+      return '';
+  }
+});
+
+function handleSelect(key: string) {
+  activeKey.value = key as TabKey;
+}
+</script>
+
+<style scoped>
+.app-root {
+  height: 100vh;
+}
+
+.app-aside {
+  border-right: 1px solid #e5e7eb;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-logo {
+  padding: 0 20px 12px;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 12px;
+}
+
+.app-logo-title {
+  display: block;
+  font-weight: 600;
+  font-size: 18px;
+}
+
+.app-logo-sub {
+  display: block;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.app-menu {
+  border-right: none;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.app-header-title h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.app-header-title p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.app-main {
+  padding: 16px;
+  background: #f3f4f6;
+}
+</style>
+