stylus 语法换成 saas 语法

web/src/views/404.vue

@@ -8,19 +8,19 @@
 </template>
 
 <script setup>
-import {ref} from "vue"
+import { ref } from 'vue'
 
 const winHeight = ref(window.innerHeight)
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 .page-404 {
   display: flex;
   justify-content: center;
   background-color: #282c34;
 
   .inner {
-    text-align center
+    text-align: center;
 
     h1 {
       color: #202020;
@@ -31,10 +31,9 @@ const winHeight = ref(window.innerHeight)
     }
 
     h2 {
-      color #ffffff;
+      color: #ffffff;
       font-weight: bold;
     }
   }
-
 }
 </style>

web/src/views/ChatApps.vue

@@ -167,7 +167,7 @@ const useRole = (role) => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import "../assets/css/chat-app.styl"
-@import "../assets/css/custom-scroll.styl"
+<style lang="scss" scoped>
+@use '../assets/css/chat-app.scss' as *;
+@use '../assets/css/custom-scroll.scss' as *;
 </style>

web/src/views/ChatExport.vue

@@ -7,93 +7,98 @@
 
       <div v-for="item in chatData" :key="item.id">
         <chat-prompt v-if="item.type === 'prompt'" :data="item" list-style="list" />
-        <chat-reply v-else-if="item.type === 'reply'" :data="item" :read-only="true" list-style="list" />
+        <chat-reply
+          v-else-if="item.type === 'reply'"
+          :data="item"
+          :read-only="true"
+          list-style="list"
+        />
       </div>
     </div>
     <!-- end chat box -->
   </div>
 </template>
 <script setup>
-import ChatReply from "@/components/ChatReply.vue";
-import ChatPrompt from "@/components/ChatPrompt.vue";
-import { nextTick, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import { httpGet } from "@/utils/http";
-import "highlight.js/styles/a11y-dark.css";
-import hl from "highlight.js";
-import { ElMessage } from "element-plus";
-import Clipboard from "clipboard";
+import ChatPrompt from '@/components/ChatPrompt.vue'
+import ChatReply from '@/components/ChatReply.vue'
+import { httpGet } from '@/utils/http'
+import Clipboard from 'clipboard'
+import { ElMessage } from 'element-plus'
+import hl from 'highlight.js'
+import 'highlight.js/styles/a11y-dark.css'
+import { nextTick, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-const chatData = ref([]);
-const router = useRouter();
-const chatId = router.currentRoute.value.query["chat_id"];
-const loading = ref(true);
-const chatTitle = ref("");
+const chatData = ref([])
+const router = useRouter()
+const chatId = router.currentRoute.value.query['chat_id']
+const loading = ref(true)
+const chatTitle = ref('')
 
-httpGet("/api/chat/history?chat_id=" + chatId)
+httpGet('/api/chat/history?chat_id=' + chatId)
   .then((res) => {
-    const data = res.data;
+    const data = res.data
     if (!data) {
-      loading.value = false;
-      return;
+      loading.value = false
+      return
     }
 
     for (let i = 0; i < data.length; i++) {
-      if (data[i].type === "prompt") {
-        chatData.value.push(data[i]);
-        continue;
-      } else if (data[i].type === "mj") {
-        data[i].content = JSON.parse(data[i].content);
-        data[i].content.content = data[i].content?.content;
-        chatData.value.push(data[i]);
-        continue;
+      if (data[i].type === 'prompt') {
+        chatData.value.push(data[i])
+        continue
+      } else if (data[i].type === 'mj') {
+        data[i].content = JSON.parse(data[i].content)
+        data[i].content.content = data[i].content?.content
+        chatData.value.push(data[i])
+        continue
       }
 
-      data[i].orgContent = data[i].content;
-      data[i].content = data[i].content;
-      chatData.value.push(data[i]);
+      data[i].orgContent = data[i].content
+      data[i].content = data[i].content
+      chatData.value.push(data[i])
     }
 
     nextTick(() => {
-      hl.configure({ ignoreUnescapedHTML: true });
-      const blocks = document.querySelector("#chat-box").querySelectorAll("pre code");
+      hl.configure({ ignoreUnescapedHTML: true })
+      const blocks = document.querySelector('#chat-box').querySelectorAll('pre code')
       blocks.forEach((block) => {
-        hl.highlightElement(block);
-      });
-    });
-    loading.value = false;
+        hl.highlightElement(block)
+      })
+    })
+    loading.value = false
   })
   .catch((e) => {
-    ElMessage.error("加载聊天记录失败：" + e.message);
-  });
+    ElMessage.error('加载聊天记录失败：' + e.message)
+  })
 
-httpGet("/api/chat/detail?chat_id=" + chatId)
+httpGet('/api/chat/detail?chat_id=' + chatId)
   .then((res) => {
-    chatTitle.value = res.data.title;
+    chatTitle.value = res.data.title
   })
   .catch((e) => {
-    ElMessage.error("加载会失败： " + e.message);
-  });
+    ElMessage.error('加载会失败： ' + e.message)
+  })
 
 onMounted(() => {
-  const clipboard = new Clipboard(".copy-reply");
-  clipboard.on("success", () => {
-    ElMessage.success("复制成功！");
-  });
+  const clipboard = new Clipboard('.copy-reply')
+  clipboard.on('success', () => {
+    ElMessage.success('复制成功！')
+  })
 
-  clipboard.on("error", () => {
-    ElMessage.error("复制失败！");
-  });
-});
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！')
+  })
+})
 </script>
