huhaa-myskills 0.2.13 → 0.3.4

package/packages/web/src/components/AppTree.vue

@@ -1,230 +0,0 @@
-<script setup>
-import { computed, reactive } from 'vue';
-import { useSkillsStore } from '../stores/skills.js';
-
-const store = useSkillsStore();
-const treeState = reactive(new Map());
-
-const appGroups = computed(() => {
-  const groups = new Map();
-
-  for (const skill of store.filtered) {
-    const app = skill.editor || skill.source || 'Other';
-    if (!groups.has(app)) groups.set(app, []);
-    groups.get(app).push(skill);
-  }
-
-  return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0], 'zh-CN'));
-});
-
-function toggleApp(app) {
-  treeState.set(app, !treeState.get(app));
-}
-
-function getAppIcon(app) {
-  const icons = {
-    'cursor': '🖱️',
-    'vs-code': '⚙️',
-    'vscode': '⚙️',
-    'code': '⚙️',
-    'vim': '🎹',
-    'neovim': '🎹',
-    'nvim': '🎹',
-    'emacs': '📝',
-    'sublime': '🎨',
-    'sublime-text': '🎨',
-    'zed': '⚡',
-    'helix': '⚡',
-    'hermes': '🤖',
-    'claude-code': '💬',
-    'codex': '📖',
-    'atom': '⚛️',
-    'jetbrains': '🦾',
-    'kate': '📄',
-    'gedit': '📝',
-    'textmate': '🎸',
-    'bbedit': '✏️',
-    'openclaw': '🦾',
-    'windsurf': '🌊',
-    'trae': '🎯',
-    'trae-cn': '🎯',
-  };
-
-  const lower = String(app || '').toLowerCase();
-  for (const [key, icon] of Object.entries(icons)) {
-    if (lower.includes(key)) return icon;
-  }
-  return '📦';
-}
-</script>
-
-<template>
-  <div class="app-tree">
-    <div v-for="[app, skills] in appGroups" :key="app" class="tree-group">
-      <button
-        class="tree-group-header"
-        :class="{ expanded: treeState.get(app) }"
-        @click="toggleApp(app)"
-        :title="`${app} (${skills.length})`"
-      >
-        <span class="tree-arrow">{{ treeState.get(app) ? '▼' : '▶' }}</span>
-        <span class="app-icon">{{ getAppIcon(app) }}</span>
-        <span class="app-name">{{ app }}</span>
-        <span class="skill-count">{{ skills.length }}</span>
-      </button>
-
-      <div v-if="treeState.get(app)" class="tree-group-items">
-        <button
-          v-for="skill in skills"
-          :key="skill.id"
-          class="skill-tree-item"
-          :class="{ active: skill.id === store.selectedId }"
-          @click="store.loadDetail(skill.id)"
-          :title="skill.description"
-        >
-          <span class="icon">{{ getAppIcon(skill.source) }}</span>
-          <span class="name">{{ skill.name }}</span>
-          <span v-if="skill.source" class="source-tag">{{ skill.source }}</span>
-        </button>
-      </div>
-    </div>
-
-    <div v-if="appGroups.length === 0" class="empty-tree">
-      <p>没有找到匹配的技能</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.app-tree {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  font-size: 13px;
-  user-select: none;
-}
-
-.tree-group {
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.tree-group-header {
-  width: 100%;
-  padding: 8px 10px;
-  background: #f8f8f8;
-  border: none;
-  border-bottom: 1px solid #e8e8e8;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  text-align: left;
-  justify-content: flex-start;
-  transition: all 0.15s ease;
-}
-
-.tree-group-header:hover {
-  background: #f0f0f0;
-}
-
-.tree-group-header.expanded {
-  background: #e8e8e8;
-}
-
-.tree-arrow {
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 11px;
-  color: #666;
-}
-
-.app-icon {
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 14px;
-}
-
-.app-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.skill-count {
-  margin-left: auto;
-  color: #999;
-  font-size: 11px;
-  font-weight: normal;
-  flex-shrink: 0;
-}
-
-.tree-group-items {
-  background: #fafafa;
-  display: flex;
-  flex-direction: column;
-}
-
-.skill-tree-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 6px 16px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  text-align: left;
-  transition: background-color 0.1s ease;
-  color: inherit;
-  justify-content: flex-start;
-}
-
-.skill-tree-item:hover {
-  background: #f0f0f0;
-}
-
-.skill-tree-item.active {
-  background: #e3f2fd;
-  color: #1976d2;
-  font-weight: 500;
-}
-
-.icon {
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 12px;
-}
-
-.name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.source-tag {
-  margin-left: 4px;
-  padding: 1px 4px;
-  background: #f0f0f0;
-  border-radius: 2px;
-  font-size: 10px;
-  color: #666;
-  flex-shrink: 0;
-}
-
-.empty-tree {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  color: #999;
-  font-size: 12px;
-}
-</style>

package/packages/web/src/components/DirectoryTree.vue

