Hermes-ui/src/views/ModelsView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { NButton, NSpin } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import ProvidersPanel from '@/components/models/ProvidersPanel.vue'
import ProviderFormModal from '@/components/models/ProviderFormModal.vue'
import { useModelsStore } from '@/stores/models'

const { t } = useI18n()
const modelsStore = useModelsStore()
const showModal = ref(false)

onMounted(() => {
  modelsStore.fetchProviders()
})

function openCreateModal() {
  showModal.value = true
}

function handleModalClose() {
  showModal.value = false
}

async function handleSaved() {
  await modelsStore.fetchProviders()
  handleModalClose()
}
</script>

<template>
  <div class="models-view">
    <header class="models-header">
      <h2 class="header-title">{{ t('models.title') }}</h2>
      <NButton type="primary" @click="openCreateModal">
        <template #icon>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        </template>
        {{ t('models.addProvider') }}
      </NButton>
    </header>

    <div class="models-content">
      <NSpin :show="modelsStore.loading && modelsStore.providers.length === 0">
        <ProvidersPanel />
      </NSpin>
    </div>

    <ProviderFormModal
      v-if="showModal"
      @close="handleModalClose"
      @saved="handleSaved"
    />
  </div>
</template>

<style scoped lang="scss">
@use '@/styles/variables' as *;

.models-view {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.models-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid $border-color;
  flex-shrink: 0;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: $text-primary;
}

.models-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
</style>