create-jnrs-vue 1.2.11

package/jnrs-template-vue/src/main.ts

@@ -0,0 +1,31 @@
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import '@jnrs/shared/styles/theme.scss'
+import '@/assets/styles/index.scss'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+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 { permissions } from './directives/permissions'
+
+const app = createApp(App)
+
+app.directive('permissions', permissions)
+
+// element-plus 自动引入所有图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+// pinia 相关
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+app.use(pinia)
+app.use(router)
+app.use(locales)
+app.mount('#app')

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

@@ -0,0 +1,77 @@
+import type { FileModules, RouteLocationNormalizedGeneric } from '@jnrs/vue-core/router'
+import type { MenuItem } from '@jnrs/vue-core'
+import { LAYOUT_NAME, GLOBAL_COMPONENT, routes } from './routes'
+import { createVueRouter } from '@jnrs/vue-core/router'
+import { useAuthStore, useMenuStore } from '@jnrs/vue-core/pinia'
+import { MenuApi } from '@/api/system'
+import { hasMenuViewPermission } from '@/utils/permissions'
+
+const fileModules = import.meta.glob('/src/views/**/*.vue') as FileModules
+
+/**
+ * 递归过滤菜单树，仅保留当前用户有权限访问的节点
+ * TODO 如果是后端返回的数据就没必要判断了，后端会判断
+ */
+function filterMenuByPermission(menus: MenuItem[]): MenuItem[] {
+  return menus
+    .map((item) => {
+      const children = item.children ? filterMenuByPermission(item.children) : []
+
+      const hasSelfPermission = hasMenuViewPermission(item.meta?.permissions)
+
+      if (hasSelfPermission) {
+        return { ...item, ...(children.length > 0 ? { children } : {}) }
+      }
+      if (children.length > 0) {
+        return { ...item, children }
+      }
+      return null
+    })
+    .filter(Boolean) as MenuItem[]
+}
+
+const router = createVueRouter({
+  options: {
+    routes
+  },
+  fileModules,
+  layoutName: LAYOUT_NAME,
+  globalComponent: GLOBAL_COMPONENT,
+  handleBeforeEach: async (to: RouteLocationNormalizedGeneric) => {
+    // 如果是不需要[身份验证]的页面，直接放行
+    if (to.meta.noAuth) return true
+
+    // 页面刷新处理：未[身份验证]时，重定向到[身份验证]页
+    const { hasAuthenticated } = useAuthStore()
+    if (!hasAuthenticated) {
+      return { name: 'Login', query: { redirect: to.path }, replace: true }
+    }
+
+    // 校验访问权限
+    if (to.meta.permissions && !hasMenuViewPermission(to.meta.permissions)) {
+      return { name: '403' }
+    }
+
+    // 页面刷新处理：菜单未获取时，先获取菜单，再重定向当前路由，即重新开始进入 handleBeforeEach
+    const { hasFetchedAsyncMenus, asyncSetMenus } = useMenuStore()
+    if (!hasFetchedAsyncMenus) {
+      try {
+        const menuRes = await MenuApi()
+        /**
+         * 校验用户的菜单访问权限，进行菜单筛选
+         * TODO 如果是后端返回的数据就没必要校验筛选了，后端会筛选
+         */
+        const perRes = filterMenuByPermission(menuRes)
+
+        await asyncSetMenus(perRes)
+        return to.fullPath
+      } catch (error) {
+        throw error
+      }
+    }
+
+    return true
+  }
+})
+
+export { router }

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

@@ -0,0 +1,48 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : routes.ts
+ * @Date   : 2025/10/07
+ * @Desc.  : 基础路由配置
+ */
+
+export const LAYOUT_NAME = 'Layout'
+export const GLOBAL_COMPONENT = import('@/layout/BlankLayout.vue')
+
+export const routes = [
+  {
+    name: '403',
+    path: '/403',
+    component: () => import('@/views/common/403.vue'),
+    meta: { title: '403', noAuth: true, global: true }
+  },
+  {
+    name: '404',
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/common/404.vue'),
+    meta: { title: '404', global: true }
+  },
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录', noAuth: true, global: true }
+  },
+  {
+    name: LAYOUT_NAME,
+    path: '/',
+    component: () => import('@/layout/index.vue'),
+    meta: { title: '框架' },
+    children: [
+      {
+        path: '/',
+        name: 'Home',
+        meta: {
+          title: '工作台',
+          icon: 'HomeFilled'
+        },
+        component: () => import('@/views/home/index.vue')
+      }
+    ]
+  }
+]

package/jnrs-template-vue/src/types/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+// 扩展 ImportMeta 接口
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+interface ImportMetaEnv {
+  readonly VITE_USE_MOCK: string
+  readonly VITE_BASE_URL: string
+  readonly VITE_APP_PORT: string
+}

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

