create-koa-boot 1.0.0

package/templates/example/frontend/src/styles/index.scss

@@ -0,0 +1,284 @@
+/* 全局样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #303133;
+  background-color: #f5f7fa;
+}
+
+/* ElementUI Plus 主题变量 */
+:root {
+  /* 主色调 */
+  --el-color-primary: #409EFF;
+  --el-color-primary-light-3: #73C0FF;
+  --el-color-primary-light-5: #A0D9FF;
+  --el-color-primary-light-7: #C6EFFF;
+  --el-color-primary-light-8: #D9EEFF;
+  --el-color-primary-light-9: #ECF5FF;
+  --el-color-primary-dark-2: #337ECC;
+  
+  /* 辅助色 */
+  --el-color-success: #67C23A;
+  --el-color-warning: #E6A23C;
+  --el-color-danger: #F56C6C;
+  --el-color-info: #909399;
+  
+  /* 中性色 */
+  --el-color-black: #000000;
+  --el-color-white: #FFFFFF;
+  --el-color-gray-1: #F5F7FA;
+  --el-color-gray-2: #E4E7ED;
+  --el-color-gray-3: #DCDFE6;
+  --el-color-gray-4: #C0C4CC;
+  --el-color-gray-5: #909399;
+  --el-color-gray-6: #606266;
+  --el-color-gray-7: #303133;
+  --el-color-gray-8: #1E1E1E;
+  
+  /* 字体大小 */
+  --el-font-size-extra-large: 20px;
+  --el-font-size-large: 18px;
+  --el-font-size-medium: 16px;
+  --el-font-size-base: 14px;
+  --el-font-size-small: 13px;
+  --el-font-size-extra-small: 12px;
+  
+  /* 边框圆角 */
+  --el-border-radius-base: 4px;
+  --el-border-radius-small: 2px;
+  --el-border-radius-round: 20px;
+  --el-border-radius-circle: 100%;
+  
+  /* 边框颜色 */
+  --el-border-color-light: #E4E7ED;
+  --el-border-color: #DCDFE6;
+  --el-border-color-dark: #C0C4CC;
+  
+  /* 背景色 */
+  --el-bg-color: #FFFFFF;
+  --el-bg-color-page: #F2F3F5;
+  --el-bg-color-overlay: #FFFFFF;
+  
+  /* 文字颜色 */
+  --el-text-color-primary: #303133;
+  --el-text-color-regular: #606266;
+  --el-text-color-secondary: #909399;
+  --el-text-color-placeholder: #C0C4CC;
+  --el-text-color-disabled: #C0C4CC;
+  
+  /* 阴影 */
+  --el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --el-box-shadow-lighter: 0 0 12px rgba(0, 0, 0, 0.06);
+  --el-box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
+}
+
+/* 自定义样式 */
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  background-color: var(--el-bg-color-page);
+}
+
+/* 卡片样式 */
+.card {
+  background-color: var(--el-bg-color);
+  border-radius: var(--el-border-radius-base);
+  box-shadow: var(--el-box-shadow-light);
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+/* 表单样式 */
+.form-item {
+  margin-bottom: 16px;
+}
+
+/* 按钮样式 */
+.btn {
+  margin-right: 8px;
+}
+
+/* 表格样式 */
+.table-container {
+  background-color: var(--el-bg-color);
+  border-radius: var(--el-border-radius-base);
+  box-shadow: var(--el-box-shadow-light);
+  overflow: hidden;
+}
+
+/* 分页样式 */
+.pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+
+/* 标签样式 */
+.tag {
+  margin-right: 8px;
+}
+
+/* 徽章样式 */
+.badge {
+  margin-right: 8px;
+}
+
+/* 工具类 */
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.mt-1 {
+  margin-top: 8px;
+}
+
+.mt-2 {
+  margin-top: 16px;
+}
+
+.mt-3 {
+  margin-top: 24px;
+}
+
+.mb-1 {
+  margin-bottom: 8px;
+}
+
+.mb-2 {
+  margin-bottom: 16px;
+}
+
+.mb-3 {
+  margin-bottom: 24px;
+}
+
+.ml-1 {
+  margin-left: 8px;
+}
+
+.ml-2 {
+  margin-left: 16px;
+}
+
+.ml-3 {
+  margin-left: 24px;
+}
+
+.mr-1 {
+  margin-right: 8px;
+}
+
+.mr-2 {
+  margin-right: 16px;
+}
+
+.mr-3 {
+  margin-right: 24px;
+}
+
+.p-1 {
+  padding: 8px;
+}
+
+.p-2 {
+  padding: 16px;
+}
+
+.p-3 {
+  padding: 24px;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .container {
+    padding: 10px;
+  }
+  
+  .card {
+    padding: 15px;
+  }
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--el-color-gray-1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--el-color-gray-3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--el-color-gray-4);
+}
+
+/* 加载动画 */
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+}
+
+/* 空状态 */
+.empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+  color: var(--el-color-gray-5);
+}
+
+/* 错误状态 */
+.error {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+  color: var(--el-color-danger);
+}
+
+/* 成功状态 */
+.success {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+  color: var(--el-color-success);
+}
+
+/* 警告状态 */
+.warning {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+  color: var(--el-color-warning);
+}

package/templates/example/frontend/src/types/index.ts

