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/components/LeftModule.vue

@@ -215,9 +215,9 @@ onUnmounted(() => {
   background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
   padding: 15px;
 }
-.demo-tabs  .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll{
-  text-align: center;
-  width: 100%;
+.el-tabs__nav-scroll .el-tabs__nav .el-tabs__item{
+  margin-left: 100px;
+  padding: 10px 20px;
 }
 /* 头像样式 */
 .mylogo {