✨ feat: 默认改为暗色模式

gear-ui3/src/views/dashboard/grid/setting.vue

@@ -16,22 +16,21 @@
 
     <!-- 配置内容区 -->
     <div class="settings-content">
+      <!-- 原有图表配置表格 -->
       <div class="charts-config">
         <h3 class="section-title">
+          <el-icon><Grid /></el-icon>
           图表配置
         </h3>
-
-        <!-- 直接保留表格，移除draggable包裹 -->
         <el-table 
           border 
           size="small" 
           :height="tableHeight" 
           row-key="id"
           :data="tempChartConfigs">
+          <!-- 表格列内容保持不变 -->
           <el-table-column prop="title" label="图表名称" min-width="120" />
           <el-table-column prop="id" label="标识" min-width="100" />
-
-          <!-- 图表高度配置列 -->
           <el-table-column label="图表高度" min-width="120">
             <template #default="scope">
               <el-input 
@@ -48,8 +47,6 @@
               </div>
             </template>
           </el-table-column>
-
-          <!-- 布局配置列 -->
           <el-table-column label="超小屏 (≤768px)" min-width="120">
             <template #default="scope">
               <el-select 
@@ -57,14 +54,13 @@
                 size="small" 
                 append-to="#full-dashboard-container"
                 :disabled="saving">
-                <el-option :value="24">独占一行</el-option>
-                <el-option :value="12">半行宽度</el-option>
-                <el-option :value="8">三分之一</el-option>
-                <el-option :value="6">四分之一</el-option>
+                <el-option value="24">独占一行</el-option>
+                <el-option value="12">半行宽度</el-option>
+                <el-option value="8">三分之一</el-option>
+                <el-option value="6">四分之一</el-option>
               </el-select>
             </template>
           </el-table-column>
-          
           <el-table-column label="小屏 (≥768px)" min-width="120">
             <template #default="scope">
               <el-select 
@@ -72,14 +68,13 @@
                 size="small" 
                 append-to="#full-dashboard-container"
                 :disabled="saving">
-                <el-option :value="24">独占一行</el-option>
-                <el-option :value="12">半行宽度</el-option>
-                <el-option :value="8">三分之一</el-option>
-                <el-option :value="6">四分之一</el-option>
+                <el-option value="24">独占一行</el-option>
+                <el-option value="12">半行宽度</el-option>
+                <el-option value="8">三分之一</el-option>
+                <el-option value="6">四分之一</el-option>
               </el-select>
             </template>
           </el-table-column>
-          
           <el-table-column label="中屏 (≥992px)" min-width="120">
             <template #default="scope">
               <el-select 
@@ -87,14 +82,13 @@
                 size="small" 
                 append-to="#full-dashboard-container"
                 :disabled="saving">
-                <el-option :value="24">独占一行</el-option>
-                <el-option :value="12">半行宽度</el-option>
-                <el-option :value="8">三分之一</el-option>
-                <el-option :value="6">四分之一</el-option>
+                <el-option value="24">独占一行</el-option>
+                <el-option value="12">半行宽度</el-option>
+                <el-option value="8">三分之一</el-option>
+                <el-option value="6">四分之一</el-option>
               </el-select>
             </template>
           </el-table-column>
-          
           <el-table-column label="大屏 (≥1200px)" min-width="120">
             <template #default="scope">
               <el-select 
@@ -109,7 +103,6 @@
               </el-select>
             </template>
           </el-table-column>
-          
           <el-table-column label="超大屏 (≥1920px)" min-width="120">
             <template #default="scope">
               <el-select 
@@ -124,7 +117,6 @@
               </el-select>
             </template>
           </el-table-column>
-          
           <el-table-column label="操作" width="120" align="center">
             <template #default="scope">
               <el-button 
@@ -147,6 +139,61 @@
           </el-table-column>
         </el-table>
       </div>
