样式开发文档

概述

本文档详细介绍了VJSP Vue3框架的样式处理机制和定制方法。框架采用现代化的CSS架构，结合Tailwind CSS、Less预处理器和CSS变量系统，提供灵活、可维护的样式解决方案。

样式架构

1. 样式文件结构

shell

src/styles/
├── components/           # 组件样式
│   ├── nprogress.less   # 进度条样式
│   ├── tables.less      # 表格相关样式
│   └── tools.less       # 工具类样式
├── element/              # Element Plus主题定制
│   ├── dark.less        # 暗色主题
│   └── index.less       # Element Plus主题入口
├── index.less           # 全局样式入口
└── variables.module.less # CSS变量系统

2. 样式处理流程

CSS变量定义：在variables.module.less中定义全局CSS变量
Tailwind集成：通过index.less导入Tailwind基础样式
组件样式：按功能模块组织组件样式
主题定制：Element Plus主题通过CSS变量覆盖

核心样式机制

1. CSS变量系统

框架采用CSS自定义属性（CSS Variables）作为样式基础，支持明暗主题切换。所有CSS变量定义在 [variables.module.less]文件中。

CSS变量完整表格

变量名	默认值	功能说明	主题支持
`--left-menu-max-width`	`200px`	左侧菜单最大宽度	通用
`--navbar-height`	`64px`	桌面端导航栏高度	通用
`--navbar-height-mobile`	`56px`	移动端导航栏高度	通用
`--tags-view-height`	`36px`	桌面端标签页高度	通用
`--tags-view-height-mobile`	`32px`	移动端标签页高度	通用
`--global-btn-radius`	`6px`	全局按钮圆角半径	通用
`--spacing-xs`	`4px`	超小间距，用于紧密排列	通用
`--spacing-sm`	`8px`	小间距，用于内部元素间距	通用
`--spacing-md`	`16px`	中等间距，用于常规元素间距	通用
`--spacing-lg`	`24px`	大间距，用于区块间距	通用
`--spacing-xl`	`32px`	超大间距，用于大区块间距	通用
`--font-size-xs`	`12px`	超小字体，用于辅助文本	通用
`--font-size-sm`	`14px`	小字体，用于正文内容	通用
`--font-size-md`	`16px`	中等字体，用于标题	通用
`--font-size-lg`	`18px`	大字体，用于大标题	通用
`--font-size-xl`	`20px`	超大字体，用于页面标题	通用
`--shadow-sm`	`0 1px 2px rgba(0, 0, 0, 0.05)`	小阴影，用于卡片悬浮	通用
`--shadow-md`	`0 4px 6px -1px rgba(0, 0, 0, 0.1)`	中等阴影，用于模态框	通用
`--shadow-lg`	`0 10px 15px -3px rgba(0, 0, 0, 0.1)`	大阴影，用于下拉菜单	通用
`--shadow-xl`	`0 20px 25px -5px rgba(0, 0, 0, 0.1)`	超大阴影，用于大型组件	通用
`--bg-primary`	`#ffffff`	主背景色	明亮主题
`--bg-secondary`	`#f5f7fa`	次要背景色	明亮主题
`--bg-tertiary`	`#f0f2f5`	三级背景色	明亮主题
`--bg-card`	`#ffffff`	卡片背景色	明亮主题
`--bg-hover`	`#f5f7fa`	悬停背景色	明亮主题
`--bg-active`	`#ecf5ff`	激活状态背景色	明亮主题
`--text-primary`	`#303133`	主要文本色	明亮主题
`--text-secondary`	`#606266`	次要文本色	明亮主题
`--text-tertiary`	`#909399`	三级文本色	明亮主题
`--text-disabled`	`#c0c4cc`	禁用文本色	明亮主题
`--border-color`	`#dcdfe6`	边框颜色	明亮主题
`--border-light`	`#e4e7ed`	浅色边框	明亮主题
`--border-dark`	`#c0c4cc`	深色边框	明亮主题
`--color-primary`	`#409eff`	主色调	通用
`--color-success`	`#67c23a`	成功色	通用
`--color-warning`	`#e6a23c`	警告色	通用
`--color-danger`	`#f56c6c`	危险色	通用
`--color-info`	`#909399`	信息色	通用
`--shadow-color`	`rgba(0, 0, 0, 0.1)`	阴影颜色	明亮主题
`--shadow-color-dark`	`rgba(0, 0, 0, 0.2)`	深色阴影	明亮主题
`--mask-color`	`rgba(0, 0, 0, 0.8)`	遮罩颜色	通用
`--mask-color-light`	`rgba(0, 0, 0, 0.3)`	浅色遮罩	通用
`--striped-bg`	`rgba(255, 255, 255, 0.02)`	斑马纹背景	明亮主题
`--loading-gradient`	`linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)`	加载动画渐变	明亮主题
`--bg-primary`	`#141414`	主背景色	暗色主题
`--bg-secondary`	`#1f1f1f`	次要背景色	暗色主题
`--bg-tertiary`	`#262626`	三级背景色	暗色主题
`--bg-card`	`#1f1f1f`	卡片背景色	暗色主题
`--bg-hover`	`#2a2a2a`	悬停背景色	暗色主题
`--bg-active`	`#2a2a2a`	激活状态背景色	暗色主题
`--text-primary`	`#e5e5e5`	主要文本色	暗色主题
`--text-secondary`	`#a3a3a3`	次要文本色	暗色主题
`--text-tertiary`	`#737373`	三级文本色	暗色主题
`--text-disabled`	`#525252`	禁用文本色	暗色主题
`--border-color`	`#404040`	边框颜色	暗色主题
`--border-light`	`#525252`	浅色边框	暗色主题
`--border-dark`	`#303030`	深色边框	暗色主题
`--shadow-color`	`rgba(0, 0, 0, 0.3)`	阴影颜色	暗色主题
`--shadow-color-dark`	`rgba(0, 0, 0, 0.5)`	深色阴影	暗色主题
`--transition-theme`	`0.3s ease`	主题切换过渡时间	通用
`--transition-fast`	`0.15s ease`	快速过渡动画	通用
`--transition-slow`	`0.5s ease`	慢速过渡动画	通用
`--bg-gradient-start`	`#f5f7fa`	渐变背景起始色	明亮主题
`--bg-gradient-end`	`#c3cfe2`	渐变背景结束色	明亮主题
`--card-shadow`	`0 4px 6px -1px rgba(0, 0, 0, 0.1)`	卡片阴影	明亮主题
`--primary-color`	`#409eff`	主色调	通用
`--bg-gradient-start`	`#1f1f1f`	渐变背景起始色	暗色主题
`--bg-gradient-end`	`#2a2a2a`	渐变背景结束色	暗色主题
`--card-shadow`	`0 4px 6px -1px rgba(0, 0, 0, 0.3)`	卡片阴影	暗色主题

