create-jnrs-vue 1.2.19 → 1.2.21

package/jnrs-vue/src/layout/SideMenu.vue

@@ -1,208 +1,281 @@
 <script setup lang="ts">
-import SideMenuItem from './SideMenuItem.vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRoute } from '@jnrs/vue-core/router'
 import { useSystemStore, useMenuStore } from '@jnrs/vue-core/pinia'
+import SideMenuItem from './SideMenuItem.vue'
 
 const systemStore = useSystemStore()
 const { menuCollapse } = storeToRefs(systemStore)
 const { toggleCollapse } = systemStore
 const { menus } = useMenuStore()
-
 const route = useRoute()
+
+const sideWidth = computed(() => (menuCollapse.value ? '64px' : '216px'))
 </script>
 
 <template>
-  <el-aside class="sideMenu no_select">
-    <div class="logo" :class="{ logo_collapse: menuCollapse }">
-      <img class="logo_img" src="@/assets/images/common/jnrs-white.svg" alt="jnrs" />
-      <span class="logo_text">{{ $t('main.title') }}</span>
+  <el-aside class="side-menu" :class="{ 'is-collapsed': menuCollapse }" :width="sideWidth">
+    <!-- Logo -->
+    <div class="side-menu__header">
+      <div class="side-menu__logo" aria-label="JNRS"></div>
+      <transition name="fade-text">
+        <span v-show="!menuCollapse" class="side-menu__title">
+          {{ $t('main.title') }}
+        </span>
+      </transition>
     </div>
-    <el-icon
-      class="collapseBtn"
-      :class="{ collapseBtn_active: menuCollapse }"
-      title="菜单折叠"
+
+    <el-scrollbar class="side-menu__scrollbar">
+      <el-menu
+        class="side-menu__nav"
+        popper-class="side-menu-popper"
+        :router="true"
+        :default-active="route.name"
+        :collapse="menuCollapse"
+        :unique-opened="true"
+        :collapse-transition="false"
+      >
+        <SideMenuItem v-for="item in menus" :listItem="item" :key="item.meta.uuid" />
+      </el-menu>
+    </el-scrollbar>
+
+    <button
+      class="side-menu__toggle"
+      :title="$t(menuCollapse ? 'layout.expand' : 'layout.collapse')"
       @click="toggleCollapse()"
     >
-      <Fold />
-    </el-icon>
-    <el-menu
-      class="leftSide_menu"
-      popper-class="layoutPage_leftSide_menu_popper"
-      :router="true"
-      :default-active="route.name"
-      :collapse="menuCollapse"
-      :unique-opened="true"
-    >
-      <SideMenuItem v-for="item in menus" :listItem="item" :key="item.meta.uuid" />
-    </el-menu>
+      <el-icon>
+        <Fold />
+      </el-icon>
+    </button>
   </el-aside>
 </template>
 
 <style lang="scss" scoped>
-$mainFontColor: rgba(255, 255, 255, 0.85);
+$collapsed-width: 64px;
+$expanded-width: 216px;
+$font-color: rgba(235, 235, 245, 0.8);
+$font-color-active: #ffffff;
+$bg-color: #1a1b24;
+$hover-bg-color: rgba(255, 255, 255, 0.08);
+$active-bg-color: var(--jnrs-color-primary);
+$transition-duration: 0.3s;
+$transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
 
