create-jnrs-template-vue 1.1.12 → 1.1.14

package/jnrs-template-vue/README.md

@@ -20,6 +20,7 @@ jnrs-template-vue/
 ├── node_modules/         # 项目依赖
 ├── viteMockServe/        # Mock 服务配置（用于开发环境模拟 API）
 ├── public/               # 静态资源
+├── layout/               # 布局
 ├── src/                  # 源码目录
 │   ├── components/       # Vue 组件
 │   ├── composables/      # 组合式函数
@@ -41,4 +42,7 @@ jnrs-template-vue/
 ├── .env.production       # 生产环境变量（全局）
 ├── .gitignore            # Git 忽略规则
 ├── .prettierrc.json      # Prettier 格式化配置
-```
+```
+
+## ⚠️ 注意事项
+- layout 中使用了 KeepAlive 内置组件进行组件实例缓存，使用生命周期进行如“副作用清理“时注意用 onActivated / onDeactivated 替代 onMounted / onUnmounted

package/jnrs-template-vue/components.d.ts

@@ -12,12 +12,12 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElAside: typeof import('element-plus/es')['ElAside']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
-    ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePickerPanel: typeof import('element-plus/es')['ElDatePickerPanel']
@@ -32,10 +32,9 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRow: typeof import('element-plus/es')['ElRow']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

package/jnrs-template-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jnrs-template-vue",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "JNRS 信息化管理系统模板",
   "author": "Talia-Tan",
   "private": true,
@@ -19,9 +19,10 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@jnrs/core": "1.1.5",
-    "@jnrs/shared": "1.1.5",
-    "@jnrs/vue-core": "1.1.5",
+    "@jnrs/core": "1.1.6",
+    "@jnrs/shared": "1.1.6",
+    "@jnrs/vue-core": "1.1.6",
+    "@vueuse/core": "^14.1.0",
     "element-plus": "^2.11.9",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",

