fix: update selectors

src/components/Selector.vue

@@ -44,10 +44,11 @@ const props = defineProps({
     type: Array as PropType<Option[]>,
     default: () => [],
   },
+  value: { type: String, default: "" },
   size: { type: String, default: "small" },
   placeholder: { type: String, default: "Select a option" },
 });
-const selected = ref<string>("");
+const selected = ref<string>(props.value);
 function changeSelected() {
   const optionSele = props.options.filter(
     (d: Option) => d.value === selected.value

src/views/dashboard/New.vue

@@ -26,6 +26,7 @@ limitations under the License. -->
     <div class="item">
       <div class="label">{{ t("layer") }}</div>
       <Selector
+        :value="states.layer"
         :options="Options"
         size="small"
         placeholder="Select a layer"
@@ -36,6 +37,7 @@ limitations under the License. -->
     <div class="item">
       <div class="label">{{ t("entityType") }}</div>
       <Selector
+        :value="states.entity"
         :options="EntityType"
         size="small"
         placeholder="Select a entity"
@@ -63,7 +65,7 @@ const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const states = reactive({
   name: "",
-  layer: "",
+  layer: Options[0].value,
   entity: EntityType[0].value,
 });
 const onCreate = () => {

src/views/dashboard/data.ts

@@ -33,23 +33,23 @@ export const EntityType = [
 ];
 export const Options = [
   {
-    value: "Option1",
-    label: "Option1",
+    value: "layer1",
+    label: "layer1",
   },
   {
-    value: "Option2",
-    label: "Option2",
+    value: "layer2",
+    label: "layer2",
   },
   {
-    value: "Option3",
-    label: "Option3",
+    value: "layer3",
+    label: "layer3",
   },
   {
-    value: "Option4",
-    label: "Option4",
+    value: "layer4",
+    label: "layer4",
   },
   {
-    value: "Option5",
-    label: "Option5",
+    value: "layer5",
+    label: "layer5",
   },
 ];