-<style lang="stylus">
+<style lang="scss">
 .chat-export {
-  display flex
-  justify-content center
-  padding 0 20px
+  display: flex;
+  justify-content: center;
+  padding: 0 20px;
 
   .chat-box {
-    width 100%;
+    width: 100%;
     // 变量定义
     --content-font-size: 16px;
     --content-color: #c1c1c1;
@@ -102,7 +107,7 @@ onMounted(() => {
     padding: 0 0 50px 0;
 
     .title {
-      text-align center
+      text-align: center;
     }
 
     .chat-line {
@@ -111,7 +116,7 @@ onMounted(() => {
       align-items: center;
 
       .chat-line-inner {
-        max-width 800px
+        max-width: 800px;
       }
     }
   }

web/src/views/ChatPlus.vue

@@ -1361,35 +1361,36 @@ const realtimeChat = () => {
 // };
 </script>
 
-<style scoped lang="stylus">
-@import '../assets/css/chat-plus.styl'
+<style scoped lang="scss">
+@use '@/assets/css/chat-plus.scss' as *;
 </style>
 
-<style lang="stylus">
-@import '../assets/css/markdown/vue.css';
+<style lang="scss">
+@use '@/assets/css/markdown/vue.css' as *;
 .notice-dialog {
   .el-dialog__header {
-    padding-bottom 0
+    padding-bottom: 0;
   }
 
   .el-dialog__body {
-    padding 0 20px
+    padding: 0 20px;
 
     h2 {
       margin: 20px 0 15px 0;
     }
 
-    ol, ul {
-      padding-left 10px
+    ol,
+    ul {
+      padding-left: 10px;
     }
 
     ol {
-      list-style decimal-leading-zero
-      padding-left 20px
+      list-style: decimal-leading-zero;
+      padding-left: 20px;
     }
 
     ul {
-      list-style inside
+      list-style: inside;
     }
   }
 }
@@ -1397,12 +1398,11 @@ const realtimeChat = () => {
 .input-container {
   .el-textarea {
     .el-textarea__inner {
-      padding-right 40px
+      padding-right: 40px;
     }
   }
 }
 
-
 .model-selector-popover {
   max-width: 820px !important;
 }
@@ -1424,7 +1424,7 @@ const realtimeChat = () => {
   .category-tabs {
     display: flex;
     flex-wrap: wrap;
-    border-bottom: 1px solid #E4E7ED;
+    border-bottom: 1px solid #e4e7ed;
     margin-bottom: 16px;
 
     .category-tab {
@@ -1438,21 +1438,21 @@ const realtimeChat = () => {
       border-bottom: 2px solid transparent;
 
       &:hover {
-        color: #409EFF;
+        color: #409eff;
       }
 
       &.active {
-        color: #409EFF;
-        border-bottom-color: #409EFF;
+        color: #409eff;
+        border-bottom-color: #409eff;
         font-weight: 500;
       }
 
       &.reset-filter {
-        color: #F56C6C;
+        color: #f56c6c;
         margin-left: auto;
 
         &:hover {
-          color: darken(#F56C6C, 10%);
+          color: darken(#f56c6c, 10%);
         }
       }
     }
@@ -1473,7 +1473,7 @@ const realtimeChat = () => {
   }
 
   .model-card {
-    border: 1px solid #DCDFE6;
+    border: 1px solid #dcdfe6;
     border-radius: 6px;
     padding: 14px;
     cursor: pointer;

web/src/views/Dalle.vue

@@ -585,7 +585,7 @@ const changeModel = (model) => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import '../assets/css/image-dall.styl';
-@import '../assets/css/custom-scroll.styl';
+<style lang="scss" scoped>
+@use '../assets/css/image-dall.scss' as *;
+@use '../assets/css/custom-scroll.scss' as *;
 </style>

web/src/views/ExternalPage.vue

@@ -10,34 +10,34 @@
   </div>
 </template>
 <script setup>
-import { useRouter } from "vue-router";
-import { computed, ref, onMounted } from "vue";
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-const loading = ref(true);
-const router = useRouter();
+const loading = ref(true)
+const router = useRouter()
 const externalUrl = computed(() => {
-  loading.value = true;
-  return router.currentRoute.value.query.url || "about:blank";
-});
+  loading.value = true
+  return router.currentRoute.value.query.url || 'about:blank'
+})
 
 // 设置标题
-document.title = router.currentRoute.value.query.title;
+document.title = router.currentRoute.value.query.title
 
 const onIframeLoad = () => {
-  loading.value = false;
-};
+  loading.value = false
+}
 </script>
 
-<style scoped lang="stylus">
+<style scoped lang="scss">
 .page-iframe {
-  width 100%
-  height 100vh
-  overflow hidden
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
 
   .iframe {
-    width 100%
-    height 100%
-    border none
+    width: 100%;
+    height: 100%;
+    border: none;
   }
 }
 </style>

web/src/views/Home.vue

@@ -302,7 +302,7 @@ const loginSuccess = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import "../assets/css/custom-scroll.styl"
-@import "../assets/css/home.styl"
+<style lang="scss" scoped>
+@use '../assets/css/custom-scroll.scss' as *;
+@use '../assets/css/home.scss' as *;
 </style>

web/src/views/ImageMj.vue

@@ -1311,7 +1311,7 @@ const generatePrompt = () => {
 }
 </script>
 
-<style lang="stylus">
-@import '../assets/css/image-mj.styl';
-@import '../assets/css/custom-scroll.styl';
+<style lang="scss">
+@use '../assets/css/image-mj.scss' as *;
+@use '../assets/css/custom-scroll.scss' as *;
 </style>

web/src/views/ImageSd.vue

@@ -752,7 +752,7 @@ const generatePrompt = () => {
 }
 </script>
 
-<style lang="stylus">
-@import '../assets/css/image-sd.styl';
-@import '../assets/css/custom-scroll.styl';
+<style lang="scss">
+@use '../assets/css/image-sd.scss' as *;
+@use '../assets/css/custom-scroll.scss' as *;
 </style>

web/src/views/ImagesWall.vue

@@ -371,7 +371,7 @@ const drawSameMj = (row) => {
 }
 </script>
 
-<style lang="stylus">
-@import '../assets/css/images-wall.styl';
-@import '../assets/css/custom-scroll.styl';
+<style lang="scss">
+@use '../assets/css/images-wall.scss' as *;
+@use '../assets/css/custom-scroll.scss' as *;
 </style>

web/src/views/Index.vue

@@ -143,6 +143,6 @@ const logout = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import '../assets/css/index.styl'
+<style lang="scss" scoped>
+@use '../assets/css/index.scss' as *;
 </style>

web/src/views/Invitation.vue

@@ -162,114 +162,105 @@ const initData = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import '../assets/css/custom-scroll.styl'
+<style lang="scss" scoped>
+@use '../assets/css/custom-scroll.scss' as *;
+
 .page-invitation {
   display: flex;
   justify-content: center;
   // background-color: #282c34;
-  height 100%
-  overflow-x hidden
-  overflow-y visible
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: visible;
 
   .inner {
-    display flex
-    flex-flow column
-    max-width 1000px
-    width 100%
+    display: flex;
+    flex-flow: column;
+    max-width: 1000px;
+    width: 100%;
     color: var(--text-theme-color);
 
     h2 {
       color: var(--theme-textcolor-normal);
-      text-align center
+      text-align: center;
     }
 
     .share-box {
       .info {
-        line-height 1.5
+        line-height: 1.5;
         // border 1px solid #444444
-        background:var(--chat-bg)
-        border-radius 10px
-        padding 10px
+        background: var(--chat-bg);
+        border-radius: 10px;
+        padding: 10px;
 
         strong {
-          color #f56c6c
+          color: #f56c6c;
         }
       }
 
       .invite-qrcode {
-        padding 20px
-        text-align center
+        padding: 20px;
+        text-align: center;
       }
 
       .invite-url {
-        padding 15px
-        display flex
-        justify-content space-between
-        border 1px solid #444444
-        border-radius 10px
+        padding: 15px;
+        display: flex;
+        justify-content: space-between;
+        border: 1px solid #444444;
+        border-radius: 10px;
 
         span {
-          position relative
-          font-family 'Microsoft YaHei', '微软雅黑', Arial, sans-serif
-          top 5px
+          position: relative;
+          font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+          top: 5px;
         }
       }
     }
 
     .invite-stats {
-      padding 30px 10px
+      padding: 30px 10px;
 
       .item-box {
-        border-radius 10px
-        padding 0 10px
+        border-radius: 10px;
+        padding: 0 10px;
 
         .el-col {
-          height 140px
-          display flex
-          align-items center
-          justify-content center
+          height: 140px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
           .iconfont {
-            font-size 60px
+            font-size: 60px;
           }
 
           .item-info {
-            font-size 18px
+            font-size: 18px;
 
-            .text, .num {
-              padding 3px 0
-              text-align center
+            .text,
+            .num {
+              padding: 3px 0;
+              text-align: center;
             }
 
             .num {
-              font-size 40px
+              font-size: 40px;
             }
           }
         }
       }
 
       .yellow {
-        background-color #ffeecc
-        color #D68F00
+        background-color: #ffeecc;
+        color: #d68f00;
       }
 
       .blue {
-        background-color #D6E4FF
-        color #1062FE
+        background-color: #d6e4ff;
+        color: #1062fe;
       }
-
-      .green {
-        background-color #E7F8EB
-        color #2D9F46
-      }
-    }
-
-
-    .invite-logs {
-      padding-bottom 20px
     }
   }
-
 }
 </style>

web/src/views/Jimeng.vue

@@ -545,7 +545,7 @@
 </template>
 
 <script setup>
-import '@/assets/css/jimeng.styl'
+import '@/assets/css/jimeng.scss'
 import loadingIcon from '@/assets/img/loading.gif'
 import ImageUpload from '@/components/ImageUpload.vue'
 

web/src/views/Login.vue

@@ -275,35 +275,52 @@ const openPrivacy = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import '../assets/css/login.styl'
+<style lang="scss" scoped>
+@use '../assets/css/login.scss' as *;
 
-.agreement-box
-  margin-bottom: 10px
-  transition: all 0.3s
+.agreement-box {
+  margin-bottom: 10px;
+  transition: all 0.3s;
+}
 
-.agreement-link
-  color: var(--el-color-primary)
-  cursor: pointer
+.agreement-link {
+  color: var(--el-color-primary);
+  cursor: pointer;
+}
 
-.agreement-error
-  .el-checkbox
-    .el-checkbox__input
-      .el-checkbox__inner
-        border-color: #F56C6C !important
+.agreement-error {
+  .el-checkbox {
+    .el-checkbox__input {
+      .el-checkbox__inner {
+        border-color: #f56c6c !important;
+      }
+    }
+  }
+}
 
-.shake
-  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both
+.shake {
+  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
 
-@keyframes shake
-  10%, 90%
-    transform: translate3d(-1px, 0, 0)
-  20%, 80%
-    transform: translate3d(2px, 0, 0)
-  30%, 50%, 70%
-    transform: translate3d(-4px, 0, 0)
-  40%, 60%
-    transform: translate3d(4px, 0, 0)
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
 </style>
 
 <style>

web/src/views/LoginCallback.vue

@@ -1,48 +1,49 @@
 <template>
-  <div class="login-callback"
-       v-loading="loading"
-       element-loading-text="正在同步登录信息..."
-       :style="{ height: winHeight + 'px' }">
-
+  <div
+    class="login-callback"
+    v-loading="loading"
+    element-loading-text="正在同步登录信息..."
+    :style="{ height: winHeight + 'px' }"
+  >
     <el-dialog
-        v-model="show"
-        :close-on-click-modal="false"
-        :show-close="false"
-        style="width: 360px;"
+      v-model="show"
+      :close-on-click-modal="false"
+      :show-close="false"
+      style="width: 360px"
     >
-      <el-result
-          icon="success"
-          title="登录成功"
-          style="--el-result-padding:10px"
-      >
-          <template #sub-title>
-            <div class="user-info">
-              <div class="line">您的初始账户信息如下：</div>
-              <div class="line"><span>用户名：</span>{{username}}</div>
-              <div class="line"><span>密码：</span>{{password}}</div>
-              <div class="line">您后期也可以通过此账号和密码登录</div>
-            </div>
-          </template>
-          <template #extra>
-            <el-button type="primary" class="copy-user-info" :data-clipboard-text="'用户名：'+username+' 密码：'+password">复制</el-button>
-            <el-button type="danger" @click="finishLogin">关闭</el-button>
-          </template>
+      <el-result icon="success" title="登录成功" style="--el-result-padding: 10px">
+        <template #sub-title>
+          <div class="user-info">
+            <div class="line">您的初始账户信息如下：</div>
+            <div class="line"><span>用户名：</span>{{ username }}</div>
+            <div class="line"><span>密码：</span>{{ password }}</div>
+            <div class="line">您后期也可以通过此账号和密码登录</div>
+          </div>
+        </template>
+        <template #extra>
+          <el-button
+            type="primary"
+            class="copy-user-info"
+            :data-clipboard-text="'用户名：' + username + ' 密码：' + password"
+            >复制</el-button
+          >
+          <el-button type="danger" @click="finishLogin">关闭</el-button>
+        </template>
       </el-result>
     </el-dialog>
-
   </div>
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue"
-import {useRouter} from "vue-router"
-import {ElMessage, ElMessageBox} from "element-plus";
-import {httpGet} from "@/utils/http";
-import {setUserToken} from "@/store/session";
-import Clipboard from "clipboard";
-import {showMessageError, showMessageOK} from "@/utils/dialog";
-import {getRoute} from "@/store/system";
-import {checkSession} from "@/store/cache";
+import { checkSession } from '@/store/cache'
+import { setUserToken } from '@/store/session'
+import { getRoute } from '@/store/system'
+import { showMessageError, showMessageOK } from '@/utils/dialog'
+import { httpGet } from '@/utils/http'
+import Clipboard from 'clipboard'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 const winHeight = ref(window.innerHeight)
 const loading = ref(true)
@@ -51,60 +52,72 @@ const show = ref(false)
 const username = ref('')
 const password = ref('')
 
-
 const code = router.currentRoute.value.query.code
 const action = router.currentRoute.value.query.action
-if (code === "") {
-  ElMessage.error({message: "登录失败：code 参数不能为空",duration: 2000, onClose: () => router.push("/")})
-} else {
-  checkSession().then(user => {
-    // bind user
-    doLogin(user.id)
-  }).catch(() => {
-    doLogin(0)
+if (code === '') {
+  ElMessage.error({
+    message: '登录失败：code 参数不能为空',
+    duration: 2000,
+    onClose: () => router.push('/'),
   })
+} else {
+  checkSession()
+    .then((user) => {
+      // bind user
+      doLogin(user.id)
+    })
+    .catch(() => {
+      doLogin(0)
+    })
 }
 
 const doLogin = (userId) => {
   // 发送请求获取用户信息
-  httpGet("/api/user/clogin/callback",{login_type: "wx",code: code, action:action, user_id: userId}).then(res => {
-    if (res.data.token) {
-      setUserToken(res.data.token)
-    }
-    if (res.data.username) {
-      username.value = res.data.username
-      password.value = res.data.password
-      show.value = true
-      loading.value = false
-    } else {
-      finishLogin()
-    }
-  }).catch(e => {
-    ElMessageBox.alert(e.message, {
-      confirmButtonText: '重新登录',
-      type:"error",
-      title:"登录失败",
-      callback: () => {
-        router.push("/login")
-      },
-    })
+  httpGet('/api/user/clogin/callback', {
+    login_type: 'wx',
+    code: code,
+    action: action,
+    user_id: userId,
   })
+    .then((res) => {
+      if (res.data.token) {
+        setUserToken(res.data.token)
+      }
+      if (res.data.username) {
+        username.value = res.data.username
+        password.value = res.data.password
+        show.value = true
+        loading.value = false
+      } else {
+        finishLogin()
+      }
+    })
+    .catch((e) => {
+      ElMessageBox.alert(e.message, {
+        confirmButtonText: '重新登录',
+        type: 'error',
+        title: '登录失败',
+        callback: () => {
+          router.push('/login')
+        },
+      })
+    })
 }
 
 const clipboard = ref(null)
 onMounted(() => {
-  clipboard.value = new Clipboard('.copy-user-info');
+  clipboard.value = new Clipboard('.copy-user-info')
   clipboard.value.on('success', () => {
-    showMessageOK('复制成功！');
+    showMessageOK('复制成功！')
   })
 
   clipboard.value.on('error', () => {
-    showMessageError('复制失败！');
+    showMessageError('复制失败！')
   })
 })
 
 onUnmounted(() => {
-  clipboard.value.destroy();
+  clipboard.value.destroy()
 })
 
 const finishLogin = () => {
@@ -113,21 +126,21 @@ const finishLogin = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 .login-callback {
   .user-info {
-    display flex
-    flex-direction column
-    padding 10px
-    border 1px dashed #e1e1e1
-    border-radius 10px
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    border: 1px dashed #e1e1e1;
+    border-radius: 10px;
     .line {
-      text-align left
-      font-size 14px
-      line-height 1.5
+      text-align: left;
+      font-size: 14px;
+      line-height: 1.5;
 
-      span{
-        font-weight bold
+      span {
+        font-weight: bold;
       }
     }
   }

web/src/views/MarkMap.vue

@@ -297,7 +297,7 @@ const downloadImage = async () => {
 }
 </script>
 
-<style lang="stylus">
-@import '../assets/css/mark-map.styl'
-@import '../assets/css/custom-scroll.styl'
+<style lang="scss">
+@use '../assets/css/mark-map.scss' as *;
+@use '../assets/css/custom-scroll.scss' as *;
 </style>

web/src/views/Member.vue

@@ -296,7 +296,7 @@ const payCallback = (success) => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import "../assets/css/custom-scroll.styl"
-@import "../assets/css/member.styl"
+<style lang="scss" scoped>
+@use '../assets/css/custom-scroll.scss' as *;
+@use '../assets/css/member.scss' as *;
 </style>

web/src/views/PowerLog.vue

@@ -138,38 +138,39 @@ const fetchData = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import "../assets/css/custom-scroll.styl"
+<style lang="scss" scoped>
+@use '../assets/css/custom-scroll.scss' as *;
+
 .power-log {
-  color #ffffff
+  color: #ffffff;
   .inner {
-    padding 0 20px 20px 20px
-    overflow auto
+    padding: 0 20px 20px 20px;
+    overflow: auto;
 
     .list-box {
-      overflow-x hidden
+      overflow-x: hidden;
       //overflow-y auto
       background: var(--chat-bg);
       padding: 20px;
       margin-top: 20px;
       border-radius: 10px;
       .handle-box {
-        padding 0 20px 20px 0
+        padding: 0 20px 20px 0;
 
         .el-input {
-          max-width 150px
+          max-width: 150px;
         }
 
         .el-date-editor {
-          max-width 200px;
+          max-width: 200px;
         }
       }
 
       .pagination {
-        display flex
-        justify-content center
-        width 100%
-        margin-top 20px
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        margin-top: 20px;
       }
     }
   }

web/src/views/Register.vue

@@ -396,46 +396,64 @@ const openPrivacy = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import '../assets/css/login.styl'
-  :deep(.back){
-    margin-bottom: 10px;
+<style lang="scss" scoped>
+@use '../assets/css/login.scss' as *;
+
+:deep(.back) {
+  margin-bottom: 10px;
+}
+
+:deep(.orline) {
+  margin-bottom: 10px;
+}
+
+.wechat-card {
+  margin-top: 20px;
+}
+
+.agreement-box {
+  margin-bottom: 10px;
+  transition: all 0.3s;
+}
+
+.agreement-link {
+  color: var(--el-color-primary);
+  cursor: pointer;
+}
+
+.agreement-error {
+  .el-checkbox {
+    .el-checkbox__input {
+      .el-checkbox__inner {
+        border-color: #f56c6c !important;
+      }
+    }
   }
+}
 
-  :deep(.orline){
-    margin-bottom: 10px;
+.shake {
+  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
   }
-  .wechat-card {
-    margin-top: 20px
-
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
   }
-
-.agreement-box
-  margin-bottom: 10px
-  transition: all 0.3s
-
-.agreement-link
-  color: var(--el-color-primary)
-  cursor: pointer
-
-.agreement-error
-  .el-checkbox
-    .el-checkbox__input
-      .el-checkbox__inner
-        border-color: #F56C6C !important
-
-.shake
-  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both
-
-@keyframes shake
-  10%, 90%
-    transform: translate3d(-1px, 0, 0)
-  20%, 80%
-    transform: translate3d(2px, 0, 0)
-  30%, 50%, 70%
-    transform: translate3d(-4px, 0, 0)
-  40%, 60%
-    transform: translate3d(4px, 0, 0)
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
 </style>
 
 <style>

web/src/views/Resetpassword.vue

@@ -123,9 +123,10 @@ const save = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import "../assets/css/login.styl"
-::v-deep(.el-tabs__item.is-active, .el-tabs__item:hover){
-    color: var(--common-text-color) !important;
-  }
+<style lang="scss" scoped>
+@use '../assets/css/login.scss' as *;
+
+::v-deep(.el-tabs__item.is-active, .el-tabs__item:hover) {
+  color: var(--common-text-color) !important;
+}
 </style>

web/src/views/Song.vue

@@ -91,6 +91,6 @@ const getShareURL = (item) => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import '../assets/css/song.styl'
+<style lang="scss" scoped>
+@use '../assets/css/song.scss' as *;
 </style>

web/src/views/Suno.vue

@@ -736,6 +736,6 @@ const createLyric = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import '../assets/css/suno.styl'
+<style lang="scss" scoped>
+@use '../assets/css/suno.scss' as *;
 </style>

web/src/views/Test.vue

@@ -1,27 +1,24 @@
 <template>
   <div class="audio-chat-page">
-    <el-button style="margin: 20px" type="primary" size="large" @click="connect()">开始语音对话</el-button>
+    <el-button style="margin: 20px" type="primary" size="large" @click="connect()"
+      >开始语音对话</el-button
+    >
   </div>
 </template>
 
 <script setup>
-const connect = () => {
-
-}
+const connect = () => {}
 </script>
 
-<style scoped lang="stylus">
+<style scoped lang="scss">
 .audio-chat-page {
-  display flex
-  flex-flow column
-  justify-content center
-  align-items center
-
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
 }
 
 canvas {
   background-color: transparent;
 }
-
-
-</style>
+</style>

web/src/views/Video.vue

@@ -640,6 +640,6 @@ onUnmounted(() => {
 })
 </script>
 
-<style lang="stylus" scoped>
-@import "../assets/css/video.styl"
+<style lang="scss" scoped>
+@use '../assets/css/video.scss' as *;
 </style>

web/src/views/admin/Apps.vue

@@ -39,8 +39,14 @@
         <el-table-column label="打招呼信息" prop="hello_msg" />
         <el-table-column label="操作" width="150">
           <template #default="scope">
-            <el-button size="small" type="primary" @click="rowEdit(scope.$index, scope.row)">编辑</el-button>
-            <el-popconfirm title="确定要删除当前应用吗?" @confirm="removeRole(scope.row)" :width="200">
+            <el-button size="small" type="primary" @click="rowEdit(scope.$index, scope.row)"
+              >编辑</el-button
+            >
+            <el-popconfirm
+              title="确定要删除当前应用吗?"
+              @confirm="removeRole(scope.row)"
+              :width="200"
+            >
               <template #reference>
                 <el-button size="small" type="danger">删除</el-button>
               </template>
@@ -57,7 +63,12 @@
         </el-form-item>
         <el-form-item label="应用分类：" prop="tid">
           <el-select v-model="role.tid" filterable placeholder="请选择分类" clearable>
-            <el-option v-for="item in appTypes" :key="item.id" :label="item.name" :value="item.id" />
+            <el-option
+              v-for="item in appTypes"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
           </el-select>
         </el-form-item>
 
@@ -68,7 +79,9 @@
         <el-form-item label="应用图标：" prop="icon">
           <el-input v-model="role.icon">
             <template #append>
-              <el-upload :auto-upload="true" :show-file-list="false" :http-request="uploadImg"> 上传 </el-upload>
+              <el-upload :auto-upload="true" :show-file-list="false" :http-request="uploadImg">
+                上传
+              </el-upload>
             </template>
           </el-input>
         </el-form-item>
@@ -89,7 +102,12 @@
               <el-table-column label="对话应用" width="120">
                 <template #default="scope">
                   <el-select v-model="scope.row.role" placeholder="Role">
-                    <el-option v-for="value in messageRoles" :key="value" :label="value" :value="value" />
+                    <el-option
+                      v-for="value in messageRoles"
+                      :key="value"
+                      :label="value"
+                      :value="value"
+                    />
                   </el-select>
                 </template>
               </el-table-column>
@@ -110,7 +128,13 @@
 
                 <template #default="scope">
                   <div class="context-msg-content">
-                    <el-input type="textarea" :rows="3" v-model="scope.row.content" autocomplete="off" v-loading="isGenerating" />
+                    <el-input
+                      type="textarea"
+                      :rows="3"
+                      v-model="scope.row.content"
+                      autocomplete="off"
+                      v-loading="isGenerating"
+                    />
                     <span class="remove-item">
                       <el-tooltip effect="dark" content="删除当前行" placement="right">
                         <el-button circle type="danger" size="small">
@@ -133,7 +157,13 @@
                         />
                         <el-row class="text-line">
                           <el-text type="info" size="small">使用 AI 生成 System 预设指令</el-text>
-                          <el-button class="generate-btn" size="small" @click="generatePrompt(scope.row)" color="#5865f2" :disabled="isGenerating">
+                          <el-button
+                            class="generate-btn"
+                            size="small"
+                            @click="generatePrompt(scope.row)"
+                            color="#5865f2"
+                            :disabled="isGenerating"
+                          >
                             <i class="iconfont icon-chuangzuo"></i>
                             <span>立即生成</span>
                           </el-button>
@@ -163,64 +193,64 @@
 </template>
 
 <script setup>
-import { Delete, Plus } from "@element-plus/icons-vue";
-import { onMounted, reactive, ref } from "vue";
-import { httpGet, httpPost } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { copyObj, removeArrayItem } from "@/utils/libs";
-import { Sortable } from "sortablejs";
-import Compressor from "compressorjs";
-import { showMessageError } from "@/utils/dialog";
+import { showMessageError } from '@/utils/dialog'
+import { httpGet, httpPost } from '@/utils/http'
+import { copyObj, removeArrayItem } from '@/utils/libs'
+import { Delete, Plus } from '@element-plus/icons-vue'
+import Compressor from 'compressorjs'
+import { ElMessage } from 'element-plus'
+import { Sortable } from 'sortablejs'
+import { onMounted, reactive, ref } from 'vue'
 
-const showDialog = ref(false);
-const parentBorder = ref(true);
-const childBorder = ref(true);
-const tableData = ref([]);
-const sortedTableData = ref([]);
-const role = ref({ context: [] });
-const formRef = ref(null);
-const optTitle = ref("");
-const loading = ref(true);
+const showDialog = ref(false)
+const parentBorder = ref(true)
+const childBorder = ref(true)
+const tableData = ref([])
+const sortedTableData = ref([])
+const role = ref({ context: [] })
+const formRef = ref(null)
+const optTitle = ref('')
+const loading = ref(true)
 
 const rules = reactive({
-  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-  key: [{ required: true, message: "请输入应用标识", trigger: "blur" }],
-  icon: [{ required: true, message: "请输入应用图标", trigger: "blur" }],
+  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  key: [{ required: true, message: '请输入应用标识', trigger: 'blur' }],
+  icon: [{ required: true, message: '请输入应用图标', trigger: 'blur' }],
   sort: [
-    { required: true, message: "请输入排序数字", trigger: "blur" },
-    { type: "number", message: "请输入有效数字" },
+    { required: true, message: '请输入排序数字', trigger: 'blur' },
+    { type: 'number', message: '请输入有效数字' },
   ],
-  hello_msg: [{ required: true, message: "请输入打招呼信息", trigger: "change" }],
-});
+  hello_msg: [{ required: true, message: '请输入打招呼信息', trigger: 'change' }],
+})
 
-const appTypes = ref([]);
-const models = ref([]);
-const messageRoles = ref(["system", "user", "assistant"]);
+const appTypes = ref([])
+const models = ref([])
+const messageRoles = ref(['system', 'user', 'assistant'])
 onMounted(() => {
-  fetchData();
+  fetchData()
 
   // get chat models
-  httpGet("/api/admin/model/list?enable=1")
+  httpGet('/api/admin/model/list?enable=1')
     .then((res) => {
-      models.value = res.data;
+      models.value = res.data
     })
     .catch(() => {
-      ElMessage.error("获取AI模型数据失败");
-    });
+      ElMessage.error('获取AI模型数据失败')
+    })
 
   // get app type
-  httpGet("/api/admin/app/type/list?enable=1")
+  httpGet('/api/admin/app/type/list?enable=1')
     .then((res) => {
-      appTypes.value = res.data;
+      appTypes.value = res.data
     })
     .catch(() => {
-      ElMessage.error("获取应用分类数据失败");
-    });
-});
+      ElMessage.error('获取应用分类数据失败')
+    })
+})
 
 const fetchData = () => {
   // 获取应用列表
-  httpGet("/api/admin/role/list")
+  httpGet('/api/admin/role/list')
     .then((res) => {
       // 初始化数据
       // const arr = res.data;
@@ -229,108 +259,110 @@ const fetchData = () => {
       //     arr[i].model_id = ''
       //   }
       // }
-      tableData.value = res.data;
-      sortedTableData.value = copyObj(tableData.value);
-      loading.value = false;
+      tableData.value = res.data
+      sortedTableData.value = copyObj(tableData.value)
+      loading.value = false
     })
     .catch(() => {
-      ElMessage.error("获取聊天应用失败");
-    });
+      ElMessage.error('获取聊天应用失败')
+    })
 
-  const drawBodyWrapper = document.querySelector(".el-table__body tbody");
+  const drawBodyWrapper = document.querySelector('.el-table__body tbody')
   // 初始化拖动排序插件
   Sortable.create(drawBodyWrapper, {
     sort: true,
     animation: 500,
     onEnd({ newIndex, oldIndex, from }) {
       if (oldIndex === newIndex) {
-        return;
+        return
       }
 
-      const sortedData = Array.from(from.children).map((row) => row.querySelector(".sort").getAttribute("data-id"));
-      const ids = [];
-      const sorts = [];
+      const sortedData = Array.from(from.children).map((row) =>
+        row.querySelector('.sort').getAttribute('data-id')
+      )
+      const ids = []
+      const sorts = []
       sortedData.forEach((id, index) => {
-        ids.push(parseInt(id));
-        sorts.push(index + 1);
-        tableData.value[index].sort_num = index + 1;
-      });
+        ids.push(parseInt(id))
+        sorts.push(index + 1)
+        tableData.value[index].sort_num = index + 1
+      })
 
-      httpPost("/api/admin/role/sort", { ids: ids, sorts: sorts }).catch((e) => {
-        ElMessage.error("排序失败：" + e.message);
-      });
+      httpPost('/api/admin/role/sort', { ids: ids, sorts: sorts }).catch((e) => {
+        ElMessage.error('排序失败：' + e.message)
+      })
     },
-  });
-};
+  })
+}
 
 const roleSet = (filed, row) => {
-  httpPost("/api/admin/role/set", {
+  httpPost('/api/admin/role/set', {
     id: row.id,
     filed: filed,
     value: row[filed],
   })
     .then(() => {
-      ElMessage.success("操作成功！");
+      ElMessage.success('操作成功！')
     })
     .catch((e) => {
-      ElMessage.error("操作失败：" + e.message);
-    });
-};
+      ElMessage.error('操作失败：' + e.message)
+    })
+}
 
 // 编辑
-const curIndex = ref(0);
+const curIndex = ref(0)
 const rowEdit = function (index, row) {
-  optTitle.value = "修改应用";
-  curIndex.value = index;
-  role.value = copyObj(row);
-  showDialog.value = true;
-};
+  optTitle.value = '修改应用'
+  curIndex.value = index
+  role.value = copyObj(row)
+  showDialog.value = true
+}
 
 const addRole = function () {
-  optTitle.value = "添加新应用";
-  role.value = { context: [] };
-  showDialog.value = true;
-};
+  optTitle.value = '添加新应用'
+  role.value = { context: [] }
+  showDialog.value = true
+}
 
 const save = function () {
   formRef.value.validate((valid) => {
     if (valid) {
-      showDialog.value = false;
-      httpPost("/api/admin/role/save", role.value)
+      showDialog.value = false
+      httpPost('/api/admin/role/save', role.value)
         .then(() => {
-          ElMessage.success("操作成功");
-          fetchData();
+          ElMessage.success('操作成功')
+          fetchData()
         })
         .catch((e) => {
-          ElMessage.error("操作失败，" + e.message);
-        });
+          ElMessage.error('操作失败，' + e.message)
+        })
     }
-  });
-};
+  })
+}
 
 const removeRole = function (row) {
-  httpGet("/api/admin/role/remove?id=" + row.id)
+  httpGet('/api/admin/role/remove?id=' + row.id)
     .then(() => {
-      ElMessage.success("删除成功！");
+      ElMessage.success('删除成功！')
       tableData.value = removeArrayItem(tableData.value, row, (v1, v2) => {
-        return v1.id === v2.id;
-      });
+        return v1.id === v2.id
+      })
     })
     .catch(() => {
-      ElMessage.error("删除失败！");
-    });
-};
+      ElMessage.error('删除失败！')
+    })
+}
 
 const addContext = function () {
   if (!role.value.context) {
-    role.value.context = [];
+    role.value.context = []
   }
-  role.value.context.push({ role: "", content: "" });
-};
+  role.value.context.push({ role: '', content: '' })
+}
 
 const removeContext = function (index) {
-  role.value.context.splice(index, 1);
-};
+  role.value.context.splice(index, 1)
+}
 
 // 图片上传
 const uploadImg = (file) => {
@@ -338,121 +370,120 @@ const uploadImg = (file) => {
   new Compressor(file.file, {
     quality: 0.6,
     success(result) {
-      const formData = new FormData();
-      formData.append("file", result, result.name);
+      const formData = new FormData()
+      formData.append('file', result, result.name)
       // 执行上传操作
-      httpPost("/api/admin/upload", formData)
+      httpPost('/api/admin/upload', formData)
         .then((res) => {
-          role.value.icon = res.data.url;
-          ElMessage.success("上传成功");
+          role.value.icon = res.data.url
+          ElMessage.success('上传成功')
         })
         .catch((e) => {
-          ElMessage.error("上传失败:" + e.message);
-        });
+          ElMessage.error('上传失败:' + e.message)
+        })
     },
     error(e) {
-      ElMessage.error("上传失败:" + e.message);
+      ElMessage.error('上传失败:' + e.message)
     },
-  });
-};
+  })
+}
 
