From ada5e027faa5ee54a6978087be583a452001ca17 Mon Sep 17 00:00:00 2001 From: molong Date: Wed, 11 Feb 2026 15:49:19 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BC=98=E5=8C=96=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .clinerules/admin-rule.md | 57 +- resources/admin/index.html | 16 +- resources/admin/src/assets/style/app.scss | 129 ++-- .../admin/src/assets/style/auth-pages.scss | 570 ------------------ resources/admin/src/main.js | 1 - .../src/pages/auth/departments/index.vue | 38 +- .../src/pages/auth/online-users/index.vue | 28 +- .../auth/permissions/components/SaveForm.vue | 276 ++++++--- .../src/pages/auth/permissions/index.vue | 360 ++++++++--- .../admin/src/pages/auth/roles/index.vue | 30 +- .../admin/src/pages/auth/users/index.vue | 30 +- 11 files changed, 643 insertions(+), 892 deletions(-) delete mode 100644 resources/admin/src/assets/style/auth-pages.scss diff --git a/.clinerules/admin-rule.md b/.clinerules/admin-rule.md index 0e6dcd3..f8a9436 100644 --- a/.clinerules/admin-rule.md +++ b/.clinerules/admin-rule.md @@ -272,9 +272,10 @@ pages/ **搜索区域设计原则**: 1. **精简显示**: 搜索条件不全部显示，只显示最常用的 1-2 项 -2. **优先使用表格筛选**: 对于状态等枚举类型的筛选，优先使用 Ant Design Vue Table 的自定义过滤器功能 -3. **高级搜索抽屉**: 其他复杂搜索条件使用抽屉弹出（需要在页面 components 目录下创建 SearchDrawer.vue 组件） -4. **保持界面整洁**: 避免搜索区域占用过多空间 +2. **去除 label 属性**: 搜索输入框不使用 label 属性，通过 placeholder 直接说明用途，保持界面简洁 +3. **优先使用表格筛选**: 对于状态等枚举类型的筛选，优先使用 Ant Design Vue Table 的自定义过滤器功能 +4. **高级搜索抽屉**: 其他复杂搜索条件使用抽屉弹出（需要在页面 components 目录下创建 SearchDrawer.vue 组件） +5. **保持界面整洁**: 避免搜索区域占用过多空间 **实现方式**: @@ -285,24 +286,17 @@ pages/
- - - - - - - - - - 搜索 - - - - 重置 - - - - + + + + + 搜索 + + + + 重置 + +
@@ -388,19 +382,12 @@ const columns = [
- - - - - - - - 搜索 - 重置 - 高级搜索 - - - + + + 搜索 + 重置 + 高级搜索 +
@@ -472,8 +459,6 @@ const handleAdvancedSearch = (formData) => {
diff --git a/resources/admin/src/assets/style/app.scss b/resources/admin/src/assets/style/app.scss index 3b453ad..796fd91 100644 --- a/resources/admin/src/assets/style/app.scss +++ b/resources/admin/src/assets/style/app.scss @@ -69,96 +69,95 @@ body { min-height: 100vh; } -.pages { - flex: 1; +// 标准页面布局（垂直布局） +.pages-base-layout { display: flex; flex-direction: column; - background-color: #ffffff; + height: 100%; + padding: 0; .tool-bar { padding: 12px 16px; - background-color: #fff; + background: #fff; border-bottom: 1px solid #f0f0f0; display: flex; - justify-content: space-between; - align-items: center; - gap: 16px; + flex-direction: row; .left-panel { - flex: 1; display: flex; align-items: center; - gap: 12px; - overflow-x: auto; - - :deep(.ant-form) { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 8px; - flex: 1; - } - - :deep(.ant-form-item) { - margin-bottom: 0; - } - - :deep(.ant-form-item-label) { - min-width: 70px; - } + flex: 1; } .right-panel { display: flex; - align-items: center; gap: 8px; - flex-shrink: 0; + } + } + + .table-content { + flex: 1; + overflow: hidden; + background: #f5f5f5; + } +} + +// 侧边栏布局（左右分栏） +.pages-sidebar-layout { + display: flex; + flex-direction: row; + height: 100%; + padding: 0; + + .left-box { + width: 260px; + border-right: 1px solid #f0f0f0; + display: flex; + flex-direction: column; + background: #fff; + + .header { + padding: 12px 16px; + border-bottom: 1px solid #f0f0f0; + background: #fafafa; } - // 按钮组样式 - .button-group { + .body { + flex: 1; + overflow-y: auto; + padding: 16px; + } + } + + .right-box { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .tool-bar { + padding: 12px 16px; + background: #fff; + border-bottom: 1px solid #f0f0f0; display: flex; - gap: 8px; - } + flex-direction: row; - // 搜索输入框样式 - :deep(.ant-input), - :deep(.ant-select-selector) { - border-radius: 4px; - } - - // 按钮样式优化 - :deep(.ant-btn) { - border-radius: 4px; - transition: all 0.3s ease; - - &:hover { - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + .left-panel { + display: flex; + align-items: center; + flex: 1; } - &:active { - transform: translateY(0); + .right-panel { + display: flex; + gap: 8px; } } - // 主按钮特殊样式 - :deep(.ant-btn-primary) { - background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); - border: none; - - &:hover { - background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%); - } - } - - // 危险按钮样式 - :deep(.ant-btn-dangerous) { - &:hover { - background: #ff4d4f; - border-color: #ff4d4f; - color: #fff; - } + .table-content { + flex: 1; + overflow: hidden; + background: #f5f5f5; } } } diff --git a/resources/admin/src/assets/style/auth-pages.scss b/resources/admin/src/assets/style/auth-pages.scss deleted file mode 100644 index b07d2ff..0000000 --- a/resources/admin/src/assets/style/auth-pages.scss +++ /dev/null @@ -1,570 +0,0 @@ -// 认证页面统一样式文件 -// 使用明亮暖色调配色方案 - -// ===== 颜色变量 ===== -$primary-color: #ff6b35; // 橙红色 -$primary-light: #ff8a5b; // 浅橙红色 -$primary-dark: #e55a2b; // 深橙红色 -$secondary-color: #ffd93d; // 金黄色 -$accent-color: #ffb84d; // 橙黄色 - -$bg-dark: #1a1a2e; // 深色背景 -$bg-light: #16213e; // 浅色背景 -$bg-gradient-start: #0f0f23; // 渐变开始 -$bg-gradient-end: #1a1a2e; // 渐变结束 - -$text-primary: #ffffff; -$text-secondary: rgba(255, 255, 255, 0.7); -$text-muted: rgba(255, 255, 255, 0.5); - -$border-color: rgba(255, 255, 255, 0.08); -$border-hover: rgba(255, 107, 53, 0.3); -$border-focus: rgba(255, 107, 53, 0.6); - -// ===== 基础容器 ===== -.auth-container { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - position: relative; - background: linear-gradient(135deg, $bg-gradient-start 0%, $bg-gradient-end 100%); - overflow: hidden; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', - 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -// ===== 科技感背景 ===== -.tech-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - pointer-events: none; - - // 网格线 - .grid-line { - position: absolute; - width: 100%; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.08), transparent); - animation: gridMove 8s linear infinite; - - &:nth-child(1) { top: 20%; animation-delay: 0s; } - &:nth-child(2) { top: 40%; animation-delay: 2s; } - &:nth-child(3) { top: 60%; animation-delay: 4s; } - &:nth-child(4) { top: 80%; animation-delay: 6s; } - } - - // 光点效果 - .light-spot { - position: absolute; - width: 4px; - height: 4px; - background: $primary-color; - border-radius: 50%; - box-shadow: 0 0 10px $primary-color, 0 0 20px $primary-color; - animation: float 6s ease-in-out infinite; - - &:nth-child(5) { top: 15%; left: 20%; animation-delay: 0s; } - &:nth-child(6) { top: 25%; left: 70%; animation-delay: 2s; } - &:nth-child(7) { top: 55%; left: 15%; animation-delay: 4s; } - &:nth-child(8) { top: 75%; left: 80%; animation-delay: 1s; } - } -} - -@keyframes gridMove { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(100%); } -} - -@keyframes float { - 0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; } - 50% { transform: translateY(-20px) scale(1.2); opacity: 1; } -} - -// ===== 主卡片 ===== -.auth-wrapper { - width: 100%; - max-width: 960px; - padding: 20px; - position: relative; - z-index: 1; -} - -.auth-card { - background: rgba(255, 255, 255, 0.02); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - border-radius: 28px; - padding: 0; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); - border: 1px solid $border-color; - overflow: hidden; - display: flex; - min-height: 580px; - animation: cardFadeIn 0.6s ease-out; -} - -@keyframes cardFadeIn { - 0% { opacity: 0; transform: translateY(20px); } - 100% { opacity: 1; transform: translateY(0); } -} - -// ===== 左侧装饰区 ===== -.decoration-area { - flex: 1; - background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 217, 61, 0.03) 100%); - padding: 60px 40px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - border-right: 1px solid $border-color; -} - -.tech-circle { - position: relative; - width: 220px; - height: 220px; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 48px; - - .circle-inner { - width: 110px; - height: 110px; - background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%); - border-radius: 50%; - box-shadow: 0 0 50px rgba(255, 107, 53, 0.4); - animation: pulse 3s ease-in-out infinite; - display: flex; - align-items: center; - justify-content: center; - - &::after { - content: ''; - width: 60px; - height: 60px; - background: linear-gradient(135deg, $secondary-color 0%, $accent-color 100%); - border-radius: 50%; - box-shadow: 0 0 30px rgba(255, 217, 61, 0.5); - } - } - - .circle-ring { - position: absolute; - width: 160px; - height: 160px; - border: 2px solid rgba(255, 107, 53, 0.2); - border-radius: 50%; - animation: rotate 12s linear infinite; - - &::before { - content: ''; - position: absolute; - top: -2px; - left: 50%; - transform: translateX(-50%); - width: 8px; - height: 8px; - background: $primary-color; - border-radius: 50%; - box-shadow: 0 0 15px $primary-color; - } - } - - .circle-ring-2 { - width: 200px; - height: 200px; - border: 1px solid rgba(255, 217, 61, 0.15); - animation: rotate 18s linear infinite reverse; - } -} - -@keyframes pulse { - 0%, 100% { transform: scale(1); opacity: 1; } - 50% { transform: scale(1.08); opacity: 0.85; } -} - -@keyframes rotate { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -.decoration-text { - text-align: center; - - h2 { - margin: 0 0 16px; - font-size: 32px; - font-weight: 700; - background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: 1px; - } - - p { - margin: 0; - color: $text-secondary; - font-size: 16px; - font-weight: 400; - letter-spacing: 0.5px; - } -} - -// ===== 右侧表单区 ===== -.form-area { - flex: 1.3; - padding: 60px 56px; -} - -.auth-header { - margin-bottom: 40px; - - h1 { - margin: 0 0 12px; - font-size: 36px; - font-weight: 700; - background: linear-gradient(135deg, $primary-color 0%, $accent-color 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: 1px; - } - - .subtitle { - margin: 0; - color: $text-secondary; - font-size: 15px; - font-weight: 400; - } -} - -// ===== 表单样式 ===== -.auth-form { - margin-top: 0; - - :deep(.ant-form-item) { - margin-bottom: 26px; - } - - :deep(.ant-form-item-label > label) { - color: $text-secondary; - font-size: 14px; - font-weight: 500; - } - - // 输入框样式 - :deep(.ant-input-affix-wrapper), - :deep(.ant-input) { - background: rgba(255, 255, 255, 0.03); - border: 1px solid $border-color; - border-radius: 12px; - color: $text-primary; - padding: 12px 16px; - font-size: 15px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - - &:hover { - background: rgba(255, 255, 255, 0.06); - border-color: $border-hover; - } - - &:focus, - &.ant-input-affix-wrapper-focused { - background: rgba(255, 255, 255, 0.06); - border-color: $primary-color; - box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1); - } - } - - :deep(.ant-input::placeholder) { - color: $text-muted; - } - - :deep(.ant-input-affix-wrapper > input.ant-input) { - background: transparent; - } - - // 图标样式 - :deep(.anticon) { - color: $text-secondary; - font-size: 16px; - transition: color 0.3s; - } - - :deep(.ant-input-affix-wrapper-focused .anticon) { - color: $primary-color; - } -} - -// ===== 按钮样式 ===== -.auth-form :deep(.ant-btn-primary) { - background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%); - border: none; - border-radius: 12px; - height: 48px; - font-weight: 600; - font-size: 16px; - letter-spacing: 0.5px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); - - &:hover:not(:disabled) { - background: linear-gradient(135deg, $primary-light 0%, $accent-color 100%); - box-shadow: 0 6px 25px rgba(255, 107, 53, 0.4); - transform: translateY(-2px); - } - - &:active:not(:disabled) { - transform: translateY(0); - box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3); - } - - &:disabled { - background: rgba(255, 255, 255, 0.08); - color: $text-muted; - box-shadow: none; - transform: none; - cursor: not-allowed; - } -} - -// ===== 表单选项 ===== -.form-options { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 26px; - - :deep(.ant-checkbox-wrapper) { - color: $text-primary; - font-size: 14px; - - .ant-checkbox { - .ant-checkbox-inner { - border-color: $border-color; - background: rgba(255, 255, 255, 0.03); - } - - &.ant-checkbox-checked .ant-checkbox-inner { - background: $primary-color; - border-color: $primary-color; - } - } - } -} - -.forgot-password { - color: $primary-color; - text-decoration: none; - font-size: 14px; - font-weight: 500; - transition: all 0.3s; - - &:hover { - color: $primary-light; - text-decoration: underline; - } -} - -// ===== 验证码输入框 ===== -.code-input-wrapper { - display: flex; - gap: 14px; - - .code-input { - flex: 1; - } - - .code-btn { - width: 150px; - white-space: nowrap; - background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%); - border: none; - border-radius: 12px; - font-weight: 600; - font-size: 14px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); - - &:hover:not(:disabled) { - background: linear-gradient(135deg, $primary-light 0%, $accent-color 100%); - box-shadow: 0 6px 25px rgba(255, 107, 53, 0.4); - transform: translateY(-2px); - } - - &:active:not(:disabled) { - transform: translateY(0); - } - - &:disabled { - background: rgba(255, 255, 255, 0.08); - color: $text-muted; - box-shadow: none; - transform: none; - cursor: not-allowed; - } - } -} - -// ===== 协议复选框 ===== -.agreement-checkbox { - :deep(.ant-checkbox-wrapper) { - color: $text-secondary; - font-size: 13px; - align-items: flex-start; - line-height: 1.6; - - .ant-checkbox { - margin-top: 2px; - - .ant-checkbox-inner { - border-color: $border-color; - background: rgba(255, 255, 255, 0.03); - } - - &.ant-checkbox-checked .ant-checkbox-inner { - background: $primary-color; - border-color: $primary-color; - } - } - } -} - -.agreement-text { - font-size: 13px; - line-height: 1.6; - color: $text-secondary; -} - -.link { - color: $primary-color; - text-decoration: none; - font-weight: 500; - transition: all 0.3s; - - &:hover { - color: $primary-light; - text-decoration: underline; - } -} - -// ===== 表单底部 ===== -.form-footer { - text-align: center; - margin-top: 28px; - color: $text-secondary; - font-size: 14px; - - .auth-link { - color: $primary-color; - text-decoration: none; - font-weight: 600; - margin-left: 6px; - transition: all 0.3s; - - &:hover { - color: $primary-light; - text-decoration: underline; - } - } -} - -// ===== 响应式设计 ===== -@media (max-width: 768px) { - .auth-card { - flex-direction: column; - min-height: auto; - margin: 20px 0; - } - - .decoration-area { - padding: 48px 24px; - border-right: none; - border-bottom: 1px solid $border-color; - } - - .tech-circle { - width: 160px; - height: 160px; - - .circle-inner { - width: 80px; - height: 80px; - - &::after { - width: 45px; - height: 45px; - } - } - - .circle-ring { - width: 120px; - height: 120px; - } - - .circle-ring-2 { - width: 150px; - height: 150px; - } - } - - .decoration-text { - h2 { - font-size: 26px; - } - - p { - font-size: 14px; - } - } - - .form-area { - padding: 48px 32px; - } - - .auth-header { - h1 { - font-size: 28px; - } - - .subtitle { - font-size: 14px; - } - } - - .code-input-wrapper { - flex-direction: column; - gap: 12px; - - .code-btn { - width: 100%; - } - } -} - -@media (max-width: 480px) { - .auth-wrapper { - padding: 16px; - } - - .auth-card { - border-radius: 20px; - } - - .form-area { - padding: 36px 24px; - } - - .auth-header { - margin-bottom: 32px; - } -} diff --git a/resources/admin/src/main.js b/resources/admin/src/main.js index 115f5eb..e70ebe6 100644 --- a/resources/admin/src/main.js +++ b/resources/admin/src/main.js @@ -3,7 +3,6 @@ import { createApp } from 'vue' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/reset.css' import '@/assets/style/app.scss' -import '@/assets/style/pages.scss' import App from './App.vue' import router from './router' import pinia from './stores' diff --git a/resources/admin/src/pages/auth/departments/index.vue b/resources/admin/src/pages/auth/departments/index.vue index 9bd5fc4..d106147 100644 --- a/resources/admin/src/pages/auth/departments/index.vue +++ b/resources/admin/src/pages/auth/departments/index.vue @@ -3,29 +3,21 @@
- - - - - - - 正常 - 禁用 - - - - - - - 搜索 - - - - 重置 - - - - + + + + 正常 + 禁用 + + + + 搜索 + + + + 重置 + +
diff --git a/resources/admin/src/pages/auth/online-users/index.vue b/resources/admin/src/pages/auth/online-users/index.vue index cc955cf..3424d11 100644 --- a/resources/admin/src/pages/auth/online-users/index.vue +++ b/resources/admin/src/pages/auth/online-users/index.vue @@ -45,23 +45,17 @@
- - - - - - - - - 搜索 - - - - 重置 - - - - + + + + + 搜索 + + + + 重置 + +
diff --git a/resources/admin/src/pages/auth/permissions/components/SaveForm.vue b/resources/admin/src/pages/auth/permissions/components/SaveForm.vue index ca66610..0a49df0 100644 --- a/resources/admin/src/pages/auth/permissions/components/SaveForm.vue +++ b/resources/admin/src/pages/auth/permissions/components/SaveForm.vue @@ -1,18 +1,19 @@ + + diff --git a/resources/admin/src/pages/auth/roles/index.vue b/resources/admin/src/pages/auth/roles/index.vue index 6e1bf76..2092fb0 100644 --- a/resources/admin/src/pages/auth/roles/index.vue +++ b/resources/admin/src/pages/auth/roles/index.vue @@ -2,24 +2,18 @@
- - - - - - - - - 搜索 - - - - 重置 - - - - + + + + + 搜索 + + + + 重置 + +
diff --git a/resources/admin/src/pages/auth/users/index.vue b/resources/admin/src/pages/auth/users/index.vue index 1a1ea05..b9ec834 100644 --- a/resources/admin/src/pages/auth/users/index.vue +++ b/resources/admin/src/pages/auth/users/index.vue @@ -21,24 +21,18 @@
- - - - - - - - - 搜索 - - - - 重置 - - - - + + + + + 搜索 + + + + 重置 + +