登录界面记住我功能

src/api/login.js

@@ -1,13 +1,14 @@
 import request from "@/utils/request";
 
 // 登录（使用租户名称）
-export function login(account, password) {
+export function login(account, password, tenant_name) {
   return request({
     url: `/admin/login`,
     method: "post",
     data: {
       account: account,
       password: password,
+      tenant_name: tenant_name,
     },
   });
 }

src/router/index.js

@@ -8,6 +8,11 @@ const staticMainChildren = [
     name: "userProfile",
     component: () => import("@/views/user/userProfile.vue"),
     meta: { requiresAuth: true, title: "用户中心" }
+  },
+  // 兼容拼写错误的路径重定向
+  {
+    path: "/apps/erp/dashborad",
+    redirect: "/apps/erp/dashboard"
   }
 ];
 
@@ -25,6 +30,11 @@ const staticRoutes = [
     component: () => import("@/views/home/index.vue"),
     meta: { requiresAuth: true, title: "系统导航", isStandalone: true }
   },
+  // 兼容路径拼写错误：dashborad -> dashboard
+  {
+    path: "/apps/erp/dashborad",
+    redirect: "/apps/erp/dashboard"
+  },
   {
     path: "/:pathMatch(.*)*",
     name: "NotFound",

src/views/apps/erp/dashboard/index.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="erp-dashboard">
+    <!-- 第一行统计卡片 -->
+    <el-row :gutter="16" class="stat-row">
+      <el-col :span="4" v-for="(item, index) in firstRowStats" :key="'first-' + index">
+        <div class="stat-card">
+          <div class="stat-header">
+            <span class="stat-label">{{ item.label }}</span>
+            <el-icon class="stat-icon"><Info-Filled /></el-icon>
+          </div>
+          <div class="stat-value">
+            <span class="currency">¥</span>
+            <span class="number">{{ formatMoney(item.value) }}</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 第二行统计卡片 -->
+    <el-row :gutter="16" class="stat-row" style="margin-top: 16px;">
+      <el-col :span="4" v-for="(item, index) in secondRowStats" :key="'second-' + index">
+        <div class="stat-card">
+          <div class="stat-header">
+            <span class="stat-label">{{ item.label }}</span>
+            <el-icon class="stat-icon"><Info-Filled /></el-icon>
+          </div>
+          <div class="stat-value">
+            <span class="currency">¥</span>
+            <span class="number">{{ formatMoney(item.value) }}</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 图表区域 -->
+    <el-row :gutter="16" class="chart-row" style="margin-top: 16px;">
+      <el-col :span="8">
+        <div class="chart-card">
+          <div class="chart-title">销售统计</div>
+          <div ref="salesChartRef" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="chart-card">
+          <div class="chart-title">零售统计</div>
+          <div ref="retailChartRef" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="chart-card">
+          <div class="chart-title">采购统计</div>
+          <div ref="purchaseChartRef" class="chart-container"></div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import { InfoFilled } from '@element-plus/icons-vue';
+
+// 统计卡片数据 - 第一行
+const firstRowStats = ref([
+  { label: '今日销售', value: 0 },
+  { label: '今日零售', value: 0 },
+  { label: '今日采购', value: 0 },
+  { label: '本月累计销售', value: 0 },
+  { label: '本月累计零售', value: 0 },
+  { label: '本月累计采购', value: 0 },
+]);
+
+// 统计卡片数据 - 第二行
+const secondRowStats = ref([
+  { label: '昨日销售', value: 0 },
+  { label: '昨日零售', value: 0 },
+  { label: '昨日采购', value: 0 },
+  { label: '今年累计销售', value: 0 },
+  { label: '今年累计零售', value: 0 },
+  { label: '今年累计采购', value: 0 },
+]);
+
+// 图表实例
+const salesChartRef = ref<HTMLElement | null>(null);
+const retailChartRef = ref<HTMLElement | null>(null);
+const purchaseChartRef = ref<HTMLElement | null>(null);
+const salesChartInstance = shallowRef<echarts.ECharts | null>(null);
+const retailChartInstance = shallowRef<echarts.ECharts | null>(null);
+const purchaseChartInstance = shallowRef<echarts.ECharts | null>(null);
+
+// 格式化金额
+const formatMoney = (value: number): string => {
+  return value.toLocaleString();
+};
+
+// 生成最近6个月的月份标签
+const getMonthLabels = (): string[] => {
+  const labels: string[] = [];
+  const now = new Date();
+  for (let i = 5; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    labels.push(`${year}-${month}`);
+  }
+  return labels;
+};
+
+// 初始化图表通用配置
+const initChart = (refEl: HTMLElement, title: string, color: string) => {
+  const chart = echarts.init(refEl);
+  const months = getMonthLabels();
+  
+  chart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: months,
+      axisLine: { lineStyle: { color: '#E0E6ED' } },
+      axisLabel: { color: '#606266', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { lineStyle: { color: '#F2F6FC' } },
+      axisLabel: { color: '#606266', fontSize: 11 }
+    },
+    series: [
+      {
+        name: title,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: { color: color, width: 2 },
+        itemStyle: { color: color },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: color + '40' },
+            { offset: 1, color: color + '10' }
+          ])
+        },
+        data: [0, 0, 0, 0, 0, 0]
+      }
+    ]
+  });
+  
+  return chart;
+};
+
+// 初始化所有图表
+const initCharts = () => {
+  if (salesChartRef.value) {
+    salesChartInstance.value = initChart(salesChartRef.value, '销售', '#409EFF');
+  }
+  if (retailChartRef.value) {
+    retailChartInstance.value = initChart(retailChartRef.value, '零售', '#67C23A');
+  }
+  if (purchaseChartRef.value) {
+    purchaseChartInstance.value = initChart(purchaseChartRef.value, '采购', '#E6A23C');
+  }
+};
+
+// 加载数据（模拟接口调用）
+const loadData = async () => {
+  // TODO: 调用接口获取真实数据
+  // const res = await getErpDashboard();
+  
+  // 模拟数据更新
+  firstRowStats.value = [
+    { label: '今日销售', value: 12580 },
+    { label: '今日零售', value: 8560 },
+    { label: '今日采购', value: 23400 },
+    { label: '本月累计销售', value: 358600 },
+    { label: '本月累计零售', value: 245800 },
+    { label: '本月累计采购', value: 568900 },
+  ];
+  
+  secondRowStats.value = [
+    { label: '昨日销售', value: 15230 },
+    { label: '昨日零售', value: 9870 },
+    { label: '昨日采购', value: 18900 },
+    { label: '今年累计销售', value: 2856000 },
+    { label: '今年累计零售', value: 1985000 },
+    { label: '今年累计采购', value: 4568000 },
+  ];
+  
+  // 更新图表数据
+  updateCharts();
+};
+
+// 更新图表数据
+const updateCharts = () => {
+  const salesData = [28000, 32000, 35000, 38000, 42000, 358600];
+  const retailData = [18000, 21000, 22000, 25000, 28000, 245800];
+  const purchaseData = [45000, 48000, 52000, 55000, 58000, 568900];
+  
+  if (salesChartInstance.value) {
+    salesChartInstance.value.setOption({ series: [{ data: salesData }] });
+  }
+  if (retailChartInstance.value) {
+    retailChartInstance.value.setOption({ series: [{ data: retailData }] });
+  }
+  if (purchaseChartInstance.value) {
+    purchaseChartInstance.value.setOption({ series: [{ data: purchaseData }] });
+  }
+};
+
+// 自适应窗口大小
+const handleResize = () => {
+  salesChartInstance.value?.resize();
+  retailChartInstance.value?.resize();
+  purchaseChartInstance.value?.resize();
+};
+
+onMounted(async () => {
+  initCharts();
+  await nextTick();
+  await loadData();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  salesChartInstance.value?.dispose();
+  retailChartInstance.value?.dispose();
+  purchaseChartInstance.value?.dispose();
+});
+</script>
+
+<style lang="less" scoped>
+.erp-dashboard {
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
+}
+
+.stat-row {
+  .el-col {
+    margin-bottom: 0;
+  }
+}
+
+.stat-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  
+  .stat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    
+    .stat-label {
+      font-size: 14px;
+      color: #606266;
+    }
+    
+    .stat-icon {
+      font-size: 14px;
+      color: #c0c4cc;
+      cursor: help;
+    }
+  }
+  
+  .stat-value {
+    display: flex;
+    align-items: baseline;
+    
+    .currency {
+      font-size: 14px;
+      color: #303133;
+      font-weight: 500;
+      margin-right: 4px;
+    }
+    
+    .number {
+      font-size: 24px;
+      font-weight: 600;
+      color: #303133;
+      font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    }
+  }
+}
+
+.chart-row {
+  .el-col {
+    margin-bottom: 0;
+  }
+}
+
+.chart-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  height: 320px;
+  display: flex;
+  flex-direction: column;
+  
+  .chart-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ebeef5;
+  }
+  
+  .chart-container {
+    flex: 1;
+    min-height: 0;
+  }
+}
+</style>