-const isGenerating = ref(false);
-const metaPrompt = ref("");
+const isGenerating = ref(false)
+const metaPrompt = ref('')
 const generatePrompt = (row) => {
-  if (metaPrompt.value === "") {
-    return showMessageError("请输入元提示词");
+  if (metaPrompt.value === '') {
+    return showMessageError('请输入元提示词')
   }
-  isGenerating.value = true;
-  httpPost("/api/prompt/meta", { prompt: metaPrompt.value })
+  isGenerating.value = true
+  httpPost('/api/prompt/meta', { prompt: metaPrompt.value })
     .then((res) => {
-      row.content = res.data;
-      isGenerating.value = false;
+      row.content = res.data
+      isGenerating.value = false
     })
     .catch((e) => {
-      showMessageError("生成失败：" + e.message);
-      isGenerating.value = false;
-    });
-};
+      showMessageError('生成失败：' + e.message)
+      isGenerating.value = false
+    })
+}
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 .role-list {
   .handle-box {
-    margin-bottom 20px
+    margin-bottom: 20px;
 
     .handle-input {
-      max-width 150px;
-      margin-right 10px;
+      max-width: 150px;
+      margin-right: 10px;
     }
   }
 
   .opt-box {
     padding-bottom: 10px;
-    display flex;
-    justify-content flex-end
+    display: flex;
+    justify-content: flex-end;
 
     .el-icon {
-      margin-right 5px;
+      margin-right: 5px;
     }
   }
 
   .context-msg-key {
     .fr {
-      float right
+      float: right;
 
       .el-icon {
-        margin-right 5px
+        margin-right: 5px;
       }
     }
   }
 
   .context-msg-content {
-    display flex
+    display: flex;
 
     .remove-item {
-      display flex
-      padding 10px
-      flex-flow column
-      align-items center
-      justify-content  center
+      display: flex;
+      padding: 10px;
+      flex-flow: column;
+      align-items: center;
+      justify-content: center;
 
       .icon-btn {
-        margin 10px 0 0 0
+        margin: 10px 0 0 0;
       }
     }
-
   }
 
   .el-input--small {
-    width 30px;
+    width: 30px;
 
     .el-input__inner {
-      text-align center
+      text-align: center;
     }
   }
 
   .sort {
-    cursor move
+    cursor: move;
     .iconfont {
-      position relative
-      top 1px
+      position: relative;
+      top: 1px;
     }
   }
 
   .pagination {
-    padding 20px 0
-    display flex
-    justify-content right
+    padding: 20px 0;
+    display: flex;
+    justify-content: right;
   }
 }
 
 .text-line {
-  display flex
-  justify-content space-between
-  padding-top 10px
+  display: flex;
+  justify-content: space-between;
+  padding-top: 10px;
   .iconfont {
-    margin-right 5px
-    font-size 14px
+    margin-right: 5px;
+    font-size: 14px;
   }
 }
 </style>

