front/src/views/Workflow.vue

<template>
  <div class="workflow-page">
    <div class="page-container">
      <div class="page-header">
        <h1 class="page-title">{{ t('workflow.title') }}</h1>
      </div>

      <div class="page-tabs">
        <router-link 
          to="/projects"
          class="tab-btn"
          :class="{ active: $route.name === 'projects' }"
        >
          {{ t('workflow.tabProjects') }}
        </router-link>
        <router-link 
          to="/workflow"
          class="tab-btn"
          :class="{ active: $route.name === 'workflow' }"
        >
          {{ t('workflow.tabWorkflow') }}
        </router-link>
      </div>

      <div class="workflow-content">
        <NodeEditor />
        <!-- config-panel会通过绝对定位显示在这里 -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import NodeEditor from '../components/NodeEditor.vue'

const { t } = useI18n()
</script>

<style scoped>
.workflow-page {
  min-height: 100vh;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
  border-radius: var(--ramex-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  margin: 1rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  border-bottom: 1px solid #e2e8f0;
  background: var(--ramex-bg-page);
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #2d3748;
  margin: 0;
}

.page-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0 2rem;
  border-bottom: 2px solid #e2e8f0;
  background: white;
}

.tab-btn {
  padding: 1rem 2rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #718096;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: -2px;
  text-decoration: none;
}

.tab-btn:hover {
  color: #4a5568;
}

.tab-btn.active,
.tab-btn.router-link-active {
  color: var(--ramex-accent);
  border-bottom-color: var(--ramex-accent);
}

.workflow-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px); /* 减去header和tabs的高度 */
  min-height: 500px; /* 确保有最小高度 */
  position: relative;
}
</style>