@yesdgq/claude-buddy 1.1.1018 → 1.1.1019

package/assets/config.html

@@ -147,16 +147,18 @@
 
 
       <!-- AUTH 配置列表 -->
-      <div v-if="!loading">
-        <div v-for="(auth, index) in config.AUTH" :key="index"
-             :class="['auth-card', { 'auth-card-current': index === config.activeIndex, 'auth-card-dragging': draggingIndex === index, 'auth-card-drag-over': dragOverIndex === index }]"
-             @dragover="handleDragOver(index, $event)"
-             @dragleave="handleDragLeave($event)"
-             @drop="handleDrop(index, $event)">
-          <div class="drag-handle"
-               draggable="true"
-               @dragstart="handleDragStart(index, $event)"
-               @dragend="handleDragEnd($event)">
+      <div v-if="!loading" :class="{ 'auth-list-ready': authListReady }">
+        <div v-for="(auth, index) in config.AUTH" :key="authKeys[index] || index"
+             :class="['auth-card', getDragShiftClass(index), { 'auth-card-current': index === config.activeIndex, 'auth-card-dragging': draggingIndex === index, 'auth-card-drag-over': dragOverIndex === index }]"
+             :style="getDragShiftStyle(index)"
+             @dragover="handleDragOver(index, $event)"
+             @dragleave="handleDragLeave($event)"
+             @drop="handleDrop(index, $event)">
+          <div class="drag-handle"
+               draggable="true"
+               @dragstart="handleDragStart(index, $event)"
+               @drag="handleDrag($event)"
+               @dragend="handleDragEnd($event)">
             <i class="fa fa-ellipsis-v"></i>
           </div>
           <div class="auth-header">
@@ -240,11 +242,29 @@
                   </button>
                 </div>
               </div>
-            </div>
-
-            <!-- 模型管理 -->
-            <div class="models-section" :class="{ 'is-expanded': showModelSections[index] }">
-              <div class="models-header">
+            </div>
+
+            <div v-if="currentCli === 'Codex'" class="codex-default-model">
+              <div class="default-model-header">
+                <label>
+                  <i class="fa fa-terminal"></i>
+                  {{ t.defaultModelTitle }}
+                </label>
+                <span class="default-model-chip">Codex</span>
+              </div>
+              <div class="default-model-input-wrap">
+                <i class="fa fa-magic"></i>
+                <input
+                  v-model="auth.DEFAULT_MODEL"
+                  type="text"
+                  :placeholder="t.defaultModelPlaceholder"
+                >
+              </div>
+            </div>
+
+            <!-- 模型管理 -->
+            <div v-if="currentCli !== 'Codex'" class="models-section" :class="{ 'is-expanded': showModelSections[index] }">
+              <div class="models-header">
                 <label>
                   <i class="fa fa-cogs"></i>
                   {{ t.modelManagement }}
@@ -290,7 +310,7 @@
             </div>
 
             <!-- 环境变量配置 -->
-            <div class="env-section" :class="{ 'is-expanded': showEnvSections[index] }">
+            <div v-if="currentCli !== 'Codex'" class="env-section" :class="{ 'is-expanded': showEnvSections[index] }">
               <div class="env-header">
                 <label>
                   <i class="fa fa-cogs"></i>
@@ -338,17 +358,8 @@
           </div>
         </div>
 
-        <!-- 添加新配置按钮 -->
-        <button
-          @click="addAuth"
-          class="btn btn-primary"
-        >
-          <i class="fa fa-plus-circle"></i>
-          {{ t.addNewConfig }}
-        </button>
-
-        <!-- 保存按钮 -->
-        <div class="btn-group">
+        <!-- 保存按钮 -->
+        <div class="btn-group">
           <button
             @click="saveConfig"
             :disabled="saving"
@@ -369,11 +380,20 @@
       </div>
     </div>
 
-    <!-- Toast 容器 -->
-    <div id="toast-container"></div>
-
-    <!-- 右下角悬浮保存按钮 -->
-    <button
+    <!-- Toast 容器 -->
+    <div id="toast-container"></div>
+
+    <!-- 右下角悬浮添加配置按钮 -->
+    <button
+      @click="addAuth"
+      class="fab-add"
+      :title="t.addNewConfig"
+    >
+      <i class="fa fa-plus"></i>
+    </button>
+
+    <!-- 右下角悬浮保存按钮 -->
+    <button
       @click="saveConfig"
       :disabled="saving"
       class="fab-save"

