refactor: 移除aaa.tsx并引入Rule组件

src/components/AutoScoreManager.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react"
 import { HolderOutlined } from "@ant-design/icons"
 import { useTranslation } from "react-i18next"
-import DemoQueryBuilder from "./autoScore/aaa"
+import Rule from "./autoScore/Rule"
 import {
   Card,
   Form,
@@ -426,8 +426,8 @@ export const AutoScoreManager: React.FC = () => {
         </Form>
       </Card>
 
-      <DemoQueryBuilder />
+      <Rule />
-      
+
       <div style={{ marginBottom: "24px", display: "flex", gap: "12px" }}>
         <Button type="primary" onClick={handleSubmit}>
           {editingRuleId !== null ? t("autoScore.updateAutomation") : t("autoScore.addAutomation")}

src/components/autoScore/aaa.tsx

@@ -1,104 +0,0 @@
-import React, { useState, useCallback } from "react";
-
-// >>> 
-import type { JsonGroup, Config, ImmutableTree, BuilderProps } from '@react-awesome-query-builder/antd';
-import { Utils as QbUtils, Query, Builder, AntdConfig } from '@react-awesome-query-builder/antd';
-const InitialConfig = AntdConfig;
-// <<<
-
-// You need to provide your own config. See below 'Config format'
-const config: Config = {
-  ...InitialConfig,
-  fields: {
-    ...InitialConfig.fields,
-    qty: {
-      type: 'number',
-      label: 'Quantity',
-      fieldSettings: {
-        min: 0,
-        max: 100,
-      }
-    },
-    // complex
-    user: {
-      type: '!struct', // special keyword for complex fields
-      label: 'User',
-      subfields: {
-        // subfields of complex field
-        name: {
-          type: 'text',
-          label: 'Name',
-          label2: 'User name', //optional, see below
-          fieldSettings: {
-            validateValue: (val: string, _fieldSettings: any) => (val.length <= 20),
-          }
-        },
-      },
-    },
-  },
-}
-
-// You can load query value from your backend storage (for saving see `Query.onChange()`)
-const queryValue: JsonGroup = { id: QbUtils.uuid(), type: "group" };
-
-const DemoQueryBuilder: React.FC = () => {
-  const [state, setState] = useState({
-    tree: QbUtils.loadTree(queryValue),
-    config: config
-  });
-
-  const onChange = useCallback((immutableTree: ImmutableTree, config: Config) => {
-    // Tip: for better performance you can apply `throttle` - see `packages/examples/src/demo`
-    setState(prevState => ({ ...prevState, tree: immutableTree, config: config }));
-
-    const jsonTree = QbUtils.getTree(immutableTree);
-    console.log(jsonTree);
-    // `jsonTree` can be saved to backend, and later loaded to `queryValue`
-  }, []);
-
-  const renderBuilder = useCallback((props: BuilderProps) => (
-    <div className="query-builder-container" style={{ padding: "10px" }}>
-      <div className="query-builder qb-lite">
-        <Builder {...props} />
-      </div>
-    </div>
-  ), []);
-
-  return (
-    <div>
-      <Query
-        {...config}
-        value={state.tree}
-        onChange={onChange}
-        renderBuilder={renderBuilder}
-      />
-      <div className="query-builder-result">
-        <div>
-          Query string:{" "}
-          <pre>
-            {JSON.stringify(QbUtils.queryString(state.tree, state.config))}
-          </pre>
-        </div>
-        <div>
-          MongoDb query:{" "}
-          <pre>
-            {JSON.stringify(QbUtils.mongodbFormat(state.tree, state.config))}
-          </pre>
-        </div>
-        <div>
-          SQL where:{" "}
-          <pre>
-            {JSON.stringify(QbUtils.sqlFormat(state.tree, state.config))}
-          </pre>
-        </div>
-        <div>
-          JsonLogic:{" "}
-          <pre>
-            {JSON.stringify(QbUtils.jsonLogicFormat(state.tree, state.config))}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-};
-export default DemoQueryBuilder;