feat: implement Profile in the dashboard (#19)

src/components/DateCalendar.vue

@@ -553,6 +553,9 @@ const ok = (info: any) => {
   if (props.right && _time.getTime() / 100000 > start.value) {
     emit("setDates", _time, "right");
   }
+  if (!(props.left && props.right)) {
+    emit("setDates", _time);
+  }
   emit("ok", info === "h");
 };
 onMounted(() => {

src/components/Radio.vue

@@ -0,0 +1,50 @@
+<!-- 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-radio-group v-model="selected" @change="checked">
+    <el-radio v-for="item in options" :key="item.value" :label="item.value">
+      {{ item.label }}
+    </el-radio>
+  </el-radio-group>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { PropType } from "vue";
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+/*global  defineProps, defineEmits */
+const emit = defineEmits(["change"]);
+const props = defineProps({
+  options: {
+    type: Array as PropType<(Option & { disabled: boolean })[]>,
+    default: () => [],
+  },
+  value: {
+    type: String as PropType<string>,
+    default: "",
+  },
+  size: { type: null, default: "default" },
+});
+
+const selected = ref<string>(props.value);
+
+function checked(opt: string) {
+  emit("change", opt);
+}
+</script>

src/components/Selector.vue

@@ -76,42 +76,6 @@ watch(
 );
 </script>
 <style lang="scss" scoped>
-.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;
-  }
-}
-
 .el-input__inner {
   border-radius: unset !important;
 }

src/components/TimePicker.vue

@@ -276,11 +276,11 @@ const ok = (leaveOpened: boolean) => {
     }, 1);
 };
 const setDates = (d: Date, pos: string) => {
-  if (pos === "left") {
-    dates.value[0] = d;
+  if (pos === "right") {
+    dates.value[1] = d;
     return;
   }
-  dates.value[1] = d;
+  dates.value[0] = d;
 };
 const dc = (e: any) => {
   show.value = (datepicker.value as any).contains(e.target) && !props.disabled;

src/components/index.ts

@@ -18,6 +18,7 @@ import Icon from "./Icon.vue";
 import TimePicker from "./TimePicker.vue";
 import Selector from "./Selector.vue";
 import Graph from "./Graph.vue";
+import Radio from "./Radio.vue";
 import type { App } from "vue";
 import VueGridLayout from "vue-grid-layout";
 
@@ -27,6 +28,7 @@ const components: { [key: string]: any } = {
   VueGridLayout,
   Selector,
   Graph,
+  Radio,
 };
 const componentsName: string[] = Object.keys(components);