gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 08:19:15 +08:00
Code

feat: 修改主题色

Browse Source
This commit is contained in:
zhengkunwang223 2023-01-12 11:45:01 +08:00 committed by zhengkunwang223
parent b59225af1e
commit 3dda250b4d
16 changed files with 161 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/auto-imports.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
}
export {}

100
frontend/components.d.ts vendored
View File

@ -3,31 +3,79 @@
// Read more: https://github.com/vuejs/vue-next/pull/3399
declare module 'vue' {
export interface GlobalComponents {
403: typeof import('./src/components/error-message/403.vue')['default']
404: typeof import('./src/components/error-message/404.vue')['default']
500: typeof import('./src/components/error-message/500.vue')['default']
AppLayout: typeof import('./src/components/app-layout/index.vue')['default']
AppStatus: typeof import('./src/components/app-status/index.vue')['default']
BackButton: typeof import('./src/components/back-button/index.vue')['default']
BreadCrumbs: typeof import('./src/components/bread-crumbs/index.vue')['default']
BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default']
CardWithHeader: typeof import('./src/components/card-with-header/index.vue')['default']
Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default']
ComplexTable: typeof import('./src/components/complex-table/index.vue')['default']
ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default']
ContainerLog: typeof import('./src/components/container-log/index.vue')['default']
DrawerHeader: typeof import('./src/components/drawer-header/index.vue')['default']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
FileList: typeof import('./src/components/file-list/index.vue')['default']
FileRole: typeof import('./src/components/file-role/index.vue')['default']
Footer: typeof import('./src/components/app-layout/footer/index.vue')['default']
Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
Status: typeof import('./src/components/status/index.vue')['default']
SubItem: typeof import('./src/components/app-layout/menu/components/sub-item.vue')['default']
SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default']
}
export interface GlobalComponents {
403: typeof import('./src/components/error-message/403.vue')['default'];
404: typeof import('./src/components/error-message/404.vue')['default'];
500: typeof import('./src/components/error-message/500.vue')['default'];
AppLayout: typeof import('./src/components/app-layout/index.vue')['default'];
AppStatus: typeof import('./src/components/app-status/index.vue')['default'];
BackButton: typeof import('./src/components/back-button/index.vue')['default'];
BreadCrumbs: typeof import('./src/components/bread-crumbs/index.vue')['default'];
BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default'];
Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default'];
ComplexTable: typeof import('./src/components/complex-table/index.vue')['default'];
ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default'];
ContainerLog: typeof import('./src/components/container-log/index.vue')['default'];
DrawerHeader: typeof import('./src/components/drawer-header/index.vue')['default'];
ElAlert: typeof import('element-plus/es')['ElAlert'];
ElAside: typeof import('element-plus/es')['ElAside'];
ElButton: typeof import('element-plus/es')['ElButton'];
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'];
ElCard: typeof import('element-plus/es')['ElCard'];
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'];
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'];
ElCol: typeof import('element-plus/es')['ElCol'];
ElCollapse: typeof import('element-plus/es')['ElCollapse'];
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'];
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'];
ElContainer: typeof import('element-plus/es')['ElContainer'];
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'];
ElDescriptions: typeof import('element-plus/es')['ElDescriptions'];
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem'];
ElDialog: typeof import('element-plus/es')['ElDialog'];
ElDivider: typeof import('element-plus/es')['ElDivider'];
ElDrawer: typeof import('element-plus/es')['ElDrawer'];
ElFooter: typeof import('element-plus/es')['ElFooter'];
ElForm: typeof import('element-plus/es')['ElForm'];
ElFormItem: typeof import('element-plus/es')['ElFormItem'];
ElHeader: typeof import('element-plus/es')['ElHeader'];
ElIcon: typeof import('element-plus/es')['ElIcon'];
ElImage: typeof import('element-plus/es')['ElImage'];
ElInput: typeof import('element-plus/es')['ElInput'];
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'];
ElLink: typeof import('element-plus/es')['ElLink'];
ElMain: typeof import('element-plus/es')['ElMain'];
ElMenu: typeof import('element-plus/es')['ElMenu'];
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'];
ElOption: typeof import('element-plus/es')['ElOption'];
ElPageHeader: typeof import('element-plus/es')['ElPageHeader'];
ElPopover: typeof import('element-plus/es')['ElPopover'];
ElProgress: typeof import('element-plus/es')['ElProgress'];
ElRadio: typeof import('element-plus/es')['ElRadio'];
ElRadioButton: typeof import('element-plus/es')['ElRadioButton'];
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'];
ElRow: typeof import('element-plus/es')['ElRow'];
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'];
ElSelect: typeof import('element-plus/es')['ElSelect'];
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'];
ElSwitch: typeof import('element-plus/es')['ElSwitch'];
ElTable: typeof import('element-plus/es')['ElTable'];
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'];
ElTabPane: typeof import('element-plus/es')['ElTabPane'];
ElTabs: typeof import('element-plus/es')['ElTabs'];
ElTag: typeof import('element-plus/es')['ElTag'];
ElUpload: typeof import('element-plus/es')['ElUpload'];
FileList: typeof import('./src/components/file-list/index.vue')['default'];
FileRole: typeof import('./src/components/file-role/index.vue')['default'];
Footer: typeof import('./src/components/app-layout/footer/index.vue')['default'];
Loading: typeof import('element-plus/es')['ElLoadingDirective'];
Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default'];
Menu: typeof import('./src/components/app-layout/menu/index.vue')['default'];
RouterButton: typeof import('./src/components/router-button/index.vue')['default'];
Status: typeof import('./src/components/status/index.vue')['default'];
SubItem: typeof import('./src/components/app-layout/menu/components/sub-item.vue')['default'];
SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default'];
}
}
export { }
export {};

