vibe-web-sdk 1.0.0

package/components/selfHeader/index.vue

@@ -0,0 +1,310 @@
+<template>
+    <div class="navbar-self" v-show="flag">
+        <div class="navbar-wrapper">
+            <div class="header-container">
+                <div class="logo-container" style="cursor:pointer" @click="handleLogoClick">
+                    <img v-if="logo == null" class="logo" src="../../assets/images/logo.png" alt="Element Plus Logo" />
+                    <img v-else class="logo" :src="logo" alt="Element Plus Logo" />
+                    <span>E-NOESIS</span>
+                </div>
+                <div class="content-container">
+                    <div>
+                        <img v-if="isDark" src="../../assets/images/moon.png"  @click="handleImgClick" style="height:20px;padding-right:20px;cursor:pointer" />
+                        <img v-else src="../../assets/images/sun.png" @click="handleImgClick" style="height:20px;padding-right:20px;cursor:pointer" />
+                    </div>
+                    <el-dropdown trigger="click" style="margin-right: 20px; cursor: pointer">
+                        <span class="el-dropdown-link">
+                            <div class="language-selector">
+                                <img v-if="currentLang === 'zh-CN'" src="../../assets/images/flags/cn.svg"
+                                    class="flag-icon" alt="Chinese" />
+                                <img v-else-if="currentLang === 'de-DE'" src="../../assets/images/flags/de.svg"
+                                    class="flag-icon" alt="German" />
+                                <img v-if="currentLang === 'en-US'" src="../../assets/images/flags/gb.svg"
+                                    class="flag-icon" alt="English" />
+                            </div>
+                        </span>
+                        <template #dropdown>
+                            <el-dropdown-menu style="color: #6e8992">
+                                <el-dropdown-item v-for="item in languages" :key="item.value"
+                                    @click="changeLang(item.value)">
+                                    <div class="language-item">
+                                        <img v-if="item.value === 'zh-CN'" src="../../assets/images/flags/cn.svg"
+                                            class="flag-icon-small" alt="Chinese" />
+                                        <img v-else-if="item.value === 'de-DE'" src="../../assets/images/flags/de.svg"
+                                            class="flag-icon-small" alt="German" />
+                                        <img v-else-if="item.value === 'en-US'" src="../../assets/images/flags/gb.svg"
+                                            class="flag-icon-small" alt="English" />
+                                        <span style="margin-left: 8px;">{{ item.label }}</span>
+                                    </div>
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                    <div style="display:flex">
+                        <el-dropdown trigger="click" style="cursor: pointer;color:#6e8992">
+                            <span class="el-dropdown-link">
+                                <el-icon size="24">
+                                    <User />
+                                </el-icon>
+                            </span>
+
+                            <template #dropdown>
+                                <el-dropdown-menu style="color:#6e8992">
+                                    <el-dropdown-item @click="loginOut">{{
+                                        logoutLabel}}</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                    <div>
+                        <div style="color: #6e8992;"> {{ userName }} </div>
+                        <div v-if="isProd"
+                            style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 10px; color:#6e8992">
+                            {{ currentUser.deptName }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+
+<script>
+import {
+    useDark,
+    useToggle
+} from "@vueuse/core";
+import {
+    mapGetters
+} from "vuex";
+import {
+    logout
+} from "../../api/login";
+import en from "../../lang/en";
+import zh from "../../lang/zh";
+import {
+    getToken,
+    removeToken
+} from "../../utils/auth";
+import {
+    getLanguages,
+    getPlatFormLogo
+} from "../../api/application/index";
+
+export default {
+    name: "self-header",
+    data() {
+        return {
+            logo: null,
+            languages: [],
+            flag: true,
+            isDark: useDark({
+                selector: "body",
+                attribute: "color-scheme",
+                valueDark: "dark",
+                valueLight: "light",
+            }),
+            logoutLabel: "",
+            currentLang: localStorage.getItem('locale') || 'zh-CN',
+        };
+    },
+    computed: {
+        ...mapGetters(["userName"]),
+        currentUser() {
+            return JSON.parse(this.$store.state.user.user);
+        },
+        // 是否为生产环境
+        isProd() {
+            return process.env.VUE_APP_PROJECT_DEV !== "true" || process.env.VUE_APP_PROJECT_DEV === undefined;
+        },
+        logo() {
+            return localStorage.getItem("frame_logo") === "null" ? null : localStorage.getItem("frame_logo");
+        }
+    },
+    created() {
+        // 非调试模式下，未登录，跳转到登录页
+        if (getToken() === undefined && this.flag) {
+            if (process.env.VUE_APP_PROJECT_DEV === "false" || process.env.VUE_APP_PROJECT_DEV === undefined) {
+                self.location.href = "/home#/login";
+            }
+        } else {
+            getLanguages().then((response) => {
+                if (response.code === 200) {
+                    this.languages = [];
+                    response.rows.forEach((element) => {
+                        this.languages.push({
+                            label: element.remark,
+                            value: element.type,
+                        });
+                    });
+                }
+            });
+        }
+        if (this.$store.state.user.language === "en-US") {
+            this.languageLabel = en.headerLanguage;
+            this.logoutLabel = en.logoutLabel;
+        } else if (this.$store.state.user.language === "zh-CN") {
+            this.languageLabel = zh.headerLanguage;
+            this.logoutLabel = zh.logoutLabel;
+        } else {
+            this.languageLabel = zh.headerLanguage;
+            this.logoutLabel = zh.logoutLabel;
+        }
+        this.getPlatFormLogo();
+    },
+    methods: {
+        handleImgClick(){
+            this.isDark = !this.isDark;
+            this.toggleDark();
+        },
+        getPlatFormLogo() {
+            getPlatFormLogo().then((res) => {
+                if (res.data == null) {
+                    localStorage.setItem("frame_logo", null);
+                } else {
+                    localStorage.setItem("frame_logo", res.data.fileContent);
+                }
+            });
+        },
+        toggleDark:useToggle(useDark()),
+        handleLogoClick(){
+            self.location.href = "/home";
+        },
+        loginOut() {
+            logout().then(() => {
+                removeToken();
+                self.location.href = "/home#/login";
+            });
+        },
+        changeLang(val) {
+            if (val === "en-US") {
+                this.languageLabel = en.headerLanguage;
+                this.logoutLabel = en.logoutLabel;
+            } else if (val === "zh-CN") {
+                this.languageLabel = zh.headerLanguage;
+                this.logoutLabel = zh.logoutLabel;
+            }
+            window.location.reload();
+            this.$i18n.locale = val;
+            this.$store.dispatch("SwitchLanguage", val);
+        },
+    },
+    watch: {
+        $route(to) {
+            if (to.path.includes("/login")) {
+                this.flag = false;
+            } else {
+                this.flag = true;
+            }
+        },
+    },
+};
+</script>
+
+
+<style scoped>
+.navbar-self {
+    position: sticky;
+    width: 100%;
+    z-index: 100;
+    top: 0;
+    left: 0;
+}
+
+.navbar-wrapper {
+    position: relative;
+    height: var(--header-height);
+    padding: 0 12px 0 12px;
+    background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
+    background-size: 4px 4px;
+    backdrop-filter: saturate(50%) blur(4px);
+    -webkit-backdrop-filter: saturate(50%) blur(4px);
+    top: 0;
+    border-bottom: 1px solid #dcdfe6;
+}
+
+.dark .navbar-wrapper {
+    position: relative;
+    height: var(--header-height);
+    padding: 0 12px 0 12px;
+    background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
+    background-size: 4px 4px;
+    backdrop-filter: saturate(50%) blur(4px);
+    -webkit-backdrop-filter: saturate(50%) blur(4px);
+    top: 0;
+    border-bottom: 1px solid #121a22;
+    background: #121a22 !important;
+}
+
+.navbar-wrapper .header-container {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    max-width: 1650px;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    height: var(--header-height);
+    font-family: futura, sans-serif;
+    --tw-text-opacity: 1;
+    color: rgb(85 191 226 / var(--tw-text-opacity, 1));
+    letter-spacing: .1em;
+    gap: .75rem;
+    font-weight: 700;
+    align-items: center;
+
+
+}
+
+.navbar-wrapper .header-container .content-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-grow: 1;
+    height: 45px;
+}
+
+.logo-container>img {
+    height: 32px;
+    width: 32px;
+}
+
+/* Modern switch styles */
+.modern-switch {
+    margin-right: 20px;
+    --el-switch-on-color: #dcdfe6;
+    --el-switch-off-color: #dcdfe6;
+}
+
+.dark .modern-switch {
+    --el-switch-on-color: #2c3e50;
+    --el-switch-off-color: #2c3e50;
+}
+
+/* Language selector styles */
+.language-selector {
+    display: flex;
+    align-items: center;
+}
+
+.flag-icon {
+    width: 20px;
+    height: 15px;
+    object-fit: cover;
+}
+
+.flag-icon-small {
+    width: 16px;
+    height: 12px;
+    border-radius: 2px;
+    object-fit: cover;
+}
+
+.language-item {
+    display: flex;
+    align-items: center;
+}
+</style>