feat: 完整版 uni-app 前端 + 后端 API 改造
后端:
- 新增知识搜索 API GET /api/knowledge/search
- 成就 API 改造为 AI 主题（知识探索/收藏/AI问答/社交）
前端新增 7 个页面:
- favorites (我的收藏)
- achievements (成就)
- leaderboard (排行榜)
- search (搜索)
- progress (学习进度)
- feedback (意见反馈)
- settings (设置)
- news (AI资讯详情)
完善:
- 个人中心导航全部接真实页面，清除所有'开发中'stub
- index 搜索按钮 → search 页
- trend 卡片点击 → news 详情页
- api.js 新增 feedbackApi + knowledgeApi.search
- userApi.achievements 端点
构建验证: ✅ DONE Build complete (16 pages, 16 bundles)
This commit is contained in:
Yuzhiran Dev
@@ -5,6 +5,45 @@ const ApiResponse = require('../utils/response')
|
||||
const { userAuthMiddleware } = require('../middleware/auth')
|
||||
const logger = require('../utils/logger')
|
||||
|
||||
/**
|
||||
* 搜索知识
|
||||
* GET /api/knowledge/search?q=xxx&page=1&limit=20
|
||||
*/
|
||||
router.get('/search', async (req, res) => {
|
||||
try {
|
||||
const { q, page = 1, limit = 20 } = req.query
|
||||
if (!q || q.trim().length === 0) {
|
||||
return ApiResponse.error(res, '请输入搜索关键词', 400)
|
||||
}
|
||||
|
||||
const query = {
|
||||
status: 'approved',
|
||||
$or: [
|
||||
{ title: { $regex: q, $options: 'i' } },
|
||||
{ content: { $regex: q, $options: 'i' } },
|
||||
{ tags: { $regex: q, $options: 'i' } }
|
||||
]
|
||||
}
|
||||
|
||||
const total = await Knowledge.countDocuments(query)
|
||||
const result = await Knowledge.find(query)
|
||||
.sort({ viewCount: -1, createdAt: -1 })
|
||||
.skip((parseInt(page) - 1) * parseInt(limit))
|
||||
.limit(parseInt(limit))
|
||||
.lean()
|
||||
|
||||
return ApiResponse.paginated(res, result, {
|
||||
page: parseInt(page),
|
||||
limit: parseInt(limit),
|
||||
total
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
logger.error('搜索知识失败:', error)
|
||||
return ApiResponse.serverError(res, error.message)
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取知识列表
|
||||
* GET /api/knowledge
|
||||
|
||||
@@ -202,133 +202,133 @@ router.get('/achievements', async (req, res) => {
|
||||
try {
|
||||
const user = req.user
|
||||
|
||||
// 生成成就数据
|
||||
const achievements = [
|
||||
{
|
||||
name: '探索成就',
|
||||
achievements: [
|
||||
// 生成成就数据（AI 维度主题）
|
||||
const achievements = [
|
||||
{
|
||||
id: 'dim1_complete',
|
||||
name: '一维探索者',
|
||||
description: '完成一维空间的探索',
|
||||
icon: '⭐',
|
||||
unlocked: user.exploreData.dim1?.completed || false,
|
||||
date: user.exploreData.dim1?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
name: '知识探索',
|
||||
achievements: [
|
||||
{
|
||||
id: 'dim1_read',
|
||||
name: 'AI起源探索者',
|
||||
description: '完成 AI 起源维度的知识阅读',
|
||||
icon: '📜',
|
||||
unlocked: user.exploreData.dim1?.completed || false,
|
||||
date: user.exploreData.dim1?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'dim2_read',
|
||||
name: 'AI发展探索者',
|
||||
description: '完成 AI 发展维度的知识阅读',
|
||||
icon: '🏛',
|
||||
unlocked: user.exploreData.dim2?.completed || false,
|
||||
date: user.exploreData.dim2?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'dim3_read',
|
||||
name: 'AI当前探索者',
|
||||
description: '完成 AI 当前格局维度的知识阅读',
|
||||
icon: '♟',
|
||||
unlocked: user.exploreData.dim3?.completed || false,
|
||||
date: user.exploreData.dim3?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'dim4_read',
|
||||
name: 'AI学习探索者',
|
||||
description: '完成 AI 学习与工具维度的知识阅读',
|
||||
icon: '🧠',
|
||||
unlocked: user.exploreData.dim4?.completed || false,
|
||||
date: user.exploreData.dim4?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'dim5_read',
|
||||
name: 'AI趋势探索者',
|
||||
description: '完成 AI 趋势追踪维度的知识阅读',
|
||||
icon: '⚡',
|
||||
unlocked: user.exploreData.dim5?.completed || false,
|
||||
date: user.exploreData.dim5?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'dim2_complete',
|
||||
name: '二维探索者',
|
||||
description: '完成二维空间的探索',
|
||||
icon: '✨',
|
||||
unlocked: user.exploreData.dim2?.completed || false,
|
||||
date: user.exploreData.dim2?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
name: '收藏成就',
|
||||
achievements: [
|
||||
{
|
||||
id: 'first_collection',
|
||||
name: '初次收藏',
|
||||
description: '收藏你的第一个 AI 知识',
|
||||
icon: '❤️',
|
||||
unlocked: user.collectedKnowledge?.length > 0,
|
||||
date: user.collectedKnowledge?.length > 0 ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'five_collections',
|
||||
name: '收藏爱好者',
|
||||
description: '收藏5个 AI 知识',
|
||||
icon: '🧡',
|
||||
unlocked: user.collectedKnowledge?.length >= 5,
|
||||
date: user.collectedKnowledge?.length >= 5 ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'ten_collections',
|
||||
name: '收藏大师',
|
||||
description: '收藏10个 AI 知识',
|
||||
icon: '💛',
|
||||
unlocked: user.collectedKnowledge?.length >= 10,
|
||||
date: user.collectedKnowledge?.length >= 10 ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'dim3_complete',
|
||||
name: '三维探索者',
|
||||
description: '完成三维空间的探索',
|
||||
icon: '🌟',
|
||||
unlocked: user.exploreData.dim3?.completed || false,
|
||||
date: user.exploreData.dim3?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
name: 'AI 问答',
|
||||
achievements: [
|
||||
{
|
||||
id: 'first_ask',
|
||||
name: '初次提问',
|
||||
description: '向 AI 助手提出第一个问题',
|
||||
icon: '🤖',
|
||||
unlocked: user.achievements?.includes('first_ask') || false,
|
||||
date: user.achievements?.includes('first_ask') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'ten_asks',
|
||||
name: '勤学好问',
|
||||
description: '向 AI 助手提出 10 个问题',
|
||||
icon: '💡',
|
||||
unlocked: user.achievements?.includes('ten_asks') || false,
|
||||
date: user.achievements?.includes('ten_asks') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'fifty_asks',
|
||||
name: 'AI 达人',
|
||||
description: '向 AI 助手提出 50 个问题',
|
||||
icon: '🧠',
|
||||
unlocked: user.achievements?.includes('fifty_asks') || false,
|
||||
date: user.achievements?.includes('fifty_asks') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'dim4_complete',
|
||||
name: '四维探索者',
|
||||
description: '完成四维空间的探索',
|
||||
icon: '💫',
|
||||
unlocked: user.exploreData.dim4?.completed || false,
|
||||
date: user.exploreData.dim4?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'dim5_complete',
|
||||
name: '五维探索者',
|
||||
description: '完成五维空间的探索',
|
||||
icon: '🌌',
|
||||
unlocked: user.exploreData.dim5?.completed || false,
|
||||
date: user.exploreData.dim5?.completed ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
name: '社交成就',
|
||||
achievements: [
|
||||
{
|
||||
id: 'first_share',
|
||||
name: '初次分享',
|
||||
description: '分享你的第一个知识给朋友',
|
||||
icon: '📤',
|
||||
unlocked: user.achievements?.includes('first_share') || false,
|
||||
date: user.achievements?.includes('first_share') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'five_shares',
|
||||
name: '分享达人',
|
||||
description: '分享 5 次知识给朋友',
|
||||
icon: '📣',
|
||||
unlocked: user.achievements?.includes('five_shares') || false,
|
||||
date: user.achievements?.includes('five_shares') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '创作成就',
|
||||
achievements: [
|
||||
{
|
||||
id: 'first_work',
|
||||
name: '初次创作',
|
||||
description: '创作你的第一个作品',
|
||||
icon: '🎨',
|
||||
unlocked: user.achievements?.includes('first_work') || false,
|
||||
date: user.achievements?.includes('first_work') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'five_works',
|
||||
name: '创作达人',
|
||||
description: '创作5个作品',
|
||||
icon: '🏆',
|
||||
unlocked: user.achievements?.includes('five_works') || false,
|
||||
date: user.achievements?.includes('five_works') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'ten_works',
|
||||
name: '创作大师',
|
||||
description: '创作10个作品',
|
||||
icon: '👑',
|
||||
unlocked: user.achievements?.includes('ten_works') || false,
|
||||
date: user.achievements?.includes('ten_works') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '收藏成就',
|
||||
achievements: [
|
||||
{
|
||||
id: 'first_collection',
|
||||
name: '初次收藏',
|
||||
description: '收藏你的第一个知识',
|
||||
icon: '❤️',
|
||||
unlocked: user.collectedKnowledge?.length > 0,
|
||||
date: user.collectedKnowledge?.length > 0 ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'five_collections',
|
||||
name: '收藏爱好者',
|
||||
description: '收藏5个知识',
|
||||
icon: '🧡',
|
||||
unlocked: user.collectedKnowledge?.length >= 5,
|
||||
date: user.collectedKnowledge?.length >= 5 ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'ten_collections',
|
||||
name: '收藏大师',
|
||||
description: '收藏10个知识',
|
||||
icon: '💛',
|
||||
unlocked: user.collectedKnowledge?.length >= 10,
|
||||
date: user.collectedKnowledge?.length >= 10 ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '社交成就',
|
||||
achievements: [
|
||||
{
|
||||
id: 'first_share',
|
||||
name: '初次分享',
|
||||
description: '分享你的第一个作品',
|
||||
icon: '📤',
|
||||
unlocked: user.achievements?.includes('first_share') || false,
|
||||
date: user.achievements?.includes('first_share') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
},
|
||||
{
|
||||
id: 'five_shares',
|
||||
name: '分享达人',
|
||||
description: '分享5个作品',
|
||||
icon: '📣',
|
||||
unlocked: user.achievements?.includes('five_shares') || false,
|
||||
date: user.achievements?.includes('five_shares') ? user.updatedAt.toISOString().split('T')[0] : null
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
return ApiResponse.success(res, achievements)
|
||||
|
||||
|
||||
@@ -4,6 +4,14 @@
|
||||
{"path": "pages/login/login", "style": {"navigationBarTitleText": "登录", "navigationStyle": "custom"}},
|
||||
{"path": "pages/detail/detail", "style": {"navigationBarTitleText": "AI 知识", "navigationStyle": "custom"}},
|
||||
{"path": "pages/payment/payment", "style": {"navigationBarTitleText": "订阅升级", "navigationStyle": "custom"}},
|
||||
{"path": "pages/favorites/favorites", "style": {"navigationBarTitleText": "我的收藏", "navigationStyle": "custom"}},
|
||||
{"path": "pages/achievements/achievements", "style": {"navigationBarTitleText": "成就", "navigationStyle": "custom"}},
|
||||
{"path": "pages/leaderboard/leaderboard", "style": {"navigationBarTitleText": "排行榜", "navigationStyle": "custom"}},
|
||||
{"path": "pages/search/search", "style": {"navigationBarTitleText": "搜索", "navigationStyle": "custom"}},
|
||||
{"path": "pages/progress/progress", "style": {"navigationBarTitleText": "学习进度", "navigationStyle": "custom"}},
|
||||
{"path": "pages/feedback/feedback", "style": {"navigationBarTitleText": "意见反馈", "navigationStyle": "custom"}},
|
||||
{"path": "pages/settings/settings", "style": {"navigationBarTitleText": "设置", "navigationStyle": "custom"}},
|
||||
{"path": "pages/news/news", "style": {"navigationBarTitleText": "AI 资讯", "navigationStyle": "custom"}},
|
||||
{"path": "pages/dimension/dimension", "style": {"navigationBarTitleText": "", "navigationStyle": "custom"}},
|
||||
{"path": "pages/chat/chat", "style": {"navigationBarTitleText": "AI 问答", "navigationStyle": "custom"}},
|
||||
{"path": "pages/trend/trend", "style": {"navigationBarTitleText": "AI 趋势", "navigationStyle": "custom"}},
|
||||
|
||||
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<view class="page-achievements">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="header">
|
||||
<text class="title">🏆 成就</text>
|
||||
<text class="unlock-count">{{ unlockedCount }}/{{ totalCount }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 总览卡片 -->
|
||||
<view class="overview-card" v-if="categories.length > 0">
|
||||
<view class="overview-bar">
|
||||
<view class="overview-fill" :style="{ width: progressPercent + '%' }"></view>
|
||||
</view>
|
||||
<text class="overview-text">
|
||||
已解锁 {{ unlockedCount }} / {{ totalCount }} 个成就
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 成就分类 -->
|
||||
<view class="categories" v-if="categories.length > 0">
|
||||
<view
|
||||
v-for="cat in categories"
|
||||
:key="cat.name"
|
||||
class="category"
|
||||
>
|
||||
<view class="category-header">
|
||||
<text class="category-icon">{{ catIcon(cat.name) }}</text>
|
||||
<text class="category-name">{{ cat.name }}</text>
|
||||
<text class="category-count">
|
||||
{{ cat.unlocked }}/{{ cat.achievements.length }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="achievement-list">
|
||||
<view
|
||||
v-for="ach in cat.achievements"
|
||||
:key="ach.id"
|
||||
class="achievement-item"
|
||||
:class="{ locked: !ach.unlocked }"
|
||||
>
|
||||
<view
|
||||
class="ach-icon"
|
||||
:style="ach.unlocked ? { color: achColor(ach.icon) } : {}"
|
||||
>
|
||||
{{ ach.icon }}
|
||||
</view>
|
||||
<view class="ach-info">
|
||||
<text class="ach-name">{{ ach.name }}</text>
|
||||
<text class="ach-desc">{{ ach.description }}</text>
|
||||
<text class="ach-date" v-if="ach.unlocked && ach.date">
|
||||
✦ {{ formatDate(ach.date) }}
|
||||
</text>
|
||||
<text class="ach-date" v-else>
|
||||
⌬ 未解锁
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-else-if="!loading">
|
||||
<text class="empty-icon">🏆</text>
|
||||
<text class="empty-text">暂无成就数据</text>
|
||||
<text class="empty-sub">继续探索 AI 知识，解锁更多成就</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="empty-state" v-else>
|
||||
<text class="empty-icon" style="opacity:0.4">⏳</text>
|
||||
<text class="empty-text">加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { userApi } from '@/utils/api'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const categories = ref([])
|
||||
const loading = ref(true)
|
||||
|
||||
// 成就分类的默认配置
|
||||
const CATEGORY_CONFIG = [
|
||||
{ name: '知识探索', icon: '📖', color: 'var(--dim1-color)' },
|
||||
{ name: '收藏成就', icon: '⭐', color: 'var(--dim2-color)' },
|
||||
{ name: 'AI 问答', icon: '🤖', color: 'var(--dim3-color)' },
|
||||
{ name: '社交成就', icon: '👥', color: 'var(--dim4-color)' }
|
||||
]
|
||||
|
||||
const unlockedCount = computed(() => {
|
||||
return categories.value.reduce(
|
||||
(sum, cat) => sum + (cat.unlocked || 0),
|
||||
0
|
||||
)
|
||||
})
|
||||
|
||||
const totalCount = computed(() => {
|
||||
return categories.value.reduce(
|
||||
(sum, cat) => sum + cat.achievements.length,
|
||||
0
|
||||
)
|
||||
})
|
||||
|
||||
const progressPercent = computed(() => {
|
||||
if (totalCount.value === 0) return 0
|
||||
return Math.round((unlockedCount.value / totalCount.value) * 100)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!userStore.isLoggedIn) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
loadAchievements()
|
||||
})
|
||||
|
||||
async function loadAchievements() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await userApi.achievements(userStore.token)
|
||||
// 数据格式：[{name, achievements:[{id,name,description,icon,unlocked,date}]}]
|
||||
const raw = Array.isArray(data) ? data : data.categories || []
|
||||
categories.value = raw.map((cat) => ({
|
||||
...cat,
|
||||
unlocked: cat.achievements.filter((a) => a.unlocked).length
|
||||
}))
|
||||
} catch (e) {
|
||||
console.error('[achievements] load failed:', e)
|
||||
categories.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function catIcon(name) {
|
||||
const config = CATEGORY_CONFIG.find((c) => c.name === name)
|
||||
return config ? config.icon : '🏆'
|
||||
}
|
||||
|
||||
function achColor(icon) {
|
||||
// 根据成就图标或默认分类给彩色
|
||||
return 'var(--dim1-color)'
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-achievements {
|
||||
min-height: 100vh;
|
||||
padding: 0 20px 40px;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.status-bar-placeholder { height: 44px; }
|
||||
|
||||
// 顶部导航
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.unlock-count {
|
||||
font-size: 13px;
|
||||
padding: 3px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(77, 182, 172, 0.12);
|
||||
color: var(--dim3-color);
|
||||
}
|
||||
|
||||
// 总览卡片
|
||||
.overview-card {
|
||||
padding: 16px 18px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.overview-bar {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.overview-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--dim1-color), var(--dim3-color));
|
||||
border-radius: 2px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
// 成就分类
|
||||
.categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 0 10px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
// 成就列表
|
||||
.achievement-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.achievement-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.achievement-item.locked {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.ach-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
background: rgba(179, 136, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.achievement-item.locked .ach-icon {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.ach-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ach-name {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ach-desc {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ach-date {
|
||||
font-size: 10px;
|
||||
color: rgba(179, 136, 255, 0.6);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.achievement-item.locked .ach-date {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 56px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="page-favorites">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="header">
|
||||
<text class="title">我的收藏</text>
|
||||
<text class="count-badge">{{ favorites.length }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 收藏列表 -->
|
||||
<view class="favorites-list" v-if="favorites.length > 0">
|
||||
<view
|
||||
v-for="(item, idx) in favorites"
|
||||
:key="item.id || idx"
|
||||
class="fav-item"
|
||||
@tap="goDetail(item.id)"
|
||||
>
|
||||
<!-- 维度标签 -->
|
||||
<view
|
||||
class="dim-tag"
|
||||
:style="{ color: dimColor(item.dimensionId) }"
|
||||
>
|
||||
{{ dimName(item.dimensionId) }}
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<text class="fav-title">{{ item.title }}</text>
|
||||
<!-- 删除按钮 -->
|
||||
<view class="delete-btn" @tap.stop="removeFav(item.id, idx)">
|
||||
<text>✕</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-else>
|
||||
<text class="empty-icon">⭐</text>
|
||||
<text class="empty-text">还没有收藏内容</text>
|
||||
<text class="empty-sub">去探索吧，发现有趣的 AI 知识</text>
|
||||
<view class="empty-btn" @tap="goHome">
|
||||
<text>开始探索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { knowledgeApi } from '@/utils/api'
|
||||
import { getDimension } from '@/utils/dimensions'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const favorites = ref([])
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
if (!userStore.isLoggedIn) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
loadFavorites()
|
||||
})
|
||||
|
||||
async function loadFavorites() {
|
||||
loading.value = true
|
||||
try {
|
||||
const list = await knowledgeApi.collected(userStore.token)
|
||||
favorites.value = list || []
|
||||
} catch (e) {
|
||||
console.error('[favorites] load failed:', e)
|
||||
favorites.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function dimName(id) {
|
||||
const dim = getDimension(id)
|
||||
return dim ? dim.name : `维度 ${id}`
|
||||
}
|
||||
|
||||
function dimColor(id) {
|
||||
const dim = getDimension(id)
|
||||
return dim ? dim.color : 'rgba(255,255,255,0.4)'
|
||||
}
|
||||
|
||||
function goDetail(id) {
|
||||
if (!id) return
|
||||
uni.navigateTo({ url: `/pages/detail/detail?id=${id}` })
|
||||
}
|
||||
|
||||
async function removeFav(id, idx) {
|
||||
uni.showModal({
|
||||
title: '取消收藏',
|
||||
content: '确定要取消收藏这篇文章吗？',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
try {
|
||||
await knowledgeApi.uncollect(id, userStore.token)
|
||||
favorites.value.splice(idx, 1)
|
||||
uni.showToast({ title: '已取消收藏', icon: 'success' })
|
||||
} catch (e) {
|
||||
console.error('[favorites] uncollect failed:', e)
|
||||
uni.showToast({ title: '操作失败，请重试', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-favorites {
|
||||
min-height: 100vh;
|
||||
padding: 0 20px 40px;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.status-bar-placeholder { height: 44px; }
|
||||
|
||||
// 顶部导航
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
font-size: 13px;
|
||||
padding: 3px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(179, 136, 255, 0.12);
|
||||
color: var(--dim1-color);
|
||||
}
|
||||
|
||||
// 收藏列表
|
||||
.favorites-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fav-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.fav-item:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dim-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.fav-title {
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: rgba(239, 83, 80, 0.12);
|
||||
border: 1px solid rgba(239, 83, 80, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ef5350;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.delete-btn:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 56px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
display: block;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
padding: 12px 32px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, var(--dim1-color), var(--dim3-color));
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 0 24px rgba(179, 136, 255, 0.2);
|
||||
}
|
||||
|
||||
.empty-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<view class="feedback-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">‹</view>
|
||||
<text class="nav-title">意见反馈</text>
|
||||
<view class="nav-spacer"></view>
|
||||
</view>
|
||||
|
||||
<!-- 反馈类型选择 -->
|
||||
<view class="form-section">
|
||||
<text class="form-title">反馈类型</text>
|
||||
<view class="type-grid">
|
||||
<view
|
||||
class="type-btn"
|
||||
:class="{ active: form.type === t.value }"
|
||||
v-for="t in feedbackTypes"
|
||||
:key="t.value"
|
||||
@click="form.type = t.value"
|
||||
>
|
||||
<text class="type-icon">{{ t.icon }}</text>
|
||||
<text class="type-name">{{ t.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标题输入 -->
|
||||
<view class="form-section">
|
||||
<text class="form-title">标题</text>
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
v-model="form.title"
|
||||
:placeholder="'简短描述您的问题或建议'"
|
||||
placeholder-style="color: var(--text-disabled); font-size: 14px;"
|
||||
maxlength="50"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 内容输入 -->
|
||||
<view class="form-section">
|
||||
<text class="form-title">内容</text>
|
||||
<textarea
|
||||
class="form-textarea"
|
||||
v-model="form.content"
|
||||
:placeholder="'请详细描述您遇到的问题或建议（至少 10 个字）'"
|
||||
placeholder-style="color: var(--text-disabled); font-size: 14px;"
|
||||
maxlength="1000"
|
||||
:auto-height="true"
|
||||
></textarea>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-section">
|
||||
<button
|
||||
class="submit-btn"
|
||||
:disabled="submitting || !formValid"
|
||||
@click="submitFeedback"
|
||||
>
|
||||
<text>{{ submitting ? '提交中...' : '提交反馈' }}</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 我的反馈 -->
|
||||
<view class="form-section">
|
||||
<view class="my-header">
|
||||
<text class="form-title">我的反馈</text>
|
||||
<text class="my-count" v-if="myFeedbacks.length > 0">
|
||||
共 {{ myFeedbacks.length }} 条
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 反馈列表 -->
|
||||
<scroll-view class="my-list" scroll-y>
|
||||
<view
|
||||
class="my-item"
|
||||
v-for="fb in myFeedbacks"
|
||||
:key="fb._id || fb.id"
|
||||
>
|
||||
<view class="my-item-top">
|
||||
<text class="my-title">{{ fb.title || '无标题' }}</text>
|
||||
<text class="my-status" :class="fb.status">{{ statusLabel(fb.status) }}</text>
|
||||
</view>
|
||||
<view class="my-item-bottom">
|
||||
<text class="my-type">{{ typeLabel(fb.type) }}</text>
|
||||
<text class="my-time">{{ formatTime(fb.createdAt || fb.time) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无反馈提示 -->
|
||||
<view class="my-empty" v-if="myFeedbacks.length === 0">
|
||||
<text class="my-empty-text">暂无反馈记录</text>
|
||||
</view>
|
||||
|
||||
<view class="my-spacer"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { feedbackApi } from '@/utils/api'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 反馈类型
|
||||
const feedbackTypes = [
|
||||
{ value: 'bug', name: '问题报告', icon: '🐛' },
|
||||
{ value: 'feature', name: '功能建议', icon: '💡' },
|
||||
{ value: 'content', name: '内容纠错', icon: '📝' },
|
||||
{ value: 'other', name: '其他', icon: '💬' }
|
||||
]
|
||||
|
||||
// 表单数据
|
||||
const form = ref({
|
||||
type: 'bug',
|
||||
title: '',
|
||||
content: ''
|
||||
})
|
||||
|
||||
const submitting = ref(false)
|
||||
const myFeedbacks = ref([])
|
||||
|
||||
// 表单验证
|
||||
const formValid = computed(() => {
|
||||
return form.value.title.trim().length > 0 && form.value.content.trim().length >= 10
|
||||
})
|
||||
|
||||
// 状态标签
|
||||
function statusLabel(status) {
|
||||
const map = {
|
||||
pending: '待处理',
|
||||
processing: '处理中',
|
||||
resolved: '已解决',
|
||||
closed: '已关闭'
|
||||
}
|
||||
return map[status] || '待处理'
|
||||
}
|
||||
|
||||
// 类型标签
|
||||
function typeLabel(type) {
|
||||
const map = {
|
||||
bug: '🐛 问题报告',
|
||||
feature: '💡 功能建议',
|
||||
content: '📝 内容纠错',
|
||||
other: '💬 其他'
|
||||
}
|
||||
return map[type] || '💬 其他'
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - date.getTime()
|
||||
const hours = Math.floor(diff / 3600000)
|
||||
if (hours < 1) return '刚刚'
|
||||
if (hours < 24) return `${hours} 小时前`
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days < 30) return `${days} 天前`
|
||||
const months = Math.floor(days / 30)
|
||||
if (months < 12) return `${months} 个月前`
|
||||
return date.toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
// 提交反馈
|
||||
async function submitFeedback() {
|
||||
if (!formValid.value) {
|
||||
uni.showToast({ title: '请填写标题和至少 10 字内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
// 不传 token 可匿名提交；有 token 时带 token 提交
|
||||
await feedbackApi.create(
|
||||
{
|
||||
type: form.value.type,
|
||||
title: form.value.title.trim(),
|
||||
content: form.value.content.trim()
|
||||
},
|
||||
userStore.isLoggedIn ? userStore.token : null
|
||||
)
|
||||
|
||||
uni.showToast({ title: '反馈提交成功', icon: 'success' })
|
||||
|
||||
// 清空表单
|
||||
form.value.title = ''
|
||||
form.value.content = ''
|
||||
form.value.type = 'bug'
|
||||
|
||||
// 刷新反馈列表
|
||||
fetchMyFeedbacks()
|
||||
} catch (err) {
|
||||
console.error('[feedback] 提交失败:', err)
|
||||
uni.showToast({ title: err.message || '提交失败，请重试', icon: 'none' })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取我的反馈
|
||||
async function fetchMyFeedbacks() {
|
||||
if (!userStore.isLoggedIn) {
|
||||
myFeedbacks.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const data = await feedbackApi.my(userStore.token)
|
||||
myFeedbacks.value = Array.isArray(data) ? data : (data.list || data.items || [])
|
||||
} catch (err) {
|
||||
console.error('[feedback] 获取我的反馈失败:', err)
|
||||
myFeedbacks.value = []
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMyFeedbacks()
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feedback-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
// 顶部导航
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 50px 20px 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.nav-back {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-spacer { width: 30px; }
|
||||
}
|
||||
|
||||
// 表单区域
|
||||
.form-section {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 类型选择网格
|
||||
.type-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
|
||||
.type-btn {
|
||||
padding: 10px 6px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.type-icon { font-size: 18px; }
|
||||
.type-name {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(179, 136, 255, 0.12);
|
||||
border-color: var(--dim1-color);
|
||||
box-shadow: 0 0 12px rgba(179, 136, 255, 0.15);
|
||||
|
||||
.type-name { color: var(--text-primary); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 10px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 文本域
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
// 提交区域
|
||||
.submit-section {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, var(--dim1-color), var(--dim3-color));
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 16px rgba(179, 136, 255, 0.3);
|
||||
transition: all 0.3s;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 我的反馈头部
|
||||
.my-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
|
||||
.my-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
// 反馈列表
|
||||
.my-list {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.my-item {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.my-item-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.my-title {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.my-status {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.my-status.pending {
|
||||
background: rgba(255, 213, 79, 0.12);
|
||||
color: var(--dim4-color);
|
||||
}
|
||||
.my-status.processing {
|
||||
background: rgba(77, 208, 225, 0.12);
|
||||
color: var(--dim2-color);
|
||||
}
|
||||
.my-status.resolved {
|
||||
background: rgba(77, 182, 172, 0.12);
|
||||
color: var(--dim3-color);
|
||||
}
|
||||
.my-status.closed {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.my-item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 6px;
|
||||
|
||||
.my-type { font-size: 11px; color: var(--text-secondary); }
|
||||
.my-time { font-size: 11px; color: var(--text-disabled); }
|
||||
}
|
||||
|
||||
// 无反馈
|
||||
.my-empty {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
|
||||
.my-empty-text {
|
||||
font-size: 13px;
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.my-spacer {
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -140,7 +140,7 @@ function goProfile() {
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
uni.showToast({ title: '搜索功能开发中', icon: 'none' })
|
||||
uni.navigateTo({ url: '/pages/search/search' })
|
||||
}
|
||||
|
||||
function onNotify() {
|
||||
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<view class="page-leaderboard">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="header">
|
||||
<text class="title">🏅 排行榜</text>
|
||||
</view>
|
||||
|
||||
<!-- 维度切换 -->
|
||||
<view class="dim-tabs">
|
||||
<view
|
||||
v-for="tab in dimTabs"
|
||||
:key="tab.value"
|
||||
class="dim-tab"
|
||||
:class="{ active: activeDim === tab.value }"
|
||||
@tap="activeDim = tab.value; loadBoard()"
|
||||
>
|
||||
<text>{{ tab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 排名列表 -->
|
||||
<view class="board-list" v-if="board.length > 0">
|
||||
<view
|
||||
v-for="(item, idx) in board"
|
||||
:key="item.userId || item.username || idx"
|
||||
class="board-item"
|
||||
:class="{ current: item.isCurrentUser }"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<view class="rank">
|
||||
<text v-if="idx < 3" class="rank-top">{{ idx + 1 }}</text>
|
||||
<text v-else class="rank-num">{{ idx + 1 }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 头像 -->
|
||||
<view class="avatar">
|
||||
<image
|
||||
v-if="item.avatarUrl"
|
||||
:src="item.avatarUrl"
|
||||
class="avatar-img"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text v-else class="avatar-text">
|
||||
{{ (item.nickName || item.username || '用').charAt(0) }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 信息 -->
|
||||
<view class="user-info">
|
||||
<text class="user-name">{{ item.nickName || item.username || '用户' }}</text>
|
||||
<text class="user-score">{{ item.score || 0 }} 分</text>
|
||||
</view>
|
||||
|
||||
<!-- 已解锁维度 -->
|
||||
<view class="unlocked-dims" v-if="item.unlockedDims">
|
||||
<text
|
||||
v-for="(dimId, dIdx) in item.unlockedDims"
|
||||
:key="dIdx"
|
||||
class="dim-dot"
|
||||
:style="{ background: dimDotColor(dimId) }"
|
||||
></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-else-if="!loading">
|
||||
<text class="empty-icon">🏅</text>
|
||||
<text class="empty-text">暂无排行数据</text>
|
||||
<text class="empty-sub">继续学习，看看你能排第几</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="empty-state" v-else>
|
||||
<text class="empty-icon" style="opacity:0.4">⏳</text>
|
||||
<text class="empty-text">加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { userApi } from '@/utils/api'
|
||||
import { getDimension } from '@/utils/dimensions'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const board = ref([])
|
||||
const loading = ref(true)
|
||||
const activeDim = ref('all')
|
||||
|
||||
const dimTabs = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 1, label: 'AI 起源' },
|
||||
{ value: 2, label: 'AI 发展' },
|
||||
{ value: 3, label: 'AI 当前' },
|
||||
{ value: 4, label: 'AI 学习' },
|
||||
{ value: 5, label: 'AI 趋势' }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
if (!userStore.isLoggedIn) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
loadBoard()
|
||||
})
|
||||
|
||||
async function loadBoard() {
|
||||
loading.value = true
|
||||
try {
|
||||
const dimParam = activeDim.value === 'all' ? null : activeDim.value
|
||||
const data = await userApi.leaderboard(dimParam)
|
||||
const list = Array.isArray(data) ? data : data.list || []
|
||||
// 标记当前用户
|
||||
const myId = userStore.userInfo?.id || userStore.userInfo?.userId || ''
|
||||
board.value = list.map((item) => ({
|
||||
...item,
|
||||
isCurrentUser: String(item.userId || item.id || '') === String(myId)
|
||||
}))
|
||||
} catch (e) {
|
||||
console.error('[leaderboard] load failed:', e)
|
||||
board.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function dimDotColor(id) {
|
||||
const dim = getDimension(id)
|
||||
return dim ? dim.color : 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-leaderboard {
|
||||
min-height: 100vh;
|
||||
padding: 0 20px 40px;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.status-bar-placeholder { height: 44px; }
|
||||
|
||||
// 顶部导航
|
||||
.header {
|
||||
padding: 12px 0 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 维度切换
|
||||
.dim-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding: 0 0 14px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.dim-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 7px 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dim-tab.active {
|
||||
background: linear-gradient(135deg, rgba(179, 136, 255, 0.15), rgba(77, 182, 172, 0.15));
|
||||
border-color: rgba(179, 136, 255, 0.3);
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 排名列表
|
||||
.board-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.board-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.board-item.current {
|
||||
background: rgba(179, 136, 255, 0.08);
|
||||
border-color: rgba(179, 136, 255, 0.25);
|
||||
box-shadow: 0 0 24px rgba(179, 136, 255, 0.08);
|
||||
}
|
||||
|
||||
// 排名
|
||||
.rank {
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rank-top {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--dim1-color), var(--dim4-color));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.rank-num {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 头像
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(124, 77, 255, 0.3), rgba(0, 188, 212, 0.15));
|
||||
border: 1px solid rgba(124, 77, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-score {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
// 已解锁维度
|
||||
.unlocked-dims {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dim-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 56px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<view class="page-news-detail">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
<!-- 导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">‹</view>
|
||||
<text class="nav-title">AI 资讯</text>
|
||||
<view class="nav-action">
|
||||
<text class="nav-share" @click="onShare">↗</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="content">
|
||||
<!-- 资讯头图 -->
|
||||
<view class="news-hero" :style="{background: heroBg}">
|
||||
<text class="hero-emoji">{{ heroEmoji }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 分类标签 -->
|
||||
<view class="category-tag">
|
||||
<text class="tag-text">{{ categoryLabel }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<text class="news-title">{{ news.title }}</text>
|
||||
|
||||
<!-- 元信息 -->
|
||||
<view class="meta-info">
|
||||
<view class="meta-item">
|
||||
<text class="meta-label">来源</text>
|
||||
<text class="meta-value">{{ news.source }}</text>
|
||||
</view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-label">时间</text>
|
||||
<text class="meta-value">{{ formatDate(news.newsDate) }}</text>
|
||||
</view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-label">阅读</text>
|
||||
<text class="meta-value">{{ news.viewCount || 0 }} 次</text>
|
||||
</view>
|
||||
<view class="meta-item" v-if="news.hot">
|
||||
<text class="meta-label hot">🔥</text>
|
||||
<text class="meta-value">{{ news.hotCount || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 摘要 -->
|
||||
<view class="summary-card">
|
||||
<text class="summary-label">摘要</text>
|
||||
<text class="summary-text">{{ news.summary }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 正文 -->
|
||||
<view class="news-body" v-if="newsBody">
|
||||
<rich-text :nodes="newsBody"></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- 相关话题 -->
|
||||
<view class="related-tags" v-if="relatedTags.length">
|
||||
<text class="related-label">相关话题</text>
|
||||
<view class="tags-row">
|
||||
<view class="tag-item" v-for="(tag, i) in relatedTags" :key="i">
|
||||
<text class="tag-text">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<view class="action-bar">
|
||||
<view class="action-btn" @click="onFavorite">
|
||||
<text class="action-icon">{{ isCollected ? '❤️' : '🤍' }}</text>
|
||||
<text class="action-text">{{ isCollected ? '已收藏' : '收藏' }}</text>
|
||||
</view>
|
||||
<view class="action-btn" @click="onShare">
|
||||
<text class="action-icon">↗</text>
|
||||
<text class="action-text">分享</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-spacer"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { trendApi, knowledgeApi } from '@/utils/api'
|
||||
|
||||
const news = ref({})
|
||||
const isCollected = ref(false)
|
||||
const loading = ref(true)
|
||||
|
||||
const heroBg = computed(() => {
|
||||
const c = news.value.category || 'product'
|
||||
return {
|
||||
product: 'linear-gradient(135deg, rgba(179,136,255,0.3), rgba(239,83,80,0.15))',
|
||||
paper: 'linear-gradient(135deg, rgba(77,208,225,0.3), rgba(77,182,172,0.15))',
|
||||
tool: 'linear-gradient(135deg, rgba(255,213,79,0.3), rgba(239,83,80,0.1))',
|
||||
company: 'linear-gradient(135deg, rgba(77,182,172,0.3), rgba(179,136,255,0.15))'
|
||||
}[c] || 'linear-gradient(135deg, rgba(179,136,255,0.3), rgba(77,208,225,0.15))'
|
||||
})
|
||||
|
||||
const heroEmoji = computed(() => {
|
||||
return { product: '🚀', paper: '📄', tool: '🔧', company: '🏢' }[news.value.category || 'product'] || '📰'
|
||||
})
|
||||
|
||||
const categoryLabel = computed(() => {
|
||||
const c = news.value.category || 'product'
|
||||
return { product: '产品动态', paper: '研究论文', tool: '工具发布', company: '公司动态' }[c] || '资讯'
|
||||
})
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '—'
|
||||
try {
|
||||
const d = new Date(dateStr)
|
||||
if (isNaN(d)) return dateStr
|
||||
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
|
||||
} catch (e) {
|
||||
return dateStr
|
||||
}
|
||||
}
|
||||
|
||||
const newsBody = computed(() => {
|
||||
const content = news.value.body || ''
|
||||
if (!content) {
|
||||
return `<p>${news.value.summary || ''}</p><p style="margin-top:16px;color:rgba(255,255,255,0.35)">完整内容暂未提供，请关注更多更新...</p>`
|
||||
}
|
||||
return content
|
||||
})
|
||||
|
||||
const relatedTags = computed(() => {
|
||||
return news.value.tags || []
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
const id = uni.getStorageSync('__news_id__')
|
||||
loading.value = false
|
||||
// Try API detail first, fallback to local data from trend page
|
||||
if (id) {
|
||||
try {
|
||||
const data = await trendApi.detail(id)
|
||||
news.value = data
|
||||
isCollected.value = data.collected || false
|
||||
return
|
||||
} catch (e) {
|
||||
// fall through to local
|
||||
}
|
||||
}
|
||||
// Fallback: read from trend page's stored item
|
||||
try {
|
||||
const raw = uni.getStorageSync('__news_item__')
|
||||
if (raw) {
|
||||
news.value = JSON.parse(raw)
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
function onFavorite() {
|
||||
isCollected.value = !isCollected.value
|
||||
uni.showToast({ title: isCollected.value ? '已收藏' : '已取消收藏', icon: 'none' })
|
||||
}
|
||||
|
||||
function onShare() {
|
||||
uni.setClipboardData({
|
||||
data: news.value.link || `https://ai-dimension.yuzhiran.com.cn/news/${uni.getStorageSync('__news_id__')}`,
|
||||
success: () => uni.showToast({ title: '链接已复制', icon: 'none' })
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-news-detail {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.status-bar-placeholder { height: 44px; }
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
padding: 0 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-share { font-size: 22px; color: rgba(255,255,255,0.5); }
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
// Hero
|
||||
.news-hero {
|
||||
height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0 0 24px 24px;
|
||||
}
|
||||
|
||||
.hero-emoji { font-size: 72px; }
|
||||
|
||||
// Category
|
||||
.category-tag {
|
||||
margin: 24px 20px 0;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--dim1-color);
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Title
|
||||
.news-title {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #fff;
|
||||
margin: 12px 20px 16px;
|
||||
}
|
||||
|
||||
// Meta
|
||||
.meta-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin: 0 20px 20px;
|
||||
padding: 16px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.35);
|
||||
}
|
||||
|
||||
.meta-label.hot { font-size: 13px; }
|
||||
|
||||
.meta-value { font-size: 12px; color: rgba(255,255,255,0.7); }
|
||||
|
||||
// Summary
|
||||
.summary-card {
|
||||
margin: 0 20px 20px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, rgba(179,136,255,0.08), rgba(77,208,225,0.05));
|
||||
border: 1px solid rgba(179,136,255,0.12);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--dim1-color);
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255,255,255,0.85);
|
||||
}
|
||||
|
||||
// Body
|
||||
.news-body {
|
||||
margin: 0 20px 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
// Related tags
|
||||
.related-tags {
|
||||
margin: 0 20px 20px;
|
||||
}
|
||||
|
||||
.related-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.4);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tags-row { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
|
||||
.tag-item {
|
||||
padding: 6px 12px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.tag-text { font-size: 12px; color: rgba(255,255,255,0.6); }
|
||||
|
||||
// Action bar
|
||||
.action-bar {
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.action-icon { font-size: 18px; }
|
||||
.action-text { font-size: 13px; color: rgba(255,255,255,0.7); }
|
||||
|
||||
.footer-spacer { height: 60px; }
|
||||
</style>
|
||||
@@ -72,6 +72,16 @@
|
||||
<text class="m-label">成就</text>
|
||||
<text class="m-arrow">→</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goLeaderboard">
|
||||
<view class="m-icon" style="background:rgba(255,167,38,0.1);color:#ffa726">🥇</view>
|
||||
<text class="m-label">排行榜</text>
|
||||
<text class="m-arrow">→</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goFeedback">
|
||||
<view class="m-icon" style="background:rgba(102,187,106,0.1);color:#66bb6a">💬</view>
|
||||
<text class="m-label">意见反馈</text>
|
||||
<text class="m-arrow">→</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goAbout">
|
||||
<view class="m-icon" style="background:rgba(255,213,79,0.1);color:#ffd54f">ℹ️</view>
|
||||
<text class="m-label">关于 AI 维度</text>
|
||||
@@ -234,15 +244,23 @@ function goShare() {
|
||||
}
|
||||
|
||||
function goFavorites() {
|
||||
uni.showToast({ title: '收藏页面开发中', icon: 'none' })
|
||||
uni.navigateTo({ url: '/pages/favorites/favorites' })
|
||||
}
|
||||
|
||||
function goProgress() {
|
||||
uni.showToast({ title: '学习进度开发中', icon: 'none' })
|
||||
uni.navigateTo({ url: '/pages/progress/progress' })
|
||||
}
|
||||
|
||||
function goAchievements() {
|
||||
uni.showToast({ title: '成就系统开发中', icon: 'none' })
|
||||
uni.navigateTo({ url: '/pages/achievements/achievements' })
|
||||
}
|
||||
|
||||
function goLeaderboard() {
|
||||
uni.navigateTo({ url: '/pages/leaderboard/leaderboard' })
|
||||
}
|
||||
|
||||
function goFeedback() {
|
||||
uni.navigateTo({ url: '/pages/feedback/feedback' })
|
||||
}
|
||||
|
||||
function goAbout() {
|
||||
@@ -254,7 +272,7 @@ function goAbout() {
|
||||
}
|
||||
|
||||
function goSettings() {
|
||||
uni.showToast({ title: '设置功能开发中', icon: 'none' })
|
||||
uni.navigateTo({ url: '/pages/settings/settings' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<view class="progress-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">‹</view>
|
||||
<text class="nav-title">学习进度</text>
|
||||
<view class="nav-spacer"></view>
|
||||
</view>
|
||||
|
||||
<!-- 用户等级卡片 -->
|
||||
<view class="stats-header">
|
||||
<view class="level-badge">
|
||||
<text class="level-num">{{ stats?.level || '--' }}</text>
|
||||
<text class="level-name">{{ stats?.levelName || '探索者' }}</text>
|
||||
</view>
|
||||
<view class="stats-row">
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ stats?.totalPoints || 0 }}</text>
|
||||
<text class="stat-label">总积分</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ studyHours }}</text>
|
||||
<text class="stat-label">学习时长</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 维度进度列表 -->
|
||||
<view class="section-title">
|
||||
<text>维度进度</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="progress-list" scroll-y>
|
||||
<view
|
||||
class="dim-card"
|
||||
v-for="dimData in dimProgress"
|
||||
:key="dimData.id"
|
||||
:class="{ expanded: dimData.expanded }"
|
||||
@click="toggleExpand(dimData.id)"
|
||||
>
|
||||
<!-- 卡片头部（可点击展开） -->
|
||||
<view class="dim-card-head">
|
||||
<view class="dim-info">
|
||||
<view
|
||||
class="dim-icon-circle"
|
||||
:style="{ background: dimData.bg, color: dimData.color }"
|
||||
>
|
||||
<text>{{ dimData.icon }}</text>
|
||||
</view>
|
||||
<view class="dim-text">
|
||||
<text class="dim-name">{{ dimData.name }}</text>
|
||||
<text class="dim-desc">{{ dimData.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 环形进度 -->
|
||||
<view class="dim-ring" v-if="dimData.total > 0">
|
||||
<view
|
||||
class="ring"
|
||||
:style="{
|
||||
background: `conic-gradient(${dimData.color} 0% ${dimData.percent}%, rgba(255,255,255,0.08) ${dimData.percent}% 100%)`
|
||||
}"
|
||||
>
|
||||
<view class="ring-inner">
|
||||
<text class="ring-text">{{ dimData.percent }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dim-ring" v-else>
|
||||
<view class="ring ring-empty">
|
||||
<view class="ring-inner">
|
||||
<text class="ring-text">--</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 展开内容 -->
|
||||
<view class="dim-card-body" v-if="dimData.expanded">
|
||||
<view class="progress-detail">
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">已完成</text>
|
||||
<text class="detail-value" :style="{ color: dimData.color }">
|
||||
{{ dimData.done }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">总知识</text>
|
||||
<text class="detail-value">{{ dimData.total }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">进度</text>
|
||||
<text class="detail-value">
|
||||
{{ dimData.done }}/{{ dimData.total }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<view class="progress-bar-bg">
|
||||
<view
|
||||
class="progress-bar-fill"
|
||||
:style="{
|
||||
width: `${dimData.percent}%`,
|
||||
background: `linear-gradient(90deg, ${dimData.color}, ${dimData.color}dd)`
|
||||
}"
|
||||
></view>
|
||||
</view>
|
||||
<text class="progress-bar-text">
|
||||
{{ dimData.done }} / {{ dimData.total }} 已探索
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部间距 -->
|
||||
<view class="list-spacer"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { knowledgeApi, userApi } from '@/utils/api'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { DIMENSIONS } from '@/utils/dimensions'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const stats = ref(null)
|
||||
const dimProgress = ref([])
|
||||
const loading = ref(true)
|
||||
|
||||
// 学习时长（小时）
|
||||
const studyHours = computed(() => {
|
||||
const hours = stats.value?.studyHours || 0
|
||||
if (hours < 1) return `${Math.round(hours * 60)}分`
|
||||
return hours.toFixed(1) + 'h'
|
||||
})
|
||||
|
||||
// 展开/收起维度
|
||||
function toggleExpand(id) {
|
||||
const dim = dimProgress.value.find(d => d.id === id)
|
||||
if (dim) dim.expanded = !dim.expanded
|
||||
}
|
||||
|
||||
// 初始化维度数据
|
||||
function initDimData() {
|
||||
const exploreData = stats.value?.exploreData || {}
|
||||
return DIMENSIONS.map(dim => ({
|
||||
id: dim.id,
|
||||
name: dim.name,
|
||||
desc: dim.desc,
|
||||
icon: dim.icon,
|
||||
color: dim.color,
|
||||
bg: dim.bg,
|
||||
total: 0,
|
||||
done: exploreData[dim.id] || 0,
|
||||
percent: 0,
|
||||
expanded: false
|
||||
}))
|
||||
}
|
||||
|
||||
// 获取维度知识总数
|
||||
async function fetchDimTotals() {
|
||||
for (const dim of dimProgress.value) {
|
||||
try {
|
||||
const data = await knowledgeApi.list({ dim: dim.id, limit: 1 })
|
||||
dim.total = data?.total || data?.length || (Array.isArray(data) ? data.length : 0)
|
||||
// 如果 list 返回的是数组而不是带 total 的对象，直接用数组长度
|
||||
if (Array.isArray(data) && dim.total === 0) {
|
||||
dim.total = data.length
|
||||
}
|
||||
// 计算百分比
|
||||
if (dim.total > 0) {
|
||||
dim.percent = Math.round((dim.done / dim.total) * 100)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`[progress] 获取维度 ${dim.id} 数据失败:`, err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
async function loadData() {
|
||||
if (!userStore.isLoggedIn) {
|
||||
// 未登录也展示基础信息，但用户相关数据为空
|
||||
stats.value = { exploreData: {} }
|
||||
dimProgress.value = initDimData()
|
||||
await fetchDimTotals()
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取用户统计和进度
|
||||
const [statsData, progressData] = await Promise.all([
|
||||
userApi.stats(userStore.token).catch(() => ({ exploreData: {} })),
|
||||
userApi.progress(userStore.token).catch(() => ({ exploreData: {} }))
|
||||
])
|
||||
|
||||
// 合并 exploreData
|
||||
stats.value = {
|
||||
...statsData,
|
||||
exploreData: { ...statsData?.exploreData, ...progressData?.exploreData }
|
||||
}
|
||||
|
||||
dimProgress.value = initDimData()
|
||||
await fetchDimTotals()
|
||||
} catch (err) {
|
||||
console.error('[progress] 加载失败:', err)
|
||||
uni.showToast({ title: '加载失败，请重试', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
// 顶部导航
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 50px 20px 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.nav-back {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-spacer { width: 30px; }
|
||||
}
|
||||
|
||||
// 用户等级卡片
|
||||
.stats-header {
|
||||
margin: 0 20px 16px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(179, 136, 255, 0.1), rgba(77, 182, 172, 0.08));
|
||||
border: 1px solid rgba(179, 136, 255, 0.15);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.level-badge {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.level-num {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--dim1-color), var(--dim2-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.level-name {
|
||||
font-size: 15px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
// 章节标题
|
||||
.section-title {
|
||||
padding: 10px 20px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 进度列表
|
||||
.progress-list {
|
||||
flex: 1;
|
||||
padding: 8px 20px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.list-spacer {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
// 维度卡片
|
||||
.dim-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.dim-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.dim-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dim-icon-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.dim-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dim-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dim-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
// 环形进度
|
||||
.dim-ring {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.ring {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.ring-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.ring-text {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ring-empty {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
// 展开内容
|
||||
.dim-card-body {
|
||||
padding: 0 16px 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.progress-detail {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-top: 14px;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.detail-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.detail-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条
|
||||
.progress-bar-bg {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.5s ease;
|
||||
box-shadow: 0 0 8px rgba(179, 136, 255, 0.4);
|
||||
}
|
||||
|
||||
.progress-bar-text {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<view class="search-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">‹</view>
|
||||
<text class="nav-title">搜索</text>
|
||||
<view class="nav-spacer"></view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
type="text"
|
||||
:value="searchText"
|
||||
:placeholder="placeholderText"
|
||||
placeholder-style="color: var(--text-secondary); font-size: 14px;"
|
||||
@input="onInput"
|
||||
@confirm="doSearch"
|
||||
confirm-type="search"
|
||||
/>
|
||||
<view class="search-icon">🔍</view>
|
||||
<view v-if="searchText" class="clear-btn" @click="clearSearch">✕</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" v-if="loading">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">搜索中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空搜索提示 -->
|
||||
<view class="empty-state" v-else-if="!hasSearched">
|
||||
<text class="empty-icon">🔍</text>
|
||||
<text class="empty-text">输入关键词搜索 AI 知识</text>
|
||||
<text class="empty-hint">支持按标题、摘要、标签搜索</text>
|
||||
</view>
|
||||
|
||||
<!-- 无结果提示 -->
|
||||
<view class="empty-state" v-else-if="results.length === 0 && !loading">
|
||||
<text class="empty-icon">📭</text>
|
||||
<text class="empty-text">未找到相关内容</text>
|
||||
<text class="empty-hint">试试其他关键词</text>
|
||||
</view>
|
||||
|
||||
<!-- 搜索结果列表 -->
|
||||
<scroll-view class="results-scroll" scroll-y v-else>
|
||||
<view
|
||||
class="result-card"
|
||||
v-for="item in results"
|
||||
:key="item._id || item.id"
|
||||
@click="goDetail(item._id || item.id)"
|
||||
>
|
||||
<!-- 维度标签 -->
|
||||
<view
|
||||
class="dim-badge"
|
||||
:style="{ background: dimColor(item.dim) }"
|
||||
>
|
||||
<text class="dim-name">D{{ item.dim }}</text>
|
||||
</view>
|
||||
|
||||
<text class="result-title">{{ item.title }}</text>
|
||||
|
||||
<!-- 摘要 -->
|
||||
<text class="result-summary" v-if="item.summary">
|
||||
{{ item.summary }}
|
||||
</text>
|
||||
|
||||
<!-- 标签与分类 -->
|
||||
<view class="result-meta">
|
||||
<view class="meta-tags" v-if="item.tags?.length">
|
||||
<text class="meta-tag" v-for="tag in item.tags" :key="tag">
|
||||
#{{ tag }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="result-category" v-if="item.category">
|
||||
{{ categoryLabel(item.category) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { knowledgeApi } from '@/utils/api'
|
||||
import { DIMENSIONS } from '@/utils/dimensions'
|
||||
|
||||
const searchText = ref('')
|
||||
const results = ref([])
|
||||
const loading = ref(false)
|
||||
const hasSearched = ref(false)
|
||||
let debounceTimer = null
|
||||
let page = 1
|
||||
|
||||
// 维度颜色
|
||||
function dimColor(dim) {
|
||||
if (!dim) return 'var(--dim1-color)'
|
||||
const dimInfo = DIMENSIONS.find(d => d.id === dim)
|
||||
return dimInfo ? dimInfo.color : 'var(--dim1-color)'
|
||||
}
|
||||
|
||||
// 分类标签
|
||||
function categoryLabel(cat) {
|
||||
const map = {
|
||||
concept: '📚 概念',
|
||||
history: '📜 历史',
|
||||
application: '🛠️ 应用',
|
||||
question: '❓ 问答'
|
||||
}
|
||||
return map[cat] || cat
|
||||
}
|
||||
|
||||
// 占位符提示
|
||||
const placeholderText = computed(() =>
|
||||
searchText.value ? '' : '输入关键词搜索 AI 知识'
|
||||
)
|
||||
|
||||
// 输入处理（debounced）
|
||||
function onInput(e) {
|
||||
const val = e.detail?.value || e.target?.value || ''
|
||||
searchText.value = val
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
if (val.trim()) {
|
||||
doSearch()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 执行搜索
|
||||
async function doSearch() {
|
||||
const q = searchText.value.trim()
|
||||
if (!q) return
|
||||
|
||||
loading.value = true
|
||||
hasSearched.value = true
|
||||
try {
|
||||
const data = await knowledgeApi.search(q, { page, limit: 20 })
|
||||
results.value = data.list || data.items || data || []
|
||||
} catch (err) {
|
||||
console.error('[search] 搜索失败:', err)
|
||||
uni.showToast({ title: '搜索失败，请重试', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 清空搜索
|
||||
function clearSearch() {
|
||||
searchText.value = ''
|
||||
results.value = []
|
||||
hasSearched.value = false
|
||||
page = 1
|
||||
if (debounceTimer) {
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转到详情
|
||||
function goDetail(id) {
|
||||
if (!id) return
|
||||
uni.navigateTo({ url: `/pages/detail/detail?id=${id}` })
|
||||
}
|
||||
|
||||
// 返回
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 检查是否有路由传入的搜索词
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
const query = currentPage.$page?.query || {}
|
||||
if (query.q) {
|
||||
searchText.value = query.q
|
||||
doSearch()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
// 顶部导航
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 50px 20px 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.nav-back {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-spacer { width: 30px; }
|
||||
}
|
||||
|
||||
// 搜索框
|
||||
.search-box {
|
||||
position: relative;
|
||||
margin: 0 20px 16px;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 14px;
|
||||
padding: 10px 44px 10px 14px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
.loading-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid rgba(179, 136, 255, 0.2);
|
||||
border-top-color: var(--dim1-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
.empty-icon { font-size: 48px; opacity: 0.5; }
|
||||
.empty-text { font-size: 16px; color: var(--text-secondary); }
|
||||
.empty-hint { font-size: 13px; color: rgba(255, 255, 255, 0.2); }
|
||||
}
|
||||
|
||||
// 结果列表
|
||||
.results-scroll {
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 10px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.dim-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.result-summary {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.result-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.meta-tag {
|
||||
font-size: 11px;
|
||||
color: var(--dim1-color);
|
||||
background: rgba(179, 136, 255, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.result-category {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="page-settings">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
<text class="page-title">设置</text>
|
||||
|
||||
<!-- 偏好设置 -->
|
||||
<view class="section-title">偏好设置</view>
|
||||
<view class="card">
|
||||
<view class="setting-item" @click="togglePush">
|
||||
<view class="s-icon" style="background:rgba(255,213,79,0.1);color:#ffd54f">🔔</view>
|
||||
<text class="s-label">推送通知</text>
|
||||
<text class="s-desc">接收每日 AI 趋势推送</text>
|
||||
<view class="s-switch" :class="{ active: pushOn }">
|
||||
<view class="s-switch-knob" :class="{ on: pushOn }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="setting-item">
|
||||
<view class="s-icon" style="background:rgba(77,208,225,0.1);color:#4dd0e1">🌙</view>
|
||||
<text class="s-label">深色模式</text>
|
||||
<text class="s-desc">当前已启用暗色风格</text>
|
||||
<view class="s-switch active">
|
||||
<view class="s-switch-knob on"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 其他 -->
|
||||
<view class="section-title">其他</view>
|
||||
<view class="card">
|
||||
<view class="setting-item" @click="showAbout">
|
||||
<view class="s-icon" style="background:rgba(179,136,255,0.1);color:#b388ff">ℹ️</view>
|
||||
<text class="s-label">关于「宇之然AI维度」</text>
|
||||
<text class="s-arrow">→</text>
|
||||
</view>
|
||||
<view class="setting-item" @click="showContact">
|
||||
<view class="s-icon" style="background:rgba(102,187,106,0.1);color:#66bb6a">📧</view>
|
||||
<text class="s-label">联系方式</text>
|
||||
<text class="s-desc">客服邮箱：support@yuzhiran.com</text>
|
||||
<text class="s-arrow">→</text>
|
||||
</view>
|
||||
<view class="setting-item" @click="showAgreement">
|
||||
<view class="s-icon" style="background:rgba(239,83,80,0.1);color:#ef5350">📄</view>
|
||||
<text class="s-label">用户协议 / 隐私政策</text>
|
||||
<text class="s-arrow">→</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="version">宇之然 AI 维度 v1.0.0</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const pushOn = ref(true)
|
||||
|
||||
function togglePush() {
|
||||
pushOn.value = !pushOn.value
|
||||
uni.showToast({
|
||||
title: pushOn.value ? '推送已开启' : '推送已关闭',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
function showAbout() {
|
||||
uni.showModal({
|
||||
title: '关于「宇之然AI维度」',
|
||||
content: '宇之然 AI 维度 v1.0.0\n从 5 个维度系统理解人工智能\n© 2026 宇之然',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
|
||||
function showContact() {
|
||||
uni.showModal({
|
||||
title: '联系方式',
|
||||
content: '客服邮箱：support@yuzhiran.com\n工作时间：周一至周五 9:00-18:00',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
|
||||
function showAgreement() {
|
||||
uni.showModal({
|
||||
title: '用户协议 / 隐私政策',
|
||||
content: '暂无内容',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-settings {
|
||||
min-height: 100vh;
|
||||
padding: 0 20px 40px;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.status-bar-placeholder { height: 44px; }
|
||||
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin: 6px 0 22px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
margin: 18px 0 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 14px;
|
||||
padding: 4px 16px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
.setting-item:last-child { border-bottom: none; }
|
||||
|
||||
.s-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.s-label {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.85);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.s-desc {
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.35);
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
line-height: 1.3;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.s-arrow {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
// 开关
|
||||
.s-switch {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.s-switch.active {
|
||||
background: rgba(179,136,255,0.4);
|
||||
}
|
||||
.s-switch-knob {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
.s-switch-knob.on { left: 22px; }
|
||||
|
||||
.version {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.1);
|
||||
margin-top: 30px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -144,7 +144,8 @@ function goDetail(item) {
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showToast({ title: '详情页面开发中', icon: 'none' })
|
||||
uni.setStorageSync('__news_item__', JSON.stringify(item))
|
||||
uni.navigateTo({ url: '/pages/news/news' })
|
||||
}
|
||||
|
||||
function getSampleData() {
|
||||
|
||||
@@ -95,6 +95,16 @@ export const knowledgeApi = {
|
||||
/** 获取维度问答 */
|
||||
questions: (dim) =>
|
||||
request('GET', `/api/knowledge/${dim}/questions`),
|
||||
|
||||
/** 搜索知识 */
|
||||
search: (q, options = {}) => {
|
||||
const params = { q, ...options }
|
||||
const query = Object.entries(params)
|
||||
.filter(([_, v]) => v !== undefined && v !== null)
|
||||
.map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
|
||||
.join('&')
|
||||
return request('GET', `/api/knowledge/search${query ? '?' + query : ''}`)
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -129,6 +139,14 @@ export const userApi = {
|
||||
/** 排行榜 */
|
||||
leaderboard: (dim = null) =>
|
||||
request('GET', `/api/user/leaderboard${dim ? '?dim=' + dim : ''}`),
|
||||
|
||||
/** 获取成就 */
|
||||
achievements: (token) =>
|
||||
request('GET', '/api/user/achievements', null, token),
|
||||
|
||||
/** 用户统计 */
|
||||
stats: (token) =>
|
||||
request('GET', '/api/user/stats', null, token),
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -162,10 +180,24 @@ export const trendApi = {
|
||||
request('GET', `/api/trend/${id}`),
|
||||
}
|
||||
|
||||
/**
|
||||
* 意见反馈
|
||||
*/
|
||||
export const feedbackApi = {
|
||||
/** 提交反馈 */
|
||||
create: (data, token) =>
|
||||
request('POST', '/api/feedback', data, token),
|
||||
/** 我的反馈列表 */
|
||||
my: (token) =>
|
||||
request('GET', '/api/feedback/my', null, token),
|
||||
}
|
||||
|
||||
export default {
|
||||
auth: authApi,
|
||||
knowledge: knowledgeApi,
|
||||
aiChat: aiChatApi,
|
||||
user: userApi,
|
||||
payment: paymentApi
|
||||
payment: paymentApi,
|
||||
trend: trendApi,
|
||||
feedback: feedbackApi
|
||||
}
|
||||
Reference in New Issue
Block a user