feat: ✨ 整合 wot-design-uni 框架

2024-09-25 12:30:43 +08:00
parent 272d643744
commit a7757213f2
7 changed files with 106 additions and 16 deletions
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
    "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
    "pinia": "^2.2.2",
    "vue": "^3.4.21",
-    "vue-i18n": "^9.1.9"
+    "wot-design-uni": "^1.3.11"
  },
  "devDependencies": {
    "@commitlint/cli": "^19.5.0",
@@ -116,6 +116,8 @@
    "postcss-html": "^1.7.0",
    "postcss-scss": "^4.0.9",
    "prettier": "^3.3.3",
+    "sass": "^1.79.3",
+    "sass-loader": "^16.0.2",
    "stylelint": "^16.9.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-recess-order": "^5.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ dependencies:
  vue-i18n:
    specifier: ^9.1.9
    version: 9.14.0(vue@3.5.6)
+  wot-design-uni:
+    specifier: ^1.3.11
+    version: 1.3.11(vue@3.5.6)

 devDependencies:
  '@commitlint/cli':
@@ -127,6 +130,12 @@ devDependencies:
  prettier:
    specifier: ^3.3.3
    version: 3.3.3
+  sass:
+    specifier: ^1.79.3
+    version: 1.79.3
+  sass-loader:
+    specifier: ^16.0.2
+    version: 16.0.2(sass@1.79.3)
  stylelint:
    specifier: ^16.9.0
    version: 16.9.0(typescript@4.9.5)
@@ -165,7 +174,7 @@ devDependencies:
    version: 0.18.3
  vite:
    specifier: 5.2.8
-    version: 5.2.8(@types/node@22.5.5)(terser@5.33.0)
+    version: 5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0)
  vue-tsc:
    specifier: ^1.0.24
    version: 1.8.27(typescript@4.9.5)
@@ -2327,7 +2336,7 @@ packages:
      picocolors: 1.1.0
      terser: 5.33.0
      unplugin-auto-import: 0.16.7
-      vite: 5.2.8(@types/node@22.5.5)(terser@5.33.0)
+      vite: 5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0)
    transitivePeerDependencies:
      - '@nuxt/kit'
      - '@vueuse/core'
@@ -3956,7 +3965,7 @@ packages:
      '@unocss/core': 0.62.4
      '@unocss/reset': 0.62.4
      '@unocss/vite': 0.62.4(vite@5.2.8)
-      vite: 5.2.8(@types/node@22.5.5)(terser@5.33.0)
+      vite: 5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0)
    transitivePeerDependencies:
      - rollup
      - supports-color
@@ -4142,7 +4151,7 @@ packages:
      chokidar: 3.6.0
      magic-string: 0.30.11
      tinyglobby: 0.2.6
-      vite: 5.2.8(@types/node@22.5.5)(terser@5.33.0)
+      vite: 5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0)
    transitivePeerDependencies:
      - rollup
      - supports-color
@@ -4164,7 +4173,7 @@ packages:
      regenerator-runtime: 0.14.1
      systemjs: 6.15.1
      terser: 5.33.0
-      vite: 5.2.8(@types/node@22.5.5)(terser@5.33.0)
+      vite: 5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0)
    transitivePeerDependencies:
      - supports-color
    dev: true
@@ -4179,7 +4188,7 @@ packages:
      '@babel/core': 7.25.2
      '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2)
      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.2)
-      vite: 5.2.8(@types/node@22.5.5)(terser@5.33.0)
+      vite: 5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0)
      vue: 3.5.6(typescript@4.9.5)
    transitivePeerDependencies:
      - supports-color
@@ -4192,7 +4201,7 @@ packages:
      vite: ^5.0.0
      vue: ^3.2.25
    dependencies:
-      vite: 5.2.8(@types/node@22.5.5)(terser@5.33.0)
+      vite: 5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0)
      vue: 3.5.6(typescript@4.9.5)

  /@volar/language-core@1.11.1:
@@ -4934,6 +4943,12 @@ packages:
    optionalDependencies:
      fsevents: 2.3.3

+  /chokidar@4.0.1:
+    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+    engines: {node: '>= 14.16.0'}
+    dependencies:
+      readdirp: 4.0.1
+
  /ci-info@3.9.0:
    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
    engines: {node: '>=8'}
@@ -6506,6 +6521,9 @@ packages:
    engines: {node: '>= 4'}
    dev: true

+  /immutable@4.3.7:
+    resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
+
  /import-fresh@3.3.0:
    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
    engines: {node: '>=6'}
@@ -7785,6 +7803,10 @@ packages:
    engines: {node: '>= 0.6'}
    dev: true

+  /neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+    dev: true
+
  /node-fetch-native@1.6.4:
    resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
    dev: true
