feat:历史记录分享功能实现
This commit is contained in:
liailing1026
@@ -5,8 +5,8 @@ AgentCoord 数据库模块
|
||||
"""
|
||||
|
||||
from .database import get_db, get_db_context, test_connection, engine, text
|
||||
from .models import MultiAgentTask, UserAgent, ExportRecord, TaskStatus
|
||||
from .crud import MultiAgentTaskCRUD, UserAgentCRUD, ExportRecordCRUD
|
||||
from .models import MultiAgentTask, UserAgent, ExportRecord, PlanShare, TaskStatus
|
||||
from .crud import MultiAgentTaskCRUD, UserAgentCRUD, ExportRecordCRUD, PlanShareCRUD
|
||||
|
||||
__all__ = [
|
||||
# 连接管理
|
||||
@@ -19,9 +19,11 @@ __all__ = [
|
||||
"MultiAgentTask",
|
||||
"UserAgent",
|
||||
"ExportRecord",
|
||||
"PlanShare",
|
||||
"TaskStatus",
|
||||
# CRUD
|
||||
"MultiAgentTaskCRUD",
|
||||
"UserAgentCRUD",
|
||||
"ExportRecordCRUD",
|
||||
"PlanShareCRUD",
|
||||
]
|
||||
|
||||
@@ -9,7 +9,7 @@ from datetime import datetime, timezone
|
||||
from typing import List, Optional
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from .models import MultiAgentTask, UserAgent, ExportRecord
|
||||
from .models import MultiAgentTask, UserAgent, ExportRecord, PlanShare
|
||||
|
||||
|
||||
class MultiAgentTaskCRUD:
|
||||
@@ -500,3 +500,78 @@ class ExportRecordCRUD:
|
||||
db.commit()
|
||||
return True
|
||||
return False
|
||||
|
||||
|
||||
class PlanShareCRUD:
|
||||
"""任务分享 CRUD 操作"""
|
||||
|
||||
@staticmethod
|
||||
def create(
|
||||
db: Session,
|
||||
share_token: str,
|
||||
task_id: str,
|
||||
task_data: dict,
|
||||
expires_at: Optional[datetime] = None,
|
||||
extraction_code: Optional[str] = None,
|
||||
) -> PlanShare:
|
||||
"""创建分享记录"""
|
||||
share = PlanShare(
|
||||
share_token=share_token,
|
||||
extraction_code=extraction_code,
|
||||
task_id=task_id,
|
||||
task_data=task_data,
|
||||
expires_at=expires_at,
|
||||
)
|
||||
db.add(share)
|
||||
db.commit()
|
||||
db.refresh(share)
|
||||
return share
|
||||
|
||||
@staticmethod
|
||||
def get_by_token(db: Session, share_token: str) -> Optional[PlanShare]:
|
||||
"""根据 token 获取分享记录"""
|
||||
return db.query(PlanShare).filter(PlanShare.share_token == share_token).first()
|
||||
|
||||
@staticmethod
|
||||
def get_by_task_id(
|
||||
db: Session, task_id: str, limit: int = 10
|
||||
) -> List[PlanShare]:
|
||||
"""根据任务 ID 获取分享记录列表"""
|
||||
return (
|
||||
db.query(PlanShare)
|
||||
.filter(PlanShare.task_id == task_id)
|
||||
.order_by(PlanShare.created_at.desc())
|
||||
.limit(limit)
|
||||
.all()
|
||||
)
|
||||
|
||||
@staticmethod
|
||||
def increment_view_count(db: Session, share_token: str) -> Optional[PlanShare]:
|
||||
"""增加查看次数"""
|
||||
share = db.query(PlanShare).filter(PlanShare.share_token == share_token).first()
|
||||
if share:
|
||||
share.view_count = (share.view_count or 0) + 1
|
||||
db.commit()
|
||||
db.refresh(share)
|
||||
return share
|
||||
|
||||
@staticmethod
|
||||
def delete(db: Session, share_token: str) -> bool:
|
||||
"""删除分享记录"""
|
||||
share = db.query(PlanShare).filter(PlanShare.share_token == share_token).first()
|
||||
if share:
|
||||
db.delete(share)
|
||||
db.commit()
|
||||
return True
|
||||
return False
|
||||
|
||||
@staticmethod
|
||||
def delete_by_task_id(db: Session, task_id: str) -> bool:
|
||||
"""删除任务的所有分享记录"""
|
||||
shares = db.query(PlanShare).filter(PlanShare.task_id == task_id).all()
|
||||
if shares:
|
||||
for share in shares:
|
||||
db.delete(share)
|
||||
db.commit()
|
||||
return True
|
||||
return False
|
||||
|
||||
@@ -10,7 +10,7 @@ import os
|
||||
sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
|
||||
|
||||
from db.database import engine, Base
|
||||
from db.models import MultiAgentTask, UserAgent
|
||||
from db.models import MultiAgentTask, UserAgent, PlanShare
|
||||
|
||||
|
||||
def init_database():
|
||||
|
||||
@@ -137,3 +137,34 @@ class UserAgent(Base):
|
||||
"agent_config": self.agent_config,
|
||||
"created_at": self.created_at.isoformat() if self.created_at else None,
|
||||
}
|
||||
|
||||
|
||||
class PlanShare(Base):
|
||||
"""任务分享记录模型"""
|
||||
__tablename__ = "plan_shares"
|
||||
|
||||
id = Column(Integer, primary_key=True, autoincrement=True)
|
||||
share_token = Column(String(64), unique=True, index=True, nullable=False) # 唯一分享码
|
||||
extraction_code = Column(String(8), nullable=True) # 提取码（4位字母数字）
|
||||
task_id = Column(String(64), nullable=False, index=True) # 关联的任务ID
|
||||
task_data = Column(JSONB, nullable=False) # 完整的任务数据（脱敏后）
|
||||
created_at = Column(DateTime(timezone=True), default=utc_now)
|
||||
expires_at = Column(DateTime(timezone=True), nullable=True) # 过期时间
|
||||
view_count = Column(Integer, default=0) # 查看次数
|
||||
|
||||
__table_args__ = (
|
||||
Index("idx_plan_shares_token", "share_token"),
|
||||
)
|
||||
|
||||
def to_dict(self) -> dict:
|
||||
"""转换为字典"""
|
||||
return {
|
||||
"id": self.id,
|
||||
"share_token": self.share_token,
|
||||
"extraction_code": self.extraction_code,
|
||||
"task_id": self.task_id,
|
||||
"task_data": self.task_data,
|
||||
"created_at": self.created_at.isoformat() if self.created_at else None,
|
||||
"expires_at": self.expires_at.isoformat() if self.expires_at else None,
|
||||
"view_count": self.view_count,
|
||||
}
|
||||
|
||||
@@ -62,9 +62,45 @@ CREATE TRIGGER update_multi_agent_tasks_updated_at
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION update_updated_at_column();
|
||||
|
||||
-- =============================================================================
|
||||
-- 表3: export_records (导出记录)
|
||||
-- =============================================================================
|
||||
CREATE TABLE IF NOT EXISTS export_records (
|
||||
id SERIAL PRIMARY KEY,
|
||||
task_id VARCHAR(64) NOT NULL,
|
||||
user_id VARCHAR(64) NOT NULL,
|
||||
export_type VARCHAR(32) NOT NULL,
|
||||
file_name VARCHAR(256) NOT NULL,
|
||||
file_path VARCHAR(512) NOT NULL,
|
||||
file_url VARCHAR(512),
|
||||
file_size INTEGER DEFAULT 0,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_export_records_task_user ON export_records(task_id, user_id);
|
||||
|
||||
-- =============================================================================
|
||||
-- 表4: plan_shares (任务分享记录)
|
||||
-- =============================================================================
|
||||
CREATE TABLE IF NOT EXISTS plan_shares (
|
||||
id SERIAL PRIMARY KEY,
|
||||
share_token VARCHAR(64) NOT NULL UNIQUE,
|
||||
extraction_code VARCHAR(8),
|
||||
task_id VARCHAR(64) NOT NULL,
|
||||
task_data JSONB NOT NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
|
||||
expires_at TIMESTAMP WITH TIME ZONE,
|
||||
view_count INTEGER DEFAULT 0
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_plan_shares_token ON plan_shares(share_token);
|
||||
CREATE INDEX IF NOT EXISTS idx_plan_shares_task_id ON plan_shares(task_id);
|
||||
|
||||
DO $$
|
||||
BEGIN
|
||||
RAISE NOTICE '✅ PostgreSQL 数据库表结构创建完成！';
|
||||
RAISE NOTICE '表: multi_agent_tasks (多智能体任务记录)';
|
||||
RAISE NOTICE '表: user_agents (用户智能体配置)';
|
||||
RAISE NOTICE '表: export_records (导出记录)';
|
||||
RAISE NOTICE '表: plan_shares (任务分享记录)';
|
||||
END $$;
|
||||
|
||||
@@ -23,6 +23,7 @@ import uuid
|
||||
import copy
|
||||
import base64
|
||||
from typing import List, Dict, Optional
|
||||
from datetime import datetime, timezone, timedelta
|
||||
|
||||
# 数据库模块导入
|
||||
from db import (
|
||||
@@ -30,6 +31,7 @@ from db import (
|
||||
MultiAgentTaskCRUD,
|
||||
UserAgentCRUD,
|
||||
ExportRecordCRUD,
|
||||
PlanShareCRUD,
|
||||
TaskStatus,
|
||||
text,
|
||||
)
|
||||
@@ -2239,6 +2241,200 @@ def handle_pin_plan(data):
|
||||
})
|
||||
|
||||
|
||||
import secrets
|
||||
|
||||
|
||||
@socketio.on('share_plan')
|
||||
def handle_share_plan(data):
|
||||
"""
|
||||
WebSocket版本：分享任务
|
||||
"""
|
||||
# socketio 包装: data = { id: 'share_plan-xxx', action: 'share_plan', data: { id: 'ws_req_xxx', data: {...} } }
|
||||
request_id = data.get('id') # socketio 包装的 id
|
||||
incoming_data = data.get('data', {}).get('data', {}) # 真正的请求数据
|
||||
plan_id = incoming_data.get('plan_id')
|
||||
expiration_days = incoming_data.get('expiration_days', 7) # 默认为7天，0表示永久
|
||||
extraction_code = incoming_data.get('extraction_code', '') # 提取码
|
||||
auto_fill_code = incoming_data.get('auto_fill_code', True) # 是否在链接中自动填充提取码
|
||||
|
||||
if not plan_id:
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'error',
|
||||
'error': '缺少 plan_id（task_id）'
|
||||
})
|
||||
return
|
||||
|
||||
try:
|
||||
with get_db_context() as db:
|
||||
# 获取任务详情
|
||||
task = MultiAgentTaskCRUD.get_by_id(db, plan_id)
|
||||
if not task:
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'error',
|
||||
'error': f'任务不存在: {plan_id}'
|
||||
})
|
||||
return
|
||||
|
||||
# 生成唯一分享 token
|
||||
share_token = secrets.token_urlsafe(16)
|
||||
|
||||
# 设置过期时间
|
||||
if expiration_days == 0:
|
||||
# 永久有效
|
||||
expires_at = None
|
||||
else:
|
||||
expires_at = datetime.now(timezone.utc) + timedelta(days=expiration_days)
|
||||
|
||||
# 准备分享数据（脱敏处理，移除敏感信息）
|
||||
task_data = {
|
||||
"general_goal": task.query,
|
||||
"task_outline": task.task_outline,
|
||||
"assigned_agents": task.assigned_agents,
|
||||
"agent_scores": task.agent_scores,
|
||||
"agents_info": task.agents_info,
|
||||
"branches": task.branches,
|
||||
"result": task.result,
|
||||
"rehearsal_log": task.rehearsal_log,
|
||||
"status": task.status.value if task.status else None,
|
||||
}
|
||||
|
||||
# 创建分享记录
|
||||
share = PlanShareCRUD.create(
|
||||
db=db,
|
||||
share_token=share_token,
|
||||
task_id=plan_id,
|
||||
task_data=task_data,
|
||||
expires_at=expires_at,
|
||||
extraction_code=extraction_code.upper() if extraction_code else None,
|
||||
)
|
||||
|
||||
# 生成分享链接（根据auto_fill_code决定是否在URL中携带提取码）
|
||||
if extraction_code and auto_fill_code:
|
||||
share_url = f"/share/{share_token}?code={extraction_code.upper()}"
|
||||
else:
|
||||
share_url = f"/share/{share_token}"
|
||||
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'success',
|
||||
'data': {
|
||||
"share_url": share_url,
|
||||
"share_token": share_token,
|
||||
"extraction_code": extraction_code.upper() if extraction_code else None,
|
||||
"auto_fill_code": auto_fill_code,
|
||||
"task_id": plan_id,
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'error',
|
||||
'error': str(e)
|
||||
})
|
||||
|
||||
|
||||
@socketio.on('import_shared_plan')
|
||||
def handle_import_shared_plan(data):
|
||||
"""
|
||||
WebSocket版本：导入分享的任务到自己的历史记录
|
||||
"""
|
||||
# socketio 包装: data = { id: 'import_shared_plan-xxx', action: 'import_shared_plan', data: { id: 'ws_req_xxx', data: {...} } }
|
||||
request_id = data.get('id') # socketio 包装的 id
|
||||
incoming_data = data.get('data', {}).get('data', {}) # 真正的请求数据
|
||||
share_token = incoming_data.get('share_token')
|
||||
user_id = incoming_data.get('user_id')
|
||||
|
||||
if not share_token:
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'error',
|
||||
'error': '缺少 share_token'
|
||||
})
|
||||
return
|
||||
|
||||
if not user_id:
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'error',
|
||||
'error': '缺少 user_id'
|
||||
})
|
||||
return
|
||||
|
||||
try:
|
||||
with get_db_context() as db:
|
||||
# 获取分享记录
|
||||
share = PlanShareCRUD.get_by_token(db, share_token)
|
||||
if not share:
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'error',
|
||||
'error': '分享链接无效或已失效'
|
||||
})
|
||||
return
|
||||
|
||||
# 检查是否过期
|
||||
if share.expires_at and share.expires_at.replace(tzinfo=None) < datetime.now():
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'error',
|
||||
'error': '分享链接已过期'
|
||||
})
|
||||
return
|
||||
|
||||
# 获取分享的任务数据
|
||||
task_data = share.task_data
|
||||
|
||||
# 生成新的 task_id（因为是导入到自己的账号）
|
||||
import uuid
|
||||
new_task_id = str(uuid.uuid4())
|
||||
|
||||
# 创建新的任务记录
|
||||
task = MultiAgentTaskCRUD.create(
|
||||
db=db,
|
||||
task_id=new_task_id,
|
||||
user_id=user_id,
|
||||
query=task_data.get("general_goal", ""),
|
||||
agents_info=task_data.get("agents_info", []),
|
||||
task_outline=task_data.get("task_outline"),
|
||||
assigned_agents=task_data.get("assigned_agents"),
|
||||
agent_scores=task_data.get("agent_scores"),
|
||||
result=task_data.get("result"),
|
||||
)
|
||||
|
||||
# 如果有分支数据，也保存
|
||||
if task_data.get("branches"):
|
||||
MultiAgentTaskCRUD.update_branches(db, new_task_id, task_data["branches"])
|
||||
|
||||
# 如果有执行日志，也保存
|
||||
if task_data.get("rehearsal_log"):
|
||||
MultiAgentTaskCRUD.update_rehearsal_log(db, new_task_id, task_data["rehearsal_log"])
|
||||
|
||||
# 增加分享的查看次数
|
||||
PlanShareCRUD.increment_view_count(db, share_token)
|
||||
|
||||
# 通知所有客户端刷新历史列表
|
||||
socketio.emit('history_updated', {'user_id': user_id})
|
||||
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'success',
|
||||
'data': {
|
||||
"message": "导入成功",
|
||||
"task_id": new_task_id,
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
emit('response', {
|
||||
'id': request_id,
|
||||
'status': 'error',
|
||||
'error': str(e)
|
||||
})
|
||||
|
||||
|
||||
@socketio.on('save_branches')
|
||||
def handle_save_branches(data):
|
||||
"""
|
||||
@@ -3157,6 +3353,168 @@ def get_share_info(record_id: int):
|
||||
return jsonify({'error': str(e)}), 500
|
||||
|
||||
|
||||
# ==================== 任务分享页面 ====================
|
||||
|
||||
@app.route('/share/<share_token>', methods=['GET'])
|
||||
def get_shared_plan_page(share_token: str):
|
||||
"""获取分享任务页面（无需登录验证）"""
|
||||
try:
|
||||
with get_db_context() as db:
|
||||
share = PlanShareCRUD.get_by_token(db, share_token)
|
||||
if not share:
|
||||
return jsonify({'error': '分享链接无效或已失效'}), 404
|
||||
|
||||
# 检查是否过期
|
||||
if share.expires_at and share.expires_at.replace(tzinfo=None) < datetime.now():
|
||||
return jsonify({'error': '分享链接已过期'}), 404
|
||||
|
||||
# 增加查看次数
|
||||
PlanShareCRUD.increment_view_count(db, share_token)
|
||||
|
||||
# 返回分享数据
|
||||
task_data = share.task_data
|
||||
return jsonify({
|
||||
'share_token': share_token,
|
||||
'task_id': share.task_id,
|
||||
'task_data': task_data,
|
||||
'created_at': share.created_at.isoformat() if share.created_at else None,
|
||||
'view_count': share.view_count,
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({'error': str(e)}), 500
|
||||
|
||||
|
||||
@app.route('/api/share/<share_token>/check', methods=['GET'])
|
||||
def check_share_code(share_token: str):
|
||||
"""检查分享链接是否需要提取码"""
|
||||
try:
|
||||
with get_db_context() as db:
|
||||
share = PlanShareCRUD.get_by_token(db, share_token)
|
||||
if not share:
|
||||
return jsonify({'error': '分享链接无效或已失效'}), 404
|
||||
|
||||
# 检查是否过期
|
||||
if share.expires_at and share.expires_at.replace(tzinfo=None) < datetime.now():
|
||||
return jsonify({'error': '分享链接已过期'}), 404
|
||||
|
||||
# 如果有提取码，则需要提取码
|
||||
need_code = bool(share.extraction_code)
|
||||
return jsonify({
|
||||
'need_code': need_code,
|
||||
'has_extraction_code': bool(share.extraction_code)
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({'error': str(e)}), 500
|
||||
|
||||
|
||||
@app.route('/api/share/<share_token>', methods=['GET'])
|
||||
def get_shared_plan_info(share_token: str):
|
||||
"""获取分享任务详情（API 接口，无需登录验证）"""
|
||||
# 获取URL参数中的提取码
|
||||
code = request.args.get('code', '').upper()
|
||||
|
||||
try:
|
||||
with get_db_context() as db:
|
||||
share = PlanShareCRUD.get_by_token(db, share_token)
|
||||
if not share:
|
||||
return jsonify({'error': '分享链接无效或已失效'}), 404
|
||||
|
||||
# 检查是否过期
|
||||
if share.expires_at and share.expires_at.replace(tzinfo=None) < datetime.now():
|
||||
return jsonify({'error': '分享链接已过期'}), 404
|
||||
|
||||
# 验证提取码
|
||||
if share.extraction_code:
|
||||
if not code:
|
||||
return jsonify({'error': '请输入提取码'}), 403
|
||||
if code != share.extraction_code:
|
||||
return jsonify({'error': '提取码错误'}), 403
|
||||
|
||||
# 增加查看次数
|
||||
PlanShareCRUD.increment_view_count(db, share_token)
|
||||
|
||||
# 返回分享数据
|
||||
task_data = share.task_data
|
||||
return jsonify({
|
||||
'share_token': share_token,
|
||||
'task_id': share.task_id,
|
||||
'task_data': task_data,
|
||||
'created_at': share.created_at.isoformat() if share.created_at else None,
|
||||
'expires_at': share.expires_at.isoformat() if share.expires_at else None,
|
||||
'view_count': share.view_count,
|
||||
'extraction_code': share.extraction_code,
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({'error': str(e)}), 500
|
||||
|
||||
|
||||
@app.route('/api/share/import', methods=['POST'])
|
||||
def import_shared_plan():
|
||||
"""导入分享的任务到自己的历史记录（HTTP API，无需 WebSocket）"""
|
||||
try:
|
||||
data = request.get_json()
|
||||
share_token = data.get('share_token')
|
||||
user_id = data.get('user_id')
|
||||
|
||||
if not share_token:
|
||||
return jsonify({'error': '缺少 share_token'}), 400
|
||||
|
||||
if not user_id:
|
||||
return jsonify({'error': '缺少 user_id，请先登录'}), 401
|
||||
|
||||
with get_db_context() as db:
|
||||
# 获取分享记录
|
||||
share = PlanShareCRUD.get_by_token(db, share_token)
|
||||
if not share:
|
||||
return jsonify({'error': '分享链接无效或已失效'}), 404
|
||||
|
||||
# 检查是否过期
|
||||
if share.expires_at and share.expires_at.replace(tzinfo=None) < datetime.now():
|
||||
return jsonify({'error': '分享链接已过期'}), 404
|
||||
|
||||
# 获取分享的任务数据
|
||||
task_data = share.task_data
|
||||
|
||||
# 生成新的 task_id（因为是导入到自己的账号）
|
||||
new_task_id = str(uuid.uuid4())
|
||||
|
||||
# 创建新的任务记录
|
||||
task = MultiAgentTaskCRUD.create(
|
||||
db=db,
|
||||
task_id=new_task_id,
|
||||
user_id=user_id,
|
||||
query=task_data.get("general_goal", ""),
|
||||
agents_info=task_data.get("agents_info", []),
|
||||
task_outline=task_data.get("task_outline"),
|
||||
assigned_agents=task_data.get("assigned_agents"),
|
||||
agent_scores=task_data.get("agent_scores"),
|
||||
result=task_data.get("result"),
|
||||
)
|
||||
|
||||
# 如果有分支数据，也保存
|
||||
if task_data.get("branches"):
|
||||
MultiAgentTaskCRUD.update_branches(db, new_task_id, task_data["branches"])
|
||||
|
||||
# 如果有执行日志，也保存
|
||||
if task_data.get("rehearsal_log"):
|
||||
MultiAgentTaskCRUD.update_rehearsal_log(db, new_task_id, task_data["rehearsal_log"])
|
||||
|
||||
# 增加分享的查看次数
|
||||
PlanShareCRUD.increment_view_count(db, share_token)
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'message': '导入成功',
|
||||
'task_id': new_task_id,
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({'error': str(e)}), 500
|
||||
|
||||
|
||||
@app.route('/api/export/<int:record_id>', methods=['DELETE'])
|
||||
def delete_export(record_id: int):
|
||||
"""删除导出记录"""
|
||||
|
||||
471
frontend/src/components/SharePlanDialog/index.vue
Normal file
471
frontend/src/components/SharePlanDialog/index.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:width="width"
|
||||
:close-on-click-modal="true"
|
||||
:center="true"
|
||||
:show-close="true"
|
||||
top="20vh"
|
||||
title="链接分享"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<div class="share-content">
|
||||
<!-- 设置区域 -->
|
||||
<div v-if="!loading && !error" class="settings-section">
|
||||
<!-- 有效期设置 -->
|
||||
<div class="setting-row inline">
|
||||
<div class="setting-label">有效期：</div>
|
||||
<div class="option-box">
|
||||
<div
|
||||
v-for="option in expirationOptions"
|
||||
:key="option.value"
|
||||
:class="['option-item', { active: expirationDays === option.value }]"
|
||||
@click="expirationDays = option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提取码设置 -->
|
||||
<div class="setting-row inline">
|
||||
<div class="setting-label">提取码：</div>
|
||||
<div class="code-option-box">
|
||||
<div
|
||||
:class="['option-item', { active: codeType === 'random' }]"
|
||||
@click="handleCodeTypeChange('random')"
|
||||
>
|
||||
随机生成
|
||||
</div>
|
||||
<div
|
||||
:class="['option-item', { active: codeType === 'custom' }]"
|
||||
@click="handleCodeTypeChange('custom')"
|
||||
>
|
||||
自定义
|
||||
</div>
|
||||
</div>
|
||||
<!-- 自定义输入框 -->
|
||||
<div v-if="codeType === 'custom'" class="custom-code-wrapper">
|
||||
<el-input
|
||||
v-model="customCode"
|
||||
placeholder="仅支持字母/数字"
|
||||
class="custom-code-input"
|
||||
maxlength="4"
|
||||
@input="validateCustomCode"
|
||||
>
|
||||
<template #suffix>
|
||||
<span v-if="customCode" class="code-count">{{ customCode.length }}/4</span>
|
||||
</template>
|
||||
</el-input>
|
||||
<span v-if="!customCode" class="code-hint">请输入提取码</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自动填充提取码选项 -->
|
||||
<div class="setting-row">
|
||||
<el-checkbox v-model="autoFillCode" class="auto-fill-checkbox">
|
||||
分享链接自动填充提取码
|
||||
</el-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- 复制链接按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="generate-btn"
|
||||
:disabled="!canGenerate"
|
||||
:loading="loading"
|
||||
@click="handleCopyLink"
|
||||
>
|
||||
复制链接
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="error-state">
|
||||
<div class="error-icon">
|
||||
<SvgIcon icon-class="JingGao" size="48px" color="#f56c6c" />
|
||||
</div>
|
||||
<p class="error-text">{{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Loading } from '@element-plus/icons-vue'
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue'
|
||||
import websocket from '@/utils/websocket'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
planId?: string
|
||||
width?: string | number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
planId: '',
|
||||
width: '450px'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
// 有效期选项
|
||||
const expirationOptions = [
|
||||
{ label: '1天', value: 1 },
|
||||
{ label: '7天', value: 7 },
|
||||
{ label: '30天', value: 30 },
|
||||
{ label: '365天', value: 365 },
|
||||
{ label: '永久有效', value: 0 }
|
||||
]
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const dialogVisible = ref(props.modelValue)
|
||||
const expirationDays = ref(7) // 默认7天
|
||||
const codeType = ref<'random' | 'custom'>('random') // 提取码类型
|
||||
const customCode = ref('') // 自定义提取码
|
||||
const generatedCode = ref('') // 生成的提取码
|
||||
const autoFillCode = ref(true) // 分享链接自动填充提取码
|
||||
|
||||
// 是否可以生成链接
|
||||
const canGenerate = computed(() => {
|
||||
if (codeType.value === 'random') {
|
||||
return true // 随机生成总是可以
|
||||
} else {
|
||||
return /^[a-zA-Z0-9]{4}$/.test(customCode.value)
|
||||
}
|
||||
})
|
||||
|
||||
// 生成唯一请求ID
|
||||
let requestIdCounter = 0
|
||||
const generateRequestId = () => `ws_req_${Date.now()}_${++requestIdCounter}`
|
||||
|
||||
// 监听 v-model 变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
val => {
|
||||
dialogVisible.value = val
|
||||
if (val && props.planId) {
|
||||
// 打开弹窗时重置状态
|
||||
loading.value = false
|
||||
error.value = ''
|
||||
// 生成随机提取码
|
||||
generateRandomCode()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 监听对话框显示状态变化
|
||||
watch(dialogVisible, val => {
|
||||
emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
// 生成随机提取码（4位字母数字）
|
||||
const generateRandomCode = () => {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
|
||||
let code = ''
|
||||
for (let i = 0; i < 4; i++) {
|
||||
code += chars.charAt(Math.floor(Math.random() * chars.length))
|
||||
}
|
||||
generatedCode.value = code
|
||||
}
|
||||
|
||||
// 处理提取码类型变化
|
||||
const handleCodeTypeChange = (type: 'random' | 'custom') => {
|
||||
codeType.value = type
|
||||
if (type === 'random') {
|
||||
generateRandomCode()
|
||||
}
|
||||
}
|
||||
|
||||
// 验证自定义提取码
|
||||
const validateCustomCode = (value: string) => {
|
||||
// 只允许字母和数字
|
||||
customCode.value = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase()
|
||||
}
|
||||
|
||||
// 生成并复制链接
|
||||
const handleCopyLink = async () => {
|
||||
if (!props.planId) {
|
||||
error.value = '任务 ID 为空'
|
||||
return
|
||||
}
|
||||
|
||||
// 获取提取码
|
||||
const extractionCode = codeType.value === 'random' ? generatedCode.value : customCode.value
|
||||
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
const reqId = generateRequestId()
|
||||
|
||||
try {
|
||||
const result = await websocket.send('share_plan', {
|
||||
id: reqId,
|
||||
data: {
|
||||
plan_id: props.planId,
|
||||
expiration_days: expirationDays.value,
|
||||
extraction_code: extractionCode,
|
||||
auto_fill_code: autoFillCode.value
|
||||
}
|
||||
})
|
||||
|
||||
if (result.data?.share_url) {
|
||||
// 获取当前域名
|
||||
const baseUrl = window.location.origin
|
||||
const fullUrl = baseUrl + result.data.share_url
|
||||
|
||||
// 复制到剪贴板
|
||||
try {
|
||||
await navigator.clipboard.writeText(fullUrl)
|
||||
ElMessage.success('链接已复制到剪贴板')
|
||||
dialogVisible.value = false
|
||||
} catch {
|
||||
ElMessage.error('复制失败，请手动复制')
|
||||
}
|
||||
} else {
|
||||
error.value = '生成分享链接失败'
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '生成分享链接失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框关闭后重置状态
|
||||
const handleClosed = () => {
|
||||
loading.value = false
|
||||
error.value = ''
|
||||
expirationDays.value = 7
|
||||
codeType.value = 'random'
|
||||
customCode.value = ''
|
||||
generatedCode.value = ''
|
||||
autoFillCode.value = true
|
||||
}
|
||||
|
||||
// 暴露方法供外部调用
|
||||
defineExpose({
|
||||
close: () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.share-content {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
.setting-row {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
.setting-label {
|
||||
margin-bottom: 0;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.option-box {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
.code-option-box {
|
||||
flex: none;
|
||||
}
|
||||
.custom-code-wrapper {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.option-box {
|
||||
display: flex;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.option-item {
|
||||
flex: 1;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-bg-subtle);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-option-box {
|
||||
display: flex;
|
||||
width: 160px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.option-item {
|
||||
flex: 1;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-bg-subtle);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-code-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
|
||||
.custom-code-input {
|
||||
width: 100px;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-input__suffix) {
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
&::placeholder {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.code-count {
|
||||
font-size: 10px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.code-hint {
|
||||
font-size: 12px;
|
||||
color: var(--color-error, #f56c6c);
|
||||
margin-left: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.auto-fill-checkbox {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.generate-btn {
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
gap: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
.el-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.success-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
|
||||
.success-icon {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.share-link-box {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.link-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.error-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
gap: 12px;
|
||||
|
||||
.error-text {
|
||||
color: var(--color-error, #f56c6c);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -26,6 +26,7 @@
|
||||
</div>
|
||||
<div class="plan-actions">
|
||||
<el-popover
|
||||
:ref="(el: any) => setPopoverRef(plan.id, el)"
|
||||
placement="bottom-end"
|
||||
:show-arrow="false"
|
||||
trigger="click"
|
||||
@@ -37,15 +38,15 @@
|
||||
</button>
|
||||
</template>
|
||||
<div class="action-menu">
|
||||
<div class="action-item" @click="pinPlan(plan)">
|
||||
<div class="action-item" @click="handleAction(plan, 'pin')">
|
||||
<SvgIcon icon-class="ZhiDing" size="14px" />
|
||||
<span>{{ plan.is_pinned ? '取消置顶' : '置顶' }}</span>
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<div class="action-item" @click="handleAction(plan, 'share')">
|
||||
<SvgIcon icon-class="FenXiang" size="14px" />
|
||||
<span>分享</span>
|
||||
</div>
|
||||
<div class="action-item" @click="deletePlan(plan)">
|
||||
<div class="action-item" @click="handleAction(plan, 'delete')">
|
||||
<SvgIcon icon-class="ShanChu" size="14px" />
|
||||
<span>删除</span>
|
||||
</div>
|
||||
@@ -62,6 +63,12 @@
|
||||
content="删除后，该任务无法恢复 !"
|
||||
@confirm="confirmDelete"
|
||||
/>
|
||||
|
||||
<!-- 分享对话框 -->
|
||||
<SharePlanDialog
|
||||
v-model="shareDialogVisible"
|
||||
:plan-id="sharePlanId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -71,6 +78,7 @@ import { ElMessage } from 'element-plus'
|
||||
import { Loading } from '@element-plus/icons-vue'
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue'
|
||||
import DeleteConfirmDialog from '@/components/DeleteConfirmDialog/index.vue'
|
||||
import SharePlanDialog from '@/components/SharePlanDialog/index.vue'
|
||||
import websocket from '@/utils/websocket'
|
||||
|
||||
// 事件定义
|
||||
@@ -101,6 +109,44 @@ const dialogVisible = ref(false)
|
||||
const planToDelete = ref<PlanInfo | null>(null)
|
||||
const deleting = ref(false)
|
||||
|
||||
// 分享对话框相关
|
||||
const shareDialogVisible = ref(false)
|
||||
const sharePlanId = ref<string>('')
|
||||
|
||||
// Popover 引用管理
|
||||
const popoverRefs = new Map<string, any>()
|
||||
const setPopoverRef = (planId: string, el: any) => {
|
||||
if (el) {
|
||||
popoverRefs.set(planId, el)
|
||||
}
|
||||
}
|
||||
|
||||
// 统一处理操作点击
|
||||
const handleAction = (plan: PlanInfo, action: 'pin' | 'share' | 'delete') => {
|
||||
// 关闭 popover
|
||||
const popover = popoverRefs.get(plan.id)
|
||||
if (popover) {
|
||||
popover.hide()
|
||||
}
|
||||
|
||||
// 延迟执行操作，让 popover 有时间关闭
|
||||
setTimeout(() => {
|
||||
if (action === 'pin') {
|
||||
pinPlan(plan)
|
||||
} else if (action === 'share') {
|
||||
openShareDialog(plan)
|
||||
} else if (action === 'delete') {
|
||||
deletePlan(plan)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 打开分享弹窗
|
||||
const openShareDialog = (plan: PlanInfo) => {
|
||||
sharePlanId.value = plan.id
|
||||
shareDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 生成唯一请求ID
|
||||
let requestIdCounter = 0
|
||||
const generateRequestId = () => `ws_req_${Date.now()}_${++requestIdCounter}`
|
||||
|
||||
@@ -1,19 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Download } from '@element-plus/icons-vue'
|
||||
import { Download, Document, User, Clock } from '@element-plus/icons-vue'
|
||||
|
||||
interface ShareInfo {
|
||||
// 分享数据类型
|
||||
type ShareType = 'export' | 'plan'
|
||||
|
||||
interface ExportShareInfo {
|
||||
file_name: string
|
||||
export_type: string
|
||||
created_at: string
|
||||
file_size: number
|
||||
}
|
||||
|
||||
interface PlanShareInfo {
|
||||
share_token: string
|
||||
task_id: string
|
||||
task_data: {
|
||||
general_goal: string
|
||||
task_outline?: any
|
||||
assigned_agents?: any
|
||||
agents_info?: any[]
|
||||
status?: string
|
||||
}
|
||||
created_at: string
|
||||
expires_at: string | null
|
||||
view_count: number
|
||||
}
|
||||
|
||||
// 获取 API 地址
|
||||
const getApiBaseUrl = (): string => {
|
||||
// 尝试从 localStorage 获取配置
|
||||
const configStr = localStorage.getItem('app_config')
|
||||
if (configStr) {
|
||||
try {
|
||||
@@ -25,23 +42,117 @@ const getApiBaseUrl = (): string => {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
// 返回 /api 作为基础路径
|
||||
return '/api'
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const loading = ref(true)
|
||||
const shareInfo = ref<ShareInfo | null>(null)
|
||||
const shareType = ref<ShareType>('plan')
|
||||
const urlCode = ref('') // URL中的提取码
|
||||
const inputCode = ref('') // 用户输入的提取码
|
||||
const codeError = ref('') // 提取码输入错误提示
|
||||
const needCode = ref(false) // 是否需要提取码
|
||||
const codeVerified = ref(false) // 提取码是否已验证
|
||||
const exportInfo = ref<ExportShareInfo | null>(null)
|
||||
const planInfo = ref<PlanShareInfo | null>(null)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// 解析分享 token
|
||||
const parseShareToken = (token: string): { recordId: number; timestamp: number } | null => {
|
||||
// 格式: export_{id}_{timestamp}
|
||||
// 导入相关
|
||||
const importing = ref(false)
|
||||
const importSuccess = ref(false)
|
||||
|
||||
// 判断分享类型
|
||||
const isExportShare = (token: string | undefined): boolean => {
|
||||
if (!token) return false
|
||||
return /^export_\d+_\d+$/.test(token)
|
||||
}
|
||||
|
||||
// 解析导出分享 token
|
||||
const parseExportToken = (token: string): { recordId: number; timestamp: number } | null => {
|
||||
const match = token.match(/^export_(\d+)_(\d+)$/)
|
||||
if (!match) return null
|
||||
return {
|
||||
recordId: parseInt(match[1], 10),
|
||||
timestamp: parseInt(match[2], 10)
|
||||
recordId: parseInt(match[1]!, 10),
|
||||
timestamp: parseInt(match[2]!, 10)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取导出分享信息
|
||||
const fetchExportShareInfo = async (recordId: number) => {
|
||||
try {
|
||||
const apiBaseUrl = getApiBaseUrl()
|
||||
const url = `${apiBaseUrl}/export/${recordId}/share/info`
|
||||
|
||||
const controller = new AbortController()
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000)
|
||||
|
||||
const response = await fetch(url, { signal: controller.signal })
|
||||
clearTimeout(timeoutId)
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
error.value = '分享链接不存在或已失效'
|
||||
} else {
|
||||
error.value = '获取分享信息失败'
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
exportInfo.value = await response.json()
|
||||
} catch (e: any) {
|
||||
console.error('获取导出分享信息失败:', e)
|
||||
if (e.name === 'AbortError') {
|
||||
error.value = '请求超时，请稍后重试'
|
||||
} else {
|
||||
error.value = '网络错误，请稍后重试'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取任务分享信息
|
||||
const fetchPlanShareInfo = async (
|
||||
token: string | undefined,
|
||||
code?: string,
|
||||
setGlobalError: boolean = true
|
||||
) => {
|
||||
try {
|
||||
const apiBaseUrl = getApiBaseUrl()
|
||||
let url = `${apiBaseUrl}/share/${token}`
|
||||
if (code) {
|
||||
url += `?code=${code}`
|
||||
}
|
||||
|
||||
const controller = new AbortController()
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000)
|
||||
|
||||
const response = await fetch(url, { signal: controller.signal })
|
||||
clearTimeout(timeoutId)
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
if (setGlobalError) error.value = '分享链接不存在或已失效'
|
||||
} else if (response.status === 403) {
|
||||
// 提取码错误不设置全局error
|
||||
codeError.value = '提取码错误，请重新输入'
|
||||
} else {
|
||||
if (setGlobalError) error.value = '获取分享信息失败'
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
planInfo.value = await response.json()
|
||||
codeVerified.value = true
|
||||
return true
|
||||
} catch (e: any) {
|
||||
console.error('获取任务分享信息失败:', e)
|
||||
if (setGlobalError) {
|
||||
if (e.name === 'AbortError') {
|
||||
error.value = '请求超时，请稍后重试'
|
||||
} else {
|
||||
error.value = '网络错误，请稍后重试'
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,75 +161,108 @@ const fetchShareInfo = async () => {
|
||||
const token = route.params.token as string
|
||||
console.log('分享 token:', token)
|
||||
|
||||
// 从URL参数中获取提取码
|
||||
const queryCode = (route.query.code as string) || ''
|
||||
|
||||
if (!token) {
|
||||
error.value = '无效的分享链接'
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
const parsed = parseShareToken(token)
|
||||
if (!parsed) {
|
||||
error.value = '无效的分享链接格式'
|
||||
loading.value = false
|
||||
return
|
||||
// 判断分享类型
|
||||
if (isExportShare(token)) {
|
||||
shareType.value = 'export'
|
||||
const parsed = parseExportToken(token)
|
||||
if (!parsed) {
|
||||
error.value = '无效的分享链接格式'
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
await fetchExportShareInfo(parsed.recordId)
|
||||
} else {
|
||||
shareType.value = 'plan'
|
||||
// 如果有提取码，先尝试用提取码获取
|
||||
if (queryCode) {
|
||||
await fetchPlanShareInfo(token, queryCode)
|
||||
if (!planInfo.value) {
|
||||
// 提取码错误，显示需要输入提取码
|
||||
needCode.value = true
|
||||
urlCode.value = queryCode
|
||||
}
|
||||
} else {
|
||||
// 没有提取码，先检查是否需要提取码
|
||||
await checkNeedCode(token)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('解析后的 recordId:', parsed.recordId)
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 检查是否需要提取码
|
||||
const checkNeedCode = async (token: string) => {
|
||||
try {
|
||||
// 从配置获取 API 地址
|
||||
const apiBaseUrl = getApiBaseUrl()
|
||||
const url = `${apiBaseUrl}/export/${parsed.recordId}/share/info`
|
||||
console.log('请求 URL:', url)
|
||||
const url = `${apiBaseUrl}/share/${token}/check`
|
||||
|
||||
// 添加超时
|
||||
const controller = new AbortController()
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000)
|
||||
|
||||
const response = await fetch(url, { signal: controller.signal })
|
||||
clearTimeout(timeoutId)
|
||||
|
||||
console.log('响应状态:', response.status)
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
error.value = '分享链接不存在或已失效'
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
if (data.need_code) {
|
||||
needCode.value = true
|
||||
} else {
|
||||
error.value = '获取分享信息失败'
|
||||
// 不需要提取码，直接获取
|
||||
await fetchPlanShareInfo(token)
|
||||
}
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
shareInfo.value = await response.json()
|
||||
console.log('分享信息:', shareInfo.value)
|
||||
} catch (e: any) {
|
||||
console.error('获取分享信息失败:', e)
|
||||
if (e.name === 'AbortError') {
|
||||
error.value = '请求超时，请稍后重试'
|
||||
} else {
|
||||
error.value = '网络错误，请稍后重试'
|
||||
// 默认需要提取码
|
||||
needCode.value = true
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
} catch (e) {
|
||||
console.error('检查提取码失败:', e)
|
||||
needCode.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 下载文件
|
||||
// 验证提取码
|
||||
const verifyCode = async () => {
|
||||
if (!inputCode.value || inputCode.value.length !== 4) {
|
||||
ElMessage.warning('请输入4位提取码')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
codeError.value = ''
|
||||
const success = await fetchPlanShareInfo(
|
||||
route.params.token as string,
|
||||
inputCode.value.toUpperCase(),
|
||||
false
|
||||
)
|
||||
if (!success) {
|
||||
codeError.value = '提取码错误，请重新输入'
|
||||
inputCode.value = '' // 清空输入框
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 下载导出文件
|
||||
const downloadFile = async () => {
|
||||
if (!shareInfo.value) return
|
||||
if (!exportInfo.value) return
|
||||
|
||||
try {
|
||||
const apiBaseUrl = getApiBaseUrl()
|
||||
const token = route.params.token as string
|
||||
const parsed = parseShareToken(token)
|
||||
const parsed = parseExportToken(token)
|
||||
|
||||
if (!parsed) {
|
||||
ElMessage.error('无效的分享链接')
|
||||
return
|
||||
}
|
||||
|
||||
// 触发下载
|
||||
window.location.href = `${apiBaseUrl}/api/export/${parsed.recordId}/download`
|
||||
} catch (e) {
|
||||
console.error('下载失败:', e)
|
||||
@@ -126,13 +270,44 @@ const downloadFile = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
// 导入任务到我的历史记录
|
||||
const importPlan = async () => {
|
||||
if (!planInfo.value) return
|
||||
|
||||
const userId = localStorage.getItem('user_id')
|
||||
if (!userId) {
|
||||
ElMessage.warning('请先登录后再导入任务')
|
||||
return
|
||||
}
|
||||
|
||||
importing.value = true
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/share/import`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
share_token: planInfo.value.share_token,
|
||||
user_id: userId
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
importSuccess.value = true
|
||||
ElMessage.success('任务已导入到您的历史记录')
|
||||
} else {
|
||||
ElMessage.error(result.error || '导入失败')
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('导入失败:', e)
|
||||
ElMessage.error(e.message || '导入失败')
|
||||
} finally {
|
||||
importing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
@@ -147,22 +322,52 @@ const formatDate = (dateStr: string): string => {
|
||||
})
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
// 获取文件类型显示名称
|
||||
const getFileTypeName = (type: string): string => {
|
||||
const typeMap: Record<string, string> = {
|
||||
'doc': 'Word 文档',
|
||||
'markdown': 'Markdown',
|
||||
'mindmap': '思维导图',
|
||||
'infographic': '信息图',
|
||||
'excel': 'Excel 表格',
|
||||
'ppt': 'PPT 演示文稿'
|
||||
doc: 'Word 文档',
|
||||
markdown: 'Markdown',
|
||||
mindmap: '思维导图',
|
||||
infographic: '信息图',
|
||||
excel: 'Excel 表格',
|
||||
ppt: 'PPT 演示文稿'
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
// 任务状态显示
|
||||
const taskStatusText = computed(() => {
|
||||
if (!planInfo.value?.task_data?.status) return '未知'
|
||||
const statusMap: Record<string, string> = {
|
||||
generating: '生成中',
|
||||
executing: '执行中',
|
||||
stopped: '已停止',
|
||||
completed: '已完成'
|
||||
}
|
||||
return statusMap[planInfo.value.task_data.status] || planInfo.value.task_data.status
|
||||
})
|
||||
|
||||
// 返回首页（刷新页面）
|
||||
const goToHome = () => {
|
||||
window.location.href = '/'
|
||||
}
|
||||
|
||||
// 智能体数量
|
||||
const agentCount = computed(() => {
|
||||
return planInfo.value?.task_data?.agents_info?.length || 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 设置页面标题
|
||||
document.title = '文件分享'
|
||||
document.title = '分享'
|
||||
fetchShareInfo()
|
||||
})
|
||||
</script>
|
||||
@@ -183,32 +388,135 @@ onMounted(() => {
|
||||
<p>{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 成功状态 -->
|
||||
<div v-else-if="shareInfo" class="success-state">
|
||||
<div class="success-icon">
|
||||
<!-- 需要提取码 -->
|
||||
<div v-else-if="shareType === 'plan' && needCode && !planInfo" class="code-input-state">
|
||||
<div class="code-icon">
|
||||
<svg viewBox="0 0 24 24" width="64" height="64">
|
||||
<path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>{{ shareInfo.file_name }}</h2>
|
||||
<h2>请输入提取码</h2>
|
||||
<div class="code-input-wrapper">
|
||||
<div class="code-input-box">
|
||||
<el-input
|
||||
v-model="inputCode"
|
||||
placeholder="请输入4位提取码"
|
||||
maxlength="4"
|
||||
@input="inputCode = inputCode.toUpperCase().replace(/[^A-Z0-9]/g, '')"
|
||||
@keyup.enter="verifyCode"
|
||||
class="code-input"
|
||||
/>
|
||||
<el-button type="primary" @click="verifyCode" :loading="loading"> 确认 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="codeError" class="tip-text error">{{ codeError }}</p>
|
||||
<p v-else class="tip-text">请输入分享者提供给您的提取码</p>
|
||||
</div>
|
||||
|
||||
<!-- 导出文件分享 -->
|
||||
<div v-else-if="shareType === 'export' && exportInfo" class="success-state">
|
||||
<div class="success-icon">
|
||||
<svg viewBox="0 0 24 24" width="64" height="64">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>{{ exportInfo.file_name }}</h2>
|
||||
<div class="file-info">
|
||||
<div class="info-item">
|
||||
<span class="label">文件类型：</span>
|
||||
<span class="value">{{ getFileTypeName(shareInfo.export_type) }}</span>
|
||||
<span class="value">{{ getFileTypeName(exportInfo.export_type) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">创建时间：</span>
|
||||
<span class="value">{{ formatDate(shareInfo.created_at) }}</span>
|
||||
<span class="value">{{ formatDate(exportInfo.created_at) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">文件大小：</span>
|
||||
<span class="value">{{ formatFileSize(shareInfo.file_size) }}</span>
|
||||
<span class="value">{{ formatFileSize(exportInfo.file_size) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" size="large" :icon="Download" @click="downloadFile" class="download-btn">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:icon="Download"
|
||||
@click="downloadFile"
|
||||
class="action-btn"
|
||||
>
|
||||
下载文件
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 任务分享 -->
|
||||
<div v-else-if="shareType === 'plan' && planInfo" class="success-state plan-share">
|
||||
<div class="success-icon plan-icon">
|
||||
<svg viewBox="0 0 24 24" width="64" height="64">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19M17,17H7V7H17V17Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-if="importSuccess" class="import-success">
|
||||
<svg viewBox="0 0 24 24" width="48" height="48" class="success-check">
|
||||
<path
|
||||
fill="#67c23a"
|
||||
d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"
|
||||
/>
|
||||
</svg>
|
||||
<h2>导入成功</h2>
|
||||
<p>任务已添加到您的历史记录</p>
|
||||
<el-button type="primary" @click="goToHome" class="action-btn"> 返回首页 </el-button>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<h2>{{ planInfo.task_data.general_goal || '任务分享' }}</h2>
|
||||
<div class="plan-info">
|
||||
<div class="info-item">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span class="label">任务状态：</span>
|
||||
<span class="value">{{ taskStatusText }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<el-icon><User /></el-icon>
|
||||
<span class="label">智能体数量：</span>
|
||||
<span class="value">{{ agentCount }} 个</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span class="label">分享时间：</span>
|
||||
<span class="value">{{ formatDate(planInfo.created_at) }}</span>
|
||||
</div>
|
||||
<div v-if="planInfo.expires_at" class="info-item">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span class="label">过期时间：</span>
|
||||
<span class="value">{{ formatDate(planInfo.expires_at) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">查看次数：</span>
|
||||
<span class="value">{{ planInfo.view_count }} 次</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="importing"
|
||||
@click="importPlan"
|
||||
class="action-btn"
|
||||
>
|
||||
{{ importing ? '导入中...' : '导入到我的历史记录' }}
|
||||
</el-button>
|
||||
|
||||
<p class="tip-text">导入后，您可以在历史记录中查看和恢复此任务</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -245,8 +553,12 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -275,12 +587,66 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.code-input-state {
|
||||
.code-icon {
|
||||
color: #667eea;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.code-input-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.code-input-box {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.code-input {
|
||||
width: 160px;
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
&::placeholder {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
|
||||
&.error {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-state {
|
||||
.success-icon {
|
||||
color: #667eea;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&.plan-share .success-icon.plan-icon {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 24px;
|
||||
@@ -288,7 +654,8 @@ onMounted(() => {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
.file-info,
|
||||
.plan-info {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
@@ -297,7 +664,8 @@ onMounted(() => {
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
@@ -305,6 +673,11 @@ onMounted(() => {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
@@ -316,10 +689,38 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
.plan-info .info-item {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.import-success {
|
||||
padding: 20px 0;
|
||||
|
||||
.success-check {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #67c23a;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user