refactor: 项目架构重构 - 目录标准化 + 清理冗余
- 目录重命名: backend/wdkj-server/ → server/, frontend/ai-dimension/ → client/ - 删除 20+ 冗余文件（WDKJ 旧脚本、Windows 脚本、过时文档、设计稿） - 更新 package.json 元数据（移除 wdkj 命名） - 完善三级 .gitignore（根 + server + client） - 重写 README.md 和 CHANGELOG.md - 工具脚本移至 scripts/
This commit is contained in:
Yuzhiran Dev
@@ -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">继续学习，解锁属于你的成就吧</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: var(--text-primary);
|
||||
}
|
||||
|
||||
.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: var(--text-tertiary);
|
||||
}
|
||||
|
||||
// 成就分类
|
||||
.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: var(--text-primary);
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
// 成就列表
|
||||
.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: var(--text-muted);
|
||||
}
|
||||
|
||||
.ach-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ach-name {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ach-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
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: var(--text-muted);
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.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: var(--text-tertiary);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user