样式修改，节点ID使用uuid生成

hookehuyr
Commit c23dd1a7f741ee5661ca7a4b81abfe1e00f8dfdc c23dd1a7 1 parent cb88b4ba
Showing 4 changed files with 32 additions and 13 deletions
doc/App.vue
doc/selectUserView.vue
package.json
yarn.lock
--- a/doc/App.vue
View file @c23dd1a
+++ b/doc/App.vue
View file @c23dd1a
@@ -329,6 +329,7 @@ import { Calendar, Search } from '@element-plus/icons-vue'
 import SelectUserView from './selectUserView.vue'
 import { Function } from 'lodash'
 import { extend } from '@vue/shared'
+import { v4 as uuidv4 } from 'uuid';
 import type { FormInstance, FormRules } from 'element-plus'
 const G6 = (window as any).G6.default as any
@@ -1019,8 +1020,7 @@ export default {
           }
         }
-        // TODO: 测试更新ID, 需要在添加前更新ID，不然会导致添加连接线时ID不一致。
+        model.id = uuidv4();
-        model.id = String(new Date().getTime());
         editor.updateModel(model);
         state.data.nodes = editor.editorState.graph.save().nodes
       }
@@ -1063,9 +1063,7 @@ export default {
     const copyData = () => { // 复制节点回调
       if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') {
         editor.clearStates(state.detailModel.id); // 清除选中节点的状态
-        const timestamp = Date.now();
+        state.detailModel.id = uuidv4(); // ID需要重新生成
-        const random = timestamp + '';
-        state.detailModel.id = random; // ID需要重新生成
         state.detailModel.y = state.detailModel.y + 50
         editor.addNode(state.detailModel);
         editor.closeModel();
@@ -1367,4 +1365,10 @@ body {
   background-color: #009688!important;
   border-color: #009688!important;
 }
+.el-button:focus, .el-button:hover {
+  color: #009688!important;
+  border-color: #009688!important;
+  background-color: white!important;
+  outline: 0;
+}
 </style>
--- a/doc/selectUserView.vue
View file @c23dd1a
+++ b/doc/selectUserView.vue
View file @c23dd1a
 <!--
  * @Date: 2023-11-01 10:18:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-22 16:51:48
+ * @LastEditTime: 2023-11-22 17:29:49
  * @FilePath: /vue-flow-editor/doc/selectUserView.vue
  * @Description: 成员列表选择控件
 -->
@@ -217,7 +217,7 @@
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="closeUserForm">取消</el-button>
-        <el-button type="primary" @click="confirmUserForm">确定</el-button>
+        <el-button type="primary" color="#009688" @click="confirmUserForm">确定</el-button>
       </span>
     </template>
   </el-dialog>
@@ -480,7 +480,7 @@ const checkNode = (obj, status) => {
   if (status.checkedKeys.indexOf(obj.id) > -1) { // 选中
     // 新增勾选的用户
     let check_nodes = status.checkedNodes.map(ele => {
-      return { id: ele.id, name: ele.name };
+      return { id: ele.id, name: ele.name, type: ele.type };
     });
     userTags.value = userTags.value.concat(check_nodes);
     // 如果ID相同，需要数据去重
@@ -525,7 +525,7 @@ const checkNode = (obj, status) => {
  */
 const handleCheckedUserListChange = (user, checked) => {
   if (checked) { // 新增勾选的用户
-    userTags.value = userTags.value.concat({ id: user.id, name: user.name });
+    userTags.value = userTags.value.concat({ id: user.id, name: user.name, type: user.type });
     // 如果ID相同，需要数据去重
     userTags.value = _.uniqBy(userTags.value, 'id');
   } else {
@@ -784,7 +784,7 @@ const onSearchInput = (val) => {
     bottom: 0;
     left: 0;
     height: 2px;
-    background-color: #409eff;
+    background-color: #009688;
     z-index: 1;
     transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
       transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -810,11 +810,11 @@ const onSearchInput = (val) => {
       color: #303133;
       position: relative;
       &:hover {
-        color: #409eff;
+        color: #009688;
         cursor: pointer;
       }
       &.is-active {
-        color: #409eff;
+        color: #009688;
       }
       &.is-top:nth-child(2) {
         padding-left: 0;
@@ -864,7 +864,7 @@ const onSearchInput = (val) => {
     .confirm-btn {
       width: 50px;
       color: #fff;
-      background-color: #409eff;
+      background-color: #009688;
       &:hover {
         cursor: pointer;
       }
@@ -885,4 +885,13 @@ const onSearchInput = (val) => {
 .el-tag .el-tag__close {
   color: white !important;
 }
+.el-button:focus, .el-button:hover {
+  color: #009688!important;
+  border-color: #009688!important;
+  background-color: white!important;
+  outline: 0;
+}
+.el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #009688!important;
+}
 </style>
--- a/package.json
View file @c23dd1a
+++ b/package.json
View file @c23dd1a
@@ -31,6 +31,7 @@
     "lodash": "^4.17.21",
     "sass": "^1.69.4",
     "sass-loader": "10.1.1",
+    "uuid": "^9.0.1",
     "vue": "^3.0.0",
     "vue-loader-v16": "^16.0.0-beta.5.4",
     "vue-router": "^4.0.0-0",
--- a/yarn.lock
View file @c23dd1a
+++ b/yarn.lock
View file @c23dd1a
@@ -8675,6 +8675,11 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.nlark.com/uuid/download/uuid-3.4.0.tgz"
   integrity sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.nlark.com/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz"