账号添加备注

db_manager.py

@@ -113,6 +113,7 @@ class DBManager:
                 value TEXT NOT NULL,
                 user_id INTEGER NOT NULL,
                 auto_confirm INTEGER DEFAULT 1,
+                remark TEXT DEFAULT '',
                 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
             )
@@ -372,6 +373,15 @@ class DBManager:
             # 检查并更新CHECK约束（重建表以支持image类型）
             self._update_cards_table_constraints(cursor)
 
+            # 检查cookies表是否存在remark列
+            cursor.execute("PRAGMA table_info(cookies)")
+            cookie_columns = [column[1] for column in cursor.fetchall()]
+
+            if 'remark' not in cookie_columns:
+                logger.info("添加cookies表的remark列...")
+                cursor.execute("ALTER TABLE cookies ADD COLUMN remark TEXT DEFAULT ''")
+                logger.info("数据库迁移完成：添加remark列")
+
         except Exception as e:
             logger.error(f"数据库迁移失败: {e}")
             # 迁移失败不应该阻止程序启动
@@ -1077,11 +1087,11 @@ class DBManager:
                 return None
 
     def get_cookie_details(self, cookie_id: str) -> Optional[Dict[str, any]]:
-        """获取Cookie的详细信息，包括user_id和auto_confirm"""
+        """获取Cookie的详细信息，包括user_id、auto_confirm和remark"""
         with self.lock:
             try:
                 cursor = self.conn.cursor()
-                self._execute_sql(cursor, "SELECT id, value, user_id, auto_confirm, created_at FROM cookies WHERE id = ?", (cookie_id,))
+                self._execute_sql(cursor, "SELECT id, value, user_id, auto_confirm, remark, created_at FROM cookies WHERE id = ?", (cookie_id,))
                 result = cursor.fetchone()
                 if result:
                     return {
@@ -1089,7 +1099,8 @@ class DBManager:
                         'value': result[1],
                         'user_id': result[2],
                         'auto_confirm': bool(result[3]),
-                        'created_at': result[4]
+                        'remark': result[4] or '',
+                        'created_at': result[5]
                     }
                 return None
             except Exception as e:
@@ -1109,6 +1120,19 @@ class DBManager:
                 logger.error(f"更新自动确认发货设置失败: {e}")
                 return False
 
+    def update_cookie_remark(self, cookie_id: str, remark: str) -> bool:
+        """更新Cookie的备注"""
+        with self.lock:
+            try:
+                cursor = self.conn.cursor()
+                self._execute_sql(cursor, "UPDATE cookies SET remark = ? WHERE id = ?", (remark, cookie_id))
+                self.conn.commit()
+                logger.info(f"更新账号 {cookie_id} 备注: {remark}")
+                return True
+            except Exception as e:
+                logger.error(f"更新账号备注失败: {e}")
+                return False
+
     def get_auto_confirm(self, cookie_id: str) -> bool:
         """获取Cookie的自动确认发货设置"""
         with self.lock:
@@ -1183,14 +1207,18 @@ class DBManager:
                             "INSERT INTO keywords (cookie_id, keyword, reply, item_id, type) VALUES (?, ?, ?, ?, 'text')",
                             (cookie_id, keyword, reply, normalized_item_id))
                     except sqlite3.IntegrityError as ie:
-                        # 如果遇到唯一约束冲突，记录详细错误信息
+                        # 如果遇到唯一约束冲突，记录详细错误信息并回滚
                         item_desc = f"商品ID: {normalized_item_id}" if normalized_item_id else "通用关键词"
                         logger.error(f"关键词唯一约束冲突: Cookie={cookie_id}, 关键词='{keyword}', {item_desc}")
+                        self.conn.rollback()
                         raise ie
 
                 self.conn.commit()
                 logger.info(f"文本关键字保存成功: {cookie_id}, {len(keywords)}条，图片关键词已保留")
                 return True
+            except sqlite3.IntegrityError:
+                # 唯一约束冲突，重新抛出异常让上层处理
+                raise
             except Exception as e:
                 logger.error(f"文本关键字保存失败: {e}")
                 self.conn.rollback()

reply_server.py

