yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
446 Commits 1 Branch 0 Tags
8db419014757715ec725ce6f227c7e958bee1a1e
Commit Graph

16 Commits

Author SHA1 Message Date
yiqiu
8db4190147 fix: 增强CSS覆盖, 重置common.css的position/height/top
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- el-header: top:auto, backdrop-filter:none, border-radius:0
- el-aside: height:auto, position:relative, top:auto, padding:0
- 确保所有旧值被完全覆盖
 2026-03-20 09:04:55 +08:00
yiqiu
42e36cde07 feat: 全面模仿 VMRack 控制台风格
All checks were successful
continuous-integration/drone/push Build is passing
Details 
布局:
- CSS Grid: 228px侧边栏 + 1fr内容, 64px顶栏 + 1fr内容
- 淡蓝渐变背景 linear-gradient(135deg)
- 磨砂玻璃浮岛 backdrop-filter:blur(12px)
- 侧边栏/内容区: 圆角20px, 半透白背景, 20px间距

风格:
- 透明顶栏(无背景无阴影)
- 顶栏右侧圆形磨砂按钮
- 胶囊菜单高亮(44px高/10px圆角)
- 配色: #1D2129/#4E5969/#165DFF
 2026-03-20 08:58:31 +08:00
yiqiu
d4136cc376 fix: 顶栏全宽 + 内容区背景色 + 等高
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- el-header: width:100% 覆盖旧的 calc(100%-190px), height:60px
- el-header: position:relative 覆盖旧的 position:fixed
- el-main: background-color:#F5F7FA
- el-aside/el-main: min-height:0 确保 grid 等高
 2026-03-20 08:50:54 +08:00
yiqiu
d991d9af1c feat: 顶栏全宽+Logo移到顶栏+CSS Grid布局
All checks were successful
continuous-integration/drone/push Build is passing
Details 
组件修改:
- topMenu.js: el-header 左侧添加 logo (header-logo class)

CSS Grid 布局:
- 外层 el-container → grid(190px+1fr, 60px+1fr)
- 内层 el-container → display:contents
- top-menu的div包裹 → display:contents
- el-header: grid-column 1/-1 跨两列全宽第一行
- el-aside: 第一列第二行
- el-main: 第二列第二行

其他:
- 隐藏侧边栏原有 logo (.el-aside > a:first-child)
- menu-top margin-top: 86px → 12px
 2026-03-20 08:46:15 +08:00
yiqiu
063ac36110 fix: 同时强制内层el-container为column方向
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 外层: flex-direction: row (aside左 + container右)
- 内层: flex-direction: column (top-menu上 + el-main下)
- 修复Element UI对两层容器的方向误判
 2026-03-20 08:40:38 +08:00
yiqiu
504474c8cb fix: 强制外层el-container为row方向
All checks were successful
continuous-integration/drone/push Build is passing
Details 
Element UI 的 el-container 因 aside-menu 是自定义组件
(非 ElAside) 而误判为 vertical 方向。
通过 CSS 强制 .template > .el-container flex-direction: row
 2026-03-20 08:33:27 +08:00
yiqiu
b5fc98a1d4 fix: 恢复 menu-top 原始 margin-top, 移除覆盖
All checks were successful
continuous-integration/drone/push Build is passing
Details
2026-03-20 08:28:48 +08:00
yiqiu
e2ed2d9afb fix: 恢复原始flex布局 + 侧边栏右圆角
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 移除失败的CSS Grid方案
- 恢复原始flex水平布局(侧边栏左 + 顶栏/内容右)
- 侧边栏: 右侧圆角 border-radius: 0 16px 16px 0
- 顶栏: 白色简洁,去掉sticky定位
- 去掉侧边栏margin/height计算等破坏布局的属性
 2026-03-20 08:27:10 +08:00
yiqiu
b20d442e1f fix: 回退PHP模板 + CSS Grid布局重排
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 回退20个PHP文件到原始结构 (aside-menu先, inner container包含top-menu+el-main)
- 用CSS Grid + display:contents实现布局重排:
  - 外层容器: grid, 两列(auto+1fr), 两行(auto+1fr)
  - 内层容器: display:contents (消失,子元素直接参与grid)
  - el-header: grid-column: 1/-1 跨两列全宽
  - el-aside: grid第二行左列
  - el-main: grid第二行右列
 2026-03-20 08:24:24 +08:00
