refactor(views): 重构多个视图组件代码和样式

重构了多个视图组件的代码结构和样式，包括：
1. 重命名变量和类名以提高可读性
2. 优化CSS样式结构和响应式设计
3. 添加过渡动画和悬停效果
4. 统一组件命名规范
5. 改进表单验证和交互体验
6. 增强代码注释和文档

feat(types): 修改Article接口定义
更新Article接口字段，将categoryId改为attributeid，并将categoryName和tags改为数组类型

fix(services): 修改文章服务接口
更新getAllArticles方法，改为获取已发布文章

style(layouts): 调整主布局样式
修改导航栏背景透明度和布局间距

chore(assets): 更新背景图片
替换旧的背景图片文件

src/types/index.ts

@@ -10,9 +10,10 @@ export interface Article {
   author: string
   createTime: string
   updateTime: string
-  categoryId: number
-  categoryName?: string
-  tags?: string
+  // categoryId: number
+  attributeid?: number
+  categoryName?: string[]
+  tags?: string[]
   viewCount?: number
   commentCount?: number
   articleid?: string