+
+      <!-- 新增：布局预览区域 -->
+      <div class="layout-preview">
+        <h3 class="section-title">
+          <el-icon><Eye /></el-icon>
+          布局预览（实时同步配置）
+        </h3>
+        <!-- 预览容器：模拟仪表盘布局 -->
+        <div class="preview-container">
+          <!-- 无配置时显示提示 -->
+          <div v-if="tempChartConfigs.length === 0" class="empty-preview">
+            <el-empty description="暂无图表配置，无法预览" />
+          </div>
+
+          <!-- 有配置时，用el-row+el-col渲染预览 -->
+          <el-row 
+            v-else 
+            :gutter="16" 
+            class="preview-row"
+            :style="{ marginBottom: '16px' }">
+            <el-col
+              v-for="(chart, index) in tempChartConfigs"
+              :key="chart.id || index"
+              :xs="chart.layout.xs"
+              :sm="chart.layout.sm"
+              :md="chart.layout.md"
+              :lg="chart.layout.lg"
+              :xl="chart.layout.xl"
+              class="preview-col">
+              <!-- 用Card模拟图表容器，高度同步配置 -->
+              <el-card
+                class="preview-card"
+                :style="{ 
+                  height: `${chart.height}px`, 
+                  display: 'flex', 
+                  flexDirection: 'column',
+                  transition: 'all 0.3s ease'
+                }">
+                <div class="card-header">
+                  <span class="chart-title">{{ chart.title }}</span>
+                  <span class="chart-id">[{{ chart.id }}]</span>
+                </div>
+                <!-- 模拟图表内容区域 -->
+                <div class="chart-placeholder" :style="{ flex: 1, marginTop: '8px' }">
+                  <div class="placeholder-bg"></div>
+                  <div class="placeholder-info">
+                    <p>高度：{{ chart.height }}px</p>
+                    <p>布局：xs={{ chart.layout.xs }} / sm={{ chart.layout.sm }} / md={{ chart.layout.md }}</p>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
     </div>
 
     <!-- 提示信息 -->
@@ -164,11 +211,11 @@
 import { ref, onMounted, reactive } from 'vue';
 import { useStorage } from '@vueuse/core';
 import { useEventListener } from '@vueuse/core';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { Loading, ArrowUp, ArrowDown, Grid } from '@element-plus/icons-vue';
-// 移除draggable组件导入
+import { ElMessage, ElMessageBox, ElEmpty, ElRow, ElCol, ElCard } from 'element-plus';
+// 新增导入预览用图标
+import { Loading, Grid, Eye } from '@element-plus/icons-vue';
 
