diff --git a/internals/cli/src/config/vite.ts b/internals/cli/src/config/vite.ts index e314273aec..a92e429f4e 100644 --- a/internals/cli/src/config/vite.ts +++ b/internals/cli/src/config/vite.ts @@ -26,7 +26,7 @@ const getAlias = (vueVersion: string | number, theme = '', design) => { '@opentiny/vue-theme-mobile': pathFromWorkspaceRoot('packages/theme-mobile/src'), '@opentiny/vue-theme': pathFromWorkspaceRoot(`packages/theme${ns(design || theme)}/src`), '@opentiny/vue-theme-saas': pathFromWorkspaceRoot('packages/theme-saas/src'), - '@opentiny/vue-common': pathFromWorkspaceRoot('packages/vue-common/src'), + '@opentiny/vue-common': pathFromWorkspaceRoot('packages/vue-common/src/index-dev'), '@opentiny/vue-locale': pathFromWorkspaceRoot('packages/vue-locale/src'), // 虚拟映射 diff --git a/packages/vue-common/package.json b/packages/vue-common/package.json index 11783200a9..993f88bd7b 100644 --- a/packages/vue-common/package.json +++ b/packages/vue-common/package.json @@ -24,14 +24,13 @@ "bugs": { "url": "https://github.com/opentiny/tiny-vue/issues" }, - "main": "src/index.ts", + "main": "src/index-dev.ts", "sideEffects": false, "type": "module", "dependencies": { "@opentiny/vue-locale": "workspace:~", "@opentiny/vue-renderless": "workspace:~", "@opentiny/vue-theme": "workspace:~", - "@opentiny/vue-theme-mobile": "workspace:~", "tailwind-merge": "^1.8.0" }, "scripts": { diff --git a/packages/vue-common/src/index-dev.ts b/packages/vue-common/src/index-dev.ts new file mode 100644 index 0000000000..89f6b9d968 --- /dev/null +++ b/packages/vue-common/src/index-dev.ts @@ -0,0 +1,5 @@ +import { customDesignConfig } from './index' +import { twMerge } from 'tailwind-merge' +export * from './index' +// 动态注入twMerge,保证本地联调 +customDesignConfig.twMerge = twMerge diff --git a/packages/vue-common/src/index.ts b/packages/vue-common/src/index.ts index 4c7b59b183..7b27ab41f9 100644 --- a/packages/vue-common/src/index.ts +++ b/packages/vue-common/src/index.ts @@ -20,7 +20,6 @@ import { } from './adapter' import { t } from '@opentiny/vue-locale' import { stringifyCssClass, stringifyCssClassObject, stringifyCssClassArray, deduplicateCssClass } from './csscls' -import { twMerge } from 'tailwind-merge' import '@opentiny/vue-theme/base/index.less' import { defineComponent, isVue2, isVue3 } from './adapter' import { useBreakpoint } from './breakpoint' @@ -136,8 +135,6 @@ export const $setup = ({ props, context, template, extend = {} }) => { return renderComponent({ view, props, context, extend }) } -export const mergeClass = /* @__PURE__ */ (...cssClasses) => twMerge(stringifyCssClass(cssClasses)) - // 提供给没有renderless层的组件使用(比如TinyVuePlus组件) export const design = { configKey: Symbol('designConfigKey'), @@ -162,13 +159,17 @@ interface DesignConfig { interface CustomDesignConfig { designConfig: null | DesignConfig + twMerge: (str: string) => string } // 允许自定义主题规范,适用于MetaERP项目 export const customDesignConfig: CustomDesignConfig = { - designConfig: null + designConfig: null, + twMerge: () => '' } +export const mergeClass = (...cssClasses) => customDesignConfig.twMerge(stringifyCssClass(cssClasses)) + export const setup = ({ props, context, renderless, api, extendOptions = {}, mono = false, classes = {} }) => { const render = typeof props.tiny_renderless === 'function' ? props.tiny_renderless : renderless @@ -176,17 +177,14 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon const globalDesignConfig: DesignConfig = customDesignConfig.designConfig || hooks.inject(design.configKey, {}) const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')] - const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null const utils = { $prefix, t, ...tools(context, resolveMode(props, context)), designConfig, globalDesignConfig, - useBreakpoint - } - if (specifyPc !== 'pc') { - utils.mergeClass = mergeClass + useBreakpoint, + mergeClass } utils.vm.theme = resolveTheme(props, context) @@ -205,11 +203,10 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon a: filterAttrs, d: utils.defineInstanceProperties, dp: utils.defineParentInstanceProperties, - gcls: (key) => getElementCssClass(classes, key) - } - if (specifyPc !== 'pc') { - attrs.m = mergeClass + gcls: (key) => getElementCssClass(classes, key), + m: mergeClass } + /** * 修复 render 函数下 this.slots 不会动态更新的问题(vue3 环境没有问题) * 解决方法:在 instance 下注入 slots、scopedSlots @@ -271,8 +268,7 @@ export function svg({ name = 'Icon', component }) { const attrs = isVue3 ? tinyTag : { attrs: tinyTag } let className = 'tiny-svg' - const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null - if (specifyPc !== 'pc' && isMobileFirst) { + if (isMobileFirst) { className = mergeClass('h-4 w-4 inline-block', customClass || '', mergeProps.class || '') } diff --git a/packages/vue-saas-common/package.json b/packages/vue-saas-common/package.json index f0d1740be2..5c9dee55af 100644 --- a/packages/vue-saas-common/package.json +++ b/packages/vue-saas-common/package.json @@ -29,7 +29,8 @@ "type": "module", "dependencies": { "@opentiny/vue-common": "workspace:~", - "@opentiny/vue-design-saas": "workspace:~" + "@opentiny/vue-design-saas": "workspace:~", + "tailwind-merge": "^1.8.0" }, "scripts": { "build": "pnpm -w build:ui $npm_package_name", diff --git a/packages/vue-saas-common/src/index.ts b/packages/vue-saas-common/src/index.ts index a8815b910d..80f4bc830d 100644 --- a/packages/vue-saas-common/src/index.ts +++ b/packages/vue-saas-common/src/index.ts @@ -1,6 +1,9 @@ import { customDesignConfig } from '@opentiny/vue-common' - +import { twMerge } from 'tailwind-merge' import designSaasConfig from '@opentiny/vue-design-saas' + export * from '@opentiny/vue-common' + // 自定义主题交互规范 customDesignConfig.designConfig = designSaasConfig +customDesignConfig.twMerge = twMerge