create-jnrs-template-vue 1.2.1 → 1.2.2

package/bin/create.mjs

@@ -38,7 +38,7 @@ function getInstallCommand(packageManager) {
 }
 
 function getRunCommand(packageManager, script) {
-  if (!packageManager || packageManager === 'skip') return `npm run ${script}` // fallback for skip
+  if (!packageManager || packageManager === 'skip') return `pnpm ${script}` // fallback for skip
   switch (packageManager) {
     case 'pnpm':
       return `pnpm ${script}`
@@ -125,7 +125,7 @@ async function main() {
 
   if (!selected) process.exit(1)
 
-  let packageManager = 'npm' // 默认用于生成 dev 命令
+  let packageManager = 'pnpm' // 默认用于生成 dev 命令
   if (selected !== 'skip') {
     packageManager = selected
     console.log(`\n📦 使用 ${packageManager} 安装依赖项中...\n`)
@@ -153,7 +153,7 @@ async function main() {
   if (selected === 'skip') {
     const fallbackPM = availablePMs[0] || 'npm'
     const [cmd, ...args] = getInstallCommand(fallbackPM)
-    console.log(`   #👉 手动安装依赖:`)
+    console.log(`\n👉 手动安装依赖:`)
     console.log(`   ${cmd} ${args.join(' ')}`)
   }
   console.log(`   ${devCmd}\n`)

package/jnrs-template-vue/auto-imports.d.ts

@@ -7,7 +7,11 @@
 export {}
 declare global {
   const ElButton: typeof import('element-plus/es').ElButton
+  const ElCheckbox: typeof import('element-plus/es').ElCheckbox
   const ElMessage: typeof import('element-plus/es').ElMessage
   const ElMessageBox: typeof import('element-plus/es').ElMessageBox
+  const ElOption: typeof import('element-plus/es').ElOption
   const ElSwitch: typeof import('element-plus/es').ElSwitch
+  const ElTableColumn: typeof import('element-plus/es').ElTableColumn
+  const vLoading: typeof import('element-plus/es').ElLoadingDirective
 }

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

@@ -33,7 +33,6 @@ 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']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']

package/jnrs-template-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jnrs-template-vue",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "JNRS 信息化管理系统模板",
   "author": "Talia-Tan",
   "private": true,
@@ -21,7 +21,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "@jnrs/core": "1.1.7",
     "@jnrs/shared": "1.1.7",
-    "@jnrs/vue-core": "1.2.1",
+    "@jnrs/vue-core": "1.2.2",
     "@vueuse/core": "^14.1.0",
     "element-plus": "^2.11.9",
     "pinia": "^3.0.4",

package/jnrs-template-vue/public/system/menu.json

@@ -15,7 +15,7 @@
           "path": "/unitTest",
           "name": "UnitTest",
           "meta": {
-            "title": "测试页面",
+            "title": "功能测试页面",
             "todoCount": 8
           },
           "component": "/demos/unitTest/index"

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

@@ -1,4 +1,4 @@
-import type { Document } from '@/types'
+import type { Pagination, PageTableData, FileContainer } from '@/types'
 import { request } from '@jnrs/vue-core'
 
 /**
@@ -23,15 +23,10 @@ export const NoAuth = (showErrorMsg: boolean) => {
   })
 }
 
-interface DetailsParams {
-  attachmentDocument: Document
-  imageDocument: Document
-}
-
 /**
  * 数据详情
  */
-export const DetailsApi = (): Promise<DetailsParams> => {
+export const DetailsApi = (): Promise<FileContainer> => {
   return request({
     url: '/details',
     method: 'get'
@@ -41,7 +36,7 @@ export const DetailsApi = (): Promise<DetailsParams> => {
 /**
  * 项目项
  */
-export interface ProjectItem {
+export interface ProjectItem extends FileContainer {
   id: string
   programCode: string
   program: string
@@ -55,8 +50,6 @@ export interface ProjectItem {
   plannedFinishDate: string
   progress: string
   status: '进行中' | '已完成' | '未开始' | '已暂停'
-  imageDocument?: Document // 图片类附件
-  attachmentDocument?: Document // 普通文件类附件
 }
 
 /**
@@ -75,10 +68,17 @@ type AddProjectOmitKeys =
 
 export type AddProjectItem = Omit<ProjectItem, AddProjectOmitKeys> & {
   id?: string
+  managerId?: Record<string, unknown>
   newAttachmentFile: []
   newImageFiles: []
 }
 
+export interface ProjectQuery extends Pagination {
+  code?: string
+  projectType?: '敏捷型' | '瀑布型' | '混合型'
+  manager?: string
+}
+
 /**
  * 表单新增
  */
@@ -93,9 +93,10 @@ export const DemosFormApi = (data: FormData) => {
 /**
  * 数据详情
  */
-export const DemosTableApi = (): Promise<ProjectItem[]> => {
+export const DemosTableApi = (query: ProjectQuery): Promise<PageTableData<ProjectItem>> => {
   return request({
     url: '/mock/demos/table',
-    method: 'get'
+    method: 'get',
+    data: query
   })
 }

package/jnrs-template-vue/src/assets/styles/common.scss

@@ -1,3 +1,7 @@
+/*
+ * 业务功能通用样式表
+ */
+
 .topBarBtn {
   position: relative;
   margin: 0 8px;

package/jnrs-template-vue/src/assets/styles/fonts.scss

@@ -1,4 +1,7 @@
-/* font */
+/*
+ * 字体样式表
+ */
+
 @font-face {
   font-family: 'Alibaba-PuHuiTi-Regular';
   src: url('@/assets/fonts/AlibabaPuHuiTi-Regular.woff2');

package/jnrs-template-vue/src/assets/styles/{main.scss → index.scss}

@@ -2,6 +2,7 @@
 @use './fonts.scss';
 @use './root.scss';
 @use './common.scss';
+@use './animation.scss';
 
 body {
   width: 100vw;

package/jnrs-template-vue/src/assets/styles/init.scss

@@ -1,3 +1,7 @@
+/*
+ * 初始化重置样式表
+ */
+
 *,
 *::before,
 *::after {
@@ -10,19 +14,6 @@ a {
   text-decoration: none;
 }
 
-/* 所有自动填充 input */
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active,
-input:autofill,
-input:-webkit-autofill-strong-password,
-input:-webkit-autofill-strong-password-viewable,
-input:-webkit-autofill-and-obscured {
-  -webkit-box-shadow: 0 0 0 1000px rgba(255, 0, 0, 0) inset !important;
-  background-color: rgb(255, 0, 0) !important;
-}
-
 /*
  * 禁止拖拽图片
  * 禁止长按弹出菜单

package/jnrs-template-vue/src/assets/styles/root.scss

@@ -2,9 +2,6 @@
   // Layout 头部高度
   --jnrs-head-height: 50px;
   --jnrs-routerTabs-height: 30px;
-
-  // // element-ui 样式
-  // --el-menu-base-level-padding: 8px !important;
 }
 
 .el-button--primary {

package/jnrs-template-vue/src/components/common/{JnDictTag.vue → DictTag.vue}

@@ -1,7 +1,7 @@
 <!--
  @Author : TanRui
  @WeChat : Tan578853789
- @File   : JnDictTag.vue
+ @File   : DictTag.vue
  @Date   : 2025/12/25
  @Desc.  : 带颜色的字典标签
  -->

package/jnrs-template-vue/src/components/{base → common}/PdfView.vue

@@ -69,7 +69,7 @@ const loadFiles = async (keys: Props['loadKeys']) => {
           return { url, fileName, revoke }
         } catch (err) {
           console.warn(uniqueFileName, err)
-          return { url: '', fileName: '', revoke: () => {} }
+          return { url: '', fileName: fileName || uniqueFileName, revoke: () => {} }
         }
       })
     )
@@ -102,5 +102,5 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <jn-pdf-view :fileList="fileList"></jn-pdf-view>
+  <JnPdfView :fileList="fileList"></JnPdfView>
 </template>

package/jnrs-template-vue/src/components/select/SelectManager.vue

@@ -0,0 +1,20 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : SelectManager.vue
+ @Date   : 2025/12/31
+ @Desc.  : 选择项目经理
+ -->
+
+<script setup lang="ts">
+import { DemosTableApi } from '@/api/demos/index'
+import { JnSelectTemplate } from '@jnrs/vue-core/components'
+</script>
+
+<template>
+  <JnSelectTemplate tableName="项目经理" :keyValue="{ label: 'manager', value: 'managerId' }" :listApi="DemosTableApi">
+    <template #table>
+      <el-table-column prop="manager" label="项目经理" align="center" sortable />
+    </template>
+  </JnSelectTemplate>
+</template>

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

@@ -11,24 +11,24 @@ 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 pageNo = ref(1)
 
   // 分页数据
   const paginatedData = computed(() => {
-    const start = (currentPage.value - 1) * pageSize.value
+    const start = (pageNo.value - 1) * pageSize.value
     return data.value?.slice(start, start + pageSize.value)
   })
 
   // 设置新的数据
   const setNewData = (newData: T[]) => {
     data.value = newData
-    currentPage.value = 1
+    pageNo.value = 1
   }
 
   return {
     data,
     pageSize,
-    currentPage,
+    pageNo,
     paginatedData,
     setNewData
   }

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

@@ -11,24 +11,24 @@ 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 pageNo = ref(1)
 
   // 分页数据
   const paginatedData = computed(() => {
-    const start = (currentPage.value - 1) * pageSize.value
+    const start = (pageNo.value - 1) * pageSize.value
     return data.value?.slice(start, start + pageSize.value)
   })
 
   // 设置新的数据
   const setNewData = (newData: T[]) => {
     data.value = newData
-    currentPage.value = 1
+    pageNo.value = 1
   }
 
   return {
     data,
     pageSize,
-    currentPage,
+    pageNo,
     paginatedData,
     setNewData
   }

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

@@ -0,0 +1,150 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useMouseSelection.ts
+ * @Date   : 2025/04/14
+ * @Desc.  : 鼠标框选表格进行多选、回车执行回调
+ */
+
+import { onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
+
+/**
+ * @param {*} containerClass 表格或容器类名，默认值 el-table，如果页面存在多个表格，则必须分别传入自定义类名
+ * @param {*} rowClass 表格或容器类名，默认值 el-table__row
+ * @param {*} callback 框选后的回调，默认处理的是 input[type='checkbox'] 元素
+ * @returns handleMouseDown
+ * @example <el-table @mousedown="handleMouseDown" @selection-change="handleSelectionChange">
+ */
+export function useMouseSelection({
+  containerClass = 'jn_table',
+  rowClass = 'el-table__row',
+  callback = handleSelection
+} = {}) {
+  let isDragging = false
+  let startPoint = { x: 0, y: 0 }
+  let endPoint = { x: 0, y: 0 }
+
+  onMounted(() => {
+    window.addEventListener('mouseup', handleMouseUp)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('mouseup', handleMouseUp)
+  })
+
+  onActivated(() => {
+    window.addEventListener('mouseup', handleMouseUp)
+  })
+
+  onDeactivated(() => {
+    window.removeEventListener('mouseup', handleMouseUp)
+  })
+
+  // 鼠标按下事件
+  const handleMouseDown = (event: MouseEvent) => {
+    window.addEventListener('mousemove', handleMouseMove)
+    isDragging = false
+    startPoint = { x: event.clientX, y: event.clientY }
+    endPoint = { ...startPoint }
+  }
+
+  // 鼠标移动事件
+  const handleMouseMove = (event: MouseEvent) => {
+    endPoint = { x: event.clientX, y: event.clientY }
+    // 判断是否为拖动
+    if (Math.abs(endPoint.x - startPoint.x) > 5 && Math.abs(endPoint.y - startPoint.y) > 25) {
+      isDragging = true
+    }
+    // 如果没有拖动，则认为是单击
+    if (isDragging) {
+      selectRows()
+    }
+    setFixedRectBoxStyle()
+  }
+
+  // 鼠标抬起事件
+  const handleMouseUp = () => {
+    window.removeEventListener('mousemove', handleMouseMove)
+    // 如果没有拖动，则认为是单击
+    if (isDragging) {
+      isDragging = false
+    }
+    setFixedRectBoxStyle()
+  }
+
+  // 判断选中的行
+  const selectRows = () => {
+    const container = document.querySelector(`.${containerClass}`) as HTMLElement
+    const rows = container?.querySelectorAll(`.${rowClass}`) as NodeListOf<HTMLElement>
+    if (!rows) {
+      return false
+    }
+    rows.forEach((row) => {
+      const rect = row.getBoundingClientRect()
+      const isIntersecting =
+        rect.right > Math.min(startPoint.x, endPoint.x) &&
+        rect.left < Math.max(startPoint.x, endPoint.x) &&
+        rect.bottom > Math.min(startPoint.y, endPoint.y) &&
+        rect.top < Math.max(startPoint.y, endPoint.y)
+      if (isIntersecting && callback) {
+        callback(row)
+      }
+    })
+  }
+
+  // 设置框选框的位置
+  const setFixedRectBoxStyle = () => {
+    const selectionBox = document.querySelector('.useMouseSelection_fixedRectBox') as HTMLElement
+    if (selectionBox) {
+      const left = Math.min(startPoint.x, endPoint.x) + 'px'
+      const top = Math.min(startPoint.y, endPoint.y) + 'px'
+      const width = Math.abs(endPoint.x - startPoint.x) + 'px'
+      const height = Math.abs(endPoint.y - startPoint.y) + 'px'
+      Object.assign(selectionBox.style, {
+        display: isDragging ? 'block' : 'none',
+        left: left,
+        top: top,
+        width: width,
+        height: height
+      })
+
+      const container = document.querySelector(`.${containerClass}`) as HTMLElement
+      Object.assign(container.style, {
+        'user-select': isDragging ? 'none' : 'auto'
+      })
+    }
+  }
+
+  checkAndAddElement()
+
+  return {
+    handleMouseDown
+  }
+}
+
+// 回调选中逻辑
+const handleSelection = (row: HTMLElement) => {
+  const checkbox = row.querySelector("input[type='checkbox']") as HTMLInputElement
+  if (checkbox && !checkbox.checked) {
+    checkbox.click()
+  }
+}
+
+// 往页面上添加框选框元素
+const checkAndAddElement = () => {
+  const fixedRectBox = document.querySelector('.useMouseSelection_fixedRectBox')
+  if (!fixedRectBox) {
+    const newDiv = document.createElement('div')
+    newDiv.className = 'useMouseSelection_fixedRectBox'
+    Object.assign(newDiv.style, {
+      display: 'none',
+      position: 'fixed',
+      'z-index': 100,
+      border: '2px dashed #409eff',
+      'background-color': 'rgba(64, 158, 255, 0.2)',
+      'pointer-events': 'none',
+      'will-change': 'transform'
+    })
+    document.body.appendChild(newDiv)
+  }
+}

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

@@ -68,6 +68,7 @@ $mainFontColor: rgba(255, 255, 255, 0.8);
       font-weight: normal;
       font-family: AlimamaShuHeiTi-Bold;
       white-space: nowrap;
+      letter-spacing: 2px;
       transform: translate(-50%, -50%);
       transition: all 0.3s ease;
       filter: opacity(1);

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

@@ -8,7 +8,7 @@ import { useSystemStore, useAuthStore, useMenuStore } from '@jnrs/vue-core/pinia
 import { LogoutApi } from '@/api/system'
 import { getDictLabel, getDictColor } from '@/utils/packages'
 
-import ImageView from '@/components/base/ImageView.vue'
+import ImageView from '@/components/common/ImageView.vue'
 
 const { userInfo, clearAuth } = useAuthStore()
 const { clearMenu } = useMenuStore()

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

@@ -8,7 +8,7 @@ export default {
     formAccount: 'Please enter your account',
     formPassword: 'Please enter your password',
     formBtn: 'Log In',
-    greeting: 'Welcome to'
+    greeting: 'Welcome'
   },
   layout: {}
 }

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

@@ -1,7 +1,7 @@
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import '@jnrs/shared/styles/theme.scss'
-import '@/assets/styles/main.scss'
+import '@/assets/styles/index.scss'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

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

@@ -1,5 +1,5 @@
 /**
- * 附件（文件）信息
+ * 文件信息
  */
 export interface Attachment {
   /**
@@ -15,7 +15,7 @@ export interface Attachment {
    */
   fileName: string
   /**
-   * 文件名唯一标识
+   * 文件名唯一标识（用于文件获取 API）
    */
   uniqueFileName: string
   /**
@@ -29,10 +29,52 @@ export interface Attachment {
 }
 
 /**
- * 文档容器（用于图片或附件）
+ * 文件容器（用于图片或附件）
  */
 export interface Document {
   id: number
   description: string | null
   attachments: Attachment[]
 }
+
+/**
+ * 图片 & 附件数据
+ */
+export interface FileContainer {
+  /**
+   * 图片
+   */
+  imageDocument?: Document
+  /**
+   * 附件
+   */
+  attachmentDocument?: Document
+}
+
+/**
+ * 分页
+ */
+export interface Pagination {
+  /**
+   * 当前页码
+   */
+  pageNo: number
+  /**
+   * 每页大小
+   */
+  pageSize: number
+}
+
+/**
+ * 分页列表数据
+ */
+export interface PageTableData<T> extends Pagination {
+  /**
+   * 数据列表
+   */
+  list: T[]
+  /**
+   * 数据总数
+   */
+  count: number
+}