-// 接收存储键名props
+// 原有逻辑保持不变，仅新增预览相关变量（如有需要）
 const props = defineProps({
   storageKey: {
     type: String,
@@ -177,7 +224,6 @@ const props = defineProps({
   }
 });
 
-// 从storage读取配置
 const persistedChartConfigs = useStorage(
   props.storageKey,
   [],
@@ -186,12 +232,8 @@ const persistedChartConfigs = useStorage(
     serializer: {
       read: (v) => {
         try {
-          if (typeof v === 'string') {
-            return JSON.parse(v);
-          }
-          if (Array.isArray(v)) {
-            return v;
-          }
+          if (typeof v === 'string') return JSON.parse(v);
+          if (Array.isArray(v)) return v;
           return [];
         } catch (e) {
           console.error('解析存储的图表配置失败，使用空配置:', e);
@@ -204,41 +246,25 @@ const persistedChartConfigs = useStorage(
   }
 );
 
-// 临时配置
 const tempChartConfigs = ref([]);
-// 初始配置快照
 const initialChartConfigs = ref([]);
-// 保存状态
 const saving = ref(false);
-// 移除拖拽状态变量：isDragging
-
-// 窗口尺寸响应
 const windowWidth = ref(window.innerWidth);
 const tableHeight = ref(300);
-// 高度输入错误标记
 const heightErrorIndex = ref(-1);
-// 批量设置弹窗
 const showBatchSettings = ref(false);
-// 批量设置数据
 const batchSettings = reactive({
-  applyRange: 'all', // 'all' 或 'visible'
+  applyRange: 'all',
   height: null,
-  layout: {
-    xs: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null
-  }
+  layout: { xs: null, sm: null, md: null, lg: null, xl: null }
 });
 
-// 监听窗口尺寸变化
+// 原有方法（onMounted、calculateTableHeight、resetToSession等）保持不变
 useEventListener('resize', () => {
   windowWidth.value = window.innerWidth;
   calculateTableHeight();
 });
 
-// 初始化：补充height默认值
 onMounted(() => {
   if (!Array.isArray(persistedChartConfigs.value)) {
     persistedChartConfigs.value = [];
@@ -247,21 +273,14 @@ onMounted(() => {
   calculateTableHeight();
 });
 
-// 计算表格高度
 const calculateTableHeight = () => {
-  // 根据屏幕高度动态计算表格高度，确保整体布局合理
-  const panelHeight = window.innerHeight - 220;
-  tableHeight.value = Math.max(300, Math.min(600, panelHeight));
+  const panelHeight = window.innerHeight - 400; // 预留预览区域高度
+  tableHeight.value = Math.max(300, Math.min(500, panelHeight));
 };
 
-// 重置临时配置：补充height默认值
 const resetToSession = () => {
   try {
-    const source = Array.isArray(persistedChartConfigs.value)
-      ? persistedChartConfigs.value
-      : [];
-
-    // 深拷贝 + 补充height默认值和visible属性
+    const source = Array.isArray(persistedChartConfigs.value) ? persistedChartConfigs.value : [];
     const configCopy = JSON.parse(JSON.stringify(source)).map(config => ({
       ...config,
       height: config.height || 400,
@@ -274,7 +293,6 @@ const resetToSession = () => {
         xl: config.layout?.xl || 6
       }
     }));
-
     tempChartConfigs.value = configCopy;
     initialChartConfigs.value = JSON.parse(JSON.stringify(configCopy));
     ElMessage.info('已恢复到打开设置时的状态');
@@ -284,7 +302,6 @@ const resetToSession = () => {
   }
 };
 
-// 高度输入验证
 const validateHeight = (row, index) => {
   heightErrorIndex.value = -1;
   if (isNaN(row.height) || row.height < 100 || row.height > 1000) {
@@ -294,48 +311,34 @@ const validateHeight = (row, index) => {
   return true;
 };
 
-// 移动图表位置（按钮控制）- 保留按钮功能，移除拖拽相关逻辑
 const moveChart = (index, direction) => {
   let newIndex;
   if (direction === 'up' && index > 0) {
     newIndex = index - 1;
-    // 交换位置
-    [tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] =
-      [tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
-    // 触发重绘
+    [tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] = [tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
     tempChartConfigs.value = [...tempChartConfigs.value];
-    // 添加动画效果
     highlightRow(index);
     highlightRow(newIndex);
   } else if (direction === 'down' && index < tempChartConfigs.value.length - 1) {
     newIndex = index + 1;
-    // 交换位置
-    [tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] =
-      [tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
-    // 触发重绘
+    [tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] = [tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
     tempChartConfigs.value = [...tempChartConfigs.value];
-    // 添加动画效果
     highlightRow(index);
     highlightRow(newIndex);
   }
 };
 
-// 高亮行（动画效果）- 保留按钮移动后的高亮效果
 const highlightRow = (index) => {
   const rowEl = document.querySelector(`.el-table__row:nth-child(${index + 1})`);
   if (rowEl) {
     rowEl.classList.add('row-highlight');
-    setTimeout(() => {
-      rowEl.classList.remove('row-highlight');
-    }, 600);
+    setTimeout(() => rowEl.classList.remove('row-highlight'), 600);
   }
 };
 
-// 应用批量设置
 const applyBatchSettings = () => {
-  // 过滤需要应用设置的图表
-  const targetCharts = batchSettings.applyRange === 'visible'
-    ? tempChartConfigs.value.filter(chart => chart.visible)
+  const targetCharts = batchSettings.applyRange === 'visible' 
+    ? tempChartConfigs.value.filter(chart => chart.visible) 
     : tempChartConfigs.value;
 
   if (targetCharts.length === 0) {
@@ -343,15 +346,10 @@ const applyBatchSettings = () => {
     return;
   }
 
-  // 应用设置
   targetCharts.forEach(chart => {
-    // 应用高度设置
-    if (batchSettings.height !== null && !isNaN(batchSettings.height) && 
-        batchSettings.height >= 100 && batchSettings.height <= 1000) {
+    if (batchSettings.height !== null && !isNaN(batchSettings.height) && batchSettings.height >= 100 && batchSettings.height <= 1000) {
       chart.height = batchSettings.height;
     }
-    
-    // 应用布局设置
     Object.keys(batchSettings.layout).forEach(key => {
       if (batchSettings.layout[key] !== null) {
         chart.layout[key] = batchSettings.layout[key];
@@ -359,35 +357,25 @@ const applyBatchSettings = () => {
     });
   });
 
-  // 刷新表格
   tempChartConfigs.value = [...tempChartConfigs.value];
   showBatchSettings.value = false;
   ElMessage.success(`已对 ${targetCharts.length} 个图表应用批量设置`);
 };
 
-// 应用设置
 const applySettings = async () => {
   try {
-    // 验证所有高度输入
-    const hasInvalidHeight = tempChartConfigs.value.some((row, index) =>
-      !validateHeight(row, index)
-    );
+    const hasInvalidHeight = tempChartConfigs.value.some((row, index) => !validateHeight(row, index));
     if (hasInvalidHeight) {
       ElMessage.error('存在无效的高度配置，请修正后重试');
       return;
     }
 
-    // 检查是否有可见图表
     const visibleCharts = tempChartConfigs.value.filter(chart => chart.visible);
     if (visibleCharts.length === 0) {
       await ElMessageBox.confirm(
         '所有图表都处于隐藏状态，确定要应用设置吗？',
         '确认提示',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }
+        { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
       );
     }
 
@@ -401,7 +389,7 @@ const applySettings = async () => {
       throw new Error('配置数据格式错误，必须为数组');
     }
   } catch (error) {
-    if (error !== 'cancel') { // 忽略取消操作的错误
+    if (error !== 'cancel') {
       console.error('保存配置失败:', error);
       ElMessage.error('保存配置失败，请重试');
     }
@@ -410,18 +398,12 @@ const applySettings = async () => {
   }
 };
 
-// 定义事件
 const emits = defineEmits(['config-updated', 'close']);
-
-// 暴露方法给父组件
-defineExpose({
-  resetToSession,
-  applySettings
-});
+defineExpose({ resetToSession, applySettings });
 </script>
 
 <style scoped>
-/* 基础样式 */
+/* 原有样式保持不变，新增预览区域样式 */
 .chart-settings-panel {
   display: flex;
   flex-direction: column;
@@ -430,14 +412,11 @@ defineExpose({
   padding: 10px;
 }
 
-/* 移除所有拖拽相关样式 */
-
 /* 表格行动画效果 */
 .el-table__body .el-table-row {
   transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
 }
 
-/* 行高亮动画 - 保留按钮移动后的高亮效果 */
 .row-highlight {
   animation: rowHighlight 0.6s ease;
 }
@@ -447,7 +426,6 @@ defineExpose({
   100% { background-color: transparent; }
 }
 
-/* 高度错误提示 */
 .height-error {
   font-size: 12px;
   color: #ef4444;
@@ -461,7 +439,6 @@ defineExpose({
   20%, 40%, 60%, 80% { transform: translateX(2px); }
 }
 
-/* 其他样式 */
 .panel-header {
   display: flex;
   justify-content: space-between;
@@ -512,6 +489,92 @@ defineExpose({
   border-top: 1px solid #eee;
 }
 
+/* 新增：预览区域样式 */
+.layout-preview {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background-color: #fafafa;
+}
+
+.preview-container {
+  flex: 1;
+  overflow: auto;
+  padding: 8px;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.empty-preview {
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.preview-row {
+  margin: 0 !important; /* 清除el-row默认margin */
+}
+
+.preview-col {
+  margin-bottom: 16px;
+}
+
+.preview-card {
+  overflow: hidden;
+  border: 1px solid #e5e7eb !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.chart-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.chart-id {
+  font-size: 12px;
+  color: #666;
+}
+
+.chart-placeholder {
+  position: relative;
+  overflow: hidden;
+}
+
+.placeholder-bg {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #f0f2f5 0%, #e5e6eb 100%);
+}
+
+.placeholder-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 6px 12px;
+  background-color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  color: #666;
+}
+
+.placeholder-info p {
+  margin: 2px 0;
+}
+
 /* 响应式调整 */
 @media (max-width: 1200px) {
   .chart-settings-panel {
@@ -544,5 +607,9 @@ defineExpose({
   .section-title {
     font-size: 14px;
   }
+
+  .layout-preview {
+    padding: 8px;
+  }
 }
 </style>

gear-ui3/src/views/dashboard/layout/index.vue

@@ -36,7 +36,7 @@
       <slot></slot>
     </main>
 
-    <el-dialog v-model="settingVisible" title="图表设置" width="70%">
+    <el-dialog v-model="settingVisible" title="图表设置" width="80%">
       <ChartSetting />
     </el-dialog>
   </div>

gear-ui3/src/views/index.vue

@@ -2,144 +2,15 @@
   <div class="dashboard-root">
     <!-- 第一行：头像+欢迎语 -->
     <UserGreeting />
-    
-    <!-- 业务功能区 -->
-    <div class="business-area-header">
-      <h2 class="business-area-title">常用应用</h2>
-      <button class="edit-btn" @click="showSettingDialog = true">
-        <svg-icon icon-class="edit" /> 编辑常用
-      </button>
-    </div>
-    <div class="business-modules">
-      <div v-for="(module, index) in businessModules" :key="index"
-           class="business-module" @click="handleLink(module.link)">
-        <div class="business-module-icon">
-          <svg-icon :icon-class="module.icon" />
-        </div>
-        <h3 class="business-module-title">{{ module.title }}</h3>
-      </div>
-    </div>
 
     <!-- 全部应用 -->
     <AllApplications @addFavorites="handleAddFavorites" />
-
-    <!-- 设置弹窗 -->
-    <div class="dialog-mask" v-if="showSettingDialog">
-      <div class="setting-dialog">
-        <div class="dialog-header">
-          <h3>编辑常用应用</h3>
-          <button class="close-btn" @click="showSettingDialog = false">
-            <svg-icon icon-class="close" />
-          </button>
-        </div>
-        <div class="dialog-content">
-          <div class="empty-tip" v-if="businessModules.length === 0">
-            暂无常用应用，可从下方"全部应用"中添加
-          </div>
-          <ul class="module-list" v-else>
-            <li v-for="(module, index) in businessModules" :key="index" class="module-item">
-              <div class="module-info">
-                <span class="module-index">{{ index + 1 }}</span>
-                <span class="module-name">{{ module.title }}</span>
-              </div>
-              <div class="module-actions">
-                <el-button 
-                  @click="moveModule(index, 'up')" 
-                  :disabled="index === 0"
-                  icon="ArrowUp" type="primary"
-                >
-                </el-button>
-                <el-button 
-                  @click="moveModule(index, 'down')" 
-                  :disabled="index === businessModules.length - 1"
-                  icon="ArrowDown" type="primary"
-                >
-                </el-button>
-                <el-button @click="deleteModule(index)" icon="Delete" danger>
-                </el-button>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div class="dialog-footer">
-          <button class="cancel-btn" @click="showSettingDialog = false">取消</button>
-          <button class="confirm-btn" @click="showSettingDialog = false">完成</button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
 import AllApplications from '@/components/AllApplications.vue';
 import UserGreeting from '@/views/components/Hello.vue';
-import { useRouter } from 'vue-router';
-import { useStorage } from '@vueuse/core'
-
-// 响应式数据
-const businessModules = useStorage('businessModules', [
-  {
-    title: '考勤日历',
-    icon: 'code',
-    link: '/people/calendar'
-  },
-  {
-    title: '系统设置',
-    icon: 'system',
-    link: '/system/menu'
-  },
-]);
-const showSettingDialog = ref(false); // 控制弹窗显示
-
-// 路由实例
-const router = useRouter();
-
-// 方法定义
-const handleLink = (link) => {
-  if (link.startsWith('http') || link.endsWith('.html')) {
-    window.open(link, '_blank');
-  } else {
-    router.push(link);
-  }
-};
-
-const handleAddFavorites = (appInfo) => {
-  // 检查是否已经存在，如果已经存在就移除，否则添加
-  const index = businessModules.value.findIndex(module => module.link === appInfo.fullPath)
-  if (index !== -1) {
-    businessModules.value.splice(index, 1)
-  } else {
-    businessModules.value.push({
-      title: appInfo.child.meta.title,
-      icon: appInfo.child.meta.icon,
-      link: appInfo.fullPath
-    })
-  }
-};
-
-// 移动模块位置（排序功能）
-const moveModule = (index, direction) => {
-  // 创建副本避免直接修改源数组导致的响应式问题
-  const newModules = [...businessModules.value];
-  // 上移：与前一个元素交换位置
-  if (direction === 'up' && index > 0) {
-    [newModules[index], newModules[index - 1]] = [newModules[index - 1], newModules[index]];
-  }
-  // 下移：与后一个元素交换位置
-  if (direction === 'down' && index < newModules.length - 1) {
-    [newModules[index], newModules[index + 1]] = [newModules[index + 1], newModules[index]];
-  }
-  // 更新响应式数据
-  businessModules.value = newModules;
-};
-
-// 删除模块
-const deleteModule = (index) => {
-  if (confirm('确定要移除该常用应用吗？')) {
-    businessModules.value.splice(index, 1);
-  }
-};
 </script>
 
 <style scoped>

gear-ui3/src/views/login.vue

@@ -1,72 +1,46 @@
 <template>
   <div class="login">
     <div class="login-container">
+      <div class="login-right">
+        <img :src="RightImage" alt="" class="right-img" />
+      </div>
       <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">
-        <img :src="LogoImage" alt="公司 Logo" class="logo-img"/>
-        {{ title }}
-      </h3>
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          size="large"
-          auto-complete="off"
-          placeholder="账号"
-        >
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          size="large"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          size="large"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="large"
-          type="primary"
-          style="width:100%;"
-          @click.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
+        <h3 class="title">
+          {{ title }}
+        </h3>
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
+            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
+            @keyup.enter="handleLogin">
+            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code" v-if="captchaEnabled">
+          <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
+            @keyup.enter="handleLogin">
+            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+          </div>
+        </el-form-item>
+        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+        <el-form-item style="width:100%;">
+          <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+          <div style="float: right;" v-if="register">
+            <router-link class="link-type" :to="'/register'">立即注册</router-link>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
 
-    <div class="login-right">
-      <img :src="RightImage" alt="公司 Logo" class="right-img"/>
-    </div>
-    </div>
-    
     <!--  底部  -->
     <div class="el-login-footer">
       <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
@@ -80,8 +54,8 @@ import Cookies from "js-cookie"
 import { encrypt, decrypt } from "@/utils/jsencrypt"
 import useUserStore from '@/store/modules/user'
 import useProductStore from '@/store/modules/product'
-import RightImage from '@/assets/images/right.jpg'
-import LogoImage from '@/assets/logo/logo-full.jpg'
+import RightImage from '@/assets/images/right.png'
+import LogoImage from '@/assets/logo/logo.png'
 
 const title = import.meta.env.VITE_APP_TITLE
 const userStore = useUserStore()
@@ -112,7 +86,7 @@ const register = ref(false)
 const redirect = ref(undefined)
 
 watch(route, (newRoute) => {
-    redirect.value = newRoute.query && newRoute.query.redirect
+  redirect.value = newRoute.query && newRoute.query.redirect
 }, { immediate: true })
 
 function handleLogin() {
@@ -183,13 +157,14 @@ getCookie()
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/back.jpg");
+  background-color: #1a1a1a;
   background-size: cover;
 }
+
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
-  color: #707070;
+  color: #ebebeb;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -201,8 +176,8 @@ getCookie()
 }
 
 .logo-img {
-  width: 100px;
-  height: 100px;
+  width: 50px;
+  height: 50px;
 }
 
 .login-container {
@@ -211,21 +186,35 @@ getCookie()
   align-items: center;
   box-sizing: border-box;
   // height: 60%;
-  border-radius: 6px;
-  background: #ffffff;
   width: 60%;
   padding: 25px 25px 5px 25px;
 }
 
+:deep(.el-input__wrapper) {
+  background: #333333;
+  border-radius: 6px;
+  border: 1px solid #444444;
+}
+
+.el-input {
+  color: #ebebeb;
+}
+
 .login-form {
   z-index: 1;
   flex: 3;
+  border-radius: 6px;
+  background: #292929;
+  padding: 25px;
+
   .el-input {
     height: 40px;
+
     input {
       height: 40px;
     }
   }
+
   .input-icon {
     height: 39px;
     width: 14px;
@@ -234,6 +223,9 @@ getCookie()
 }
 
 .login-right {
+  display: flex;
+  padding: 30px;
+
   flex: 4;
 }
 
@@ -242,15 +234,18 @@ getCookie()
   text-align: center;
   color: #bfbfbf;
 }
+
 .login-code {
   width: 33%;
   height: 40px;
   float: right;
+
   img {
     cursor: pointer;
     vertical-align: middle;
   }
 }
+
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -263,6 +258,7 @@ getCookie()
   font-size: 12px;
   letter-spacing: 1px;
 }
+
 .login-code-img {
   height: 40px;
   padding-left: 12px;