@@ -908,11 +908,16 @@ def get_cookies_details(current_user: Dict[str, Any] = Depends(get_current_user)
     for cookie_id, cookie_value in user_cookies.items():
         cookie_enabled = cookie_manager.manager.get_cookie_status(cookie_id)
         auto_confirm = db_manager.get_auto_confirm(cookie_id)
+        # 获取备注信息
+        cookie_details = db_manager.get_cookie_details(cookie_id)
+        remark = cookie_details.get('remark', '') if cookie_details else ''
+
         result.append({
             'id': cookie_id,
             'value': cookie_value,
             'enabled': cookie_enabled,
-            'auto_confirm': auto_confirm
+            'auto_confirm': auto_confirm,
+            'remark': remark
         })
     return result
 
@@ -1443,6 +1448,10 @@ class AutoConfirmUpdate(BaseModel):
     auto_confirm: bool
 
 
+class RemarkUpdate(BaseModel):
+    remark: str
+
+
 @app.put("/cookies/{cid}/auto-confirm")
 def update_auto_confirm(cid: str, update_data: AutoConfirmUpdate, current_user: Dict[str, Any] = Depends(get_current_user)):
     """更新账号的自动确认发货设置"""
@@ -1503,6 +1512,65 @@ def get_auto_confirm(cid: str, current_user: Dict[str, Any] = Depends(get_curren
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@app.put("/cookies/{cid}/remark")
+def update_cookie_remark(cid: str, update_data: RemarkUpdate, current_user: Dict[str, Any] = Depends(get_current_user)):
+    """更新账号备注"""
+    if cookie_manager.manager is None:
+        raise HTTPException(status_code=500, detail="CookieManager 未就绪")
+    try:
+        # 检查cookie是否属于当前用户
+        user_id = current_user['user_id']
+        from db_manager import db_manager
+        user_cookies = db_manager.get_all_cookies(user_id)
+
+        if cid not in user_cookies:
+            raise HTTPException(status_code=403, detail="无权限操作该Cookie")
+
+        # 更新备注
+        success = db_manager.update_cookie_remark(cid, update_data.remark)
+        if success:
+            log_with_user('info', f"更新账号备注: {cid} -> {update_data.remark}", current_user)
+            return {
+                "message": "备注更新成功",
+                "remark": update_data.remark
+            }
+        else:
+            raise HTTPException(status_code=500, detail="备注更新失败")
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/cookies/{cid}/remark")
+def get_cookie_remark(cid: str, current_user: Dict[str, Any] = Depends(get_current_user)):
+    """获取账号备注"""
+    if cookie_manager.manager is None:
+        raise HTTPException(status_code=500, detail="CookieManager 未就绪")
+    try:
+        # 检查cookie是否属于当前用户
+        user_id = current_user['user_id']
+        from db_manager import db_manager
+        user_cookies = db_manager.get_all_cookies(user_id)
+
+        if cid not in user_cookies:
+            raise HTTPException(status_code=403, detail="无权限操作该Cookie")
+
+        # 获取Cookie详细信息（包含备注）
+        cookie_details = db_manager.get_cookie_details(cid)
+        if cookie_details:
+            return {
+                "remark": cookie_details.get('remark', ''),
+                "message": "获取备注成功"
+            }
+        else:
+            raise HTTPException(status_code=404, detail="账号不存在")
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 
 
 
@@ -1631,10 +1699,22 @@ def update_keywords_with_item_id(cid: str, body: KeywordWithItemIdIn, current_us
 
         keywords_to_save.append((keyword, reply, item_id))
 
-    # 保存关键词
-    success = db_manager.save_keywords_with_item_id(cid, keywords_to_save)
+    # 保存关键词（只保存文本关键词，保留图片关键词）
+    try:
+        success = db_manager.save_text_keywords_only(cid, keywords_to_save)
         if not success:
             raise HTTPException(status_code=500, detail="保存关键词失败")
+    except Exception as e:
+        error_msg = str(e)
+        if "UNIQUE constraint failed" in error_msg:
+            # 解析具体的冲突信息
+            if "keywords.cookie_id, keywords.keyword" in error_msg:
+                raise HTTPException(status_code=400, detail="关键词重复！该关键词已存在（可能是图片关键词或文本关键词），请使用其他关键词")
+            else:
+                raise HTTPException(status_code=400, detail="关键词重复！请使用不同的关键词或商品ID组合")
+        else:
+            log_with_user('error', f"保存关键词时发生未知错误: {error_msg}", current_user)
+            raise HTTPException(status_code=500, detail="保存关键词失败")
 
     log_with_user('info', f"更新Cookie关键字(含商品ID): {cid}, 数量: {len(keywords_to_save)}", current_user)
     return {"msg": "updated", "count": len(keywords_to_save)}

static/css/accounts.css

@@ -0,0 +1,227 @@
+/* ================================
+   【账号管理菜单】相关样式
+   ================================ */
+.status-toggle {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.status-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.status-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+  border-radius: 24px;
+}
+
+.status-slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .status-slider {
+  background-color: #10b981;
+}
+
+input:checked + .status-slider:before {
+  transform: translateX(26px);
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  min-width: 2rem;
+  height: 1.5rem;
+}
+
+.status-badge.enabled {
+  background: #dcfce7;
+  color: #166534;
+  border: 1px solid #bbf7d0;
+}
+
+.status-badge.disabled {
+  background: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+.account-row.disabled {
+  opacity: 0.6;
+  background-color: #f9fafb;
+}
+
+.account-row.disabled .cookie-value {
+  background-color: #f3f4f6;
+}
+
+/* 关键词管理界面的状态提示 */
+.account-badge .badge.bg-warning {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+
+.disabled-account-notice {
+  background: #fef3c7;
+  border: 1px solid #f59e0b;
+  border-radius: 8px;
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  color: #92400e;
+}
+
+.disabled-account-notice .bi {
+  color: #f59e0b;
+}
+
+/* 扫码登录按钮特殊样式 */
+.qr-login-btn {
+  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+  border: none;
+  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.qr-login-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
+  background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
+}
+
+.qr-login-btn:active {
+  transform: translateY(0);
+}
+
+.qr-login-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: left 0.5s;
+}
+
+.qr-login-btn:hover::before {
+  left: 100%;
+}
+
+/* 二维码容器样式 */
+.qr-code-wrapper {
+  border: 3px solid #28a745;
+  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
+  transition: all 0.3s ease;
+}
+
+.qr-code-wrapper:hover {
+  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
+}
+
+/* 步骤指引样式 */
+.step-item {
+  text-align: center;
+}
+
+.step-number {
+  font-weight: bold;
+  font-size: 14px;
+  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
+}
+
+/* 手动输入按钮样式 */
+.manual-input-btn {
+  transition: all 0.3s ease;
+}
+
+.manual-input-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
+}
+
+/* 等待提示样式 */
+.bg-light-warning {
+  background-color: #fff3cd !important;
+}
+
+.qr-loading-tip {
+  animation: pulse-warning 2s infinite;
+}
+
+@keyframes pulse-warning {
+  0% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.8;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .status-toggle {
+    width: 40px;
+    height: 20px;
+  }
+
+  .status-slider:before {
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
+  }
+
+  input:checked + .status-slider:before {
+    transform: translateX(20px);
+  }
+
+  .qr-login-btn, .manual-input-btn {
+    margin-bottom: 10px;
+    font-size: 0.9rem;
+  }
+
+  .step-item {
+    margin-bottom: 15px;
+  }
+
+  .step-number {
+    width: 25px !important;
+    height: 25px !important;
+    font-size: 12px;
+  }
+}

static/css/components.css

@@ -0,0 +1,303 @@
+/* ================================
+   通用卡片样式 - 适用于所有菜单的卡片
+   ================================ */
+.card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  margin-bottom: 2rem;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.card-header {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+  color: white;
+  border: none;
+  border-radius: 16px 16px 0 0 !important;
+  font-weight: 600;
+  font-size: 1.1rem;
+  padding: 1.25rem 1.5rem;
+}
+
+.card-body {
+  padding: 1.5rem;
+}
+
+.btn {
+  border-radius: 10px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  padding: 0.5rem 1rem;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+  border: none;
+}
+
+.btn-success {
+  background: linear-gradient(135deg, var(--success-color), #059669);
+  border: none;
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, var(--danger-color), #dc2626);
+  border: none;
+}
+
+.btn-outline-primary {
+  border: 2px solid var(--primary-color);
+  color: var(--primary-color);
+}
+
+.btn-outline-primary:hover {
+  background: var(--primary-color);
+  border-color: var(--primary-color);
+  color: white;
+}
+
+.btn-outline-success {
+  border: 2px solid var(--success-color);
+  color: var(--success-color);
+}
+
+.btn-outline-success:hover {
+  background: var(--success-color);
+  border-color: var(--success-color);
+  color: white;
+}
+
+.btn-outline-info {
+  border: 2px solid #0dcaf0;
+  color: #0dcaf0;
+}
+
+.btn-outline-info:hover {
+  background: #0dcaf0;
+  border-color: #0dcaf0;
+  color: white;
+}
+
+.btn-outline-danger {
+  border: 2px solid var(--danger-color);
+  color: var(--danger-color);
+}
+
+.btn-outline-danger:hover {
+  background: var(--danger-color);
+  border-color: var(--danger-color);
+  color: white;
+}
+
+/* ================================
+   通用表格样式 - 适用于所有菜单的表格
+   ================================ */
+.table {
+  margin-bottom: 0;
+  background: transparent;
+}
+
+.table th {
+  border-top: none;
+  border-bottom: 2px solid var(--border-color);
+  font-weight: 600;
+  color: var(--dark-color);
+  background: rgba(79, 70, 229, 0.05);
+  padding: 1rem;
+}
+
+.table td {
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  vertical-align: middle;
+}
+
+.table tbody tr:hover {
+  background: rgba(79, 70, 229, 0.02);
+}
+
+.badge {
+  font-weight: 500;
+  padding: 5px 10px;
+}
+
+.form-control:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.cookie-value {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+  font-size: 0.85rem;
+  background: #f8fafc;
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  word-break: break-all;
+  line-height: 1.4;
+  max-height: 120px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255,255,255,0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.loading-spinner {
+  width: 3rem;
+  height: 3rem;
+}
+
+.keyword-editor {
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.modal-content {
+  border-radius: 10px;
+  border: none;
+}
+
+.modal-header {
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+
+.modal-footer {
+  border-top: 1px solid rgba(0,0,0,0.05);
+}
+
+.cookie-id {
+  font-weight: 600;
+  color: var(--primary-color);
+  font-size: 1rem;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem 2rem;
+  color: var(--secondary-color);
+}
+
+.empty-state i {
+  opacity: 0.5;
+}
+
+.form-control, .form-select {
+  border-radius: 10px;
+  border: 2px solid var(--border-color);
+  transition: all 0.3s ease;
+  padding: 0.75rem 1rem;
+}
+
+.form-control:focus, .form-select:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
+  transform: translateY(-1px);
+}
+
+.form-label {
+  font-weight: 600;
+  color: var(--dark-color);
+  margin-bottom: 0.5rem;
+}
+
+/* ================================
+   通用模态框样式 - 适用于所有菜单的模态框
+   ================================ */
+.modal-content {
+  border: none;
+  border-radius: 16px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  backdrop-filter: blur(10px);
+}
+
+.modal-header {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+  color: white;
+  border: none;
+  border-radius: 16px 16px 0 0;
+}
+
+.toast-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+}
+
+.toast {
+  border: none;
+  border-radius: 12px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  backdrop-filter: blur(10px);
+}
+
+.btn-group .btn {
+  margin-right: 0.25rem;
+}
+
+.btn-group .btn:last-child {
+  margin-right: 0;
+}
+
+@media (max-width: 768px) {
+  .container {
+    margin-top: 1rem;
+    padding: 0 1rem;
+  }
+
+  .card-body {
+    padding: 1rem;
+  }
+
+  .btn {
+    font-size: 0.875rem;
+    padding: 0.375rem 0.75rem;
+  }
+
+  .cookie-value {
+    font-size: 0.75rem;
+    max-height: 80px;
+  }
+
+  .btn-group {
+    flex-direction: column;
+  }
+
+  .btn-group .btn {
+    margin-right: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  /* 移动端商品表格优化 */
+  #itemsTableBody .btn-group {
+    flex-direction: row;
+  }
+
+  #itemsTableBody .btn-group .btn {
+    padding: 0.2rem 0.4rem;
+    font-size: 0.75rem;
+  }
+}

static/css/dashboard.css

@@ -0,0 +1,63 @@
+/* 仪表盘样式 */
+.dashboard-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+/* ================================
+   【仪表盘菜单】相关样式
+   ================================ */
+.stat-card {
+  background: white;
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.stat-icon.primary {
+  background: rgba(79, 70, 229, 0.1);
+  color: var(--primary-color);
+}
+
+.stat-icon.success {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success-color);
+}
+
+.stat-icon.warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--warning-color);
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--dark-color);
+  margin-bottom: 0.5rem;
+}
+
+.stat-label {
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+  font-weight: 500;
+}

static/css/items.css

@@ -0,0 +1,52 @@
+/* ================================
+   【商品管理菜单】表格样式
+   ================================ */
+#itemsTableBody .btn-group {
+  white-space: nowrap;
+}
+
+#itemsTableBody .btn-group .btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.25rem;
+}
+
+#itemsTableBody .btn-group .btn:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+#itemsTableBody .btn-group .btn:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+}
+
+#itemsTableBody .btn-group .btn i {
+  font-size: 0.875rem;
+}
+
+/* 表格操作列样式 */
+.table td:last-child {
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.5rem 0.25rem;
+}
+
+/* 表格文本截断优化 */
+.table td {
+  vertical-align: middle;
+}
+
+.table td[title] {
+  cursor: help;
+}
+
+/* 商品表格特定优化 */
+#itemsTableBody td:nth-child(4),
+#itemsTableBody td:nth-child(5) {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

