stylus 语法换成 saas 语法

web/src/components/FileSelect.vue

@@ -3,7 +3,14 @@
     <a class="file-upload-img" @click="fetchFiles(1)">
       <i class="iconfont icon-attachment-st"></i>
     </a>
-    <el-dialog class="file-list-dialog" v-model="show" :close-on-click-modal="true" :show-close="true" :width="800" title="文件管理">
+    <el-dialog
+      class="file-list-dialog"
+      v-model="show"
+      :close-on-click-modal="true"
+      :show-close="true"
+      :width="800"
+      title="文件管理"
+    >
       <el-scrollbar ref="scrollbarRef" max-height="80vh" style="height: 100%" @scroll="onScroll">
         <div class="file-list">
           <el-row :gutter="20">
@@ -25,12 +32,28 @@
             <el-col :span="3" v-for="file in fileData.items" :key="file.url">
               <div class="grid-content">
                 <el-tooltip class="box-item" effect="dark" :content="file.name" placement="top">
-                  <el-image :src="file.url" fit="cover" v-if="isImage(file.ext)" @click="insertURL(file)" />
-                  <el-image :src="GetFileIcon(file.ext)" fit="cover" v-else @click="insertURL(file)" />
+                  <el-image
+                    :src="file.url"
+                    fit="cover"
+                    v-if="isImage(file.ext)"
+                    @click="insertURL(file)"
+                  />
+                  <el-image
+                    :src="GetFileIcon(file.ext)"
+                    fit="cover"
+                    v-else
+                    @click="insertURL(file)"
+                  />
                 </el-tooltip>
 
                 <div class="opt">
-                  <el-button type="danger" size="small" :icon="Delete" @click="removeFile(file)" circle />
+                  <el-button
+                    type="danger"
+                    size="small"
+                    :icon="Delete"
+                    @click="removeFile(file)"
+                    circle
+                  />
                 </div>
               </div>
             </el-col>
@@ -45,180 +68,176 @@
 </template>
 
 <script setup>
