<script setup lang="ts">
import { skillVersions } from '@/data/studioMock';
</script>

<template>
  <section class="studio-page skill-page">
    <header class="page-title-row">
      <div>
        <p class="studio-kicker">SkillWorkspaceView</p>
        <h1>Skill 编辑与使用</h1>
      </div>
      <el-button type="primary">测试 Skill</el-button>
    </header>

    <div class="skill-layout">
      <section class="studio-panel skill-editor">
        <div class="panel-heading">
          <h2>引用审校 Skill</h2>
          <span>PUT /api/skills/skill-citation/draft</span>
        </div>
        <div class="editor-tabs">
          <button class="active">Prompt</button>
          <button>Code</button>
          <button>Config</button>
        </div>
        <pre class="prompt-editor">你是回答审校器。请检查答案是否完整引用知识库切片，并输出：
1. answer_quality
2. missing_citations
3. rewrite_suggestion</pre>
        <div class="variable-grid">
          <label>变量 <strong>answer</strong></label>
          <label>变量 <strong>citations[]</strong></label>
          <label>输出 <strong>quality_score</strong></label>
        </div>
      </section>

      <aside class="studio-panel test-panel">
        <div class="panel-heading compact">
          <h2>测试面板</h2>
          <span>POST /api/skills/skill-citation/test</span>
        </div>
        <div class="test-result">
          <strong>quality_score: 0.86</strong>
          <p>建议补充“日志留存周期”的引用来源，并将私有化部署边界写得更明确。</p>
        </div>
        <div class="version-list">
          <article v-for="version in skillVersions" :key="version.version">
            <strong>{{ version.version }}</strong>
            <span>{{ version.status }}</span>
            <em>{{ version.note }} · {{ version.updatedAt }}</em>
          </article>
        </div>
      </aside>
    </div>
  </section>
</template>
