create-jnrs-vue 1.2.11

package/jnrs-template-vue/src/layout/RouterTabs.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+import type { MenuItem } from '@jnrs/vue-core'
+import { handleRouter, getRoutes, useRoute } from '@jnrs/vue-core/router'
+
+// 初始化时添加当前路由
+const menuTabs = ref<MenuItem[]>([])
+const activeRouterName = ref('')
+const tabLabel = computed(() => {
+  return function (item: MenuItem) {
+    let label = item.meta.title
+    if (item.meta.fullPathTitle) {
+      label = item.meta.fullPathTitle.replace(',', '/')
+    }
+    return label
+  }
+})
+const route = useRoute()
+
+// 监听路由变化，更新标签页
+watch(
+  () => route.name,
+  (newName) => {
+    if (typeof newName !== 'string') {
+      return
+    }
+    if (!menuTabs.value.some((tab) => tab.name === newName)) {
+      addTab(newName)
+    }
+    activeRouterName.value = newName
+  }
+)
+
+onMounted(() => {
+  const routeName = route.name
+  if (typeof routeName === 'string') {
+    activeRouterName.value = routeName
+  }
+  const allRouters = getRoutes()
+  const baseMenu = allRouters.find((r) => isHome(r))
+  if (baseMenu) {
+    menuTabs.value.unshift(baseMenu)
+  }
+  const currentMenu = allRouters.find((r) => !isHome(r) && r.name === routeName)
+  if (currentMenu) {
+    menuTabs.value.push(currentMenu)
+  }
+})
+
+// 首页判断
+const isHome = (d: MenuItem) => {
+  return d.path === '/' || d.path === ''
+}
+
+// 添加标签页
+const addTab = (routerName: string) => {
+  if (!routerName) return
+  // 获取路由对象，如果路由对象不存在，则返回
+  const routeItem = getRoutes().find((r) => r.name === routerName)
+  if (!routeItem) return
+  // 如果标签页已存在，则直接激活标签页
+  if (menuTabs.value.some((tab) => tab.name === routerName)) {
+    activeRouterName.value = routerName
+    return
+  }
+  // 如果标签页不存在，则添加新标签页
+  menuTabs.value.push(routeItem)
+  activeRouterName.value = routerName
+}
+
+// 移除标签页
+const removeTab = (routerName: string) => {
+  const currentIndex = menuTabs.value.findIndex((tab) => tab.name === routerName)
+  if (currentIndex === -1) return
+  // 删除当前标签页
+  menuTabs.value.splice(currentIndex, 1)
+  // 如果删除的是当前激活的标签页，就跳转到前一个标签页
+  if (activeRouterName.value === routerName) {
+    const nextTab = menuTabs.value[currentIndex] || menuTabs.value[currentIndex - 1]
+    if (nextTab.name) {
+      activeRouterName.value = nextTab.name
+      handleRouter({
+        name: nextTab.name
+      })
+    }
+  }
+}
+
+// 处理标签页点击事件
+const handleTabClick = (tab: TabsPaneContext) => {
+  if (typeof tab.props.name !== 'string' || tab.props.name === route.name) {
+    return
+  }
+  handleRouter({
+    name: tab.props.name
+  })
+}
+</script>
+
+<template>
+  <div class="routerTabs no_select">
+    <el-tabs v-model="activeRouterName" type="card" @tab-remove="removeTab" @tab-click="handleTabClick">
+      <el-tab-pane v-for="item in menuTabs" :key="item.name" :name="item.name" :closable="!isHome(item)">
+        <template #label>
+          <span>{{ tabLabel(item) }}</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.routerTabs {
+  position: relative;
+  z-index: 5;
+  :deep(.el-tabs__header) {
+    margin-bottom: 0;
+    height: var(--jnrs-routerTabs-height);
+  }
+  :deep(.el-tabs__item) {
+    color: var(--jnrs-font-primary-06);
+    font-size: 12px;
+    height: var(--jnrs-routerTabs-height);
+  }
+  :deep(.el-tabs__item.is-active) {
+    color: var(--jnrs-color-primary);
+    border-bottom-color: var(--jnrs-color-primary);
+  }
+  :deep(.el-tabs__nav) {
+    border-radius: 0;
+    border-left: none;
+    border-top: none;
+  }
+  :deep(.el-tabs__nav-prev) {
+    color: var(--jnrs-color-primary);
+  }
+  :deep(.el-tabs__nav-next) {
+    color: var(--jnrs-color-primary);
+  }
+}
+</style>

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

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import SideMenuItem from './SideMenuItem.vue'
+import { storeToRefs } from 'pinia'
+import { useRoute } from '@jnrs/vue-core/router'
+import { useSystemStore, useMenuStore } from '@jnrs/vue-core/pinia'
+
+const systemStore = useSystemStore()
+const { menuCollapse } = storeToRefs(systemStore)
+const { toggleCollapse } = systemStore
+const { menus } = useMenuStore()
+
+const route = useRoute()
+</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>
+    </div>
+    <el-icon
+      class="collapseBtn"
+      :class="{ collapseBtn_active: menuCollapse }"
+      title="菜单折叠"
+      @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-aside>
+</template>
+
+<style lang="scss" scoped>
+$mainFontColor: rgba(255, 255, 255, 0.85);
+
+.sideMenu {
+  position: relative;
+  z-index: 20;
+  width: auto;
+  height: 100%;
+  padding: 0 8px;
+  background: oklch(0.24 0 0);
+  // background: var(--jnrs-card-primary);
+  box-shadow: 1px 0 1px var(--jnrs-font-primary-03);
+  overflow-x: hidden;
+  color: $mainFontColor;
+
+  .logo {
+    position: relative;
+    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;
+    }
+  }
+
+  .logo_collapse {
+    .logo_text {
+      transform: translate(-50%, -50%) scale(0);
+      opacity: 0;
+    }
+    .logo_img {
+      width: 100%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .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);
+    }
+  }
+
+  .collapseBtn_active {
+    transform: rotate(-180deg);
+  }
+
+  :deep(.el-sub-menu__title) {
+    &:hover {
+      background-color: unset;
+    }
+  }
+
+  .el-menu--collapse {
+    min-width: auto !important;
+
+    .el-sub-menu.is-active {
+      border-radius: 10px;
+      background: var(--jnrs-color-primary);
+    }
+
+    :deep(.el-menu-item span) {
+      display: none;
+    }
+  }
+
+  .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;
+      }
+
+      &:hover {
+        background: none !important;
+        color: var(--jnrs-color-primary);
+      }
+    }
+
+    :deep(.el-menu-item.is-active) {
+      background: var(--jnrs-color-primary) !important;
+      color: $mainFontColor !important;
+    }
+
+    .el-menu-item.is-active {
+      background: var(--jnrs-color-primary);
+      color: #fff !important;
+
+      span {
+        color: #fff !important;
+      }
+    }
+  }
+}
+</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;
+  .el-menu {
+    background: none;
+  }
+  .el-menu-item {
+    border-radius: 10px;
+    background-color: none;
+    color: $mainFontColor;
+    &:hover {
+      color: var(--jnrs-color-primary);
+      background: none;
+    }
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .el-menu-item.is-active {
+    border-radius: 10px;
+    background: var(--jnrs-color-primary);
+    color: $mainFontColor;
+  }
+}
+</style>

