feat: set root entity for dashboards and set lang (#48)

src/views/Layer.vue

@@ -27,47 +27,34 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import Dashboard from "./dashboard/Edit.vue";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { RoutesMap } from "@/constants/data";
 
 const route = useRoute();
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
-const routesMap: { [key: string]: string } = {
-  GeneralServices: "GENERAL",
-  Database: "VIRTUAL_DATABASE",
-  MeshServices: "MESH",
-  ControlPanel: "MESH_CP",
-  DataPanel: "MESH_DP",
-  Linux: "OS_LINUX",
-  SkyWalkingServer: "SO11Y_OAP",
-  Satellite: "SO11Y_SATELLITE",
-  Functions: "FAAS",
-  Browser: "BROWSER",
-  KubernetesCluster: "K8S",
-  KubernetesService: "K8S_SERVICE",
-};
 const layer = ref<string>("GENERAL");
 
 getDashboard();
 
 async function getDashboard() {
-  layer.value = routesMap[String(route.name)];
+  layer.value = RoutesMap[String(route.name)];
   dashboardStore.setLayer(layer.value);
-  dashboardStore.setEntity(EntityType[1].value);
   dashboardStore.setMode(false);
   await dashboardStore.setDashboards();
-  const index = dashboardStore.dashboards.findIndex(
+  const item = dashboardStore.dashboards.find(
     (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
       d.layer === dashboardStore.layerId &&
-      d.entity === EntityType[1].value &&
+      [EntityType[0].value, EntityType[1].value].includes(d.entity) &&
       d.isRoot
   );
-  if (index < 0) {
+  if (!item) {
     appStore.setPageTitle(dashboardStore.layer);
     dashboardStore.setCurrentDashboard(null);
+    dashboardStore.setEntity(EntityType[1].value);
     return;
   }
-  const item = dashboardStore.dashboards[index];
+  dashboardStore.setEntity(item.entity);
   dashboardStore.setCurrentDashboard(item);
 }
 </script>

src/views/Settings.vue

@@ -14,18 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="settings">
-    <!-- <div class="flex-h item">
-      <span class="label">{{ t("version") }}</span>
-      <span>{{ rocketbotGlobal.version }}</span>
-    </div> -->
     <div class="flex-h item">
       <span class="label">{{ t("language") }}</span>
-      <el-switch
+      <Selector
         v-model="lang"
+        :options="Languages"
+        placeholder="Select a language"
         @change="setLang"
-        active-text="En"
-        inactive-text="Zh"
-        style="height: 25px"
+        size="small"
+        style="font-size: 14px"
       />
     </div>
     <div class="flex-h item">
@@ -76,12 +73,14 @@ import { ref, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import timeFormat from "@/utils/timeFormat";
+import { Languages } from "@/constants/data";
+import Selector from "@/components/Selector.vue";
 
 const { t, locale } = useI18n();
 const state = reactive<{ timer: ReturnType<typeof setInterval> | null }>({
   timer: null,
 });
-const lang = ref<boolean>(locale.value === "zh" ? false : true);
+const lang = ref<string>(locale.value || "en");
 const autoTime = ref<number>(6);
 const auto = ref<boolean>(false);
 const appStore = useAppStoreWithOut();
@@ -123,13 +122,8 @@ const changeAutoTime = () => {
   }
 };
 const setLang = (): void => {
-  if (lang.value) {
-    locale.value = "en";
-    window.localStorage.setItem("lang", "en");
-  } else {
-    locale.value = "zh";
-    window.localStorage.setItem("lang", "zh");
-  }
+  locale.value = lang.value;
+  window.localStorage.setItem("language", lang.value);
 };
 const setUTCHour = () => {
   if (utcHour.value < -12) {
@@ -184,7 +178,6 @@ const setUTCMin = () => {
 
 .settings {
   color: #222;
-  font-family: inherit;
   font-size: 14px;
   padding: 20px;
 

src/views/dashboard/List.vue

@@ -86,7 +86,11 @@ limitations under the License. -->
             <el-popconfirm
               title="Are you sure to set this?"
               @confirm="setRoot(scope.row)"
-              v-if="scope.row.entity === EntityType[1].value"
+              v-if="
+                [EntityType[0].value, EntityType[1].value].includes(
+                  scope.row.entity
+                )
+              "
             >
               <template #reference>
                 <el-button size="small" style="width: 120px" type="danger">
@@ -269,7 +273,7 @@ async function setRoot(row: DashboardItem) {
     } else {
       if (
         d.layer === row.layer &&
-        d.entity === row.entity &&
+        [EntityType[0].value, EntityType[1].value].includes(d.entity) &&
         row.isRoot === false &&
         d.isRoot === true
       ) {