Merge branch 'v0.5' of https://git.xueai.art/kexueadmin/AI_Painting_V2.0

src/assets/dialog/lock.svg

@@ -1,5 +1,3 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="36" height="36" rx="10" fill="#F8F9FA"/>
+<path d="M20.25 15H22.5H24C25.6569 15 27 16.3431 27 18C27 19.6569 25.6569 21 24 21H22.5H20.25M15.75 15H13.5H12C10.3431 15 9 16.3431 9 18C9 19.6569 10.3431 21 12 21H13.5H15.75" stroke="#BBBBBB" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M20.25 15H22.5H24C25.6569 15 27 16.3431 27 18C27 19.6569 25.6569 21 24 21H22.5H20.25M15.75 15H13.5H12C10.3431 15 9 16.3431 9 18C9 19.6569 10.3431 21 12 21H13.5H15.75" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M16 18H20" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
 </svg>

src/assets/dialog/lockNo.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.25 15H22.5H24C25.6569 15 27 16.3431 27 18C27 19.6569 25.6569 21 24 21H22.5H20.25M15.75 15H13.5H12C10.3431 15 9 16.3431 9 18C9 19.6569 10.3431 21 12 21H13.5H15.75" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M16 18H20" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/components/Select/index.vue

@@ -35,7 +35,7 @@
             <slot name="option" :option="option" :selected="option.value === selectedValue">
               <div class="option-content">
                 <span class="option-label">{{ option.label }}</span>
-                <span v-if="option.value === selectedValue" class="option-check">✓</span>
+                <!-- <span v-if="option.value === selectedValue" class="option-check">✓</span> -->
               </div>
             </slot>
           </div>
@@ -52,7 +52,7 @@
           <slot name="option" :option="option" :selected="option.value === selectedValue">
             <div class="option-content">
               <span class="option-label">{{ option.label }}</span>
-              <span v-if="option.value === selectedValue" class="option-check">✓</span>
+              <!-- <span v-if="option.value === selectedValue" class="option-check">✓</span> -->
             </div>
           </slot>
         </div>