web/src/views/admin/ChatModel.vue

@@ -393,7 +393,7 @@ const remove = function (row) {
 </script>
 
 <style lang="stylus" scoped>
-@import "../../assets/css/admin/form.styl";
+@use "../../assets/css/admin/form.scss" as *;
 .model-list {
 
   .handle-box {

web/src/views/admin/Home.vue

@@ -53,5 +53,5 @@ watch(
 </script>
 
 <style lang="stylus" scoped>
-@import "../../assets/css/main.styl";
+@use "../../assets/css/main.scss" as *;
 </style>

web/src/views/admin/LoginLog.vue

@@ -7,7 +7,7 @@
         <el-table-column label="登录地址" prop="login_address" />
         <el-table-column label="登录时间">
           <template #default="scope">
-            <span>{{ dateFormat(scope.row["created_at"]) }}</span>
+            <span>{{ dateFormat(scope.row['created_at']) }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -19,9 +19,9 @@
         background
         layout="total,prev, pager, next"
         :hide-on-single-page="true"
-        v-model:current-page="page"
-        v-model:page-size="pageSize"
-        @current-change="fetchList(page, pageSize)"
+        :current-page="page"
+        :page-size="pageSize"
+        @current-change="fetchList"
         :total="total"
       />
     </div>
@@ -29,38 +29,38 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
-import { httpGet } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { dateFormat } from "@/utils/libs";
+import { httpGet } from '@/utils/http'
+import { dateFormat } from '@/utils/libs'
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
 
 // 用户登录日志
-const items = ref([]);
-const loading = ref(true);
-const total = ref(0);
-const page = ref(0);
-const pageSize = ref(0);
+const items = ref([])
+const loading = ref(true)
+const total = ref(0)
+const page = ref(0)
+const pageSize = ref(0)
 
 onMounted(() => {
-  fetchList(1, 15);
-});
+  fetchList(1, 15)
+})
 
 // 获取数据
 const fetchList = function (_page, _pageSize) {
   httpGet(`/api/admin/user/loginLog?page=${_page}&page_size=${_pageSize}`)
     .then((res) => {
       if (res.data) {
-        items.value = res.data.items;
-        total.value = res.data.total;
-        page.value = res.data.page;
-        pageSize.value = res.data.page_size;
+        items.value = res.data.items
+        total.value = res.data.total
+        page.value = res.data.page
+        pageSize.value = res.data.page_size
       }
-      loading.value = false;
+      loading.value = false
     })
     .catch(() => {
-      ElMessage.error("获取数据失败");
-    });
-};
+      ElMessage.error('获取数据失败')
+    })
+}
 </script>
 
 <style lang="stylus" scoped>