package/jnrs-template-vue/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
-import { useSystemStore } from '@/stores'
+import { useSystemStore } from '@jnrs/vue-core/pinia'
 import { ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-CN'
 import en from 'element-plus/es/locale/lang/en'
@@ -9,6 +9,7 @@ import { changeLocales as changeLocalesForShared } from '@jnrs/shared/locales'
 import { changeLocales as changeLocalesForCore } from '@jnrs/core/locales'
 
 const { locale } = useI18n()
+
 const { theme } = useSystemStore()
 watch(
   () => theme.locale,
@@ -21,6 +22,7 @@ watch(
     immediate: true
   }
 )
+
 const localeMap = {
   zhCn: zhCn,
   en: en

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

@@ -1,9 +1,24 @@
-import { request } from '../request'
+import { request } from '@jnrs/vue-core'
+// import { useFetch } from '@vueuse/core'
 
-//附件获取
-export const FileApi = (name: string) => {
+/**
+ * 文件下载
+ * @param uniqueFileName 文件唯一名称（列表中一般是在 item.attachmentDocument/imageDocument.attachments[].uniqueFileName)
+ * @returns Blob
+ */
+export const FileApi = (uniqueFileName: string): Promise<Blob> => {
   return request({
-    url: '/api/files/' + name,
-    method: 'get'
+    url: '/api/files/' + uniqueFileName,
+    method: 'get',
+    responseType: 'blob'
   })
 }
+
+// export const FileApi = (uniqueFileName: string) => {
+//   return useFetch(`/api/files/${uniqueFileName}`, {
+//     method: 'get',
+//     headers: {
+//       responseType: 'blob'
+//     }
+//   }).blob()
+// }

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

@@ -0,0 +1,86 @@
+import { request } from '@jnrs/vue-core'
+import type { ApiResponse } from '@/types'
+
+/**
+ * 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
+  })
+}
+
+/**
+ * 数据详情
+ */
+export const DetailsApi = (): Promise<ApiResponse> => {
+  return request({
+    url: '/details',
+    method: 'get'
+  })
+}
+
+/**
+ * 附件（文件）信息
+ */
+export interface Attachment {
+  id: number
+  documentId: number
+  fileName: string
+  uniqueFileName: string
+  fileType: string // MIME 类型
+  fileSize: number // 单位：字节（Bytes）
+}
+
+/**
+ * 文档容器（用于图片或附件）
+ */
+export interface Document {
+  id: number
+  description: string | null
+  attachments: Attachment[]
+}
+
+/**
+ * 项目项
+ */
+export interface ProjectItem {
+  id: string
+  programCode: string
+  program: string
+  code: string
+  name: string
+  description: string
+  type: '敏捷型' | '瀑布型' | '混合型'
+  manager: string
+  budget: string
+  plannedStartDate: string
+  plannedFinishDate: string
+  progress: string
+  status: '进行中' | '已完成' | '未开始' | '已暂停'
+  imageDocument?: Document // 图片类附件
+  attachmentDocument?: Document // 普通文件类附件
+}
+
+/**
+ * 数据详情
+ */
+export const DemosTableApi = (): Promise<ProjectItem[]> => {
+  return request({
+    url: '/mock/demos/table',
+    method: 'get'
+  })
+}

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

@@ -1,4 +1,4 @@
-import { request } from '../request'
+import { request } from '@jnrs/vue-core'
 import type { Dict, DictItem, User, Role } from '@jnrs/shared'
 import type { MenuItem } from '@jnrs/vue-core'
 

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

@@ -1,4 +1,4 @@
-import { request } from '../request'
+import { request } from '@jnrs/vue-core'
 
 // 获取用户信息
 export const UserApi = (id: string) => {

package/jnrs-template-vue/src/components/base/ImageView.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, onBeforeUnmount } from 'vue'
+import { FileApi } from '@/api/common'
+
+// 响应式数据
+const squareUrl = ref<string>('')
+
+let currentObjectUrl: string | null = null
+
+// 加载图片
+async function loadImage() {
+  try {
+    const blob = await FileApi('20251216134412632-1376c8a7-1f31-451c-9eb4-944aaa03497b.png')
+
+    // 创建 URL 并保存引用
+    currentObjectUrl = URL.createObjectURL(blob)
+    squareUrl.value = currentObjectUrl
+  } catch (error) {
+    console.error('加载头像失败:', error)
+  }
+}
+
+// 图片加载成功 → 立即释放内存（浏览器已缓存图像）
+function handleImageLoad() {
+  if (currentObjectUrl) {
+    URL.revokeObjectURL(currentObjectUrl)
+    currentObjectUrl = null
+    console.log('✅ 头像加载完成，已释放 Blob URL')
+  }
+}
+
+// 图片加载失败 → 也释放内存
+function handleImageError() {
+  if (currentObjectUrl) {
+    URL.revokeObjectURL(currentObjectUrl)
+    currentObjectUrl = null
+    console.error('❌ 头像加载失败')
+  }
+}
+
+// 组件卸载前 → 确保清理（防止用户快速跳转导致未加载完）
+onBeforeUnmount(() => {
+  if (currentObjectUrl) {
+    URL.revokeObjectURL(currentObjectUrl)
+    currentObjectUrl = null
+    console.log('🧹 组件卸载，强制释放 Blob URL')
+  }
+})
+
+// 启动加载
+loadImage()
+</script>
+
+<template>
+  <el-avatar v-if="squareUrl" shape="square" :src="squareUrl" @load="handleImageLoad" @error="handleImageError" />
+  <!-- 可选：加载中状态 -->
+  <div v-else>加载中...</div>
+</template>

package/jnrs-template-vue/src/components/common/JnPagination.vue

@@ -0,0 +1,83 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : JnPagination.vue
+ @Date   : 2025/12/18
+ @Desc.  : 分页组件
+ -->
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ComponentSize } from 'element-plus'
+
+type PaginationModelValue = {
+  currentPage: number
+  pageSize: number
+}
+
+interface PaginationProps {
+  total: number
+  modelValue?: PaginationModelValue
+  size?: ComponentSize
+  background?: boolean
+  marginTop?: string
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  modelValue: () => ({ currentPage: 1, pageSize: 10 }),
+  size: 'small',
+  background: true,
+  marginTop: '10px'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: { currentPage: number; pageSize: number }): void
+  (e: 'change'): void
+}>()
+
+const localPage = ref(props.modelValue.currentPage)
+const localSize = ref(props.modelValue.pageSize)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    localPage.value = newVal.currentPage
+    localSize.value = newVal.pageSize
+  },
+  { deep: true }
+)
+
+// 页码变化
+const handleCurrentChange = (page: number) => {
+  localPage.value = page
+  const newValue = { currentPage: page, pageSize: localSize.value }
+  emit('update:modelValue', newValue)
+  emit('change')
+}
+
+// 每页条数变化时重置到第一页
+const handleSizeChange = (size: number) => {
+  localSize.value = size
+  localPage.value = 1
+  const newValue = { currentPage: 1, pageSize: size }
+  emit('update:modelValue', newValue)
+  emit('change')
+}
+</script>
+
+<template>
+  <el-pagination
+    v-model:current-page="localPage"
+    v-model:page-size="localSize"
+    :total="total"
+    :page-sizes="[10, 20, 50, 100]"
+    :size="size"
+    :background="background"
+    layout="->, total, sizes, prev, pager, next, jumper"
+    :style="{
+      marginTop: marginTop
+    }"
+    @current-change="handleCurrentChange"
+    @size-change="handleSizeChange"
+  />
+</template>

