manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增前端vue

Browse Source
This commit is contained in:
gaoxq
2025-11-26 13:55:01 +08:00
parent ae391f1b94
commit ffd5a6ad66
781 changed files with 83348 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
web-vue/packages/vite/theme/index.ts Normal file
View File

@@ -0,0 +1,122 @@
/**
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
* No deletion without permission, or be held responsible to law.
* @author ThinkGem
*/
import { type PluginOption } from 'vite';
import path from 'path';
import { viteThemePlugin, antdDarkThemePlugin } from 'vite-plugin-theme-vite3';
import { mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme-vite3/es/colorUtils';
import { getThemeColors, generateColors } from './themeConfig';
import { generateModifyVars } from './modifyVars';
/**
* Vite plugin for website theme color switching
* https://gitee.com/thinkgem/vite-plugin-theme-vite3
*/
export function configThemePlugin(isBuild: boolean): PluginOption[] {
const colors = generateColors({
mixDarken,
mixLighten,
tinycolor,
});
// console.log(
// [...getThemeColors(), ...colors]
// .map((e) => `<a style="background:${e}">${e}</a>`)
// .join('&nbsp;'),
// );
// 抽取出viteThemePlugin插件，下方会根据不同环境设置enforce
const vite_theme_plugin = viteThemePlugin({
injectClientPath: JSON.stringify(path.resolve(__dirname, '../node_modules/vite-plugin-theme-vite3/es/client')),
resolveSelector: (s) => {
s = s.trim();
if (s.includes('const __vite__css = "')) {
return s.replace(/(.*)const __vite__css = "/g, '');
}
return s;
// switch (s) {
// case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
// return '.ant-steps-item-icon > .ant-steps-icon';
// case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)':
// case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover':
// case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active':
// case '.ant-steps-item-icon > .ant-steps-icon':
// case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
// case '.ant-menu-item-selected':
// case '.ant-drawer .jeesite-basic-drawer .ant-drawer-body':
// case '.jeesite-basic-drawer-footer':
// return s;
// default:
// // 按钮被重新定制过，需要过滤掉class防止覆盖
// if (s.indexOf('.ant-btn') >= 0) {
// return s;
// }
// }
// return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
},
colorVariables: [...getThemeColors(), ...colors],
});
//console.log('vite_theme_plugin:'+JSON.stringify(vite_theme_plugin));
((vite_theme_plugin || []) as any[]).forEach(function (item) {
//对vite:theme插件特殊配置
if ('vite:theme' === item.name) {
//console.log(item);
// 打包时去除enforce: "post"，vite 2.6.x适配，否则生成app-theme-style为空，
// 因为 async transform(code, id) { 的code没有正确获取
if (isBuild) {
delete item.enforce;
}
//console.log(item);
}
});
//console.log('vite_theme_plugin后:'+JSON.stringify(vite_theme_plugin));
const plugin = [
vite_theme_plugin,
antdDarkThemePlugin({
// preloadFiles: [
// // path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
// // path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
// path.resolve(process.cwd(), 'src/design/index.less'),
// ],
// filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
// extractCss: false,
darkModifyVars: {
...generateModifyVars(true),
// 'text-color': '#c9d1d9',
// 'primary-1': 'rgb(255 255 255 / 8%)',
// 'text-color-base': '#c9d1d9',
// 'component-background': '#151515',
// 'heading-color': 'rgb(255 255 255 / 65%)',
// // black: '#0e1117',
// // #8b949e
// 'text-color-secondary': '#8b949e',
// 'border-color-base': '#303030',
// // 'border-color-split': '#30363d',
// 'item-active-bg': '#111b26',
// // 'tree-node-selected-bg': '#11263c',
// 'alert-success-border-color': '#274916',
// 'alert-success-bg-color': '#162312',
// 'alert-success-icon-color': '#49aa19',
// 'alert-info-border-color': '#153450',
// 'alert-info-bg-color': '#111b26',
// 'alert-info-icon-color': '#177ddc',
// 'alert-warning-border-color': '#594214',
// 'alert-warning-bg-color': '#2b2111',
// 'alert-warning-icon-color': '#d89614',
// 'alert-error-border-color': '#58181c',
// 'alert-error-bg-color': '#2a1215',
// 'alert-error-icon-color': '#a61d24',
'content-bg': '#141414',
'content-bg-striped': '#1e1e1e',
'button-cancel-color': '#c9d1d9',
'button-cancel-bg-color': '#2d2d2d',
'button-cancel-border-color': '#303030',
'button-cancel-hover-color': '#c9d1d9',
'button-cancel-hover-bg-color': '#4a4a4a',
'button-cancel-hover-border-color': '#4a4a4a',
'header-light-bottom-border-color': '#303030',
},
} as any),
];
return plugin as unknown as PluginOption[];
}

49
web-vue/packages/vite/theme/modifyVars.ts Normal file
View File

@@ -0,0 +1,49 @@
/**
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
* No deletion without permission, or be held responsible to law.
* @author ThinkGem
*/
import { generateAntColors, primaryColor, darkPrimaryColor } from './themeConfig';
// import { getThemeVariables } from 'ant-design-vue/dist/theme';
import { theme } from 'ant-design-vue';
import convertLegacyToken from 'ant-design-vue/lib/theme/convertLegacyToken';
/**
* less global variable
*/
export function generateModifyVars(dark = false) {
const palettes = generateAntColors(primaryColor);
const primary = dark ? darkPrimaryColor : palettes[5];
// const primaryColorObj: Record<string, string> = {};
// for (let index = 0; index < 10; index++) {
// primaryColorObj[`primary-${index + 1}`] = palettes[index];
// }
// const modifyVars = getThemeVariables({ dark: false });
const { darkAlgorithm, defaultAlgorithm, defaultSeed } = theme;
const mapToken = dark ? darkAlgorithm(defaultSeed) : defaultAlgorithm(defaultSeed);
const modifyVars = convertLegacyToken(mapToken);
// const modifyVars = convertLegacyToken(mapToken);
// !!dark && console.log('modifyVars', dark, modifyVars);
return {
...modifyVars,
// Used for global import to avoid the need to import each style file separately
// reference: Avoid repeated references
// hack: `${modifyVars.hack} @import (reference) "${__dirname + '/../../core/design/var/index.less'}";`,
hack: `true; @import (reference) "${__dirname + '/../../core/design/var/index.less'}";`,
// ...primaryColorObj,
'primary-color': primary,
'link-color': primary,
'info-color': primary,
// 'processing-color': primary,
// 'success-color': '#55D187', // Success color
// 'error-color': '#ED6F6F', // False color
// 'warning-color': '#EFBD47', // Warning color
// 'font-size-base': '14px', // Main font size
// 'border-radius-base': '2px', // Component/float fillet
// 'content-bg-striped': '#fafafa',
};
}

84
web-vue/packages/vite/theme/themeConfig.ts Normal file
View File

@@ -0,0 +1,84 @@
/**
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
* No deletion without permission, or be held responsible to law.
* @author ThinkGem
*/
import { generate } from '@ant-design/colors';
// import { APP_PRESET_COLOR_LIST } from '../../../src/settings/designSetting';
export const primaryColor = '#2a50ec'; // APP_PRESET_COLOR_LIST[0];
export const darkPrimaryColor = '#2a50ec';
export const darkMode = 'light';
type Fn = (...arg: any) => any;
type GenerateTheme = 'default' | 'dark';
export interface GenerateColorsParams {
mixLighten: Fn;
mixDarken: Fn;
tinycolor: any;
color?: string;
}
export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
return generate(color, {
theme,
});
}
export function getThemeColors(color?: string) {
const primary = color || primaryColor;
const lightColors = generateAntColors(primary);
const darkPrimary = darkPrimaryColor; //lightColors[5];
const darkColors = generateAntColors(darkPrimary, 'dark');
return [...lightColors, ...darkColors];
}
export function generateColors({ color = primaryColor, mixLighten, mixDarken, tinycolor }: GenerateColorsParams) {
const arr = new Array(19).fill(0);
const lightens = arr.map((_t, i) => {
return mixLighten(color, i / 5);
});
const darkens = arr
.map((_t, i) => {
return mixDarken(color, i / 5);
})
.filter((item) => !item.includes('-'));
const alphaColors = arr.map((_t, i) => {
return tinycolor(color)
.setAlpha(i / 20)
.toRgbString();
});
const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
const tinycolorLightens = arr
.map((_t, i) => {
return tinycolor(color)
.lighten(i * 5)
.toHexString();
})
.filter((item) => item !== '#ffffff');
const tinycolorDarkens = arr
.map((_t, i) => {
return tinycolor(color)
.darken(i * 5)
.toHexString();
})
.filter((item) => item !== '#000000');
// console.log('lightens', lightens);
// console.log('darkens', darkens);
// console.log('alphaColors', alphaColors);
// console.log('shortAlphaColors', shortAlphaColors);
// console.log('tinycolorLightens', tinycolorLightens);
// console.log('tinycolorDarkens', tinycolorDarkens);
return [...lightens, ...darkens, ...alphaColors, ...shortAlphaColors, ...tinycolorDarkens, ...tinycolorLightens];
}