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/services/articleService.js

@@ -6,12 +6,12 @@ import apiService from './apiService'
  */
 class ArticleService {
   /**
-   * 获取所有文章
+   * 获取已发布文章
    * @param {Object} params - 查询参数
    * @returns {Promise}
    */
   getAllArticles(params = {}) {
-    return apiService.get('/articles', { params })
+    return apiService.get('/articles/published', { params })
   }
 
   /**