ERP 组件库

Appearance

🎨 主题定制 ​

ERP组件库提供了强大而灵活的主题定制系统，让您轻松打造符合品牌风格的界面。

🌈 设计理念 ​

我们的主题系统基于以下设计理念：

  • 一致性 - 统一的设计语言和视觉规范
  • 灵活性 - 支持深度定制和品牌化
  • 可访问性 - 符合无障碍设计标准
  • 响应式 - 适配各种设备和屏幕尺寸

🎯 快速开始 ​

基础主题配置 ​

通过CSS变量快速定制主题：

css
:root {
  /* 品牌色彩 */
  --fk-color-primary: #667eea;
  --fk-color-primary-light: #8b9df0;
  --fk-color-primary-dark: #4c63d2;
  
  /* 功能色彩 */
  --fk-color-success: #28a745;
  --fk-color-warning: #ffc107;
  --fk-color-danger: #dc3545;
  --fk-color-info: #17a2b8;
  
  /* 中性色彩 */
  --fk-color-text-primary: #2c3e50;
  --fk-color-text-secondary: #6c757d;
  --fk-color-text-placeholder: #adb5bd;
  --fk-color-border: #dee2e6;
  --fk-color-background: #ffffff;
  --fk-color-background-light: #f8f9fa;
  
  /* 字体系统 */
  --fk-font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --fk-font-size-xs: 12px;
  --fk-font-size-sm: 14px;
  --fk-font-size-base: 16px;
  --fk-font-size-lg: 18px;
  --fk-font-size-xl: 20px;
  
  /* 间距系统 */
  --fk-spacing-xs: 4px;
  --fk-spacing-sm: 8px;
  --fk-spacing-md: 16px;
  --fk-spacing-lg: 24px;
  --fk-spacing-xl: 32px;
  
  /* 圆角系统 */
  --fk-border-radius-sm: 4px;
  --fk-border-radius-base: 6px;
  --fk-border-radius-lg: 8px;
  --fk-border-radius-xl: 12px;
  
  /* 阴影系统 */
  --fk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --fk-shadow-base: 0 4px 6px rgba(0, 0, 0, 0.1);
  --fk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --fk-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* 动画系统 */
  --fk-transition-fast: 0.15s ease;
  --fk-transition-base: 0.3s ease;
  --fk-transition-slow: 0.5s ease;
}

深色模式 ​

支持自动切换和手动控制的深色模式：

css
[data-theme='dark'] {
  /* 深色模式色彩 */
  --fk-color-text-primary: #ffffff;
  --fk-color-text-secondary: #e9ecef;
  --fk-color-text-placeholder: #6c757d;
  --fk-color-border: #495057;
  --fk-color-background: #1a1a1a;
  --fk-color-background-light: #2d3748;
  
  /* 深色模式下的品牌色调整 */
  --fk-color-primary: #7c8df0;
  --fk-color-primary-light: #9ca8f3;
  --fk-color-primary-dark: #5a6fd8;
}