package/jnrs-template-vue/src/layout/SideMenuItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useSystemStore } from '@jnrs/vue-core/pinia'
+import type { MenuItem } from '@jnrs/vue-core'
+
+defineProps<{
+  listItem: MenuItem
+}>()
+
+const { menuCollapse } = useSystemStore()
+</script>
+
+<template>
+  <!-- 一级路由 -->
+  <el-menu-item :index="listItem.name" :route="listItem.path" v-if="!listItem.children">
+    <el-icon v-if="listItem.meta.icon">
+      <component :is="listItem.meta.icon" />
+    </el-icon>
+    <el-badge :show-zero="false" :value="listItem.meta.todoCount" :offset="[7, 17]" color="#EC5545">
+      <span>{{ listItem.meta.title }}</span>
+    </el-badge>
+  </el-menu-item>
+  <el-sub-menu :index="listItem.meta.uuid" v-else>
+    <!-- 一级目录 -->
+    <template #title>
+      <el-badge
+        :show-zero="false"
+        :is-dot="listItem.meta.todoCount && listItem.meta.todoCount > 0"
+        :offset="[menuCollapse ? -5 : -10, 20]"
+        color="#EC5545"
+      >
+        <el-icon v-if="listItem.meta.icon"><component :is="listItem.meta.icon" /></el-icon>
+      </el-badge>
+      <span>{{ listItem.meta.title }}</span>
+    </template>
+    <!-- 二级 -->
+    <SideMenuItem v-for="item in listItem.children" :listItem="item" :key="item.meta.uuid" />
+  </el-sub-menu>
+</template>

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

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { 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 { LogoutApi } from '@/api/system'
+import ImageView from '@/components/common/ImageView.vue'
+import DictTag from '@/components/common/DictTag.vue'
+
+const { userInfo, clearAuth } = useAuthStore()
+const { clearMenu } = useMenuStore()
+
+const systemStore = useSystemStore()
+const { documentFullscreen } = storeToRefs(systemStore)
+const { toggleFullScreen } = systemStore
+const globalSettingRef = ref()
+
+const handleLogout = async () => {
+  try {
+    await ElMessageBox.confirm('确定要退出系统吗?', '操作确认', {
+      confirmButtonText: '退出',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    await LogoutApi()
+    clearAuth()
+    clearMenu()
+    handleRouter({ name: 'Login' }, 'replace')
+  } catch {}
+}
+
+const showGlobalSetting = () => {
+  globalSettingRef.value.handleShow()
+}
+</script>
+
+<template>
+  <div class="topHeader no_select">
+    <div class="left">
+      <el-icon
+        class="topBarBtn"
+        title="可视化看板"
+        @click="
+          handleRouter({
+            name: 'Visual'
+          })
+        "
+      >
+        <el-icon><Platform /></el-icon>
+      </el-icon>
+    </div>
+    <div class="right">
+      <el-icon class="topBarBtn" title="全局偏好设置" @click="showGlobalSetting()">
+        <el-icon><Setting /></el-icon>
+      </el-icon>
+      <el-icon class="topBarBtn" title="全屏切换" @click="toggleFullScreen()">
+        <component :is="!documentFullscreen ? 'FullScreen' : 'Rank'" />
+      </el-icon>
+      <!-- 头像和用户名 -->
+      <el-popover placement="bottom" trigger="click" :teleported="false" :width="260" :hide-after="0">
+        <template #reference>
+          <span class="userMenu_reference">
+            <ImageView class="userMenu_avatar" :loadKeys="userInfo.avatarFileName" v-if="userInfo?.avatarFileName" />
+            <img class="userMenu_avatar" src="@/assets/images/common/avatar.png" v-else />
+            <span>{{ userInfo?.name }}</span>
+            <DictTag dictName="role" :value="userInfo.role" v-if="userInfo?.role" />
+            <el-icon class="userMenu_icon"><arrow-down /></el-icon>
+          </span>
+        </template>
+        <div class="userMenu_dropdown">
+          <ImageView class="userMenu_dropdown_avatar" :loadKeys="userInfo?.avatarFileName" />
+          <div class="loginDateTime" v-if="userInfo?.loginDateTime">
+            <span>登录时间</span>
+            <p>{{ userInfo?.loginDateTime }}</p>
+          </div>
+          <div class="userMenu_dropdown_btn">
+            <el-button
+              type="primary"
+              icon="UserFilled"
+              @click="
+                handleRouter({
+                  name: 'SystemMine'
+                })
+              "
+            >
+              个人中心
+            </el-button>
+            <el-button type="danger" icon="SwitchButton" @click="handleLogout()">退出系统</el-button>
+          </div>
+        </div>
+      </el-popover>
+    </div>
+  </div>
+  <GlobalSetting ref="globalSettingRef" />
+</template>
+
+<style lang="scss" scoped>
+$topHoverSize: 35px;
+
+.topHeader {
+  position: relative;
+  z-index: 15;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--jnrs-card-primary);
+  padding: 0 8px;
+  box-shadow: 0 1px 2px var(--jnrs-font-primary-03);
+
+  .topBarBtn {
+    font-size: 22px;
+  }
+
+  .left,
+  .right {
+    display: flex;
+    align-items: center;
+  }
+
+  .userMenu_reference {
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+    cursor: pointer;
+    &:hover {
+      span {
+        transition: all 0.25s ease;
+        color: var(--jnrs-color-primary) !important;
+      }
+      .userMenu_icon {
+        transition: all 0.25s ease;
+        color: var(--jnrs-color-primary);
+      }
+    }
+    .userMenu_avatar {
+      width: $topHoverSize !important;
+      height: $topHoverSize !important;
+      border-radius: 50%;
+      margin-right: 4px;
+      overflow: hidden;
+      background: var(--jnrs-background-head);
+    }
+    .userMenu_icon {
+      color: var(--jnrs-font-primary-06);
+    }
+  }
+  .userMenu_dropdown {
+    text-align: center;
+
+    .userMenu_dropdown_avatar {
+      width: 120px !important;
+      height: 120px !important;
+      margin: 0 auto 8px;
+      background: var(--jnrs-background-head);
+      border-radius: 5px;
+    }
+    img {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      object-fit: none;
+      object-position: center;
+    }
+    b {
+      display: block;
+      font-size: 16px;
+      color: var(--jnrs-font-primary);
+    }
+    .loginDateTime {
+      color: var(--jnrs-font-primary-06);
+    }
+    .userMenu_dropdown_btn {
+      margin-top: 8px;
+    }
+  }
+  .userMenu_roleName {
+    color: var(--jnrs-color-primary);
+  }
+}
+</style>

package/jnrs-template-vue/src/layout/index.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, watch, toRefs } from 'vue'
+import SideMenu from './SideMenu.vue'
+import TopHeader from './TopHeader.vue'
+import RouterTabs from './RouterTabs.vue'
+import { useAuthStore, useSystemStore } from '@jnrs/vue-core/pinia'
+
+const watermarkFont = ref({
+  color: 'rgba(0, 0, 0, 0)',
+  fontSize: 12
+})
+
+const { userInfo } = useAuthStore()
+
+const { computedThemeMode } = toRefs(useSystemStore())
+watch(
+  computedThemeMode,
+  (newVal) => {
+    if (newVal === 'dark') {
+      watermarkFont.value.color = 'rgba(255, 255, 255, .06)'
+    } else {
+      watermarkFont.value.color = 'rgba(0, 0, 0, .06)'
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <el-container class="layout_container">
+    <SideMenu />
+    <el-container>
+      <el-header class="layout_header">
+        <TopHeader />
+      </el-header>
+      <RouterTabs />
+      <el-main>
+        <el-watermark
+          :font="watermarkFont"
+          :content="[userInfo?.name, userInfo?.workNo]"
+          style="width: 100%; height: 100%"
+        >
+          <router-view v-slot="{ Component }">
+            <keep-alive>
+              <component :is="Component" />
+            </keep-alive>
+          </router-view>
+        </el-watermark>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style lang="scss" scoped>
+.layout_header {
+  width: 100%;
+  height: var(--jnrs-head-height);
+  padding: 0;
+}
+
+.layout_container {
+  width: 100%;
+  height: 100%;
+
+  .el-main {
+    padding: 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,14 @@
+export default {
+  main: {
+    title: 'Management System'
+  },
+  login: {
+    title: 'Management System',
+    formTitle: 'Login',
+    formAccount: 'Please enter your account',
+    formPassword: 'Please enter your password',
+    formBtn: 'Log In',
+    greeting: 'Welcome'
+  },
+  layout: {}
+}

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

@@ -0,0 +1,23 @@
+import { createI18n } 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'
+
+const i18n = createI18n({
+  legacy: false, // legacy 为 false 则启用 Composition API 模式
+  globalInjection: true, // 允许在模板中使用 $t
+  locale: 'zhCn',
+  fallbackLocale: 'en',
+  messages: {
+    zhCn: {
+      ...zhCn,
+      ...vueCore_zhCn
+    },
+    en: {
+      ...en,
+      ...vueCore_en
+    }
+  }
+})
+
+export default i18n

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

@@ -0,0 +1,14 @@
+export default {
+  main: {
+    title: '信息化管理系统'
+  },
+  login: {
+    title: '信息化管理系统',
+    formTitle: '登录',
+    formAccount: '请输入账号',
+    formPassword: '请输入密码',
+    formBtn: '登 录',
+    greeting: '欢迎使用'
+  },
+  layout: {}
+}