Skip to main content
Version: Next

Basic Components

Directory​

  1. Introduction
  2. Project Structure
  3. Core Component Overview
  4. BaseInput Component Details
  5. BaseConfigSelect Component Details
  6. BaseConfigProvider Configuration Provider
  7. Component Integration Architecture
  8. Internationalization and Multi-language Support
  9. Performance Optimization Strategies
  10. Best Practices Guide
  11. Troubleshooting
  12. Summary

Introduction​

lmes-web-base is a basic UI component library designed specifically for Manufacturing Execution Systems (MES), built using the Vue 3 + TypeScript technology stack. This component library provides complete basic UI components such as form inputs, selectors, and tables, supporting seamless integration with two mainstream UI frameworks: Element Plus and Arco Design.

The core design philosophy of this component library is:

  • Consistency: Providing consistent user experience and visual style
  • Scalability: Supporting custom configuration and theme customization
  • Internationalization: Built-in multi-language support adapting to global needs
  • Accessibility: Adhering to WCAG standards to ensure accessibility
  • High Performance: Optimized rendering mechanisms and memory management

Project Structure​

Diagram Sources

Section Sources

Core Component Overview​

Component Classification System​

Diagram Sources

Major Dependencies​

Diagram Sources

Section Sources

BaseInput Component Details​

Design Philosophy and Encapsulation Mechanism​

BaseInput is a highly encapsulated basic input component customized deeply based on Element Plus's el-input, providing richer interaction capabilities and better user experience.

Core Features​

  1. Two-way Binding Support: Implements data two-way binding via v-model
  2. Event Bubble Control: Intelligent event propagation management
  3. Keyboard Event Handling: Supports specific events triggered by Enter key
  4. Internationalization Adaptation: Automatically translates placeholder text
  5. Style Isolation: Uses SCSS modularization to avoid style pollution

Props Interface Definition​

interface BaseInputProps {
  modelValue: string | number;           // Two-way binding value
  placeholder: string;                   // Input placeholder text
  readOnly: boolean;                     // Read-only state
  disabled: boolean;                     // Disabled state
  LanguageScopeKey: string;             // Internationalization scope
  onChange: Function;                   // Value change callback
  onEnter: Function;                    // Enter key press callback
}

Event Callback Mechanism​

Diagram Sources

Slot Usage Specifications​

Although BaseInput is currently used mainly as a basic input component, its design reserves slot extension capabilities:

// Slot definition example
interface BaseInputSlots {
  prefix?: VNode;                       // Input box prefix content
  suffix?: VNode;                       // Input box suffix content
  prepend?: VNode;                      // Input box prepend content
  append?: VNode;                       // Input box append content
}

Style Customization Scheme​

BaseInput uses SCSS modular design, providing complete style customization capabilities:

.baseInput {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .input {
    border-radius: 4px;
    padding: 0 6px;
    height: calc(100% - 6px);
    border: 1px solid transparent;
    transition: all 0.1s ease-in;
    
    &:focus {
      border: 1px solid #5a84ff;
    }
  }
}

Section Sources

BaseConfigSelect Component Details​

Integrated Element Plus Selector​

BaseConfigSelect is a selector component specifically used for configuring language options. It integrates Element Plus's el-select component and performs localization customization.

Functional Features​

  1. Dynamic Option Loading: Fetch language configuration list from API
  2. Default Option Support: Includes 'Follow System' and 'Original Text' options
  3. Real-time Language Switching: Supports runtime language environment changes
  4. Project-level Configuration: Extensible support for project-level configuration management

Data Flow Architecture​

Diagram Sources

Code Implementation Analysis​

// Key method parsing
const getOptions = async () => {
  const resp = await request.get('/api/v1/multiplelanguage/languagelist')
  
  const defaultOptions = [
    {
      id: 0,
      languageType: 'auto',
      enable: true,
      createDateTime: new Date().toDateString(),
      name: 'Follow System',
    },
    {
      id: 0,
      languageType: 'original',
      enable: true,
      createDateTime: new Date().toDateString(),
      name: 'Original Text',
    },
  ]
  
  options.value.push(...defaultOptions, ...resp)
  langValue.value = options.value?.[0]?.languageType
}

