create-jnrs-template-vue 1.1.14 → 1.1.15

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

@@ -58,6 +58,7 @@ $mainFontColor: rgba(255, 255, 255, 0.8);
     position: relative;
     height: calc(var(--jnrs-head-height) + var(--jnrs-routerTabs-height));
     border-bottom: 1px solid rgb(248 248 248 / 15%);
+    filter: brightness(0.8);
 
     .logo_text {
       position: absolute;

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { GlobalSetting } from '@jnrs/vue-core/components'
 import { ref, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElMessageBox } from 'element-plus'
 import { handleRouter } from '@jnrs/vue-core/router'
+import { GlobalSetting } from '@jnrs/vue-core/components'
 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/packages'
 
-const { avatar } = useAvatar()
+import ImageView from '@/components/base/ImageView.vue'
+
 const { userInfo, clearAuth } = useAuthStore()
 const { clearMenu } = useMenuStore()
 
@@ -66,14 +66,14 @@ const showGlobalSetting = () => {
       <el-popover placement="bottom" trigger="click" :teleported="false" :width="260" :hide-after="0">
         <template #reference>
           <span class="userMenu_reference">
-            <img class="userMenu_avatar" :src="avatar" alt="avatar" />
+            <ImageView class="userMenu_avatar" :loadKeys="userInfo?.avatarFileName" />
             <span>{{ userInfo?.name }}</span>
             <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo?.role">[{{ roleLabel }}]</span>
             <el-icon class="userMenu_icon"><arrow-down /></el-icon>
           </span>
         </template>
         <div class="userMenu_dropdown">
-          <img class="userMenu_dropdown_avatar" :src="avatar" alt="avatar" />
+          <ImageView class="userMenu_dropdown_avatar" :loadKeys="userInfo?.avatarFileName" />
           <b>
             <span>{{ userInfo?.name }}</span>
             <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo?.role">[{{ roleLabel }}]</span>
@@ -147,6 +147,8 @@ $topHoverSize: 35px;
       height: $topHoverSize;
       border-radius: 50%;
       margin-right: 4px;
+      overflow: hidden;
+      background: var(--jnrs-background-head);
     }
     .userMenu_icon {
       margin-left: 4px;
@@ -155,10 +157,20 @@ $topHoverSize: 35px;
   }
   .userMenu_dropdown {
     text-align: center;
+
+    .userMenu_dropdown_avatar {
+      width: 120px !important;
+      height: 120px !important;
+      margin: 0 auto 8px;
+      background: var(--jnrs-background-head);
+      border-radius: 5px;
+    }
     img {
       width: 80px;
       height: 80px;
       border-radius: 50%;
+      object-fit: none;
+      object-position: center;
     }
     b {
       display: block;

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

@@ -1,14 +1,38 @@
+/**
+ * 附件（文件）信息
+ */
 export interface Attachment {
-  id: string
+  /**
+   * 数据 id
+   */
+  id: number
+  /**
+   * 文件 id
+   */
+  documentId: number
+  /**
+   * 文件名
+   */
+  fileName: string
+  /**
+   * 文件名唯一标识
+   */
   uniqueFileName: string
+  /**
+   * MIME 类型
+   */
+  fileType: string
+  /**
+   * 文件大小 单位：字节（Bytes）
+   */
+  fileSize: number
 }
 
-export interface AttachmentDocument {
+/**
+ * 文档容器（用于图片或附件）
+ */
+export interface Document {
+  id: number
+  description: string | null
   attachments: Attachment[]
 }
-
-export interface ApiResponse {
-  attachmentDocument?: AttachmentDocument
-  imageDocument?: AttachmentDocument
-  [key: string]: unknown
-}

package/jnrs-template-vue/src/utils/packages.ts

@@ -6,13 +6,13 @@
  * @Desc.  : 对 packages 的一些公用方法进行封装
  */
 
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElLoading } from 'element-plus'
 import {
-  getOneDictList as _getOneDictList,
+  getDictList as _getDictList,
   getDictLabel as _getDictLabel,
   getDictValue as _getDictValue,
   getDictColor as _getDictColor,
-  downloadFile as _downloadFile
+  downloadByBlob as _downloadByBlob
 } from '@jnrs/shared'
 import { useAuthStore } from '@jnrs/vue-core/pinia'
 import { objectToFormData as _objectToFormData } from '@jnrs/shared'
@@ -23,10 +23,10 @@ import { FileApi } from '@/api/common'
  * @param name 字典名称
  * @returns 某字典名称所对应的字典列表数据
  */
-export const getOneDictList = (name: string) => {
+export const getDictList = (name: string) => {
   const { dict } = useAuthStore()
   if (dict) {
-    return _getOneDictList(name, dict)
+    return _getDictList(name, dict)
   }
 }
 
@@ -96,15 +96,20 @@ export const objectToFormData = (obj: Record<string, unknown>) => {
  * @returns loading 下载状态
  */
 export const downloadFile = async (uniqueFileName: string, filename?: string) => {
+  const elLoading = ElLoading.service({
+    lock: true,
+    text: '文件下载中...',
+    background: 'rgba(0, 0, 0, 0.5)'
+  })
   let loading = true
-  ElMessage.info('文件下载中...')
   try {
     const blob = await FileApi(uniqueFileName)
-    _downloadFile(blob, filename || uniqueFileName)
+    _downloadByBlob(blob, filename || uniqueFileName)
   } catch (error) {
     console.error(error)
     ElMessage.warning('文件下载失败')
   } finally {
+    elLoading.close()
     loading = false
   }
   return loading

package/jnrs-template-vue/src/views/demos/crud/index.vue

@@ -1,34 +1,114 @@
 <script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import type { Attachment } from '@/types'
+import type { ProjectItem, AddProjectItem } from '@/api/demos/index'
 import { ref, onActivated } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import { objectMatchAssign } from '@jnrs/shared'
+import { isNumberGtZero } from '@jnrs/shared/validator'
+import { getDictList, objectToFormData } from '@/utils/packages'
+import { DemosTableApi, DemosFormApi } from '@/api/demos/index'
 import JnTable from '@/components/common/JnTable.vue'
 import JnPagination from '@/components/common/JnPagination.vue'
-import { DemosTableApi } from '@/api/demos/index'
-import type { ProjectItem } from '@/api/demos/index'
+import ImageView from '@/components/base/ImageView.vue'
+import PdfView from '@/components/base/PdfView.vue'
+import JnEdit from '@/components/common/JnEdit.vue'
+import JnDictTag from '@/components/common/JnDictTag.vue'
+import JnDatetime from '@/components/common/JnDatetime.vue'
+import JnFileUpload from '@/components/base/JnFileUpload.vue'
 
-const tableData = ref<ProjectItem[]>()
+interface ProcessedProjectItem extends ProjectItem {
+  newImageFiles?: Attachment[]
+  newAttachmentFile?: Attachment[]
+}
+
+const loading = ref(false)
+const tableData = ref<ProcessedProjectItem[]>([])
 const total = ref(0)
 const pagination = ref({ currentPage: 1, pageSize: 10 })
+const jnEditRef = ref()
+const ruleFormRef = ref<FormInstance>()
 
-const fetchData = () => {
+const ruleForm = ref<AddProjectItem>({
+  id: '',
+  name: '',
+  program: '',
+  projectType: undefined,
+  budget: 0,
+  plannedStartDate: '',
+  description: '',
+  newImageFiles: [],
+  newAttachmentFile: []
+})
+
+const rules = ref<FormRules>({
+  name: [{ required: true, message: '请输入', trigger: 'change' }],
+  program: [{ required: true, message: '请选择', trigger: 'change' }],
+  projectType: [{ required: true, message: '请选择', trigger: 'change' }],
+  plannedStartDate: [{ required: true, message: '请选择', trigger: 'change' }],
+  newImageFiles: [{ required: true, message: '请上传', trigger: 'change' }],
+  budget: [
+    { required: true, message: '请输入', trigger: 'change' },
+    {
+      validator: isNumberGtZero,
+      trigger: 'change'
+    }
+  ]
+})
+
+const handlePaginationChange = () => {
   console.log(pagination.value)
 }
 
+const handleSelectionChange = (row: ProjectItem[]) => {
+  console.log(row)
+}
+
 const getDemosTable = async () => {
   try {
     const res = await DemosTableApi()
-    tableData.value = res
+    tableData.value = res.map((item) => ({
+      ...item,
+      newImageFiles: item.imageDocument?.attachments ?? undefined,
+      newAttachmentFile: item.attachmentDocument?.attachments ?? undefined
+    }))
     total.value = res.length
   } catch (error) {
     console.error(error)
   }
 }
 
-const edit = (row: ProjectItem) => {
-  console.log(row)
+// 新增和修改
+const handleEdit = (row?: ProjectItem) => {
+  jnEditRef.value.open()
+  queueMicrotask(() => {
+    ruleFormRef.value?.resetFields()
+    const matched = objectMatchAssign(ruleForm.value, row)
+    ruleForm.value = matched
+  })
 }
 
-const handleSelectionChange = (row: ProjectItem[]) => {
-  console.log(row)
+// 提交表单
+const submitForm = () => {
+  ruleFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      loading.value = true
+      const formData = objectToFormData(ruleForm.value)
+      try {
+        await DemosFormApi(formData)
+        ElMessage({
+          message: '数据已保存',
+          grouping: true,
+          type: 'success'
+        })
+      } catch (err) {
+        console.error(err)
+      } finally {
+        loading.value = false
+      }
+    }
+  })
 }
 
 onActivated(() => {
@@ -37,9 +117,77 @@ onActivated(() => {
 </script>
 
 <template>
+  <JnEdit ref="jnEditRef" title="项目管理" width="600px">
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" v-loading="loading">
+      <el-form-item prop="id"></el-form-item>
+      <el-form-item label="项目名称" prop="name">
+        <el-input v-model.trim="ruleForm.name" maxlength="20" show-word-limit />
+      </el-form-item>
+      <el-form-item label="类型" prop="projectType">
+        <el-select v-model="ruleForm.projectType" filterable placeholder="">
+          <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="item in getDictList('projectType')"
+            :key="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="预算" prop="budget">
+        <el-input-number v-model="ruleForm.budget" :min="0" :precision="2" :step="10000" controls-position="right">
+          <template #prefix>
+            <span>￥</span>
+          </template>
+        </el-input-number>
+      </el-form-item>
+      <el-form-item label="计划开始时间" prop="plannedStartDate">
+        <el-date-picker
+          v-model="ruleForm.plannedStartDate"
+          type="datetime"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :disabled-date="
+            (time: number) => {
+              return time < Date.now() - 86400000
+            }
+          "
+        />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input
+          v-model="ruleForm.description"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          type="textarea"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item label="上传图片" prop="newImageFiles">
+        <JnFileUpload
+          v-model="ruleForm.newImageFiles"
+          :formRef="ruleFormRef"
+          validateFieldName="newImageFiles"
+          accept=".png,.jpg,.bmp,.gif"
+          :fileSizeMb="50"
+          :limit="3"
+          drag
+        />
+      </el-form-item>
+      <el-form-item label="上传文件" prop="newAttachmentFile">
+        <JnFileUpload v-model="ruleForm.newAttachmentFile" accept=".pdf" :limit="1" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="success" icon="Select" :loading="loading" @click="submitForm()">提交</el-button>
+    </template>
+  </JnEdit>
+
   <el-card>
     <template #header>
-      <span>Card name</span>
+      <div class="card_header">
+        <span>项目管理</span>
+        <el-button type="primary" size="small" :icon="Plus" @click="handleEdit()">新增</el-button>
+      </div>
     </template>
     <JnTable
       :data="tableData"
@@ -51,29 +199,29 @@ onActivated(() => {
       <el-table-column prop="code" label="项目编号" min-width="200" sortable show-overflow-tooltip />
       <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip>
         <template #default="{ row }">
-          <span>{{ row.name }}</span>
+          {{ row.name }}
         </template>
       </el-table-column>
       <el-table-column prop="program" label="项目集名称" min-width="200" sortable show-overflow-tooltip />
-      <el-table-column prop="type" label="项目类型" width="100" align="center" sortable>
+      <el-table-column prop="projectType" label="项目类型" width="100" align="center" sortable>
         <template #default="{ row }">
-          <span>{{ row.type }}</span>
+          <JnDictTag dictName="projectType" :value="row.projectType" />
         </template>
       </el-table-column>
       <el-table-column prop="manager" label="项目经理" width="100" align="center" sortable />
-      <el-table-column prop="budget" label="预算" width="100" align="center" sortable>
+      <el-table-column prop="budget" label="预算(¥)" width="100" align="center" sortable>
         <template #default="{ row }">
-          <span>{{ row.budget }}</span>
+          {{ row.budget }}
         </template>
       </el-table-column>
-      <el-table-column prop="plannedStartDate" label="计划开始日期" width="130" align="center" sortable>
+      <el-table-column prop="plannedStartDate" label="计划开始时间" width="130" align="center" sortable>
         <template #default="{ row }">
-          <span>{{ row.plannedStartDate }}</span>
+          <JnDatetime :value="row.plannedStartDate" />
         </template>
       </el-table-column>
       <el-table-column prop="plannedFinishDate" label="计划完成日期" width="130" align="center" sortable>
         <template #default="{ row }">
-          <span>{{ row.plannedFinishDate }}</span>
+          {{ row.plannedFinishDate }}
         </template>
       </el-table-column>
       <el-table-column prop="progress" label="进度" width="100" align="center" sortable>
@@ -83,26 +231,34 @@ onActivated(() => {
       </el-table-column>
       <el-table-column prop="status" label="状态" width="100" align="center" sortable>
         <template #default="{ row }">
-          <span>{{ row.status }}</span>
+          <JnDictTag dictName="status" :value="row.status" :showColor="false" />
         </template>
       </el-table-column>
+      <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
       <el-table-column prop="imageDocument" label="图片" width="100" align="center" sortable>
         <template #default="{ row }">
-          <span>{{ row.imageDocument?.attachments.length || 0 }}</span>
+          <ImageView :loadKeys="row.newImageFiles" preview maxHeight="50px" />
         </template>
       </el-table-column>
       <el-table-column prop="attachmentDocument" label="附件" width="100" align="center" sortable>
         <template #default="{ row }">
-          <span>{{ row.attachmentDocument?.attachments.length || 0 }}</span>
+          <PdfView :loadKeys="row.newAttachmentFile" isPdf />
         </template>
       </el-table-column>
       <el-table-column label="操作" width="100" align="center" fixed="right">
         <template #default="{ row }">
-          <el-button link type="primary" @click.stop="edit(row)">编辑</el-button>
+          <el-button link type="primary" @click.stop="handleEdit(row)">编辑</el-button>
         </template>
       </el-table-column>
     </JnTable>
-    <jn-pagination :total="total" v-model="pagination" @change="fetchData" />
+
+    <JnPagination :total="total" v-model="pagination" @change="handlePaginationChange" />
   </el-card>
 </template>
-<style scoped></style>
+
+<style lang="scss" scoped>
+.card_header {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

package/jnrs-template-vue/src/views/demos/unitTest/RequestPage.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus'
 import { objectToFormData } from '@/utils/packages'
-import { useMockStore } from '@jnrs/vue-core/pinia'
 import { LoginApi, UserInfoApi } from '@/api/system'
 import { NotFoundApi, NoAuth, DetailsApi } from '@/api/demos'
 import { getFileUrl } from '@/utils/file'
 import { downloadFile } from '@/utils/packages'
 
-const { isMock } = storeToRefs(useMockStore())
+import ImageView from '@/components/base/ImageView.vue'
+
 const squareUrl = ref()
 
 const loginParams = ref({
@@ -80,10 +79,10 @@ const handleDetailsApi = async () => {
   }
 }
 
-// 获取后端服务器文件进行下载
+// 获取后端服务器文件进行预览
 const handleFileView = async () => {
   try {
-    const url = await getFileUrl('20251217171430919-34bcc1a9-a19d-4b91-9ab6-57cb31c3df28.jpg')
+    const url = await getFileUrl('mock-png-1.png')
     squareUrl.value = url.value
   } catch (error) {
     console.log(error)
@@ -93,10 +92,6 @@ const handleFileView = async () => {
 
 <template>
   <p>网络请求测试</p>
-  <div>
-    <span>服务器类型：</span>
-    <el-switch v-model="isMock" active-text="Mock 服务器" inactive-text="后端服务器" />
-  </div>
   <el-button-group>
     <el-button type="success" size="small" @click="handleInfoApi">获取用户数据</el-button>
     <el-button type="primary" size="small" @click="handleNotFoundApi">404</el-button>
@@ -111,20 +106,21 @@ const handleFileView = async () => {
   <div>
     <el-button-group>
       <el-button type="primary" plain size="small" @click="handleDetailsApi">获取数据列表单个数据</el-button>
-      <el-button
-        type="primary"
-        plain
-        size="small"
-        @click="downloadFile('20251217171430919-34bcc1a9-a19d-4b91-9ab6-57cb31c3df28.jpg')"
-      >
+      <el-button type="primary" plain size="small" @click="downloadFile('mock-pdf.pdf')">
         获取后端服务器文件进行下载
       </el-button>
     </el-button-group>
     <div>
-      <el-avatar shape="square" :src="squareUrl" />
+      <span>通过 ImageView 组件显示的图片（可支持预览）</span>
+      <ImageView
+        loadKeys="mock-png-1.png"
+        preview
+        style="width: 300px; height: 50px; border: 1px solid var(--jnrs-color-primary)"
+      />
     </div>
     <div>
       <el-button type="primary" plain size="small" @click="handleFileView">获取后端服务器图片</el-button>
+      <el-avatar shape="circle" :src="squareUrl" />
     </div>
   </div>
 </template>

package/jnrs-template-vue/src/views/login/index.vue

@@ -16,12 +16,7 @@ const showGlobalSetting = () => {
 }
 
 const loading = ref(false)
-const {
-  setUserInfo,
-  setToken,
-  setDict
-  // setRole
-} = useAuthStore()
+const { setUserInfo, setToken, setDict, setRole } = useAuthStore()
 
 // 表单 ref
 const ruleFormRef = ref<FormInstance>()
@@ -51,21 +46,21 @@ const submitForm = async () => {
       const loginDateTime = formatDateTime() + ' ' + formatWeekday()
 
       // 获取角色列表，将登录人角色对应的权限叠加给当前登录人（一次性获取叠加）
-      // const roleRes = await RoleApi()
-      // let permissionsMerger = restParameter.permissions
-      // if (Array.isArray(restParameter.permissions)) {
-      //   permissionsMerger = [
-      //     ...new Set([
-      //       ...restParameter.permissions,
-      //       ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
-      //     ])
-      //   ]
-      // }
-      // setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
+      const roleRes = await RoleApi()
+      let permissionsMerger = restParameter.permissions
+      if (Array.isArray(restParameter.permissions)) {
+        permissionsMerger = [
+          ...new Set([
+            ...restParameter.permissions,
+            ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
+          ])
+        ]
+      }
+      setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
 
       setUserInfo({
         ...restParameter,
-        // permissions: permissionsMerger,
+        permissions: permissionsMerger,
         account: ruleForm.value.account,
         loginDateTime
       })

package/jnrs-template-vue/src/views/system/mine/baseInfo.vue

@@ -5,7 +5,7 @@ import { ElMessage } from 'element-plus'
 import type { UploadProps } from 'element-plus'
 import { useAuthStore } from '@jnrs/vue-core/pinia'
 import { useAvatar } from '@/composables/base/useAvatar'
-import { getOneDictList } from '@/utils/packages'
+import { getDictList } from '@/utils/packages'
 import type { User } from '@jnrs/shared'
 
 const { userInfo, token } = storeToRefs(useAuthStore())
@@ -81,7 +81,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
         <el-option
           :label="item.label"
           :value="item.value"
-          v-for="(item, index) in getOneDictList('jobTitle')"
+          v-for="(item, index) in getDictList('jobTitle')"
           :key="index"
         />
       </el-select>
@@ -91,12 +91,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
     </el-form-item>
     <el-form-item label="职位/账号权限" prop="role">
       <el-select v-model="ruleForm.role" placeholder="" style="width: 200px">
-        <el-option
-          :label="item.label"
-          :value="item.value"
-          v-for="(item, index) in getOneDictList('role')"
-          :key="index"
-        />
+        <el-option :label="item.label" :value="item.value" v-for="(item, index) in getDictList('role')" :key="index" />
       </el-select>
     </el-form-item>
     <el-form-item label="头像" prop="avatarFileName" class="uploader_item">

package/jnrs-template-vue/tsconfig.json

@@ -24,7 +24,10 @@
     "src/**/*",
     "vite.config.ts",
     "../../../packages/shared/src/validate.ts",
-    "../../../packages/shared/src/validator.ts"
+    "../../../packages/shared/src/validator.ts",
+    "../../../packages/vue-core/src/components/JnImageView.vue",
+    "../../../packages/vue-core/src/components/JnPdfView.vue",
+    "src/components/common/JnEdit.vue"
   ],
   "exclude": ["node_modules", "dist"]
 }

package/jnrs-template-vue/vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
       mockPath: 'viteMockServe', // mock 文件目录
       watchFiles: true, // mock 文件热更新
       enable: isMock, // 是否开启
-      logger: isMock // 是否在终端显示请求日志
+      logger: false // 是否在终端显示请求日志
     })
   ],
   resolve: {