package/jnrs-template-vue/src/components/common/JnTable.vue

@@ -0,0 +1,133 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : JnTable.vue
+ @Date   : 2025/12/18
+ @Desc.  : 表格组件
+ -->
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { computed } from 'vue'
+import type { UseReactivityTableHeightOptions } from '@/composables/tools/useReactivityTableHeight'
+import { useReactivityTableHeight } from '@/composables/tools/useReactivityTableHeight'
+
+type PaginationModelValue = {
+  currentPage: number
+  pageSize: number
+}
+
+interface Props {
+  /**
+   * 表数据
+   */
+  data?: T[]
+  /**
+   * 行数据的 Key，在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
+   * 支持多层访问：user.info.id
+   */
+  rowKey?: string
+  /**
+   * 总是显示横向滚动条
+   */
+  scrollbar?: boolean
+  /**
+   * 表格高度，默认为 100%
+   * @default 100%
+   */
+  height?: string | number
+  /**
+   * 表格高度是否自动计算，默认为 false
+   * @default false
+   */
+  autoHeight?: boolean
+  /**
+   * 表格高度自动计算配置项
+   */
+  autoHeightOptions?: UseReactivityTableHeightOptions
+  /**
+   * 是否显示序号列
+   */
+  showIndexColumn?: boolean
+  /**
+   * 是否显示选择列
+   */
+  showSelectionColumn?: boolean
+  /**
+   * 当前页码和每页大小（用于序号计算）
+   */
+  pagination?: PaginationModelValue
+}
+
+const {
+  rowKey = 'id',
+  scrollbar = true,
+  height = null,
+  autoHeight = true,
+  autoHeightOptions = {},
+  showIndexColumn = true,
+  showSelectionColumn = true,
+  pagination = { currentPage: 0, pageSize: 0 }
+} = defineProps<Props>()
+
+const { maxHeight: reactiveMaxHeight } = useReactivityTableHeight(autoHeightOptions ?? {})
+
+// 表格最终高度
+const finalHeight = computed(() => {
+  if (height != null) {
+    return height
+  }
+  if (autoHeight) {
+    return reactiveMaxHeight.value
+  }
+  return '100%'
+})
+
+// 索引列计算
+const getIndex = (index: number) => {
+  return index + (pagination.currentPage - 1) * pagination.pageSize + 1
+}
+</script>
+
+<template>
+  <el-table
+    class="jn_table"
+    header-cell-class-name="jn_table_header"
+    ref="jnTableRef"
+    :row-key="rowKey"
+    :data="data"
+    border
+    :scrollbar-always-on="scrollbar"
+    :height="finalHeight"
+  >
+    <el-table-column v-if="showIndexColumn" label="序号" type="index" align="center" width="60">
+      <template #default="{ $index }">
+        <span>{{ getIndex($index) }}</span>
+      </template>
+    </el-table-column>
+    <slot></slot>
+    <el-table-column
+      v-if="showSelectionColumn"
+      type="selection"
+      width="60"
+      align="center"
+      fixed="right"
+      :reserve-selection="true"
+    />
+  </el-table>
+</template>
+
+<style lang="scss" scoped>
+.jn_table {
+  width: 100%;
+
+  :deep(.jn_table_header) {
+    color: var(--jnrs-font-primary) !important;
+    background: var(--jnrs-background-head) !important;
+
+    .cell {
+      padding: 0 8px;
+      line-height: 1.2em;
+    }
+  }
+}
+</style>

package/jnrs-template-vue/src/composables/{common → base}/useAvatar.ts

@@ -1,6 +1,6 @@
 import { ref, toRefs, watch } from 'vue'
 // import { getImgSrc } from '@/utils/common'
-// import { useCommonStore } from '@/stores'
+// import { useCommonStore } from '@jnrs/vue-core/pinia'
 // import imgFailed from '@/assets/img/common/404.png'
 import defaultAvatar from '@/assets/images/common/avatar.png'
 

package/jnrs-template-vue/src/composables/{useForm.ts → common/useForm.ts}

@@ -2,7 +2,7 @@
  * @Author : TanRui
  * @WeChat : Tan578853789
  * @File   : useForm.ts
- * @Date   : 2025/09/30
+ * @Date   : 2025/11/30
  * @Desc.  : 表单通用逻辑
  */
 

