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>
This commit is contained in:
ekko
@@ -0,0 +1,113 @@
|
||||
import { request, getBaseUrlValue, getApiKey } from '../client'
|
||||
|
||||
export interface HermesProfile {
|
||||
name: string
|
||||
active: boolean
|
||||
model: string
|
||||
gateway: string
|
||||
alias: string
|
||||
}
|
||||
|
||||
export interface HermesProfileDetail {
|
||||
name: string
|
||||
path: string
|
||||
model: string
|
||||
provider: string
|
||||
gateway: string
|
||||
skills: number
|
||||
hasEnv: boolean
|
||||
hasSoulMd: boolean
|
||||
}
|
||||
|
||||
export async function fetchProfiles(): Promise<HermesProfile[]> {
|
||||
const res = await request<{ profiles: HermesProfile[] }>('/api/hermes/profiles')
|
||||
return res.profiles
|
||||
}
|
||||
|
||||
export async function fetchProfileDetail(name: string): Promise<HermesProfileDetail> {
|
||||
const res = await request<{ profile: HermesProfileDetail }>(`/api/hermes/profiles/${encodeURIComponent(name)}`)
|
||||
return res.profile
|
||||
}
|
||||
|
||||
export async function createProfile(name: string, clone?: boolean): Promise<boolean> {
|
||||
try {
|
||||
await request('/api/hermes/profiles', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name, clone }),
|
||||
})
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteProfile(name: string): Promise<boolean> {
|
||||
try {
|
||||
await request(`/api/hermes/profiles/${encodeURIComponent(name)}`, { method: 'DELETE' })
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function renameProfile(name: string, newName: string): Promise<boolean> {
|
||||
try {
|
||||
await request(`/api/hermes/profiles/${encodeURIComponent(name)}/rename`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ new_name: newName }),
|
||||
})
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function switchProfile(name: string): Promise<boolean> {
|
||||
try {
|
||||
await request('/api/hermes/profiles/active', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ name }),
|
||||
})
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function exportProfile(name: string): Promise<boolean> {
|
||||
try {
|
||||
const baseUrl = getBaseUrlValue()
|
||||
const token = getApiKey()
|
||||
const headers: Record<string, string> = {}
|
||||
if (token) headers['Authorization'] = `Bearer ${token}`
|
||||
|
||||
const res = await fetch(`${baseUrl}/api/hermes/profiles/${encodeURIComponent(name)}/export`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
})
|
||||
if (!res.ok) throw new Error()
|
||||
|
||||
const blob = await res.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `hermes-profile-${name}.tar.gz`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function importProfile(archive: string, name?: string): Promise<boolean> {
|
||||
try {
|
||||
await request('/api/hermes/profiles/import', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ archive, name }),
|
||||
})
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,290 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { NButton, NTag, NSpin, useMessage, useDialog } from 'naive-ui'
|
||||
import type { HermesProfile, HermesProfileDetail } from '@/api/hermes/profiles'
|
||||
import { useProfilesStore } from '@/stores/hermes/profiles'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const props = defineProps<{ profile: HermesProfile }>()
|
||||
const emit = defineEmits<{ rename: [name: string] }>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const profilesStore = useProfilesStore()
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
|
||||
const expanded = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
const exporting = ref(false)
|
||||
const detail = ref<HermesProfileDetail | null>(null)
|
||||
|
||||
const isDefault = computed(() => props.profile.name === 'default')
|
||||
|
||||
async function toggleDetail() {
|
||||
if (expanded.value) {
|
||||
expanded.value = false
|
||||
return
|
||||
}
|
||||
expanded.value = true
|
||||
detailLoading.value = true
|
||||
try {
|
||||
detail.value = await profilesStore.fetchProfileDetail(props.profile.name)
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSwitch() {
|
||||
dialog.warning({
|
||||
title: t('profiles.switchTo'),
|
||||
content: t('profiles.switchConfirm', { name: props.profile.name }),
|
||||
positiveText: t('common.confirm'),
|
||||
negativeText: t('common.cancel'),
|
||||
onPositiveClick: async () => {
|
||||
const ok = await profilesStore.switchProfile(props.profile.name)
|
||||
if (ok) {
|
||||
message.success(t('profiles.switchSuccess', { name: props.profile.name }))
|
||||
} else {
|
||||
message.error(t('profiles.switchFailed'))
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
dialog.warning({
|
||||
title: t('profiles.delete'),
|
||||
content: t('profiles.deleteConfirm', { name: props.profile.name }),
|
||||
positiveText: t('common.delete'),
|
||||
negativeText: t('common.cancel'),
|
||||
onPositiveClick: async () => {
|
||||
const ok = await profilesStore.deleteProfile(props.profile.name)
|
||||
if (ok) {
|
||||
message.success(t('profiles.deleteSuccess'))
|
||||
} else {
|
||||
message.error(t('profiles.deleteFailed'))
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
exporting.value = true
|
||||
try {
|
||||
const ok = await profilesStore.exportProfile(props.profile.name)
|
||||
if (ok) {
|
||||
message.success(t('profiles.exportSuccess'))
|
||||
} else {
|
||||
message.error(t('profiles.exportFailed'))
|
||||
}
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="profile-card" :class="{ active: profile.active }">
|
||||
<div class="card-header">
|
||||
<h3 class="profile-name">{{ profile.name }}</h3>
|
||||
<NTag v-if="profile.active" size="tiny" type="success" :bordered="false">
|
||||
{{ t('profiles.active') }}
|
||||
</NTag>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('profiles.model') }}</span>
|
||||
<code class="info-value mono">{{ profile.model }}</code>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('profiles.gateway') }}</span>
|
||||
<code class="info-value mono">{{ profile.gateway }}</code>
|
||||
</div>
|
||||
<div v-if="profile.alias" class="info-row">
|
||||
<span class="info-label">{{ t('profiles.alias') }}</span>
|
||||
<span class="info-value">{{ profile.alias }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-detail-toggle" @click="toggleDetail">
|
||||
<svg
|
||||
width="14" height="14" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="toggle-icon"
|
||||
:class="{ expanded }"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
<span class="toggle-text">{{ expanded ? t('common.collapse') : t('common.expand') }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="expanded" class="card-detail">
|
||||
<NSpin :show="detailLoading" size="small">
|
||||
<template v-if="detail">
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('profiles.provider') }}</span>
|
||||
<span class="info-value">{{ detail.provider }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('profiles.path') }}</span>
|
||||
<code class="info-value mono detail-path">{{ detail.path }}</code>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('profiles.skills') }}</span>
|
||||
<span class="info-value">{{ detail.skills }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('profiles.hasEnv') }}</span>
|
||||
<span class="info-value">{{ detail.hasEnv ? 'Yes' : 'No' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('profiles.hasSoulMd') }}</span>
|
||||
<span class="info-value">{{ detail.hasSoulMd ? 'Yes' : 'No' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</NSpin>
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<NButton
|
||||
v-if="!profile.active"
|
||||
size="tiny"
|
||||
:loading="profilesStore.switching"
|
||||
quaternary
|
||||
type="primary"
|
||||
@click="handleSwitch"
|
||||
>
|
||||
{{ t('profiles.switchTo') }}
|
||||
</NButton>
|
||||
<NButton size="tiny" quaternary @click="emit('rename', profile.name)">
|
||||
{{ t('profiles.rename') }}
|
||||
</NButton>
|
||||
<NButton
|
||||
size="tiny"
|
||||
quaternary
|
||||
type="error"
|
||||
:disabled="isDefault"
|
||||
@click="handleDelete"
|
||||
>
|
||||
{{ t('common.delete') }}
|
||||
</NButton>
|
||||
<NButton size="tiny" quaternary :loading="exporting" @click="handleExport">
|
||||
{{ t('profiles.export') }}
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.profile-card {
|
||||
background-color: $bg-card;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
padding: 16px;
|
||||
transition: border-color $transition-fast;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($accent-primary, 0.3);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: rgba($success, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-detail-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
color: $text-muted;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
transition: transform 0.2s;
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card-detail {
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid $border-light;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: $text-muted;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 12px;
|
||||
color: $text-secondary;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: $font-code;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-path {
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid $border-light;
|
||||
padding-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { NModal, NForm, NFormItem, NInput, NButton, NSwitch, useMessage } from 'naive-ui'
|
||||
import { useProfilesStore } from '@/stores/hermes/profiles'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
saved: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const profilesStore = useProfilesStore()
|
||||
const message = useMessage()
|
||||
|
||||
const showModal = ref(true)
|
||||
const loading = ref(false)
|
||||
const name = ref('')
|
||||
const clone = ref(false)
|
||||
|
||||
async function handleSave() {
|
||||
if (!name.value.trim()) {
|
||||
message.warning(t('profiles.namePlaceholder'))
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const ok = await profilesStore.createProfile(name.value.trim(), clone.value)
|
||||
if (ok) {
|
||||
message.success(t('profiles.createSuccess', { name: name.value.trim() }))
|
||||
emit('saved')
|
||||
} else {
|
||||
message.error(t('profiles.createFailed'))
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
showModal.value = false
|
||||
setTimeout(() => emit('close'), 200)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="showModal"
|
||||
preset="card"
|
||||
:title="t('profiles.create')"
|
||||
:style="{ width: 'min(420px, calc(100vw - 32px))' }"
|
||||
:mask-closable="!loading"
|
||||
@after-leave="emit('close')"
|
||||
>
|
||||
<NForm label-placement="top">
|
||||
<NFormItem :label="t('profiles.name')" required>
|
||||
<NInput
|
||||
v-model:value="name"
|
||||
:placeholder="t('profiles.namePlaceholder')"
|
||||
@keyup.enter="handleSave"
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem :label="t('profiles.cloneFromCurrent')">
|
||||
<NSwitch v-model:value="clone" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
<NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" :loading="loading" @click="handleSave">
|
||||
{{ t('common.create') }}
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { NModal, NForm, NFormItem, NInput, NButton, useMessage } from 'naive-ui'
|
||||
import { useProfilesStore } from '@/stores/hermes/profiles'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
saved: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const profilesStore = useProfilesStore()
|
||||
const message = useMessage()
|
||||
|
||||
const showModal = ref(true)
|
||||
const loading = ref(false)
|
||||
const archive = ref('')
|
||||
const name = ref('')
|
||||
|
||||
async function handleSave() {
|
||||
if (!archive.value.trim()) {
|
||||
message.warning(t('profiles.archivePathPlaceholder'))
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const ok = await profilesStore.importProfile(
|
||||
archive.value.trim(),
|
||||
name.value.trim() || undefined,
|
||||
)
|
||||
if (ok) {
|
||||
message.success(t('profiles.importSuccess'))
|
||||
emit('saved')
|
||||
} else {
|
||||
message.error(t('profiles.importFailed'))
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
showModal.value = false
|
||||
setTimeout(() => emit('close'), 200)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="showModal"
|
||||
preset="card"
|
||||
:title="t('profiles.import')"
|
||||
:style="{ width: 'min(420px, calc(100vw - 32px))' }"
|
||||
:mask-closable="!loading"
|
||||
@after-leave="emit('close')"
|
||||
>
|
||||
<NForm label-placement="top">
|
||||
<NFormItem :label="t('profiles.archivePath')" required>
|
||||
<NInput
|
||||
v-model:value="archive"
|
||||
:placeholder="t('profiles.archivePathPlaceholder')"
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem :label="t('profiles.importName')">
|
||||
<NInput
|
||||
v-model:value="name"
|
||||
:placeholder="t('profiles.importNamePlaceholder')"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
<NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" :loading="loading" @click="handleSave">
|
||||
{{ t('common.confirm') }}
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { NModal, NForm, NFormItem, NInput, NButton, useMessage } from 'naive-ui'
|
||||
import { useProfilesStore } from '@/stores/hermes/profiles'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const props = defineProps<{ profileName: string }>()
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
saved: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const profilesStore = useProfilesStore()
|
||||
const message = useMessage()
|
||||
|
||||
const showModal = ref(true)
|
||||
const loading = ref(false)
|
||||
const newName = ref('')
|
||||
|
||||
async function handleSave() {
|
||||
if (!newName.value.trim()) {
|
||||
message.warning(t('profiles.newNamePlaceholder'))
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const ok = await profilesStore.renameProfile(props.profileName, newName.value.trim())
|
||||
if (ok) {
|
||||
message.success(t('profiles.renameSuccess'))
|
||||
emit('saved')
|
||||
} else {
|
||||
message.error(t('profiles.renameFailed'))
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
showModal.value = false
|
||||
setTimeout(() => emit('close'), 200)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="showModal"
|
||||
preset="card"
|
||||
:title="t('profiles.rename')"
|
||||
:style="{ width: 'min(420px, calc(100vw - 32px))' }"
|
||||
:mask-closable="!loading"
|
||||
@after-leave="emit('close')"
|
||||
>
|
||||
<NForm label-placement="top">
|
||||
<NFormItem :label="t('profiles.newName')" required>
|
||||
<NInput
|
||||
v-model:value="newName"
|
||||
:placeholder="t('profiles.newNamePlaceholder')"
|
||||
@keyup.enter="handleSave"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
<NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" :loading="loading" @click="handleSave">
|
||||
{{ t('common.confirm') }}
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import ProfileCard from './ProfileCard.vue'
|
||||
import { useProfilesStore } from '@/stores/hermes/profiles'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
defineEmits<{ rename: [name: string] }>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const profilesStore = useProfilesStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="profilesStore.profiles.length === 0" class="empty-state">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="empty-icon">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
<p>{{ t('profiles.noProfiles') }}</p>
|
||||
</div>
|
||||
<div v-else class="profiles-grid">
|
||||
<ProfileCard
|
||||
v-for="p in profilesStore.profiles"
|
||||
:key="p.name"
|
||||
:profile="p"
|
||||
@rename="$emit('rename', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $text-muted;
|
||||
gap: 12px;
|
||||
|
||||
.empty-icon {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.profiles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -147,6 +147,27 @@ function handleNav(key: string) {
|
||||
<span>{{ t("sidebar.models") }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="nav-item"
|
||||
:class="{ active: selectedKey === 'hermes.profiles' }"
|
||||
@click="handleNav('hermes.profiles')"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
<span>{{ t("sidebar.profiles") }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="nav-item"
|
||||
:class="{ active: selectedKey === 'hermes.channels' }"
|
||||
|
||||
@@ -31,6 +31,9 @@ export default {
|
||||
disable: 'Disable',
|
||||
configured: 'Configured',
|
||||
notConfigured: 'Not configured',
|
||||
confirm: 'Confirm',
|
||||
expand: 'Expand',
|
||||
collapse: 'Collapse',
|
||||
},
|
||||
|
||||
// Sidebar
|
||||
@@ -38,6 +41,7 @@ export default {
|
||||
chat: 'Chat',
|
||||
jobs: 'Jobs',
|
||||
models: 'Models',
|
||||
profiles: 'Profiles',
|
||||
skills: 'Skills',
|
||||
memory: 'Memory',
|
||||
logs: 'Logs',
|
||||
@@ -197,6 +201,50 @@ export default {
|
||||
fetchFailed: 'Failed to fetch models',
|
||||
},
|
||||
|
||||
// Profiles
|
||||
profiles: {
|
||||
title: 'Profiles',
|
||||
create: 'Create Profile',
|
||||
import: 'Import',
|
||||
export: 'Export',
|
||||
rename: 'Rename',
|
||||
delete: 'Delete',
|
||||
switchTo: 'Switch to',
|
||||
switchConfirm: 'Switching to profile "{name}" will restart the gateway. Continue?',
|
||||
switchSuccess: 'Switched to profile "{name}"',
|
||||
switchFailed: 'Failed to switch profile. Gateway may need manual restart.',
|
||||
createSuccess: 'Profile "{name}" created',
|
||||
createFailed: 'Failed to create profile',
|
||||
renameSuccess: 'Profile renamed',
|
||||
renameFailed: 'Failed to rename profile',
|
||||
deleteConfirm: 'Are you sure you want to delete profile "{name}"?',
|
||||
deleteSuccess: 'Profile deleted',
|
||||
deleteFailed: 'Failed to delete profile',
|
||||
exportSuccess: 'Profile exported',
|
||||
exportFailed: 'Failed to export profile',
|
||||
importSuccess: 'Profile imported',
|
||||
importFailed: 'Failed to import profile',
|
||||
name: 'Profile Name',
|
||||
namePlaceholder: 'Enter profile name',
|
||||
newName: 'New Name',
|
||||
newNamePlaceholder: 'Enter new name',
|
||||
cloneFromCurrent: 'Clone from current profile',
|
||||
archivePath: 'Archive Path',
|
||||
archivePathPlaceholder: 'Server path to archive file',
|
||||
importName: 'Profile Name (optional)',
|
||||
importNamePlaceholder: 'Leave empty to use archive name',
|
||||
active: 'Active',
|
||||
model: 'Model',
|
||||
gateway: 'Gateway',
|
||||
alias: 'Alias',
|
||||
provider: 'Provider',
|
||||
path: 'Path',
|
||||
skills: 'Skills',
|
||||
hasEnv: 'Has .env',
|
||||
hasSoulMd: 'Has soul.md',
|
||||
noProfiles: 'No profiles found. Create one to get started.',
|
||||
},
|
||||
|
||||
// Logs
|
||||
logs: {
|
||||
title: 'Logs',
|
||||
|
||||
@@ -31,6 +31,9 @@ export default {
|
||||
disable: '禁用',
|
||||
configured: '已配置',
|
||||
notConfigured: '未配置',
|
||||
confirm: '确定',
|
||||
expand: '展开',
|
||||
collapse: '收起',
|
||||
},
|
||||
|
||||
// 侧边栏
|
||||
@@ -38,6 +41,7 @@ export default {
|
||||
chat: '对话',
|
||||
jobs: '任务',
|
||||
models: '模型',
|
||||
profiles: '配置',
|
||||
skills: '技能',
|
||||
memory: '记忆',
|
||||
logs: '日志',
|
||||
@@ -197,6 +201,50 @@ export default {
|
||||
fetchFailed: '获取模型失败',
|
||||
},
|
||||
|
||||
// 配置
|
||||
profiles: {
|
||||
title: '配置',
|
||||
create: '创建配置',
|
||||
import: '导入',
|
||||
export: '导出',
|
||||
rename: '重命名',
|
||||
delete: '删除',
|
||||
switchTo: '切换到',
|
||||
switchConfirm: '切换到配置 "{name}" 将重启网关，是否继续？',
|
||||
switchSuccess: '已切换到配置 "{name}"',
|
||||
switchFailed: '切换配置失败，网关可能需要手动重启',
|
||||
createSuccess: '配置 "{name}" 已创建',
|
||||
createFailed: '创建配置失败',
|
||||
renameSuccess: '配置已重命名',
|
||||
renameFailed: '重命名配置失败',
|
||||
deleteConfirm: '确定删除配置 "{name}" 吗？',
|
||||
deleteSuccess: '配置已删除',
|
||||
deleteFailed: '删除配置失败',
|
||||
exportSuccess: '配置已导出',
|
||||
exportFailed: '导出配置失败',
|
||||
importSuccess: '配置已导入',
|
||||
importFailed: '导入配置失败',
|
||||
name: '配置名称',
|
||||
namePlaceholder: '输入配置名称',
|
||||
newName: '新名称',
|
||||
newNamePlaceholder: '输入新名称',
|
||||
cloneFromCurrent: '从当前配置克隆',
|
||||
archivePath: '归档路径',
|
||||
archivePathPlaceholder: '归档文件的服务器路径',
|
||||
importName: '配置名称（可选）',
|
||||
importNamePlaceholder: '留空则使用归档名称',
|
||||
active: '活跃',
|
||||
model: '模型',
|
||||
gateway: '网关',
|
||||
alias: '别名',
|
||||
provider: 'Provider',
|
||||
path: '路径',
|
||||
skills: '技能',
|
||||
hasEnv: '有 .env',
|
||||
hasSoulMd: '有 soul.md',
|
||||
noProfiles: '暂无配置，创建一个开始吧。',
|
||||
},
|
||||
|
||||
// 日志
|
||||
logs: {
|
||||
title: '日志',
|
||||
|
||||
@@ -25,6 +25,11 @@ const router = createRouter({
|
||||
name: 'hermes.models',
|
||||
component: () => import('@/views/hermes/ModelsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/hermes/profiles',
|
||||
name: 'hermes.profiles',
|
||||
component: () => import('@/views/hermes/ProfilesView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/hermes/logs',
|
||||
name: 'hermes.logs',
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import * as profilesApi from '@/api/hermes/profiles'
|
||||
import type { HermesProfile, HermesProfileDetail } from '@/api/hermes/profiles'
|
||||
|
||||
export const useProfilesStore = defineStore('profiles', () => {
|
||||
const profiles = ref<HermesProfile[]>([])
|
||||
const activeProfile = ref<HermesProfile | null>(null)
|
||||
const detailMap = ref<Record<string, HermesProfileDetail>>({})
|
||||
const loading = ref(false)
|
||||
const switching = ref(false)
|
||||
|
||||
async function fetchProfiles() {
|
||||
loading.value = true
|
||||
try {
|
||||
profiles.value = await profilesApi.fetchProfiles()
|
||||
activeProfile.value = profiles.value.find(p => p.active) ?? null
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch profiles:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchProfileDetail(name: string) {
|
||||
if (detailMap.value[name]) return detailMap.value[name]
|
||||
try {
|
||||
const detail = await profilesApi.fetchProfileDetail(name)
|
||||
detailMap.value[name] = detail
|
||||
return detail
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function createProfile(name: string, clone?: boolean) {
|
||||
const ok = await profilesApi.createProfile(name, clone)
|
||||
if (ok) await fetchProfiles()
|
||||
return ok
|
||||
}
|
||||
|
||||
async function deleteProfile(name: string) {
|
||||
const ok = await profilesApi.deleteProfile(name)
|
||||
if (ok) {
|
||||
delete detailMap.value[name]
|
||||
await fetchProfiles()
|
||||
}
|
||||
return ok
|
||||
}
|
||||
|
||||
async function renameProfile(name: string, newName: string) {
|
||||
const ok = await profilesApi.renameProfile(name, newName)
|
||||
if (ok) {
|
||||
delete detailMap.value[name]
|
||||
await fetchProfiles()
|
||||
}
|
||||
return ok
|
||||
}
|
||||
|
||||
async function switchProfile(name: string) {
|
||||
switching.value = true
|
||||
try {
|
||||
const ok = await profilesApi.switchProfile(name)
|
||||
if (ok) await fetchProfiles()
|
||||
return ok
|
||||
} finally {
|
||||
switching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function exportProfile(name: string) {
|
||||
return profilesApi.exportProfile(name)
|
||||
}
|
||||
|
||||
async function importProfile(archive: string, name?: string) {
|
||||
const ok = await profilesApi.importProfile(archive, name)
|
||||
if (ok) await fetchProfiles()
|
||||
return ok
|
||||
}
|
||||
|
||||
return {
|
||||
profiles,
|
||||
activeProfile,
|
||||
detailMap,
|
||||
loading,
|
||||
switching,
|
||||
fetchProfiles,
|
||||
fetchProfileDetail,
|
||||
createProfile,
|
||||
deleteProfile,
|
||||
renameProfile,
|
||||
switchProfile,
|
||||
exportProfile,
|
||||
importProfile,
|
||||
}
|
||||
})
|
||||
@@ -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>
|
||||
@@ -1,4 +1,7 @@
|
||||
import Router from '@koa/router'
|
||||
import { createReadStream, existsSync, unlinkSync } from 'fs'
|
||||
import { basename, join } from 'path'
|
||||
import { tmpdir } from 'os'
|
||||
import * as hermesCli from '../../services/hermes-cli'
|
||||
|
||||
export const profileRoutes = new Router()
|
||||
@@ -156,14 +159,29 @@ profileRoutes.put('/api/hermes/profiles/active', async (ctx) => {
|
||||
}
|
||||
})
|
||||
|
||||
// POST /api/profiles/:name/export - Export profile to archive
|
||||
// POST /api/profiles/:name/export - Export profile to archive and download
|
||||
profileRoutes.post('/api/hermes/profiles/:name/export', async (ctx) => {
|
||||
const { name } = ctx.params
|
||||
const { output } = ctx.request.body as { output?: string }
|
||||
const outputPath = join(tmpdir(), `hermes-profile-${name}.tar.gz`)
|
||||
|
||||
try {
|
||||
const result = await hermesCli.exportProfile(name, output)
|
||||
ctx.body = { success: true, message: result.trim() }
|
||||
await hermesCli.exportProfile(name, outputPath)
|
||||
|
||||
if (!existsSync(outputPath)) {
|
||||
ctx.status = 500
|
||||
ctx.body = { error: 'Export file not found' }
|
||||
return
|
||||
}
|
||||
|
||||
const filename = basename(outputPath)
|
||||
ctx.set('Content-Disposition', `attachment; filename="${filename}"`)
|
||||
ctx.set('Content-Type', 'application/gzip')
|
||||
ctx.body = createReadStream(outputPath)
|
||||
|
||||
// Clean up temp file after response ends
|
||||
ctx.res.on('finish', () => {
|
||||
try { unlinkSync(outputPath) } catch { }
|
||||
})
|
||||
} catch (err: any) {
|
||||
ctx.status = 500
|
||||
ctx.body = { error: err.message }
|
||||
|
||||
Reference in New Issue
Block a user