create-jnrs-template-vue 1.1.14 → 1.1.15

package/bin/create.mjs

@@ -1,7 +1,7 @@
 import { fileURLToPath } from 'url'
 import { dirname, join, relative } from 'path'
 import { promises as fs, existsSync } from 'fs'
-import { execSync, spawnSync } from 'child_process'
+import { execSync } from 'child_process'
 import minimist from 'minimist'
 import prompts from 'prompts'
 
@@ -9,18 +9,21 @@ const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
 // 检测系统中可用的包管理器
-function detectPackageManager() {
+function detectAvailablePackageManagers() {
+  const available = []
   try {
-    const pnpmVersion = spawnSync('pnpm', ['--version'], { stdio: 'ignore' })
-    if (pnpmVersion.status === 0) return 'pnpm'
+    execSync('pnpm --version', { stdio: 'ignore' })
+    available.push('pnpm')
   } catch {}
-
   try {
-    const yarnVersion = spawnSync('yarn', ['--version'], { stdio: 'ignore' })
-    if (yarnVersion.status === 0) return 'yarn'
+    execSync('yarn --version', { stdio: 'ignore' })
+    available.push('yarn')
   } catch {}
-
-  return 'npm'
+  try {
+    execSync('npm --version', { stdio: 'ignore' })
+    available.push('npm')
+  } catch {}
+  return available.length ? available : ['npm']
 }
 
 function getInstallCommand(packageManager) {
@@ -35,13 +38,14 @@ function getInstallCommand(packageManager) {
 }
 
 function getRunCommand(packageManager, script) {
+  if (!packageManager || packageManager === 'skip') return `npm run ${script}` // fallback for skip
   switch (packageManager) {
     case 'pnpm':
-      return `${packageManager} ${script}`
-    case 'npm':
-      return `${packageManager} run ${script}`
+      return `pnpm ${script}`
     case 'yarn':
       return `yarn ${script}`
+    case 'npm':
+      return `npm run ${script}`
     default:
       return `npm run ${script}`
   }
@@ -64,7 +68,6 @@ async function main() {
   const argv = minimist(process.argv.slice(2), { string: ['_'] })
   let targetDir = argv._[0]
 
-  // 交互式输入项目名
   if (!targetDir) {
     const { name } = await prompts({
       type: 'text',
@@ -83,14 +86,12 @@ async function main() {
     if (!name) process.exit(1)
     targetDir = name
   } else {
-    // 非交互模式：校验包名和目录
     if (!isValidPackageName(targetDir)) {
       console.error('❌ 无效的项目名称:', targetDir)
       console.error('   包名称必须有效（小写、无空格等）')
       process.exit(1)
     }
     if (existsSync(join(process.cwd(), targetDir))) {
-      // ✅ 同步检查
       console.error(`❌ 目录 "${targetDir}" 已存在！`)
       process.exit(1)
     }
@@ -108,23 +109,39 @@ async function main() {
   pkg.name = toValidPackageName(targetDir)
   await fs.writeFile(pkgPath, JSON.stringify(pkg, null, 2))
 
-  // 安装依赖
-  const packageManager = detectPackageManager()
-  console.log(`\n📦 检测到包管理器: ${packageManager}`)
-  console.log(`准备通过 ${packageManager} 安装依赖项中...\n`)
-
-  const [cmd, ...args] = getInstallCommand(packageManager)
-  try {
-    execSync(`${cmd} ${args.join(' ')}`, {
-      cwd: root,
-      stdio: 'inherit',
-      env: { ...process.env, FORCE_COLOR: '1' }
-    })
-  } catch (e) {
-    console.error(
-      `\n⚠️ 安装依赖项失败。请手动运行:\n   cd ${relative(process.cwd(), root)} && ${cmd} ${args.join(' ')}`
-    )
-    process.exit(1)
+  // 检测可用包管理器
+  const availablePMs = detectAvailablePackageManagers()
+
+  // 构建选择项：可用包管理器 + 跳过选项
+  const pmChoices = [...availablePMs.map((pm) => ({ title: pm, value: pm })), { title: '跳过安装依赖', value: 'skip' }]
+
+  const { selected } = await prompts({
+    type: 'select',
+    name: 'selected',
+    message: '请选择包管理器来安装依赖:',
+    choices: pmChoices,
+    initial: 0
+  })
+
+  if (!selected) process.exit(1)
+
+  let packageManager = 'npm' // 默认用于生成 dev 命令
+  if (selected !== 'skip') {
+    packageManager = selected
+    console.log(`\n📦 使用 ${packageManager} 安装依赖项中...\n`)
+    const [cmd, ...args] = getInstallCommand(packageManager)
+    try {
+      execSync(`${cmd} ${args.join(' ')}`, {
+        cwd: root,
+        stdio: 'inherit',
+        env: { ...process.env, FORCE_COLOR: '1' }
+      })
+    } catch (e) {
+      console.error(
+        `\n⚠️ 安装依赖失败。请手动运行:\n   cd ${relative(process.cwd(), root)} && ${cmd} ${args.join(' ')}`
+      )
+      process.exit(1)
+    }
   }
 
   // 成功提示
@@ -133,6 +150,12 @@ async function main() {
 
   console.log(`\n✅ 项目创建成功! 👌`)
   console.log(`\n👉 cd ${relativePath}`)
+  if (selected === 'skip') {
+    const fallbackPM = availablePMs[0] || 'npm'
+    const [cmd, ...args] = getInstallCommand(fallbackPM)
+    console.log(`   #👉 手动安装依赖:`)
+    console.log(`   ${cmd} ${args.join(' ')}`)
+  }
   console.log(`   ${devCmd}\n`)
 }
 

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

@@ -6,6 +6,8 @@
 // biome-ignore lint: disable
 export {}
 declare global {
+  const ElButton: typeof import('element-plus/es').ElButton
   const ElMessage: typeof import('element-plus/es').ElMessage
   const ElMessageBox: typeof import('element-plus/es').ElMessageBox
+  const ElSwitch: typeof import('element-plus/es').ElSwitch
 }

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

@@ -20,6 +20,7 @@ declare module 'vue' {
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDatePickerPanel: typeof import('element-plus/es')['ElDatePickerPanel']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
@@ -34,7 +35,6 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    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.14",
+  "version": "1.1.15",
   "description": "JNRS 信息化管理系统模板",
   "author": "Talia-Tan",
   "private": true,
@@ -19,9 +19,9 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@jnrs/core": "1.1.6",
-    "@jnrs/shared": "1.1.6",
-    "@jnrs/vue-core": "1.1.6",
+    "@jnrs/core": "1.1.7",
+    "@jnrs/shared": "1.1.7",
+    "@jnrs/vue-core": "1.1.7",
     "@vueuse/core": "^14.1.0",
     "element-plus": "^2.11.9",
     "pinia": "^3.0.4",

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

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

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

@@ -1,5 +1,5 @@
+import type { Document } from '@/types'
 import { request } from '@jnrs/vue-core'
-import type { ApiResponse } from '@/types'
 
 /**
  * 404 错误
@@ -23,37 +23,21 @@ export const NoAuth = (showErrorMsg: boolean) => {
   })
 }
 
+interface DetailsParams {
+  attachmentDocument: Document
+  imageDocument: Document
+}
+
 /**
  * 数据详情
  */
-export const DetailsApi = (): Promise<ApiResponse> => {
+export const DetailsApi = (): Promise<DetailsParams> => {
   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[]
-}
-
 /**
  * 项目项
  */
@@ -64,9 +48,9 @@ export interface ProjectItem {
   code: string
   name: string
   description: string
-  type: '敏捷型' | '瀑布型' | '混合型'
+  projectType?: '敏捷型' | '瀑布型' | '混合型'
   manager: string
-  budget: string
+  budget: number
   plannedStartDate: string
   plannedFinishDate: string
   progress: string
@@ -75,6 +59,37 @@ export interface ProjectItem {
   attachmentDocument?: Document // 普通文件类附件
 }
 
+/**
+ * 新增项目项
+ */
+type AddProjectOmitKeys =
+  | 'id'
+  | 'programCode'
+  | 'code'
+  | 'manager'
+  | 'plannedFinishDate'
+  | 'progress'
+  | 'status'
+  | 'imageDocument'
+  | 'attachmentDocument'
+
+export type AddProjectItem = Omit<ProjectItem, AddProjectOmitKeys> & {
+  id?: string
+  newAttachmentFile: []
+  newImageFiles: []
+}
+
+/**
+ * 表单新增
+ */
+export const DemosFormApi = (data: FormData) => {
+  return request({
+    url: '/mock/demos/save',
+    method: 'post',
+    data
+  })
+}
+
 /**
  * 数据详情
  */

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

@@ -16,10 +16,12 @@ interface LoginParams {
   account: string
   password: string
 }
+
 export interface LoginResult extends User {
   token: string
   dict: Dict
 }
+
 export const LoginApi = (data: LoginParams): Promise<LoginResult> => {
   return request({
     url: '/api/auth/login',
@@ -50,6 +52,7 @@ interface PasswordChange {
   userId: number
   password: string
 }
+
 export const PasswordChangeApi = (data: PasswordChange) => {
   return request({
     url: '/api/auth/change-password',

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

@@ -1,58 +1,135 @@
-<script setup lang="ts">
-import { ref, onBeforeUnmount } from 'vue'
+<script lang="ts" setup>
+import type { FileItem } from '@jnrs/shared'
+import type { Attachment } from '@/types'
+import { ref, watch, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
+import { blobToUrl } from '@jnrs/shared'
+import { debounce } from '@jnrs/shared/lodash'
 import { FileApi } from '@/api/common'
 
-// 响应式数据
-const squareUrl = ref<string>('')
+import { JnImageView } from '@jnrs/vue-core/components'
 
-let currentObjectUrl: string | null = null
+interface Props {
+  /**
+   * 要加载的文件列表 ｜ 文件名唯一标识 uniqueFileName
+   */
+  loadKeys: Attachment[] | string | undefined
+}
 
-// 加载图片
-async function loadImage() {
-  try {
-    const blob = await FileApi('20251216134412632-1376c8a7-1f31-451c-9eb4-944aaa03497b.png')
+const { loadKeys } = defineProps<Props>()
 
-    // 创建 URL 并保存引用
-    currentObjectUrl = URL.createObjectURL(blob)
-    squareUrl.value = currentObjectUrl
-  } catch (error) {
-    console.error('加载头像失败:', error)
-  }
+// 第一张显示的图片
+const posterUrl = ref('')
+
+// 存储每个 URL 对应的 URL 对象
+const fileList = ref<FileItem[]>([])
+
+// 存储每个 URL 对应的 revoke 函数用于副作用清理
+const revokeFns = ref<(() => void)[]>([])
+
+// 清理当前所有 Object URL
+const clearUrls = () => {
+  revokeFns.value.forEach((revoke) => revoke())
+  revokeFns.value = []
+  fileList.value = []
+  posterUrl.value = ''
 }
 
-// 图片加载成功 → 立即释放内存（浏览器已缓存图像）
-function handleImageLoad() {
-  if (currentObjectUrl) {
-    URL.revokeObjectURL(currentObjectUrl)
-    currentObjectUrl = null
-    console.log('✅ 头像加载完成，已释放 Blob URL')
+// 加载文件
+const loadFilesRaw = async (keys: Props['loadKeys']) => {
+  clearUrls()
+
+  if (!keys) {
+    return
   }
-}
 
-// 图片加载失败 → 也释放内存
-function handleImageError() {
-  if (currentObjectUrl) {
-    URL.revokeObjectURL(currentObjectUrl)
-    currentObjectUrl = null
-    console.error('❌ 头像加载失败')
+  // 如果是字符串
+  if (typeof keys === 'string') {
+    try {
+      const blob = await FileApi(keys)
+      const { url, revoke } = blobToUrl(blob)
+      fileList.value = [{ src: url, fileName: keys }]
+      revokeFns.value = [revoke]
+      posterUrl.value = url
+    } catch (err) {
+      fileList.value = []
+      revokeFns.value = []
+      posterUrl.value = keys
+      console.warn('ImageView 组件异常', err)
+    }
+    return
   }
-}
 
-// 组件卸载前 → 确保清理（防止用户快速跳转导致未加载完）
-onBeforeUnmount(() => {
-  if (currentObjectUrl) {
-    URL.revokeObjectURL(currentObjectUrl)
-    currentObjectUrl = null
-    console.log('🧹 组件卸载，强制释放 Blob URL')
+  // 如果是对象
+  if (keys !== null && typeof keys === 'object' && !Array.isArray(keys)) {
+    const { uniqueFileName, fileName } = keys
+    if (!uniqueFileName) {
+      return
+    }
+    try {
+      const blob = await FileApi(uniqueFileName)
+      const { url, revoke } = blobToUrl(blob)
+
+      fileList.value = [{ src: url, fileName: fileName || uniqueFileName }]
+      revokeFns.value = [revoke]
+      posterUrl.value = url
+    } catch (err) {
+      fileList.value = []
+      revokeFns.value = []
+      posterUrl.value = uniqueFileName
+      console.warn('ImageView 组件异常', err)
+    }
+    return
   }
+
+  // 如果是数组
+  if (Array.isArray(keys) && keys.length > 0) {
+    const res = await Promise.all(
+      keys.map(async ({ uniqueFileName, fileName }) => {
+        if (!uniqueFileName) {
+          return { url: '', fileName: '', revoke: () => {} }
+        }
+        try {
+          const blob = await FileApi(uniqueFileName)
+          const { url, revoke } = blobToUrl(blob)
+          return { url, fileName, revoke }
+        } catch (err) {
+          console.warn('ImageView 组件异常', err)
+          return { url: uniqueFileName, fileName: '', revoke: () => {} }
+        }
+      })
+    )
+    fileList.value = res.map(({ url, fileName }) => ({ src: url, fileName }))
+    revokeFns.value = res.map((d) => d.revoke)
+    // 数组情况下默认显示第一张可用的图片
+    posterUrl.value = fileList.value.find((d) => d.fileName)?.src || ''
+  }
+}
+
+const loadFiles = debounce(loadFilesRaw, 300)
+
+watch(
+  () => loadKeys,
+  (nv) => {
+    loadFiles(nv)
+  },
+  { deep: true, immediate: true }
+)
+
+onActivated(() => {
+  loadFiles(loadKeys)
+})
+
+// 副作用清理
+onDeactivated(() => {
+  clearUrls()
 })
 
-// 启动加载
-loadImage()
+// 副作用清理
+onBeforeUnmount(() => {
+  clearUrls()
+})
 </script>
 
 <template>
-  <el-avatar v-if="squareUrl" shape="square" :src="squareUrl" @load="handleImageLoad" @error="handleImageError" />
-  <!-- 可选：加载中状态 -->
-  <div v-else>加载中...</div>
+  <jn-image-view :src="posterUrl" :previewSrcList="fileList"></jn-image-view>
 </template>