2026-04-12 23:23:50 +08:00
|
|
|
<script setup lang="ts">
|
2026-05-21 12:23:08 +08:00
|
|
|
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
2026-04-12 23:23:50 +08:00
|
|
|
import { NInput } from 'naive-ui'
|
2026-04-13 15:15:14 +08:00
|
|
|
import { useI18n } from 'vue-i18n'
|
2026-04-16 08:38:18 +08:00
|
|
|
import SkillList from '@/components/hermes/skills/SkillList.vue'
|
|
|
|
|
import SkillDetail from '@/components/hermes/skills/SkillDetail.vue'
|
2026-05-21 12:23:08 +08:00
|
|
|
import MarkdownRenderer from '@/components/hermes/chat/MarkdownRenderer.vue'
|
2026-05-02 10:56:58 +10:00
|
|
|
import { fetchSkills, type SkillCategory, type SkillSource, type SkillInfo } from '@/api/hermes/skills'
|
2026-05-24 09:57:01 +08:00
|
|
|
import { useProfilesStore } from '@/stores/hermes/profiles'
|
2026-05-02 10:56:58 +10:00
|
|
|
|
|
|
|
|
type SourceFilter = SkillSource | 'modified'
|
2026-04-12 23:23:50 +08:00
|
|
|
|
2026-05-21 12:23:08 +08:00
|
|
|
const { t, locale } = useI18n()
|
2026-05-24 09:57:01 +08:00
|
|
|
const profilesStore = useProfilesStore()
|
2026-04-12 23:23:50 +08:00
|
|
|
const categories = ref<SkillCategory[]>([])
|
2026-05-02 10:56:58 +10:00
|
|
|
const archived = ref<SkillInfo[]>([])
|
2026-04-12 23:23:50 +08:00
|
|
|
const loading = ref(false)
|
|
|
|
|
const selectedCategory = ref('')
|
|
|
|
|
const selectedSkill = ref('')
|
|
|
|
|
const searchQuery = ref('')
|
2026-04-15 09:12:54 +08:00
|
|
|
const showSidebar = ref(true)
|
2026-05-02 10:56:58 +10:00
|
|
|
const sourceFilter = ref<SourceFilter | null>(null)
|
2026-05-21 12:23:08 +08:00
|
|
|
const recommendations = ref('')
|
2026-04-15 09:12:54 +08:00
|
|
|
let mobileQuery: MediaQueryList | null = null
|
2026-05-21 12:23:08 +08:00
|
|
|
let recommendationsRequestSeq = 0
|
|
|
|
|
|
|
|
|
|
const recommendationsPath = computed(() => {
|
|
|
|
|
return String(locale.value).startsWith('zh')
|
|
|
|
|
? '/skill-recommendations.zh.md'
|
|
|
|
|
: '/skill-recommendations.en.md'
|
|
|
|
|
})
|
2026-04-12 23:23:50 +08:00
|
|
|
|
2026-05-02 10:56:58 +10:00
|
|
|
const selectedSkillData = computed(() => {
|
|
|
|
|
if (!selectedCategory.value || !selectedSkill.value) return null
|
|
|
|
|
if (selectedCategory.value === '.archive') {
|
|
|
|
|
return archived.value.find(s => s.name === selectedSkill.value) ?? null
|
|
|
|
|
}
|
|
|
|
|
const cat = categories.value.find(c => c.name === selectedCategory.value)
|
|
|
|
|
return cat?.skills.find(s => s.name === selectedSkill.value) ?? null
|
|
|
|
|
})
|
|
|
|
|
|
2026-04-15 09:12:54 +08:00
|
|
|
function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
|
|
|
|
|
showSidebar.value = !e.matches
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
mobileQuery = window.matchMedia('(max-width: 768px)')
|
|
|
|
|
handleMobileChange(mobileQuery)
|
|
|
|
|
mobileQuery.addEventListener('change', handleMobileChange)
|
|
|
|
|
loadSkills()
|
2026-05-21 12:23:08 +08:00
|
|
|
loadRecommendations()
|
2026-04-15 09:12:54 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
mobileQuery?.removeEventListener('change', handleMobileChange)
|
|
|
|
|
})
|
2026-04-12 23:23:50 +08:00
|
|
|
|
|
|
|
|
async function loadSkills() {
|
|
|
|
|
loading.value = true
|
|
|
|
|
try {
|
2026-05-24 09:57:01 +08:00
|
|
|
if (!profilesStore.activeProfileName || profilesStore.profiles.length === 0) {
|
|
|
|
|
await profilesStore.fetchProfiles()
|
|
|
|
|
}
|
2026-05-02 10:56:58 +10:00
|
|
|
const data = await fetchSkills()
|
|
|
|
|
categories.value = data.categories
|
|
|
|
|
archived.value = data.archived
|
2026-04-12 23:23:50 +08:00
|
|
|
} catch (err: any) {
|
|
|
|
|
console.error('Failed to load skills:', err)
|
|
|
|
|
} finally {
|
|
|
|
|
loading.value = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-21 12:23:08 +08:00
|
|
|
async function loadRecommendations() {
|
|
|
|
|
const requestSeq = ++recommendationsRequestSeq
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(recommendationsPath.value)
|
|
|
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`)
|
|
|
|
|
const text = await response.text()
|
2026-05-30 20:19:01 +08:00
|
|
|
if (/^\s*<!doctype html/i.test(text) || /^\s*<html[\s>]/i.test(text)) {
|
|
|
|
|
throw new Error('Skill recommendations file was not found')
|
|
|
|
|
}
|
2026-05-21 12:23:08 +08:00
|
|
|
if (requestSeq === recommendationsRequestSeq) {
|
|
|
|
|
recommendations.value = text
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
if (requestSeq === recommendationsRequestSeq) {
|
|
|
|
|
recommendations.value = ''
|
|
|
|
|
}
|
|
|
|
|
console.error('Failed to load skill recommendations:', err)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(recommendationsPath, loadRecommendations)
|
|
|
|
|
|
2026-05-02 10:56:58 +10:00
|
|
|
function toggleFilter(filter: SourceFilter) {
|
|
|
|
|
sourceFilter.value = sourceFilter.value === filter ? null : filter
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-12 23:23:50 +08:00
|
|
|
function handleSelect(category: string, skill: string) {
|
2026-05-21 12:23:08 +08:00
|
|
|
if (selectedCategory.value === category && selectedSkill.value === skill) {
|
|
|
|
|
selectedCategory.value = ''
|
|
|
|
|
selectedSkill.value = ''
|
|
|
|
|
return
|
|
|
|
|
}
|
2026-04-12 23:23:50 +08:00
|
|
|
selectedCategory.value = category
|
|
|
|
|
selectedSkill.value = skill
|
2026-04-15 10:28:53 +08:00
|
|
|
if (window.innerWidth <= 768) {
|
|
|
|
|
showSidebar.value = false
|
|
|
|
|
}
|
2026-04-12 23:23:50 +08:00
|
|
|
}
|
2026-05-02 10:56:58 +10:00
|
|
|
|
|
|
|
|
function handlePinToggled(name: string, pinned: boolean) {
|
|
|
|
|
// Update local state so the pin icon updates immediately
|
|
|
|
|
if (selectedCategory.value === '.archive') {
|
|
|
|
|
const skill = archived.value.find(s => s.name === name)
|
|
|
|
|
if (skill) skill.pinned = pinned
|
|
|
|
|
} else {
|
|
|
|
|
const cat = categories.value.find(c => c.name === selectedCategory.value)
|
|
|
|
|
const skill = cat?.skills.find(s => s.name === name)
|
|
|
|
|
if (skill) skill.pinned = pinned
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-04-12 23:23:50 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="skills-view">
|
2026-04-15 08:50:10 +08:00
|
|
|
<header class="page-header">
|
2026-04-15 09:12:54 +08:00
|
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
|
|
|
<h2 class="header-title">{{ t('skills.title') }}</h2>
|
|
|
|
|
<button v-if="!showSidebar" class="sidebar-toggle" @click="showSidebar = true">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2026-05-02 10:56:58 +10:00
|
|
|
<div class="source-legend">
|
|
|
|
|
<button class="legend-item" :class="{ active: sourceFilter === 'builtin' }" @click="toggleFilter('builtin')">
|
|
|
|
|
<span class="legend-dot dot-builtin" />{{ t('skills.source.builtin') }}
|
|
|
|
|
</button>
|
|
|
|
|
<button class="legend-item" :class="{ active: sourceFilter === 'hub' }" @click="toggleFilter('hub')">
|
|
|
|
|
<span class="legend-dot dot-hub" />{{ t('skills.source.hub') }}
|
|
|
|
|
</button>
|
|
|
|
|
<button class="legend-item" :class="{ active: sourceFilter === 'local' }" @click="toggleFilter('local')">
|
|
|
|
|
<span class="legend-dot dot-local" />{{ t('skills.source.local') }}
|
|
|
|
|
</button>
|
2026-05-24 19:47:52 +08:00
|
|
|
<button class="legend-item" :class="{ active: sourceFilter === 'external' }" @click="toggleFilter('external')">
|
|
|
|
|
<span class="legend-dot dot-external" />{{ t('skills.source.external') }}
|
|
|
|
|
</button>
|
2026-05-02 10:56:58 +10:00
|
|
|
<button class="legend-item" :class="{ active: sourceFilter === 'modified' }" @click="toggleFilter('modified')">
|
|
|
|
|
<span class="modified-icon">✎</span>{{ t('skills.modified') }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2026-04-12 23:23:50 +08:00
|
|
|
<NInput
|
|
|
|
|
v-model:value="searchQuery"
|
2026-04-13 15:15:14 +08:00
|
|
|
:placeholder="t('skills.searchPlaceholder')"
|
2026-04-12 23:23:50 +08:00
|
|
|
size="small"
|
|
|
|
|
clearable
|
2026-04-15 10:28:53 +08:00
|
|
|
style="width: 160px"
|
2026-04-12 23:23:50 +08:00
|
|
|
/>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="skills-content">
|
2026-04-15 16:36:04 +08:00
|
|
|
<div v-if="loading && categories.length === 0" class="skills-loading">{{ t('common.loading') }}</div>
|
2026-04-12 23:23:50 +08:00
|
|
|
<div v-else class="skills-layout">
|
2026-04-15 10:28:53 +08:00
|
|
|
<div class="mobile-backdrop" :class="{ active: showSidebar }" @click="showSidebar = false" />
|
2026-04-15 09:12:54 +08:00
|
|
|
<div v-if="showSidebar" class="skills-sidebar">
|
2026-04-12 23:23:50 +08:00
|
|
|
<SkillList
|
|
|
|
|
:categories="categories"
|
2026-05-02 10:56:58 +10:00
|
|
|
:archived="archived"
|
2026-04-12 23:23:50 +08:00
|
|
|
:selected-skill="selectedCategory && selectedSkill ? `${selectedCategory}/${selectedSkill}` : null"
|
|
|
|
|
:search-query="searchQuery"
|
2026-05-02 10:56:58 +10:00
|
|
|
:source-filter="sourceFilter"
|
2026-04-12 23:23:50 +08:00
|
|
|
@select="handleSelect"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="skills-main">
|
|
|
|
|
<SkillDetail
|
|
|
|
|
v-if="selectedCategory && selectedSkill"
|
|
|
|
|
:category="selectedCategory"
|
|
|
|
|
:skill="selectedSkill"
|
2026-05-02 10:56:58 +10:00
|
|
|
:skill-name="selectedSkillData?.name || selectedSkill"
|
|
|
|
|
:patch-count="selectedSkillData?.patchCount"
|
|
|
|
|
:use-count="selectedSkillData?.useCount"
|
|
|
|
|
:view-count="selectedSkillData?.viewCount"
|
|
|
|
|
:pinned="selectedSkillData?.pinned"
|
|
|
|
|
@pin-toggled="handlePinToggled"
|
2026-04-12 23:23:50 +08:00
|
|
|
/>
|
2026-05-21 12:23:08 +08:00
|
|
|
<div v-else class="recommendations-panel">
|
|
|
|
|
<MarkdownRenderer v-if="recommendations" :content="recommendations" />
|
|
|
|
|
<div v-else class="empty-detail">
|
|
|
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" opacity="0.2">
|
|
|
|
|
<polygon points="12 2 2 7 12 12 22 7 12 2" />
|
|
|
|
|
<polyline points="2 17 12 22 22 17" />
|
|
|
|
|
<polyline points="2 12 12 17 22 12" />
|
|
|
|
|
</svg>
|
|
|
|
|
<span>{{ t('skills.noMatch') }}</span>
|
|
|
|
|
</div>
|
2026-04-12 23:23:50 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
@use '@/styles/variables' as *;
|
|
|
|
|
|
|
|
|
|
.skills-view {
|
2026-04-15 10:28:53 +08:00
|
|
|
height: calc(100 * var(--vh));
|
2026-04-12 23:23:50 +08:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-02 10:56:58 +10:00
|
|
|
.source-legend {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 4px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin-left: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-item {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 4px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: $text-muted;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
padding: 2px 6px;
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
background: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all $transition-fast;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: $text-secondary;
|
|
|
|
|
background: rgba(var(--accent-primary-rgb), 0.04);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
color: $text-primary;
|
|
|
|
|
border-color: $border-color;
|
|
|
|
|
background: rgba(var(--accent-primary-rgb), 0.08);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-dot {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-dot.dot-builtin { background: #888; }
|
|
|
|
|
.legend-dot.dot-hub { background: #4a90d9; }
|
|
|
|
|
.legend-dot.dot-local { background: #66bb6a; }
|
2026-05-24 19:47:52 +08:00
|
|
|
.legend-dot.dot-external { background: #f59e0b; }
|
2026-05-02 10:56:58 +10:00
|
|
|
|
|
|
|
|
.modified-icon {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: $warning;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-mobile) {
|
|
|
|
|
.source-legend {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-12 23:23:50 +08:00
|
|
|
.search-input {
|
2026-04-15 10:28:53 +08:00
|
|
|
width: 100px;
|
2026-04-15 09:12:54 +08:00
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-mobile) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2026-04-12 23:23:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skills-content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skills-loading {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: $text-muted;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skills-layout {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skills-sidebar {
|
|
|
|
|
width: 280px;
|
|
|
|
|
border-right: 1px solid $border-color;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
min-height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skills-main {
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
padding: 16px 20px;
|
|
|
|
|
min-width: 0;
|
2026-04-15 09:12:54 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar-toggle {
|
|
|
|
|
display: none;
|
|
|
|
|
border: none;
|
|
|
|
|
background: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: $text-secondary;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
border-radius: $radius-sm;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
2026-04-16 23:13:04 +08:00
|
|
|
background: rgba(var(--accent-primary-rgb), 0.06);
|
2026-04-15 09:12:54 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-mobile) {
|
|
|
|
|
.sidebar-toggle {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skills-sidebar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
background: $bg-card;
|
|
|
|
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skills-layout {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2026-04-15 10:28:53 +08:00
|
|
|
|
|
|
|
|
.mobile-backdrop {
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
|
|
z-index: 9;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
transition: opacity $transition-fast;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-04-12 23:23:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty-detail {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
color: $text-muted;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
2026-05-21 12:23:08 +08:00
|
|
|
|
|
|
|
|
.recommendations-panel {
|
|
|
|
|
max-width: 920px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 4px 0 40px;
|
|
|
|
|
|
|
|
|
|
:deep(.markdown-body) {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 1.7;
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-04-12 23:23:50 +08:00
|
|
|
</style>
|
