1

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=yes, viewport-fit=cover">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

src/assets/styles/element-ui.scss

@@ -90,3 +90,447 @@
   .el-submenu__icon-arrow {
   display: none;
 }
+
+// 移动端 Element UI 组件优化
+@media (max-width: 768px) {
+  // 表格优化
+  .el-table {
+    font-size: 12px;
+    
+    .el-table__header-wrapper,
+    .el-table__body-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    
+    th,
+    td {
+      padding: 8px 5px !important;
+      font-size: 12px;
+    }
+    
+    .el-table__cell {
+      padding: 8px 5px !important;
+    }
+    
+    // 操作列按钮优化
+    .el-button {
+      padding: 5px 8px;
+      font-size: 12px;
+      margin: 2px;
+      
+      &.el-button--mini {
+        padding: 4px 6px;
+        font-size: 11px;
+      }
+    }
+  }
+
+  // 表格工具栏优化
+  .el-table__header-wrapper {
+    .el-table__header {
+      th {
+        font-size: 12px;
+        font-weight: 600;
+      }
+    }
+  }
+
+  // 表单优化
+  .el-form {
+    .el-form-item {
+      margin-bottom: 18px;
+    }
+    
+    .el-form-item__label {
+      font-size: 14px;
+      line-height: 1.5;
+      padding-bottom: 5px;
+      width: 100% !important;
+      text-align: left !important;
+    }
+    
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+    
+    // 表单项内联优化
+    .el-form-item--mini,
+    .el-form-item--small {
+      .el-form-item__label {
+        font-size: 13px;
+      }
+    }
+  }
+
+  // 输入框优化
+  .el-input {
+    .el-input__inner {
+      font-size: 16px; // 防止iOS自动缩放
+      height: 44px; // 增大触摸目标
+      line-height: 44px;
+    }
+  }
+
+  // 选择器优化
+  .el-select {
+    width: 100%;
+    
+    .el-input__inner {
+      font-size: 16px;
+      height: 44px;
+      line-height: 44px;
+    }
+  }
+
+  // 日期选择器优化
+  .el-date-editor {
+    width: 100% !important;
+    
+    .el-input__inner {
+      font-size: 16px;
+      height: 44px;
+      line-height: 44px;
+    }
+  }
+
+  // 按钮优化
+  .el-button {
+    min-height: 44px; // 增大触摸目标
+    padding: 10px 15px;
+    font-size: 14px;
+    
+    &.el-button--mini {
+      min-height: 36px;
+      padding: 6px 10px;
+      font-size: 12px;
+    }
+    
+    &.el-button--small {
+      min-height: 40px;
+      padding: 8px 12px;
+      font-size: 13px;
+    }
+  }
+
+  // 对话框优化
+  .el-dialog {
+    width: 95% !important;
+    margin: 5vh auto !important;
+    border-radius: 8px;
+    
+    .el-dialog__header {
+      padding: 15px;
+      font-size: 16px;
+    }
+    
+    .el-dialog__body {
+      padding: 15px;
+      max-height: calc(90vh - 120px);
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    
+    .el-dialog__footer {
+      padding: 10px 15px;
+      
+      .el-button {
+        width: 100%;
+        margin: 5px 0;
+      }
+    }
+  }
+
+  // 消息框优化
+  .el-message-box {
+    width: 90% !important;
+    
+    .el-message-box__content {
+      padding: 15px;
+    }
+    
+    .el-message-box__btns {
+      .el-button {
+        width: 48%;
+        margin: 0 1%;
+      }
+    }
+  }
+
+  // 抽屉优化
+  .el-drawer {
+    width: 85% !important;
+    
+    .el-drawer__header {
+      padding: 15px;
+      font-size: 16px;
+    }
+    
+    .el-drawer__body {
+      padding: 15px;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  // 分页优化
+  .el-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    padding: 10px 0;
+    
+    .el-pagination__sizes,
+    .el-pagination__total,
+    .el-pagination__jump {
+      display: none;
+    }
+    
+    .btn-prev,
+    .btn-next,
+    .el-pager li {
+      min-width: 36px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 13px;
+    }
+  }
+
+  // 标签页优化
+  .el-tabs {
+    .el-tabs__header {
+      margin: 0 0 15px 0;
+    }
+    
+    .el-tabs__nav-wrap {
+      &::after {
+        height: 1px;
+      }
+    }
+    
+    .el-tabs__item {
+      padding: 0 12px;
+      font-size: 14px;
+      height: 44px;
+      line-height: 44px;
+    }
+    
+    .el-tabs__content {
+      padding: 10px 0;
+    }
+  }
+
+  // 卡片优化
+  .el-card {
+    margin-bottom: 10px;
+    border-radius: 8px;
+    
+    .el-card__header {
+      padding: 12px 15px;
+      font-size: 14px;
+      font-weight: 600;
+    }
+    
+    .el-card__body {
+      padding: 15px;
+    }
+  }
+
+  // 步骤条优化
+  .el-steps {
+    .el-step__title {
+      font-size: 12px;
+    }
+    
+    .el-step__description {
+      font-size: 11px;
+    }
+  }
+
+  // 上传组件优化
+  .el-upload {
+    width: 100%;
+    
+    .el-upload-dragger {
+      width: 100%;
+      padding: 20px;
+    }
+  }
+
+  // 标签优化
+  .el-tag {
+    font-size: 12px;
+    padding: 4px 8px;
+    margin: 2px;
+  }
+
+  // 开关优化
+  .el-switch {
+    .el-switch__core {
+      min-width: 44px;
+      height: 24px;
+    }
+  }
+
+  // 单选框组优化
+  .el-radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    
+    .el-radio {
+      margin-right: 0;
+      margin-bottom: 10px;
+    }
+  }
+
+  // 复选框组优化
+  .el-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    
+    .el-checkbox {
+      margin-right: 0;
+      margin-bottom: 10px;
+    }
+  }
+
+  // 级联选择器优化
+  .el-cascader {
+    width: 100%;
+    
+    .el-input__inner {
+      font-size: 16px;
+      height: 44px;
+      line-height: 44px;
+    }
+  }
+
+  // 时间选择器优化
+  .el-time-picker {
+    width: 100%;
+    
+    .el-input__inner {
+      font-size: 16px;
+      height: 44px;
+      line-height: 44px;
+    }
+  }
+
+  // 数字输入框优化
+  .el-input-number {
+    width: 100%;
+    
+    .el-input__inner {
+      font-size: 16px;
+      height: 44px;
+      line-height: 44px;
+    }
+  }
+
+  // 滑块优化
+  .el-slider {
+    margin: 15px 0;
+    
+    .el-slider__button {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  // 评分优化
+  .el-rate {
+    .el-rate__item {
+      font-size: 20px;
+    }
+  }
+
+  // 颜色选择器优化
+  .el-color-picker {
+    .el-color-picker__trigger {
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  // 穿梭框优化
+  .el-transfer {
+    .el-transfer-panel {
+      width: 45%;
+    }
+  }
+
+  // 树形控件优化
+  .el-tree {
+    .el-tree-node__content {
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+
+  // 折叠面板优化
+  .el-collapse {
+    .el-collapse-item__header {
+      font-size: 14px;
+      height: 44px;
+      line-height: 44px;
+      padding: 0 15px;
+    }
+    
+    .el-collapse-item__content {
+      padding: 15px;
+      font-size: 13px;
+    }
+  }
+
+  // 时间线优化
+  .el-timeline {
+    .el-timeline-item__content {
+      font-size: 13px;
+    }
+  }
+
+  // 描述列表优化
+  .el-descriptions {
+    .el-descriptions__label {
+      font-size: 13px;
+      width: 30%;
+    }
+    
+    .el-descriptions__content {
+      font-size: 13px;
+    }
+  }
+
+  // 空状态优化
+  .el-empty {
+    padding: 20px;
+    
+    .el-empty__description {
+      font-size: 13px;
+    }
+  }
+
+  // 骨架屏优化
+  .el-skeleton {
+    .el-skeleton__item {
+      margin-bottom: 10px;
+    }
+  }
+
+  // 结果页优化
+  .el-result {
+    padding: 20px;
+    
+    .el-result__title {
+      font-size: 16px;
+    }
+    
+    .el-result__subtitle {
+      font-size: 13px;
+    }
+  }
+}

src/assets/styles/index.scss

@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './mobile.scss';
 
 body {
   height: 100%;
@@ -122,6 +123,10 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  
+  @media (max-width: 768px) {
+    padding: 10px;
+  }
 }
 
 .components-container {
@@ -176,3 +181,214 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+// 移动端响应式优化
+@media (max-width: 768px) {
+  // 全局容器优化
+  .app-container {
+    padding: 10px !important;
+  }
+
+  .components-container {
+    margin: 15px 10px !important;
+  }
+
+  // 表单优化
+  .el-form {
+    .el-form-item {
+      margin-bottom: 18px;
+    }
+    
+    .el-form-item__label {
+      font-size: 14px;
+      padding-bottom: 5px;
+    }
+    
+    .el-input,
+    .el-select,
+    .el-date-picker {
+      width: 100% !important;
+    }
+  }
+
+  // 按钮组优化
+  .el-button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    
+    .el-button {
+      flex: 1;
+      min-width: 80px;
+    }
+  }
+
+  // 对话框优化
+  .el-dialog {
+    width: 95% !important;
+    margin: 5vh auto !important;
+    max-height: 90vh;
+    overflow-y: auto;
+    
+    .el-dialog__body {
+      padding: 15px;
+      max-height: calc(90vh - 120px);
+      overflow-y: auto;
+    }
+  }
+
+  // 抽屉优化
+  .el-drawer {
+    width: 85% !important;
+  }
+
+  // 分页优化
+  .pagination-container {
+    padding: 10px 0;
+    
+    .el-pagination {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 5px;
+      
+      .el-pagination__sizes,
+      .el-pagination__total,
+      .el-pagination__jump {
+        display: none; // 移动端隐藏部分分页信息
+      }
+    }
+  }
+
+  // 卡片优化
+  .el-card {
+    margin-bottom: 10px;
+    
+    .el-card__header {
+      padding: 12px 15px;
+      font-size: 14px;
+    }
+    
+    .el-card__body {
+      padding: 15px;
+    }
+  }
+
+  // 标签页优化
+  .el-tabs {
+    .el-tabs__header {
+      margin: 0 0 15px 0;
+    }
+    
+    .el-tabs__item {
+      padding: 0 12px;
+      font-size: 14px;
+    }
+  }
+
+  // 表格容器优化
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    
+    .el-table {
+      min-width: 600px; // 保持最小宽度，允许横向滚动
+    }
+  }
+
+  // 搜索表单优化
+  .search-form {
+    .el-form-item {
+      width: 100% !important;
+      margin-right: 0 !important;
+    }
+  }
+
+  // 操作按钮区域优化
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 15px;
+    
+    .el-button {
+      flex: 1;
+      min-width: 80px;
+    }
+  }
+
+  // 文本溢出处理
+  .text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 触摸优化
+  * {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+  }
+  
+  // 移动端卡片列表优化
+  .mobile-card-list {
+    background: #f5f7fa;
+    padding: 12px;
+  }
+  
+  // 移动端搜索表单优化
+  .mobile-search-form {
+    .search-bar {
+      background: #fff;
+      border-radius: 8px;
+      margin-bottom: 12px;
+    }
+  }
+  
+  // 移动端按钮组优化
+  .mobile-button-group {
+    .mobile-buttons {
+      background: #fff;
+      border-radius: 8px;
+      margin-bottom: 12px;
+    }
+  }
+  
+  // 移动端表格容器优化
+  .table-container {
+    @media (max-width: 768px) {
+      .el-table {
+        display: none; // 移动端隐藏表格，使用卡片视图
+      }
+    }
+  }
+
+  // 输入框优化（防止iOS自动缩放）
+  input[type="text"],
+  input[type="password"],
+  input[type="number"],
+  input[type="email"],
+  input[type="tel"],
+  textarea,
+  select {
+    font-size: 16px !important;
+  }
+
+  // 禁用文本选择（移动端长按优化）
+  .no-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+}
+
+// 平板设备优化
+@media (min-width: 769px) and (max-width: 1024px) {
+  .app-container {
+    padding: 15px !important;
+  }
+
+  .components-container {
+    margin: 20px 30px !important;
+  }
+}

src/assets/styles/mobile.scss

@@ -0,0 +1,394 @@
+/**
+ * 移动端专用样式
+ */
+
+// 移动端全局优化
+@media (max-width: 768px) {
+  // 页面容器
+  .app-container {
+    padding: 12px !important;
+    background: #f5f7fa;
+    min-height: calc(100vh - 48px - 60px); // 减去头部和底部导航
+  }
+
+  // 卡片样式
+  .el-card {
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    margin-bottom: 12px;
+    border: none;
+    
+    .el-card__header {
+      padding: 16px;
+      font-size: 16px;
+      font-weight: 600;
+      border-bottom: 1px solid #f0f0f0;
+    }
+    
+    .el-card__body {
+      padding: 16px;
+    }
+  }
+
+  // 列表项优化
+  .el-list-item {
+    padding: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  // 分割线优化
+  .el-divider {
+    margin: 16px 0;
+  }
+
+  // 标签优化
+  .el-tag {
+    font-size: 12px;
+    padding: 4px 10px;
+    border-radius: 12px;
+    margin: 2px;
+  }
+
+  // 徽章优化
+  .el-badge {
+    .el-badge__content {
+      font-size: 10px;
+      padding: 0 4px;
+      height: 16px;
+      line-height: 16px;
+      min-width: 16px;
+    }
+  }
+
+  // 步骤条优化
+  .el-steps {
+    .el-step__title {
+      font-size: 12px;
+    }
+    
+    .el-step__description {
+      font-size: 11px;
+    }
+  }
+
+  // 时间线优化
+  .el-timeline {
+    padding-left: 20px;
+    
+    .el-timeline-item__node {
+      width: 12px;
+      height: 12px;
+    }
+    
+    .el-timeline-item__content {
+      font-size: 13px;
+    }
+  }
+
+  // 描述列表优化
+  .el-descriptions {
+    .el-descriptions__label {
+      width: 35%;
+      font-size: 13px;
+      color: #909399;
+    }
+    
+    .el-descriptions__content {
+      font-size: 13px;
+      color: #303133;
+    }
+  }
+
+  // 空状态优化
+  .el-empty {
+    padding: 40px 20px;
+    
+    .el-empty__image {
+      width: 120px;
+      height: 120px;
+    }
+    
+    .el-empty__description {
+      font-size: 14px;
+      color: #909399;
+      margin-top: 16px;
+    }
+  }
+
+  // 骨架屏优化
+  .el-skeleton {
+    padding: 16px;
+    
+    .el-skeleton__item {
+      margin-bottom: 12px;
+      border-radius: 4px;
+    }
+  }
+
+  // 结果页优化
+  .el-result {
+    padding: 30px 20px;
+    
+    .el-result__icon {
+      font-size: 60px;
+    }
+    
+    .el-result__title {
+      font-size: 18px;
+      margin-top: 20px;
+    }
+    
+    .el-result__subtitle {
+      font-size: 14px;
+      margin-top: 12px;
+    }
+  }
+
+  // 加载优化
+  .el-loading-mask {
+    border-radius: 8px;
+  }
+
+  // 消息提示优化
+  .el-message {
+    min-width: auto;
+    width: 90%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 8px;
+    padding: 12px 16px;
+    
+    .el-message__content {
+      font-size: 14px;
+    }
+  }
+
+  // 通知优化
+  .el-notification {
+    width: 90%;
+    border-radius: 8px;
+    padding: 16px;
+    
+    .el-notification__title {
+      font-size: 15px;
+    }
+    
+    .el-notification__content {
+      font-size: 13px;
+      margin-top: 8px;
+    }
+  }
+
+  // 弹出层优化
+  .el-popover {
+    border-radius: 8px;
+    padding: 12px;
+    max-width: 90vw;
+  }
+
+  // 工具提示优化
+  .el-tooltip__popper {
+    font-size: 12px;
+    padding: 8px 12px;
+    border-radius: 6px;
+  }
+
+  // 下拉菜单优化
+  .el-dropdown-menu {
+    border-radius: 8px;
+    padding: 8px 0;
+    
+    .el-dropdown-menu__item {
+      padding: 12px 20px;
+      font-size: 14px;
+      
+      &:hover {
+        background: #f5f7fa;
+      }
+    }
+  }
+
+  // 选择器下拉优化
+  .el-select-dropdown {
+    border-radius: 8px;
+    
+    .el-select-dropdown__item {
+      padding: 12px 20px;
+      font-size: 14px;
+    }
+  }
+
+  // 日期选择器优化
+  .el-picker-panel {
+    width: 95%;
+    left: 2.5% !important;
+    border-radius: 8px;
+    
+    .el-date-picker__header {
+      padding: 12px 16px;
+    }
+    
+    .el-picker-panel__content {
+      padding: 8px;
+    }
+  }
+
+  // 级联选择器优化
+  .el-cascader-menus {
+    border-radius: 8px;
+    
+    .el-cascader-menu {
+      min-width: 120px;
+    }
+  }
+
+  // 穿梭框优化
+  .el-transfer {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    
+    .el-transfer-panel {
+      width: 100%;
+      border-radius: 8px;
+    }
+  }
+
+  // 树形控件优化
+  .el-tree {
+    .el-tree-node__content {
+      height: 44px;
+      padding: 0 12px;
+      
+      &:hover {
+        background: #f5f7fa;
+      }
+    }
+    
+    .el-tree-node__label {
+      font-size: 14px;
+    }
+  }
+
+  // 折叠面板优化
+  .el-collapse {
+    border: none;
+    
+    .el-collapse-item {
+      margin-bottom: 12px;
+      border: 1px solid #e4e7ed;
+      border-radius: 8px;
+      overflow: hidden;
+      
+      .el-collapse-item__header {
+        padding: 16px;
+        font-size: 15px;
+        font-weight: 500;
+      }
+      
+      .el-collapse-item__content {
+        padding: 16px;
+        font-size: 14px;
+      }
+    }
+  }
+
+  // 进度条优化
+  .el-progress {
+    .el-progress__text {
+      font-size: 12px;
+    }
+  }
+
+  // 滑块优化
+  .el-slider {
+    margin: 20px 0;
+    
+    .el-slider__button {
+      width: 20px;
+      height: 20px;
+      border: 2px solid #409eff;
+    }
+  }
+
+  // 评分优化
+  .el-rate {
+    .el-rate__item {
+      font-size: 24px;
+      margin-right: 8px;
+    }
+  }
+
+  // 颜色选择器优化
+  .el-color-picker {
+    .el-color-picker__trigger {
+      width: 50px;
+      height: 50px;
+      border-radius: 8px;
+    }
+  }
+
+  // 上传组件优化
+  .el-upload {
+    width: 100%;
+    
+    .el-upload-dragger {
+      width: 100%;
+      padding: 30px;
+      border-radius: 8px;
+    }
+  }
+
+  // 图片预览优化
+  .el-image-viewer__wrapper {
+    .el-image-viewer__canvas {
+      img {
+        max-width: 90vw;
+        max-height: 90vh;
+      }
+    }
+  }
+
+  // 抽屉优化
+  .el-drawer {
+    .el-drawer__header {
+      padding: 20px;
+      border-bottom: 1px solid #e4e7ed;
+      
+      .el-drawer__title {
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
+    
+    .el-drawer__body {
+      padding: 20px;
+    }
+  }
+
+  // 固定定位元素优化（适配安全区域）
+  .fixed-bottom {
+    bottom: env(safe-area-inset-bottom);
+  }
+  
+  .fixed-top {
+    top: env(safe-area-inset-top);
+  }
+}
+
+// 平板设备优化
+@media (min-width: 769px) and (max-width: 1024px) {
+  .app-container {
+    padding: 16px !important;
+  }
+  
+  .el-card {
+    border-radius: 10px;
+    margin-bottom: 16px;
+  }
+}
+

src/assets/styles/ruoyi.scss

@@ -137,6 +137,68 @@
   .pagination-container .el-pagination > .el-pagination__sizes {
     display: none !important;
   }
+  
+  // 表格移动端优化
+  .el-table {
+    font-size: 12px;
+    
+    .el-table__header-wrapper,
+    .el-table__body-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    
+    th, td {
+      padding: 8px 5px !important;
+      font-size: 12px;
+    }
+    
+    .el-table__cell {
+      padding: 8px 5px !important;
+    }
+  }
+  
+  // 表单移动端优化
+  .form-header {
+    font-size: 14px;
+    margin: 5px 5px 15px 5px;
+    padding-bottom: 5px;
+  }
+  
+  // 卡片移动端优化
+  .el-card__header {
+    padding: 10px 12px 5px !important;
+    font-size: 14px;
+  }
+  
+  .el-card__body {
+    padding: 12px 15px 15px 15px !important;
+  }
+  
+  // 按钮组移动端优化
+  .top-right-btn {
+    float: none;
+    margin-bottom: 10px;
+    width: 100%;
+    
+    .el-button {
+      width: 100%;
+      margin-bottom: 8px;
+    }
+  }
+  
+  // 工具类移动端优化
+  .mb20, .mt20, .mr20, .ml20 {
+    margin: 10px !important;
+  }
+  
+  .mb10, .mt10, .mr10, .ml10 {
+    margin: 8px !important;
+  }
+  
+  .mb5, .mt5, .mr5, .ml5 {
+    margin: 5px !important;
+  }
 }
 
 .el-table .fixed-width .el-button--mini {

src/components/MobileBottomNav/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="mobile-bottom-nav" v-if="isMobile && show">
+    <div 
+      v-for="item in navItems" 
+      :key="item.path"
+      class="nav-item"
+      :class="{ 'active': isActive(item.path) }"
+      @click="handleNavClick(item)"
+    >
+      <div class="nav-icon">
+        <i :class="item.icon" v-if="item.icon"></i>
+        <svg-icon :icon-class="item.iconClass" v-else-if="item.iconClass" />
+        <el-badge :value="item.badge" :hidden="!item.badge" v-if="item.badge">
+          <div class="icon-placeholder"></div>
+        </el-badge>
+      </div>
+      <div class="nav-label">{{ item.label }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'MobileBottomNav',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters(['device']),
+    isMobile() {
+      return this.device === 'mobile' || window.innerWidth < 768
+    },
+    navItems() {
+      if (this.items && this.items.length > 0) {
+        return this.items
+      }
+      // 默认导航项 - 从路由中获取
+      const routes = this.$store?.state?.permission?.routes || []
+      const mainRoutes = routes.filter(route => route.meta && route.meta.title && !route.hidden)
+      
+      if (mainRoutes.length > 0) {
+        return mainRoutes.slice(0, 5).map(route => ({
+          path: route.path,
+          label: route.meta.title,
+          icon: route.meta.icon || 'el-icon-menu',
+          iconClass: route.meta.icon
+        }))
+      }
+      
+      // 如果没有路由，返回默认导航
+      return [
+        {
+          path: '/index',
+          label: '首页',
+          icon: 'el-icon-s-home'
+        }
+      ]
+    }
+  },
+  methods: {
+    isActive(path) {
+      return this.$route.path.startsWith(path)
+    },
+    handleNavClick(item) {
+      if (item.handler) {
+        item.handler()
+      } else if (item.path) {
+        this.$router.push(item.path)
+      }
+      this.$emit('nav-click', item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  background: #fff;
+  border-top: 1px solid #e4e7ed;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  z-index: 1000;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+  padding-bottom: env(safe-area-inset-bottom);
+  
+  .nav-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 0;
+    cursor: pointer;
+    transition: all 0.3s;
+    -webkit-tap-highlight-color: transparent;
+    
+    .nav-icon {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 4px;
+      position: relative;
+      
+      i, .svg-icon {
+        font-size: 22px;
+        color: #909399;
+        transition: all 0.3s;
+      }
+      
+      .icon-placeholder {
+        width: 22px;
+        height: 22px;
+      }
+    }
+    
+    .nav-label {
+      font-size: 11px;
+      color: #909399;
+      transition: all 0.3s;
+    }
+    
+    &.active {
+      .nav-icon {
+        i, .svg-icon {
+          color: #409eff;
+          font-size: 24px;
+        }
+      }
+      
+      .nav-label {
+        color: #409eff;
+        font-weight: 600;
+      }
+    }
+    
+    &:active {
+      transform: scale(0.95);
+      opacity: 0.8;
+    }
+  }
+}
+
+// 桌面端隐藏
+@media (min-width: 769px) {
+  .mobile-bottom-nav {
+    display: none;
+  }
+}
+
+// 为底部导航预留空间
+@media (max-width: 768px) {
+  .app-main {
+    padding-bottom: 60px !important;
+  }
+}
+</style>
+

src/components/MobileButtonGroup/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="mobile-button-group" :class="{ 'sticky': sticky }">
+    <!-- 移动端按钮组 -->
+    <div v-if="isMobile" class="mobile-buttons">
+      <!-- 主要操作按钮 -->
+      <div class="primary-actions" v-if="primaryButtons.length > 0">
+        <el-button
+          v-for="btn in primaryButtons"
+          :key="btn.key || btn.label"
+          :type="btn.type || 'primary'"
+          :size="btn.size || 'medium'"
+          :icon="btn.icon"
+          :disabled="btn.disabled"
+          :loading="btn.loading"
+          @click="handleClick(btn)"
+          class="action-btn"
+        >
+          {{ btn.label }}
+        </el-button>
+      </div>
+      
+      <!-- 更多操作下拉菜单 -->
+      <el-dropdown 
+        v-if="moreButtons.length > 0"
+        trigger="click"
+        placement="top-end"
+        @command="handleCommand"
+      >
+        <el-button 
+          type="default" 
+          size="medium"
+          icon="el-icon-more"
+          class="more-btn"
+        >
+          更多
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="btn in moreButtons"
+            :key="btn.key || btn.label"
+            :command="btn.key || btn.label"
+            :disabled="btn.disabled"
+            :divided="btn.divided"
+          >
+            <i :class="btn.icon" v-if="btn.icon"></i>
+            {{ btn.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    
+    <!-- 桌面端按钮组 -->
+    <div v-else class="desktop-buttons">
+      <slot>
+        <el-button
+          v-for="btn in allButtons"
+          :key="btn.key || btn.label"
+          :type="btn.type || 'default'"
+          :size="btn.size || 'mini'"
+          :icon="btn.icon"
+          :disabled="btn.disabled"
+          :loading="btn.loading"
+          :plain="btn.plain"
+          @click="handleClick(btn)"
+        >
+          {{ btn.label }}
+        </el-button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'MobileButtonGroup',
+  props: {
+    buttons: {
+      type: Array,
+      default: () => []
+    },
+    primaryCount: {
+      type: Number,
+      default: 2
+    },
+    sticky: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters(['device']),
+    isMobile() {
+      return this.device === 'mobile' || window.innerWidth < 768
+    },
+    allButtons() {
+      return this.buttons || []
+    },
+    primaryButtons() {
+      return this.allButtons.slice(0, this.primaryCount).filter(btn => !btn.hide)
+    },
+    moreButtons() {
+      return this.allButtons.slice(this.primaryCount).filter(btn => !btn.hide)
+    }
+  },
+  methods: {
+    handleClick(btn) {
+      if (btn.handler) {
+        btn.handler()
+      }
+      this.$emit('button-click', btn)
+    },
+    handleCommand(command) {
+      const btn = this.moreButtons.find(b => (b.key || b.label) === command)
+      if (btn) {
+        this.handleClick(btn)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-button-group {
+  width: 100%;
+  
+  &.sticky {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: #fff;
+    padding: 12px;
+    margin: -12px -12px 12px -12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.mobile-buttons {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  
+  .primary-actions {
+    flex: 1;
+    display: flex;
+    gap: 12px;
+    
+    .action-btn {
+      flex: 1;
+      height: 44px;
+      font-size: 15px;
+      border-radius: 8px;
+    }
+  }
+  
+  .more-btn {
+    flex-shrink: 0;
+    width: 60px;
+    height: 44px;
+    padding: 0;
+    border-radius: 8px;
+  }
+}
+
+.desktop-buttons {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+// 桌面端隐藏移动端组件
+@media (min-width: 769px) {
+  .mobile-buttons {
+    display: none;
+  }
+}
+
+// 移动端隐藏桌面端组件
+@media (max-width: 768px) {
+  .desktop-buttons {
+    display: none;
+  }
+}
+</style>
+

src/components/MobileSearchForm/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="mobile-search-form" :class="{ 'expanded': expanded }">
+    <!-- 移动端折叠搜索 -->
+    <div v-if="isMobile" class="mobile-search-wrapper">
+      <!-- 搜索按钮栏 -->
+      <div class="search-bar" v-if="!expanded">
+        <el-input
+          v-model="quickSearch"
+          placeholder="快速搜索..."
+          clearable
+          @keyup.enter.native="handleQuickSearch"
+          @clear="handleQuickSearch"
+        >
+          <el-button slot="append" icon="el-icon-search" @click="handleQuickSearch"></el-button>
+        </el-input>
+        <el-button 
+          type="text" 
+          icon="el-icon-setting" 
+          class="filter-btn"
+          @click="expanded = true"
+        >
+          筛选
+        </el-button>
+      </div>
+      
+      <!-- 展开的搜索表单 -->
+      <div class="expanded-form" v-if="expanded">
+        <div class="form-header">
+          <span class="form-title">筛选条件</span>
+          <el-button 
+            type="text" 
+            icon="el-icon-close" 
+            @click="expanded = false"
+            class="close-btn"
+          ></el-button>
+        </div>
+        
+        <div class="form-content">
+          <slot name="form" :expanded="expanded">
+            <el-form 
+              :model="formData" 
+              label-width="80px"
+              label-position="top"
+            >
+              <slot></slot>
+            </el-form>
+          </slot>
+        </div>
+        
+        <div class="form-footer">
+          <el-button @click="handleReset">重置</el-button>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 桌面端正常显示 -->
+    <div v-else class="desktop-search-wrapper">
+      <slot name="form" :expanded="true">
+        <el-form 
+          :model="formData" 
+          :inline="inline"
+          :label-width="labelWidth"
+        >
+          <slot></slot>
+        </el-form>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'MobileSearchForm',
+  props: {
+    inline: {
+      type: Boolean,
+      default: true
+    },
+    labelWidth: {
+      type: String,
+      default: '68px'
+    },
+    model: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      expanded: false,
+      quickSearch: '',
+      formData: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['device']),
+    isMobile() {
+      return this.device === 'mobile' || window.innerWidth < 768
+    }
+  },
+  watch: {
+    model: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.formData = { ...val }
+      }
+    }
+  },
+  methods: {
+    handleQuickSearch() {
+      this.$emit('quick-search', this.quickSearch)
+    },
+    handleSearch() {
+      this.$emit('search', this.formData)
+      this.expanded = false
+    },
+    handleReset() {
+      this.$emit('reset')
+      this.formData = {}
+      this.quickSearch = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-search-form {
+  width: 100%;
+}
+
+.mobile-search-wrapper {
+  .search-bar {
+    display: flex;
+    gap: 8px;
+    padding: 12px;
+    background: #fff;
+    border-bottom: 1px solid #e4e7ed;
+    
+    .el-input {
+      flex: 1;
+    }
+    
+    .filter-btn {
+      flex-shrink: 0;
+      padding: 0 12px;
+      font-size: 14px;
+      min-width: 60px;
+    }
+  }
+  
+  .expanded-form {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    z-index: 2000;
+    display: flex;
+    flex-direction: column;
+    animation: slideUp 0.3s ease;
+    
+    .form-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      border-bottom: 1px solid #e4e7ed;
+      background: #fff;
+      
+      .form-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+      
+      .close-btn {
+        font-size: 20px;
+        color: #909399;
+      }
+    }
+    
+    .form-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      -webkit-overflow-scrolling: touch;
+      
+      ::v-deep .el-form-item {
+        margin-bottom: 20px;
+        
+        .el-form-item__label {
+          font-size: 14px;
+          color: #606266;
+          padding-bottom: 8px;
+        }
+        
+        .el-input,
+        .el-select,
+        .el-date-picker {
+          width: 100%;
+        }
+      }
+    }
+    
+    .form-footer {
+      display: flex;
+      gap: 12px;
+      padding: 16px;
+      border-top: 1px solid #e4e7ed;
+      background: #fff;
+      
+      .el-button {
+        flex: 1;
+        height: 44px;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+.desktop-search-wrapper {
+  ::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 18px;
+    }
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+// 桌面端隐藏移动端组件
+@media (min-width: 769px) {
+  .mobile-search-wrapper {
+    display: none;
+  }
+}
+
+// 移动端隐藏桌面端组件
+@media (max-width: 768px) {
+  .desktop-search-wrapper {
+    display: none;
+  }
+}
+</style>
+

src/components/MobileTable/index.vue

@@ -0,0 +1,403 @@
+<template>
+  <div class="mobile-table-container">
+    <!-- 移动端卡片式列表 -->
+    <div v-if="isMobile" class="mobile-card-list">
+      <div 
+        v-for="(row, index) in data" 
+        :key="getRowKey(row, index)"
+        class="mobile-card-item"
+        :class="{ 'selected': isSelected(row) }"
+        @click="handleCardClick(row, index)"
+      >
+        <!-- 卡片头部 -->
+        <div class="card-header" v-if="showHeader">
+          <div class="card-title">
+            <slot name="header" :row="row" :index="index">
+              {{ getHeaderText(row) }}
+            </slot>
+          </div>
+          <div class="card-actions" v-if="showSelection || showActions">
+            <el-checkbox 
+              v-if="showSelection"
+              :value="isSelected(row)"
+              @click.stop="handleSelect(row)"
+              @change="handleSelectChange(row, $event)"
+            />
+            <el-dropdown 
+              v-if="showActions"
+              trigger="click"
+              @command="(cmd) => handleAction(cmd, row)"
+              @click.stop
+            >
+              <span class="action-btn" @click.stop>
+                <i class="el-icon-more"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <slot name="actions" :row="row" :index="index">
+                  <el-dropdown-item 
+                    v-for="action in actions"
+                    :key="action.key"
+                    :command="action.key"
+                    :disabled="action.disabled && action.disabled(row)"
+                  >
+                    <i :class="action.icon" v-if="action.icon"></i>
+                    {{ action.label }}
+                  </el-dropdown-item>
+                </slot>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
+        
+        <!-- 卡片内容 -->
+        <div class="card-content">
+          <slot name="content" :row="row" :index="index">
+            <div 
+              v-for="column in columns" 
+              :key="column.prop || column.key"
+              class="card-field"
+              v-if="column.visible !== false"
+            >
+              <div class="field-label">{{ column.label }}</div>
+              <div class="field-value">
+                <slot 
+                  :name="`column-${column.prop || column.key}`"
+                  :row="row"
+                  :column="column"
+                  :value="getFieldValue(row, column)"
+                >
+                  <dict-tag 
+                    v-if="column.dictType"
+                    :options="getDictOptions(column.dictType)"
+                    :value="getFieldValue(row, column)"
+                  />
+                  <span v-else-if="column.type === 'switch'">
+                    <el-switch 
+                      :value="getFieldValue(row, column)"
+                      :active-value="column.activeValue"
+                      :inactive-value="column.inactiveValue"
+                      @change="(val) => handleSwitchChange(row, column, val)"
+                      disabled
+                    />
+                  </span>
+                  <span v-else>{{ formatValue(getFieldValue(row, column), column) }}</span>
+                </slot>
+              </div>
+            </div>
+          </slot>
+        </div>
+        
+        <!-- 卡片底部操作 -->
+        <div class="card-footer" v-if="showFooter">
+          <slot name="footer" :row="row" :index="index">
+            <el-button 
+              v-for="btn in footerButtons"
+              :key="btn.key"
+              :type="btn.type || 'text'"
+              :size="btn.size || 'small'"
+              :icon="btn.icon"
+              :disabled="btn.disabled && btn.disabled(row)"
+              @click.stop="handleButtonClick(btn, row)"
+            >
+              {{ btn.label }}
+            </el-button>
+          </slot>
+        </div>
+      </div>
+      
+      <!-- 空状态 -->
+      <el-empty 
+        v-if="!data || data.length === 0"
+        description="暂无数据"
+        :image-size="100"
+      />
+    </div>
+    
+    <!-- 桌面端表格 -->
+    <el-table 
+      v-else
+      v-bind="$attrs"
+      :data="data"
+      v-on="$listeners"
+    >
+      <slot></slot>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'MobileTable',
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    rowKey: {
+      type: [String, Function],
+      default: 'id'
+    },
+    showSelection: {
+      type: Boolean,
+      default: false
+    },
+    showActions: {
+      type: Boolean,
+      default: false
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    showFooter: {
+      type: Boolean,
+      default: true
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    footerButtons: {
+      type: Array,
+      default: () => []
+    },
+    selectedRows: {
+      type: Array,
+      default: () => []
+    },
+    headerField: {
+      type: String,
+      default: 'name'
+    }
+  },
+  computed: {
+    ...mapGetters(['device']),
+    isMobile() {
+      return this.device === 'mobile' || window.innerWidth < 768
+    }
+  },
+  methods: {
+    getRowKey(row, index) {
+      if (typeof this.rowKey === 'function') {
+        return this.rowKey(row, index)
+      }
+      return row[this.rowKey] || index
+    },
+    isSelected(row) {
+      if (!this.showSelection || !this.selectedRows) return false
+      const key = this.getRowKey(row)
+      return this.selectedRows.some(r => this.getRowKey(r) === key)
+    },
+    handleSelect(row) {
+      this.$emit('select', row)
+    },
+    handleSelectChange(row, selected) {
+      this.$emit('selection-change', row, selected)
+    },
+    handleCardClick(row, index) {
+      this.$emit('row-click', row, index)
+    },
+    handleAction(command, row) {
+      this.$emit('action', command, row)
+    },
+    handleButtonClick(btn, row) {
+      if (btn.handler) {
+        btn.handler(row)
+      }
+      this.$emit('button-click', btn.key, row)
+    },
+    getFieldValue(row, column) {
+      if (column.formatter) {
+        return column.formatter(row, column, row[column.prop], index)
+      }
+      if (typeof column.prop === 'function') {
+        return column.prop(row)
+      }
+      return column.prop ? this.getNestedValue(row, column.prop) : ''
+    },
+    getNestedValue(obj, path) {
+      return path.split('.').reduce((o, p) => o && o[p], obj)
+    },
+    formatValue(value, column) {
+      if (value === null || value === undefined) return '-'
+      if (column.formatter) {
+        return column.formatter(null, column, value)
+      }
+      return value
+    },
+    getHeaderText(row) {
+      if (this.headerField) {
+        return this.getNestedValue(row, this.headerField) || '未命名'
+      }
+      return row.name || row.title || '未命名'
+    },
+    getDictOptions(dictType) {
+      // 这里需要根据实际的字典获取方式来实现
+      // 可以通过 this.$store 或 this.$parent 获取字典数据
+      try {
+        const dictData = this.$store?.state?.dict?.dict || {}
+        return dictData[dictType] || []
+      } catch (e) {
+        return []
+      }
+    },
+    handleSwitchChange(row, column, value) {
+      this.$emit('switch-change', row, column, value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-table-container {
+  width: 100%;
+}
+
+.mobile-card-list {
+  padding: 10px;
+  background: #f5f5f5;
+  min-height: 200px;
+}
+
+.mobile-card-item {
+  background: #fff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+  }
+  
+  &.selected {
+    border: 2px solid #409eff;
+    background: #f0f9ff;
+  }
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+  
+  .card-title {
+    flex: 1;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .card-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+    
+    .action-btn {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background: #f5f5f5;
+      color: #606266;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      &:active {
+        background: #e4e7ed;
+      }
+      
+      i {
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+.card-content {
+  .card-field {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 12px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .field-label {
+      font-size: 13px;
+      color: #909399;
+      min-width: 80px;
+      flex-shrink: 0;
+      margin-right: 12px;
+    }
+    
+    .field-value {
+      flex: 1;
+      font-size: 14px;
+      color: #303133;
+      text-align: right;
+      word-break: break-all;
+      
+      ::v-deep .el-tag {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.card-footer {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  
+  ::v-deep .el-button {
+    flex: 1;
+    min-width: 0;
+    padding: 8px 12px;
+  }
+}
+
+// 桌面端隐藏
+@media (min-width: 769px) {
+  .mobile-card-list {
+    display: none;
+  }
+}
+
+// 移动端隐藏表格
+@media (max-width: 768px) {
+  ::v-deep .el-table {
+    display: none;
+  }
+}
+</style>
+

src/components/Pagination/index.vue

@@ -42,7 +42,7 @@ export default {
     // 移动端页码按钮的数量端默认值5
     pagerCount: {
       type: Number,
-      default: document.body.clientWidth < 992 ? 5 : 7
+      default: 7
     },
     layout: {
       type: String,
@@ -63,8 +63,19 @@ export default {
   },
   data() {
     return {
+      isMobile: false
     }
   },
+  mounted() {
+    this.isMobile = window.innerWidth < 768
+    if (this.isMobile && this.layout === 'total, sizes, prev, pager, next, jumper') {
+      this.$emit('update:layout', 'prev, pager, next')
+    }
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   computed: {
     currentPage: {
       get() {
@@ -84,6 +95,13 @@ export default {
     }
   },
   methods: {
+    handleResize() {
+      const wasMobile = this.isMobile
+      this.isMobile = window.innerWidth < 768
+      if (wasMobile !== this.isMobile) {
+        this.$forceUpdate()
+      }
+    },
     handleSizeChange(val) {
       if (this.currentPage * val > this.total) {
         this.currentPage = 1
@@ -106,6 +124,33 @@ export default {
 <style scoped>
 .pagination-container {
   background: #fff;
+  
+  @media (max-width: 768px) {
+    padding: 10px 0;
+    
+    ::v-deep .el-pagination {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      gap: 5px;
+      
+      .el-pagination__sizes,
+      .el-pagination__total,
+      .el-pagination__jump {
+        display: none;
+      }
+      
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        min-width: 36px;
+        height: 36px;
+        line-height: 36px;
+        font-size: 13px;
+      }
+    }
+  }
 }
 .pagination-container.hidden {
   display: none;

src/components/RightToolbar/index.vue

@@ -151,4 +151,39 @@ export default {
   background-color: #ccc;
   margin: 3px auto;
 }
+
+// 移动端优化
+@media (max-width: 768px) {
+  .top-right-btn {
+    float: none;
+    margin-bottom: 10px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    gap: 8px;
+    flex-wrap: wrap;
+    
+    .el-button {
+      min-width: 44px;
+      height: 44px;
+      padding: 0;
+      
+      &.el-button--mini {
+        min-width: 40px;
+        height: 40px;
+      }
+    }
+  }
+  
+  ::v-deep .el-dialog {
+    width: 95% !important;
+    margin: 5vh auto !important;
+    
+    .el-transfer {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+  }
+}
 </style>

src/layout/components/AppMain.vue

@@ -51,24 +51,47 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
+  
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 48px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 .app-main:has(.copyright) {
   padding-bottom: 36px;
+  
+  @media (max-width: 768px) {
+    padding-bottom: 30px;
+  }
 }
 
 .fixed-header + .app-main {
   padding-top: 50px;
+  
+  @media (max-width: 768px) {
+    padding-top: 48px;
+  }
 }
 
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
+    
+    @media (max-width: 768px) {
+      min-height: calc(100vh - 48px);
+    }
   }
 
   .fixed-header + .app-main {
     padding-top: 84px;
+    
+    @media (max-width: 768px) {
+      padding-top: 48px;
+    }
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -110,6 +110,12 @@ export default {
   background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
+  // 移动端优化
+  @media (max-width: 768px) {
+    height: 48px;
+    padding: 0 5px;
+  }
+
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -117,19 +123,41 @@ export default {
     cursor: pointer;
     transition: background .3s;
     -webkit-tap-highlight-color:transparent;
+    padding: 0 12px;
+    min-width: 44px; // 增大触摸目标
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media (max-width: 768px) {
+      line-height: 48px;
+      padding: 0 10px;
+    }
 
     &:hover {
       background: rgba(0, 0, 0, .025)
     }
+    
+    &:active {
+      background: rgba(0, 0, 0, .05)
+    }
   }
 
   .breadcrumb-container {
     float: left;
+    
+    @media (max-width: 768px) {
+      display: none; // 移动端隐藏面包屑
+    }
   }
 
   .topmenu-container {
     position: absolute;
     left: 50px;
+    
+    @media (max-width: 768px) {
+      left: 44px;
+    }
   }
 
   .errLog-container {
@@ -141,19 +169,36 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    @media (max-width: 768px) {
+      line-height: 48px;
+      gap: 2px;
+    }
 
     &:focus {
       outline: none;
     }
 
     .right-menu-item {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       padding: 0 8px;
       height: 100%;
+      min-width: 44px; // 增大触摸目标
       font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
 
+      @media (max-width: 768px) {
+        padding: 0 6px;
+        font-size: 16px;
+        min-width: 40px;
+      }
+
       &.hover-effect {
         cursor: pointer;
         transition: background .3s;
@@ -161,6 +206,10 @@ export default {
         &:hover {
           background: rgba(0, 0, 0, .025)
         }
+        
+        &:active {
+          background: rgba(0, 0, 0, .05)
+        }
       }
     }
 
@@ -168,33 +217,71 @@ export default {
       margin-right: 0px;
       padding-right: 0px;
 
+      @media (max-width: 768px) {
+        margin-right: 0;
+      }
+
       .avatar-wrapper {
         margin-top: 10px;
         position: relative;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+        padding: 0 4px;
+        min-height: 44px; // 增大触摸目标
+
+        @media (max-width: 768px) {
+          margin-top: 8px;
+          gap: 4px;
+        }
 
         .user-avatar {
           cursor: pointer;
           width: 30px;
           height: 30px;
           border-radius: 50%;
+          flex-shrink: 0;
+
+          @media (max-width: 768px) {
+            width: 28px;
+            height: 28px;
+          }
         }
 
         .user-nickname{
           position: relative;
-          bottom: 10px;
           font-size: 14px;
           font-weight: bold;
+          white-space: nowrap;
+          max-width: 80px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          @media (max-width: 768px) {
+            font-size: 13px;
+            max-width: 60px;
+            display: none; // 移动端隐藏昵称
+          }
         }
 
         .el-icon-caret-bottom {
           cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
           font-size: 12px;
+          flex-shrink: 0;
+
+          @media (max-width: 768px) {
+            font-size: 10px;
+          }
         }
       }
     }
+    
+    .setting {
+      @media (max-width: 768px) {
+        display: none; // 移动端隐藏设置按钮
+      }
+    }
   }
 }
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -66,6 +66,12 @@ export default {
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   
+  // 移动端优化
+  @media (max-width: 768px) {
+    height: 50px;
+    line-height: 50px;
+  }
+
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
@@ -74,6 +80,10 @@ export default {
     justify-content: center;
     padding: 0 20px;
     
+    @media (max-width: 768px) {
+      padding: 0 15px;
+    }
+
     & .logo-icon {
       display: flex;
       align-items: center;
@@ -87,10 +97,20 @@ export default {
       transition: all 0.3s ease;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       
+      @media (max-width: 768px) {
+        width: 36px;
+        height: 36px;
+        margin-right: 10px;
+      }
+
       i {
         font-size: 22px;
         color: #ffffff;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        
+        @media (max-width: 768px) {
+          font-size: 18px;
+        }
       }
 
       &:hover {
@@ -99,6 +119,10 @@ export default {
         transform: scale(1.05);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       }
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
     & .sidebar-title {
@@ -110,6 +134,10 @@ export default {
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      
+      @media (max-width: 768px) {
+        font-size: 14px;
+      }
     }
   }
 

src/layout/components/TagsView/index.vue

@@ -244,6 +244,14 @@ export default {
   background: #fff;
   border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  
+  // 移动端优化
+  @media (max-width: 768px) {
+    height: 0;
+    overflow: hidden;
+    display: none; // 移动端隐藏标签页
+  }
+  
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -258,11 +266,30 @@ export default {
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      white-space: nowrap;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      @media (max-width: 768px) {
+        max-width: 120px;
+        font-size: 11px;
+        padding: 0 6px;
+      }
+      
       &:first-of-type {
         margin-left: 15px;
+        
+        @media (max-width: 768px) {
+          margin-left: 10px;
+        }
       }
       &:last-of-type {
         margin-right: 15px;
+        
+        @media (max-width: 768px) {
+          margin-right: 10px;
+        }
       }
       &.active {
         background-color: #42b983;
@@ -298,13 +325,39 @@ export default {
     font-weight: 400;
     color: #333;
     box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    min-width: 120px;
+    
+    @media (max-width: 768px) {
+      font-size: 14px;
+      min-width: 140px;
+      padding: 8px 0;
+    }
+    
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
+      min-height: 40px;
+      display: flex;
+      align-items: center;
+      
+      @media (max-width: 768px) {
+        padding: 10px 16px;
+        min-height: 44px;
+      }
+      
       &:hover {
         background: #eee;
       }
+      
+      &:active {
+        background: #ddd;
+      }
+      
+      i {
+        margin-right: 8px;
+        font-size: 14px;
+      }
     }
   }
 }

src/layout/index.vue

@@ -1,20 +1,23 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
+    <sidebar v-if="!sidebar.hide && device !== 'mobile'" class="sidebar-container"/>
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
+    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide, 'mobile-layout': device === 'mobile'}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar @setLayout="setLayout"/>
-        <tags-view v-if="needTagsView"/>
+        <tags-view v-if="needTagsView && device !== 'mobile'"/>
       </div>
       <app-main/>
       <settings ref="settingRef"/>
     </div>
+    <!-- 移动端底部导航 -->
+    <mobile-bottom-nav v-if="device === 'mobile'" />
   </div>
 </template>
 
 <script>
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import MobileBottomNav from '@/components/MobileBottomNav'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
@@ -26,7 +29,8 @@ export default {
     Navbar,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
+    MobileBottomNav
   },
   mixins: [ResizeMixin],
   computed: {
@@ -107,4 +111,40 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+
+  // 移动端优化
+  @media (max-width: 768px) {
+    .app-wrapper {
+      &.mobile {
+        .sidebar-container {
+          display: none; // 移动端完全隐藏侧边栏，使用底部导航
+        }
+      }
+
+      .drawer-bg {
+        display: none; // 移动端不需要遮罩
+      }
+
+      .main-container {
+        margin-left: 0 !important;
+        width: 100%;
+        
+        &.mobile-layout {
+          padding-bottom: 60px; // 为底部导航预留空间
+        }
+      }
+
+      .fixed-header {
+        width: 100% !important;
+        left: 0;
+      }
+      
+      // 移动端隐藏标签页
+      .hasTagsView {
+        .fixed-header + .app-main {
+          padding-top: 48px !important;
+        }
+      }
+    }
+  }
 </style>

src/layout/mixin/ResizeHandler.js

@@ -1,7 +1,7 @@
 import store from '@/store'
 
 const { body } = document
-const WIDTH = 992 // refer to Bootstrap's responsive design
+const WIDTH = 768 // 移动端断点调整为 768px，更符合移动设备标准
 
 export default {
   watch: {

src/main.js

@@ -16,6 +16,7 @@ import { download } from '@/utils/request'
 
 import './assets/icons' // icon
 import './permission' // permission control
+import { initMobile } from '@/utils/mobile' // 移动端初始化
 import { getDicts } from "@/api/system/dict/data"
 import { getConfigKey } from "@/api/system/config"
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi"
@@ -35,6 +36,11 @@ import ImagePreview from "@/components/ImagePreview"
 import DictTag from '@/components/DictTag'
 // 字典数据组件
 import DictData from '@/components/DictData'
+// 移动端组件
+import MobileTable from '@/components/MobileTable'
+import MobileSearchForm from '@/components/MobileSearchForm'
+import MobileButtonGroup from '@/components/MobileButtonGroup'
+import MobileBottomNav from '@/components/MobileBottomNav'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -55,6 +61,11 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+// 移动端组件
+Vue.component('MobileTable', MobileTable)
+Vue.component('MobileSearchForm', MobileSearchForm)
+Vue.component('MobileButtonGroup', MobileButtonGroup)
+Vue.component('MobileBottomNav', MobileBottomNav)
 
 Vue.use(directive)
 Vue.use(plugins)
@@ -75,6 +86,9 @@ Vue.use(Element, {
 
 Vue.config.productionTip = false
 
+// 初始化移动端优化
+initMobile()
+
 new Vue({
   el: '#app',
   router,

src/mixins/mobile.js

@@ -0,0 +1,91 @@
+/**
+ * 移动端混入
+ */
+import { mapGetters } from 'vuex'
+import { isMobile, isIOS, isAndroid, getDeviceType } from '@/utils/mobile'
+
+export default {
+  computed: {
+    ...mapGetters(['device']),
+    $isMobile() {
+      return this.device === 'mobile' || isMobile()
+    },
+    $isIOS() {
+      return isIOS()
+    },
+    $isAndroid() {
+      return isAndroid()
+    },
+    $deviceType() {
+      return getDeviceType()
+    },
+    $isTablet() {
+      return window.innerWidth >= 768 && window.innerWidth < 1024
+    },
+    $isPhone() {
+      return window.innerWidth < 768
+    }
+  },
+  methods: {
+    /**
+     * 移动端提示
+     */
+    $mobileToast(message, type = 'info') {
+      if (this.$isMobile) {
+        this.$message({
+          message,
+          type,
+          duration: 2000,
+          showClose: false
+        })
+      } else {
+        this.$message({
+          message,
+          type
+        })
+      }
+    },
+    /**
+     * 移动端确认对话框
+     */
+    $mobileConfirm(message, title = '提示', options = {}) {
+      return this.$confirm(message, title, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        ...options
+      })
+    },
+    /**
+     * 移动端表格列过滤
+     */
+    $filterMobileColumns(columns) {
+      if (this.$isMobile) {
+        // 移动端只显示重要列
+        return columns.filter(col => {
+          if (col.mobile === false) return false
+          if (col.mobile === true) return true
+          // 默认显示前5列
+          return columns.indexOf(col) < 5
+        })
+      }
+      return columns
+    },
+    /**
+     * 格式化移动端显示值
+     */
+    $formatMobileValue(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '-'
+      }
+      if (column && column.formatter) {
+        return column.formatter(null, column, value)
+      }
+      if (typeof value === 'object') {
+        return JSON.stringify(value)
+      }
+      return String(value)
+    }
+  }
+}
+

src/utils/mobile.js

@@ -0,0 +1,230 @@
+/**
+ * 移动端工具函数
+ */
+
+/**
+ * 检测是否为移动设备
+ */
+export function isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+    window.innerWidth < 768
+}
+
+/**
+ * 检测是否为iOS设备
+ */
+export function isIOS() {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent)
+}
+
+/**
+ * 检测是否为Android设备
+ */
+export function isAndroid() {
+  return /Android/.test(navigator.userAgent)
+}
+
+/**
+ * 获取设备类型
+ */
+export function getDeviceType() {
+  if (isMobile()) {
+    if (isIOS()) return 'ios'
+    if (isAndroid()) return 'android'
+    return 'mobile'
+  }
+  return 'desktop'
+}
+
+/**
+ * 设置移动端视口
+ */
+export function setMobileViewport() {
+  if (isMobile()) {
+    const viewport = document.querySelector('meta[name="viewport"]')
+    if (viewport) {
+      viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=yes, viewport-fit=cover')
+    }
+  }
+}
+
+/**
+ * 防止iOS双击缩放
+ */
+export function preventDoubleTapZoom() {
+  if (isIOS()) {
+    let lastTouchEnd = 0
+    document.addEventListener('touchend', (event) => {
+      const now = Date.now()
+      if (now - lastTouchEnd <= 300) {
+        event.preventDefault()
+      }
+      lastTouchEnd = now
+    }, false)
+  }
+}
+
+/**
+ * 优化移动端滚动
+ */
+export function optimizeMobileScroll() {
+  if (isMobile()) {
+    // 添加平滑滚动
+    document.documentElement.style.scrollBehavior = 'smooth'
+    
+    // 优化触摸滚动
+    const style = document.createElement('style')
+    style.textContent = `
+      * {
+        -webkit-overflow-scrolling: touch;
+      }
+    `
+    document.head.appendChild(style)
+  }
+}
+
+/**
+ * 设置安全区域适配（iOS刘海屏）
+ */
+export function setSafeArea() {
+  if (isIOS()) {
+    const style = document.createElement('style')
+    style.textContent = `
+      .safe-area-top {
+        padding-top: env(safe-area-inset-top);
+      }
+      .safe-area-bottom {
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+      .safe-area-left {
+        padding-left: env(safe-area-inset-left);
+      }
+      .safe-area-right {
+        padding-right: env(safe-area-inset-right);
+      }
+    `
+    document.head.appendChild(style)
+  }
+}
+
+/**
+ * 移动端初始化
+ */
+export function initMobile() {
+  setMobileViewport()
+  preventDoubleTapZoom()
+  optimizeMobileScroll()
+  setSafeArea()
+}
+
+/**
+ * 格式化移动端表格数据为卡片数据
+ */
+export function formatTableToCards(tableData, columns) {
+  return tableData.map(row => {
+    const card = {}
+    columns.forEach(column => {
+      if (column.visible !== false) {
+        const value = column.prop ? getNestedValue(row, column.prop) : ''
+        card[column.prop || column.key] = {
+          label: column.label,
+          value: column.formatter ? column.formatter(row, column, value) : value,
+          type: column.type || 'text'
+        }
+      }
+    })
+    return {
+      ...row,
+      _cardData: card
+    }
+  })
+}
+
+/**
+ * 获取嵌套对象值
+ */
+function getNestedValue(obj, path) {
+  return path.split('.').reduce((o, p) => o && o[p], obj)
+}
+
+/**
+ * 移动端表格列配置
+ */
+export function getMobileTableColumns(columns) {
+  return columns
+    .filter(col => col.visible !== false)
+    .map(col => ({
+      ...col,
+      label: col.label || col.prop,
+      prop: col.prop || col.key
+    }))
+}
+
+/**
+ * 防抖函数
+ */
+export function debounce(func, wait) {
+  let timeout
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+/**
+ * 节流函数
+ */
+export function throttle(func, limit) {
+  let inThrottle
+  return function(...args) {
+    if (!inThrottle) {
+      func.apply(this, args)
+      inThrottle = true
+      setTimeout(() => inThrottle = false, limit)
+    }
+  }
+}
+
+/**
+ * 移动端图片懒加载
+ */
+export function lazyLoadImages() {
+  if ('IntersectionObserver' in window) {
+    const imageObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const img = entry.target
+          img.src = img.dataset.src
+          img.classList.remove('lazy')
+          imageObserver.unobserve(img)
+        }
+      })
+    })
+
+    document.querySelectorAll('img.lazy').forEach(img => {
+      imageObserver.observe(img)
+    })
+  }
+}
+
+export default {
+  isMobile,
+  isIOS,
+  isAndroid,
+  getDeviceType,
+  setMobileViewport,
+  preventDoubleTapZoom,
+  optimizeMobileScroll,
+  setSafeArea,
+  initMobile,
+  formatTableToCards,
+  getMobileTableColumns,
+  debounce,
+  throttle,
+  lazyLoadImages
+}
+

src/views/login.vue

@@ -24,17 +24,19 @@
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
+        <div style="display: flex; gap: 10px; align-items: center;">
-          v-model="loginForm.code"
+          <el-input
-          auto-complete="off"
+            v-model="loginForm.code"
-          placeholder="验证码"
+            auto-complete="off"
-          style="width: 63%"
+            placeholder="验证码"
-          @keyup.enter.native="handleLogin"
+            style="flex: 1"
-        >
+            @keyup.enter.native="handleLogin"
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          >
-        </el-input>
+            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        <div class="login-code">
+          </el-input>
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          </div>
         </div>
       </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
@@ -167,11 +169,26 @@ export default {
   height: 100%;
   background-image: url("../assets/images/login-background.jpg");
   background-size: cover;
+  background-position: center;
+  padding: 20px;
+  
+  // 移动端优化
+  @media (max-width: 768px) {
+    padding: 10px;
+    align-items: flex-start;
+    padding-top: 10vh;
+  }
 }
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
   color: #707070;
+  font-size: 24px;
+  
+  @media (max-width: 768px) {
+    font-size: 20px;
+    margin: 0px auto 20px auto;
+  }
 }
 
 .login-form {
@@ -180,10 +197,26 @@ export default {
   width: 400px;
   padding: 25px 25px 5px 25px;
   z-index: 1;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  
+  // 移动端优化
+  @media (max-width: 768px) {
+    width: 100%;
+    max-width: 100%;
+    padding: 20px 15px 5px 15px;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  }
+  
   .el-input {
     height: 38px;
     input {
       height: 38px;
+      font-size: 14px;
+      
+      @media (max-width: 768px) {
+        font-size: 16px; // 防止iOS自动缩放
+      }
     }
   }
   .input-icon {
@@ -191,6 +224,27 @@ export default {
     width: 14px;
     margin-left: 2px;
   }
+  
+  .el-form-item {
+    margin-bottom: 20px;
+    
+    @media (max-width: 768px) {
+      margin-bottom: 18px;
+    }
+  }
+  
+  .el-checkbox {
+    @media (max-width: 768px) {
+      font-size: 14px;
+    }
+  }
+  
+  .el-button {
+    @media (max-width: 768px) {
+      height: 44px; // 增大触摸目标
+      font-size: 16px;
+    }
+  }
 }
 .login-tip {
   font-size: 13px;
@@ -201,9 +255,22 @@ export default {
   width: 33%;
   height: 38px;
   float: right;
+  
+  @media (max-width: 768px) {
+    width: 35%;
+    height: 44px;
+  }
+  
   img {
     cursor: pointer;
     vertical-align: middle;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    
+    @media (max-width: 768px) {
+      height: 44px;
+    }
   }
 }
 .el-login-footer {
@@ -217,8 +284,18 @@ export default {
   font-family: Arial;
   font-size: 12px;
   letter-spacing: 1px;
+  
+  @media (max-width: 768px) {
+    font-size: 11px;
+    height: 36px;
+    line-height: 36px;
+  }
 }
 .login-code-img {
   height: 38px;
+  
+  @media (max-width: 768px) {
+    height: 44px;
+  }
 }
 </style>

移动端适配说明.md

@@ -0,0 +1,294 @@
+# 移动端适配说明
+
+## 概述
+
+本项目已全面适配移动端，提供了完整的移动端体验优化，包括：
+
+1. **移动端专用组件**：卡片式列表、折叠搜索表单、底部导航等
+2. **响应式布局**：自动适配不同屏幕尺寸
+3. **触摸优化**：符合移动端交互规范
+4. **性能优化**：流畅的滚动和动画效果
+
+## 核心组件
+
+### 1. MobileTable - 移动端表格组件
+
+移动端自动显示为卡片式列表，桌面端显示为表格。
+
+```vue
+<template>
+  <mobile-table
+    :data="tableData"
+    :columns="columns"
+    :show-selection="true"
+    :show-actions="true"
+    :selected-rows="selectedRows"
+    @selection-change="handleSelectionChange"
+    @row-click="handleRowClick"
+    @action="handleAction"
+  >
+    <!-- 自定义卡片头部 -->
+    <template #header="{ row }">
+      {{ row.name }}
+    </template>
+    
+    <!-- 自定义列内容 -->
+    <template #column-status="{ row, value }">
+      <el-tag :type="value === '0' ? 'success' : 'danger'">
+        {{ value === '0' ? '正常' : '停用' }}
+      </el-tag>
+    </template>
+    
+    <!-- 自定义操作按钮 -->
+    <template #actions="{ row }">
+      <el-dropdown-item command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
+      <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
+    </template>
+  </mobile-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        { prop: 'name', label: '名称', mobile: true },
+        { prop: 'status', label: '状态', dictType: 'sys_normal_disable' },
+        { prop: 'createTime', label: '创建时间', formatter: this.parseTime }
+      ],
+      selectedRows: []
+    }
+  },
+  methods: {
+    handleSelectionChange(row, selected) {
+      // 处理选择变化
+    },
+    handleRowClick(row) {
+      // 处理行点击
+    },
+    handleAction(command, row) {
+      // 处理操作
+    }
+  }
+}
+</script>
+```
+
+### 2. MobileSearchForm - 移动端搜索表单
+
+移动端自动折叠为快速搜索，点击筛选按钮展开完整表单。
+
+```vue
+<template>
+  <mobile-search-form
+    :model="queryParams"
+    @search="handleSearch"
+    @reset="handleReset"
+    @quick-search="handleQuickSearch"
+  >
+    <el-form-item label="用户名称" prop="userName">
+      <el-input v-model="queryParams.userName" placeholder="请输入用户名称" />
+    </el-form-item>
+    
+    <el-form-item label="状态" prop="status">
+      <el-select v-model="queryParams.status" placeholder="请选择">
+        <el-option label="正常" value="0" />
+        <el-option label="停用" value="1" />
+      </el-select>
+    </el-form-item>
+  </mobile-search-form>
+</template>
+```
+
+### 3. MobileButtonGroup - 移动端按钮组
+
+移动端自动将按钮分组，主要按钮显示，其他按钮放入"更多"菜单。
+
+```vue
+<template>
+  <mobile-button-group
+    :buttons="buttons"
+    :primary-count="2"
+    :sticky="true"
+    @button-click="handleButtonClick"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      buttons: [
+        { key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: this.handleAdd },
+        { key: 'edit', label: '修改', type: 'success', icon: 'el-icon-edit', handler: this.handleEdit },
+        { key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: this.handleDelete },
+        { key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: this.handleExport }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 4. MobileBottomNav - 移动端底部导航
+
+在移动端显示底部导航栏，方便快速切换页面。
+
+```vue
+<template>
+  <mobile-bottom-nav
+    :items="navItems"
+    :show="true"
+    @nav-click="handleNavClick"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      navItems: [
+        { path: '/index', label: '首页', icon: 'el-icon-s-home' },
+        { path: '/system/user', label: '用户', icon: 'el-icon-user' },
+        { path: '/system/menu', label: '菜单', icon: 'el-icon-menu' }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## 工具函数
+
+### mobile.js
+
+提供移动端检测和优化工具函数：
+
+```javascript
+import { isMobile, isIOS, initMobile } from '@/utils/mobile'
+
+// 检测是否为移动端
+if (isMobile()) {
+  // 移动端逻辑
+}
+
+// 初始化移动端优化
+initMobile()
+```
+
+## 混入
+
+### mobile.js mixin
+
+提供移动端相关的计算属性和方法：
+
+```vue
+<script>
+import mobileMixin from '@/mixins/mobile'
+
+export default {
+  mixins: [mobileMixin],
+  methods: {
+    someMethod() {
+      // 使用移动端检测
+      if (this.$isMobile) {
+        // 移动端逻辑
+      }
+      
+      // 使用移动端提示
+      this.$mobileToast('操作成功', 'success')
+    }
+  }
+}
+</script>
+```
+
+## 样式优化
+
+### 响应式断点
+
+- **移动端**：`max-width: 768px`
+- **平板**：`769px - 1024px`
+- **桌面端**：`min-width: 1025px`
+
+### 主要优化
+
+1. **触摸目标**：所有可点击元素最小 44px × 44px
+2. **字体大小**：输入框字体 16px 防止 iOS 自动缩放
+3. **间距优化**：移动端使用更紧凑的间距
+4. **圆角优化**：使用更大的圆角值（8px-12px）
+5. **阴影优化**：使用更柔和的阴影效果
+
+## 使用示例
+
+### 完整列表页面示例
+
+```vue
+<template>
+  <div class="app-container">
+    <!-- 搜索表单 -->
+    <mobile-search-form
+      :model="queryParams"
+      @search="getList"
+      @reset="resetQuery"
+    >
+      <el-form-item label="用户名称" prop="userName">
+        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" />
+      </el-form-item>
+    </mobile-search-form>
+
+    <!-- 按钮组 -->
+    <mobile-button-group
+      :buttons="buttons"
+      :primary-count="2"
+    />
+
+    <!-- 表格/卡片列表 -->
+    <mobile-table
+      :data="dataList"
+      :columns="columns"
+      :show-selection="true"
+      :selected-rows="selectedRows"
+      @selection-change="handleSelectionChange"
+    >
+      <template #column-status="{ value }">
+        <dict-tag :options="dict.type.sys_normal_disable" :value="value" />
+      </template>
+    </mobile-table>
+
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+```
+
+## 注意事项
+
+1. **组件注册**：移动端组件需要在使用前注册或导入
+2. **字典数据**：MobileTable 组件需要字典数据支持，确保字典已加载
+3. **路由配置**：底部导航需要配置正确的路由路径
+4. **性能优化**：大数据量时建议使用虚拟滚动或分页加载
+
+## 浏览器支持
+
+- iOS Safari 12+
+- Android Chrome 70+
+- 微信内置浏览器
+- 其他现代移动浏览器
+
+## 更新日志
+
+### v1.0.0
+- 初始版本
+- 支持移动端卡片式列表
+- 支持移动端折叠搜索
+- 支持移动端底部导航
+- 完整的响应式适配
+