mdk-skills 2.2.21 → 2.2.23

package/scripts/web-ui/src/App.vue

@@ -1,125 +1,148 @@
-<template>
-  <n-message-provider>
-    <n-notification-provider>
-      <n-config-provider :theme="theme" :locale="zhCN" :date-locale="dateZhCN">
-        <n-layout class="app-layout">
-          <!-- 导航栏 -->
-          <n-layout-header class="app-header" bordered>
-            <div class="header-inner">
-              <div class="header-left">
-                <span class="logo">mdk-skills</span>
-                <n-menu
-                  v-model:value="activeKey"
-                  mode="horizontal"
-                  :options="menuOptions"
-                  @update:value="onMenuChange"
-                />
-              </div>
-              <n-tag
-                v-if="statusData"
-                :type="statusData.sourcePath ? 'success' : 'default'"
-                size="small"
-              >
-                {{ statusData.sourcePath ? "本地源" : "npm 源" }}
-              </n-tag>
-            </div>
-          </n-layout-header>
-
-          <!-- 状态条 -->
-          <StatusBar v-if="statusData" :data="statusData" />
-
-          <!-- 内容区 -->
-          <n-layout-content class="app-content">
-            <transition name="fade" mode="out-in">
-              <router-view @refresh="loadStatus" />
-            </transition>
-          </n-layout-content>
-        </n-layout>
-      </n-config-provider>
-    </n-notification-provider>
-  </n-message-provider>
-</template>
-
-<script setup>
-import { h, ref, onMounted, computed } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { NIcon, zhCN, dateZhCN } from "naive-ui";
-import {
-  AppsOutline,
-  SwapHorizontalOutline,
-  CogOutline,
-  DocumentTextOutline,
-} from "@vicons/ionicons5";
-import StatusBar from "./components/StatusBar.vue";
-import { getStatus } from "./api/skills";
-
-const router = useRouter();
-const route = useRoute();
-
-const statusData = ref(null);
-
-const theme = ref(null);
-
-const menuOptions = [
-  {
-    label: "仪表盘",
-    key: "Dashboard",
-    icon: () => h(NIcon, null, { default: () => h(AppsOutline) }),
-  },
-  {
-    label: "场景切换",
-    key: "Scenes",
-    icon: () => h(NIcon, null, { default: () => h(SwapHorizontalOutline) }),
-  },
-  {
-    label: "设置",
-    key: "Settings",
-    icon: () => h(NIcon, null, { default: () => h(CogOutline) }),
-  },
-  {
-    label: "CLAUDE.md",
-    key: "ClaudeMd",
-    icon: () => h(NIcon, null, { default: () => h(DocumentTextOutline) }),
-  },
-];
-
-const activeKey = ref(route.name || "Dashboard");
-
-function onMenuChange(key) {
-  router.push({ name: key });
-}
-
-router.afterEach((to) => {
-  activeKey.value = to.name;
-});
-
-async function loadStatus() {
-  try {
-    statusData.value = await getStatus();
-  } catch {
-    // 静默失败
-  }
-}
-
-onMounted(loadStatus);
-</script>
-
-<style>
-@import "./styles/main.css";
-
-.fade-enter-active,
-.fade-leave-active {
-  transition:
-    opacity 0.9s ease,
-    transform 0.9s ease;
-}
-
-.fade-enter-from {
-  opacity: 0;
-  transform: translateY(6px);
-}
-
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
+<template>
+  <n-message-provider>
+    <n-notification-provider>
+      <n-config-provider :theme="theme" :locale="zhCN" :date-locale="dateZhCN">
+        <n-layout class="app-layout">
+          <!-- 导航栏 -->
+          <n-layout-header class="app-header" bordered>
+            <div class="header-inner">
+              <div class="header-left">
+                <span class="logo">mdk-skills</span>
+                <n-menu
+                  v-model:value="activeKey"
+                  mode="horizontal"
+                  :options="menuOptions"
+                  @update:value="onMenuChange"
+                />
+              </div>
+              <div class="header-right">
+                <n-tag
+                  v-if="statusData"
+                  :type="statusData.sourcePath ? 'success' : 'default'"
+                  size="small"
+                >
+                  {{ statusData.sourcePath ? "本地源" : "npm 源" }}
+                </n-tag>
+                <n-button quaternary size="small" @click="toggleTheme">
+                  <template #icon>
+                    <n-icon><MoonOutline v-if="!darkMode" /><SunnyOutline v-else /></n-icon>
+                  </template>
+                </n-button>
+              </div>
+            </div>
+          </n-layout-header>
+
+          <!-- 状态条 -->
+          <StatusBar v-if="statusData" :data="statusData" />
+
+          <!-- 内容区 -->
+          <n-layout-content class="app-content">
+            <transition name="fade" mode="out-in">
+              <router-view @refresh="loadStatus" />
+            </transition>
+          </n-layout-content>
+        </n-layout>
+      </n-config-provider>
+    </n-notification-provider>
+  </n-message-provider>
+</template>
+
+<script setup>
+import { h, ref, onMounted, computed, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { NIcon, zhCN, dateZhCN, darkTheme } from "naive-ui";
+import {
+  AppsOutline,
+  SwapHorizontalOutline,
+  CogOutline,
+  DocumentTextOutline,
+  MoonOutline,
+  SunnyOutline,
+} from "@vicons/ionicons5";
+import StatusBar from "./components/StatusBar.vue";
+import { getStatus } from "./api/skills";
+
+const router = useRouter();
+const route = useRoute();
+
+const statusData = ref(null);
+
+const darkMode = ref(localStorage.getItem("mdk-theme") === "dark");
+
+const theme = computed(() => (darkMode.value ? darkTheme : null));
+
+watch(darkMode, (val) => {
+  localStorage.setItem("mdk-theme", val ? "dark" : "light");
+  document.documentElement.setAttribute("data-theme", val ? "dark" : "light");
+});
+
+function toggleTheme() {
+  darkMode.value = !darkMode.value;
+}
+
+const menuOptions = [
+  {
+    label: "仪表盘",
+    key: "Dashboard",
+    icon: () => h(NIcon, null, { default: () => h(AppsOutline) }),
+  },
+  {
+    label: "场景切换",
+    key: "Scenes",
+    icon: () => h(NIcon, null, { default: () => h(SwapHorizontalOutline) }),
+  },
+  {
+    label: "设置",
+    key: "Settings",
+    icon: () => h(NIcon, null, { default: () => h(CogOutline) }),
+  },
+  {
+    label: "CLAUDE.md",
+    key: "ClaudeMd",
+    icon: () => h(NIcon, null, { default: () => h(DocumentTextOutline) }),
+  },
+];
+
+const activeKey = ref(route.name || "Dashboard");
+
+function onMenuChange(key) {
+  router.push({ name: key });
+}
+
+router.afterEach((to) => {
+  activeKey.value = to.name;
+});
+
+async function loadStatus() {
+  try {
+    statusData.value = await getStatus();
+  } catch {
+    // 静默失败
+  }
+}
+
+onMounted(() => {
+  loadStatus();
+  document.documentElement.setAttribute("data-theme", darkMode.value ? "dark" : "light");
+});
+</script>
+
+<style>
+@import "./styles/main.css";
+
+.fade-enter-active,
+.fade-leave-active {
+  transition:
+    opacity 0.9s ease,
+    transform 0.9s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/scripts/web-ui/src/api/skills.js

@@ -102,6 +102,26 @@ export function getSkillReadme(name) {
   return request("/skills/" + encodeURIComponent(name) + "/readme");
 }
 
+export function updateSkillMeta(name, data) {
+  return request("/skills/" + encodeURIComponent(name) + "/meta", {
+    method: "PATCH",
+    body: JSON.stringify(data),
+  });
+}
+
+export function pullSkills(url) {
+  return request("/skills/pull", {
+    method: "POST",
+    body: JSON.stringify({ url }),
+  });
+}
+
+export function deleteSkill(name) {
+  return request("/skills/" + encodeURIComponent(name), {
+    method: "DELETE",
+  });
+}
+
 export function createReadme(data) {
   return request("/readme/create", {
     method: "POST",

package/scripts/web-ui/src/components/SkillCard.vue

@@ -14,6 +14,9 @@
       <n-tag v-for="tag in skill.tags" :key="tag" size="tiny" :bordered="false">
         {{ tag }}
       </n-tag>
+      <n-tag v-if="usages > 0" size="tiny" type="warning" :bordered="false">
+        使用 {{ usages }} 次
+      </n-tag>
     </div>
     <p class="skill-desc">{{ skill.description || "暂无描述" }}</p>
   </n-card>
@@ -23,9 +26,11 @@
 import { ref } from "vue";
 import { useMessage } from "naive-ui";
 import { toggleSkill } from "../api/skills";
+import { recordUsage } from "../utils/usage";
 
 const props = defineProps({
   skill: { type: Object, required: true },
+  usages: { type: Number, default: 0 },
 });
 
 const emit = defineEmits(["refresh", "click"]);
@@ -37,6 +42,7 @@ async function onToggle(value) {
   try {
     const res = await toggleSkill(props.skill.name, value);
     if (res.ok) {
+      if (value) recordUsage(props.skill.name);
       message.success(`技能 "${props.skill.name}" 已${value ? "启用" : "停用"}`);
       emit("refresh");
     }
@@ -76,5 +82,8 @@ async function onToggle(value) {
   font-size: 13px;
   color: #666;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>

package/scripts/web-ui/src/components/StatusBar.vue

@@ -72,3 +72,16 @@ defineProps({
   background: #e0e0e0;
 }
 </style>
+
+<style>
+[data-theme="dark"] .status-bar {
+  background: #1a1a2e;
+  border-bottom-color: #333;
+}
+[data-theme="dark"] .status-item {
+  color: #aaa;
+}
+[data-theme="dark"] .status-divider {
+  background: #333;
+}
+</style>

package/scripts/web-ui/src/styles/main.css

@@ -10,7 +10,16 @@ html, body, #app {
 }
 
 body {
-  overflow-y: scroll;
+  overflow-y: auto;
+}
+
+/* 全局隐藏所有滚动条，能滚但不显示 */
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+*::-webkit-scrollbar {
+  display: none;
 }
 
 .app-layout {
@@ -190,3 +199,98 @@ body {
   color: #2080f0;
   border-color: #2080f0;
 }
+
+/* ---------- 导航栏右侧 ---------- */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ---------- 暗黑主题 ---------- */
+[data-theme="dark"] html,
+[data-theme="dark"] body,
+[data-theme="dark"] #app {
+  background: #1a1a2e;
+}
+
+[data-theme="dark"] .app-header {
+  background: #1a1a2e;
+  border-bottom-color: #333;
+}
+
+[data-theme="dark"] .app-content {
+  background: transparent;
+}
+
+[data-theme="dark"] .readme-fold {
+  border-color: #333;
+}
+[data-theme="dark"] .fold-header {
+  background: #252538;
+  color: #e0e0e0;
+}
+[data-theme="dark"] .fold-header:hover {
+  background: #2a2a40;
+}
+[data-theme="dark"] .fold-body {
+  background: #1e1e32;
+}
+[data-theme="dark"] .fold-arrow {
+  color: #888;
+}
+
+[data-theme="dark"] .markdown-content {
+  color: #ccc;
+}
+[data-theme="dark"] .markdown-content h1,
+[data-theme="dark"] .markdown-content h2 {
+  border-bottom-color: #333;
+  color: #eee;
+}
+[data-theme="dark"] .markdown-content h3,
+[data-theme="dark"] .markdown-content h4 {
+  color: #eee;
+}
+[data-theme="dark"] .markdown-content code {
+  background: #2a2a40;
+  color: #e06c9f;
+}
+[data-theme="dark"] .markdown-content pre {
+  border-color: #333;
+}
+[data-theme="dark"] .markdown-content pre code {
+  background: #1e1e2e;
+  color: #d4d4d4;
+}
+[data-theme="dark"] .markdown-content blockquote {
+  background: #252538;
+  border-left-color: #4a6cf7;
+  color: #bbb;
+}
+[data-theme="dark"] .markdown-content a {
+  color: #6a8cff;
+}
+[data-theme="dark"] .markdown-content th {
+  background: #252538;
+}
+[data-theme="dark"] .markdown-content td {
+  border-color: #333;
+}
+[data-theme="dark"] .markdown-content tr:nth-child(even) td {
+  background: #222238;
+}
+[data-theme="dark"] .markdown-content hr {
+  border-top-color: #333;
+}
+[data-theme="dark"] .markdown-content img {
+  filter: brightness(0.85);
+}
+
+[data-theme="dark"] .page-header h2 {
+  color: #e0e0e0;
+}
+
+[data-theme="dark"] .scene-desc {
+  color: #aaa;
+}

package/scripts/web-ui/src/utils/usage.js

@@ -0,0 +1,46 @@
+const STORAGE_KEY = "mdk-usage";
+
+function getRaw() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+  } catch {
+    return {};
+  }
+}
+
+function saveRaw(data) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+}
+
+/** 记录某个技能被使用一次 */
+export function recordUsage(name) {
+  const data = getRaw();
+  const entry = data[name] || { count: 0 };
+  entry.count += 1;
+  entry.lastUsed = Date.now();
+  data[name] = entry;
+  saveRaw(data);
+}
+
+/** 获取完整使用统计数据 */
+export function getUsageMap() {
+  return getRaw();
+}
+
+/**
+ * 对技能列表排序
+ * @param {Array} skills - 技能数组
+ * @param {'name'|'frequency'|'recent'} by - 排序方式
+ */
+export function sortSkills(skills, by) {
+  const usage = getRaw();
+  const list = [...skills];
+  if (by === "frequency") {
+    list.sort((a, b) => (usage[b.name]?.count || 0) - (usage[a.name]?.count || 0));
+  } else if (by === "recent") {
+    list.sort((a, b) => (usage[b.name]?.lastUsed || 0) - (usage[a.name]?.lastUsed || 0));
+  } else {
+    list.sort((a, b) => a.name.localeCompare(b.name));
+  }
+  return list;
+}