@@ -1,263 +0,0 @@
-<script setup>
-import { computed, reactive, ref } from 'vue';
-import { useSkillsStore } from '../stores/skills.js';
-
-const store = useSkillsStore();
-const expandedPaths = reactive(new Set());
-const selectedPath = ref(null);
-
-const directoryTree = computed(() => {
-  const tree = new Map();
-
-  for (const skill of store.filtered) {
-    if (!skill.paths?.abs) continue;
-
-    const parts = skill.paths.abs.split('/');
-    let current = tree;
-
-    for (let i = 0; i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (!current.has(part)) {
-        current.set(part, new Map());
-      }
-      current = current.get(part);
-    }
-
-    if (!current.has('__skills__')) {
-      current.set('__skills__', []);
-    }
-    current.get('__skills__').push(skill);
-  }
-
-  return tree;
-});
-
-function togglePath(path) {
-  if (expandedPaths.has(path)) {
-    expandedPaths.delete(path);
-  } else {
-    expandedPaths.add(path);
-  }
-}
-
-function selectPath(path) {
-  selectedPath.value = selectedPath.value === path ? null : path;
-}
-
-function countSkills(tree) {
-  let count = 0;
-  for (const [key, value] of tree.entries()) {
-    if (key === '__skills__') {
-      count += value.length;
-    } else if (value instanceof Map) {
-      count += countSkills(value);
-    }
-  }
-  return count;
-}
-
-function getSkillsInPath(path) {
-  let current = directoryTree.value;
-  const parts = path.split('/');
-
-  for (const part of parts) {
-    if (!current.has(part)) return [];
-    current = current.get(part);
-  }
-
-  return current.get('__skills__') || [];
-}
-
-const flatTree = computed(() => {
-  const dirs = [];
-
-  function traverse(tree, depth = 0, pathPrefix = '') {
-    for (const [key, value] of tree.entries()) {
-      if (key === '__skills__') continue;
-
-      const currentPath = pathPrefix ? `${pathPrefix}/${key}` : key;
-      const isExpanded = expandedPaths.has(currentPath);
-
-      dirs.push({
-        name: key,
-        path: currentPath,
-        depth,
-        expanded: isExpanded,
-        skillCount: countSkills(value),
-      });
-
-      if (isExpanded) {
-        traverse(value, depth + 1, currentPath);
-      }
-    }
-  }
-
-  traverse(directoryTree.value);
-  return dirs;
-});
-
-function getPaddingLeft(depth) {
-  return `${depth * 16 + 8}px`;
-}
-
-function getSkillPaddingLeft(depth) {
-  return `${(depth + 1) * 16 + 24}px`;
-}
-</script>
-
-<template>
-  <div class="directory-tree">
-    <div v-if="store.filtered.length === 0" class="empty-tree">
-      <p>没有找到匹配的技能</p>
-    </div>
-
-    <template v-else>
-      <!-- Directory structure -->
-      <div v-for="dir in flatTree" :key="dir.path" class="tree-item">
-        <button
-          class="tree-dir"
-          :style="{ paddingLeft: getPaddingLeft(dir.depth) }"
-          :class="{ expanded: dir.expanded, selected: dir.path === selectedPath }"
-          @click="selectPath(dir.path)"
-          @dblclick="togglePath(dir.path)"
-          :title="`单击选择，双击展开`"
-        >
-          <span class="tree-arrow">{{ dir.expanded ? '▼' : '▶' }}</span>
-          <span class="tree-icon">📁</span>
-          <span class="tree-name">{{ dir.name }}</span>
-          <span class="tree-count">{{ dir.skillCount }}</span>
-        </button>
-
-        <!-- Skills in this directory -->
-        <div v-if="dir.expanded" class="tree-skills">
-          <button
-            v-for="skill in getSkillsInPath(dir.path)"
-            :key="skill.id"
-            class="tree-skill-item"
-            :style="{ paddingLeft: getSkillPaddingLeft(dir.depth) }"
-            :class="{ active: skill.id === store.selectedId }"
-            @click.stop="store.loadDetail(skill.id)"
-            :title="skill.description"
-          >
-            <span class="tree-icon">📄</span>
-            <span class="tree-name">{{ skill.name }}</span>
-          </button>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.directory-tree {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  font-size: 13px;
-  user-select: none;
-}
-
-.tree-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.tree-dir {
-  padding: 6px 10px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  text-align: left;
-  color: inherit;
-  transition: background-color 0.1s ease;
-  width: 100%;
-  justify-content: flex-start;
-}
-
-.tree-dir:hover {
-  background: #f0f0f0;
-}
-
-.tree-dir.selected {
-  background: #e8f4f8;
-  color: #0d5a7c;
-  font-weight: 500;
-}
-
-.tree-arrow {
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 10px;
-  color: #666;
-}
-
-.tree-icon {
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 12px;
-}
-
-.tree-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-}
-
-.tree-count {
-  margin-left: auto;
-  padding: 0 4px;
-  background: #e8e8e8;
-  border-radius: 2px;
-  font-size: 10px;
-  color: #666;
-  flex-shrink: 0;
-}
-
-.tree-skills {
-  display: flex;
-  flex-direction: column;
-}
-
-.tree-skill-item {
-  padding: 6px 10px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  text-align: left;
-  color: inherit;
-  transition: background-color 0.1s ease;
-  width: 100%;
-  justify-content: flex-start;
-}
-
-.tree-skill-item:hover {
-  background: #f5f5f5;
-}
-
-.tree-skill-item.active {
-  background: #e3f2fd;
-  color: #1976d2;
-  font-weight: 500;
-}
-
-.empty-tree {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  color: #999;
-  font-size: 12px;
-}
-</style>

