create-jnrs-vue 1.2.11

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

@@ -0,0 +1,90 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : CardTable.vue
+ @Date   : 2026/01/06
+ @Desc.  : 卡片数据表格组件
+ -->
+
+<script setup lang="ts">
+import type { Pagination, PageTableData } from '@/types'
+import { ref, onActivated } from 'vue'
+import { JnPagination, JnTable } from '@jnrs/vue-core/components'
+import { debounce } from '@jnrs/shared/lodash'
+
+interface Props {
+  /**
+   * 获取数据表格 api 函数
+   */
+  // eslint-disable-next-line
+  getTableDataApi?: (data?: Pagination) => Promise<PageTableData<any>>
+}
+
+const { getTableDataApi } = defineProps<Props>()
+
+const loading = ref(false)
+const tableData = ref()
+const total = ref(0)
+const pagination = ref<Pagination>({ pageNo: 1, pageSize: 20 })
+
+const getTable = debounce(async () => {
+  if (!getTableDataApi) {
+    return false
+  }
+  loading.value = true
+  try {
+    const res = await getTableDataApi(pagination.value)
+    tableData.value =
+      res.list?.map((item) => ({
+        ...item,
+        newImageFiles: item.imageDocument?.attachments,
+        newAttachmentFile: item.attachmentDocument?.attachments
+      })) || []
+    total.value = res.count
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}, 300)
+
+onActivated(() => {
+  getTable()
+})
+
+defineExpose({
+  getTable
+})
+</script>
+
+<template>
+  <el-card class="cardTable" v-loading="loading">
+    <template #header>
+      <div class="cardTable_header">
+        <slot name="header"></slot>
+      </div>
+    </template>
+
+    <JnTable
+      :data="tableData"
+      :pagination="pagination"
+      :autoHeight="true"
+      :showScrollbar="true"
+      :showIndexColumn="true"
+    >
+      <slot name="table"></slot>
+    </JnTable>
+
+    <JnPagination :total="total" v-model="pagination" @change="getTable" />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.cardTable {
+  .cardTable_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,74 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : DictTag.vue
+ @Date   : 2025/12/25
+ @Desc.  : 带颜色的字典标签
+ -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getDictLabel, getDictColor } from '@/utils/packages'
+
+interface Props {
+  dictName: string
+  value: string | number
+  /**
+   * 是否使用颜色
+   */
+  showColor?: boolean
+  /**
+   * 是否使用 popover
+   */
+  popover?: string
+  /**
+   * 消息放置位置
+   */
+  placement?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'
+}
+
+const { dictName = '', value = '', showColor = true, popover = '' } = defineProps<Props>()
+
+const computedColor = computed(() => {
+  return showColor ? getDictColor(dictName, value) : 'unset'
+})
+</script>
+
+<template>
+  <el-popover :content="popover" placement="top" :disabled="!popover">
+    <template #reference>
+      <span
+        class="dictTag"
+        :style="{
+          backgroundColor: computedColor
+        }"
+      >
+        <span
+          :class="{ dictTag_label_showColor: showColor }"
+          :style="{
+            color: computedColor
+          }"
+        >
+          {{ getDictLabel(dictName, value) }}
+        </span>
+      </span>
+    </template>
+  </el-popover>
+</template>
+
+<style lang="scss" scoped>
+.dictTag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  transform: scale(0.8);
+
+  .dictTag_label_showColor {
+    font-size: 1.1em;
+    filter: invert(0.5) brightness(0.5);
+  }
+}
+</style>

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

@@ -0,0 +1,144 @@
+<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'
+
+import { JnImageView } from '@jnrs/vue-core/components'
+
+interface Props {
+  /**
+   * 要加载的文件列表 ｜ 文件名唯一标识 uniqueFileName
+   */
+  loadKeys: Attachment[] | string | undefined
+
+  /**
+   * 是否清理文件副作用
+   */
+  clearSideEffects?: boolean
+}
+
+const { loadKeys, clearSideEffects = false } = defineProps<Props>()
+
+// 第一张显示的图片
+const posterUrl = ref('')
+
+// 存储每个 URL 对应的 URL 对象
+const fileList = ref<FileItem[]>([])
+
+// 存储每个 URL 对应的 revoke 函数用于副作用清理
+const revokeFns = ref<(() => void)[]>([])
+
+// 清理当前所有 Object URL
+const clearUrls = () => {
+  if (clearSideEffects) {
+    revokeFns.value.forEach((revoke) => revoke())
+    revokeFns.value = []
+    fileList.value = []
+    posterUrl.value = ''
+  }
+}
+
+// 加载文件
+const loadFilesRaw = async (keys: Props['loadKeys']) => {
+  clearUrls()
+
+  if (!keys) {
+    return
+  }
+
+  // 如果是字符串
+  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
+  }
+
+  // 如果是对象
+  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, 500)
+
+watch(
+  () => loadKeys,
+  (nv) => {
+    loadFiles(nv)
+  },
+  { deep: true, immediate: true }
+)
+
+onActivated(() => {
+  if (clearSideEffects) {
+    loadFiles(loadKeys)
+  }
+})
+
+// 副作用清理
+onDeactivated(() => {
+  clearUrls()
+})
+
+// 副作用清理
+onBeforeUnmount(() => {
+  clearUrls()
+})
+</script>
+
+<template>
+  <jn-image-view :src="posterUrl" :previewSrcList="fileList"></jn-image-view>
+</template>

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

