159 lines
5.8 KiB
Markdown
159 lines
5.8 KiB
Markdown
## 如何设计离线阅读画像系统
|
||
|
||
### 1. 第一阶段：画像模型设计
|
||
|
||
画像不是简单的计数，而是将原始数据（书名、字数、关键词）转化为认知模型。我们定义以下五个核心指标：
|
||
|
||
认知深度 (Cognition)：通过统计关键词（Keywords）的重复频次和专业程度。
|
||
|
||
知识广度 (Breadth)：统计不同书籍领域的分布（基于书名聚类或人工分类）。
|
||
|
||
实践应用 (Practicality)：识别 occupation 字段，职业相关（Professional）的心得占比。
|
||
|
||
产出效率 (Output)：计算总生成字数与任务完成率。
|
||
|
||
国际视野 (Global)：统计英文（en）与中文（zh）任务的比例。
|
||
|
||
### 2. 第二阶段：数据库实体定义 (Prisma/TypeORM)
|
||
|
||
假设你使用常用的本地 ORM。我们需要在数据库中增加一个画像缓存表，避免每次打开页面都进行全量计算。
|
||
|
||
```typescript
|
||
/**
|
||
* 阅读画像缓存实体
|
||
* 存储计算后的分值，避免高频计算
|
||
*/
|
||
export interface IReadingPersona {
|
||
id: string; // 固定 ID 如 'current_user_persona'
|
||
cognition: number; // 认知深度分 (0-100)
|
||
breadth: number; // 知识广度分 (0-100)
|
||
practicality: number; // 实践应用分 (0-100)
|
||
output: number; // 产出效率分 (0-100)
|
||
global: number; // 国际视野分 (0-100)
|
||
topKeywords: string; // 存储 Top 10 关键词的 JSON 字符串
|
||
updatedAt: Date; // 最后计算时间
|
||
}
|
||
```
|
||
|
||
### 3. 第三阶段：核心计算逻辑 (Main Process)
|
||
|
||
这是画像系统的“大脑”，负责执行 SQL 并转换数据。
|
||
|
||
```typescript
|
||
import { IReadingReflectionTaskItem, IReadingReflectionTaskBatch } from '../types'
|
||
|
||
export class PersonaService {
|
||
/**
|
||
* 从数据库聚合数据并计算画像分值
|
||
*/
|
||
async calculatePersona(items: IReadingReflectionTaskItem[], batches: IReadingReflectionTaskBatch[]) {
|
||
// 1. 计算认知深度：根据关键词频次
|
||
const allKeywords = items.flatMap(i => i.keywords || [])
|
||
const keywordMap = new Map<string, number>()
|
||
allKeywords.forEach(k => keywordMap.set(k, (keywordMap.get(k) || 0) + 1))
|
||
|
||
// 逻辑：去重后的关键词越多且重复越高，分值越高 (示例算法)
|
||
const cognitionScore = Math.min(100, (keywordMap.size * 2) + (allKeywords.length / 5))
|
||
|
||
// 2. 计算知识广度：根据书籍数量
|
||
const breadthScore = Math.min(100, batches.length * 10)
|
||
|
||
// 3. 计算产出效率：根据总字数
|
||
const totalWords = items.reduce((sum, i) => sum + (i.content?.length || 0), 0)
|
||
const outputScore = Math.min(100, totalWords / 500) // 每 5万字满分
|
||
|
||
// 4. 计算 Top 10 关键词
|
||
const sortedKeywords = [...keywordMap.entries()]
|
||
.sort((a, b) => b[1] - a[1])
|
||
.slice(0, 10)
|
||
.map(entry => entry[0])
|
||
|
||
return {
|
||
cognition: Math.round(cognitionScore),
|
||
breadth: Math.round(breadthScore),
|
||
output: Math.round(outputScore),
|
||
practicality: 75, // 可根据 occupation 比例动态计算
|
||
global: 60, // 可根据 language 比例动态计算
|
||
topKeywords: sortedKeywords
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4. 第四阶段：前端可视化集成 (Statistics.vue)
|
||
|
||
使用 ECharts 渲染雷达图，将计算结果展现给用户。
|
||
|
||
```vue
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
import { trpc } from '@renderer/lib/trpc'
|
||
|
||
const chartRef = ref<HTMLElement | null>(null)
|
||
const personaData = ref<any>(null)
|
||
|
||
const initChart = (data: any) => {
|
||
const myChart = echarts.init(chartRef.value!)
|
||
const option = {
|
||
radar: {
|
||
indicator: [
|
||
{ name: '认知深度', max: 100 },
|
||
{ name: '知识广度', max: 100 },
|
||
{ name: '实践应用', max: 100 },
|
||
{ name: '产出效率', max: 100 },
|
||
{ name: '国际视野', max: 100 }
|
||
],
|
||
shape: 'circle',
|
||
splitNumber: 4,
|
||
axisLine: { lineStyle: { color: '#E5E7EB' } },
|
||
splitLine: { lineStyle: { color: '#E5E7EB' } },
|
||
splitArea: { areaStyle: { color: ['#fff', '#F8F9FB'] } }
|
||
},
|
||
series: [{
|
||
type: 'radar',
|
||
data: [{
|
||
value: [data.cognition, data.breadth, data.practicality, data.output, data.global],
|
||
areaStyle: { color: 'rgba(120, 22, 255, 0.2)' },
|
||
lineStyle: { color: '#7816ff', width: 3 },
|
||
itemStyle: { color: '#7816ff' }
|
||
}]
|
||
}]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
|
||
onMounted(async () => {
|
||
// 通过 tRPC 从主进程获取计算好的数据
|
||
const data = await trpc.stats.getPersona.query()
|
||
personaData.value = data
|
||
initChart(data)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="p-8 bg-white rounded-[32px] border border-slate-100 shadow-sm">
|
||
<div class="mb-6">
|
||
<h2 class="text-xl font-black text-slate-800">阅读心流画像</h2>
|
||
<p class="text-xs text-slate-400">基于本地 {{ personaData?.totalBooks }} 本书籍分析得出</p>
|
||
</div>
|
||
|
||
<div ref="chartRef" class="w-full h-[400px]"></div>
|
||
|
||
<div class="mt-8 flex flex-wrap gap-2">
|
||
<span v-for="tag in personaData?.topKeywords" :key="tag"
|
||
class="px-3 py-1 bg-slate-50 text-slate-500 text-[10px] rounded-full border border-slate-100">
|
||
# {{ tag }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
```
|
||
## 🎨 设计心得：为什么这么做？
|
||
数据解耦：原始任务数据（Items/Batches）与画像数据分开存储。即使画像计算逻辑升级（比如你想改变评分算法），也不需要修改历史心得数据。
|
||
|
||
缓存策略：不要在用户每次切换页面时都去扫全表。建议在任务完成时触发一次增量计算，或者每天用户第一次打开应用时刷新一次。
|
||
|
||
可视化反馈：雷达图的面积代表了用户的“知识疆域”。当用户看着面积一点点变大时，这种离线的成就感是留存的关键。
|