@@ -0,0 +1,81 @@
+/**
+ * 文件信息
+ */
+export interface Attachment {
+  /**
+   * 数据 id
+   */
+  id: number
+  /**
+   * 文件 id
+   */
+  documentId: number
+  /**
+   * 文件名
+   */
+  fileName: string
+  /**
+   * 文件名唯一标识（用于文件获取 API）
+   */
+  uniqueFileName: string
+  /**
+   * MIME 类型
+   */
+  fileType: string
+  /**
+   * 文件大小 单位：字节（Bytes）
+   */
+  fileSize: number
+}
+
+/**
+ * 文件容器（用于图片或附件）
+ */
+export interface Document {
+  id: number
+  description: string | null
+  attachments: Attachment[]
+}
+
+/**
+ * 图片 & 附件数据
+ */
+export interface FileContainer {
+  /**
+   * 图片
+   */
+  imageDocument?: Document
+  /**
+   * 附件
+   */
+  attachmentDocument?: Document
+}
+
+/**
+ * 分页
+ */
+export interface Pagination {
+  /**
+   * 当前页码
+   */
+  pageNo: number
+  /**
+   * 每页大小
+   */
+  pageSize: number
+}
+
+/**
+ * 分页列表数据
+ */
+// eslint-disable-next-line
+export interface PageTableData<T = Record<string, any>> extends Pagination {
+  /**
+   * 数据列表
+   */
+  list: T[]
+  /**
+   * 数据总数
+   */
+  count: number
+}

package/jnrs-template-vue/src/types/webSocket.ts

@@ -0,0 +1,19 @@
+export interface MsgIdMessage {
+  msgId: string
+  d: unknown
+}
+
+export interface TypeDataMessage {
+  type: string | number
+  data: unknown
+}
+
+// 类型守卫函数 MsgId 结构
+export function isMsgIdMessage(msg: unknown): msg is MsgIdMessage {
+  return typeof msg === 'object' && msg !== null && 'msgId' in msg && 'd' in msg
+}
+
+// 类型守卫函数 Type 结构
+export function isTypeDataMessage(msg: unknown): msg is TypeDataMessage {
+  return typeof msg === 'object' && msg !== null && 'type' in msg && 'data' in msg
+}

package/jnrs-template-vue/src/utils/file.ts

@@ -0,0 +1,56 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : file.ts
+ * @Date   : 2025/10/16
+ * @Desc.  : 文件处理相关函数
+ */
+
+import { useObjectUrl } from '@vueuse/core'
+import { FileApi } from '@/api/common'
+
+/**
+ * 根据文件下载接口返回的二进制数据生成 URL（用于图片、PDF预览）
+ * @param uniqueFileName 文件唯一名称
+ * @returns 响应式文件 URL
+ */
+export const getFileUrl = async (uniqueFileName: string) => {
+  const blob = await FileApi(uniqueFileName)
+  return useObjectUrl(blob)
+}
+
+/**
+ * 从可能为原始值或对象的输入中提取指定字段的值
+ * @param value - 输入值（可能是 string/number/对象）
+ * @param fieldName - 要提取的对象字段名（默认 'id'）
+ * @returns 提取出的 string | number 值，或 undefined
+ */
+export function extractFieldId(value: unknown, fieldName: string = 'id'): string | number | undefined {
+  // 1. 排除 null 和 undefined
+  if (value == null) return undefined
+
+  // 2. 如果是原始 ID 类型，直接返回
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value
+  }
+
+  // 3. 必须是普通对象（非数组、非 Date 等）
+  if (typeof value !== 'object' || Array.isArray(value)) {
+    return undefined
+  }
+
+  // 4. 检查对象是否包含目标字段
+  if (!(fieldName in value)) {
+    return undefined
+  }
+
+  // 5. 安全获取字段值（使用 keyof 断言确保类型安全）
+  const fieldValue = (value as Record<string, unknown>)[fieldName]
+
+  // 6. 只接受 string 或 number 类型
+  if (typeof fieldValue === 'string' || typeof fieldValue === 'number') {
+    return fieldValue
+  }
+
+  return undefined
+}

package/jnrs-template-vue/src/utils/packages.ts

