asder

package.json

@@ -64,6 +64,7 @@
     "rc-util": "^5.24.4",
     "react": "^18.0.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-color": "^2.19.3",
     "react-custom-scrollbars": "^4.2.1",
     "react-dev-inspector": "^1.8.1",
     "react-dom": "^18.0.0",

src/components/DragModal/Tagadder/colorpicker.jsx

+'use strict';
+
+import { useState } from 'react';
+import { TwitterPicker } from 'react-color';
+import reactCSS from 'reactcss';
+
+let ColorPicker = ({ color, handleChange }) => {
+  const [displayColorPicker, setdisplayColorPicker] = useState();
+  let handleClick = () => {
+      setdisplayColorPicker(!displayColorPicker);
+    },
+    handleClose = () => {
+      setdisplayColorPicker(false);
+    };
+  const styles = reactCSS({
+    default: {
+      color: {
+        width: '14px',
+        height: '14px',
+        borderRadius: '14px',
+        background: color,
+      },
+      swatch: {
+        cursor: 'pointer',
+      },
+      popover: {
+        position: 'absolute',
+        zIndex: '2',
+        left: -7,
+        top: 38,
+      },
+      cover: {
+        position: 'fixed',
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        left: '0px',
+      },
+    },
+  });
+
+  return (
+    <div style={{marginRight:4}}>
+      <div style={styles.swatch} onClick={handleClick}>
+        <div style={styles.color} />
+      </div>
+      {displayColorPicker ? (
+        <div style={styles.popover}>
+          <div style={styles.cover} onClick={handleClose} />
+          <TwitterPicker color={color} onChangeComplete={handleChange} />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default ColorPicker;

src/components/DragModal/Tagadder/index.jsx

+import { useEffect, useState } from 'react';
+
+import { PlusOutlined } from '@ant-design/icons';
+import { Input, Space, Tag, theme, Tooltip } from 'antd';
+import { useRef } from 'react';
+import ColorPicker from './colorpicker';
+
+const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }) => {
+  const { token } = theme.useToken();
+  const [inputVisible, setInputVisible] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [editInputIndex, setEditInputIndex] = useState(-1);
+  const [editInputValue, setEditInputValue] = useState('');
+  const inputRef = useRef(null);
+  const editInputRef = useRef(null);
+  useEffect(() => {
+    if (inputVisible) {
+      inputRef.current?.focus();
+    }
+  }, [inputVisible]);
+  useEffect(() => {
+    editInputRef.current?.focus();
+  }, [inputValue]);
+  const handleClose = (removedTag) => {
+    const newTags = value.filter((tag) => tag.text !== removedTag);
+    onChange(newTags);
+  };
+  const showInput = () => {
+    setInputVisible(true);
+  };
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const handleInputConfirm = () => {
+    if (inputValue && value.indexOf(inputValue) === -1) {
+      onChange([
+        ...value,
+        {
+          color: '#13c2c2',
+          text: inputValue,
+        },
+      ]);
+    }
+    setInputVisible(false);
+    setInputValue('');
+  };
+  const handleEditInputChange = (e) => {
+    setEditInputValue(e.target.value);
+  };
+
+  const handleEditInputConfirm = () => {
+    const newTags = [...value];
+    newTags[editInputIndex] = editInputValue;
+    onChange(newTags);
+    setEditInputIndex(-1);
+    setInputValue('');
+  };
+
+  const tagInputStyle = {
+    width: 78,
+    verticalAlign: 'top',
+  };
+  const tagPlusStyle = {
+    background: token.colorBgContainer,
+    borderStyle: 'dashed',
+  };
+  return (
+    <Space size={[0, 8]} wrap style={{ paddingTop: 4 }}>
+      <Space size={[0, 8]} wrap>
+        {value.map((tag, index) => {
+          if (editInputIndex === index) {
+            return (
+              <Input
+                ref={editInputRef}
+                key={tag}
+                size="small"
+                style={tagInputStyle}
+                value={editInputValue}
+                onChange={handleEditInputChange}
+                onBlur={handleEditInputConfirm}
+                onPressEnter={handleEditInputConfirm}
+              />
+            );
+          }
+          const isLongTag = tag.text.length > 20;
+          const tagElem = (
+            <Tag
+              key={tag.text}
+              closable
+              style={{
+                userSelect: 'none',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+              onClose={() => handleClose(tag.text)}
+            >
+              <ColorPicker
+                color={tag.color}
+                handleChange={(val) => {
+                  let newval = JSON.parse(JSON.stringify(value));
+                  newval = newval?.map((it, i) => {
+                    if (index === i) {
+                      it.color = val.hex;
+                    }
+                    return it;
+                  });
+                  onChange(newval);
+                }}
+              ></ColorPicker>
+              <span
+                onDoubleClick={(e) => {
+                  setEditInputIndex(index);
+                  setEditInputValue(tag.text);
+                  e.preventDefault();
+                }}
+              >
+                {isLongTag ? `${tag.text.slice(0, 20)}...` : tag.text}
+              </span>
+            </Tag>
+          );
+          return isLongTag ? (
+            <Tooltip title={tag.text} key={tag.text}>
+              {tagElem}
+            </Tooltip>
+          ) : (
+            tagElem
+          );
+        })}
+      </Space>
+      {inputVisible ? (
+        <Input
+          ref={inputRef}
+          type="text"
+          size="small"
+          style={tagInputStyle}
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={handleInputConfirm}
+          onPressEnter={handleInputConfirm}
+        />
+      ) : (
+        value.length < max && (
+          <Tag style={tagPlusStyle} onClick={showInput}>
+            <PlusOutlined /> New Tag
+          </Tag>
+        )
+      )}
+    </Space>
+  );
+};
+export default Tagadder;

src/components/DragModal/formdoms.jsx

@@ -14,6 +14,7 @@ import { Button, message } from 'antd';
 import dayjs from 'dayjs';
 import { useRef } from 'react';
 import EditorItem from './EditorItem';
+import Tagadder from './Tagadder';
 
 function generateRandomString(length, character) {
   let randomString = '';
@@ -366,6 +367,7 @@ const AddMission = ({ refresh, step_id, sort, project_id, defaultValue, userList
           span: 12,
         }}
       />
+
       <ProFormSelect
         name="userid"
         label="选择负责人"
@@ -379,7 +381,7 @@ const AddMission = ({ refresh, step_id, sort, project_id, defaultValue, userList
           style: { width: '100%' },
         }}
         colProps={{
-          span: 24,
+          span: 6,
         }}
         options={userList?.map((it) => {
           return {
@@ -388,6 +390,17 @@ const AddMission = ({ refresh, step_id, sort, project_id, defaultValue, userList
           };
         })}
       ></ProFormSelect>
+      <ProForm.Item
+        name={'tags'}
+        label={'添加标签'}
+        colProps={{
+          span: 18,
+        }}
+        style={{paddingLeft:6}}
+      >
+        <Tagadder max={5}/>
+      </ProForm.Item>
+
       <ProForm.Item
         // convertValue={(value) => {
         //   return BraftEditor.createEditorState(value);

src/pages/User/Login/index.jsx

@@ -78,7 +78,7 @@ const Login = () => {
             maxWidth: '75vw',
           }}
           logo={<img alt="logo" src="./logo.png" style={{ borderRadius: '50%' }} />}
-          title={<span className="bgtext">Task Progress</span>}
+          title={<span className="bgtext">Task Tracking</span>}
           subTitle={'用于小团队简单的小组任务开发实时跟踪'}
           initialValues={{
             autoLogin: true,