feat: 前端搭建
This commit is contained in:
Gsh
86
Yi.Ai.Vue3/src/config/darkMode.ts
Normal file
86
Yi.Ai.Vue3/src/config/darkMode.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
export const optimumHeaderTheme: any = {
|
||||
light: {
|
||||
'--el-header-optimum-color': '#000000',
|
||||
'--el-header-optimum-hover-color': 'var(--el-color-primary)',
|
||||
'--el-header-optimum-active-color': 'var(--el-color-primary)',
|
||||
'--el-header-optimum-hover-bg-color': '#f4f4f5',
|
||||
'--el-header-optimum-active-bg-color': 'var(--el-color-primary-light-8)',
|
||||
'--el-header-optimum-border-color': 'var(--el-color-primary)',
|
||||
},
|
||||
inverted: {
|
||||
'--el-header-optimum-color': '#ffffff',
|
||||
'--el-header-optimum-hover-color': 'var(--el-color-primary)',
|
||||
'--el-header-optimum-active-color': '#ffffff',
|
||||
'--el-header-optimum-hover-bg-color': 'transparent',
|
||||
'--el-header-optimum-active-bg-color': 'var(--el-color-primary)',
|
||||
'--el-header-optimum-border-color': 'var(--el-color-primary)',
|
||||
},
|
||||
dark: {
|
||||
'--el-header-optimum-color': '#E5EAF3',
|
||||
'--el-header-optimum-hover-color': 'var(--el-color-primary)',
|
||||
'--el-header-optimum-active-color': 'var(--el-color-primary)',
|
||||
'--el-header-optimum-hover-bg-color': 'var(--el-color-primary-light-9)',
|
||||
'--el-header-optimum-active-bg-color': 'var(--el-color-primary-light-8)',
|
||||
'--el-header-optimum-border-color': 'var(--el-color-primary)',
|
||||
},
|
||||
};
|
||||
|
||||
export const headerTheme: any = {
|
||||
light: {
|
||||
'--el-header-bg-color': '#ffffff',
|
||||
'--el-header-text-color': '#303133',
|
||||
'--el-header-text-color-regular': '#606266',
|
||||
},
|
||||
inverted: {
|
||||
'--el-header-bg-color': '#141414',
|
||||
'--el-header-text-color': '#E5EAF3',
|
||||
'--el-header-text-color-regular': '#CFD3DC',
|
||||
},
|
||||
dark: {
|
||||
'--el-header-bg-color': '#141414',
|
||||
'--el-header-text-color': '#E5EAF3',
|
||||
'--el-header-text-color-regular': '#CFD3DC',
|
||||
},
|
||||
};
|
||||
|
||||
export const asideTheme: any = {
|
||||
light: {
|
||||
'--el-aside-logo-text-color': '#303133',
|
||||
},
|
||||
inverted: {
|
||||
'--el-aside-logo-text-color': '#E5EAF3',
|
||||
},
|
||||
dark: {
|
||||
'--el-aside-logo-text-color': '#E5EAF3',
|
||||
},
|
||||
};
|
||||
|
||||
export const menuTheme: any = {
|
||||
light: {
|
||||
'--el-menu-bg-color': '#ffffff',
|
||||
'--el-menu-hover-bg-color': '#f4f4f5',
|
||||
'--el-menu-active-bg-color': 'var(--el-color-primary-light-8)',
|
||||
'--el-menu-text-color': '#333639',
|
||||
'--el-menu-hover-text-color': 'var(--el-color-primary)',
|
||||
'--el-menu-active-text-color': 'var(--el-color-primary)',
|
||||
'--el-menu-border-left-color': 'var(--el-color-primary)',
|
||||
},
|
||||
inverted: {
|
||||
'--el-menu-bg-color': '#191A20',
|
||||
'--el-menu-hover-bg-color': '#000000',
|
||||
'--el-menu-active-bg-color': 'var(--el-color-primary)',
|
||||
'--el-menu-text-color': '#dBd8d8',
|
||||
'--el-menu-hover-text-color': '#ffffff',
|
||||
'--el-menu-active-text-color': '#ffffff',
|
||||
'--el-menu-border-left-color': 'transparent',
|
||||
},
|
||||
dark: {
|
||||
'--el-menu-bg-color': '#141414',
|
||||
'--el-menu-hover-bg-color': 'var(--el-color-primary-light-9)',
|
||||
'--el-menu-active-bg-color': 'var(--el-color-primary-light-8)',
|
||||
'--el-menu-text-color': '#e5eAf3',
|
||||
'--el-menu-hover-text-color': 'var(--el-color-primary)',
|
||||
'--el-menu-active-text-color': 'var(--el-color-primary)',
|
||||
'--el-menu-border-left-color': 'var(--el-color-primary)',
|
||||
},
|
||||
};
|
||||
79
Yi.Ai.Vue3/src/config/design.ts
Normal file
79
Yi.Ai.Vue3/src/config/design.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
export type LayoutType = 'vertical';
|
||||
|
||||
// 仿豆包折叠逻辑
|
||||
export type CollapseType =
|
||||
| 'alwaysCollapsed' // 始终折叠
|
||||
| 'followSystem' // 跟随系统视口宽度
|
||||
| 'alwaysExpanded' // 始终打开
|
||||
| 'narrowExpandWideCollapse'; // 系统视口 宽小则张，宽大则收
|
||||
|
||||
export interface DesignConfigState {
|
||||
// 系统主题
|
||||
darkMode: 'light' | 'dark' | 'inverted';
|
||||
// 系统主题色
|
||||
themeColor: string;
|
||||
// 系统内置风格
|
||||
themeColorList: string[];
|
||||
// 是否开启路由动画
|
||||
isPageAnimate: boolean;
|
||||
// 路由动画类型
|
||||
pageAnimateType: string;
|
||||
// 布局模式 (纵向：vertical | ... | 自己定义)
|
||||
layout: LayoutType;
|
||||
// 折叠类型
|
||||
collapseType: CollapseType;
|
||||
// 是否折叠菜单
|
||||
isCollapse: boolean;
|
||||
// 安全区是否被悬停
|
||||
isSafeAreaHover: boolean;
|
||||
// 跟踪是否首次激活悬停
|
||||
hasActivatedHover: boolean;
|
||||
}
|
||||
|
||||
export const themeColorList: string[] = [
|
||||
'#5d9dfe',
|
||||
'#2d8cf0',
|
||||
'#0960bd',
|
||||
'#0084f4',
|
||||
'#009688',
|
||||
'#536dfe',
|
||||
'#ff5c93',
|
||||
'#ee4f12',
|
||||
'#0096c7',
|
||||
'#9c27b0',
|
||||
'#ff9800',
|
||||
'#FF3D68',
|
||||
'#00C1D4',
|
||||
'#18a058',
|
||||
'#78DEC7',
|
||||
'#1768AC',
|
||||
'#FB9300',
|
||||
'#FC5404',
|
||||
'#8675ff',
|
||||
];
|
||||
|
||||
const design: DesignConfigState = {
|
||||
// 深色主题
|
||||
darkMode: 'light',
|
||||
// 系统主题色
|
||||
themeColor: '#F7B51C',
|
||||
// 系统内置主题色列表
|
||||
themeColorList,
|
||||
// 是否开启路由动画
|
||||
isPageAnimate: false,
|
||||
// 路由动画类型
|
||||
// 需要自定义路由动画可以把 Main 组件样式代码注释放开，从新对话切换到带id的路由时，会执行这个动画样式
|
||||
pageAnimateType: 'zoom-fade',
|
||||
// 布局模式 (纵向：vertical | ... | 自己定义)
|
||||
layout: 'vertical',
|
||||
// 折叠类型
|
||||
collapseType: 'followSystem',
|
||||
// 是否折叠菜单
|
||||
isCollapse: false,
|
||||
// 安全区是否被悬停
|
||||
isSafeAreaHover: false,
|
||||
// 跟踪是否首次激活悬停
|
||||
hasActivatedHover: false,
|
||||
};
|
||||
|
||||
export default design;
|
||||
15
Yi.Ai.Vue3/src/config/index.ts
Normal file
15
Yi.Ai.Vue3/src/config/index.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
// 全局默认配置项
|
||||
// 首页地址[默认]
|
||||
export const HOME_URL: string = '/chat';
|
||||
|
||||
// 默认主题颜色
|
||||
export const DEFAULT_THEME_COLOR: string = '#2992FF';
|
||||
|
||||
// 折叠阈值
|
||||
export const COLLAPSE_THRESHOLD: number = 600;
|
||||
|
||||
// 左侧菜单宽度
|
||||
export const SIDE_BAR_WIDTH: number = 280;
|
||||
|
||||
// 路由白名单地址[本地存在的路由 staticRouter.ts 中]
|
||||
export const ROUTER_WHITE_LIST: string[] = ['/chat', '/chat/not_login', '/403', '/404'];
|
||||
Reference in New Issue
Block a user