create-jnrs-template-vue 1.2.2 → 1.2.4

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

@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref } 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 { LogoutApi } from '@/api/system'
-import { getDictLabel, getDictColor } from '@/utils/packages'
-
 import ImageView from '@/components/common/ImageView.vue'
+import DictTag from '@/components/common/DictTag.vue'
 
 const { userInfo, clearAuth } = useAuthStore()
 const { clearMenu } = useMenuStore()
 
-const roleLabel = computed(() => getDictLabel('role', userInfo?.role || ''))
-const roleColor = computed(() => getDictColor('role', userInfo?.role || ''))
-
 const systemStore = useSystemStore()
 const { documentFullscreen } = storeToRefs(systemStore)
 const { toggleFullScreen } = systemStore
@@ -29,8 +25,8 @@ const handleLogout = async () => {
       type: 'warning'
     })
     await LogoutApi()
-    await clearAuth()
-    await clearMenu()
+    clearAuth()
+    clearMenu()
     handleRouter({ name: 'Login' }, 'replace')
   } catch {}
 }
@@ -68,16 +64,12 @@ const showGlobalSetting = () => {
           <span class="userMenu_reference">
             <ImageView class="userMenu_avatar" :loadKeys="userInfo?.avatarFileName" />
             <span>{{ userInfo?.name }}</span>
-            <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo?.role">[{{ roleLabel }}]</span>
+            <DictTag dictName="role" :value="userInfo.role" v-if="userInfo?.role" />
             <el-icon class="userMenu_icon"><arrow-down /></el-icon>
           </span>
         </template>
         <div class="userMenu_dropdown">
           <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>
-          </b>
           <div class="loginDateTime" v-if="userInfo?.loginDateTime">
             <span>登录时间</span>
             <p>{{ userInfo?.loginDateTime }}</p>
@@ -132,13 +124,14 @@ $topHoverSize: 35px;
     display: flex;
     align-items: center;
     margin-left: 16px;
-    transition: all 0.25s ease;
     cursor: pointer;
     &:hover {
       span {
+        transition: all 0.25s ease;
         color: var(--jnrs-color-primary) !important;
       }
       .userMenu_icon {
+        transition: all 0.25s ease;
         color: var(--jnrs-color-primary);
       }
     }

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

@@ -4,7 +4,7 @@ import en from './en'
 import { zhCn as vueCore_zhCn, en as vueCore_en } from '@jnrs/vue-core/locales'
 
 const i18n = createI18n({
-  legacy: false, // 启用 Composition API 模式
+  legacy: false, // legacy 为 false 则启用 Composition API 模式
   globalInjection: true, // 允许在模板中使用 $t
   locale: 'zhCn',
   fallbackLocale: 'en',

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

@@ -0,0 +1,19 @@
+export interface MsgIdMessage {
+  msgId: string
+  d: unknown
+}
+
+export interface TypeDataMessage {
+  type: string | number
+  data: unknown
+}
+
+// 类型守卫函数 MsgId 结构
+export function isMsgIdMessage(msg: unknown): msg is MsgIdMessage {
+  return typeof msg === 'object' && msg !== null && 'msgId' in msg && 'd' in msg
+}
+
+// 类型守卫函数 Type 结构
+export function isTypeDataMessage(msg: unknown): msg is TypeDataMessage {
+  return typeof msg === 'object' && msg !== null && 'type' in msg && 'data' in msg
+}

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

@@ -6,7 +6,6 @@
  * @Desc.  : 文件处理相关函数
  */
 
-// import { blobToUrl } from '@jnrs/shared'
 import { useObjectUrl } from '@vueuse/core'
 import { FileApi } from '@/api/common'
 
@@ -19,3 +18,39 @@ export const getFileUrl = async (uniqueFileName: string) => {
   const blob = await FileApi(uniqueFileName)
   return useObjectUrl(blob)
 }
+
+/**
+ * 从可能为原始值或对象的输入中提取指定字段的值
+ * @param value - 输入值（可能是 string/number/对象）
+ * @param fieldName - 要提取的对象字段名（默认 'id'）
+ * @returns 提取出的 string | number 值，或 undefined
+ */
+export function extractFieldId(value: unknown, fieldName: string = 'id'): string | number | undefined {
+  // 1. 排除 null 和 undefined
+  if (value == null) return undefined
+
+  // 2. 如果是原始 ID 类型，直接返回
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value
+  }
+
+  // 3. 必须是普通对象（非数组、非 Date 等）
+  if (typeof value !== 'object' || Array.isArray(value)) {
+    return undefined
+  }
+
+  // 4. 检查对象是否包含目标字段
+  if (!(fieldName in value)) {
+    return undefined
+  }
+
+  // 5. 安全获取字段值（使用 keyof 断言确保类型安全）
+  const fieldValue = (value as Record<string, unknown>)[fieldName]
+
+  // 6. 只接受 string 或 number 类型
+  if (typeof fieldValue === 'string' || typeof fieldValue === 'number') {
+    return fieldValue
+  }
+
+  return undefined
+}

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

@@ -5,13 +5,13 @@ 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 { objectMatchAssign, dateFormatsToObject } from '@jnrs/shared'
 import { debounce } from '@jnrs/shared/lodash'
 import { isNumberGtZero } from '@jnrs/shared/validator'
-import { getDictList, objectToFormData, downloadFile } from '@/utils/packages'
-import { DemosTableApi, DemosFormApi } from '@/api/demos/index'
+import { getDictList, downloadFile } from '@/utils/packages'
+import { TableApi, EditApi, ImportTemplateApi, ImportDataApi, ExportApi } from '@/api/demos/index'
 
-import { JnDialog, JnDatetime, JnPagination, JnFileUpload, JnTable } from '@jnrs/vue-core/components'
+import { JnDialog, JnDatetime, JnPagination, JnFileUpload, JnTable, JnImportAndExport } from '@jnrs/vue-core/components'
 import ImageView from '@/components/common/ImageView.vue'
 import PdfView from '@/components/common/PdfView.vue'
 import DictTag from '@/components/common/DictTag.vue'
@@ -28,12 +28,11 @@ const total = ref(0)
 const pagination = ref<Pagination>({ pageNo: 1, pageSize: 10 })
 
 // 编辑
-const jnEditRef = ref()
+const editDialogRef = ref()
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = ref<AddProjectItem>({
   id: '',
   name: '',
-  program: '',
   projectType: undefined,
   managerId: undefined,
   budget: 0,
@@ -44,7 +43,6 @@ const ruleForm = ref<AddProjectItem>({
 })
 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' }],
@@ -62,16 +60,18 @@ const rules = ref<FormRules>({
 const queryForm = ref({
   code: '',
   projectType: undefined,
-  manager: ''
+  manager: '',
+  plannedStartDate: ''
 })
 
 const handleSelectionChange = (row: ProjectItem[]) => {
   console.log(row)
 }
 
-const getDemosTable = debounce(async () => {
+const getTable = debounce(async () => {
+  loading.value = true
   try {
-    const res = await DemosTableApi({
+    const res = await TableApi({
       ...pagination.value,
       ...queryForm.value
     })
@@ -83,12 +83,14 @@ const getDemosTable = debounce(async () => {
     total.value = res.count
   } catch (error) {
     console.error(error)
+  } finally {
+    loading.value = false
   }
 }, 300)
 
 // 新增和修改
 const handleEdit = (row?: ProjectItem) => {
-  jnEditRef.value.open()
+  editDialogRef.value.open()
   queueMicrotask(() => {
     ruleFormRef.value?.resetFields()
     const matched = objectMatchAssign(ruleForm.value, row)
@@ -108,15 +110,12 @@ const submitForm = () => {
   ruleFormRef.value?.validate(async (valid) => {
     if (valid) {
       loading.value = true
-      const formData = objectToFormData({
-        ...ruleForm.value,
-        managerId: ruleForm.value.managerId?.managerId
-      })
       try {
-        await DemosFormApi(formData)
+        await EditApi(ruleForm.value)
         ElMessage({
           message: '数据已保存',
           grouping: true,
+          showClose: true,
           type: 'success'
         })
       } catch (err) {
@@ -129,13 +128,13 @@ const submitForm = () => {
 }
 
 onActivated(() => {
-  getDemosTable()
+  getTable()
 })
 </script>
 
 <template>
   <!-- 编辑弹窗 -->
-  <JnDialog ref="jnEditRef" title="项目管理" width="600px">
+  <JnDialog ref="editDialogRef" 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">
@@ -209,20 +208,41 @@ onActivated(() => {
     </template>
   </JnDialog>
 
-  <el-card>
+  <el-card v-loading="loading">
     <template #header>
-      <div style="display: flex; justify-content: space-between">
+      <div style="display: flex; justify-content: space-between; align-items: center">
         <span>项目管理</span>
-        <el-button type="primary" size="small" :icon="Plus" @click="handleEdit()">新增</el-button>
+        <div style="display: flex; justify-content: space-between; align-items: center">
+          <JnImportAndExport
+            :importTemplateApi="ImportTemplateApi"
+            importBtnName="导入项目"
+            :importApi="ImportDataApi"
+            exportBtnName="导出项目"
+            :exportApi="ExportApi"
+            :exportParams="{
+              ...dateFormatsToObject(queryForm.plannedStartDate)
+            }"
+            :exportDynamicParamsConfig="{
+              label: '项目编号',
+              prop: 'code'
+            }"
+            :exportDisabled="tableData.length === 0"
+            size="small"
+            @change="getTable()"
+          />
+          <el-button type="primary" size="small" :icon="Plus" @click="handleEdit()" style="margin-left: 12px">
+            新增
+          </el-button>
+        </div>
       </div>
     </template>
 
     <!-- 查询条件 -->
     <el-form :model="queryForm" size="small" inline v-loading="loading">
       <el-form-item label="项目编号" prop="code">
-        <el-input v-model="queryForm.code" clearable style="width: 150px">
+        <el-input v-model="queryForm.code" clearable style="width: 200px">
           <template #append>
-            <el-button icon="Search" @click="getDemosTable()" />
+            <el-button icon="Search" @click="getTable()" />
           </template>
         </el-input>
       </el-form-item>
@@ -232,8 +252,8 @@ onActivated(() => {
           filterable
           placeholder=""
           clearable
-          style="width: 150px"
-          @change="getDemosTable()"
+          style="width: 200px"
+          @change="getTable()"
         >
           <el-option
             :label="item.label"
@@ -249,9 +269,18 @@ onActivated(() => {
           :initialParams="{ role: 1 }"
           size="small"
           width="200px"
-          @change="getDemosTable()"
+          @change="getTable()"
         ></SelectManager>
       </el-form-item>
+      <el-form-item label="计划开始时间" prop="plannedStartDate">
+        <el-date-picker
+          v-model="queryForm.plannedStartDate"
+          value-format="YYYY-MM-DD"
+          size="small"
+          style="width: 200px"
+          @change="getTable()"
+        />
+      </el-form-item>
     </el-form>
 
     <!-- 数据列表 -->
@@ -266,11 +295,7 @@ onActivated(() => {
       @selection-change="handleSelectionChange"
     >
       <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 }">
-          {{ row.name }}
-        </template>
-      </el-table-column>
+      <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip />
       <el-table-column prop="program" label="项目集名称" min-width="200" sortable show-overflow-tooltip />
       <el-table-column prop="projectType" label="项目类型" width="100" align="center" sortable>
         <template #default="{ row }">
@@ -322,6 +347,6 @@ onActivated(() => {
     </JnTable>
 
     <!-- 表格分页 -->
-    <JnPagination :total="total" v-model="pagination" @change="getDemosTable" />
+    <JnPagination :total="total" v-model="pagination" @change="getTable" />
   </el-card>
 </template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { TableApi } from '@/api/demos/index'
+import { JnDatetime } from '@jnrs/vue-core/components'
+import CardTable from '@/components/common/CardTable.vue'
+import ImageView from '@/components/common/ImageView.vue'
+import PdfView from '@/components/common/PdfView.vue'
+import DictTag from '@/components/common/DictTag.vue'
+</script>
+
+<template>
+  <CardTable :getTableDataApi="TableApi">
+    <template #header>项目列表</template>
+    <template #table>
+      <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="projectType" label="项目类型" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <DictTag dictName="projectType" :value="row.projectType" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="manager" label="项目经理" width="100" align="center" sortable />
+      <el-table-column prop="plannedStartDate" label="计划开始时间" width="130" align="center" sortable>
+        <template #default="{ row }">
+          <JnDatetime :value="row.plannedStartDate" />
+        </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 }">
+          <ImageView :loadKeys="row.newImageFiles" preview height="50px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="attachmentDocument" label="附件" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <PdfView :loadKeys="row.newAttachmentFile" isPdf />
+        </template>
+      </el-table-column>
+    </template>
+  </CardTable>
+</template>
+
+<style lang="scss" scoped></style>

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

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { objectToFormData } from '@/utils/packages'
 import { LoginApi, UserInfoApi } from '@/api/system'
-import { NotFoundApi, NoAuth, DetailsApi } from '@/api/demos'
+import { NotFoundApi, NoAuthApi, DetailsApi } from '@/api/demos'
 import { getFileUrl } from '@/utils/file'
 import { downloadFile } from '@/utils/packages'
 
@@ -36,7 +36,7 @@ const handleNotFoundApi = async () => {
 
 const handleNoAuth = async (showErrorMsg = true) => {
   try {
-    const res = await NoAuth(showErrorMsg)
+    const res = await NoAuthApi(showErrorMsg)
     console.log(res)
   } catch (error) {
     console.log(error)

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

@@ -5,12 +5,16 @@ import { handleRouter } from '@jnrs/vue-core/router'
 import type { MenuItem } from '@jnrs/vue-core'
 import { hasPermission } from '@/utils/permissions'
 import { MenuApi } from '@/api/system'
+import { formatDateTime, formatWeekday } from '@jnrs/shared'
+import { isFloatGtZero } from '@jnrs/shared/validator'
+import { testI18n } from '@jnrs/shared/request'
 
 const routeOptions = ref<MenuItem[]>([])
 const currentRoute = ref('')
 const datePicker = ref(new Date())
-
-onMounted(() => {})
+const datetime = ref(formatDateTime() + ' ' + formatWeekday())
+const validator = ref()
+const testI18nInCore = ref('')
 
 const handleMenuApi = async () => {
   try {
@@ -26,11 +30,31 @@ const handleRouteChange = () => {
     name: currentRoute.value
   })
 }
+
+const changeI18n = () => {
+  datetime.value = formatDateTime() + ' ' + formatWeekday()
+  isFloatGtZero({}, '0', (msg) => {
+    validator.value = msg
+  })
+  testI18nInCore.value = testI18n()
+}
+
+onMounted(() => {
+  isFloatGtZero({}, '0', (msg) => {
+    validator.value = msg
+  })
+  testI18nInCore.value = testI18n()
+})
 </script>
 
 <template>
   <div>
     <h3>Playground - 功能测试</h3>
+    <p>国际化测试</p>
+    <div>@jnrs/shared: {{ datetime }}</div>
+    <div>@jnrs/shared/validator: {{ validator }}</div>
+    <div>@jnrs/shared/request: {{ testI18nInCore }}</div>
+    <el-button type="primary" size="small" @click="changeI18n">切换语言后点击按钮更新国际化显示</el-button>
     <p>权限测试（admin 账号拥有全部权限，请用非 admin 账号测试该功能）</p>
     <ul>
       <li>

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

@@ -45,18 +45,22 @@ const submitForm = async () => {
       const { token, dict, ...restParameter } = loginRes
       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()
-          ])
-        ]
+      try {
+        // 获取角色列表，将登录人角色对应的权限叠加给当前登录人（一次性获取叠加）
+        const roleRes = await RoleApi()
+        if (Array.isArray(restParameter.permissions)) {
+          permissionsMerger = [
+            ...new Set([
+              ...restParameter.permissions,
+              ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
+            ])
+          ]
+        }
+        setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
+      } catch (e) {
+        console.log(e)
       }
-      setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
 
       setUserInfo({
         ...restParameter,
@@ -153,6 +157,7 @@ const submitForm = async () => {
 
 .topBarBtn {
   font-size: 22px;
+  color: #c2c2c2;
 }
 
 .topFixed_right {
@@ -163,9 +168,9 @@ const submitForm = async () => {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  background: var(--jnrs-card-primary);
-  padding: 4px 16px;
-  border-radius: 10px;
+  padding: 8px 16px;
+  // background: var(--jnrs-card-primary);
+  // border-radius: 10px;
 }
 
 .card {
@@ -204,7 +209,6 @@ const submitForm = async () => {
       .title {
         text-align: center;
         font-size: 24px;
-        letter-spacing: 4px;
         white-space: nowrap;
         font-weight: normal;
         font-family: AlimamaShuHeiTi-Bold;
@@ -289,7 +293,6 @@ const submitForm = async () => {
       position: absolute;
       bottom: 5px;
       font-size: 12px;
-      letter-spacing: 2px;
       text-transform: uppercase;
       color: rgba(0, 0, 0, 0.1);
     }