src/views/login/index.vue

@@ -38,23 +38,20 @@
         <div class="form-group icon-input-group">
           <span class="input-icon">
             <!-- 用户图标 -->
-            <svg width="19" height="19" viewBox="0 0 20 20" fill="none">
+            <i class="fa-solid fa-building-columns"></i>
-              <circle
+          </span>
-                cx="10"
+          <input
-                cy="7"
+            v-model="tenant_name"
-                r="3.2"
+            type="text"
-                stroke="#4da1ff"
+            placeholder="租户名称"
-                stroke-width="1.4"
+            autocomplete="tenant_name"
+            class="input input-with-icon"
           />
-              <ellipse
+        </div>
-                cx="10"
+        <div class="form-group icon-input-group">
-                cy="14.1"
+          <span class="input-icon">
-                rx="5.5"
+            <!-- 用户图标 -->
-                ry="3.3"
+            <i class="fa-solid fa-user"></i>
-                stroke="#4da1ff"
-                stroke-width="1.4"
-              />
-            </svg>
           </span>
           <input
             v-model="account"
@@ -67,33 +64,7 @@
         <div class="form-group icon-input-group">
           <span class="input-icon">
             <!-- 密码图标 -->
-            <svg width="19" height="19" viewBox="0 0 20 20" fill="none">
+            <i class="fa-solid fa-lock"></i>
-              <rect
-                x="3"
-                y="8"
-                width="14"
-                height="7"
-                rx="2"
-                stroke="#4da1ff"
-                stroke-width="1.4"
-              />
-              <circle
-                cx="10"
-                cy="11.5"
-                r="1.5"
-                stroke="#4da1ff"
-                stroke-width="1.2"
-              />
-              <rect
-                x="7"
-                y="5"
-                width="6"
-                height="3"
-                rx="1.5"
-                stroke="#4da1ff"
-                stroke-width="1"
-              />
-            </svg>
           </span>
           <input
             v-model="password"
