github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 00:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update

Browse Source
This commit is contained in:
Fine 2023-07-11 21:37:45 +08:00
parent a521e041a7
commit d27a1833cd
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/store/modules/app.ts
View File

@ -37,6 +37,7 @@ interface AppState {
isMobile: boolean; isMobile: boolean;
reloadTimer: Nullable<IntervalHandle>; reloadTimer: Nullable<IntervalHandle>;
activateMenus: MenuOptions[]; activateMenus: MenuOptions[];
allMenus: MenuOptions[];
} }
export const appStore = defineStore({ export const appStore = defineStore({
@ -58,6 +59,7 @@ export const appStore = defineStore({
isMobile: false, isMobile: false,
reloadTimer: null, reloadTimer: null,
activateMenus: [], activateMenus: [],
allMenus: [],
}), }),
getters: { getters: {
duration(): Duration { duration(): Duration {
@ -163,7 +165,8 @@ export const appStore = defineStore({
}, },
async getActivateMenus() { async getActivateMenus() {
const resp = (await this.queryMenuItems()) || {}; const resp = (await this.queryMenuItems()) || {};
const menus = (resp.getMenuItems || []).map((d: MenuOptions, index: number) => { this.allMenus = resp.getMenuItems || [];
const menus = this.allMenus.map((d: MenuOptions, index: number) => {
const t = `${d.title.replace(/\s+/g, "-")}`; const t = `${d.title.replace(/\s+/g, "-")}`;
d.name = `${t}-${index}`; d.name = `${t}-${index}`;
d.path = `/${t}`; d.path = `/${t}`;

16
src/views/marketplace/Menus.vue
View File

@ -18,13 +18,15 @@ limitations under the License. -->
<div class="mr-20 mt-10 flex-h category"> <div class="mr-20 mt-10 flex-h category">
<el-card <el-card
class="item" class="item"
v-for="(menu, index) in appStore.activateMenus" v-for="(menu, index) in appStore.allMenus"
:key="index" :key="index"
@click="handleItems(menu)" @click="handleItems(menu)"
:class="currentItems.name === menu.name ? 'active' : ''" :class="currentItems.name === menu.name ? 'active' : ''"
> >
<router-link :to="menu.hasGroup ? '' : menu.path || ''"> <router-link :to="menu.hasGroup || !menu.activate ? '' : menu.path || ''">
<div class="title" :class="menu.hasGroup ? '' : 'actived-font'"> {{ menu.title }}</div> <div class="title" :class="menu.activate ? (menu.hasGroup ? '' : 'actived-font') : 'disabled'">
{{ menu.title }}</div
>
</router-link> </router-link>
<div class="mt-10"> {{ menu.description }} </div> <div class="mt-10"> {{ menu.description }} </div>
<el-link :href="menu.documentLink" target="_blank" class="link" v-show="menu.documentLink"> <el-link :href="menu.documentLink" target="_blank" class="link" v-show="menu.documentLink">
@ -34,8 +36,8 @@ limitations under the License. -->
</div> </div>
<div class="mt-10 cards"> <div class="mt-10 cards">
<el-card shadow="hover" v-for="(item, index) in currentItems.subItems || []" :key="index" class="card"> <el-card shadow="hover" v-for="(item, index) in currentItems.subItems || []" :key="index" class="card">
<router-link :to="item.path || ''"> <router-link :to="item.activate ? item.path || '' : ''">
<div class="title actived-font"> {{ item.title }}</div> <div class="title" :class="item.activate ? 'actived-font' : 'disabled'"> {{ item.title }}</div>
</router-link> </router-link>
<div class="mt-10"> {{ item.description }} </div> <div class="mt-10"> {{ item.description }} </div>
<el-link :href="item.documentLink" target="_blank" class="link" v-show="item.documentLink"> <el-link :href="item.documentLink" target="_blank" class="link" v-show="item.documentLink">
@ -86,6 +88,10 @@ limitations under the License. -->
color: $active-color; color: $active-color;
} }
.disabled {
color: #aaa;
}
.card { .card {
margin-bottom: 30px; margin-bottom: 30px;
cursor: pointer; cursor: pointer;