web/src/views/admin/Menu.vue

@@ -253,8 +253,8 @@ const uploadImg = (file) => {
 </script>
 
 <style lang="stylus" scoped>
-@import "../../assets/css/admin/form.styl"
-@import "../../assets/css/main.styl"
+@use "../../assets/css/admin/form.scss" as *;
+@use "../../assets/css/main.scss" as *;
 .menu {
 
   .handle-box {

web/src/views/admin/SysConfig.vue

@@ -843,8 +843,8 @@ const onUploadImg = (files, callback) => {
 </script>
 
 <style lang="stylus" scoped>
-@import '../../assets/css/admin/form.styl'
-@import '../../assets/css/main.styl'
+@use '../../assets/css/admin/form.scss' as *;
+@use '../../assets/css/main.scss' as *;
 .system-config {
   display flex
   justify-content center

web/src/views/admin/jimeng/JimengJobs.vue

@@ -438,89 +438,114 @@ onMounted(() => {
 })
 </script>
 
-<style lang="stylus">
-.app-container
-  padding 20px
+<style lang="scss">
+.app-container {
+  padding: 20px;
 
-  .el-form-item
-    margin-bottom 0
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
 
-.page-header
-  margin-bottom 20px
+.page-header {
+  margin-bottom: 20px;
 
-  h2
-    margin 0 0 8px 0
-    color #303133
+  h2 {
+    margin: 0 0 8px 0;
+    color: #303133;
+  }
 
-  p
-    margin 0
-    color #606266
-    font-size 14px
+  p {
+    margin: 0;
+    color: #606266;
+    font-size: 14px;
+  }
+}
 
-.filter-card
-  margin-bottom 20px
+.filter-card {
+  margin-bottom: 20px;
+}
 
-.stats-row
-  margin-bottom 20px
+.stats-row {
+  margin-bottom: 20px;
+}
 
-.stat-card
-  .stat-item
-    text-align center
-    padding 20px
+.stat-card {
+  .stat-item {
+    text-align: center;
+    padding: 20px;
 
-    .stat-number
-      font-size 28px
-      font-weight bold
-      color #303133
-      margin-bottom 8px
+    .stat-number {
+      font-size: 28px;
+      font-weight: bold;
+      color: #303133;
+      margin-bottom: 8px;
 
-      &.success
-        color #67c23a
+      &.success {
+        color: #67c23a;
+      }
 
-      &.warning
-        color #e6a23c
+      &.warning {
+        color: #e6a23c;
+      }
 
-      &.danger
-        color #f56c6c
+      &.danger {
+        color: #f56c6c;
+      }
+    }
 
-    .stat-label
-      font-size 14px
-      color #909399
+    .stat-label {
+      font-size: 14px;
+      color: #909399;
+    }
+  }
+}
 
-.table-card
-  .pagination-container
-    margin-top 20px
-    display flex
-    justify-content center
+.table-card {
+  .pagination-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+}
 
-.detail-content
-  .detail-section
-    margin-bottom 20px
+.detail-content {
+  .detail-section {
+    margin-bottom: 20px;
 
-    h4
-      margin 0 0 10px 0
-      color #303133
-      font-size 16px
+    h4 {
+      margin: 0 0 10px 0;
+      color: #303133;
+      font-size: 16px;
+    }
 
-    .prompt-content
-      background #f5f7fa
-      padding 12px
-      border-radius 4px
-      color #606266
-      line-height 1.6
+    .prompt-content {
+      background: #f5f7fa;
+      padding: 12px;
+      border-radius: 4px;
+      color: #606266;
+      line-height: 1.6;
+    }
 
-    .params-content, .raw-data-content
-      font-family monospace
+    .params-content,
+    .raw-data-content {
+      font-family: monospace;
+    }
 
-    .result-content
-      .result-item
-        margin-bottom 10px
-        display flex
-        align-items center
-        gap 10px
+    .result-content {
+      .result-item {
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
 
-        label
-          font-weight bold
-          color #303133
-          min-width 50px
+        label {
+          font-weight: bold;
+          color: #303133;
+          min-width: 50px;
+        }
+      }
+    }
+  }
+}
 </style>

web/src/views/admin/jimeng/JimengSetting.vue

@@ -284,27 +284,27 @@ const resetConfig = () => {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import '../../../assets/css/admin/form.styl'
-@import '../../../assets/css/main.styl'
+<style lang="scss" scoped>
+@use '../../../assets/css/admin/form.scss' as *;
+@use '../../../assets/css/main.scss' as *;
 
 .system-config {
-  display flex
-  justify-content center
+  display: flex;
+  justify-content: center;
 
   .container {
-    width 100%
-    max-width 800px
+    width: 100%;
+    max-width: 800px;
   }
 
   .label-title {
-    display flex
-    align-items center
-    gap 5px
+    display: flex;
+    align-items: center;
+    gap: 5px;
   }
 
   .el-input-number {
-    width 100%
+    width: 100%;
   }
 }
 </style>

web/src/views/admin/records/ChatList.vue

@@ -365,20 +365,20 @@ const showMessages = (row) => {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 .chat-page {
   .handle-box {
-    margin-bottom 20px
+    margin-bottom: 20px;
     .handle-input {
-      max-width 150px;
-      margin-right 10px;
+      max-width: 150px;
+      margin-right: 10px;
     }
   }
 
   .opt-box {
     padding-bottom: 10px;
-    display flex;
-    justify-content flex-end
+    display: flex;
+    justify-content: flex-end;
 
     .el-icon {
       margin-right: 5px;
@@ -386,28 +386,29 @@ const showMessages = (row) => {
   }
 
   .el-select {
-    width: 100%
+    width: 100%;
   }
 
   .pagination {
-    margin-top 20px
-    display flex
-    justify-content right
+    margin-top: 20px;
+    display: flex;
+    justify-content: right;
   }
 
   .chat-detail {
-    max-height 90vh
-    overflow auto
+    max-height: 90vh;
+    overflow: auto;
   }
+
   .chat-box {
-    overflow auto
+    overflow: auto;
 
     // 变量定义
     --content-font-size: 16px;
     --content-color: #c1c1c1;
 
     font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    max-height 90vh
+    max-height: 90vh;
 
     .chat-line {
       // 隐藏滚动条
@@ -421,9 +422,7 @@ const showMessages = (row) => {
       font-size: 14px;
       display: flex;
       justify-content: flex-start;
-
     }
   }
-
 }
 </style>

web/src/views/admin/records/ImageList.vue

@@ -370,11 +370,11 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
 import { httpGet, httpPost } from '@/utils/http'
-import { ElMessage } from 'element-plus'
 import { dateFormat, substr } from '@/utils/libs'
 import { Search } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
 
 // 变量定义
 const data = ref({
@@ -514,20 +514,20 @@ const showImage = (url) => {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 .image-page {
   .handle-box {
-    margin-bottom 20px
+    margin-bottom: 20px;
     .handle-input {
-      max-width 150px;
-      margin-right 10px;
+      max-width: 150px;
+      margin-right: 10px;
     }
   }
 
   .opt-box {
     padding-bottom: 10px;
-    display flex;
-    justify-content flex-end
+    display: flex;
+    justify-content: flex-end;
 
     .el-icon {
       margin-right: 5px;
@@ -535,13 +535,13 @@ const showImage = (url) => {
   }
 
   .el-select {
-    width: 100%
+    width: 100%;
   }
 
   .pagination {
-    margin-top 20px
-    display flex
-    justify-content center
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
   }
 }
 </style>

web/src/views/admin/records/Medias.vue

@@ -391,20 +391,20 @@ const showLyric = (item) => {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 .media-page {
   .handle-box {
-    margin-bottom 20px
+    margin-bottom: 20px;
     .handle-input {
-      max-width 150px;
-      margin-right 10px;
+      max-width: 150px;
+      margin-right: 10px;
     }
   }
 
   .opt-box {
     padding-bottom: 10px;
-    display flex;
-    justify-content flex-end
+    display: flex;
+    justify-content: flex-end;
 
     .el-icon {
       margin-right: 5px;
@@ -412,72 +412,71 @@ const showLyric = (item) => {
   }
 
   .el-select {
-    width: 100%
+    width: 100%;
   }
 
   .pagination {
-    margin-top 20px
-    display flex
-    justify-content center
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
   }
 
   .container {
-    width 160px
-    position relative
+    width: 160px;
+    position: relative;
 
-    .video{
-      width 160px
-      border-radius 5px
+    .video {
+      width: 160px;
+      border-radius: 5px;
     }
 
     .el-image {
-      width 160px
-      height 90px
-      border-radius 5px
+      width: 160px;
+      height: 90px;
+      border-radius: 5px;
     }
 
     .duration {
-      position absolute
-      bottom 6px
-      right 0
-      background-color rgba(255, 255, 255,.7)
-      padding 0 3px
-      font-family 'Input Sans'
-      font-size 14px
-      font-weight 700
-      border-radius .125rem
+      position: absolute;
+      bottom: 6px;
+      right: 0;
+      background-color: rgba(255, 255, 255, 0.7);
+      padding: 0 3px;
+      font-family: 'Input Sans';
+      font-size: 14px;
+      font-weight: 700;
+      border-radius: 0.125rem;
     }
 
     .play {
-      position absolute
-      width: 100%
-      height 100%
+      position: absolute;
+      width: 100%;
+      height: 100%;
       top: 0;
       left: 50%;
-      border none
-      border-radius 5px
-      background rgba(100, 100, 100, 0.3)
-      cursor pointer
-      color #ffffff
-      opacity 0
+      border: none;
+      border-radius: 5px;
+      background: rgba(100, 100, 100, 0.3);
+      cursor: pointer;
+      color: #ffffff;
+      opacity: 0;
       transform: translate(-50%, 0px);
-      transition opacity 0.3s ease 0s
+      transition: opacity 0.3s ease 0s;
     }
 
     &:hover {
       .play {
-        opacity 1
+        opacity: 1;
         //display block
       }
     }
   }
 
-
   .music-player {
-    position absolute
-    bottom 20px
-    z-index 99999
-    width 100%
+    position: absolute;
+    bottom: 20px;
+    z-index: 99999;
+    width: 100%;
   }
 }
 </style>

web/src/views/mobile/Apps.vue

@@ -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;
           }
         }
       }

web/src/views/mobile/ChatExport.vue

@@ -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;
       }
     }
   }

web/src/views/mobile/ChatList.vue

@@ -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>

web/src/views/mobile/ChatSession.vue

@@ -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>

web/src/views/mobile/Home.vue

@@ -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>

web/src/views/mobile/Image.vue

@@ -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;
     }
   }
 }

web/src/views/mobile/Index.vue

@@ -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;
             }
           }
         }

web/src/views/mobile/Login.vue

@@ -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;

web/src/views/mobile/Profile.vue

@@ -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>

web/src/views/mobile/pages/ImageDall.vue

@@ -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>

web/src/views/mobile/pages/ImageMj.vue

@@ -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>

web/src/views/mobile/pages/ImageSd.vue

@@ -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>

web/src/views/mobile/pages/ImgWall.vue

@@ -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;
       }
     }
   }