feat: able to set group ratio now (close #62, close #142)

web/src/components/SystemSetting.js

@@ -30,6 +30,7 @@ const SystemSetting = () => {
     QuotaRemindThreshold: 0,
     PreConsumedQuota: 0,
     ModelRatio: '',
+    GroupRatio: '',
     TopUpLink: '',
     AutomaticDisableChannelEnabled: '',
     ChannelDisableThreshold: 0,
@@ -101,6 +102,7 @@ const SystemSetting = () => {
       name === 'QuotaRemindThreshold' ||
       name === 'PreConsumedQuota' ||
       name === 'ModelRatio' ||
+      name === 'GroupRatio' ||
       name === 'TopUpLink'
     ) {
       setInputs((inputs) => ({ ...inputs, [name]: value }));
@@ -131,6 +133,13 @@ const SystemSetting = () => {
       }
       await updateOption('ModelRatio', inputs.ModelRatio);
     }
+    if (originInputs['GroupRatio'] !== inputs.GroupRatio) {
+      if (!verifyJSON(inputs.GroupRatio)) {
+        showError('分组倍率不是合法的 JSON 字符串');
+        return;
+      }
+      await updateOption('GroupRatio', inputs.GroupRatio);
+    }
     if (originInputs['TopUpLink'] !== inputs.TopUpLink) {
       await updateOption('TopUpLink', inputs.TopUpLink);
     }
@@ -329,6 +338,17 @@ const SystemSetting = () => {
               placeholder='为一个 JSON 文本，键为模型名称，值为倍率'
             />
           </Form.Group>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='分组倍率'
+              name='GroupRatio'
+              onChange={handleInputChange}
+              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
+              autoComplete='new-password'
+              value={inputs.GroupRatio}
+              placeholder='为一个 JSON 文本，键为分组名称，值为倍率'
+            />
+          </Form.Group>
           <Form.Button onClick={submitOperationConfig}>保存运营设置</Form.Button>
           <Divider />
           <Header as='h3'>

web/src/helpers/render.js

@@ -10,6 +10,10 @@ export function renderText(text, limit) {
 export function renderGroup(group) {
   if (group === "") {
     return <Label>default</Label>
+  } else if (group === "vip" || group === "pro") {
+    return <Label color='yellow'>{group}</Label>
+  } else if (group === "svip" || group === "premium") {
+    return <Label color='red'>{group}</Label>
   }
   return <Label>{group}</Label>
 }

web/src/pages/Channel/EditChannel.js

@@ -21,6 +21,7 @@ const EditChannel = () => {
   const [batch, setBatch] = useState(false);
   const [inputs, setInputs] = useState(originInputs);
   const [modelOptions, setModelOptions] = useState([]);
+  const [groupOptions, setGroupOptions] = useState([]);
   const [basicModels, setBasicModels] = useState([]);
   const [fullModels, setFullModels] = useState([]);
   const handleInputChange = (e, { name, value }) => {
@@ -58,11 +59,25 @@ const EditChannel = () => {
     }
   };
 
+  const fetchGroups = async () => {
+    try {
+      let res = await API.get(`/api/group`);
+      setGroupOptions(res.data.data.map((group) => ({
+        key: group,
+        text: group,
+        value: group,
+      })));
+    } catch (error) {
+      showError(error.message);
+    }
+  };
+
   useEffect(() => {
     if (isEdit) {
       loadChannel().then();
     }
     fetchModels().then();
+    fetchGroups().then();
   }, []);
 
   const submit = async () => {
@@ -167,13 +182,19 @@ const EditChannel = () => {
             />
           </Form.Field>
           <Form.Field>
-            <Form.Input
+            <Form.Dropdown
               label='分组'
+              placeholder={'请选择分组'}
               name='group'
-              placeholder={'请输入分组'}
+              fluid
+              search
+              selection
+              allowAdditions
+              additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
               onChange={handleInputChange}
               value={inputs.group}
               autoComplete='new-password'
+              options={groupOptions}
             />
           </Form.Field>
           <Form.Field>

web/src/pages/User/EditUser.js

@@ -17,11 +17,24 @@ const EditUser = () => {
     quota: 0,
     group: 'default'
   });
+  const [groupOptions, setGroupOptions] = useState([]);
   const { username, display_name, password, github_id, wechat_id, email, quota, group } =
     inputs;
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
+  const fetchGroups = async () => {
+    try {
+      let res = await API.get(`/api/group`);
+      setGroupOptions(res.data.data.map((group) => ({
+        key: group,
+        text: group,
+        value: group,
+      })));
+    } catch (error) {
+      showError(error.message);
+    }
+  };
 
   const loadUser = async () => {
     let res = undefined;
@@ -41,6 +54,9 @@ const EditUser = () => {
   };
   useEffect(() => {
     loadUser().then();
+    if (userId) {
+      fetchGroups().then();
+    }
   }, []);
 
   const submit = async () => {
@@ -101,13 +117,19 @@ const EditUser = () => {
           {
             userId && <>
               <Form.Field>
-                <Form.Input
+                <Form.Dropdown
                   label='分组'
+                  placeholder={'请选择分组'}
                   name='group'
-                  placeholder={'请输入用户分组'}
+                  fluid
+                  search
+                  selection
+                  allowAdditions
+                  additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
                   onChange={handleInputChange}
-                  value={group}
+                  value={inputs.group}
                   autoComplete='new-password'
+                  options={groupOptions}
                 />
               </Form.Field>
               <Form.Field>