-.sideMenu {
+.side-menu {
   position: relative;
   z-index: 20;
-  width: auto;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   padding: 0 8px;
-  background: oklch(0.24 0 0);
-  // background: var(--jnrs-card-primary);
+  overflow: hidden;
+  color: $font-color;
+  background: $bg-color;
   box-shadow: 1px 0 1px var(--jnrs-font-primary-03);
-  overflow-x: hidden;
-  color: $mainFontColor;
+  transition: width $transition-duration $transition-timing;
+  user-select: none;
 
-  .logo {
-    position: relative;
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
     height: calc(var(--jnrs-head-height) + var(--jnrs-routerTabs-height));
-    border-bottom: 1px solid rgb(248 248 248 / 15%);
-    filter: brightness(0.8);
-
-    .logo_text {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      color: rgba(255, 255, 255, 1);
-      font-size: 18px;
-      font-weight: normal;
-      font-family: AlimamaShuHeiTi-Bold;
-      white-space: nowrap;
-      transform: translate(-50%, -50%);
-      transition: all 0.3s ease;
-      filter: opacity(1);
-    }
-
-    .logo_img {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      width: 70%;
-      transform: translate(-50%, 50%);
-      transition: all 0.3s ease;
-    }
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
 
-  .logo_collapse {
-    .logo_text {
-      transform: translate(-50%, -50%) scale(0);
-      opacity: 0;
-    }
-    .logo_img {
-      width: 100%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
+  &__logo {
+    width: 70%;
+    height: 40px;
+    mask: url('@/assets/images/common/jnrs-white.svg') no-repeat center / contain;
+    -webkit-mask: url('@/assets/images/common/jnrs-white.svg') no-repeat center / contain;
+    background-color: #ffffff;
+    transition: width $transition-duration $transition-timing;
   }
 
-  .collapseBtn {
-    position: absolute;
-    bottom: 10px;
-    font-size: 24px;
-    color: $mainFontColor;
-    padding: 4px;
-    border-radius: 50%;
-    background-color: #424242;
-    transition: all 0.25s ease;
-    cursor: pointer;
-    &:hover {
-      color: var(--jnrs-color-primary);
-    }
+  &__title {
+    color: $font-color-active;
+    font-size: 18px;
+    font-weight: normal;
+    font-family: AlimamaShuHeiTi-Bold, sans-serif;
+    white-space: nowrap;
+    text-align: center;
   }
 
-  .collapseBtn_active {
-    transform: rotate(-180deg);
+  &__scrollbar {
+    flex: 1;
+    overflow: hidden;
   }
 
-  :deep(.el-sub-menu__title) {
-    &:hover {
-      background-color: unset;
-    }
-  }
-
-  .el-menu--collapse {
-    min-width: auto !important;
+  &__nav {
+    width: 100%;
+    border: none;
+    background: transparent;
+    --el-menu-text-color: #{$font-color};
+    --el-menu-active-color: #{$font-color-active};
+    --el-menu-hover-text-color: #{$font-color-active};
+    --el-menu-bg-color: transparent;
+    --el-menu-hover-bg-color: transparent;
 
-    .el-sub-menu.is-active {
+    :deep(.el-menu-item),
+    :deep(.el-sub-menu__title) {
+      height: 48px;
+      margin: 4px 0;
       border-radius: 10px;
-      background: var(--jnrs-color-primary);
-    }
+      transition: all 0.2s ease;
 
-    :deep(.el-menu-item span) {
-      display: none;
+      &:hover {
+        color: $font-color-active;
+        background: $hover-bg-color !important;
+      }
     }
-  }
-
-  .leftSide_menu {
-    border: none;
-    min-width: 200px;
-    --el-menu-text-color: $mainFontColor;
-    --el-menu-active-color: $mainFontColor;
-    --el-menu-bg-color: none;
 
     :deep(.el-menu-item) {
-      border-radius: 10px;
       span {
         overflow: hidden;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        white-space: nowrap;
+        transition: opacity 0.2s ease;
       }
 
-      &:hover {
-        background: none !important;
-        color: var(--jnrs-color-primary);
+      &.is-active {
+        color: $font-color-active !important;
+        background: $active-bg-color !important;
+        font-weight: bold;
       }
     }
 
-    :deep(.el-menu-item.is-active) {
-      background: var(--jnrs-color-primary) !important;
-      color: $mainFontColor !important;
-    }
+    &.el-menu--collapse {
+      min-width: auto !important;
+      width: 100%;
 
-    .el-menu-item.is-active {
-      background: var(--jnrs-color-primary);
-      color: #fff !important;
+      :deep(.el-menu-item span),
+      :deep(.el-sub-menu__title span) {
+        display: none;
+      }
 
-      span {
-        color: #fff !important;
+      :deep(.el-sub-menu__icon-arrow) {
+        display: block;
+        position: absolute;
+        right: 0px;
+        top: 50%;
+        margin-top: -5px !important;
+        width: 12px;
       }
+
+      :deep(.el-menu-item),
+      :deep(.el-sub-menu__title) {
+        justify-content: center;
+
+        .el-icon {
+          margin: 0;
+        }
+      }
+
+      :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+        background: $active-bg-color !important;
+        color: $font-color-active;
+        border-radius: 10px;
+      }
+    }
+  }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    margin: 10px auto 10px 8px;
+    padding: 0;
+    font-size: 18px;
+    color: $font-color;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    transition: all $transition-duration $transition-timing;
+
+    &:hover {
+      color: $font-color-active;
+      background: rgba(255, 255, 255, 0.2);
+      transform: scale(1.1);
+    }
+
+    .el-icon {
+      transition: transform $transition-duration $transition-timing;
+    }
+  }
+
+  &.is-collapsed {
+    .side-menu__logo {
+      width: 90%;
+    }
+
+    .side-menu__toggle .el-icon {
+      transform: rotate(-180deg);
     }
   }
 }
+
+.fade-text-enter-active,
+.fade-text-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.fade-text-enter-from,
+.fade-text-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
 </style>
 
 <style lang="scss">
-$mainFontColor: rgba(255, 255, 255, 0.8);
-
-// 弹出层样式
-.layoutPage_leftSide_menu_popper {
-  background: #051524;
-  border: none !important;
-  left: 74px !important;
-  border-radius: 15px;
-  padding: 0 10px;
+.side-menu-popper {
+  background: #333 !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  border-radius: 12px;
+  padding: 0 8px;
+
   .el-menu {
-    background: none;
+    background: transparent;
+    border: none;
+    box-shadow: none !important;
   }
+
   .el-menu-item {
-    border-radius: 10px;
-    background-color: none;
-    color: $mainFontColor;
-    &:hover {
-      color: var(--jnrs-color-primary);
-      background: none;
-    }
+    height: 40px;
+    line-height: 40px;
+    margin: 4px 0;
+    padding: 0 16px !important;
+    color: rgba(235, 235, 245, 0.8);
+    border-radius: 8px;
+    transition: all 0.2s ease;
+
     span {
       overflow: hidden;
-      white-space: nowrap;
       text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      color: #ffffff;
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    &.is-active {
+      color: #ffffff;
+      background: var(--jnrs-color-primary);
+      font-weight: bold;
     }
-  }
-  .el-menu-item.is-active {
-    border-radius: 10px;
-    background: var(--jnrs-color-primary);
-    color: $mainFontColor;
   }
 }
 </style>

package/jnrs-vue/src/layout/TopHeader.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import { ElMessageBox } from 'element-plus'
+import { ElLoading, ElMessageBox } from 'element-plus'
 import { handleRouter } from '@jnrs/vue-core/router'
 import { GlobalSetting } from '@jnrs/vue-core/components'
 import { useSystemStore, useAuthStore, useMenuStore } from '@jnrs/vue-core/pinia'
+import { useI18n } from '@/locales'
 import { LogoutApi } from '@/api/system'
 import ImageView from '@/components/common/ImageView.vue'
 import DictTag from '@/components/common/DictTag.vue'
 
+const { t: $t } = useI18n()
 const { userInfo, clearAuth } = useAuthStore()
 const { clearMenu } = useMenuStore()
 
@@ -17,18 +19,34 @@ const { documentFullscreen } = storeToRefs(systemStore)
 const { toggleFullScreen } = systemStore
 const globalSettingRef = ref()
 
-const handleLogout = async () => {
-  try {
-    await ElMessageBox.confirm('确定要退出系统吗?', '操作确认', {
-      confirmButtonText: '退出',
-      cancelButtonText: '取消',
-      type: 'warning'
+const handleLogout = () => {
+  ElMessageBox.confirm(
+    `<p style="color: #f30">${$t('layout.logout.confirmMessage')}</p>`,
+    $t('layout.logout.confirmTitle'),
+    {
+      dangerouslyUseHTMLString: true,
+      confirmButtonType: 'danger',
+      confirmButtonText: $t('global.action.confirm'),
+      cancelButtonText: $t('global.action.cancel')
+    }
+  )
+    .then(async () => {
+      const loading = ElLoading.service({
+        lock: true,
+        background: 'rgba(0, 0, 0, 0.5)'
+      })
+      try {
+        await LogoutApi()
+        clearAuth()
+        clearMenu()
+        handleRouter({ name: 'Login' }, 'replace')
+      } catch (e) {
+        console.error(e)
+      } finally {
+        loading.close()
+      }
     })
-    await LogoutApi()
-    clearAuth()
-    clearMenu()
-    handleRouter({ name: 'Login' }, 'replace')
-  } catch {}
+    .catch(() => {})
 }
 
 const showGlobalSetting = () => {
@@ -41,21 +59,21 @@ const showGlobalSetting = () => {
     <div class="left">
       <el-icon
         class="topBarBtn"
-        title="可视化看板"
+        :title="$t('layout.topBarBtn.visualization')"
         @click="
           handleRouter({
             name: 'Visual'
           })
         "
       >
-        <el-icon><Platform /></el-icon>
+        <Platform />
       </el-icon>
     </div>
     <div class="right">
-      <el-icon class="topBarBtn" title="全局偏好设置" @click="showGlobalSetting()">
-        <el-icon><Setting /></el-icon>
+      <el-icon class="topBarBtn" :title="$t('layout.topBarBtn.settings')" @click="showGlobalSetting()">
+        <Setting />
       </el-icon>
-      <el-icon class="topBarBtn" title="全屏切换" @click="toggleFullScreen()">
+      <el-icon class="topBarBtn" :title="$t('layout.topBarBtn.fullscreenToggle')" @click="toggleFullScreen()">
         <component :is="!documentFullscreen ? 'FullScreen' : 'Rank'" />
       </el-icon>
       <!-- 头像和用户名 -->
@@ -72,7 +90,7 @@ const showGlobalSetting = () => {
         <div class="userMenu_dropdown">
           <ImageView class="userMenu_dropdown_avatar" :loadKeys="userInfo?.avatarFileName" />
           <div class="loginDateTime" v-if="userInfo?.loginDateTime">
-            <span>登录时间</span>
+            <span>{{ $t('layout.userMenu.loginTime') }}</span>
             <p>{{ userInfo?.loginDateTime }}</p>
           </div>
           <div class="userMenu_dropdown_btn">
@@ -85,9 +103,11 @@ const showGlobalSetting = () => {
                 })
               "
             >
-              个人中心
+              {{ $t('layout.userMenu.personalCenter') }}
+            </el-button>
+            <el-button type="danger" icon="SwitchButton" @click="handleLogout()">
+              {{ $t('layout.userMenu.logout') }}
             </el-button>
-            <el-button type="danger" icon="SwitchButton" @click="handleLogout()">退出系统</el-button>
           </div>
         </div>
       </el-popover>
@@ -109,7 +129,7 @@ $topHoverSize: 35px;
   justify-content: space-between;
   background: var(--jnrs-card-primary);
   padding: 0 8px;
-  box-shadow: 0 1px 2px var(--jnrs-font-primary-03);
+  box-shadow: 0 0 2px var(--jnrs-font-primary-03);
 
   .topBarBtn {
     font-size: 22px;
@@ -174,7 +194,9 @@ $topHoverSize: 35px;
       color: var(--jnrs-font-primary-06);
     }
     .userMenu_dropdown_btn {
-      margin-top: 8px;
+      .el-button {
+        margin: 4px 2px 0 2px;
+      }
     }
   }
   .userMenu_roleName {

package/jnrs-vue/src/locales/en.ts

@@ -1,4 +1,10 @@
 export default {
+  global: {
+    action: {
+      confirm: 'Confirm',
+      cancel: 'Cancel'
+    }
+  },
   main: {
     title: 'Management System'
   },
@@ -10,5 +16,38 @@ export default {
     formBtn: 'Log In',
     greeting: 'Welcome'
   },
-  layout: {}
+  layout: {
+    expand: 'Expand Menu',
+    collapse: 'Collapse Menu',
+    topBarBtn: {
+      visualization: 'Visualization Dashboard',
+      settings: 'Global Settings',
+      fullscreenToggle: 'Toggle Fullscreen'
+    },
+    userMenu: {
+      loginTime: 'Login Time',
+      personalCenter: 'Personal Center',
+      logout: 'Logout'
+    },
+    logout: {
+      confirmTitle: 'Are you sure you want to log out?',
+      confirmMessage: ''
+    }
+  },
+  home: {
+    welcome: {
+      defaultName: 'User',
+      accountLabel: 'Account: ',
+      lastLoginLabel: 'Last Login: '
+    },
+    section: {
+      quickEntryTitle: 'Quick Access'
+    },
+    quickEntry: {
+      unitTest: 'Unit Test',
+      simpleTable: 'Data Table',
+      crud: 'CRUD Demo',
+      visual: 'Visualization Dashboard'
+    }
+  }
 }

package/jnrs-vue/src/locales/index.ts

@@ -1,4 +1,4 @@
-import { createI18n } from 'vue-i18n'
+import { createI18n, useI18n } from 'vue-i18n'
 import zhCn from './zhCn'
 import en from './en'
 import { zhCn as vueCore_zhCn, en as vueCore_en } from '@jnrs/vue-core/locales'
@@ -20,4 +20,4 @@ const i18n = createI18n({
   }
 })
 
-export default i18n
+export { i18n, useI18n }

package/jnrs-vue/src/locales/zhCn.ts

@@ -1,4 +1,10 @@
 export default {
+  global: {
+    action: {
+      confirm: '确定',
+      cancel: '取消'
+    }
+  },
   main: {
     title: '信息化管理系统'
   },
@@ -10,5 +16,38 @@ export default {
     formBtn: '登 录',
     greeting: '欢迎使用'
   },
-  layout: {}
+  layout: {
+    expand: '展开菜单',
+    collapse: '收起菜单',
+    topBarBtn: {
+      visualization: '可视化看板',
+      settings: '全局偏好设置',
+      fullscreenToggle: '全屏切换'
+    },
+    userMenu: {
+      loginTime: '登录时间',
+      personalCenter: '个人中心',
+      logout: '退出系统'
+    },
+    logout: {
+      confirmTitle: '确定要退出系统吗？',
+      confirmMessage: ''
+    }
+  },
+  home: {
+    welcome: {
+      defaultName: '用户',
+      accountLabel: '账号：',
+      lastLoginLabel: '上次登录：'
+    },
+    section: {
+      quickEntryTitle: '快捷入口'
+    },
+    quickEntry: {
+      unitTest: '功能测试',
+      simpleTable: '数据表格',
+      crud: '增删改查',
+      visual: '可视化看板'
+    }
+  }
 }

package/jnrs-vue/src/main.ts

@@ -9,7 +9,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import { router } from './router'
-import locales from './locales/index'
+import { i18n } from './locales'
 import { permissions } from './directives/permissions'
 
 const app = createApp(App)
@@ -27,5 +27,5 @@ pinia.use(piniaPluginPersistedstate)
 
 app.use(pinia)
 app.use(router)
-app.use(locales)
+app.use(i18n)
 app.mount('#app')

package/jnrs-vue/src/router/routes.ts

@@ -35,7 +35,7 @@ export const routes = [
     meta: { title: '框架' },
     children: [
       {
-        path: '/',
+        path: '',
         name: 'Home',
         meta: {
           title: '工作台',