310 lines
11 KiB
Vue
310 lines
11 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed } from 'vue'
|
|||
|
|
import './database/database.css'
|
|||
|
|
|
|||
|
|
interface MemoryItem {
|
|||
|
|
id: number
|
|||
|
|
type: 'Experience' | 'Lessons'
|
|||
|
|
content: string
|
|||
|
|
subject: string
|
|||
|
|
attribute: string
|
|||
|
|
score: number
|
|||
|
|
createdAt: string
|
|||
|
|
selected: boolean
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 记忆数据
|
|||
|
|
const memories = ref<MemoryItem[]>([
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
type: 'Experience',
|
|||
|
|
content: '当任务明确要求获取外部信息（搜索最新数据、新闻、财报、行业报告等）时，模型必须主动调用搜索工具而非仅依赖内部知识。应在系统提示中明确要求「必须使用搜索工具获取XX最新数据」，首次迭代即调用搜索工具，采用「搜索→分析→输出」的递进式流程，避免模型陷入纯文字生成的空转循环。',
|
|||
|
|
subject: '外部信息获取规范',
|
|||
|
|
attribute: '工具调用原则',
|
|||
|
|
score: 0.95,
|
|||
|
|
createdAt: '3/10 15:35',
|
|||
|
|
selected: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
type: 'Experience',
|
|||
|
|
content: '当任务明确要求获取外部信息（搜索最新数据、新闻、财报、行业报告等）时，模型必须调用搜索工具而非仅依赖内部知识。应在系统提示中明确要求「必须使用搜索工具获取XX最新数据」，并建立工具调用检测机制，确保任务执行路径正确。',
|
|||
|
|
subject: '工具调用',
|
|||
|
|
attribute: '错误教训',
|
|||
|
|
score: 0.95,
|
|||
|
|
createdAt: '3/10 12:34',
|
|||
|
|
selected: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
type: 'Experience',
|
|||
|
|
content: '任务执行应采用「一次性完整输出」策略，避免分批次小幅输出导致的迭代空转。对于代码生成、文件写入等任务，应要求模型一次性完成方案设计与工具执行的完整流程，将确认性回复并入上一次响应，将冗余迭代压缩合并，复杂任务控制在2-3次迭代内完成。',
|
|||
|
|
subject: '任务执行效率优化',
|
|||
|
|
attribute: '迭代策略原则',
|
|||
|
|
score: 0.92,
|
|||
|
|
createdAt: '3/10 15:35',
|
|||
|
|
selected: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
type: 'Experience',
|
|||
|
|
content: '任务执行过程中应建立工具调用检测机制，监控模型是否按要求调用了必要的工具。若迭代中工具调用数为0，说明执行路径不正确，应触发异常处理或提示，而非继续无效迭代。',
|
|||
|
|
subject: '执行路径监控',
|
|||
|
|
attribute: '质量控制机制',
|
|||
|
|
score: 0.88,
|
|||
|
|
createdAt: '3/10 15:35',
|
|||
|
|
selected: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
type: 'Experience',
|
|||
|
|
content: '任务执行应采用「搜索→分析→输出」的递进式流程，避免无效迭代和空转。纯文字生成的重复迭代应压缩或合并，确认性回复应并入上一次响应。简单任务应在1-2次迭代内完成，避免模型陷入重复思考或无意义的自我确认。',
|
|||
|
|
subject: '迭代效率',
|
|||
|
|
attribute: '错误教训',
|
|||
|
|
score: 0.85,
|
|||
|
|
createdAt: '3/10 12:34',
|
|||
|
|
selected: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 6,
|
|||
|
|
type: 'Experience',
|
|||
|
|
content: '对于代码生成或文件写入类任务，应要求模型一次性完整输出或按模块批量输出，避免分批次的小幅输出导致迭代次数过多、执行效率低下。',
|
|||
|
|
subject: '代码生成策略',
|
|||
|
|
attribute: '错误教训',
|
|||
|
|
score: 0.80,
|
|||
|
|
createdAt: '3/10 12:34',
|
|||
|
|
selected: false
|
|||
|
|
},
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 搜索和筛选
|
|||
|
|
const searchQuery = ref('')
|
|||
|
|
const filterType = ref('All Types')
|
|||
|
|
|
|||
|
|
// 统计数据
|
|||
|
|
const stats = computed(() => ({
|
|||
|
|
total: memories.value.length,
|
|||
|
|
avgScore: (memories.value.reduce((sum, m) => sum + m.score, 0) / memories.value.length).toFixed(2),
|
|||
|
|
experience: memories.value.filter(m => m.type === 'Experience').length,
|
|||
|
|
lessons: memories.value.filter(m => m.type === 'Lessons').length,
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
// 过滤后的记忆
|
|||
|
|
const filteredMemories = computed(() => {
|
|||
|
|
return memories.value.filter(m => {
|
|||
|
|
const matchSearch = searchQuery.value === '' ||
|
|||
|
|
m.content.includes(searchQuery.value) ||
|
|||
|
|
m.subject.includes(searchQuery.value) ||
|
|||
|
|
m.attribute.includes(searchQuery.value)
|
|||
|
|
const matchType = filterType.value === 'All Types' || m.type === filterType.value
|
|||
|
|
return matchSearch && matchType
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 切换选中状态
|
|||
|
|
const toggleSelect = (id: number) => {
|
|||
|
|
const memory = memories.value.find(m => m.id === id)
|
|||
|
|
if (memory) {
|
|||
|
|
memory.selected = !memory.selected
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 全选
|
|||
|
|
const selectAll = ref(false)
|
|||
|
|
const toggleSelectAll = () => {
|
|||
|
|
selectAll.value = !selectAll.value
|
|||
|
|
memories.value.forEach(m => m.selected = selectAll.value)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除记忆
|
|||
|
|
const deleteMemory = (id: number) => {
|
|||
|
|
memories.value = memories.value.filter(m => m.id !== id)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑记忆
|
|||
|
|
const editMemory = (id: number) => {
|
|||
|
|
console.log('Edit memory:', id)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 刷新
|
|||
|
|
const refresh = () => {
|
|||
|
|
console.log('Refresh')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// LLM 智能审查
|
|||
|
|
const llmReview = () => {
|
|||
|
|
console.log('LLM Review')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取分数颜色
|
|||
|
|
const getScoreColor = (score: number) => {
|
|||
|
|
if (score >= 0.9) return 'text-emerald-400'
|
|||
|
|
if (score >= 0.7) return 'text-amber-400'
|
|||
|
|
return 'text-red-400'
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="min-h-screen bg-[#121212] text-gray-200 p-6">
|
|||
|
|
<!-- 顶部标题 -->
|
|||
|
|
<div class="flex items-center gap-2 mb-6">
|
|||
|
|
<i class="fa-solid fa-brain text-orange-500"></i>
|
|||
|
|
<span class="font-medium">Memory</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 统计卡片区域 -->
|
|||
|
|
<div class="grid grid-cols-4 gap-4 mb-6">
|
|||
|
|
<div class="bg-[#1e1e1e] rounded-xl p-5 text-center">
|
|||
|
|
<div class="text-3xl font-bold text-white mb-1">{{ stats.total }}</div>
|
|||
|
|
<div class="text-sm text-gray-400">Total Memories</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#1e1e1e] rounded-xl p-5 text-center">
|
|||
|
|
<div class="text-3xl font-bold text-white mb-1">{{ stats.avgScore }}</div>
|
|||
|
|
<div class="text-sm text-gray-400">Avg Score</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#1e1e1e] rounded-xl p-5 text-center">
|
|||
|
|
<div class="text-3xl font-bold text-cyan-400 mb-1">{{ stats.experience }}</div>
|
|||
|
|
<div class="text-sm text-gray-400">Experience</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-[#1e1e1e] rounded-xl p-5 text-center">
|
|||
|
|
<div class="text-3xl font-bold text-red-400 mb-1">{{ stats.lessons }}</div>
|
|||
|
|
<div class="text-sm text-gray-400">Lessons</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 搜索栏 -->
|
|||
|
|
<div class="mb-4">
|
|||
|
|
<div class="relative">
|
|||
|
|
<i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|||
|
|
<input
|
|||
|
|
v-model="searchQuery"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Search memories..."
|
|||
|
|
class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 筛选与操作栏 -->
|
|||
|
|
<div class="flex items-center justify-between mb-6">
|
|||
|
|
<div class="flex items-center space-x-3">
|
|||
|
|
<el-select v-model="filterType" placeholder="Select" class="w-40" size="large" popper-class="dark-select-dropdown">
|
|||
|
|
<el-option label="All Types" value="All Types" />
|
|||
|
|
<el-option label="Experience" value="Experience" />
|
|||
|
|
<el-option label="Lessons" value="Lessons" />
|
|||
|
|
</el-select>
|
|||
|
|
<button class="flex items-center space-x-2 bg-[#1e1e1e] border border-gray-700 rounded-lg py-2 px-4 text-gray-200 hover:bg-[#2a2a2a]">
|
|||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|||
|
|
</svg>
|
|||
|
|
<span>Refresh</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="flex items-center space-x-2 bg-orange-500 rounded-lg py-2 px-4 text-white hover:bg-orange-400">
|
|||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|||
|
|
</svg>
|
|||
|
|
<span>LLM Review</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 表格区域 -->
|
|||
|
|
<div class="bg-dark-700 rounded-xl overflow-hidden">
|
|||
|
|
<table class="w-full">
|
|||
|
|
<thead class="bg-dark-600">
|
|||
|
|
<tr>
|
|||
|
|
<th class="w-10 px-5 py-3 text-left text-sm font-medium text-gray-400">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
v-model="selectAll"
|
|||
|
|
@change="toggleSelectAll"
|
|||
|
|
class="rounded bg-dark-600 border-dark-500"
|
|||
|
|
>
|
|||
|
|
</th>
|
|||
|
|
<th class="px-5 py-3 text-left text-sm font-medium text-gray-400">Type</th>
|
|||
|
|
<th class="px-5 py-3 text-left text-sm font-medium text-gray-400">Content</th>
|
|||
|
|
<th class="px-5 py-3 text-left text-sm font-medium text-gray-400">Score</th>
|
|||
|
|
<th class="px-5 py-3 text-left text-sm font-medium text-gray-400">Created</th>
|
|||
|
|
<th class="px-5 py-3 text-center text-sm font-medium text-gray-400">Actions</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr
|
|||
|
|
v-for="memory in filteredMemories"
|
|||
|
|
:key="memory.id"
|
|||
|
|
class="table-row"
|
|||
|
|
>
|
|||
|
|
<td class="px-5 py-4">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
:checked="memory.selected"
|
|||
|
|
@change="toggleSelect(memory.id)"
|
|||
|
|
class="rounded bg-dark-600 border-dark-500"
|
|||
|
|
>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-5 py-4">
|
|||
|
|
<span class="px-2 py-1 bg-cyan-900/30 text-cyan-400 text-xs rounded-full">{{ memory.type }}</span>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-5 py-4 text-sm text-gray-300 max-w-xl">
|
|||
|
|
<div class="line-clamp-2">{{ memory.content }}</div>
|
|||
|
|
<div class="text-xs text-gray-500 mt-1">Subject: {{ memory.subject }} · Attribute: {{ memory.attribute }}</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-5 py-4">
|
|||
|
|
<span :class="['font-medium', getScoreColor(memory.score)]">{{ memory.score }}</span>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-5 py-4 text-sm text-gray-400">{{ memory.createdAt }}</td>
|
|||
|
|
<td class="px-5 py-4">
|
|||
|
|
<div class="flex items-center justify-center gap-2">
|
|||
|
|
<button
|
|||
|
|
@click="editMemory(memory.id)"
|
|||
|
|
class="btn-icon"
|
|||
|
|
>
|
|||
|
|
<i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
@click="deleteMemory(memory.id)"
|
|||
|
|
class="btn-icon"
|
|||
|
|
>
|
|||
|
|
<i class="fa-solid fa-trash text-gray-400 hover:text-red-400"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<div v-if="filteredMemories.length === 0" class="py-12 text-center text-gray-500">
|
|||
|
|
<i class="fa-solid fa-brain text-3xl mb-2"></i>
|
|||
|
|
<p>No memories found</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 自定义滚动条 */
|
|||
|
|
::-webkit-scrollbar {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
}
|
|||
|
|
::-webkit-scrollbar-track {
|
|||
|
|
background: #1a1a1a;
|
|||
|
|
}
|
|||
|
|
::-webkit-scrollbar-thumb {
|
|||
|
|
background: #333;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
::-webkit-scrollbar-thumb:hover {
|
|||
|
|
background: #444;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 行高限制 */
|
|||
|
|
.line-clamp-2 {
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
</style>
|