adspecs 0.1.12

package/references/front-demo/src/views/layout/components/Navbar/components/TenantChange.vue

@@ -0,0 +1,186 @@
+<template>
+	<div class="tenant-change">
+		<el-tooltip effect="dark" :content="$t('button.tenant')" :placement="placement">
+			<span>
+				<el-popover v-model="isPopoverShow" :placement="placement" trigger="click"
+				popper-class="tenant-list-popover-container">
+				<div class="tenant-list-container">
+					<div v-for="tenant in tenants" :key="tenant.tenantId"
+						:class="['tenant-item', tenant.disabled ? 'disabled' : '']" @click="toggleTenant(tenant)">
+						<div class="name">
+							{{ tenant.tenantName }}
+						</div>
+					</div>
+				</div>
+				<!-- 图标 -->
+				<template v-slot:reference>
+          <el-icon class="gsfont gs-icon-shenpirenbeifen" :style="{ fontSize: '26px', color: iconColor }" />
+        </template>
+			</el-popover>
+			</span>
+
+		</el-tooltip>
+	</div>
+</template>
+
+<script>
+// vuex
+import { mapGetters, mapMutations } from '@/store/piniaToVuex'
+// api
+import { autoLogin } from '@/api/login'
+import { baseUserChangeTenant } from '@/api/home'
+import { getsystemwatermark } from '@/api/system-manage/menu'
+import { findUserTenantsFilterSystem } from '@/api/system-manage/reverse-authorization'
+// auth
+import { removeVisitedViews } from '@/utils/auth'
+import Watermark from '@/utils/watermark'
+import { setToken, setUserInfo, setMenuList, setParentTenantId, removeCookie } from '@/utils/auth'
+
+export default {
+	name: 'SystemChange',
+	props: {
+		iconColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		placement: {
+			type: String,
+			default: 'bottom'
+		}
+	},
+
+	computed: {
+		...mapGetters(['tenantId'])
+	},
+	data() {
+		return {
+			tenants: [],
+			isPopoverShow: false,
+			loacationimg: `${window.VUE_CDN_HOST}img/boostrap/system_management_icon.png`
+		}
+	},
+	methods: {
+		...mapMutations(['SET_TENANTID', 'SET_USERLIMIT', 'SET_TAGS_VIEWS']),
+
+		async getUserSystems() {
+			const params = {
+				enterType: 'PC',
+				systemCode: _config.systemCode
+			}
+			const res = await findUserTenantsFilterSystem(params)
+			if (this.reqIsSucceed(res)) {
+				this.tenants = res.data.map(tenant => {
+					tenant.disabled = tenant.tenantId === this.tenantId
+					return tenant
+				})
+				// this.$store.commit('SET_SYSTEMS', this.tenants)
+			}
+		},
+
+		//切换租户
+		async toggleTenant(tenant) {
+			if (tenant.disabled) return
+			const tenantId = tenant.tenantId
+			// 清空灰度用户信息
+			removeCookie('X-gray')
+			const res = await baseUserChangeTenant(tenantId)
+			if (this.reqIsSucceed(res)) {
+				const token = res.data['authorization'] || res.token
+				setToken(token, res.data['refresh-authorization'])
+				setParentTenantId(res.data.parentTenantId)
+				this.SET_USERLIMIT(res.data.useLimitCode)
+				this.SET_TENANTID(res.data.tenantId)
+				this.SET_TAGS_VIEWS([])
+				// 调用going-system接口获取menus
+				// 先获取水印再跳转
+				await this.getsystemwatermark(tenantId)
+				this.autoLogin()
+			}
+		},
+
+		async autoLogin() {
+			const res = await autoLogin(_config.systemCode)
+			if (this.reqIsSucceed(res)) {
+				setMenuList(res.data.menus)
+				setUserInfo(res.data, this)
+				const excludeUrl = ['rule-engine']
+				const menus = res.data.menus.filter(menu => !excludeUrl.includes(menu.menuUrl))
+				localStorage.setItem('menuList', JSON.stringify(menus))
+				// 保存默认菜单信息
+				sessionStorage.setItem('defaultMenu', JSON.stringify(res.data.defaultMenuUrl))
+				localStorage.removeItem('userInfo')
+				removeVisitedViews();
+				location.href = '/home'
+			}
+		},
+
+		//获取系统水印
+		async getsystemwatermark(tenantId) {
+			const res = await getsystemwatermark(window._config.systemCode, '', tenantId)
+			if (this.reqIsSucceed(res)) {
+				if (res.data) {
+					window.localStorage.setItem('watermarkBean', JSON.stringify(res.data))
+					Watermark.set()
+				}
+			}
+		},
+
+		getLang(lang) {
+			try {
+				const langObj = JSON.parse(lang)
+				return langObj[this.$i18n.locale]
+			} catch (error) {
+				return ''
+			}
+
+		}
+	},
+	mounted() {
+		this.getUserSystems()
+	}
+}
+</script>
+
+<style lang="scss">
+.tenant-list-container {
+	display: flex;
+	flex-direction: column;
+	max-height: 600px;
+	overflow-y: auto;
+
+	.tenant-item {
+		display: flex;
+		align-items: center;
+		padding: 8px;
+		border-radius: 4px;
+		user-select: none;
+		cursor: pointer;
+		transition: all 0.3s;
+
+		&.disabled {
+			cursor: default;
+			color: #999;
+		}
+
+		// &:not(:last-of-type) {
+		// 	margin-bottom: 8px;
+		// }
+
+		&:not(.disabled):hover {
+			color: var(--color-primary);
+			background-color: var(--color-primary-light-9);
+		}
+
+		.logo {
+			margin-right: 8px;
+			width: 24px;
+			height: 24px;
+
+			&>img {
+				width: 24px;
+				height: 24px;
+			}
+		}
+	}
+}
+</style>

