feat: support group now (close #17, close #72, close #85, close #104, close #136)

Co-authored-by: quzard <1191890118@qq.com>

web/src/components/ChannelsTable.js

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { API, showError, showInfo, showSuccess, timestamp2string } from '../helpers';
 
 import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
+import { renderGroup } from '../helpers/render';
 
 function renderTimestamp(timestamp) {
   return (
@@ -264,6 +265,14 @@ const ChannelsTable = () => {
             >
               名称
             </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortChannel('group');
+              }}
+            >
+              分组
+            </Table.HeaderCell>
             <Table.HeaderCell
               style={{ cursor: 'pointer' }}
               onClick={() => {
@@ -312,6 +321,7 @@ const ChannelsTable = () => {
                 <Table.Row key={channel.id}>
                   <Table.Cell>{channel.id}</Table.Cell>
                   <Table.Cell>{channel.name ? channel.name : '无'}</Table.Cell>
+                  <Table.Cell>{renderGroup(channel.group)}</Table.Cell>
                   <Table.Cell>{renderType(channel.type)}</Table.Cell>
                   <Table.Cell>{renderStatus(channel.status)}</Table.Cell>
                   <Table.Cell>
@@ -398,7 +408,7 @@ const ChannelsTable = () => {
 
         <Table.Footer>
           <Table.Row>
-            <Table.HeaderCell colSpan='7'>
+            <Table.HeaderCell colSpan='8'>
               <Button size='small' as={Link} to='/channel/add' loading={loading}>
                 添加新的渠道
               </Button>

web/src/components/UsersTable.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { API, showError, showSuccess } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
-import { renderText } from '../helpers/render';
+import { renderGroup, renderText } from '../helpers/render';
 
 function renderRole(role) {
   switch (role) {
@@ -175,6 +175,14 @@ const UsersTable = () => {
             >
               用户名
             </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortUser('group');
+              }}
+            >
+              分组
+            </Table.HeaderCell>
             <Table.HeaderCell
               style={{ cursor: 'pointer' }}
               onClick={() => {
@@ -231,6 +239,7 @@ const UsersTable = () => {
                       hoverable
                     />
                   </Table.Cell>
+                  <Table.Cell>{renderGroup(user.group)}</Table.Cell>
                   <Table.Cell>{user.email ? renderText(user.email, 30) : '无'}</Table.Cell>
                   <Table.Cell>{user.quota}</Table.Cell>
                   <Table.Cell>{renderRole(user.role)}</Table.Cell>
@@ -306,7 +315,7 @@ const UsersTable = () => {
 
         <Table.Footer>
           <Table.Row>
-            <Table.HeaderCell colSpan='7'>
+            <Table.HeaderCell colSpan='8'>
               <Button size='small' as={Link} to='/user/add' loading={loading}>
                 添加新的用户
               </Button>

web/src/helpers/render.js

@@ -1,6 +1,15 @@
+import { Label } from 'semantic-ui-react';
+
 export function renderText(text, limit) {
   if (text.length > limit) {
     return text.slice(0, limit - 3) + '...';
   }
   return text;
+}
+
+export function renderGroup(group) {
+  if (group === "") {
+    return <Label>default</Label>
+  }
+  return <Label>{group}</Label>
 }

web/src/pages/Channel/EditChannel.js

@@ -14,10 +14,12 @@ const EditChannel = () => {
     type: 1,
     key: '',
     base_url: '',
-    other: ''
+    other: '',
+    models: [],
   };
   const [batch, setBatch] = useState(false);
   const [inputs, setInputs] = useState(originInputs);
+  const [modelOptions, setModelOptions] = useState([]);
   const handleInputChange = (e, { name, value }) => {
     console.log(name, value);
     setInputs((inputs) => ({ ...inputs, [name]: value }));
@@ -27,17 +29,36 @@ const EditChannel = () => {
     let res = await API.get(`/api/channel/${channelId}`);
     const { success, message, data } = res.data;
     if (success) {
-      data.password = '';
+      if (data.models === "") {
+        data.models = []
+      } else {
+        data.models = data.models.split(",")
+      }
       setInputs(data);
     } else {
       showError(message);
     }
     setLoading(false);
   };
+
+  const fetchModels = async () => {
+    try {
+      let res = await API.get(`/api/channel/models`);
+      setModelOptions(res.data.data.map((model) => ({
+        key: model.id,
+        text: model.id,
+        value: model.id,
+      })));
+    } catch (error) {
+      console.error('Error fetching models:', error);
+    }
+  };
+
   useEffect(() => {
     if (isEdit) {
       loadChannel().then();
     }
+    fetchModels().then();
   }, []);
 
   const submit = async () => {
@@ -50,6 +71,7 @@ const EditChannel = () => {
       localInputs.other = '2023-03-15-preview';
     }
     let res;
+    localInputs.models = localInputs.models.join(",")
     if (isEdit) {
       res = await API.put(`/api/channel/`, { ...localInputs, id: parseInt(channelId) });
     } else {
@@ -137,6 +159,19 @@ const EditChannel = () => {
               autoComplete='new-password'
             />
           </Form.Field>
+          <Form.Field>
+            <Form.Dropdown
+              label='支持的模型'
+              name='models'
+              fluid
+              multiple
+              selection
+              onChange={handleInputChange}
+              value={inputs.models}
+              autoComplete='new-password'
+              options={modelOptions}
+            />
+          </Form.Field>
           {
             batch ? <Form.Field>
               <Form.TextArea