-import {reactive, ref} from "vue";
-import {ElMessage} from "element-plus";
-import {httpGet, httpPost} from "@/utils/http";
-import {Delete, Plus} from "@element-plus/icons-vue";
-import {isImage, removeArrayItem} from "@/utils/libs";
-import {GetFileIcon} from "@/store/system";
-import {checkSession} from "@/store/cache";
-import {useSharedStore} from "@/store/sharedata";
-import {closeLoading, showLoading} from "@/utils/dialog";
+import { checkSession } from '@/store/cache'
+import { useSharedStore } from '@/store/sharedata'
+import { GetFileIcon } from '@/store/system'
+import { closeLoading, showLoading } from '@/utils/dialog'
+import { httpGet, httpPost } from '@/utils/http'
+import { isImage, removeArrayItem } from '@/utils/libs'
+import { Delete, Plus } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { reactive, ref } from 'vue'
 
 const props = defineProps({
   userId: Number,
-});
-const emits = defineEmits(["selected"]);
-const show = ref(false);
-const scrollbarRef = ref(null);
+})
+const emits = defineEmits(['selected'])
+const show = ref(false)
+const scrollbarRef = ref(null)
 const fileData = reactive({
   items: [],
   page: 1,
   isLastPage: true,
-});
-const store = useSharedStore();
+})
+const store = useSharedStore()
 
 const fetchFiles = (pageNo) => {
   checkSession()
     .then(() => {
-      show.value = true;
-      httpPost("/api/upload/list", { page: pageNo || 1, page_size: 30 })
+      show.value = true
+      httpPost('/api/upload/list', { page: pageNo || 1, page_size: 30 })
         .then((res) => {
-          const { items, page, total_page } = res.data;
+          const { items, page, total_page } = res.data
 
           if (page === 1) {
-            fileData.items = items;
+            fileData.items = items
           } else {
-            fileData.items = [...fileData.items, ...items];
+            fileData.items = [...fileData.items, ...items]
           }
 
-          fileData.isLastPage = page === total_page;
+          fileData.isLastPage = page === total_page
 
           if (!fileData.isLastPage) {
-            fileData.page = page + 1;
+            fileData.page = page + 1
           }
         })
         .catch((e) => {
-          showMessageError("获取文件列表失败：" + e.message);
-        });
+          showMessageError('获取文件列表失败：' + e.message)
+        })
     })
     .catch(() => {
-      store.setShowLoginDialog(true);
-    });
-};
+      store.setShowLoginDialog(true)
+    })
+}
 
 // el-scrollbar 滚动回调
 const onScroll = (options) => {
-  const wrapRef = scrollbarRef.value.wrapRef;
-  scrollbarRef.value.moveY = (wrapRef.scrollTop * 100) / wrapRef.clientHeight;
-  scrollbarRef.value.moveX = (wrapRef.scrollLeft * 100) / wrapRef.clientWidth;
-  const poor = wrapRef.scrollHeight - wrapRef.clientHeight;
+  const wrapRef = scrollbarRef.value.wrapRef
+  scrollbarRef.value.moveY = (wrapRef.scrollTop * 100) / wrapRef.clientHeight
+  scrollbarRef.value.moveX = (wrapRef.scrollLeft * 100) / wrapRef.clientWidth
+  const poor = wrapRef.scrollHeight - wrapRef.clientHeight
   // 判断滚动到底部 自动加载数据
   if (options.scrollTop + 2 >= poor && !fileData.isLastPage) {
-    fetchFiles(fileData.page);
+    fetchFiles(fileData.page)
   }
-};
+}
 
 const afterRead = (file) => {
-  const formData = new FormData();
-  formData.append("file", file.file, file.name);
-  showLoading("文件上传中...");
+  const formData = new FormData()
+  formData.append('file', file.file, file.name)
+  showLoading('文件上传中...')
   // 执行上传操作
-  httpPost("/api/upload", formData)
+  httpPost('/api/upload', formData)
     .then((res) => {
-      fileData.items.unshift(res.data);
-      ElMessage.success({ message: "上传成功", duration: 500 });
+      fileData.items.unshift(res.data)
+      ElMessage.success({ message: '上传成功', duration: 500 })
       closeLoading()
     })
     .catch((e) => {
-      ElMessage.error("图片上传失败:" + e.message);
+      ElMessage.error('图片上传失败:' + e.message)
       closeLoading()
-    });
-};
+    })
+}
 
 const removeFile = (file) => {
-  httpGet("/api/upload/remove?id=" + file.id)
+  httpGet('/api/upload/remove?id=' + file.id)
     .then(() => {
       fileData.items = removeArrayItem(fileData.items, file, (v1, v2) => {
-        return v1.id === v2.id;
-      });
-      ElMessage.success("文件删除成功！");
-      fetchFiles(1);
+        return v1.id === v2.id
+      })
+      ElMessage.success('文件删除成功！')
+      fetchFiles(1)
     })
     .catch((e) => {
-      ElMessage.error("文件删除失败:" + e.message);
-    });
-};
+      ElMessage.error('文件删除失败:' + e.message)
+    })
+}
 
 const insertURL = (file) => {
-  show.value = false;
+  show.value = false
   // 如果是相对路径，处理成绝对路径
-  if (file.url.indexOf("http") === -1) {
-    file.url = location.protocol + "//" + location.host + file.url;
+  if (file.url.indexOf('http') === -1) {
+    file.url = location.protocol + '//' + location.host + file.url
   }
-  emits("selected", file);
-};
+  emits('selected', file)
+}
 </script>
 
-<style lang="stylus">
-
+<style lang="scss">
 .file-select-box {
   .file-upload-img {
     .iconfont {
       font-size: 19px;
-      cursor pointer;
+      cursor: pointer;
     }
   }
 
   .el-dialog {
-
     .el-dialog__body {
       //padding 0
-      overflow hidden
+      overflow: hidden;
 
       .file-list {
-        margin-right 10px
+        margin-right: 10px;
         .grid-content {
-          margin-bottom 10px
-          position relative
+          margin-bottom: 10px;
+          position: relative;
 
           .avatar-uploader {
-            width 100%
+            width: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
-            border 1px dashed #e1e1e1
-            border-radius 6px
+            border: 1px dashed #e1e1e1;
+            border-radius: 6px;
 
             .el-upload {
-              width 100%
-              height 80px
+              width: 100%;
+              height: 80px;
             }
           }
 
           .el-image {
-            width 100%
-            height 80px
-            border 1px solid #ffffff
-            border-radius 6px
-            cursor pointer
+            width: 100%;
+            height: 80px;
+            border: 1px solid #ffffff;
+            border-radius: 6px;
+            cursor: pointer;
 
             &:hover {
-              border 1px solid #20a0ff
+              border: 1px solid #20a0ff;
             }
-
           }
 
           .iconfont {
-            color #20a0ff
-            font-size 40px
+            color: #20a0ff;
+            font-size: 40px;
           }
 
           .opt {
-            display none
-            position absolute
-            top 5px
-            right 5px
+            display: none;
+            position: absolute;
+            top: 5px;
+            right: 5px;
           }
 
           &:hover {
             .opt {
-              display block
+              display: block;
             }
           }
         }
       }
-
     }
   }
 }