fix: some error

src/components/profile/group-item.tsx

@@ -137,7 +137,7 @@ export const GroupItem = (props: Props) => {
   );
 };
 
-const StyledPrimary = styled("span")`
+const StyledPrimary = styled("div")`
   font-size: 15px;
   font-weight: 700;
   line-height: 1.5;

src/components/profile/groups-editor-viewer.tsx

@@ -78,10 +78,18 @@ export const GroupsEditorViewer = (props: Props) => {
   const [appendSeq, setAppendSeq] = useState<IProxyGroupConfig[]>([]);
   const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
 
+  const filteredPrependSeq = useMemo(
+    () => prependSeq.filter((group) => match(group.name)),
+    [prependSeq, match]
+  );
   const filteredGroupList = useMemo(
     () => groupList.filter((group) => match(group.name)),
     [groupList, match]
   );
+  const filteredAppendSeq = useMemo(
+    () => appendSeq.filter((group) => match(group.name)),
+    [appendSeq, match]
+  );
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -376,6 +384,7 @@ export const GroupsEditorViewer = (props: Props) => {
                         }}
                         multiple
                         options={proxyPolicyList}
+                        disableCloseOnSelect
                         onChange={(_, value) => value && field.onChange(value)}
                         renderInput={(params) => <TextField {...params} />}
                       />
