vbenjs / vue-vben-admin

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!
https://www.vben.pro
MIT License
24.25k stars 6.61k forks source link

Bug: 在应用目录下preferences.ts中配置品牌主色,只有主题色生效了,其它三种颜色都未正确生效 #4375

Closed WHIPLASHCZ closed 3 days ago

WHIPLASHCZ commented 5 days ago

Version

Vben Admin V5 naive-ui版

Describe the bug?

配置文件: image

效果: image

组件库的颜色样式以及tailwind的样式类名都没有按照preferences中的配置生效

Reproduction

示例代码:

preferences.ts:

import { defineOverridesPreferences } from '@vben/preferences';
/**
 * @description 项目配置文件
 * 只需要覆盖项目中的一部分配置,不需要的配置不用覆盖,会自动使用默认配置
 */
export const overridesPreferences = defineOverridesPreferences({
  // overrides
  app: {
    name: import.meta.env.VITE_APP_TITLE,
  },
  theme: {
    builtinType: 'none',
    // 错误色
    colorDestructive: 'hsl(0 100% 50%)', //rgb:255,0,0
    // 主题色
    colorPrimary: 'hsl(300 100% 25%)', //rgb:128,0,128
    // 成功色
    colorSuccess: 'hsl(300 100% 50%)', //rgb(255,0,255)
    // 警告色
    colorWarning: 'hsl(240 100% 25%)', //rgb(0,0,128)
  },
});

test.vue:

<script setup lang="ts">
import { NButton, NDrawer } from 'naive-ui';
import { ref } from 'vue';

const showDrawer1 = ref(false);
const showDrawer2 = ref(false);
const showDrawer3 = ref(false);

</script>
<template>
  <div class="p-[20px]">
    <div class="pb-[20px]">
      <h1 class="text-lg text-[rgb(128,0,128)]">
        tailwind 主题配置颜色 primary
      </h1>
      <h1 class="text-lg text-[rgb(255,0,255)]">tailwind主题配置颜色success</h1>
      <h1 class="text-lg text-[rgb(0,0,128)]">tailwind主题配置颜色warning</h1>
      <h1 class="text-lg text-[rgb(255,0,0)]">
        tailwind主题配置颜色destructive
      </h1>
    </div>

    <h1 class="text-primary text-lg">tailwind测试primary</h1>
    <h1 class="text-success text-lg">tailwind测试success</h1>
    <h1 class="text-warning text-lg">tailwind测试warning</h1>
    <h1 class="text-destructive text-lg">tailwind测试destructive</h1>

    <div>
      <n-button type="primary" > 主要 </n-button>
    </div>
    <div>
      <n-button type="success" > 成功 </n-button>
    </div>
    <div>
      <n-button type="warning" > 警告 </n-button>
    </div>
    <div>
      <n-button type="error" > 错误 </n-button>
    </div>

  </div>
</template>

System Info

chrome浏览器128.0.6613.137
win10
vben5.3.3

Relevant log output

No response

Validations

WHIPLASHCZ commented 5 days ago

colorPrimary正常生效了,但是其它三个颜色colorDestructive、 colorSuccess、colorWarning,都没有正常生效,而且诡异的是,在naive-ui的应用里,按钮组件在hover时 ,颜色按照偏好配置中生效了,但是正常状态就没有按照配置生效