package/assets/config.js

@@ -11,6 +11,8 @@ createApp({
       showTokens: [],
       showEnvSections: [],
       showModelSections: [],
+      authKeys: [],
+      authListReady: false,
       configPath: '',
       showHelp: false,
       currentCli: 'Claude',
@@ -44,6 +46,13 @@ createApp({
       // 拖拽相关状态
       draggingIndex: null,
       dragOverIndex: null,
+      dropTargetIndex: null,
+      draggedCardHeight: 0,
+      draggedCardVisualHeight: 0,
+      dragCardRects: [],
+      dragStartY: 0,
+      dragCurrentY: 0,
+      isDropping: false,
       // 版本更新信息
       updateInfo: {
         hasUpdate: false,
@@ -90,6 +99,8 @@ createApp({
           deleteThisConfig: 'Delete this configuration',
           emptyConfigCannotDelete: 'Empty configuration cannot be deleted',
           modelManagement: 'Model Management',
+          defaultModelTitle: 'Default Model',
+          defaultModelPlaceholder: 'Enter default GPT model',
           collapse: 'Collapse',
           expand: 'Expand',
           modelNamePlaceholder: 'Model name',
@@ -160,6 +171,8 @@ createApp({
           deleteThisConfig: '删除此配置',
           emptyConfigCannotDelete: '空配置不能删除',
           modelManagement: '模型管理',
+          defaultModelTitle: '默认模型',
+          defaultModelPlaceholder: '输入默认gpt模型',
           collapse: '收起',
           expand: '展开',
           modelNamePlaceholder: '模型名称',
@@ -430,6 +443,7 @@ createApp({
         cliType = this.currentCli.toLowerCase();
       }
       this.loading = true;
+      this.authListReady = false;
       this.error = null;
       try {
         const response = await axios.get('/api/config', {
@@ -458,6 +472,7 @@ createApp({
             name: '',
             BASE_URL: '',
             TOKEN: '',
+            DEFAULT_MODEL: '',
             MODELS: [],
             ENV: []
           }];
@@ -472,12 +487,16 @@ createApp({
           if (!auth.MODELS) {
             auth.MODELS = [];
           }
+          if (cliType === 'codex' && typeof auth.DEFAULT_MODEL !== 'string') {
+            auth.DEFAULT_MODEL = '';
+          }
         });
 
         // 先设置辅助数组，再设置 config，确保 Vue 响应式正确更新
         this.showTokens = new Array(config.AUTH.length).fill(false);
         this.showEnvSections = new Array(config.AUTH.length).fill(false);
         this.showModelSections = new Array(config.AUTH.length).fill(false);
+        this.authKeys = config.AUTH.map(() => this.createAuthKey());
 
         // 最后更新 config
         this.config = config;
@@ -489,6 +508,11 @@ createApp({
         this.showToast(this.t.configLoadFailed + ': ' + (err.response?.data?.error || err.message), 'error');
       } finally {
         this.loading = false;
+        this.$nextTick(() => {
+          requestAnimationFrame(() => {
+            this.authListReady = true;
+          });
+        });
       }
     },
 
@@ -497,6 +521,7 @@ createApp({
       this.error = null;
       this.successMessage = null;
       try {
+        this.normalizeCodexDefaults();
         // 创建配置副本,过滤掉空配置项
         const configToSave = {
           ...this.config,
@@ -525,17 +550,28 @@ createApp({
       }
     },
 
+    normalizeCodexDefaults() {
+      if (this.currentCli !== 'Codex') {
+        return;
+      }
+      this.config.AUTH.forEach(auth => {
+        auth.DEFAULT_MODEL = (auth.DEFAULT_MODEL || '').trim();
+      });
+    },
+
     addAuth() {
       this.config.AUTH.push({
         name: '',
         BASE_URL: '',
         TOKEN: '',
+        DEFAULT_MODEL: '',
         MODELS: [],
         ENV: []
       });
       this.showTokens.push(false);
       this.showEnvSections.push(false);
       this.showModelSections.push(false);
+      this.authKeys.push(this.createAuthKey());
       // 重置服务器倒计时
       this.resetTimer();
     },
@@ -559,6 +595,7 @@ createApp({
         const deletedTokenState = this.showTokens[index];
         const deletedEnvState = this.showEnvSections[index];
         const deletedModelState = this.showModelSections[index];
+        const deletedAuthKey = this.authKeys[index];
         const oldActiveIndex = this.config.activeIndex;
 
         // 从列表中删除
@@ -566,6 +603,7 @@ createApp({
         this.showTokens.splice(index, 1);
         this.showEnvSections.splice(index, 1);
         this.showModelSections.splice(index, 1);
+        this.authKeys.splice(index, 1);
 
         // 调整 activeIndex：如果删除的是当前使用的配置，或者删除的配置在当前使用配置之前
         if (index === this.config.activeIndex) {
@@ -583,17 +621,20 @@ createApp({
             name: '',
             BASE_URL: '',
             TOKEN: '',
+            DEFAULT_MODEL: '',
             MODELS: [],
             ENV: []
           });
           this.showTokens.push(false);
           this.showEnvSections.push(false);
           this.showModelSections.push(false);
+          this.authKeys.push(this.createAuthKey());
           this.config.activeIndex = 0;
         }
 
         // 立即保存配置,过滤掉空配置项（但保留至少一个配置）
         try {
+          this.normalizeCodexDefaults();
           const filteredAuth = this.config.AUTH.filter(auth => !this.isEmptyConfig(auth));
           const configToSave = {
             ...this.config,
@@ -614,6 +655,7 @@ createApp({
           this.showTokens.splice(index, 0, deletedTokenState);
           this.showEnvSections.splice(index, 0, deletedEnvState);
           this.showModelSections.splice(index, 0, deletedModelState);
+          this.authKeys.splice(index, 0, deletedAuthKey);
           this.config.activeIndex = oldActiveIndex;
         }
       });
@@ -630,6 +672,7 @@ createApp({
 
       // 立即保存配置
       try {
+        this.normalizeCodexDefaults();
         const configToSave = {
           ...this.config,
           AUTH: this.config.AUTH.filter(auth => !this.isEmptyConfig(auth))
@@ -692,7 +735,12 @@ createApp({
 
     // 判断是否为空配置
     isEmptyConfig(auth) {
-      return !auth.name && !auth.BASE_URL && !auth.TOKEN && (!auth.ENV || auth.ENV.length === 0) && (!auth.MODELS || auth.MODELS.length === 0);
+      const hasDefaultModel = this.currentCli === 'Codex' && auth.DEFAULT_MODEL && auth.DEFAULT_MODEL.trim();
+      return !auth.name && !auth.BASE_URL && !auth.TOKEN && !hasDefaultModel && (!auth.ENV || auth.ENV.length === 0) && (!auth.MODELS || auth.MODELS.length === 0);
+    },
+
+    createAuthKey() {
+      return `auth-${Date.now()}-${Math.random().toString(36).slice(2)}`;
     },
 
     // 切换使用说明显示/隐藏
@@ -700,9 +748,44 @@ createApp({
       this.showHelp = !this.showHelp;
     },
 
+    getDragShiftClass(index) {
+      if (this.draggingIndex === null || this.dropTargetIndex === null || this.isDropping || index === this.draggingIndex) {
+        return '';
+      }
+
+      if (this.draggingIndex < this.dropTargetIndex && index > this.draggingIndex && index <= this.dropTargetIndex) {
+        return 'auth-card-shift-up';
+      }
+
+      if (this.draggingIndex > this.dropTargetIndex && index >= this.dropTargetIndex && index < this.draggingIndex) {
+        return 'auth-card-shift-down';
+      }
+
+      return '';
+    },
+
+    getDragShiftStyle(index) {
+      if (index === this.draggingIndex) {
+        const offset = this.dragCurrentY - this.dragStartY;
+        return {
+          '--drag-follow-offset': `${offset}px`
+        };
+      }
+
+      const shiftClass = this.getDragShiftClass(index);
+      if (!shiftClass || !this.draggedCardHeight) {
+        return {};
+      }
+
+      const offset = shiftClass === 'auth-card-shift-up' ? -this.draggedCardHeight : this.draggedCardHeight;
+      return {
+        '--drag-shift-offset': `${offset}px`
+      };
+    },
+
     // 选择 CLI 类型
     async selectCli(cliName) {
-      if (cliName === 'Gemini' || cliName === 'Codex') {
+      if (cliName === 'Gemini') {
         this.showToast(this.t.notAvailableYet, 'error');
         this.resetTimer();
         return;
@@ -714,25 +797,105 @@ createApp({
     // 拖拽开始
     handleDragStart(index, event) {
       this.draggingIndex = index;
+      this.dragOverIndex = null;
+      this.dropTargetIndex = null;
+      this.isDropping = false;
+      const card = event.currentTarget.closest('.auth-card');
+      const cardStyle = window.getComputedStyle(card);
+      this.draggedCardHeight = card.offsetHeight + parseFloat(cardStyle.marginBottom || 0);
+      this.draggedCardVisualHeight = card.offsetHeight;
+      this.dragCardRects = Array.from(document.querySelectorAll('.auth-card')).map(cardEl => {
+        const rect = cardEl.getBoundingClientRect();
+        return {
+          top: rect.top,
+          bottom: rect.bottom,
+          height: rect.height
+        };
+      });
+      this.dragStartY = event.clientY;
+      this.dragCurrentY = event.clientY;
       event.dataTransfer.effectAllowed = 'move';
       // 设置拖拽时的透明度
       event.target.style.opacity = '0.5';
     },
 
+    handleDrag(event) {
+      if (this.draggingIndex === null || event.clientY === 0) {
+        return;
+      }
+      this.dragCurrentY = event.clientY;
+      this.updateDropTargetByY(event.clientY);
+    },
+
     // 拖拽结束
     handleDragEnd(event) {
+      if (this.isDropping) {
+        event.target.style.opacity = '1';
+        return;
+      }
       this.draggingIndex = null;
       this.dragOverIndex = null;
+      this.dropTargetIndex = null;
+      this.draggedCardHeight = 0;
+      this.draggedCardVisualHeight = 0;
+      this.dragCardRects = [];
+      this.dragStartY = 0;
+      this.dragCurrentY = 0;
+      this.isDropping = false;
       event.target.style.opacity = '1';
     },
 
     // 拖拽经过
     handleDragOver(index, event) {
       event.preventDefault();
-      if (this.draggingIndex === null || this.draggingIndex === index) {
+      if (this.draggingIndex === null) {
         return;
       }
-      this.dragOverIndex = index;
+      if (this.draggingIndex === index) {
+        return;
+      }
+      if (event.clientY !== 0) {
+        this.dragCurrentY = event.clientY;
+      }
+      this.updateDropTargetByY(event.clientY);
+      if (this.dragOverIndex !== index) {
+        this.dragOverIndex = index;
+      }
+    },
+
+    updateDropTargetByY(clientY) {
+      if (this.draggingIndex === null || clientY === 0) {
+        return;
+      }
+
+      const dragOffset = clientY - this.dragStartY;
+      const draggedRect = this.dragCardRects[this.draggingIndex];
+      if (!draggedRect) {
+        return;
+      }
+
+      const draggedTop = draggedRect.top + dragOffset;
+      const draggedBottom = draggedTop + this.draggedCardVisualHeight;
+
+      const crossedIndexes = this.dragCardRects
+        .map((rect, index) => ({ rect, index }))
+        .filter(({ index }) => index !== this.draggingIndex)
+        .filter(({ rect, index }) => {
+          const targetMiddle = rect.top + rect.height / 2;
+          return this.draggingIndex < index
+            ? draggedBottom > targetMiddle
+            : draggedTop < targetMiddle;
+        })
+        .map(({ index }) => index);
+
+      const nextTargetIndex = this.draggingIndex < (crossedIndexes[0] ?? this.draggingIndex)
+        ? crossedIndexes[crossedIndexes.length - 1]
+        : crossedIndexes[0];
+
+      const normalizedTargetIndex = nextTargetIndex === undefined ? null : nextTargetIndex;
+      if (this.dropTargetIndex !== normalizedTargetIndex) {
+        this.dropTargetIndex = normalizedTargetIndex;
+      }
     },
 
     // 拖拽离开
@@ -743,10 +906,13 @@ createApp({
     // 放下
     async handleDrop(index, event) {
       event.preventDefault();
-      if (this.draggingIndex === null || this.draggingIndex === index) {
+      const targetIndex = this.dropTargetIndex ?? index;
+      if (this.draggingIndex === null || this.draggingIndex === targetIndex) {
         this.dragOverIndex = null;
+        this.dropTargetIndex = null;
         return;
       }
+      this.isDropping = true;
 
       // 保存原始数据，以便失败时恢复
       const oldAuth = [...this.config.AUTH];
@@ -754,41 +920,63 @@ createApp({
       const oldShowTokens = [...this.showTokens];
       const oldShowEnvSections = [...this.showEnvSections];
       const oldShowModelSections = [...this.showModelSections];
+      const oldAuthKeys = [...this.authKeys];
 
       // 移动配置项
       const [movedAuth] = this.config.AUTH.splice(this.draggingIndex, 1);
-      this.config.AUTH.splice(index, 0, movedAuth);
+      this.config.AUTH.splice(targetIndex, 0, movedAuth);
 
       // 同步移动显示状态
       const [movedToken] = this.showTokens.splice(this.draggingIndex, 1);
-      this.showTokens.splice(index, 0, movedToken);
+      this.showTokens.splice(targetIndex, 0, movedToken);
 
       const [movedEnv] = this.showEnvSections.splice(this.draggingIndex, 1);
-      this.showEnvSections.splice(index, 0, movedEnv);
+      this.showEnvSections.splice(targetIndex, 0, movedEnv);
 
       const [movedModel] = this.showModelSections.splice(this.draggingIndex, 1);
-      this.showModelSections.splice(index, 0, movedModel);
+      this.showModelSections.splice(targetIndex, 0, movedModel);
+
+      const [movedAuthKey] = this.authKeys.splice(this.draggingIndex, 1);
+      this.authKeys.splice(targetIndex, 0, movedAuthKey);
 
       // 调整 activeIndex
       if (this.draggingIndex === this.config.activeIndex) {
         // 拖拽的是当前使用的配置，直接移动到目标位置
-        this.config.activeIndex = index;
-      } else if (this.draggingIndex < this.config.activeIndex && index >= this.config.activeIndex) {
+        this.config.activeIndex = targetIndex;
+      } else if (this.draggingIndex < this.config.activeIndex && targetIndex >= this.config.activeIndex) {
         // 从前向后拖拽，经过当前使用的配置
         // activeIndex 位置的元素被向前移了一位，所以需要减 1
         this.config.activeIndex--;
-      } else if (this.draggingIndex > this.config.activeIndex && index <= this.config.activeIndex) {
+      } else if (this.draggingIndex > this.config.activeIndex && targetIndex <= this.config.activeIndex) {
         // 从后向前拖拽，经过当前使用的配置
         // activeIndex 位置的元素被向后移了一位，所以需要加 1
         this.config.activeIndex++;
       }
 
-      // 重置拖拽状态
-      this.draggingIndex = null;
+      this.draggingIndex = targetIndex;
       this.dragOverIndex = null;
+      this.dropTargetIndex = null;
+      this.dragCurrentY = this.dragStartY;
+
+      // 先完成 DOM 重排，下一帧再清理拖拽状态，避免松手时出现明显回弹刷新。
+      requestAnimationFrame(() => {
+        if (!this.isDropping || this.draggingIndex !== targetIndex) {
+          return;
+        }
+        this.draggingIndex = null;
+        this.dragOverIndex = null;
+        this.dropTargetIndex = null;
+        this.draggedCardHeight = 0;
+        this.draggedCardVisualHeight = 0;
+        this.dragCardRects = [];
+        this.dragStartY = 0;
+        this.dragCurrentY = 0;
+        this.isDropping = false;
+      });
 
       // 保存配置
       try {
+        this.normalizeCodexDefaults();
         const configToSave = {
           ...this.config,
           AUTH: this.config.AUTH.filter(auth => !this.isEmptyConfig(auth))
@@ -808,6 +996,7 @@ createApp({
         this.showTokens = oldShowTokens;
         this.showEnvSections = oldShowEnvSections;
         this.showModelSections = oldShowModelSections;
+        this.authKeys = oldAuthKeys;
       }
     }
   },