解决生产环境打包后，nginx转发路由页面报Failed to load module script，修改侧边栏背景样式，角色管理新增字段权限配置跳转

.env.production

@@ -6,7 +6,7 @@ ENV = 'production'
 VITE_APP_BASE_API = '/prod-api'
 
 # 路由前缀
-VITE_APP_ROUTER_PREFIX = '/vue3/'
+VITE_APP_ROUTER_PREFIX = '/'
 
 # 默认上传地址
 VITE_APP_UPLOAD_URL = '/Common/UploadFile'

src/assets/styles/sidebar.scss

@@ -4,7 +4,7 @@
     overflow-y: hidden;
     z-index: 1001;
     transition: width 0.28s ease;
-    background-color: var(--base-menu-background);
+    background-image: var(--base-menu-background);
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -18,6 +18,9 @@
     .el-menu {
       border: none;
     }
+    .el-menu--inline {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
 
     [class^='el-icon'] {
       width: 1em;

src/assets/styles/variables.module.scss

@@ -24,7 +24,8 @@ $panGreen: #30b08f;
 
 /***侧边栏深色配置***/
 [data-theme='theme-dark'] {
-  --base-menu-background: #324157;
+  // --base-menu-background: #324157;
+  --base-menu-background: linear-gradient(to right, #243949 0%, #517fa4 100%);
   --base-logo-title-color: #ffffff;
   // // el-ement ui 设置
   // --el-fill-color-blank: #304156;

src/i18n/lang/zh-cn.json

@@ -32,7 +32,8 @@
     "personalCenter": "个人中心",
     "menuPermi": "菜单权限",
     "assignUsers": "分配用户",
-    "cacheMonitor": "缓存监控"
+    "cacheMonitor": "缓存监控",
+    "fieldPermi": "字段权限"
   },
   "tagsView": {
     "refresh": "刷新页面",

src/views/monitor/ipratelimit/index.vue

@@ -157,6 +157,15 @@
       </template>
     </el-dialog>
     <h1 class="text-3xl font-bold underline">Hello World</h1>
+    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
+      <div class="shrink-0">
+        <img class="h-12 w-12" src="/favicon.ico" alt="ChitChat Logo" />
+      </div>
+      <div>
+        <div class="text-xl font-medium text-black">ChitChat</div>
+        <p class="text-slate-500">You have a new message!</p>
+      </div>
+    </div>
   </div>
 </template>
 

src/views/system/menu/index.vue

@@ -116,7 +116,7 @@
     </el-table>
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" v-model="open" width="680px" append-to-body>
+    <el-dialog :title="title" v-model="open" width="680px" append-to-body draggable>
       <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :lg="24">

src/views/system/role/index.vue

@@ -68,6 +68,7 @@
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
+                  <el-dropdown-item command="handleFieldScope" icon="SetUp">{{ $t('menu.fieldPermi') }}</el-dropdown-item>
                   <el-dropdown-item command="handleDataScope" icon="circle-check">{{ $t('menu.menuPermi') }}</el-dropdown-item>
                   <el-dropdown-item command="handleAuthUser" icon="user">{{ $t('menu.assignUsers') }}</el-dropdown-item>
                 </el-dropdown-menu>
@@ -403,6 +404,9 @@ function handleCommand(command, row) {
     case 'handleAuthUser':
       handleAuthUser(row)
       break
+    case 'handleFieldScope':
+      handleFieldScope(row)
+      break
     default:
       break
   }
@@ -521,6 +525,11 @@ function handleAuthUser(row) {
     proxy.$modal.msgError('你没有权限访问')
   }
 }
+/** 分配字段权限按钮操作 */
+const handleFieldScope = (row) => {
+  const roleId = row.roleId
+  router.push({ path: '/system/roleFields', query: { roleId } })
+}
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs['formRef'].validate((valid) => {