@@ -313,7 +313,6 @@ onBeforeUnmount(() => {
   height: 36px;
   display: flex;
   align-items: center;
-
   color: #666;
   font-family: "Microsoft YaHei";
   font-size: 14px;
@@ -324,12 +323,14 @@ onBeforeUnmount(() => {
 
 .dropdown-item:hover {
   color: #333333;
+  background-color: #f5f6f7;
+  border-radius: 10px;
 }
 
 .dropdown-item.selected {
-  color: #000F33;
+  color: #333;
   font-weight: 400;
-  background-color: #F8F9FA;
+  background-color: rgba(0, 15, 51, 0.10);
   border-radius: 10px;
 
   .option-label {
@@ -348,13 +349,13 @@ onBeforeUnmount(() => {
   flex: 1;
 }
 
-.option-check {
+/* .option-check {
   color: #333333;
   font-weight: bold;
   font-size: 16px;
   margin-left: 12px;
   animation: checkIn 0.2s ease;
-}
+} */
 
 @keyframes checkIn {
   from {

src/components/dialogBox/Time/index.vue

@@ -47,11 +47,11 @@ const quantityOptions = [
         height: 40px;
         padding: 0 15px;
         border-radius: 10px;
-        border: 1px solid rgba(0, 0, 0, 0.10);
+        border: 1px solid #E8E9EB;
-        background: #ffffff;
+        background: #f5f6f7;
         
         &:hover {
-            background: #E5E7EB;
+            background: #e9eaeb;
         }
     }
     

src/components/dialogBox/imageUploader/index.vue

@@ -15,7 +15,7 @@
       </div>
       <div v-if="localPreviewList.length < limit" class="upload-trigger" @click="triggerUpload">
         <i-ep-plus color="#333333" />
-        <span>参考内容</span>
+        <div class="upload-text">参考内容</div>
       </div>
     </div>
     <el-upload
@@ -264,4 +264,13 @@ defineExpose({
     transform: scale(1.05);
   }
 }
+
+.upload-text {
+  color: #666;
+  font-family: "Microsoft YaHei";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
 </style>

src/components/dialogBox/index.vue

@@ -38,7 +38,7 @@
             <div v-else class="gerenate" :class="{ isprompt: prompt }" @click="handleStart">
               <img v-if="!prompt" src="@/assets/dialog/darkArrow.svg" alt="" />
               <img v-else src="@/assets/dialog/writerArrow.svg" alt="" />
-              <div v-show="useDisplay.Sender_variant !== 'default'">生成</div>
+              <div v-show="useDisplay.Sender_variant !== 'default'">发送</div>
             </div>
           </div>
         </template>
@@ -173,9 +173,9 @@ onMounted(() => {
 <style lang="less" scoped>
 /* 输入区域 */
 .input-container {
-  width: 760px;
+  width: 880px;
   position: absolute;
-  bottom: 10px;
+  bottom: 30px;
   z-index: 100;
   left: 50%;
   transform: translateX(-50%);
@@ -220,11 +220,13 @@ onMounted(() => {
     bottom: 0;
     left: 0;
     width: 80%;
+    width: 100%;
     display: flex;
     justify-content: start;
     align-items: center;
     z-index: 1;
     gap: 16px;
+    padding-left: 20px;
 
     .reference-diagram {
       display: flex;
@@ -238,7 +240,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 40px;
+  // gap: 40px;
   position: relative;
   border: none;
   box-shadow: none;
@@ -270,9 +272,10 @@ onMounted(() => {
   font-style: normal;
   font-weight: 500;
   line-height: normal;
+  margin-bottom: 106px;
 }
 :deep(.el-sender){
-  background-color: #F8F9FA;
+  background-color: #F5F6F7;
   border: none;
   border-radius: 20px;
 }

src/components/dialogBox/model/index.vue

@@ -110,11 +110,11 @@ const getModelType = (value) => {
         height: 40px;
         padding: 0 15px;
         border-radius: 10px;
-        border: 1px solid rgba(0, 0, 0, 0.10);
+        border: 1px solid #E8E9EB;
-        background: #ffffff;
+        background: #f5f6f7;
         
         &:hover {
-            background: #E5E7EB;
+            background: #e9eaeb;
         }
     }
     

src/components/dialogBox/pattern/index.vue

@@ -57,11 +57,11 @@ const selectedIcon = computed(() => {
         height: 40px;
         padding: 0 15px;
         border-radius: 10px;
-        border: 1px solid rgba(0, 0, 0, 0.10);
+        border: 1px solid #E8E9EB;
-        background: #ffffff;
+        background: #f5f6f7;
         
         &:hover {
-            background: #E5E7EB;
+            background: #e9eaeb;
         }
     }
     

src/components/dialogBox/proportion/index.vue

@@ -37,12 +37,15 @@
                 <div class="size-inputs">
                     <div class="input-group">
                         <label>W</label>
-                        <input type="number" v-model.number="width" @input="updateWidth">
+                        <input type="number" v-model.number="width" @input="updateWidth" :disabled="isLocked">
+                    </div>
+                    <div class="lock-icon" :class="{ locked: isLocked }" @click="toggleLock">
+                        <img :src="isLocked ? lockIcon : lockNoIcon" alt="约束比例">
+                        <span class="tooltip">{{ isLocked ? '解绑比例' : '约束比例' }}</span>
                     </div>
-                    <div class="lock-icon"><img src="@/assets/dialog/lock.svg" alt=""></div>
                     <div class="input-group">
                         <label>H</label>
-                        <input type="number" v-model.number="height" @input="updateHeight">
+                        <input type="number" v-model.number="height" @input="updateHeight" :disabled="isLocked">
                     </div>
                 </div>
             </div>
@@ -59,6 +62,8 @@
 <script setup>
 import { computed, ref, watch } from 'vue'
 import Popover from '@/components/Popover/index.vue'
+import lockIcon from '@/assets/dialog/lock.svg'
+import lockNoIcon from '@/assets/dialog/lockNo.svg'
 
 const props = defineProps({
   modelValue: {
@@ -107,6 +112,11 @@ const resolutionOptions = [
 
 const width = ref(2048)
 const height = ref(2048)
+const isLocked = ref(true)
+
+const toggleLock = () => {
+  isLocked.value = !isLocked.value
+}
 
 const selectProportion = (value) => {
   proportion.value = value
@@ -166,7 +176,7 @@ const updateDimensionsByResolution = (resolutionValue) => {
 }
 
 const updateWidth = () => {
-  if (proportion.value !== '智能') {
+  if (isLocked.value && proportion.value !== '智能') {
     const [w, h] = proportion.value.split(':').map(Number)
     const aspectRatio = w / h
     height.value = Math.round(width.value / aspectRatio)
@@ -175,7 +185,7 @@ const updateWidth = () => {
 }
 
 const updateHeight = () => {
-  if (proportion.value !== '智能') {
+  if (isLocked.value && proportion.value !== '智能') {
     const [w, h] = proportion.value.split(':').map(Number)
     const aspectRatio = w / h
     width.value = Math.round(height.value * aspectRatio)
@@ -226,13 +236,13 @@ watch(() => [props.modelValue, props.resolution], () => {
   align-items: center;
   gap: 5px;
   border-radius: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.10);
+  border: 1px solid #E8E9EB;
-  background: #ffffff;
+  background: #f5f6f7;
   cursor: pointer;
   position: relative;
 }
 .choice-btn:hover{
-  background: #E5E7EB;
+  background: #e9eaeb;
 }
 
 .proportion-container{
@@ -321,7 +331,7 @@ watch(() => [props.modelValue, props.resolution], () => {
   font-size: 14px;
   text-align: center;
   transition: all 0.2s ease;
-  background: #f5f5f5;
+  // background: #f5f5f5;
   color: #666;
   
   &:hover{
@@ -357,27 +367,88 @@ watch(() => [props.modelValue, props.resolution], () => {
   
   input{
     width: 100%;
+    height: 36px;
     padding: 12px 12px 12px 30px;
-    border: 1px solid #e0e0e0;
+    border: none;
     border-radius: 8px;
     font-size: 14px;
-    background: #f9f9f9;
+    background: #f5f6f7;
+    text-align: right;
+    -moz-appearance: textfield;
+    
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
     
     &:focus{
       outline: none;
-      border-color: #1890ff;
+    }
-      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    
+    &:disabled{
+      color: #999;
+      cursor: not-allowed;
     }
   }
 }
 
 .lock-icon{
-  font-size: 16px;
+  display: flex;
-  color: #999;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
   cursor: pointer;
+  border-radius: 10px;
+  position: relative;
+  transition: background 0.2s ease;
+  
+  img{
+    width: 36px;
+    height: 36px;
+  }
+  
+  .tooltip{
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #333;
+    color: #fff;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+    margin-bottom: 5px;
+    pointer-events: none;
+  }
+  
+  .tooltip::after{
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: #333;
+  }
   
   &:hover{
-    color: #666;
+    opacity: 0.8;
+    
+    .tooltip{
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+  
+  &.locked{
+    background: #f5f6f7;
   }
 }
+ 
 </style>

src/components/dialogBox/quantity/index.vue

@@ -42,11 +42,11 @@ const quantityOptions = [
         height: 40px;
         padding: 0 15px;
         border-radius: 10px;
-        border: 1px solid rgba(0, 0, 0, 0.10);
+        border: 1px solid #E8E9EB;
-        background: #ffffff;
+        background: #f5f6f7;
         
         &:hover {
-            background: #E5E7EB;
+            background: #e9eaeb;
         }
     }
     

src/router/index.js

@@ -29,47 +29,49 @@ const router = createRouter({
   routes
 })
 
-router.beforeEach(async (to, from) => {
+// router.beforeEach(async (to, from) => {
-  if(to.query.token){
+//   if(to.query.token){
-    setToken(to.query.token)
+//     setToken(to.query.token)
-  } else {
+//   } else {
-    // 检查是否有 token
+//     // 检查是否有 token
-    const token = getToken()
+//     const token = getToken()
-    if (!token) {
+//     if (!token) {
-      // 没有 token，重定向到登录页
+//       // 没有 token，重定向到登录页
-      return '/login'
+//       return '/login'
-    }
+//     }
-  }
+//   }
 
-  // 白名单路径（不需要验证 token 的路径）
+//   // 白名单路径（不需要验证 token 的路径）
-  const whiteList = ['/login']
+//   const whiteList = ['/login']
-  // 获取用户 store 实例
+//   // 获取用户 store 实例
-  const userStore = useUserStore()
+//   const userStore = useUserStore()
-  // 如果访问的是白名单路径，直接放行
+//   // 如果访问的是白名单路径，直接放行
-  if (whiteList.includes(to.path)) {
+//   if (whiteList.includes(to.path)) {
-    return true
+//     return true
-  }
+//   }
 
-  // 检查 token 是否有效
+//   // 检查 token 是否有效
-  try {
+//   try {
-    const isTokenValid = await userStore.checkTokenValid()
+//     const isTokenValid = await userStore.checkTokenValid()
-    console.log(isTokenValid)
+//     console.log(isTokenValid)
-    if (isTokenValid) {
+//     if (isTokenValid) {
-      // token 有效，允许访问
+//       // token 有效，允许访问
-      if (!userStore.userInfo.id) {
+//       if (!userStore.userInfo.id) {
-        // 如果用户信息不存在，则从服务器获取
+//         // 如果用户信息不存在，则从服务器获取
-        await userStore.getInfo()
+//         await userStore.getInfo()
-      }
+//       }
-      return true
+//       return true
-    } else {
+//     } else {
-      // token 无效，重定向到登录页
+//       // token 无效，重定向到登录页
-      return '/login'
+//       return '/login'
-    }
+//     }
-  } catch (error) {
+//   } catch (error) {
-    // 验证过程中出错，重定向到登录页
+//     // 验证过程中出错，重定向到登录页
-    console.error('验证 token 时出错:', error)
+//     console.error('验证 token 时出错:', error)
-    return '/login'
+//     return '/login'
-  }
+//   }
-})
+// })
+
+  router.beforeEach(async (to, from) => {return true})
 
 export default router