feat(order): add order detail and list pages with components for order management

- Implemented order detail page with components for displaying order status, user info, and refund options.
- Created order list page with pagination and order cards for displaying all orders.
- Added styles for order detail and list pages.
- Developed a prompt document outlining component requirements for the order management system.
- Introduced a new Card component for quick booking with a responsive design.
- Enhanced Tabs component for better navigation between different categories.
- Integrated z-paging for efficient data loading and management in order and quick booking lists.
- Added service order card component for displaying service requests with call functionality.
- Updated main CSS for improved viewport handling.

src/components/UseDateRange/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="bg-white rounded-12 overflow-hidden mb-12">
+    <div class="border-box font-size-16 font-500 color-000 line-height-24 p-12">
+      使用日期
+    </div>
+    <div class="flex flex-items-center border-box">
+      <scroll-div class="date-scroll" scroll-x>
+        <div class="date-list">
+          <block v-for="item in openDateRangeList" :key="item.date">
+            <div
+              class="date-item"
+              :class="{ selected: isSameDate(selectedDate, item.date) }"
+              @click="onDateClick(item)"
+            >
+              <div class="label font-size-12">{{ item.weekDesc }}</div>
+              <div class="md font-size-16 font-600">
+                {{ formatMD(item.date) }}
+              </div>
+              <div class="status font-size-12">{{ item.canOrder }}</div>
+              <div v-if="isSameDate(selectedDate, item.date)" class="check">
+                ✔
+              </div>
+            </div>
+          </block>
+        </div>
+      </scroll-div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  selectedDate: { type: String, default: null },
+  openDateRangeList: { type: Array, default: () => [] },
+});
+const emit = defineEmits(["update:selectedDate"]);
+const selectedDate = ref(props.selectedDate);
+
+watch(
+  () => props.selectedDate,
+  (v) => {
+    selectedDate.value = v;
+  },
+);
+
+const isSameDate = (a, b) => {
+  if (!a || !b) return false;
+  return a === b;
+};
+
+// 格式化展示日期，将 2026-04-13 转换为 04-13
+const formatMD = (dateStr) => {
+  if (!dateStr || typeof dateStr !== "string") return "";
+  const parts = dateStr.split("-");
+  if (parts.length >= 3) {
+    return `${parts[1]}-${parts[2]}`;
+  }
+  return dateStr;
+};
+
+const onDateClick = (item) => {
+  const date = item.date;
+  if (selectedDate.value === date) {
+    selectedDate.value = null;
+  } else {
+    selectedDate.value = date;
+  }
+  console.log("selectedDate:", selectedDate.value);
+  emit("update:selectedDate", selectedDate.value);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>