first commit

2026-02-26 09:25:47 +08:00
commit 40665dda67
708 changed files with 100122 additions and 0 deletions
@@ -0,0 +1,80 @@
+import type {Preset, SourceCodeTransformer} from 'unocss'
+import {
+    defineConfig,
+    presetUno,
+    presetAttributify,
+    presetIcons,
+    transformerDirectives,
+    transformerVariantGroup
+} from 'unocss'
+import {presetRemRpx} from 'unocss-applet'
+import {presetAnimations} from 'unocss-preset-animations'
+
+
+const presets: Preset[] = []
+const transformers: SourceCodeTransformer[] = []
+presets.push(presetUno())
+presets.push(presetAnimations())
+presets.push(presetAttributify())
+presets.push(presetRemRpx({mode: 'rpx2rem'}))
+
+
+export default defineConfig({
+    presets: [
+        // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
+        presetIcons({
+            scale: 1.2,
+            warn: true,
+            extraProperties: {
+                display: 'inline-block',
+                'vertical-align': 'middle',
+            },
+        }),
+        ...presets,
+    ],
+    /**
+     * 自定义快捷语句
+     * @see https://github.com/unocss/unocss#shortcuts
+     */
+    shortcuts: [
+        ['center', 'flex justify-center items-center'],
+        ['flex-center-sb', 'flex justify-between items-center'],
+        ['bg-primary', 'bg-#333'],
+        ['border-primary', 'border-#333'],
+        ['bg-common', 'bg-#F6F6F6'],
+        ['text-primary', 'text-#333'],
+        ['text-50-bold', 'text-50rpx lh-50rpx text-#14181B font-bold'],
+        ['text-48-bold', 'text-48rpx lh-48rpx text-#14181B font-bold'],
+        ['text-38-bold', 'text-38rpx lh-52rpx text-primary font-bold'],
+        ['text-36-bold', 'text-36rpx lh-50rpx text-primary font-bold'],
+        ['text-34-bold', 'text-34rpx lh-48rpx text-primary font-bold'],
+        ['text-30-bold', 'text-30rpx lh-42rpx text-primary font-bold'],
+        ['text-28-bold', 'text-28rpx lh-28rpx text-primary font-bold'],
+        ['text-24-bold', 'text-24rpx lh-34rpx text-primary font-bold'],
+        ['text-20-bold', 'text-20rpx lh-30rpx text-primary font-bold'],
+    ],
+    transformers: [transformerDirectives(), transformerVariantGroup(), ...transformers],
+    rules: [
+        [
+            'p-safe',
+            {
+                padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
+            },
+        ],
+        ['pt-safe', {'padding-top': 'env(safe-area-inset-top)'}],
+        ['pb-safe', {'padding-bottom': 'env(safe-area-inset-bottom)'}],
+    ],
+})
+
+/**
+ * 最终这一套组合下来会得到：
+ * mp 里面：mt-4 => margin-top: 32rpx  == 16px
+ * h5 里面：mt-4 => margin-top: 1rem == 16px
+ *
+ * 另外，我们还可以推算出 UnoCSS 单位与设计稿差别4倍。
+ * 375 * 4 = 1500，把设计稿设置为1500，那么设计稿里多少px，unocss就写多少述职。
+ * 举个例子，设计稿显示某元素宽度100px，就写w-100即可。
+ *
+ * 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
+ * rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
+ */