feat: 添加 PCascadeSelect 组件，更新相关配置和依赖

src/App.vue

@@ -4,13 +4,81 @@ import AllCustom from './all-custom/all-custom.vue';
 import TutorialForm from './tutorial-form/index.vue';
 import ZodForm from './zod-form/index.vue';
 
-const datetime12h = ref();
-const datetime24h = ref();
-const time = ref();
-const date = ref();
-const dates = ref();
-
-
+const selectedCity = ref();
+const countries = ref([
+  {
+    name: 'Australia',
+    code: 'AU',
+    states: [
+      {
+        name: 'New South Wales',
+        cities: [
+          { cname: 'Sydney', code: 'A-SY' },
+          { cname: 'Newcastle', code: 'A-NE' },
+          { cname: 'Wollongong', code: 'A-WO' }
+        ]
+      },
+      {
+        name: 'Queensland',
+        cities: [
+          { cname: 'Brisbane', code: 'A-BR' },
+          { cname: 'Townsville', code: 'A-TO' }
+        ]
+      }
+    ]
+  },
+  {
+    name: 'Canada',
+    code: 'CA',
+    states: [
+      {
+        name: 'Quebec',
+        cities: [
+          { cname: 'Montreal', code: 'C-MO' },
+          { cname: 'Quebec City', code: 'C-QU' }
+        ]
+      },
+      {
+        name: 'Ontario',
+        cities: [
+          { cname: 'Ottawa', code: 'C-OT' },
+          { cname: 'Toronto', code: 'C-TO' }
+        ]
+      }
+    ]
+  },
+  {
+    name: 'United States',
+    code: 'US',
+    states: [
+      {
+        name: 'California',
+        cities: [
+          { cname: 'Los Angeles', code: 'US-LA' },
+          { cname: 'San Diego', code: 'US-SD' },
+          { cname: 'San Francisco', code: 'US-SF' }
+        ]
+      },
+      {
+        name: 'Florida',
+        cities: [
+          { cname: 'Jacksonville', code: 'US-JA' },
+          { cname: 'Miami', code: 'US-MI' },
+          { cname: 'Tampa', code: 'US-TA' },
+          { cname: 'Orlando', code: 'US-OR' }
+        ]
+      },
+      {
+        name: 'Texas',
+        cities: [
+          { cname: 'Austin', code: 'US-AU' },
+          { cname: 'Dallas', code: 'US-DA' },
+          { cname: 'Houston', code: 'US-HO' }
+        ]
+      }
+    ]
+  }
+]);
 </script>
 
 <template>
@@ -26,60 +94,16 @@ const dates = ref();
 
     <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
 
-
-      <div class="card flex flex-wrap gap-4 items-start">
-        <DatePicker
-          v-model="date"
-          view="month"
-          dateFormat="mm/yy"
-        />
-
-        <DatePicker
-          v-model="dates"
-          selectionMode="range"
-          :manualInput="false"
-        />
-
-
-        <div class="flex-auto">
-          <label
-            for="datepicker-12h"
-            class="font-bold block mb-2"
-          > 12h Format </label>
-          <DatePicker
-            id="datepicker-12h"
-            v-model="datetime12h"
-            showTime
-            hourFormat="12"
-            fluid
-          />
-        </div>
-        <div class="flex-auto">
-          <label
-            for="datepicker-24h"
-            class="font-bold block mb-2"
-          > 24h Format </label>
-          <DatePicker
-            id="datepicker-24h"
-            v-model="datetime24h"
-            showTime
-            hourFormat="24"
-            fluid
-          />
-        </div>
-        <div class="flex-auto">
-          <label
-            for="datepicker-timeonly"
-            class="font-bold block mb-2"
-          > Time Only </label>
-          <DatePicker
-            id="datepicker-timeonly"
-            v-model="time"
-            timeOnly
-            fluid
-          />
-        </div>
-      </div>
+      <CascadeSelect
+        loading
+        v-model="selectedCity"
+        :options="countries"
+        optionLabel="cname"
+        optionGroupLabel="name"
+        :optionGroupChildren="['states', 'cities']"
+        class="w-56"
+        placeholder="Select a City"
+      />
 
     </div>
   </div>