static/css/keywords.css

@@ -0,0 +1,403 @@
+/* 关键词管理现代化样式 */
+.keyword-container {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.keyword-header {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+  color: white;
+  padding: 1.5rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.keyword-header h3 {
+  margin: 0;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+
+.keyword-header .account-badge {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.keyword-input-area {
+  padding: 2rem;
+  background: #f8fafc;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.keyword-input-group {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr auto;
+  gap: 1rem;
+  align-items: end;
+}
+
+.input-field {
+  position: relative;
+}
+
+.input-field label {
+  position: absolute;
+  top: -0.5rem;
+  left: 0.75rem;
+  background: #f8fafc;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #6b7280;
+  z-index: 1;
+}
+
+.input-field input, .input-field select {
+  width: 100%;
+  padding: 1rem 0.75rem 0.75rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  transition: all 0.3s ease;
+  background: white;
+}
+
+.input-field input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.add-btn {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 1rem 1.5rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.add-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
+}
+
+.add-btn:active {
+  transform: translateY(0);
+}
+
+/* ================================
+   【自动回复菜单】相关样式
+   ================================ */
+.keywords-list {
+  padding: 1.5rem 2rem 2rem;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.keyword-item {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  margin-bottom: 1rem;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.keyword-item:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+  transform: translateY(-1px);
+}
+
+.keyword-item-header {
+  padding: 1rem 1.5rem;
+  background: #f8fafc;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.keyword-tag {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.keyword-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.edit-btn {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+.edit-btn:hover {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+.edit-btn-disabled {
+  background: #f9fafb !important;
+  color: #9ca3af !important;
+  cursor: not-allowed !important;
+}
+
+.edit-btn-disabled:hover {
+  background: #f9fafb !important;
+  color: #9ca3af !important;
+}
+
+.delete-btn {
+  background: #fef2f2;
+  color: #ef4444;
+}
+
+.delete-btn:hover {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.keyword-content {
+  padding: 1.5rem;
+}
+
+.reply-text {
+  color: #374151;
+  line-height: 1.6;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: #6b7280;
+}
+
+.empty-state i {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-state h3 {
+  margin: 0 0 0.5rem;
+  color: #374151;
+}
+
+.empty-state p {
+  margin: 0 0 2rem;
+  font-size: 0.875rem;
+}
+
+.quick-add-btn {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 0.75rem 1.5rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.quick-add-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+/* 账号选择器现代化 */
+.account-selector {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  margin-bottom: 2rem;
+}
+
+.selector-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.selector-icon {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.25rem;
+}
+
+.selector-title {
+  margin: 0;
+  color: #1f2937;
+  font-weight: 600;
+}
+
+.selector-subtitle {
+  margin: 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.account-select-wrapper {
+  position: relative;
+}
+
+.account-select {
+  width: 100%;
+  padding: 1rem 1.25rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  font-size: 1rem;
+  background: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.account-select:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* ================================
+   【自动回复菜单】图片关键词样式
+   ================================ */
+.btn-image {
+  background: linear-gradient(135deg, #28a745, #20c997) !important;
+  border: none !important;
+  margin-left: 10px;
+}
+
+.btn-image:hover {
+  background: linear-gradient(135deg, #218838, #1ea085) !important;
+  transform: translateY(-1px);
+}
+
+.keyword-input-group {
+  display: flex;
+  gap: 15px;
+  align-items: end;
+  flex-wrap: wrap;
+}
+
+.keyword-input-group .add-btn {
+  white-space: nowrap;
+  min-width: auto;
+}
+
+.image-preview {
+  margin-top: 10px;
+}
+
+.preview-container {
+  padding: 10px;
+  border: 2px dashed #ddd;
+  border-radius: 8px;
+  text-align: center;
+  background-color: #f8f9fa;
+}
+
+.keyword-type-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-left: 8px;
+}
+
+.keyword-type-text {
+  background-color: #e3f2fd;
+  color: #1976d2;
+}
+
+.keyword-type-image {
+  background-color: #f3e5f5;
+  color: #7b1fa2;
+}
+
+/* 关键词列表中的图片预览 */
+.keyword-image-preview {
+  max-width: 60px;
+  max-height: 60px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+
+.keyword-image-preview:hover {
+  border-color: #007bff;
+  transform: scale(1.05);
+  transition: all 0.2s ease;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .keyword-input-group {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .keyword-item-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .keyword-actions {
+    align-self: flex-end;
+  }
+
+  .keyword-input-group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .keyword-input-group .add-btn {
+    margin-left: 0;
+    margin-top: 10px;
+  }
+}

static/css/layout.css

@@ -0,0 +1,170 @@
+/* ================================
+   通用布局 - 侧边栏和导航
+   ================================ */
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 250px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+  color: white;
+  z-index: 1000;
+  transition: all 0.3s ease;
+  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  padding: 1.5rem 1rem;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  flex-shrink: 0;
+}
+
+.sidebar-brand {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: white;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-nav {
+  padding: 1rem 0;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 侧边栏滚动条样式 */
+.sidebar-nav::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-nav::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+  transition: background 0.3s ease;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* Firefox滚动条样式 */
+.sidebar-nav {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+}
+
+.nav-item {
+  margin: 0.25rem 0;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  color: rgba(255,255,255,0.8);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  border-left: 3px solid transparent;
+}
+
+.nav-link:hover {
+  color: white;
+  background: rgba(255,255,255,0.1);
+  border-left-color: rgba(255,255,255,0.5);
+}
+
+.nav-link.active {
+  color: white;
+  background: rgba(255,255,255,0.15);
+  border-left-color: white;
+}
+
+.nav-link i {
+  margin-right: 0.75rem;
+  width: 20px;
+  text-align: center;
+}
+
+.nav-divider {
+  padding: 0.5rem 1rem;
+  border-top: 1px solid rgba(255,255,255,0.1);
+  margin-top: 0.5rem;
+}
+
+.nav-divider small {
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* 主内容区域 */
+.main-content {
+  margin-left: 250px;
+  min-height: 100vh;
+  background: #f8fafc;
+}
+
+.content-header {
+  background: white;
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: var(--shadow-sm);
+}
+
+.content-body {
+  padding: 2rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+
+  .sidebar.show {
+    transform: translateX(0);
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
+
+  .mobile-toggle {
+    display: block !important;
+  }
+}
+
+.mobile-toggle {
+  display: none;
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1001;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem;
+  box-shadow: var(--shadow-md);
+}
+
+/* 内容区域样式 */
+.content-section {
+  display: none;
+}
+
+.content-section.active {
+  display: block;
+}

static/css/logs.css

@@ -0,0 +1,77 @@
+/* ================================
+   【日志管理菜单】相关样式
+   ================================ */
+.log-container {
+  height: 70vh;
+  overflow-y: auto;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.2;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.log-entry {
+  margin-bottom: 0px;
+  padding: 1px 0;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  line-height: 1.2;
+}
+
+.log-entry.DEBUG {
+  color: #9cdcfe;
+}
+
+.log-entry.INFO {
+  color: #4ec9b0;
+}
+
+.log-entry.WARNING {
+  color: #dcdcaa;
+}
+
+.log-entry.ERROR {
+  color: #f48771;
+}
+
+.log-entry.CRITICAL {
+  color: #ff6b6b;
+  font-weight: bold;
+}
+
+.log-timestamp {
+  color: #808080;
+}
+
+.log-level {
+  font-weight: bold;
+  margin: 0 5px;
+}
+
+.log-source {
+  color: #569cd6;
+}
+
+.log-message {
+  color: inherit;
+}
+
+.log-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.log-container::-webkit-scrollbar-track {
+  background: #2d2d30;
+}
+
+.log-container::-webkit-scrollbar-thumb {
+  background: #464647;
+  border-radius: 4px;
+}
+
+.log-container::-webkit-scrollbar-thumb:hover {
+  background: #5a5a5c;
+}

static/css/notifications.css

@@ -0,0 +1,83 @@
+/* ================================
+   【通知渠道菜单】卡片样式
+   ================================ */
+.channel-type-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  min-height: 180px; /* 设置最小高度，让卡片更紧凑 */
+}
+
+.channel-type-card .card-body {
+  padding: 1rem; /* 减少内边距 */
+}
+
+.channel-type-card .channel-icon {
+  transition: transform 0.3s ease;
+  margin-bottom: 0.75rem !important; /* 减少图标下方间距 */
+}
+
+.channel-type-card .channel-icon i {
+  font-size: 2.2rem !important; /* 减小图标大小 */
+}
+
+.channel-type-card .card-title {
+  font-size: 1.1rem; /* 减小标题字体 */
+  margin-bottom: 0.5rem;
+}
+
+.channel-type-card .card-text {
+  font-size: 0.85rem; /* 减小描述文字 */
+  margin-bottom: 0.75rem;
+}
+
+.channel-type-card .btn {
+  transition: all 0.3s ease;
+  font-size: 0.85rem; /* 减小按钮文字 */
+  padding: 0.375rem 0.75rem; /* 减小按钮内边距 */
+}
+
+.channel-type-card:hover {
+  transform: translateY(-3px); /* 减少悬停位移 */
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+  border-color: var(--bs-primary);
+}
+
+.channel-type-card:hover .channel-icon {
+  transform: scale(1.05); /* 减少悬停缩放 */
+}
+
+.channel-type-card:hover .btn {
+  transform: scale(1.02); /* 减少按钮悬停缩放 */
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .channel-type-card {
+    margin-bottom: 10px;
+    min-height: 160px; /* 移动端稍微减小高度 */
+  }
+
+  .channel-type-card .card-body {
+    padding: 0.75rem; /* 移动端减少内边距 */
+  }
+
+  .channel-type-card .channel-icon i {
+    font-size: 2rem !important; /* 移动端图标更小 */
+  }
+
+  .channel-type-card .card-title {
+    font-size: 1rem; /* 移动端标题更小 */
+  }
+
+  .channel-type-card .card-text {
+    font-size: 0.8rem; /* 移动端描述文字更小 */
+  }
+}
+
+/* 大屏幕优化 */
+@media (min-width: 1400px) {
+  .channel-type-card {
+    min-height: 200px; /* 大屏幕稍微增加高度 */
+  }
+}

static/css/variables.css

@@ -0,0 +1,26 @@
+/* ================================
+   全局变量和基础样式
+   ================================ */
+:root {
+    --primary-color: #4f46e5;
+    --primary-hover: #4338ca;
+    --primary-light: #6366f1;
+    --secondary-color: #6b7280;
+    --success-color: #10b981;
+    --danger-color: #ef4444;
+    --warning-color: #f59e0b;
+    --light-color: #f9fafb;
+    --dark-color: #1f2937;
+    --border-color: #e5e7eb;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  body {
+    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: #f8fafc;
+    min-height: 100vh;
+    padding: 0;
+    margin: 0;
+  }

static/index.html

@@ -278,13 +278,14 @@
                 <thead>
                   <tr>
                     <th style="width: 10%">账号ID</th>
-                    <th style="width: 18%">Cookie值</th>
+                    <th style="width: 16%">Cookie值</th>
                     <th style="width: 8%">关键词</th>
                     <th style="width: 8%">状态</th>
                     <th style="width: 9%">默认回复</th>
                     <th style="width: 9%">AI回复</th>
                     <th style="width: 10%">自动确认发货</th>
-                    <th style="width: 28%">操作</th>
+                    <th style="width: 12%">备注</th>
+                    <th style="width: 18%">操作</th>
                   </tr>
                 </thead>
                 <tbody></tbody>

static/js/app.js

@@ -1,5 +1,7 @@
 
-// 全局变量
+// ================================
+// 全局变量和配置
+// ================================
 const apiBase = location.origin;
 let keywordsData = {};
 let currentCookieId = '';
@@ -15,7 +17,9 @@ let accountKeywordCache = {};
 let cacheTimestamp = 0;
 const CACHE_DURATION = 30000; // 30秒缓存
 
-// 菜单切换功能
+// ================================
+// 通用功能 - 菜单切换和导航
+// ================================
 function showSection(sectionName) {
     console.log('切换到页面:', sectionName); // 调试信息
 
@@ -48,31 +52,31 @@ function showSection(sectionName) {
 
     // 根据不同section加载对应数据
     switch(sectionName) {
-    case 'dashboard':
+    case 'dashboard':        // 【仪表盘菜单】
         loadDashboard();
         break;
-    case 'accounts':
+    case 'accounts':         // 【账号管理菜单】
         loadCookies();
         break;
-    case 'items':
+    case 'items':           // 【商品管理菜单】
         loadItems();
         break;
-    case 'auto-reply':
+    case 'auto-reply':      // 【自动回复菜单】
         refreshAccountList();
         break;
-    case 'cards':
+    case 'cards':           // 【卡券管理菜单】
         loadCards();
         break;
-    case 'auto-delivery':
+    case 'auto-delivery':   // 【自动发货菜单】
         loadDeliveryRules();
         break;
-    case 'notification-channels':
+    case 'notification-channels':  // 【通知渠道菜单】
         loadNotificationChannels();
         break;
-    case 'message-notifications':
+    case 'message-notifications':  // 【消息通知菜单】
         loadMessageNotifications();
         break;
-    case 'logs':
+    case 'logs':            // 【日志管理菜单】
         // 如果没有日志数据，则加载
         setTimeout(() => {
         if (!window.allLogs || window.allLogs.length === 0) {
@@ -100,6 +104,10 @@ function toggleSidebar() {
     document.getElementById('sidebar').classList.toggle('show');
 }
 
+// ================================
+// 【仪表盘菜单】相关功能
+// ================================
+
 // 加载仪表盘数据
 async function loadDashboard() {
     try {
@@ -281,6 +289,10 @@ function clearKeywordCache() {
     cacheTimestamp = 0;
 }
 
+// ================================
+// 【自动回复菜单】相关功能
+// ================================
+
 // 刷新账号列表（用于自动回复页面）
 async function refreshAccountList() {
     try {
@@ -412,6 +424,42 @@ async function refreshAccountList() {
     }
 }
 
+// 只刷新关键词列表（不重新加载商品列表等其他数据）
+async function refreshKeywordsList() {
+    if (!currentCookieId) {
+        console.warn('没有选中的账号，无法刷新关键词列表');
+        return;
+    }
+
+    try {
+        const response = await fetch(`${apiBase}/keywords-with-item-id/${currentCookieId}`, {
+            headers: {
+                'Authorization': `Bearer ${authToken}`
+            }
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            console.log('刷新关键词列表，从服务器获取的数据:', data);
+
+            // 更新缓存数据
+            keywordsData[currentCookieId] = data;
+
+            // 只重新渲染关键词列表
+            renderKeywordsList(data);
+
+            // 清除关键词缓存
+            clearKeywordCache();
+        } else {
+            console.error('刷新关键词列表失败:', response.status);
+            showToast('刷新关键词列表失败', 'danger');
+        }
+    } catch (error) {
+        console.error('刷新关键词列表失败:', error);
+        showToast('刷新关键词列表失败', 'danger');
+    }
+}
+
 // 加载账号关键词
 async function loadAccountKeywords() {
     const accountId = document.getElementById('accountSelect').value;
@@ -576,22 +624,32 @@ async function addKeyword() {
         currentKeywords.splice(window.editingIndex, 1);
     }
 
-    // 准备要保存的关键词列表
-    let keywordsToSave = [...currentKeywords];
+    // 准备要保存的关键词列表（只包含文本类型的关键字）
+    let textKeywords = currentKeywords.filter(item => (item.type || 'text') === 'text');
 
     // 如果是编辑模式，先移除原关键词
     if (isEditMode && typeof window.editingIndex !== 'undefined') {
-        keywordsToSave.splice(window.editingIndex, 1);
+        // 需要重新计算在文本关键字中的索引
+        const originalKeyword = keywordsData[currentCookieId][window.editingIndex];
+        const textIndex = textKeywords.findIndex(item =>
+            item.keyword === originalKeyword.keyword &&
+            (item.item_id || '') === (originalKeyword.item_id || '')
+        );
+        if (textIndex !== -1) {
+            textKeywords.splice(textIndex, 1);
+        }
     }
 
-    // 检查关键词是否已存在（考虑商品ID）
-    const existingKeyword = keywordsToSave.find(item =>
+    // 检查关键词是否已存在（考虑商品ID，检查所有类型的关键词）
+    const allKeywords = keywordsData[currentCookieId] || [];
+    const existingKeyword = allKeywords.find(item =>
         item.keyword === keyword &&
         (item.item_id || '') === (itemId || '')
     );
     if (existingKeyword) {
         const itemIdText = itemId ? `（商品ID: ${itemId}）` : '（通用关键词）';
-        showToast(`关键词 "${keyword}" ${itemIdText} 已存在，请使用其他关键词或商品ID`, 'warning');
+        const typeText = existingKeyword.type === 'image' ? '图片' : '文本';
+        showToast(`关键词 "${keyword}" ${itemIdText} 已存在（${typeText}关键词），请使用其他关键词或商品ID`, 'warning');
         toggleLoading(false);
         return;
     }
@@ -602,7 +660,7 @@ async function addKeyword() {
         reply: reply,
         item_id: itemId || ''
     };
-    keywordsToSave.push(newKeyword);
+    textKeywords.push(newKeyword);
 
     const response = await fetch(`${apiBase}/keywords-with-item-id/${currentCookieId}`, {
         method: 'POST',
@@ -611,7 +669,7 @@ async function addKeyword() {
         'Authorization': `Bearer ${authToken}`
         },
         body: JSON.stringify({
-        keywords: keywordsToSave
+        keywords: textKeywords
         })
     });
 
@@ -655,12 +713,26 @@ async function addKeyword() {
         keywordInput.focus();
         }, 100);
 
-        loadAccountKeywords(); // 重新加载关键词列表
-        clearKeywordCache(); // 清除缓存
+        // 只刷新关键词列表，不重新加载整个界面
+        await refreshKeywordsList();
     } else {
+        try {
+            const errorData = await response.json();
+            const errorMessage = errorData.detail || '关键词添加失败';
+            console.error('关键词添加失败:', errorMessage);
+
+            // 检查是否是重复关键词的错误
+            if (errorMessage.includes('关键词已存在') || errorMessage.includes('关键词重复') || errorMessage.includes('UNIQUE constraint')) {
+                showToast(`❌ 关键词重复：${errorMessage}`, 'warning');
+            } else {
+                showToast(`❌ ${errorMessage}`, 'danger');
+            }
+        } catch (parseError) {
+            // 如果无法解析JSON，使用原始文本
             const errorText = await response.text();
             console.error('关键词添加失败:', errorText);
-        showToast('关键词添加失败', 'danger');
+            showToast('❌ 关键词添加失败', 'danger');
+        }
     }
     } catch (error) {
     console.error('添加关键词失败:', error);
@@ -881,9 +953,8 @@ async function deleteKeyword(cookieId, index) {
 
     if (response.ok) {
         showToast('关键词删除成功', 'success');
-        // 重新加载关键词列表
-        loadAccountKeywords();
-        clearKeywordCache(); // 清除缓存
+        // 只刷新关键词列表，不重新加载整个界面
+        await refreshKeywordsList();
     } else {
         const errorText = await response.text();
         console.error('关键词删除失败:', errorText);
@@ -902,6 +973,10 @@ function toggleLoading(show) {
     document.getElementById('loading').classList.toggle('d-none', !show);
 }
 
+// ================================
+// 通用工具函数
+// ================================
+
 // 显示提示消息
 function showToast(message, type = 'success') {
     const toastContainer = document.querySelector('.toast-container');
@@ -981,6 +1056,10 @@ async function fetchJSON(url, opts = {}) {
     }
 }
 
+// ================================
+// 【账号管理菜单】相关功能
+// ================================
+
 // 加载Cookie列表
 async function loadCookies() {
     try {
@@ -993,7 +1072,7 @@ async function loadCookies() {
     if (cookieDetails.length === 0) {
         tbody.innerHTML = `
         <tr>
-            <td colspan="7" class="text-center py-4 text-muted empty-state">
+            <td colspan="9" class="text-center py-4 text-muted empty-state">
             <i class="bi bi-inbox fs-1 d-block mb-3"></i>
             <h5>暂无账号</h5>
             <p class="mb-0">请添加新的闲鱼账号开始使用</p>
@@ -1120,6 +1199,13 @@ async function loadCookies() {
             </span>
             </div>
         </td>
+        <td class="align-middle">
+            <div class="remark-cell" data-cookie-id="${cookie.id}">
+                <span class="remark-display" onclick="editRemark('${cookie.id}', '${(cookie.remark || '').replace(/'/g, '&#39;')}')" title="点击编辑备注" style="cursor: pointer; color: #6c757d; font-size: 0.875rem;">
+                    ${cookie.remark || '<i class="bi bi-plus-circle text-muted"></i> 添加备注'}
+                </span>
+            </div>
+        </td>
         <td class="align-middle">
             <div class="btn-group" role="group">
             <button class="btn btn-sm btn-outline-primary" onclick="editCookieInline('${cookie.id}', '${cookie.value}')" title="修改Cookie" ${!isEnabled ? 'disabled' : ''}>
@@ -2109,7 +2195,9 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 });
 
-// ==================== 通知渠道管理功能 ====================
+// ================================
+// 【通知渠道菜单】相关功能
+// ================================
 
 // 通知渠道类型配置
 const channelTypeConfigs = {
@@ -2691,7 +2779,9 @@ async function updateNotificationChannel() {
     }
 }
 
-// ==================== 消息通知配置功能 ====================
+// ================================
+// 【消息通知菜单】相关功能
+// ================================
 
 // 加载消息通知配置
 async function loadMessageNotifications() {
@@ -2920,7 +3010,9 @@ async function saveAccountNotification() {
     }
 }
 
-// ==================== 卡券管理功能 ====================
+// ================================
+// 【卡券管理菜单】相关功能
+// ================================
 
 // 加载卡券列表
 async function loadCards() {
@@ -3505,7 +3597,9 @@ async function saveCard() {
     showToast(`网络错误: ${error.message}`, 'danger');
     }
 }
-// ==================== 自动发货功能 ====================
+// ================================
+// 【自动发货菜单】相关功能
+// ================================
 
 // 加载发货规则列表
 async function loadDeliveryRules() {
@@ -4631,7 +4725,9 @@ async function reloadSystemCache() {
     }
 }
 
-// ==================== 商品管理功能 ====================
+// ================================
+// 【商品管理菜单】相关功能
+// ================================
 
 // 切换商品多规格状态
 async function toggleItemMultiSpec(cookieId, itemId, isMultiSpec) {
@@ -5238,7 +5334,9 @@ function escapeHtml(text) {
     return div.innerHTML;
 }
 
-// ==================== 日志管理功能 ====================
+// ================================
+// 【日志管理菜单】相关功能
+// ================================
 
 window.autoRefreshInterval = null;
 window.allLogs = [];
@@ -6102,16 +6200,17 @@ async function addImageKeyword() {
             const modal = bootstrap.Modal.getInstance(document.getElementById('addImageKeywordModal'));
             modal.hide();
 
-            // 重新加载关键词列表
-            loadAccountKeywords();
-            clearKeywordCache();
+            // 只刷新关键词列表，不重新加载整个界面
+            await refreshKeywordsList();
         } else {
             try {
                 const errorData = await response.json();
                 let errorMessage = errorData.detail || '图片关键词添加失败';
 
                 // 根据不同的错误类型提供更友好的提示
-                if (errorMessage.includes('图片尺寸过大')) {
+                if (errorMessage.includes('关键词') && (errorMessage.includes('已存在') || errorMessage.includes('重复'))) {
+                    errorMessage = `❌ 关键词重复：${errorMessage}`;
+                } else if (errorMessage.includes('图片尺寸过大')) {
                     errorMessage = '❌ 图片尺寸过大，请选择尺寸较小的图片（建议不超过4096x4096像素）';
                 } else if (errorMessage.includes('图片像素总数过大')) {
                     errorMessage = '❌ 图片像素总数过大，请选择分辨率较低的图片';
@@ -6259,3 +6358,118 @@ async function exportKeywords() {
         toggleLoading(false);
     }
 }
+
+// ==================== 备注管理功能 ====================
+
+// 编辑备注
+function editRemark(cookieId, currentRemark) {
+    console.log('editRemark called:', cookieId, currentRemark); // 调试信息
+    const remarkCell = document.querySelector(`[data-cookie-id="${cookieId}"] .remark-display`);
+    if (!remarkCell) {
+        console.log('remarkCell not found'); // 调试信息
+        return;
+    }
+
+    // 创建输入框
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'form-control form-control-sm';
+    input.value = currentRemark || '';
+    input.placeholder = '请输入备注...';
+    input.style.fontSize = '0.875rem';
+    input.maxLength = 100; // 限制备注长度
+
+    // 保存原始内容和原始值
+    const originalContent = remarkCell.innerHTML;
+    const originalValue = currentRemark || '';
+
+    // 标记是否已经进行了编辑
+    let hasChanged = false;
+    let isProcessing = false; // 防止重复处理
+
+    // 替换为输入框
+    remarkCell.innerHTML = '';
+    remarkCell.appendChild(input);
+
+    // 监听输入变化
+    input.addEventListener('input', () => {
+        hasChanged = input.value.trim() !== originalValue;
+    });
+
+    // 保存函数
+    const saveRemark = async () => {
+        console.log('saveRemark called, isProcessing:', isProcessing, 'hasChanged:', hasChanged); // 调试信息
+        if (isProcessing) return; // 防止重复调用
+
+        const newRemark = input.value.trim();
+        console.log('newRemark:', newRemark, 'originalValue:', originalValue); // 调试信息
+
+        // 如果没有变化，直接恢复显示
+        if (!hasChanged || newRemark === originalValue) {
+            console.log('No changes detected, restoring original content'); // 调试信息
+            remarkCell.innerHTML = originalContent;
+            return;
+        }
+
+        isProcessing = true;
+
+        try {
+            const response = await fetch(`${apiBase}/cookies/${cookieId}/remark`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${authToken}`
+                },
+                body: JSON.stringify({ remark: newRemark })
+            });
+
+            if (response.ok) {
+                // 更新显示
+                remarkCell.innerHTML = `
+                    <span class="remark-display" onclick="editRemark('${cookieId}', '${newRemark.replace(/'/g, '&#39;')}')" title="点击编辑备注" style="cursor: pointer; color: #6c757d; font-size: 0.875rem;">
+                        ${newRemark || '<i class="bi bi-plus-circle text-muted"></i> 添加备注'}
+                    </span>
+                `;
+                showToast('备注更新成功', 'success');
+            } else {
+                const errorData = await response.json();
+                showToast(`备注更新失败: ${errorData.detail || '未知错误'}`, 'danger');
+                // 恢复原始内容
+                remarkCell.innerHTML = originalContent;
+            }
+        } catch (error) {
+            console.error('更新备注失败:', error);
+            showToast('备注更新失败', 'danger');
+            // 恢复原始内容
+            remarkCell.innerHTML = originalContent;
+        } finally {
+            isProcessing = false;
+        }
+    };
+
+    // 取消函数
+    const cancelEdit = () => {
+        if (isProcessing) return;
+        remarkCell.innerHTML = originalContent;
+    };
+
+    // 延迟绑定blur事件，避免立即触发
+    setTimeout(() => {
+        input.addEventListener('blur', saveRemark);
+    }, 100);
+
+    // 绑定键盘事件
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            saveRemark();
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            cancelEdit();
+        }
+    });
+
+    // 聚焦并选中文本
+    input.focus();
+    input.select();
+}