feat: update Icons and add Selector

2025-05-02 18:04:54 +00:00 · 2021-12-27 14:58:41 +08:00 · 2021-12-27 14:58:41 +08:00 · e8f23d9ead
commit e8f23d9ead
parent 90431b98f2
9 changed files with 327 additions and 90 deletions
--- a/src/assets/icons/folder_open.svg
+++ b/src/assets/icons/folder_open.svg
@ -0,0 +1,18 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>folder_open</title>
+<path d="M20.016 18v-9.984h-16.031v9.984h16.031zM20.016 6q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6l2.016 2.016h8.016z"></path>
+</svg>
--- a/src/assets/icons/save.svg
+++ b/src/assets/icons/save.svg
@ -0,0 +1,18 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>save</title>
+<path d="M15 9v-3.984h-9.984v3.984h9.984zM12 18.984q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891-2.109 0.891-0.891 2.109 0.891 2.109 2.109 0.891zM17.016 3l3.984 3.984v12q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h12z"></path>
+</svg>
--- a/src/assets/icons/save_alt.svg
+++ b/src/assets/icons/save_alt.svg
@ -0,0 +1,18 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>save_alt</title>
+<path d="M12.984 12.656l2.625-2.578 1.406 1.406-5.016 5.016-5.016-5.016 1.406-1.406 2.625 2.578v-9.656h1.969v9.656zM18.984 12h2.016v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984h2.016v6.984h13.969v-6.984z"></path>
+</svg>
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@ -0,0 +1,93 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <el-select
+    size="small"
+    v-model="selected"
+    :placeholder="placeholder"
+    class="selectors"
+    @change="changeSelected"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    >
+    </el-option>
+  </el-select>
+</template>
+<script lang="ts" setup>
+import { defineProps, ref, defineEmits } from "vue";
+import type { PropType } from "vue";
+import { ElSelect, ElOption } from "element-plus";
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+const emit = defineEmits(["change"]);
+const props = defineProps({
+  options: {
+    type: Array as PropType<Option[]>,
+    default: () => [],
+  },
+  size: { type: String, default: "small" },
+  placeholder: { type: String, default: "Select a option" },
+});
+const selected = ref<string>("");
+function changeSelected(val: string) {
+  const optionSele = props.options.filter((d: Option) => d.value === val);
+  emit("change", optionSele);
+}
+</script>
+<style lang="scss" scope>
+.icon {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  fill: currentColor;
+
+  &.sm {
+    width: 14px;
+    height: 14px;
+  }
+
+  &.middle {
+    width: 18px;
+    height: 18px;
+  }
+
+  &.lg {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.loading {
+    animation: loading 1.5s linear infinite;
+  }
+
+  &.logo {
+    height: 30px;
+    width: 110px;
+  }
+
+  &.xl {
+    height: 30px;
+    width: 30px;
+  }
+}
+</style>
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -16,25 +16,18 @@
 */
 import Icon from "./Icon.vue";
 import TimePicker from "./TimePicker.vue";
-import type { App, Plugin } from "vue";
+import Selector from "./Selector.vue";
+import type { App } from "vue";
 import VueGridLayout from "vue-grid-layout";

 const components: { [key: string]: any } = {
  Icon,
  TimePicker,
  VueGridLayout,
+  Selector,
 };
 const componentsName: string[] = Object.keys(components);
-const withInstall = <T>(component: T, alias?: string) => {
-  const comp = component as any;
-  comp.install = (app: App) => {
-    app.component(comp.name || comp.displayName, component);
-    if (alias) {
-      app.config.globalProperties[alias] = component;
-    }
-  };
-  return component as T & Plugin;
-};
+
 export default {
  install: (vue: App): void => {
    vue.use(components["VueGridLayout"]);
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@ -14,31 +14,49 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
  <div class="dashboard-tool">
-    <el-button size="mini" @click="addWidget"> Add Widget </el-button>
-    <el-button size="mini">Dashboard Settings</el-button>
-    <el-button size="mini">Discard</el-button>
-    <el-button size="mini" type="primary">Apply</el-button>
+    <el-tooltip class="item" effect="dark" content="Add Widget" placement="top">
+      <span class="icon-btn" @click="dashboardStore.addWidget">
+        <Icon size="sm" iconName="playlist_add" />
+      </span>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Settings" placement="top">
+      <span class="icon-btn" @click="dashboardStore.setConfigPanel(true)">
+        <Icon size="sm" iconName="settings" />
+      </span>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Import" placement="top">
+      <span class="icon-btn">
+        <Icon size="sm" iconName="folder_open" />
+      </span>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Export" placement="top">
+      <span class="icon-btn">
+        <Icon size="sm" iconName="save_alt" />
+      </span>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Apply" placement="top">
+      <span class="icon-btn">
+        <Icon size="sm" iconName="save" />
+      </span>
+    </el-tooltip>
  </div>
-  <div class="flex-h ds-main">
-    <div class="layout">
-      <div class="grids">
-        <GridLayout />
-      </div>
-    </div>
-    <div
-      class="ds-config"
-      v-show="dashboardStore.showConfig"
-      @click="dashboardStore.setConfigPanel(true)"
+  <div class="ds-main">
+    <GridLayout />
+    <el-dialog
+      v-model="dashboardStore.showConfig"
+      title="Configurations"
+      width="95%"
+      @closed="dashboardStore.setConfigPanel(false)"
    >
-      Configurations
-    </div>
+      <span>Configurations</span>
+    </el-dialog>
  </div>
 </template>
 <script lang="ts" setup>
-import { ElButton } from "element-plus";
 import GridLayout from "./panel/Layout.vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { ElDialog, ElTooltip } from "element-plus";

 const dashboardStore = useDashboardStore();
 // fetch layout data from serve side
@ -60,13 +78,6 @@ const layout: LayoutConfig[] = [
  { x: 8, y: 27, w: 4, h: 15, i: "16" },
 ];
 dashboardStore.setLayout(layout);
-document.addEventListener("click", setConfig, true);
-function setConfig() {
-  dashboardStore.setConfigPanel(false);
-}
-function addWidget() {
-  dashboardStore.addWidget();
-}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
@ -98,4 +109,16 @@ function addWidget() {
  text-align: center;
  border-left: 1px solid #eee;
 }
+
+.icon-btn {
+  display: inline-block;
+  padding: 0 5px;
+  text-align: center;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-left: 8px;
+  cursor: pointer;
+  background-color: #eee;
+  color: #666;
+}
 </style>
--- a/src/views/dashboard/New.vue
+++ b/src/views/dashboard/New.vue
@ -25,37 +25,21 @@ limitations under the License. -->
    </div>
    <div class="item">
      <div class="label">{{ t("layer") }}</div>
-      <el-select
+      <Selector
+        :options="Options"
        size="small"
-        v-model="state.layer"
        placeholder="Select a layer"
-        class="selectors"
-      >
-        <el-option
-          v-for="item in Options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
+        @change="changeLayer"
+      />
    </div>
    <div class="item">
      <div class="label">{{ t("entityType") }}</div>
-      <el-select
+      <Selector
+        :options="EntityType"
        size="small"
-        v-model="state.entity"
        placeholder="Select a entity"
-        class="selectors"
-      >
-        <el-option
-          v-for="item in EntityType"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
+        @change="changeEntity"
+      />
    </div>
    <div class="btn">
      <el-button class="create" size="small" type="primary" @click="onCreate">
@ -68,7 +52,7 @@ limitations under the License. -->
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import router from "@/router";
-import { ElSelect, ElOption, ElInput, ElButton } from "element-plus";
+import { ElInput, ElButton } from "element-plus";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EntityType, Options } from "./data";
 import uuid from "@/utils/uuid";
@ -86,6 +70,12 @@ const onCreate = () => {
  router.push(path);
 };
 selectorStore.fetchServices("general");
+function changeLayer(val: { label: string; value: string }) {
+  state.layer = val.value;
+}
+function changeEntity(val: { label: string; value: string }) {
+  state.entity = val.value;
+}
 </script>
 <style lang="scss" scoped>
 .title {
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@ -23,36 +23,6 @@ export const EntityType = [
  { value: "serviceInstanceRelation", label: "Service Instance Relation" },
  { value: "endpointRelation", label: "Endpoint Relation" },
 ];
-export const SelectOpt = [
-  {
-    value: "service1",
-    label: "Service1",
-    children: [
-      {
-        value: "instance1",
-        label: "Instance1",
-      },
-      {
-        value: "instance2",
-        label: "Instance2",
-      },
-    ],
-  },
-  {
-    value: "service2",
-    label: "Service2",
-    children: [
-      {
-        value: "instance1",
-        label: "Instance1",
-      },
-      {
-        value: "instance2",
-        label: "Instance2",
-      },
-    ],
-  },
-];
 export const Options = [
  {
    value: "Option1",
--- a/type.d.ts
+++ b/type.d.ts
@ -0,0 +1,114 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type {
+  ComponentRenderProxy,
+  VNode,
+  VNodeChild,
+  ComponentPublicInstance,
+  FunctionalComponent,
+  PropType as VuePropType,
+} from "vue";
+
+declare module "three";
+declare module "three-orbit-controls";
+declare module "element-plus";
+declare global {
+  const __APP_INFO__: {
+    pkg: {
+      name: string;
+      version: string;
+      dependencies: Recordable<string>;
+      devDependencies: Recordable<string>;
+    };
+    lastBuildTime: string;
+  };
+
+  // vue
+  declare type PropType<T> = VuePropType<T>;
+  declare type VueNode = VNodeChild | JSX.Element;
+
+  export type Writable<T> = {
+    -readonly [P in keyof T]: T[P];
+  };
+
+  declare type Nullable<T> = T | null;
+  declare type NonNullable<T> = T extends null | undefined ? never : T;
+  declare type Recordable<T = any> = Record<string, T>;
+  declare type ReadonlyRecordable<T = any> = {
+    readonly [key: string]: T;
+  };
+  declare type Indexable<T = any> = {
+    [key: string]: T;
+  };
+  declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+  };
+  declare type TimeoutHandle = ReturnType<typeof setTimeout>;
+  declare type IntervalHandle = ReturnType<typeof setInterval>;
+
+  declare interface ChangeEvent extends Event {
+    target: HTMLInputElement;
+  }
+
+  declare interface WheelEvent {
+    path?: EventTarget[];
+  }
+  interface ImportMetaEnv extends ViteEnv {
+    __: unknown;
+  }
+
+  declare interface ViteEnv {
+    VITE_PORT: number;
+    VITE_USE_MOCK: boolean;
+    VITE_USE_PWA: boolean;
+    VITE_PUBLIC_PATH: string;
+    VITE_PROXY: [string, string][];
+    VITE_GLOB_APP_TITLE: string;
+    VITE_GLOB_APP_SHORT_NAME: string;
+    VITE_USE_CDN: boolean;
+    VITE_DROP_CONSOLE: boolean;
+    VITE_BUILD_COMPRESS: "gzip" | "brotli" | "none";
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+    VITE_LEGACY: boolean;
+    VITE_USE_IMAGEMIN: boolean;
+    VITE_GENERATE_UI: string;
+  }
+
+  declare function parseInt(s: string | number, radix?: number): number;
+
+  declare function parseFloat(string: string | number): number;
+
+  namespace JSX {
+    type Element = VNode;
+    type ElementClass = ComponentRenderProxy;
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+    interface IntrinsicAttributes {
+      [elem: string]: any;
+    }
+  }
+}
+
+declare module "vue" {
+  export type JSXComponent<Props = any> =
+    | { new (): ComponentPublicInstance<Props> }
+    | FunctionalComponent<Props>;
+}