feat: update theme to 山东矿机
This commit is contained in:
parent
b7a4dd963e
commit
21adccf4a4
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
Before Width: | Height: | Size: 2.8 KiB |
|
@ -1,3 +1,4 @@
|
|||
import { type LayoutSetting } from '@/store/modules/layoutSetting';
|
||||
import { theme } from 'ant-design-vue';
|
||||
|
||||
const { defaultAlgorithm, darkAlgorithm } = theme;
|
||||
|
@ -24,13 +25,28 @@ export const themeColor = {
|
|||
realDark: darkAlgorithm,
|
||||
} as const;
|
||||
export type ThemeColor = keyof typeof themeColor;
|
||||
|
||||
export const defaultSetting: LayoutSetting = {
|
||||
navTheme: 'light', // theme for nav menu
|
||||
colorPrimary: '#deae35', // '#F5222D', // primary color of ant design
|
||||
layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
|
||||
contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
|
||||
fixedHeader: false, // sticky header
|
||||
fixSiderbar: false, // sticky siderbar
|
||||
colorWeak: false,
|
||||
menu: {
|
||||
locale: true,
|
||||
},
|
||||
title: 'vite-antdv-admin',
|
||||
pwa: false,
|
||||
iconfontUrl: '',
|
||||
// production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
|
||||
};
|
||||
/** 主题色 */
|
||||
export const themeColors = [
|
||||
{
|
||||
title: '华信蓝(默认)',
|
||||
key: 'techBlue',
|
||||
value: '#2a71b9',
|
||||
title: '山矿主题(默认)',
|
||||
key: 'primary',
|
||||
value: defaultSetting.colorPrimary,
|
||||
},
|
||||
{
|
||||
title: '薄暮',
|
|
@ -1,24 +1,30 @@
|
|||
<template>
|
||||
<SettingOutlined @click="showDrawer" />
|
||||
<Drawer v-model:open="visible" placement="right" :closable="false">
|
||||
<Descriptions title="整体风格" :column="5">
|
||||
<Descriptions.Item v-for="theme in themeStyle" :key="theme.value">
|
||||
<Drawer v-model:open="visible"
|
||||
placement="right"
|
||||
:closable="false">
|
||||
<Descriptions title="整体风格"
|
||||
:column="5">
|
||||
<Descriptions.Item v-for="theme in themeStyle"
|
||||
:key="theme.value">
|
||||
<Tooltip :title="theme.label">
|
||||
<div
|
||||
class="style-checbox-item"
|
||||
<div class="style-checbox-item"
|
||||
:class="{ active: layoutSetting.navTheme === theme.value }"
|
||||
@click="setNavTheme(theme.value)"
|
||||
>
|
||||
<svg-icon :name="theme.value" size="50"></svg-icon>
|
||||
@click="setNavTheme(theme.value)">
|
||||
<svg-icon :name="theme.value"
|
||||
size="50"></svg-icon>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Descriptions title="主题色" :column="9">
|
||||
<Descriptions.Item v-for="item in themeColors" :key="item.key">
|
||||
<Descriptions title="主题色"
|
||||
:column="9">
|
||||
<Descriptions.Item v-for="item in themeColors"
|
||||
:key="item.key">
|
||||
<div class="style-checbox-item">
|
||||
<Tooltip :title="item.title">
|
||||
<Tag :color="item.value" @click="setThemeColor(item.value)">
|
||||
<Tag :color="item.value"
|
||||
@click="setThemeColor(item.value)">
|
||||
<span :style="{ visibility: getThemeColorVisible(item.value) }"> ✔ </span>
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
|
@ -27,48 +33,47 @@
|
|||
<Descriptions.Item key="custom">
|
||||
<div class="style-checbox-item">
|
||||
<Tooltip title="自定义">
|
||||
<Tag :color="customColor" class="relative overflow-hidden">
|
||||
<input
|
||||
v-model="customColor"
|
||||
<Tag :color="customColor"
|
||||
class="relative overflow-hidden">
|
||||
<input v-model="customColor"
|
||||
type="color"
|
||||
class="absolute inset-0"
|
||||
:style="colorPickerStyle"
|
||||
@input="setThemeColor(customColor!)"
|
||||
/>
|
||||
@input="setThemeColor(customColor!)" />
|
||||
<span :style="{ visibility: getThemeColorVisible(customColor) }"> ✔ </span>
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Descriptions title="导航模式" :column="5">
|
||||
<Descriptions.Item v-for="item in layouts" :key="item.value">
|
||||
<div
|
||||
class="style-checbox-item"
|
||||
<Descriptions title="导航模式"
|
||||
:column="5">
|
||||
<Descriptions.Item v-for="item in layouts"
|
||||
:key="item.value">
|
||||
<div class="style-checbox-item"
|
||||
:class="{ active: layoutSetting.layout === item.value }"
|
||||
@click="setLayout(item.value)"
|
||||
>
|
||||
<svg-icon :name="item.value" size="50"></svg-icon>
|
||||
@click="setLayout(item.value)">
|
||||
<svg-icon :name="item.value"
|
||||
size="50"></svg-icon>
|
||||
</div>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
<script lang="ts"
|
||||
setup>
|
||||
import { ref, computed, type StyleValue } from 'vue';
|
||||
import { SettingOutlined } from '@ant-design/icons-vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Drawer, Descriptions, Tag, Tooltip } from 'ant-design-vue';
|
||||
import { layouts, themeColors, themeStyle } from './constant';
|
||||
import type { ThemeColor } from './constant';
|
||||
import type { LayoutSetting } from '@/store/modules/layoutSetting';
|
||||
import { useLayoutSettingStore } from '@/store/modules/layoutSetting';
|
||||
import { layouts, themeColors, themeStyle ,type ThemeColor} from '@/constants/theme';
|
||||
|
||||
defineOptions({
|
||||
name: 'ProjectSetting',
|
||||
});
|
||||
|
||||
const layoutSettingStore = useLayoutSettingStore();
|
||||
const { layoutSetting } = storeToRefs(layoutSettingStore);
|
||||
const customColor = ref(layoutSetting.value.colorPrimary);
|
||||
|
@ -99,7 +104,8 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less"
|
||||
scoped>
|
||||
.style-checbox-item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
|
@ -1,40 +1,55 @@
|
|||
<template>
|
||||
<div class="logo">
|
||||
<!-- <img v-if="!collapsed" src="~@/assets/images/logowithtext.png" alt="" /> -->
|
||||
<div v-if="!collapsed" class="flex items-center">
|
||||
<img src="~@/assets/images/logo.png" /><span class="company-name">華信智能</span></div
|
||||
>
|
||||
<img v-else src="~@/assets/images/logo.png" class="collapsed-icon" />
|
||||
<div v-if="!collapsed"
|
||||
class="flex items-center">
|
||||
<img src="~@/assets/images/logo.png" />
|
||||
<img src="~@/assets/images/company_name.png"
|
||||
class="company_name" />
|
||||
<!-- <span class="company-name">華信智能</span> -->
|
||||
</div>
|
||||
<img v-else
|
||||
src="~@/assets/images/logo.png"
|
||||
class="collapsed-icon" />
|
||||
<!-- <h2 v-show="!collapsed" class="title">华信OA</h2> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less"
|
||||
scoped>
|
||||
.ant-layout-sider-dark {
|
||||
.company-name {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.company-name {
|
||||
@apply text-2xl font-bold ml-xs tracking-widest;
|
||||
font-family: cursive;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@apply flex overflow-hidden whitespace-nowrap items-center justify-center;
|
||||
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
|
||||
.company_name {
|
||||
height: 1.5rem;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 2.5rem;
|
||||
height: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
@ -272,7 +272,9 @@
|
|||
.dark .tabs-view {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
.ant-dropdown-link{
|
||||
color:@primary-color;
|
||||
}
|
||||
.tabs-view {
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ import { theme as antdTheme } from 'ant-design-vue';
|
|||
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
|
||||
import { THEME_KEY } from '@/enums/cacheEnum';
|
||||
import { Storage } from '@/utils/Storage';
|
||||
import { themeColor, type ThemeColor } from '@/layout/header/components/setting/constant';
|
||||
import { defaultSetting, themeColor, type ThemeColor } from '@/constants/theme';
|
||||
|
||||
/**
|
||||
* 项目默认配置项
|
||||
|
@ -34,22 +34,7 @@ export type LayoutSetting = {
|
|||
// production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'
|
||||
};
|
||||
|
||||
export const defaultSetting: LayoutSetting = {
|
||||
navTheme: 'light', // theme for nav menu
|
||||
colorPrimary: '#2a71b9', // '#F5222D', // primary color of ant design
|
||||
layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
|
||||
contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
|
||||
fixedHeader: false, // sticky header
|
||||
fixSiderbar: false, // sticky siderbar
|
||||
colorWeak: false,
|
||||
menu: {
|
||||
locale: true,
|
||||
},
|
||||
title: 'vite-antdv-admin',
|
||||
pwa: false,
|
||||
iconfontUrl: '',
|
||||
// production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
|
||||
};
|
||||
|
||||
|
||||
export const useLayoutSettingStore = defineStore('layout-setting', () => {
|
||||
const localLayoutSetting = Storage.get<LayoutSetting>(THEME_KEY, {});
|
||||
|
|
|
@ -2,4 +2,4 @@
|
|||
|
||||
@header-height: 64px;
|
||||
@footer-height: 70px;
|
||||
@primary-color: #00b96b;
|
||||
@primary-color: #deae35;
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div class="login-box">
|
||||
<div class="login-logo">
|
||||
<!-- <svg-icon name="logo" :size="45" /> -->
|
||||
<img :src="logo" width="100%" height="70px" />
|
||||
<img src="~@/assets/images/company_logo_with_name.png" width="100%" height="100px" />
|
||||
<!-- <h1 class="mb-0 ml-2 text-3xl font-bold">Antd Admin</h1> -->
|
||||
</div>
|
||||
<a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
|
||||
|
@ -21,6 +21,7 @@
|
|||
>
|
||||
<template #prefix><lock-outlined type="user" /></template>
|
||||
</a-input>
|
||||
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-input
|
||||
|
@ -49,15 +50,13 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import Api from '@/api/';
|
||||
import { to } from '@/utils/awaitTo';
|
||||
import logo1 from '@/assets/images/logowithtext.png';
|
||||
const logo = ref(logo1);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
captcha: '',
|
||||
|
@ -66,7 +65,7 @@
|
|||
password: 'huaxin123',
|
||||
verifyCode: '',
|
||||
captchaId: '',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
@ -117,7 +116,7 @@
|
|||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding-top: 240px;
|
||||
padding-top: 180px;
|
||||
background: url('@/assets/login.svg');
|
||||
background-size: 100%;
|
||||
|
||||
|
|
Loading…
Reference in New Issue