codexmate 0.0.14 → 0.0.16

package/doc/CHANGELOG.md

@@ -1,12 +1,17 @@
-# Changelog
-
-## 0.0.14
-
-- Skills Manager: polish modal layout with overview counters and clearer section structure
-- Skills Manager: unify status select style and refine list scrollbar density
-- Docs: sync README / README.en release notes for 0.0.14
-
-## 0.0.13
+# Changelog
+
+## 0.0.15
+
+- Release: bump package version to 0.0.15
+- Docs: sync README / README.en with current release marker
+
+## 0.0.14
+
+- Skills Manager: polish modal layout with overview counters and clearer section structure
+- Skills Manager: unify status select style and refine list scrollbar density
+- Docs: sync README / README.en release notes for 0.0.14
+
+## 0.0.13
 
 - Web UI: switch to IDE-style three-column layout with a fixed status inspector panel
 - AGENTS editor: add "Export" action to download current content as `agent-<timestamp>.txt`

package/doc/CHANGELOG.zh-CN.md

@@ -1,5 +1,12 @@
 # 更新日志
 
+## 0.0.15
+
+- 发版：版本提升至 0.0.15
+- 文档：同步 README / README.en 当前版本标记
+
+
+
 ## 0.0.14
 
 - Skills 管理：打磨弹窗信息层级，新增统计概览与分区结构

package/package.json

