Discharge7443/Nexior
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adapt to mobile screen (#246)

Browse Source
This commit is contained in:
Germey
2025-08-05 00:53:59 +08:00
committed by GitHub
parent 2565f1573d
commit ba3c0f31f4
18 changed files with 96 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
change/@acedatacloud-nexior-238b145f-6407-4c25-bc2c-e4ba45dbf5ab.json
+7
View File
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "adapt to mobile",
"packageName": "@acedatacloud/nexior",
"email": "cqc@cuiqingcai.com",
"dependentChangeType": "patch"
}
src/components/application/Status.vue
+8 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="status">
<el-dialog v-model="visible" class="mt-12" width="600px">
<el-dialog v-model="visible" class="mt-12" width="450px">
<div v-if="application">
<p class="text-center mb-4">
{{ $t('application.message.applicationSelection') }}
@@ -21,7 +21,7 @@
</div>
</div>
</el-dialog>
<el-button circle @click="visible = true">
<el-button circle class="entry" @click="visible = true">
<font-awesome-icon icon="fa-solid fa-wallet" class="icon" />
</el-button>
</div>
@@ -103,3 +103,9 @@ export default defineComponent({
}
});
</script>
<style lang="scss" scoped>
.entry {
background-color: var(--el-color-black);
}
</style>
src/components/chat/Message.vue
+5
View File
@@ -334,6 +334,11 @@ export default defineComponent({
border-color: var(--el-color-black);
}
}
@media (max-width: 767px) {
.edits {
min-width: 350px;
}
}
}
}
.content {
src/components/common/Navigator.vue
+15 -15
View File
@@ -1,7 +1,7 @@
<template>
<div :direction="direction" class="navigator">
<div class="top">
<div class="w-full flex justify-center">
<div class="w-full flex justify-center brand">
<logo v-if="direction === 'column'" @click.stop="onHome" />
</div>
<div
@@ -9,7 +9,7 @@
:key="linkIndex"
:class="{link: true, active: link.routes.includes($route.name as string)}"
>
<el-tooltip v-if="direction === 'column'" effect="dark" :content="link.displayName" placement="right">
<el-tooltip effect="dark" :content="link.displayName" :placement="direction === 'row' ? 'top' : 'right'">
<el-image v-if="link.logo" :src="link.logo" class="avatar" @click="$router.push(link.route)" />
</el-tooltip>
</div>
@@ -249,12 +249,22 @@ export default defineComponent({
align-items: center;
position: relative;
.top {
.avatar {
display: block;
margin: auto;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
border: 1px solid var(--el-border-color-lighter);
}
}
&[direction='row'] {
flex-direction: row;
padding-top: 10px;
border-top: 1px solid var(--el-border-color);
.chevron,
.logo {
.brand {
display: none;
}
.top {
@@ -280,7 +290,6 @@ export default defineComponent({
}
&[direction='column'] {
flex-direction: column;
.top {
flex: 1;
display: flex;
@@ -295,15 +304,6 @@ export default defineComponent({
}
.link {
width: 100%;
.avatar {
display: block;
margin: auto;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
border: 1px solid var(--el-border-color-lighter);
}
}
}
src/components/luma/RecentPanel.vue
+7 -2
View File
@@ -3,7 +3,12 @@
<bot-placeholder />
</div>
<div v-else-if="tasks?.items?.length && tasks?.items?.length > 0" class="tasks w-full h-full overflow-y-auto">
<task-preview v-for="(task, taskIndex) in tasks?.items" :key="taskIndex" :model-value="task" />
<task-preview
v-for="(task, taskIndex) in tasks?.items"
:key="taskIndex"
:model-value="task"
@extend="$emit('extend')"
/>
</div>
<div v-if="tasks?.items?.length === 0" class="w-full h-full flex items-center justify-center">
<no-tasks />
@@ -23,7 +28,7 @@ export default defineComponent({
TaskPreview,
NoTasks
},
emits: ['reach-top'],
emits: ['reach-top', 'extend'],
data() {
return {
job: 0
src/components/luma/task/Preview.vue
+2
View File
@@ -131,6 +131,7 @@ export default defineComponent({
required: true
}
},
emits: ['extend'],
data() {
return {};
},
@@ -154,6 +155,7 @@ export default defineComponent({
thumbnail_url: response.thumbnail_url,
video_url: response.video_url
});
this.$emit('extend');
},
onDownload(video_url: string) {
// download url here
src/components/midjourney/ConfigPanel.vue
-1
View File
@@ -84,7 +84,6 @@ export default defineComponent({
<style lang="scss" scoped>
.panel {
border-right: 1px solid var(--el-border-color);
flex: 1;
height: calc(100% - 40px);
}
src/components/midjourney/tasks/TaskList.vue
+6 -1
View File
@@ -5,7 +5,12 @@
<div v-else-if="tasks && tasks?.length === 0" class="w-full h-full flex items-center justify-center">
<no-tasks />
</div>
<div v-else-if="tasks.length > 0" ref="panel" class="p-2 flex flex-col overflow-y-auto" @scroll="onHandleScroll">
<div
v-else-if="tasks.length > 0"
ref="panel"
class="p-2 h-full flex flex-col overflow-y-auto"
@scroll="onHandleScroll"
>
<task-item
v-for="(task, taskKey) in tasks"
:key="taskKey"
src/layouts/Chat.vue
+18 -15
View File
@@ -9,10 +9,10 @@
<slot name="chat" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-bars" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-bars" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="290px" class="drawer">
<side-panel />
<el-drawer v-model="drawer" direction="ltr" :with-header="false" size="290px">
<side-panel @change-conversation="onChangeConversation" />
</el-drawer>
</div>
</template>
@@ -75,18 +75,21 @@ export default defineComponent({
}
@media (max-width: 767px) {
.side {
display: none;
}
.chat {
width: 100%;
}
.menu {
display: block;
position: fixed;
right: 20px;
top: 20px;
z-index: 2000;
.main {
.side {
display: none;
}
.chat {
width: 100%;
padding: 50px 15px 0 10px;
}
.menu {
display: block;
position: fixed;
left: 20px;
top: 50px;
z-index: 2000;
}
}
}
</style>
src/layouts/Flux.vue
+3 -2
View File
@@ -7,9 +7,9 @@
<slot name="result" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-magic" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
<el-drawer v-model="drawer" direction="ltr" :with-header="false" size="340px" class="drawer">
<slot name="config" />
</el-drawer>
</div>
@@ -75,6 +75,7 @@ export default defineComponent({
left: 15px;
top: 15px;
z-index: 2000;
background-color: var(--el-color-black);
}
}
</style>
src/layouts/Hailuo.vue
+3 -2
View File
@@ -7,9 +7,9 @@
<slot name="result" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-magic" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
<el-drawer v-model="drawer" direction="ltr" :with-header="false" size="340px">
<slot name="config" />
</el-drawer>
</div>
@@ -75,6 +75,7 @@ export default defineComponent({
left: 15px;
top: 15px;
z-index: 2000;
background-color: var(--el-color-black);
}
}
</style>
src/layouts/Kling.vue
+3 -2
View File
@@ -7,9 +7,9 @@
<slot name="result" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-magic" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
<el-drawer v-model="drawer" direction="ltr" :with-header="false" size="350px">
<slot name="config" />
</el-drawer>
</div>
@@ -75,6 +75,7 @@ export default defineComponent({
left: 15px;
top: 15px;
z-index: 2000;
background-color: var(--el-color-black);
}
}
</style>
src/layouts/Luma.vue
+3 -2
View File
@@ -7,9 +7,9 @@
<slot name="result" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-magic" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
<el-drawer v-model="drawer" direction="ltr" :with-header="false" size="350px" class="drawer">
<slot name="config" />
</el-drawer>
</div>
@@ -75,6 +75,7 @@ export default defineComponent({
left: 15px;
top: 15px;
z-index: 2000;
background-color: var(--el-color-black);
}
}
</style>
src/layouts/Midjourney.vue
+5 -35
View File
@@ -7,9 +7,9 @@
<slot name="results" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-magic" class="icon-menu" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="300px" class="drawer">
<el-drawer v-model="drawer" direction="ltr" :with-header="false" size="350px" class="drawer">
<slot name="config" />
</el-drawer>
</div>
@@ -35,19 +35,6 @@ export default defineComponent({
});
</script>
<style lang="scss">
.drawer2 {
.el-drawer__header {
margin-bottom: 0;
}
.el-drawer__body {
.tasks {
padding-top: 0;
}
}
}
</style>
<style lang="scss" scoped>
.main {
flex: 1;
@@ -57,14 +44,12 @@ export default defineComponent({
.menu {
display: none;
}
.menu2 {
display: none;
}
.config {
width: 300px;
height: 100%;
display: flex;
flex-direction: column;
border-right: 1px solid var(--el-border-color);
}
.results {
flex: 1;
@@ -74,22 +59,6 @@ export default defineComponent({
}
}
@media screen and (min-width: 768px) and (max-width: 1060px) {
.main {
position: relative;
.config {
display: none;
}
.menu {
display: block;
position: absolute;
left: 20px;
top: 20px;
z-index: 1000;
}
}
}
@media (max-width: 767px) {
.main {
position: relative;
@@ -97,7 +66,7 @@ export default defineComponent({
display: none;
}
.results {
display: none;
display: block;
}
.menu {
display: block;
@@ -105,6 +74,7 @@ export default defineComponent({
left: 15px;
top: 15px;
z-index: 1000;
background-color: var(--el-color-black);
}
}
}
src/layouts/Pika.vue
+3 -2
View File
@@ -7,9 +7,9 @@
<slot name="result" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-magic" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
<el-drawer v-model="drawer" :with-header="false" size="350px">
<slot name="config" />
</el-drawer>
</div>
@@ -75,6 +75,7 @@ export default defineComponent({
left: 15px;
top: 15px;
z-index: 2000;
background-color: var(--el-color-black);
}
}
</style>
src/layouts/Pixverse.vue
+3 -2
View File
@@ -7,9 +7,9 @@
<slot name="result" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-magic" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
<el-drawer v-model="drawer" direction="ltr" :with-header="false" size="350px">
<slot name="config" />
</el-drawer>
</div>
@@ -75,6 +75,7 @@ export default defineComponent({
left: 15px;
top: 15px;
z-index: 2000;
background-color: var(--el-color-black);
}
}
</style>
src/layouts/Suno.vue
+3 -8
View File
@@ -10,14 +10,11 @@
<slot name="preview" />
</div>
<el-button round class="menu" @click="drawer = true">
<font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
<font-awesome-icon icon="fa-solid fa-magic" />
</el-button>
<el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
<el-drawer v-model="drawer" direction="ltr" :with-header="false" size="340px" class="drawer">
<slot name="config" />
</el-drawer>
<!-- <el-drawer v-model="isPlaying" :with-header="false" size="340px" class="preview_drawer">
<slot name="preview" />
</el-drawer> -->
</div>
</template>
@@ -74,9 +71,6 @@ export default defineComponent({
display: flex;
flex-direction: column;
}
.preview_drawer {
display: none;
}
}
.menu {
@@ -100,6 +94,7 @@ export default defineComponent({
left: 15px;
top: 15px;
z-index: 2000;
background-color: var(--el-color-black);
}
}
}
src/pages/luma/Index.vue
+2 -1
View File
@@ -4,7 +4,7 @@
<config-panel @generate="onGenerate" />
</template>
<template #result>
<recent-panel @reach-top="onReachTop" />
<recent-panel @reach-top="onReachTop" @extend="$emit('extend')" />
</template>
</layout>
</template>
@@ -35,6 +35,7 @@ export default defineComponent({
RecentPanel
},
inject: ['initialized'],
emits: ['extend'],
data(): IData {
return {
task: undefined,