mirror of
https://github.com/zhinianboke/xianyu-auto-reply.git
synced 2025-08-29 09:07:36 +08:00
Compare commits
6 Commits
61d8f6eabf
...
765c9fe48f
| Author | SHA1 | Date | |
|---|---|---|---|
|
765c9fe48f | ||
|
|
312fa99316 | ||
|
|
9cef1ef6f2 | ||
|
|
26f1738001 | ||
|
|
b09cd98e97 | ||
|
|
b414ab4c06 |
@ -1,152 +0,0 @@
|
||||
# CSS模块化拆分完成总结
|
||||
|
||||
## 拆分概述
|
||||
|
||||
成功将原来的单个 `app.css` 文件（1,279行）按功能模块拆分成10个独立的CSS文件，提高了代码的可维护性和模块化程度。
|
||||
|
||||
## 拆分结果
|
||||
|
||||
### 文件结构
|
||||
```
|
||||
static/css/
|
||||
├── variables.css # CSS变量和根样式 (19行)
|
||||
├── layout.css # 布局相关样式 (134行)
|
||||
├── components.css # 通用组件样式 (200行)
|
||||
├── dashboard.css # 仪表盘样式 (45行)
|
||||
├── keywords.css # 关键词管理样式 (200行)
|
||||
├── accounts.css # 账号管理样式 (150行)
|
||||
├── logs.css # 日志管理样式 (60行)
|
||||
├── notifications.css # 通知渠道样式 (40行)
|
||||
├── login.css # 登录相关样式 (70行)
|
||||
├── utilities.css # 工具类和响应式样式 (120行)
|
||||
└── REFACTOR_SUMMARY.md # 本总结文档
|
||||
```
|
||||
|
||||
### 模块详细说明
|
||||
|
||||
#### 1. variables.css - CSS变量和根样式
|
||||
- CSS自定义属性（颜色、阴影、间距）
|
||||
- 全局body样式
|
||||
- 作为其他模块的基础
|
||||
|
||||
#### 2. layout.css - 布局相关样式
|
||||
- 侧边栏完整样式系统
|
||||
- 主内容区域布局
|
||||
- 响应式设计和移动端适配
|
||||
- 导航菜单样式
|
||||
|
||||
#### 3. components.css - 通用组件样式
|
||||
- 卡片组件样式
|
||||
- 按钮系统（各种类型和状态）
|
||||
- 表格样式
|
||||
- 表单控件
|
||||
- 模态框和Toast通知
|
||||
- 加载动画
|
||||
|
||||
#### 4. dashboard.css - 仪表盘样式
|
||||
- 统计卡片样式
|
||||
- 统计图标和数值显示
|
||||
- 仪表盘网格布局
|
||||
|
||||
#### 5. keywords.css - 关键词管理样式
|
||||
- 关键词容器和头部
|
||||
- 输入区域和表单
|
||||
- 关键词列表和项目
|
||||
- 操作按钮和状态
|
||||
|
||||
#### 6. accounts.css - 账号管理样式
|
||||
- 账号选择器
|
||||
- 状态切换开关
|
||||
- Cookie值显示
|
||||
- 账号状态徽章
|
||||
|
||||
#### 7. logs.css - 日志管理样式
|
||||
- 日志容器和滚动条
|
||||
- 不同级别的日志样式
|
||||
- 时间戳和来源显示
|
||||
|
||||
#### 8. notifications.css - 通知渠道样式
|
||||
- 通知渠道卡片
|
||||
- 悬停效果和交互
|
||||
- 图标和按钮样式
|
||||
|
||||
#### 9. login.css - 登录相关样式
|
||||
- 扫码登录按钮
|
||||
- 二维码容器
|
||||
- 步骤指引
|
||||
- 等待提示动画
|
||||
|
||||
#### 10. utilities.css - 工具类和响应式样式
|
||||
- 移动端响应式调整
|
||||
- 表格优化样式
|
||||
- 商品管理特定样式
|
||||
- 大屏幕优化
|
||||
|
||||
## 加载顺序
|
||||
|
||||
CSS文件按以下顺序加载，确保样式的正确层叠：
|
||||
|
||||
1. `variables.css` - 变量定义（最先加载）
|
||||
2. `layout.css` - 布局基础
|
||||
3. `components.css` - 通用组件
|
||||
4. `dashboard.css` - 仪表盘功能
|
||||
5. `keywords.css` - 关键词管理功能
|
||||
6. `accounts.css` - 账号管理功能
|
||||
7. `logs.css` - 日志管理功能
|
||||
8. `notifications.css` - 通知设置功能
|
||||
9. `login.css` - 登录功能
|
||||
10. `utilities.css` - 工具类（最后加载，优先级最高）
|
||||
|
||||
## 主要优势
|
||||
|
||||
### 1. 模块化管理
|
||||
- ✅ 每个功能模块独立管理
|
||||
- ✅ 便于定位和修改特定功能的样式
|
||||
- ✅ 减少样式冲突的可能性
|
||||
|
||||
### 2. 开发效率
|
||||
- ✅ 开发者可以专注于特定模块
|
||||
- ✅ 并行开发不同功能模块
|
||||
- ✅ 代码审查更加精确
|
||||
|
||||
### 3. 维护便利
|
||||
- ✅ 修改某个功能不影响其他模块
|
||||
- ✅ 便于添加新功能模块
|
||||
- ✅ 便于删除不需要的功能
|
||||
|
||||
### 4. 性能优化潜力
|
||||
- ✅ 可以按需加载特定模块
|
||||
- ✅ 便于实现代码分割
|
||||
- ✅ 支持条件加载
|
||||
|
||||
## 兼容性保证
|
||||
|
||||
- ✅ 保持所有原有样式不变
|
||||
- ✅ 保持所有功能正常工作
|
||||
- ✅ 保持响应式设计完整
|
||||
- ✅ 保持动画效果不变
|
||||
|
||||
## 后续优化建议
|
||||
|
||||
### 短期优化
|
||||
- [ ] 为每个模块添加详细的注释文档
|
||||
- [ ] 创建样式指南和使用规范
|
||||
- [ ] 添加CSS变量的完整文档
|
||||
|
||||
### 长期规划
|
||||
- [ ] 考虑引入CSS预处理器（Sass/Less）
|
||||
- [ ] 实现主题切换功能
|
||||
- [ ] 建立组件库文档系统
|
||||
- [ ] 添加CSS单元测试
|
||||
|
||||
## 总结
|
||||
|
||||
通过这次模块化拆分：
|
||||
|
||||
1. **代码组织更清晰**: 每个文件职责单一，便于理解和维护
|
||||
2. **开发效率提升**: 开发者可以快速定位到相关样式文件
|
||||
3. **团队协作友好**: 减少合并冲突，支持并行开发
|
||||
4. **扩展性增强**: 新功能可以独立添加CSS模块
|
||||
5. **维护成本降低**: 修改影响范围明确，降低回归风险
|
||||
|
||||
这次拆分为项目的长期发展和团队协作奠定了坚实的基础。
|
||||
@ -1,184 +0,0 @@
|
||||
/* 账号选择器现代化 */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 账号状态样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.cookie-id {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
1278
static/css/app.css
Normal file
1278
static/css/app.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,234 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
/* 仪表盘样式 */
|
||||
.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;
|
||||
}
|
||||
@ -1,246 +0,0 @@
|
||||
/* 关键词管理现代化样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -1,168 +0,0 @@
|
||||
/* 侧边栏样式 */
|
||||
.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;
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
/* 扫码登录按钮特殊样式 */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
/* 日志管理样式 */
|
||||
.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;
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
/* 通知渠道卡片样式 */
|
||||
.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); /* 减少按钮悬停缩放 */
|
||||
}
|
||||
@ -1,149 +0,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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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; /* 移动端描述文字更小 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品管理表格优化 */
|
||||
#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;
|
||||
}
|
||||
|
||||
/* 大屏幕优化 */
|
||||
@media (min-width: 1400px) {
|
||||
.channel-type-card {
|
||||
min-height: 200px; /* 大屏幕稍微增加高度 */
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
: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;
|
||||
}
|
||||
@ -6,17 +6,8 @@
|
||||
<title>闲鱼自动回复管理系统</title>
|
||||
<link rel="stylesheet" href="/static/lib/bootstrap/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/static/lib/bootstrap-icons/bootstrap-icons.css">
|
||||
<!-- 模块化CSS文件 -->
|
||||
<link rel="stylesheet" href="/static/css/variables.css">
|
||||
<link rel="stylesheet" href="/static/css/layout.css">
|
||||
<link rel="stylesheet" href="/static/css/components.css">
|
||||
<link rel="stylesheet" href="/static/css/dashboard.css">
|
||||
<link rel="stylesheet" href="/static/css/keywords.css">
|
||||
<link rel="stylesheet" href="/static/css/accounts.css">
|
||||
<link rel="stylesheet" href="/static/css/logs.css">
|
||||
<link rel="stylesheet" href="/static/css/notifications.css">
|
||||
<link rel="stylesheet" href="/static/css/login.css">
|
||||
<link rel="stylesheet" href="/static/css/utilities.css">
|
||||
|
||||
<link rel="stylesheet" href="/static/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 移动端菜单切换按钮 -->
|
||||
@ -1766,7 +1757,6 @@
|
||||
<!-- JS依赖 -->
|
||||
<script src="/static/lib/bootstrap/bootstrap.bundle.min.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
|
||||
|
||||
<!-- 默认回复管理模态框 -->
|
||||
<div class="modal fade" id="defaultReplyModal" tabindex="-1" aria-labelledby="defaultReplyModalLabel" aria-hidden="true">
|
||||
@ -1913,6 +1903,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- AI回复配置模态框 -->
|
||||
<div class="modal fade" id="aiReplyConfigModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
|
||||
@ -1,77 +0,0 @@
|
||||
/**
|
||||
* 闲鱼自动回复系统 - 模块化主入口文件
|
||||
*
|
||||
* 此文件负责引入所有功能模块，替代原来的单一app.js文件
|
||||
*
|
||||
* 模块结构：
|
||||
* - globals.js: 全局变量
|
||||
* - utils.js: 通用工具函数
|
||||
* - navigation.js: 页面导航功能
|
||||
* - dashboard.js: 仪表盘管理
|
||||
* - keyword-cache.js: 关键词缓存管理
|
||||
* - account-list.js: 账号列表管理
|
||||
* - keywords.js: 关键词管理
|
||||
* - cookies.js: Cookie管理
|
||||
* - main-features.js: 主要功能
|
||||
* - all-other-features.js: 所有其他功能
|
||||
* - init.js: 应用初始化
|
||||
*/
|
||||
|
||||
// 注意：在HTML中需要按以下顺序引入所有模块文件：
|
||||
/*
|
||||
<script src="/static/js/modules/globals.js"></script>
|
||||
<script src="/static/js/modules/utils.js"></script>
|
||||
<script src="/static/js/modules/navigation.js"></script>
|
||||
<script src="/static/js/modules/dashboard.js"></script>
|
||||
<script src="/static/js/modules/keyword-cache.js"></script>
|
||||
<script src="/static/js/modules/account-list.js"></script>
|
||||
<script src="/static/js/modules/keywords.js"></script>
|
||||
<script src="/static/js/modules/cookies.js"></script>
|
||||
<script src="/static/js/modules/main-features.js"></script>
|
||||
<script src="/static/js/modules/all-other-features.js"></script>
|
||||
<script src="/static/js/modules/init.js"></script>
|
||||
*/
|
||||
|
||||
// 模块加载完成后的初始化检查
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('闲鱼自动回复系统 - 模块化版本已加载');
|
||||
|
||||
// 检查关键函数是否存在
|
||||
const requiredFunctions = [
|
||||
'showSection',
|
||||
'loadDashboard',
|
||||
'loadCookies',
|
||||
'refreshAccountList',
|
||||
'loadAccountKeywords',
|
||||
'showToast',
|
||||
'toggleLoading'
|
||||
];
|
||||
|
||||
const missingFunctions = requiredFunctions.filter(func => typeof window[func] !== 'function');
|
||||
|
||||
if (missingFunctions.length > 0) {
|
||||
console.error('缺少必要的函数:', missingFunctions);
|
||||
console.error('请检查模块文件是否正确加载');
|
||||
} else {
|
||||
console.log('所有必要的函数已加载完成');
|
||||
}
|
||||
});
|
||||
|
||||
// 导出模块信息（用于调试）
|
||||
window.moduleInfo = {
|
||||
version: '1.0.0',
|
||||
modules: [
|
||||
'globals',
|
||||
'utils',
|
||||
'navigation',
|
||||
'dashboard',
|
||||
'keyword-cache',
|
||||
'account-list',
|
||||
'keywords',
|
||||
'cookies',
|
||||
'main-features',
|
||||
'all-other-features',
|
||||
'init'
|
||||
],
|
||||
loadedAt: new Date().toISOString()
|
||||
};
|
||||
6812
static/js/app.js
6812
static/js/app.js
File diff suppressed because it is too large
Load Diff
@ -1,132 +0,0 @@
|
||||
// ==================== 账号列表管理 ====================
|
||||
|
||||
// 刷新账号列表（用于自动回复页面）
|
||||
async function refreshAccountList() {
|
||||
try {
|
||||
toggleLoading(true);
|
||||
|
||||
// 获取账号列表
|
||||
const response = await fetch(`${apiBase}/cookies/details`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const accounts = await response.json();
|
||||
const select = document.getElementById('accountSelect');
|
||||
select.innerHTML = '<option value="">🔍 请选择一个账号开始配置...</option>';
|
||||
|
||||
// 为每个账号获取关键词数量
|
||||
const accountsWithKeywords = await Promise.all(
|
||||
accounts.map(async (account) => {
|
||||
try {
|
||||
const keywordsResponse = await fetch(`${apiBase}/keywords/${account.id}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (keywordsResponse.ok) {
|
||||
const keywordsData = await keywordsResponse.json();
|
||||
return {
|
||||
...account,
|
||||
keywords: keywordsData,
|
||||
keywordCount: keywordsData.length
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...account,
|
||||
keywordCount: 0
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`获取账号 ${account.id} 关键词失败:`, error);
|
||||
return {
|
||||
...account,
|
||||
keywordCount: 0
|
||||
};
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// 渲染账号选项（显示所有账号，但标识禁用状态）
|
||||
if (accountsWithKeywords.length === 0) {
|
||||
select.innerHTML = '<option value="">❌ 暂无账号，请先添加账号</option>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 分组显示：先显示启用的账号，再显示禁用的账号
|
||||
const enabledAccounts = accountsWithKeywords.filter(account => {
|
||||
const enabled = account.enabled === undefined ? true : account.enabled;
|
||||
console.log(`账号 ${account.id} 过滤状态: enabled=${account.enabled}, 判断为启用=${enabled}`);
|
||||
return enabled;
|
||||
});
|
||||
const disabledAccounts = accountsWithKeywords.filter(account => {
|
||||
const enabled = account.enabled === undefined ? true : account.enabled;
|
||||
return !enabled;
|
||||
});
|
||||
|
||||
// 渲染启用的账号
|
||||
enabledAccounts.forEach(account => {
|
||||
const option = document.createElement('option');
|
||||
option.value = account.id;
|
||||
|
||||
// 根据关键词数量显示不同的图标和样式
|
||||
let icon = '📝';
|
||||
let status = '';
|
||||
if (account.keywordCount === 0) {
|
||||
icon = '⚪';
|
||||
status = ' (未配置)';
|
||||
} else if (account.keywordCount >= 5) {
|
||||
icon = '🟢';
|
||||
status = ` (${account.keywordCount} 个关键词)`;
|
||||
} else {
|
||||
icon = '🟡';
|
||||
status = ` (${account.keywordCount} 个关键词)`;
|
||||
}
|
||||
|
||||
option.textContent = `${icon} ${account.id}${status}`;
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
// 如果有禁用的账号，添加分隔线和禁用账号
|
||||
if (disabledAccounts.length > 0) {
|
||||
// 添加分隔线
|
||||
const separatorOption = document.createElement('option');
|
||||
separatorOption.disabled = true;
|
||||
separatorOption.textContent = `--- 禁用账号 (${disabledAccounts.length} 个) ---`;
|
||||
select.appendChild(separatorOption);
|
||||
|
||||
// 渲染禁用的账号
|
||||
disabledAccounts.forEach(account => {
|
||||
const option = document.createElement('option');
|
||||
option.value = account.id;
|
||||
|
||||
// 禁用账号使用特殊图标和样式
|
||||
let icon = '🔴';
|
||||
let status = '';
|
||||
if (account.keywordCount === 0) {
|
||||
status = ' (未配置) [已禁用]';
|
||||
} else {
|
||||
status = ` (${account.keywordCount} 个关键词) [已禁用]`;
|
||||
}
|
||||
|
||||
option.textContent = `${icon} ${account.id}${status}`;
|
||||
option.style.color = '#6b7280';
|
||||
option.style.fontStyle = 'italic';
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
console.log('账号列表刷新完成，关键词统计:', accountsWithKeywords.map(a => ({ id: a.id, keywords: a.keywordCount })));
|
||||
} else {
|
||||
showToast('获取账号列表失败', 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('刷新账号列表失败:', error);
|
||||
showToast('刷新账号列表失败', 'danger');
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
@ -1,197 +0,0 @@
|
||||
// ==================== 所有其他功能模块 ====================
|
||||
// 此文件包含原app.js中除已拆分模块外的所有其他功能
|
||||
|
||||
// ==================== 默认回复管理功能 ====================
|
||||
|
||||
// 打开默认回复管理器
|
||||
async function openDefaultReplyManager() {
|
||||
try {
|
||||
await loadDefaultReplies();
|
||||
const modal = new bootstrap.Modal(document.getElementById('defaultReplyModal'));
|
||||
modal.show();
|
||||
} catch (error) {
|
||||
console.error('打开默认回复管理器失败:', error);
|
||||
showToast('打开默认回复管理器失败', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// 加载默认回复列表
|
||||
async function loadDefaultReplies() {
|
||||
try {
|
||||
// 获取所有账号
|
||||
const accountsResponse = await fetch(`${apiBase}/cookies`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!accountsResponse.ok) {
|
||||
throw new Error('获取账号列表失败');
|
||||
}
|
||||
|
||||
const accounts = await accountsResponse.json();
|
||||
|
||||
// 获取所有默认回复设置
|
||||
const repliesResponse = await fetch(`${apiBase}/default-replies`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
let defaultReplies = {};
|
||||
if (repliesResponse.ok) {
|
||||
defaultReplies = await repliesResponse.json();
|
||||
}
|
||||
|
||||
renderDefaultRepliesList(accounts, defaultReplies);
|
||||
} catch (error) {
|
||||
console.error('加载默认回复列表失败:', error);
|
||||
showToast('加载默认回复列表失败', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染默认回复列表
|
||||
function renderDefaultRepliesList(accounts, defaultReplies) {
|
||||
const tbody = document.getElementById('defaultReplyTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (accounts.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="4" class="text-center py-4 text-muted">
|
||||
<i class="bi bi-chat-text fs-1 d-block mb-3"></i>
|
||||
<h5>暂无账号数据</h5>
|
||||
<p class="mb-0">请先添加账号</p>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
accounts.forEach(accountId => {
|
||||
const replySettings = defaultReplies[accountId] || { enabled: false, reply_content: '' };
|
||||
const tr = document.createElement('tr');
|
||||
|
||||
// 状态标签
|
||||
const statusBadge = replySettings.enabled ?
|
||||
'<span class="badge bg-success">启用</span>' :
|
||||
'<span class="badge bg-secondary">禁用</span>';
|
||||
|
||||
// 回复内容预览
|
||||
let contentPreview = replySettings.reply_content || '未设置';
|
||||
if (contentPreview.length > 50) {
|
||||
contentPreview = contentPreview.substring(0, 50) + '...';
|
||||
}
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
<strong class="text-primary">${accountId}</strong>
|
||||
</td>
|
||||
<td>${statusBadge}</td>
|
||||
<td>
|
||||
<div class="text-truncate" style="max-width: 300px;" title="${replySettings.reply_content || ''}">
|
||||
${contentPreview}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group" role="group">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="editDefaultReply('${accountId}')" title="编辑">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-info" onclick="testDefaultReply('${accountId}')" title="测试">
|
||||
<i class="bi bi-play"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑默认回复
|
||||
async function editDefaultReply(accountId) {
|
||||
try {
|
||||
// 获取当前设置
|
||||
const response = await fetch(`${apiBase}/default-replies/${accountId}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
let settings = { enabled: false, reply_content: '' };
|
||||
if (response.ok) {
|
||||
settings = await response.json();
|
||||
}
|
||||
|
||||
// 填充编辑表单
|
||||
document.getElementById('editAccountId').value = accountId;
|
||||
document.getElementById('editAccountIdDisplay').value = accountId;
|
||||
document.getElementById('editDefaultReplyEnabled').checked = settings.enabled;
|
||||
document.getElementById('editReplyContent').value = settings.reply_content || '';
|
||||
|
||||
// 根据启用状态显示/隐藏内容输入框
|
||||
toggleReplyContentVisibility();
|
||||
|
||||
// 显示编辑模态框
|
||||
const modal = new bootstrap.Modal(document.getElementById('editDefaultReplyModal'));
|
||||
modal.show();
|
||||
} catch (error) {
|
||||
console.error('获取默认回复设置失败:', error);
|
||||
showToast('获取默认回复设置失败', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// 切换回复内容输入框的显示/隐藏
|
||||
function toggleReplyContentVisibility() {
|
||||
const enabled = document.getElementById('editDefaultReplyEnabled').checked;
|
||||
const contentGroup = document.getElementById('editReplyContentGroup');
|
||||
contentGroup.style.display = enabled ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// 保存默认回复设置
|
||||
async function saveDefaultReply() {
|
||||
try {
|
||||
const accountId = document.getElementById('editAccountId').value;
|
||||
const enabled = document.getElementById('editDefaultReplyEnabled').checked;
|
||||
const replyContent = document.getElementById('editReplyContent').value;
|
||||
|
||||
if (enabled && !replyContent.trim()) {
|
||||
showToast('启用默认回复时必须设置回复内容', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
enabled: enabled,
|
||||
reply_content: enabled ? replyContent : null
|
||||
};
|
||||
|
||||
const response = await fetch(`${apiBase}/default-replies/${accountId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showToast('默认回复设置保存成功', 'success');
|
||||
bootstrap.Modal.getInstance(document.getElementById('editDefaultReplyModal')).hide();
|
||||
loadDefaultReplies(); // 刷新列表
|
||||
loadCookies(); // 刷新账号列表以更新默认回复状态显示
|
||||
} else {
|
||||
const error = await response.text();
|
||||
showToast(`保存失败: ${error}`, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存默认回复设置失败:', error);
|
||||
showToast('保存默认回复设置失败', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// 测试默认回复
|
||||
function testDefaultReply(accountId) {
|
||||
console.log('测试默认回复功能，账号ID:', accountId);
|
||||
showToast('测试功能开发中...', 'info');
|
||||
}
|
||||
@ -1,347 +0,0 @@
|
||||
// ==================== Cookie管理 ====================
|
||||
|
||||
// 加载Cookie列表
|
||||
async function loadCookies() {
|
||||
try {
|
||||
toggleLoading(true);
|
||||
const tbody = document.querySelector('#cookieTable tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
const cookieDetails = await fetchJSON(apiBase + '/cookies/details');
|
||||
|
||||
if (cookieDetails.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" 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>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// 为每个账号获取关键词数量和默认回复设置并渲染
|
||||
const accountsWithKeywords = await Promise.all(
|
||||
cookieDetails.map(async (cookie) => {
|
||||
try {
|
||||
// 获取关键词数量
|
||||
const keywordsResponse = await fetch(`${apiBase}/keywords/${cookie.id}`, {
|
||||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||||
});
|
||||
|
||||
let keywordCount = 0;
|
||||
if (keywordsResponse.ok) {
|
||||
const keywordsData = await keywordsResponse.json();
|
||||
keywordCount = keywordsData.length;
|
||||
}
|
||||
|
||||
// 获取默认回复设置
|
||||
const defaultReplyResponse = await fetch(`${apiBase}/default-replies/${cookie.id}`, {
|
||||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||||
});
|
||||
|
||||
let defaultReply = { enabled: false, reply_content: '' };
|
||||
if (defaultReplyResponse.ok) {
|
||||
defaultReply = await defaultReplyResponse.json();
|
||||
}
|
||||
|
||||
// 获取AI回复设置
|
||||
const aiReplyResponse = await fetch(`${apiBase}/ai-reply-settings/${cookie.id}`, {
|
||||
headers: { 'Authorization': `Bearer ${authToken}` }
|
||||
});
|
||||
|
||||
let aiReply = { ai_enabled: false, model_name: 'qwen-plus' };
|
||||
if (aiReplyResponse.ok) {
|
||||
aiReply = await aiReplyResponse.json();
|
||||
}
|
||||
|
||||
return {
|
||||
...cookie,
|
||||
keywordCount: keywordCount,
|
||||
defaultReply: defaultReply,
|
||||
aiReply: aiReply
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
...cookie,
|
||||
keywordCount: 0,
|
||||
defaultReply: { enabled: false, reply_content: '' },
|
||||
aiReply: { ai_enabled: false, model_name: 'qwen-plus' }
|
||||
};
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
accountsWithKeywords.forEach(cookie => {
|
||||
// 使用数据库中的实际状态，默认为启用
|
||||
const isEnabled = cookie.enabled === undefined ? true : cookie.enabled;
|
||||
|
||||
console.log(`账号 ${cookie.id} 状态: enabled=${cookie.enabled}, isEnabled=${isEnabled}`); // 调试信息
|
||||
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = `account-row ${isEnabled ? 'enabled' : 'disabled'}`;
|
||||
// 默认回复状态标签
|
||||
const defaultReplyBadge = cookie.defaultReply.enabled ?
|
||||
'<span class="badge bg-success">启用</span>' :
|
||||
'<span class="badge bg-secondary">禁用</span>';
|
||||
|
||||
// AI回复状态标签
|
||||
const aiReplyBadge = cookie.aiReply.ai_enabled ?
|
||||
'<span class="badge bg-primary">AI启用</span>' :
|
||||
'<span class="badge bg-secondary">AI禁用</span>';
|
||||
|
||||
// 自动确认发货状态（默认开启）
|
||||
const autoConfirm = cookie.auto_confirm === undefined ? true : cookie.auto_confirm;
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="align-middle">
|
||||
<div class="cookie-id">
|
||||
<strong class="text-primary">${cookie.id}</strong>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="cookie-value" title="点击复制Cookie" style="font-family: monospace; font-size: 0.875rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
||||
${cookie.value || '未设置'}
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<span class="badge ${cookie.keywordCount > 0 ? 'bg-success' : 'bg-secondary'}">
|
||||
${cookie.keywordCount} 个关键词
|
||||
</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<label class="status-toggle" title="${isEnabled ? '点击禁用' : '点击启用'}">
|
||||
<input type="checkbox" ${isEnabled ? 'checked' : ''} onchange="toggleAccountStatus('${cookie.id}', this.checked)">
|
||||
<span class="status-slider"></span>
|
||||
</label>
|
||||
<span class="status-badge ${isEnabled ? 'enabled' : 'disabled'}" title="${isEnabled ? '账号已启用' : '账号已禁用'}">
|
||||
<i class="bi bi-${isEnabled ? 'check-circle-fill' : 'x-circle-fill'}"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
${defaultReplyBadge}
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
${aiReplyBadge}
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<label class="status-toggle" title="${autoConfirm ? '点击关闭自动确认发货' : '点击开启自动确认发货'}">
|
||||
<input type="checkbox" ${autoConfirm ? 'checked' : ''} onchange="toggleAutoConfirm('${cookie.id}', this.checked)">
|
||||
<span class="status-slider"></span>
|
||||
</label>
|
||||
<span class="status-badge ${autoConfirm ? 'enabled' : 'disabled'}" title="${autoConfirm ? '自动确认发货已开启' : '自动确认发货已关闭'}">
|
||||
<i class="bi bi-${autoConfirm ? 'truck' : 'truck-flatbed'}"></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' : ''}>
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-success" onclick="goToAutoReply('${cookie.id}')" title="${isEnabled ? '设置自动回复' : '配置关键词 (账号已禁用)'}">
|
||||
<i class="bi bi-arrow-right-circle"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-warning" onclick="configAIReply('${cookie.id}')" title="配置AI回复" ${!isEnabled ? 'disabled' : ''}>
|
||||
<i class="bi bi-robot"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-info" onclick="copyCookie('${cookie.id}', '${cookie.value}')" title="复制Cookie">
|
||||
<i class="bi bi-clipboard"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="delCookie('${cookie.id}')" title="删除账号">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
// 为Cookie值添加点击复制功能
|
||||
document.querySelectorAll('.cookie-value').forEach(element => {
|
||||
element.style.cursor = 'pointer';
|
||||
element.addEventListener('click', function() {
|
||||
const cookieValue = this.textContent;
|
||||
if (cookieValue && cookieValue !== '未设置') {
|
||||
navigator.clipboard.writeText(cookieValue).then(() => {
|
||||
showToast('Cookie已复制到剪贴板', 'success');
|
||||
}).catch(() => {
|
||||
showToast('复制失败，请手动复制', 'error');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
// 错误已在fetchJSON中处理
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 复制Cookie
|
||||
function copyCookie(id, value) {
|
||||
if (!value || value === '未设置') {
|
||||
showToast('该账号暂无Cookie值', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(value).then(() => {
|
||||
showToast(`账号 "${id}" 的Cookie已复制到剪贴板`, 'success');
|
||||
}).catch(() => {
|
||||
// 降级方案：创建临时文本框
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = value;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showToast(`账号 "${id}" 的Cookie已复制到剪贴板`, 'success');
|
||||
} catch (err) {
|
||||
showToast('复制失败，请手动复制', 'error');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
|
||||
// 删除Cookie
|
||||
async function delCookie(id) {
|
||||
if (!confirm(`确定要删除账号 "${id}" 吗？此操作不可恢复。`)) return;
|
||||
|
||||
try {
|
||||
await fetchJSON(apiBase + `/cookies/${id}`, { method: 'DELETE' });
|
||||
showToast(`账号 "${id}" 已删除`, 'success');
|
||||
loadCookies();
|
||||
} catch (err) {
|
||||
// 错误已在fetchJSON中处理
|
||||
}
|
||||
}
|
||||
|
||||
// 内联编辑Cookie
|
||||
function editCookieInline(id, currentValue) {
|
||||
const row = event.target.closest('tr');
|
||||
const cookieValueCell = row.querySelector('.cookie-value');
|
||||
const originalContent = cookieValueCell.innerHTML;
|
||||
|
||||
// 存储原始数据到全局变量，避免HTML注入问题
|
||||
window.editingCookieData = {
|
||||
id: id,
|
||||
originalContent: originalContent,
|
||||
originalValue: currentValue || ''
|
||||
};
|
||||
|
||||
// 创建编辑界面容器
|
||||
const editContainer = document.createElement('div');
|
||||
editContainer.className = 'd-flex gap-2';
|
||||
|
||||
// 创建输入框
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.className = 'form-control form-control-sm';
|
||||
input.id = `edit-${id}`;
|
||||
input.value = currentValue || '';
|
||||
input.placeholder = '输入新的Cookie值';
|
||||
|
||||
// 创建保存按钮
|
||||
const saveBtn = document.createElement('button');
|
||||
saveBtn.className = 'btn btn-sm btn-success';
|
||||
saveBtn.title = '保存';
|
||||
saveBtn.innerHTML = '<i class="bi bi-check"></i>';
|
||||
saveBtn.onclick = () => saveCookieInline(id);
|
||||
|
||||
// 创建取消按钮
|
||||
const cancelBtn = document.createElement('button');
|
||||
cancelBtn.className = 'btn btn-sm btn-secondary';
|
||||
cancelBtn.title = '取消';
|
||||
cancelBtn.innerHTML = '<i class="bi bi-x"></i>';
|
||||
cancelBtn.onclick = () => cancelCookieEdit(id);
|
||||
|
||||
// 组装编辑界面
|
||||
editContainer.appendChild(input);
|
||||
editContainer.appendChild(saveBtn);
|
||||
editContainer.appendChild(cancelBtn);
|
||||
|
||||
// 替换原内容
|
||||
cookieValueCell.innerHTML = '';
|
||||
cookieValueCell.appendChild(editContainer);
|
||||
|
||||
// 聚焦输入框
|
||||
input.focus();
|
||||
input.select();
|
||||
|
||||
// 添加键盘事件监听
|
||||
input.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
saveCookieInline(id);
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
cancelCookieEdit(id);
|
||||
}
|
||||
});
|
||||
|
||||
// 禁用该行的其他按钮
|
||||
const actionButtons = row.querySelectorAll('.btn-group button');
|
||||
actionButtons.forEach(btn => btn.disabled = true);
|
||||
}
|
||||
|
||||
// 保存内联编辑的Cookie
|
||||
async function saveCookieInline(id) {
|
||||
const input = document.getElementById(`edit-${id}`);
|
||||
const newValue = input.value.trim();
|
||||
|
||||
if (!newValue) {
|
||||
showToast('Cookie值不能为空', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
toggleLoading(true);
|
||||
|
||||
await fetchJSON(apiBase + `/cookies/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
id: id,
|
||||
value: newValue
|
||||
})
|
||||
});
|
||||
|
||||
showToast(`账号 "${id}" Cookie已更新`, 'success');
|
||||
loadCookies(); // 重新加载列表
|
||||
|
||||
} catch (err) {
|
||||
console.error('Cookie更新失败:', err);
|
||||
showToast(`Cookie更新失败: ${err.message || '未知错误'}`, 'danger');
|
||||
// 恢复原内容
|
||||
cancelCookieEdit(id);
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 取消Cookie编辑
|
||||
function cancelCookieEdit(id) {
|
||||
if (!window.editingCookieData || window.editingCookieData.id !== id) {
|
||||
console.error('编辑数据不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
const row = document.querySelector(`#edit-${id}`).closest('tr');
|
||||
const cookieValueCell = row.querySelector('.cookie-value');
|
||||
|
||||
// 恢复原内容
|
||||
cookieValueCell.innerHTML = window.editingCookieData.originalContent;
|
||||
|
||||
// 恢复按钮状态
|
||||
const actionButtons = row.querySelectorAll('.btn-group button');
|
||||
actionButtons.forEach(btn => btn.disabled = false);
|
||||
|
||||
// 清理全局数据
|
||||
delete window.editingCookieData;
|
||||
}
|
||||
@ -1,141 +0,0 @@
|
||||
// ==================== 仪表盘管理 ====================
|
||||
|
||||
// 加载仪表盘数据
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
toggleLoading(true);
|
||||
|
||||
// 获取账号列表
|
||||
const cookiesResponse = await fetch(`${apiBase}/cookies/details`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (cookiesResponse.ok) {
|
||||
const cookiesData = await cookiesResponse.json();
|
||||
|
||||
// 为每个账号获取关键词信息
|
||||
const accountsWithKeywords = await Promise.all(
|
||||
cookiesData.map(async (account) => {
|
||||
try {
|
||||
const keywordsResponse = await fetch(`${apiBase}/keywords/${account.id}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (keywordsResponse.ok) {
|
||||
const keywordsData = await keywordsResponse.json();
|
||||
return {
|
||||
...account,
|
||||
keywords: keywordsData,
|
||||
keywordCount: keywordsData.length
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...account,
|
||||
keywords: [],
|
||||
keywordCount: 0
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`获取账号 ${account.id} 关键词失败:`, error);
|
||||
return {
|
||||
...account,
|
||||
keywords: [],
|
||||
keywordCount: 0
|
||||
};
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
dashboardData.accounts = accountsWithKeywords;
|
||||
|
||||
// 计算统计数据
|
||||
let totalKeywords = 0;
|
||||
let activeAccounts = 0;
|
||||
let enabledAccounts = 0;
|
||||
|
||||
accountsWithKeywords.forEach(account => {
|
||||
const keywordCount = account.keywordCount || 0;
|
||||
const isEnabled = account.enabled === undefined ? true : account.enabled;
|
||||
|
||||
if (isEnabled) {
|
||||
enabledAccounts++;
|
||||
totalKeywords += keywordCount;
|
||||
if (keywordCount > 0) {
|
||||
activeAccounts++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dashboardData.totalKeywords = totalKeywords;
|
||||
|
||||
// 更新仪表盘显示
|
||||
updateDashboardStats(accountsWithKeywords.length, totalKeywords, enabledAccounts);
|
||||
updateDashboardAccountsList(accountsWithKeywords);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载仪表盘数据失败:', error);
|
||||
showToast('加载仪表盘数据失败', 'danger');
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新仪表盘统计数据
|
||||
function updateDashboardStats(totalAccounts, totalKeywords, enabledAccounts) {
|
||||
document.getElementById('totalAccounts').textContent = totalAccounts;
|
||||
document.getElementById('totalKeywords').textContent = totalKeywords;
|
||||
document.getElementById('activeAccounts').textContent = enabledAccounts;
|
||||
}
|
||||
|
||||
// 更新仪表盘账号列表
|
||||
function updateDashboardAccountsList(accounts) {
|
||||
const tbody = document.getElementById('dashboardAccountsList');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (accounts.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="4" class="text-center text-muted py-4">
|
||||
<i class="bi bi-inbox fs-1 d-block mb-2"></i>
|
||||
暂无账号数据
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
accounts.forEach(account => {
|
||||
const keywordCount = account.keywordCount || 0;
|
||||
const isEnabled = account.enabled === undefined ? true : account.enabled;
|
||||
|
||||
let status = '';
|
||||
if (!isEnabled) {
|
||||
status = '<span class="badge bg-danger">已禁用</span>';
|
||||
} else if (keywordCount > 0) {
|
||||
status = '<span class="badge bg-success">活跃</span>';
|
||||
} else {
|
||||
status = '<span class="badge bg-secondary">未配置</span>';
|
||||
}
|
||||
|
||||
const row = document.createElement('tr');
|
||||
row.className = isEnabled ? '' : 'table-secondary';
|
||||
row.innerHTML = `
|
||||
<td>
|
||||
<strong class="text-primary ${!isEnabled ? 'text-muted' : ''}">${account.id}</strong>
|
||||
${!isEnabled ? '<i class="bi bi-pause-circle-fill text-danger ms-1" title="已禁用"></i>' : ''}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge ${isEnabled ? 'bg-primary' : 'bg-secondary'}">${keywordCount} 个关键词</span>
|
||||
</td>
|
||||
<td>${status}</td>
|
||||
<td>
|
||||
<small class="text-muted">${new Date().toLocaleString()}</small>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
@ -1,102 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>闲鱼自动回复系统 - 模块化版本</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- 自定义CSS -->
|
||||
<link href="/static/css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 页面内容 -->
|
||||
<div id="app">
|
||||
<!-- 这里是原来的HTML内容 -->
|
||||
<div id="loading" class="d-none">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast容器 -->
|
||||
<div class="toast-container position-fixed top-0 end-0 p-3"></div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<main>
|
||||
<!-- 这里放置原来的所有HTML内容 -->
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!--
|
||||
模块化JavaScript文件 - 必须按以下顺序加载
|
||||
注意：这些路径需要根据实际部署情况调整
|
||||
-->
|
||||
|
||||
<!-- 1. 全局变量 -->
|
||||
<script src="/static/js/modules/globals.js"></script>
|
||||
|
||||
<!-- 2. 通用工具函数 -->
|
||||
<script src="/static/js/modules/utils.js"></script>
|
||||
|
||||
<!-- 3. 页面导航功能 -->
|
||||
<script src="/static/js/modules/navigation.js"></script>
|
||||
|
||||
<!-- 4. 仪表盘管理 -->
|
||||
<script src="/static/js/modules/dashboard.js"></script>
|
||||
|
||||
<!-- 5. 关键词缓存管理 -->
|
||||
<script src="/static/js/modules/keyword-cache.js"></script>
|
||||
|
||||
<!-- 6. 账号列表管理 -->
|
||||
<script src="/static/js/modules/account-list.js"></script>
|
||||
|
||||
<!-- 7. 关键词管理 -->
|
||||
<script src="/static/js/modules/keywords.js"></script>
|
||||
|
||||
<!-- 8. Cookie管理 -->
|
||||
<script src="/static/js/modules/cookies.js"></script>
|
||||
|
||||
<!-- 9. 主要功能 -->
|
||||
<script src="/static/js/modules/main-features.js"></script>
|
||||
|
||||
<!-- 10. 所有其他功能 -->
|
||||
<script src="/static/js/modules/all-other-features.js"></script>
|
||||
|
||||
<!-- 11. 应用初始化（必须最后加载） -->
|
||||
<script src="/static/js/modules/init.js"></script>
|
||||
|
||||
<!-- 可选：模块化主入口文件（用于调试和信息显示） -->
|
||||
<script src="/static/js/modules/app-modular.js"></script>
|
||||
|
||||
<script>
|
||||
// 页面加载完成后的调试信息
|
||||
window.addEventListener('load', function() {
|
||||
console.log('页面加载完成');
|
||||
console.log('模块信息:', window.moduleInfo);
|
||||
|
||||
// 检查关键函数是否可用
|
||||
const testFunctions = [
|
||||
'showSection',
|
||||
'loadDashboard',
|
||||
'showToast',
|
||||
'toggleLoading'
|
||||
];
|
||||
|
||||
testFunctions.forEach(funcName => {
|
||||
if (typeof window[funcName] === 'function') {
|
||||
console.log(`✓ ${funcName} 函数已加载`);
|
||||
} else {
|
||||
console.error(`✗ ${funcName} 函数未找到`);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
// ==================== 全局变量 ====================
|
||||
const apiBase = location.origin;
|
||||
let keywordsData = {};
|
||||
let currentCookieId = '';
|
||||
let editCookieId = '';
|
||||
let authToken = localStorage.getItem('auth_token');
|
||||
let dashboardData = {
|
||||
accounts: [],
|
||||
totalKeywords: 0
|
||||
};
|
||||
|
||||
// 账号关键词缓存
|
||||
let accountKeywordCache = {};
|
||||
let cacheTimestamp = 0;
|
||||
const CACHE_DURATION = 30000; // 30秒缓存
|
||||
@ -1,171 +0,0 @@
|
||||
// ==================== 应用初始化 ====================
|
||||
|
||||
// 登出功能
|
||||
async function logout() {
|
||||
try {
|
||||
if (authToken) {
|
||||
await fetch('/logout', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
}
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
} catch (err) {
|
||||
console.error('登出失败:', err);
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
|
||||
// 检查认证状态
|
||||
async function checkAuth() {
|
||||
if (!authToken) {
|
||||
window.location.href = '/';
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/verify', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (!result.authenticated) {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查是否为管理员，显示管理员菜单和功能
|
||||
if (result.username === 'admin') {
|
||||
const adminMenuSection = document.getElementById('adminMenuSection');
|
||||
if (adminMenuSection) {
|
||||
adminMenuSection.style.display = 'block';
|
||||
}
|
||||
|
||||
// 显示备份管理功能
|
||||
const backupManagement = document.getElementById('backup-management');
|
||||
if (backupManagement) {
|
||||
backupManagement.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (err) {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化事件监听
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
// 首先检查认证状态
|
||||
const isAuthenticated = await checkAuth();
|
||||
if (!isAuthenticated) return;
|
||||
|
||||
// 添加Cookie表单提交
|
||||
document.getElementById('addForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const id = document.getElementById('cookieId').value.trim();
|
||||
const value = document.getElementById('cookieValue').value.trim();
|
||||
|
||||
if (!id || !value) return;
|
||||
|
||||
try {
|
||||
await fetchJSON(apiBase + '/cookies', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id, value })
|
||||
});
|
||||
|
||||
document.getElementById('cookieId').value = '';
|
||||
document.getElementById('cookieValue').value = '';
|
||||
showToast(`账号 "${id}" 添加成功`);
|
||||
loadCookies();
|
||||
} catch (err) {
|
||||
// 错误已在fetchJSON中处理
|
||||
}
|
||||
});
|
||||
|
||||
// 增强的键盘快捷键和用户体验
|
||||
document.getElementById('newKeyword')?.addEventListener('keypress', function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
document.getElementById('newReply').focus();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('newReply')?.addEventListener('keypress', function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
addKeyword();
|
||||
}
|
||||
});
|
||||
|
||||
// ESC键取消编辑
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && typeof window.editingIndex !== 'undefined') {
|
||||
e.preventDefault();
|
||||
cancelEdit();
|
||||
}
|
||||
});
|
||||
|
||||
// 输入框实时验证和提示
|
||||
document.getElementById('newKeyword')?.addEventListener('input', function (e) {
|
||||
const value = e.target.value.trim();
|
||||
const addBtn = document.querySelector('.add-btn');
|
||||
const replyInput = document.getElementById('newReply');
|
||||
|
||||
if (value.length > 0) {
|
||||
e.target.style.borderColor = '#10b981';
|
||||
if (replyInput.value.trim().length > 0) {
|
||||
addBtn.style.opacity = '1';
|
||||
addBtn.style.transform = 'scale(1)';
|
||||
}
|
||||
} else {
|
||||
e.target.style.borderColor = '#e5e7eb';
|
||||
addBtn.style.opacity = '0.7';
|
||||
addBtn.style.transform = 'scale(0.95)';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('newReply')?.addEventListener('input', function (e) {
|
||||
const value = e.target.value.trim();
|
||||
const addBtn = document.querySelector('.add-btn');
|
||||
const keywordInput = document.getElementById('newKeyword');
|
||||
|
||||
if (value.length > 0) {
|
||||
e.target.style.borderColor = '#10b981';
|
||||
if (keywordInput.value.trim().length > 0) {
|
||||
addBtn.style.opacity = '1';
|
||||
addBtn.style.transform = 'scale(1)';
|
||||
}
|
||||
} else {
|
||||
e.target.style.borderColor = '#e5e7eb';
|
||||
addBtn.style.opacity = '0.7';
|
||||
addBtn.style.transform = 'scale(0.95)';
|
||||
}
|
||||
});
|
||||
|
||||
// 初始加载仪表盘
|
||||
loadDashboard();
|
||||
|
||||
// 点击侧边栏外部关闭移动端菜单
|
||||
document.addEventListener('click', function (e) {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const toggle = document.querySelector('.mobile-toggle');
|
||||
|
||||
if (window.innerWidth <= 768 &&
|
||||
!sidebar.contains(e.target) &&
|
||||
!toggle.contains(e.target) &&
|
||||
sidebar.classList.contains('show')) {
|
||||
sidebar.classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1,42 +0,0 @@
|
||||
// ==================== 关键词缓存管理 ====================
|
||||
|
||||
// 获取账号关键词数量（带缓存）- 包含普通关键词和商品关键词
|
||||
async function getAccountKeywordCount(accountId) {
|
||||
const now = Date.now();
|
||||
|
||||
// 检查缓存
|
||||
if (accountKeywordCache[accountId] && (now - cacheTimestamp) < CACHE_DURATION) {
|
||||
return accountKeywordCache[accountId];
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiBase}/keywords/${accountId}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const keywordsData = await response.json();
|
||||
// 现在API返回的是包含普通关键词和商品关键词的完整列表
|
||||
const count = keywordsData.length;
|
||||
|
||||
// 更新缓存
|
||||
accountKeywordCache[accountId] = count;
|
||||
cacheTimestamp = now;
|
||||
|
||||
return count;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`获取账号 ${accountId} 关键词失败:`, error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 清除关键词缓存
|
||||
function clearKeywordCache() {
|
||||
accountKeywordCache = {};
|
||||
cacheTimestamp = 0;
|
||||
}
|
||||
@ -1,463 +0,0 @@
|
||||
// ==================== 关键词管理 ====================
|
||||
|
||||
// 加载账号关键词
|
||||
async function loadAccountKeywords() {
|
||||
const accountId = document.getElementById('accountSelect').value;
|
||||
const keywordManagement = document.getElementById('keywordManagement');
|
||||
|
||||
if (!accountId) {
|
||||
keywordManagement.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
toggleLoading(true);
|
||||
currentCookieId = accountId;
|
||||
|
||||
// 获取账号详情以检查状态
|
||||
const accountResponse = await fetch(`${apiBase}/cookies/details`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
let accountStatus = true; // 默认启用
|
||||
if (accountResponse.ok) {
|
||||
const accounts = await accountResponse.json();
|
||||
const currentAccount = accounts.find(acc => acc.id === accountId);
|
||||
accountStatus = currentAccount ? (currentAccount.enabled === undefined ? true : currentAccount.enabled) : true;
|
||||
console.log(`加载关键词时账号 ${accountId} 状态: enabled=${currentAccount?.enabled}, accountStatus=${accountStatus}`); // 调试信息
|
||||
}
|
||||
|
||||
const response = await fetch(`${apiBase}/keywords-with-item-id/${accountId}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('从服务器获取的关键词数据:', data); // 调试信息
|
||||
|
||||
// 后端返回的是 [{keyword, reply, item_id}, ...] 格式，直接使用
|
||||
const formattedData = data;
|
||||
|
||||
console.log('格式化后的关键词数据:', formattedData); // 调试信息
|
||||
keywordsData[accountId] = formattedData;
|
||||
renderKeywordsList(formattedData);
|
||||
|
||||
// 加载商品列表
|
||||
await loadItemsList(accountId);
|
||||
|
||||
// 更新账号徽章显示
|
||||
updateAccountBadge(accountId, accountStatus);
|
||||
|
||||
keywordManagement.style.display = 'block';
|
||||
} else {
|
||||
showToast('加载关键词失败', 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载关键词失败:', error);
|
||||
showToast('加载关键词失败', 'danger');
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新账号徽章显示
|
||||
function updateAccountBadge(accountId, isEnabled) {
|
||||
const badge = document.getElementById('currentAccountBadge');
|
||||
if (!badge) return;
|
||||
|
||||
const statusIcon = isEnabled ? '🟢' : '🔴';
|
||||
const statusText = isEnabled ? '启用' : '禁用';
|
||||
const statusClass = isEnabled ? 'bg-success' : 'bg-warning';
|
||||
|
||||
badge.innerHTML = `
|
||||
<span class="badge ${statusClass} me-2">
|
||||
${statusIcon} ${accountId}
|
||||
</span>
|
||||
<small class="text-muted">
|
||||
状态: ${statusText}
|
||||
${!isEnabled ? ' (配置的关键词不会参与自动回复)' : ''}
|
||||
</small>
|
||||
`;
|
||||
}
|
||||
|
||||
// 显示添加关键词表单
|
||||
function showAddKeywordForm() {
|
||||
const form = document.getElementById('addKeywordForm');
|
||||
form.style.display = form.style.display === 'none' ? 'block' : 'none';
|
||||
|
||||
if (form.style.display === 'block') {
|
||||
document.getElementById('newKeyword').focus();
|
||||
}
|
||||
}
|
||||
|
||||
// 加载商品列表
|
||||
async function loadItemsList(accountId) {
|
||||
try {
|
||||
const response = await fetch(`${apiBase}/items/${accountId}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const items = data.items || [];
|
||||
|
||||
// 更新商品选择下拉框
|
||||
const selectElement = document.getElementById('newItemIdSelect');
|
||||
if (selectElement) {
|
||||
// 清空现有选项（保留第一个默认选项）
|
||||
selectElement.innerHTML = '<option value="">选择商品或留空表示通用关键词</option>';
|
||||
|
||||
// 添加商品选项
|
||||
items.forEach(item => {
|
||||
const option = document.createElement('option');
|
||||
option.value = item.item_id;
|
||||
option.textContent = `${item.item_id} - ${item.item_title}`;
|
||||
selectElement.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
console.log(`加载了 ${items.length} 个商品到选择列表`);
|
||||
} else {
|
||||
console.warn('加载商品列表失败:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载商品列表时发生错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加或更新关键词
|
||||
async function addKeyword() {
|
||||
const keyword = document.getElementById('newKeyword').value.trim();
|
||||
const reply = document.getElementById('newReply').value.trim();
|
||||
const itemId = document.getElementById('newItemIdSelect').value.trim();
|
||||
|
||||
if (!keyword || !reply) {
|
||||
showToast('请填写关键词和回复内容', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentCookieId) {
|
||||
showToast('请先选择账号', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否为编辑模式
|
||||
const isEditMode = typeof window.editingIndex !== 'undefined';
|
||||
const actionText = isEditMode ? '更新' : '添加';
|
||||
|
||||
try {
|
||||
toggleLoading(true);
|
||||
|
||||
// 获取当前关键词列表
|
||||
let currentKeywords = [...(keywordsData[currentCookieId] || [])];
|
||||
|
||||
// 如果是编辑模式，先移除原关键词
|
||||
if (isEditMode) {
|
||||
currentKeywords.splice(window.editingIndex, 1);
|
||||
}
|
||||
|
||||
// 准备要保存的关键词列表
|
||||
let keywordsToSave = [...currentKeywords];
|
||||
|
||||
// 如果是编辑模式，先移除原关键词
|
||||
if (isEditMode && typeof window.editingIndex !== 'undefined') {
|
||||
keywordsToSave.splice(window.editingIndex, 1);
|
||||
}
|
||||
|
||||
// 检查关键词是否已存在（考虑商品ID）
|
||||
const existingKeyword = keywordsToSave.find(item =>
|
||||
item.keyword === keyword &&
|
||||
(item.item_id || '') === (itemId || '')
|
||||
);
|
||||
if (existingKeyword) {
|
||||
const itemIdText = itemId ? `（商品ID: ${itemId}）` : '（通用关键词）';
|
||||
showToast(`关键词 "${keyword}" ${itemIdText} 已存在，请使用其他关键词或商品ID`, 'warning');
|
||||
toggleLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加新关键词或更新的关键词
|
||||
const newKeyword = {
|
||||
keyword: keyword,
|
||||
reply: reply,
|
||||
item_id: itemId || ''
|
||||
};
|
||||
keywordsToSave.push(newKeyword);
|
||||
|
||||
const response = await fetch(`${apiBase}/keywords-with-item-id/${currentCookieId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
keywords: keywordsToSave
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showToast(`✨ 关键词 "${keyword}" ${actionText}成功！`, 'success');
|
||||
|
||||
// 清空输入框并重置样式
|
||||
const keywordInput = document.getElementById('newKeyword');
|
||||
const replyInput = document.getElementById('newReply');
|
||||
const selectElement = document.getElementById('newItemIdSelect');
|
||||
const addBtn = document.querySelector('.add-btn');
|
||||
|
||||
keywordInput.value = '';
|
||||
replyInput.value = '';
|
||||
if (selectElement) {
|
||||
selectElement.value = '';
|
||||
}
|
||||
keywordInput.style.borderColor = '#e5e7eb';
|
||||
replyInput.style.borderColor = '#e5e7eb';
|
||||
addBtn.style.opacity = '0.7';
|
||||
addBtn.style.transform = 'scale(0.95)';
|
||||
|
||||
// 如果是编辑模式，重置编辑状态
|
||||
if (isEditMode) {
|
||||
delete window.editingIndex;
|
||||
delete window.originalKeyword;
|
||||
|
||||
// 恢复添加按钮
|
||||
addBtn.innerHTML = '<i class="bi bi-plus-lg"></i>添加';
|
||||
addBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
|
||||
|
||||
// 移除取消按钮
|
||||
const cancelBtn = document.getElementById('cancelEditBtn');
|
||||
if (cancelBtn) {
|
||||
cancelBtn.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// 聚焦到关键词输入框，方便连续添加
|
||||
setTimeout(() => {
|
||||
keywordInput.focus();
|
||||
}, 100);
|
||||
|
||||
loadAccountKeywords(); // 重新加载关键词列表
|
||||
clearKeywordCache(); // 清除缓存
|
||||
} else {
|
||||
const errorText = await response.text();
|
||||
console.error('关键词添加失败:', errorText);
|
||||
showToast('关键词添加失败', 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('添加关键词失败:', error);
|
||||
showToast('添加关键词失败', 'danger');
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染现代化关键词列表
|
||||
function renderKeywordsList(keywords) {
|
||||
console.log('渲染关键词列表:', keywords); // 调试信息
|
||||
const container = document.getElementById('keywordsList');
|
||||
|
||||
if (!container) {
|
||||
console.error('找不到关键词列表容器元素');
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
if (!keywords || keywords.length === 0) {
|
||||
console.log('关键词列表为空，显示空状态');
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-chat-dots"></i>
|
||||
<h3>还没有关键词</h3>
|
||||
<p>添加第一个关键词，让您的闲鱼店铺自动回复客户消息</p>
|
||||
<button class="quick-add-btn" onclick="focusKeywordInput()">
|
||||
<i class="bi bi-plus-lg me-2"></i>立即添加
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`开始渲染 ${keywords.length} 个关键词`);
|
||||
|
||||
keywords.forEach((item, index) => {
|
||||
console.log(`渲染关键词 ${index + 1}:`, item); // 调试信息
|
||||
|
||||
const keywordItem = document.createElement('div');
|
||||
keywordItem.className = 'keyword-item';
|
||||
// 商品ID显示
|
||||
const itemIdDisplay = item.item_id ?
|
||||
`<small class="text-muted d-block"><i class="bi bi-box"></i> 商品ID: ${item.item_id}</small>` :
|
||||
'<small class="text-muted d-block"><i class="bi bi-globe"></i> 通用关键词</small>';
|
||||
|
||||
keywordItem.innerHTML = `
|
||||
<div class="keyword-item-header">
|
||||
<div class="keyword-tag">
|
||||
<i class="bi bi-tag-fill"></i>
|
||||
${item.keyword}
|
||||
${itemIdDisplay}
|
||||
</div>
|
||||
<div class="keyword-actions">
|
||||
<button class="action-btn edit-btn" onclick="editKeyword(${index})" title="编辑">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button class="action-btn delete-btn" onclick="deleteKeyword('${currentCookieId}', ${index})" title="删除">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="keyword-content">
|
||||
<p class="reply-text">${item.reply}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(keywordItem);
|
||||
});
|
||||
|
||||
console.log('关键词列表渲染完成');
|
||||
}
|
||||
|
||||
// 聚焦到关键词输入框
|
||||
function focusKeywordInput() {
|
||||
document.getElementById('newKeyword').focus();
|
||||
}
|
||||
|
||||
// 编辑关键词 - 改进版本
|
||||
function editKeyword(index) {
|
||||
const keywords = keywordsData[currentCookieId] || [];
|
||||
const keyword = keywords[index];
|
||||
|
||||
if (!keyword) {
|
||||
showToast('关键词不存在', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// 将关键词信息填入输入框
|
||||
document.getElementById('newKeyword').value = keyword.keyword;
|
||||
document.getElementById('newReply').value = keyword.reply;
|
||||
|
||||
// 设置商品ID选择框
|
||||
const selectElement = document.getElementById('newItemIdSelect');
|
||||
if (selectElement) {
|
||||
selectElement.value = keyword.item_id || '';
|
||||
}
|
||||
|
||||
// 设置编辑模式标识
|
||||
window.editingIndex = index;
|
||||
window.originalKeyword = keyword.keyword;
|
||||
window.originalItemId = keyword.item_id || '';
|
||||
|
||||
// 更新按钮文本和样式
|
||||
const addBtn = document.querySelector('.add-btn');
|
||||
addBtn.innerHTML = '<i class="bi bi-check-lg"></i>更新';
|
||||
addBtn.style.background = 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)';
|
||||
|
||||
// 显示取消按钮
|
||||
showCancelEditButton();
|
||||
|
||||
// 聚焦到关键词输入框并选中文本
|
||||
setTimeout(() => {
|
||||
const keywordInput = document.getElementById('newKeyword');
|
||||
keywordInput.focus();
|
||||
keywordInput.select();
|
||||
}, 100);
|
||||
|
||||
showToast('📝 编辑模式：修改后点击"更新"按钮保存', 'info');
|
||||
}
|
||||
|
||||
// 显示取消编辑按钮
|
||||
function showCancelEditButton() {
|
||||
// 检查是否已存在取消按钮
|
||||
if (document.getElementById('cancelEditBtn')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const addBtn = document.querySelector('.add-btn');
|
||||
const cancelBtn = document.createElement('button');
|
||||
cancelBtn.id = 'cancelEditBtn';
|
||||
cancelBtn.className = 'btn btn-outline-secondary';
|
||||
cancelBtn.style.marginLeft = '0.5rem';
|
||||
cancelBtn.innerHTML = '<i class="bi bi-x-lg"></i>取消';
|
||||
cancelBtn.onclick = cancelEdit;
|
||||
|
||||
addBtn.parentNode.appendChild(cancelBtn);
|
||||
}
|
||||
|
||||
// 取消编辑
|
||||
function cancelEdit() {
|
||||
// 清空输入框
|
||||
document.getElementById('newKeyword').value = '';
|
||||
document.getElementById('newReply').value = '';
|
||||
|
||||
// 清空商品ID选择框
|
||||
const selectElement = document.getElementById('newItemIdSelect');
|
||||
if (selectElement) {
|
||||
selectElement.value = '';
|
||||
}
|
||||
|
||||
// 重置编辑状态
|
||||
delete window.editingIndex;
|
||||
delete window.originalKeyword;
|
||||
delete window.originalItemId;
|
||||
|
||||
// 恢复添加按钮
|
||||
const addBtn = document.querySelector('.add-btn');
|
||||
addBtn.innerHTML = '<i class="bi bi-plus-lg"></i>添加';
|
||||
addBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
|
||||
|
||||
// 移除取消按钮
|
||||
const cancelBtn = document.getElementById('cancelEditBtn');
|
||||
if (cancelBtn) {
|
||||
cancelBtn.remove();
|
||||
}
|
||||
|
||||
showToast('已取消编辑', 'info');
|
||||
}
|
||||
|
||||
// 删除关键词
|
||||
async function deleteKeyword(cookieId, index) {
|
||||
if (!confirm('确定要删除这个关键词吗？')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
toggleLoading(true);
|
||||
|
||||
// 获取当前关键词列表
|
||||
const currentKeywords = keywordsData[cookieId] || [];
|
||||
// 移除指定索引的关键词
|
||||
currentKeywords.splice(index, 1);
|
||||
|
||||
// 更新服务器
|
||||
const response = await fetch(`${apiBase}/keywords-with-item-id/${cookieId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
keywords: currentKeywords
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showToast('关键词删除成功', 'success');
|
||||
keywordsData[cookieId] = currentKeywords;
|
||||
renderKeywordsList(currentKeywords);
|
||||
clearKeywordCache(); // 清除缓存
|
||||
} else {
|
||||
const errorText = await response.text();
|
||||
console.error('关键词删除失败:', errorText);
|
||||
showToast('关键词删除失败', 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除关键词失败:', error);
|
||||
showToast('删除关键词删除失败', 'danger');
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
@ -1,189 +0,0 @@
|
||||
// ==================== 主要功能模块 ====================
|
||||
|
||||
// 切换账号启用/禁用状态
|
||||
async function toggleAccountStatus(accountId, enabled) {
|
||||
try {
|
||||
toggleLoading(true);
|
||||
|
||||
// 这里需要调用后端API来更新账号状态
|
||||
// 由于当前后端可能没有enabled字段，我们先在前端模拟
|
||||
// 实际项目中需要后端支持
|
||||
|
||||
const response = await fetch(`${apiBase}/cookies/${accountId}/status`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
},
|
||||
body: JSON.stringify({ enabled: enabled })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showToast(`账号 "${accountId}" 已${enabled ? '启用' : '禁用'}`, 'success');
|
||||
|
||||
// 清除相关缓存，确保数据一致性
|
||||
clearKeywordCache();
|
||||
|
||||
// 更新界面显示
|
||||
updateAccountRowStatus(accountId, enabled);
|
||||
|
||||
// 刷新自动回复页面的账号列表
|
||||
refreshAccountList();
|
||||
|
||||
// 如果禁用的账号在自动回复页面被选中，更新显示
|
||||
const accountSelect = document.getElementById('accountSelect');
|
||||
if (accountSelect && accountSelect.value === accountId) {
|
||||
if (!enabled) {
|
||||
// 更新徽章显示禁用状态
|
||||
updateAccountBadge(accountId, false);
|
||||
showToast('账号已禁用，配置的关键词不会参与自动回复', 'warning');
|
||||
} else {
|
||||
// 更新徽章显示启用状态
|
||||
updateAccountBadge(accountId, true);
|
||||
showToast('账号已启用，配置的关键词将参与自动回复', 'success');
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
// 如果后端不支持，先在前端模拟
|
||||
console.warn('后端暂不支持账号状态切换，使用前端模拟');
|
||||
showToast(`账号 "${accountId}" 已${enabled ? '启用' : '禁用'} (前端模拟)`, enabled ? 'success' : 'warning');
|
||||
updateAccountRowStatus(accountId, enabled);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('切换账号状态失败:', error);
|
||||
|
||||
// 后端不支持时的降级处理
|
||||
showToast(`账号 "${accountId}" 已${enabled ? '启用' : '禁用'} (本地模拟)`, enabled ? 'success' : 'warning');
|
||||
updateAccountRowStatus(accountId, enabled);
|
||||
|
||||
// 恢复切换按钮状态
|
||||
const toggle = document.querySelector(`input[onchange*="${accountId}"]`);
|
||||
if (toggle) {
|
||||
toggle.checked = enabled;
|
||||
}
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新账号行的状态显示
|
||||
function updateAccountRowStatus(accountId, enabled) {
|
||||
const toggle = document.querySelector(`input[onchange*="${accountId}"]`);
|
||||
if (!toggle) return;
|
||||
|
||||
const row = toggle.closest('tr');
|
||||
const statusBadge = row.querySelector('.status-badge');
|
||||
const actionButtons = row.querySelectorAll('.btn-group .btn:not(.btn-outline-info):not(.btn-outline-danger)');
|
||||
|
||||
// 更新行样式
|
||||
row.className = `account-row ${enabled ? 'enabled' : 'disabled'}`;
|
||||
|
||||
// 更新状态徽章
|
||||
statusBadge.className = `status-badge ${enabled ? 'enabled' : 'disabled'}`;
|
||||
statusBadge.title = enabled ? '账号已启用' : '账号已禁用';
|
||||
statusBadge.innerHTML = `
|
||||
<i class="bi bi-${enabled ? 'check-circle-fill' : 'x-circle-fill'}"></i>
|
||||
`;
|
||||
|
||||
// 更新按钮状态（只禁用编辑Cookie按钮，其他按钮保持可用）
|
||||
actionButtons.forEach(btn => {
|
||||
if (btn.onclick && btn.onclick.toString().includes('editCookieInline')) {
|
||||
btn.disabled = !enabled;
|
||||
}
|
||||
// 设置自动回复按钮始终可用，但更新提示文本
|
||||
if (btn.onclick && btn.onclick.toString().includes('goToAutoReply')) {
|
||||
btn.title = enabled ? '设置自动回复' : '配置关键词 (账号已禁用)';
|
||||
}
|
||||
});
|
||||
|
||||
// 更新切换按钮的提示
|
||||
const label = toggle.closest('.status-toggle');
|
||||
label.title = enabled ? '点击禁用' : '点击启用';
|
||||
}
|
||||
|
||||
// 切换自动确认发货状态
|
||||
async function toggleAutoConfirm(accountId, enabled) {
|
||||
try {
|
||||
toggleLoading(true);
|
||||
|
||||
const response = await fetch(`${apiBase}/cookies/${accountId}/auto-confirm`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
},
|
||||
body: JSON.stringify({ auto_confirm: enabled })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
showToast(result.message, 'success');
|
||||
|
||||
// 更新界面显示
|
||||
updateAutoConfirmRowStatus(accountId, enabled);
|
||||
} else {
|
||||
const error = await response.json();
|
||||
showToast(error.detail || '更新自动确认发货设置失败', 'error');
|
||||
|
||||
// 恢复切换按钮状态
|
||||
const toggle = document.querySelector(`input[onchange*="toggleAutoConfirm('${accountId}'"]`);
|
||||
if (toggle) {
|
||||
toggle.checked = !enabled;
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('切换自动确认发货状态失败:', error);
|
||||
showToast('网络错误，请稍后重试', 'error');
|
||||
|
||||
// 恢复切换按钮状态
|
||||
const toggle = document.querySelector(`input[onchange*="toggleAutoConfirm('${accountId}'"]`);
|
||||
if (toggle) {
|
||||
toggle.checked = !enabled;
|
||||
}
|
||||
} finally {
|
||||
toggleLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新自动确认发货行状态
|
||||
function updateAutoConfirmRowStatus(accountId, enabled) {
|
||||
const row = document.querySelector(`tr:has(input[onchange*="toggleAutoConfirm('${accountId}'"])`);
|
||||
if (!row) return;
|
||||
|
||||
const statusBadge = row.querySelector('.status-badge:has(i.bi-truck, i.bi-truck-flatbed)');
|
||||
const toggle = row.querySelector(`input[onchange*="toggleAutoConfirm('${accountId}'"]`);
|
||||
|
||||
if (statusBadge && toggle) {
|
||||
// 更新状态徽章
|
||||
statusBadge.className = `status-badge ${enabled ? 'enabled' : 'disabled'}`;
|
||||
statusBadge.title = enabled ? '自动确认发货已开启' : '自动确认发货已关闭';
|
||||
statusBadge.innerHTML = `
|
||||
<i class="bi bi-${enabled ? 'truck' : 'truck-flatbed'}"></i>
|
||||
`;
|
||||
|
||||
// 更新切换按钮的提示
|
||||
const label = toggle.closest('.status-toggle');
|
||||
label.title = enabled ? '点击关闭自动确认发货' : '点击开启自动确认发货';
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转到自动回复页面并选择指定账号
|
||||
function goToAutoReply(accountId) {
|
||||
// 切换到自动回复页面
|
||||
showSection('auto-reply');
|
||||
|
||||
// 设置账号选择器的值
|
||||
setTimeout(() => {
|
||||
const accountSelect = document.getElementById('accountSelect');
|
||||
if (accountSelect) {
|
||||
accountSelect.value = accountId;
|
||||
// 触发change事件来加载关键词
|
||||
loadAccountKeywords();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
showToast(`已切换到自动回复页面，账号 "${accountId}" 已选中`, 'info');
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
// ==================== 页面导航功能 ====================
|
||||
|
||||
// 菜单切换功能
|
||||
function showSection(sectionName) {
|
||||
console.log('切换到页面:', sectionName); // 调试信息
|
||||
|
||||
// 隐藏所有内容区域
|
||||
document.querySelectorAll('.content-section').forEach(section => {
|
||||
section.classList.remove('active');
|
||||
});
|
||||
|
||||
// 移除所有菜单项的active状态
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
|
||||
// 显示选中的内容区域
|
||||
const targetSection = document.getElementById(sectionName + '-section');
|
||||
if (targetSection) {
|
||||
targetSection.classList.add('active');
|
||||
console.log('页面已激活:', sectionName + '-section'); // 调试信息
|
||||
} else {
|
||||
console.error('找不到页面元素:', sectionName + '-section'); // 调试信息
|
||||
}
|
||||
|
||||
// 设置对应菜单项为active（修复event.target问题）
|
||||
const menuLinks = document.querySelectorAll('.nav-link');
|
||||
menuLinks.forEach(link => {
|
||||
if (link.onclick && link.onclick.toString().includes(`showSection('${sectionName}')`)) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 根据不同section加载对应数据
|
||||
switch (sectionName) {
|
||||
case 'dashboard':
|
||||
loadDashboard();
|
||||
break;
|
||||
case 'accounts':
|
||||
loadCookies();
|
||||
break;
|
||||
case 'items':
|
||||
loadItems();
|
||||
break;
|
||||
case 'auto-reply':
|
||||
refreshAccountList();
|
||||
break;
|
||||
case 'cards':
|
||||
loadCards();
|
||||
break;
|
||||
case 'auto-delivery':
|
||||
loadDeliveryRules();
|
||||
break;
|
||||
case 'notification-channels':
|
||||
loadNotificationChannels();
|
||||
break;
|
||||
case 'message-notifications':
|
||||
loadMessageNotifications();
|
||||
break;
|
||||
case 'logs':
|
||||
// 如果没有日志数据，则加载
|
||||
setTimeout(() => {
|
||||
if (!window.allLogs || window.allLogs.length === 0) {
|
||||
refreshLogs();
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
}
|
||||
|
||||
// 如果切换到非日志页面，停止自动刷新
|
||||
if (sectionName !== 'logs' && window.autoRefreshInterval) {
|
||||
clearInterval(window.autoRefreshInterval);
|
||||
window.autoRefreshInterval = null;
|
||||
const button = document.querySelector('#autoRefreshText');
|
||||
const icon = button?.previousElementSibling;
|
||||
if (button) {
|
||||
button.textContent = '开启自动刷新';
|
||||
if (icon) icon.className = 'bi bi-play-circle me-1';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端侧边栏切换
|
||||
function toggleSidebar() {
|
||||
document.getElementById('sidebar').classList.toggle('show');
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
// ==================== 通用工具函数 ====================
|
||||
|
||||
// 显示/隐藏加载动画
|
||||
function toggleLoading(show) {
|
||||
document.getElementById('loading').classList.toggle('d-none', !show);
|
||||
}
|
||||
|
||||
// 显示提示消息
|
||||
function showToast(message, type = 'success') {
|
||||
const toastContainer = document.querySelector('.toast-container');
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
||||
toast.setAttribute('role', 'alert');
|
||||
toast.setAttribute('aria-live', 'assertive');
|
||||
toast.setAttribute('aria-atomic', 'true');
|
||||
|
||||
toast.innerHTML = `
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
${message}
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
toastContainer.appendChild(toast);
|
||||
const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
|
||||
bsToast.show();
|
||||
|
||||
// 自动移除
|
||||
toast.addEventListener('hidden.bs.toast', () => {
|
||||
toast.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
async function handleApiError(err) {
|
||||
console.error(err);
|
||||
showToast(err.message || '操作失败', 'danger');
|
||||
toggleLoading(false);
|
||||
}
|
||||
|
||||
// API请求包装
|
||||
async function fetchJSON(url, opts = {}) {
|
||||
toggleLoading(true);
|
||||
try {
|
||||
// 添加认证头
|
||||
if (authToken) {
|
||||
opts.headers = opts.headers || {};
|
||||
opts.headers['Authorization'] = `Bearer ${authToken}`;
|
||||
}
|
||||
|
||||
const res = await fetch(url, opts);
|
||||
if (res.status === 401) {
|
||||
// 未授权，跳转到登录页面
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
if (!res.ok) {
|
||||
let errorMessage = `HTTP ${res.status}`;
|
||||
try {
|
||||
const errorText = await res.text();
|
||||
if (errorText) {
|
||||
// 尝试解析JSON错误信息
|
||||
try {
|
||||
const errorJson = JSON.parse(errorText);
|
||||
errorMessage = errorJson.detail || errorJson.message || errorText;
|
||||
} catch {
|
||||
errorMessage = errorText;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
errorMessage = `HTTP ${res.status} ${res.statusText}`;
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
const data = await res.json();
|
||||
toggleLoading(false);
|
||||
return data;
|
||||
} catch (err) {
|
||||
handleApiError(err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB After Width: | Height: | Size: 170 KiB |
Loading…
x
Reference in New Issue
Block a user