z9130
/
pansoft-plrl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: element theme adjustment

This commit is contained in:
vben 2024-07-31 22:11:24 +08:00
parent 1c9525a013
commit 9a6e29c401
21 changed files with 80 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-ele/.env
View File

@ -1,5 +1,5 @@
# 应用标题
VITE_APP_TITLE=Vben Admin
VITE_APP_TITLE=Vben Admin Ele
# 应用命名空间，用于缓存、store等功能的前缀，确保隔离
VITE_APP_NAMESPACE=vben-web-element
VITE_APP_NAMESPACE=vben-web-ele

2
apps/web-ele/.env.development
View File

@ -1,5 +1,5 @@
# 端口号
VITE_PORT=5555
VITE_PORT=5666
VITE_BASE=/

2
apps/web-ele/index.html
View File

@ -21,7 +21,7 @@
(function () {
var hm = document.createElement('script');
hm.src =
'https://hm.baidu.com/hm.js?d20a01273820422b6aa2ee41b6c9414d';
'https://hm.baidu.com/hm.js?97352b16ed2df8c3860cf5a1a65fb4dd';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();

2
apps/web-ele/package.json
View File

@ -6,7 +6,7 @@
"repository": {
"type": "git",
"url": "git+https://github.com/vbenjs/vue-vben-admin.git",
"directory": "apps/web-antd"
"directory": "apps/web-ele"
},
"license": "MIT",
"author": {

1
apps/web-ele/src/api/demos/index.ts
View File

@ -1 +0,0 @@
export * from './status';

10
apps/web-ele/src/api/demos/status.ts
View File

@ -1,10 +0,0 @@
import { requestClient } from '#/api/request';
/**
* 模拟任意状态码
*/
async function getMockStatus(status: string) {
return requestClient.get('/status', { params: { status } });
}
export { getMockStatus };

1
apps/web-ele/src/api/index.ts
View File

@ -1,2 +1 @@
export * from './core';
export * from './demos';

1
apps/web-ele/src/bootstrap.ts
View File

@ -3,7 +3,6 @@ import { createApp } from 'vue';
import { registerAccessDirective } from '@vben/access';
import { initStores } from '@vben/stores';
import '@vben/styles';
import '@vben/styles/antd';
import { setupI18n } from '#/locales';

5
apps/web-ele/src/locales/index.ts
View File

@ -8,6 +8,7 @@ import { preferences } from '@vben/preferences';
import dayjs from 'dayjs';
import { Language } from 'element-plus/es/locale';
import enLocale from 'element-plus/es/locale/lang/en';
import defaultLocale from 'element-plus/es/locale/lang/zh-cn';
const elementLocale = ref<Language>(defaultLocale);
@ -71,9 +72,7 @@ async function loadElementLocale(lang: SupportedLanguagesType) {
break;
}
case 'en-US': {
elementLocale.value = (await import(
'element-plus/es/locale/lang/en'
)) as unknown as Language;
elementLocale.value = enLocale;
break;
}
}

3
apps/web-ele/src/preferences.ts
View File

@ -6,4 +6,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
*/
export const overridesPreferences = defineOverridesPreferences({
// overrides
app: {
name: import.meta.env.VITE_APP_TITLE,
},
});

5
apps/web-ele/src/views/demos/element/index.vue
View File

@ -10,7 +10,10 @@ import {
type NotificationType = 'error' | 'info' | 'success' | 'warning';
function error() {
ElMessage.error('Once upon a time you dressed so fine');
ElMessage.error({
duration: 2500,
message: 'Once upon a time you dressed so fine',
});
}
function warning() {

2
apps/web-naive/.env.development
View File

@ -1,5 +1,5 @@
# 端口号
VITE_PORT=5566
VITE_PORT=5777
VITE_BASE=/

1
apps/web-naive/src/bootstrap.ts
View File

@ -3,7 +3,6 @@ import { createApp } from 'vue';
import { registerAccessDirective } from '@vben/access';
import { initStores } from '@vben/stores';
import '@vben/styles';
import '@vben/styles/antd';
import { setupI18n } from '#/locales';

1
internal/vite-config/package.json
View File

@ -30,6 +30,7 @@
"@intlify/unplugin-vue-i18n": "^4.0.0",
"@jspm/generator": "^2.1.2",
"cheerio": "1.0.0-rc.12",
"get-port": "^7.1.0",
"html-minifier-terser": "^7.2.0",
"nitropack": "^2.9.7",
"resolve.exports": "^2.0.2",

6
internal/vite-config/src/plugins/nitor-mock.ts
View File

@ -4,6 +4,7 @@ import type { NitroMockPluginOptions } from '../typing';
import { colors, consola, getPackage } from '@vben/node-utils';
import getPort from 'get-port';
import { build, createDevServer, createNitro, prepare } from 'nitropack';
const hmrKeyRe = /^runtimeConfig\.|routeRules\./;
@ -15,6 +16,11 @@ export const viteNitroMockPlugin = ({
}: NitroMockPluginOptions = {}): PluginOption => {
return {
async configureServer(server) {
const availablePort = await getPort({ port });
if (availablePort !== port) {
return;
}
const pkg = await getPackage(mockServerPackage);
if (!pkg) {
consola.error(`Package ${mockServerPackage} not found.`);

2
packages/@core/base/design/src/design-tokens/dark/index.css
View File

@ -56,7 +56,7 @@
--heavy-foreground: var(--accent-foreground);
/* Default border color */
--border: 240 3.7% 15.9%;
--border: 240 3.7% 22%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 0deg 0% 100% / 10%;

2
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@ -165,7 +165,7 @@ function scrollIntoView() {
/>
<span
class="tabs-chrome__label ml-[var(--gap)] flex-1 overflow-hidden whitespace-nowrap"
class="tabs-chrome__label ml-[var(--gap)] flex-1 overflow-hidden whitespace-nowrap text-sm"
>
{{ tab.title }}
</span>

4
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@ -139,7 +139,9 @@ function scrollIntoView() {
fallback
/>
<span class="flex-1 overflow-hidden whitespace-nowrap">
<span
class="flex-1 overflow-hidden whitespace-nowrap text-sm"
>
{{ tab.title }}
</span>
</div>

1
packages/effects/hooks/package.json
View File

@ -24,6 +24,7 @@
"@vben/preferences": "workspace:*",
"@vben/stores": "workspace:*",
"@vben/types": "workspace:*",
"@vben/utils": "workspace:*",
"vue": "^3.4.35",
"vue-router": "^4.4.0",
"watermark-js-plus": "^1.5.2"

65
packages/effects/hooks/src/use-design-tokens.ts
View File

@ -1,6 +1,7 @@
import { reactive, watch } from 'vue';
import { preferences } from '@vben/preferences';
import { updateCSSVariables } from '@vben/utils';
/**
* 用于适配各个框架的设计系统
@ -162,39 +163,53 @@ export function useElementPlusDesignTokens() {
const value = rootStyles.getPropertyValue(variable);
return isColor ? `hsl(${value})` : value;
};
const el = document.documentElement;
watch(
() => preferences.theme,
() => {
el.style.setProperty(
'--el-color-primary',
getCssVariableValue('--primary'),
);
const background = getCssVariableValue('--background');
const border = getCssVariableValue('--border');
const variables: Record<string, string> = {
'--el-bg-color': background,
'--el-bg-color-overlay': getCssVariableValue('--popover'),
'--el-bg-color-page': getCssVariableValue('--background-deep'),
'--el-border-color': border,
'--el-border-color-dark': border,
'--el-border-color-light': border,
'--el-border-color-lighter': border,
'--el-border-radius-base': getCssVariableValue('--radius', false),
'--el-color-danger': getCssVariableValue('--destructive'),
'--el-color-danger-light-3': getCssVariableValue('--destructive-600'),
'--el-color-danger-light-5': getCssVariableValue('--destructive-700'),
'--el-color-danger-light-7': getCssVariableValue('--destructive-800'),
'--el-color-error-light-8': border,
'--el-color-error-light-9': background,
el.style.setProperty(
'--el-color-success',
getCssVariableValue('--success'),
);
'--el-color-primary': getCssVariableValue('--primary'),
'--el-color-primary-light-3': getCssVariableValue('--primary-600'),
el.style.setProperty(
'--el-color-warning',
getCssVariableValue('--warning'),
);
'--el-color-primary-light-5': getCssVariableValue('--primary-700'),
'--el-color-primary-light-7': getCssVariableValue('--primary-800'),
'--el-color-success': getCssVariableValue('--success'),
'--el-color-success-light-3': getCssVariableValue('--success-600'),
el.style.setProperty(
'--el-color-danger',
getCssVariableValue('--destructive'),
);
'--el-color-success-light-5': getCssVariableValue('--success-700'),
'--el-color-success-light-7': getCssVariableValue('--success-800'),
el.style.setProperty(
'--el-fill-color-blank',
getCssVariableValue('--background'),
);
'--el-color-success-light-8': border,
'--el-color-success-light-9': background,
'--el-color-warning': getCssVariableValue('--warning'),
'--el-color-warning-light-3': getCssVariableValue('--warning-600'),
el.style.setProperty(
'--el-text-color-primary',
getCssVariableValue('--foreground'),
);
'--el-color-warning-light-5': getCssVariableValue('--warning-700'),
'--el-color-warning-light-7': getCssVariableValue('--warning-800'),
'--el-color-warning-light-8': border,
'--el-color-warning-light-9': background,
'--el-fill-color-blank': background,
'--el-text-color-primary': getCssVariableValue('--foreground'),
'--el-text-color-regular': getCssVariableValue('--foreground'),
};
updateCSSVariables(variables, `__vben_ele_styles__`);
},
{ immediate: true },
);

12
pnpm-lock.yaml
View File

@ -570,6 +570,9 @@ importers:
cheerio:
specifier: 1.0.0-rc.12
version: 1.0.0-rc.12
get-port:
specifier: ^7.1.0
version: 7.1.0
html-minifier-terser:
specifier: ^7.2.0
version: 7.2.0
@ -906,6 +909,9 @@ importers:
'@vben/types':
specifier: workspace:*
version: link:../../types
'@vben/utils':
specifier: workspace:*
version: link:../../utils
vue:
specifier: ^3.4.35
version: 3.4.35(typescript@5.5.4)
@ -5851,6 +5857,10 @@ packages:
get-port-please@3.1.2:
resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
get-port@7.1.0:
resolution: {integrity: sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==}
engines: {node: '>=16'}
get-stdin@9.0.0:
resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==}
engines: {node: '>=12'}
@ -14920,6 +14930,8 @@ snapshots:
get-port-please@3.1.2: {}
get-port@7.1.0: {}
get-stdin@9.0.0: {}
get-stream@8.0.1: {}