@@ -0,0 +1,135 @@
+export interface UserInfo {
+  id: string
+  username: string
+  name: string
+  phone: string
+  email: string
+  avatar: string
+  departmentId: string
+  status: string
+  createdAt: string
+  updatedAt: string
+  roles: RoleInfo[]
+}
+
+export interface RoleInfo {
+  id: string
+  code: string
+  name: string
+  description: string
+  sort: number
+  status: string
+  createdAt: string
+  updatedAt: string
+  permissions: PermissionInfo[]
+}
+
+export interface PermissionInfo {
+  id: string
+  code: string
+  name: string
+  type: string
+  description: string
+  parentId: string
+  path: string
+  method: string
+  icon?: string
+  sort: number
+  status: string
+  createdAt: string
+  updatedAt: string
+  children?: PermissionInfo[]
+}
+
+export interface DepartmentInfo {
+  id: string
+  name: string
+  code: string
+  parentId: string
+  leaderId: string
+  phone: string
+  sort: number
+  status: string
+  createdAt: string
+  updatedAt: string
+  children?: DepartmentInfo[]
+}
+
+export interface DictTypeInfo {
+  id: string
+  code: string
+  name: string
+  description: string
+  status: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface DictItemInfo {
+  id: string
+  typeId: string
+  typeCode?: string
+  typeName?: string
+  label: string
+  value: string
+  cssClass: string
+  sort: number
+  status: string
+  description: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface OperationLogInfo {
+  id: string
+  userId: string
+  username: string
+  module: string
+  action: string
+  targetType: string
+  targetId: string
+  description: string
+  requestMethod: string
+  requestUrl: string
+  requestIp: string
+  requestBody: string
+  responseCode: number
+  duration: number
+  status: string
+  errorMsg: string
+  createdAt: string
+}
+
+export interface LoginLogInfo {
+  id: string
+  userId: string
+  username: string
+  action: string
+  ip: string
+  userAgent: string
+  os: string
+  browser: string
+  status: string
+  message: string
+  createdAt: string
+}
+
+export interface PaginationParams {
+  page: number
+  pageSize: number
+  keyword?: string
+}
+
+export interface PaginationResult<T> {
+  list: T[]
+  total: number
+  page: number
+  pageSize: number
+  pages: number
+}
+
+export interface ResponseResult<T> {
+  code: number
+  message: string
+  data: T
+}

package/templates/example/frontend/src/utils/dateFormat.ts

@@ -0,0 +1,39 @@
+/**
+ * 时间字段格式化工具
+ * 后端返回的 ISO 时间字符串（如 2026-08-12T12:33:58.000Z）统一转为可读格式：
+ * - UTC 零点视为纯日期字段（如预计到货日期，数据库 date 类型）→ YYYY-MM-DD
+ * - 其余时间字段 → 本地时区 YYYY-MM-DD HH:mm:ss
+ */
+
+const ISO_DATETIME_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?Z$/
+
+const pad2 = (n: number) => String(n).padStart(2, '0')
+
+/** 单个 ISO 时间字符串转可读格式（非 ISO 字符串原样返回） */
+export function formatIsoDateTime(value: string): string {
+  const match = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2})(?:\.\d{1,3})?Z$/.exec(value)
+  if (!match || !match[1] || !match[2]) return value
+  // 纯日期字段：UTC 零点直接输出日期，避免转本地时区后变成 08:00:00
+  if (match[2] === '00:00:00') return match[1]
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return value
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} ${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`
+}
+
+/** 递归转换对象中的 ISO 时间字符串（原地修改，幂等：转换后不再匹配 ISO 格式） */
+export function transformDateTimeFields(obj: unknown): void {
+  if (obj === null || typeof obj !== 'object') return
+  if (Array.isArray(obj)) {
+    for (const item of obj) transformDateTimeFields(item)
+    return
+  }
+  const record = obj as Record<string, unknown>
+  for (const key of Object.keys(record)) {
+    const value = record[key]
+    if (typeof value === 'string' && ISO_DATETIME_RE.test(value)) {
+      record[key] = formatIsoDateTime(value)
+    } else if (value !== null && typeof value === 'object') {
+      transformDateTimeFields(value)
+    }
+  }
+}

package/templates/example/frontend/src/utils/echarts.ts

@@ -0,0 +1,49 @@
+import * as echarts from 'echarts/core'
+import { LineChart, BarChart, PieChart, MapChart, EffectScatterChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  GeoComponent
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import type { ECharts, EChartsCoreOption } from 'echarts/core'
+
+// 按需注册：折线图 / 柱状图 / 饼图 / 地图（geo 坐标系承载散点标注）+ 常用组件
+echarts.use([
+  LineChart,
+  BarChart,
+  PieChart,
+  MapChart,
+  EffectScatterChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  GeoComponent,
+  CanvasRenderer
+])
+
+/**
+ * 在指定 DOM 元素上初始化 ECharts 实例，并自动处理窗口尺寸变化。
+ * 组件卸载时应调用返回对象的 dispose() 释放资源。
+ */
+export function useEChart(el: HTMLElement): { chart: ECharts; dispose: () => void } {
+  const chart = echarts.init(el)
+  const onResize = () => chart.resize()
+  window.addEventListener('resize', onResize)
+  return {
+    chart,
+    dispose: () => {
+      window.removeEventListener('resize', onResize)
+      chart.dispose()
+    }
+  }
+}
+
+export type { ECharts, EChartsCoreOption }

package/templates/example/frontend/src/views/ModulePlaceholder.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-card shadow="hover">
+    <template #header><span>{{ moduleName }}</span></template>
+    <el-empty description="模块开发中，敬请期待..." :image-size="120" />
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const moduleName = computed(
+  () => (route.meta.title as string) || '功能模块'
+)
+</script>

package/templates/example/frontend/src/views/ParentView.vue

@@ -0,0 +1,19 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <transition name="fade" mode="out-in">
+      <component :is="Component" />
+    </transition>
+  </router-view>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>