14
frontend/package-lock.json generated
View File

@ -19,7 +19,7 @@
"echarts": "^5.3.0",
"echarts-liquidfill": "^3.1.0",
"element-plus": "^2.2.13",
"fit2cloud-ui-plus": "^0.0.1-beta.15",
"fit2cloud-ui-plus": "^1.0.4",
"js-base64": "^3.7.2",
"js-md5": "^0.7.3",
"md-editor-v3": "^2.7.2",
@ -7011,9 +7011,9 @@
}
},
"node_modules/fit2cloud-ui-plus": {
"version": "0.0.1-beta.19",
"resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-0.0.1-beta.19.tgz",
"integrity": "sha512-IhDC7aZDb8MAqxLm293gg2FWk5dJ8J6UjeZk2/2MrLaHhi5HvFGB2N+8Yu3cWBKCffh2WWTwqr2H+0hPjbuV1Q==",
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-1.0.4.tgz",
"integrity": "sha512-TDalWK0mfVIiaLLLsdUUukJVDklDPYVGVqAZPUu++tSpfJ9Q35isVVsk4U26G/Lxh00wVM0gTIZiQ3sSOGbGqA==",
"dependencies": {
"@element-plus/icons-vue": "^1.1.4",
"element-plus": "^2.2.14",
@ -19000,9 +19000,9 @@
}
},
"fit2cloud-ui-plus": {
"version": "0.0.1-beta.19",
"resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-0.0.1-beta.19.tgz",
"integrity": "sha512-IhDC7aZDb8MAqxLm293gg2FWk5dJ8J6UjeZk2/2MrLaHhi5HvFGB2N+8Yu3cWBKCffh2WWTwqr2H+0hPjbuV1Q==",
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/fit2cloud-ui-plus/-/fit2cloud-ui-plus-1.0.4.tgz",
"integrity": "sha512-TDalWK0mfVIiaLLLsdUUukJVDklDPYVGVqAZPUu++tSpfJ9Q35isVVsk4U26G/Lxh00wVM0gTIZiQ3sSOGbGqA==",
"requires": {
"@element-plus/icons-vue": "^1.1.4",
"element-plus": "^2.2.14",

2
frontend/package.json
View File

@ -31,7 +31,7 @@
"echarts": "^5.3.0",
"echarts-liquidfill": "^3.1.0",
"element-plus": "^2.2.13",
"fit2cloud-ui-plus": "^0.0.1-beta.15",
"fit2cloud-ui-plus": "^1.0.4",
"js-base64": "^3.7.2",
"js-md5": "^0.7.3",
"md-editor-v3": "^2.7.2",

4
frontend/src/App.vue
View File

@ -1,5 +1,5 @@
<template>
<el-config-provider :locale="i18nLocale" :button="config" :size="assemblySize">
<el-config-provider :locale="i18nLocale" :button="config" size="default">
<router-view v-if="isRouterAlive"></router-view>
</el-config-provider>
</template>
@ -23,7 +23,7 @@ const i18nLocale = computed((): any => {
return '';
});
const assemblySize = computed((): string => globalStore.assemblySize);
// const assemblySize = computed((): string => globalStore.assemblySize);
let isRouterAlive = ref(true);

26
frontend/src/main.ts
View File

@ -1,27 +1,31 @@
import { createApp } from 'vue';
import App from './App.vue';
// import 'element-plus/dist/index.css';
// import 'element-plus/theme-chalk/dark/css-vars.css';
import '@/styles/index.scss';
import '@/styles/reset.scss';
import '@/styles/common.scss';
import '@/assets/iconfont/iconfont.css';
import '@/assets/iconfont/iconfont.js';
import ElementPlus from 'element-plus';
import Fit2CloudPlus from 'fit2cloud-ui-plus';
import * as Icons from '@element-plus/icons-vue';
import '@/styles/element-dark.scss';
import '@/styles/element.scss';
import 'element-plus/dist/index.css';
import 'element-plus/theme-chalk/dark/css-vars.css';
import 'fit2cloud-ui-plus/src/styles/index.scss';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import '@kangc/v-md-editor/lib/style/preview.css';
import hljs from 'highlight.js';
import directives from '@/directives/index';
import router from '@/routers/index';
import I18n from '@/lang/index';
import pinia from '@/store/index';
import SvgIcon from './components/svg-icon/svg-icon.vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';
import ElementPlus from 'element-plus';
import Fit2CloudPlus from 'fit2cloud-ui-plus';
import * as Icons from '@element-plus/icons-vue';
VMdPreview.use(githubTheme, {
hljs,

3
frontend/src/routers/modules/app-store.ts
View File

@ -4,7 +4,7 @@ const appStoreRouter = {
sort: 2,
path: '/apps',
component: Layout,
redirect: '/apps',
redirect: '/apps/all',
meta: {
icon: 'p-appstore',
title: 'menu.apps',
@ -13,6 +13,7 @@ const appStoreRouter = {
{
path: '/apps',
name: 'App',
redirect: '/apps/all',
component: () => import('@/views/app-store/index.vue'),
meta: {},
children: [

6
frontend/src/store/index.ts
View File

@ -9,11 +9,10 @@ export const GlobalStore = defineStore({
state: (): GlobalState => ({
isLogin: false,
csrfToken: '',
assemblySize: 'default',
language: '',
themeConfig: {
panelName: '',
primary: '#409EFF',
primary: '#005EEB',
theme: 'bright',
footer: true,
},
@ -26,9 +25,6 @@ export const GlobalStore = defineStore({
setCsrfToken(token: string) {
this.csrfToken = token;
},
setAssemblySize(assemblySize: string) {
this.assemblySize = assemblySize;
},
updateLanguage(language: string) {
this.language = language;
},

2
frontend/src/store/interface/index.ts
View File

@ -11,7 +11,7 @@ export interface GlobalState {
isLogin: boolean;
csrfToken: string;
language: string; // zh | en
assemblySize: string; // small | default | large
// assemblySize: string; // small | default | large
themeConfig: ThemeConfigProp;
}

2
frontend/src/styles/element-dark.scss
View File

@ -1,6 +1,4 @@
/* 自定义 element 暗黑模式样式 */
html.dark {
// * element plus(可以全部注释掉，只是写在这里方便使用😀)
// --el-color-primary: #409eff;
// --el-color-primary-light-3: #3375b9;
// --el-color-primary-light-5: #2a598a;

28
frontend/src/styles/element.scss
View File

@ -1,20 +1,16 @@
// * 设置 notification 层级在 loading 之上
.el-notification {
z-index: 99999 !important;
}
// * 设置 message 层级在 loading 之上
.el-message {
z-index: 99999 !important;
}
// * el-table 样式
.table-box {
display: flex;
flex-direction: column;
height: 100%;
// 表格 search 样式
.table-search {
display: flex;
margin-bottom: 10px;
@ -32,12 +28,10 @@
width: 400px;
}
// 去除时间选择器上下 padding
.el-range-editor.el-input__wrapper {
padding: 0 10px;
}
// el-select 为多选时不换行显示
.el-select__tags {
overflow: hidden;
white-space: nowrap;
@ -56,7 +50,6 @@
}
}
// 表格 header 样式
.table-header {
.header-button-lf {
float: left;
@ -72,9 +65,7 @@
}
}
// el-table 表格样式
.el-table {
// 表格自适应撑满整个页面(设置了 flex:1,页面上表格必须添加 height 属性)
flex: 1;
.el-table__header th,
.el-table__body td {
@ -88,14 +79,12 @@
background: #fafafa;
}
// table 中 image 图片样式
.table-image {
width: 50px;
height: 50px;
border-radius: 50%;
}
// 解决 el-table 中 header 文字换行问题
.el-table__header .el-table__cell > .cell {
white-space: nowrap;
}
@ -103,7 +92,6 @@
height: 52px;
}
// 解决表格数据为空时样式不居中问题(仅在element-plus中)
.el-table__empty-block {
position: absolute;
top: 50%;
@ -113,18 +101,8 @@
.table-empty {
line-height: 30px;
}
// 解决 keep-alive || 浏览器窗口大小变化 导致 el-table 样式错乱问题（2.1.4会出现问题，升级之后问题已解决）
// .el-table__body-wrapper {
// height: calc(100% - 50px) !important;
// }
// .el-table__inner-wrapper,
// .el-scrollbar__wrap {
// height: 100% !important;
// }
}
// 表格 pagination 样式
.el-pagination {
display: flex;
justify-content: flex-end;
@ -132,9 +110,7 @@
}
}
// * el-drawer 样式
.el-drawer {
// drawer header 样式
.el-drawer__header {
padding: 15px 20px 14px;
margin-bottom: 0;
@ -145,7 +121,6 @@
}
}
// drawer header 样式
.el-drawer__footer {
border-top: 1px solid #ebeef5;
}
@ -153,7 +128,6 @@
width: 100%;
}
// drawer-form 多列 form-item
.drawer-multiColumn-form {
display: flex;
flex-wrap: wrap;
@ -166,7 +140,6 @@
}
}
// * el-dialog 样式
.el-dialog {
.el-dialog__header {
padding: 15px 20px;
@ -188,5 +161,4 @@
height: 100%;
margin-right: 20px;
border: 0;
// box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

2
frontend/src/styles/index.scss Normal file
View File

@ -0,0 +1,2 @@
@use './theme.scss';
@use 'fit2cloud-ui-plus/src/styles/index.scss';

130
frontend/src/styles/reset.scss
View File

@ -1,132 +1,3 @@
/* Reset style sheet */
/* 因为使用富文本编辑器才注释掉，如果你项目没有使用富文本编辑器，可以取消注释 */
// html,
// body,
// div,
// span,
// applet,
// object,
// iframe,
// h1,
// h2,
// h3,
// h4,
// h5,
// h6,
// p,
// blockquote,
// pre,
// a,
// abbr,
// acronym,
// address,
// big,
// cite,
// code,
// del,
// dfn,
// em,
// img,
// ins,
// kbd,
// q,
// s,
// samp,
// small,
// strike,
// strong,
// sub,
// sup,
// tt,
// var,
// b,
// u,
// i,
// center,
// dl,
// dt,
// dd,
// ol,
// ul,
// li,
// fieldset,
// form,
// label,
// legend,
// table,
// caption,
// tbody,
// tfoot,
// thead,
// tr,
// th,
// td,
// article,
// aside,
// canvas,
// details,
// embed,
// figure,
// figcaption,
// footer,
// header,
// hgroup,
// menu,
// nav,
// output,
// ruby,
// section,
// summary,
// time,
// mark,
// audio,
// video {
// padding: 0;
// margin: 0;
// font: inherit;
// font-size: 100%;
// vertical-align: baseline;
// border: 0;
// }
// /* HTML5 display-role reset for older browsers */
// article,
// aside,
// details,
// figcaption,
// figure,
// footer,
// header,
// hgroup,
// menu,
// nav,
// section {
// display: block;
// }
// body {
// padding: 0;
// margin: 0;
// }
// ol,
// ul {
// list-style: none;
// }
// blockquote,
// q {
// quotes: none;
// }
// blockquote::before,
// blockquote::after,
// q::before,
// q::after {
// content: "";
// content: none;
// }
// table {
// border-spacing: 0;
// border-collapse: collapse;
// }
html,
body,
#app {
@ -136,7 +7,6 @@ body,
margin: 0;
}
/* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */
:-webkit-any(article, aside, nav, section) h1 {
font-size: 2em;
}

10
frontend/src/styles/theme.scss Normal file
View File

@ -0,0 +1,10 @@
// $primary-color: #005eeb;
// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
// $colors: (
// 'primary': (
// 'base': $primary-color,
// ),
// )
// );
// @use 'element-plus/theme-chalk/src/common/var.scss' as *;

23
frontend/src/styles/var.scss
View File

@ -1,2 +1,23 @@
/* 全局 css 变量 */
$primary-color: #005eeb;
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': $primary-color,
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
)
);

20
frontend/vite.config.ts
View File

@ -10,6 +10,10 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
import DefineOptions from 'unplugin-vue-define-options/vite';
import MonacoEditorPlugin from 'vite-plugin-monaco-editor';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const env = loadEnv(mode, process.cwd());
const viteEnv = wrapperEnv(env);
@ -49,7 +53,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
MonacoEditorPlugin({}),
viteEnv.VITE_REPORT && visualizer(),
// * gzip compress
viteEnv.VITE_BUILD_GZIP &&
viteCompression({
verbose: true,
@ -58,6 +61,20 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
algorithm: 'gzip',
ext: '.gz',
}),
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
}),
],
}),
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
}),
],
}),
],
esbuild: {
pure: viteEnv.VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [],
@ -67,7 +84,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
minify: 'esbuild',
rollupOptions: {
output: {
// Static resource classification and packaging
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',