mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-04-30 15:04:30 +08:00
stylus 语法换成 saas 语法
This commit is contained in:
GeekMaster
@@ -188,77 +188,77 @@ const useRole = (roleId) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
<style scoped lang="scss">
|
||||
.apps-page {
|
||||
min-height 100vh
|
||||
background-color var(--van-background)
|
||||
min-height: 100vh;
|
||||
background-color: var(--van-background);
|
||||
|
||||
.apps-filter {
|
||||
padding 10px 0
|
||||
padding: 10px 0;
|
||||
|
||||
:deep(.van-tabs__nav) {
|
||||
background var(--van-background-2)
|
||||
background: var(--van-background-2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-list {
|
||||
padding 0 15px
|
||||
padding: 0 15px;
|
||||
|
||||
.app-cell {
|
||||
padding 0
|
||||
margin-bottom 15px
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.app-card {
|
||||
background var(--van-cell-background)
|
||||
border-radius 12px
|
||||
padding 15px
|
||||
box-shadow 0 2px 12px rgba(0, 0, 0, 0.05)
|
||||
background: var(--van-cell-background);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.app-info {
|
||||
display flex
|
||||
align-items center
|
||||
margin-bottom 15px
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.app-image {
|
||||
width 60px
|
||||
height 60px
|
||||
margin-right 15px
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 15px;
|
||||
|
||||
:deep(.van-image) {
|
||||
width 100%
|
||||
height 100%
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.app-detail {
|
||||
flex 1
|
||||
flex: 1;
|
||||
|
||||
.app-title {
|
||||
font-size 16px
|
||||
font-weight 600
|
||||
margin-bottom 5px
|
||||
color var(--van-text-color)
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
color: var(--van-text-color);
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
font-size 13px
|
||||
color var(--van-gray-6)
|
||||
display -webkit-box
|
||||
-webkit-box-orient vertical
|
||||
-webkit-line-clamp 2
|
||||
overflow hidden
|
||||
font-size: 13px;
|
||||
color: var(--van-gray-6);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display flex
|
||||
gap 10px
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.action-btn {
|
||||
flex 1
|
||||
border-radius 20px
|
||||
padding 0 10px
|
||||
flex: 1;
|
||||
border-radius: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -137,44 +137,44 @@ const onLoad = () => {
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="stylus">
|
||||
<style scoped lang="scss">
|
||||
.chat-export-mobile {
|
||||
height 100vh
|
||||
height: 100vh;
|
||||
|
||||
.van-nav-bar {
|
||||
position static
|
||||
position: static;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
background #F5F5F5;
|
||||
background: #f5f5f5;
|
||||
|
||||
.chat-list-wrapper {
|
||||
padding 10px 0 10px 0
|
||||
padding: 10px 0 10px 0;
|
||||
|
||||
.message-list-box {
|
||||
background #F5F5F5;
|
||||
padding-bottom: 50px
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.van-cell {
|
||||
background none
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-nav-bar__title {
|
||||
.van-dropdown-menu__title {
|
||||
margin-right 10px
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
text-align left
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.van-nav-bar__right {
|
||||
.van-icon {
|
||||
font-size 20px
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -292,6 +292,6 @@ const onChange = (item) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '../../assets/css/mobile/chat-list.styl'
|
||||
<style lang="scss" scoped>
|
||||
@use '../../assets/css/mobile/chat-list.scss' as *;
|
||||
</style>
|
||||
|
||||
@@ -631,6 +631,6 @@ const onChange = (item) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import "../../assets/css/mobile/chat-session.styl"
|
||||
<style lang="scss" scoped>
|
||||
@use '../../assets/css/mobile/chat-session.scss' as *;
|
||||
</style>
|
||||
|
||||
@@ -29,27 +29,27 @@ watch(
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '../../assets/iconfont/iconfont.css';
|
||||
<style lang="scss">
|
||||
@use '../../assets/iconfont/iconfont.css' as *;
|
||||
|
||||
.mobile-home {
|
||||
.container {
|
||||
.van-nav-bar {
|
||||
position fixed
|
||||
width 100%
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
padding 0 10px
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 黑色主题
|
||||
.van-theme-dark body {
|
||||
background #1c1c1e
|
||||
background: #1c1c1e;
|
||||
}
|
||||
|
||||
.van-nav-bar {
|
||||
position fixed
|
||||
width 100%
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,37 +15,37 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import ImageMj from "@/views/mobile/pages/ImageMj.vue";
|
||||
import ImageSd from "@/views/mobile/pages/ImageSd.vue";
|
||||
import ImageDall from "@/views/mobile/pages/ImageDall.vue";
|
||||
import { httpGet } from "@/utils/http";
|
||||
import { httpGet } from '@/utils/http'
|
||||
import ImageDall from '@/views/mobile/pages/ImageDall.vue'
|
||||
import ImageMj from '@/views/mobile/pages/ImageMj.vue'
|
||||
import ImageSd from '@/views/mobile/pages/ImageSd.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const activeName = ref("");
|
||||
const menus = ref([]);
|
||||
const activeName = ref('')
|
||||
const menus = ref([])
|
||||
const activeMenu = ref({
|
||||
mj: false,
|
||||
sd: false,
|
||||
dall: false,
|
||||
});
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
httpGet("/api/menu/list").then((res) => {
|
||||
menus.value = res.data;
|
||||
httpGet('/api/menu/list').then((res) => {
|
||||
menus.value = res.data
|
||||
activeMenu.value = {
|
||||
mj: menus.value.some((item) => item.url === "/mj"),
|
||||
sd: menus.value.some((item) => item.url === "/sd"),
|
||||
dall: menus.value.some((item) => item.url === "/dalle"),
|
||||
};
|
||||
});
|
||||
});
|
||||
mj: menus.value.some((item) => item.url === '/mj'),
|
||||
sd: menus.value.some((item) => item.url === '/sd'),
|
||||
dall: menus.value.some((item) => item.url === '/dalle'),
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
<style lang="scss">
|
||||
.mobile-image {
|
||||
.my-tab {
|
||||
.van-tab__panel {
|
||||
padding 10px
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -184,145 +184,146 @@ const useRole = (roleId) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
<style scoped lang="scss">
|
||||
.index {
|
||||
color var(--van-text-color)
|
||||
background-color var(--van-background)
|
||||
min-height 100vh
|
||||
display flex
|
||||
flex-direction column
|
||||
color: var(--van-text-color);
|
||||
background-color: var(--van-background);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
flex-shrink 0
|
||||
padding 10px 15px
|
||||
text-align center
|
||||
background var(--van-background)
|
||||
position sticky
|
||||
top 0
|
||||
z-index 1
|
||||
flex-shrink: 0;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
background: var(--van-background);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
||||
.title {
|
||||
font-size 24px
|
||||
font-weight 600
|
||||
color var(--van-text-color)
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--van-text-color);
|
||||
}
|
||||
|
||||
.slogan {
|
||||
font-size 14px
|
||||
color var(--van-gray-6)
|
||||
font-size: 14px;
|
||||
color: var(--van-gray-6);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex 1
|
||||
overflow-y auto
|
||||
padding 15px
|
||||
-webkit-overflow-scrolling touch
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.feature-grid {
|
||||
margin-bottom 30px
|
||||
margin-bottom: 30px;
|
||||
|
||||
.feature-item {
|
||||
padding 15px 0
|
||||
padding: 15px 0;
|
||||
|
||||
.feature-icon {
|
||||
width 50px
|
||||
height 50px
|
||||
border-radius 50%
|
||||
background var(--van-primary-color)
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-bottom 10px
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: var(--van-primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
i, .van-icon {
|
||||
font-size 24px
|
||||
color white
|
||||
i,
|
||||
.van-icon {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size 14px
|
||||
font-weight 500
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
margin-bottom 15px
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.section-title {
|
||||
font-size 18px
|
||||
font-weight 600
|
||||
color var(--van-text-color)
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--van-text-color);
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
padding 0 10px
|
||||
font-size 12px
|
||||
border-radius 15px
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-list {
|
||||
.app-cell {
|
||||
padding 0
|
||||
margin-bottom 15px
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.app-card {
|
||||
background var(--van-cell-background)
|
||||
border-radius 12px
|
||||
padding 15px
|
||||
box-shadow 0 2px 12px rgba(0, 0, 0, 0.05)
|
||||
background: var(--van-cell-background);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.app-info {
|
||||
display flex
|
||||
align-items center
|
||||
margin-bottom 15px
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.app-image {
|
||||
width 60px
|
||||
height 60px
|
||||
margin-right 15px
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 15px;
|
||||
|
||||
:deep(.van-image) {
|
||||
width 100%
|
||||
height 100%
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.app-detail {
|
||||
flex 1
|
||||
flex: 1;
|
||||
|
||||
.app-title {
|
||||
font-size 16px
|
||||
font-weight 600
|
||||
margin-bottom 5px
|
||||
color var(--van-text-color)
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
color: var(--van-text-color);
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
font-size 13px
|
||||
color var(--van-gray-6)
|
||||
display -webkit-box
|
||||
-webkit-box-orient vertical
|
||||
-webkit-line-clamp 2
|
||||
overflow hidden
|
||||
font-size: 13px;
|
||||
color: var(--van-gray-6);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display flex
|
||||
gap 10px
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.action-btn {
|
||||
flex 1
|
||||
border-radius 20px
|
||||
padding 0 10px
|
||||
flex: 1;
|
||||
border-radius: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,28 +9,28 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LoginDialog from "@/components/LoginDialog.vue";
|
||||
import { getSystemInfo } from "@/store/cache";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref, onMounted } from "vue";
|
||||
import LoginDialog from '@/components/LoginDialog.vue'
|
||||
import { getSystemInfo } from '@/store/cache'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter();
|
||||
const title = ref("登录");
|
||||
const logo = ref("");
|
||||
const router = useRouter()
|
||||
const title = ref('登录')
|
||||
const logo = ref('')
|
||||
|
||||
const loginSuccess = () => {
|
||||
router.back();
|
||||
};
|
||||
router.back()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getSystemInfo().then((res) => {
|
||||
title.value = res.data.title;
|
||||
logo.value = res.data.logo;
|
||||
});
|
||||
});
|
||||
title.value = res.data.title
|
||||
logo.value = res.data.logo
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
<style scoped lang="scss">
|
||||
.login {
|
||||
background: var(--theme-bg);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@@ -316,77 +316,76 @@ const logout = function () {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
<style lang="scss">
|
||||
.mobile-user-profile {
|
||||
.content {
|
||||
padding-top 15px
|
||||
padding-bottom 60px
|
||||
padding-top: 15px;
|
||||
padding-bottom: 60px;
|
||||
|
||||
.avatar {
|
||||
display flex
|
||||
justify-content center
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.van-image {
|
||||
border-radius 50%
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.van-field__label {
|
||||
width 100px
|
||||
text-align right
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.opt {
|
||||
padding 10px 15px
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
padding 0 15px
|
||||
|
||||
color var(--van-text-color)
|
||||
padding: 0 15px;
|
||||
color: var(--van-text-color);
|
||||
|
||||
.item {
|
||||
border 1px solid var(--van-border-color)
|
||||
border-radius 10px
|
||||
margin-bottom 15px
|
||||
overflow hidden
|
||||
border: 1px solid var(--van-border-color);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
padding 12px
|
||||
position relative
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
font-size 16px
|
||||
font-weight 700
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
position absolute
|
||||
top 5px
|
||||
right 10px
|
||||
display flex
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
|
||||
.van-button {
|
||||
font-size 14px
|
||||
margin-left 10px
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
flex 2
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size 18px
|
||||
color #f56c6c
|
||||
font-size: 18px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-content {
|
||||
padding 16px
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -517,6 +517,6 @@ const modelConfirm = (item) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '../../../assets/css/mobile/image-sd.styl'
|
||||
<style lang="scss">
|
||||
@use '../../../assets/css/mobile/image-sd.scss' as *;
|
||||
</style>
|
||||
|
||||
@@ -734,6 +734,6 @@ const tabChange = (tab) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "../../../assets/css/mobile/image-mj.styl"
|
||||
<style lang="scss">
|
||||
@use '../../../assets/css/mobile/image-mj.scss' as *;
|
||||
</style>
|
||||
|
||||
@@ -562,6 +562,6 @@ const showInfo = (message) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import "../../../assets/css/mobile/image-sd.styl"
|
||||
<style lang="scss" scoped>
|
||||
@use '../../../assets/css/mobile/image-sd.scss' as *;
|
||||
</style>
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
<van-tabs v-model:active="activeName" animated sticky>
|
||||
<van-tab title="MJ" name="mj">
|
||||
<van-list
|
||||
v-model:error="data['mj'].error"
|
||||
v-model:loading="data['mj'].loading"
|
||||
:finished="data['mj'].finished"
|
||||
error-text="请求失败，点击重新加载"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
style="height: 100%;width: 100%;"
|
||||
v-model:error="data['mj'].error"
|
||||
v-model:loading="data['mj'].loading"
|
||||
:finished="data['mj'].finished"
|
||||
error-text="请求失败，点击重新加载"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
style="height: 100%; width: 100%"
|
||||
>
|
||||
<van-cell v-for="item in data['mj'].data" :key="item.id">
|
||||
<van-image :src="item['img_thumb']" @click="imageView(item)" fit="cover"/>
|
||||
<van-image :src="item['img_thumb']" @click="imageView(item)" fit="cover" />
|
||||
|
||||
<div class="opt-box">
|
||||
<el-button type="primary" @click="showPrompt(item)" circle>
|
||||
@@ -25,15 +25,15 @@
|
||||
</van-tab>
|
||||
<van-tab title="SD" name="sd">
|
||||
<van-list
|
||||
v-model:error="data['sd'].error"
|
||||
v-model:loading="data['sd'].loading"
|
||||
:finished="data['sd'].finished"
|
||||
error-text="请求失败，点击重新加载"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
v-model:error="data['sd'].error"
|
||||
v-model:loading="data['sd'].loading"
|
||||
:finished="data['sd'].finished"
|
||||
error-text="请求失败，点击重新加载"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell v-for="item in data['sd'].data" :key="item.id">
|
||||
<van-image :src="item['img_thumb']" @click="imageView(item)" fit="cover"/>
|
||||
<van-image :src="item['img_thumb']" @click="imageView(item)" fit="cover" />
|
||||
|
||||
<div class="opt-box">
|
||||
<el-button type="primary" @click="showPrompt(item)" circle>
|
||||
@@ -45,15 +45,15 @@
|
||||
</van-tab>
|
||||
<van-tab title="DALL" name="dall">
|
||||
<van-list
|
||||
v-model:error="data['dall'].error"
|
||||
v-model:loading="data['dall'].loading"
|
||||
:finished="data['dall'].finished"
|
||||
error-text="请求失败，点击重新加载"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
v-model:error="data['dall'].error"
|
||||
v-model:loading="data['dall'].loading"
|
||||
:finished="data['dall'].finished"
|
||||
error-text="请求失败，点击重新加载"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell v-for="item in data['dall'].data" :key="item.id">
|
||||
<van-image :src="item['img_thumb']" @click="imageView(item)" fit="cover"/>
|
||||
<van-image :src="item['img_thumb']" @click="imageView(item)" fit="cover" />
|
||||
|
||||
<div class="opt-box">
|
||||
<el-button type="primary" @click="showPrompt(item)" circle>
|
||||
@@ -66,63 +66,68 @@
|
||||
</van-tabs>
|
||||
</div>
|
||||
|
||||
<button style="display: none" class="copy-prompt-wall" :data-clipboard-text="prompt" id="copy-btn-wall">复制
|
||||
<button
|
||||
style="display: none"
|
||||
class="copy-prompt-wall"
|
||||
:data-clipboard-text="prompt"
|
||||
id="copy-btn-wall"
|
||||
>
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, onUnmounted, ref} from "vue";
|
||||
import {httpGet} from "@/utils/http";
|
||||
import {showConfirmDialog, showFailToast, showImagePreview, showNotify} from "vant";
|
||||
import Clipboard from "clipboard";
|
||||
import {ElMessage} from "element-plus";
|
||||
import { httpGet } from '@/utils/http'
|
||||
import Clipboard from 'clipboard'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { showConfirmDialog, showFailToast, showImagePreview, showNotify } from 'vant'
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
const activeName = ref("mj")
|
||||
const activeName = ref('mj')
|
||||
const data = ref({
|
||||
"mj": {
|
||||
mj: {
|
||||
loading: false,
|
||||
finished: false,
|
||||
error: false,
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
url: "/api/mj/imgWall",
|
||||
data: []
|
||||
url: '/api/mj/imgWall',
|
||||
data: [],
|
||||
},
|
||||
"sd": {
|
||||
sd: {
|
||||
loading: false,
|
||||
finished: false,
|
||||
error: false,
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
url: "/api/sd/imgWall",
|
||||
data: []
|
||||
url: '/api/sd/imgWall',
|
||||
data: [],
|
||||
},
|
||||
"dall": {
|
||||
dall: {
|
||||
loading: false,
|
||||
finished: false,
|
||||
error: false,
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
url: "/api/dall/imgWall",
|
||||
data: []
|
||||
}
|
||||
url: '/api/dall/imgWall',
|
||||
data: [],
|
||||
},
|
||||
})
|
||||
|
||||
const prompt = ref('')
|
||||
const clipboard = ref(null)
|
||||
onMounted(() => {
|
||||
clipboard.value = new Clipboard(".copy-prompt-wall");
|
||||
clipboard.value = new Clipboard('.copy-prompt-wall')
|
||||
clipboard.value.on('success', () => {
|
||||
showNotify({type: 'success', message: '复制成功', duration: 1000})
|
||||
showNotify({ type: 'success', message: '复制成功', duration: 1000 })
|
||||
})
|
||||
clipboard.value.on('error', () => {
|
||||
showNotify({type: 'danger', message: '复制失败', duration: 2000})
|
||||
showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
|
||||
})
|
||||
|
||||
|
||||
clipboard.value.on('error', () => {
|
||||
ElMessage.error('复制失败！');
|
||||
ElMessage.error('复制失败！')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -132,66 +137,69 @@ onUnmounted(() => {
|
||||
|
||||
const onLoad = () => {
|
||||
const d = data.value[activeName.value]
|
||||
httpGet(`${d.url}?status=1&page=${d.page}&page_size=${d.pageSize}&publish=true`).then(res => {
|
||||
d.loading = false
|
||||
if (res.data.items.length === 0) {
|
||||
d.finished = true
|
||||
return
|
||||
}
|
||||
httpGet(`${d.url}?status=1&page=${d.page}&page_size=${d.pageSize}&publish=true`)
|
||||
.then((res) => {
|
||||
d.loading = false
|
||||
if (res.data.items.length === 0) {
|
||||
d.finished = true
|
||||
return
|
||||
}
|
||||
|
||||
// 生成缩略图
|
||||
const imageList = res.data.items
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
|
||||
}
|
||||
if (imageList.length < d.pageSize) {
|
||||
d.finished = true
|
||||
}
|
||||
if (d.data.length === 0) {
|
||||
d.data = imageList
|
||||
} else {
|
||||
d.data = d.data.concat(imageList)
|
||||
}
|
||||
d.page += 1
|
||||
}).catch(() => {
|
||||
d.error = true
|
||||
showFailToast("加载图片数据失败")
|
||||
})
|
||||
};
|
||||
// 生成缩略图
|
||||
const imageList = res.data.items
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]['img_thumb'] = imageList[i]['img_url'] + '?imageView2/4/w/300/h/0/q/75'
|
||||
}
|
||||
if (imageList.length < d.pageSize) {
|
||||
d.finished = true
|
||||
}
|
||||
if (d.data.length === 0) {
|
||||
d.data = imageList
|
||||
} else {
|
||||
d.data = d.data.concat(imageList)
|
||||
}
|
||||
d.page += 1
|
||||
})
|
||||
.catch(() => {
|
||||
d.error = true
|
||||
showFailToast('加载图片数据失败')
|
||||
})
|
||||
}
|
||||
|
||||
const showPrompt = (item) => {
|
||||
prompt.value = item.prompt
|
||||
showConfirmDialog({
|
||||
title: "绘画提示词",
|
||||
title: '绘画提示词',
|
||||
message: item.prompt,
|
||||
confirmButtonText: "复制",
|
||||
cancelButtonText: "关闭",
|
||||
}).then(() => {
|
||||
document.querySelector('#copy-btn-wall').click()
|
||||
}).catch(() => {
|
||||
});
|
||||
confirmButtonText: '复制',
|
||||
cancelButtonText: '关闭',
|
||||
})
|
||||
.then(() => {
|
||||
document.querySelector('#copy-btn-wall').click()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const imageView = (item) => {
|
||||
showImagePreview([item['img_url']]);
|
||||
showImagePreview([item['img_url']])
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
<style lang="scss">
|
||||
.img-wall {
|
||||
.content {
|
||||
.van-cell__value {
|
||||
min-height 80px
|
||||
min-height: 80px;
|
||||
|
||||
.van-image {
|
||||
width 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.opt-box {
|
||||
position absolute
|
||||
right 0
|
||||
top 0
|
||||
padding 10px
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user