admin/aitsc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化个人资料

Browse Source
This commit is contained in:
rjb
2025-10-07 23:06:38 +08:00
parent fb693e91a6
commit 28f06836dd
7 changed files with 1169 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
src/flask_prompt_master/templates/base.html
View File

@@ -89,6 +89,8 @@
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
min-width: fit-content;
}
.nav-link:hover {
@@ -99,6 +101,86 @@
.nav-link i {
font-size: 1rem;
}
/* 响应式导航栏 */
@media (max-width: 1200px) {
.nav-links {
gap: 0.5rem;
}
.nav-link {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
}
@media (max-width: 992px) {
.nav-links {
gap: 0.25rem;
}
.nav-link {
padding: 0.5rem 0.5rem;
font-size: 0.85rem;
position: relative;
}
.nav-link span {
display: none;
}
.nav-link i {
font-size: 1.1rem;
}
/* 工具提示 */
.nav-link::after {
content: attr(data-tooltip);
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
pointer-events: none;
}
.nav-link:hover::after {
opacity: 1;
visibility: visible;
}
}
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.nav-link {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.nav-link span {
display: inline;
}
}
.user-menu {
display: flex;
@@ -122,7 +204,83 @@
}
.user-menu .dropdown-menu {
min-width: 200px;
min-width: 220px;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 0.5rem 0;
}
.user-menu .dropdown-toggle {
background: none;
border: none;
color: var(--text-color);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
}
.user-menu .dropdown-toggle:hover {
background: var(--background-color);
color: var(--primary-color);
}
.user-menu .dropdown-toggle:focus {
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.user-menu .user-name {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-menu .dropdown-item {
padding: 0.75rem 1rem;
display: flex;
align-items: center;
transition: all 0.2s ease;
}
.user-menu .dropdown-item:hover {
background: var(--background-color);
color: var(--primary-color);
}
.user-menu .dropdown-item i {
width: 16px;
text-align: center;
}
.user-menu .dropdown-header {
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.user-menu .dropdown-divider {
margin: 0.5rem 0;
border-color: var(--border-color);
}
/* 响应式用户菜单 */
@media (max-width: 992px) {
.user-menu .dropdown-toggle .user-name {
display: none;
}
.user-menu .dropdown-toggle {
padding: 0.5rem;
}
}
/* 主要内容区域 */
@@ -185,32 +343,56 @@
if (data.logged_in) {
userMenu.innerHTML = `
<div class="dropdown">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
<i class="fas fa-user"></i>
${data.user.nickname}
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user-circle"></i>
<span class="user-name">${data.user.nickname}</span>
<i class="fas fa-chevron-down ms-1"></i>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/profile">个人资料</a></li>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">用户中心</h6></li>
<li><a class="dropdown-item" href="/profile">
<i class="fas fa-user me-2"></i>个人资料
</a></li>
<li><a class="dropdown-item" href="/favorites">
<i class="fas fa-heart me-2"></i>我的收藏
</a></li>
<li><a class="dropdown-item" href="/meal_planning_history">
<i class="fas fa-history me-2"></i>我的规划
</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" onclick="logout()">退出登录</a></li>
<li><a class="dropdown-item text-danger" href="#" onclick="logout()">
<i class="fas fa-sign-out-alt me-2"></i>退出登录
</a></li>
</ul>
</div>
`;
} else {
userMenu.innerHTML = `
<a href="/login" class="nav-link">
<a href="/login" class="nav-link" data-tooltip="登录">
<i class="fas fa-sign-in-alt"></i>
登录
<span>登录</span>
</a>
<a href="/register" class="nav-link">
<a href="/register" class="nav-link" data-tooltip="注册">
<i class="fas fa-user-plus"></i>
注册
<span>注册</span>
</a>
`;
}
})
.catch(error => {
console.error('检查登录状态失败:', error);
// 如果API调用失败，显示登录/注册按钮
const userMenu = document.getElementById('userMenu');
userMenu.innerHTML = `
<a href="/login" class="nav-link" data-tooltip="登录">
<i class="fas fa-sign-in-alt"></i>
<span>登录</span>
</a>
<a href="/register" class="nav-link" data-tooltip="注册">
<i class="fas fa-user-plus"></i>
<span>注册</span>
</a>
`;
});
}
@@ -245,38 +427,34 @@
<body>
<header>
<nav>
<a href="{{ url_for('main.index') }}" class="nav-brand">
<i class="fas fa-magic"></i>
提示词大师
</a>
<div class="nav-brand">
<i class="fas fa-robot"></i>
AI应用
</div>
<div class="nav-links">
<a href="{{ url_for('main.index') }}" class="nav-link">
<a href="{{ url_for('main.index') }}" class="nav-link" data-tooltip="生成提示词">
<i class="fas fa-plus"></i>
生成提示词
<span>生成提示词</span>
</a>
<a href="{{ url_for('meal_planning.meal_planning_page') }}" class="nav-link">
<a href="{{ url_for('meal_planning.meal_planning_page') }}" class="nav-link" data-tooltip="饭菜规划">
<i class="fas fa-utensils"></i>
饭菜规划
<span>饭菜规划</span>
</a>
<a href="{{ url_for('poetry.poetry_page') }}" class="nav-link">
<a href="{{ url_for('poetry.poetry_page') }}" class="nav-link" data-tooltip="古诗词解析">
<i class="fas fa-scroll"></i>
古诗词解析
<span>古诗词解析</span>
</a>
<a href="{{ url_for('poetry.poetry_favorites') }}" class="nav-link">
<a href="{{ url_for('poetry.poetry_favorites') }}" class="nav-link" data-tooltip="古诗词收藏">
<i class="fas fa-heart"></i>
古诗词收藏
<span>古诗词收藏</span>
</a>
<a href="{{ url_for('meal_planning.meal_planning_history') }}" class="nav-link">
<a href="{{ url_for('meal_planning.meal_planning_history') }}" class="nav-link" data-tooltip="我的规划">
<i class="fas fa-history"></i>
我的规划
<span>我的规划</span>
</a>
<a href="{{ url_for('favorites.favorites_page') }}" class="nav-link">
<a href="{{ url_for('favorites.favorites_page') }}" class="nav-link" data-tooltip="我的收藏">
<i class="fas fa-heart"></i>
我的收藏
</a>
<a href="{{ url_for('auth.profile_page') }}" class="nav-link">
<i class="fas fa-user"></i>
个人资料
<span>我的收藏</span>
</a>
<div class="user-menu" id="userMenu">
<!-- 用户菜单将通过JavaScript动态加载 -->

299
src/flask_prompt_master/templates/generate.html
View File

@@ -1,12 +1,12 @@
{% extends "base.html" %}
{% block title %}提示词大师{% endblock %}
{% block title %}AI应用{% endblock %}
{% block content %}
<div class="hero">
<div class="hero-content">
<h1>提示词大师</h1>
<p class="subtitle">让AI更好地理解您的需求</p>
<h1>AI应用</h1>
<p class="subtitle">智能助手，让AI更好地理解您的需求</p>
<div class="hero-decoration"></div>
</div>
</div>
@@ -74,7 +74,7 @@
<!-- 主内容区域 -->
<div class="main-content">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>提示词生成器</h2>
<h2>AI提示词生成器</h2>
<a href="{{ url_for('main.expert_generate') }}" class="btn btn-primary">
<i class="fas fa-brain"></i> 专家模式
</a>
@@ -139,6 +139,30 @@
<h3>{{ template.name }}</h3>
</div>
<!-- 模板标签 -->
<div class="template-badges">
{% if template.is_recommended %}
<span class="badge badge-recommended">
<i class="fas fa-star"></i> 推荐
</span>
{% endif %}
{% if template.is_hot %}
<span class="badge badge-hot">
<i class="fas fa-fire"></i> 热门
</span>
{% endif %}
{% if template.is_featured %}
<span class="badge badge-featured">
<i class="fas fa-gem"></i> 精选
</span>
{% endif %}
{% if template.is_exam %}
<span class="badge badge-exam">
<i class="fas fa-graduation-cap"></i> 考试
</span>
{% endif %}
</div>
<div class="template-info">
<p>{{ template.description }}</p>
</div>
@@ -800,6 +824,111 @@
border-color: var(--primary-color);
}
/* 模板标签 */
.template-badges {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-sm);
padding: 0 var(--spacing-xs);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
white-space: nowrap;
transition: var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.badge i {
font-size: 0.75rem;
}
/* 推荐标签 */
.badge-recommended {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: white;
animation: sparkle 2s ease-in-out infinite;
}
/* 热门标签 */
.badge-hot {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
animation: flicker 1.5s ease-in-out infinite;
}
/* 精选标签 */
.badge-featured {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
animation: glow 2.5s ease-in-out infinite;
}
/* 考试标签 */
.badge-exam {
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: white;
animation: pulse 2s ease-in-out infinite;
}
/* 标签动画效果 */
@keyframes sparkle {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
}
}
@keyframes flicker {
0%, 100% {
opacity: 1;
transform: scale(1);
}
25% {
opacity: 0.8;
transform: scale(0.98);
}
50% {
opacity: 1;
transform: scale(1.02);
}
75% {
opacity: 0.9;
transform: scale(0.99);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 30px rgba(139, 92, 246, 0.6);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.03);
opacity: 0.9;
}
}
.template-content {
padding: 16px;
cursor: pointer;
@@ -2617,6 +2746,168 @@ function initializeSidebar() {
// 在页面加载时初始化侧边栏
document.addEventListener('DOMContentLoaded', function() {
initializeSidebar();
initializeTemplateBadges();
});
// ==================== 模板标签功能 ====================
// 初始化模板标签功能
function initializeTemplateBadges() {
// 为标签添加点击事件
document.querySelectorAll('.badge').forEach(badge => {
badge.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡到模板卡片
handleBadgeClick(this);
});
// 添加悬停效果
badge.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
});
badge.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
// 添加标签工具提示
addBadgeTooltips();
// 统计标签使用情况
updateBadgeStats();
}
// 处理标签点击事件
function handleBadgeClick(badge) {
const badgeType = badge.className.split(' ')[1]; // 获取标签类型
const templateCard = badge.closest('.template-card');
const templateName = templateCard.querySelector('h3').textContent;
// 显示标签点击统计
trackBadgeClick(badgeType, templateName);
// 添加点击动画效果
badge.style.animation = 'none';
badge.offsetHeight; // 触发重排
badge.style.animation = null;
// 显示消息
showMessage(`已选择${getBadgeDisplayName(badgeType)}模板: ${templateName}`, 'success');
}
// 获取标签显示名称
function getBadgeDisplayName(badgeType) {
const names = {
'badge-recommended': '推荐',
'badge-hot': '热门',
'badge-featured': '精选',
'badge-exam': '考试'
};
return names[badgeType] || '特殊';
}
// 添加标签工具提示
function addBadgeTooltips() {
document.querySelectorAll('.badge').forEach(badge => {
const badgeType = badge.className.split(' ')[1];
const tooltipText = getBadgeTooltip(badgeType);
badge.setAttribute('title', tooltipText);
badge.setAttribute('data-tooltip', tooltipText);
});
}
// 获取标签工具提示文本
function getBadgeTooltip(badgeType) {
const tooltips = {
'badge-recommended': '⭐ 推荐模板 - 经过专业筛选的高质量模板',
'badge-hot': '🔥 热门模板 - 用户使用频率最高的模板',
'badge-featured': '💎 精选模板 - 编辑精选的优质模板',
'badge-exam': '🎓 考试模板 - 专为考试场景设计的模板'
};
return tooltips[badgeType] || '特殊标签';
}
// 统计标签使用情况
function updateBadgeStats() {
const stats = {
recommended: document.querySelectorAll('.badge-recommended').length,
hot: document.querySelectorAll('.badge-hot').length,
featured: document.querySelectorAll('.badge-featured').length,
exam: document.querySelectorAll('.badge-exam').length
};
// 在控制台输出统计信息（开发调试用）
console.log('模板标签统计:', stats);
// 可以在这里添加更多统计功能，比如显示在页面上
return stats;
}
// 跟踪标签点击
function trackBadgeClick(badgeType, templateName) {
const clickData = {
badgeType: badgeType,
templateName: templateName,
timestamp: new Date().toISOString(),
userAgent: navigator.userAgent
};
// 保存到本地存储
const badgeClicks = JSON.parse(localStorage.getItem('badgeClicks') || '[]');
badgeClicks.push(clickData);
// 只保留最近100条记录
if (badgeClicks.length > 100) {
badgeClicks.splice(0, badgeClicks.length - 100);
}
localStorage.setItem('badgeClicks', JSON.stringify(badgeClicks));
console.log('标签点击记录:', clickData);
}
// 显示消息提示
function showMessage(message, type = 'info') {
// 创建消息元素
const messageEl = document.createElement('div');
messageEl.className = `message message-${type}`;
messageEl.textContent = message;
// 添加样式
messageEl.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: ${type === 'success' ? '#10b981' : '#3b82f6'};
color: white;
padding: 12px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
font-size: 14px;
font-weight: 500;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
`;
document.body.appendChild(messageEl);
// 显示动画
setTimeout(() => {
messageEl.style.opacity = '1';
messageEl.style.transform = 'translateX(0)';
}, 100);
// 自动隐藏
setTimeout(() => {
messageEl.style.opacity = '0';
messageEl.style.transform = 'translateX(100%)';
setTimeout(() => {
document.body.removeChild(messageEl);
}, 300);
}, 3000);
}
</script>
{% endblock %}