From 31ec693a16cc2f554f8472cc842e6de8b4f5eebc Mon Sep 17 00:00:00 2001
From: hx <190679152@qq.com>
Date: Thu, 19 Mar 2026 17:09:26 +0800
Subject: [PATCH] =?UTF-8?q?b=E7=AB=AF=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/ruoyi.scss                  |  103 ++
 src/assets/styles/sidebar.scss                |   56 +-
 src/components/device/TrajectoryDialog.vue    | 1617 ++++++++---------
 src/components/device/index.vue               |   70 +-
 src/components/user/index.vue                 | 1004 +++++-----
 src/layout/components/Navbar.vue              |    4 +-
 src/layout/components/Sidebar/Item.vue        |   16 +-
 src/layout/index.vue                          |   54 +-
 src/main.js                                   |   20 +-
 src/settings.js                               |    2 +-
 src/views/device/device/index.vue             |  370 ++--
 src/views/system/role/index.vue               |  967 +++++-----
 .../user/components/ProfileSettingsCard.vue   |  100 +-
 src/views/system/user/index.vue               |  881 ++++-----
 14 files changed, 2642 insertions(+), 2622 deletions(-)

diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index ab4a1d2..e3f0862 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -130,6 +130,109 @@
   border-radius: 4px;
 }
 
