Skip to content
GitLab
Commit b2a93491 authored by ruanshudong's avatar ruanshudong
Browse files

fix header user css

parent 8e707093
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 504 additions and 352 deletions
+504 -352
client/dist/auth.html
+ 1
- 1
View file @ b2a93491
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>User Center</title><link href=/static/css/auth.917f69ac.css rel=preload as=style><link href=/static/css/chunk-common.e941c7c1.css rel=preload as=style><link href=/static/css/chunk-vendors.7e538d84.css rel=preload as=style><link href=/static/js/auth.3f67602a.js rel=preload as=script><link href=/static/js/chunk-common.07b5d79a.js rel=preload as=script><link href=/static/js/chunk-vendors.205991fe.js rel=preload as=script><link href=/static/css/chunk-vendors.7e538d84.css rel=stylesheet><link href=/static/css/chunk-common.e941c7c1.css rel=stylesheet><link href=/static/css/auth.917f69ac.css rel=stylesheet></head><body><div id=auth-app></div><script src=/static/js/chunk-vendors.205991fe.js></script><script src=/static/js/chunk-common.07b5d79a.js></script><script src=/static/js/auth.3f67602a.js></script></body></html> <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>User Center</title><link href=/static/css/auth.c2384921.css rel=preload as=style><link href=/static/css/chunk-common.e941c7c1.css rel=preload as=style><link href=/static/css/chunk-vendors.7e538d84.css rel=preload as=style><link href=/static/js/auth.b4e03246.js rel=preload as=script><link href=/static/js/chunk-common.07b5d79a.js rel=preload as=script><link href=/static/js/chunk-vendors.205991fe.js rel=preload as=script><link href=/static/css/chunk-vendors.7e538d84.css rel=stylesheet><link href=/static/css/chunk-common.e941c7c1.css rel=stylesheet><link href=/static/css/auth.c2384921.css rel=stylesheet></head><body><div id=auth-app></div><script src=/static/js/chunk-vendors.205991fe.js></script><script src=/static/js/chunk-common.07b5d79a.js></script><script src=/static/js/auth.b4e03246.js></script></body></html>
\ No newline at end of file \ No newline at end of file
client/dist/index.html
+ 1
- 1
View file @ b2a93491
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/static/favicon.ico><title>Tars</title><link href=/static/css/chunk-common.e941c7c1.css rel=preload as=style><link href=/static/css/chunk-vendors.7e538d84.css rel=preload as=style><link href=/static/css/index.c4bfe4bd.css rel=preload as=style><link href=/static/js/chunk-common.07b5d79a.js rel=preload as=script><link href=/static/js/chunk-vendors.205991fe.js rel=preload as=script><link href=/static/js/index.25fe1fe3.js rel=preload as=script><link href=/static/css/chunk-vendors.7e538d84.css rel=stylesheet><link href=/static/css/chunk-common.e941c7c1.css rel=stylesheet><link href=/static/css/index.c4bfe4bd.css rel=stylesheet></head><body><noscript><strong>We're sorry but Tars doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.205991fe.js></script><script src=/static/js/chunk-common.07b5d79a.js></script><script src=/static/js/index.25fe1fe3.js></script></body></html> <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/static/favicon.ico><title>Tars</title><link href=/static/css/chunk-common.e941c7c1.css rel=preload as=style><link href=/static/css/chunk-vendors.7e538d84.css rel=preload as=style><link href=/static/css/index.c4bfe4bd.css rel=preload as=style><link href=/static/js/chunk-common.07b5d79a.js rel=preload as=script><link href=/static/js/chunk-vendors.205991fe.js rel=preload as=script><link href=/static/js/index.99567d68.js rel=preload as=script><link href=/static/css/chunk-vendors.7e538d84.css rel=stylesheet><link href=/static/css/chunk-common.e941c7c1.css rel=stylesheet><link href=/static/css/index.c4bfe4bd.css rel=stylesheet></head><body><noscript><strong>We're sorry but Tars doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.205991fe.js></script><script src=/static/js/chunk-common.07b5d79a.js></script><script src=/static/js/index.99567d68.js></script></body></html>
\ No newline at end of file \ No newline at end of file
client/dist/k8s.html
+ 1
- 1
View file @ b2a93491
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/static/favicon.ico><title>TarsK8s</title><link href=/static/css/chunk-common.e941c7c1.css rel=preload as=style><link href=/static/css/chunk-vendors.7e538d84.css rel=preload as=style><link href=/static/css/k8s.cea0004d.css rel=preload as=style><link href=/static/js/chunk-common.07b5d79a.js rel=preload as=script><link href=/static/js/chunk-vendors.205991fe.js rel=preload as=script><link href=/static/js/k8s.8f2b733b.js rel=preload as=script><link href=/static/css/chunk-vendors.7e538d84.css rel=stylesheet><link href=/static/css/chunk-common.e941c7c1.css rel=stylesheet><link href=/static/css/k8s.cea0004d.css rel=stylesheet></head><body><noscript><strong>We're sorry but TarsK8s doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.205991fe.js></script><script src=/static/js/chunk-common.07b5d79a.js></script><script src=/static/js/k8s.8f2b733b.js></script></body></html> <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/static/favicon.ico><title>TarsK8s</title><link href=/static/css/chunk-common.e941c7c1.css rel=preload as=style><link href=/static/css/chunk-vendors.7e538d84.css rel=preload as=style><link href=/static/css/k8s.2782c787.css rel=preload as=style><link href=/static/js/chunk-common.07b5d79a.js rel=preload as=script><link href=/static/js/chunk-vendors.205991fe.js rel=preload as=script><link href=/static/js/k8s.c01c0eeb.js rel=preload as=script><link href=/static/css/chunk-vendors.7e538d84.css rel=stylesheet><link href=/static/css/chunk-common.e941c7c1.css rel=stylesheet><link href=/static/css/k8s.2782c787.css rel=stylesheet></head><body><noscript><strong>We're sorry but TarsK8s doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.205991fe.js></script><script src=/static/js/chunk-common.07b5d79a.js></script><script src=/static/js/k8s.c01c0eeb.js></script></body></html>
\ No newline at end of file \ No newline at end of file
client/dist/static/js/auth.3f67602a.js deleted 100644 → 0
+ 0
- 1
View file @ 8e707093
This diff is collapsed.
client/dist/static/js/auth.b4e03246.js 0 → 100644
+ 1
- 0
View file @ b2a93491
This diff is collapsed.
client/dist/static/js/index.25fe1fe3.js deleted 100644 → 0
+ 0
- 1
View file @ 8e707093
This diff is collapsed.
client/dist/static/js/index.99567d68.js 0 → 100644
+ 1
- 0
View file @ b2a93491
This diff is collapsed.
client/dist/static/js/k8s.8f2b733b.js deleted 100644 → 0
+ 0
- 1
View file @ 8e707093
This diff is collapsed.
client/dist/static/js/k8s.c01c0eeb.js 0 → 100644
+ 1
- 0
View file @ b2a93491
This diff is collapsed.
client/src/components/app/header.vue
+ 31
- 4
View file @ b2a93491
...@@ -59,7 +59,24 @@ ...@@ -59,7 +59,24 @@
<div>framework:{{ framework_version }}</div> <div>framework:{{ framework_version }}</div>
</div> </div>
<div class="user-wrap"> <div class="user-wrap">
<p class="user-info" @click="userOptOpen = !userOptOpen"> <el-dropdown style="margin-bottom:10px;" @command="handleCommand">
<span class="el-dropdown-link">
{{ uid }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="center" v-show="enableLogin">{{
$t("header.userCenter")
}}</el-dropdown-item>
<el-dropdown-item command="modifyPass" v-if="!enableLdap">{{
$t("header.modifyPass")
}}</el-dropdown-item>
<el-dropdown-item command="quit" v-if="!enableLdap">{{
$t("header.logout")
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <p class="user-info" @click="userOptOpen = !userOptOpen">
<span class="name toe">{{ uid }} </span> <span class="name toe">{{ uid }} </span>
<i <i
class="let-icon let-icon-caret-down" class="let-icon let-icon-caret-down"
...@@ -80,8 +97,8 @@ ...@@ -80,8 +97,8 @@
<a href="/logout">{{ $t("header.logout") }}</a> <a href="/logout">{{ $t("header.logout") }}</a>
</div> </div>
</div> </div>
</transition> </transition> -->
</p> <!-- </p> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -104,7 +121,7 @@ export default { ...@@ -104,7 +121,7 @@ export default {
packageIcon, packageIcon,
locale: this.$cookie.get("locale") || "en", locale: this.$cookie.get("locale") || "en",
uid: "--", uid: "--",
userOptOpen: false, // userOptOpen: false,
enableLogin: false, enableLogin: false,
isAdmin: false, isAdmin: false,
localeMessages: localeMessages, localeMessages: localeMessages,
...@@ -123,6 +140,16 @@ export default { ...@@ -123,6 +140,16 @@ export default {
userCenter() { userCenter() {
window.open("/pages/server/api/userCenter"); window.open("/pages/server/api/userCenter");
}, },
handleCommand(command) {
if (command == "center") {
location.href = "/auth.html";
} else if (command == "modifyPass") {
location.href = "/pass.html";
}
if (command == "quit") {
location.href = "/logout";
}
},
getLoginUid() { getLoginUid() {
this.$ajax this.$ajax
.getJSON("/server/api/get_login_uid") .getJSON("/server/api/get_login_uid")
......
client/src/components/app/k8s-header.vue
+ 240
- 187
View file @ b2a93491
<template> <template>
<div class="app_index__header"> <div class="app_index__header">
<div class="main-width"> <div class="main-width">
<h1 class="hidden">TARS/K8S</h1> <h1 class="hidden">TARS/K8S</h1>
<div class="logo-wrap"> <div class="logo-wrap">
<a v-if="enable === 'true' && show === 'true'" href="/"><img class="logo" src="/static/img/tars-logo.png"></a> <a v-if="enable === 'true' && show === 'true'" href="/"
<a v-if="k8s === 'true'" :class="{active: true}" href="/k8s.html"><img class="logo" src="/static/img/K8S.png"></a> ><img class="logo" src="/static/img/tars-logo.png"
<a v-if="enable === 'true'" href="/dcache.html"><img class="logo" alt="dcache" src="/static/img/dcache-logo.png"></a> /></a>
<a v-if="k8s === 'true'" :class="{ active: true }" href="/k8s.html"
><img class="logo" src="/static/img/K8S.png"
/></a>
<a v-if="enable === 'true'" href="/dcache.html"
><img class="logo" alt="dcache" src="/static/img/dcache-logo.png"
/></a>
</div> </div>
<let-tabs class="tabs" :center="true" @click="clickTab" :activekey="$route.matched[0].path"> <let-tabs
<let-tab-pane :tab="$t('header.tab.tab1')" tabkey="/server" :icon="serverIcon"></let-tab-pane> class="tabs"
<let-tab-pane :tab="$t('header.tab.tab2')" tabkey="/operation" :icon="opaIcon"></let-tab-pane> :center="true"
<let-tab-pane :tab="$t('header.tab.tab8')" tabkey="/gateway" :icon="cacheIcon"></let-tab-pane> @click="clickTab"
<let-tab-pane :tab="$t('header.tab.tab9')" tabkey="/market" :icon="packageIcon"></let-tab-pane> :activekey="$route.matched[0].path"
>
<let-tab-pane
:tab="$t('header.tab.tab1')"
tabkey="/server"
:icon="serverIcon"
></let-tab-pane>
<let-tab-pane
:tab="$t('header.tab.tab2')"
tabkey="/operation"
:icon="opaIcon"
></let-tab-pane>
<let-tab-pane
:tab="$t('header.tab.tab8')"
tabkey="/gateway"
:icon="cacheIcon"
></let-tab-pane>
<let-tab-pane
:tab="$t('header.tab.tab9')"
tabkey="/market"
:icon="packageIcon"
></let-tab-pane>
</let-tabs> </let-tabs>
<div class="language-wrap"> <div class="language-wrap">
<let-select v-model="locale" @change="changeLocale" :clearable="false"> <let-select v-model="locale" @change="changeLocale" :clearable="false">
<template v-for="locale in localeMessages"> <template v-for="locale in localeMessages">
<let-option :value="locale.localeCode" :key="locale.localeCode">{{locale.localeName}}</let-option> <let-option :value="locale.localeCode" :key="locale.localeCode">{{
locale.localeName
}}</let-option>
</template> </template>
</let-select> </let-select>
</div> </div>
<div class="user-wrap"> <div class="user-wrap">
<p class="user-info" @click="userOptOpen = !userOptOpen"> <el-dropdown style="margin-bottom:10px;" @command="handleCommand">
<span class="name toe">{{uid}} </span> <span class="el-dropdown-link">
<i class="let-icon let-icon-caret-down" :class="{up: userOptOpen}" v-show="enableLogin"></i> {{ uid
<transition name="fade"> }}<i
<div class="user-pop-wrap" v-show="enableLogin && userOptOpen"> class="el-icon-arrow-down el-icon--right"
<div> <a href="/auth.html" >{{$t('header.userCenter')}}</a> </div> v-show="enableLogin"
<div> <a href="/pass.html" v-if="!enableLdap" >{{$t('header.modifyPass')}}</a> </div> ></i>
<div> <a href="/logout">{{$t('header.logout')}}</a> </div> </span>
</div> <el-dropdown-menu slot="dropdown">
</transition> <el-dropdown-item command="center" v-show="enableLogin">{{
</p> $t("header.userCenter")
}}</el-dropdown-item>
<el-dropdown-item command="modifyPass">{{
$t("header.modifyPass")
}}</el-dropdown-item>
<el-dropdown-item command="quit">{{
$t("header.logout")
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import serverIcon from '@/assets/img/server-icon.png'; import serverIcon from "@/assets/img/server-icon.png";
import opaIcon from '@/assets/img/opa-icon.png'; import opaIcon from "@/assets/img/opa-icon.png";
import releaseIcon from '@/assets/img/package-l.png'; import releaseIcon from "@/assets/img/package-l.png";
import cacheIcon from '@/assets/img/cache-l.png'; import cacheIcon from "@/assets/img/cache-l.png";
import operatorIcon from '@/assets/img/operator-l.png'; import operatorIcon from "@/assets/img/operator-l.png";
import packageIcon from '@/assets/img/package-l.png'; import packageIcon from "@/assets/img/package-l.png";
import {localeMessages} from '@/locale/i18n'; import { localeMessages } from "@/locale/i18n";
export default {
export default { data() {
data() { return {
return { // 图标
// 图标 serverIcon,
serverIcon, opaIcon,
opaIcon, releaseIcon,
releaseIcon, cacheIcon,
cacheIcon, operatorIcon,
operatorIcon, packageIcon,
packageIcon, locale: this.$cookie.get("locale") || "en",
locale: this.$cookie.get('locale') || 'en', uid: "--",
uid: '--', // userOptOpen: false,
userOptOpen: false, enableLogin: false,
enableLogin: false, isAdmin: false,
isAdmin: false, localeMessages: localeMessages,
localeMessages: localeMessages, k8s: this.$cookie.get("k8s") || "false",
k8s: this.$cookie.get('k8s') || 'false', enable: this.$cookie.get("enable") || "false",
enable: this.$cookie.get('enable') || 'false', show: this.$cookie.get("show") || "false",
show: this.$cookie.get('show') || 'false', enableLdap: false,
enableLdap: false, };
}; },
methods: {
handleCommand(command) {
if (command == "center") {
location.href = "/auth.html";
} else if (command == "modifyPass") {
location.href = "/pass.html";
}
if (command == "quit") {
location.href = "/logout";
}
}, },
methods: { clickTab(tabkey) {
clickTab(tabkey) { this.$router.replace(tabkey);
this.$router.replace(tabkey); },
}, userCenter() {
userCenter() { window.open("/pages/server/api/userCenter");
window.open("/pages/server/api/userCenter"); },
}, getLoginUid() {
getLoginUid(){ this.$ajax
this.$ajax.getJSON('/server/api/get_login_uid').then((data) => { .getJSON("/server/api/get_login_uid")
.then((data) => {
if (data && data.uid) { if (data && data.uid) {
this.uid = data.uid; this.uid = data.uid;
} else { } else {
this.uid = '***'; this.uid = "***";
} }
}).catch((err) => { })
.catch((err) => {
this.$tip.error(`获取用户登录信息: ${err.err_msg || err.message}`); this.$tip.error(`获取用户登录信息: ${err.err_msg || err.message}`);
}); });
}, },
changeLocale(){ changeLocale() {
this.$cookie.set('locale', this.locale, {expires: '1Y'}); this.$cookie.set("locale", this.locale, { expires: "1Y" });
location.reload(); location.reload();
}, },
checkEnableLogin(){ checkEnableLogin() {
this.$ajax.getJSON('/server/api/is_enable_login').then((data) => { this.$ajax
// console.log(data); .getJSON("/server/api/is_enable_login")
.then((data) => {
// console.log(data);
this.enableLogin = data.enableLogin || false; this.enableLogin = data.enableLogin || false;
}).catch((err) => { })
}); .catch((err) => {});
}, },
checkEnableLdap(){ checkEnableLdap() {
this.$ajax.getJSON('/server/api/isEnableLdap').then((data) => { this.$ajax
this.enableLdap = data.enableLdap || false; .getJSON("/server/api/isEnableLdap")
}).catch((err)=>{ .then((data) => {
this.enableLdap = data.enableLdap || false;
}); })
}, .catch((err) => {});
checkAdmin(){ },
this.isAdmin = false; checkAdmin() {
this.$ajax.getJSON('/server/api/isAdmin').then((data) => { this.isAdmin = false;
this.$ajax
.getJSON("/server/api/isAdmin")
.then((data) => {
// console.log(data); // console.log(data);
this.isAdmin = data.admin; this.isAdmin = data.admin;
}).catch((err) => { })
}); .catch((err) => {});
},
}, },
mounted() { },
this.getLoginUid(); mounted() {
this.checkEnableLogin(); this.getLoginUid();
this.checkAdmin(); this.checkEnableLogin();
this.checkEnableLdap(); this.checkAdmin();
this.checkEnableLdap();
window.header =this; window.header = this;
} },
}; };
</script> </script>
<style lang="postcss"> <style lang="postcss">
@import '../../assets/css/variable.css'; @import "../../assets/css/variable.css";
.app_index__header {
height: 80px;
border-bottom: 1px solid var(--border-color);
.main-width { .app_index__header {
position: relative; height: 80px;
} border-bottom: 1px solid var(--border-color);
.tabs .let-tabs__header { .main-width {
border-bottom: none; position: relative;
} }
.logo-wrap, .user-wrap, .language-wrap { .tabs .let-tabs__header {
position: absolute; border-bottom: none;
top: 0; }
height: 80px;
width: 300px;
padding: 26px var(--gap-small);
}
.logo-wrap { .logo-wrap,
left: 0; .user-wrap,
width: auto; .language-wrap {
z-index: 100; position: absolute;
padding: 0px; top: 0;
height: 80px;
width: 300px;
padding: 26px var(--gap-small);
}
a { .logo-wrap {
display: inline-block; left: 0;
height: 80px; width: auto;
padding: 30px 20px 0; z-index: 100;
position: relative; padding: 0px;
&.active {
&::after {
content: "";
display: inline-block;
height: 3px;
width: 100%;
background: #457FF5;
position: absolute;
top: 76px;
left: 0px;
} a {
} display: inline-block;
.logo { height: 80px;
height: 25px; padding: 30px 20px 0;
position: relative;
&.active {
&::after {
content: "";
display: inline-block;
height: 3px;
width: 100%;
background: #457ff5;
position: absolute;
top: 76px;
left: 0px;
} }
} }
.logo { .logo {
height: 28px; height: 25px;
} }
} }
.language-wrap { .logo {
right: 150px; height: 28px;
width: 150px;
padding-top: 20px;
} }
}
.language-wrap {
right: 150px;
width: 150px;
padding-top: 20px;
}
.user-wrap { .user-wrap {
right: 0; right: 0;
width: 150px; width: 150px;
text-align: right; text-align: right;
.user-info {
max-width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
height: 28px;
cursor: pointer;
.avatar {
height: 100%;
border-radius: 50%;
}
.name { .user-info {
margin: 0 8px; max-width: 100%;
} display: flex;
align-items: center;
justify-content: flex-end;
height: 28px;
cursor: pointer;
.let-icon-caret-down { .avatar {
position: relative; height: 100%;
right: auto; border-radius: 50%;
top: auto; }
padding-left: 0;
margin-top: 0;
}
.name {
margin: 0 8px;
} }
}
.user-pop-wrap { .let-icon-caret-down {
position: absolute; position: relative;
right: 20px; right: auto;
top: 55px; top: auto;
border: 1px solid #d7dae0; padding-left: 0;
border-radius: 4px; margin-top: 0;
padding: 10px; }
background: #FFF;
font-size: 12px;
} }
}
.fade-enter-active, .fade-leave-active { .user-pop-wrap {
transition: opacity .4s; position: absolute;
} right: 20px;
top: 55px;
border: 1px solid #d7dae0;
border-radius: 4px;
padding: 10px;
background: #fff;
font-size: 12px;
}
.fade-enter, .fade-leave-to { .fade-enter-active,
opacity: 0; .fade-leave-active {
} transition: opacity 0.4s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
} }
}
</style> </style>
client/src/components/app/sso-header.vue
+ 217
- 152
View file @ b2a93491
<template> <template>
<!-- <div id="app"> --> <!-- <div id="app"> -->
<div class="app_index__header"> <div class="app_index__header">
<div class="main-width"> <div class="main-width">
<!-- <div style="float:right;width: 400px;position:relative;clear:both;"> --> <!-- <div style="float:right;width: 400px;position:relative;clear:both;"> -->
<h1 class="hidden">TARS</h1> <h1 class="hidden">TARS</h1>
<div class="logo-wrap"> <div class="logo-wrap">
<a v-if="enable === 'true' && show === 'true'" :class="{active: false}" href="/"><img class="logo" src="/static/img/tars-logo.png"></a> <a
<a v-if="k8s === 'true'" :class="{active: true}" href="/k8s.html"><img class="logo" src="/static/img/K8S.png"></a> v-if="enable === 'true' && show === 'true'"
</div> :class="{ active: false }"
href="/"
<let-tabs class="tabs" :center="true" @click="clickTab" :activekey="$route.matched[0].path"> ><img class="logo" src="/static/img/tars-logo.png"
<let-tab-pane :tab="$t('ssoHeader.tab.tab1')" tabkey="/" :icon="serverIcon"></let-tab-pane> /></a>
<let-tab-pane v-if="isAdmin" :tab="$t('ssoHeader.tab.tab2')" tabkey="/user" :icon="userIcon"></let-tab-pane> <a v-if="k8s === 'true'" :class="{ active: true }" href="/k8s.html"
<let-tab-pane :tab="$t('ssoHeader.tab.tab4')" tabkey="/token" :icon="tokenIcon"></let-tab-pane> ><img class="logo" src="/static/img/K8S.png"
<let-tab-pane v-if="isAdmin" :tab="$t('ssoHeader.tab.tab5')" tabkey="/set" :icon="opaIcon"></let-tab-pane> /></a>
</let-tabs> </div>
<div class="language-wrap"> <let-tabs
<let-select v-model="locale" @change="changeLocale" :clearable="false"> class="tabs"
<template v-for="locale in localeMessages"> :center="true"
<let-option :value="locale.localeCode" :key="locale.localeCode">{{locale.localeName}}</let-option> @click="clickTab"
</template> :activekey="$route.matched[0].path"
</let-select> >
</div> <let-tab-pane
:tab="$t('ssoHeader.tab.tab1')"
<!-- <div class="language-wrap"> tabkey="/"
:icon="serverIcon"
></let-tab-pane>
<let-tab-pane
v-if="isAdmin"
:tab="$t('ssoHeader.tab.tab2')"
tabkey="/user"
:icon="userIcon"
></let-tab-pane>
<let-tab-pane
:tab="$t('ssoHeader.tab.tab4')"
tabkey="/token"
:icon="tokenIcon"
></let-tab-pane>
<let-tab-pane
v-if="isAdmin"
:tab="$t('ssoHeader.tab.tab5')"
tabkey="/set"
:icon="opaIcon"
></let-tab-pane>
</let-tabs>
<div class="language-wrap">
<let-select v-model="locale" @change="changeLocale" :clearable="false">
<template v-for="locale in localeMessages">
<let-option :value="locale.localeCode" :key="locale.localeCode">{{
locale.localeName
}}</let-option>
</template>
</let-select>
</div>
<!-- <div class="language-wrap">
<locale-select></locale-select> <locale-select></locale-select>
</div> --> </div> -->
<el-dropdown style="margin-bottom:10px;" @command="handleCommand">
<span class="el-dropdown-link">
{{ uid
}}<i
class="el-icon-arrow-down el-icon--right"
v-show="enableLogin"
></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="modifyPass">{{
$t("header.modifyPass")
}}</el-dropdown-item>
<el-dropdown-item command="quit">{{
$t("header.logout")
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!--
<div class="user-wrap"> <div class="user-wrap">
<p class="user-info" @click="userOptOpen = !userOptOpen"> <p class="user-info" @click="userOptOpen = !userOptOpen">
<span class="name toe">{{uid}} </span> <span class="name toe">{{uid}} </span>
...@@ -39,98 +89,114 @@ ...@@ -39,98 +89,114 @@
</div> </div>
</transition> </transition>
</p> </p>
</div> </div> -->
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import serverIcon from '@/assets/img/server-icon.png'; import serverIcon from "@/assets/img/server-icon.png";
import userIcon from '@/assets/img/operator-l.png'; import userIcon from "@/assets/img/operator-l.png";
import opaIcon from '@/assets/img/opa-icon.png'; import opaIcon from "@/assets/img/opa-icon.png";
import tokenIcon from '@/assets/img/create-l.png'; import tokenIcon from "@/assets/img/create-l.png";
import packageIcon from '@/assets/img/package.png' import packageIcon from "@/assets/img/package.png";
import {localeMessages} from '@/locale/i18n'; import { localeMessages } from "@/locale/i18n";
export default { export default {
name: 'App', name: "App",
data(){ data() {
return { return {
serverIcon, serverIcon,
opaIcon, opaIcon,
userIcon, userIcon,
packageIcon, packageIcon,
tokenIcon, tokenIcon,
locale: this.$cookie.get('locale') || 'cn', locale: this.$cookie.get("locale") || "cn",
localeMessages: localeMessages, localeMessages: localeMessages,
enableLogin: true, enableLogin: true,
isAdmin: false, isAdmin: false,
uid: '--', uid: "--",
k8s: this.$cookie.get('k8s') || 'false', k8s: this.$cookie.get("k8s") || "false",
enable: this.$cookie.get('enable') || 'false', enable: this.$cookie.get("enable") || "false",
show: this.$cookie.get('show') || 'false', show: this.$cookie.get("show") || "false",
userOptOpen: false, // userOptOpen: false,
enableLdap: false, enableLdap: false,
} };
}, },
methods:{ methods: {
handleCommand(command) {
if (command == "modifyPass") {
location.href = "/pass.html";
}
if (command == "quit") {
location.href = "/logout";
}
},
clickTab(tabkey) { clickTab(tabkey) {
this.$router.replace(tabkey); this.$router.replace(tabkey);
}, },
changeLocale(){ changeLocale() {
this.$cookie.set('locale', this.locale, {expires: '1Y'}); this.$cookie.set("locale", this.locale, { expires: "1Y" });
location.reload(); location.reload();
}, },
getLoginUid(){ getLoginUid() {
this.$ajax.getJSON('/server/api/getLoginUid').then((data) => { this.$ajax
if(data && data.uid){ .getJSON("/server/api/getLoginUid")
this.uid = data.uid; .then((data) => {
}else{ if (data && data.uid) {
this.uid = '***'; this.uid = data.uid;
} } else {
}).catch((err) => { this.uid = "***";
this.$tip.error(`${this.$t('login.getUidFailed')}: ${err.err_msg || err.message}`); }
}); })
}, .catch((err) => {
checkEnableLogin(){ this.$tip.error(
this.$ajax.getJSON('/server/api/isEnableLogin').then((data) => { `${this.$t("login.getUidFailed")}: ${err.err_msg || err.message}`
this.enableLogin = data.enableLogin || false; );
}).catch((err)=>{
});
},
checkEnableLdap(){
this.$ajax.getJSON('/server/api/isEnableLdap').then((data) => {
this.enableLdap = data.enableLdap || false;
}).catch((err)=>{
}); });
}, },
async checkAdmin(){ checkEnableLogin() {
this.isAdmin = false; this.$ajax
return this.$ajax.getJSON('/server/api/isAdmin').then((data) => { .getJSON("/server/api/isEnableLogin")
.then((data) => {
this.enableLogin = data.enableLogin || false;
})
.catch((err) => {});
},
checkEnableLdap() {
this.$ajax
.getJSON("/server/api/isEnableLdap")
.then((data) => {
this.enableLdap = data.enableLdap || false;
})
.catch((err) => {});
},
async checkAdmin() {
this.isAdmin = false;
return this.$ajax
.getJSON("/server/api/isAdmin")
.then((data) => {
this.isAdmin = data.admin; this.isAdmin = data.admin;
// alert(this.isAdmin); // alert(this.isAdmin);
}).catch((err) => { })
}); .catch((err) => {});
}, },
},
async mounted() {
this.getLoginUid();
this.checkEnableLogin();
await this.checkAdmin();
this.checkEnableLdap();
}, },
async mounted(){
this.getLoginUid();
this.checkEnableLogin();
await this.checkAdmin();
this.checkEnableLdap();
}
}; };
</script> </script>
<style lang="postcss"> <style lang="postcss">
/* @import '../../assets/css/variable.css'; */ /* @import '../../assets/css/variable.css'; */
.app_index__header { .app_index__header {
height: 80px; height: 80px;
border-bottom: 1px solid; border-bottom: 1px solid;
.main-width { .main-width {
position: relative; position: relative;
...@@ -140,7 +206,9 @@ export default { ...@@ -140,7 +206,9 @@ export default {
border-bottom: none; border-bottom: none;
} }
.logo-wrap, .user-wrap, .language-wrap { .logo-wrap,
.user-wrap,
.language-wrap {
position: absolute; position: absolute;
top: 0; top: 0;
height: 80px; height: 80px;
...@@ -154,34 +222,31 @@ export default { ...@@ -154,34 +222,31 @@ export default {
z-index: 100; z-index: 100;
padding: 0px; padding: 0px;
a { a {
display: inline-block; display: inline-block;
height: 80px; height: 80px;
padding: 20px 20px 0; padding: 20px 20px 0;
position: relative; position: relative;
&.active { &.active {
&::after { &::after {
content: ""; content: "";
display: inline-block; display: inline-block;
height: 3px; height: 3px;
width: 100%; width: 100%;
background: #457FF5; background: #457ff5;
position: absolute; position: absolute;
top: 76px; top: 76px;
left: 0px; left: 0px;
}
} }
}
.logo {
height: 31px;
}
}
.logo {
height: 28px;
}
.logo {
height: 31px;
}
}
.logo {
height: 28px;
}
} }
.language-wrap { .language-wrap {
right: 150px; right: 150px;
...@@ -194,32 +259,31 @@ export default { ...@@ -194,32 +259,31 @@ export default {
width: 150px; width: 150px;
text-align: right; text-align: right;
.user-info { .user-info {
max-width: 100%; max-width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
height: 28px; height: 28px;
cursor: pointer; cursor: pointer;
.avatar {
height: 100%;
border-radius: 50%;
}
.name { .avatar {
margin: 0 8px; height: 100%;
} border-radius: 50%;
}
.let-icon-caret-down { .name {
position: relative; margin: 0 8px;
right: auto; }
top: auto;
padding-left: 0;
margin-top: 0;
}
} .let-icon-caret-down {
position: relative;
right: auto;
top: auto;
padding-left: 0;
margin-top: 0;
}
}
} }
.user-pop-wrap { .user-pop-wrap {
...@@ -229,17 +293,18 @@ export default { ...@@ -229,17 +293,18 @@ export default {
border: 1px solid #d7dae0; border: 1px solid #d7dae0;
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
background: #FFF; background: #fff;
font-size: 12px; font-size: 12px;
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active,
transition: opacity .4s; .fade-leave-active {
transition: opacity 0.4s;
} }
.fade-enter, .fade-leave-to { .fade-enter,
.fade-leave-to {
opacity: 0; opacity: 0;
} }
} }
</style> </style>
client/src/market/market.vue
+ 1
- 0
View file @ b2a93491
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<el-dropdown style="margin-bottom:10px;" @command="handleCommand"> <el-dropdown style="margin-bottom:10px;" @command="handleCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<i class="el-icon-cloudy el-icon--left"></i>
{{ uid }}<i class="el-icon-arrow-down el-icon--right"></i> {{ uid }}<i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
......
client/src/market/service/index.vue
+ 9
- 3
View file @ b2a93491
...@@ -38,9 +38,15 @@ ...@@ -38,9 +38,15 @@
<span style="margin-bottom:10px; margin-right:10px"> <span style="margin-bottom:10px; margin-right:10px">
<el-tag effect="dark" size="mini" style=" margin-right:5px" <el-tag effect="dark" size="mini" style=" margin-right:5px"
>贡献者</el-tag >贡献者</el-tag
><el-tag effect="plain" type="success" size="mini">{{ ><el-tag
serviceVersion.collaborators effect="plain"
}}</el-tag> type="success"
style="margin-right:5px"
size="mini"
v-for="u in serviceVersion.collaborators.split(',')"
v-bind:key="u"
>{{ u }}</el-tag
>
</span> </span>
</div> </div>
<div style="margin-bottom:5px"> <div style="margin-bottom:5px">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

免费DevSecOps平台，让您的项目体验完整的DevSecOps流程，让项目更安全