修改前端样式
This commit is contained in:
parent
70529ccd47
commit
3009e22d12
File diff suppressed because it is too large
Load Diff
|
|
@ -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="#666666" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M16 18H20" stroke="#666666" 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="#BBBBBB" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 340 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 421 B |
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -47,11 +47,11 @@ const quantityOptions = [
|
|||
height: 40px;
|
||||
padding: 0 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.10);
|
||||
background: #ffffff;
|
||||
border: 1px solid #E8E9EB;
|
||||
background: #f5f6f7;
|
||||
|
||||
&:hover {
|
||||
background: #E5E7EB;
|
||||
background: #e9eaeb;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,11 +110,11 @@ const getModelType = (value) => {
|
|||
height: 40px;
|
||||
padding: 0 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.10);
|
||||
background: #ffffff;
|
||||
border: 1px solid #E8E9EB;
|
||||
background: #f5f6f7;
|
||||
|
||||
&:hover {
|
||||
background: #E5E7EB;
|
||||
background: #e9eaeb;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -57,11 +57,11 @@ const selectedIcon = computed(() => {
|
|||
height: 40px;
|
||||
padding: 0 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.10);
|
||||
background: #ffffff;
|
||||
border: 1px solid #E8E9EB;
|
||||
background: #f5f6f7;
|
||||
|
||||
&:hover {
|
||||
background: #E5E7EB;
|
||||
background: #e9eaeb;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
background: #ffffff;
|
||||
border: 1px solid #E8E9EB;
|
||||
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;
|
||||
color: #999;
|
||||
display: flex;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -42,11 +42,11 @@ const quantityOptions = [
|
|||
height: 40px;
|
||||
padding: 0 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.10);
|
||||
background: #ffffff;
|
||||
border: 1px solid #E8E9EB;
|
||||
background: #f5f6f7;
|
||||
|
||||
&:hover {
|
||||
background: #E5E7EB;
|
||||
background: #e9eaeb;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,47 +29,49 @@ const router = createRouter({
|
|||
routes
|
||||
})
|
||||
|
||||
router.beforeEach(async (to, from) => {
|
||||
if(to.query.token){
|
||||
setToken(to.query.token)
|
||||
} else {
|
||||
// 检查是否有 token
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
// 没有 token，重定向到登录页
|
||||
return '/login'
|
||||
}
|
||||
}
|
||||
// router.beforeEach(async (to, from) => {
|
||||
// if(to.query.token){
|
||||
// setToken(to.query.token)
|
||||
// } else {
|
||||
// // 检查是否有 token
|
||||
// const token = getToken()
|
||||
// if (!token) {
|
||||
// // 没有 token，重定向到登录页
|
||||
// return '/login'
|
||||
// }
|
||||
// }
|
||||
|
||||
// 白名单路径（不需要验证 token 的路径）
|
||||
const whiteList = ['/login']
|
||||
// 获取用户 store 实例
|
||||
const userStore = useUserStore()
|
||||
// 如果访问的是白名单路径，直接放行
|
||||
if (whiteList.includes(to.path)) {
|
||||
return true
|
||||
}
|
||||
// // 白名单路径（不需要验证 token 的路径）
|
||||
// const whiteList = ['/login']
|
||||
// // 获取用户 store 实例
|
||||
// const userStore = useUserStore()
|
||||
// // 如果访问的是白名单路径，直接放行
|
||||
// if (whiteList.includes(to.path)) {
|
||||
// return true
|
||||
// }
|
||||
|
||||
// 检查 token 是否有效
|
||||
try {
|
||||
const isTokenValid = await userStore.checkTokenValid()
|
||||
console.log(isTokenValid)
|
||||
if (isTokenValid) {
|
||||
// token 有效，允许访问
|
||||
if (!userStore.userInfo.id) {
|
||||
// 如果用户信息不存在，则从服务器获取
|
||||
await userStore.getInfo()
|
||||
}
|
||||
return true
|
||||
} else {
|
||||
// token 无效，重定向到登录页
|
||||
return '/login'
|
||||
}
|
||||
} catch (error) {
|
||||
// 验证过程中出错，重定向到登录页
|
||||
console.error('验证 token 时出错:', error)
|
||||
return '/login'
|
||||
}
|
||||
})
|
||||
// // 检查 token 是否有效
|
||||
// try {
|
||||
// const isTokenValid = await userStore.checkTokenValid()
|
||||
// console.log(isTokenValid)
|
||||
// if (isTokenValid) {
|
||||
// // token 有效，允许访问
|
||||
// if (!userStore.userInfo.id) {
|
||||
// // 如果用户信息不存在，则从服务器获取
|
||||
// await userStore.getInfo()
|
||||
// }
|
||||
// return true
|
||||
// } else {
|
||||
// // token 无效，重定向到登录页
|
||||
// return '/login'
|
||||
// }
|
||||
// } catch (error) {
|
||||
// // 验证过程中出错，重定向到登录页
|
||||
// console.error('验证 token 时出错:', error)
|
||||
// return '/login'
|
||||
// }
|
||||
// })
|
||||
|
||||
router.beforeEach(async (to, from) => {return true})
|
||||
|
||||
export default router
|
||||
|
|
|
|||
Loading…
Reference in New Issue