package/references/front-demo/src/views/layout/components/Navbar/components/Theme.vue

@@ -0,0 +1,429 @@
+<template>
+  <div class="themeSkin">
+    <el-tooltip effect="dark" :content="$t('button.theme')" :placement="placement">
+      <div class="top-bar__item top-bar__item--show" @click="openSetting">
+        <i class="iconfont1 icon-zhuti1" :style="{ fontSize: '26px', color: iconColor }" />
+      </div>
+    </el-tooltip>
+
+    <gs-drawer
+      v-model="visible"
+      :title="$t('theme.styleConfig')"
+      size="400px"
+      append-to-body
+      :show-footer="false"
+      :has-close-confirm="false"
+      :wrapper-closable="true"
+      :close-on-press-escape="true"
+    >
+      <section class="layout-setting">
+        <p class="setting-title">{{ $t('theme.layoutStyle') }}</p>
+        <div class="setting-items">
+          <span
+            v-for="(item, idx) in layoutStyles"
+            :key="idx"
+            class="setting-item"
+            :class="[layoutConfigValue === item.key ? 'checked' : '']"
+            @click="handleChangeLayoutConfig(item.key)"
+          >
+            <img class="icon" :src="item.icon" alt="" />
+            <img class="check" :src="checkIcon" alt="" />
+            <span>{{ $t(item.label) }}</span>
+          </span>
+        </div>
+
+        <p class="setting-title">{{ $t('theme.overallStyleSetting') }}</p>
+        <div class="setting-items">
+          <span
+            v-for="(item, idx) in layoutThemes"
+            :key="idx"
+            class="setting-item"
+            :class="[theme === item.key ? 'checked' : '']"
+            @click="handleChangeLayoutTheme(item.key)"
+          >
+            <img class="icon" :src="item.icon" alt="" />
+            <img class="check" :src="checkIcon" alt="" />
+            <span>{{ $t(item.label) }}</span>
+          </span>
+        </div>
+
+        <!--        隐藏顶栏风格设置，由主题色统一控制-->
+        <template v-if="false">
+          <p class="setting-title">{{ $t('theme.navbarStyleSetting') }}</p>
+          <div class="setting-items">
+            <span
+              v-for="(item, idx) in navbarThemes"
+              :key="idx"
+              class="setting-item"
+              :class="[navbarTheme.key === item.key ? 'checked' : '']"
+              @click="handleChangeNavbarTheme(idx)"
+            >
+              <img class="icon" :src="item.icon" alt="" />
+              <img class="check" :src="checkIcon" alt="" />
+              <span>{{ $t(item.label) }}</span>
+            </span>
+          </div>
+        </template>
+
+        <template v-if="!configThemeColor">
+          <p class="setting-title">{{ $t('theme.controlStyleSetting') }}</p>
+          <div class="setting-items">
+          <span
+            v-for="(color, idx) in themeColors"
+            :key="idx"
+            class="color"
+            :class="[themeConfig.themeColor === color ? 'checked' : '']"
+            @click="handleChangeThemeColor(color)"
+          >
+          <span class="theme-color-item" :style="{ backgroundColor: color }">
+              <!-- removed image, using font icon for white check -->
+              <el-icon class="icon"><Check /></el-icon>
+            </span>
+          </span>
+          </div>
+        </template>
+
+        <!-- 菜单风格 -->
+        <p class="setting-title">{{ $t('theme.menuStyle') }}</p>
+        <div class="setting-items">
+          <span
+              v-for="(item, idx) in menuStyles"
+              :key="idx"
+              class="setting-item"
+              :class="[menuConfigValue === item.key ? 'checked' : '']"
+              @click="handleChangeMenuConfig(item.key)"
+          >
+            <img class="icon" :src="item.icon" alt="" />
+            <img class="check" :src="checkIcon" alt="" />
+            <span>{{ $t(item.label) }}</span>
+          </span>
+        </div>
+
+      </section>
+    </gs-drawer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from '@/store/piniaToVuex'
+import theme, { setCookieInDomain, getCookieInDomain, DEFAULT_THEME_COLOR_KEY } from '@/utils/theme'
+import { saveSettingConfig } from '@/api/app'
+import { getUserInfo } from '@/utils/auth'
+
+// icon
+import normalLayoutIcon from '@/assets/images/normal_layout.png'
+import compactLayoutIcon from '@/assets/images/compact_layout.png'
+import hoverIcon from '@/assets/images/hover.png'
+import siderIcon from '@/assets/images/sider-open.png'
+import verticalIcon from '@/assets/images/vertical.png'
+
+export default {
+  name: 'Theme',
+  props: {
+    iconColor: {
+      type: String,
+      default: '#FFFFFF',
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      checkIcon: `${window.VUE_CDN_HOST}img/boostrap/gouxuan.svg`,
+      layoutThemes: [
+        // 默认主题
+        {
+          label: 'theme.light',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/putong.svg`,
+          key: 'default'
+        },
+        // 暗夜主题
+        {
+          label: 'theme.dark',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/anye.svg`,
+          key: 'black'
+        },
+        // 白色主题
+        {
+          label: 'theme.white',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/putong.svg`,
+          key: 'white'
+        }
+      ],
+      navbarThemes: [
+        {
+          label: 'theme.sie',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/saiyihong.svg`,
+          key: 'red',
+          colors: ['#AD0F3B', '#AE063D']
+        },
+        {
+          label: 'theme.sapphireBlue',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/putong.svg`,
+          key: 'sapphireBlue',
+          colors: ['#4EA5ED', '#3C7FFF']
+        },
+        {
+          label: 'theme.skyBlue',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/xingkonglan.svg`,
+          key: 'blue',
+          colors: ['#253790', '#1C2858']
+        },
+        {
+          label: 'theme.tangerine',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/jicheng.svg`,
+          key: 'tangerine',
+          colors: ['#F65C36', '#E43B00']
+        },
+        {
+          label: 'theme.green',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/qinglv.svg`,
+          key: 'green',
+          colors: ['#25C98F', '#11CFAC']
+        },
+        {
+          label: 'theme.orange',
+          icon: `${window.VUE_CDN_HOST}img/boostrap/nuanqiu.svg`,
+          key: 'orange',
+          colors: ['#F7A520', '#EC8511']
+        }
+      ],
+      themeColors: [
+        '#C71643',
+        '#204BE3',
+        '#1B97FF',
+        '#F05516',
+        '#F7A520',
+        '#14CDA8',
+        '#24D21C',
+        '#0FBEEE',
+        '#5057E9',
+        '#792AEA',
+        '#25347B',
+        '#000000'
+      ],
+      // 布局风格
+      layoutConfigValue: getCookieInDomain('layoutConfig') || 'default',
+      layoutStyles: [
+        {
+          label: 'theme.defaultLayout',
+          icon: normalLayoutIcon,
+          key: 'default'
+        },
+        {
+          label: 'theme.compactLayout',
+          icon: compactLayoutIcon,
+          key: 'compact'
+        }
+      ],
+      menuConfigValue: getCookieInDomain('layoutMenuConfig') || 'vertical',
+      menuStyles: [
+        {
+          label: 'theme.menuHover',
+          icon: hoverIcon,
+          key: 'vertical'
+        },
+        {
+          label: 'theme.menuSider',
+          icon: siderIcon,
+          key: 'custom'
+        },
+        {
+          label: 'theme.menuVertical',
+          icon: verticalIcon,
+          key: 'inline'
+        }
+      ],
+      themeConfig: {
+        layoutConfig: getCookieInDomain('layoutConfig'),
+        layoutMenuConfig: getCookieInDomain('layoutMenuConfig'),
+        theme: getCookieInDomain('theme') || 'default',
+        navbarTheme: getCookieInDomain('navbarTheme'),
+        themeColor: getCookieInDomain(DEFAULT_THEME_COLOR_KEY)
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['themeColor', 'theme', 'navbarTheme', 'layoutConfig', 'configThemeColor', 'lang']),
+    getThemeConfig() {
+      const { layoutConfig, layoutMenuConfig, theme, navbarTheme, themeColor } = this.themeConfig
+      return {
+        lang: this.lang || 'zh-cn',
+        layoutConfig: layoutConfig || this.layoutConfigValue,
+        layoutMenuConfig: layoutMenuConfig || this.menuConfigValue,
+        theme: theme || this.theme,
+        navbarTheme: navbarTheme || this.navbarTheme,
+        themeColor: themeColor || this.themeColor
+      }
+    }
+  },
+  methods: {
+    openSetting() {
+      this.visible = true
+    },
+    // 风格配置缓存到后端
+    saveSetting() {
+      const userInfo = getUserInfo()
+      const data = {
+        params: {
+          userId: userInfo.userId,
+          prsnType: 'theme',
+          systemCode: window._config.systemCode,
+          storeData: JSON.stringify(this.getThemeConfig)
+        }
+      }
+      saveSettingConfig(data)
+    },
+    // 修改整体主题风格
+    handleChangeLayoutTheme(key) {
+      let theme = key || this?.theme
+      this.themeConfig.theme = theme
+      if (theme === 'undefined' || theme === null) theme = 'default'
+      const className = `theme-${theme}`
+      Array.from(document.body.classList).forEach(name => {
+        if (name.startsWith('theme-')) document.body.classList.remove(name)
+      })
+      document.body.classList.add(className)
+      setCookieInDomain('theme', theme)
+      this.$store.commit('SET_THEME', theme)
+      this.saveSetting()
+    },
+    // 修改导航栏主题
+    handleChangeNavbarTheme(idx) {
+      const navbarTheme = this.navbarThemes[idx]
+      if (navbarTheme) {
+        this.themeConfig.navbarTheme = navbarTheme
+        this.$store.commit('SET_NAVBAR_THEME', navbarTheme)
+        setCookieInDomain('navbarTheme', JSON.stringify(navbarTheme))
+        this.saveSetting()
+      }
+    },
+    // 修改控件主题色
+    async handleChangeThemeColor(color) {
+      // 改变系统主题颜色
+      this.themeConfig.themeColor = color
+      await theme(color)
+      // 将主题色存入Vuex
+      this.$store.commit('SET_THEME_COLOR', color)
+      // 获取主题色
+      this.$microProps.setGlobalState({ themeColor: color })
+      this.saveSetting()
+    },
+    // 修改布局风格
+    handleChangeLayoutConfig(config) {
+      this.layoutConfigValue = config
+      this.themeConfig.layoutConfig = config
+      setCookieInDomain('layoutConfig', config)
+      this.$store.commit('SET_LAYOUT_CONFIG', config)
+      this.saveSetting()
+    },
+    // 修改菜单布局
+    handleChangeMenuConfig(config) {
+      this.themeConfig.layoutMenuConfig = config
+      this.menuConfigValue = config
+      setCookieInDomain('layoutMenuConfig', config)
+      this.$store.commit('SET_LAYOUT_MENU_CONFIG', config)
+      this.saveSetting()
+    }
+  },
+  created() {
+    // this.handleChangeLayoutTheme()
+    // this.handleChangeNavbarTheme()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixin.scss';
+.layout-setting {
+  .setting-title {
+    font-size: 16px;
+
+    &.inline {
+      display: inline-block;
+    }
+  }
+
+  .setting-items {
+    @include flex-row(flex-start, center);
+
+    flex-wrap: wrap;
+
+    &.inline {
+      display: inline-flex;
+      margin-left: 16px;
+      vertical-align: super;
+    }
+
+    .setting-item {
+      @include flex-row(center, center);
+
+      flex-direction: column;
+      position: relative;
+      margin: 0 24px 24px 0;
+      font-size: 14px;
+      user-select: none;
+      cursor: pointer;
+
+      &.checked > .check {
+        visibility: visible;
+      }
+
+      .icon {
+        margin-bottom: 4px;
+        box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .check {
+        position: absolute;
+        left: 50%;
+        top: 30%;
+        transform: translate(-50%, -50%);
+        visibility: hidden;
+      }
+    }
+
+    .color {
+      margin: 0 18px 24px 0;
+      user-select: none;
+      cursor: pointer;
+
+      &.checked .theme-color-item > .check {
+        visibility: visible;
+      }
+
+      &.checked {
+        .theme-color-item {
+          border: 2px solid var(--el-color-primary-light-5);
+          box-sizing: border-box;
+        }
+        .theme-color-item > .icon {
+          visibility: visible;
+        }
+      }
+
+      .theme-color-item {
+        display: block;
+        position: relative;
+        width: 20px;
+        height: 20px;
+        border-radius: 5px;
+        
+        .icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          color: #fff;
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+</style>