mdk-skills 2.4.0 → 2.4.2

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

@@ -1,1361 +0,0 @@
-<template>
-  <div class="scene-switch">
-    <!-- 技能说明文档 -->
-    <div class="readme-fold" v-if="skillsReadmeContent">
-      <div class="fold-header" @click="skillsReadmeOpen = !skillsReadmeOpen">
-        <span class="fold-arrow" :class="{ open: skillsReadmeOpen }">▶</span>
-        技能说明
-      </div>
-      <div class="fold-body" v-show="skillsReadmeOpen">
-        <div class="markdown-content" v-html="renderedSkillsReadme" />
-      </div>
-    </div>
-
-    <div class="page-header">
-      <h2>场景切换</h2>
-      <n-button
-        size="small"
-        type="primary"
-        @click="openCreate"
-      >
-        <template #icon
-          ><n-icon><AddOutline /></n-icon
-        ></template>
-        新建场景
-      </n-button>
-    </div>
-
-    <n-spin :show="loading">
-      <div class="scene-grid">
-        <n-card
-          v-for="profile in filteredProfiles"
-          :key="profile.id"
-          class="scene-card"
-          :class="{ active: profile.id === activeId }"
-          :title="profile.name"
-          size="small"
-        >
-          <template #header-extra>
-            <n-space
-              v-if="profile.id !== 'custom' && profile.skills !== null"
-              :size="4"
-            >
-              <n-button size="tiny" quaternary @click="openEdit(profile)">
-                <template #icon
-                  ><n-icon size="16"><PencilOutline /></n-icon
-                ></template>
-              </n-button>
-              <n-popconfirm
-                :negative-text="'取消'"
-                :positive-text="'确认删除'"
-                @positive-click="onDelete(profile)"
-              >
-                <template #trigger>
-                  <n-button size="tiny" quaternary>
-                    <template #icon
-                      ><n-icon size="16"><TrashOutline /></n-icon
-                    ></template>
-                  </n-button>
-                </template>
-                确定删除场景「{{ profile.name }}」？
-              </n-popconfirm>
-            </n-space>
-          </template>
-
-          <p class="scene-desc">{{ profile.description }}</p>
-
-          <template #footer>
-            <div class="scene-footer">
-              <n-space :size="6">
-                <n-tag v-if="profile.id === activeId" type="success" size="small">
-                  当前场景
-                </n-tag>
-                <n-popover
-                  v-if="profile.id === activeId && sceneFailed"
-                  trigger="hover"
-                  placement="top"
-                  width="280"
-                >
-                  <template #trigger>
-                    <n-tag type="warning" size="small" style="cursor:pointer">
-                      ⚠ 未就绪
-                    </n-tag>
-                  </template>
-                  <div class="popover-fail-detail">
-                    <div v-if="sceneFailed.failedDelete?.length" class="popover-fail-section">
-                      <div class="popover-fail-title">🔒 删除失败（被占用）</div>
-                      <div v-for="name in sceneFailed.failedDelete" :key="'fd-'+name" class="popover-fail-item">
-                        {{ name }}
-                      </div>
-                    </div>
-                    <div v-if="sceneFailed.failedInstall?.length" class="popover-fail-section">
-                      <div class="popover-fail-title">⚠️ 安装失败</div>
-                      <div v-for="name in sceneFailed.failedInstall" :key="'fi-'+name" class="popover-fail-item">
-                        {{ name }}
-                      </div>
-                    </div>
-                    <div style="margin-top:8px;border-top:1px solid #eee;padding-top:6px;text-align:center">
-                      <n-button size="tiny" type="warning" secondary @click="reopenFailedModal">
-                        🔄 重新尝试处理
-                      </n-button>
-                    </div>
-                  </div>
-                </n-popover>
-                <n-popover
-                  v-if="profile.skills !== null"
-                  trigger="hover"
-                  placement="top"
-                  width="240"
-                >
-                  <template #trigger>
-                    <n-tag size="small" style="cursor:pointer">
-                      {{ profile.skills.length }} 个技能
-                    </n-tag>
-                  </template>
-                  <div class="skill-preview-list">
-                    <div
-                      v-for="skillName in profile.skills"
-                      :key="skillName"
-                      class="skill-preview-item"
-                    >
-                      {{ skillName }}
-                    </div>
-                  </div>
-                </n-popover>
-                <n-tag v-else-if="profile.skills === null" size="small">
-                  自定义
-                </n-tag>
-              </n-space>
-
-              <n-button
-                v-if="profile.id !== activeId && profile.skills !== null"
-                size="small"
-                type="primary"
-                :loading="applying === profile.id"
-                @click="onApply(profile)"
-              >
-                应用
-              </n-button>
-              <n-button
-                v-if="profile.id !== activeId && profile.skills === null"
-                size="small"
-                @click="openCustomDialog"
-              >
-                自定义勾选
-              </n-button>
-            </div>
-          </template>
-        </n-card>
-      </div>
-    </n-spin>
-
-    <!-- 切换确认弹窗 -->
-    <ModalComp
-      :show="showApplyConfirm"
-      :title="applyState === 'executing' ? '正在切换场景' : applyState === 'failed' ? '切换未完成' : '确认切换场景'"
-      width="540px"
-      :mask-closable="false"
-      @update:show="(v) => { if (!v && applyState !== 'executing') showApplyConfirm = false }"
-    >
-      <!-- 状态：diff 预览 -->
-      <div v-if="applyState === 'preview' && targetProfile" class="diff-preview">
-        <p class="diff-hint">
-          从 <strong>{{ currentProfileName }}</strong> 切换到
-          <strong>{{ targetProfile.name }}</strong>
-        </p>
-        <div v-if="diffResult.added.length > 0" class="diff-section">
-          <div class="diff-label added-label">
-            <n-icon size="16" color="#18a058"><AddOutline /></n-icon>
-            <span>新增（{{ diffResult.added.length }}）</span>
-          </div>
-          <div class="diff-tags">
-            <n-tag
-              v-for="name in diffResult.added"
-              :key="name"
-              size="tiny"
-              type="success"
-              :bordered="false"
-            >
-              {{ name }}
-            </n-tag>
-          </div>
-        </div>
-        <div v-if="diffResult.removed.length > 0" class="diff-section">
-          <div class="diff-label removed-label">
-            <n-icon size="16" color="#d03050"><TrashOutline /></n-icon>
-            <span>移除（{{ diffResult.removed.length }}）</span>
-          </div>
-          <div class="diff-tags">
-            <n-tag
-              v-for="name in diffResult.removed"
-              :key="name"
-              size="tiny"
-              type="error"
-              :bordered="false"
-            >
-              {{ name }}
-            </n-tag>
-          </div>
-        </div>
-        <div v-if="diffResult.kept.length > 0" class="diff-section">
-          <div class="diff-label kept-label">
-            <n-icon size="16" color="#999"><CheckmarkOutline /></n-icon>
-            <span>不变（{{ diffResult.kept.length }}）</span>
-          </div>
-          <div class="diff-tags">
-            <n-tag
-              v-for="name in diffResult.kept"
-              :key="name"
-              size="tiny"
-              :bordered="false"
-            >
-              {{ name }}
-            </n-tag>
-          </div>
-        </div>
-      </div>
-
-      <!-- 状态：执行中 -->
-      <div v-if="applyState === 'executing'" class="executing-state">
-        <div class="executing-spinner">
-          <n-spin size="large" />
-        </div>
-        <p class="executing-text">正在切换到「{{ targetProfile?.name }}」...</p>
-        <p class="executing-hint">处理中，请稍候</p>
-      </div>
-
-      <!-- 状态：失败详情 -->
-      <div v-if="applyState === 'failed'" class="diff-preview">
-        <p class="diff-hint">
-          切换到 <strong>{{ targetProfile?.name }}</strong> 时部分技能未能处理
-        </p>
-        <div v-if="diffResult.added.length > 0" class="diff-section">
-          <div class="diff-label added-label">
-            <n-icon size="16" color="#18a058"><AddOutline /></n-icon>
-            <span>新增（{{ diffResult.added.length }}）</span>
-          </div>
-          <div class="diff-tags">
-            <n-tag
-              v-for="name in diffResult.added"
-              :key="name"
-              size="tiny"
-              type="success"
-              :bordered="false"
-            >
-              {{ name }}
-            </n-tag>
-          </div>
-        </div>
-        <div v-if="diffResult.removed.length > 0" class="diff-section">
-          <div class="diff-label removed-label">
-            <n-icon size="16" color="#d03050"><TrashOutline /></n-icon>
-            <span>移除（{{ diffResult.removed.length }}）</span>
-          </div>
-          <div class="diff-tags">
-            <n-tag
-              v-for="name in diffResult.removed"
-              :key="name"
-              size="tiny"
-              type="error"
-              :bordered="false"
-            >
-              {{ name }}<span v-if="failedDelete.includes(name)" class="fail-marker" title="删除失败（被占用）">🔒</span>
-            </n-tag>
-          </div>
-        </div>
-        <div v-if="diffResult.kept.length > 0" class="diff-section">
-          <div class="diff-label kept-label">
-            <n-icon size="16" color="#999"><CheckmarkOutline /></n-icon>
-            <span>不变（{{ diffResult.kept.length }}）</span>
-          </div>
-          <div class="diff-tags">
-            <n-tag
-              v-for="name in diffResult.kept"
-              :key="name"
-              size="tiny"
-              :bordered="false"
-            >
-              {{ name }}
-            </n-tag>
-          </div>
-        </div>
-        <div v-if="failedDelete.length > 0" class="failure-section">
-          <div class="failure-title removal-failure">
-            <n-icon size="16" color="#d03050"><TrashOutline /></n-icon>
-            <span>删除失败（被程序占用）</span>
-          </div>
-          <div class="failure-list">
-            <div v-for="name in failedDelete" :key="'del-'+name" class="failure-item">
-              <span class="failure-name">🔒 {{ name }}</span>
-              <n-button size="tiny" secondary type="warning" @click="retrySingle('delete', name)">
-                重试
-              </n-button>
-            </div>
-          </div>
-        </div>
-        <div v-if="failedInstall.length > 0" class="failure-section">
-          <div class="failure-title install-failure">
-            <n-icon size="16" color="#d03050"><AddOutline /></n-icon>
-            <span>安装失败</span>
-          </div>
-          <div class="failure-list">
-            <div v-for="name in failedInstall" :key="'inst-'+name" class="failure-item">
-              <span class="failure-name">⚠️ {{ name }}</span>
-              <n-button size="tiny" secondary type="warning" @click="retrySingle('install', name)">
-                重试
-              </n-button>
-            </div>
-          </div>
-        </div>
-        <p class="failure-tip">请关闭相关程序后重试，或打开技能目录手动处理</p>
-      </div>
-
-      <template #footer>
-        <template v-if="applyState === 'preview'">
-          <n-button @click="showApplyConfirm = false">取消</n-button>
-          <n-button type="primary" :loading="confirmLoading" @click="onConfirmApply">
-            确认切换
-          </n-button>
-        </template>
-        <template v-if="applyState === 'failed'">
-          <n-button size="small" @click="openSkillsDestFolder">📂 打开技能目录</n-button>
-          <n-button size="small" @click="onAbandon">放弃</n-button>
-          <n-button
-            size="small"
-            type="primary"
-            :loading="confirmLoading"
-            @click="retryAll"
-          >
-            重试所有失败项
-          </n-button>
-        </template>
-      </template>
-    </ModalComp>
-
-    <!-- 未就绪时切换确认弹窗 -->
-    <ModalComp
-      :show="showPendingConfirm"
-      title="当前场景未就绪"
-      width="420px"
-      @update:show="(v) => { if (!v) showPendingConfirm = false }"
-    >
-      <div class="pending-confirm-body">
-        <p v-if="sceneFailed">
-          当前场景 <strong>{{ currentProfileName }}</strong> 还有未就绪的技能
-        </p>
-        <div v-if="sceneFailed?.failedDelete?.length" class="pending-confirm-section">
-          <div class="pending-confirm-title">🔒 删除失败（被占用）</div>
-          <div v-for="name in sceneFailed.failedDelete" :key="'pd-'+name" class="pending-confirm-item">{{ name }}</div>
-        </div>
-        <div v-if="sceneFailed?.failedInstall?.length" class="pending-confirm-section">
-          <div class="pending-confirm-title">⚠️ 安装失败</div>
-          <div v-for="name in sceneFailed.failedInstall" :key="'pi-'+name" class="pending-confirm-item">{{ name }}</div>
-        </div>
-        <p class="pending-confirm-hint">确定要切换到其他场景吗？</p>
-      </div>
-      <template #footer>
-        <n-button size="small" @click="showPendingConfirm = false">取消</n-button>
-        <n-button size="small" @click="onIgnoreAndSwitch">忽略并切换</n-button>
-        <n-button size="small" type="primary" @click="handlePendingRetry">处理未就绪</n-button>
-      </template>
-    </ModalComp>
-
-    <!-- 自定义勾选弹窗 -->
-    <ModalComp
-      :show="showCustom"
-      title="自定义技能组合"
-      width="560px"
-      @update:show="
-        (v) => {
-          if (!v) showCustom = false;
-        }
-      "
-    >
-      <n-input
-        v-model:value="customSearch"
-        placeholder="搜索技能..."
-        size="small"
-        clearable
-        class="search-input"
-      />
-      <n-space class="batch-actions" :size="6">
-        <n-button size="tiny" @click="customSelected = selectAllVisible(customSearch, customSelected)">
-          全选
-        </n-button>
-        <n-button size="tiny" @click="customSelected = invertVisible(customSearch, customSelected)">
-          反选
-        </n-button>
-        <n-button size="tiny" @click="customSelected = clearAll()">
-          清空
-        </n-button>
-      </n-space>
-      <n-checkbox-group v-model:value="customSelected">
-        <div class="modal-skill-groups">
-          <div
-            v-for="group in groupedSkills"
-            :key="group.key"
-            class="skill-group"
-          >
-            <div class="skill-group-header" @click="toggleGroup(group.key)">
-              <span class="fold-arrow" :class="{ open: groupOpen[group.key] }"
-                >▶</span
-              >
-              <span class="skill-group-label">{{
-                group.type === "remote" ? group.url : "本地技能"
-              }}</span>
-              <span class="skill-group-count">{{ filteredGroupSkills(group, customSearch).length }}</span>
-            </div>
-            <div v-show="groupOpen[group.key]" class="skill-group-body">
-              <n-checkbox
-                v-for="skill in filteredGroupSkills(group, customSearch)"
-                :key="skill.name"
-                :value="skill.name"
-              >
-                <span v-html="highlightText(skill.name, customSearch)" />
-              </n-checkbox>
-            </div>
-          </div>
-        </div>
-      </n-checkbox-group>
-      <template #footer>
-        <n-button
-          type="primary"
-          :loading="customLoading"
-          @click="onApplyCustom"
-        >
-          确认安装
-        </n-button>
-      </template>
-    </ModalComp>
-
-    <!-- 编辑弹窗 -->
-    <ModalComp
-      :show="showEditor"
-      :title="editingProfile ? '编辑场景' : '新建场景'"
-      width="560px"
-      :mask-closable="false"
-      @update:show="
-        (v) => {
-          if (!v) showEditor = false;
-        }
-      "
-    >
-      <n-form :model="formData" label-placement="top">
-        <n-form-item label="场景名称" required>
-          <n-input
-            v-model:value="formData.name"
-            placeholder="给场景起个名字"
-            :maxlength="30"
-          />
-        </n-form-item>
-        <n-form-item label="场景描述">
-          <n-input
-            v-model:value="formData.description"
-            type="textarea"
-            :rows="2"
-            placeholder="简短描述这个场景的用途"
-          />
-        </n-form-item>
-        <n-divider />
-        <n-form-item label="包含的技能">
-          <n-input
-            v-model:value="formSearch"
-            placeholder="搜索技能..."
-            size="small"
-            clearable
-            class="search-input"
-          />
-          <n-space class="batch-actions" :size="6">
-            <n-button size="tiny" @click="formData.skills = selectAllVisible(formSearch, formData.skills)">
-              全选
-            </n-button>
-            <n-button size="tiny" @click="formData.skills = invertVisible(formSearch, formData.skills)">
-              反选
-            </n-button>
-            <n-button size="tiny" @click="formData.skills = clearAll()">
-              清空
-            </n-button>
-          </n-space>
-          <n-checkbox-group v-model:value="formData.skills">
-            <div class="modal-skill-groups">
-              <div
-                v-for="group in groupedSkills"
-                :key="group.key"
-                class="skill-group"
-              >
-                <div class="skill-group-header" @click="toggleGroup(group.key)">
-                  <span
-                    class="fold-arrow"
-                    :class="{ open: groupOpen[group.key] }"
-                    >▶</span
-                  >
-                  <span class="skill-group-label">{{
-                    group.type === "remote" ? group.url : "本地技能"
-                  }}</span>
-                  <span class="skill-group-count">{{
-                    filteredGroupSkills(group, formSearch).length
-                  }}</span>
-                </div>
-                <div v-show="groupOpen[group.key]" class="skill-group-body">
-                  <n-checkbox
-                    v-for="skill in filteredGroupSkills(group, formSearch)"
-                    :key="skill.name"
-                    :value="skill.name"
-                  >
-                    <span v-html="highlightText(skill.name, formSearch)" />
-                  </n-checkbox>
-                </div>
-              </div>
-            </div>
-          </n-checkbox-group>
-        </n-form-item>
-        <n-divider />
-        <n-form-item label="始终加载（always_apply）">
-          <template v-if="formData.skills.length === 0">
-            <span class="hint-text">请先勾选包含的技能</span>
-          </template>
-          <n-checkbox-group v-else v-model:value="formData.always_apply">
-            <div class="always-apply-grid">
-              <n-checkbox
-                v-for="skillName in formData.skills"
-                :key="skillName"
-                :value="skillName"
-                :label="skillName"
-              />
-            </div>
-          </n-checkbox-group>
-        </n-form-item>
-      </n-form>
-      <template #footer>
-        <n-button @click="showEditor = false">取消</n-button>
-        <n-button type="primary" :loading="saving" @click="onSave">
-          保存
-        </n-button>
-      </template>
-    </ModalComp>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from "vue";
-import { useMessage } from "naive-ui";
-import { NIcon } from "naive-ui";
-import { AddOutline, PencilOutline, TrashOutline, CheckmarkOutline } from "@vicons/ionicons5";
-import { marked } from "marked";
-import hljs from "highlight.js";
-import ModalComp from "../components/ModalComp.vue";
-import {
-  getProfiles,
-  applyProfile,
-  getSkills,
-  saveProfile,
-  deleteProfile,
-  installSkills,
-  getSkillsReadme,
-  retryDelete,
-  retryInstall,
-  openSkillsDest,
-} from "../api/skills";
-import { recordUsage } from "../utils/usage";
-
-// marked 配置：代码高亮 + 外链安全
-marked.use({
-  renderer: {
-    code({ text, lang }) {
-      const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
-      let highlighted;
-      try {
-        highlighted = hljs.highlight(text, { language }).value;
-      } catch {
-        highlighted = hljs.highlightAuto(text).value;
-      }
-      return `<pre><button class="copy-btn" onclick="navigator.clipboard.writeText(this.parentNode.querySelector('code').textContent);this.textContent='已复制';setTimeout(()=>this.textContent='复制',1500)">复制</button><code class="hljs language-${language}">${highlighted}</code></pre>`;
-    },
-    link({ href, text }) {
-      const isExternal =
-        href && (href.startsWith("http://") || href.startsWith("https://"));
-      const target = isExternal
-        ? ' target="_blank" rel="noopener noreferrer"'
-        : "";
-      return `<a href="${href}"${target}>${text}</a>`;
-    },
-  },
-});
-
-const emit = defineEmits(["refresh"]);
-const message = useMessage();
-
-// 技能说明 README
-const skillsReadmeContent = ref(null);
-const skillsReadmeOpen = ref(true);
-const renderedSkillsReadme = ref("");
-
-const profiles = ref([]);
-const activeId = ref(null);
-const allSkills = ref([]);
-const loading = ref(false);
-const applying = ref(null);
-
-// 切换确认弹窗
-const showApplyConfirm = ref(false);
-const confirmLoading = ref(false);
-const targetProfile = ref(null);
-const diffResult = ref({ added: [], removed: [], kept: [] });
-// 弹窗状态：preview → executing → failed
-const applyState = ref("preview");
-const failedDelete = ref([]);
-const failedInstall = ref([]);
-// 卡片角标：只跟踪当前激活场景的失败状态
-const sceneFailed = ref(null);
-// 未就绪时切换场景的确认弹窗
-const showPendingConfirm = ref(false);
-const pendingApplyProfile = ref(null);
-const currentProfileName = computed(() => {
-  if (!activeId.value) return "无";
-  const p = profiles.value.find((p) => p.id === activeId.value);
-  return p ? p.name : "无";
-});
-
-// 自定义勾选
-const showCustom = ref(false);
-const customSelected = ref([]);
-const customLoading = ref(false);
-const customSearch = ref("");
-
-// 编辑器
-const showEditor = ref(false);
-const editingProfile = ref(null);
-const saving = ref(false);
-const formSearch = ref("");
-const formData = ref({
-  name: "",
-  description: "",
-  skills: [],
-  always_apply: [],
-});
-
-// 技能分组折叠
-const groupOpen = ref({});
-function toggleGroup(key) {
-  groupOpen.value[key] = !groupOpen.value[key];
-}
-
-// 过滤掉不可见的场景（如已有内置）
-const filteredProfiles = computed(() => profiles.value);
-
-// 技能按源分组
-const groupedSkills = computed(() => {
-  const groups = {};
-  for (const skill of allSkills.value) {
-    const isRemote = skill.source?.type === "remote";
-    const key = isRemote ? skill.source.url : "__local__";
-    if (!groups[key]) {
-      groups[key] = {
-        key,
-        type: isRemote ? "remote" : "local",
-        url: skill.source?.url || "",
-        skills: [],
-      };
-    }
-    groups[key].skills.push(skill);
-  }
-  for (const key of Object.keys(groups)) {
-    if (groupOpen.value[key] === undefined) groupOpen.value[key] = true;
-  }
-  return Object.values(groups).sort((a, b) => {
-    if (a.type === "remote" && b.type === "local") return -1;
-    if (a.type === "local" && b.type === "remote") return 1;
-    return 0;
-  });
-});
-
-function filteredGroupSkills(group, searchText) {
-  if (!searchText) return group.skills;
-  const q = searchText.toLowerCase();
-  return group.skills.filter((s) => s.name.toLowerCase().includes(q));
-}
-
-// 获取搜索过滤后的所有技能名称
-function getFilteredSkillNames(searchText) {
-  const names = [];
-  for (const group of groupedSkills.value) {
-    names.push(...filteredGroupSkills(group, searchText).map((s) => s.name));
-  }
-  return names;
-}
-
-// 全选当前可见技能
-function selectAllVisible(searchText, selectedList) {
-  const visible = getFilteredSkillNames(searchText);
-  return [...new Set([...selectedList, ...visible])];
-}
-
-// 反选当前可见技能
-function invertVisible(searchText, selectedList) {
-  const visible = getFilteredSkillNames(searchText);
-  const visibleSet = new Set(visible);
-  const kept = selectedList.filter((s) => !visibleSet.has(s));
-  const added = visible.filter((s) => !selectedList.includes(s));
-  return [...kept, ...added];
-}
-
-// 清空所有选中
-function clearAll() {
-  return [];
-}
-
-// 搜索关键字高亮
-function highlightText(text, query) {
-  if (!query) return text;
-  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  return text.replace(new RegExp(`(${escaped})`, 'gi'), '<mark class="search-highlight">$1</mark>');
-}
-
-function stripFrontmatter(text) {
-  if (!text) return text;
-  return text.replace(/^---[\s\S]*?---\s*/, "");
-}
-
-function renderMd(text) {
-  if (!text) return "";
-  const body = stripFrontmatter(text);
-  if (!body.trim()) return "";
-  try {
-    return marked.parse(body);
-  } catch {
-    return body;
-  }
-}
-
-async function loadSkillsReadme() {
-  try {
-    const res = await getSkillsReadme();
-    if (res.content) {
-      renderedSkillsReadme.value = renderMd(res.content);
-      skillsReadmeContent.value = res.content;
-    }
-  } catch {
-    // 静默失败
-  }
-}
-
-async function loadData() {
-  loading.value = true;
-  try {
-    const res = await getProfiles();
-    profiles.value = res.profiles || [];
-    activeId.value = res.activeProfile;
-    allSkills.value = await getSkills();
-  } finally {
-    loading.value = false;
-  }
-}
-
-function openCreate() {
-  editingProfile.value = null;
-  formData.value = {
-    name: "",
-    description: "",
-    skills: [],
-    always_apply: [],
-  };
-  showEditor.value = true;
-}
-
-function openEdit(profile) {
-  editingProfile.value = profile;
-  formData.value = {
-    name: profile.name,
-    description: profile.description || "",
-    skills: [...(profile.skills || [])],
-    always_apply: [...(profile.always_apply || [])],
-  };
-  showEditor.value = true;
-}
-
-function openCustomDialog() {
-  customSelected.value = allSkills.value
-    .filter((s) => s.enabled)
-    .map((s) => s.name);
-  showCustom.value = true;
-}
-
-async function onApplyCustom() {
-  customLoading.value = true;
-  try {
-    const res = await installSkills(customSelected.value);
-    if (res.ok) {
-      if (res.locked?.length) {
-        message.warning(`已安装 ${customSelected.value.length - res.locked.length} 个技能，${res.locked.length} 个被占用`);
-      } else {
-        message.success(`已安装 ${customSelected.value.length} 个技能`);
-      }
-      activeId.value = "custom";
-      showCustom.value = false;
-      customSelected.value.forEach(recordUsage);
-      emit("refresh");
-    }
-  } catch {
-    message.error("安装失败");
-  } finally {
-    customLoading.value = false;
-  }
-}
-
-async function onSave() {
-  if (!formData.value.name.trim()) {
-    message.warning("请填写场景名称");
-    return;
-  }
-  saving.value = true;
-  try {
-    const data = {
-      id: editingProfile.value?.id,
-      name: formData.value.name.trim(),
-      description: formData.value.description.trim(),
-      skills: formData.value.skills,
-      always_apply: formData.value.always_apply,
-    };
-    const res = await saveProfile(data);
-    if (res.ok) {
-      profiles.value = res.profiles;
-      message.success(editingProfile.value ? "场景已更新" : "场景已创建");
-      showEditor.value = false;
-      emit("refresh");
-    } else if (res.error) {
-      message.error(res.error);
-    }
-  } catch {
-    message.error("保存失败");
-  } finally {
-    saving.value = false;
-  }
-}
-
-async function onDelete(profile) {
-  try {
-    const res = await deleteProfile(profile.id);
-    if (res.ok) {
-      profiles.value = profiles.value.filter((p) => p.id !== profile.id);
-      message.success(`场景「${profile.name}」已删除`);
-      emit("refresh");
-    } else if (res.error) {
-      message.error(res.error);
-    }
-  } catch {
-    message.error("删除失败");
-  }
-}
-
-function calcDiff(profile) {
-  // 当前启用的技能
-  const currentSkills = allSkills.value
-    .filter((s) => s.enabled)
-    .map((s) => s.name);
-  const targetSkills = profile.skills || [];
-  return {
-    added: targetSkills.filter((s) => !currentSkills.includes(s)),
-    removed: currentSkills.filter((s) => !targetSkills.includes(s)),
-    kept: currentSkills.filter((s) => targetSkills.includes(s)),
-  };
-}
-
-function onApply(profile) {
-  // 当前场景有未就绪时弹出确认
-  if (sceneFailed.value) {
-    pendingApplyProfile.value = profile;
-    showPendingConfirm.value = true;
-    return;
-  }
-  targetProfile.value = profile;
-  diffResult.value = calcDiff(profile);
-  failedDelete.value = [];
-  failedInstall.value = [];
-  applyState.value = "preview";
-  showApplyConfirm.value = true;
-}
-
-// 忽略未就绪，直接切
-function onIgnoreAndSwitch() {
-  sceneFailed.value = null;
-  showPendingConfirm.value = false;
-  const profile = pendingApplyProfile.value;
-  pendingApplyProfile.value = null;
-  if (profile) onApply(profile);
-}
-
-// 从确认弹窗进入重试
-function handlePendingRetry() {
-  showPendingConfirm.value = false;
-  // 直接用 sceneFailed 打开重试弹窗
-  if (!sceneFailed.value) return;
-  failedDelete.value = [...(sceneFailed.value.failedDelete || [])];
-  failedInstall.value = [...(sceneFailed.value.failedInstall || [])];
-  applyState.value = "failed";
-  targetProfile.value = profiles.value.find((p) => p.id === activeId.value) || null;
-  showApplyConfirm.value = true;
-}
-
-async function onConfirmApply() {
-  if (!targetProfile.value) return;
-  applyState.value = "executing";
-  confirmLoading.value = true;
-  applying.value = targetProfile.value.id;
-  try {
-    const res = await applyProfile(targetProfile.value.id);
-    if (res.ok) {
-      activeId.value = targetProfile.value.id;
-      failedDelete.value = res.failedDelete || [];
-      failedInstall.value = res.failedInstall || [];
-      const hasFailed = failedDelete.value.length > 0 || failedInstall.value.length > 0;
-
-      if (hasFailed) {
-        applyState.value = "failed";
-        // 记录失败信息到卡片角标
-        sceneFailed.value = {
-          failedDelete: [...failedDelete.value],
-          failedInstall: [...failedInstall.value],
-        };
-      } else {
-        // 全部成功，清理角标
-        sceneFailed.value = null;
-        message.success(`已切换到「${targetProfile.value.name}」`);
-        showApplyConfirm.value = false;
-      }
-      (targetProfile.value.skills || []).forEach(recordUsage);
-      emit("refresh");
-      allSkills.value = await getSkills();
-    }
-  } catch {
-    message.error("切换失败");
-    applyState.value = "preview";
-  } finally {
-    confirmLoading.value = false;
-    applying.value = null;
-  }
-}
-
-// 单技能重试
-async function retrySingle(type, name) {
-  const fn = type === "delete" ? retryDelete : retryInstall;
-  const label = type === "delete" ? "删除" : "安装";
-  try {
-    const res = await fn(name);
-    if (res.ok) {
-      message.success(`技能 "${name}" ${label}成功`);
-      if (type === "delete") {
-        failedDelete.value = failedDelete.value.filter((n) => n !== name);
-      } else {
-        failedInstall.value = failedInstall.value.filter((n) => n !== name);
-      }
-      // 更新角标
-      if (failedDelete.value.length === 0 && failedInstall.value.length === 0) {
-        sceneFailed.value = null;
-      } else if (sceneFailed.value) {
-        sceneFailed.value = {
-          failedDelete: [...failedDelete.value],
-          failedInstall: [...failedInstall.value],
-        };
-      }
-      // 如果所有失败都解决了，同步 settings 并关闭弹窗
-      if (failedDelete.value.length === 0 && failedInstall.value.length === 0) {
-        await syncApplySettings();
-      }
-    } else if (res.locked) {
-      message.warning(`技能 "${name}" 仍被占用，请关闭相关程序后重试`);
-    } else {
-      message.error(res.error || `${label}失败`);
-    }
-  } catch {
-    message.error(`${label}失败`);
-  }
-}
-
-// 重试所有失败项
-async function retryAll() {
-  // 先重试所有安装失败，再重试所有删除失败
-  for (const name of [...failedInstall.value]) {
-    await retrySingle("install", name);
-    if (showApplyConfirm.value === false) return; // 弹窗已关闭
-  }
-  for (const name of [...failedDelete.value]) {
-    await retrySingle("delete", name);
-    if (showApplyConfirm.value === false) return;
-  }
-}
-
-// 放弃切换
-function onAbandon() {
-  showApplyConfirm.value = false;
-  if (sceneFailed.value) {
-    const parts = [];
-    if (sceneFailed.value.failedDelete?.length) parts.push(`删除失败 ${sceneFailed.value.failedDelete.length} 个`);
-    if (sceneFailed.value.failedInstall?.length) parts.push(`安装失败 ${sceneFailed.value.failedInstall.length} 个`);
-    message.warning(`部分技能未就绪：${parts.join("、")}`);
-  }
-}
-
-// 打开项目技能目录
-function openSkillsDestFolder() {
-  openSkillsDest().catch(() => message.error("打开目录失败"));
-}
-
-// 所有失败解决后同步 settings（applyProfile 有失败时不写 settings）
-async function syncApplySettings() {
-  if (!targetProfile.value) return;
-  // 重新调 applyProfile，此时文件操作全是幂等的，全部成功后会写 settings
-  const res = await applyProfile(targetProfile.value.id);
-  if (res.ok) {
-    message.success(`已切换到「${targetProfile.value.name}」`);
-    showApplyConfirm.value = false;
-    emit("refresh");
-    allSkills.value = await getSkills();
-  }
-}
-
-// 从卡片角标重新打开失败重试弹窗
-function reopenFailedModal() {
-  if (!sceneFailed.value) return;
-  failedDelete.value = [...(sceneFailed.value.failedDelete || [])];
-  failedInstall.value = [...(sceneFailed.value.failedInstall || [])];
-  applyState.value = "failed";
-  // 找到当前场景 profile
-  targetProfile.value = profiles.value.find((p) => p.id === activeId.value) || null;
-  showApplyConfirm.value = true;
-}
-
-onMounted(() => {
-  loadData();
-  loadSkillsReadme();
-});
-</script>
-
-<style scoped>
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.page-header h2 {
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.scene-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
-  margin: 2px;
-}
-
-.scene-card {
-  transition: box-shadow 0.2s;
-}
-
-.scene-card.active {
-  box-shadow: 0 0 0 2px #2080f0;
-}
-
-.scene-desc {
-  font-size: 13px;
-  color: #666;
-  margin: 0;
-}
-
-.scene-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.hint-text {
-  font-size: 12px;
-  color: #999;
-}
-
-/* 差异预览 */
-.diff-preview {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-.diff-hint {
-  margin: 0 0 4px;
-  font-size: 14px;
-}
-.diff-section {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.diff-label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  font-weight: 600;
-}
-.diff-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-/* 技能预览浮层 */
-.skill-preview-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-height: 240px;
-  overflow-y: auto;
-}
-.skill-preview-item {
-  font-size: 13px;
-  padding: 2px 0;
-}
-
-/* 技能分组 */
-.modal-skill-groups {
-  max-height: 50vh;
-  overflow-y: auto;
-}
-
-.skill-group {
-  margin-bottom: 4px;
-  border: 1px solid #eee;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.skill-group-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 10px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 13px;
-  background: #f8f9fa;
-  border-bottom: 1px solid #eee;
-  transition: background 0.15s;
-}
-
-.skill-group-header:hover {
-  background: #eef0f4;
-}
-
-.fold-arrow {
-  font-size: 10px;
-  transition: transform 0.2s;
-  color: #999;
-  flex-shrink: 0;
-}
-
-.fold-arrow.open {
-  transform: rotate(90deg);
-}
-
-.skill-group-label {
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-}
-
-.skill-group-count {
-  color: #999;
-  font-size: 12px;
-  flex-shrink: 0;
-}
-
-.skill-group-body {
-  padding: 8px 10px;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 6px;
-}
-
-.always-apply-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 6px;
-}
-
-.batch-actions {
-  margin-bottom: 10px;
-}
-
-.search-highlight {
-  background: #ffd666;
-  padding: 0 2px;
-  border-radius: 2px;
-}
-
-.search-input {
-  margin-bottom: 8px;
-}
-
-/* 执行中状态 */
-.executing-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 32px 0;
-  gap: 12px;
-}
-.executing-text {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-}
-.executing-hint {
-  margin: 0;
-  font-size: 13px;
-  color: #999;
-}
-
-/* 失败区域 */
-.failure-section {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: 4px;
-}
-.failure-title {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  font-weight: 600;
-}
-.failure-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.failure-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 8px;
-  background: #fff1f0;
-  border-radius: 4px;
-  font-size: 13px;
-}
-.failure-name {
-  font-weight: 500;
-}
-.failure-tip {
-  margin: 4px 0 0;
-  font-size: 12px;
-  color: #999;
-}
-.fail-marker {
-  margin-left: 2px;
-  font-size: 12px;
-}
-.popover-fail-detail {
-  font-size: 13px;
-}
-.popover-fail-section {
-  margin-bottom: 6px;
-}
-.popover-fail-section:last-child {
-  margin-bottom: 0;
-}
-.popover-fail-title {
-  font-weight: 600;
-  margin-bottom: 3px;
-  font-size: 12px;
-}
-.popover-fail-item {
-  padding: 1px 0 1px 8px;
-  font-size: 12px;
-  color: #555;
-}
-
-/* 未就绪确认弹窗 */
-.pending-confirm-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.pending-confirm-body p {
-  margin: 0;
-  font-size: 14px;
-}
-.pending-confirm-section {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.pending-confirm-title {
-  font-size: 12px;
-  font-weight: 600;
-}
-.pending-confirm-item {
-  font-size: 13px;
-  padding: 2px 0 2px 12px;
-  color: #555;
-}
-.pending-confirm-hint {
-  margin-top: 4px;
-  font-size: 13px;
-  color: #999;
-}
-</style>
-
-<style>
-[data-theme="dark"] .scene-card.active {
-  box-shadow: 0 0 0 2px #6a8cff;
-}
-[data-theme="dark"] .hint-text,
-[data-theme="dark"] .skill-group-count {
-  color: #6c7086;
-}
-[data-theme="dark"] .skill-group-header:hover {
-  background: rgba(255, 255, 255, 0.04);
-}
-[data-theme="dark"] .fold-arrow {
-  color: #6c7086;
-}
-[data-theme="dark"] .skill-group-label {
-  color: #cdd6f4 !important;
-}
-[data-theme="dark"] .skill-group {
-  border-color: #363b4a;
-}
-[data-theme="dark"] .skill-group-header {
-  background: #1e2129;
-  border-color: #363b4a;
-}
-[data-theme="dark"] .skill-group-header:hover {
-  background: #2a2e3a;
-}
-[data-theme="dark"] .search-highlight {
-  background: #8a6d00;
-  color: #fff;
-}
-[data-theme="dark"] .failure-item {
-  background: rgba(208, 48, 80, 0.15);
-}
-[data-theme="dark"] .executing-hint {
-  color: #6c7086;
-}
-[data-theme="dark"] .failure-tip {
-  color: #6c7086;
-}
-[data-theme="dark"] .popover-fail-item {
-  color: #b0b6cc;
-}
-[data-theme="dark"] .pending-confirm-item {
-  color: #b0b6cc;
-}
-[data-theme="dark"] .pending-confirm-hint {
-  color: #6c7086;
-}
-</style>