feat(ui): 统一面板空状态引导

src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx

@@ -38,6 +38,7 @@ import { Style, Icon, Circle, Fill, Stroke } from "ol/style";
 import Feature, { FeatureLike } from "ol/Feature";
 import { bbox, featureCollection } from "@turf/turf";
 import { useSchemeCreatorName } from "@components/olmap/core/useSchemeCreatorName";
+import { SchemeQueryEmptyState } from "@components/olmap/common/PanelEmptyState";
 
 interface SchemeRecord {
   id: number;
@@ -72,6 +73,7 @@ export interface MonitoringSchemeQueryState {
   queryAll: boolean;
   queryDate: Dayjs | null;
   expandedId: number | null;
+  hasQueried: boolean;
 }
 
 export const createMonitoringSchemeQueryState =
@@ -79,6 +81,7 @@ export const createMonitoringSchemeQueryState =
     queryAll: true,
     queryDate: dayjs(new Date()),
     expandedId: null,
+    hasQueried: false,
   });
 
 const SchemeQuery: React.FC<SchemeQueryProps> = ({
@@ -94,7 +97,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     onStateChange,
     createMonitoringSchemeQueryState(),
   );
-  const { queryAll, queryDate, expandedId } = queryState;
+  const { queryAll, queryDate, expandedId, hasQueried } = queryState;
   const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const creatorName = useSchemeCreatorName();
@@ -207,6 +210,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         sensorLocation: item.sensor_location,
       }));
       setSchemes(nextSchemes);
+      setQueryField("hasQueried", true);
 
       if (filteredResults.length === 0) {
         open?.({
@@ -290,7 +294,10 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
               control={
                 <Checkbox
                   checked={queryAll}
-                  onChange={(e) => setQueryField("queryAll", e.target.checked)}
+                  onChange={(e) => {
+                    setQueryField("queryAll", e.target.checked);
+                    setQueryField("hasQueried", false);
+                  }}
                   size="small"
                 />
               }
@@ -303,9 +310,12 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
             >
               <DatePicker
                 value={queryDate}
-                onChange={(value) =>
-                  value && dayjs.isDayjs(value) && setQueryField("queryDate", value)
-                }
+                onChange={(value) => {
+                  if (value && dayjs.isDayjs(value)) {
+                    setQueryField("queryDate", value);
+                    setQueryField("hasQueried", false);
+                  }
+                }}
                 format="YYYY-MM-DD"
                 disabled={queryAll}
                 slotProps={{
@@ -333,39 +343,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
       {/* 结果列表 */}
       <Box className="flex-1 overflow-auto">
         {sortedSchemes.length === 0 ? (
-          <Box className="flex flex-col items-center justify-center h-full text-gray-400">
-            <Box className="mb-4">
-              <svg
-                width="80"
-                height="80"
-                viewBox="0 0 80 80"
-                fill="none"
-                className="opacity-40"
-              >
-                <rect
-                  x="10"
-                  y="20"
-                  width="60"
-                  height="45"
-                  rx="2"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-                <line
-                  x1="10"
-                  y1="30"
-                  x2="70"
-                  y2="30"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-              </svg>
-            </Box>
-            <Typography variant="body2">总共 0 条</Typography>
-            <Typography variant="body2" className="mt-1">
-              No data
-            </Typography>
-          </Box>
+          <SchemeQueryEmptyState hasQueried={hasQueried} />
         ) : (
           <Box className="space-y-2 p-2">
             <Typography variant="caption" className="text-gray-500 px-2">