create-jnrs-template-vue 1.0.3

package/jnrs-template-vue/src/api/mock/index.ts

@@ -0,0 +1,23 @@
+import { request } from '../request'
+
+/**
+ * 404 错误
+ */
+export const NotFoundApi = () => {
+  return request({
+    url: '/notFound',
+    method: 'get'
+  })
+}
+
+/**
+ * 无权限
+ * @param showErrorMsg 是否显示错误信息
+ */
+export const NoAuth = (showErrorMsg: boolean) => {
+  return request({
+    url: '/auth/no',
+    method: 'post',
+    showErrorMsg
+  })
+}

package/jnrs-template-vue/src/api/request.ts

@@ -0,0 +1,37 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : request.ts
+ * @Date   : 2025/11/10
+ * @Desc.  : api 网络请求
+ */
+
+import { ElMessage } from 'element-plus'
+import { createAxiosInstance } from '@jnrs/core/axios'
+import type { BusinessRequest, BusinessResponse } from '@jnrs/core/axios'
+import { useMockStore, useAuthStore } from '@/stores'
+
+const axiosInstance = createAxiosInstance({
+  handleMessageFn: ElMessage,
+  handleGetTokenFn: () => {
+    const { token } = useAuthStore()
+    return token
+  },
+  handleNoAuthFn: () => {}
+})
+
+/**
+ * 请求方法（泛型拓展）
+ */
+const request = <T = BusinessResponse>(options: BusinessRequest): Promise<T> => {
+  const { isMock } = useMockStore()
+  if (!axiosInstance) {
+    throw new Error('请先调用 createRequest 初始化 axios 实例')
+  }
+  if (isMock) {
+    options.url = options.mockUrl ? options.mockUrl : '/mock' + options.url
+  }
+  return axiosInstance(options)
+}
+
+export { request }

package/jnrs-template-vue/src/api/user/index.ts

@@ -0,0 +1,12 @@
+import { request } from '../request'
+
+// 获取用户信息
+export const UserApi = (id: string) => {
+  return request({
+    url: '/api/user',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}

package/jnrs-template-vue/src/assets/styles/base.css

@@ -0,0 +1,28 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  width: 100vw;
+  color: #14161a;
+  height: 100vh;
+  background: #f2f2f2;
+  transition:
+    color 1.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+}
+
+#app {
+  min-width: 1280px;
+  height: 100%;
+  font-weight: normal;
+}
+
+a {
+  text-decoration: none;
+}

package/jnrs-template-vue/src/assets/styles/main.css

@@ -0,0 +1 @@
+@import './base.css';

package/jnrs-template-vue/src/composables/common/useAvatar.ts

