Feat rn atomic css

docs-vuepress/.vuepress/config.js

@@ -119,7 +119,7 @@ const sidebar = {
     { title: '小程序跨端组件库 Mpx-cube-ui 开源啦', path: 'mpx-cube-ui' },
     { title: 'Mpx-cli 插件化改造', path: 'mpx-cli-next' },
     { title: 'Mpx 小程序单元测试能力建设与实践', path: 'unit-test'}
-  ]
+  ],
 }
 
 const nav = [

docs-vuepress/.vuepress/theme/global-components/ColorsPalette.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="my-8">
+    <div v-for="color in colors" :key="color">
+      <div class="relative mb-3 mt-6">
+        <span>{{ color }}</span>
+      </div>
+      <div class="flex gap-2 mb-2 overflow-y-auto">
+        <SingleColor v-for="level in levels" :key="level" :color="`bg-${color}-${level}`" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      levels: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      colors: [
+        'pink', 'rose', 'red', 'orange', 'yellow', 'amber', 'lime', 'green', 'emerald', 'teal',
+        'cyan', 'sky', 'blue', 'indigo', 'purple', 'violet', 'fuchsia', 'gray', 'slate', 'stone',
+        'neutral', 'zinc', 'light', 'dark',
+      ]
+    };
+  }
+};
+</script>

docs-vuepress/.vuepress/theme/global-components/SingleColor.vue

@@ -0,0 +1,39 @@
+<script>
+// import config from 'windicss/defaultConfig'
+export default {
+  name: 'SingleColor',
+  props: {
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    camelize(str) {
+      const arr = str.split('-')
+      const capital = arr.map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item.toLowerCase())
+      const capitalString = capital.join('')
+      return capitalString
+    }
+  },
+  computed: {
+    level() {
+      return this.color.split(/-/).slice(-1)[0]
+    },
+    hex() {
+      // return config.theme.colors[this.camelize(this.color)]?.[+this.level]
+    }
+  }
+}
+</script>
+<template>
+  <div>
+    <div class="w-14 h-14 rounded" :class="color" />
+    <div class="font-bold text-sm">
+      {{ level }}
+    </div>
+    <div class="opacity-50 font-mono text-xs -mt-1">
+      {{ hex }}
+    </div>
+  </div>
+</template>

docs-vuepress/guide/platform/index.md → docs-vuepress/guide/platform/platform.md

@@ -11,7 +11,7 @@ Mpx以微信增强DSL为基础，支持跨端输出至多端小程序、web和
 new MpxwebpackPlugin({
   // mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android|harmony)
   mode: 'ali',
-  // srcMode为mpx编译的源码平台，目前仅支持wx   
+  // srcMode为mpx编译的源码平台，目前仅支持wx
   srcMode: 'wx'
 })
 ```