CTIS-Boot-Web UI Specification

Apply UI design standards when implementing Vue 3 + Ant Design Vue components for the ctis-boot-web project.

Quick Reference

Tech Stack

• Vue 3.5.12 + Composition API (<script setup>)
• Ant Design Vue 4.2.6
• Less 4.0.0 + CSS Variables
• Vite 5.4.14

Core CSS Variables (src/styles/index.less)

@font-color: #3598ff;       // 全局通用字体色、链接色
@background-color: #1487fc; // 全局通用背景色
@border-color: #1487fc;     // 全局通用边框色

Ant Design Theme Configuration (App.vue)

<a-config-provider
  :theme="{
    token: {
      colorPrimary: '#1677ff',
    },
  }"
>

Theme Colors

Standard Page Structure

<template>
  <div class="mainBox">
    <!-- Search Area -->
    <div class="searchBar">
      <div class="formBox"><a-form>...</a-form></div>
      <div class="searchButton">...</div>
    </div>
    <!-- Action Bar -->
    <a-space class="batchBar">...</a-space>
    <!-- Table -->
    <a-table class="tableBox">...</a-table>
  </div>
</template>

Spacing Scale

Border Radius

• Buttons: 4px
• Cards: 6px

Design System

For complete design tokens (colors, typography, spacing), see references/design-system.md.

Component Patterns

For Ant Design Vue component styling and usage patterns, see references/components.md.

Layout Guidelines

For layout dimensions, responsive breakpoints, and structure, see references/layout.md.

Page Templates

For standard page templates (list pages, forms, modals), see references/page-templates.md.

Common Tasks

Creating a Standard List Page

1. Use mainBox as root container
2. Add searchBar with formBox (calc(100% - 250px)) and searchButton (230px)
3. Add batchBar for action buttons
4. Add tableBox for data table
5. Apply CSS variables for theming

<style lang="less" scoped>
.mainBox {
  background: #fff;
  padding: 16px;
  border-radius: 6px;
}
.searchBar {
  display: flex;
  .formBox { width: calc(100% - 250px); }
  .searchButton { width: 230px; margin-left: 20px; }
}
</style>

Applying Theme Colors

Use Less variables defined in the project for consistent theming:

// Correct - use Less variables
@import '@/styles/index.less';

.custom-btn {
  color: @font-color;           // #3598ff
  background: @background-color; // #1487fc
  border-color: @border-color;   // #1487fc
}

// For Ant Design components, use theme tokens
.my-component {
  :deep(.ant-btn-primary) {
    // Uses Ant Design's colorPrimary (#1677ff) by default
  }
}

Note:
- Ant Design's default primary color is #1677ff (configured in App.vue)
- Project-specific colors (#3598ff, #1487fc) are defined in src/styles/index.less
- Always use Less variables (@font-color, @background-color, @border-color) for custom styles

Mobile Responsive

Use breakpoint at 768px:

@media (max-width: 768px) {
  .searchBar {
    flex-direction: column;
    .formBox, .searchButton { width: 100%; }
  }
}

Deep Selector for Ant Design Overrides

.my-component {
  :deep(.ant-btn) {
    border-radius: 4px;
  }
}

Status Colors

Icon Mapping

ESLint/Prettier Rules

Respect project code style:
- Single quotes
- 2 space indentation
- No trailing spaces
- Semicolons required