@@ -0,0 +1,36 @@
+import { ref, toRefs, watch } from 'vue'
+// import { getImgSrc } from '@/utils/common'
+// import { useCommonStore } from '@/stores'
+// import imgFailed from '@/assets/img/common/404.png'
+import defaultAvatar from '@/assets/images/common/avatar.png'
+
+export const useAvatar = () => {
+  // const { userInfo } = toRefs(useCommonStore())
+  const avatar = ref(defaultAvatar)
+
+  // watch(
+  //   () => userInfo.value.avatar,
+  //   nv => {
+  //     if (nv) {
+  //       getImgSrc(nv).then(res => {
+  //         avatar.value = URL.createObjectURL(res.data)
+  //       })
+  //     }
+  //   }
+  // )
+
+  // const at = userInfo.value.avatar
+  // if (at) {
+  //   getImgSrc(at)
+  //     .then(res => {
+  //       avatar.value = URL.createObjectURL(res.data)
+  //     })
+  //     .catch(() => {
+  //       avatar.value = imgFailed
+  //     })
+  // }
+
+  return {
+    avatar
+  }
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : index.ts
+ * @Date   : 2025/09/30
+ * @Desc.  : 统一导出
+ */
+
+export * from './useTable'
+export * from './useModal'
+export * from './useForm'

package/jnrs-template-vue/src/composables/useForm.ts

@@ -0,0 +1,9 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useForm.ts
+ * @Date   : 2025/09/30
+ * @Desc.  : 表单通用逻辑
+ */
+
+export function useForm() {}

package/jnrs-template-vue/src/composables/useModal.ts

@@ -0,0 +1,9 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useModal.ts
+ * @Date   : 2025/09/30
+ * @Desc.  : 弹窗控制逻辑
+ */
+
+export function useModal() {}

package/jnrs-template-vue/src/composables/useTable.ts

@@ -0,0 +1,35 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useTable.ts
+ * @Date   : 2025/09/30
+ * @Desc.  : 表格、分页、筛选等通用逻辑
+ */
+
+import { ref, computed } from 'vue'
+
+export function useTable<T>(initialData: T[] = []) {
+  const data = ref<T[]>(initialData)
+  const pageSize = ref(10)
+  const currentPage = ref(1)
+
+  // 分页数据
+  const paginatedData = computed(() => {
+    const start = (currentPage.value - 1) * pageSize.value
+    return data.value?.slice(start, start + pageSize.value)
+  })
+
+  // 设置新的数据
+  const setNewData = (newData: T[]) => {
+    data.value = newData
+    currentPage.value = 1
+  }
+
+  return {
+    data,
+    pageSize,
+    currentPage,
+    paginatedData,
+    setNewData
+  }
+}

package/jnrs-template-vue/src/composables/useUser.ts

@@ -0,0 +1,9 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useUser.ts
+ * @Date   : 2025/09/30
+ * @Desc.  : 用户相关逻辑
+ */
+
+export function useUser() {}

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

@@ -0,0 +1,14 @@
+<template>
+  <div class="blank-layout">
+    <router-view />
+  </div>
+</template>
+
+<style scoped>
+.blank-layout {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+}
+</style>

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

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+import type { MenuItem } from '@/types'
+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">
+    <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 {
+  :deep(.el-tabs__header) {
+    margin-bottom: 0;
+    height: 32px;
+  }
+  :deep(.el-tabs__item) {
+    color: #888;
+    font-size: 12px;
+    height: 32px;
+  }
+  :deep(.el-tabs__item.is-active) {
+    color: #d15f2c;
+    border-bottom-color: #f2f2f2;
+  }
+  :deep(.el-tabs__nav-prev) {
+    color: #d15f2c;
+    background: #fff;
+  }
+  :deep(.el-tabs__nav-next) {
+    color: #d15f2c;
+    background: #fff;
+  }
+}
+</style>

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

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import SideMenuItem from './SideMenuItem.vue'
+import { storeToRefs } from 'pinia'
+import { useRoute } from '@jnrs/vue-core/router'
+import { useSystemStore, useMenuStore } from '@/stores'
+
+const systemStore = useSystemStore()
+const { menuCollapse } = storeToRefs(systemStore)
+const { menus } = useMenuStore()
+
+const route = useRoute()
+</script>
+
+<template>
+  <el-aside class="sideMenu">
+    <div class="logo">后台管理系统</div>
+    <el-menu
+      class="leftSide_menu"
+      popper-class="layoutPage_leftSide_menu_popper"
+      :router="true"
+      :default-active="route.path"
+      :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>
+.sideMenu {
+  max-width: 200px;
+  height: 100%;
+  overflow-x: hidden;
+  padding: 0 10px;
+  background: rgba(20, 22, 26, 1);
+  box-shadow: 5px 0 8px rgba(20, 22, 26, 0.3);
+  color: rgba(255, 255, 255, 1);
+
+  .logo {
+    height: 50px;
+  }
+
+  :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: #d15f2c;
+    }
+
+    :deep(.el-menu-item span) {
+      display: none;
+    }
+  }
+
+  .leftSide_menu {
+    border: none;
+    min-width: 180px;
+    --el-menu-text-color: #f2f2f2;
+    --el-menu-active-color: #f2f2f2;
+    --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;
+        span {
+          color: #f2f2f2 !important;
+        }
+      }
+    }
+
+    :deep(.el-menu-item.is-active) {
+      background: #d15f2c !important;
+
+      span {
+        color: #f2f2f2 !important;
+      }
+    }
+
+    .el-menu-item.is-active {
+      background: #d15f2c;
+      color: #fff !important;
+
+      span {
+        color: #fff !important;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+// 弹出层样式
+.layoutPage_leftSide_menu_popper {
+  background: #051524;
+  border: none !important;
+  left: 86px !important;
+  border-radius: 15px;
+  padding: 0 10px;
+  .el-menu {
+    background: none;
+  }
+  .el-menu-item {
+    border-radius: 10px;
+    background-color: none;
+    color: #f2f2f2;
+    &:hover {
+      color: none;
+      background: none;
+    }
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .el-menu-item.is-active {
+    border-radius: 10px;
+    background: #d15f2c;
+    color: #f2f2f2;
+  }
+  .layoutPage_leftSide_menu_popper {
+    left: 215px !important;
+  }
+}
+</style>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useSystemStore } from '@/stores'
+import type { MenuItem } from '@/types'
+defineProps<{
+  listItem: MenuItem
+}>()
+
+const { menuCollapse } = useSystemStore()
+</script>
+
+<template>
+  <!-- 一级路由 -->
+  <el-menu-item :index="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.todoCount" :offset="[7, 17]" color="#f00">
+      <span>{{ listItem.meta.title }}</span>
+    </el-badge>
+  </el-menu-item>
+  <el-sub-menu :index="listItem.meta.uuid" v-else>
+    <!-- 一级目录 -->
+    <template #title>
+      <el-badge
+        v-if="listItem.todoCount"
+        :show-zero="false"
+        :is-dot="listItem.todoCount > 0"
+        :offset="[menuCollapse ? -5 : -10, 20]"
+        color="#f00"
+      >
+        <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>