@@ -393,6 +402,7 @@ export const GroupsEditorViewer = (props: Props) => {
                         sx={{ width: "calc(100% - 150px)" }}
                         multiple
                         options={proxyProviderList}
+                        disableCloseOnSelect
                         onChange={(_, value) => value && field.onChange(value)}
                         renderInput={(params) => <TextField {...params} />}
                       />
@@ -541,23 +551,33 @@ export const GroupsEditorViewer = (props: Props) => {
                       <Autocomplete
                         multiple
                         options={[
-                          "ss",
-                          "ssr",
-                          "direct",
-                          "dns",
-                          "snell",
-                          "http",
-                          "trojan",
-                          "hysteria",
-                          "hysteria2",
-                          "tuic",
-                          "wireguard",
-                          "ssh",
-                          "socks5",
-                          "vmess",
-                          "vless",
+                          "Direct",
+                          "Reject",
+                          "RejectDrop",
+                          "Compatible",
+                          "Pass",
+                          "Dns",
+                          "Shadowsocks",
+                          "ShadowsocksR",
+                          "Snell",
+                          "Socks5",
+                          "Http",
+                          "Vmess",
+                          "Vless",
+                          "Trojan",
+                          "Hysteria",
+                          "Hysteria2",
+                          "WireGuard",
+                          "Tuic",
+                          "Relay",
+                          "Selector",
+                          "Fallback",
+                          "URLTest",
+                          "LoadBalance",
+                          "Ssh",
                         ]}
                         size="small"
+                        disableCloseOnSelect
                         sx={{ width: "calc(100% - 150px)" }}
                         value={field.value?.split("|")}
                         onChange={(_, value) => {
@@ -576,7 +596,6 @@ export const GroupsEditorViewer = (props: Props) => {
                       <ListItemText primary={t("Expected Status")} />
                       <TextField
                         autoComplete="off"
-                        type="number"
                         size="small"
                         sx={{ width: "calc(100% - 150px)" }}
                         onChange={(e) => {
@@ -705,13 +724,13 @@ export const GroupsEditorViewer = (props: Props) => {
                 style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
                 totalCount={
                   filteredGroupList.length +
-                  (prependSeq.length > 0 ? 1 : 0) +
-                  (appendSeq.length > 0 ? 1 : 0)
+                  (filteredPrependSeq.length > 0 ? 1 : 0) +
+                  (filteredAppendSeq.length > 0 ? 1 : 0)
                 }
                 increaseViewportBy={256}
                 itemContent={(index) => {
-                  let shift = prependSeq.length > 0 ? 1 : 0;
-                  if (prependSeq.length > 0 && index === 0) {
+                  let shift = filteredPrependSeq.length > 0 ? 1 : 0;
+                  if (filteredPrependSeq.length > 0 && index === 0) {
                     return (
                       <DndContext
                         sensors={sensors}
@@ -719,11 +738,11 @@ export const GroupsEditorViewer = (props: Props) => {
                         onDragEnd={onPrependDragEnd}
                       >
                         <SortableContext
-                          items={prependSeq.map((x) => {
+                          items={filteredPrependSeq.map((x) => {
                             return x.name;
                           })}
                         >
-                          {prependSeq.map((item, index) => {
+                          {filteredPrependSeq.map((item, index) => {
                             return (
                               <GroupItem
                                 key={`${item.name}-${index}`}
@@ -779,11 +798,11 @@ export const GroupsEditorViewer = (props: Props) => {
                         onDragEnd={onAppendDragEnd}
                       >
                         <SortableContext
-                          items={appendSeq.map((x) => {
+                          items={filteredAppendSeq.map((x) => {
                             return x.name;
                           })}
                         >
-                          {appendSeq.map((item, index) => {
+                          {filteredAppendSeq.map((item, index) => {
                             return (
                               <GroupItem
                                 key={`${item.name}-${index}`}

src/components/profile/proxies-editor-viewer.tsx

@@ -61,10 +61,18 @@ export const ProxiesEditorViewer = (props: Props) => {
   const [appendSeq, setAppendSeq] = useState<IProxyConfig[]>([]);
   const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
 
+  const filteredPrependSeq = useMemo(
+    () => prependSeq.filter((proxy) => match(proxy.name)),
+    [prependSeq, match]
+  );
   const filteredProxyList = useMemo(
     () => proxyList.filter((proxy) => match(proxy.name)),
     [proxyList, match]
   );
+  const filteredAppendSeq = useMemo(
+    () => appendSeq.filter((proxy) => match(proxy.name)),
+    [appendSeq, match]
+  );
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -228,7 +236,6 @@ export const ProxiesEditorViewer = (props: Props) => {
                     placeholder={t("Use newlines for multiple uri")}
                     fullWidth
                     rows={9}
-                    sx={{ height: "100px" }}
                     multiline
                     size="small"
                     onChange={(e) => setProxyUri(e.target.value)}
@@ -297,13 +304,13 @@ export const ProxiesEditorViewer = (props: Props) => {
                 style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
                 totalCount={
                   filteredProxyList.length +
-                  (prependSeq.length > 0 ? 1 : 0) +
-                  (appendSeq.length > 0 ? 1 : 0)
+                  (filteredPrependSeq.length > 0 ? 1 : 0) +
+                  (filteredAppendSeq.length > 0 ? 1 : 0)
                 }
                 increaseViewportBy={256}
                 itemContent={(index) => {
-                  let shift = prependSeq.length > 0 ? 1 : 0;
-                  if (prependSeq.length > 0 && index === 0) {
+                  let shift = filteredPrependSeq.length > 0 ? 1 : 0;
+                  if (filteredPrependSeq.length > 0 && index === 0) {
                     return (
                       <DndContext
                         sensors={sensors}
@@ -311,11 +318,11 @@ export const ProxiesEditorViewer = (props: Props) => {
                         onDragEnd={onPrependDragEnd}
                       >
                         <SortableContext
-                          items={prependSeq.map((x) => {
+                          items={filteredPrependSeq.map((x) => {
                             return x.name;
                           })}
                         >
-                          {prependSeq.map((item, index) => {
+                          {filteredPrependSeq.map((item, index) => {
                             return (
                               <ProxyItem
                                 key={`${item.name}-${index}`}
@@ -371,11 +378,11 @@ export const ProxiesEditorViewer = (props: Props) => {
                         onDragEnd={onAppendDragEnd}
                       >
                         <SortableContext
-                          items={appendSeq.map((x) => {
+                          items={filteredAppendSeq.map((x) => {
                             return x.name;
                           })}
                         >
-                          {appendSeq.map((item, index) => {
+                          {filteredAppendSeq.map((item, index) => {
                             return (
                               <ProxyItem
                                 key={`${item.name}-${index}`}

src/components/profile/proxy-item.tsx

@@ -90,7 +90,7 @@ export const ProxyItem = (props: Props) => {
   );
 };
 
-const StyledPrimary = styled("span")`
+const StyledPrimary = styled("div")`
   font-size: 15px;
   font-weight: 700;
   line-height: 1.5;

src/components/profile/rule-item.tsx

@@ -92,7 +92,7 @@ export const RuleItem = (props: Props) => {
   );
 };
 
-const StyledPrimary = styled("span")`
+const StyledPrimary = styled("div")`
   font-size: 15px;
   font-weight: 700;
   line-height: 1.5;

src/components/profile/rules-editor-viewer.tsx

@@ -254,10 +254,18 @@ export const RulesEditorViewer = (props: Props) => {
   const [appendSeq, setAppendSeq] = useState<string[]>([]);
   const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
 
+  const filteredPrependSeq = useMemo(
+    () => prependSeq.filter((rule) => match(rule)),
+    [prependSeq, match]
+  );
   const filteredRuleList = useMemo(
     () => ruleList.filter((rule) => match(rule)),
     [ruleList, match]
   );
+  const filteredAppendSeq = useMemo(
+    () => appendSeq.filter((rule) => match(rule)),
+    [appendSeq, match]
+  );
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -573,13 +581,13 @@ export const RulesEditorViewer = (props: Props) => {
                 style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
                 totalCount={
                   filteredRuleList.length +
-                  (prependSeq.length > 0 ? 1 : 0) +
-                  (appendSeq.length > 0 ? 1 : 0)
+                  (filteredPrependSeq.length > 0 ? 1 : 0) +
+                  (filteredAppendSeq.length > 0 ? 1 : 0)
                 }
                 increaseViewportBy={256}
                 itemContent={(index) => {
-                  let shift = prependSeq.length > 0 ? 1 : 0;
-                  if (prependSeq.length > 0 && index === 0) {
+                  let shift = filteredPrependSeq.length > 0 ? 1 : 0;
+                  if (filteredPrependSeq.length > 0 && index === 0) {
                     return (
                       <DndContext
                         sensors={sensors}
@@ -587,11 +595,11 @@ export const RulesEditorViewer = (props: Props) => {
                         onDragEnd={onPrependDragEnd}
                       >
                         <SortableContext
-                          items={prependSeq.map((x) => {
+                          items={filteredPrependSeq.map((x) => {
                             return x;
                           })}
                         >
-                          {prependSeq.map((item, index) => {
+                          {filteredPrependSeq.map((item, index) => {
                             return (
                               <RuleItem
                                 key={`${item}-${index}`}
@@ -643,11 +651,11 @@ export const RulesEditorViewer = (props: Props) => {
                         onDragEnd={onAppendDragEnd}
                       >
                         <SortableContext
-                          items={appendSeq.map((x) => {
+                          items={filteredAppendSeq.map((x) => {
                             return x;
                           })}
                         >
-                          {appendSeq.map((item, index) => {
+                          {filteredAppendSeq.map((item, index) => {
                             return (
                               <RuleItem
                                 key={`${item}-${index}`}

src/services/types.d.ts

@@ -223,7 +223,7 @@ interface IProxyGroupConfig {
   filter?: string;
   "exclude-filter"?: string;
   "exclude-type"?: string;
-  "expected-status"?: number;
+  "expected-status"?: string;
   hidden?: boolean;
   icon?: string;
 }