/* 自动深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --fk-color-text-primary: #ffffff;
    --fk-color-text-secondary: #e9ecef;
    --fk-color-background: #1a1a1a;
    --fk-color-background-light: #2d3748;
  }
}

🎨 预设主题 ​

我们提供了多套精心设计的预设主题：

科技蓝主题 ​

css
:root {
  --fk-color-primary: #0066cc;
  --fk-color-primary-light: #3385d6;
  --fk-color-primary-dark: #0052a3;
  --fk-gradient-primary: linear-gradient(135deg, #0066cc 0%, #004499 100%);
}

商务绿主题 ​

css
:root {
  --fk-color-primary: #28a745;
  --fk-color-primary-light: #5cb85c;
  --fk-color-primary-dark: #1e7e34;
  --fk-gradient-primary: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

优雅紫主题 ​

css
:root {
  --fk-color-primary: #6f42c1;
  --fk-color-primary-light: #8a63d2;
  --fk-color-primary-dark: #59359a;
  --fk-gradient-primary: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
}

🔧 高级定制 ​

组件级别定制 ​

针对特定组件进行深度定制：

css
/* 按钮组件定制 */
.fk-button {
  --button-height: 40px;
  --button-padding: 0 20px;
  --button-font-weight: 500;
  --button-border-width: 1px;
  --button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fk-button--primary {
  --button-bg: var(--fk-gradient-primary);
  --button-border: transparent;
  --button-color: #ffffff;
  --button-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.fk-button--primary:hover {
  --button-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
  transform: translateY(-2px);
}

/* 输入框组件定制 */
.fk-input {
  --input-height: 40px;
  --input-padding: 0 12px;
  --input-border-radius: var(--fk-border-radius-base);
  --input-border-color: var(--fk-color-border);
  --input-focus-border-color: var(--fk-color-primary);
  --input-focus-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 表格组件定制 */
.fk-table {
  --table-border-color: var(--fk-color-border);
  --table-header-bg: var(--fk-color-background-light);
  --table-row-hover-bg: rgba(102, 126, 234, 0.05);
  --table-stripe-bg: rgba(0, 0, 0, 0.02);
}

响应式主题 ​

根据屏幕尺寸调整主题：

css
/* 移动端适配 */
@media (max-width: 768px) {
  :root {
    --fk-font-size-base: 14px;
    --fk-spacing-md: 12px;
    --fk-spacing-lg: 16px;
    --fk-border-radius-base: 4px;
  }
  
  .fk-button {
    --button-height: 36px;
    --button-padding: 0 16px;
  }
  
  .fk-input {
    --input-height: 36px;
  }
}

/* 大屏幕优化 */
@media (min-width: 1200px) {
  :root {
    --fk-font-size-base: 16px;
    --fk-spacing-lg: 32px;
    --fk-spacing-xl: 48px;
  }
}

🎭 动态主题切换 ​

JavaScript API ​

通过JavaScript动态切换主题：

typescript
// 主题管理器
class ThemeManager {
  private currentTheme: string = 'light'
  
  // 切换主题
  switchTheme(theme: 'light' | 'dark' | 'auto') {
    document.documentElement.setAttribute('data-theme', theme)
    this.currentTheme = theme
    localStorage.setItem('theme', theme)
  }
  
  // 获取当前主题
  getCurrentTheme(): string {
    return this.currentTheme
  }
  
  // 初始化主题
  initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'auto'
    if (savedTheme === 'auto') {
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      this.switchTheme(prefersDark ? 'dark' : 'light')
    } else {
      this.switchTheme(savedTheme as any)
    }
  }
  
  // 监听系统主题变化
  watchSystemTheme() {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      if (this.currentTheme === 'auto') {
        this.switchTheme(e.matches ? 'dark' : 'light')
      }
    })
  }
}

// 使用示例
const themeManager = new ThemeManager()
themeManager.initTheme()
themeManager.watchSystemTheme()

// 切换到深色模式
themeManager.switchTheme('dark')

Vue组件示例 ​

创建主题切换组件：

vue
<template>
  <div class="theme-switcher">
    <button 
      v-for="theme in themes" 
      :key="theme.value"
      class="theme-button"
      :class="{ active: currentTheme === theme.value }"
      @click="switchTheme(theme.value)"
    >
      <component :is="theme.icon" />
      {{ theme.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface Theme {
  value: string
  label: string
  icon: string
}

const themes: Theme[] = [
  { value: 'light', label: '浅色', icon: 'sun-icon' },
  { value: 'dark', label: '深色', icon: 'moon-icon' },
  { value: 'auto', label: '自动', icon: 'auto-icon' }
]

const currentTheme = ref('light')

const switchTheme = (theme: string) => {
  currentTheme.value = theme
  document.documentElement.setAttribute('data-theme', theme)
  localStorage.setItem('theme', theme)
}

onMounted(() => {
  const savedTheme = localStorage.getItem('theme') || 'auto'
  currentTheme.value = savedTheme
  switchTheme(savedTheme)
})
</script>

<style scoped>
.theme-switcher {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: var(--fk-color-background-light);
  border-radius: var(--fk-border-radius-lg);
  border: 1px solid var(--fk-color-border);
}

.theme-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--fk-border-radius-base);
  color: var(--fk-color-text-secondary);
  font-size: var(--fk-font-size-sm);
  cursor: pointer;
  transition: var(--fk-transition-base);
}

