xb/vs-p
0
0
Fork 0
Code Issues Activity

修改了configview页面的命名逻辑

Browse Source
This commit is contained in:
xubing
2025-12-09 09:38:32 +08:00
parent 11c405f79a
commit 9374414de4
15 changed files with 789 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
out/panels/views/ConfigView.js
View File

@@ -16,11 +16,14 @@ class ConfigView extends BaseView_1.BaseView {
<tr>
<td>
<input type="checkbox" class="config-checkbox" data-id="${config.id}" data-type="config">
<span class="editable" onclick="editConfigName('${config.id}', '${config.name}')">🔧 ${config.name}</span>
<span class="editable"
onclick="editConfigName('${config.id}', '${config.name.replace(/'/g, '\\\'')}', '${config.fileName.replace(/'/g, '\\\'')}')">
🔧 ${config.name}
</span>
</td>
<td>local</td>
<td>
<span class="clickable" onclick="openConfigFileInVSCode('${config.id}')">📄 ${config.fileName}</span>
<span class="clickable config-file-name" data-filename="${config.fileName}" onclick="openConfigFileInVSCode('${config.id}')">📄 ${config.fileName}</span>
</td>
<td>
<button class="btn-delete" onclick="deleteConfig('${config.id}')">删除</button>
@@ -34,17 +37,20 @@ class ConfigView extends BaseView_1.BaseView {
if (folder.uploaded) {
category += '（已上传）';
}
// 确保文件名被正确提取和转义
const fileName = folder.localPath.split('/').pop() || '';
const escapedFolderName = folder.name.replace(/'/g, '\\\'');
return `
<tr>
<td>
<span class="editable clickable" onclick="renameModuleFolder('${folder.id}', '${folder.name}')">
<span class="editable clickable module-folder-name" data-folder-id="${folder.id}"
onclick="renameModuleFolder('${folder.id}', '${escapedFolderName}')">
${icon} ${folder.name}
</span>
</td>
<td class="category-${folder.type}">${category}</td>
<td>
<span class="clickable"
<span class="clickable module-disk-path" data-disk-name="${fileName}"
onclick="openTheModuleFolder('${folder.id}', '${folder.type}')">
📄 ${fileName}
</span>
@@ -259,11 +265,9 @@ class ConfigView extends BaseView_1.BaseView {
<button class="back-btn" onclick="goBackToContainers()">← 返回容器管理</button>
</div>
<!-- 配置文件管理部分 -->
<div class="config-section">
<h3 class="section-title">📋 配置文件管理</h3>
<!-- 操作按钮区域 -->
<div class="action-buttons">
<button class="btn-new" onclick="createNewConfig()">+ 新建配置</button>
<button class="btn-merge" id="mergeButton" onclick="mergeSelectedConfigs()" disabled>合并选中配置</button>
@@ -285,11 +289,9 @@ class ConfigView extends BaseView_1.BaseView {
</table>
</div>
<!-- 模块文件夹管理部分 -->
<div class="config-section">
<h3 class="section-title">📚 模块云仓库</h3>
<!-- 仓库选择区域 -->
<div class="url-input-section">
<h4>🔗 获取仓库</h4>
<div style="display: flex; gap: 10px; margin-top: 10px; align-items: center;">
@@ -311,41 +313,229 @@ class ConfigView extends BaseView_1.BaseView {
let branchTreeData = [];
let selectedConfigs = new Set();
// 只负责"改名"的函数
function renameModuleFolder(folderId, oldName) {
showPromptDialog(
'重命名模块文件夹',
'请输入新的名称：',
oldName || '',
function(newName) {
if (newName && newName.trim() && newName !== oldName) {
vscode.postMessage({
type: 'renameModuleFolder',
folderId: folderId,
newName: newName.trim()
});
}
// [新增] 配置文件重命名弹窗
function showConfigRenameDialog(configId, currentName, currentFileName) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'configRenameModal';
overlay.innerHTML = \`
<div class="modal-dialog" style="width: 450px;">
<div class="modal-title">重命名配置文件</div>
<div class="merge-dialog-content">
<div class="merge-input-section">
<label class="merge-input-label">配置显示名称</label>
<input type="text" id="configDisplayNameInput" class="merge-input-field"
placeholder="在配置栏显示的名称" value="\${currentName}">
<div class="merge-input-help">在左侧配置栏显示的名称</div>
</div>
<div class="merge-input-section">
<label class="merge-input-label">文件名称 (将同步修改磁盘文件)</label>
<input type="text" id="configFileNameInput" class="merge-input-field"
placeholder="磁盘上的实际文件名" value="\${currentFileName}">
<div class="merge-input-help">请使用英文、数字、中文、-、_，不要使用空格和/</div>
</div>
<div id="fileNameValidationMessage" style="color: var(--vscode-inputValidation-errorForeground); font-size: 12px; margin-top: 5px;"></div>
</div>
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closeConfigRenameDialog()">取消</button>
<button class="modal-btn modal-btn-primary" id="configRenameConfirmBtn">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
const displayNameInput = document.getElementById('configDisplayNameInput');
const fileNameInput = document.getElementById('configFileNameInput');
const confirmBtn = document.getElementById('configRenameConfirmBtn');
const validationMessage = document.getElementById('fileNameValidationMessage');
function validateFileName(input) {
// 允许中文、字母、数字、-、_
if (!input.trim()) {
validationMessage.textContent = '文件名不能为空';
confirmBtn.disabled = true;
return false;
}
);
if (input.includes('/') || input.includes(' ')) {
validationMessage.textContent = '文件名不能包含空格和/，请使用-或_代替';
confirmBtn.disabled = true;
return false;
}
validationMessage.textContent = '';
confirmBtn.disabled = false;
return true;
}
if (fileNameInput) {
fileNameInput.addEventListener('input', (e) => {
validateFileName(e.target.value);
});
validateFileName(fileNameInput.value);
}
confirmBtn.addEventListener('click', function() {
const newName = displayNameInput.value.trim();
const newFileName = fileNameInput.value.trim();
if (!validateFileName(newFileName)) {
alert(validationMessage.textContent || '请修复文件名错误');
return;
}
if (newName && newFileName && (newName !== currentName || newFileName !== currentFileName)) {
vscode.postMessage({
type: 'updateConfigName',
configId: configId,
name: newName,
fileName: newFileName
});
}
closeConfigRenameDialog();
});
setTimeout(() => {
if (displayNameInput) {
displayNameInput.focus();
displayNameInput.select();
}
}, 100);
}
function closeConfigRenameDialog() {
const modal = document.getElementById('configRenameModal');
if (modal) {
modal.remove();
}
}
// [修改] editConfigName：使用新的双输入弹窗
function editConfigName(configId, currentName, currentFileName) {
// currentFileName 现在已从模板传入
showConfigRenameDialog(configId, currentName, currentFileName);
}
// [新增] 模块文件夹重命名双输入弹窗
function showModuleFolderRenameDialog(folderId, currentName, currentFolderName) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'moduleRenameModal';
overlay.innerHTML = \`
<div class="modal-dialog" style="width: 450px;">
<div class="modal-title">重命名模块文件夹</div>
<div class="merge-dialog-content">
<div class="merge-input-section">
<label class="merge-input-label">显示名称</label>
<input type="text" id="moduleDisplayNameInput" class="merge-input-field"
placeholder="在配置栏显示的名称" value="\${currentName}">
<div class="merge-input-help">在左侧配置栏显示的名称</div>
</div>
<div class="merge-input-section">
<label class="merge-input-label">磁盘文件夹名称 (将同步修改磁盘目录)</label>
<input type="text" id="moduleFolderNameInput" class="merge-input-field"
placeholder="磁盘上的实际文件夹名" value="\${currentFolderName}">
<div class="merge-input-help">请使用英文、数字、中文、-、_，不要使用空格和/</div>
</div>
<div id="moduleFolderNameValidationMessage" style="color: var(--vscode-inputValidation-errorForeground); font-size: 12px; margin-top: 5px;"></div>
</div>
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closeModuleFolderRenameDialog()">取消</button>
<button class="modal-btn modal-btn-primary" id="moduleRenameConfirmBtn">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
const displayNameInput = document.getElementById('moduleDisplayNameInput');
const folderNameInput = document.getElementById('moduleFolderNameInput');
const confirmBtn = document.getElementById('moduleRenameConfirmBtn');
const validationMessage = document.getElementById('moduleFolderNameValidationMessage');
function validateFolderName(input) {
// 允许中文、字母、数字、-、_
if (!input.trim()) {
validationMessage.textContent = '文件夹名不能为空';
confirmBtn.disabled = true;
return false;
}
if (input.includes('/') || input.includes(' ')) {
validationMessage.textContent = '文件夹名不能包含空格和/，请使用-或_代替';
confirmBtn.disabled = true;
return false;
}
validationMessage.textContent = '';
confirmBtn.disabled = false;
return true;
}
if (folderNameInput) {
folderNameInput.addEventListener('input', (e) => {
validateFolderName(e.target.value);
});
validateFolderName(folderNameInput.value);
}
confirmBtn.addEventListener('click', function() {
const newName = displayNameInput.value.trim();
const newFolderName = folderNameInput.value.trim();
if (!validateFolderName(newFolderName)) {
alert(validationMessage.textContent || '请修复文件夹名错误');
return;
}
if (newName && newFolderName && (newName !== currentName || newFolderName !== currentFolderName)) {
vscode.postMessage({
type: 'renameModuleFolder',
folderId: folderId,
newName: newName,
newFolderName: newFolderName
});
}
closeModuleFolderRenameDialog();
});
setTimeout(() => {
if (displayNameInput) {
displayNameInput.focus();
displayNameInput.select();
}
}, 100);
}
function closeModuleFolderRenameDialog() {
const modal = document.getElementById('moduleRenameModal');
if (modal) {
modal.remove();
}
}
// [修改] renameModuleFolder：获取磁盘文件夹名并使用双输入弹窗
function renameModuleFolder(folderId, currentName) {
// 通过 data-folder-id 找到模块文件夹的行
// 修复：避免在 JS 字符串中使用内嵌模板字符串，改用拼接以解决编译问题
const editableSpan = document.querySelector('.module-folder-name[data-folder-id="' + folderId + '"]');
if (!editableSpan) return;
const folderRow = editableSpan.closest('tr');
// 从第三列的 data-disk-name 属性中获取当前的磁盘文件夹名称
const fileNameSpan = folderRow.cells[2].querySelector('.module-disk-path');
const currentFolderName = fileNameSpan.getAttribute('data-disk-name');
showModuleFolderRenameDialog(folderId, currentName, currentFolderName);
}
// 配置管理功能
function editConfigName(configId, currentName) {
showPromptDialog(
'修改配置名称',
'请输入新的配置名称：',
currentName,
function(newName) {
if (newName && newName !== currentName) {
vscode.postMessage({
type: 'updateConfigName',
configId: configId,
name: newName
});
}
}
);
}
// 原始的 editConfigName 已被修改为接受三个参数
// 在 VSCode 中打开配置文件
function openConfigFileInVSCode(configId) {