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'; import { theme } from 'ant-design-vue';
const { defaultAlgorithm, darkAlgorithm } = theme; const { defaultAlgorithm, darkAlgorithm } = theme;
@ -24,13 +25,28 @@ export const themeColor = {
realDark: darkAlgorithm, realDark: darkAlgorithm,
} as const; } as const;
export type ThemeColor = keyof typeof themeColor; 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 = [ export const themeColors = [
{ {
title: '华信蓝(默认)', title: '山矿主题(默认)',
key: 'techBlue', key: 'primary',
value: '#2a71b9', value: defaultSetting.colorPrimary,
}, },
{ {
title: '薄暮', title: '薄暮',

View File

@ -1,24 +1,30 @@
<template> <template>
<SettingOutlined @click="showDrawer" /> <SettingOutlined @click="showDrawer" />
<Drawer v-model:open="visible" placement="right" :closable="false"> <Drawer v-model:open="visible"
<Descriptions title="整体风格" :column="5"> placement="right"
<Descriptions.Item v-for="theme in themeStyle" :key="theme.value"> :closable="false">
<Descriptions title="整体风格"
:column="5">
<Descriptions.Item v-for="theme in themeStyle"
:key="theme.value">
<Tooltip :title="theme.label"> <Tooltip :title="theme.label">
<div <div class="style-checbox-item"
class="style-checbox-item"
:class="{ active: layoutSetting.navTheme === theme.value }" :class="{ active: layoutSetting.navTheme === theme.value }"
@click="setNavTheme(theme.value)" @click="setNavTheme(theme.value)">
> <svg-icon :name="theme.value"
<svg-icon :name="theme.value" size="50"></svg-icon> size="50"></svg-icon>
</div> </div>
</Tooltip> </Tooltip>
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
<Descriptions title="主题色" :column="9"> <Descriptions title="主题色"
<Descriptions.Item v-for="item in themeColors" :key="item.key"> :column="9">
<Descriptions.Item v-for="item in themeColors"
:key="item.key">
<div class="style-checbox-item"> <div class="style-checbox-item">
<Tooltip :title="item.title"> <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> <span :style="{ visibility: getThemeColorVisible(item.value) }"> </span>
</Tag> </Tag>
</Tooltip> </Tooltip>
@ -27,48 +33,47 @@
<Descriptions.Item key="custom"> <Descriptions.Item key="custom">
<div class="style-checbox-item"> <div class="style-checbox-item">
<Tooltip title="自定义"> <Tooltip title="自定义">
<Tag :color="customColor" class="relative overflow-hidden"> <Tag :color="customColor"
<input class="relative overflow-hidden">
v-model="customColor" <input v-model="customColor"
type="color" type="color"
class="absolute inset-0" class="absolute inset-0"
:style="colorPickerStyle" :style="colorPickerStyle"
@input="setThemeColor(customColor!)" @input="setThemeColor(customColor!)" />
/>
<span :style="{ visibility: getThemeColorVisible(customColor) }"> </span> <span :style="{ visibility: getThemeColorVisible(customColor) }"> </span>
</Tag> </Tag>
</Tooltip> </Tooltip>
</div> </div>
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
<Descriptions title="导航模式" :column="5"> <Descriptions title="导航模式"
<Descriptions.Item v-for="item in layouts" :key="item.value"> :column="5">
<div <Descriptions.Item v-for="item in layouts"
class="style-checbox-item" :key="item.value">
<div class="style-checbox-item"
:class="{ active: layoutSetting.layout === item.value }" :class="{ active: layoutSetting.layout === item.value }"
@click="setLayout(item.value)" @click="setLayout(item.value)">
> <svg-icon :name="item.value"
<svg-icon :name="item.value" size="50"></svg-icon> size="50"></svg-icon>
</div> </div>
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
</Drawer> </Drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts"
setup>
import { ref, computed, type StyleValue } from 'vue'; import { ref, computed, type StyleValue } from 'vue';
import { SettingOutlined } from '@ant-design/icons-vue'; import { SettingOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { Drawer, Descriptions, Tag, Tooltip } from 'ant-design-vue'; 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 type { LayoutSetting } from '@/store/modules/layoutSetting';
import { useLayoutSettingStore } from '@/store/modules/layoutSetting'; import { useLayoutSettingStore } from '@/store/modules/layoutSetting';
import { layouts, themeColors, themeStyle ,type ThemeColor} from '@/constants/theme';
defineOptions({ defineOptions({
name: 'ProjectSetting', name: 'ProjectSetting',
}); });
const layoutSettingStore = useLayoutSettingStore(); const layoutSettingStore = useLayoutSettingStore();
const { layoutSetting } = storeToRefs(layoutSettingStore); const { layoutSetting } = storeToRefs(layoutSettingStore);
const customColor = ref(layoutSetting.value.colorPrimary); const customColor = ref(layoutSetting.value.colorPrimary);
@ -99,7 +104,8 @@
}; };
</script> </script>
<style lang="less" scoped> <style lang="less"
scoped>
.style-checbox-item { .style-checbox-item {
position: relative; position: relative;
cursor: pointer; cursor: pointer;

View File

@ -1,40 +1,55 @@
<template> <template>
<div class="logo"> <div class="logo">
<!-- <img v-if="!collapsed" src="~@/assets/images/logowithtext.png" alt="" /> --> <!-- <img v-if="!collapsed" src="~@/assets/images/logowithtext.png" alt="" /> -->
<div v-if="!collapsed" class="flex items-center"> <div v-if="!collapsed"
<img src="~@/assets/images/logo.png" /><span class="company-name">華信智能</span></div class="flex items-center">
> <img src="~@/assets/images/logo.png" />
<img v-else src="~@/assets/images/logo.png" class="collapsed-icon" /> <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> --> <!-- <h2 v-show="!collapsed" class="title">华信OA</h2> -->
</div> </div>
</template> </template>
<script setup> <script setup>
defineProps({ defineProps({
collapsed: { collapsed: {
type: Boolean, type: Boolean,
}, },
}); });
</script> </script>
<style lang="less" scoped> <style lang="less"
scoped>
.ant-layout-sider-dark { .ant-layout-sider-dark {
.company-name { .company-name {
color: white; color: white;
} }
} }
.company-name { .company-name {
@apply text-2xl font-bold ml-xs tracking-widest; @apply text-2xl font-bold ml-xs tracking-widest;
font-family: cursive; font-family: cursive;
} }
.logo { .logo {
@apply flex overflow-hidden whitespace-nowrap items-center justify-center; @apply flex overflow-hidden whitespace-nowrap items-center justify-center;
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
.company_name {
height: 1.5rem;
padding-left: 5px;
}
img { img {
height: 2.5rem; height: 2rem;
} }
.title { .title {

View File

@ -272,7 +272,9 @@
.dark .tabs-view { .dark .tabs-view {
border-top: 1px solid black; border-top: 1px solid black;
} }
.ant-dropdown-link{
color:@primary-color;
}
.tabs-view { .tabs-view {
border-top: 1px solid #eee; 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 type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
import { THEME_KEY } from '@/enums/cacheEnum'; import { THEME_KEY } from '@/enums/cacheEnum';
import { Storage } from '@/utils/Storage'; 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' // 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', () => { export const useLayoutSettingStore = defineStore('layout-setting', () => {
const localLayoutSetting = Storage.get<LayoutSetting>(THEME_KEY, {}); const localLayoutSetting = Storage.get<LayoutSetting>(THEME_KEY, {});

View File

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

View File

@ -2,7 +2,7 @@
<div class="login-box"> <div class="login-box">
<div class="login-logo"> <div class="login-logo">
<!-- <svg-icon name="logo" :size="45" /> --> <!-- <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> --> <!-- <h1 class="mb-0 ml-2 text-3xl font-bold">Antd Admin</h1> -->
</div> </div>
<a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit"> <a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
@ -21,6 +21,7 @@
> >
<template #prefix><lock-outlined type="user" /></template> <template #prefix><lock-outlined type="user" /></template>
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-input <a-input
@ -49,15 +50,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from 'vue'; import { reactive } from 'vue';
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue'; import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue'; import { message, Modal } from 'ant-design-vue';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import Api from '@/api/'; import Api from '@/api/';
import { to } from '@/utils/awaitTo'; import { to } from '@/utils/awaitTo';
import logo1 from '@/assets/images/logowithtext.png';
const logo = ref(logo1);
const state = reactive({ const state = reactive({
loading: false, loading: false,
captcha: '', captcha: '',
@ -66,7 +65,7 @@
password: 'huaxin123', password: 'huaxin123',
verifyCode: '', verifyCode: '',
captchaId: '', captchaId: '',
}, },
}); });
const route = useRoute(); const route = useRoute();
@ -117,7 +116,7 @@
align-items: center; align-items: center;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
padding-top: 240px; padding-top: 180px;
background: url('@/assets/login.svg'); background: url('@/assets/login.svg');
background-size: 100%; background-size: 100%;