当前位置：首页 > news >正文

GoFly快速开发框架新增UI素材库-帮助开发者快速开发管理后台UI基于ArcoDesign框架开发

news 来源：原创 2025/4/28 8:34:03

说明：

为开发者提供管理台的UI素材，社区将持续为开发开发后台系统常用UI界面，让开发时能有一半的界面可以直接从UI库获取，减少开发者自己排版界面的时间，帮助开发者快速开发后台业务。

使用的前端版本要求：

1.新增src\components\autoPlugin的插件：IconBox

2."vue": "^3.2.40",升级到"vue": "^3.5.4",

3."@vueuse/core": "^9.3.0", 升级到"@vueuse/core": "^10.5.0",

4."@arco-design/web-vue": "2.55.2", 升级到 "@arco-design/web-vue": "^2.57.0",

5.default-layout.vue中 .content-page添加 display: flex; flex-direction: column;

也可以把整个框架升级到2.6.6版本（正在准备发布）。

本次更新也对arco Design样式调整，在src\assets\style添加cover-arco.less，代码如下：

//message样式-ing
.fade-message-enter-from {opacity: 0;transform: translate3d(0, -100%, 0);
}.fade-message-enter-to {opacity: 1;transform: translate3d(0, 0, 0);
}.fade-message-enter-active,
.fade-message-appear-active {transition: opacity 0.3s, transform 0.4s;
}.fade-message-leave-from {opacity: 1;transform: translate3d(0, 0, 0);
}.fade-message-leave-to {opacity: 0;transform: translate3d(0, -100%, 0);
}.fade-message-leave-active {position: absolute;
}
//message样式-end
//树Tree样式-ing
.arco-tree-show-line .arco-tree-node-is-leaf:not(.arco-tree-node-is-tail) .arco-tree-node-indent::after,
.arco-tree-show-line .arco-tree-node-indent-block::before {transform: translateX(0);border-color: var(--color-border-3);flex-shrink: 0;
}.arco-tree-node-minus-icon,
.arco-tree-node-plus-icon {border: 1px solid var(--color-border-3);box-sizing: border-box;
}.arco-tree-node-switcher-icon {display: flex;justify-content: center;align-items: center;
}
//树Tree样式-end
//滚动条样式-ing
.arco-scrollbar-track-direction-vertical {width: 8px;
}
.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {width: 6px;margin: 0 1px;
}.arco-scrollbar-track-direction-horizontal {height: 8px;
}
.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {height: 6px;margin: 1px 0;
}
.arco-scrollbar-thumb-bar {background-color: var(--color-neutral-3);
}
//滚动条样式-end
//分页组件-ing
.arco-pagination-item {background-color: var(--color-fill-1);border-radius: 4px;display: inline-flex;justify-content: center;align-items: center;transition: none;box-sizing: border-box;&:hover {color: rgb(var(--primary-6));background-color:var(--color-fill-2);}// &:active {//   color: #fff;//   background-color: rgb(var(--primary-6));//   border: 1px solid rgb(var(--primary-6));// }
}.arco-pagination-item-active {background-color: var(--color-primary-light-1);&:hover {background-color: var(--color-primary-light-1);}
}.arco-pagination .arco-pagination-item-previous.arco-pagination-item-disabled,
.arco-pagination .arco-pagination-item-next.arco-pagination-item-disabled {border-color: var(--color-border-2);&:hover {border-color: var(--color-border-2);}
}
//分页组件-end