@@ -107,39 +78,8 @@
             @click="passwordVisible = !passwordVisible"
             :title="passwordVisible ? '隐藏密码' : '显示密码'"
           >
-            <svg
+            <i v-if="passwordVisible" class="fa-regular fa-eye"></i>
-              v-if="passwordVisible"
+            <i v-else class="fa-solid fa-eye-slash"></i>
-              width="20"
-              height="20"
-              fill="none"
-              viewBox="0 0 20 20"
-            >
-              <!-- 可见(eye)图标 -->
-              <path
-                d="M2 10c2-4 5-6 8-6s6 2 8 6c-2 4-5 6-8 6s-6-2-8-6z"
-                stroke="#7bb7fa"
-                stroke-width="1.4"
-                fill="#eef5ff"
-              />
-              <circle
-                cx="10"
-                cy="10"
-                r="2.5"
-                stroke="#3794f7"
-                stroke-width="1.4"
-                fill="#fff"
-              />
-            </svg>
-            <svg v-else width="20" height="20" fill="none" viewBox="0 0 20 20">
-              <!-- 不可见(eye-off)图标 -->
-              <path
-                d="M2 10c2-4 5-6 8-6s6 2 8 6c-2 4-5 6-8 6s-6-2-8-6z"
-                stroke="#b7c7db"
-                stroke-width="1.3"
-                fill="#f2f6fd"
-              />
-              <path d="M5 15L15 5" stroke="#b7c7db" stroke-width="1.2" />
-            </svg>
           </span>
         </div>
         <div class="remember-me-row">
