feat: add profile management page with full CRUD UI

- Add frontend API layer, Pinia store, and 5 components (ProfileCard, ProfilesPanel, ProfileCreateModal, ProfileRenameModal, ProfileImportModal) - Add ProfilesView page with card grid layout and expandable details - Modify export endpoint to stream file as browser download instead of returning server path - Add sidebar nav entry, router route, and i18n translations (en/zh) - Support create, rename, delete, switch (with gateway restart), export, and import profiles Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-16 09:40:25 +08:00
parent 57ef171dda
commit 04b80a616e
13 changed files with 1081 additions and 4 deletions
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { NButton, NSpin } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import ProfilesPanel from '@/components/hermes/profiles/ProfilesPanel.vue'
+import ProfileCreateModal from '@/components/hermes/profiles/ProfileCreateModal.vue'
+import ProfileRenameModal from '@/components/hermes/profiles/ProfileRenameModal.vue'
+import ProfileImportModal from '@/components/hermes/profiles/ProfileImportModal.vue'
+import { useProfilesStore } from '@/stores/hermes/profiles'
+
+const { t } = useI18n()
+const profilesStore = useProfilesStore()
+
+const showCreateModal = ref(false)
+const showImportModal = ref(false)
+const renamingProfile = ref<string | null>(null)
+
+onMounted(() => {
+  profilesStore.fetchProfiles()
+})
+
+function handleCreated() {
+  showCreateModal.value = false
+}
+
+function handleRenamed() {
+  renamingProfile.value = null
+}
+
+function handleImported() {
+  showImportModal.value = false
+}
+</script>
+
+<template>
+  <div class="profiles-view">
+    <header class="page-header">
+      <h2 class="header-title">{{ t('profiles.title') }}</h2>
+      <div class="header-actions">
+        <NButton size="small" @click="showImportModal = true">
+          <template #icon>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+          </template>
+          {{ t('profiles.import') }}
+        </NButton>
+        <NButton type="primary" size="small" @click="showCreateModal = true">
+          <template #icon>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="5" x2="12" y2="19" />
+              <line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+          </template>
+          {{ t('profiles.create') }}
+        </NButton>
+      </div>
+    </header>
+
+    <div class="profiles-content">
+      <NSpin :show="profilesStore.loading && profilesStore.profiles.length === 0">
+        <ProfilesPanel @rename="renamingProfile = $event" />
+      </NSpin>
+    </div>
+
+    <ProfileCreateModal
+      v-if="showCreateModal"
+      @close="showCreateModal = false"
+      @saved="handleCreated"
+    />
+    <ProfileRenameModal
+      v-if="renamingProfile"
+      :profile-name="renamingProfile"
+      @close="renamingProfile = null"
+      @saved="handleRenamed"
+    />
+    <ProfileImportModal
+      v-if="showImportModal"
+      @close="showImportModal = false"
+      @saved="handleImported"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.profiles-view {
+  height: calc(100 * var(--vh));
+  display: flex;
+  flex-direction: column;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid $border-color;
+}
+
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: $text-primary;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.profiles-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+</style>