@@ -7,7 +7,7 @@
@@ -23,10 +23,10 @@
@mousedown.stop
>
-
@@ -59,20 +59,18 @@
@@ -100,12 +98,8 @@ const isTouching = ref(false);
const isControlsVisible = ref(false);
const cjimg = 'https://draft-user.s3.us-east-2.amazonaws.com/images/14f98f33-06a7-4629-a42e-d7cfbced786f';
const anTypeImg = 'https://draft-user.s3.us-east-2.amazonaws.com/images/1e82b2b6-0e5d-4a62-b65f-098952eb2f67';
-const humanTypeImg = 'https://draft-user.s3.us-east-2.amazonaws.com/images/6569f75b-5534-49f4-9c3a-68eb35def196';
+const humanTypeImg = 'https://draft-user.s3.us-east-2.amazonaws.com/images/e3e60cc7-9777-41ba-9d1e-f5ffc92e4fac.webp';
const giminiServer = new GiminiServer();
-// 控制右侧按钮显示状态
-const showRightControls = ref(false);
-// 控制鼠标悬停状态
-const isHovered = ref(false);
// 图片比例
const imageAspectRatio = ref(9/16); // 默认比例
// 控制文本输入框显示状态
@@ -114,20 +108,12 @@ const showTextInput = ref(false);
const textInputValue = ref('');
// 文本输入框引用
const textInputRef = ref(null);
-// 处理鼠标移入事件
-const handleMouseEnter = () => {
- isHovered.value = true;
-};
+
const handleImageClick = () => {
// 点击图片时触发预览
emit('preview-image', formData.value.internalImageUrl);
}
-// 处理鼠标移出事件
-const handleMouseLeave = () => {
- isHovered.value = false;
- // 鼠标离开时隐藏展开的操作按钮
- showRightControls.value = false;
-};
+
// 切换文本输入框显示/隐藏
const toggleTextInput = () => {
showTextInput.value = !showTextInput.value;
@@ -157,7 +143,8 @@ const handleTextInputConfirm = () => {
emit('create-prompt-card', {
img: formData.value.internalImageUrl,
diyPromptText:textInputValue.value,
- generateFourView:props.generateFourView
+ generateFourView:props.generateFourView,
+ cardData: props.cardData
});
showTextInput.value = false;
textInputValue.value = '';
@@ -171,11 +158,9 @@ const handleTextInputCancel = () => {
// 处理触摸开始事件
const handleTouchStart = () => {
isTouching.value = true;
- setTimeout(() => {
if (isTouching.value) {
isControlsVisible.value = true;
}
- }, 200); // 长按显示控件
};
// 处理触摸结束事件
const handleTouchEnd = () => {
@@ -722,8 +707,26 @@ const handleImageLoad = (event) => {
pointer-events: auto;
}
+/* 在 iPad 及更大触控屏上,按下即显示右侧圆形控件 */
+@media (hover: none) and (pointer: coarse) {
+ .ip-card-container:active .right-circular-controls,
+ .ip-card-container.controls-visible .right-circular-controls {
+ opacity: 1;
+ transform: translateX(0);
+ pointer-events: auto;
+ }
+}
+
+/* 非触控设备保持 hover 显示 */
+@media (hover: hover) {
+ .ip-card-container:hover .right-circular-controls {
+ opacity: 1;
+ transform: translateX(0);
+ pointer-events: auto;
+ }
+}
/* 移动端适配:点击卡片后显示功能按钮 */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
/* 点击卡片容器时显示功能按钮 */
.ip-card-container:active .right-circular-controls,
.ip-card-container.controls-visible .right-circular-controls {
@@ -928,7 +931,7 @@ const handleImageLoad = (event) => {
}
/* 响应式设计 */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
.ip-card-container {
flex-direction: column;
gap: 16px;
diff --git a/apps/frontend/src/components/iPandCardLeft/index.vue b/apps/frontend/src/components/iPandCardLeft/index.vue
index 51650af..09fc183 100644
--- a/apps/frontend/src/components/iPandCardLeft/index.vue
+++ b/apps/frontend/src/components/iPandCardLeft/index.vue
@@ -296,7 +296,7 @@ const formData = ref({
const textareaRef = ref(null);
const fileInput = ref(null); // 文件输入引用
-const generateCount = ref(1); // 生成数量,默认为1
+const generateCount = ref(4); // 生成数量,默认为1
const isOptimizing = ref(false); // 优化状态
const isDragOver = ref(false); // 拖拽状态
const isUploading = ref(false); // 图片上传状态
diff --git a/apps/frontend/src/components/layout/MainLayout.vue b/apps/frontend/src/components/layout/MainLayout.vue
index de2fc1f..aa46378 100644
--- a/apps/frontend/src/components/layout/MainLayout.vue
+++ b/apps/frontend/src/components/layout/MainLayout.vue
@@ -153,7 +153,7 @@ watch(() => window.location.pathname, () => {
.main-layout {
display: flex;
flex-direction: column;
- min-height: 100vh;
+ height: 100%;
/* 移除 overflow: hidden 以允许页面滚动 */
position: relative;
}
@@ -172,7 +172,7 @@ watch(() => window.location.pathname, () => {
.content-row {
display: flex;
/* flex: 1; */
- height: calc(100vh - 100px);
+ height: calc(100% - 64px);
/* overflow: hidden; */
}
@@ -188,6 +188,7 @@ watch(() => window.location.pathname, () => {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
+ overflow: hidden;
}
@@ -208,7 +209,6 @@ watch(() => window.location.pathname, () => {
position: relative;
height: 100%;
overflow-y: auto;
- background-color: red;
}
.breadcrumb-container {
diff --git a/apps/frontend/src/components/modelCard/index.vue b/apps/frontend/src/components/modelCard/index.vue
index 55c6205..74facbc 100644
--- a/apps/frontend/src/components/modelCard/index.vue
+++ b/apps/frontend/src/components/modelCard/index.vue
@@ -1,9 +1,8 @@
@@ -64,7 +63,7 @@
-
-
+
+