yiqiu
63f0959dcb fix: 顶栏全宽 + 侧边栏对齐修正
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 外层 .template > .el-container: flex-direction: column (顶栏全宽独行)
- 内层 .template > .el-container > .el-container: flex-direction: row (侧边栏+内容水平)
- el-aside height: calc(100vh - 60px - 24px) 减去上下 margin
- el-aside top: calc(60px + 12px) 对齐顶栏下方间距
 2026-03-20 08:16:26 +08:00
yiqiu
53724c559a fix: 布局对齐 + 侧边栏圆角UI
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- el-container: width:100% 确保全宽
- el-aside: 圆角16px + 阴影 + margin间距 + 去掉 border-right
- menu-top: margin-top 86px → 12px (logo已移到顶栏)
- 顶栏全宽对齐
 2026-03-20 08:13:05 +08:00
yiqiu
a5fab1e519 feat: clientarea 布局重构 — 顶栏全宽独占一行
All checks were successful
continuous-integration/drone/push Build is passing
Details 
HTML 结构变更 (20个PHP文件):
- 旧: el-container > [aside-menu, el-container > [top-menu, el-main]]
- 新: el-container[direction=vertical] > [top-menu, el-container > [aside-menu, el-main]]

CSS 适配:
- el-header: sticky top:0, z-index:100, width:100%
- el-aside: height calc(100vh-60px), sticky top:60px
 2026-03-20 08:09:31 +08:00
yiqiu
f9c0319b0c feat: clientarea 全面改为 VMRack 浅色风格
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 基础层: #0d1117 → #F5F7FA 浅灰背景
- 顶栏: 暗色毛玻璃 → 白色实底
- 侧边栏: 白色 + 蓝色胶囊选中
- 主内容区: 暗色 → #F5F7FA + 白色卡片 + 圆角阴影
- Element UI: 全部组件从暗色改为浅色
- 滚动条/弹窗/表格/按钮等全面适配浅色主题
 2026-03-20 08:02:38 +08:00
yiqiu
6fbbda60d5 style: clientarea 侧边栏改为白色背景
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 背景: #0d1117 → #FFFFFF
- 边框: rgba(255,255,255,0.04) → rgba(0,0,0,0.06)
- 菜单文字: #8B949E → #5f6368
- 悬停: 白色半透明 → 黑色半透明 rgba(0,0,0,0.04)
- 选中: 蓝色半透明 + 蓝色文字
 2026-03-20 07:50:59 +08:00
yiqiu
f354a113b1 feat: 侧边栏菜单胶囊高亮效果
All checks were successful
continuous-integration/drone/push Build is passing
Details 
- 悬停: 半透明白色背景 rgba(255,255,255,0.06)
- 选中: 半透明蓝色背景 rgba(22,93,255,0.12) + 蓝色图标
- 去掉底部横线和颜色突变
- 平滑 0.2s 过渡动画
- 子菜单同样适用
 2026-03-19 20:38:11 +08:00
yiqiu
0b845b2075 feat: 会员中心全局暗色主题重构
All checks were successful
continuous-integration/drone/push Build is passing
Details 
阶段一：全局覆盖
- 新增 dark-override.css (450+ 行)，覆盖所有 Element UI 组件暗色样式
  - 输入框、表格、Tabs、弹窗、按钮、分页、复选框、下拉框等
  - 侧边栏、顶栏、主内容区暗色背景
  - 滚动条、日期选择器、消息面板等
- header.php 引入 dark-override.css

阶段二：页面独立 CSS 暗色化（22 个文件）
- 白色背景 #fff → #161b22
- 浅灰背景 #F3F5F9 → #0d1117
- 深色文字 #171725/#1E2736 → #E6E8EB
- 灰色文字 #8692B0 → #8B949E
- 浅色边框 #E6E7EB → rgba(255,255,255,0.06)
- 悬停背景 #F5F7FA → #21262d
 2026-03-19 19:49:49 +08:00