feat: update theme to 山东矿机

This commit is contained in:
louis 2024-04-07 09:29:40 +08:00
parent b7a4dd963e
commit 21adccf4a4
12 changed files with 91 additions and 68 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/images/image.png Normal file

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

View File

@ -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: '薄暮',

View File

@ -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;

View File

@ -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 {

View File

@ -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;

View File

@ -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, {});

View File

@ -2,4 +2,4 @@
@header-height: 64px;
@footer-height: 70px;
@primary-color: #00b96b;
@primary-color: #deae35;

View File

@ -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%;