package/jnrs-template-vue/src/composables/{useModal.ts → common/useModal.ts}

@@ -2,7 +2,7 @@
  * @Author : TanRui
  * @WeChat : Tan578853789
  * @File   : useModal.ts
- * @Date   : 2025/09/30
+ * @Date   : 2025/11/30
  * @Desc.  : 弹窗控制逻辑
  */
 

package/jnrs-template-vue/src/composables/{useTable.ts → common/usePagination.ts}

@@ -2,7 +2,7 @@
  * @Author : TanRui
  * @WeChat : Tan578853789
  * @File   : useTable.ts
- * @Date   : 2025/09/30
+ * @Date   : 2025/11/30
  * @Desc.  : 表格、分页、筛选等通用逻辑
  */
 

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

@@ -0,0 +1,35 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useTable.ts
+ * @Date   : 2025/11/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 → common/useUser.ts}

@@ -2,7 +2,7 @@
  * @Author : TanRui
  * @WeChat : Tan578853789
  * @File   : useUser.ts
- * @Date   : 2025/09/30
+ * @Date   : 2025/11/30
  * @Desc.  : 用户相关逻辑
  */
 

package/jnrs-template-vue/src/composables/tools/useReactivityTableHeight.ts

@@ -0,0 +1,63 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useReactivityTableHeight.ts
+ * @Date   : 2025/12/10
+ * @Desc.  : 响应式根据视口动态计算表格高度
+ */
+
+import { ref, onActivated, onDeactivated } from 'vue'
+import { debounce } from '@jnrs/shared/lodash'
+
+// 总底部高度
+const PADDING_HEIGHT = 40
+
+// 总边距
+const FOOT_HEIGHT = 40
+
+export interface UseReactivityTableHeightOptions {
+  // 表格类名，默认值 el-table
+  className?: string
+  // 默认高度，默认值 300
+  bottomGap?: number
+}
+
+/**
+ * @param  className 表格类名，默认值 el-table，如果页面存在多个表格，则必须分别传入自定义类名
+ * @param  bottomGap 底部间隔，默认值 77
+ * @return maxHeight 表格高度
+ */
+export function useReactivityTableHeight({
+  className = 'el-table',
+  bottomGap = PADDING_HEIGHT + FOOT_HEIGHT
+}: UseReactivityTableHeightOptions = {}) {
+  const maxHeight = ref(500)
+
+  const calculateTableHeight = debounce(
+    () => {
+      const element = document.querySelector(`.${className}`)
+      if (element) {
+        const rect = element.getBoundingClientRect()
+        const innerHeight = window.innerHeight
+        const gap = rect.top + bottomGap
+        const mh = innerHeight - gap
+        maxHeight.value = mh > 100 ? mh : 100
+      }
+    },
+    300,
+    { leading: false }
+  )
+
+  // 初始化高度计算
+  onActivated(() => {
+    calculateTableHeight()
+    window.addEventListener('resize', calculateTableHeight)
+  })
+
+  // 清理事件监听器
+  onDeactivated(() => {
+    window.removeEventListener('resize', calculateTableHeight)
+  })
+
+  return { maxHeight }
+}

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

@@ -2,7 +2,7 @@
 import SideMenuItem from './SideMenuItem.vue'
 import { storeToRefs } from 'pinia'
 import { useRoute } from '@jnrs/vue-core/router'
-import { useSystemStore, useMenuStore } from '@/stores'
+import { useSystemStore, useMenuStore } from '@jnrs/vue-core/pinia'
 
 const systemStore = useSystemStore()
 const { menuCollapse } = storeToRefs(systemStore)

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSystemStore } from '@/stores'
+import { useSystemStore } from '@jnrs/vue-core/pinia'
 import type { MenuItem } from '@jnrs/vue-core'
 
 defineProps<{

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

@@ -4,10 +4,10 @@ import { ref, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElMessageBox } from 'element-plus'
 import { handleRouter } from '@jnrs/vue-core/router'
-import { useSystemStore, useAuthStore, useMenuStore } from '@/stores'
-import { useAvatar } from '@/composables/common/useAvatar'
+import { useSystemStore, useAuthStore, useMenuStore } from '@jnrs/vue-core/pinia'
+import { useAvatar } from '@/composables/base/useAvatar'
 import { LogoutApi } from '@/api/system'
-import { getDictLabel, getDictColor } from '@/utils/common'
+import { getDictLabel, getDictColor } from '@/utils/packages'
 
 const { avatar } = useAvatar()
 const { userInfo, clearAuth } = useAuthStore()