create-jnrs-vue 1.2.20 → 1.2.21

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

@@ -2,16 +2,16 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import type { Attachment, Pagination } from '@/types'
 import type { ProjectItem, AddProjectItem } from '@/api/demos/index'
-import { ref, onActivated } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ref, onActivated, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { useRoute } from '@jnrs/vue-core/router'
 import { objectMatchAssign, dateFormatsToObject } from '@jnrs/shared'
 import { debounce } from '@jnrs/shared/lodash'
 import { isNumberGtZero } from '@jnrs/shared/validator'
 import { getDictList, downloadFile } from '@/utils/packages'
-import { TableApi, EditApi, ImportTemplateApi, ImportDataApi, ExportApi } from '@/api/demos/index'
-
+import { useI18n } from '@/locales'
+import { ListApi, EditApi, DelApi, ImportTemplateApi, ImportDataApi, ExportApi } from '@/api/demos/index'
 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'
@@ -23,6 +23,7 @@ interface ProcessedProjectItem extends ProjectItem {
   newAttachmentFile?: Attachment[]
 }
 
+const { t: $t } = useI18n()
 const loading = ref(false)
 const tableData = ref<ProcessedProjectItem[]>([])
 const total = ref(0)
@@ -73,7 +74,7 @@ const handleSelectionChange = (row: ProjectItem[]) => {
 const getTable = debounce(async () => {
   loading.value = true
   try {
-    const res = await TableApi({
+    const res = await ListApi({
       ...pagination.value,
       ...queryForm.value
     })
@@ -93,7 +94,7 @@ const getTable = debounce(async () => {
 // 新增和修改
 const handleEdit = (row?: ProjectItem) => {
   editDialogRef.value.open()
-  queueMicrotask(() => {
+  nextTick(() => {
     ruleFormRef.value?.resetFields()
     const matched = objectMatchAssign(ruleForm.value, row)
     ruleForm.value = matched
@@ -107,6 +108,34 @@ const handleEdit = (row?: ProjectItem) => {
   })
 }
 
+const handleDelete = (row: ProjectItem) => {
+  ElMessageBox.confirm('<p style="color: #f30">请注意，您尚未保存的数据将会丢失。</p>', '确定要删除吗？', {
+    dangerouslyUseHTMLString: true,
+    confirmButtonType: 'danger',
+    confirmButtonText: $t('global.action.confirm'),
+    cancelButtonText: $t('global.action.cancel')
+  })
+    .then(async () => {
+      loading.value = true
+      try {
+        await DelApi(row.id)
+        ElMessage({
+          message: '',
+          grouping: true,
+          showClose: true,
+          type: 'success'
+        })
+        editDialogRef.value.close()
+        getTable()
+      } catch (err) {
+        console.error(err)
+      } finally {
+        loading.value = false
+      }
+    })
+    .catch(() => {})
+}
+
 // 提交表单
 const submitForm = () => {
   ruleFormRef.value?.validate(async (valid) => {
@@ -120,6 +149,8 @@ const submitForm = () => {
           showClose: true,
           type: 'success'
         })
+        editDialogRef.value.close()
+        getTable()
       } catch (err) {
         console.error(err)
       } finally {
@@ -130,14 +161,20 @@ const submitForm = () => {
 }
 
 onActivated(() => {
-  console.log(route.meta)
+  console.log(route.meta) // 获取路由元信息
   getTable()
 })
 </script>
 
 <template>
   <!-- 编辑弹窗 -->
-  <JnDialog ref="editDialogRef" title="项目管理" width="600px">
+  <JnDialog
+    ref="editDialogRef"
+    title="项目管理"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="true"
+  >
     <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">
@@ -342,9 +379,10 @@ onActivated(() => {
           <PdfView :loadKeys="row.newAttachmentFile" isPdf />
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="100" align="center" fixed="right">
+      <el-table-column label="操作" width="120" align="center" fixed="right">
         <template #default="{ row }">
           <el-button link type="primary" @click.stop="handleEdit(row)">编辑</el-button>
+          <el-button link type="danger" @click.stop="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </JnTable>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TableApi } from '@/api/demos/index'
+import { ListApi } 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'
@@ -8,7 +8,7 @@ import DictTag from '@/components/common/DictTag.vue'
 </script>
 
 <template>
-  <CardTable :getTableDataApi="TableApi">
+  <CardTable :getTableDataApi="ListApi">
     <template #header>项目列表</template>
     <template #table>
       <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip />

package/jnrs-vue/src/views/home/index.vue

@@ -1,9 +1,318 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onActivated, onDeactivated } from 'vue'
+import { formatDateTime, formatWeekday, formatGreeting } from '@jnrs/shared'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+import { handleRouter } from '@jnrs/vue-core/router'
+import ImageView from '@/components/common/ImageView.vue'
+
+const { userInfo } = useAuthStore()
+
+// 当前时间
+const currentTime = ref('0000-00-00 00:00:00')
+let timer: ReturnType<typeof setInterval>
+
+// 格式化时间
+const formattedTime = computed(() => {
+  const d = currentTime.value
+  return {
+    date: d.split(' ')[0],
+    time: d.split(' ')[1],
+    weekday: formatWeekday(),
+    greeting: formatGreeting()
+  }
+})
+
+// 统计卡片配置
+const statCards = [
+  { titleKey: 'home.quickEntry.unitTest', path: '/unitTest', icon: 'IceCreamSquare', value: 999 },
+  { titleKey: 'home.quickEntry.simpleTable', path: '/simpleTable', icon: 'Box', value: 1 },
+  { titleKey: 'home.quickEntry.crud', path: '/crud', icon: 'Notification', value: 22 },
+  { titleKey: 'home.quickEntry.visual', path: '/visual', icon: 'Cpu', value: 0 }
+]
+
+// 快捷入口配置
+const quickEntries = [
+  { titleKey: 'home.quickEntry.unitTest', path: '/unitTest', icon: 'IceCreamSquare', color: '#409eff' },
+  { titleKey: 'home.quickEntry.simpleTable', path: '/simpleTable', icon: 'Box', color: '#67c23a' },
+  { titleKey: 'home.quickEntry.crud', path: '/crud', icon: 'Notification', color: '#e6a23c' },
+  { titleKey: 'home.quickEntry.visual', path: '/visual', icon: 'Cpu', color: '#9c27b0' }
+]
+
+// 跳转页面
+const navigateTo = (path: string) => {
+  handleRouter({ path })
+}
+
+onActivated(() => {
+  timer = setInterval(() => {
+    currentTime.value = formatDateTime()
+  }, 1000)
+})
+
+onDeactivated(() => {
+  clearInterval(timer)
+})
 </script>
 
 <template>
-  <div>欢迎使用</div>
+  <div class="home-page">
+    <!-- 顶部欢迎区域 -->
+    <el-card shadow="never" class="welcome-card">
+      <div class="welcome-content">
+        <div class="welcome-left">
+          <div class="avatar-wrapper">
+            <ImageView v-if="userInfo?.avatarFileName" class="avatar" :loadKeys="userInfo.avatarFileName" />
+            <img v-else class="avatar" src="@/assets/images/common/avatar.png" alt="avatar" />
+          </div>
+          <div class="welcome-info">
+            <div class="welcome-text">
+              <span class="name">{{ userInfo?.name || $t('home.welcome.defaultName') }}</span>
+              <span class="greeting">，{{ formattedTime?.greeting }}</span>
+            </div>
+            <div class="welcome-meta">
+              <span class="account">{{ $t('home.welcome.accountLabel') }}{{ userInfo?.account }}</span>
+              <span class="divider">|</span>
+              <span class="login-time">{{ $t('home.welcome.lastLoginLabel') }}{{ userInfo?.loginDateTime }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="welcome-right">
+          <div class="time-display">
+            <div class="time">{{ formattedTime.time }}</div>
+            <div class="date-info">
+              <span class="date">{{ formattedTime.date }}</span>
+              <span class="weekday">{{ formattedTime.weekday }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 统计卡片 -->
+    <el-row :gutter="16" class="stats-row">
+      <el-col :span="6" v-for="item in statCards" :key="item.path">
+        <el-card shadow="never" class="stat-card" @click="navigateTo(item.path)">
+          <div class="stat-content">
+            <div class="stat-icon" :style="{ background: `var(--jnrs-color-primary-005)` }">
+              <el-icon :size="28"><component :is="item.icon" /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-value">{{ item.value }}</div>
+              <div class="stat-label">{{ $t(item.titleKey) }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 快捷入口 -->
+    <el-card shadow="never" class="section-card">
+      <template #header>
+        <div class="section-header">
+          <span class="section-title">{{ $t('home.section.quickEntryTitle') }}</span>
+        </div>
+      </template>
+      <div class="quick-entries">
+        <div class="entry-item" v-for="entry in quickEntries" :key="entry.path" @click="navigateTo(entry.path)">
+          <div class="entry-icon" :style="{ background: entry.color + '15', color: entry.color }">
+            <el-icon :size="24"><component :is="entry.icon" /></el-icon>
+          </div>
+          <div class="entry-title">{{ $t(entry.titleKey) }}</div>
+        </div>
+      </div>
+    </el-card>
+  </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home-page {
+  padding-bottom: 20px;
+}
+
+// 欢迎卡片
+.welcome-card {
+  margin-bottom: 16px;
+
+  :deep(.el-card__body) {
+    padding: 24px;
+  }
+
+  .welcome-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .welcome-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .avatar-wrapper {
+    .avatar {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 4px solid var(--jnrs-color-primary-01);
+    }
+  }
+
+  .welcome-info {
+    .welcome-text {
+      font-size: 20px;
+      margin-bottom: 8px;
+
+      .name {
+        font-weight: 600;
+        color: var(--jnrs-color-primary);
+      }
+
+      .greeting {
+        color: var(--jnrs-font-primary-08);
+      }
+    }
+
+    .welcome-meta {
+      font-size: 13px;
+      color: var(--jnrs-font-primary-06);
+
+      .divider {
+        margin: 0 12px;
+        color: var(--jnrs-font-primary-02);
+      }
+    }
+  }
+
+  .welcome-right {
+    .time-display {
+      text-align: right;
+
+      .time {
+        font-size: 32px;
+        font-weight: 600;
+        font-family: monospace;
+        color: var(--jnrs-color-primary);
+        letter-spacing: 2px;
+      }
+
+      .date-info {
+        margin-top: 4px;
+        font-size: 14px;
+        color: var(--jnrs-font-primary-06);
+
+        .date {
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+}
+
+// 统计卡片
+.stats-row {
+  margin-bottom: 16px;
+}
+
+.stat-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+
+  :deep(.el-card__body) {
+    padding: 20px;
+  }
+
+  .stat-content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .stat-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--jnrs-color-primary);
+  }
+
+  .stat-info {
+    .stat-value {
+      font-size: 28px;
+      font-weight: 600;
+      color: var(--jnrs-font-primary);
+      line-height: 1.2;
+    }
+
+    .stat-label {
+      font-size: 14px;
+      color: var(--jnrs-font-primary-06);
+      margin-top: 4px;
+    }
+  }
+}
+
+// 区块卡片
+.section-card {
+  margin-bottom: 16px;
+
+  .section-header {
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--jnrs-font-primary);
+    }
+  }
+}
+
+// 快捷入口
+.quick-entries {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 16px;
+
+  .entry-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: var(--jnrs-background-primary);
+
+    &:hover {
+      background: var(--jnrs-color-primary-005);
+      transform: translateY(-2px);
+
+      .entry-icon {
+        transform: scale(1.1);
+      }
+    }
+
+    .entry-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 12px;
+      transition: transform 0.3s ease;
+    }
+
+    .entry-title {
+      font-size: 14px;
+      color: var(--jnrs-font-primary-08);
+      text-align: center;
+    }
+  }
+}
+</style>

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

@@ -261,7 +261,7 @@ const submitForm = async () => {
 
       .greeting {
         position: relative;
-        color: var(--jnrs-color-primary-06);
+        color: var(--jnrs-color-primary-05);
         font-size: 14px;
         text-align: center;
         text-transform: uppercase;
@@ -274,7 +274,7 @@ const submitForm = async () => {
           top: 50%;
           width: 35%;
           height: 1px;
-          background: var(--jnrs-color-primary-06);
+          background: var(--jnrs-color-primary-05);
           transform: translateY(-50%);
           filter: opacity(0.25);
         }

package/jnrs-vue/vite.config.ts

@@ -66,6 +66,7 @@ export default defineConfig({
           '@jnrs/shared': ['@jnrs/shared']
         }
       }
-    }
+    },
+    chunkSizeWarningLimit: 5000 // chunk 阈值警告，默认 5000 kb
   }
 })

package/jnrs-vue/viteMockServe/fail.ts

@@ -2,7 +2,7 @@ import type { IncomingMessage, ServerResponse } from 'http'
 
 const res_fail = {
   code: 1,
-  msg: '操作失败'
+  msg: 'mock msg：操作失败'
 }
 
 export default [
@@ -12,7 +12,7 @@ export default [
     method: 'get',
     rawResponse: async (req: IncomingMessage, res: ServerResponse) => {
       res.statusCode = 404
-      res.end('File not found')
+      res.end('mock msg：文件不存在')
       return
     }
   },
@@ -23,7 +23,7 @@ export default [
     response: () => {
       return {
         code: 3,
-        msg: '暂无权限'
+        msg: 'mock msg：暂无权限'
       }
     }
   },

package/jnrs-vue/viteMockServe/file.ts

@@ -23,7 +23,7 @@ export default [
     rawResponse: async (req: IncomingMessage, res: ServerResponse) => {
       if (!req.url) {
         res.statusCode = 400
-        res.end('Bad Request')
+        res.end('mock msg：Bad Request')
         return
       }
 
@@ -38,13 +38,13 @@ export default [
 
         if (!filePath.startsWith(fileDir + path.sep) && filePath !== fileDir) {
           res.statusCode = 403
-          res.end('Forbidden')
+          res.end('mock msg：Forbidden')
           return
         }
 
         if (!fs.existsSync(filePath)) {
           res.statusCode = 404
-          res.end('File not found')
+          res.end('mock msg：File not found')
           return
         }
 
@@ -60,7 +60,7 @@ export default [
       } catch (error) {
         console.error('Mock file serve error:', error)
         res.statusCode = 500
-        res.end('Internal Server Error')
+        res.end('mock msg：Internal Server Error')
       }
     }
   }

package/jnrs-vue/viteMockServe/success.ts

@@ -1,6 +1,6 @@
 const res_success = {
   code: 0,
-  msg: '操作成功'
+  msg: 'mock msg：操作成功'
 }
 
 export default [
@@ -35,5 +35,13 @@ export default [
     response: () => {
       return res_success
     }
+  },
+  // 数据删除
+  {
+    url: /^\/mock\/demos\/delete\/[a-zA-Z0-9-]+$/,
+    method: 'delete',
+    response: () => {
+      return res_success
+    }
   }
 ]

package/package.json

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