@yesdgq/claude-buddy 1.1.1005 → 1.1.1007

package/assets/config.js

@@ -14,6 +14,11 @@ createApp({
       configPath: '',
       showHelp: false,
       currentCli: 'Claude',
+      currentLang: 'en',
+      languages: [
+        { code: 'en', label: 'English' },
+        { code: 'zh', label: '中文' }
+      ],
       cliList: [
         { name: 'Claude', label: 'Claude', icon: 'images/claude.png' },
         { name: 'Codex', label: 'Codex', icon: 'images/gpt.png' },
@@ -21,10 +26,168 @@ createApp({
       ],
       // 拖拽相关状态
       draggingIndex: null,
-      dragOverIndex: null
+      dragOverIndex: null,
+      // 确认对话框
+      confirmDialog: {
+        show: false,
+        message: '',
+        onConfirm: null,
+        onCancel: null
+      },
+      // 翻译数据
+      translations: {
+        en: {
+          helpTitle: 'User Guide',
+          helpDescription: 'Claude Buddy is an easy-to-use CLI tool that helps you quickly configure API keys, model mappings, and other settings for CLI tools like Claude Code, Codex, and Gemini through a visual interface. It greatly simplifies your usage of these CLI tools.',
+          feature1Title: 'API Key Management',
+          feature1Desc: 'Easily store, switch, and manage multiple API keys',
+          feature2Title: 'Model Mapping',
+          feature2Desc: 'Conveniently customize and manage model configurations',
+          feature3Title: 'One-time Installation, Permanent Use',
+          feature3Desc: 'Local deployment with long-term usage after installation',
+          feature4Title: 'Quick Configuration',
+          feature4Desc: 'Visual interface, complete settings in seconds',
+          feature5Title: 'Developer Friendly',
+          feature5Desc: 'Designed for developers focused on coding',
+          commandUsageTitle: 'Command Usage',
+          command1: 'Open the configuration page to set your API URL and access token',
+          command2: 'Launch Claude Code',
+          command3: 'View conversation history',
+          command4: 'Resume the last conversation',
+          command5: 'View Claude-Buddy version',
+          command6: 'View Claude version',
+          restartNotice: 'After switching or updating configurations, you need to restart Claude Code (CLI tool) for changes to take effect.',
+          loading: 'Loading...',
+          currentUse: 'Current',
+          activate: 'Activate',
+          activateThisConfig: 'Activate this configuration',
+          emptyConfigCannotActivate: 'Empty configuration cannot be activated',
+          deleteThisConfig: 'Delete this configuration',
+          emptyConfigCannotDelete: 'Empty configuration cannot be deleted',
+          modelManagement: 'Model Management',
+          collapse: 'Collapse',
+          expand: 'Expand',
+          modelNamePlaceholder: 'Model name',
+          modelValuePlaceholder: 'Model value',
+          deleteThisModel: 'Delete this model',
+          addModel: 'Add Model',
+          envVariables: 'Environment Variables',
+          variableNamePlaceholder: 'Variable name',
+          variableValuePlaceholder: 'Variable value',
+          deleteThisEnvVar: 'Delete this environment variable',
+          addEnvVariable: 'Add Environment Variable',
+          addNewConfig: 'Add New Configuration',
+          saveConfig: 'Save Configuration',
+          saving: 'Saving...',
+          reload: 'Reload',
+          confirmDeleteWithName: 'Are you sure you want to delete configuration {name}?',
+          confirmDeleteWithIndex: 'Are you sure you want to delete configuration #{index}?',
+          emptyConfigCannotDeleteToast: 'Empty configuration cannot be deleted',
+          configLoadSuccess: 'Configuration loaded successfully',
+          configLoadFailed: 'Failed to load configuration',
+          pleaseFillConfig: 'Please fill at least one complete configuration',
+          configSaveSuccess: 'Configuration saved successfully!',
+          configSaveFailed: 'Failed to save configuration',
+          configDeleted: 'Configuration deleted',
+          deleteFailed: 'Failed to delete',
+          configActivated: 'Configuration activated',
+          notAvailableYet: 'Not available yet, stay tuned',
+          saveFailed: 'Save failed',
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        },
+        zh: {
+          helpTitle: '使用说明',
+          helpDescription: 'Claude Buddy 是一款简单易用的 CLI 工具，通过可视化方式快速配置 Claude Code、Codex 和 Gemini 等CLI的API密钥、模型映射等信息，可极大的方便和简化您对Claude Code等CLI的使用。',
+          feature1Title: 'API 密钥管理',
+          feature1Desc: '轻松存储、切换和管理多组API 密钥',
+          feature2Title: '模型映射',
+          feature2Desc: '便捷地自定义和管理模型配置',
+          feature3Title: '一次安装永久使用',
+          feature3Desc: '本地部署，安装后可长久使用',
+          feature4Title: '快速配置',
+          feature4Desc: '可视化界面，几秒钟即可完成设置',
+          feature5Title: '开发者友好',
+          feature5Desc: '专为专注于编码的开发者打造',
+          commandUsageTitle: '命令使用',
+          command1: '打开配置页面，配置您的 API 地址和访问令牌(TOKEN)',
+          command2: '启动claude code',
+          command3: '查看历史会话',
+          command4: '继续上次会话',
+          command5: '查看Claude-Buddy版本',
+          command6: '查看Claude版本',
+          restartNotice: '切换或更新配置后，需重启 Claude Code（CLI工具）方可生效。',
+          loading: '加载中...',
+          currentUse: '当前使用',
+          activate: '启用',
+          activateThisConfig: '启用此配置',
+          emptyConfigCannotActivate: '空配置不能启用',
+          deleteThisConfig: '删除此配置',
+          emptyConfigCannotDelete: '空配置不能删除',
+          modelManagement: '模型管理',
+          collapse: '收起',
+          expand: '展开',
+          modelNamePlaceholder: '模型名称',
+          modelValuePlaceholder: '模型值',
+          deleteThisModel: '删除此模型',
+          addModel: '添加模型',
+          envVariables: '环境变量',
+          variableNamePlaceholder: '变量名',
+          variableValuePlaceholder: '变量值',
+          deleteThisEnvVar: '删除此环境变量',
+          addEnvVariable: '添加环境变量',
+          addNewConfig: '添加新配置',
+          saveConfig: '保存配置',
+          saving: '保存中...',
+          reload: '重新加载',
+          confirmDeleteWithName: '确定要删除配置 {name} 吗？',
+          confirmDeleteWithIndex: '确定要删除配置 #{index} 吗？',
+          emptyConfigCannotDeleteToast: '空配置项不能删除',
+          configLoadSuccess: '配置加载成功',
+          configLoadFailed: '加载配置失败',
+          pleaseFillConfig: '请至少填写一个完整的配置',
+          configSaveSuccess: '配置保存成功!',
+          configSaveFailed: '保存配置失败',
+          configDeleted: '配置已删除',
+          deleteFailed: '删除失败',
+          configActivated: '配置启用成功',
+          notAvailableYet: '暂未开放，敬请期待',
+          saveFailed: '保存失败',
+          cancel: '取消',
+          confirm: '确认'
+        }
+      }
     };
   },
+  computed: {
+    t() {
+      return this.translations[this.currentLang];
+    }
+  },
   methods: {
+    // 显示确认对话框
+    showConfirmDialog(message, onConfirm, onCancel) {
+      this.confirmDialog = {
+        show: true,
+        message,
+        onConfirm: () => {
+          this.confirmDialog.show = false;
+          if (onConfirm) onConfirm();
+        },
+        onCancel: () => {
+          this.confirmDialog.show = false;
+          if (onCancel) onCancel();
+        }
+      };
+    },
+
+    // 切换语言
+    setLanguage(langCode) {
+      this.currentLang = langCode;
+      // 保存语言设置到 localStorage
+      localStorage.setItem('ccby-lang', langCode);
+    },
+
     // 重置服务器倒计时
     async resetTimer() {
       try {
@@ -139,11 +302,11 @@ createApp({
         // 最后更新 config
         this.config = config;
 
-        this.showToast('配置加载成功');
+        this.showToast(this.t.configLoadSuccess);
         // 重置服务器倒计时
         this.resetTimer();
       } catch (err) {
-        this.showToast('加载配置失败: ' + (err.response?.data?.error || err.message), 'error');
+        this.showToast(this.t.configLoadFailed + ': ' + (err.response?.data?.error || err.message), 'error');
       } finally {
         this.loading = false;
       }
@@ -162,7 +325,7 @@ createApp({
 
         // 如果过滤后没有配置项,确保至少有一个空配置项在前端显示
         if (configToSave.AUTH.length === 0 && this.config.AUTH.length > 0) {
-          this.showToast('请至少填写一个完整的配置', 'error');
+          this.showToast(this.t.pleaseFillConfig, 'error');
           return;
         }
 
@@ -170,11 +333,11 @@ createApp({
           config: configToSave,
           cliType: this.currentCli.toLowerCase()
         });
-        this.showToast('配置保存成功!');
+        this.showToast(this.t.configSaveSuccess);
         // 重置服务器倒计时
         this.resetTimer();
       } catch (err) {
-        this.showToast('保存配置失败: ' + (err.response?.data?.error || err.message), 'error');
+        this.showToast(this.t.configSaveFailed + ': ' + (err.response?.data?.error || err.message), 'error');
       } finally {
         this.saving = false;
       }
@@ -198,16 +361,17 @@ createApp({
     async deleteAuth(index) {
       // 检查是否是唯一的空配置项
       if (this.config.AUTH.length === 1 && this.isEmptyConfig(this.config.AUTH[index])) {
-        this.showToast('空配置项不能删除', 'error');
+        this.showToast(this.t.emptyConfigCannotDeleteToast, 'error');
         return;
       }
 
       const authName = this.config.AUTH[index].name;
       const confirmMsg = authName
-        ? `确定要删除配置 ${authName} 吗？`
-        : `确定要删除配置 #${index + 1} 吗？`;
+        ? this.t.confirmDeleteWithName.replace('{name}', authName)
+        : this.t.confirmDeleteWithIndex.replace('{index}', index + 1);
 
-      if (confirm(confirmMsg)) {
+      // 使用自定义确认对话框
+      this.showConfirmDialog(confirmMsg, async () => {
         // 保存要删除的数据,以防保存失败时恢复
         const deletedAuth = this.config.AUTH[index];
         const deletedTokenState = this.showTokens[index];
@@ -258,11 +422,11 @@ createApp({
             config: configToSave,
             cliType: this.currentCli.toLowerCase()
           });
-          this.showToast('配置已删除');
+          this.showToast(this.t.configDeleted);
           // 重置服务器倒计时
           this.resetTimer();
         } catch (err) {
-          this.showToast('删除失败: ' + (err.response?.data?.error || err.message), 'error');
+          this.showToast(this.t.deleteFailed + ': ' + (err.response?.data?.error || err.message), 'error');
           // 如果保存失败,恢复删除的项
           this.config.AUTH.splice(index, 0, deletedAuth);
           this.showTokens.splice(index, 0, deletedTokenState);
@@ -270,7 +434,7 @@ createApp({
           this.showModelSections.splice(index, 0, deletedModelState);
           this.config.activeIndex = oldActiveIndex;
         }
-      }
+      });
     },
 
     async setAsActive(index) {
@@ -293,11 +457,11 @@ createApp({
           config: configToSave,
           cliType: this.currentCli.toLowerCase()
         });
-        this.showToast('配置启用成功');
+        this.showToast(this.t.configActivated);
         // 重置服务器倒计时
         this.resetTimer();
       } catch (err) {
-        this.showToast('保存配置失败: ' + (err.response?.data?.error || err.message), 'error');
+        this.showToast(this.t.configSaveFailed + ': ' + (err.response?.data?.error || err.message), 'error');
         // 如果保存失败,恢复原来的 activeIndex
         this.config.activeIndex = oldIndex;
       }
@@ -355,7 +519,7 @@ createApp({
     // 选择 CLI 类型
     async selectCli(cliName) {
       if (cliName === 'Codex' || cliName === 'Gemini') {
-        this.showToast('暂未开放，敬请期待', 'error');
+        this.showToast(this.t.notAvailableYet, 'error');
         this.resetTimer();
         return;
       }
@@ -364,7 +528,7 @@ createApp({
         // 切换 CLI 时重新加载配置
         await this.loadConfig(cliName.toLowerCase());
       } else {
-        this.showToast('功能暂未开放，敬请期待！', 'error');
+        this.showToast(this.t.notAvailableYet + '!', 'error');
       }
     },
 
@@ -458,7 +622,7 @@ createApp({
         // 重置服务器倒计时
         this.resetTimer();
       } catch (err) {
-        this.showToast('保存失败: ' + (err.response?.data?.error || err.message), 'error');
+        this.showToast(this.t.saveFailed + ': ' + (err.response?.data?.error || err.message), 'error');
         // 恢复原始数据
         this.config.AUTH = oldAuth;
         this.config.activeIndex = oldActiveIndex;
@@ -469,6 +633,11 @@ createApp({
     }
   },
   mounted() {
+    // 从 localStorage 读取语言设置
+    const savedLang = localStorage.getItem('ccby-lang');
+    if (savedLang && (savedLang === 'en' || savedLang === 'zh')) {
+      this.currentLang = savedLang;
+    }
     this.loadConfig();
   },
   updated() {

package/assets/libs/style.css

@@ -112,6 +112,73 @@ code {
   }
 }
 
+/* 确认对话框 */
+.confirm-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.confirm-dialog {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 320px;
+  max-width: 400px;
+  padding: 1.5rem;
+}
+
+.confirm-dialog-content {
+  margin-bottom: 1.5rem;
+}
+
+.confirm-dialog-content p {
+  font-size: 1rem;
+  color: #1f2937;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.confirm-dialog-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.confirm-dialog-actions button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-cancel {
+  background-color: #e5e7eb;
+  color: #374151;
+}
+
+.btn-cancel:hover {
+  background-color: #d1d5db;
+}
+
+.btn-confirm {
+  background-color: #ef4444;
+  color: white;
+}
+
+.btn-confirm:hover {
+  background-color: #dc2626;
+}
+
 /* 容器布局 */
 .app-container {
   min-height: 100vh;
@@ -132,6 +199,12 @@ code {
   margin-bottom: 1.5rem;
 }
 
+.title-group {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
 .page-title {
   font-size: 2rem;
   font-weight: bold;
@@ -148,6 +221,34 @@ code {
   padding: 1.5px;
 }
 
+/* 语言选择器 */
+.lang-selector {
+  display: flex;
+  gap: 2px;
+  background-color: #e5e7eb;
+  border-radius: 4px;
+  padding: 1px;
+  margin-left: 0;
+}
+
+.lang-btn {
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  color: #6b7280;
+  font-size: 0.75rem;
+  transition: all 0.2s;
+  min-width: 50px;
+  text-align: center;
+}
+
+.lang-btn-active {
+  background-color: #3b82f6;
+  color: white;
+}
+
 .cli-btn {
   display: flex;
   align-items: center;