201 lines
4.1 KiB
Plaintext
201 lines
4.1 KiB
Plaintext
007 Admin UI项目，基于elementplus+vue3+vite+vue-router进行开发的企业级高端后台管理系统UI。
|
|
|
|
使用pnpm包管理器。
|
|
|
|
组件封装到src/components目录下。
|
|
路由封装到src/router目录下。
|
|
api封装到src/api目录下。
|
|
store封装到src/store目录下。
|
|
页面封装到src/views目录下。
|
|
|
|
当你实现一个通用组件后，应该在compoents.md文件中记录下来，记录组件名称、参数、事件、使用方法。
|
|
|
|
请保持整体风格样式统一，也就是说在实现一个页面或者组件之前你需要先阅读其他已经实现的页面。
|
|
在没有实现具体页面之前禁止注册路由。
|
|
在需要的情况下你需要注册侧边栏
|
|
请使用vue3 setup语法糖开发，禁止使用scss。禁止使用ts。
|
|
|
|
注册侧边栏在/config/menus.js文件中。
|
|
|
|
新添加要求：
|
|
在遇到用户id需要填写和修改的弹窗将其修改为可预览样式
|
|
关于填写表单为推荐人id的需要使用组件AvatarSelector展示，如果是文件id或者是封面id 的也需要预览展示需要向头像列表组件一样，可以弄个文件组件/api/v1/admin/file/list这个是文件列表接口
|
|
|
|
规则：
|
|
1.只要涉及弹窗添加和修改xxxid类型的就需要生成一个弹窗组件并使用到页面中
|
|
|
|
## 1. 基础布局规范
|
|
```css
|
|
/* 页面容器 */
|
|
.page-container {
|
|
padding: 0;
|
|
}
|
|
|
|
/* 筛选容器 */
|
|
.filter-container {
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* 搜索表单 */
|
|
.search-form {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* 操作栏 */
|
|
.action-bar {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* 表格容器 */
|
|
.table-container {
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
```
|
|
|
|
## 2. 表格样式规范
|
|
```css
|
|
/* 表格基础样式 */
|
|
:deep(.el-table) {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
/* 表头样式 */
|
|
:deep(.el-table th) {
|
|
background-color: #f8f9fb !important;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
height: 50px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
/* 单元格样式 */
|
|
:deep(.el-table td) {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
/* 斑马纹样式 */
|
|
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* 行悬停效果 */
|
|
:deep(.el-table__body tr:hover > td) {
|
|
background-color: #f1f5f9 !important;
|
|
}
|
|
|
|
/* 行过渡动画 */
|
|
:deep(.el-table__body tr) {
|
|
transition: all 0.3s ease;
|
|
}
|
|
```
|
|
|
|
## 3. 分页样式规范
|
|
```css
|
|
/* 分页容器 */
|
|
.pagination {
|
|
margin-top: 24px;
|
|
justify-content: flex-end;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
/* 分页基础样式 */
|
|
:deep(.el-pagination) {
|
|
--el-pagination-hover-color: #1f2937;
|
|
}
|
|
|
|
/* 禁用按钮样式 */
|
|
:deep(.el-pagination button:disabled) {
|
|
background-color: #f1f5f9;
|
|
}
|
|
|
|
/* 页码样式 */
|
|
:deep(.el-pagination .el-pager li) {
|
|
border-radius: 4px;
|
|
margin: 0 2px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* 激活页码样式 */
|
|
:deep(.el-pagination .el-pager li.active) {
|
|
background-color: #1f2937;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 页码悬停效果 */
|
|
:deep(.el-pagination .el-pager li:hover:not(.active)) {
|
|
background-color: #f1f5f9;
|
|
}
|
|
```
|
|
|
|
## 4. 对话框样式规范
|
|
```css
|
|
/* 对话框底部 */
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
```
|
|
|
|
## 5. 响应式设计规范
|
|
```css
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.el-form-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.action-bar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.action-bar .el-button {
|
|
width: 100%;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
:deep(.el-table th) {
|
|
padding: 6px 0;
|
|
}
|
|
|
|
:deep(.el-table td) {
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
```
|
|
|
|
## 6. 颜色规范
|
|
- 主色：#1f2937
|
|
- 背景色：#f8f9fb
|
|
- 悬停色：#f1f5f9
|
|
- 文字主色：#1f2937
|
|
- 文字次色：#64748b
|
|
|
|
## 7. 间距规范
|
|
- 页面内边距：0
|
|
- 卡片间距：20px
|
|
- 表单间距：15px
|
|
- 按钮间距：12px
|
|
- 表格内边距：8px-12px
|
|
|
|
## 8. 圆角规范
|
|
- 卡片圆角：8px
|
|
- 按钮圆角：4px
|
|
- 表格圆角：8px
|
|
|
|
## 9. 阴影规范
|
|
- 卡片阴影：0 2px 12px 0 rgba(0, 0, 0, 0.05)
|
|
|
|
## 10. 动画规范
|
|
- 过渡时间：0.3s
|
|
- 过渡效果：ease |