create-jnrs-template-vue 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jnrs-template-vue",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "巨能前端工程化开发，Vue 项目模板脚手架",
   "keywords": [
     "vue",

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

@@ -1,433 +0,0 @@
-<!--
- @Author : TanRui
- @WeChat : Tan578853789
- @File   : JnFileUpload.vue
- @Date   : 2025/12/25
- @Desc.  : 通用上传 & 回显组件 上传类型为File类型 二进制
- -->
-
-<script setup lang="ts">
-import type { UploadRawFile, UploadFile, FormInstance } from 'element-plus'
-import type { Attachment } from '@/types'
-import { ElMessage } from 'element-plus'
-import { ref, computed, nextTick } from 'vue'
-import { downloadFile } from '@/utils/packages'
-import iconUnknown from '@/assets/images/fileIcon/iconUnknown.png'
-import iconCode from '@/assets/images/fileIcon/iconCode.png'
-import iconWord from '@/assets/images/fileIcon/iconWord.png'
-import iconWps from '@/assets/images/fileIcon/iconWps.png'
-import iconText from '@/assets/images/fileIcon/iconText.png'
-import iconPpt from '@/assets/images/fileIcon/iconPpt.png'
-import iconPdf from '@/assets/images/fileIcon/iconPdf.png'
-import iconArchive from '@/assets/images/fileIcon/iconArchive.png'
-import iconWindows from '@/assets/images/fileIcon/iconWindows.png'
-import iconMac from '@/assets/images/fileIcon/iconMac.png'
-import iconVideo from '@/assets/images/fileIcon/iconVideo.png'
-import iconAudio from '@/assets/images/fileIcon/iconAudio.png'
-import iconFlash from '@/assets/images/fileIcon/iconFlash.png'
-import iconGif from '@/assets/images/fileIcon/iconGif.png'
-import iconImage from '@/assets/images/fileIcon/iconImage.png'
-import iconFile from '@/assets/images/fileIcon/iconFile.png'
-import iconExcel from '@/assets/images/fileIcon/iconExcel.png'
-import iconOfd from '@/assets/images/fileIcon/iconOfd.png'
-
-type MixedUploadFile = Attachment | UploadRawFile
-
-interface Props {
-  /**
-   * 绑定的模型值（文件列表），默认为空数组
-   */
-  modelValue: MixedUploadFile[]
-
-  /**
-   * 接受的文件类型（如 'image/*'），默认为空字符串
-   */
-  accept?: string
-
-  /**
-   * 是否启用拖拽上传，默认为 false
-   */
-  drag?: boolean
-
-  /**
-   * 单个文件大小限制（单位：MB），默认为 0（不限制）
-   */
-  fileSizeMb?: number
-
-  /**
-   * 最大上传文件数量，0 表示不限制，默认为 0
-   */
-  limit?: number
-
-  /**
-   * Element Plus 组件的尺寸，默认为 'small'
-   */
-  size?: '' | 'small' | 'default' | 'large'
-
-  /**
-   * 父级组件的表单引用（用于触发校验），默认为 null
-   */
-  formRef?: FormInstance
-
-  /**
-   * 父级表单中用于校验的字段名（需配合 formRef 使用），默认为空字符串
-   */
-  validateFieldName?: string
-}
-
-const {
-  modelValue,
-  accept = '',
-  drag = false,
-  fileSizeMb = 100,
-  limit = 0,
-  size = 'small',
-  formRef = null,
-  validateFieldName = ''
-} = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
-
-const loading = ref(false)
-const uploadRef = ref()
-const isDisable = computed(() => {
-  return limit && modelValue && modelValue.length >= limit
-})
-
-const fileSizeFmt = (value: number) => {
-  const units = ['B', 'KB', 'MB', 'GB']
-  let size = value
-  let unitIndex = 0
-
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024
-    unitIndex++
-  }
-
-  const fixedDigits = unitIndex === 0 ? 0 : unitIndex === 1 ? 0 : 1
-  return size.toFixed(fixedDigits) + ' ' + units[unitIndex]
-}
-
-const getAccessoryIcon = (type: string) => {
-  let icon = iconUnknown
-  if (type.includes('code')) {
-    icon = iconCode
-  } else if (type.includes('text')) {
-    icon = iconText
-  } else if (type.includes('wps')) {
-    icon = iconWps
-  } else if (type.includes('word')) {
-    icon = iconWord
-  } else if (type.includes('ppt')) {
-    icon = iconPpt
-  } else if (type.includes('pdf')) {
-    icon = iconPdf
-  } else if (type.includes('archive')) {
-    icon = iconArchive
-  } else if (type.includes('x-msdownload')) {
-    icon = iconWindows
-  } else if (type.includes('x-apple-aspen-config')) {
-    icon = iconMac
-  } else if (type.includes('video')) {
-    icon = iconVideo
-  } else if (type.includes('audio')) {
-    icon = iconAudio
-  } else if (type.includes('flash')) {
-    icon = iconFlash
-  } else if (type.includes('gif')) {
-    icon = iconGif
-  } else if (type.includes('image')) {
-    icon = iconImage
-  } else if (type.includes('file')) {
-    icon = iconFile
-  } else if (type.includes('excel')) {
-    icon = iconExcel
-  } else if (type.includes('ofd')) {
-    icon = iconOfd
-  }
-  return icon
-}
-
-const loadingProgress = () => {
-  loading.value = true
-}
-
-const handleChange = (uploadFile: UploadFile) => {
-  const { status, raw } = uploadFile
-
-  if (status === 'ready' && raw) {
-    // 数量校验
-    if (limit && modelValue && modelValue.length >= limit) {
-      ElMessage({
-        message: `最多只能上传 ${limit} 个文件!`,
-        type: 'warning',
-        grouping: true,
-        duration: 3000
-      })
-      return false
-    }
-
-    // 文件类型校验
-    if (accept && accept.split(',').length > 0) {
-      let flag = false
-      accept.split(',').forEach((element) => {
-        if (raw.name.indexOf(element) > -1) {
-          flag = true
-        }
-      })
-      if (!flag) {
-        ElMessage({
-          message: `上传文件只能是 ${accept} 格式！`,
-          type: 'warning',
-          grouping: true,
-          duration: 3000
-        })
-        return false
-      }
-    }
-
-    // 文件大小校验
-    if (fileSizeMb && raw.size / 1024 / 1024 > fileSizeMb) {
-      ElMessage({
-        message: `上传的文件大小不能超过 ${fileSizeMb} MB!`,
-        type: 'warning',
-        grouping: true,
-        duration: 3000
-      })
-      return false
-    }
-
-    const temp = modelValue
-    temp.push(uploadFile.raw as UploadRawFile)
-    emit('update:modelValue', temp)
-
-    nextTick(() => {
-      if (formRef && validateFieldName) {
-        formRef.validateField(validateFieldName)
-      }
-      uploadRef.value?.clearFiles()
-      loading.value = false
-    })
-  }
-}
-
-const deleteFile = (file: MixedUploadFile) => {
-  const temp = modelValue
-  const index = modelValue.findIndex((item) => {
-    // Attachment 类型
-    if ('id' in file && 'id' in item) {
-      return item.id === file.id
-    }
-    // UploadRawFile 类型
-    if ('uid' in file && 'uid' in item) {
-      return item.uid === file.uid
-    }
-  })
-
-  if (index !== -1) {
-    temp.splice(index, 1)
-  }
-
-  emit('update:modelValue', temp)
-
-  nextTick(() => {
-    if (formRef && validateFieldName) {
-      formRef.validateField(validateFieldName)
-    }
-  })
-}
-</script>
-
-<template>
-  <div class="jnFileUpload">
-    <el-upload
-      ref="uploadRef"
-      :http-request="() => {}"
-      :show-file-list="false"
-      :multiple="true"
-      :drag="drag"
-      :accept="accept"
-      :disabled="isDisable"
-      :on-progress="loadingProgress"
-      :on-change="handleChange"
-    >
-      <el-button type="primary" :size="size" :loading="loading" :disabled="isDisable">
-        上传
-        <span v-if="limit" style="display: inline-block; margin-left: 5px">
-          ({{ modelValue ? modelValue.length : 0 }}/{{ limit }})
-        </span>
-      </el-button>
-    </el-upload>
-
-    <div class="uploadTips" :class="{ uploadTips_isDrag: drag }">
-      <span v-if="accept">
-        文件类型为
-        <b>{{ accept }}</b>
-      </span>
-      <span v-if="accept">
-        文件大小为
-        <b>{{ fileSizeMb }}MB</b>
-        以内
-      </span>
-    </div>
-
-    <div class="fileList" v-show="modelValue && modelValue.length > 0" v-loading="loading">
-      <div class="fileLis_item" v-for="(item, index) in modelValue" :key="index">
-        <!-- Attachment 类型 -->
-        <template v-if="'id' in item">
-          <div class="fileLis_item_left">
-            <span class="fileLis_item_index">{{ index + 1 }}</span>
-            <img class="fileLis_item_icon" v-if="item.fileType" :src="getAccessoryIcon(item.fileType)" />
-            <span class="fileLis_item_name">{{ item.fileName }}</span>
-            <span class="fileLis_item_size">
-              {{ fileSizeFmt(item.fileSize) }}
-            </span>
-          </div>
-          <div class="fileLis_item_right">
-            <span class="fileLis_item_btn" @click="downloadFile(item.uniqueFileName, item.fileName)">
-              <el-icon><Download /></el-icon>
-            </span>
-            <span class="fileLis_item_btn fileLis_item_btn_danger" @click="deleteFile(item)">
-              <el-icon><Delete /></el-icon>
-            </span>
-          </div>
-        </template>
-
-        <!-- UploadRawFile 类型 -->
-        <template v-if="'uid' in item">
-          <div class="fileLis_item_left">
-            <span class="fileLis_item_index">{{ index + 1 }}</span>
-            <img class="fileLis_item_icon" v-if="item.type" :src="getAccessoryIcon(item.type)" />
-            <span class="fileLis_item_name">{{ item.name }}</span>
-            <span class="fileLis_item_size">
-              {{ fileSizeFmt(item.size) }}
-            </span>
-          </div>
-          <div class="fileLis_item_right">
-            <span class="fileLis_item_btn fileLis_item_btn_danger" @click="deleteFile(item)">
-              <el-icon><Delete /></el-icon>
-            </span>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.jnFileUpload {
-  position: relative;
-  width: 100%;
-  color: var(--jnrs-font-primary-06);
-
-  :deep(.el-upload-dragger) {
-    padding: 30px 0 10px;
-  }
-
-  .uploadTips {
-    display: block;
-    width: 100%;
-    margin-top: 5px;
-    line-height: 1.2em;
-    span {
-      display: inline-block;
-      margin-right: 10px;
-    }
-    b {
-      color: var(--el-color-danger, #ff3300);
-    }
-  }
-
-  .uploadTips_isDrag {
-    position: absolute;
-    top: 4px;
-    left: 0;
-    text-align: center;
-  }
-
-  .fileList {
-    width: 100%;
-
-    .fileLis_item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      margin-top: 8px;
-      padding: 5px 0;
-      border: 1px solid var(--jnrs-font-primary-03);
-      background: var(--jnrs-background-primary);
-
-      .fileLis_item_left {
-        flex: 1;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        padding-right: 50px;
-        line-height: 1.1em;
-      }
-
-      .fileLis_item_right {
-        flex-shrink: 0;
-        width: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: 4px;
-      }
-
-      .fileLis_item_index {
-        flex-shrink: 0;
-        width: 20px;
-        height: 20px;
-        line-height: 20px;
-        text-align: center;
-      }
-
-      .fileLis_item_icon {
-        flex-shrink: 0;
-        width: 20px;
-        height: 20px;
-      }
-
-      .fileLis_item_name {
-        padding: 0 4px;
-        word-break: break-all;
-      }
-
-      .fileLis_item_size {
-        position: absolute;
-        right: 0;
-        width: 50px;
-        color: #999;
-        white-space: nowrap;
-        text-align: right;
-      }
-
-      .fileLis_item_btn {
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        margin: 0 2px;
-        border-radius: 3px;
-        font-size: 16px;
-        color: var(--el-color-primary, #5887f7);
-        transition: all 0.3s ease;
-        cursor: pointer;
-
-        &:hover {
-          background-color: var(--jnrs-card-primary);
-        }
-      }
-
-      .fileLis_item_btn_danger {
-        color: var(--el-color-danger, #ff3300);
-      }
-    }
-  }
-}
-</style>

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

@@ -1,37 +0,0 @@
-<!--
- @Author : TanRui
- @WeChat : Tan578853789
- @File   : JnDatetime.vue
- @Date   : 2025/12/25
- @desc.  : 显示时间格式化，第一行是日期，第二行是时间
- -->
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  value: string
-  color?: string
-}
-const { value = '', color = '' } = defineProps<Props>()
-
-const datetime = computed(() => {
-  if (value && value.split('T').length === 2) {
-    return value.split('T')
-  }
-  if (value && value.split(' ').length === 2) {
-    return value.split(' ')
-  }
-  return false
-})
-</script>
-
-<template>
-  <template v-if="datetime">
-    <div style="line-height: 1.2em" :style="{ color: color }">
-      <div>{{ datetime[0] }}</div>
-      <span style="opacity: 0.7; font-size: 0.9em">{{ datetime[1] }}</span>
-    </div>
-  </template>
-  <span v-else>{{ value }}</span>
-</template>

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

@@ -1,68 +0,0 @@
-<!--
- @Author : TanRui
- @WeChat : Tan578853789
- @File   : JnEdit.vue
- @Date   : 2025/12/25
- @Desc.  : 表格编辑组件
- -->
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-interface Props {
-  /**
-   * 对话框的宽度，默认值为 50%
-   */
-  title?: string
-  /**
-   * 对话框的宽度，默认值为 50%
-   */
-  width?: string | number
-}
-
-const { width = '50%', title = '' } = defineProps<Props>()
-
-const emit = defineEmits<{
-  closed: []
-}>()
-
-const dialogVisible = ref(false)
-
-const open = () => {
-  dialogVisible.value = true
-}
-
-const close = () => {
-  dialogVisible.value = false
-}
-
-const handleClosed = () => {
-  emit('closed')
-}
-
-defineExpose({
-  open,
-  close,
-  handleClosed
-})
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="title"
-    :width="width"
-    :close-on-click-modal="true"
-    :close-on-press-escape="true"
-    draggable
-    overflow
-    @closed="handleClosed"
-  >
-    <slot></slot>
-    <template #footer>
-      <slot name="footer"></slot>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped></style>

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

@@ -1,83 +0,0 @@
-<!--
- @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>