@ives_xxz/packages 1.0.0

package/FWExcelGenerator/panel/index.js

@@ -0,0 +1,648 @@
+
+Editor.Panel.extend({
+  style: `
+    #main {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding: 20px;
+      background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
+      color: #e0e0e0;
+      overflow: auto;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      position: relative;
+    }
+    
+    .header {
+      text-align: center;
+      margin-bottom: 30px;
+    }
+    
+    .header h1 {
+      font-size: 24px;
+      color: #64b5f6;
+      margin-bottom: 10px;
+    }
+    
+    .header p {
+      font-size: 14px;
+      color: #90a4ae;
+    }
+    
+    .upload-area {
+      border: 2px dashed #546e7a;
+      border-radius: 10px;
+      padding: 30px;
+      text-align: center;
+      background-color: rgba(41, 50, 60, 0.5);
+      transition: all 0.3s ease;
+      margin-bottom: 25px;
+      cursor: pointer;
+    }
+    
+    .upload-area:hover, .upload-area.drag-over {
+      border-color: #64b5f6;
+      background-color: rgba(41, 50, 60, 0.7);
+    }
+    
+    .upload-icon {
+      font-size: 48px;
+      margin-bottom: 15px;
+      color: #64b5f6;
+    }
+    
+    .upload-text {
+      margin: 10px 0;
+      color: #b0bec5;
+      font-size: 16px;
+    }
+    
+    button {
+      background-color: #1976d2;
+      color: white;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 16px;
+      transition: all 0.3s;
+      margin-top: 10px;
+      font-weight: 500;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    }
+    
+    button:hover {
+      background-color: #2196f3;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    }
+    
+    button:active {
+      transform: translateY(0);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+    
+    .info-box {
+      background-color: #37474f;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 25px;
+      border-left: 4px solid #64b5f6;
+    }
+    
+    .info-box h3 {
+      margin-bottom: 15px;
+      color: #bb86fc;
+      font-size: 18px;
+    }
+    
+    .info-box ol {
+      padding-left: 25px;
+    }
+    
+    .info-box li {
+      margin-bottom: 10px;
+      line-height: 1.5;
+      font-size: 14px;
+    }
+    
+    .result-area {
+      background-color: rgba(27, 94, 32, 0.8);
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 20px;
+      display: none;
+    }
+    
+    .success-message {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+    
+    .success-icon {
+      font-size: 28px;
+      margin-right: 15px;
+      color: #a5d6a7;
+    }
+    
+    .success-text {
+      font-size: 20px;
+      font-weight: bold;
+    }
+    
+    .files-list h3 {
+      margin-bottom: 15px;
+      color: #bb86fc;
+      font-size: 18px;
+    }
+    
+    .files-list ul {
+      list-style-type: none;
+      padding-left: 0;
+    }
+    
+    .files-list li {
+      margin-bottom: 10px;
+      color: #e0e0e0;
+      padding: 10px;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: monospace;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+    }
+    
+    .files-list li:before {
+      content: '📄';
+      margin-right: 10px;
+      font-size: 18px;
+    }
+    
+    .preview-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+      margin-top: 20px;
+    }
+    
+    .preview-box {
+      flex: 1;
+      min-width: 250px;
+      background-color: #263238;
+      border-radius: 8px;
+      padding: 15px;
+      overflow: auto;
+      max-height: 250px;
+      box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
+    }
+    
+    .preview-box h4 {
+      color: #bb86fc;
+      margin-bottom: 12px;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+    }
+    
+    .preview-box h4:before {
+      content: '🌐';
+      margin-right: 8px;
+      font-size: 18px;
+    }
+    
+    .preview-box pre {
+      white-space: pre-wrap;
+      font-family: 'Consolas', monospace;
+      font-size: 13px;
+      color: #e0e0e0;
+      line-height: 1.5;
+      margin: 0;
+    }
+    
+    .error-area {
+      display: flex;
+      align-items: center;
+      background-color: rgba(183, 28, 28, 0.8);
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 20px;
+      display: none;
+    }
+    
+    .error-icon {
+      font-size: 28px;
+      margin-right: 15px;
+    }
+    
+    .error-text {
+      font-size: 18px;
+      font-weight: 500;
+    }
+    
+    .footer {
+      text-align: center;
+      margin-top: auto;
+      padding-top: 20px;
+      color: #90a4ae;
+      font-size: 13px;
+    }
+    
+    .export-complete {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: linear-gradient(135deg, #2e7d32, #1b5e20);
+      border-radius: 15px;
+      padding: 50px 40px;
+      text-align: center;
+      z-index: 1000;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+      min-width: 400px;
+      max-width: 90%;
+      display: none;
+    }
+    
+    .complete-icon {
+      font-size: 80px;
+      margin-bottom: 25px;
+      color: #4caf50;
+      animation: pulse 1.5s infinite;
+    }
+    
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    }
+    
+    .complete-text {
+      font-size: 32px;
+      font-weight: bold;
+      margin-bottom: 30px;
+      color: #ffffff;
+      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
+    }
+    
+    .path-info {
+      background-color: rgba(255,255,255,0.1);
+      padding: 15px;
+      border-radius: 8px;
+      margin: 25px 0;
+      font-size: 16px;
+      text-align: left;
+    }
+    
+    .path-info div {
+      margin: 10px 0;
+      display: flex;
+    }
+    
+    .path-label {
+      font-weight: bold;
+      min-width: 120px;
+      color: #bb86fc;
+    }
+    
+    .path-value {
+      flex: 1;
+      font-family: monospace;
+      word-break: break-all;
+    }
+    
+    .languages-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin: 15px 0;
+    }
+    
+    .language-tag {
+      background-color: #64b5f6;
+      color: #1e1e1e;
+      padding: 5px 10px;
+      border-radius: 20px;
+      font-size: 14px;
+      font-weight: bold;
+    }
+    
+    .progress-container {
+      width: 100%;
+      background-color: rgba(255,255,255,0.1);
+      border-radius: 8px;
+      margin: 20px 0;
+      overflow: hidden;
+      display: none;
+    }
+    
+    .progress-bar {
+      height: 10px;
+      background: linear-gradient(90deg, #2196f3, #64b5f6);
+      border-radius: 8px;
+      width: 0%;
+      transition: width 0.3s ease;
+    }
+    
+    .status-text {
+      text-align: center;
+      font-size: 16px;
+      margin-top: 10px;
+      color: #90a4ae;
+    }
+    
+    .overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.7);
+      z-index: 999;
+      display: none;
+    }
+  `,
+
+  template: `
+    <div id="main">
+      <div class="overlay" id="overlay"></div>
+      
+      <div class="export-complete" id="export-complete">
+        <div class="complete-icon">✅</div>
+        <div class="complete-text">导出成功！</div>
+        
+        <div class="path-info">
+          <div>
+            <span class="path-label">工作表名称:</span>
+            <span class="path-value" id="sheet-name-display"></span>
+          </div>
+          <div>
+            <span class="path-label">输出路径:</span>
+            <span class="path-value" id="output-path-display">bundle/</span>
+          </div>
+          <div>
+            <span class="path-label">支持语言:</span>
+            <div class="languages-list" id="languages-list"></div>
+          </div>
+        </div>
+        
+        <button id="close-btn">关闭</button>
+      </div>
+      
+      <div class="header">
+        <h1>Excel转多语言工具</h1>
+      </div>
+      
+      <div class="upload-area" id="drop-area">
+        <div class="upload-icon">📤</div>
+        <div class="upload-text">拖放Excel文件到此处</div>
+        <div class="upload-text">或</div>
+        <button id="select-btn">选择Excel文件</button>
+        <input type="file" id="file-input" accept=".xlsx" style="display: none;">
+      </div>
+      
+      <div class="progress-container" id="progress-container">
+        <div class="progress-bar" id="progress-bar"></div>
+        <div class="status-text" id="status-text">正在处理...</div>
+      </div>
+      
+      <div class="info-box">
+        <h3>使用说明：</h3>
+        <ol>
+          <li>Excel文件第一行必须是列头,第一列为id,第二列为key,第三列为描述,其他列为语言代码</li>
+          <li>第三行开始为实际数据</li>
+          <li>转换后将在bundle目录下生成语言文件</li>
+          <li>生成路径:根据工作表名称放在assets/bundle/xxx/script/language/目录下,如果文件夹为子目录则需要提供完整路径
+          根据_进行分割,如common子包放在assets/bundle/common/common,则工作表命名为common_common,如hall子包在
+          assets/bundle/hall,则工作表命名为hall即可
+          <li>支持任意数量的语言列</li>
+          <li>支持文本中的特殊字符和换行</li>
+        </ol>
+      </div>
+      
+      <div class="result-area" id="result-area">
+        <div class="success-message">
+          <div class="success-icon">✓</div>
+          <div class="success-text" id="success-message">转换成功！</div>
+        </div>
+        
+        <div class="files-list">
+          <h3>生成文件：</h3>
+          <ul id="file-list"></ul>
+        </div>
+        
+        <h3 style="margin-top: 20px; color: #bb86fc;">语言文件预览：</h3>
+        <div class="preview-container" id="preview-container"></div>
+      </div>
+      
+      <div class="error-area" id="error-area">
+        <div class="error-icon">⚠️</div>
+        <div class="error-text" id="error-message"></div>
+      </div>
+    </div>
+  `,
+
+  $: {
+    main: '#main',
+    dropArea: '#drop-area',
+    fileInput: '#file-input',
+    selectBtn: '#select-btn',
+    resultArea: '#result-area',
+    errorArea: '#error-area',
+    fileList: '#file-list',
+    previewContainer: '#preview-container',
+    successMessage: '#success-message',
+    errorMessage: '#error-message',
+    progressContainer: '#progress-container',
+    progressBar: '#progress-bar',
+    statusText: '#status-text',
+    exportComplete: '#export-complete',
+    sheetNameDisplay: '#sheet-name-display',
+    outputPathDisplay: '#output-path-display',
+    languagesList: '#languages-list',
+    closeBtn: '#close-btn',
+    overlay: '#overlay'
+  },
+
+  messages: {
+    'excel-to-lang:conversion-result'(event, result) {
+      this.handleConversionResult(result);
+    }
+  },
+
+  ready() {
+    // 初始化状态
+    this.$resultArea.style.display = 'none';
+    this.$errorArea.style.display = 'none';
+    this.$exportComplete.style.display = 'none';
+    this.$progressContainer.style.display = 'none';
+    this.$overlay.style.display = 'none';
+    
+    // 初始化拖放区域
+    this.initDropArea();
+    
+    // 绑定文件选择按钮
+    this.$selectBtn.addEventListener('click', () => {
+      this.$fileInput.click();
+    });
+    
+    // 监听文件选择
+    this.$fileInput.addEventListener('change', (e) => {
+      if (e.target.files.length > 0) {
+        this.handleFile(e.target.files[0]);
+      }
+    });
+    
+
+    
+    // 绑定关闭按钮
+    this.$closeBtn.addEventListener('click', () => {
+      this.$exportComplete.style.display = 'none';
+      this.$overlay.style.display = 'none';
+    });
+
+
+  },
+  
+  initDropArea() {
+    const dropArea = this.$dropArea;
+    
+    // 防止默认拖放行为
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+      dropArea.addEventListener(eventName, this.preventDefaults, false);
+    });
+    
+    // 高亮拖放区域
+    ['dragenter', 'dragover'].forEach(eventName => {
+      dropArea.addEventListener(eventName, () => {
+        dropArea.classList.add('drag-over');
+      }, false);
+    });
+    
+    ['dragleave', 'drop'].forEach(eventName => {
+      dropArea.addEventListener(eventName, () => {
+        dropArea.classList.remove('drag-over');
+      }, false);
+    });
+    
+    // 处理文件拖放
+    dropArea.addEventListener('drop', (e) => {
+      const dt = e.dataTransfer;
+      if (dt.files.length > 0) {
+        this.handleFile(dt.files[0]);
+      }
+    }, false);
+  },
+  
+  preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  },
+  
+  handleFile(file) {
+    if (!file.name.endsWith('.xlsx')) {
+      this.showError('请选择.xlsx格式的Excel文件');
+      return;
+    }
+    
+    // 显示进度条
+    this.$progressContainer.style.display = 'block';
+    this.$dropArea.style.display = 'none';
+    this.$progressBar.style.width = '30%';
+    this.$statusText.textContent = '正在读取Excel文件...';
+    
+    // 发送转换请求到主进程
+    if (Editor && Editor.Ipc) Editor.Ipc.sendToMain('excel-to-lang:convert-excel', file.path);
+    
+  },
+  
+
+  
+  handleConversionResult(result) {
+    // 隐藏进度条
+    this.$progressContainer.style.display = 'none';
+    
+    if (result.success) {
+      // 显示完成状态
+      this.$exportComplete.style.display = 'block';
+      this.$overlay.style.display = 'block';
+      
+      // 显示输出路径
+      this.$outputPathDisplay.textContent = `bundle/${result.sheetName}/script/language`;
+      
+      // // 显示支持的语言列表
+      // this.$languagesList.innerHTML = '';
+      // result.languages.forEach(lang => {
+      //   const tag = document.createElement('div');
+      //   tag.className = 'language-tag';
+      //   tag.textContent = lang;
+      //   this.$languagesList.appendChild(tag);
+      // });
+      
+      // 显示结果区域
+      this.$resultArea.style.display = 'block';
+      this.$errorArea.style.display = 'none';
+      
+      // 更新成功消息
+      this.$successMessage.textContent = result.message;
+      
+      // // 显示生成的文件列表
+      // this.$fileList.innerHTML = '';
+      // Object.values(result.files).flat().forEach(filePath => {
+      //   const li = document.createElement('li');
+      //   li.textContent = path.relative(Editor.Project.path, filePath);
+      //   this.$fileList.appendChild(li);
+      // });
+      
+      // 清空预览容器
+      this.$previewContainer.innerHTML = '';
+      
+      // // 为每种语言创建预览框
+      // result.languages.forEach(lang => {
+      //   const previewBox = document.createElement('div');
+      //   previewBox.className = 'preview-box';
+        
+      //   const langHeader = document.createElement('h4');
+      //   langHeader.textContent = `${lang}.ts`;
+        
+      //   const pre = document.createElement('pre');
+      //   pre.textContent = `export default ${this.formatPreview(result.langData[lang])};`;
+        
+      //   previewBox.appendChild(langHeader);
+      //   previewBox.appendChild(pre);
+        
+      //   this.$previewContainer.appendChild(previewBox);
+      // });
+      // 重置上传区域
+      this.resetUploadArea();
+    } else {
+      // 显示错误信息
+      this.showError(result.message);
+    }
+  },
+  
+  formatPreview(data) {
+    const entries = Object.entries(data);
+    if (entries.length === 0) return '{}';
+    
+    const items = entries.map(([key, value]) => 
+      `  "${key}": "${value}"`
+    ).join(',\n');
+    
+    return `{\n${items}\n}`;
+  },
+  
+  showError(message) {
+    this.$errorArea.style.display = 'flex';
+    this.$resultArea.style.display = 'none';
+    this.$exportComplete.style.display = 'none';
+    this.$overlay.style.display = 'none';
+    this.$errorMessage.textContent = message;
+    
+    // 重置上传区域
+    this.resetUploadArea();
+  },
+  
+  resetUploadArea() {
+    this.$dropArea.style.display = 'block';
+    this.$dropArea.innerHTML = `
+      <div class="upload-icon">📤</div>
+      <div class="upload-text">拖放Excel文件到此处</div>
+      <div class="upload-text">或</div>
+      <button id="select-btn">选择Excel文件</button>
+    `;
+    
+    // 重新绑定按钮事件
+    this.$selectBtn = this.$dropArea.querySelector('#select-btn');
+    this.$selectBtn.addEventListener('click', () => {
+      this.$fileInput.click();
+    });
+    
+    // 重新初始化拖放事件
+    this.initDropArea();
+  }
+});