变量使用示例

less

// 使用CSS变量
.component {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--global-btn-radius);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

// 响应式间距
.responsive-spacing {
  padding: var(--spacing-sm);

  @media (min-width: 768px) {
    padding: var(--spacing-md);
  }

  @media (min-width: 1024px) {
    padding: var(--spacing-lg);
  }
}

2. Tailwind CSS集成

框架集成了Tailwind CSS，提供原子化CSS类名：

less

// Tailwind配置扩展
tailwind.config.js中定义了：
- 颜色扩展：primary、success、warning等
- 动画配置：fade、slide等过渡效果
- 阴影系统：sm、md、lg等阴影等级
- 响应式断点：sm、md、lg、xl、2xl

3. 响应式设计

采用移动优先的响应式策略：

less

// 断点定义
@screen-sm: 640px;
@screen-md: 768px;
@screen-lg: 1024px;
@screen-xl: 1280px;
@screen-2xl: 1536px;

// 响应式工具类
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;

  @media (min-width: @screen-md) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: @screen-lg) {
    grid-template-columns: repeat(3, 1fr);
  }
}

业务模块样式开发示例（Product模块）

1. 页面布局结构

产品管理页面采用模块化布局设计：

vue

<template>
  <div class="product-container query-container">
    <!-- 筛选条件区域 -->
    <el-card class="filter-container">
      <!-- 筛选表单内容 -->
    </el-card>

    <!-- 数据展示区域 -->
    <el-card class="table-container">
      <!-- 桌面端表格视图 -->
      <div v-if="!isMobile" class="desktop-view">
        <!-- 表格组件 -->
      </div>

      <!-- 移动端卡片视图 -->
      <div v-else class="mobile-view">
        <!-- 卡片布局 -->
      </div>
    </el-card>
  </div>
</template>

2. 响应式适配实现

产品页面实现了完整的响应式适配：

桌面端布局：

