一、企业级UI体系的核心需求

在大型项目中，UI一致性是提升用户体验与开发效率的关键。企业级UI体系需解决三大核心问题：品牌视觉统一、业务场景适配、开发效率优化。传统方案往往依赖手动封装或引入多套UI库，导致维护成本高、风格割裂。

TinyVue作为轻量级组件库，通过其灵活的扩展机制与主题系统，可完美支撑企业级定制需求。其核心优势在于：提供开箱即用的组件基础，同时保留深度定制空间，支持从全局主题到单个组件的精细化控制。

二、主题定制：打造品牌专属视觉

1. 全局主题变量覆盖

TinyVue采用CSS变量与SCSS变量双层设计，开发者可通过覆盖默认变量实现全局主题切换。例如，修改主色与边框半径：

// 在项目中创建theme.scss
:root {
  --tiny-color-primary: #1a73e8; // 主色
  --tiny-border-radius-base: 4px; // 圆角
}
// 或通过SCSS变量（需配置webpack支持）
$--tiny-color-primary: #1a73e8 !default;

实践建议：将主题文件独立管理，通过环境变量动态加载不同主题，支持多品牌场景。

2. 动态主题切换方案

对于需要运行时切换主题的场景，可通过CSS变量动态更新实现。示例代码：

function switchTheme(themeName) {
  const themeMap = {
    dark: { '--tiny-bg-color': '#1e1e1e', '--tiny-text-color': '#fff' },
    light: { '--tiny-bg-color': '#fff', '--tiny-text-color': '#333' }
  };
  const root = document.documentElement;
  Object.entries(themeMap[themeName]).forEach(([key, value]) => {
    root.style.setProperty(key, value);
  });
}

性能优化：使用requestAnimationFrame避免频繁重绘，或通过CSS类名切换减少DOM操作。

三、组件扩展：满足业务差异化需求

1. 组件封装最佳实践

当内置组件无法满足业务场景时，可通过组合式封装或继承式扩展实现。例如，封装带搜索功能的Select组件：

<template>
  <tiny-select v-model="value" filterable>
    <tiny-option
      v-for="item in filteredOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </tiny-select>
</template>
<script>
export default {
  props: ['options', 'placeholder'],
  data() {
    return { value: '' };
  },
  computed: {
    filteredOptions() {
      return this.options.filter(opt => 
        opt.label.includes(this.value)
      );
    }
  }
};
</script>

关键原则：保持与原生组件一致的API设计，通过v-model双向绑定与props接收参数。

2. 国际化（i18n）集成方案

企业级应用需支持多语言，TinyVue通过tiny-i18n插件实现。配置示例：

import Vue from 'vue';
import TinyI18n from '@opentiny/vue-i18n';
Vue.use(TinyI18n, {
  locale: 'zh-CN',
  messages: {
    'zh-CN': { tiny: { button: { submit: '提交' } } },
    'en-US': { tiny: { button: { submit: 'Submit' } } }
  }
});

在组件中使用：

<tiny-button>{{ $t('tiny.button.submit') }}</tiny-button>

四、全局配置：统一行为与规范

1. 配置层抽象设计

通过Vue.prototype或Provide/Inject机制实现全局配置。例如，统一表单验证规则：

// main.js
Vue.prototype.$formConfig = {
  rules: {
    required: (value) => !!value || '必填项',
    email: (value) => /.+@.+\..+/.test(value) || '邮箱格式错误'
  }
};

在组件中调用：

this.$formConfig.rules.required(value);

2. 插件化扩展架构

对于复杂功能（如权限控制），可开发为TinyVue插件。插件结构示例：

const PermissionPlugin = {
  install(Vue) {
    Vue.directive('permission', {
      inserted(el, binding) {
        const hasPermission = checkUserPermission(binding.value);
        if (!hasPermission) el.parentNode?.removeChild(el);
      }
    });
  }
};
Vue.use(PermissionPlugin);

使用方式：

<tiny-button v-permission="['user:edit']">编辑</tiny-button>

五、性能优化与工程化实践

1. 按需加载与Tree Shaking

通过babel-plugin-import实现组件按需加载：

// babel.config.js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: '@opentiny/vue',
        customStyleName: (name) => `@opentiny/vue/es/style/${name}.css`
      }
    ]
  ]
};

收益：减少打包体积，提升首屏加载速度。

2. 样式隔离方案

为避免样式污染，可采用以下策略：

CSS Modules：通过scoped样式或module类名实现局部作用域。
Shadow DOM（实验性）：对高隔离需求组件启用Shadow DOM封装。

六、典型场景解决方案

1. 中后台系统定制

针对管理后台，推荐以下定制点：

表格组件：扩展分页、排序、导出功能。
表单生成器：基于JSON Schema动态渲染表单。
权限控制：结合路由与组件级权限。

2. 移动端H5适配

通过postcss-px-to-viewport实现响应式布局：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
      unitPrecision: 5
    }
  }
};

七、总结与最佳实践

构建企业级UI体系需遵循“分层定制”原则：

基础层：覆盖主题变量与全局配置。
组件层：封装业务组件与扩展功能。
应用层：集成国际化、权限等横切关注点。

推荐工具链：

主题生成：使用style-dictionary管理设计令牌。
代码规范：结合ESLint与Stylelint强制一致性。
文档生成：通过vitepress自动生成组件文档。

通过系统化定制，TinyVue可完美支撑从中小型项目到大型企业应用的UI需求，实现开发效率与用户体验的双重提升。

构建企业级UI体系：TinyVue组件库深度定制指南