bug: How to do a good job of adaptation?

[xgj1988]

🔍 Debugging guide

• I have read the "How to debug" guide, but the problem still persists

Provide environment information (envinfo & npm list)

horseRacing@0.0.0 E:\gitlab\horseRacing\horseRacingVue
+-- @heroicons/vue@2.2.0 -> .\node_modules.pnpm@heroicons+vue@2.2.0_vue@3.5.13_typescript@5.8.3_\node_modules@heroicons\vue
+-- @iconify/vue@5.0.0 -> .\node_modules.pnpm@iconify+vue@5.0.0_vue@3.5.13_typescript@5.8.3_\node_modules@iconify\vue
+-- @stagewise/toolbar@0.2.1 -> .\node_modules.pnpm@stagewise+toolbar@0.2.1_po_5c61fe4f1e4f11f7a3e7cfee436de980\node_modules@stagewise\toolbar
+-- @types/node@22.15.16 -> .\node_modules.pnpm@types+node@22.15.16\node_modules@types\node
+-- @vitejs/plugin-vue@5.2.3 -> .\node_modules.pnpm@vitejs+plugin-vue@5.2.3_vi_a935147193f09bd12b07a7470d542169\node_modules@vitejs\plugin-vue
+-- autoprefixer@10.4.21 -> .\node_modules.pnpm\autoprefixer@10.4.21_postcss@8.5.3\node_modules\autoprefixer
+-- axios@1.9.0 -> .\node_modules.pnpm\axios@1.9.0\node_modules\axios
+-- dayjs@1.11.13 -> .\node_modules.pnpm\dayjs@1.11.13\node_modules\dayjs
+-- lib-flexible@0.3.2 -> .\node_modules.pnpm\lib-flexible@0.3.2\node_modules\lib-flexible
+-- lodash@4.17.21 -> .\node_modules.pnpm\lodash@4.17.21\node_modules\lodash
+-- lottie-web@5.12.2 -> .\node_modules.pnpm\lottie-web@5.12.2\node_modules\lottie-web
+-- pinia-plugin-persistedstate@3.2.3 -> .\node_modules.pnpm\pinia-plugin-persistedstate_b80fd076453604a1d8cbb59a40c9829c\node_modules\pinia-plugin-persistedstate
+-- pinia@2.3.1 -> .\node_modules.pnpm\pinia@2.3.1_typescript@5.8.3_vue@3.5.13_typescript@5.8.3_\node_modules\pinia
+-- postcss-pxtorem@6.1.0 -> .\node_modules.pnpm\postcss-pxtorem@6.1.0_postcss@8.5.3\node_modules\postcss-pxtorem
+-- postcss@8.5.3 -> .\node_modules.pnpm\postcss@8.5.3\node_modules\postcss
+-- qrcode@1.5.4 -> .\node_modules.pnpm\qrcode@1.5.4\node_modules\qrcode
+-- qs@6.14.0 -> .\node_modules.pnpm\qs@6.14.0\node_modules\qs
+-- sass@1.87.0 -> .\node_modules.pnpm\sass@1.87.0\node_modules\sass
+-- typescript@5.8.3 -> .\node_modules.pnpm\typescript@5.8.3\node_modules\typescript
+-- unplugin-vue-components@28.5.0 -> .\node_modules.pnpm\unplugin-vue-components@28.2b17842cb938ad17657f8c6de76cf90a\node_modules\unplugin-vue-components
+-- vant@4.9.19 -> .\node_modules.pnpm\vant@4.9.19_vue@3.5.13_typescript@5.8.3\node_modules\vant
+-- vite-plugin-compression@0.5.1 -> .\node_modules.pnpm\vite-plugin-compression@0.5_5cf0cd16aeed92678afc947d0e38d6ee\node_modules\vite-plugin-compression
+-- vite-plugin-optimize-persist@0.1.2 -> .\node_modules.pnpm\vite-plugin-optimize-persis_5b692ac29db280d0b05da24c820b795d\node_modules\vite-plugin-optimize-persist
+-- vite@5.4.19 -> .\node_modules.pnpm\vite@5.4.19_@types+node@22.15.16_sass@1.87.0\node_modules\vite
+-- vue-i18n@11.1.3 -> .\node_modules.pnpm\vue-i18n@11.1.3_vue@3.5.13_typescript@5.8.3_\node_modules\vue-i18n
+-- vue-router@4.5.1 -> .\node_modules.pnpm\vue-router@4.5.1_vue@3.5.13_typescript@5.8.3_\node_modules\vue-router
+-- vue-tsc@2.2.10 -> .\node_modules.pnpm\vue-tsc@2.2.10_typescript@5.8.3\node_modules\vue-tsc
+-- vue@3.5.13 -> .\node_modules.pnpm\vue@3.5.13_typescript@5.8.3\node_modules\vue
`-- vuex@4.1.0 -> .\node_modules.pnpm\vuex@4.1.0_vue@3.5.13_typescript@5.8.3_\node_modules\vuex

Provide VS Code extension version

stagewise.stagewise-vscode-extension@0.2.2

Describe the bug

The stagewise-toolbar is too large.

My package.json content is below :

{
"name": "horseRacing",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@heroicons/vue": "^2.1.1",
"@iconify/vue": "^5.0.0",
"axios": "^1.8.4",
"dayjs": "^1.11.13",
"lodash": "^4.17.21",
"lottie-web": "^5.12.2",
"pinia": "^2.1.4",
"postcss-pxtorem": "^6.1.0",
"qrcode": "^1.5.4",
"qs": "^6.14.0",
"vant": "^4.9.19",
"vite-plugin-compression": "^0.5.1",
"vue": "^3.4.21",
"vue-i18n": "^11.1.3",
"vue-router": "^4.5.0",
"vuex": "^4.1.0"
},
"devDependencies": {
"@stagewise/toolbar": "^0.2.1",
"@types/node": "^22.14.1",
"@vitejs/plugin-vue": "^5.0.4",
"autoprefixer": "^10.4.14",
"lib-flexible": "^0.3.2",
"pinia-plugin-persistedstate": "^3.1.0",
"postcss": "^8.4.31",
"sass": "^1.87.0",
"typescript": "^5.4.2",
"unplugin-vue-components": "^28.5.0",
"vite": "^5.1.6",
"vite-plugin-optimize-persist": "^0.1.2",
"vue-tsc": "^2.0.6"
}
}

my vite.config.js content is below

import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {VantResolver} from 'unplugin-vue-components/resolvers'
import autoprefixer from 'autoprefixer'
import ViteCompressionPlugin from 'vite-plugin-compression'
import postCssPxToRem from 'postcss-pxtorem'

// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
// 使用 unplugin-vue-components 插件自动引入 Vant 组件
Components({
dts: true,
resolvers: [VantResolver()]
}),
ViteCompressionPlugin({
algorithm: 'gzip',
// ext: '.gz',
disable: true,
verbose: false,
deleteOriginFile: false
})
],
// 从环境变量获取 base，如果没有则使用默认值
base: process.env.NODE_ENV === "production" ? "/h5/" : "/",
// 控制台输出的级别 info、warn、error、silent
clearScreen: true,
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
host: '0.0.0.0',
port: 4000
},
css: {
// PostCSS 配置
postcss: {
plugins: [
// 自动添加浏览器厂商前缀
autoprefixer(),
// 将 px 单位转换为 rem
postCssPxToRem({
rootValue: 37.5,
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 6,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
exclude: [/node_modules/],
minPixelValue: 1,
propList: ['*'],
selectorBlackList: ['px-'],
mediaQuery: false,
replace: true,
landscape: false
})
]
}
},
// 添加这一行，简化构建过程
esbuild: {
drop: ['console', 'debugger'],
},
})

Link to reproduction

no

To reproduce

The toolbar can be adapted.

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

[xn1cklas]

Good point! We are working on a rework of the design.

Please check out the alpha release for @stagewise/toolbar@alpha or for Vue @stagewise/toolbar-vue@alpha.

Hope this design fixes your problem!

[xgj1988]

When will the GA version be released?

[glenntws]

Since we already pushed out the new release looong ago, I'll just close this.