@@ -8434,6 +8456,10 @@ packages:
    dependencies:
      picomatch: 2.3.1

+  /readdirp@4.0.1:
+    resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
+    engines: {node: '>= 14.16.0'}
+
  /regenerate-unicode-properties@10.2.0:
    resolution: {integrity: sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==}
    engines: {node: '>=4'}
@@ -8618,6 +8644,40 @@ packages:
    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
    dev: true

+  /sass-loader@16.0.2(sass@1.79.3):
+    resolution: {integrity: sha512-Ll6iXZ1EYwYT19SqW4mSBb76vSSi8JgzElmzIerhEGgzB5hRjDQIWsPmuk1UrAXkR16KJHqVY0eH+5/uw9Tmfw==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+      sass: ^1.3.0
+      sass-embedded: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      neo-async: 2.6.2
+      sass: 1.79.3
+    dev: true
+
+  /sass@1.79.3:
+    resolution: {integrity: sha512-m7dZxh0W9EZ3cw50Me5GOuYm/tVAJAn91SUnohLRo9cXBixGUOdvmryN+dXpwR831bhoY3Zv7rEFt85PUwTmzA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 4.0.1
+      immutable: 4.3.7
+      source-map-js: 1.2.1
+
  /sax@1.4.1:
    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
    dev: false
@@ -9417,7 +9477,7 @@ packages:
      '@unocss/transformer-directives': 0.62.4
      '@unocss/transformer-variant-group': 0.62.4
      '@unocss/vite': 0.62.4(vite@5.2.8)
-      vite: 5.2.8(@types/node@22.5.5)(terser@5.33.0)
+      vite: 5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0)
    transitivePeerDependencies:
      - postcss
      - rollup
@@ -9575,7 +9635,7 @@ packages:
    engines: {node: '>= 0.8'}
    dev: true

-  /vite@5.2.8(@types/node@22.5.5)(terser@5.33.0):
+  /vite@5.2.8(@types/node@22.5.5)(sass@1.79.3)(terser@5.33.0):
    resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
@@ -9607,6 +9667,7 @@ packages:
      esbuild: 0.20.2
      postcss: 8.4.47
      rollup: 4.21.3
+      sass: 1.79.3
      terser: 5.33.0
    optionalDependencies:
      fsevents: 2.3.3
@@ -9782,6 +9843,15 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /wot-design-uni@1.3.11(vue@3.5.6):
+    resolution: {integrity: sha512-/WWGUUcUuMAWLVybxZGrffzE+ov/4IgJSi0Q+OoCtXM+X9y58JfWVnlWEtInChZ5/eFhPi2ws0rL8LBP1eBnDg==}
+    engines: {HBuilderX: ^3.8.7}
+    peerDependencies:
+      vue: '>=3.2.47'
+    dependencies:
+      vue: 3.5.6(typescript@4.9.5)
+    dev: false
+
  /wrap-ansi@7.0.0:
    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
    engines: {node: '>=10'}
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,4 +1,11 @@
 {
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
+    }
+  },
+
  "pages": [
    {
      "path": "pages/index/index",
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -2,7 +2,19 @@
  <view class="flex-center flex-col">
    <image class="logo" src="/static/logo.png" />
    <view>
-      <text class="text-red font-bold text-lg">{{ title }}</text>
+      <text class="text-blue font-bold text-lg">{{ title }}</text>
+    </view>
+
+    <view class="mt-5 flex-center">
+      <text class="text-green font-bold text-lg">测试 UnoCSS</text>
+    </view>
+
+    <view class="mt-5 flex-center">
+      <wd-button size="small">主要按钮</wd-button>
+      <wd-button type="success" size="small">成功按钮</wd-button>
+      <wd-button type="info" size="small">信息按钮</wd-button>
+      <wd-button type="warning" size="small">警告按钮</wd-button>
+      <wd-button type="error" size="small">危险按钮</wd-button>
    </view>
  </view>
 </template>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,7 @@
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
-    "types": ["@dcloudio/types"]
+    "types": ["@dcloudio/types", "wot-design-uni/global"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -12,8 +12,8 @@ export default {
  ],
  shortcuts: [
    {
-      "flex-center": "flex justify-center items-center",
-      "flex-col": "flex flex-col",
+      "flex-center": "flex justify-center items-center flex-wrap",
+      "flex-col-center": "flex flex-col justify-center items-center",
    },
  ],

--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,8 +20,6 @@ export default defineConfig(async ({ mode }: ConfigEnv): Promise<UserConfig> =>
      },
    },
    plugins: [
-      uni(),
-
      // https://github.com/unocss/unocss
      UnoCss(),

@@ -32,6 +30,7 @@ export default defineConfig(async ({ mode }: ConfigEnv): Promise<UserConfig> =>
          enabled: true,
        },
      }),
+      uni(),
    ],
  };
 });