@@ -1,6 +1,6 @@
-{
+{
   "name": "codexmate",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Codex/Claude Code 配置与会话管理 CLI + Web 工具",
   "main": "cli.js",
   "bin": {
@@ -37,6 +37,7 @@
   "dependencies": {
     "@iarna/toml": "^2.2.5",
     "json5": "^2.2.3",
+    "yauzl": "^3.2.1",
     "zip-lib": "^1.2.1"
   },
   "engines": {
@@ -60,4 +61,3 @@
     "vitepress": "^1.6.4"
   }
 }
-

package/web-ui/app.js

@@ -14,6 +14,13 @@
     buildSessionTimelineNodes,
     normalizeSessionMessageRole
 } from './logic.mjs';
+import {
+    CONFIG_MODE_SET,
+    getProviderConfigModeMeta,
+    createConfigModeComputed
+} from './modules/config-mode.computed.mjs';
+import { createSkillsComputed } from './modules/skills.computed.mjs';
+import { createSkillsMethods } from './modules/skills.methods.mjs';
 
         document.addEventListener('DOMContentLoaded', () => {
             if (typeof Vue === 'undefined') {
@@ -111,6 +118,8 @@
                     skillsImportSelectedKeys: [],
                     skillsScanningImports: false,
                     skillsImporting: false,
+                    skillsZipImporting: false,
+                    skillsExporting: false,
                     sessionsList: [],
                     sessionsLoading: false,
                     sessionFilterSource: 'all',
@@ -400,141 +409,10 @@
                 installRegistryPreview() {
                     return this.resolveInstallRegistryUrl(this.installRegistryPreset, this.installRegistryCustom);
                 },
-                filteredSkillsList() {
-                    const list = Array.isArray(this.skillsList) ? this.skillsList : [];
-                    const keyword = typeof this.skillsKeyword === 'string' ? this.skillsKeyword.trim().toLowerCase() : '';
-                    const status = typeof this.skillsStatusFilter === 'string' ? this.skillsStatusFilter : 'all';
-                    return list.filter((item) => {
-                        const safe = item && typeof item === 'object' ? item : {};
-                        const hasSkillFile = !!safe.hasSkillFile;
-                        if (status === 'with-skill-file' && !hasSkillFile) return false;
-                        if (status === 'missing-skill-file' && hasSkillFile) return false;
-                        if (!keyword) return true;
-                        const fields = [
-                            safe.name,
-                            safe.displayName,
-                            safe.description,
-                            safe.path
-                        ];
-                        return fields.some((value) => typeof value === 'string' && value.toLowerCase().includes(keyword));
-                    });
-                },
-                skillsSelectableNames() {
-                    const list = Array.isArray(this.filteredSkillsList) ? this.filteredSkillsList : [];
-                    return list
-                        .map((item) => (item && typeof item.name === 'string' ? item.name.trim() : ''))
-                        .filter(Boolean);
-                },
-                skillsConfiguredCount() {
-                    const list = Array.isArray(this.skillsList) ? this.skillsList : [];
-                    return list.filter((item) => !!(item && item.hasSkillFile)).length;
-                },
-                skillsMissingSkillFileCount() {
-                    const list = Array.isArray(this.skillsList) ? this.skillsList : [];
-                    return list.filter((item) => !(item && item.hasSkillFile)).length;
-                },
-                skillsFilterDirty() {
-                    const keyword = typeof this.skillsKeyword === 'string' ? this.skillsKeyword.trim() : '';
-                    const status = typeof this.skillsStatusFilter === 'string' ? this.skillsStatusFilter : 'all';
-                    return keyword.length > 0 || status !== 'all';
-                },
-                skillsSelectedCount() {
-                    const selected = Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : [];
-                    return Array.from(new Set(selected.map((item) => String(item || '').trim()).filter(Boolean))).length;
-                },
-                skillsVisibleSelectedCount() {
-                    const selectable = this.skillsSelectableNames;
-                    const selectedSet = new Set(Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : []);
-                    return selectable.filter((name) => selectedSet.has(name)).length;
-                },
-                skillsAllSelected() {
-                    const selectable = this.skillsSelectableNames;
-                    if (!selectable.length) return false;
-                    const selectedSet = new Set(Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : []);
-                    return selectable.every((name) => selectedSet.has(name));
-                },
-                skillsImportSelectableKeys() {
-                    const list = Array.isArray(this.skillsImportList) ? this.skillsImportList : [];
-                    return list
-                        .map((item) => this.buildSkillImportKey(item))
-                        .filter(Boolean);
-                },
-                skillsImportSelectedCount() {
-                    const selectable = this.skillsImportSelectableKeys;
-                    const selectedSet = new Set(Array.isArray(this.skillsImportSelectedKeys) ? this.skillsImportSelectedKeys : []);
-                    return selectable.filter((key) => selectedSet.has(key)).length;
-                },
-                skillsImportAllSelected() {
-                    const selectable = this.skillsImportSelectableKeys;
-                    if (!selectable.length) return false;
-                    const selectedSet = new Set(Array.isArray(this.skillsImportSelectedKeys) ? this.skillsImportSelectedKeys : []);
-                    return selectable.every((key) => selectedSet.has(key));
-                },
-                skillsImportConfiguredCount() {
-                    const list = Array.isArray(this.skillsImportList) ? this.skillsImportList : [];
-                    return list.filter((item) => !!(item && item.hasSkillFile)).length;
-                },
-                skillsImportMissingSkillFileCount() {
-                    const list = Array.isArray(this.skillsImportList) ? this.skillsImportList : [];
-                    return list.filter((item) => !(item && item.hasSkillFile)).length;
-                },
-                inspectorMainTabLabel() {
-                    if (this.mainTab === 'config') return '配置中心';
-                    if (this.mainTab === 'sessions') return '会话浏览';
-                    if (this.mainTab === 'settings') return '设置';
-                    return '未知';
-                },
-                inspectorConfigModeLabel() {
-                    if (this.mainTab !== 'config') return '--';
-                    if (this.configMode === 'codex') return 'Codex';
-                    if (this.configMode === 'claude') return 'Claude Code';
-                    if (this.configMode === 'openclaw') return 'OpenClaw';
-                    return '未选择';
-                },
-                inspectorCurrentConfigLabel() {
-                    if (this.mainTab !== 'config') return '--';
-                    if (this.configMode === 'codex') {
-                        const provider = typeof this.currentProvider === 'string' ? this.currentProvider.trim() : '';
-                        return provider || '未选择';
-                    }
-                    if (this.configMode === 'claude') {
-                        const config = typeof this.currentClaudeConfig === 'string' ? this.currentClaudeConfig.trim() : '';
-                        return config || '未选择';
-                    }
-                    const openclaw = typeof this.currentOpenclawConfig === 'string' ? this.currentOpenclawConfig.trim() : '';
-                    return openclaw || '未选择';
-                },
-                inspectorCurrentModelLabel() {
-                    if (this.mainTab !== 'config') return '--';
-                    if (this.configMode === 'codex') {
-                        const model = typeof this.currentModel === 'string' ? this.currentModel.trim() : '';
-                        return model || '未选择';
-                    }
-                    if (this.configMode === 'claude') {
-                        const model = typeof this.currentClaudeModel === 'string' ? this.currentClaudeModel.trim() : '';
-                        return model || '未选择';
-                    }
-                    const model = this.openclawStructured && typeof this.openclawStructured.agentPrimary === 'string'
-                        ? this.openclawStructured.agentPrimary.trim()
-                        : '';
-                    return model || '按配置文件';
-                },
-                inspectorTemplateStatus() {
-                    if (this.mainTab !== 'config') return '--';
-                    if (this.configMode === 'codex') {
-                        if (this.configTemplateApplying || this.codexApplying) {
-                            return '模板应用中';
-                        }
-                        return '模板可编辑（手动确认应用）';
-                    }
-                    if (this.configMode === 'claude') {
-                        return '即时写入 Claude settings';
-                    }
-                    if (this.openclawApplying || this.openclawSaving) {
-                        return 'OpenClaw 保存/应用中';
-                    }
-                    return 'JSON5 可保存并应用';
-                },
+                ...createSkillsComputed(),
+
+                ...createConfigModeComputed(),
+
                 inspectorBusyStatus() {
                     const tasks = [];
                     if (this.loading) tasks.push('初始化');
@@ -542,7 +420,7 @@
                     if (this.codexModelsLoading || this.claudeModelsLoading) tasks.push('模型加载');
                     if (this.codexApplying || this.configTemplateApplying || this.openclawApplying) tasks.push('配置应用');
                     if (this.agentsSaving) tasks.push('AGENTS 保存');
-                    if (this.skillsLoading || this.skillsDeleting || this.skillsScanningImports || this.skillsImporting) tasks.push('Skills 管理');
+                    if (this.skillsLoading || this.skillsDeleting || this.skillsScanningImports || this.skillsImporting || this.skillsZipImporting || this.skillsExporting) tasks.push('Skills 管理');
                     if (this.proxySaving || this.proxyApplying || this.proxyStarting || this.proxyStopping) tasks.push('代理更新');
                     return tasks.length ? tasks.join(' / ') : '空闲';
                 },
@@ -846,9 +724,12 @@
                 },
 
                 switchConfigMode(mode) {
+                    const normalizedMode = typeof mode === 'string'
+                        ? mode.trim().toLowerCase()
+                        : '';
                     this.mainTab = 'config';
-                    this.configMode = mode;
-                    if (mode === 'claude') {
+                    this.configMode = CONFIG_MODE_SET.has(normalizedMode) ? normalizedMode : 'codex';
+                    if (this.configMode === 'claude') {
                         this.refreshClaudeModelContext();
                     }
                 },
@@ -1876,7 +1757,9 @@
                     if (this.modelsSource === 'remote' && this.models.length > 0 && !this.models.includes(this.currentModel)) {
                         this.currentModel = this.models[0];
                     }
-                    await this.applyCodexConfigDirect({ silent: true });
+                    if (getProviderConfigModeMeta(this.configMode)) {
+                        await this.applyCodexConfigDirect({ silent: true });
+                    }
                 },
 
                 async onModelChange() {
@@ -2080,191 +1963,8 @@
                     }
                 },
 
-                async openSkillsManager() {
-                    this.skillsSelectedNames = [];
-                    this.skillsKeyword = '';
-                    this.skillsStatusFilter = 'all';
-                    this.skillsImportList = [];
-                    this.skillsImportSelectedKeys = [];
-                    this.showSkillsModal = true;
-                    await this.refreshSkillsList({ silent: false });
-                },
-
-                closeSkillsModal() {
-                    this.showSkillsModal = false;
-                    this.skillsSelectedNames = [];
-                    this.skillsImportSelectedKeys = [];
-                },
-
-                async refreshSkillsList(options = {}) {
-                    this.skillsLoading = true;
-                    try {
-                        const res = await api('list-codex-skills');
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        this.skillsRootPath = res.root || '';
-                        this.skillsList = Array.isArray(res.items) ? res.items : [];
-                        const currentNames = new Set((Array.isArray(this.skillsList) ? this.skillsList : [])
-                            .map((item) => (item && typeof item.name === 'string' ? item.name.trim() : ''))
-                            .filter(Boolean));
-                        this.skillsSelectedNames = (Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : [])
-                            .filter((name) => currentNames.has(name));
-                        if (!options.silent) {
-                            const exists = res.exists !== false;
-                            if (!exists) {
-                                this.showMessage('skills 目录不存在，已按空列表显示', 'info');
-                            }
-                        }
-                    } catch (e) {
-                        this.showMessage('加载 skills 失败', 'error');
-                    } finally {
-                        this.skillsLoading = false;
-                    }
-                },
-
-                resetSkillsFilters() {
-                    this.skillsKeyword = '';
-                    this.skillsStatusFilter = 'all';
-                },
-
-                toggleAllSkillsSelection() {
-                    const selectable = this.skillsSelectableNames;
-                    if (this.skillsAllSelected) {
-                        const selectedSet = new Set(Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : []);
-                        selectable.forEach((name) => selectedSet.delete(name));
-                        this.skillsSelectedNames = Array.from(selectedSet);
-                        return;
-                    }
-                    const selectedSet = new Set(Array.isArray(this.skillsSelectedNames) ? this.skillsSelectedNames : []);
-                    selectable.forEach((name) => selectedSet.add(name));
-                    this.skillsSelectedNames = Array.from(selectedSet);
-                },
-
-                buildSkillImportKey(item) {
-                    const safe = item && typeof item === 'object' ? item : {};
-                    const sourceApp = typeof safe.sourceApp === 'string' ? safe.sourceApp.trim().toLowerCase() : '';
-                    const name = typeof safe.name === 'string' ? safe.name.trim() : '';
-                    if (!sourceApp || !name) return '';
-                    return `${sourceApp}:${name}`;
-                },
-
-                toggleAllSkillsImportSelection() {
-                    const selectable = this.skillsImportSelectableKeys;
-                    if (this.skillsImportAllSelected) {
-                        this.skillsImportSelectedKeys = [];
-                        return;
-                    }
-                    this.skillsImportSelectedKeys = [...selectable];
-                },
-
-                async scanImportableSkills() {
-                    if (this.skillsScanningImports || this.skillsImporting) return;
-                    this.skillsScanningImports = true;
-                    try {
-                        const res = await api('scan-unmanaged-codex-skills');
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        this.skillsImportList = Array.isArray(res.items) ? res.items : [];
-                        const availableKeys = new Set(this.skillsImportSelectableKeys);
-                        this.skillsImportSelectedKeys = (Array.isArray(this.skillsImportSelectedKeys) ? this.skillsImportSelectedKeys : [])
-                            .filter((key) => availableKeys.has(key));
-                        if (this.skillsImportList.length === 0) {
-                            this.showMessage('未扫描到可导入 skill', 'info');
-                        } else {
-                            this.showMessage(`扫描到 ${this.skillsImportList.length} 个可导入 skill`, 'success');
-                        }
-                    } catch (e) {
-                        this.showMessage('扫描可导入 skill 失败', 'error');
-                    } finally {
-                        this.skillsScanningImports = false;
-                    }
-                },
-
-                async importSelectedSkills() {
-                    if (this.skillsImporting) return;
-                    const selectedSet = new Set(Array.isArray(this.skillsImportSelectedKeys) ? this.skillsImportSelectedKeys : []);
-                    const selectedItems = (Array.isArray(this.skillsImportList) ? this.skillsImportList : [])
-                        .filter((item) => selectedSet.has(this.buildSkillImportKey(item)))
-                        .map((item) => ({
-                            name: item.name,
-                            sourceApp: item.sourceApp
-                        }));
-                    if (!selectedItems.length) {
-                        this.showMessage('请先选择要导入的 skill', 'error');
-                        return;
-                    }
-
-                    this.skillsImporting = true;
-                    try {
-                        const res = await api('import-codex-skills', { items: selectedItems });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        const importedCount = Array.isArray(res.imported) ? res.imported.length : 0;
-                        const failedCount = Array.isArray(res.failed) ? res.failed.length : 0;
-                        if (failedCount > 0 && importedCount > 0) {
-                            this.showMessage(`已导入 ${importedCount} 个，失败 ${failedCount} 个`, 'error');
-                        } else if (failedCount > 0) {
-                            const first = res.failed[0] && res.failed[0].error ? res.failed[0].error : '导入失败';
-                            this.showMessage(first, 'error');
-                        } else {
-                            this.showMessage(`已导入 ${importedCount} 个 skill`, 'success');
-                        }
-                        await this.refreshSkillsList({ silent: true });
-                    } catch (e) {
-                        this.showMessage('导入 skill 失败', 'error');
-                    } finally {
-                        this.skillsImporting = false;
-                        await this.scanImportableSkills();
-                    }
-                },
-
-                async deleteSelectedSkills() {
-                    if (this.skillsDeleting) return;
-                    const selected = Array.isArray(this.skillsSelectedNames)
-                        ? Array.from(new Set(this.skillsSelectedNames.map((item) => String(item || '').trim()).filter(Boolean)))
-                        : [];
-                    if (!selected.length) {
-                        this.showMessage('请先选择要删除的 skill', 'error');
-                        return;
-                    }
-                    const confirmed = window.confirm(`确认删除 ${selected.length} 个 skill 吗？此操作不可撤销。`);
-                    if (!confirmed) {
-                        return;
-                    }
-
-                    this.skillsDeleting = true;
-                    try {
-                        const res = await api('delete-codex-skills', { names: selected });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-
-                        const deletedCount = Array.isArray(res.deleted) ? res.deleted.length : 0;
-                        const failedList = Array.isArray(res.failed) ? res.failed : [];
-                        const failedCount = failedList.length;
-                        if (failedCount > 0 && deletedCount > 0) {
-                            this.showMessage(`已删除 ${deletedCount} 个，失败 ${failedCount} 个`, 'error');
-                        } else if (failedCount > 0) {
-                            const first = failedList[0] && failedList[0].error ? failedList[0].error : '删除失败';
-                            this.showMessage(first, 'error');
-                        } else {
-                            this.showMessage(`已删除 ${deletedCount} 个 skill`, 'success');
-                        }
-                        await this.refreshSkillsList({ silent: true });
-                    } catch (e) {
-                        this.showMessage('删除 skill 失败', 'error');
-                    } finally {
-                        this.skillsDeleting = false;
-                    }
-                },
-
+                ...createSkillsMethods({ api }),
+
                 async openOpenclawAgentsEditor() {
                     this.setAgentsModalContext('openclaw');
                     this.agentsLoading = true;

package/web-ui/index.html

@@ -59,7 +59,7 @@
                 :tabindex="mainTab === 'config' && configMode === 'codex' ? 0 : -1"
                 :aria-selected="mainTab === 'config' && configMode === 'codex'"
                 :aria-pressed="mainTab === 'config' && configMode === 'codex'"
-                aria-controls="panel-config-codex"
+                aria-controls="panel-config-provider"
                 :class="{ active: mainTab === 'config' && configMode === 'codex' }"
                 @click="switchConfigMode('codex')">Codex 配置</button>
             <button class="top-tab"
@@ -137,7 +137,7 @@
                     <button
                         role="tab"
                         id="side-tab-config-codex"
-                        aria-controls="panel-config-codex"
+                        aria-controls="panel-config-provider"
                         :tabindex="mainTab === 'config' && configMode === 'codex' ? 0 : -1"
                         :aria-selected="mainTab === 'config' && configMode === 'codex'"
                         :aria-pressed="mainTab === 'config' && configMode === 'codex'"
@@ -233,13 +233,13 @@
                 </div>
 
                 <div class="status-strip" v-if="!sessionStandalone && mainTab === 'config'">
-                    <template v-if="configMode === 'codex'">
+                    <template v-if="isProviderConfigMode">
                         <div class="status-chip">
-                            <span class="label">Codex 提供商</span>
+                            <span class="label">{{ activeProviderConfigChipLabel }}</span>
                             <span class="value">{{ currentProvider || '未选择' }}</span>
                         </div>
                         <div class="status-chip">
-                            <span class="label">Codex 模型</span>
+                            <span class="label">{{ activeProviderModelChipLabel }}</span>
                             <span class="value">{{ currentModel || '未选择' }}</span>
                         </div>
                     </template>
@@ -253,7 +253,7 @@
                             <span class="value">{{ currentClaudeModel || '未选择' }}</span>
                         </div>
                     </template>
-                    <template v-else>
+                    <template v-else-if="configMode === 'openclaw'">
                         <div class="status-chip">
                             <span class="label">OpenClaw 配置</span>
                             <span class="value">{{ currentOpenclawConfig || '未选择' }}</span>
@@ -263,6 +263,12 @@
                             <span class="value">{{ openclawWorkspaceFileName || '未选择' }}</span>
                         </div>
                     </template>
+                    <template v-else>
+                        <div class="status-chip">
+                            <span class="label">配置模式</span>
+                            <span class="value">未选择</span>
+                        </div>
+                    </template>
                 </div>
                 <div class="status-strip" v-else-if="!sessionStandalone && mainTab === 'sessions'">
                     <div class="status-chip">
@@ -291,13 +297,13 @@
 
                 <!-- 内容包裹器 - 稳定布局 -->
                 <div class="content-wrapper">
-                    <!-- Codex 配置模式 -->
+                    <!-- Provider 配置模式（Codex） -->
                     <div
-                        v-show="mainTab === 'config' && configMode === 'codex'"
+                        v-show="mainTab === 'config' && isProviderConfigMode"
                         class="mode-content mode-cards"
-                        id="panel-config-codex"
+                        id="panel-config-provider"
                         role="tabpanel"
-                        :aria-labelledby="'tab-config-codex'">
+                        :aria-labelledby="'tab-config-' + configMode">
                 <!-- 添加提供商按钮 -->
                 <button class="btn-add" @click="showAddModal = true" v-if="!loading && !initError">
                     <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
@@ -330,7 +336,7 @@
                         class="model-input"
                         v-model="currentModel"
                         @blur="onModelChange"
-                        placeholder="例如: gpt-5.3-codex"
+                        :placeholder="activeProviderModelPlaceholder"
                     >
                     <div class="config-template-hint" v-if="modelsSource === 'unlimited'">
                         当前提供商未提供模型列表，视为不限。模型可手动输入。
@@ -339,16 +345,20 @@
                         模型列表获取失败，请检查接口或手动输入。
                     </div>
                     <div class="config-template-hint" v-if="modelsSource === 'remote' && !modelsHasCurrent">
-                        当前模型不在接口列表中，请手动输入或在模板中调整。
+                        {{ isCodexConfigMode ? '当前模型不在接口列表中，请手动输入或在模板中调整。' : '当前模型不在接口列表中，请手动输入。' }}
                     </div>
-                    <div class="config-template-hint">
+                    <div class="config-template-hint" v-if="isCodexConfigMode">
                         Codex 配置需先改模板，再手动应用。
                     </div>
-                    <button class="btn-tool btn-template-editor" @click="openConfigTemplateEditor" :disabled="loading || !!initError">
+                    <div class="config-template-hint" v-else-if="activeProviderBridgeHint">
+                        {{ activeProviderBridgeHint }} 模板、认证和代理仅在 Codex 模式下可编辑。
+                    </div>
+                    <button class="btn-tool btn-template-editor" v-if="isCodexConfigMode" @click="openConfigTemplateEditor" :disabled="loading || !!initError">
                         打开 Config 模板编辑器
                     </button>
                 </div>
 
+                <template v-if="isCodexConfigMode">
                 <div class="selector-section">
                     <div class="selector-header">
                         <span class="selector-title">服务档位</span>
@@ -390,8 +400,8 @@
                     <div class="selector-header">
                         <span class="selector-title">Skills 管理</span>
                     </div>
-                    <div class="config-template-hint skills-hint-line">管理 <code>~/.codex/skills</code> 自定义 skills，弹窗提供统计概览、筛选检索、多选删除与跨应用导入。</div>
-                    <button class="btn-tool" @click="openSkillsManager" :disabled="loading || !!initError || skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting">
+                    <div class="config-template-hint skills-hint-line">管理 <code>~/.codex/skills</code> 自定义 skills，弹窗提供统计概览、筛选检索、多选删除、ZIP 导入与导出。</div>
+                    <button class="btn-tool" @click="openSkillsManager" :disabled="loading || !!initError || skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
                         {{ skillsLoading ? '加载中...' : '打开 Skills 管理' }}
                     </button>
                 </div>
@@ -502,6 +512,7 @@
                         <span v-if="proxyRuntime.upstreamProvider">（上游 <code>{{ proxyRuntime.upstreamProvider }}</code>）</span>
                     </div>
                 </div>
+                </template>
 
                 <div class="selector-section">
                     <div class="selector-header">
@@ -1672,10 +1683,10 @@
                 <div class="modal-header skills-modal-header">
                     <div>
                         <div class="modal-title">Skills 管理</div>
-                        <div class="skills-modal-subtitle">集中管理本地技能目录，支持检索筛选、多选删除与跨应用导入。</div>
+                        <div class="skills-modal-subtitle">集中管理本地技能目录，支持检索筛选、多选删除、跨应用导入、ZIP 导入与导出。</div>
                     </div>
                     <div class="modal-header-actions skills-modal-actions">
-                        <button class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting">
+                        <button class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
                             {{ skillsLoading ? '刷新中...' : '刷新' }}
                         </button>
                     </div>
@@ -1771,7 +1782,7 @@
                             <div class="skills-import-title">跨应用导入（对齐 cc-switch 能力）</div>
                             <div class="skills-panel-note">从其他应用扫描并导入未托管技能，支持多选批量导入。</div>
                         </div>
-                        <button class="btn-mini" @click="scanImportableSkills" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting">
+                        <button class="btn-mini" @click="scanImportableSkills" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
                             {{ skillsScanningImports ? '扫描中...' : '扫描可导入' }}
                         </button>
                     </div>
@@ -1806,14 +1817,26 @@
                 </div>
 
                 <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeSkillsModal" :disabled="skillsDeleting || skillsImporting || skillsScanningImports">关闭</button>
-                    <button class="btn btn-confirm" @click="importSelectedSkills" :disabled="skillsImporting || skillsImportSelectedCount === 0">
+                    <button class="btn btn-cancel" @click="closeSkillsModal" :disabled="skillsLoading || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting || skillsExporting">关闭</button>
+                    <button class="btn btn-cancel" @click="triggerSkillsZipImport" :disabled="skillsZipImporting || skillsDeleting || skillsImporting || skillsScanningImports || skillsExporting">
+                        {{ skillsZipImporting ? 'ZIP 导入中...' : '导入 ZIP' }}
+                    </button>
+                    <button class="btn btn-confirm" @click="exportSelectedSkills" :disabled="skillsExporting || skillsSelectedCount === 0 || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting">
+                        {{ skillsExporting ? '导出中...' : '导出选中' }}
+                    </button>
+                    <button class="btn btn-confirm" @click="importSelectedSkills" :disabled="skillsImporting || skillsImportSelectedCount === 0 || skillsZipImporting || skillsExporting || skillsDeleting">
                         {{ skillsImporting ? '导入中...' : '导入选中' }}
                     </button>
-                    <button class="btn btn-confirm btn-danger" @click="deleteSelectedSkills" :disabled="skillsDeleting || skillsSelectedCount === 0">
+                    <button class="btn btn-confirm btn-danger" @click="deleteSelectedSkills" :disabled="skillsDeleting || skillsSelectedCount === 0 || skillsImporting || skillsZipImporting || skillsExporting">
                         {{ skillsDeleting ? '删除中...' : '删除选中' }}
                     </button>
                 </div>
+                <input
+                    ref="skillsZipImportInput"
+                    type="file"
+                    accept=".zip,application/zip"
+                    style="display:none"
+                    @change="handleSkillsZipImportChange">
             </div>
         </div>