From 7d668e0c9ca93b0bf3ed9424cf94932c78cd3e01 Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Fri, 14 Mar 2025 15:42:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9D=83=E9=99=90=E4=BA=BA?=
 =?UTF-8?q?=E5=91=98=E9=80=89=E6=8B=A9=EF=BC=8C=E4=BF=AE=E6=94=B9=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=9B=B8=E5=85=B3=E5=9B=BE=E6=A0=87=E5=92=8C=E9=97=B4?=
 =?UTF-8?q?=E8=B7=9D=E7=AD=89=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/theme.scss                  | 10 ++++
 src/assets/svgs/dark_delete_active.svg        |  8 +++
 src/assets/svgs/dark_editor_active.svg        | 14 +++++
 src/views/createapp/components/appConfig.vue  | 52 +++++++++++++------
 src/views/createapp/components/workFlow.vue   |  8 +--
 src/views/createapp/index.vue                 |  6 +--
 .../dialogue/components/InterPreview.vue      | 29 ++++++++---
 src/views/styles/createApp.scss               | 50 ++++++++++++++++--
 src/views/styles/workFlowArrange.scss         | 15 ++++++
 9 files changed, 154 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/svgs/dark_delete_active.svg
 create mode 100644 src/assets/svgs/dark_editor_active.svg

diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 71318e03..2d8208b3 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -85,3 +85,13 @@ body[theme='light'] {
   --question-bg: linear-gradient(270deg, rgb(227, 242, 255), rgb(195, 227, 255) 33.232%, rgb(197, 203, 249) 85.699%);
   --question-shadow: rgba(221, 225, 240, 0.5);
 }