Section Sources

BaseConfigProvider Configuration Provider​

Element Plus Namespace Configuration​

BaseConfigProvider is a lightweight configuration provider component primarily used to set the namespace for Element Plus components, ensuring correct rendering in different project environments.

Core Functions​

  1. Namespace Injection: Automatically injects VITE_APP_NAMESPACE environment variable
  2. Configuration Passing: Passes configuration information to child components
  3. Theme Consistency: Ensures theme consistency across the entire application

Implementation Principle​

export default defineComponent({
  setup(props, { attrs, slots }) {
    const namespace = import.meta.env.VITE_APP_NAMESPACE

    return () => {
      return (
        <el-config-provider {...attrs} namespace={namespace}>
          {slots.default?.()}
        </el-config-provider>
      )
    }
  },
})

Section Sources

Component Integration Architecture​

DyForm Form Engine​

DyForm is a powerful dynamic form component supporting multiple input types and complex form layouts.

Supported Input Types​

Diagram Sources

Form Validation Integration​

DyForm has a complete built-in form validation mechanism:

const validate = () => {
  if (!formRef.value) return false
  return new Promise((resolve, reject) => {
    formRef.value?.validate((valid: boolean) => {
      if (valid) {
        resolve(true)
      } else {
        reject(false)
      }
    })
  })
}

BaseTable Component​

BaseTable is an enhanced table component based on Arco Design, providing rich features and flexible configuration options.

Core Functional Features​

  1. Virtual Scrolling: Supports high-performance rendering of large data tables
  2. Column Drag and Sort: Configurable column order adjustment
  3. Row Selection: Support for multi-select and single-select modes
  4. Custom Column Rendering: Supports slots and custom render functions
  5. Responsive Layout: Automatically adapts to different screen sizes

Performance Optimization Strategies​

Diagram Sources

Section Sources

Internationalization and Multi-language Support​

Language Management System​

lmes-web-base provides complete internationalization support, implemented based on the SDK's Language module.

Language Configuration Structure​

interface LanguageConfig {
  lang: Record<string, any>;           // Language mapping object
  key: string;                         // Language identifier
  followLang: string;                  // Follow language setting
}

Multi-language Support Process​

Diagram Sources

Language Switching Mechanism​

export const getLang = (key: string) => {
  const langMap: Record<string, any> = {
    'en-US': EN,
    th: TH,
    'zh-CN': ZH,
    original: ZH,
  }

  const langKey: Record<string, string> = {
    'en-US': 'EN',
    th: 'TH',
    'zh-CN': 'ZH',
    original: 'ZH',
  }

  return {
    lang: langMap[key] || ZH,
    key: langKey[key],
  }
}

Section Sources

Performance Optimization Strategies​

Lazy Loading and On-demand Import​

Virtual Scrolling Strategy in Large Form Scenarios​

Scenario Identification​

  1. Large Data Tables: Over 1000 rows of data
  2. Complex Form Layouts: Forms containing many nested fields
  3. Mobile Applications: Mobile devices with limited memory

Implementation Strategy​

// Virtual scrolling configuration example
const virtualListProps = {
  height: autoHeight.value,           // Visible area height
  itemHeight: 48,                     // Height per row
  buffer: 20,                         // Buffer size
  threshold: 100,                     // Trigger threshold
}

Performance Monitoring Metrics​

  • First Paint Time: < 200ms
  • Memory Usage: Stable below 50MB
  • Scroll Smoothness: FPS > 60
  • CPU Usage: < 30%

Best Practices Guide​

Reactive Data Flow Implementation​

Composition API Usage Pattern​

// Reactive state management
const useFormState = () => {
  const formData = ref({})
  const loading = ref(false)
  const errors = ref({})

  const updateField = (field: string, value: any) => {
    set(formData.value, field, value)
  }

  return {
    formData,
    loading,
    errors,
    updateField,
  }
}

Form Validation Integration​

// Validation rule definition
const validationRules = {
  required: {
    required: true,
    message: 'This field is required',
  },
  email: {
    type: 'email',
    message: 'Please enter a valid email address',
  },
  minLength: (min: number) => ({
    min,
    message: `At least ${min} characters required`,
  }),
}