@@ -0,0 +1,115 @@
+<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 { FileApi } from '@/api/common'
+
+import { JnPdfView } from '@jnrs/vue-core/components'
+
+interface Props {
+  /**
+   * 要加载的文件列表 ｜ 文件名唯一标识 uniqueFileName
+   */
+  loadKeys: Attachment[] | string | undefined
+
+  /**
+   * 是否清理文件副作用
+   */
+  clearSideEffects?: boolean
+}
+
+const { loadKeys, clearSideEffects = false } = defineProps<Props>()
+
+// 存储每个 URL 对应的 URL 对象
+const fileList = ref<FileItem[]>([])
+
+// 存储每个 URL 对应的 revoke 函数用于副作用清理
+const revokeFns = ref<(() => void)[]>([])
+
+// 清理当前所有 Object URL
+const clearUrls = () => {
+  if (clearSideEffects) {
+    revokeFns.value.forEach((revoke) => revoke())
+    revokeFns.value = []
+    fileList.value = []
+  }
+}
+
+const loadFiles = async (keys: Props['loadKeys']) => {
+  clearUrls()
+
+  // 如果是字符串
+  if (typeof keys === 'string') {
+    try {
+      const blob = await FileApi(keys)
+      const { url, revoke } = blobToUrl(blob)
+      fileList.value = [{ src: url, fileName: keys }]
+      revokeFns.value = [revoke]
+    } catch (err) {
+      console.warn(keys, err)
+    }
+    return
+  }
+
+  // 如果是对象
+  if (keys !== null && typeof keys === 'object' && !Array.isArray(keys)) {
+    const { uniqueFileName, fileName } = keys
+    try {
+      const blob = await FileApi(uniqueFileName)
+      const { url, revoke } = blobToUrl(blob)
+      fileList.value = [{ src: url, fileName: fileName || uniqueFileName }]
+      revokeFns.value = [revoke]
+    } catch (err) {
+      console.warn(uniqueFileName, err)
+    }
+    return
+  }
+
+  // 如果是数组
+  if (Array.isArray(keys) && keys.length > 0) {
+    const res = await Promise.all(
+      keys.map(async ({ uniqueFileName, fileName }) => {
+        try {
+          const blob = await FileApi(uniqueFileName)
+          const { url, revoke } = blobToUrl(blob)
+          return { url, fileName, revoke }
+        } catch (err) {
+          console.warn(uniqueFileName, err)
+          return { url: '', fileName: fileName || uniqueFileName, revoke: () => {} }
+        }
+      })
+    )
+    fileList.value = res.map(({ url, fileName }) => ({ src: url, fileName }))
+    revokeFns.value = res.map((d) => d.revoke)
+  }
+}
+
+watch(
+  () => loadKeys,
+  (nv) => {
+    loadFiles(nv)
+  },
+  { deep: true, immediate: true }
+)
+
+onActivated(() => {
+  if (clearSideEffects) {
+    loadFiles(loadKeys)
+  }
+})
+
+// 副作用清理
+onDeactivated(() => {
+  clearUrls()
+})
+
+// 副作用清理
+onBeforeUnmount(() => {
+  clearUrls()
+})
+</script>
+
+<template>
+  <JnPdfView :fileList="fileList"></JnPdfView>
+</template>

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

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

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

@@ -0,0 +1,28 @@
+import type { Directive } from 'vue'
+import { hasPermission } from '@/utils/permissions'
+
+export type PermissionsDirective = Directive<HTMLElement, string[]>
+
+declare module 'vue' {
+  export interface ComponentCustomProperties {
+    vPermissions: PermissionsDirective
+  }
+}
+
+export const permissions = {
+  mounted(el, binding) {
+    const { value, modifiers } = binding
+    const hasPerm = hasPermission(value)
+
+    if (!hasPerm) {
+      if (modifiers.display) {
+        el.style.display = 'none'
+      } else if (modifiers.disabled) {
+        el.setAttribute('disabled', 'disabled')
+        el.classList.add('disabled')
+      } else {
+        el.remove()
+      }
+    }
+  }
+} satisfies PermissionsDirective

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="blank_layout">
+    <router-view />
+  </div>
+</template>
+
+<style scoped>
+.blank_layout {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  overflow: hidden;
+}
+</style>

