feat(web): the collection supports Mongo where statements.

web/package.json

@@ -25,6 +25,7 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "dotenv": "^16.0.3",
+    "ejson-shell-parser": "^1.2.4",
     "framer-motion": "^10.12.16",
     "i18next": "^22.5.0",
     "i18next-browser-languagedetector": "7.0.1",

web/public/locales/en/translation.json

@@ -29,7 +29,7 @@
     "EmptyDataText": "No data information,",
     "EmptyPolicyTip": "You have not created a policy",
     "EmptyRuleTip": "This policy has no rules yet,",
-    "Query": "Please enter the ID and press Enter to query",
+    "Query": "Please enter the ID or Mongo where statement, press Enter to query. For example: {_id: {$eq: 'document id'}}.",
     "Search": "Please enter ID to search",
     "CreateTagTip": "Press \"Enter\" to separate tags, each tag can be up to 16 characters",
     "CollectionNameRule": "The collection name can only start with a letter and consist of 3 to 32 characters including letters, _ or -"

web/public/locales/zh-CN/translation.json

@@ -24,7 +24,7 @@
     "RulesContent": "规则内容",
     "RulesNum": "规则数",
     "Search": "请输入 ID 进行搜索",
-    "Query": "请输入 ID 按回车进行查询",
+    "Query": "请输入 ID 或 Mongo where 语句，按回车进行查询。如：{_id: {$eq: 'document id'}}",
     "SelectCollection": "选择集合",
     "SelectFunction": "请选择云函数",
     "CollectionNameRule": "集合名称只能由字母开头,包含字母, _ 或者 - 的3至32个字符组成",

web/public/locales/zh/translation.json

@@ -24,7 +24,7 @@
     "RulesContent": "规则内容",
     "RulesNum": "规则数",
     "Search": "请输入 ID 进行搜索",
-    "Query": "请输入 ID 按回车进行查询",
+    "Query": "请输入 ID 或 Mongo where 语句，按回车进行查询。如：{_id: {$eq: 'document id'}}",
     "SelectCollection": "选择集合",
     "SelectFunction": "请选择云函数",
     "CollectionNameRule": "集合名称只能由字母开头,包含字母, _ 或者 - 的3至32个字符组成",

web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx

@@ -144,8 +144,8 @@ export default function DataPanel() {
 
   return (
     <>
-      <Panel.Header className="my-1 w-full flex-shrink-0">
-        <div className="flex items-center">
+      <Panel.Header className="my-1 flex-shrink-0">
+        <div className="flex items-center flex-1">
           <AddDataModal
             schema={currentData.data ? currentData.data : {}}
             onSuccessSubmit={(id: string, count: number) => {
@@ -184,14 +184,15 @@ export default function DataPanel() {
             {t("RefreshData")}
           </Button>
           <form
+            className="flex flex-1"
             onSubmit={(event) => {
               event?.preventDefault();
               refresh(search);
             }}
           >
-            <div className="my-4 flex justify-between">
-              <HStack spacing={2}>
-                <InputGroup className="mr-4" width="300px">
+            <div className="my-4 flex justify-between flex-1">
+              <HStack spacing={2} className="flex flex-1">
+                <InputGroup className="mr-4 flex-1">
                   <InputLeftElement
                     height={"8"}
                     pointerEvents="none"

web/src/pages/app/database/index.tsx

@@ -40,7 +40,7 @@ function DatabasePage() {
         </Col>
         <Resize type="x" pageId="collectionPage" panelId="SideBar" containerRef={containerRef} />
         <Col>
-          <Panel className="h-full items-center">
+          <Panel className="h-full items-center items-stretch">
             {store.currentShow === "DB" ? <CollectionDataList /> : <PolicyDataList />}
           </Panel>
         </Col>

web/src/pages/app/database/service.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import parse from "ejson-shell-parser";
 import { t } from "i18next";
 
 import useDBMStore from "./store";
@@ -47,7 +48,19 @@ export const useEntryDataQuery = (params: any, onSuccess: (data: any) => void) =
       if (!currentDB) return;
       const { pageSize = 10, page = 1, _id } = params;
 
-      const query = _id ? { _id } : {};
+      const parse_query = (q: string) => {
+        // no find { and }
+        if (/^[^{}]*$/.test(q)) {
+          return { _id: q };
+        }
+        try {
+          return parse(q, { mode: "strict" });
+        } catch (err) {}
+      };
+      const query = _id ? parse_query(_id) : {};
+      if (!query) {
+        return { list: [], total: 0, page, pageSize };
+      }
 
       // 执行数据查询
       const res = await db