从0到1搭建Spring Boot 开发脚手架之前端整套样式

<template>
  <el-container class="h-screen">
    <!-- 侧边栏 -->
    <el-aside width="200px" class="bg-gray-100">
      <div class="logo">后台管理系统</div>
      <el-menu
        router
        :default-active="$route.path"
        :collapse="isCollapse"
        @select="handleMenuSelect"
      >
        <template v-for="route in permissionRoutes">
          <el-sub-menu 
            v-if="route.children && route.children.length > 0"
            :key="route.path"
            :index="route.path"
          >
            <template #title>
              <el-icon><component :is="route.meta.icon" /></el-icon>
              <span>{{ route.meta.title }}</span>
            </template>
            <el-menu-item 
              v-for="child in route.children" 
              :key="child.path" 
              :index="child.path"
            >
              {{ child.meta.title }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :key="route.path" :index="route.path">
            <el-icon><component :is="route.meta.icon" /></el-icon>
            <span>{{ route.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <el-header class="flex items-center justify-between bg-white shadow">
        <div class="flex items-center">
          <el-button @click="toggleCollapse">
            <el-icon><Fold /></el-icon>
          </el-button>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item 
              v-for="item in breadcrumbs" 
              :key="item.path"
            >
              {{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <user-info />
      </el-header>

      <el-main>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePermissionStore } from '@/store/permission'

// 侧边栏折叠状态
const isCollapse = ref(false)
const toggleCollapse = () => isCollapse.value = !isCollapse.value

// 获取权限路由
const permissionStore = usePermissionStore()
const permissionRoutes = computed(() => permissionStore.routes)

// 面包屑导航
const route = useRoute()
const breadcrumbs = computed(() => route.matched.filter(r => r.meta.title))
</script>

<template>
  <div class="crud-table-container">
    <!-- 查询条件 -->
    <el-form :model="queryParams" inline class="mb-4">
      <slot name="query">
        <el-form-item 
          v-for="(item, index) in columns.filter(c => c.searchable)"
          :key="index"
          :label="item.label"
        >
          <!-- 动态生成查询控件 -->
          <component
            :is="getSearchComponent(item)"
            v-model="queryParams[item.prop]"
            v-bind="item.searchProps"
          />
        </el-form-item>
      </slot>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="mb-4">
      <el-button type="primary" @click="handleCreate">
        <el-icon><Plus /></el-icon>新增
      </el-button>
      <slot name="actions"></slot>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column 
        v-if="showSelection"
        type="selection"
        width="55"
      />
      <el-table-column 
        v-for="col in columns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
      >
        <template #default="{ row }">
          <!-- 自定义列内容 -->
          <slot :name="`col-${col.prop}`" :row="row">
            {{ formatCell(col, row) }}
          </slot>
        </template>
      </el-table-column>
      <el-table-column 
        label="操作"
        :width="actionWidth"
        fixed="right"
      >
        <template #default="{ row }">
          <el-button link @click="handleEdit(row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          <slot name="row-actions" :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="mt-4"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageSize"
      :total="page.total"
      @current-change="handlePageChange"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script setup lang="ts">
// 完整功能包括：查询/分页/排序/自定义列/操作栏/批量操作等
// 详细参数和事件请参考组件内部注释
</script>

<template>
  <el-dialog 
    v-model="visible"
    :title="title"
    width="600px"
    @closed="resetForm"
  >
    <el-form 
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item 
        v-for="field in fields"
        :key="field.prop"
        :label="field.label"
        :prop="field.prop"
      >
        <!-- 动态表单控件 -->
        <component
          :is="field.component || 'el-input'"
          v-model="formData[field.prop]"
          v-bind="field.props"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// 支持功能：动态表单生成/校验规则/自定义控件
// 支持常见组件：输入框/选择器/日期选择/树形选择/上传组件等
</script>

<template>
  <crud-table
    :columns="columns"
    :fetch-data="fetchUserList"
    @create="openCreateDialog"
    @edit="openEditDialog"
  >
    <!-- 自定义查询条件 -->
    <template #query>
      <el-form-item label="部门">
        <dept-tree-select v-model="queryParams.deptId" />
      </el-form-item>
    </template>

    <!-- 自定义状态列 -->
    <template #col-status="{ row }">
      <el-tag :type="row.status ? 'success' : 'danger'">
        {{ row.status ? '启用' : '禁用' }}
      </el-tag>
    </template>
  </crud-table>

  <!-- 编辑弹窗 -->
  <crud-form
    ref="formDialog"
    :fields="formFields"
    :rules="rules"
    @submit="handleSubmit"
  />
</template>

<script setup lang="ts">
// 完整示例包括：表格配置/表单配置/数据请求/业务逻辑
</script>

/* 修改Element Plus主题色 */
$--color-primary: #1890ff;

/* 覆盖变量 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': $--color-primary,
    )
  )
);

/* 导入Element Plus样式 */
@use "element-plus/theme-chalk/src/index.scss" as *;

/* 自定义全局样式 */
.el-menu {
  border-right: none !important;
}

.crud-table-container {
  padding: 20px;
  background: white;
  border-radius: 4px;
}

import type { Directive } from 'vue'
import { usePermissionStore } from '@/store/permission'

export const permission: Directive = {
  mounted(el, binding) {
    const { value } = binding
    const permissionStore = usePermissionStore()
    
    if (value && !permissionStore.hasPermission(value)) {
      el.parentNode?.removeChild(el)
    }
  }
}

// 增强功能：
// 1. 自动处理Loading状态
// 2. 错误消息统一处理
// 3. 支持取消重复请求
// 4. 请求重试机制

npm install element-plus @element-plus/icons-vue

import ElementPlus from 'element-plus'
import * as ElementPlusIcons from '@element-plus/icons-vue'

const app = createApp(App)

// 注册Element Plus
app.use(ElementPlus)

// 注册图标
for (const [key, component] of Object.entries(ElementPlusIcons)) {
  app.component(key, component)
}

src/
├── components/
│   ├── CrudTable.vue     # 增强型表格组件
│   ├── CrudForm.vue      # 表单弹窗组件
│   └── common/           # 通用组件（树形选择器等）
├── views/
│   ├── system/           # 系统管理模块
│   │   ├── user/         # 用户管理
│   │   └── role/         # 角色管理
│   └── demo/             # 组件示例
│       ├── TableDemo.vue  # 表格示例
│       └── FormDemo.vue   # 表单示例