@@ -148,6 +88,7 @@
               type="checkbox"
               v-model="rememberMe"
               class="remember-me-checkbox"
+              @change="handleRememberMeChange"
             />
             <span>记住我</span>
           </label>
@@ -175,10 +116,12 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { login } from "@/api/login";
+import { ElMessageBox } from "element-plus";
 
 const router = useRouter();
 const authStore = useAuthStore();
 
+const tenant_name = ref("");
 const account = ref("");
 const password = ref("");
 const passwordVisible = ref(false);
@@ -188,34 +131,72 @@ const errorMsg = ref("");
 
 onMounted(() => {
   const savedUser = localStorage.getItem("loginAccount");
+  const savedTenant = localStorage.getItem("loginTenantName");
+  const savedPassword = localStorage.getItem("loginPassword");
   const savedRemember = localStorage.getItem("loginRememberMe");
 
   if (savedRemember === "true") {
-    account.value = savedUser;
+    tenant_name.value = savedTenant || "";
+    account.value = savedUser || "";
+    password.value = savedPassword || "";
     rememberMe.value = true;
   }
 });
 
+// 记住我复选框变化时触发
+const handleRememberMeChange = async () => {
+  if (rememberMe.value) {
+    // 勾选时弹出确认提示
+    try {
+      await ElMessageBox.confirm(
+        '请确认电脑环境是可信的，登录成功后会自动记住密码。',
+        '安全提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }
+      );
+      // 用户确认，等待登录成功后再保存
+    } catch {
+      // 用户取消，取消勾选
+      rememberMe.value = false;
+    }
+  } else {
+    // 取消勾选时清除缓存
+    localStorage.removeItem("loginAccount");
+    localStorage.removeItem("loginTenantName");
+    localStorage.removeItem("loginPassword");
+  }
+};
+
 const handleLogin = async () => {
   errorMsg.value = "";
-  if (!account.value || !password.value) {
+  if (!tenant_name.value || !account.value || !password.value) {
-    errorMsg.value = "请输入用户名和密码";
+    errorMsg.value = "请输入租户名称、用户名和密码";
     return;
   }
 
-  // 记住我本地存储
+  // 记住我的处理已在复选框变化时完成
-  if (rememberMe.value) {
+  if (!rememberMe.value) {
-    localStorage.setItem("loginAccount", account.value);
-    localStorage.setItem("loginRememberMe", "true");
-  } else {
     localStorage.removeItem("loginAccount");
+    localStorage.removeItem("loginTenantName");
+    localStorage.removeItem("loginPassword");
     localStorage.setItem("loginRememberMe", "false");
   }
 
   loading.value = true;
   try {
-    const res = await login(account.value, password.value);
+    const res = await login(account.value, password.value, tenant_name.value);
     if (res && res.code === 200) {
+      // 登录成功时保存登录信息（如果勾选了记住我）
+      if (rememberMe.value) {
+        localStorage.setItem("loginAccount", account.value);
+        localStorage.setItem("loginTenantName", tenant_name.value);
+        localStorage.setItem("loginPassword", password.value);
+        localStorage.setItem("loginRememberMe", "true");
+      }
+
       authStore.setLoginInfo(res.data);
 
       // 登录成功后重置 tabs store 为初始状态
@@ -223,13 +204,6 @@ const handleLogin = async () => {
       const tabsStore = useTabsStore();
       tabsStore.resetTabs();
 
-      // 登录成功后缓存菜单
-      try {
-      } catch (menuError) {
-        console.error("登录处理失败", menuError);
-        // 菜单加载失败不影响登录流程
-      }
-
       router.push({ path: "/home" });
     } else {
       errorMsg.value = res.msg || "登录失败";