mdk-skills 2.4.0 → 2.4.2

package/scripts/web-ui/src/views/Settings.vue

@@ -1,529 +0,0 @@
-<template>
-  <div class="settings">
-    <div class="page-header">
-      <h2>设置</h2>
-    </div>
-
-    <!-- 技能目录管理 -->
-    <n-card title="技能目录" size="small" class="section">
-      <div class="source-status">
-        <n-alert v-if="sourceInfo.connected" type="success" :bordered="false">
-          <template #header>已设置</template>
-          {{ sourceInfo.path }}
-        </n-alert>
-        <n-alert v-else type="warning" :bordered="false">
-          尚未设置技能目录，请指定包含 .claude/skills 的仓库路径
-        </n-alert>
-      </div>
-
-      <!-- 初始化提示 -->
-      <n-alert v-if="sourceInfo.connected && sourceInfo.needsInit" type="warning" :bordered="false" class="init-alert">
-        <template #header>技能目录缺少必要文件</template>
-        <div class="missing-list">
-          <template v-if="sourceInfo.missingConfig?.length">
-            <div class="missing-item" v-for="f in sourceInfo.missingConfig" :key="f">
-              缺少配置文件：<code>{{ f }}</code>
-            </div>
-          </template>
-          <template v-if="sourceInfo.missingSkillDocs?.length">
-            <div class="missing-item">
-              以下技能缺少 SKILL.md 文档：
-              <code v-for="name in sourceInfo.missingSkillDocs" :key="name" class="skill-tag">{{ name }}</code>
-            </div>
-          </template>
-          <div class="missing-hint">可手动检测该文件夹是否为skill，若该目录不是 skill，可手动删除</div>
-        </div>
-      </n-alert>
-
-      <div class="source-actions">
-        <n-input
-          v-if="!sourceInfo.connected"
-          v-model:value="repoPath"
-          placeholder="输入本地仓库路径..."
-          clearable
-        >
-          <template #prefix>📁</template>
-        </n-input>
-
-        <!-- 独立于 init：仅 README.md 缺失时的创建入口 -->
-        <n-alert
-          v-if="sourceInfo.connected && sourceInfo.needsInit === false && hasReadmeMissing"
-          type="info"
-          :bordered="false"
-          class="init-alert"
-        >
-          <template #header>缺少 README.md 文档</template>
-          创建后将生成模板文件，可在对应目录中自行编辑
-        </n-alert>
-
-        <div class="action-buttons">
-          <n-button
-            v-if="!sourceInfo.connected"
-            type="primary"
-            :disabled="!repoPath"
-            :loading="connecting"
-            @click="onConnect"
-          >
-            设置
-          </n-button>
-          <n-button
-            v-if="sourceInfo.connected && sourceInfo.needsInit"
-            type="warning"
-            :loading="initializing"
-            @click="onInit"
-          >
-            初始化
-          </n-button>
-          <n-button
-            v-if="sourceInfo.connected"
-            :loading="syncing"
-            @click="onSync"
-          >
-            同步到仓库
-          </n-button>
-          <n-button
-            v-if="sourceInfo.connected && sourceInfo.needsInit === false && hasReadmeMissing"
-            ghost
-            @click="onShowCreateReadme"
-          >
-            创建文档
-          </n-button>
-          <n-button
-            v-if="sourceInfo.connected"
-            type="error"
-            ghost
-            :loading="disconnecting"
-            @click="onDisconnect"
-          >
-            清除
-          </n-button>
-        </div>
-      </div>
-    </n-card>
-
-    <!-- 创建 README.md 对话框 -->
-    <ModalComp
-      :show="showReadmeDialog"
-      title="创建文档"
-      width="520px"
-      :mask-closable="false"
-      @update:show="(v) => { if (!v) showReadmeDialog = false }"
-    >
-      <div class="readme-dialog-desc">检测到缺少以下文档，是否创建？</div>
-
-      <n-checkbox v-model:checked="readmeForm.root" class="readme-checkbox">
-        <div class="readme-checkbox-content">
-          <span class="readme-checkbox-title">根目录 README.md</span>
-          <span class="readme-checkbox-desc">仪表盘 → "仓库说明"折叠面板，适合写项目简介、维护团队、许可证</span>
-        </div>
-      </n-checkbox>
-
-      <n-checkbox v-model:checked="readmeForm.skills" class="readme-checkbox">
-        <div class="readme-checkbox-content">
-          <span class="readme-checkbox-title">.claude/skills/README.md</span>
-          <span class="readme-checkbox-desc">场景切换 → "技能说明"折叠面板，适合写使用指南、场景搭配建议</span>
-        </div>
-      </n-checkbox>
-
-      <n-divider />
-
-      <n-form label-placement="top">
-        <n-form-item label="项目名称（选填）">
-          <n-input v-model:value="readmeForm.projectName" placeholder="我的技能仓库" />
-        </n-form-item>
-        <n-form-item label="维护团队（选填）">
-          <n-input v-model:value="readmeForm.teamName" placeholder="未设定" />
-        </n-form-item>
-      </n-form>
-
-      <template #footer>
-        <n-button @click="showReadmeDialog = false">跳过</n-button>
-        <n-button type="primary" :loading="creatingReadme" @click="onCreateReadme">
-          创建
-        </n-button>
-      </template>
-    </ModalComp>
-
-    <!-- 健康检查 -->
-    <n-card title="健康检查" size="small" class="section">
-      <template #header-extra>
-        <n-button size="tiny" :loading="diagnosing" @click="onDiagnose">
-          运行检查
-        </n-button>
-      </template>
-
-      <n-spin :show="diagnosing">
-        <n-empty v-if="!diagnosis.length && !diagnosing" description="点击按钮运行健康检查" />
-        <template v-else>
-          <div v-if="groupedDiagnosis.unhealthy.length > 0" class="diag-group">
-            <div class="diag-group-header diag-group-error">
-              <CloseCircleOutline size="24" />
-              异常（{{ groupedDiagnosis.unhealthy.length }}）
-            </div>
-            <n-list>
-              <n-list-item v-for="item in groupedDiagnosis.unhealthy" :key="item.name">
-                <template #prefix>
-                  <n-icon size="20" color="#d03050">
-                    <CloseCircleOutline />
-                  </n-icon>
-                </template>
-                <n-text>{{ item.name }}</n-text>
-                <template #suffix>
-                  <n-text depth="3" class="issue-text">{{ item.issues.join("; ") }}</n-text>
-                </template>
-              </n-list-item>
-            </n-list>
-          </div>
-          <div v-if="groupedDiagnosis.healthy.length > 0" class="diag-group">
-            <div class="diag-group-header diag-group-ok">
-              <CheckmarkCircleOutline />
-              正常（{{ groupedDiagnosis.healthy.length }}）
-            </div>
-            <n-list>
-              <n-list-item v-for="item in groupedDiagnosis.healthy" :key="item.name">
-                <template #prefix>
-                  <n-icon size="20" color="#18a058">
-                    <CheckmarkCircleOutline />
-                  </n-icon>
-                </template>
-                <n-text>{{ item.name }}</n-text>
-                <template #suffix>
-                  <n-text depth="3" class="healthy-text">正常</n-text>
-                </template>
-              </n-list-item>
-            </n-list>
-          </div>
-        </template>
-      </n-spin>
-    </n-card>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from "vue";
-import { useMessage } from "naive-ui";
-import ModalComp from "../components/ModalComp.vue";
-import {
-  CheckmarkCircleOutline,
-  CloseCircleOutline,
-} from "@vicons/ionicons5";
-import {
-  getSource,
-  connectSource,
-  clearSource,
-  syncSource,
-  initSource,
-  diagnose,
-  createReadme,
-} from "../api/skills";
-
-const emit = defineEmits(["refresh"]);
-const message = useMessage();
-
-const sourceInfo = ref({ connected: false, path: null, needsInit: false });
-const repoPath = ref("");
-const connecting = ref(false);
-const initializing = ref(false);
-const syncing = ref(false);
-const disconnecting = ref(false);
-const diagnosing = ref(false);
-const diagnosis = ref([]);
-
-const groupedDiagnosis = computed(() => {
-  const healthy = [];
-  const unhealthy = [];
-  for (const item of diagnosis.value) {
-    if (item.healthy) healthy.push(item);
-    else unhealthy.push(item);
-  }
-  return { healthy, unhealthy };
-});
-
-// 创建 README.md 对话框
-const showReadmeDialog = ref(false);
-const creatingReadme = ref(false);
-const readmeForm = ref({
-  root: true,
-  skills: true,
-  projectName: "",
-  teamName: "",
-});
-
-const hasReadmeMissing = computed(() => {
-  if (!sourceInfo.value.readmeStatus) return false;
-  return !sourceInfo.value.readmeStatus.root || !sourceInfo.value.readmeStatus.skills;
-});
-
-async function loadSource() {
-  sourceInfo.value = await getSource();
-}
-
-async function onConnect() {
-  connecting.value = true;
-  try {
-    const res = await connectSource(repoPath.value);
-    if (res.ok) {
-      message.success("技能目录已设置");
-      await loadSource();
-      emit("refresh");
-    } else {
-      message.error(res.error || "设置失败");
-    }
-  } catch {
-    message.error("设置失败");
-  } finally {
-    connecting.value = false;
-  }
-}
-
-async function onSync() {
-  syncing.value = true;
-  try {
-    const res = await syncSource();
-    if (res.ok) {
-      message.success("已同步到仓库");
-    } else {
-      message.error(res.error || "同步失败");
-    }
-  } catch {
-    message.error("同步失败");
-  } finally {
-    syncing.value = false;
-  }
-}
-
-async function onInit() {
-  initializing.value = true;
-  try {
-    const res = await initSource();
-    if (res.ok) {
-      const parts = [];
-      if (res.profiles) parts.push("profiles.json");
-      if (res.settings) parts.push("settings.json");
-      if (res.metaFiles > 0) parts.push(`${res.metaFiles} 个 .meta.json`);
-      message.success(`初始化完成：${parts.join("、") || "无缺失文件"}`);
-
-      // 检测 README.md 缺失情况，弹创建对话框
-      if (res.readmeStatus) {
-        const anyMissing = !res.readmeStatus.root || !res.readmeStatus.skills;
-        if (anyMissing) {
-          readmeForm.value.root = !res.readmeStatus.root;
-          readmeForm.value.skills = !res.readmeStatus.skills;
-          showReadmeDialog.value = true;
-        }
-      }
-
-      await loadSource();
-      emit("refresh");
-    } else {
-      message.error(res.error || "初始化失败");
-    }
-  } catch {
-    message.error("初始化失败");
-  } finally {
-    initializing.value = false;
-  }
-}
-
-async function onCreateReadme() {
-  creatingReadme.value = true;
-  try {
-    const res = await createReadme({
-      root: readmeForm.value.root,
-      skills: readmeForm.value.skills,
-      projectName: readmeForm.value.projectName.trim(),
-      teamName: readmeForm.value.teamName.trim(),
-    });
-    if (res.ok) {
-      const parts = res.created || [];
-      message.success(`已创建：${parts.join("、") || "无"}`);
-      showReadmeDialog.value = false;
-    } else {
-      message.error(res.error || "创建失败");
-    }
-  } catch {
-    message.error("创建失败");
-  } finally {
-    creatingReadme.value = false;
-  }
-}
-
-function onShowCreateReadme() {
-  readmeForm.value.root = !sourceInfo.value.readmeStatus?.root;
-  readmeForm.value.skills = !sourceInfo.value.readmeStatus?.skills;
-  showReadmeDialog.value = true;
-}
-
-async function onDisconnect() {
-  disconnecting.value = true;
-  try {
-    const res = await clearSource();
-    if (res.ok) {
-      message.success("技能目录已清除");
-      await loadSource();
-      emit("refresh");
-    }
-  } catch {
-    message.error("清除失败");
-  } finally {
-    disconnecting.value = false;
-  }
-}
-
-async function onDiagnose() {
-  diagnosing.value = true;
-  try {
-    diagnosis.value = await diagnose();
-  } catch {
-    message.error("诊断失败");
-  } finally {
-    diagnosing.value = false;
-  }
-}
-
-onMounted(loadSource);
-</script>
-
-<style scoped>
-.page-header {
-  margin-bottom: 20px;
-}
-
-.page-header h2 {
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.section {
-  margin-bottom: 20px;
-}
-
-.init-alert {
-  margin-bottom: 12px;
-}
-
-.missing-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.missing-item {
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.missing-item code {
-  font-size: 12px;
-  background: rgba(0, 0, 0, 0.06);
-  padding: 1px 6px;
-  border-radius: 3px;
-}
-
-.skill-tag {
-  display: inline-block;
-  margin: 1px 2px;
-}
-
-.missing-hint {
-  margin-top: 4px;
-  font-size: 12px;
-  opacity: 0.7;
-}
-
-.source-status {
-  margin-bottom: 16px;
-}
-
-.source-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-
-.healthy-text {
-  color: #18a058;
-  font-size: 13px;
-}
-
-.issue-text {
-  color: #d03050;
-  font-size: 13px;
-}
-
-.readme-dialog-desc {
-  margin-bottom: 16px;
-  font-size: 14px;
-  color: #555;
-}
-
-.readme-checkbox {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 12px;
-}
-
-.readme-checkbox-content {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.readme-checkbox-title {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.readme-checkbox-desc {
-  font-size: 12px;
-  color: #999;
-}
-
-.diag-group {
-  margin-bottom: 16px;
-}
-
-.diag-group:last-child {
-  margin-bottom: 0;
-}
-
-.diag-group-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  font-weight: 600;
-  padding: 6px 0;
-}
-
-.diag-group-error {
-  color: #d03050;
-}
-
-.diag-group-ok {
-  color: #18a058;
-}
-</style>
-
-<style>
-[data-theme="dark"] .missing-item code {
-  background: rgba(255, 255, 255, 0.08);
-}
-[data-theme="dark"] .healthy-text {
-  color: #4ade80;
-}
-[data-theme="dark"] .issue-text {
-  color: #f87171;
-}
-[data-theme="dark"] .readme-dialog-desc {
-  color: #a6adc8;
-}
-[data-theme="dark"] .readme-checkbox-desc {
-  color: #6c7086;
-}
-</style>

package/scripts/web-ui/vite.config.js

@@ -1,11 +0,0 @@
-const { defineConfig } = require("vite");
-const vue = require("@vitejs/plugin-vue");
-
-module.exports = defineConfig({
-  root: __dirname,
-  plugins: [vue()],
-  build: {
-    outDir: "dist",
-    emptyOutDir: true,
-  },
-});