Common Usage Pitfalls and Solutions​

Pitfall 1: Modifying props directly​

// ❌ Incorrect approach
const handleChange = (value: string) => {
  props.modelValue = value  // Direct modification of props
}

// ✅ Correct approach
const handleChange = (value: string) => {
  emit('update:modelValue', value)  // Update parent component via emit
}

Pitfall 2: Ignoring error handling​

// ❌ Incorrect approach
const fetchData = async () => {
  const data = await api.getData()
  return data
}

// ✅ Correct approach
const fetchData = async () => {
  try {
    const data = await api.getData()
    return data
  } catch (error) {
    console.error('Data loading failed:', error)
    throw error
  }
}

Pitfall 3: Overusing global state​

// ❌ Incorrect approach
const globalState = useGlobalState()

// ✅ Correct approach
const localState = useLocalState()
const parentState = inject('parentState')

Troubleshooting​

Common Problem Diagnosis​

Component Styles Not Taking Effect​

Symptoms: Component display abnormal or styles missing

Troubleshooting Steps:

  1. Check if SCSS files are imported correctly
  2. Verify CSS Modules configuration
  3. Confirm if theme variables are set correctly

Solution:

// Ensure correct style import
@import '~lmes-web-base/dist/style.css';

// Or use modular import
import styles from './MyComponent.module.scss';

Internationalization Text Not Displaying​

Symptoms: Text in component not translated correctly

Troubleshooting Steps:

  1. Check if LanguageScopeKey is set correctly
  2. Verify if language pack is loaded correctly
  3. Confirm _t function call location

Solution:

// Correct use of internationalization in component
const _t = getScopeT(props.LanguageScopeKey)
return _t('component.placeholder.text')

Form Validation Failure​

Symptoms: Validation rules do not take effect upon form submission

Troubleshooting Steps:

  1. Check if validation rule format is correct
  2. Confirm if formRef is bound correctly
  3. Verify field names match validation rules

Solution:

// Correct validation rule configuration
const formRules = {
  username: [
    { required: true, message: 'Username cannot be empty' },
    { min: 3, max: 20, message: 'Length between 3 and 20 characters' }
  ]
}

Performance Problem Diagnosis​

Rendering Performance Issues​

Symptoms: Page lag or slow response

Diagnostic Tools:

  • Chrome DevTools Performance
  • Vue DevTools Profiler
  • Memory Timeline

Optimization Strategy:

// Use debounce to reduce frequent updates
const debouncedUpdate = debounce((value) => {
  emit('update:modelValue', value)
}, 300)

// Enable virtual scrolling
<BaseTable 
  :isVScroll="true"
  :autoHeight="true"
/>

Summary​

The lmes-web-base basic UI component library provides a complete, efficient, and easy-to-use UI solution for MES systems through carefully designed component architecture. Its core advantages include:

Technical Advantages​

  1. Modern Technology Stack: Built based on Vue 3 Composition API and TypeScript
  2. Component-based Design: Highly modular component structure, easy to maintain and extend
  3. Performance Optimization: Built-in performance optimization mechanisms such as virtual scrolling and lazy loading
  4. Type Safety: Complete TypeScript type definitions, improving development experience

Functional Features​

  1. Unified Internationalization Support: Built-in multi-language switching and text management mechanism
  2. Flexible Configuration System: Supports theme customization and component personalization
  3. Comprehensive Form Processing: Dynamic form generation and validation mechanisms
  4. Rich Interaction Experience: Supports keyboard navigation, accessibility features, etc.

Application Value​

  • Improve Development Efficiency: Standardized component interfaces and usage methods
  • Guarantee Code Quality: Unified design specifications and best practices
  • Reduce Maintenance Costs: Clear component responsibilities and dependencies
  • Enhance User Experience: Consistent interaction patterns and visual effects

By reasonably using these basic components, developers can quickly build high-quality MES system interfaces while ensuring code maintainability and scalability. As the project continues to develop, these basic components will also continue to evolve, providing users with better development and product experiences.

Last updated on