+.page-query-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px 16px;
+  margin-bottom: 16px;
+}
+
+.page-query-form .el-form-item {
+  width: min(100%, 260px);
+  margin-right: 0;
+  margin-bottom: 0;
+}
+
+.page-query-form .el-form-item__label {
+  width: 100% !important;
+  float: none;
+  line-height: 20px;
+  padding: 0 0 6px;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.page-query-form .el-form-item__content {
+  width: 100%;
+  margin-left: 0 !important;
+}
+
+.page-query-form .page-query-actions {
+  width: auto;
+  min-width: 170px;
+}
+
+.page-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 0;
+}
+
+.page-toolbar .el-col {
+  width: auto !important;
+  max-width: none;
+  flex: 0 0 auto;
+}
+
+.page-toolbar .el-button {
+  white-space: nowrap;
+}
+
+.page-dialog-form .el-form-item__label {
+  white-space: normal;
+  line-height: 20px;
+}
+
+.page-dialog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 0 16px;
+}
+
+.page-dialog-grid--single {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.page-dialog-grid__full {
+  grid-column: 1 / -1;
+}
+
+.page-tree-option-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  margin-bottom: 8px;
+}
+
+.page-footer-meta {
+  float: left;
+  line-height: 32px;
+  color: #606266;
+}
+
+.page-summary-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 24px;
+  margin-bottom: 12px;
+  color: #606266;
+}
+
+.page-inline-filter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.page-inline-filter__label {
+  color: #606266;
+  font-size: 13px;
+}
+
 @media (max-width: 768px) {
   .pagination-container .el-pagination > .el-pagination__jump {
     display: none !important;
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 3558293..da1e8bb 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -3,7 +3,7 @@
   .main-container {
     height: 100%;
     transition: margin-left .28s;
-    margin-left: $base-sidebar-width;
+    margin-left: var(--sidebar-expanded-width, #{$base-sidebar-width});
     position: relative;
   }
 
@@ -14,7 +14,7 @@
   .sidebar-container {
     -webkit-transition: width .28s;
     transition: width 0.28s;
-    width: $base-sidebar-width !important;
+    width: var(--sidebar-expanded-width, #{$base-sidebar-width}) !important;
     background-color: $base-menu-background;
     height: 100%;
     position: fixed;
@@ -60,10 +60,6 @@
       overflow: hidden;
     }
 
-    .svg-icon {
-      margin-right: 16px;
-    }
-
     .el-menu {
       border: none;
       height: 100%;
@@ -71,11 +67,43 @@
     }
 
     .el-menu-item, .el-submenu__title {
+      display: flex;
+      align-items: center;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
     }
 
+    .menu-item-icon {
+      flex: 0 0 18px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      margin-right: 12px;
+      overflow: hidden;
+
+      .svg-icon {
+        margin-right: 0;
+      }
+    }
+
+    .menu-item-text {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: inherit;
+    }
+
+    .el-submenu__icon-arrow {
+      position: static;
+      margin-top: 0;
+      margin-left: 8px;
+      flex: 0 0 auto;
+    }
+
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
@@ -90,7 +118,7 @@
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
-      min-width: $base-sidebar-width !important;
+      min-width: var(--sidebar-expanded-width, #{$base-sidebar-width}) !important;
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.06) !important;
@@ -109,11 +137,11 @@
 
   .hideSidebar {
     .sidebar-container {
-      width: 54px !important;
+      width: var(--sidebar-collapsed-width, 54px) !important;
     }
 
     .main-container {
-      margin-left: 54px;
+      margin-left: var(--sidebar-collapsed-width, 54px);
     }
 
     .submenu-title-noDropdown {
@@ -121,10 +149,13 @@
       position: relative;
 
       .el-tooltip {
+        display: flex !important;
+        align-items: center;
         padding: 0 !important;
 
         .svg-icon {
           margin-left: 20px;
+          margin-right: 0;
         }
       }
     }
@@ -137,6 +168,7 @@
 
         .svg-icon {
           margin-left: 20px;
+          margin-right: 0;
         }
 
       }
@@ -158,7 +190,7 @@
   }
 
   .el-menu--collapse .el-menu .el-submenu {
-    min-width: $base-sidebar-width !important;
+    min-width: var(--sidebar-expanded-width, #{$base-sidebar-width}) !important;
   }
 
   // mobile responsive
@@ -169,14 +201,14 @@
 
     .sidebar-container {
       transition: transform .28s;
-      width: $base-sidebar-width !important;
+      width: var(--sidebar-expanded-width, #{$base-sidebar-width}) !important;
     }
 
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
-        transform: translate3d(-$base-sidebar-width, 0, 0);
+        transform: translate3d(calc(-1 * var(--sidebar-expanded-width, #{$base-sidebar-width})), 0, 0);
       }
     }
   }
diff --git a/src/components/device/TrajectoryDialog.vue b/src/components/device/TrajectoryDialog.vue
index cece6be..024dc13 100644
--- a/src/components/device/TrajectoryDialog.vue
+++ b/src/components/device/TrajectoryDialog.vue
@@ -1,887 +1,820 @@
 <template>
-<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1100px" append-to-body @open="handleOpen" @close="handleClose">
-    <div class="trajectory-summary">
-        <span>设备ID：{{ device && device.id ? device.id : "-" }}</span>
-        <span>序列号：{{ device && device.sn ? device.sn : "-" }}</span>
-        <span>名称：{{ device && device.alias ? device.alias : "-" }}</span>
-        <span>设备备注：{{ device && device.remark ? device.remark : "-" }}</span>
-        <span>显示轨迹点：{{ trajectoryPoints.length }}</span>
-        <span v-if="totalTrajectoryCount > trajectoryPoints.length">
-            共 {{ totalTrajectoryCount }} 条，当前仅展示最近 {{ trajectoryPoints.length }} 条
-        </span>
+  <el-dialog
+    :title="dialogTitle"
+    :visible.sync="dialogVisible"
+    width="1100px"
+    append-to-body
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <div class="page-summary-list trajectory-summary">
+      <span>{{ $t("device.trajectory.summary.id") }}: {{ device && device.id ? device.id : "-" }}</span>
+      <span>{{ $t("device.trajectory.summary.sn") }}: {{ device && device.sn ? device.sn : "-" }}</span>
+      <span>{{ $t("device.trajectory.summary.alias") }}: {{ device && device.alias ? device.alias : "-" }}</span>
+      <span>{{ $t("device.trajectory.summary.remark") }}: {{ device && device.remark ? device.remark : "-" }}</span>
+      <span>{{ $t("device.trajectory.summary.pointCount") }}: {{ trajectoryPoints.length }}</span>
+      <span v-if="totalTrajectoryCount > trajectoryPoints.length">
+        {{ $t("device.trajectory.summary.totalLimit", { total: totalTrajectoryCount, count: trajectoryPoints.length }) }}
+      </span>
     </div>
 
-    <div class="trajectory-filter">
-        <span class="trajectory-filter__label">位置时间</span>
-        <el-date-picker v-model="locationTimeRange" size="small" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :clearable="false" unlink-panels class="trajectory-filter__picker" />
-        <el-button type="primary" size="mini" :loading="loading" @click="handleSearch">
-            查询
-        </el-button>
-        <el-button size="mini" :disabled="loading" @click="handleResetSearch">
-            重置
-        </el-button>
+    <div class="page-inline-filter trajectory-filter">
+      <span class="page-inline-filter__label">{{ $t("device.trajectory.filter.locationTime") }}</span>
+      <el-date-picker
+        v-model="locationTimeRange"
+        size="small"
+        type="datetimerange"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        range-separator="-"
+        :start-placeholder="$t('device.trajectory.filter.startPlaceholder')"
+        :end-placeholder="$t('device.trajectory.filter.endPlaceholder')"
+        :clearable="false"
+        unlink-panels
+        class="trajectory-filter__picker"
+      />
+      <el-button type="primary" size="mini" :loading="loading" @click="handleSearch">
+        {{ $t("common.search") }}
+      </el-button>
+      <el-button size="mini" :disabled="loading" @click="handleResetSearch">
+        {{ $t("common.reset") }}
+      </el-button>
     </div>
 
-    <el-alert v-if="loadError" :title="loadError" type="warning" :closable="false" show-icon class="trajectory-alert" />
+    <el-alert
+      v-if="loadError"
+      :title="loadError"
+      type="warning"
+      :closable="false"
+      show-icon
+      class="trajectory-alert"
+    />
 
     <el-tabs v-model="activePanel" class="trajectory-tabs" @tab-click="handlePanelChange">
-        <el-tab-pane label="地图轨迹" name="map">
-            <div class="trajectory-toolbar">
-                <span class="trajectory-toolbar__label">地图服务</span>
-                <el-radio-group v-model="mapProvider" size="small" @change="handleProviderChange">
-                    <el-radio-button label="amap" :disabled="!hasAmapKey">
-                        高德地图
-                    </el-radio-button>
-                    <el-radio-button label="google" :disabled="!hasGoogleKey">
-                        谷歌地图
-                    </el-radio-button>
-                </el-radio-group>
-            </div>
-
-            <div class="trajectory-map-shell" v-loading="loading || mapLoading">
-                <el-empty v-if="!loading && !mapLoading && !loadError && !trajectoryPoints.length" description="暂无轨迹数据" :image-size="88" />
-                <div v-show="!loadError && trajectoryPoints.length" ref="map" class="trajectory-map"></div>
-            </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="轨迹明细" name="table">
-            <el-empty v-if="!loading && !trajectoryPoints.length" description="暂无轨迹数据" :image-size="88" />
-            <el-table v-else :data="trajectoryPoints" border size="mini" max-height="420" class="trajectory-table">
-                <el-table-column label="#" type="index" width="60" align="center" />
-                <el-table-column label="位置时间" min-width="180" align="center">
-                    <template slot-scope="scope">
-                        {{
-                formatTrackTime(
-                  scope.row.locationTime ||
-                    scope.row.reportedTime ||
-                    scope.row.createTime
-                )
-              }}
-                    </template>
-                </el-table-column>
-                <el-table-column label="经纬度" min-width="220" align="center">
-                    <template slot-scope="scope">
-                        {{ formatTrackCoordinates(scope.row.lat, scope.row.lng) }}
-                    </template>
-                </el-table-column>
-                <el-table-column label="地址" min-width="240" align="center">
-                    <template slot-scope="scope">
-                        {{ scope.row.address || "-" }}
-                    </template>
-                </el-table-column>
-                <el-table-column label="电量" prop="battery" width="100" align="center" />
-            </el-table>
-        </el-tab-pane>
+      <el-tab-pane :label="$t('device.trajectory.tabs.map')" name="map">
+        <div class="trajectory-toolbar">
+          <span class="page-inline-filter__label">{{ $t("device.trajectory.provider.label") }}</span>
+          <el-radio-group v-model="mapProvider" size="small" @change="handleProviderChange">
+            <el-radio-button label="amap" :disabled="!hasAmapKey">
+              {{ $t("device.trajectory.provider.amap") }}
+            </el-radio-button>
+            <el-radio-button label="google" :disabled="!hasGoogleKey">
+              {{ $t("device.trajectory.provider.google") }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+
+        <div class="trajectory-map-shell" v-loading="loading || mapLoading">
+          <el-empty
+            v-if="!loading && !mapLoading && !loadError && !trajectoryPoints.length"
+            :description="$t('device.trajectory.empty')"
+            :image-size="88"
+          />
+          <div v-show="!loadError && trajectoryPoints.length" ref="map" class="trajectory-map"></div>
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane :label="$t('device.trajectory.tabs.table')" name="table">
+        <el-empty
+          v-if="!loading && !trajectoryPoints.length"
+          :description="$t('device.trajectory.empty')"
+          :image-size="88"
+        />
+        <el-table v-else :data="trajectoryPoints" border size="mini" max-height="420" class="trajectory-table">
+          <el-table-column label="#" type="index" width="60" align="center" />
+          <el-table-column :label="$t('device.trajectory.table.time')" min-width="180" align="center">
+            <template slot-scope="scope">
+              {{ formatTrackTime(scope.row.locationTime || scope.row.reportedTime || scope.row.createTime) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('device.trajectory.table.coordinates')" min-width="220" align="center">
+            <template slot-scope="scope">
+              {{ formatTrackCoordinates(scope.row.lat, scope.row.lng) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('device.trajectory.table.address')" min-width="240" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.address || "-" }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('device.trajectory.table.battery')" prop="battery" width="100" align="center" />
+        </el-table>
+      </el-tab-pane>
     </el-tabs>
 
     <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
+      <el-button type="primary" @click="dialogVisible = false">{{ $t("device.button.close") }}</el-button>
     </div>
-</el-dialog>
+  </el-dialog>
 </template>
 
 <script>
-import {
-    getDeviceTrajectory,
-    getDeviceTrajectoryMapConfig,
-} from "@/api/device/device";
-import {
-    loadAMap
-} from "@/utils/loadAMap";
-import {
-    loadGoogleMaps
-} from "@/utils/loadGoogleMaps";
+import { getDeviceTrajectory, getDeviceTrajectoryMapConfig } from "@/api/device/device";
+import { loadAMap } from "@/utils/loadAMap";
+import { loadGoogleMaps } from "@/utils/loadGoogleMaps";
 
 const AMAP_DEFAULT_CENTER = [121.4737, 31.2304];
-const GOOGLE_DEFAULT_CENTER = {
-    lat: 31.2304,
-    lng: 121.4737
-};
+const GOOGLE_DEFAULT_CENTER = { lat: 31.2304, lng: 121.4737 };
 const CONVERT_BATCH_SIZE = 40;
 const MAX_TRAJECTORY_POINTS = 100;
 
 export default {
-    name: "DeviceTrajectoryDialog",
-    props: {
-        visible: {
-            type: Boolean,
-            default: false,
-        },
-        device: {
-            type: Object,
-            default: () => ({}),
-        },
-    },
-    data() {
-        return {
-            activePanel: "map",
-            mapProvider: "amap",
-            loading: false,
-            mapLoading: false,
-            loadError: "",
-            trajectoryPoints: [],
-            totalTrajectoryCount: 0,
-            map: null,
-            mapVendor: "",
-            polyline: null,
-            markers: [],
-            markerInfoWindows: [],
-            mapsApi: null,
-            mapConfig: null,
-            locationTimeRange: [],
-        };
+  name: "DeviceTrajectoryDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
     },
-    computed: {
-        dialogVisible: {
-            get() {
-                return this.visible;
-            },
-            set(value) {
-                this.$emit("update:visible", value);
-            },
-        },
-        dialogTitle() {
-            const sn = this.device && this.device.sn ? this.device.sn : "";
-            return sn ? `设备轨迹 - ${sn}` : "设备轨迹";
-        },
-        hasAmapKey() {
-            return !!(this.mapConfig && this.mapConfig.gaodeKey);
-        },
-        hasGoogleKey() {
-            return !!(this.mapConfig && this.mapConfig.googleKey);
-        },
-    },
-    methods: {
-        async handleOpen() {
-            this.activePanel = "map";
-            this.initDefaultLocationTimeRange();
-            if (!this.device || !this.device.id) {
-                this.loadError = "未获取到设备信息，无法查看轨迹";
-                return;
-            }
-            await this.fetchMapConfig();
-            if (this.loadError) {
-                return;
-            }
-            this.mapProvider = this.resolveDefaultProvider();
-            await this.fetchTrajectory();
-            if (!this.trajectoryPoints.length || this.loadError) {
-                return;
-            }
-            await this.renderCurrentProviderMap();
-        },
-        handleClose() {
-            this.destroyMap(true);
-            this.activePanel = "map";
-            this.mapProvider = "amap";
-            this.loadError = "";
-            this.trajectoryPoints = [];
-            this.totalTrajectoryCount = 0;
-            this.mapConfig = null;
-            this.locationTimeRange = [];
-        },
-        async handlePanelChange() {
-            if (this.activePanel !== "map" || !this.trajectoryPoints.length) {
-                return;
-            }
-            await this.renderCurrentProviderMap();
-        },
-        async handleProviderChange() {
-            if (this.activePanel !== "map" || !this.trajectoryPoints.length) {
-                return;
-            }
-            this.destroyMap(true);
-            await this.renderCurrentProviderMap();
-        },
-        resolveDefaultProvider() {
-            if (this.hasAmapKey) {
-                return "amap";
-            }
-            if (this.hasGoogleKey) {
-                return "google";
-            }
-            return "amap";
-        },
-        initDefaultLocationTimeRange() {
-            const now = new Date();
-            const start = new Date(
-                now.getFullYear(),
-                now.getMonth(),
-                now.getDate(),
-                0,
-                0,
-                0
-            );
-            const end = new Date(
-                now.getFullYear(),
-                now.getMonth(),
-                now.getDate(),
-                23,
-                59,
-                59
-            );
-            this.locationTimeRange = [
-                this.formatDateTime(start),
-                this.formatDateTime(end),
-            ];
-        },
-        formatDateTime(date) {
-            if (!(date instanceof Date)) {
-                return "";
-            }
-            const pad = (value) => String(value).padStart(2, "0");
-            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
-        date.getDate()
-      )} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
-        date.getSeconds()
-      )}`;
-        },
-        buildTrajectoryQuery() {
-            if (!Array.isArray(this.locationTimeRange)) {
-                return {};
-            }
-            const startLocationTime = this.locationTimeRange[0];
-            const endLocationTime = this.locationTimeRange[1];
+    device: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      activePanel: "map",
+      mapProvider: "amap",
+      loading: false,
+      mapLoading: false,
+      loadError: "",
+      trajectoryPoints: [],
+      totalTrajectoryCount: 0,
+      map: null,
+      mapVendor: "",
+      polyline: null,
+      markers: [],
+      markerInfoWindows: [],
+      mapsApi: null,
+      mapConfig: null,
+      locationTimeRange: [],
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(value) {
+        this.$emit("update:visible", value);
+      },
+    },
+    dialogTitle() {
+      const sn = this.device && this.device.sn ? this.device.sn : "";
+      return sn
+        ? this.$t("device.trajectory.dialogTitleWithSn", { sn })
+        : this.$t("device.trajectory.dialogTitle");
+    },
+    hasAmapKey() {
+      return !!(this.mapConfig && this.mapConfig.gaodeKey);
+    },
+    hasGoogleKey() {
+      return !!(this.mapConfig && this.mapConfig.googleKey);
+    },
+  },
+  methods: {
+    async handleOpen() {
+      this.activePanel = "map";
+      this.initDefaultLocationTimeRange();
+      if (!this.device || !this.device.id) {
+        this.loadError = this.$t("device.trajectory.message.missingDevice");
+        return;
+      }
+      await this.fetchMapConfig();
+      if (this.loadError) {
+        return;
+      }
+      this.mapProvider = this.resolveDefaultProvider();
+      await this.fetchTrajectory();
+      if (!this.trajectoryPoints.length || this.loadError) {
+        return;
+      }
+      await this.renderCurrentProviderMap();
+    },
+    handleClose() {
+      this.destroyMap(true);
+      this.activePanel = "map";
+      this.mapProvider = "amap";
+      this.loadError = "";
+      this.trajectoryPoints = [];
+      this.totalTrajectoryCount = 0;
+      this.mapConfig = null;
+      this.locationTimeRange = [];
+    },
+    async handlePanelChange() {
+      if (this.activePanel !== "map" || !this.trajectoryPoints.length) {
+        return;
+      }
+      await this.renderCurrentProviderMap();
+    },
+    async handleProviderChange() {
+      if (this.activePanel !== "map" || !this.trajectoryPoints.length) {
+        return;
+      }
+      this.destroyMap(true);
+      await this.renderCurrentProviderMap();
+    },
+    resolveDefaultProvider() {
+      if (this.hasAmapKey) {
+        return "amap";
+      }
+      if (this.hasGoogleKey) {
+        return "google";
+      }
+      return "amap";
+    },
+    initDefaultLocationTimeRange() {
+      const now = new Date();
+      const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+      const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
+      this.locationTimeRange = [this.formatDateTime(start), this.formatDateTime(end)];
+    },
+    formatDateTime(date) {
+      if (!(date instanceof Date)) {
+        return "";
+      }
+      const pad = (value) => String(value).padStart(2, "0");
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(
+        date.getHours()
+      )}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+    },
+    buildTrajectoryQuery() {
+      if (!Array.isArray(this.locationTimeRange)) {
+        return {};
+      }
+      return {
+        startLocationTime: this.locationTimeRange[0],
+        endLocationTime: this.locationTimeRange[1],
+      };
+    },
+    async handleSearch() {
+      if (!this.device || !this.device.id) {
+        return;
+      }
+      await this.fetchTrajectory();
+      if (this.activePanel !== "map") {
+        return;
+      }
+      this.destroyMap(true);
+      if (!this.loadError && this.trajectoryPoints.length) {
+        await this.renderCurrentProviderMap();
+      }
+    },
+    async handleResetSearch() {
+      this.initDefaultLocationTimeRange();
+      await this.handleSearch();
+    },
+    async fetchMapConfig() {
+      this.loadError = "";
+      try {
+        const response = await getDeviceTrajectoryMapConfig();
+        const data = response && response.data ? response.data : {};
+        if (!data.gaodeKey && !data.googleKey) {
+          this.loadError = this.$t("device.trajectory.message.missingMapKey");
+          return;
+        }
+        this.mapConfig = data;
+      } catch (error) {
+        this.mapConfig = null;
+        this.loadError = error && error.message ? error.message : this.$t("device.trajectory.message.mapConfigLoadFailed");
+      }
+    },
+    async fetchTrajectory() {
+      this.loading = true;
+      this.loadError = "";
+      try {
+        const response = await getDeviceTrajectory(this.device.id, this.buildTrajectoryQuery());
+        const data = Array.isArray(response.data) ? response.data : [];
+        const validPoints = data
+          .map((item) => {
+            const latNum = this.normalizeCoordinate(item.lat, "lat");
+            const lngNum = this.normalizeCoordinate(item.lng, "lng");
             return {
-                startLocationTime,
-                endLocationTime,
+              ...item,
+              latNum,
+              lngNum,
             };
-        },
-        async handleSearch() {
-            if (!this.device || !this.device.id) {
-                return;
-            }
-            await this.fetchTrajectory();
-            if (this.activePanel !== "map") {
-                return;
-            }
-            this.destroyMap(true);
-            if (!this.loadError && this.trajectoryPoints.length) {
-                await this.renderCurrentProviderMap();
-            }
-        },
-        async handleResetSearch() {
-            this.initDefaultLocationTimeRange();
-            await this.handleSearch();
-        },
-        async fetchMapConfig() {
-            this.loadError = "";
-            try {
-                const response = await getDeviceTrajectoryMapConfig();
-                const data = response && response.data ? response.data : {};
-                if (!data.gaodeKey && !data.googleKey) {
-                    this.loadError = "当前企业未配置地图 Key";
-                    return;
-                }
-                this.mapConfig = data;
-            } catch (error) {
-                this.mapConfig = null;
-                this.loadError =
-                    error && error.message ? error.message : "地图配置加载失败";
-            }
-        },
-        async fetchTrajectory() {
-            this.loading = true;
-            this.loadError = "";
-            try {
-                const response = await getDeviceTrajectory(
-                    this.device.id,
-                    this.buildTrajectoryQuery()
-                );
-                const data = Array.isArray(response.data) ? response.data : [];
-                const validPoints = data
-                    .map((item) => {
-                        const latNum = this.normalizeCoordinate(item.lat, "lat");
-                        const lngNum = this.normalizeCoordinate(item.lng, "lng");
-                        return {
-                            ...item,
-                            latNum,
-                            lngNum,
-                        };
-                    })
-                    .filter((item) => item.latNum !== null && item.lngNum !== null);
-                this.totalTrajectoryCount = validPoints.length;
-                this.trajectoryPoints = validPoints.slice(-MAX_TRAJECTORY_POINTS);
-            } catch (error) {
-                this.trajectoryPoints = [];
-                this.totalTrajectoryCount = 0;
-                this.loadError = error && error.message ? error.message : "轨迹加载失败";
-            } finally {
-                this.loading = false;
-            }
-        },
-        async renderCurrentProviderMap() {
-            if (!this.trajectoryPoints.length) {
-                return;
-            }
-            this.loadError = "";
-            await this.$nextTick();
-            if (this.mapProvider === "google") {
-                await this.ensureGoogleMap();
-                if (!this.loadError) {
-                    this.renderGoogleTrajectory();
-                }
-                return;
-            }
-            await this.ensureAmap();
-            if (!this.loadError) {
-                await this.prepareTrajectoryForAmap();
-                this.renderAmapTrajectory();
-            }
-        },
-        async ensureAmap() {
-            if (!this.hasAmapKey) {
-                this.loadError = "当前企业未配置高德地图 Key";
-                return;
-            }
-            this.mapLoading = true;
-            try {
-                const mapsApi = await loadAMap({
-                    key: this.mapConfig.gaodeKey,
-                    securityJsCode: this.mapConfig.gaodeSecurityKey || "",
-                    plugins: ["AMap.Scale", "AMap.ToolBar"],
-                });
-                if (!this.$refs.map) {
-                    return;
-                }
-                if (!this.map || this.mapVendor !== "amap") {
-                    this.destroyMap();
-                    this.mapsApi = mapsApi;
-                    this.map = new mapsApi.Map(this.$refs.map, {
-                        center: AMAP_DEFAULT_CENTER,
-                        zoom: 4,
-                        resizeEnable: true,
-                        viewMode: "2D",
-                    });
-                    this.mapVendor = "amap";
-                    if (mapsApi.Scale) {
-                        this.map.addControl(new mapsApi.Scale());
-                    }
-                    if (mapsApi.ToolBar) {
-                        this.map.addControl(new mapsApi.ToolBar());
-                    }
-                } else if (typeof this.map.resize === "function") {
-                    this.mapsApi = mapsApi;
-                    this.map.resize();
-                }
-            } catch (error) {
-                this.loadError = error && error.message ? error.message : "高德地图加载失败";
-            } finally {
-                this.mapLoading = false;
-            }
-        },
-        async ensureGoogleMap() {
-            if (!this.hasGoogleKey) {
-                this.loadError = "当前企业未配置谷歌地图 Key";
-                return;
-            }
-            this.mapLoading = true;
-            try {
-                const mapsApi = await loadGoogleMaps(this.mapConfig.googleKey);
-                if (!this.$refs.map) {
-                    return;
-                }
-                if (!this.map || this.mapVendor !== "google") {
-                    this.destroyMap();
-                    this.mapsApi = mapsApi;
-                    this.map = new mapsApi.Map(this.$refs.map, {
-                        center: GOOGLE_DEFAULT_CENTER,
-                        zoom: 4,
-                        mapTypeControl: false,
-                        streetViewControl: false,
-                        fullscreenControl: true,
-                    });
-                    this.mapVendor = "google";
-                } else if (mapsApi.event) {
-                    this.mapsApi = mapsApi;
-                    mapsApi.event.trigger(this.map, "resize");
-                }
-            } catch (error) {
-                this.loadError = error && error.message ? error.message : "谷歌地图加载失败";
-            } finally {
-                this.mapLoading = false;
-            }
-        },
-        async prepareTrajectoryForAmap() {
-            if (
-                this.trajectoryPoints.every(
-                    (item) => item.amapLng !== undefined && item.amapLat !== undefined
-                )
-            ) {
-                return;
-            }
-            const convertedPoints = await this.convertTrajectoryCoordinates(
-                this.trajectoryPoints
-            );
-            this.trajectoryPoints = this.trajectoryPoints.map((item, index) => {
-                const convertedPoint = convertedPoints[index];
-                return {
-                    ...item,
-                    amapLng: convertedPoint ? convertedPoint.lng : item.lngNum,
-                    amapLat: convertedPoint ? convertedPoint.lat : item.latNum,
-                };
-            });
-        },
-        async convertTrajectoryCoordinates(points) {
-            if (!this.mapsApi || !Array.isArray(points) || !points.length) {
-                return [];
-            }
-            const sourcePoints = points.map((item) => [item.lngNum, item.latNum]);
-            if (typeof this.mapsApi.convertFrom !== "function") {
-                return sourcePoints.map((item) => ({
-                    lng: item[0],
-                    lat: item[1]
-                }));
-            }
-            try {
-                const convertedPoints = [];
-                for (
-                    let index = 0; index < sourcePoints.length; index += CONVERT_BATCH_SIZE
-                ) {
-                    const batch = sourcePoints.slice(index, index + CONVERT_BATCH_SIZE);
-                    const convertedBatch = await this.convertBatch(batch);
-                    convertedPoints.push(...convertedBatch);
-                }
-                if (convertedPoints.length === sourcePoints.length) {
-                    return convertedPoints;
-                }
-            } catch (error) {
-                return sourcePoints.map((item) => ({
-                    lng: item[0],
-                    lat: item[1]
-                }));
-            }
-            return sourcePoints.map((item) => ({
-                lng: item[0],
-                lat: item[1]
-            }));
-        },
-        convertBatch(points) {
-            return new Promise((resolve, reject) => {
-                if (!points.length) {
-                    resolve([]);
-                    return;
-                }
-                this.mapsApi.convertFrom(points, "gps", (status, result) => {
-                    if (
-                        status === "complete" &&
-                        result &&
-                        Array.isArray(result.locations) &&
-                        result.locations.length === points.length
-                    ) {
-                        resolve(
-                            result.locations.map((location) => ({
-                                lng: Number(location.lng.toFixed(7)),
-                                lat: Number(location.lat.toFixed(7)),
-                            }))
-                        );
-                        return;
-                    }
-                    reject(new Error("高德坐标转换失败"));
-                });
-            });
-        },
-        renderAmapTrajectory() {
-            if (!this.map || !this.mapsApi || !this.trajectoryPoints.length) {
-                return;
-            }
-            const mapPoints = this.getMapOrderedTrajectoryPoints();
-            if (!mapPoints.length) {
-                return;
-            }
-            this.clearOverlays();
-            const path = mapPoints.map((item) => [
-                item.amapLng !== undefined ? item.amapLng : item.lngNum,
-                item.amapLat !== undefined ? item.amapLat : item.latNum,
-            ]);
-
-            this.polyline = new this.mapsApi.Polyline({
-                path,
-                strokeColor: "#1a73e8",
-                strokeOpacity: 0.9,
-                strokeWeight: 5,
-                lineJoin: "round",
-                showDir: true,
-            });
-
-            const startPoint = path[0];
-            const endPoint = path[path.length - 1];
-            const startItem = mapPoints[0];
-            const endItem = mapPoints[mapPoints.length - 1];
-
-            this.markers = [
-                new this.mapsApi.Marker({
-                    position: startPoint,
-                    content: this.buildAmapMarkerContent(
-                        "起",
-                        "#67c23a",
-                        this.getPointTrackTime(startItem)
-                    ),
-                    offset: new this.mapsApi.Pixel(-44, -52),
-                }),
-            ];
-
-            if (path.length > 1) {
-                this.markers.push(
-                    new this.mapsApi.Marker({
-                        position: endPoint,
-                        content: this.buildAmapMarkerContent(
-                            "终",
-                            "#f56c6c",
-                            this.getPointTrackTime(endItem)
-                        ),
-                        offset: new this.mapsApi.Pixel(-44, -52),
-                    })
-                );
-            }
-
-            this.map.add(this.polyline);
-            this.map.add(this.markers);
-
-            if (path.length === 1) {
-                this.map.setZoomAndCenter(15, startPoint);
-            } else {
-                this.map.setFitView(
-                    [this.polyline].concat(this.markers),
-                    false,
-                    [60, 60, 60, 60]
-                );
-            }
-        },
-        renderGoogleTrajectory() {
-            if (!this.map || !this.mapsApi || !this.trajectoryPoints.length) {
-                return;
-            }
-            const mapPoints = this.getMapOrderedTrajectoryPoints();
-            if (!mapPoints.length) {
-                return;
-            }
-            this.clearOverlays();
-            const path = mapPoints.map((item) => ({
-                lat: item.latNum,
-                lng: item.lngNum,
-            }));
-            const bounds = new this.mapsApi.LatLngBounds();
-            path.forEach((point) => bounds.extend(point));
-
-            const polylineOptions = {
-                path,
-                geodesic: true,
-                strokeColor: "#1a73e8",
-                strokeOpacity: 0.9,
-                strokeWeight: 4,
-            };
-            if (path.length > 1 && this.mapsApi.SymbolPath) {
-                polylineOptions.icons = [{
-                    icon: {
-                        path: this.mapsApi.SymbolPath.FORWARD_CLOSED_ARROW,
-                        scale: 2.2,
-                        strokeColor: "#1a73e8",
-                        strokeOpacity: 0.95,
-                        fillColor: "#1a73e8",
-                        fillOpacity: 0.95,
-                    },
-                    offset: "100%",
-                    repeat: "120px",
-                }, ];
-            }
-            this.polyline = new this.mapsApi.Polyline(polylineOptions);
-            this.polyline.setMap(this.map);
-
-            const startPoint = path[0];
-            const endPoint = path[path.length - 1];
-            const startItem = mapPoints[0];
-            const endItem = mapPoints[mapPoints.length - 1];
-
-            this.markers = [
-                new this.mapsApi.Marker({
-                    position: startPoint,
-                    map: this.map,
-                    label: "起",
-                }),
-            ];
-
-            if (path.length > 1) {
-                this.markers.push(
-                    new this.mapsApi.Marker({
-                        position: endPoint,
-                        map: this.map,
-                        label: "终",
-                    })
-                );
-            }
-
-            const startInfoWindow = this.openGoogleMarkerInfoWindow(
-                this.markers[0],
-                "开始时间",
-                this.getPointTrackTime(startItem)
-            );
-            if (startInfoWindow) {
-                this.markerInfoWindows.push(startInfoWindow);
-            }
-
-            if (this.markers.length > 1) {
-                const endInfoWindow = this.openGoogleMarkerInfoWindow(
-                    this.markers[this.markers.length - 1],
-                    "结束时间",
-                    this.getPointTrackTime(endItem)
-                );
-                if (endInfoWindow) {
-                    this.markerInfoWindows.push(endInfoWindow);
-                }
-            }
-
-            if (path.length === 1) {
-                this.map.setCenter(startPoint);
-                this.map.setZoom(15);
-            } else {
-                this.map.fitBounds(bounds);
-            }
-        },
-        openGoogleMarkerInfoWindow(marker, title, timeText) {
-            if (!this.mapsApi || !this.map || !marker || !this.mapsApi.InfoWindow) {
-                return null;
-            }
-            const infoWindow = new this.mapsApi.InfoWindow({
-                content: '<div style="min-width:160px;padding:6px 8px;line-height:1.6;">' +
-                    '<div style="font-weight:600;color:#303133;">' +
-                    this.escapeHtml(title) +
-                    "</div>" +
-                    '<div style="color:#606266;">' +
-                    this.escapeHtml(timeText || "-") +
-                    "</div>" +
-                    "</div>",
-            });
-            infoWindow.open({
-                anchor: marker,
-                map: this.map,
-                shouldFocus: false,
-            });
-            return infoWindow;
-        },
-        buildAmapMarkerContent(label, color, timeText) {
-            return (
-                '<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">' +
-                '<div style="' +
-                "min-width:28px;height:28px;border-radius:14px;" +
-                "background:" +
-                color +
-                ";color:#fff;display:flex;align-items:center;justify-content:center;" +
-                'font-size:12px;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,0.18);">' +
-                this.escapeHtml(label) +
-                "</div>" +
-                '<div style="padding:4px 8px;border-radius:6px;background:rgba(255,255,255,0.96);color:#303133;font-size:12px;line-height:1.4;box-shadow:0 4px 10px rgba(0,0,0,0.12);white-space:nowrap;">' +
-                this.escapeHtml(timeText || "-") +
-                "</div>" +
-                "</div>"
-            );
-        },
-        clearOverlays() {
-            if (!this.map) {
-                this.polyline = null;
-                this.markers = [];
-                this.markerInfoWindows = [];
-                return;
-            }
-            if (this.mapVendor === "google") {
-                if (this.polyline) {
-                    this.polyline.setMap(null);
-                }
-                if (this.markers.length) {
-                    this.markers.forEach((marker) => marker.setMap(null));
-                }
-                if (this.markerInfoWindows.length) {
-                    this.markerInfoWindows.forEach((infoWindow) => {
-                        if (infoWindow && typeof infoWindow.close === "function") {
-                            infoWindow.close();
-                        }
-                    });
-                }
-            } else {
-                if (this.polyline) {
-                    this.map.remove(this.polyline);
-                }
-                if (this.markers.length) {
-                    this.map.remove(this.markers);
-                }
-            }
-            this.polyline = null;
-            this.markers = [];
-            this.markerInfoWindows = [];
-        },
-        destroyMap(resetVendor = false) {
-            this.clearOverlays();
-            if (!this.map) {
-                if (resetVendor) {
-                    this.mapVendor = "";
-                    this.mapsApi = null;
-                }
-                return;
-            }
-            if (this.mapVendor === "amap" && typeof this.map.destroy === "function") {
-                this.map.destroy();
-            } else if (this.$refs.map) {
-                this.$refs.map.innerHTML = "";
-            }
-            this.map = null;
-            if (resetVendor) {
-                this.mapVendor = "";
-                this.mapsApi = null;
-            }
-        },
-        normalizeCoordinate(value, type) {
-            if (value === undefined || value === null || value === "") {
-                return null;
-            }
-            const numberValue = Number(value);
-            if (!Number.isFinite(numberValue)) {
-                return null;
-            }
-            const directLimit = type === "lat" ? 90 : 180;
-            const normalizedValue =
-                Math.abs(numberValue) > directLimit ?
-                numberValue / 10000000 :
-                numberValue;
-            if (Math.abs(normalizedValue) > directLimit) {
-                return null;
-            }
-            return Number(normalizedValue.toFixed(7));
-        },
-        formatTrackTime(value) {
-            if (!value) {
-                return "-";
-            }
-            return this.parseTime ? this.parseTime(value) : value;
-        },
-        formatCoordinateValue(value) {
-            if (value === null || value === undefined) {
-                return "-";
-            }
-            const strValue = String(value).trim();
-            if (!strValue || strValue === "-") {
-                return "-";
-            }
-            const match = strValue.match(/^([+-]?\d+)(?:\.(\d+))?$/);
-            if (!match) {
-                return "-";
-            }
-            const integerPart = match[1];
-            const decimalPart = match[2] || "";
-            const fixedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
-
-            return `${integerPart}.${fixedDecimal}`;
-        },
-        formatTrackCoordinates(lat, lng) {
-            return `${this.formatCoordinateValue(lat)} / ${this.formatCoordinateValue(lng)}`;
-        },
-        getPointTrackTime(point) {
-            if (!point) {
-                return "-";
-            }
-            return this.formatTrackTime(
-                point.locationTime || point.reportedTime || point.createTime
-            );
-        },
-        getMapOrderedTrajectoryPoints() {
-            if (!Array.isArray(this.trajectoryPoints) || !this.trajectoryPoints.length) {
-                return [];
-            }
-            if (this.trajectoryPoints.length < 2) {
-                return this.trajectoryPoints.slice();
-            }
-            const firstTs = this.getTrackTimestamp(this.trajectoryPoints[0]);
-            const lastTs = this.getTrackTimestamp(
-                this.trajectoryPoints[this.trajectoryPoints.length - 1]
+          })
+          .filter((item) => item.latNum !== null && item.lngNum !== null);
+        this.totalTrajectoryCount = validPoints.length;
+        this.trajectoryPoints = validPoints.slice(-MAX_TRAJECTORY_POINTS);
+      } catch (error) {
+        this.trajectoryPoints = [];
+        this.totalTrajectoryCount = 0;
+        this.loadError = error && error.message ? error.message : this.$t("device.trajectory.message.trajectoryLoadFailed");
+      } finally {
+        this.loading = false;
+      }
+    },
+    async renderCurrentProviderMap() {
+      if (!this.trajectoryPoints.length) {
+        return;
+      }
+      this.loadError = "";
+      await this.$nextTick();
+      if (this.mapProvider === "google") {
+        await this.ensureGoogleMap();
+        if (!this.loadError) {
+          this.renderGoogleTrajectory();
+        }
+        return;
+      }
+      await this.ensureAmap();
+      if (!this.loadError) {
+        await this.prepareTrajectoryForAmap();
+        this.renderAmapTrajectory();
+      }
+    },
+    async ensureAmap() {
+      if (!this.hasAmapKey) {
+        this.loadError = this.$t("device.trajectory.message.missingAmapKey");
+        return;
+      }
+      this.mapLoading = true;
+      try {
+        const mapsApi = await loadAMap({
+          key: this.mapConfig.gaodeKey,
+          securityJsCode: this.mapConfig.gaodeSecurityKey || "",
+          plugins: ["AMap.Scale", "AMap.ToolBar"],
+        });
+        if (!this.$refs.map) {
+          return;
+        }
+        if (!this.map || this.mapVendor !== "amap") {
+          this.destroyMap();
+          this.mapsApi = mapsApi;
+          this.map = new mapsApi.Map(this.$refs.map, {
+            center: AMAP_DEFAULT_CENTER,
+            zoom: 4,
+            resizeEnable: true,
+            viewMode: "2D",
+          });
+          this.mapVendor = "amap";
+          if (mapsApi.Scale) {
+            this.map.addControl(new mapsApi.Scale());
+          }
+          if (mapsApi.ToolBar) {
+            this.map.addControl(new mapsApi.ToolBar());
+          }
+        } else if (typeof this.map.resize === "function") {
+          this.mapsApi = mapsApi;
+          this.map.resize();
+        }
+      } catch (error) {
+        this.loadError = error && error.message ? error.message : this.$t("device.trajectory.message.amapLoadFailed");
+      } finally {
+        this.mapLoading = false;
+      }
+    },
+    async ensureGoogleMap() {
+      if (!this.hasGoogleKey) {
+        this.loadError = this.$t("device.trajectory.message.missingGoogleKey");
+        return;
+      }
+      this.mapLoading = true;
+      try {
+        const mapsApi = await loadGoogleMaps(this.mapConfig.googleKey);
+        if (!this.$refs.map) {
+          return;
+        }
+        if (!this.map || this.mapVendor !== "google") {
+          this.destroyMap();
+          this.mapsApi = mapsApi;
+          this.map = new mapsApi.Map(this.$refs.map, {
+            center: GOOGLE_DEFAULT_CENTER,
+            zoom: 4,
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: true,
+          });
+          this.mapVendor = "google";
+        } else if (mapsApi.event) {
+          this.mapsApi = mapsApi;
+          mapsApi.event.trigger(this.map, "resize");
+        }
+      } catch (error) {
+        this.loadError = error && error.message ? error.message : this.$t("device.trajectory.message.googleLoadFailed");
+      } finally {
+        this.mapLoading = false;
+      }
+    },
+    async prepareTrajectoryForAmap() {
+      if (this.trajectoryPoints.every((item) => item.amapLng !== undefined && item.amapLat !== undefined)) {
+        return;
+      }
+      const convertedPoints = await this.convertTrajectoryCoordinates(this.trajectoryPoints);
+      this.trajectoryPoints = this.trajectoryPoints.map((item, index) => {
+        const convertedPoint = convertedPoints[index];
+        return {
+          ...item,
+          amapLng: convertedPoint ? convertedPoint.lng : item.lngNum,
+          amapLat: convertedPoint ? convertedPoint.lat : item.latNum,
+        };
+      });
+    },
+    async convertTrajectoryCoordinates(points) {
+      if (!this.mapsApi || !Array.isArray(points) || !points.length) {
+        return [];
+      }
+      const sourcePoints = points.map((item) => [item.lngNum, item.latNum]);
+      if (typeof this.mapsApi.convertFrom !== "function") {
+        return sourcePoints.map((item) => ({ lng: item[0], lat: item[1] }));
+      }
+      try {
+        const convertedPoints = [];
+        for (let index = 0; index < sourcePoints.length; index += CONVERT_BATCH_SIZE) {
+          const batch = sourcePoints.slice(index, index + CONVERT_BATCH_SIZE);
+          const convertedBatch = await this.convertBatch(batch);
+          convertedPoints.push(...convertedBatch);
+        }
+        if (convertedPoints.length === sourcePoints.length) {
+          return convertedPoints;
+        }
+      } catch (error) {
+        return sourcePoints.map((item) => ({ lng: item[0], lat: item[1] }));
+      }
+      return sourcePoints.map((item) => ({ lng: item[0], lat: item[1] }));
+    },
+    convertBatch(points) {
+      return new Promise((resolve, reject) => {
+        if (!points.length) {
+          resolve([]);
+          return;
+        }
+        this.mapsApi.convertFrom(points, "gps", (status, result) => {
+          if (
+            status === "complete" &&
+            result &&
+            Array.isArray(result.locations) &&
+            result.locations.length === points.length
+          ) {
+            resolve(
+              result.locations.map((location) => ({
+                lng: Number(location.lng.toFixed(7)),
+                lat: Number(location.lat.toFixed(7)),
+              }))
             );
-            if (firstTs > 0 && lastTs > 0 && firstTs > lastTs) {
-                return this.trajectoryPoints.slice().reverse();
-            }
-            return this.trajectoryPoints.slice();
-        },
-        getTrackTimestamp(point) {
-            if (!point) {
-                return 0;
-            }
-            const value = point.locationTime || point.reportedTime || point.createTime;
-            if (!value) {
-                return 0;
-            }
-            const timestamp = new Date(value).getTime();
-            return Number.isFinite(timestamp) ? timestamp : 0;
-        },
-        escapeHtml(value) {
-            return String(value)
-                .replace(/&/g, "&amp;")
-                .replace(/</g, "&lt;")
-                .replace(/>/g, "&gt;")
-                .replace(/\"/g, "&quot;")
-                .replace(/'/g, "&#39;");
-        },
+            return;
+          }
+          reject(new Error(this.$t("device.trajectory.message.amapConvertFailed")));
+        });
+      });
+    },
+    renderAmapTrajectory() {
+      if (!this.map || !this.mapsApi || !this.trajectoryPoints.length) {
+        return;
+      }
+      const mapPoints = this.getMapOrderedTrajectoryPoints();
+      if (!mapPoints.length) {
+        return;
+      }
+      this.clearOverlays();
+      const path = mapPoints.map((item) => [
+        item.amapLng !== undefined ? item.amapLng : item.lngNum,
+        item.amapLat !== undefined ? item.amapLat : item.latNum,
+      ]);
+
+      this.polyline = new this.mapsApi.Polyline({
+        path,
+        strokeColor: "#1a73e8",
+        strokeOpacity: 0.9,
+        strokeWeight: 5,
+        lineJoin: "round",
+        showDir: true,
+      });
+
+      const startPoint = path[0];
+      const endPoint = path[path.length - 1];
+      const startItem = mapPoints[0];
+      const endItem = mapPoints[mapPoints.length - 1];
+
+      this.markers = [
+        new this.mapsApi.Marker({
+          position: startPoint,
+          content: this.buildAmapMarkerContent(
+            this.$t("device.trajectory.marker.startShort"),
+            "#67c23a",
+            this.getPointTrackTime(startItem)
+          ),
+          offset: new this.mapsApi.Pixel(-44, -52),
+        }),
+      ];
+
+      if (path.length > 1) {
+        this.markers.push(
+          new this.mapsApi.Marker({
+            position: endPoint,
+            content: this.buildAmapMarkerContent(
+              this.$t("device.trajectory.marker.endShort"),
+              "#f56c6c",
+              this.getPointTrackTime(endItem)
+            ),
+            offset: new this.mapsApi.Pixel(-44, -52),
+          })
+        );
+      }
+
+      this.map.add(this.polyline);
+      this.map.add(this.markers);
+
+      if (path.length === 1) {
+        this.map.setZoomAndCenter(15, startPoint);
+      } else {
+        this.map.setFitView([this.polyline].concat(this.markers), false, [60, 60, 60, 60]);
+      }
+    },
+    renderGoogleTrajectory() {
+      if (!this.map || !this.mapsApi || !this.trajectoryPoints.length) {
+        return;
+      }
+      const mapPoints = this.getMapOrderedTrajectoryPoints();
+      if (!mapPoints.length) {
+        return;
+      }
+      this.clearOverlays();
+      const path = mapPoints.map((item) => ({ lat: item.latNum, lng: item.lngNum }));
+      const bounds = new this.mapsApi.LatLngBounds();
+      path.forEach((point) => bounds.extend(point));
+
+      const polylineOptions = {
+        path,
+        geodesic: true,
+        strokeColor: "#1a73e8",
+        strokeOpacity: 0.9,
+        strokeWeight: 4,
+      };
+      if (path.length > 1 && this.mapsApi.SymbolPath) {
+        polylineOptions.icons = [
+          {
+            icon: {
+              path: this.mapsApi.SymbolPath.FORWARD_CLOSED_ARROW,
+              scale: 2.2,
+              strokeColor: "#1a73e8",
+              strokeOpacity: 0.95,
+              fillColor: "#1a73e8",
+              fillOpacity: 0.95,
+            },
+            offset: "100%",
+            repeat: "120px",
+          },
+        ];
+      }
+      this.polyline = new this.mapsApi.Polyline(polylineOptions);
+      this.polyline.setMap(this.map);
+
+      const startPoint = path[0];
+      const endPoint = path[path.length - 1];
+      const startItem = mapPoints[0];
+      const endItem = mapPoints[mapPoints.length - 1];
+
+      this.markers = [
+        new this.mapsApi.Marker({
+          position: startPoint,
+          map: this.map,
+          label: this.$t("device.trajectory.marker.startShort"),
+        }),
+      ];
+
+      if (path.length > 1) {
+        this.markers.push(
+          new this.mapsApi.Marker({
+            position: endPoint,
+            map: this.map,
+            label: this.$t("device.trajectory.marker.endShort"),
+          })
+        );
+      }
+
+      const startInfoWindow = this.openGoogleMarkerInfoWindow(
+        this.markers[0],
+        this.$t("device.trajectory.message.startTime"),
+        this.getPointTrackTime(startItem)
+      );
+      if (startInfoWindow) {
+        this.markerInfoWindows.push(startInfoWindow);
+      }
+
+      if (this.markers.length > 1) {
+        const endInfoWindow = this.openGoogleMarkerInfoWindow(
+          this.markers[this.markers.length - 1],
+          this.$t("device.trajectory.message.endTime"),
+          this.getPointTrackTime(endItem)
+        );
+        if (endInfoWindow) {
+          this.markerInfoWindows.push(endInfoWindow);
+        }
+      }
+
+      if (path.length === 1) {
+        this.map.setCenter(startPoint);
+        this.map.setZoom(15);
+      } else {
+        this.map.fitBounds(bounds);
+      }
+    },
+    openGoogleMarkerInfoWindow(marker, title, timeText) {
+      if (!this.mapsApi || !this.map || !marker || !this.mapsApi.InfoWindow) {
+        return null;
+      }
+      const infoWindow = new this.mapsApi.InfoWindow({
+        content:
+          '<div style="min-width:160px;padding:6px 8px;line-height:1.6;">' +
+          '<div style="font-weight:600;color:#303133;">' +
+          this.escapeHtml(title) +
+          "</div>" +
+          '<div style="color:#606266;">' +
+          this.escapeHtml(timeText || "-") +
+          "</div>" +
+          "</div>",
+      });
+      infoWindow.open({
+        anchor: marker,
+        map: this.map,
+        shouldFocus: false,
+      });
+      return infoWindow;
+    },
+    buildAmapMarkerContent(label, color, timeText) {
+      return (
+        '<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">' +
+        '<div style="min-width:28px;height:28px;border-radius:14px;background:' +
+        color +
+        ';color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,0.18);">' +
+        this.escapeHtml(label) +
+        "</div>" +
+        '<div style="padding:4px 8px;border-radius:6px;background:rgba(255,255,255,0.96);color:#303133;font-size:12px;line-height:1.4;box-shadow:0 4px 10px rgba(0,0,0,0.12);white-space:nowrap;">' +
+        this.escapeHtml(timeText || "-") +
+        "</div>" +
+        "</div>"
+      );
+    },
+    clearOverlays() {
+      if (!this.map) {
+        this.polyline = null;
+        this.markers = [];
+        this.markerInfoWindows = [];
+        return;
+      }
+      if (this.mapVendor === "google") {
+        if (this.polyline) {
+          this.polyline.setMap(null);
+        }
+        if (this.markers.length) {
+          this.markers.forEach((marker) => marker.setMap(null));
+        }
+        if (this.markerInfoWindows.length) {
+          this.markerInfoWindows.forEach((infoWindow) => {
+            if (infoWindow && typeof infoWindow.close === "function") {
+              infoWindow.close();
+            }
+          });
+        }
+      } else {
+        if (this.polyline) {
+          this.map.remove(this.polyline);
+        }
+        if (this.markers.length) {
+          this.map.remove(this.markers);
+        }
+      }
+      this.polyline = null;
+      this.markers = [];
+      this.markerInfoWindows = [];
+    },
+    destroyMap(resetVendor = false) {
+      this.clearOverlays();
+      if (!this.map) {
+        if (resetVendor) {
+          this.mapVendor = "";
+          this.mapsApi = null;
+        }
+        return;
+      }
+      if (this.mapVendor === "amap" && typeof this.map.destroy === "function") {
+        this.map.destroy();
+      } else if (this.$refs.map) {
+        this.$refs.map.innerHTML = "";
+      }
+      this.map = null;
+      if (resetVendor) {
+        this.mapVendor = "";
+        this.mapsApi = null;
+      }
+    },
+    normalizeCoordinate(value, type) {
+      if (value === undefined || value === null || value === "") {
+        return null;
+      }
+      const numberValue = Number(value);
+      if (!Number.isFinite(numberValue)) {
+        return null;
+      }
+      const directLimit = type === "lat" ? 90 : 180;
+      const normalizedValue = Math.abs(numberValue) > directLimit ? numberValue / 10000000 : numberValue;
+      if (Math.abs(normalizedValue) > directLimit) {
+        return null;
+      }
+      return Number(normalizedValue.toFixed(7));
+    },
+    formatTrackTime(value) {
+      if (!value) {
+        return "-";
+      }
+      return this.parseTime ? this.parseTime(value) : value;
+    },
+    formatCoordinateValue(value) {
+      if (value === null || value === undefined) {
+        return "-";
+      }
+      const strValue = String(value).trim();
+      if (!strValue || strValue === "-") {
+        return "-";
+      }
+      const match = strValue.match(/^([+-]?\d+)(?:\.(\d+))?$/);
+      if (!match) {
+        return "-";
+      }
+      const integerPart = match[1];
+      const decimalPart = match[2] || "";
+      const fixedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
+      return `${integerPart}.${fixedDecimal}`;
+    },
+    formatTrackCoordinates(lat, lng) {
+      return `${this.formatCoordinateValue(lat)} / ${this.formatCoordinateValue(lng)}`;
     },
+    getPointTrackTime(point) {
+      if (!point) {
+        return "-";
+      }
+      return this.formatTrackTime(point.locationTime || point.reportedTime || point.createTime);
+    },
+    getMapOrderedTrajectoryPoints() {
+      if (!Array.isArray(this.trajectoryPoints) || !this.trajectoryPoints.length) {
+        return [];
+      }
+      if (this.trajectoryPoints.length < 2) {
+        return this.trajectoryPoints.slice();
+      }
+      const firstTs = this.getTrackTimestamp(this.trajectoryPoints[0]);
+      const lastTs = this.getTrackTimestamp(this.trajectoryPoints[this.trajectoryPoints.length - 1]);
+      if (firstTs > 0 && lastTs > 0 && firstTs > lastTs) {
+        return this.trajectoryPoints.slice().reverse();
+      }
+      return this.trajectoryPoints.slice();
+    },
+    getTrackTimestamp(point) {
+      if (!point) {
+        return 0;
+      }
+      const value = point.locationTime || point.reportedTime || point.createTime;
+      if (!value) {
+        return 0;
+      }
+      const timestamp = new Date(value).getTime();
+      return Number.isFinite(timestamp) ? timestamp : 0;
+    },
+    escapeHtml(value) {
+      return String(value)
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+    },
+  },
 };
 </script>
 
 <style scoped>
-.trajectory-summary {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 24px;
-    margin-bottom: 12px;
-    color: #606266;
+.trajectory-filter__picker {
+  width: 420px;
+  max-width: 100%;
 }
 
 .trajectory-alert {
-    margin-bottom: 12px;
-}
-
-.trajectory-filter {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 12px;
-}
-
-.trajectory-filter__label {
-    color: #606266;
-    font-size: 13px;
-}
-
-.trajectory-filter__picker {
-    width: 420px;
-    max-width: 100%;
+  margin-bottom: 12px;
 }
 
 .trajectory-tabs {
-    margin-top: 12px;
+  margin-top: 12px;
 }
 
 .trajectory-toolbar {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 12px;
-}
-
-.trajectory-toolbar__label {
-    color: #606266;
-    font-size: 13px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
 }
 
 .trajectory-map-shell {
-    min-height: 420px;
-    border: 1px solid #ebeef5;
-    border-radius: 8px;
-    overflow: hidden;
-    background: #f5f7fa;
+  min-height: 420px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f5f7fa;
 }
 
 .trajectory-map {
-    width: 100%;
-    height: 420px;
-}
-
-.trajectory-table {
-    margin-top: 8px;
+  width: 100%;
+  height: 420px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/device/index.vue b/src/components/device/index.vue
index e130fc0..165b642 100644
--- a/src/components/device/index.vue
+++ b/src/components/device/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    title="认领设备"
+    :title="$t('device.claim.dialogTitle')"
     :visible.sync="dialogVisible"
     width="980px"
     append-to-body
@@ -10,28 +10,28 @@
       ref="queryForm"
       :model="queryParams"
       :inline="true"
-      label-width="80px"
-      class="claim-query-form"
+      label-position="top"
+      class="page-query-form claim-query-form"
     >
-      <el-form-item label="订单号" prop="orderCode">
+      <el-form-item :label="$t('device.claim.query.orderCode')" prop="orderCode">
         <el-input
           v-model.trim="queryParams.orderCode"
-          placeholder="请输入订单号"
+          :placeholder="$t('device.claim.placeholder.orderCode')"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="page-query-actions">
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
-          搜索
+          {{ $t("common.search") }}
         </el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("common.reset") }}</el-button>
       </el-form-item>
     </el-form>
 
     <el-alert
-      title="请先输入订单号查询设备，再勾选需要认领的设备进行确认。"
+      :title="$t('device.claim.tip')"
       type="info"
       :closable="false"
       show-icon
@@ -48,8 +48,8 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
-      <el-table-column label="设备ID" prop="id" width="90" align="center" />
-      <el-table-column label="序列号" prop="sn" min-width="180" align="center" />
+      <el-table-column :label="$t('device.dialog.detail.id')" prop="id" width="90" align="center" />
+      <el-table-column :label="$t('device.table.sn')" prop="sn" min-width="180" align="center" />
       <!-- <el-table-column label="操作" width="100" align="center" fixed="right">
         <template slot-scope="scope">
           <el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
@@ -59,7 +59,7 @@
 
     <el-empty
       v-if="searched && !loading && !deviceList.length"
-      description="未查询到可认领的设备"
+      :description="$t('device.claim.empty')"
       :image-size="80"
       class="claim-empty"
     />
@@ -73,46 +73,46 @@
     />
 
     <div slot="footer" class="dialog-footer">
-      <span class="claim-selected">已选 {{ selectedIds.length }} 台设备</span>
-      <el-button @click="handleClose">取 消</el-button>
+      <span class="page-footer-meta">{{ $t("device.claim.selectedCount", { count: selectedIds.length }) }}</span>
+      <el-button @click="handleClose">{{ $t("common.cancel") }}</el-button>
       <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
-        确认认领
+        {{ $t("device.claim.confirmButton") }}
       </el-button>
     </div>
 
     <el-dialog
-      title="设备详情"
+      :title="$t('device.claim.detailTitle')"
       :visible.sync="detailOpen"
       width="720px"
       append-to-body
     >
       <div v-loading="detailLoading">
         <el-descriptions v-if="deviceDetail" :column="2" border>
-          <el-descriptions-item label="设备ID">
+          <el-descriptions-item :label="$t('device.dialog.detail.id')">
             {{ deviceDetail.id || "-" }}
           </el-descriptions-item>
-          <el-descriptions-item label="订单号">
+          <el-descriptions-item :label="$t('device.table.orderCode')">
             {{ deviceDetail.orderCode || "-" }}
           </el-descriptions-item>
-          <el-descriptions-item label="序列号">
+          <el-descriptions-item :label="$t('device.table.sn')">
             {{ deviceDetail.sn || "-" }}
           </el-descriptions-item>
-          <el-descriptions-item label="MAC 地址">
+          <el-descriptions-item :label="$t('device.dialog.detail.macAddress')">
             {{ deviceDetail.mac || "-" }}
           </el-descriptions-item>
-          <el-descriptions-item label="所属批次">
+          <el-descriptions-item :label="$t('device.claim.detail.batchNo')">
             {{ deviceDetail.batchNo || "-" }}
           </el-descriptions-item>
-          <el-descriptions-item label="型号">
+          <el-descriptions-item :label="$t('device.table.model')">
             {{ deviceDetail.model || "-" }}
           </el-descriptions-item>
-          <el-descriptions-item label="企业">
+          <el-descriptions-item :label="$t('device.dialog.detail.business')">
             {{ deviceDetail.merchantName || "-" }}
           </el-descriptions-item>
         </el-descriptions>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="detailOpen = false">关 闭</el-button>
+        <el-button type="primary" @click="detailOpen = false">{{ $t("device.button.close") }}</el-button>
       </div>
     </el-dialog>
   </el-dialog>
@@ -161,7 +161,7 @@ export default {
   methods: {
     handleQuery() {
       if (!this.queryParams.orderCode) {
-        this.$message.warning("请输入订单号后再搜索");
+        this.$message.warning(this.$t("device.claim.message.enterOrderCode"));
         return;
       }
       this.searched = true;
@@ -218,19 +218,19 @@ export default {
     },
     handleSubmit() {
       if (!this.queryParams.orderCode) {
-        this.$message.warning("请先输入订单号并查询设备");
+        this.$message.warning(this.$t("device.claim.message.queryFirst"));
         return;
       }
       if (!this.selectedIds.length) {
-        this.$message.warning("请至少选择一台设备");
+        this.$message.warning(this.$t("device.claim.message.selectAtLeastOne"));
         return;
       }
       this.$confirm(
-        `确认认领当前选中的 ${this.selectedIds.length} 台设备吗？`,
-        "提示",
+        this.$t("device.claim.message.confirmClaim", { count: this.selectedIds.length }),
+        this.$t("common.tips"),
         {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
+          confirmButtonText: this.$t("common.confirm"),
+          cancelButtonText: this.$t("common.cancel"),
           type: "warning",
         }
       )
@@ -242,7 +242,7 @@ export default {
           });
         })
         .then(() => {
-          this.$message.success("认领成功");
+          this.$message.success(this.$t("device.claim.message.claimSuccess"));
           this.$emit("success");
           this.handleClose();
         })
@@ -305,10 +305,4 @@ export default {
 .claim-empty {
   margin-top: 12px;
 }
-
-.claim-selected {
-  float: left;
-  line-height: 32px;
-  color: #606266;
-}
 </style>
diff --git a/src/components/user/index.vue b/src/components/user/index.vue
index 0effea2..b2db244 100644
--- a/src/components/user/index.vue
+++ b/src/components/user/index.vue
@@ -1,463 +1,371 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="20">
+  <div class="app-container user-selector-container">
+    <el-form
+      ref="queryForm"
+      :model="queryParams"
+      :inline="true"
+      v-show="showSearch"
+      label-position="top"
+      class="page-query-form user-selector-query-form"
+      @submit.native.prevent="handleQuery"
+    >
+      <el-form-item :label="$t('systemUser.query.account')" prop="account">
+        <el-input
+          v-model="queryParams.account"
+          :placeholder="$t('systemUser.placeholder.account')"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('systemUser.query.nickName')" prop="nickName">
+        <el-input
+          v-model="queryParams.nickName"
+          :placeholder="$t('systemUser.placeholder.nickName')"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('systemUser.query.status')" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          :placeholder="$t('systemUser.placeholder.status')"
+          clearable
+          size="small"
+        >
+          <el-option :label="$t('systemUser.status.enabled')" value="0" />
+          <el-option :label="$t('systemUser.status.disabled')" value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="page-query-actions">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
+          {{ $t("common.search") }}
+        </el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
+          {{ $t("common.reset") }}
+        </el-button>
+      </el-form-item>
+    </el-form>
 
-      <!--用户数据-->
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="用户名称" prop="account">
-            <el-input
-              v-model="queryParams.account"
-              placeholder="请输入用户名称"
-              clearable
-              size="small"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
+    <el-row :gutter="10" class="mb8 page-toolbar">
+      <template v-if="!selectionMode">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['system:user:add']"
+          >
+            {{ $t("common.add") }}
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="success"
+            plain
+            icon="el-icon-edit"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
+            v-hasPermi="['system:user:edit']"
+          >
+            {{ $t("common.edit") }}
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="danger"
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['system:user:remove']"
+          >
+            {{ $t("common.remove") }}
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:user:export']"
+          >
+            {{ $t("systemUser.button.export") }}
+          </el-button>
+        </el-col>
+      </template>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" />
+    </el-row>
+
+    <el-table
+      ref="userTable"
+      v-loading="loading"
+      :data="userList"
+      row-key="id"
+      @selection-change="handleSelectionChange"
+      @row-click="handleRowClick"
+    >
+      <el-table-column type="selection" width="50" align="center" :reserve-selection="selectionMode" />
+      <el-table-column v-if="columns[0].visible" :label="columns[0].label" align="center" prop="id" width="90" />
+      <el-table-column v-if="columns[1].visible" :label="columns[1].label" align="center" prop="account" :show-overflow-tooltip="true" />
+      <el-table-column v-if="columns[2].visible" :label="columns[2].label" align="center" prop="nickName" :show-overflow-tooltip="true" />
+      <el-table-column v-if="columns[5].visible" :label="columns[5].label" align="center" width="100">
+        <template slot-scope="scope">
+          <el-switch
+            v-if="!selectionMode"
+            v-model="scope.row.status"
+            active-value="0"
+            inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+          />
+          <span v-else>{{ getStatusLabel(scope.row.status) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="columns[6].visible && !selectionMode"
+        :label="columns[6].label"
+        align="center"
+        key="googleAuthSecret"
+        prop="googleAuthSecret"
+        width="128"
+      >
+        <template slot-scope="scope">
+          <img
+            class="user-selector-qrcode"
+            :src="columns[6].url + '?content=' + encodeURIComponent(`otpauth://totp/GeoTag_${scope.row.account}?secret=${scope.row.googleAuthSecret}`)"
+            alt="qr"
+          >
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns[7].visible" :label="columns[7].label" align="center" prop="createTime" width="160">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="!selectionMode"
+        :label="$t('systemUser.table.actions')"
+        align="center"
+        width="180"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:user:edit']"
+          >
+            {{ $t("common.edit") }}
+          </el-button>
+          <el-button
+            v-if="scope.row.id !== 1"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:user:remove']"
+          >
+            {{ $t("common.remove") }}
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-key"
+            @click="handleResetPwd(scope.row)"
+            v-hasPermi="['system:user:resetPwd']"
+          >
+            {{ $t("systemUser.button.resetPassword") }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-position="top" class="page-dialog-form">
+        <div class="page-dialog-grid">
+          <el-form-item v-if="form.id === undefined" :label="$t('systemUser.form.account')" prop="account">
+            <el-input v-model="form.account" :placeholder="$t('systemUser.placeholder.loginAccount')" />
           </el-form-item>
-             <el-form-item label="昵称" prop="nickName">
+          <el-form-item v-if="form.id === undefined" :label="$t('systemUser.form.password')" prop="passwordHash">
             <el-input
-              v-model="queryParams.nickName"
-              placeholder="请输入昵称"
-              clearable
-              size="small"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
+              v-model="form.passwordHash"
+              type="password"
+              show-password
+              :placeholder="$t('systemUser.placeholder.employeePassword')"
             />
           </el-form-item>
-          <el-form-item label="状态" prop="status">
+          <el-form-item :label="$t('systemUser.form.nickName')" prop="nickName">
+            <el-input v-model="form.nickName" :placeholder="$t('systemUser.placeholder.userNickName')" />
+          </el-form-item>
+          <el-form-item :label="$t('systemUser.form.role')" prop="roleIds">
             <el-select
-              v-model="queryParams.status"
-              placeholder="用户状态"
-              clearable
-              size="small"
-              style="width: 240px"
+              v-model="form.roleIds"
+              multiple
+              filterable
+              collapse-tags
+              :placeholder="$t('systemUser.placeholder.role')"
+              style="width: 100%"
             >
-              <el-option label="启用" :value="0" />
-              <el-option label="禁用" :value="1" />
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.roleId"
+                :label="getRoleOptionLabel(item)"
+                :value="String(item.roleId)"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          <el-form-item :label="$t('systemUser.form.status')" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio label="0">{{ $t("systemUser.status.enabled") }}</el-radio>
+              <el-radio label="1">{{ $t("systemUser.status.disabled") }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('systemUser.form.remark')" class="page-dialog-grid__full">
+            <el-input v-model="form.remark" type="textarea" :rows="4" :placeholder="$t('systemUser.placeholder.remark')" />
           </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-          <el-col v-if="!selectionMode" :span="1.5">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['system:user:add']"
-            >新增</el-button>
-          </el-col>
-          <el-col v-if="!selectionMode" :span="1.5">
-            <el-button
-              type="success"
-              plain
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-              v-hasPermi="['system:user:edit']"
-            >修改</el-button>
-          </el-col>
-          <el-col v-if="!selectionMode" :span="1.5">
-            <el-button
-              type="danger"
-              plain
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-              v-hasPermi="['system:user:remove']"
-            >删除</el-button>
-          </el-col>
-          <!-- <el-col :span="1.5">
-            <el-button
-              type="info"
-              plain
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-            >导入</el-button>
-          </el-col> -->
-          <el-col v-if="!selectionMode" :span="1.5">
-            <el-button
-              type="warning"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              v-hasPermi="['system:user:export']"
-            >导出</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row>
-
-        <el-table
-          ref="userTable"
-          v-loading="loading"
-          :data="userList"
-          row-key="id"
-          @selection-change="handleSelectionChange"
-          @row-click="handleRowClick"
-        >
-          <el-table-column
-            type="selection"
-            width="50"
-            align="center"
-            :reserve-selection="selectionMode"
-          />
-          <el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
-          <el-table-column label="用户名称" align="center" key="account" prop="account" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-<!--          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />-->
-<!--          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />-->
-          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
-            <template slot-scope="scope">
-              <el-switch
-                v-if="!selectionMode"
-                v-model="scope.row.status"
-                active-value="0"
-                inactive-value="1"
-                @change="handleStatusChange(scope.row)"
-              ></el-switch>
-              <span v-else>{{ scope.row.status === "0" ? "启用" : "禁用" }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="谷歌令牌" align="center" key="googleAuthSecret" prop="googleAuthSecret" v-if="columns[6].visible">
-            <template slot-scope="scope">
-              <!-- <img :src="columns[6].url+'?content=otpauth://totp/GeoTag_'+scope.row.account+'?secret='+scope.row.googleAuthSecret" style="width: 100px; height: 100px;"> -->
-            <img :src="columns[6].url + '?content=' + encodeURIComponent(`otpauth://totp/GeoTag_${scope.row.account}?secret=${scope.row.googleAuthSecret}`)" style="width: 100px; height: 100px;">
-
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[7].visible" width="160">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="!selectionMode"
-            label="操作"
-            align="center"
-            width="160"
-            class-name="small-padding fixed-width"
-          >
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']"
-              >修改</el-button>
-              <el-button
-                v-if="scope.row.id !== 1"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:remove']"
-              >删除</el-button>
-              <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-key"
-              @click="handleResetPwd(scope.row)"
-              v-hasPermi="['system:user:resetPwd']"
-            >重置</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
-    </el-row>
-
-    <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.id == undefined" label="用户名称" prop="account">
-              <el-input v-model="form.account" placeholder="请输入用户名称" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.id == undefined" label="用户密码" prop="passwordHash">
-              <el-input v-model="form.passwordHash" placeholder="请输入用户密码" type="passwordHash" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select
-                v-model="form.roleIds"
-                multiple
-                filterable
-                placeholder="请选择角色（全部角色）"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in roleOptions"
-                  :key="item.roleId"
-                  :label="(item.roleName || item.name) || ('角色' + item.roleId)"
-                  :value="String(item.roleId)"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-
-
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="状态" prop="status">
-              <el-radio-group v-model="form.status">
-                <el-radio :label="0">启用</el-radio>
-                <el-radio :label="1">禁用</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        drag
-      >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">
-          将文件拖到此处，或
-          <em>点击上传</em>
-        </div>
-        <div class="el-upload__tip" slot="tip">
-          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
         </div>
-        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
-      </el-upload>
+      </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">{{ $t("common.confirm") }}</el-button>
+        <el-button @click="cancel">{{ $t("common.cancel") }}</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listEmployeeUser,listUser, getUser, delUser, addUser, updateUser, exportUser, resetUserPwd, changeUserStatus, importTemplate } from "@/api/system/user";
-import { listRole } from "@/api/system/role";
-import { getToken } from "@/utils/auth";
-// import { treeselect } from "@/api/system/dept";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {
+  listEmployeeUser,
+  getUser,
+  delUser,
+  addEmployeeUser,
+  updateEmployeeUser,
+  exportUser,
+  resetUserPwd,
+  changeUserStatus,
+} from "@/api/system/user";
+import { currentRoleOptions } from "@/api/system/role";
 
 export default {
-  name: "User",
+  name: "UserSelector",
   props: {
     selectionMode: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  components: { Treeselect },
   data() {
     return {
-      // 遮罩层
       loading: true,
-      // 选中数组
       ids: [],
-      // 非单个禁用
       single: true,
-      // 非多个禁用
       multiple: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
       total: 0,
-      // 用户表格数据
-      userList: null,
-      // 选择模式下当前选中的员工
+      userList: [],
       selectedRows: [],
       selectedUserMap: {},
-      // 弹出层标题
       title: "",
-      // 部门树选项
-      deptOptions: undefined,
-      // 是否显示弹出层
       open: false,
-      // 部门名称
-      deptName: undefined,
-      // 默认密码
-      passwordHash: undefined,
-      // 日期范围
       dateRange: [],
-      // 状态数据字典
-      statusOptions: [],
-      // 性别状态字典
-      sexOptions: [],
-      // 岗位选项
-      postOptions: [],
-      // 角色选项
       roleOptions: [],
-      // 表单参数（保证 roleIds 为响应式数组）
       form: {
-        roleIds: []
+        roleIds: [],
       },
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 用户导入参数
-      upload: {
-        // 是否显示弹出层（用户导入）
-        open: false,
-        // 弹出层标题（用户导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
-      },
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         account: undefined,
-        phonenumber: undefined,
+        nickName: undefined,
         status: undefined,
-        deptId: undefined
       },
-      // 列信息
-      columns: [
-        { key: 0, label: `用户编号`, visible: true },
-        { key: 1, label: `用户名称`, visible: true },
-        { key: 2, label: `用户昵称`, visible: true },
-        { key: 3, label: `部门`, visible: true },
-        { key: 4, label: `手机号码`, visible: true },
-        { key: 5, label: `状态`, visible: true },
-        { key: 6, label: `谷歌令牌`, visible: true, url: process.env.VUE_APP_BASE_API + "/business/businessUser/activityCode" },
-        { key: 7, label: `创建时间`, visible: true }
-      ],
-      // 表单校验
-      rules: {
-        account: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" }
-        ],
-        nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
-        ],
-        passwordHash: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "'请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
+      columns: [],
+      rules: {},
     };
   },
-  watch: {
-    // 根据名称筛选部门树
-    deptName(val) {
-      this.$refs.tree.filter(val);
-    }
-  },
   created() {
+    this.initI18nState();
     this.getList();
     this.getRoleList();
-    // this.getTreeselect();
-    // this.getDicts("sys_normal_disable").then(response => {
-    //   this.statusOptions = response.data;
-    // });
-    // this.getDicts("sys_user_sex").then(response => {
-    //   this.sexOptions = response.data;
-    // });
-    // this.getConfigKey("sys.user.passwordHash").then(response => {
-    //   this.passwordHash = response.msg;
-    // });
   },
   methods: {
-    /** 查询角色列表（拉取全部角色，统一为 roleId/roleName 便于下拉展示） */
+    initI18nState() {
+      this.columns = [
+        { key: 0, label: this.$t("systemUser.table.id"), visible: true },
+        { key: 1, label: this.$t("systemUser.table.account"), visible: true },
+        { key: 2, label: this.$t("systemUser.table.nickName"), visible: true },
+        { key: 3, label: this.$t("systemUser.table.dept"), visible: true },
+        { key: 4, label: this.$t("systemUser.table.phone"), visible: true },
+        { key: 5, label: this.$t("systemUser.table.status"), visible: true },
+        {
+          key: 6,
+          label: this.$t("systemUser.table.googleAuthSecret"),
+          visible: true,
+          url: process.env.VUE_APP_BASE_API + "/business/businessUser/activityCode",
+        },
+        { key: 7, label: this.$t("systemUser.table.createTime"), visible: true },
+      ];
+      this.rules = {
+        account: [{ required: true, message: this.$t("systemUser.validation.accountRequired"), trigger: "blur" }],
+        nickName: [{ required: true, message: this.$t("systemUser.validation.nickNameRequired"), trigger: "blur" }],
+        roleIds: [{ required: true, type: "array", min: 1, message: this.$t("systemUser.validation.roleRequired"), trigger: "change" }],
+        passwordHash: [{ required: true, message: this.$t("systemUser.validation.employeePasswordRequired"), trigger: "blur" }],
+      };
+    },
+    normalizeStatus(value) {
+      if (value === "0" || value === 0 || value === false || value === "false") {
+        return "0";
+      }
+      return "1";
+    },
+    getStatusLabel(value) {
+      return this.normalizeStatus(value) === "0"
+        ? this.$t("systemUser.status.enabled")
+        : this.$t("systemUser.status.disabled");
+    },
+    normalizeRoleOptions(list = []) {
+      return (Array.isArray(list) ? list : []).map((item) => ({
+        roleId: item.roleId != null ? item.roleId : item.id,
+        roleName: item.roleName != null ? item.roleName : item.name,
+      }));
+    },
+    getRoleOptionLabel(item) {
+      return (item.roleName || item.name) || `${this.$t("systemUser.roleOptionPrefix")}${item.roleId}`;
+    },
     getRoleList() {
-      listRole({ pageNum: 1, pageSize: 1000 }).then(response => {
-        const list = response.data.list || response.data || [];
-        this.roleOptions = list.map(item => ({
-          roleId: item.roleId != null ? item.roleId : item.id,
-          roleName: item.roleName != null ? item.roleName : item.name
-        }));
+      return currentRoleOptions().then((response) => {
+        this.roleOptions = this.normalizeRoleOptions(response.data || []);
+        return this.roleOptions;
       });
     },
-    /** 查询用户列表 */
     getList() {
       this.loading = true;
       listEmployeeUser(this.addDateRange(this.queryParams, this.dateRange))
-        .then(response => {
+        .then((response) => {
           const data = response.data;
-          const list = Array.isArray(data) ? data : (data && Array.isArray(data.list) ? data.list : []);
-          this.userList = list.map(user => ({
+          const list = Array.isArray(data) ? data : data && Array.isArray(data.list) ? data.list : [];
+          this.userList = list.map((user) => ({
             ...user,
-            status: String(user.status)
+            status: this.normalizeStatus(user.status),
           }));
-          this.total = Array.isArray(data)
-            ? list.length
-            : Number((data && data.total) || list.length);
+          this.total = Array.isArray(data) ? list.length : Number((data && data.total) || list.length);
           if (this.selectionMode) {
             this.$nextTick(() => {
               this.syncSelection();
@@ -472,66 +380,10 @@ export default {
           this.loading = false;
         });
     },
-    /** 查询部门下拉树结构 */
-    getTreeselect() {
-      treeselect().then(response => {
-        this.deptOptions = response.data;
-      });
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id;
-      this.getList();
-    },
-    // 用户状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
-      this.$confirm('确认要"' + text + '""' + row.account + '"用户吗?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return changeUserStatus(row.id, row.status);
-        }).then(() => {
-          this.msgSuccess(text + "成功");
-        }).catch(function() {
-          row.status = row.status === "0" ? "1" : "0";
-        });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        deptId: undefined,
-        account: undefined,
-        nickName: undefined,
-        passwordHash: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: 0,
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.dateRange = [];
       this.resetForm("queryForm");
@@ -540,10 +392,9 @@ export default {
       }
       this.handleQuery();
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
       if (this.selectionMode) {
-        const currentPageIds = (this.userList || []).map(item => item.id);
+        const currentPageIds = (this.userList || []).map((item) => item.id);
         currentPageIds.forEach((id) => {
           if (this.selectedUserMap[id]) {
             this.$delete(this.selectedUserMap, id);
@@ -553,18 +404,18 @@ export default {
           this.$set(this.selectedUserMap, item.id, item);
         });
         this.selectedRows = Object.values(this.selectedUserMap);
-        this.ids = this.selectedRows.map(item => item.id);
+        this.ids = this.selectedRows.map((item) => item.id);
         this.single = this.selectedRows.length !== 1;
         this.multiple = !this.selectedRows.length;
         this.$emit("select", this.selectedRows);
         return;
       }
-      this.ids = selection.map(item => item.id);
-      this.single = selection.length != 1;
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
     handleRowClick(row) {
-      if (!this.selectionMode) {
+      if (!this.selectionMode || !this.$refs.userTable) {
         return;
       }
       this.$refs.userTable.toggleRowSelection(row);
@@ -590,146 +441,147 @@ export default {
         }
       });
     },
-    /** 新增按钮操作 */
+    handleStatusChange(row) {
+      const text = this.getStatusLabel(row.status);
+      this.$confirm(
+        this.$t("systemUser.message.confirmStatusChange", { action: text, account: row.account }),
+        this.$t("systemUser.message.warningTitle"),
+        {
+          confirmButtonText: this.$t("common.confirm"),
+          cancelButtonText: this.$t("common.cancel"),
+          type: "warning",
+        }
+      )
+        .then(() => changeUserStatus(row.id, row.status))
+        .then(() => {
+          this.msgSuccess(this.$t("systemUser.message.statusChangeSuccess", { action: text }));
+        })
+        .catch(() => {
+          row.status = row.status === "0" ? "1" : "0";
+        });
+    },
+    reset() {
+      this.form = {
+        id: undefined,
+        account: undefined,
+        nickName: undefined,
+        passwordHash: undefined,
+        status: "0",
+        remark: undefined,
+        roleIds: [],
+      };
+      this.resetForm("form");
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
     handleAdd() {
       this.reset();
       this.getRoleList();
       this.open = true;
-      this.title = "添加用户";
-      this.form.passwordHash = this.passwordHash;
+      this.title = this.$t("systemUser.dialog.addEmployeeTitle");
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids;
-      Promise.all([getUser(id), listRole({ pageNum: 1, pageSize: 1000 })]).then(([userRes, roleRes]) => {
-        const data = userRes.data; // 用户基本信息在 data 里
-        // roleIds、roles 在响应根级别，不在 data 里
-        const resRoleIds = userRes.roleIds || [];
-        const resRoles = userRes.roles || [];
-
-        const list = roleRes.data?.list || roleRes.data || [];
-        // 角色选项：先取 listRole 列表，再用 getUser 返回的 roles 里的 roleName 覆盖/补充
-        const optionsMap = new Map();
-        list.forEach(item => {
-          optionsMap.set(String(item.roleId != null ? item.roleId : item.id), {
-            roleId: item.roleId != null ? item.roleId : item.id,
-            roleName: item.roleName != null ? item.roleName : item.name
-          });
-        });
-        resRoles.forEach(r => {
-          const rid = r.roleId != null ? r.roleId : r.id;
-          const name = r.roleName != null ? r.roleName : r.name;
-          if (rid != null) optionsMap.set(String(rid), { roleId: rid, roleName: name });
-        });
-        this.roleOptions = Array.from(optionsMap.values());
-
-        // 当前用户所属角色：取响应根级别的 roleIds
-        const roleIds = resRoleIds.map(rid => String(rid));
-
-        this.form = Object.assign({}, data, {
-          postIds: userRes.postIds || [],
-          roleIds: roleIds,
-          passwordHash: ""
-        });
-        this.$set(this.form, "roleIds", roleIds);
-        this.title = "修改用户";
+      const id = row && row.id ? row.id : this.ids[0];
+      Promise.all([getUser(id), this.getRoleList()]).then(([userRes, roleOptions]) => {
+        const data = userRes.data || {};
+        const roleIds = (userRes.roleIds || []).map((rid) => String(rid));
+        this.roleOptions = roleOptions;
+        this.form = {
+          ...data,
+          roleIds,
+          status: this.normalizeStatus(data.status),
+          passwordHash: undefined,
+        };
+        this.title = this.$t("systemUser.dialog.editTitle");
         this.$nextTick(() => {
           this.open = true;
         });
       });
     },
-    /** 重置密码按钮操作 */
     handleResetPwd(row) {
-      this.$prompt('请输入"' + row.account + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消"
-      }).then(({ value }) => {
-          resetUserPwd(row.id, value).then(response => {
-            this.msgSuccess("修改成功，新密码是：" + value);
+      this.$prompt(this.$t("systemUser.message.resetPwdPrompt", { account: row.account }), this.$t("common.tips"), {
+        confirmButtonText: this.$t("common.confirm"),
+        cancelButtonText: this.$t("common.cancel"),
+      })
+        .then(({ value }) => {
+          resetUserPwd(row.id, value).then(() => {
+            this.msgSuccess(this.$t("systemUser.message.resetPwdSuccess", { password: value }));
           });
-        }).catch(() => {});
+        })
+        .catch(() => {});
     },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          // 将角色ID从字符串数组转换为数字数组
-          const submitData = {
-            ...this.form,
-            roleIds: this.form.roleIds.map(id => Number(id))
-          };
-
-          if (this.form.id != undefined) {
-            updateUser(submitData).then(response => {
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addUser(submitData).then(response => {
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
+    submitForm() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return;
+        }
+        if (!Array.isArray(this.form.roleIds) || this.form.roleIds.length === 0) {
+          this.$modal.msgError(this.$t("systemUser.message.selectRoleFirst"));
+          return;
+        }
+        const submitData = {
+          ...this.form,
+          status: Number(this.normalizeStatus(this.form.status)),
+          roleIds: this.form.roleIds.map((id) => Number(id)),
+        };
+        if (!submitData.passwordHash) {
+          delete submitData.passwordHash;
         }
+
+        const request = this.form.id !== undefined ? updateEmployeeUser(submitData) : addEmployeeUser(submitData);
+        request.then(() => {
+          this.msgSuccess(
+            this.form.id !== undefined ? this.$t("systemUser.message.editSuccess") : this.$t("systemUser.message.addEmployeeSuccess")
+          );
+          this.open = false;
+          this.getList();
+        });
       });
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$confirm('是否确认删除用户编号为"' + ids + '"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return delUser(ids);
-        }).then(() => {
+      const ids = row && row.id ? row.id : this.ids;
+      this.$confirm(
+        this.$t("systemUser.message.confirmDelete", { ids: Array.isArray(ids) ? ids.join(",") : ids }),
+        this.$t("systemUser.message.warningTitle"),
+        {
+          confirmButtonText: this.$t("common.confirm"),
+          cancelButtonText: this.$t("common.cancel"),
+          type: "warning",
+        }
+      )
+        .then(() => delUser(ids))
+        .then(() => {
           this.getList();
-          this.msgSuccess("删除成功");
-        })
+          this.msgSuccess(this.$t("systemUser.message.deleteSuccess"));
+        });
     },
-    /** 导出按钮操作 */
     handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有用户数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return exportUser(queryParams);
-        }).then(response => {
+      const queryParams = { ...this.queryParams };
+      this.$confirm(this.$t("systemUser.message.confirmExport"), this.$t("systemUser.message.warningTitle"), {
+        confirmButtonText: this.$t("common.confirm"),
+        cancelButtonText: this.$t("common.cancel"),
+        type: "warning",
+      })
+        .then(() => exportUser(queryParams))
+        .then((response) => {
           this.download(response.msg);
-        })
-    },
-    /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "用户导入";
-      this.upload.open = true;
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      importTemplate().then(response => {
-        this.download(response.msg);
-      });
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-      this.getList();
+        });
     },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit();
-    }
-  }
+  },
 };
 </script>
+
+<style scoped>
+.user-selector-qrcode {
+  width: 100px;
+  height: 100px;
+  object-fit: contain;
+}
+
+.page-dialog-grid__full {
+  grid-column: 1 / -1;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 6a59d0c..3447e90 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -11,9 +11,9 @@
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip :content="$t('navbar.layoutSize')" effect="dark" placement="bottom">
+        <!-- <el-tooltip :content="$t('navbar.layoutSize')" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
         <el-dropdown class="right-menu-item hover-effect lang-menu" trigger="click" @command="changeLanguage">
           <span class="lang-trigger">
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index be3285d..150d555 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -17,15 +17,19 @@ export default {
     const vnodes = []
 
     if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      vnodes.push(
+        <span class='menu-item-icon'>
+          <svg-icon icon-class={icon}/>
+        </span>
+      )
     }
 
     if (title) {
-      if (title.length > 5) {
-        vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
-      } else {
-        vnodes.push(<span slot='title'>{(title)}</span>)
-      }
+      vnodes.push(
+        <span slot='title' class='menu-item-text' title={title}>
+          {title}
+        </span>
+      )
     }
     return vnodes
   }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 05e2fa9..734849c 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+  <div :class="classObj" class="app-wrapper" :style="layoutStyle">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
@@ -16,7 +16,7 @@
 <script>
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
 
 export default {
@@ -38,6 +38,9 @@ export default {
       needTagsView: state => state.settings.tagsView,
       fixedHeader: state => state.settings.fixedHeader
     }),
+    ...mapGetters([
+      'sidebarRouters'
+    ]),
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
@@ -46,11 +49,54 @@ export default {
         mobile: this.device === 'mobile'
       }
     },
+    layoutStyle() {
+      return {
+        '--current-color': this.theme,
+        '--sidebar-expanded-width': `${this.sidebarExpandedWidth}px`,
+        '--sidebar-collapsed-width': '54px'
+      }
+    },
+    sidebarExpandedWidth() {
+      const minWidth = 220
+      const maxWidth = 320
+      const extraWidth = 110
+      const titles = this.collectSidebarTitles(this.sidebarRouters)
+      const maxTitleWidth = titles.reduce((width, title) => {
+        return Math.max(width, this.measureSidebarTextWidth(title))
+      }, 0)
+      return Math.min(maxWidth, Math.max(minWidth, Math.ceil(maxTitleWidth + extraWidth)))
+    },
     variables() {
       return variables
     }
   },
   methods: {
+    collectSidebarTitles(routes = [], titles = []) {
+      routes.forEach((route) => {
+        if (route && route.meta && route.meta.title) {
+          titles.push(String(route.meta.title))
+        }
+        if (route && Array.isArray(route.children) && route.children.length) {
+          this.collectSidebarTitles(route.children, titles)
+        }
+      })
+      return titles
+    },
+    measureSidebarTextWidth(text) {
+      const content = String(text || '')
+      if (!content) {
+        return 0
+      }
+      if (typeof document === 'undefined') {
+        return content.length * 14
+      }
+      if (!this._sidebarMeasureCanvas) {
+        this._sidebarMeasureCanvas = document.createElement('canvas')
+        this._sidebarMeasureContext = this._sidebarMeasureCanvas.getContext('2d')
+      }
+      this._sidebarMeasureContext.font = '14px "Helvetica Neue", Helvetica, Arial, sans-serif'
+      return this._sidebarMeasureContext.measureText(content).width
+    },
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     },
@@ -92,12 +138,12 @@ export default {
     top: 0;
     right: 0;
     z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
+    width: calc(100% - var(--sidebar-expanded-width, #{$base-sidebar-width}));
     transition: width 0.28s;
   }
 
   .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
+    width: calc(100% - var(--sidebar-collapsed-width, 54px));
   }
 
   .sidebarHide .fixed-header {
diff --git a/src/main.js b/src/main.js
index c1c6f27..7a97f7d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,12 @@ import Vue from "vue";
 import Cookies from "js-cookie";
 
 import Element from "element-ui";
+import ElementLocale from "element-ui/lib/locale";
+import elementZhCN from "element-ui/lib/locale/lang/zh-CN";
+import elementEn from "element-ui/lib/locale/lang/en";
+import elementFr from "element-ui/lib/locale/lang/fr";
+import elementEs from "element-ui/lib/locale/lang/es";
+import elementPtBr from "element-ui/lib/locale/lang/pt-br";
 import "./assets/styles/element-variables.scss";
 
 import "@/assets/styles/index.scss"; // global css
@@ -16,6 +22,18 @@ import { download } from "@/utils/ruoyi";
 import { math } from "@/utils/math.js";
 import I18nPlugin from "@/lang";
 import { getLanguage } from "@/utils/language";
+
+const ELEMENT_LOCALE_MAP = {
+  "zh-CN": elementZhCN,
+  "en-US": elementEn,
+  "fr-FR": elementFr,
+  "es-ES": elementEs,
+  "pt-BR": elementPtBr,
+};
+
+const currentLanguage = getLanguage();
+ElementLocale.use(ELEMENT_LOCALE_MAP[currentLanguage] || elementZhCN);
+
 Vue.prototype.$math = math;
 Vue.prototype.msgSuccess = function (msg) {
   this.$message({ showClose: true, message: msg, type: "success" });
@@ -106,7 +124,7 @@ Vue.use(Element, {
 Vue.config.productionTip = false;
 
 if (typeof document !== "undefined") {
-  document.documentElement.setAttribute("lang", getLanguage());
+  document.documentElement.setAttribute("lang", currentLanguage);
 }
 
 new Vue({
diff --git a/src/settings.js b/src/settings.js
index c206f65..2d1701d 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -12,7 +12,7 @@ module.exports = {
   /**
    * 系统布局配置
    */
-  showSettings: true,
+  showSettings: false,
 
   /**
    * 是否显示顶部导航
diff --git a/src/views/device/device/index.vue b/src/views/device/device/index.vue
index 982496f..308059a 100644
--- a/src/views/device/device/index.vue
+++ b/src/views/device/device/index.vue
@@ -1,6 +1,14 @@
 <template>
 <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent="handleQuery">
+    <el-form
+        :model="queryParams"
+        ref="queryForm"
+        :inline="true"
+        v-show="showSearch"
+        class="page-query-form device-query-form"
+        label-position="top"
+        @submit.native.prevent="handleQuery"
+    >
 
         <el-form-item :label="$t('device.query.orderCode')" prop="orderCode">
             <el-input v-model="queryParams.orderCode" :placeholder="$t('device.placeholder.orderCode')" clearable size="small" @keyup.enter.native="handleQuery" />
@@ -32,13 +40,13 @@
             </el-select>
         </el-form-item>
 
-        <el-form-item>
+        <el-form-item class="page-query-actions">
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t("common.search") }}</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("common.reset") }}</el-button>
         </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="mb8 page-toolbar">
         <!-- <el-col :span="1.5">
         <el-button
           type="primary"
@@ -136,7 +144,7 @@
                 <span>{{ formatCoordinates(scope.row.lastLat, scope.row.lastLng) }}</span>
             </template>
         </el-table-column>
-        <el-table-column label="MAC " align="center" prop="mac" />
+        <el-table-column :label="$t('device.table.mac')" align="center" prop="mac" />
         <!-- <el-table-column label="电量" align="center" prop="battery" /> -->
 
         <el-table-column :label="$t('device.table.remark')" align="center" prop="remark" />
@@ -175,19 +183,40 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
     <!-- Excel导入弹窗：仅允许上传1个文件 + 手动输入订单号/备注 -->
-    <el-dialog :title="$t('device.dialog.import.title')" :visible.sync="importOpen" width="550px" append-to-body>
-        <el-form ref="importForm" :model="importForm" :rules="importRules" label-width="90px" @submit.native.prevent>
+    <el-dialog :title="$t('device.dialog.import.title')" :visible.sync="importOpen" width="680px" append-to-body>
+        <div class="device-import-guide">
+            <div class="device-import-guide__content">
+                <div class="device-import-guide__title">{{ $t("device.dialog.import.templateTitle") }}</div>
+                <div class="device-import-guide__desc">{{ $t("device.dialog.import.templateDesc") }}</div>
+                <div class="device-import-guide__meta">
+                    <span>{{ $t("device.dialog.import.fieldExample") }}</span>
+                    <span>{{ $t("device.dialog.import.sampleExample") }}</span>
+                </div>
+            </div>
+            <el-button type="primary" plain icon="el-icon-download" @click="downloadImportTemplate">
+                {{ $t("device.dialog.import.downloadTemplate") }}
+            </el-button>
+        </div>
 
-            <!-- Excel文件上传：仅1个文件（修复核心） -->
-            <el-form-item :label="$t('device.dialog.import.fileLabel')">
-                <el-upload ref="upload" :limit="1" :on-exceed="handleExceed" accept=".xlsx, .xls" :auto-upload="false" :on-change="handleFileChange" :file-list="fileList" drag>
+        <el-form ref="importForm" :model="importForm" :rules="importRules" label-position="top" class="page-dialog-form" @submit.native.prevent>
+            <el-form-item :label="$t('device.dialog.import.fileLabel')" prop="file">
+                <el-upload
+                    ref="upload"
+                    class="device-import-upload"
+                    :limit="1"
+                    :on-exceed="handleExceed"
+                    accept=".xlsx, .xls"
+                    :auto-upload="false"
+                    :on-change="handleFileChange"
+                    :file-list="fileList"
+                    drag
+                >
                     <i class="el-icon-upload"></i>
-                    <div class="el-upload__text">{{ $t("device.dialog.import.dragText") }}<em>{{ $t("device.dialog.import.clickUpload") }}</em></div>
+                    <div class="el-upload__text">
+                        {{ $t("device.dialog.import.dragText") }}<em>{{ $t("device.dialog.import.clickUpload") }}</em>
+                    </div>
                     <div class="el-upload__tip" slot="tip">
-                        <el-icon size="12">
-                            <warning />
-                        </el-icon>
-                        <span>{{ $t("device.dialog.import.tip") }}</span>
+                        {{ $t("device.dialog.import.tip") }}
                     </div>
                 </el-upload>
             </el-form-item>
@@ -199,43 +228,52 @@
         </div>
     </el-dialog>
 
-    <el-dialog :title="$t('device.dialog.importResult.title')" :visible.sync="resultOpen" width="700px" append-to-body>
-        <div v-if="latestImportResult">
-            <el-alert :title="getImportStatusMessage(latestImportResult)" :type="getImportStatusType(latestImportResult.status)" :closable="false" show-icon />
+    <el-dialog :title="$t('device.dialog.importResult.title')" :visible.sync="resultOpen" width="760px" append-to-body>
+        <div v-if="latestImportResult" class="device-import-result">
+            <el-alert
+                class="device-import-result__alert"
+                :title="getImportStatusMessage(latestImportResult)"
+                :type="getImportStatusType(latestImportResult.status)"
+                :closable="false"
+                show-icon
+            />
 
-            <el-descriptions :column="2" border class="import-result-summary">
-                <el-descriptions-item :label="$t('device.dialog.importResult.status')">
-                    {{ getImportStatusLabel(latestImportResult.status) }}
-                </el-descriptions-item>
-                <el-descriptions-item :label="$t('device.dialog.importResult.total')">
-                    {{ latestImportResult.total }}
-                </el-descriptions-item>
-                <el-descriptions-item :label="$t('device.dialog.importResult.successCount')">
-                    {{ latestImportResult.successCount }}
-                </el-descriptions-item>
-                <el-descriptions-item :label="$t('device.dialog.importResult.failCount')">
-                    {{ latestImportResult.failCount }}
-                </el-descriptions-item>
-                <el-descriptions-item :label="$t('device.dialog.importResult.startTime')">
-                    {{ parseTime(latestImportResult.startTime) }}
-                </el-descriptions-item>
-                <el-descriptions-item :label="$t('device.dialog.importResult.finishTime')">
-                    {{ parseTime(latestImportResult.finishTime) }}
-                </el-descriptions-item>
-            </el-descriptions>
+            <div class="device-import-result__panel">
+                <div class="import-result-title">{{ $t("device.dialog.importResult.title") }}</div>
+                <el-descriptions :column="importResultColumns" border class="import-result-summary">
+                    <el-descriptions-item :label="$t('device.dialog.importResult.status')">
+                        {{ getImportStatusLabel(latestImportResult.status) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.dialog.importResult.total')">
+                        {{ latestImportResult.total }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.dialog.importResult.successCount')">
+                        {{ latestImportResult.successCount }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.dialog.importResult.failCount')">
+                        {{ latestImportResult.failCount }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.dialog.importResult.startTime')">
+                        {{ parseTime(latestImportResult.startTime) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('device.dialog.importResult.finishTime')">
+                        {{ parseTime(latestImportResult.finishTime) }}
+                    </el-descriptions-item>
+                </el-descriptions>
+            </div>
 
-            <div v-if="latestImportResult.requestErrors && latestImportResult.requestErrors.length" class="import-result-block">
+            <div v-if="latestImportResult.requestErrors && latestImportResult.requestErrors.length" class="import-result-block device-import-result__panel">
                 <div class="import-result-title">{{ $t("device.dialog.importResult.requestErrors") }}</div>
                 <div v-for="(item, index) in latestImportResult.requestErrors" :key="'request-error-' + index" class="import-result-text">
                     {{ index + 1 }}. {{ item }}
                 </div>
             </div>
 
-            <div v-if="latestImportResult.errors && latestImportResult.errors.length" class="import-result-block">
+            <div v-if="latestImportResult.errors && latestImportResult.errors.length" class="import-result-block device-import-result__panel">
                 <div class="import-result-title">{{ $t("device.dialog.importResult.failDetails") }}</div>
-                <el-table :data="latestImportResult.errors" size="mini" border max-height="320">
+                <el-table :data="latestImportResult.errors" size="mini" border max-height="320" class="device-import-result__table">
                     <el-table-column :label="$t('device.dialog.importResult.rowIndex')" prop="rowIndex" width="100" align="center" />
-                    <el-table-column :label="$t('device.dialog.importResult.errorMessage')" prop="message" min-width="460" />
+                    <el-table-column :label="$t('device.dialog.importResult.errorMessage')" prop="message" min-width="460" show-overflow-tooltip />
                 </el-table>
             </div>
         </div>
@@ -251,7 +289,7 @@
     <el-dialog :title="$t('device.dialog.assign.title')" :visible.sync="assignDeviceOpen" width="1200px" append-to-body @close="handleAssignDialogClose">
         <UserSelector ref="userSelector" selection-mode @select="handleAssignUserSelect" />
         <div slot="footer" class="dialog-footer">
-            <span class="assign-selected-user">
+            <span class="page-footer-meta">
                 {{ $t("device.dialog.assign.selectedUsers", { count: selectedAssignUsers.length }) }}
             </span>
             <el-button @click="handleAssignDialogClose">{{ $t("common.cancel") }}</el-button>
@@ -263,7 +301,7 @@
     <el-dialog :title="$t('device.dialog.detail.title')" :visible.sync="detailOpen" width="720px" append-to-body>
         <div v-loading="detailLoading">
             <el-descriptions v-if="detailForm" :column="2" border>
-                <el-descriptions-item label="ID">{{ detailForm.id || "-" }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('device.dialog.detail.id')">{{ detailForm.id || "-" }}</el-descriptions-item>
                 <el-descriptions-item :label="$t('device.table.sn')">{{ detailForm.sn || "-" }}</el-descriptions-item>
                 <el-descriptions-item :label="$t('device.dialog.detail.macAddress')">{{ detailForm.mac || "-" }}</el-descriptions-item>
                 <el-descriptions-item :label="$t('device.table.model')">{{ detailForm.model || "-" }}</el-descriptions-item>
@@ -296,17 +334,19 @@
             <el-button type="primary" @click="detailOpen = false">{{ $t("device.button.close") }}</el-button>
         </div>
     </el-dialog>
-    <el-dialog :title="$t('device.dialog.editInfo.title')" :visible.sync="editInfoOpen" width="520px" append-to-body @close="cancelEditInfo">
-        <el-form ref="editInfoForm" :model="editInfoForm" :rules="editInfoRules" label-width="100px">
-            <el-form-item :label="$t('device.table.sn')">
-                <el-input :value="editInfoForm.sn || '-'" disabled />
-            </el-form-item>
-            <el-form-item :label="$t('device.table.alias')" prop="alias">
-                <el-input v-model="editInfoForm.alias" :placeholder="$t('device.placeholder.alias')" clearable maxlength="64" show-word-limit />
-            </el-form-item>
-            <el-form-item :label="$t('device.query.remark')" prop="remark">
-                <el-input v-model="editInfoForm.remark" type="textarea" :rows="4" :placeholder="$t('device.placeholder.remark')" maxlength="255" show-word-limit />
-            </el-form-item>
+    <el-dialog :title="$t('device.dialog.editInfo.title')" :visible.sync="editInfoOpen" width="560px" append-to-body @close="cancelEditInfo">
+        <el-form ref="editInfoForm" :model="editInfoForm" :rules="editInfoRules" label-position="top" class="page-dialog-form">
+            <div class="page-dialog-grid">
+                <el-form-item :label="$t('device.table.sn')">
+                    <el-input :value="editInfoForm.sn || '-'" disabled />
+                </el-form-item>
+                <el-form-item :label="$t('device.table.alias')" prop="alias">
+                    <el-input v-model="editInfoForm.alias" :placeholder="$t('device.placeholder.alias')" clearable maxlength="64" show-word-limit />
+                </el-form-item>
+                <el-form-item :label="$t('device.query.remark')" prop="remark" class="page-dialog-grid__full">
+                    <el-input v-model="editInfoForm.remark" type="textarea" :rows="4" :placeholder="$t('device.placeholder.remark')" maxlength="255" show-word-limit />
+                </el-form-item>
+            </div>
         </el-form>
         <div slot="footer" class="dialog-footer">
             <el-button @click="cancelEditInfo">{{ $t("common.cancel") }}</el-button>
@@ -315,62 +355,62 @@
     </el-dialog>
     <DeviceTrajectoryDialog :visible.sync="trajectoryOpen" :device="trajectoryDevice" />
     <!-- 添加或修改系统设备主对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-            <el-form-item :label="$t('device.table.sn')" prop="sn">
-                <el-input v-model="form.sn" :placeholder="$t('device.placeholder.sn')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.dialog.detail.macAddress')" prop="mac">
-                <el-input v-model="form.mac" :placeholder="$t('device.placeholder.macAddress')" />
-            </el-form-item>
-            <!-- 新增：订单号表单项 -->
-            <el-form-item :label="$t('device.table.orderCode')" prop="orderCode">
-                <el-input v-model="form.orderCode" :placeholder="$t('device.placeholder.orderCode')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.form.privateKey')" prop="privateKey">
-                <el-input v-model="form.privateKey" :placeholder="$t('device.placeholder.privateKey')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.form.batchNo')" prop="batchNo">
-                <el-input v-model="form.batchNo" :placeholder="$t('device.placeholder.batchNo')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.form.hashId')" prop="hashid">
-                <el-input v-model="form.hashid" :placeholder="$t('device.placeholder.hashId')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.table.model')" prop="model">
-                <el-input v-model="form.model" :placeholder="$t('device.placeholder.model')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.form.bindBusinessId')" prop="bindBusinessId">
-                <el-input v-model="form.bindBusinessId" :placeholder="$t('device.placeholder.bindBusinessId')" />
-            </el-form-item>
-            <!-- 新增：备注表单项 -->
-            <el-form-item :label="$t('device.table.remark')" prop="remark">
-                <el-input v-model="form.remark" :placeholder="$t('device.placeholder.remarkSimple')" type="textarea" :rows="3" />
-            </el-form-item>
-            <el-form-item :label="$t('device.form.locateUpdateTime')" prop="locateUpdateTime">
-                <el-date-picker clearable size="small" v-model="form.locateUpdateTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('device.placeholder.locateUpdateTime')">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item :label="$t('device.form.lastLat')" prop="lastLat">
-                <el-input v-model="form.lastLat" :placeholder="$t('device.placeholder.lastLat')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.form.lastLng')" prop="lastLng">
-                <el-input v-model="form.lastLng" :placeholder="$t('device.placeholder.lastLng')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.dialog.detail.battery')" prop="battery">
-                <el-input v-model="form.battery" :placeholder="$t('device.placeholder.battery')" />
-            </el-form-item>
-            <el-form-item :label="$t('device.dialog.detail.lastReportedTime')" prop="lastReportedTime">
-                <el-date-picker clearable size="small" v-model="form.lastReportedTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('device.placeholder.lastReportedTime')">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item :label="$t('device.dialog.detail.lastLocationTime')" prop="lastLocationTime">
-                <el-date-picker clearable size="small" v-model="form.lastLocationTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('device.placeholder.lastLocationTime')">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item :label="$t('common.createTime')" prop="createTime">
-                <el-date-picker clearable size="small" v-model="form.createTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('device.placeholder.createTime')">
-                </el-date-picker>
-            </el-form-item>
+    <el-dialog :title="title" :visible.sync="open" width="820px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-position="top" class="page-dialog-form">
+            <div class="page-dialog-grid">
+                <el-form-item :label="$t('device.table.sn')" prop="sn">
+                    <el-input v-model="form.sn" :placeholder="$t('device.placeholder.sn')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.dialog.detail.macAddress')" prop="mac">
+                    <el-input v-model="form.mac" :placeholder="$t('device.placeholder.macAddress')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.table.orderCode')" prop="orderCode">
+                    <el-input v-model="form.orderCode" :placeholder="$t('device.placeholder.orderCode')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.form.privateKey')" prop="privateKey">
+                    <el-input v-model="form.privateKey" :placeholder="$t('device.placeholder.privateKey')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.form.batchNo')" prop="batchNo">
+                    <el-input v-model="form.batchNo" :placeholder="$t('device.placeholder.batchNo')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.form.hashId')" prop="hashid">
+                    <el-input v-model="form.hashid" :placeholder="$t('device.placeholder.hashId')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.table.model')" prop="model">
+                    <el-input v-model="form.model" :placeholder="$t('device.placeholder.model')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.form.bindBusinessId')" prop="bindBusinessId">
+                    <el-input v-model="form.bindBusinessId" :placeholder="$t('device.placeholder.bindBusinessId')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.table.remark')" prop="remark" class="page-dialog-grid__full">
+                    <el-input v-model="form.remark" :placeholder="$t('device.placeholder.remarkSimple')" type="textarea" :rows="3" />
+                </el-form-item>
+                <el-form-item :label="$t('device.form.locateUpdateTime')" prop="locateUpdateTime">
+                    <el-date-picker clearable size="small" v-model="form.locateUpdateTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('device.placeholder.locateUpdateTime')">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item :label="$t('device.form.lastLat')" prop="lastLat">
+                    <el-input v-model="form.lastLat" :placeholder="$t('device.placeholder.lastLat')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.form.lastLng')" prop="lastLng">
+                    <el-input v-model="form.lastLng" :placeholder="$t('device.placeholder.lastLng')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.dialog.detail.battery')" prop="battery">
+                    <el-input v-model="form.battery" :placeholder="$t('device.placeholder.battery')" />
+                </el-form-item>
+                <el-form-item :label="$t('device.dialog.detail.lastReportedTime')" prop="lastReportedTime">
+                    <el-date-picker clearable size="small" v-model="form.lastReportedTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('device.placeholder.lastReportedTime')">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item :label="$t('device.dialog.detail.lastLocationTime')" prop="lastLocationTime">
+                    <el-date-picker clearable size="small" v-model="form.lastLocationTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('device.placeholder.lastLocationTime')">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item :label="$t('common.createTime')" prop="createTime">
+                    <el-date-picker clearable size="small" v-model="form.createTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('device.placeholder.createTime')">
+                    </el-date-picker>
+                </el-form-item>
+            </div>
         </el-form>
         <div slot="footer" class="dialog-footer">
             <el-button type="primary" @click="submitForm">{{ $t("common.confirm") }}</el-button>
@@ -408,6 +448,7 @@ import UserSelector from "@/components/user";
 
 function getDefaultImportForm() {
     return {
+        file: null,
         orderCode: "",
         batchNo: "",
         remark: "",
@@ -603,6 +644,11 @@ export default {
     created() {
         this.getList();
     },
+    computed: {
+        importResultColumns() {
+            return this.$store.getters.device === "mobile" ? 1 : 2;
+        },
+    },
     deactivated() {
         this.closeBusinessSelectDialogs();
     },
@@ -1052,6 +1098,10 @@ export default {
                     });
             });
         },
+        downloadImportTemplate() {
+            const templateUrl = `${process.env.BASE_URL || "/"}templates/device-import-template.xlsx`;
+            window.open(templateUrl, "_blank");
+        },
         /** 限制文件数量：超出1个时提示 */
         handleExceed(files, fileList) {
             this.$message.warning(this.$t("device.message.exceedFileLimit", { count: fileList.length }));
@@ -1076,6 +1126,7 @@ export default {
             this.fileList = fileList.slice(-1);
             // 仅存储这1个文件的原生对象
             this.uploadFile = this.fileList.length > 0 ? this.fileList[0].raw : null;
+            this.importForm.file = this.uploadFile;
         },
 
         /** 提交导入 */
@@ -1210,12 +1261,102 @@ export default {
 </script>
 
 <style scoped>
+.device-import-result {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.device-import-result__alert {
+    margin-bottom: 0;
+}
+
+.device-import-result__panel {
+    padding: 16px;
+    border: 1px solid #ebeef5;
+    border-radius: 8px;
+    background: #fff;
+}
+
+.device-import-guide {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px 16px;
+    padding: 14px 16px;
+    margin-bottom: 16px;
+    border: 1px solid #ebeef5;
+    border-radius: 8px;
+    background: #f8fafc;
+}
+
+.device-import-guide__content {
+    flex: 1;
+    min-width: 260px;
+}
+
+.device-import-guide__title {
+    margin-bottom: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+}
+
+.device-import-guide__desc {
+    line-height: 1.6;
+    color: #606266;
+}
+
+.device-import-guide__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    margin-top: 8px;
+    font-size: 12px;
+    color: #909399;
+}
+
+.device-import-upload :deep(.el-upload) {
+    width: 100%;
+}
+
+.device-import-upload :deep(.el-upload-dragger) {
+    width: 100%;
+    height: auto;
+    min-height: 180px;
+    padding: 24px 16px;
+}
+
+.device-import-upload :deep(.el-upload__text) {
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.7;
+}
+
+.device-import-upload :deep(.el-upload__tip) {
+    white-space: normal;
+    line-height: 1.6;
+}
+
 .import-result-summary {
-    margin-top: 16px;
+    margin-top: 0;
+}
+
+.import-result-summary :deep(.el-descriptions-item__label) {
+    white-space: normal;
+    line-height: 20px;
+    word-break: break-word;
+}
+
+.device-import-result__table :deep(.cell) {
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.6;
 }
 
 .import-result-block {
-    margin-top: 16px;
+    margin-top: 0;
 }
 
 .import-result-title {
@@ -1230,9 +1371,4 @@ export default {
     color: #606266;
 }
 
-.assign-selected-user {
-    float: left;
-    line-height: 32px;
-    color: #606266;
-}
 </style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 4591229..c8d5924 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,511 +1,506 @@
-<template>
-<div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-        <el-form-item label="角色名称" prop="roleName">
-            <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="权限字符" prop="roleKey">
-            <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 240px">
-                <el-option label="正常" :value="0" />
-                <el-option label="停用" :value="1" />
-            </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="创建时间">
-            <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-        </el-form-item> -->
-        <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
+<template>
+  <div class="app-container">
+    <el-form
+      ref="queryForm"
+      :model="queryParams"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      class="page-query-form system-role-query-form"
+      label-position="top"
+      @submit.native.prevent="handleQuery"
+    >
+      <el-form-item :label="$t('systemRole.query.roleName')" prop="roleName">
+        <el-input
+          v-model="queryParams.roleName"
+          :placeholder="$t('systemRole.placeholder.roleName')"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('systemRole.query.roleKey')" prop="roleKey">
+        <el-input
+          v-model="queryParams.roleKey"
+          :placeholder="$t('systemRole.placeholder.roleKey')"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('systemRole.query.status')" prop="status">
+        <el-select v-model="queryParams.status" :placeholder="$t('systemRole.placeholder.status')" clearable>
+          <el-option :label="$t('systemRole.status.normal')" :value="0" />
+          <el-option :label="$t('systemRole.status.disabled')" :value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="page-query-actions">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t("common.search") }}</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("common.reset") }}</el-button>
+      </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
-        </el-col>
-        <el-col :span="1.5">
-            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:role:edit']">修改</el-button>
-        </el-col>
-<!--        <el-col :span="1.5">-->
-<!--            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']">删除</el-button>-->
-<!--        </el-col>-->
-        <el-col :span="1.5">
-            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:role:export']">导出</el-button>
-        </el-col>
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    <el-row :gutter="10" class="mb8 page-toolbar">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:role:add']">
+          {{ $t("common.add") }}
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:role:edit']"
+        >
+          {{ $t("common.edit") }}
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <!-- <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:role:export']"
+        >
+          {{ $t("systemRole.button.export") }}
+        </el-button> -->
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
     </el-row>
 
     <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="角色编号" prop="roleId" width="120" />
-        <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-        <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-        <el-table-column label="显示顺序" prop="roleSort" width="100" />
-        <el-table-column label="状态" align="center" width="100">
-            <template slot-scope="scope">
-                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
-            </template>
-        </el-table-column>
-        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template slot-scope="scope">
-                <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope" v-if="scope.row.roleId !== 1">
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']">修改</el-button>
-<!--                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">删除</el-button>-->
-                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-                    <!-- <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button> -->
-                    <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check" v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
-                        <el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
-                    </el-dropdown-menu>
-                </el-dropdown>
-            </template>
-        </el-table-column>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column :label="$t('systemRole.table.roleId')" prop="roleId" width="120" />
+      <el-table-column :label="$t('systemRole.table.roleName')" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column :label="$t('systemRole.table.roleKey')" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column :label="$t('systemRole.table.roleSort')" prop="roleSort" width="100" />
+      <el-table-column :label="$t('systemRole.table.status')" align="center" width="100">
+        <template slot-scope="scope">
+          <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)" />
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('systemRole.table.createTime')" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('systemRole.table.actions')" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']">
+            {{ $t("common.edit") }}
+          </el-button>
+          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check" v-hasPermi="['system:role:edit']">
+                {{ $t("systemRole.dropdown.dataScope") }}
+              </el-dropdown-item>
+              <el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:role:edit']">
+                {{ $t("systemRole.dropdown.assignUser") }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
-    <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-            <el-form-item label="角色名称" prop="roleName">
-                <el-input v-model="form.roleName" placeholder="请输入角色名称" />
-            </el-form-item>
-            <el-form-item prop="roleKey">
-                <span slot="label">
-                    <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
-                        <i class="el-icon-question"></i>
-                    </el-tooltip>
-                    权限字符
-                </span>
-                <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
-            </el-form-item>
-            <el-form-item label="角色顺序" prop="roleSort">
-                <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-            </el-form-item>
-            <el-form-item label="状态" prop="status">
-                <el-radio-group v-model="form.status">
-                    <el-radio :label="0">正常</el-radio>
-                    <el-radio :label="1">停用</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item label="菜单权限">
-                <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-                <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-                <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
-                <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
-            </el-form-item>
-            <el-form-item label="备注">
-                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
+    <el-dialog :title="title" :visible.sync="open" width="860px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-position="top" class="page-dialog-form">
+        <div class="page-dialog-grid">
+          <el-form-item :label="$t('systemRole.form.roleName')" prop="roleName">
+            <el-input v-model="form.roleName" :placeholder="$t('systemRole.placeholder.roleName')" />
+          </el-form-item>
+          <el-form-item prop="roleKey">
+            <span slot="label">
+              <el-tooltip :content="$t('systemRole.tooltip.roleKey')" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+              {{ $t("systemRole.form.roleKey") }}
+            </span>
+            <el-input v-model="form.roleKey" :placeholder="$t('systemRole.placeholder.permissionKey')" />
+          </el-form-item>
+          <el-form-item :label="$t('systemRole.form.roleSort')" prop="roleSort">
+            <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+          </el-form-item>
+          <el-form-item :label="$t('systemRole.form.status')" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio :label="0">{{ $t("systemRole.status.normal") }}</el-radio>
+              <el-radio :label="1">{{ $t("systemRole.status.disabled") }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
         </div>
+        <el-form-item :label="$t('systemRole.form.menuPermission')">
+          <div class="page-tree-option-group">
+            <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">{{ $t("systemRole.tree.expandCollapse") }}</el-checkbox>
+            <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">{{ $t("systemRole.tree.selectAll") }}</el-checkbox>
+            <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">{{ $t("systemRole.tree.parentChildLinkage") }}</el-checkbox>
+          </div>
+          <el-tree
+            ref="menu"
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
+            :empty-text="$t('systemRole.tree.loading')"
+            :props="defaultProps"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('systemRole.form.remark')">
+          <el-input v-model="form.remark" type="textarea" :placeholder="$t('systemRole.placeholder.remark')" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">{{ $t("common.confirm") }}</el-button>
+        <el-button @click="cancel">{{ $t("common.cancel") }}</el-button>
+      </div>
     </el-dialog>
 
-    <!-- 分配角色数据权限对话框 -->
     <el-dialog :title="title" :visible.sync="openDataScope" width="800px" append-to-body>
-        <el-form :model="form" label-width="80px">
-            <el-form-item label="角色名称">
-                <el-input v-model="form.roleName" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="权限字符">
-                <el-input v-model="form.roleKey" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="权限范围">
-                <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
-                    <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="数据权限" v-show="form.dataScope == 2">
-                <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-                <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-                <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
-                <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="dept" node-key="id" :check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
-            </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="submitDataScope">确 定</el-button>
-            <el-button @click="cancelDataScope">取 消</el-button>
+      <el-form :model="form" label-position="top" class="page-dialog-form">
+        <div class="page-dialog-grid">
+          <el-form-item :label="$t('systemRole.form.scopeRoleName')">
+            <el-input v-model="form.roleName" :disabled="true" />
+          </el-form-item>
+          <el-form-item :label="$t('systemRole.form.scopeRoleKey')">
+            <el-input v-model="form.roleKey" :disabled="true" />
+          </el-form-item>
+          <el-form-item :label="$t('systemRole.form.permissionRange')" class="page-dialog-grid__full">
+            <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+              <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
         </div>
+        <el-form-item :label="$t('systemRole.form.dataPermission')" v-show="form.dataScope == 2">
+          <div class="page-tree-option-group">
+            <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">{{ $t("systemRole.tree.expandCollapse") }}</el-checkbox>
+            <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">{{ $t("systemRole.tree.selectAll") }}</el-checkbox>
+            <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">{{ $t("systemRole.tree.parentChildLinkage") }}</el-checkbox>
+          </div>
+          <el-tree
+            ref="dept"
+            class="tree-border"
+            :data="deptOptions"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            :check-strictly="!form.deptCheckStrictly"
+            :empty-text="$t('systemRole.tree.loading')"
+            :props="defaultProps"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDataScope">{{ $t("common.confirm") }}</el-button>
+        <el-button @click="cancelDataScope">{{ $t("common.cancel") }}</el-button>
+      </div>
     </el-dialog>
-</div>
+  </div>
 </template>
 
 <script>
 import {
-    listRole,
-    getRole,
-    delRole,
-    addRole,
-    updateRole,
-    dataScope,
-    changeRoleStatus,
-    deptTreeSelect
-} from "@/api/system/role"
-import {
-    treeselect as menuTreeselect,
-    roleMenuTreeselect
-} from "@/api/system/menu"
-import { status } from "nprogress";
+  listRole,
+  getRole,
+  delRole,
+  addRole,
+  updateRole,
+  dataScope,
+  changeRoleStatus,
+  deptTreeSelect,
+} from "@/api/system/role";
+import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
 
 export default {
-    name: "Role",
-    dicts: [],
-    data() {
-        return {
-            // 遮罩层
-            loading: true,
-            // 选中数组
-            ids: [],
-            // 非单个禁用
-            single: true,
-            // 非多个禁用
-            multiple: true,
-            // 显示搜索条件
-            showSearch: true,
-            // 总条数
-            total: 0,
-            // 角色表格数据
-            roleList: [],
-            // 弹出层标题
-            title: "",
-            // 是否显示弹出层
-            open: false,
-            // 是否显示弹出层（数据权限）
-            openDataScope: false,
-            menuExpand: false,
-            menuNodeAll: false,
-            deptExpand: true,
-            deptNodeAll: false,
-            // 日期范围
-            dateRange: [],
-            // 数据范围选项
-            dataScopeOptions: [{
-                    value: "1",
-                    label: "全部数据权限"
-                },
-                {
-                    value: "2",
-                    label: "自定数据权限"
-                },
-                {
-                    value: "3",
-                    label: "本部门数据权限"
-                },
-                {
-                    value: "4",
-                    label: "本部门及以下数据权限"
-                },
-                {
-                    value: "5",
-                    label: "仅本人数据权限"
-                }
-            ],
-            // 菜单列表
-            menuOptions: [],
-            // 部门列表
-            deptOptions: [],
-            // 查询参数
-            queryParams: {
-                pageNum: 1,
-                pageSize: 10,
-                roleName: undefined,
-                roleKey: undefined,
-                status: undefined
-            },
-            // 表单参数
-            form: {status: 0},
-            defaultProps: {
-                children: "children",
-                label: "label"
-            },
-            // 表单校验
-            rules: {
-                roleName: [{
-                    required: true,
-                    message: "角色名称不能为空",
-                    trigger: "blur"
-                }],
-                roleKey: [{
-                    required: true,
-                    message: "权限字符不能为空",
-                    trigger: "blur"
-                }],
-                roleSort: [{
-                    required: true,
-                    message: "角色顺序不能为空",
-                    trigger: "blur"
-                }]
-            }
+  name: "Role",
+  dicts: [],
+  data() {
+    return {
+      loading: true,
+      ids: [],
+      single: true,
+      multiple: true,
+      showSearch: true,
+      total: 0,
+      roleList: [],
+      title: "",
+      open: false,
+      openDataScope: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      dateRange: [],
+      dataScopeOptions: [],
+      menuOptions: [],
+      deptOptions: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined,
+      },
+      form: {
+        status: 0,
+      },
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {},
+    };
+  },
+  created() {
+    this.initI18nState();
+    this.getList();
+  },
+  methods: {
+    initI18nState() {
+      this.dataScopeOptions = [
+        { value: "1", label: this.$t("systemRole.dataScope.all") },
+        { value: "2", label: this.$t("systemRole.dataScope.custom") },
+        { value: "3", label: this.$t("systemRole.dataScope.dept") },
+        { value: "4", label: this.$t("systemRole.dataScope.deptAndChild") },
+        { value: "5", label: this.$t("systemRole.dataScope.self") },
+      ];
+      this.rules = {
+        roleName: [{ required: true, message: this.$t("systemRole.validation.roleNameRequired"), trigger: "blur" }],
+        roleKey: [{ required: true, message: this.$t("systemRole.validation.roleKeyRequired"), trigger: "blur" }],
+        roleSort: [{ required: true, message: this.$t("systemRole.validation.roleSortRequired"), trigger: "blur" }],
+      };
+    },
+    getList() {
+      this.loading = true;
+      listRole(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+        this.roleList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    getMenuTreeselect() {
+      menuTreeselect().then((response) => {
+        this.menuOptions = response.data;
+      });
+    },
+    getMenuAllCheckedKeys() {
+      const checkedKeys = this.$refs.menu.getCheckedKeys();
+      const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    getDeptAllCheckedKeys() {
+      const checkedKeys = this.$refs.dept.getCheckedKeys();
+      const halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    getRoleMenuTreeselect(roleId) {
+      return roleMenuTreeselect(roleId).then((response) => {
+        this.menuOptions = response.menus;
+        return response;
+      });
+    },
+    getDeptTree(roleId) {
+      return deptTreeSelect(roleId).then((response) => {
+        this.deptOptions = response.depts;
+        return response;
+      });
+    },
+    handleStatusChange(row) {
+      const text = row.status === "0" ? this.$t("systemRole.status.normal") : this.$t("systemRole.status.disabled");
+      this.$modal
+        .confirm(this.$t("systemRole.message.confirmStatusChange", { action: text, roleName: row.roleName }))
+        .then(() => changeRoleStatus(row.roleId, row.status))
+        .then(() => {
+          this.$modal.msgSuccess(this.$t("systemRole.message.statusChangeSuccess", { action: text }));
+        })
+        .catch(() => {
+          row.status = row.status === "0" ? "1" : "0";
+        });
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    cancelDataScope() {
+      this.openDataScope = false;
+      this.reset();
+    },
+    reset() {
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false;
+      this.menuNodeAll = false;
+      this.deptExpand = true;
+      this.deptNodeAll = false;
+      this.form = {
+        roleId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        status: 0,
+        menuIds: [],
+        deptIds: [],
+        menuCheckStrictly: true,
+        deptCheckStrictly: true,
+        remark: undefined,
+      };
+      this.resetForm("form");
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.roleId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    handleCommand(command, row) {
+      switch (command) {
+        case "handleDataScope":
+          this.handleDataScope(row);
+          break;
+        case "handleAuthUser":
+          this.handleAuthUser(row);
+          break;
+        default:
+          break;
+      }
+    },
+    handleCheckedTreeExpand(value, type) {
+      if (type === "menu") {
+        const treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i += 1) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type === "dept") {
+        const treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i += 1) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
         }
+      }
     },
-    created() {
-        this.getList()
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === "menu") {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
+      } else if (type === "dept") {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
+      }
     },
-    methods: {
-        /** 查询角色列表 */
-        getList() {
-            this.loading = true
-            listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-                this.roleList = response.data.list
-                this.total = response.data.total
-                this.loading = false
-            })
-        },
-        /** 查询菜单树结构 */
-        getMenuTreeselect() {
-            menuTreeselect().then(response => {
-                this.menuOptions = response.data
-            })
-        },
-        // 所有菜单节点数据
-        getMenuAllCheckedKeys() {
-            // 目前被选中的菜单节点
-            let checkedKeys = this.$refs.menu.getCheckedKeys()
-            // 半选中的菜单节点
-            let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()
-            checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
-            return checkedKeys
-        },
-        // 所有部门节点数据
-        getDeptAllCheckedKeys() {
-            // 目前被选中的部门节点
-            let checkedKeys = this.$refs.dept.getCheckedKeys()
-            // 半选中的部门节点
-            let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()
-            checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
-            return checkedKeys
-        },
-        /** 根据角色ID查询菜单树结构 */
-        getRoleMenuTreeselect(roleId) {
-            return roleMenuTreeselect(roleId).then(response => {
-                this.menuOptions = response.menus
-                return response
-            })
-        },
-        /** 根据角色ID查询部门树结构 */
-        getDeptTree(roleId) {
-            return deptTreeSelect(roleId).then(response => {
-                this.deptOptions = response.depts
-                return response
-            })
-        },
-        // 角色状态修改
-        handleStatusChange(row) {
-            let text = row.status === "0" ? "启用" : "停用"
-            this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function () {
-                return changeRoleStatus(row.roleId, row.status)
-            }).then(() => {
-                this.$modal.msgSuccess(text + "成功")
-            }).catch(function () {
-                row.status = row.status === "0" ? "1" : "0"
-            })
-        },
-        // 取消按钮
-        cancel() {
-            this.open = false
-            this.reset()
-        },
-        // 取消按钮（数据权限）
-        cancelDataScope() {
-            this.openDataScope = false
-            this.reset()
-        },
-        // 表单重置
-        reset() {
-            if (this.$refs.menu != undefined) {
-                this.$refs.menu.setCheckedKeys([])
-            }
-            this.menuExpand = false
-                this.menuNodeAll = false
-                this.deptExpand = true
-                this.deptNodeAll = false
-                this.form = {
-                    roleId: undefined,
-                    roleName: undefined,
-                    roleKey: undefined,
-                    roleSort: 0,
-                    status: 0,
-                    menuIds: [],
-                    deptIds: [],
-                    menuCheckStrictly: true,
-                    deptCheckStrictly: true,
-                    remark: undefined
-                }
-            this.resetForm("form")
-        },
-        /** 搜索按钮操作 */
-        handleQuery() {
-            this.queryParams.pageNum = 1
-            this.getList()
-        },
-        /** 重置按钮操作 */
-        resetQuery() {
-            this.dateRange = []
-            this.resetForm("queryForm")
-            this.handleQuery()
-        },
-        // 多选框选中数据
-        handleSelectionChange(selection) {
-            this.ids = selection.map(item => item.roleId)
-            this.single = selection.length != 1
-            this.multiple = !selection.length
-        },
-        // 更多操作触发
-        handleCommand(command, row) {
-            switch (command) {
-                case "handleDataScope":
-                    this.handleDataScope(row)
-                    break
-                case "handleAuthUser":
-                    this.handleAuthUser(row)
-                    break
-                default:
-                    break
-            }
-        },
-        // 树权限（展开/折叠）
-        handleCheckedTreeExpand(value, type) {
-            if (type == 'menu') {
-                let treeList = this.menuOptions
-                for (let i = 0; i < treeList.length; i++) {
-                    this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
-                }
-            } else if (type == 'dept') {
-                let treeList = this.deptOptions
-                for (let i = 0; i < treeList.length; i++) {
-                    this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
-                }
-            }
-        },
-        // 树权限（全选/全不选）
-        handleCheckedTreeNodeAll(value, type) {
-            if (type == 'menu') {
-                this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
-            } else if (type == 'dept') {
-                this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
-            }
-        },
-        // 树权限（父子联动）
-        handleCheckedTreeConnect(value, type) {
-            if (type == 'menu') {
-                this.form.menuCheckStrictly = value ? true : false
-            } else if (type == 'dept') {
-                this.form.deptCheckStrictly = value ? true : false
-            }
-        },
-        /** 新增按钮操作 */
-        handleAdd() {
-            this.reset()
-            this.getMenuTreeselect()
-            this.open = true
-            this.title = "添加角色"
-        },
-        /** 修改按钮操作 */
-        handleUpdate(row) {
-            this.reset()
-            const roleId = row.roleId || this.ids
-            const roleMenu = this.getRoleMenuTreeselect(roleId)
-            getRole(roleId).then(response => {
-                this.form = response.data
-                this.open = true
-                this.$nextTick(() => {
-                    roleMenu.then(res => {
-                        let checkedKeys = res.checkedKeys
-                        checkedKeys.forEach((v) => {
-                            this.$nextTick(() => {
-                                this.$refs.menu.setChecked(v, true, false)
-                            })
-                        })
-                    })
-                })
-            })
-            this.title = "修改角色"
-        },
-        /** 选择角色权限范围触发 */
-        dataScopeSelectChange(value) {
-            if (value !== '2') {
-                this.$refs.dept.setCheckedKeys([])
-            }
-        },
-        /** 分配数据权限操作 */
-        handleDataScope(row) {
-            this.reset()
-            const deptTreeSelect = this.getDeptTree(row.roleId)
-            getRole(row.roleId).then(response => {
-                this.form = response.data
-                this.openDataScope = true
-                this.$nextTick(() => {
-                    deptTreeSelect.then(res => {
-                        this.$refs.dept.setCheckedKeys(res.checkedKeys)
-                    })
-                })
-            })
-            this.title = "分配数据权限"
-        },
-        /** 分配用户操作 */
-        handleAuthUser: function (row) {
-            const roleId = row.roleId
-            this.$router.push("/system/role-auth/user/" + roleId)
-        },
-        /** 提交按钮 */
-        submitForm: function () {
-            this.$refs["form"].validate(valid => {
-                if (valid) {
-                    if (this.form.roleId != undefined) {
-                        this.form.menuIds = this.getMenuAllCheckedKeys()
-                        updateRole(this.form).then(response => {
-                            this.$modal.msgSuccess("修改成功")
-                            this.open = false
-                            this.getList()
-                        })
-                    } else {
-                        this.form.menuIds = this.getMenuAllCheckedKeys()
-                        addRole(this.form).then(response => {
-                            this.$modal.msgSuccess("新增成功")
-                            this.open = false
-                            this.getList()
-                        })
-                    }
-                }
-            })
-        },
-        /** 提交按钮（数据权限） */
-        submitDataScope: function () {
-            if (this.form.roleId != undefined) {
-                this.form.deptIds = this.getDeptAllCheckedKeys()
-                dataScope(this.form).then(response => {
-                    this.$modal.msgSuccess("修改成功")
-                    this.openDataScope = false
-                    this.getList()
-                })
-            }
-        },
-        /** 删除按钮操作 */
-        handleDelete(row) {
-            const roleIds = row.roleId || this.ids
-            this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function () {
-                return delRole(roleIds)
-            }).then(() => {
-                this.getList()
-                this.$modal.msgSuccess("删除成功")
-            }).catch(() => {})
-        },
-        /** 导出按钮操作 */
-        handleExport() {
-            this.download('system/role/export', {
-                ...this.queryParams
-            }, `role_${new Date().getTime()}.xlsx`)
+    handleCheckedTreeConnect(value, type) {
+      if (type === "menu") {
+        this.form.menuCheckStrictly = !!value;
+      } else if (type === "dept") {
+        this.form.deptCheckStrictly = !!value;
+      }
+    },
+    handleAdd() {
+      this.reset();
+      this.getMenuTreeselect();
+      this.open = true;
+      this.title = this.$t("systemRole.dialog.addTitle");
+    },
+    handleUpdate(row) {
+      this.reset();
+      const roleId = row.roleId || this.ids;
+      const roleMenu = this.getRoleMenuTreeselect(roleId);
+      getRole(roleId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.$nextTick(() => {
+          roleMenu.then((res) => {
+            const checkedKeys = res.checkedKeys;
+            checkedKeys.forEach((value) => {
+              this.$nextTick(() => {
+                this.$refs.menu.setChecked(value, true, false);
+              });
+            });
+          });
+        });
+      });
+      this.title = this.$t("systemRole.dialog.editTitle");
+    },
+    dataScopeSelectChange(value) {
+      if (value !== "2") {
+        this.$refs.dept.setCheckedKeys([]);
+      }
+    },
+    handleDataScope(row) {
+      this.reset();
+      const deptTree = this.getDeptTree(row.roleId);
+      getRole(row.roleId).then((response) => {
+        this.form = response.data;
+        this.openDataScope = true;
+        this.$nextTick(() => {
+          deptTree.then((res) => {
+            this.$refs.dept.setCheckedKeys(res.checkedKeys);
+          });
+        });
+      });
+      this.title = this.$t("systemRole.dialog.dataScopeTitle");
+    },
+    handleAuthUser(row) {
+      this.$router.push("/system/role-auth/user/" + row.roleId);
+    },
+    submitForm() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return;
         }
-    }
-}
+        this.form.menuIds = this.getMenuAllCheckedKeys();
+        const request = this.form.roleId !== undefined ? updateRole(this.form) : addRole(this.form);
+        request.then(() => {
+          this.$modal.msgSuccess(
+            this.form.roleId !== undefined ? this.$t("systemRole.message.editSuccess") : this.$t("systemRole.message.addSuccess")
+          );
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    submitDataScope() {
+      if (this.form.roleId !== undefined) {
+        this.form.deptIds = this.getDeptAllCheckedKeys();
+        dataScope(this.form).then(() => {
+          this.$modal.msgSuccess(this.$t("systemRole.message.editSuccess"));
+          this.openDataScope = false;
+          this.getList();
+        });
+      }
+    },
+    handleDelete(row) {
+      const roleIds = row.roleId || this.ids;
+      this.$modal
+        .confirm(this.$t("systemRole.message.confirmDelete", { roleIds }))
+        .then(() => delRole(roleIds))
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess(this.$t("systemRole.message.deleteSuccess"));
+        })
+        .catch(() => {});
+    },
+    handleExport() {
+      this.download(
+        "system/role/export",
+        {
+          ...this.queryParams,
+        },
+        `role_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
 </script>
diff --git a/src/views/system/user/components/ProfileSettingsCard.vue b/src/views/system/user/components/ProfileSettingsCard.vue
index 45dc6a6..3c366ef 100644
--- a/src/views/system/user/components/ProfileSettingsCard.vue
+++ b/src/views/system/user/components/ProfileSettingsCard.vue
@@ -1,11 +1,11 @@
 <template>
   <el-card class="profile-settings-card" shadow="never">
     <div slot="header" class="clearfix">
-      <span>基本资料</span>
+      <span>{{ $t("profile.title") }}</span>
     </div>
 
     <el-tabs v-model="activeTab">
-      <el-tab-pane label="基本资料" name="basic">
+      <el-tab-pane :label="$t('profile.tabs.basic')" name="basic">
         <el-form
           ref="profileForm"
           :model="profileForm"
@@ -15,12 +15,12 @@
         >
           <el-row :gutter="20">
             <el-col :span="12">
-              <el-form-item label="登录账户">
+              <el-form-item :label="$t('profile.form.account')">
                 <el-input v-model="profileForm.account" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="所属企业">
+              <el-form-item :label="$t('profile.form.businessName')">
                 <el-input v-model="profileForm.businessName" disabled />
               </el-form-item>
             </el-col>
@@ -28,16 +28,16 @@
 
           <el-row :gutter="20">
             <el-col :span="12">
-              <el-form-item label="昵称" prop="nickName">
+              <el-form-item :label="$t('profile.form.nickName')" prop="nickName">
                 <el-input v-model="profileForm.nickName" maxlength="30" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="谷歌地图 Key">
+              <el-form-item :label="$t('profile.form.googleKey')">
                 <el-input
                   v-model="profileForm.googleKey"
                   :disabled="!profileForm.canEditBusinessConfig"
-                  placeholder="请输入谷歌地图 Key"
+                  :placeholder="$t('profile.placeholder.googleKey')"
                 />
               </el-form-item>
             </el-col>
@@ -45,20 +45,20 @@
 
           <el-row :gutter="20">
             <el-col :span="12">
-              <el-form-item label="高德地图 Key">
+              <el-form-item :label="$t('profile.form.gaodeKey')">
                 <el-input
                   v-model="profileForm.gaodeKey"
                   :disabled="!profileForm.canEditBusinessConfig"
-                  placeholder="请输入高德地图 Key"
+                  :placeholder="$t('profile.placeholder.gaodeKey')"
                 />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="高德安全密钥">
+              <el-form-item :label="$t('profile.form.gaodeSecurityKey')">
                 <el-input
                   v-model="profileForm.gaodeSecurityKey"
                   :disabled="!profileForm.canEditBusinessConfig"
-                  placeholder="请输入高德安全密钥"
+                  :placeholder="$t('profile.placeholder.gaodeSecurityKey')"
                 />
               </el-form-item>
             </el-col>
@@ -69,20 +69,20 @@
             type="info"
             :closable="false"
             show-icon
-            title="当前账号只能修改自己的昵称，企业地图 Key 仅企业管理员可修改。"
+            :title="$t('profile.tip.businessConfigReadonly')"
             class="profile-tip"
           />
 
           <el-form-item>
             <el-button type="primary" :loading="profileSaving" @click="submitProfile">
-              保存资料
+              {{ $t("profile.button.saveProfile") }}
             </el-button>
-            <el-button @click="loadProfile">重置</el-button>
+            <el-button @click="loadProfile">{{ $t("profile.button.reset") }}</el-button>
           </el-form-item>
         </el-form>
       </el-tab-pane>
 
-      <el-tab-pane label="修改密码" name="password">
+      <el-tab-pane :label="$t('profile.tabs.password')" name="password">
         <el-form
           ref="passwordForm"
           :model="passwordForm"
@@ -90,35 +90,35 @@
           label-width="120px"
           size="small"
         >
-          <el-form-item label="旧密码" prop="oldPassword">
+          <el-form-item :label="$t('profile.form.oldPassword')" prop="oldPassword">
             <el-input
               v-model="passwordForm.oldPassword"
               type="password"
               show-password
-              placeholder="请输入旧密码"
+              :placeholder="$t('profile.placeholder.oldPassword')"
             />
           </el-form-item>
-          <el-form-item label="新密码" prop="newPassword">
+          <el-form-item :label="$t('profile.form.newPassword')" prop="newPassword">
             <el-input
               v-model="passwordForm.newPassword"
               type="password"
               show-password
-              placeholder="请输入新密码"
+              :placeholder="$t('profile.placeholder.newPassword')"
             />
           </el-form-item>
-          <el-form-item label="确认密码" prop="confirmPassword">
+          <el-form-item :label="$t('profile.form.confirmPassword')" prop="confirmPassword">
             <el-input
               v-model="passwordForm.confirmPassword"
               type="password"
               show-password
-              placeholder="请再次输入新密码"
+              :placeholder="$t('profile.placeholder.confirmPassword')"
             />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" :loading="passwordSaving" @click="submitPassword">
-              修改密码
+              {{ $t("profile.button.changePassword") }}
             </el-button>
-            <el-button @click="resetPasswordForm">重置</el-button>
+            <el-button @click="resetPasswordForm">{{ $t("profile.button.reset") }}</el-button>
           </el-form-item>
         </el-form>
       </el-tab-pane>
@@ -158,44 +158,48 @@ function createDefaultPasswordForm() {
 export default {
   name: "ProfileSettingsCard",
   data() {
-    const confirmPasswordValidator = (rule, value, callback) => {
-      if (value !== this.passwordForm.newPassword) {
-        callback(new Error("两次输入的新密码不一致"));
-        return;
-      }
-      callback();
-    };
-
     return {
       activeTab: "basic",
       profileSaving: false,
       passwordSaving: false,
       profileForm: createDefaultProfileForm(),
       passwordForm: createDefaultPasswordForm(),
-      profileRules: {
+      profileRules: {},
+      passwordRules: {},
+    };
+  },
+  created() {
+    this.initI18nState();
+    this.loadProfile();
+  },
+  methods: {
+    initI18nState() {
+      const confirmPasswordValidator = (rule, value, callback) => {
+        if (value !== this.passwordForm.newPassword) {
+          callback(new Error(this.$t("profile.validation.confirmPasswordMismatch")));
+          return;
+        }
+        callback();
+      };
+      this.profileRules = {
         nickName: [
-          { required: true, message: "昵称不能为空", trigger: "blur" },
+          { required: true, message: this.$t("profile.validation.nickNameRequired"), trigger: "blur" },
         ],
-      },
-      passwordRules: {
+      };
+      this.passwordRules = {
         oldPassword: [
-          { required: true, message: "旧密码不能为空", trigger: "blur" },
+          { required: true, message: this.$t("profile.validation.oldPasswordRequired"), trigger: "blur" },
         ],
         newPassword: [
-          { required: true, message: "新密码不能为空", trigger: "blur" },
-          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
+          { required: true, message: this.$t("profile.validation.newPasswordRequired"), trigger: "blur" },
+          { min: 6, max: 20, message: this.$t("profile.validation.newPasswordLength"), trigger: "blur" },
         ],
         confirmPassword: [
-          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { required: true, message: this.$t("profile.validation.confirmPasswordRequired"), trigger: "blur" },
           { validator: confirmPasswordValidator, trigger: "blur" },
         ],
-      },
-    };
-  },
-  created() {
-    this.loadProfile();
-  },
-  methods: {
+      };
+    },
     loadProfile() {
       getUserProfile().then((response) => {
         const data = response && response.data ? response.data : {};
@@ -216,7 +220,7 @@ export default {
         this.profileSaving = true;
         updateUserProfile(payload)
           .then(() => {
-            this.$modal.msgSuccess("基本资料已更新");
+            this.$modal.msgSuccess(this.$t("profile.message.profileUpdated"));
             this.loadProfile();
           })
           .finally(() => {
@@ -232,7 +236,7 @@ export default {
         this.passwordSaving = true;
         updateUserPwd(this.passwordForm.oldPassword, this.passwordForm.newPassword)
           .then(() => {
-            this.$modal.msgSuccess("密码修改成功");
+            this.$modal.msgSuccess(this.$t("profile.message.passwordUpdated"));
             this.resetPasswordForm();
           })
           .finally(() => {
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 16cad1a..a7ccbb1 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,275 +1,256 @@
-<template>
+<template>
   <div class="app-container">
-    <el-row :gutter="20">
+    <el-form
+      ref="queryForm"
+      :model="queryParams"
+      :inline="true"
+      v-show="showSearch"
+      class="page-query-form system-user-query-form"
+      label-position="top"
+      @submit.native.prevent="handleQuery"
+    >
+      <el-form-item :label="$t('systemUser.query.account')" prop="account">
+        <el-input
+          v-model="queryParams.account"
+          :placeholder="$t('systemUser.placeholder.account')"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('systemUser.query.nickName')" prop="nickName">
+        <el-input
+          v-model="queryParams.nickName"
+          :placeholder="$t('systemUser.placeholder.nickName')"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('systemUser.query.status')" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          :placeholder="$t('systemUser.placeholder.status')"
+          clearable
+          size="small"
+        >
+          <el-option :label="$t('systemUser.status.enabled')" :value="false" />
+          <el-option :label="$t('systemUser.status.disabled')" :value="true" />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="page-query-actions">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t("common.search") }}</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("common.reset") }}</el-button>
+      </el-form-item>
+    </el-form>
 
-      <!--用户数据-->
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="用户名称" prop="account">
-            <el-input
-              v-model="queryParams.account"
-              placeholder="请输入用户名称"
-              clearable
-              size="small"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
+    <el-row :gutter="10" class="mb8 page-toolbar">
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-user" size="mini" @click="handleAddEmployee">
+          {{ $t("systemUser.button.addEmployee") }}
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:user:edit']"
+        >
+          {{ $t("common.edit") }}
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <!-- <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:user:export']"
+        >
+          {{ $t("systemUser.button.export") }}
+        </el-button> -->
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" />
+    </el-row>
+
+    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column v-if="columns[0].visible" :label="columns[0].label" align="center" key="id" prop="id" />
+      <el-table-column
+        v-if="columns[1].visible"
+        :label="columns[1].label"
+        align="center"
+        key="account"
+        prop="account"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        v-if="columns[2].visible"
+        :label="columns[2].label"
+        align="center"
+        key="nickName"
+        prop="nickName"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column v-if="columns[5].visible" :label="columns[5].label" align="center" key="status">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="false"
+            :inactive-value="true"
+            @change="handleStatusChange(scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="columns[6].visible"
+        :label="columns[6].label"
+        align="center"
+        key="googleAuthSecret"
+        prop="googleAuthSecret"
+      >
+        <template slot-scope="scope">
+          <img
+            :src="columns[6].url + '?content=' + encodeURIComponent(`otpauth://totp/GeoTag_${scope.row.account}?secret=${scope.row.googleAuthSecret}`)"
+            style="width: 100px; height: 100px"
+          >
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns[7].visible" :label="columns[7].label" align="center" prop="createTime" width="160">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('systemUser.table.actions')"
+        align="center"
+        width="160"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:user:edit']"
+          >
+            {{ $t("common.edit") }}
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-key"
+            @click="handleResetPwd(scope.row)"
+            v-hasPermi="['system:user:resetPwd']"
+          >
+            {{ $t("systemUser.button.resetPassword") }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-position="top" class="page-dialog-form">
+        <div class="page-dialog-grid">
+          <el-form-item v-if="form.id === undefined" :label="$t('systemUser.form.account')" prop="account">
+            <el-input v-model="form.account" :placeholder="$t('systemUser.placeholder.account')" />
           </el-form-item>
-             <el-form-item label="昵称" prop="nickName">
-            <el-input
-              v-model="queryParams.nickName"
-              placeholder="请输入昵称"
-              clearable
-              size="small"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
+          <el-form-item v-if="form.id === undefined" :label="$t('systemUser.form.password')" prop="passwordHash">
+            <el-input v-model="form.passwordHash" :placeholder="$t('systemUser.placeholder.password')" type="password" show-password />
+          </el-form-item>
+          <el-form-item :label="$t('systemUser.form.nickName')" prop="nickName">
+            <el-input v-model="form.nickName" :placeholder="$t('systemUser.placeholder.userNickName')" />
           </el-form-item>
-          <el-form-item label="状态" prop="status">
+          <el-form-item :label="$t('systemUser.form.role')" prop="roleIds">
             <el-select
-              v-model="queryParams.status"
-              placeholder="用户状态"
-              clearable
-              size="small"
-              style="width: 240px"
+              v-model="form.roleIds"
+              multiple
+              filterable
+              collapse-tags
+              :placeholder="$t('systemUser.placeholder.roleAll')"
+              style="width: 100%"
             >
-              <el-option label="启用" :value="false" />
-              <el-option label="禁用" :value="true" />
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.roleId"
+                :label="getRoleOptionLabel(item)"
+                :value="String(item.roleId)"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          <el-form-item :label="$t('systemUser.form.status')" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio :label="false">{{ $t("systemUser.status.enabled") }}</el-radio>
+              <el-radio :label="true">{{ $t("systemUser.status.disabled") }}</el-radio>
+            </el-radio-group>
           </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-          
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="info"
-              plain
-              icon="el-icon-user"
-              size="mini"
-              @click="handleAddEmployee"
-            >新增员工</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="success"
-              plain
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-              v-hasPermi="['system:user:edit']"
-            >修改</el-button>
-          </el-col>
-         
-          <!-- <el-col :span="1.5">
-            <el-button
-              type="info"
-              plain
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-            >导入</el-button>
-          </el-col> -->
-          <el-col :span="1.5">
-            <el-button
-              type="warning"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              v-hasPermi="['system:user:export']"
-            >导出</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="用户ID" align="center" key="id" prop="id" v-if="columns[0].visible" />
-          <el-table-column label="用户名称" align="center" key="account" prop="account" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-<!--          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />-->
-<!--          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />-->
-          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.status"
-                :active-value="false"
-                :inactive-value="true"
-                @change="handleStatusChange(scope.row)"
-              ></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="谷歌令牌" align="center" key="googleAuthSecret" prop="googleAuthSecret" v-if="columns[6].visible">
-            <template slot-scope="scope">
-              <!-- <img :src="columns[6].url+'?content=otpauth://totp/GeoTag_'+scope.row.account+'?secret='+scope.row.googleAuthSecret" style="width: 100px; height: 100px;"> -->
-            <img :src="columns[6].url + '?content=' + encodeURIComponent(`otpauth://totp/GeoTag_${scope.row.account}?secret=${scope.row.googleAuthSecret}`)" style="width: 100px; height: 100px;">
-
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[7].visible" width="160">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            align="center"
-            width="160"
-            class-name="small-padding fixed-width"
-          >
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']"
-              >修改</el-button>
-              <!-- <el-button
-                v-if="scope.row.id !== 1"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:remove']"
-              >删除</el-button> -->
-              <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-key"
-              @click="handleResetPwd(scope.row)"
-              v-hasPermi="['system:user:resetPwd']"
-            >重置</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
-    </el-row>
-
-    <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.id == undefined" label="用户名称" prop="account">
-              <el-input v-model="form.account" placeholder="请输入用户名称" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.id == undefined" label="用户密码" prop="passwordHash">
-              <el-input v-model="form.passwordHash" placeholder="请输入用户密码" type="passwordHash" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select
-                v-model="form.roleIds"
-                multiple
-                filterable
-                placeholder="请选择角色（全部角色）"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in roleOptions"
-                  :key="item.roleId"
-                  :label="(item.roleName || item.name) || ('角色' + item.roleId)"
-                  :value="String(item.roleId)"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-
-
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="状态" prop="status">
-              <el-radio-group v-model="form.status">
-                <el-radio :label="false">启用</el-radio>
-                <el-radio :label="true">禁用</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
+          <el-form-item :label="$t('systemUser.form.remark')" class="page-dialog-grid__full">
+            <el-input v-model="form.remark" type="textarea" :placeholder="$t('systemUser.placeholder.remark')" />
+          </el-form-item>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">{{ $t("common.confirm") }}</el-button>
+        <el-button @click="cancel">{{ $t("common.cancel") }}</el-button>
       </div>
     </el-dialog>
 
-    <el-dialog title="新增员工" :visible.sync="employeeOpen" width="500px" append-to-body>
-      <el-form ref="employeeForm" :model="employeeForm" :rules="employeeRules" label-width="90px">
-        <el-form-item label="昵称" prop="nickName">
-          <el-input v-model="employeeForm.nickName" placeholder="请输入昵称" />
-        </el-form-item>
-        <el-form-item label="登录账户" prop="account">
-          <el-input v-model="employeeForm.account" placeholder="请输入登录账户" />
-        </el-form-item>
-        <el-form-item label="密码" prop="passwordHash">
-          <el-input
-            v-model="employeeForm.passwordHash"
-            type="password"
-            show-password
-            placeholder="请输入密码"
-          />
-        </el-form-item>
-        <el-form-item label="角色" prop="roleIds">
-          <el-select
-            v-model="employeeForm.roleIds"
-            multiple
-            filterable
-            placeholder="请选择角色"
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in roleOptions"
-              :key="item.roleId"
-              :label="(item.roleName || item.name) || ('角色' + item.roleId)"
-              :value="String(item.roleId)"
+    <el-dialog :title="$t('systemUser.dialog.addEmployeeTitle')" :visible.sync="employeeOpen" width="560px" append-to-body>
+      <el-form ref="employeeForm" :model="employeeForm" :rules="employeeRules" label-position="top" class="page-dialog-form">
+        <div class="page-dialog-grid">
+          <el-form-item :label="$t('systemUser.form.employeeNickName')" prop="nickName">
+            <el-input v-model="employeeForm.nickName" :placeholder="$t('systemUser.placeholder.nickName')" />
+          </el-form-item>
+          <el-form-item :label="$t('systemUser.form.loginAccount')" prop="account">
+            <el-input v-model="employeeForm.account" :placeholder="$t('systemUser.placeholder.loginAccount')" />
+          </el-form-item>
+          <el-form-item :label="$t('systemUser.form.employeePassword')" prop="passwordHash">
+            <el-input
+              v-model="employeeForm.passwordHash"
+              type="password"
+              show-password
+              :placeholder="$t('systemUser.placeholder.employeePassword')"
             />
-          </el-select>
-        </el-form-item>
+          </el-form-item>
+          <el-form-item :label="$t('systemUser.form.role')" prop="roleIds">
+            <el-select
+              v-model="employeeForm.roleIds"
+              multiple
+              filterable
+              collapse-tags
+              :placeholder="$t('systemUser.placeholder.role')"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.roleId"
+                :label="getRoleOptionLabel(item)"
+                :value="String(item.roleId)"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitEmployeeForm">确 定</el-button>
-        <el-button @click="cancelEmployee">取 消</el-button>
+        <el-button type="primary" @click="submitEmployeeForm">{{ $t("common.confirm") }}</el-button>
+        <el-button @click="cancelEmployee">{{ $t("common.cancel") }}</el-button>
       </div>
     </el-dialog>
 
-    <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
       <el-upload
         ref="upload"
@@ -285,18 +266,18 @@
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">
-          将文件拖到此处，或
-          <em>点击上传</em>
+          {{ $t("systemUser.upload.dragText") }}
+          <em>{{ $t("systemUser.upload.clickUpload") }}</em>
         </div>
         <div class="el-upload__tip" slot="tip">
-          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
+          <el-checkbox v-model="upload.updateSupport" />{{ $t("systemUser.upload.updateSupport") }}
+          <el-link type="info" style="font-size: 12px" @click="importTemplate">{{ $t("systemUser.upload.downloadTemplate") }}</el-link>
         </div>
-        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+        <div class="el-upload__tip" style="color: red" slot="tip">{{ $t("systemUser.upload.fileTip") }}</div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
+        <el-button type="primary" @click="submitFileForm">{{ $t("common.confirm") }}</el-button>
+        <el-button @click="upload.open = false">{{ $t("common.cancel") }}</el-button>
       </div>
     </el-dialog>
   </div>
@@ -306,7 +287,6 @@
 import { listUser, getUser, delUser, addUser, addEmployeeUser, updateEmployeeUser, exportUser, resetUserPwd, changeUserStatus, importTemplate } from "@/api/system/user";
 import { currentRoleOptions } from "@/api/system/role";
 import { getToken } from "@/utils/auth";
-// import { treeselect } from "@/api/system/dept";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
@@ -315,157 +295,106 @@ export default {
   components: { Treeselect },
   data() {
     return {
-      // 遮罩层
       loading: true,
-      // 选中数组
       ids: [],
-      // 非单个禁用
       single: true,
-      // 非多个禁用
       multiple: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
       total: 0,
-      // 用户表格数据
       userList: null,
-      // 弹出层标题
       title: "",
-      // 部门树选项
       deptOptions: undefined,
-      // 是否显示弹出层
       open: false,
-      // 是否显示新增员工弹窗
       employeeOpen: false,
-      // 部门名称
       deptName: undefined,
-      // 默认密码
       passwordHash: undefined,
-      // 日期范围
       dateRange: [],
-      // 状态数据字典
       statusOptions: [],
-      // 性别状态字典
       sexOptions: [],
-      // 岗位选项
       postOptions: [],
-      // 角色选项
       roleOptions: [],
-      // 表单参数（保证 roleIds 为响应式数组）
       form: {
-        roleIds: []
+        roleIds: [],
       },
       employeeForm: {
         nickName: undefined,
         account: undefined,
         passwordHash: undefined,
-        roleIds: []
+        roleIds: [],
       },
       defaultProps: {
         children: "children",
-        label: "label"
+        label: "label",
       },
-      // 用户导入参数
       upload: {
-        // 是否显示弹出层（用户导入）
         open: false,
-        // 弹出层标题（用户导入）
         title: "",
-        // 是否禁用上传
         isUploading: false,
-        // 是否更新已经存在的用户数据
         updateSupport: 0,
-        // 设置上传的请求头部
         headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
+        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
       },
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         account: undefined,
+        nickName: undefined,
         phonenumber: undefined,
         status: undefined,
-        deptId: undefined
-      },
-      // 列信息
-      columns: [
-        { key: 0, label: `用户编号`, visible: true },
-        { key: 1, label: `用户名称`, visible: true },
-        { key: 2, label: `用户昵称`, visible: true },
-        { key: 3, label: `部门`, visible: true },
-        { key: 4, label: `手机号码`, visible: true },
-        { key: 5, label: `状态`, visible: true },
-        { key: 6, label: `谷歌令牌`, visible: true, url: process.env.VUE_APP_BASE_API + "/business/businessUser/activityCode" },
-        { key: 7, label: `创建时间`, visible: true }
-      ],
-      // 表单校验
-      rules: {
-        account: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" }
-        ],
-        nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
-        ],
-        roleIds: [
-          { required: true, type: "array", min: 1, message: "\u8bf7\u9009\u62e9\u89d2\u8272", trigger: "change" }
-        ],
-        passwordHash: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "'请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
+        deptId: undefined,
       },
-      employeeRules: {
-        nickName: [
-          { required: true, message: "昵称不能为空", trigger: "blur" }
-        ],
-        account: [
-          { required: true, message: "登录账户不能为空", trigger: "blur" }
-        ],
-        roleIds: [
-          { required: true, type: "array", min: 1, message: "\u8bf7\u9009\u62e9\u89d2\u8272", trigger: "change" }
-        ],
-        passwordHash: [
-          { required: true, message: "密码不能为空", trigger: "blur" }
-        ]
-      }
+      columns: [],
+      rules: {},
+      employeeRules: {},
     };
   },
   watch: {
-    // 根据名称筛选部门树
     deptName(val) {
-      this.$refs.tree.filter(val);
-    }
+      if (this.$refs.tree) {
+        this.$refs.tree.filter(val);
+      }
+    },
   },
   created() {
+    this.initI18nState();
     this.getList();
     this.getRoleList();
-    // this.getTreeselect();
-    // this.getDicts("sys_normal_disable").then(response => {
-    //   this.statusOptions = response.data;
-    // });
-    // this.getDicts("sys_user_sex").then(response => {
-    //   this.sexOptions = response.data;
-    // });
-    // this.getConfigKey("sys.user.passwordHash").then(response => {
-    //   this.passwordHash = response.msg;
-    // });
   },
   methods: {
+    initI18nState() {
+      this.columns = [
+        { key: 0, label: this.$t("systemUser.table.id"), visible: true },
+        { key: 1, label: this.$t("systemUser.table.account"), visible: true },
+        { key: 2, label: this.$t("systemUser.table.nickName"), visible: true },
+        { key: 3, label: this.$t("systemUser.table.dept"), visible: true },
+        { key: 4, label: this.$t("systemUser.table.phone"), visible: true },
+        { key: 5, label: this.$t("systemUser.table.status"), visible: true },
+        {
+          key: 6,
+          label: this.$t("systemUser.table.googleAuthSecret"),
+          visible: true,
+          url: process.env.VUE_APP_BASE_API + "/business/businessUser/activityCode",
+        },
+        { key: 7, label: this.$t("systemUser.table.createTime"), visible: true },
+      ];
+      this.rules = {
+        account: [{ required: true, message: this.$t("systemUser.validation.accountRequired"), trigger: "blur" }],
+        nickName: [{ required: true, message: this.$t("systemUser.validation.nickNameRequired"), trigger: "blur" }],
+        roleIds: [{ required: true, type: "array", min: 1, message: this.$t("systemUser.validation.roleRequired"), trigger: "change" }],
+        passwordHash: [{ required: true, message: this.$t("systemUser.validation.passwordRequired"), trigger: "blur" }],
+        email: [{ type: "email", message: this.$t("systemUser.validation.emailInvalid"), trigger: ["blur", "change"] }],
+        phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: this.$t("systemUser.validation.phoneInvalid"), trigger: "blur" }],
+      };
+      this.employeeRules = {
+        nickName: [{ required: true, message: this.$t("systemUser.validation.employeeNickNameRequired"), trigger: "blur" }],
+        account: [{ required: true, message: this.$t("systemUser.validation.loginAccountRequired"), trigger: "blur" }],
+        roleIds: [{ required: true, type: "array", min: 1, message: this.$t("systemUser.validation.roleRequired"), trigger: "change" }],
+        passwordHash: [{ required: true, message: this.$t("systemUser.validation.employeePasswordRequired"), trigger: "blur" }],
+      };
+    },
+    getRoleOptionLabel(item) {
+      return (item.roleName || item.name) || `${this.$t("systemUser.roleOptionPrefix")}${item.roleId}`;
+    },
     normalizeBooleanStatus(value) {
       if (value === true || value === "true" || value === 1 || value === "1") {
         return true;
@@ -476,64 +405,57 @@ export default {
       return false;
     },
     normalizeRoleOptions(list = []) {
-      return (Array.isArray(list) ? list : []).map(item => ({
+      return (Array.isArray(list) ? list : []).map((item) => ({
         roleId: item.roleId != null ? item.roleId : item.id,
-        roleName: item.roleName != null ? item.roleName : item.name
+        roleName: item.roleName != null ? item.roleName : item.name,
       }));
     },
-    /** 查询角色列表（拉取全部角色，统一为 roleId/roleName 便于下拉展示） */
     getRoleList() {
-      return currentRoleOptions().then(response => {
+      return currentRoleOptions().then((response) => {
         this.roleOptions = this.normalizeRoleOptions(response.data || []);
         return this.roleOptions;
       });
     },
-    /** 查询用户列表 */
     getList() {
       this.loading = true;
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.data.list.map(user => ({
-            ...user,
-            status: this.normalizeBooleanStatus(user.status)
-          }));
-          // console.log(this.userList[0].googleAuthSecret)
-          this.total = Number(response.data.total);
-          this.loading = false;
-        }
-      );
-    },
-    /** 查询部门下拉树结构 */
-    getTreeselect() {
-      treeselect().then(response => {
-        this.deptOptions = response.data;
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+        this.userList = (response.data.list || []).map((user) => ({
+          ...user,
+          status: this.normalizeBooleanStatus(user.status),
+        }));
+        this.total = Number(response.data.total);
+        this.loading = false;
       });
     },
-    // 筛选节点
     filterNode(value, data) {
-      if (!value) return true;
+      if (!value) {
+        return true;
+      }
       return data.label.indexOf(value) !== -1;
     },
-    // 节点单击事件
     handleNodeClick(data) {
       this.queryParams.deptId = data.id;
       this.getList();
     },
-    // 用户状态修改
     handleStatusChange(row) {
-      let text = row.status ? "禁用" : "启用";
-      this.$confirm('确认要"' + text + '""' + row.account + '"用户吗?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return changeUserStatus(row.id, row.status);
-        }).then(() => {
-          this.msgSuccess(text + "成功");
-        }).catch(function() {
+      const text = row.status ? this.$t("systemUser.status.disabled") : this.$t("systemUser.status.enabled");
+      this.$confirm(
+        this.$t("systemUser.message.confirmStatusChange", { action: text, account: row.account }),
+        this.$t("systemUser.message.warningTitle"),
+        {
+          confirmButtonText: this.$t("common.confirm"),
+          cancelButtonText: this.$t("common.cancel"),
+          type: "warning",
+        }
+      )
+        .then(() => changeUserStatus(row.id, row.status))
+        .then(() => {
+          this.msgSuccess(this.$t("systemUser.message.statusChangeSuccess", { action: text }));
+        })
+        .catch(() => {
           row.status = !row.status;
         });
     },
-    // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
@@ -542,7 +464,6 @@ export default {
       this.employeeOpen = false;
       this.resetEmployeeForm();
     },
-    // 表单重置
     reset() {
       this.form = {
         id: undefined,
@@ -556,7 +477,7 @@ export default {
         status: false,
         remark: undefined,
         postIds: [],
-        roleIds: []
+        roleIds: [],
       };
       this.resetForm("form");
     },
@@ -565,33 +486,29 @@ export default {
         nickName: undefined,
         account: undefined,
         passwordHash: undefined,
-        roleIds: []
+        roleIds: [],
       };
       this.resetForm("employeeForm");
     },
-    /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.page = 1;
+      this.queryParams.pageNum = 1;
       this.getList();
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.dateRange = [];
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id);
-      this.single = selection.length != 1;
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
-    /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.getRoleList();
       this.open = true;
-      this.title = "添加用户";
+      this.title = this.$t("systemUser.dialog.addTitle");
       this.form.passwordHash = this.passwordHash;
     },
     handleAddEmployee() {
@@ -599,85 +516,78 @@ export default {
       this.getRoleList();
       this.employeeOpen = true;
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids;
       Promise.all([getUser(id), this.getRoleList()]).then(([userRes, roleOptions]) => {
-        const data = userRes.data; // 用户基本信息在 data 里
-        // roleIds、roles 在响应根级别，不在 data 里
+        const data = userRes.data;
         const resRoleIds = userRes.roleIds || [];
         this.roleOptions = roleOptions;
-
-        // 角色选项：先取 listRole 列表，再用 getUser 返回的 roles 里的 roleName 覆盖/补充
-
-        // 当前用户所属角色：取响应根级别的 roleIds
-        const roleIds = resRoleIds.map(rid => String(rid));
-
+        const roleIds = resRoleIds.map((rid) => String(rid));
         this.form = Object.assign({}, data, {
           postIds: userRes.postIds || [],
-          roleIds: roleIds,
+          roleIds,
           status: this.normalizeBooleanStatus(data.status),
-          passwordHash: undefined
+          passwordHash: undefined,
         });
         this.$set(this.form, "roleIds", roleIds);
-        this.title = "修改用户";
+        this.title = this.$t("systemUser.dialog.editTitle");
         this.$nextTick(() => {
           this.open = true;
         });
       });
     },
-    /** 重置密码按钮操作 */
     handleResetPwd(row) {
-      this.$prompt('请输入"' + row.account + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消"
-      }).then(({ value }) => {
-          resetUserPwd(row.id, value).then(response => {
-            this.msgSuccess("修改成功，新密码是：" + value);
+      this.$prompt(this.$t("systemUser.message.resetPwdPrompt", { account: row.account }), this.$t("common.tips"), {
+        confirmButtonText: this.$t("common.confirm"),
+        cancelButtonText: this.$t("common.cancel"),
+      })
+        .then(({ value }) => {
+          resetUserPwd(row.id, value).then(() => {
+            this.msgSuccess(this.$t("systemUser.message.resetPwdSuccess", { password: value }));
           });
-        }).catch(() => {});
+        })
+        .catch(() => {});
     },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (!Array.isArray(this.form.roleIds) || this.form.roleIds.length === 0) {
-            this.$modal.msgError("\u8bf7\u5148\u9009\u62e9\u89d2\u8272");
-            return;
-          }
-          // 将角色ID从字符串数组转换为数字数组
-          const submitData = {
-            ...this.form,
-            roleIds: this.form.roleIds.map(id => Number(id))
-          };
-          if (!submitData.passwordHash) {
-            delete submitData.passwordHash;
-          }
+    submitForm() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return;
+        }
+        if (!Array.isArray(this.form.roleIds) || this.form.roleIds.length === 0) {
+          this.$modal.msgError(this.$t("systemUser.message.selectRoleFirst"));
+          return;
+        }
+        const submitData = {
+          ...this.form,
+          roleIds: this.form.roleIds.map((id) => Number(id)),
+        };
+        if (!submitData.passwordHash) {
+          delete submitData.passwordHash;
+        }
 
-          if (this.form.id != undefined) {
-            updateEmployeeUser(submitData).then(response => {
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addUser(submitData).then(response => {
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
+        if (this.form.id !== undefined) {
+          updateEmployeeUser(submitData).then(() => {
+            this.msgSuccess(this.$t("systemUser.message.editSuccess"));
+            this.open = false;
+            this.getList();
+          });
+        } else {
+          addUser(submitData).then(() => {
+            this.msgSuccess(this.$t("systemUser.message.addSuccess"));
+            this.open = false;
+            this.getList();
+          });
         }
       });
     },
     submitEmployeeForm() {
-      this.$refs["employeeForm"].validate(valid => {
+      this.$refs.employeeForm.validate((valid) => {
         if (!valid) {
           return;
         }
         if (!Array.isArray(this.employeeForm.roleIds) || this.employeeForm.roleIds.length === 0) {
-          this.$modal.msgError("\u8bf7\u5148\u9009\u62e9\u89d2\u8272");
+          this.$modal.msgError(this.$t("systemUser.message.selectRoleFirst"));
           return;
         }
         const submitData = {
@@ -685,70 +595,63 @@ export default {
           account: this.employeeForm.account,
           passwordHash: this.employeeForm.passwordHash,
           status: false,
-          roleIds: (this.employeeForm.roleIds || []).map(id => Number(id))
+          roleIds: (this.employeeForm.roleIds || []).map((id) => Number(id)),
         };
         addEmployeeUser(submitData).then(() => {
-          this.msgSuccess("新增员工成功");
+          this.msgSuccess(this.$t("systemUser.message.addEmployeeSuccess"));
           this.employeeOpen = false;
           this.resetEmployeeForm();
           this.getList();
         });
       });
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$confirm('是否确认删除用户编号为"' + ids + '"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return delUser(ids);
-        }).then(() => {
+      this.$confirm(this.$t("systemUser.message.confirmDelete", { ids }), this.$t("systemUser.message.warningTitle"), {
+        confirmButtonText: this.$t("common.confirm"),
+        cancelButtonText: this.$t("common.cancel"),
+        type: "warning",
+      })
+        .then(() => delUser(ids))
+        .then(() => {
           this.getList();
-          this.msgSuccess("删除成功");
-        })
+          this.msgSuccess(this.$t("systemUser.message.deleteSuccess"));
+        });
     },
-    /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有用户数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return exportUser(queryParams);
-        }).then(response => {
+      this.$confirm(this.$t("systemUser.message.confirmExport"), this.$t("systemUser.message.warningTitle"), {
+        confirmButtonText: this.$t("common.confirm"),
+        cancelButtonText: this.$t("common.cancel"),
+        type: "warning",
+      })
+        .then(() => exportUser(queryParams))
+        .then((response) => {
           this.download(response.msg);
-        })
+        });
     },
-    /** 导入按钮操作 */
     handleImport() {
-      this.upload.title = "用户导入";
+      this.upload.title = this.$t("systemUser.dialog.importTitle");
       this.upload.open = true;
     },
-    /** 下载模板操作 */
     importTemplate() {
-      importTemplate().then(response => {
+      importTemplate().then((response) => {
         this.download(response.msg);
       });
     },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
+    handleFileUploadProgress() {
       this.upload.isUploading = true;
     },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
+    handleFileSuccess(response) {
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
-      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
+      this.$alert(response.msg, this.$t("systemUser.dialog.importResultTitle"), { dangerouslyUseHTMLString: true });
       this.getList();
     },
-    // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit();
-    }
-  }
+    },
+  },
 };
 </script>