chore: migrate to farm

This commit is contained in:
Bright Wu 2023-10-10 08:02:26 +08:00
parent a195980547
commit ab08e568e4
16 changed files with 1452 additions and 269 deletions

View File

@ -1,9 +1,9 @@
import type { PluginOption } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import unocss from '@unocss/vite';
import progress from 'vite-plugin-progress';
import VueDevtools from 'vite-plugin-vue-devtools';
// import unocss from '@unocss/vite';
// import progress from 'vite-plugin-progress';
// import VueDevtools from 'vite-plugin-vue-devtools';
import pageRoute from '@soybeanjs/vite-plugin-vue-page-route';
import unplugin from './unplugin';
import mock from './mock';
@ -17,20 +17,28 @@ import pwa from './pwa';
*/
export function setupVitePlugins(viteEnv: ImportMetaEnv): (PluginOption | PluginOption[])[] {
const plugins = [
vue({
script: {
defineModel: true
}
() => ({
vitePlugin: vue({
script: {
defineModel: true
}
}),
filters: ['\\.vue$', '\\\\0.+']
}),
vueJsx(),
VueDevtools(),
() => ({
vitePlugin: vueJsx(),
filters: ['\\.vue$', '\\\\0.+']
}),
// VueDevtools(),
...unplugin(viteEnv),
unocss(),
mock(viteEnv),
progress()
// unocss(),
mock(viteEnv)
// progress()
];
if (viteEnv.VITE_VISUALIZER === 'Y') {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
plugins.push(visualizer as PluginOption);
}
if (viteEnv.VITE_COMPRESS === 'Y') {
@ -42,6 +50,7 @@ export function setupVitePlugins(viteEnv: ImportMetaEnv): (PluginOption | Plugin
if (viteEnv.VITE_SOYBEAN_ROUTE_PLUGIN === 'Y') {
plugins.push(pageRoute());
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return plugins;
}

View File

@ -1,9 +1,9 @@
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite';
import Components from 'unplugin-vue-components/rollup';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
// import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { getSrcPath } from '../utils';
export default function unplugin(viteEnv: ImportMetaEnv) {
@ -33,12 +33,12 @@ export default function unplugin(viteEnv: ImportMetaEnv) {
NaiveUiResolver(),
IconsResolver({ customCollections: [collectionName], componentPrefix: VITE_ICON_PREFIX })
]
}),
createSvgIconsPlugin({
iconDirs: [localIconPath],
symbolId: `${VITE_ICON_LOCAL_PREFIX}-[dir]-[name]`,
inject: 'body-last',
customDomId: '__SVG_ICON_LOCAL__'
})
// createSvgIconsPlugin({
// iconDirs: [localIconPath],
// symbolId: `${VITE_ICON_LOCAL_PREFIX}-[dir]-[name]`,
// inject: 'body-last',
// customDomId: '__SVG_ICON_LOCAL__'
// })
];
}

79
farm.config.ts Normal file
View File

@ -0,0 +1,79 @@
import type { UserConfig } from '@farmfe/core';
import { loadEnv } from 'vite';
// import vue from '@farmfe/js-plugin-vue';
import postcss from '@farmfe/js-plugin-postcss';
import { createViteProxy, getRootPath, getSrcPath, setupVitePlugins, viteDefine } from './build';
import { getServiceEnvConfig } from './.env-config';
function defineConfig(config: UserConfig) {
return config;
}
const mode = process.env.NODE_ENV as string;
const viteEnv = loadEnv(mode, process.cwd()) as unknown as ImportMetaEnv;
const rootPath = getRootPath();
const srcPath = getSrcPath();
const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'Y';
const envConfig = getServiceEnvConfig(viteEnv);
export default defineConfig({
root: rootPath,
compilation: {
resolve: {
alias: {
'~': rootPath,
'@': srcPath
// 'socket.io-parser': 'socket.io-parser/build/esm',
// 'engine.io-parser': 'engine.io-parser/build/esm'
}
},
define: viteDefine,
sourcemap: true
},
vitePlugins: setupVitePlugins(viteEnv) as object[],
plugins: [['@farmfe/plugin-sass', { additionalData: `@use "@/styles/scss/global.scss" as *;` }], postcss()],
server: {
// host: '0.0.0.0',
port: 3200,
// open: true,
proxy: createViteProxy(isOpenProxy, envConfig) as any
}
});
// css: {
// preprocessorOptions: {
// scss: {
// additionalData: `@use "./src/styles/scss/global.scss" as *;`
// }
// }
// },
// server: {
// host: '0.0.0.0',
// port: 3200,
// open: true,
// proxy: createViteProxy(isOpenProxy, envConfig)
// },
// optimizeDeps: {
// include: [
// '@antv/data-set',
// '@antv/g2',
// '@better-scroll/core',
// 'echarts',
// 'swiper',
// 'swiper/vue',
// 'vditor',
// 'wangeditor',
// 'xgplayer'
// ]
// },
// build: {
// reportCompressedSize: false,
// sourcemap: false,
// commonjsOptions: {
// ignoreTryCatch: false
// }
// }
// };
// });

View File

@ -11,6 +11,6 @@
<div id="app">
<div id="appLoading"></div>
</div>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="./src/main.ts"></script>
</body>
</html>

View File

@ -36,6 +36,7 @@
],
"scripts": {
"dev": "cross-env VITE_SERVICE_ENV=dev vite",
"dev:farm": "cross-env VITE_SERVICE_ENV=dev farm start",
"dev:test": "cross-env VITE_SERVICE_ENV=test vite",
"dev:prod": "cross-env VITE_SERVICE_ENV=prod vite",
"build": "npm run typecheck && cross-env VITE_SERVICE_ENV=prod vite build",
@ -75,6 +76,7 @@
"socket.io-client": "4.7.2",
"swiper": "10.2.0",
"ua-parser-js": "1.0.36",
"unocss": "^0.56.5",
"vditor": "3.9.5",
"vue": "3.3.4",
"vue-i18n": "9.4.1",
@ -85,6 +87,11 @@
},
"devDependencies": {
"@amap/amap-jsapi-types": "0.0.13",
"@farmfe/cli": "^0.5.8",
"@farmfe/core": "^0.13.2",
"@farmfe/js-plugin-postcss": "1.0.4",
"@farmfe/js-plugin-vue": "^3.0.0",
"@farmfe/plugin-sass": "^0.2.2",
"@iconify/json": "2.2.118",
"@iconify/vue": "4.1.1",
"@soybeanjs/cli": "0.7.1",
@ -94,6 +101,7 @@
"@types/node": "20.6.3",
"@types/qs": "6.9.8",
"@types/ua-parser-js": "0.7.37",
"@unocss/postcss": "^0.56.5",
"@unocss/preset-uno": "0.56.0",
"@unocss/transformer-directives": "0.56.0",
"@unocss/vite": "0.56.0",

File diff suppressed because it is too large Load Diff

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
// postcss.config.cjs
module.exports = {
plugins: {
'@unocss/postcss': {}
}
};

View File

@ -4,4 +4,4 @@ export * from './layout';
export * from './events';
export * from './echarts';
export * from './icon';
export * from './websocket';
// export * from './websocket';

View File

@ -1,50 +1,50 @@
import { io } from 'socket.io-client';
import type { Socket } from 'socket.io-client';
import { useAppStore } from '../store';
// import { io } from 'socket.io-client';
// import type { Socket } from 'socket.io-client';
// import { useAppStore } from '../store';
type ListenEvents = {
update: (id: string, data: { name: string; age: number }) => void;
};
// type ListenEvents = {
// update: (id: string, data: { name: string; age: number }) => void;
// };
type EmitEvents = {
update: (id: string, data: { name: string; age: number }) => void;
};
// type EmitEvents = {
// update: (id: string, data: { name: string; age: number }) => void;
// };
export function useWebsocket() {
const app = useAppStore();
// export function useWebsocket() {
// const app = useAppStore();
const socket: Socket<ListenEvents, EmitEvents> = (app.socket || io('ws://localhost:8080')) as Socket<
ListenEvents,
EmitEvents
>;
// const socket: Socket<ListenEvents, EmitEvents> = (app.socket || io('ws://localhost:8080')) as Socket<
// ListenEvents,
// EmitEvents
// >;
if (!app.socket) {
app.setSocket(socket);
}
// if (!app.socket) {
// app.setSocket(socket);
// }
function init() {
window.console.log('[socket.io] connecting...');
// function init() {
// window.console.log('[socket.io] connecting...');
socket.on('connect', () => {
window.console.log('[socket.io] connected.');
});
// socket.on('connect', () => {
// window.console.log('[socket.io] connected.');
// });
socket.on('disconnect', () => {
window.console.log('[socket.io] disconnected.');
});
// socket.on('disconnect', () => {
// window.console.log('[socket.io] disconnected.');
// });
socket.on('update', (id, data) => {
window.console.log('[socket.io] update', id, data);
});
}
// socket.on('update', (id, data) => {
// window.console.log('[socket.io] update', id, data);
// });
// }
function handleUpdate(id: string, data: { name: string; age: number }) {
socket.emit('update', id, data);
}
// function handleUpdate(id: string, data: { name: string; age: number }) {
// socket.emit('update', id, data);
// }
init();
// init();
return {
handleUpdate
};
}
// return {
// handleUpdate
// };
// }

View File

@ -1,9 +1,9 @@
import 'uno.css';
// import 'uno.css';
import '@soybeanjs/vue-materials/dist/style.css';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'virtual:svg-icons-register';
// import 'virtual:svg-icons-register';
import '../styles/css/global.css';
/** import static assets: css, js , font and so on. - [引入静态资源css、js和字体文件等] */

View File

@ -1,5 +1,26 @@
import { handleModuleRoutes } from '@/utils';
const modules = import.meta.glob('./**/*.ts', { eager: true }) as AuthRoute.RouteModule;
import { handleModuleRoutes } from '@/utils/router/module';
import about from './about';
import authDemo from './auth-demo';
import component from './component';
import dashboard from './dashboard';
import document from './document';
import exception from './exception';
import func from './function';
import management from './management';
import multiMenu from './multi-menu';
import plugin from './plugin';
// const modules = import.meta.glob('./**/*.ts', { eager: true }) as AuthRoute.RouteModule;
const modules = {
'/about': { default: about },
'/auth-demo': { default: authDemo },
'/component': { default: component },
'/dashboard': { default: dashboard },
'/document': { default: document },
'/exception': { default: exception },
'/func': { default: func },
'/management': { default: management },
'/multi-menu': { default: multiMenu },
'/plugin': { default: plugin }
} as AuthRoute.RouteModule;
export const routes = handleModuleRoutes(modules);

View File

@ -1,15 +1,20 @@
import { getLoginModuleRegExp } from '@/utils';
// import { getLoginModuleRegExp } from '@/utils';
/** 根路由: / */
export const ROOT_ROUTE: AuthRoute.Route = {
name: 'root',
path: '/',
redirect: import.meta.env.VITE_ROUTE_HOME_PATH,
redirect: '/dashboard/workbench',
meta: {
title: 'Root'
}
};
function getLoginModuleRegExp() {
const modules: UnionKey.LoginModule[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
return modules.join('|');
}
/** 固定的路由 */
export const constantRoutes: AuthRoute.Route[] = [
ROOT_ROUTE,

View File

@ -39,9 +39,9 @@ interface RouteState {
export const useRouteStore = defineStore('route-store', {
state: (): RouteState => ({
authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
authRouteMode: 'static',
isInitAuthRoute: false,
routeHomeName: transformRoutePathToRouteName(import.meta.env.VITE_ROUTE_HOME_PATH),
routeHomeName: transformRoutePathToRouteName('/dashboard/analysis'),
menus: [],
searchMenus: [],
cacheRoutes: []

View File

@ -1,6 +1,8 @@
@import "./transition.css";
@import "./reset.css";
@unocss;
html,
body,
#app {

166
uno.config.mjs Normal file
View File

@ -0,0 +1,166 @@
import { defineConfig, presetUno } from 'unocss';
import transformerDirectives from '@unocss/transformer-directives';
export default defineConfig({
content: {
pipeline: {
exclude: ['node_modules', 'dist', '.git', '.husky', '.vscode', 'public', 'build', 'mock', './stats.html']
}
},
presets: [presetUno({ dark: 'class' })],
transformers: [transformerDirectives()],
shortcuts: {
'wh-full': 'w-full h-full',
'flex-center': 'flex justify-center items-center',
'flex-col-center': 'flex-center flex-col',
'flex-x-center': 'flex justify-center',
'flex-y-center': 'flex items-center',
'i-flex-center': 'inline-flex justify-center items-center',
'i-flex-x-center': 'inline-flex justify-center',
'i-flex-y-center': 'inline-flex items-center',
'flex-col': 'flex flex-col',
'flex-col-stretch': 'flex-col items-stretch',
'i-flex-col': 'inline-flex flex-col',
'i-flex-col-stretch': 'i-flex-col items-stretch',
'flex-1-hidden': 'flex-1 overflow-hidden',
'absolute-lt': 'absolute left-0 top-0',
'absolute-lb': 'absolute left-0 bottom-0',
'absolute-rt': 'absolute right-0 top-0',
'absolute-rb': 'absolute right-0 bottom-0',
'absolute-tl': 'absolute-lt',
'absolute-tr': 'absolute-rt',
'absolute-bl': 'absolute-lb',
'absolute-br': 'absolute-rb',
'absolute-center': 'absolute-lt flex-center wh-full',
'fixed-lt': 'fixed left-0 top-0',
'fixed-lb': 'fixed left-0 bottom-0',
'fixed-rt': 'fixed right-0 top-0',
'fixed-rb': 'fixed right-0 bottom-0',
'fixed-tl': 'fixed-lt',
'fixed-tr': 'fixed-rt',
'fixed-bl': 'fixed-lb',
'fixed-br': 'fixed-rb',
'fixed-center': 'fixed-lt flex-center wh-full',
'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
'ellipsis-text': 'nowrap-hidden text-ellipsis',
'transition-base': 'transition-all duration-300 ease-in-out'
},
theme: {
colors: {
primary: 'rgb(var(--primary-color))',
primary_hover: 'rgb(var(--primary-color-hover))',
primary_pressed: 'rgb(var(--primary-color-pressed))',
primary_active: 'rgba(var(--primary-color-active),0.1)',
primary_1: 'rgb(var(--primary-color1))',
primary_2: 'rgb(var(--primary-color2))',
primary_3: 'rgb(var(--primary-color3))',
primary_4: 'rgb(var(--primary-color4))',
primary_5: 'rgb(var(--primary-color5))',
primary_6: 'rgb(var(--primary-color6))',
primary_7: 'rgb(var(--primary-color7))',
primary_8: 'rgb(var(--primary-color8))',
primary_9: 'rgb(var(--primary-color9))',
info: 'rgb(var(--info-color))',
info_hover: 'rgb(var(--info-color-hover))',
info_pressed: 'rgb(var(--info-color-pressed))',
info_active: 'rgb(var(--info-color-active),0.1)',
success: 'rgb(var(--success-color))',
success_hover: 'rgb(var(--success-color-hover))',
success_pressed: 'rgb(var(--success-color-pressed))',
success_active: 'rgb(var(--success-color-active),0.1)',
warning: 'rgb(var(--warning-color))',
warning_hover: 'rgb(var(--warning-color-hover))',
warning_pressed: 'rgb(var(--warning-color-pressed))',
warning_active: 'rgb(var(--warning-color-active),0.1)',
error: 'rgb(var(--error-color))',
error_hover: 'rgb(var(--error-color-hover))',
error_pressed: 'rgb(var(--error-color-pressed))',
error_active: 'rgb(var(--error-color-active),0.1)',
dark: '#18181c'
}
}
});
// import { defineConfig } from '@unocss/vite';
// import presetUno from '@unocss/preset-uno';
// import transformerDirectives from '@unocss/transformer-directives';
// export default defineConfig({
// content: {
// pipeline: {
// exclude: ['node_modules', 'dist', '.git', '.husky', '.vscode', 'public', 'build', 'mock', './stats.html']
// }
// },
// presets: [presetUno({ dark: 'class' })],
// transformers: [transformerDirectives()],
// shortcuts: {
// 'wh-full': 'w-full h-full',
// 'flex-center': 'flex justify-center items-center',
// 'flex-col-center': 'flex-center flex-col',
// 'flex-x-center': 'flex justify-center',
// 'flex-y-center': 'flex items-center',
// 'i-flex-center': 'inline-flex justify-center items-center',
// 'i-flex-x-center': 'inline-flex justify-center',
// 'i-flex-y-center': 'inline-flex items-center',
// 'flex-col': 'flex flex-col',
// 'flex-col-stretch': 'flex-col items-stretch',
// 'i-flex-col': 'inline-flex flex-col',
// 'i-flex-col-stretch': 'i-flex-col items-stretch',
// 'flex-1-hidden': 'flex-1 overflow-hidden',
// 'absolute-lt': 'absolute left-0 top-0',
// 'absolute-lb': 'absolute left-0 bottom-0',
// 'absolute-rt': 'absolute right-0 top-0',
// 'absolute-rb': 'absolute right-0 bottom-0',
// 'absolute-tl': 'absolute-lt',
// 'absolute-tr': 'absolute-rt',
// 'absolute-bl': 'absolute-lb',
// 'absolute-br': 'absolute-rb',
// 'absolute-center': 'absolute-lt flex-center wh-full',
// 'fixed-lt': 'fixed left-0 top-0',
// 'fixed-lb': 'fixed left-0 bottom-0',
// 'fixed-rt': 'fixed right-0 top-0',
// 'fixed-rb': 'fixed right-0 bottom-0',
// 'fixed-tl': 'fixed-lt',
// 'fixed-tr': 'fixed-rt',
// 'fixed-bl': 'fixed-lb',
// 'fixed-br': 'fixed-rb',
// 'fixed-center': 'fixed-lt flex-center wh-full',
// 'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
// 'ellipsis-text': 'nowrap-hidden text-ellipsis',
// 'transition-base': 'transition-all duration-300 ease-in-out'
// },
// theme: {
// colors: {
// primary: 'rgb(var(--primary-color))',
// primary_hover: 'rgb(var(--primary-color-hover))',
// primary_pressed: 'rgb(var(--primary-color-pressed))',
// primary_active: 'rgba(var(--primary-color-active),0.1)',
// primary_1: 'rgb(var(--primary-color1))',
// primary_2: 'rgb(var(--primary-color2))',
// primary_3: 'rgb(var(--primary-color3))',
// primary_4: 'rgb(var(--primary-color4))',
// primary_5: 'rgb(var(--primary-color5))',
// primary_6: 'rgb(var(--primary-color6))',
// primary_7: 'rgb(var(--primary-color7))',
// primary_8: 'rgb(var(--primary-color8))',
// primary_9: 'rgb(var(--primary-color9))',
// info: 'rgb(var(--info-color))',
// info_hover: 'rgb(var(--info-color-hover))',
// info_pressed: 'rgb(var(--info-color-pressed))',
// info_active: 'rgb(var(--info-color-active),0.1)',
// success: 'rgb(var(--success-color))',
// success_hover: 'rgb(var(--success-color-hover))',
// success_pressed: 'rgb(var(--success-color-pressed))',
// success_active: 'rgb(var(--success-color-active),0.1)',
// warning: 'rgb(var(--warning-color))',
// warning_hover: 'rgb(var(--warning-color-hover))',
// warning_pressed: 'rgb(var(--warning-color-pressed))',
// warning_active: 'rgb(var(--warning-color-active),0.1)',
// error: 'rgb(var(--error-color))',
// error_hover: 'rgb(var(--error-color-hover))',
// error_pressed: 'rgb(var(--error-color-pressed))',
// error_active: 'rgb(var(--error-color-active),0.1)',
// dark: '#18181c'
// }
// }
// });

View File

@ -1,83 +0,0 @@
import { defineConfig } from '@unocss/vite';
import presetUno from '@unocss/preset-uno';
import transformerDirectives from '@unocss/transformer-directives';
export default defineConfig({
content: {
pipeline: {
exclude: ['node_modules', 'dist', '.git', '.husky', '.vscode', 'public', 'build', 'mock', './stats.html']
}
},
presets: [presetUno({ dark: 'class' })],
transformers: [transformerDirectives()],
shortcuts: {
'wh-full': 'w-full h-full',
'flex-center': 'flex justify-center items-center',
'flex-col-center': 'flex-center flex-col',
'flex-x-center': 'flex justify-center',
'flex-y-center': 'flex items-center',
'i-flex-center': 'inline-flex justify-center items-center',
'i-flex-x-center': 'inline-flex justify-center',
'i-flex-y-center': 'inline-flex items-center',
'flex-col': 'flex flex-col',
'flex-col-stretch': 'flex-col items-stretch',
'i-flex-col': 'inline-flex flex-col',
'i-flex-col-stretch': 'i-flex-col items-stretch',
'flex-1-hidden': 'flex-1 overflow-hidden',
'absolute-lt': 'absolute left-0 top-0',
'absolute-lb': 'absolute left-0 bottom-0',
'absolute-rt': 'absolute right-0 top-0',
'absolute-rb': 'absolute right-0 bottom-0',
'absolute-tl': 'absolute-lt',
'absolute-tr': 'absolute-rt',
'absolute-bl': 'absolute-lb',
'absolute-br': 'absolute-rb',
'absolute-center': 'absolute-lt flex-center wh-full',
'fixed-lt': 'fixed left-0 top-0',
'fixed-lb': 'fixed left-0 bottom-0',
'fixed-rt': 'fixed right-0 top-0',
'fixed-rb': 'fixed right-0 bottom-0',
'fixed-tl': 'fixed-lt',
'fixed-tr': 'fixed-rt',
'fixed-bl': 'fixed-lb',
'fixed-br': 'fixed-rb',
'fixed-center': 'fixed-lt flex-center wh-full',
'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
'ellipsis-text': 'nowrap-hidden text-ellipsis',
'transition-base': 'transition-all duration-300 ease-in-out'
},
theme: {
colors: {
primary: 'rgb(var(--primary-color))',
primary_hover: 'rgb(var(--primary-color-hover))',
primary_pressed: 'rgb(var(--primary-color-pressed))',
primary_active: 'rgba(var(--primary-color-active),0.1)',
primary_1: 'rgb(var(--primary-color1))',
primary_2: 'rgb(var(--primary-color2))',
primary_3: 'rgb(var(--primary-color3))',
primary_4: 'rgb(var(--primary-color4))',
primary_5: 'rgb(var(--primary-color5))',
primary_6: 'rgb(var(--primary-color6))',
primary_7: 'rgb(var(--primary-color7))',
primary_8: 'rgb(var(--primary-color8))',
primary_9: 'rgb(var(--primary-color9))',
info: 'rgb(var(--info-color))',
info_hover: 'rgb(var(--info-color-hover))',
info_pressed: 'rgb(var(--info-color-pressed))',
info_active: 'rgb(var(--info-color-active),0.1)',
success: 'rgb(var(--success-color))',
success_hover: 'rgb(var(--success-color-hover))',
success_pressed: 'rgb(var(--success-color-pressed))',
success_active: 'rgb(var(--success-color-active),0.1)',
warning: 'rgb(var(--warning-color))',
warning_hover: 'rgb(var(--warning-color-hover))',
warning_pressed: 'rgb(var(--warning-color-pressed))',
warning_active: 'rgb(var(--warning-color-active),0.1)',
error: 'rgb(var(--error-color))',
error_hover: 'rgb(var(--error-color-hover))',
error_pressed: 'rgb(var(--error-color-pressed))',
error_active: 'rgb(var(--error-color-active),0.1)',
dark: '#18181c'
}
}
});