noob-components/examples/App.vue

<template>
  <Index
    @updatePwd="updatePwd"
    @logout="logout"
    :langAble="false"
    :styleAble="true"
    center=""
    :username="state.user.name"
    :checkUser="false"
    :menus="menus"
  >
  </Index>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { Index, Element, Views } from "noob-mengyxu";
const { showMessage } = Element;
import md5 from "js-md5";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();
const { commit, dispatch, state } = useStore();
// const logo = ref("/logo.png");

const { buff, dictionary, config, permission, role, user, status, log } = Views.menus;
const menus = [
  {
    i18n: "menu.home",
    path: "home",
    icon: "HomeFilled",
  },
  {
    i18n: "menu.operator",
    path: "operator",
    icon: "Platform",
    children: [buff, dictionary, config, permission, role, user, status, log],
  },
  {
    i18n: "menu.base",
    path: "base",
    icon: "House",
    children: [
      { i18n: "menu.table", path: "table", icon: "List" },
      { i18n: "menu.tableV2", path: "table-v2", icon: "List" },
      { i18n: "menu.jsonView", path: "json-view", icon: "Document" },
      { i18n: "menu.form", path: "form", icon: "Postcard" },
      { i18n: "menu.pretextDemo", path: "pretext-demo", icon: "List" },
    ],
  },
  {
    i18n: "menu.tool",
    path: "tool",
    icon: "Tools",
    children: [
      { i18n: "menu.terminal", path: "terminal", icon: "Platform" },
      { i18n: "menu.color", path: "color", icon: "MagicStick" },
    ],
  },
];

const updatePwd = (pwd) => {
  if (state.user.password != md5(pwd.old)) {
    showMessage("error", "旧密码不正确");
    return;
  }
  state.user.password = md5(pwd.new);
};

const logout = () => {
  dispatch("logout");
};

onMounted(() => {
  dispatch("getMenus");
  document.title = t("title");
});
</script>

<style lang="scss">
/* Force selection colors to work globally */
*::selection {
  background-color: #3367d1 !important;
  color: #fff !important;
}

*::-moz-selection {
  background-color: #3367d1 !important;
  color: #fff !important;
}

.el-dialog {
  background-color: rgba($color: #e6e8eb, $alpha: 1) !important;
}

.el-select-dropdown {
  background-color: rgba($color: #e6e8eb, $alpha: 1) !important;
}
</style>