diff --git a/GQA-FRONTEND/public/icon/ant-design-vue.svg b/GQA-FRONTEND/public/icon/ant-design-vue.svg new file mode 100644 index 00000000..dbfcee7e --- /dev/null +++ b/GQA-FRONTEND/public/icon/ant-design-vue.svg @@ -0,0 +1,29 @@ + + + + Vue + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/GQA-FRONTEND/public/icon/element-plus.svg b/GQA-FRONTEND/public/icon/element-plus.svg new file mode 100644 index 00000000..0555700c --- /dev/null +++ b/GQA-FRONTEND/public/icon/element-plus.svg @@ -0,0 +1 @@ +资源 1 \ No newline at end of file diff --git a/GQA-FRONTEND/src/boot/permission.js b/GQA-FRONTEND/src/boot/permission.js index 034b617e..75bf9149 100644 --- a/GQA-FRONTEND/src/boot/permission.js +++ b/GQA-FRONTEND/src/boot/permission.js @@ -2,7 +2,8 @@ import { boot } from 'quasar/wrappers' import { LoadingBar, Loading, QSpinnerGears } from 'quasar' import { useUserStore } from 'src/stores/user' import { usePermissionStore } from 'src/stores/permission' -import useCommon from 'src/composables/useCommon' +import useConfig from 'src/composables/useConfig' + import { i18n } from './i18n' LoadingBar.setDefaults({ @@ -30,7 +31,7 @@ export default boot(({ router, store }) => { const permissionStore = usePermissionStore() startLoading() const token = userStore.GetToken() - const { AllowList } = useCommon() + const { AllowList } = useConfig() if (token) { if (AllowList.indexOf(to.path) !== -1) { next({ path: '/' }) diff --git a/GQA-FRONTEND/src/boot/theme.js b/GQA-FRONTEND/src/boot/theme.js index 150eff07..24b67439 100644 --- a/GQA-FRONTEND/src/boot/theme.js +++ b/GQA-FRONTEND/src/boot/theme.js @@ -1,16 +1,19 @@ import { boot } from 'quasar/wrappers' import { Cookies, setCssVar, getCssVar } from 'quasar' +import useConfig from 'src/composables/useConfig' + +const { ThemeStyleQuasar } = useConfig() export default boot(({ app }) => { - const primary = Cookies.get('gqa-theme-primary') || getCssVar('primary') || '#1976D2' - const secondary = Cookies.get('gqa-theme-secondary') || getCssVar('secondary') || '#26A69A' - const accent = Cookies.get('gqa-theme-accent') || getCssVar('accent') || '#9C27B0' - const positive = Cookies.get('gqa-theme-positive') || getCssVar('positive') || '#21BA45' - const negative = Cookies.get('gqa-theme-negative') || getCssVar('negative') || '#C10015' - const info = Cookies.get('gqa-theme-info') || getCssVar('info') || '#31CCEC' - const warning = Cookies.get('gqa-theme-warning') || getCssVar('warning') || '#F2C037' - const light = Cookies.get('gqa-theme-light') || getCssVar('light') || '#FFFFFF' - const dark = Cookies.get('gqa-theme-dark') || getCssVar('dark') || '#1D1D1D' + const primary = Cookies.get('gqa-theme-primary') || getCssVar('primary') || ThemeStyleQuasar.primary + const secondary = Cookies.get('gqa-theme-secondary') || getCssVar('secondary') || ThemeStyleQuasar.secondary + const accent = Cookies.get('gqa-theme-accent') || getCssVar('accent') || ThemeStyleQuasar.accent + const positive = Cookies.get('gqa-theme-positive') || getCssVar('positive') || ThemeStyleQuasar.positive + const negative = Cookies.get('gqa-theme-negative') || getCssVar('negative') || ThemeStyleQuasar.negative + const info = Cookies.get('gqa-theme-info') || getCssVar('info') || ThemeStyleQuasar.info + const warning = Cookies.get('gqa-theme-warning') || getCssVar('warning') || ThemeStyleQuasar.warning + const light = Cookies.get('gqa-theme-light') || getCssVar('light') || ThemeStyleQuasar.light + const dark = Cookies.get('gqa-theme-dark') || getCssVar('dark') || ThemeStyleQuasar.dark setCssVar("primary", primary) setCssVar("secondary", secondary) diff --git a/GQA-FRONTEND/src/components/GqaAvatar/index.vue b/GQA-FRONTEND/src/components/GqaAvatar/index.vue index 3ea0b182..8915786a 100644 --- a/GQA-FRONTEND/src/components/GqaAvatar/index.vue +++ b/GQA-FRONTEND/src/components/GqaAvatar/index.vue @@ -6,11 +6,10 @@ + + diff --git a/GQA-FRONTEND/src/components/GqaTheme/GqaThemeStyle.vue b/GQA-FRONTEND/src/components/GqaTheme/GqaThemeStyle.vue new file mode 100644 index 00000000..e0f4a1b5 --- /dev/null +++ b/GQA-FRONTEND/src/components/GqaTheme/GqaThemeStyle.vue @@ -0,0 +1,67 @@ + + + \ No newline at end of file diff --git a/GQA-FRONTEND/src/components/GqaTheme/index.vue b/GQA-FRONTEND/src/components/GqaTheme/index.vue deleted file mode 100644 index 025df381..00000000 --- a/GQA-FRONTEND/src/components/GqaTheme/index.vue +++ /dev/null @@ -1,365 +0,0 @@ - - - - - diff --git a/GQA-FRONTEND/src/composables/useCommon.js b/GQA-FRONTEND/src/composables/useCommon.js index aa3f4f35..7b90935f 100644 --- a/GQA-FRONTEND/src/composables/useCommon.js +++ b/GQA-FRONTEND/src/composables/useCommon.js @@ -1,13 +1,11 @@ import { useStorageStore } from 'src/stores/storage'; -import { computed, onMounted, ref } from 'vue'; +import { computed } from 'vue'; import { FormatDateTime } from 'src/utils/date' -import { useI18n } from 'vue-i18n'; import GqaDictShow from 'src/components/GqaDictShow' import GqaShowName from 'src/components/GqaShowName' import GqaAvatar from 'src/components/GqaAvatar' export default function useCommon() { - const { t } = useI18n const storageStore = useStorageStore(); const gqaFrontend = computed(() => storageStore.GetGqaFrontend()); const gqaBackend = computed(() => storageStore.GetGqaBackend()); @@ -21,31 +19,7 @@ export default function useCommon() { } }) - /* 配置项 */ - // 浏览器console打印内容 - const gqaLogo = () => { - console.info('欢迎使用Gin-Quasar-Admin!') - console.info('项目地址: https://github.com/Junvary/gin-quasar-admin ') - console.info('欢迎交流, 感谢Star!') - } - // 首页等允许无token的白名单 - const AllowList = ['/login',] - // 没有用户名的时候使用这个名字 - const GqaDefaultUsername = () => t('GqaDefaultUsername') - // 没有头像配置的时候使用这个头像 - const GqaDefaultAvatar = "gqa128.png" - // 没有网站前台配置的时候用这个配置 - const GqaFrontendDefault = { - mainTitle: "Gin-Quasar-Admin", - subTitle: "Gin-Quasar-Admin", - webDescribe: "Be the change you want to see in the world.", - showGit: "yesNo_yes" - } - // 没有网站后台配置的时候用这个配置 - const GqaBackendDefault = {} - /* 配置项 */ return { - gqaLogo, GqaDictShow, GqaShowName, GqaAvatar, @@ -53,10 +27,5 @@ export default function useCommon() { gqaFrontend, gqaBackend, openLink, - AllowList, - GqaDefaultUsername, - GqaDefaultAvatar, - GqaFrontendDefault, - GqaBackendDefault } } \ No newline at end of file diff --git a/GQA-FRONTEND/src/composables/useConfig.js b/GQA-FRONTEND/src/composables/useConfig.js new file mode 100644 index 00000000..f5a25914 --- /dev/null +++ b/GQA-FRONTEND/src/composables/useConfig.js @@ -0,0 +1,75 @@ +import { useI18n } from 'vue-i18n'; + + + +export default function useConfig() { + const { t } = useI18n + // 浏览器console打印内容 + const GqaConsoleLogo = () => { + console.info('欢迎使用Gin-Quasar-Admin!') + console.info('项目地址: https://github.com/Junvary/gin-quasar-admin ') + console.info('欢迎交流, 感谢Star!') + } + // 首页等允许无token的白名单 + const AllowList = ['/login',] + // 没有用户名的时候使用这个名字 + const GqaDefaultUsername = () => t('GqaDefaultUsername') + // 没有头像配置的时候使用这个头像 + const GqaDefaultAvatar = "gqa128.png" + // 没有网站前台配置的时候用这个配置 + const GqaFrontendDefault = { + mainTitle: "Gin-Quasar-Admin", + subTitle: "Gin-Quasar-Admin", + webDescribe: "Be the change you want to see in the world.", + showGit: "yesNo_yes" + } + // 没有网站后台配置的时候用这个配置 + const GqaBackendDefault = {} + // Quasar主题配色 + const ThemeStyleQuasar = { + primary: '#1976D2', + secondary: '#26A69A', + accent: '#9C27B0', + positive: '#21BA45', + negative: '#C10015', + info: '#31CCEC', + warning: '#F2C037', + light: '#FFFFFF', + dark: '#1D1D1D', + } + // Element主题配色 + const ThemeStyleElement = { + primary: '#409EFF', + secondary: '#26A69A', + accent: '#9C27B0', + positive: '#67C23A', + negative: '#F56C6C', + info: '#8896b3', + warning: '#e6a23c', + light: '#FFFFFF', + dark: '#1D1D1D', + } + // Ant Design主题配色 + const ThemeStyleAnt = { + primary: '#1890ff', + secondary: '#26A69A', + accent: '#9C27B0', + positive: '#52c41a', + negative: '#f5222d', + info: '#fafafa', + warning: '#faad14', + light: '#FFFFFF', + dark: '#1D1D1D', + } + return { + GqaConsoleLogo, + AllowList, + GqaDefaultUsername, + GqaDefaultAvatar, + GqaFrontendDefault, + GqaBackendDefault, + ThemeStyleQuasar, + ThemeStyleElement, + ThemeStyleAnt, + } +} \ No newline at end of file diff --git a/GQA-FRONTEND/src/composables/useDarkTheme.js b/GQA-FRONTEND/src/composables/useDarkTheme.js deleted file mode 100644 index 7a58d67d..00000000 --- a/GQA-FRONTEND/src/composables/useDarkTheme.js +++ /dev/null @@ -1,33 +0,0 @@ -import { useQuasar } from "quasar"; -import { computed } from "vue"; - - -export default function useDarkTheme() { - const $q = useQuasar(); - const darkTheme = computed(() => { - if ($q.dark.isActive) { - return 'bg-dark text-white' - } else { - return 'bg-white text-grey-8' - } - }); - const darkThemeSelect = computed(() => { - if ($q.dark.isActive) { - return 'bg-grey-9 text-white' - } else { - return 'bg-grey-4 text-dark' - } - }); - const darkThemeChart = computed(() => { - if ($q.dark.isActive) { - return 'dark' - } else { - return '' - } - }); - return { - darkTheme, - darkThemeSelect, - darkThemeChart - } -} \ No newline at end of file diff --git a/GQA-FRONTEND/src/composables/useDocument.js b/GQA-FRONTEND/src/composables/useDocument.js index 4b2ffaee..96267315 100644 --- a/GQA-FRONTEND/src/composables/useDocument.js +++ b/GQA-FRONTEND/src/composables/useDocument.js @@ -1,10 +1,9 @@ import { computed, onMounted, watch } from 'vue'; import { useStorageStore } from 'src/stores/storage'; import { useSettingStore } from 'src/stores/setting'; -// import { GqaFrontendDefault } from 'src/settings' import { useI18n } from 'vue-i18n'; import { Quasar } from 'quasar' -import useCommon from 'src/composables/useCommon'; +import useConfig from 'src/composables/useConfig'; // 动态更改网站标题和favicon，在MainLayout中调用 export default function useDocument() { @@ -12,7 +11,7 @@ export default function useDocument() { const settingStore = useSettingStore(); const gqaFrontend = computed(() => storageStore.GetGqaFrontend()); const language = computed(() => settingStore.GetLanguage()); - const { GqaFrontendDefault } = useCommon() + const { GqaFrontendDefault } = useConfig() watch(gqaFrontend, (newValue) => { document.title = newValue.subTitle diff --git a/GQA-FRONTEND/src/composables/useRecordDetail.js b/GQA-FRONTEND/src/composables/useRecordDetail.js index 323cb187..0568c057 100644 --- a/GQA-FRONTEND/src/composables/useRecordDetail.js +++ b/GQA-FRONTEND/src/composables/useRecordDetail.js @@ -110,7 +110,6 @@ export default function useRecordDetail(url, emit) { gqaBackend, dictOptions, showDateTime, - loading, show, formType, diff --git a/GQA-FRONTEND/src/composables/useTheme.js b/GQA-FRONTEND/src/composables/useTheme.js new file mode 100644 index 00000000..d8eaf902 --- /dev/null +++ b/GQA-FRONTEND/src/composables/useTheme.js @@ -0,0 +1,78 @@ +import { useQuasar } from "quasar"; +import { computed } from "vue"; +import { useSettingStore } from "src/stores/setting"; + + +export default function useTheme() { + const $q = useQuasar(); + const settingStore = useSettingStore() + const themeStyle = computed(() => settingStore.GetThemeStyle()) + + const darkTheme = computed(() => { + if ($q.dark.isActive) { + return 'bg-dark text-white' + } else { + if (themeStyle.value === 'Gin-Quasar-Admin') { + return 'bg-white text-dark' + } + if (themeStyle.value === 'Quasar') { + return 'bg-primary text-white' + } + if (themeStyle.value === 'Element Plus') { + return 'bg-primary text-white' + } + if (themeStyle.value === 'Ant Design Vue') { + return 'bg-primary text-white' + } + } + }); + const darkThemeSideBar = computed(() => { + if ($q.dark.isActive) { + return ['class', 'bg-dark text-white'] + } else { + if (themeStyle.value === 'Gin-Quasar-Admin') { + return ['class', 'bg-white text-dark'] + } + if (themeStyle.value === 'Quasar') { + return ['class', 'bg-white text-dark'] + } + if (themeStyle.value === 'Element Plus') { + return ['style', { backgroundColor: '#545c64', color: 'white' }] + } + if (themeStyle.value === 'Ant Design Vue') { + return ['style', { backgroundColor: '#001529', color: 'white' }] + } + } + }) + const darkThemeSelect = computed(() => { + if ($q.dark.isActive) { + return 'bg-grey-9 text-white' + } else { + if (themeStyle.value === 'Gin-Quasar-Admin') { + return 'bg-grey-4 text-dark' + } + if (themeStyle.value === 'Quasar') { + return 'bg-primary text-white' + } + if (themeStyle.value === 'Element Plus') { + return 'bg-#545c64 text-yellow' + } + if (themeStyle.value === 'Ant Design Vue') { + return 'bg-primary text-white' + } + } + }); + const darkThemeChart = computed(() => { + if ($q.dark.isActive) { + return 'dark' + } else { + return '' + } + }); + return { + darkTheme, + darkThemeSideBar, + darkThemeSelect, + darkThemeChart + } +} \ No newline at end of file diff --git a/GQA-FRONTEND/src/i18n/en-US/index.js b/GQA-FRONTEND/src/i18n/en-US/index.js index 254ad6c1..91243fb3 100644 --- a/GQA-FRONTEND/src/i18n/en-US/index.js +++ b/GQA-FRONTEND/src/i18n/en-US/index.js @@ -60,6 +60,7 @@ export default { Memo: 'Memo', Default: 'Default', Custom: 'Custom', + Customize: 'Customize', Status: 'Status', Stable: 'Stable', Actions: 'Actions', @@ -130,6 +131,8 @@ export default { Describe: 'Describe', Choose: 'Choose', Theme: 'Theme', + Display: 'Display', + Style: 'Style', Color: 'Color', Basic: 'Basic', Setting: 'Setting', @@ -158,6 +161,7 @@ export default { StartWith: 'start with {name}', Without: 'with out', WithoutOther: 'with out other', + Your: 'Your', // phrase SystemManage: 'System Manage', diff --git a/GQA-FRONTEND/src/i18n/zh-CN/index.js b/GQA-FRONTEND/src/i18n/zh-CN/index.js index cf2cf966..be9d8c5a 100644 --- a/GQA-FRONTEND/src/i18n/zh-CN/index.js +++ b/GQA-FRONTEND/src/i18n/zh-CN/index.js @@ -60,6 +60,7 @@ export default { Memo: '备注', Default: '默认', Custom: '自定义', + Customize: '自定义', Status: '状态', Stable: '内置', Actions: '操作', @@ -131,6 +132,8 @@ export default { Describe: '描述', Choose: '选择', Theme: '主题', + Display: '显示', + Style: '风格', Color: '颜色', Basic: '基础', Setting: '设置', @@ -159,6 +162,7 @@ export default { StartWith: '以 {name} 开头', Without: '不包含', WithoutOther: '不包含其他', + Your: '你的', // 词组 SystemManage: '系统管理', diff --git a/GQA-FRONTEND/src/layouts/LoginLayout/index.vue b/GQA-FRONTEND/src/layouts/LoginLayout/index.vue index 9593c9a5..e2c06677 100644 --- a/GQA-FRONTEND/src/layouts/LoginLayout/index.vue +++ b/GQA-FRONTEND/src/layouts/LoginLayout/index.vue @@ -12,6 +12,7 @@ diff --git a/GQA-FRONTEND/src/layouts/MainLayout/Setting/SideDrawer.vue b/GQA-FRONTEND/src/layouts/MainLayout/Setting/SideDrawer.vue index 37a7e294..f326fe37 100644 --- a/GQA-FRONTEND/src/layouts/MainLayout/Setting/SideDrawer.vue +++ b/GQA-FRONTEND/src/layouts/MainLayout/Setting/SideDrawer.vue @@ -20,7 +20,7 @@ \ No newline at end of file diff --git a/GQA-FRONTEND/src/layouts/MainLayout/Setting/index.vue b/GQA-FRONTEND/src/layouts/MainLayout/Setting/index.vue index c07ac3e5..6230d84d 100644 --- a/GQA-FRONTEND/src/layouts/MainLayout/Setting/index.vue +++ b/GQA-FRONTEND/src/layouts/MainLayout/Setting/index.vue @@ -1,29 +1,38 @@