使用Element Plus的表格组件展示数据
固定列宽和表头对齐优化
分页组件底部显示

移动端适配：

卡片式布局替代表格
筛选条件可折叠
触摸友好的操作按钮
上拉加载更多机制

3. 样式类名规范

产品模块采用BEM命名规范：

less

// 容器类名
.product-container {
  // 页面容器样式
}

.query-container {
  // 查询区域样式
}

.filter-container {
  // 筛选条件容器
}

.table-container {
  // 表格容器样式
}

// 移动端特定样式
.mobile-view {
  .mobile-cards-container {
    // 卡片容器
  }

  .mobile-card {
    // 单个卡片
    .card-header {
      /* 卡片头部 */
    }
    .card-content {
      /* 卡片内容 */
    }
    .card-actions {
      /* 操作区域 */
    }
  }
}

4. 动态样式处理

产品页面根据设备类型动态调整样式：

vue

<template>
  <el-form
    :inline="!isMobile"
    :label-position="isMobile ? 'top' : 'left'"
    :label-width="isMobile ? '80px' : '100px'"
  >
    <el-input
      :style="{ width: isMobile ? '100%' : '160px' }"
      :size="isMobile ? 'small' : 'default'"
    />
  </el-form>
</template>

样式定制指南

1. 主题颜色定制

修改CSS变量来定制主题颜色：

less

// 在variables.module.less中修改
:root {
  --color-primary: #your-primary-color;
  --color-success: #your-success-color;
  // ...其他颜色变量
}

2. 组件样式覆盖

通过CSS选择器覆盖Element Plus组件样式：

less

// 覆盖表格样式
.el-table {
  .el-table__header {
    th {
      background-color: var(--bg-color-secondary);
    }
  }
}

3. 响应式断点定制

在Tailwind配置中修改响应式断点：

javascript

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
}

最佳实践

1. 样式组织原则

模块化：按功能模块组织样式文件
可复用：提取通用样式为工具类
可维护：使用CSS变量和预处理器
性能优化：避免深层嵌套选择器

2. 响应式设计建议

移动优先的设计策略
使用相对单位（rem、em）
合理设置断点阈值
测试多设备兼容性

3. 主题切换实现

框架支持明暗主题切换，通过修改data-theme属性实现：

javascript

// 切换主题
document.documentElement.setAttribute('data-theme', 'dark')

常见问题

1. 样式覆盖不生效

确保样式文件加载顺序正确，自定义样式应在框架样式之后加载。

2. 移动端适配问题

使用框架提供的响应式工具类和断点系统，避免硬编码尺寸。

3. 主题切换异常

检查CSS变量定义是否完整，确保明暗主题的变量都有对应值。

总结

VJSP Vue3框架的样式系统提供了完整的解决方案，结合了现代CSS技术和最佳实践。通过CSS变量、Tailwind CSS和模块化组织，开发者可以高效地进行样式定制和业务开发。

样式开发文档 ​

概述 ​

样式架构 ​

1. 样式文件结构 ​

2. 样式处理流程 ​

核心样式机制 ​

1. CSS变量系统 ​

CSS变量完整表格 ​

变量使用示例 ​

2. Tailwind CSS集成 ​

3. 响应式设计 ​

业务模块样式开发示例（Product模块） ​

1. 页面布局结构 ​

2. 响应式适配实现 ​

3. 样式类名规范 ​

4. 动态样式处理 ​

样式定制指南 ​

1. 主题颜色定制 ​

2. 组件样式覆盖 ​

3. 响应式断点定制 ​

最佳实践 ​

1. 样式组织原则 ​

2. 响应式设计建议 ​

3. 主题切换实现 ​

常见问题 ​

1. 样式覆盖不生效 ​

2. 移动端适配问题 ​

3. 主题切换异常 ​

总结 ​

样式开发文档

概述

样式架构

1. 样式文件结构

2. 样式处理流程

核心样式机制

1. CSS变量系统

CSS变量完整表格

变量使用示例

2. Tailwind CSS集成

3. 响应式设计

业务模块样式开发示例（Product模块）

1. 页面布局结构

2. 响应式适配实现

3. 样式类名规范

4. 动态样式处理

样式定制指南

1. 主题颜色定制

2. 组件样式覆盖

3. 响应式断点定制

最佳实践

1. 样式组织原则

2. 响应式设计建议

3. 主题切换实现

常见问题

1. 样式覆盖不生效

2. 移动端适配问题

3. 主题切换异常

总结