package/packages/web/src/components/SkillTree.vue

@@ -1,208 +0,0 @@
-<script setup>
-import { computed, reactive } from 'vue';
-import { useSkillsStore } from '../stores/skills.js';
-
-const store = useSkillsStore();
-const treeState = reactive(new Map());
-
-const sourceGroups = computed(() => {
-  const groups = new Map();
-  for (const skill of store.filtered) {
-    const source = skill.source || 'other';
-    if (!groups.has(source)) groups.set(source, []);
-    groups.get(source).push(skill);
-  }
-  return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0], 'zh-CN'));
-});
-
-function toggleGroup(source) {
-  treeState.set(source, !treeState.get(source));
-}
-
-function getSourceIcon(source) {
-  const icons = {
-    'hermes': '🤖',
-    'claude-code': '💬',
-    'cursor': '🖱️',
-    'mcp-config': '⚙️',
-    'mcp': '⚙️',
-    'codex': '📖',
-    'project-runbook': '📚',
-    'hermes-plugin': '🔌',
-    'skills': '✨',
-  };
-  return icons[source] || '📄';
-}
-</script>
-
-<template>
-  <div class="skill-tree">
-    <div v-for="[source, skills] in sourceGroups" :key="source" class="tree-group">
-      <button
-        class="tree-group-header"
-        :class="{ expanded: treeState.get(source) }"
-        @click="toggleGroup(source)"
-        :title="`${source} (${skills.length})`"
-      >
-        <span class="tree-arrow">{{ treeState.get(source) ? '▼' : '▶' }}</span>
-        <span class="source-icon">{{ getSourceIcon(source) }}</span>
-        <span class="source-name">{{ source }}</span>
-        <span class="skill-count">{{ skills.length }}</span>
-      </button>
-
-      <div v-if="treeState.get(source)" class="tree-group-items">
-        <button
-          v-for="skill in skills"
-          :key="skill.id"
-          class="skill-tree-item"
-          :class="{ active: skill.id === store.selectedId }"
-          @click="store.loadDetail(skill.id)"
-          :title="skill.description"
-        >
-          <span class="icon">{{ getSourceIcon(skill.source) }}</span>
-          <span class="name">{{ skill.name }}</span>
-          <span v-if="skill.category" class="category-tag">{{ skill.category }}</span>
-        </button>
-      </div>
-    </div>
-
-    <div v-if="sourceGroups.length === 0" class="empty-tree">
-      <p>没有找到匹配的技能</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.skill-tree {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  font-size: 13px;
-  border-right: 1px solid #ddd;
-  user-select: none;
-}
-
-.tree-group {
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.tree-group-header {
-  width: 100%;
-  padding: 8px 10px;
-  background: #f8f8f8;
-  border: none;
-  border-bottom: 1px solid #e8e8e8;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  text-align: left;
-  justify-content: flex-start;
-  transition: all 0.15s ease;
-}
-
-.tree-group-header:hover {
-  background: #f0f0f0;
-}
-
-.tree-group-header.expanded {
-  background: #e8e8e8;
-}
-
-.tree-arrow {
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 11px;
-  color: #666;
-}
-
-.source-icon {
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 14px;
-}
-
-.source-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.skill-count {
-  margin-left: auto;
-  color: #999;
-  font-size: 11px;
-  font-weight: normal;
-  flex-shrink: 0;
-}
-
-.tree-group-items {
-  background: #fafafa;
-  display: flex;
-  flex-direction: column;
-}
-
-.skill-tree-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 6px 16px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  transition: background-color 0.1s ease;
-  text-align: left;
-  color: inherit;
-  justify-content: flex-start;
-}
-
-.skill-tree-item:hover {
-  background: #f0f0f0;
-}
-
-.skill-tree-item.active {
-  background: #e3f2fd;
-  color: #1976d2;
-  font-weight: 500;
-}
-
-.icon {
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-  font-size: 12px;
-}
-
-.name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.category-tag {
-  margin-left: 4px;
-  padding: 1px 4px;
-  background: #f0f0f0;
-  border-radius: 2px;
-  font-size: 10px;
-  color: #666;
-  flex-shrink: 0;
-}
-
-.empty-tree {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  color: #999;
-  font-size: 12px;
-}
-</style>