+
+body {
+  // 这里替换下拉框的选中颜色，无论亮暗都是一致
+  .el-select-dropdown__item.is-hovering {
+    background-color: #7aa5ff !important;
+  }
+  .el-select-dropdown__item.is-selected {
+    background-color: #6395fd !important;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svgs/dark_delete_active.svg b/src/assets/svgs/dark_delete_active.svg
new file mode 100644
index 00000000..d050eb2b
--- /dev/null
+++ b/src/assets/svgs/dark_delete_active.svg
@@ -0,0 +1,8 @@
+<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<g opacity="0.000000"/>
+	<path id="形状结合" d="M9.39491 1.5C10.0848 1.5 10.6733 1.99951 10.7853 2.68018L10.9245 3.52637L13 3.52637C13.2761 3.52637 13.5 3.75 13.5 4.02637C13.5 4.30225 13.2761 4.52637 13 4.52637L12.0811 4.52637L11.6074 12.1777C11.5614 12.9209 10.9454 13.5 10.201 13.5L5.799 13.5C5.05459 13.5 4.43859 12.9209 4.39259 12.1777L3.91888 4.52637L3 4.52637C2.72385 4.52637 2.5 4.30225 2.5 4.02637C2.5 3.75 2.72385 3.52637 3 3.52637L5.07553 3.52637L5.21469 2.68018C5.32668 1.99951 5.91515 1.5 6.60509 1.5L9.39491 1.5ZM9.79857 2.84277L9.91103 3.52637L6.08897 3.52637L6.20143 2.84277C6.23394 2.64502 6.40479 2.5 6.60509 2.5L9.39491 2.5C9.59521 2.5 9.76606 2.64502 9.79857 2.84277ZM11.079 4.52637L4.92002 4.52637L5.39069 12.1162C5.40237 12.3047 5.54076 12.457 5.71995 12.4922L5.799 12.5L10.201 12.5C10.4171 12.5 10.596 12.332 10.6093 12.1162L11.079 4.52637ZM9.88889 10.6841C9.88889 10.4082 9.66503 10.1841 9.38889 10.1841L6.61111 10.1841C6.33497 10.1841 6.11111 10.4082 6.11111 10.6841C6.11111 10.9604 6.33497 11.1841 6.61111 11.1841L9.38889 11.1841C9.66503 11.1841 9.88889 10.9604 9.88889 10.6841Z" clip-rule="evenodd" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="evenodd"/>
+</svg>
diff --git a/src/assets/svgs/dark_editor_active.svg b/src/assets/svgs/dark_editor_active.svg
new file mode 100644
index 00000000..e0b50e31
--- /dev/null
+++ b/src/assets/svgs/dark_editor_active.svg
@@ -0,0 +1,14 @@
+<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<rect id="1-icon/01公共/editor" width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
+	<g opacity="0.000000">
+		<rect id="矩形" width="16.000000" height="16.000000" fill="#D3DCE9" fill-opacity="1.000000"/>
+		<rect id="矩形" x="0.500000" y="0.500000" width="15.000000" height="15.000000" stroke="#979797" stroke-opacity="0" stroke-width="1.000000"/>
+	</g>
+	<path id="路径" d="M9.63 2.79L3.91 2.79C3.4 2.79 3 3.2 3 3.71L3 12.28C3 12.79 3.4 13.19 3.91 13.19L11.73 13.19C12.24 13.19 12.64 12.79 12.64 12.28L12.64 6.96" stroke="#FFFFFF" stroke-opacity="1.000000" stroke-width="1.003509" stroke-linejoin="round"/>
+	<path id="路径" d="M5.62 10.39L10 10.39" stroke="#FFFFFF" stroke-opacity="1.000000" stroke-width="1.003509"/>
+	<path id="路径" d="M13 3.25L8.05 8.01" stroke="#FFFFFF" stroke-opacity="1.000000" stroke-width="1.003509" stroke-linejoin="round"/>
+</svg>
diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue
index fbec5911..aaaafb25 100644
--- a/src/views/createapp/components/appConfig.vue
+++ b/src/views/createapp/components/appConfig.vue
@@ -403,22 +403,42 @@ defineExpose({
             </el-radio-group>
           </div>
           <div class="partPermissionPerson" v-if="createAppForm.permission.visibility === 'protected'">
-            <el-input
-              ref="inputRef"
-              v-model="searchName"
-              class="o-style-search w320"
-              placeholder="搜索用户"
-              @input="searchPerson"
-              clearable
-              :prefix-icon="IconSearch"
-            ></el-input>
-            <div class="personList">
-              <el-checkbox-group v-model="createAppForm.permission.authorizedUsers">
-                <el-checkbox v-for="(item, index) in curPersonList" :key="index" :value="item?.userSub">
-                  <span class="circle"></span>
-                  {{ item?.userName }}
-                </el-checkbox>
-              </el-checkbox-group>
+            <div class="permissionChoice">
+              <div class="perimissionChoiceTitle">
+                <div>可选</div>
+                <div class="choiceNum">{{curPersonList.length}}</div>
+              </div>
+              <el-input
+                ref="inputRef"
+                v-model="searchName"
+                class="o-style-search permissionInputSearch"
+                placeholder="搜索用户"
+                @input="searchPerson"
+                clearable
+                :prefix-icon="IconSearch"
+              ></el-input>
+              <div class="personList">
+                <el-checkbox-group v-model="createAppForm.permission.authorizedUsers">
+                  <el-checkbox v-for="(item, index) in curPersonList" :key="index" :value="item?.userSub">
+                    <span class="circle"></span>
+                    {{ item?.userName }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </div>
+            <div class="permissionChoice">
+              <div class="perimissionChoiceTitle">
+                <div>已选</div>
+                <div class="choiceNum">{{ createAppForm.permission.authorizedUsers.length }}</div>
+              </div>
+              <div class="personList">
+                <el-checkbox-group v-model="createAppForm.permission.authorizedUsers">
+                  <el-checkbox v-for="(item, index) in createAppForm.permission.authorizedUsers" :key="index" :value="item">
+                    <span class="circle"></span>
+                    {{ item }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
             </div>
           </div>
         </el-form-item>
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 2572dafa..32d3e270 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -774,12 +774,8 @@ defineExpose({
               @click="choiceFlowId(item)"
             >
               <div class="flowName">{{ item.name }}</div>
-              <div class="dealIcon">
-                <img class="conversation-title__svg" src="@/assets/svgs/light_editor.svg" @click="editFlow(item)" />
-              </div>
-              <div class="dealIcon">
-                <img class="conversation-title__svg" src="@/assets/svgs/light_delete.svg" @click.stop="delFlow(item)" />
-              </div>
+              <div class="dealIcon editIcon" @click="editFlow(item)"></div>
+              <div class="dealIcon delIcon" @click.stop="delFlow(item)"></div>
             </el-option>
             <template #footer class="selectFooter">
               <div class="addWorkFlow" @click="addWorkFlow">
diff --git a/src/views/createapp/index.vue b/src/views/createapp/index.vue
index e9b14f8d..8df28377 100644
--- a/src/views/createapp/index.vue
+++ b/src/views/createapp/index.vue
@@ -223,13 +223,13 @@ const handleJumperAppCenter = () => {
 }
 
 ::-webkit-scrollbar {
-  width: 3px !important;
-  height: 3px !important;
+  width: 4px !important;
+  height: 4px !important;
 }
 
 /* 滚动条的滑块 */
 ::-webkit-scrollbar-thumb {
   background-color: #c3cedf;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 </style>
diff --git a/src/views/dialogue/components/InterPreview.vue b/src/views/dialogue/components/InterPreview.vue
index 24d556f7..8c491ae6 100644
--- a/src/views/dialogue/components/InterPreview.vue
+++ b/src/views/dialogue/components/InterPreview.vue
@@ -11,7 +11,7 @@
     <div class="preMain">
       <div class="preMainImg" v-if="interPreviewInfo?.name?.length">
         <img :src="interPreviewInfo.icon" class="preMainAvator" v-if="interPreviewInfo.icon.length" />
-        <div v-else class="defaultIcon"></div>
+        <div v-else class="defaultIconNoCamera"></div>
       </div>
       <div class="preMainContanter">
         <div
@@ -100,7 +100,7 @@ watch(
 .interPreviewBox {
     display: flex;
     flex: auto;
-    margin-top: 12px;
+    margin-top: 32px;
     width: 100%;
     gap: 32px;
     flex-direction: column;
@@ -123,6 +123,7 @@ watch(
         }
         .preMainAppName {
           font-size: 16px;
+          margin-right: 8px;
           line-height: 24px;
           color: var(--o-text-color-primary);
           font-weight: 700;
@@ -145,13 +146,13 @@ watch(
           border-radius: 50%;
           background-size: contain;
         }
-        .defaultIcon {
+        .defaultIconNoCamera {
             width: 100%;
             height: 100%;
-            background: url('@/assets/images/app_upload.svg');
+            background: url('@/assets/images/dark_user.png');
             background-size: contain !important;
             &:hover {
-              background: url('@/assets/images/app_upload_hover.svg');
+              background: url('@/assets/images/light_user.png');
             }
           }
       }
@@ -164,6 +165,7 @@ watch(
           width: 100%;
           padding: 24px;
           background-color: var(--o-bg-color-base);
+          border-radius: 0px 8px 8px;
           .preMainContentTitle {
             display: flex;
             flex-direction: column;
@@ -171,6 +173,7 @@ watch(
             border-bottom: 1px solid var(--o-time-text);
             .greetDes {
               display: flex;
+              margin-bottom: 8px;
               .greetDesContent {
                 font-size: 24px;
                 font-weight: 700;
@@ -200,11 +203,15 @@ watch(
               color: var(--o-text-color-primary);
               font-size: 16px;
               line-height: 24px;
+              padding-bottom: 8px;
             }
-            .linkBadge {
+            ::v-deep(.linkBadge) {
               .el-badge__content {
-                right: calc(-10px + var(--el-badge-size) / 2);
+                right: -4px;
                 top: 4px;
+                width: 16px;
+                height: 16px;
+                background-color: #e32020 !important;
               }
             }
 
@@ -234,10 +241,13 @@ watch(
                 }
                 .connectBoxContent {
                   display: block;
-                  color: #6395fd;
                   font-size: 14px;
+                  padding-right: 8px;
                   cursor: pointer;
                   font-weight: 400;
+                  .vue-text {
+                    color: #6395fd;
+                  }
                 }
               }
             }
@@ -262,6 +272,9 @@ watch(
               border-radius: 8px;
               padding: 8px 16px;
               background-color: var(--o-bg-color-base);
+              .vue-text {
+                color: #4e5865;
+              }
             }
           }
         }
diff --git a/src/views/styles/createApp.scss b/src/views/styles/createApp.scss
index 4c671aa7..f3090eb4 100644
--- a/src/views/styles/createApp.scss
+++ b/src/views/styles/createApp.scss
@@ -84,7 +84,6 @@
     margin-top: 16px;
     padding: 24px 24px 24px 16px;
     display: flex;
-    gap: 24px;
     flex: 1;
     max-height: calc(100% - 112px);
     background-color: var(--o-bg-color-base);
@@ -119,6 +118,7 @@
     height: calc(100% - 32px);
     background-image: var(--o-bg-image);
     background-position: -520px -200px;
+    overflow: auto;
     .copilot-footer {
       margin-bottom: 12px;
     }
@@ -129,7 +129,7 @@
   }
 
   .createAppContainerMainLeft {
-    width: 536px;
+    width: 560px;
     height: 100%;
     margin-top: 0px;
     --o-owndefine-del-hover: #7aa5ff;
@@ -269,15 +269,48 @@
         .partPermissionPerson {
           width: 420px;
           height: 252px;
-          padding: 16px 0px 0px 16px;
+          padding: 16px 0px 0px;
           margin-top: 8px;
-          background-color: var(--o-bash-bg);
+          display: flex;
+          gap: 4px;
+          .permissionChoice {
+            background-color: var(--o-bash-bg);
+            width: 208px;
+            padding: 16px 0 16px 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            border-radius: 4px;
+            .perimissionChoiceTitle {
+              height: 16px;
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              > div {
+                height: 16px;
+                line-height: 16px;
+              }
+              .choiceNum {
+                padding: 0 4px;
+                min-width: 28px;
+                background-color: var(--o-time-text);
+                border-radius: 8px;
+                text-align: center;
+              }
+        
+            }
+            .permissionInputSearch {
+              width: 176px;
+            }
+          }
+          .addUserBtn {
+            width: 104px;
+          }
           .personList {
             max-height: 204px;
             overflow: auto;
             padding-bottom: 12px;
             .el-checkbox-group {
-              margin-top: 16px;
               display: flex;
               flex-direction: column;
               gap: 16px;
@@ -285,6 +318,13 @@
                 height: 16px;
                 display: flex;
                 align-items: center;
+                .el-checkbox__input {
+                  display: flex;
+                  width: 16px;
+                  height: 16px;
+                  align-items: center;
+                  justify-content: center;
+                }
                 .el-checkbox__label {
                   display: flex;
                   align-items: center;
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index c7e08e5c..131b94b7 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -278,6 +278,7 @@
 .workFlowOption {
   display: flex;
   align-items: center;
+  gap: 4px;
   .flowName {
     flex: 1;
   }
@@ -288,6 +289,20 @@
     height: 16px;
     flex: right;
   }
+  .editIcon {
+    background: url('@/assets/svgs/light_editor.svg');
+  }
+  .delIcon {
+    background: url('@/assets/svgs/light_delete.svg');
+  }
+}
+.workFlowOption.is-selected, .workFlowOption.is-hovering {
+  .editIcon {
+    background: url('@/assets/svgs/dark_editor_active.svg');
+  }
+  .delIcon {
+    background: url('@/assets/svgs/dark_delete_active.svg');
+  }
 }
 // 各节点的状态样式提取
 .vue-flow__node {
-- 
Gitee