@@ -0,0 +1,116 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : common.ts
+ * @Date   : 2025/12/17
+ * @Desc.  : 对 packages 的一些公用方法进行封装
+ */
+
+import { ElMessage, ElLoading } from 'element-plus'
+import {
+  getDictList as _getDictList,
+  getDictLabel as _getDictLabel,
+  getDictValue as _getDictValue,
+  getDictColor as _getDictColor,
+  downloadByBlob as _downloadByBlob
+} from '@jnrs/shared'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+import { objectToFormData as _objectToFormData } from '@jnrs/shared'
+import { FileApi } from '@/api/common'
+
+/**
+ * 根据字典名称获取字典数据
+ * @param name 字典名称
+ * @returns 某字典名称所对应的字典列表数据
+ */
+export const getDictList = (name: string) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictList(name, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典值获取字典标签
+ * @param name 字典名称
+ * @param value 字典值
+ * @returns 某字典名称所对应的字典标签
+ */
+export const getDictLabel = (name: string, value: string | number) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictLabel(name, value, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典标签获取字典值
+ * @param name 字典名称
+ * @param label 字典标签
+ * @returns 某字典名称所对应的字典值
+ */
+export const getDictValue = (name: string, label: string) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictValue(name, label, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典值获取字典颜色
+ * @param name 字典名称
+ * @param value 字典值
+ * @returns 某字典名称所对应的字典颜色
+ */
+export const getDictColor = (name: string, value: string | number) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictColor(name, value, dict)
+  }
+}
+
+/**
+ * 将对象转为 FormData
+ * @param obj 对象
+ * @returns FormData
+ */
+export const objectToFormData = (obj: Record<string, unknown>) => {
+  // 根据后端返回结果处理的映射关系
+  const mapConfig = {
+    // 图片
+    newImageFiles: { finallyKey: 'orginImageNames', valueKey: 'uniqueFileName' },
+    // 通用附件
+    newAttachmentFile: { finallyKey: 'orginAttachmentName', valueKey: 'uniqueFileName' },
+    // 程序文件
+    newProgramFile: { finallyKey: 'orginProgramName', valueKey: 'uniqueFileName' },
+    // 数据库
+    databaseFile: { finallyKey: 'databaseFile', valueKey: 'uniqueFileName' }
+  }
+  return _objectToFormData(obj, mapConfig)
+}
+
+/**
+ * 根据文件下载接口返回的二进制数据进行下载
+ * @param uniqueFileName 后端存储的唯一文件名
+ * @param filename 下载文件显示的文件名
+ * @returns loading 下载状态
+ */
+export const downloadFile = async (uniqueFileName: string, filename?: string) => {
+  const elLoading = ElLoading.service({
+    lock: true,
+    text: '文件下载中...',
+    background: 'rgba(0, 0, 0, 0.5)'
+  })
+  let loading = true
+  try {
+    const blob = await FileApi(uniqueFileName)
+    _downloadByBlob(blob, filename || uniqueFileName)
+  } catch (error) {
+    console.error(error)
+    ElMessage.warning('文件下载失败')
+  } finally {
+    elLoading.close()
+    loading = false
+  }
+  return loading
+}

package/jnrs-template-vue/src/utils/permissions.ts

@@ -0,0 +1,16 @@
+import { hasPermissionWithSuffix } from '@jnrs/shared'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+
+// 菜单查看权限
+export function hasMenuViewPermission(requiredPerms: string[] | undefined) {
+  const { userInfo } = useAuthStore()
+  const userPerms = userInfo?.permissions || []
+  return hasPermissionWithSuffix(requiredPerms, userPerms, ':view', 'some')
+}
+
+// 按钮操作权限
+export function hasPermission(requiredPerms: string[] | undefined) {
+  const { userInfo } = useAuthStore()
+  const userPerms = userInfo?.permissions || []
+  return hasPermissionWithSuffix(requiredPerms, userPerms)
+}

package/jnrs-template-vue/src/views/common/403.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { router } from '@/router'
+import { handleRouter } from '@jnrs/vue-core/router'
+
+const goLogin = () => {
+  handleRouter({ name: 'Login' }, 'replace')
+}
+const goHome = () => {
+  handleRouter({ path: '/' }, 'replace')
+}
+const goBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="main">
+    <div class="main_mid">
+      <img alt="404" src="@/assets/images/common/403.png" />
+      <h3>抱歉，您访问的资源权限受限</h3>
+      <div class="main_mid_btn">
+        <el-button @click="goLogin" style="margin-right: 20px">重新登录</el-button>
+        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">返回首页</el-button>
+        <el-button type="primary" @click="goBack">返回上一页</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--jnrs-background-primary);
+  .main_mid {
+    text-align: center;
+    img {
+      width: 300px;
+    }
+    h3 {
+      color: var(--jnrs-font-primary);
+    }
+    .main_mid_btn {
+      margin-top: 30px;
+    }
+  }
+}
+</style>

package/jnrs-template-vue/src/views/common/404.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { router } from '@/router'
+import { handleRouter } from '@jnrs/vue-core/router'
+
+const goLogin = () => {
+  handleRouter({ name: 'Login' }, 'replace')
+}
+const goHome = () => {
+  handleRouter({ path: '/' }, 'replace')
+}
+const goBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="main">
+    <div class="main_mid">
+      <img alt="404" src="@/assets/images/common/404.png" />
+      <h3>抱歉，您访问的页面不存在</h3>
+      <div class="main_mid_btn">
+        <el-button @click="goLogin" style="margin-right: 20px">重新登录</el-button>
+        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">返回首页</el-button>
+        <el-button type="primary" @click="goBack">返回上一页</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--jnrs-background-primary);
+  .main_mid {
+    text-align: center;
+    img {
+      width: 300px;
+    }
+    h3 {
+      color: var(--jnrs-font-primary);
+    }
+    .main_mid_btn {
+      margin-top: 30px;
+    }
+  }
+}
+</style>