前端¶
架构设计¶
功能设计¶
导航栏¶
- 全局搜索框，在任何界面随时进行快速搜索。
- 收藏/稍后再看/历史记录浮窗，随时浏览关心的新闻。
- 登录注册浮窗、个人中心按钮，与用户功能集成。
新闻主页¶
- 分类别展示最新新闻。
- 轮播图和热榜设计，快速获取当下热点。
- 个性化栏目，根据用户喜好个性化进行推荐。
搜索¶
- 分页展示搜索结果，可即时加入收藏。
- 搜索建议功能，获取包含已输入搜索词的搜索建议。
- 必含词/排除词功能，对搜索结果进行筛选。
- 自定义排序逻辑功能，可以指定相关性优先或时间优先。
用户¶
- 友好的注册/登录页面。
- 登录后可保存收藏/稍后再看/历史记录，并生成 AI 智能摘要。
- 登录后享受个性化新闻推荐。
- 用户信息页可查看用户偏好词生成的词云图。
实现¶
main.ts¶
提供全局函数库并作为前端脚本入口点将组件挂载到 HTML 页面中。
函数
| 函数名 | 返回值 | 功能 |
|---|---|---|
reloadNavigationBar |
无 | 重载导航栏 |
decodeToken |
string |
解析鉴权令牌并获取用户名 |
judgeToken |
Promise<string> |
判断令牌是否有效 |
newsClick |
无 | 记录新闻点击 |
App.vue¶
主应用组件，挂在路由视图并提供消息和对话框环境。
router/index.ts¶
Vue Router 路由管理，实现页面之间的导航关系。
导出
| 变量名 | 类型 | 功能 |
|---|---|---|
router |
Router |
全局路由配置 |
store/axiosInstance.ts¶
Axios 实例管理，使用统一的参数配置网络请求。
导出
| 变量名 | 类型 | 功能 |
|---|---|---|
API |
AxiosInstance |
全局网络请求配置 |
views/¶
视图页面。
MainSurface.vue¶
全局页面框架，挂载全局导航栏并提供导航栏事件处理机制。
环境
使用 provide 提供了下列环境。
| 变量名 | 类型 | 功能 |
|---|---|---|
userRef |
ref<UserInfo> |
用户信息 |
contentRef |
ref<LayoutInst | null> |
布局内容引用，用于页面滚动 |
inclusionExclusionTags |
Tag[] |
必选排除词标签 |
| 函数名 | 返回值 | 功能 |
|---|---|---|
updateUserLocal |
Promise<void> |
更新用户信息 |
LoginRegister.vue¶
登录注册页面。
NewsHome.vue¶
新闻主页。
SearchPage.vue¶
搜索结果页。
UserPage.vue¶
用户主页，挂载了路由视图提供各个子页面的现实。
FavoritesPage.vue¶
收藏/稍后再看/历史记录页面。
事件
| 事件名 | 参数 | 时机 |
|---|---|---|
update |
无 | 新闻条目改变时 |
components/¶
组件。
EditInformation.vue¶
用户信息编辑组件。
FavoritesNewsPanel.vue¶
新闻展示面板组件，用于收藏、稍后再看与历史记录。
属性
| 属性名 | 类型 | 功能 |
|---|---|---|
news |
News[] |
面板中的新闻 |
morePath |
string |
点击查看更多按钮后跳转的路径 |
historyMode |
boolean |
历史记录模式 (展示访问时间) |
ModifyPassword.vue¶
密码修改组件。
NavigationBar.vue¶
全局导航栏组件。
NewsCategory.vue¶
首页新闻分类组件。
属性
| 属性名 | 类型 | 功能 |
|---|---|---|
news |
All_News[] |
首页新闻 |
empty_content |
string |
内容为空的提示 (个性化分类提示不同) |
NewsEntry.vue¶
新闻条目组件，用于新闻主页、搜索结果页和收藏页。
属性
| 属性名 | 类型 | 功能 |
|---|---|---|
news |
News |
条目显示的新闻 |
事件
| 事件名 | 参数 | 时机 |
|---|---|---|
update |
无 | 新闻条目改变时 |
NewsPanelEntry.vue¶
小型新闻条目组件，用于导航栏浮窗。
属性
| 属性名 | 类型 | 功能 |
|---|---|---|
news |
News |
条目显示的新闻 |
SearchBox.vue¶
搜索框组件。
属性
| 属性名 | 类型 | 功能 |
|---|---|---|
text |
string |
搜索词 |
sort |
string |
排序逻辑 |
SelectMore.vue¶
主页新闻更多分类组件。
属性
| 属性名 | 类型 | 功能 |
|---|---|---|
mainCategory |
Category[] |
新闻类别 |
事件
| 事件名 | 参数 | 时机 |
|---|---|---|
update |
无 | 新闻类别改变时 |
UserAvatar.vue¶
用户头像组件。
属性
| 属性名 | 类型 | 功能 |
|---|---|---|
width |
number |
头像宽度 |
height |
number |
头像高度 |
WordChart.vue¶
词云图组件。