mirror of
https://github.com/Cccc-owo/CheckInApp.git
synced 2026-06-17 14:06:28 +00:00
feat: migrate from Element Plus to Ant Design Vue and update Vite configuration for better dependency management
- Updated Vite configuration to manually chunk Ant Design Vue for improved dependency management. - Added a comprehensive migration testing checklist for transitioning from Element Plus 2.13.0 to Ant Design Vue 4.x, covering various components and functionalities.
This commit is contained in:
+297
-9
@@ -3,6 +3,9 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Ant Design Vue Reset (imported in main.js via import, keeping this comment for reference) */
|
||||
/* The actual import is: import 'ant-design-vue/dist/reset.css' */
|
||||
|
||||
/* Global styles */
|
||||
@layer base {
|
||||
:root {
|
||||
@@ -131,15 +134,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Element Plus customization to work with Tailwind */
|
||||
.el-button {
|
||||
@apply transition-smooth;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
@apply transition-smooth;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
@@ -153,3 +147,297 @@
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded hover:bg-gray-400;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Ant Design Vue Customization
|
||||
======================================== */
|
||||
|
||||
/* Ant Design Card - Match Material Design 3 style */
|
||||
.ant-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.ant-card:hover {
|
||||
box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
/* Fluent glass effect for Ant Design cards */
|
||||
.ant-card.fluent-card {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
/* Ant Design Button - Match MD3 rounded style */
|
||||
.ant-btn {
|
||||
border-radius: 24px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ant-btn .anticon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover {
|
||||
background: #45a049;
|
||||
border-color: #45a049;
|
||||
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
/* Ant Design Input - Match MD3 style */
|
||||
.ant-input,
|
||||
.ant-input-password,
|
||||
.ant-select-selector {
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ant-input:focus,
|
||||
.ant-input-password:focus,
|
||||
.ant-select-focused .ant-select-selector {
|
||||
border-color: var(--md-sys-color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
/* Ant Design Modal - Match MD3 style */
|
||||
.ant-modal-content {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
/* Ant Design Table - Match current style */
|
||||
.ant-table {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: #f5f7fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Ant Design Tabs */
|
||||
.ant-tabs {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
background: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
/* Ant Design Tag - Match current style */
|
||||
.ant-tag {
|
||||
border-radius: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Ant Design Progress */
|
||||
.ant-progress-success-bg,
|
||||
.ant-progress-bg {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
/* Ant Design Descriptions */
|
||||
.ant-descriptions-bordered .ant-descriptions-item-label {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* Ant Design Statistic */
|
||||
.ant-statistic-title {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
/* Ant Design Drawer */
|
||||
.ant-drawer-content {
|
||||
border-radius: 16px 0 0 16px;
|
||||
}
|
||||
|
||||
.ant-drawer-header {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Ant Design Alert - Match current style */
|
||||
.ant-alert {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Ant Design Pagination */
|
||||
.ant-pagination-item-active {
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.ant-pagination-item-active a {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
/* Responsive utilities for Ant Design */
|
||||
@media (max-width: 768px) {
|
||||
.ant-modal {
|
||||
max-width: 100vw !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ant-drawer-content-wrapper {
|
||||
width: 280px !important;
|
||||
}
|
||||
|
||||
/* 移动端表格优化 */
|
||||
.ant-table {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 移动端表单优化 */
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ant-form-item-label > label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 移动端卡片优化 */
|
||||
.ant-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 移动端按钮优化 */
|
||||
.ant-btn {
|
||||
height: 36px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-btn-lg {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* 移动端描述列表优化 */
|
||||
.ant-descriptions-item-label,
|
||||
.ant-descriptions-item-content {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏手机优化 */
|
||||
@media (max-width: 576px) {
|
||||
/* 更小的内边距 */
|
||||
.ant-card-head {
|
||||
padding: 10px 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* 更小的表格 */
|
||||
.ant-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 更小的按钮 */
|
||||
.ant-btn {
|
||||
height: 32px;
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-btn-lg {
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Tag 优化 */
|
||||
.ant-tag {
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
/* 选择器优化 */
|
||||
.ant-select {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-select-selection-item {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 横屏优化 */
|
||||
@media (max-height: 600px) and (orientation: landscape) {
|
||||
.ant-modal-body {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板优化 */
|
||||
@media (min-width: 768px) and (max-width: 992px) {
|
||||
.ant-card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user