package/jnrs-template-vue/src/layout/RouterTabs /344/277/256/345/244/215/350/267/257/347/224/261/350/267/263/350/275/254/346/220/272/345/270/246/345/217/202/346/225/260/351/227/256/351/242/230.vue"

@@ -0,0 +1,150 @@
+<template>
+  <div class="routerTabs">
+    <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" @tab-click="handleTabClick">
+      <el-tab-pane
+        v-for="item in tabs"
+        :key="item.fullPath"
+        :name="item.fullPath"
+        :closable="item.path !== HOME_PATH"
+      >
+        <template #label>
+          <span>{{ tabLabel(item) }}</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const HOME_PATH = '/home/index'
+const router = useRouter()
+const route = useRoute()
+
+// 使用 fullPath 作为激活 Tab 的值
+const activeTab = ref(route.fullPath)
+
+// Tab 列表：每个 tab 包含 fullPath、path、meta
+const tabs = ref([
+  {
+    fullPath: route.fullPath,
+    path: route.path,
+    meta: route.meta
+  }
+])
+
+// 标签页标题计算
+const tabLabel = computed(() => {
+  return function (item) {
+    let label = item.meta?.title || '未命名'
+    if (item.meta?.fullPathTitle) {
+      label = item.meta.fullPathTitle.replace(/,/g, '/')
+    }
+    return label
+  }
+})
+
+// 初始化：插入首页（如果当前不是首页）
+onMounted(() => {
+  if (route.path !== HOME_PATH) {
+    tabs.value.unshift({
+      fullPath: HOME_PATH,
+      path: HOME_PATH,
+      meta: { title: '工作台' }
+    })
+  }
+})
+
+// 添加标签页（基于当前 route）
+const addTab = () => {
+  const currentRoute = route
+
+  // 如果已存在相同 fullPath 的 Tab，直接激活，不重复添加
+  const existingTab = tabs.value.find((tab) => tab.fullPath === currentRoute.fullPath)
+  if (existingTab) {
+    activeTab.value = currentRoute.fullPath
+    return
+  }
+
+  // 添加新 Tab
+  tabs.value.push({
+    fullPath: currentRoute.fullPath,
+    path: currentRoute.path,
+    meta: currentRoute.meta
+  })
+  activeTab.value = currentRoute.fullPath
+}
+
+// 移除标签页
+const removeTab = (targetFullPath) => {
+  if (targetFullPath === HOME_PATH) return
+
+  const currentIndex = tabs.value.findIndex((tab) => tab.fullPath === targetFullPath)
+  if (currentIndex === -1) return
+
+  // 删除 Tab
+  tabs.value.splice(currentIndex, 1)
+
+  // 如果删除的是当前激活的 Tab
+  if (activeTab.value === targetFullPath) {
+    const nextTab = tabs.value[currentIndex] || tabs.value[currentIndex - 1]
+    if (nextTab) {
+      activeTab.value = nextTab.fullPath
+      router.push(nextTab.fullPath)
+    } else {
+      // 回退到首页
+      activeTab.value = HOME_PATH
+      router.push(HOME_PATH)
+    }
+  }
+}
+
+// 监听路由变化（使用 fullPath）
+watch(
+  () => route.fullPath,
+  (newFullPath) => {
+    // 避免由 Tab 点击触发的导航再次添加 Tab（防止循环）
+    if (newFullPath !== activeTab.value) {
+      addTab()
+    }
+  },
+  { immediate: true }
+)
+
+// 处理标签页点击
+const handleTabClick = (tab) => {
+  const fullPath = tab.props.name // el-tab-pane 的 name 即 fullPath
+  if (fullPath !== activeTab.value) {
+    activeTab.value = fullPath
+    router.push(fullPath)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.routerTabs {
+  :deep(.el-tabs__header) {
+    margin-bottom: 0;
+    height: 32px;
+  }
+  :deep(.el-tabs__item) {
+    color: #888;
+    font-size: 12px;
+    height: 32px;
+  }
+  :deep(.el-tabs__item.is-active) {
+    color: #09a2a5;
+    border-bottom-color: #f2f2f2;
+  }
+  :deep(.el-tabs__nav-prev) {
+    color: #09a2a5;
+    background: #fff;
+  }
+  :deep(.el-tabs__nav-next) {
+    color: #09a2a5;
+    background: #fff;
+  }
+}
+</style>