.theme-button:hover {
  background: var(--fk-color-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.theme-button.active {
  background: var(--fk-color-primary);
  color: #ffffff;
  box-shadow: var(--fk-shadow-sm);
}
</style>

🎨 品牌定制 ​

企业品牌色彩 ​

根据企业VI定制品牌色彩：

css
/* 企业品牌主题 */
:root {
  /* 主品牌色 */
  --brand-primary: #your-brand-color;
  --brand-secondary: #your-secondary-color;
  --brand-accent: #your-accent-color;
  
  /* 应用到组件 */
  --fk-color-primary: var(--brand-primary);
  --fk-color-secondary: var(--brand-secondary);
  
  /* 渐变效果 */
  --fk-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  --fk-gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
}

Logo和图标定制 ​

css
/* Logo定制 */
.fk-logo {
  --logo-height: 40px;
  --logo-width: auto;
  content: url('path/to/your/logo.svg');
}

/* 图标主题色 */
.fk-icon {
  --icon-color: var(--fk-color-primary);
  --icon-size: 16px;
}

.fk-icon--primary {
  color: var(--fk-color-primary);
}

.fk-icon--secondary {
  color: var(--fk-color-text-secondary);
}

📱 移动端适配 ​

触摸友好设计 ​

css
/* 移动端触摸优化 */
@media (max-width: 768px) {
  .fk-button {
    --button-height: 44px; /* 符合触摸标准 */
    --button-padding: 0 20px;
    --button-font-size: 16px; /* 防止缩放 */
  }
  
  .fk-input {
    --input-height: 44px;
    --input-font-size: 16px;
  }
  
  .fk-table {
    --table-font-size: 14px;
    --table-cell-padding: 8px;
  }
}

/* 触摸反馈 */
.fk-button:active {
  transform: scale(0.98);
}

.fk-card:active {
  transform: scale(0.99);
}

🔍 调试工具 ​

主题调试面板 ​

vue
<template>
  <div class="theme-debug-panel" v-if="showDebug">
    <h3>主题调试面板</h3>
    
    <div class="debug-section">
      <h4>色彩系统</h4>
      <div class="color-palette">
        <div 
          v-for="color in colors" 
          :key="color.name"
          class="color-item"
          :style="{ backgroundColor: `var(${color.variable})` }"
        >
          <span class="color-name">{{ color.name }}</span>
          <span class="color-value">{{ color.variable }}</span>
        </div>
      </div>
    </div>
    
    <div class="debug-section">
      <h4>字体系统</h4>
      <div class="font-samples">
        <div 
          v-for="font in fonts" 
          :key="font.name"
          class="font-item"
          :style="{ fontSize: `var(${font.variable})` }"
        >
          {{ font.name }} - {{ font.variable }}
        </div>
      </div>
    </div>
    
    <div class="debug-section">
      <h4>间距系统</h4>
      <div class="spacing-samples">
        <div 
          v-for="spacing in spacings" 
          :key="spacing.name"
          class="spacing-item"
        >
          <div 
            class="spacing-box"
            :style="{ width: `var(${spacing.variable})`, height: `var(${spacing.variable})` }"
          ></div>
          <span>{{ spacing.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showDebug = ref(false)

const colors = [
  { name: '主色', variable: '--fk-color-primary' },
  { name: '成功色', variable: '--fk-color-success' },
  { name: '警告色', variable: '--fk-color-warning' },
  { name: '危险色', variable: '--fk-color-danger' }
]

const fonts = [
  { name: '超小', variable: '--fk-font-size-xs' },
  { name: '小', variable: '--fk-font-size-sm' },
  { name: '基础', variable: '--fk-font-size-base' },
  { name: '大', variable: '--fk-font-size-lg' }
]

const spacings = [
  { name: 'XS', variable: '--fk-spacing-xs' },
  { name: 'SM', variable: '--fk-spacing-sm' },
  { name: 'MD', variable: '--fk-spacing-md' },
  { name: 'LG', variable: '--fk-spacing-lg' }
]

// 快捷键切换调试面板
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === 'T') {
    showDebug.value = !showDebug.value
  }
})
</script>

🚀 最佳实践 ​

1. 渐进式定制 ​

从基础变量开始，逐步深入定制：

css
/* 第一步：基础色彩 */
:root {
  --fk-color-primary: #your-color;
}

/* 第二步：扩展色彩 */
:root {
  --fk-color-primary-light: #lighter-color;
  --fk-color-primary-dark: #darker-color;
}

/* 第三步：组件级定制 */
.fk-button--primary {
  --button-bg: linear-gradient(135deg, var(--fk-color-primary), var(--fk-color-primary-dark));
}

2. 保持一致性 ​

使用设计令牌确保一致性：

css
/* 设计令牌 */
:root {
  /* 间距令牌 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  
  /* 应用令牌 */
  --fk-spacing-xs: var(--space-1);
  --fk-spacing-sm: var(--space-2);
  --fk-spacing-md: var(--space-4);
  --fk-spacing-lg: var(--space-6);
}

3. 性能优化 ​

避免过度使用CSS变量：

css
/* ❌ 不推荐：过度使用变量 */
.element {
  color: var(--color-1);
  background: var(--color-2);
  border: var(--border-1);
  margin: var(--margin-1);
  padding: var(--padding-1);
}

/* ✅ 推荐：合理使用变量 */
.element {
  color: var(--fk-color-primary);
  background: #ffffff;
  border: 1px solid var(--fk-color-border);
  margin: 16px;
  padding: 12px;
}

📚 更多资源 ​

通过这套完整的主题系统，您可以轻松打造出符合品牌特色的ERP界面。如果需要更多帮助，请查看我们的设计系统文档或联系我们的设计团队。

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team