格式化

src/components/layout/modules/aside.vue

@@ -1,41 +1,41 @@
 <template>
   <div class="asides">
     <div v-if="siteInfo.attinfos" class="logo-panel flex">
-      <img
-        style="width:100%;"
-        src="@/assets/logo1.png"
-        @click="onLogoClick"
-      />
-      <menu-fold-outlined v-if="!collapsed" @click="onCollapsed"/>
+      <img style="width:100%;" src="@/assets/logo1.png" @click="onLogoClick" />
+      <menu-fold-outlined v-if="!collapsed" @click="onCollapsed" />
     </div>
-    <div class="aside-item" :class="actSystem.systemid == item.systemid?'onSystem':''" v-for="(item,index) in system" :key="index"  @click="onsystemClick(item)">
+    <div class="aside-item" :class="actSystem.systemid == item.systemid ? 'onSystem' : ''" v-for="(item, index) in system"
+      :key="index" @click="onsystemClick(item)">
       <div v-if="collapsed" class="menu-icon uncollapsed">
         <span class="aside-menu-icon">
           <a-tooltip placement="right">
-            <template #title>{{item.systemname}}</template>
-            <span class="almm mt-2">{{item.systemname}}</span>
+            <template #title>{{ item.systemname }}</template>
+            <span class="almm mt-2">{{ item.systemname }}</span>
           </a-tooltip>
-          
+
         </span>
       </div>
       <span class="collapsed" v-if="!collapsed">
-        <span class="aside-menu-icon">{{item.systemname.substr(0, 1)}}</span>&emsp;
-        {{item.systemname}}
+        <span class="aside-menu-icon">{{ item.systemname.substr(0, 1) }}</span>&emsp;
+        {{ item.systemname }}
       </span>
     </div>
     <a-divider style="height: 2px; background-color: #fff" />
-    <div class="aside-item" :class="n_appid == item.systemappid?'onSystem':''" v-for="(item,index) in shortcuts" :key="index"  @click="onAppClick(item)">
+    <div class="aside-item" :class="n_appid == item.systemappid ? 'onSystem' : ''" v-for="(item, index) in shortcuts"
+      :key="index" @click="onAppClick(item)">
       <div v-if="collapsed" class="menu-icon uncollapsed">
         <span class="aside-menu-icon">
           <a-tooltip placement="right">
-            <template #title>{{item.systemappname}}</template>
-            <span class="mt-2">{{item.systemappname}} <CloseCircleFilled style="margin-left: 5px;" @click.stop="onDeleteClick(item.systemappid)"/></span>
+            <template #title>{{ item.systemappname }}</template>
+            <span class="mt-2">{{ item.systemappname }}
+              <CloseCircleFilled style="margin-left: 5px;" @click.stop="onDeleteClick(item.systemappid)" />
+            </span>
           </a-tooltip>
         </span>
       </div>
       <span class="collapsed" v-if="!collapsed">
-        <span class="aside-menu-icon">{{item.systemname.substr(0, 1)}}</span>&emsp;
-        {{item.systemappname}}
+        <span class="aside-menu-icon">{{ item.systemname.substr(0, 1) }}</span>&emsp;
+        {{ item.systemappname }}
       </span>
     </div>
     <div v-if="collapsed" class="showCollapse">
@@ -47,23 +47,23 @@
 <script setup>
 
 import Api from '@/api/api'
-import { defineComponent,ref, reactive,onMounted,watch} from 'vue';
+import { defineComponent, ref, reactive, onMounted, watch } from 'vue';
 import { useAuthStore } from '@/stores/modules/auth'
 import { useBaseStore } from '@/stores/modules/base'
 import { storeToRefs } from 'pinia'
 import { useRouter } from "vue-router"
 import { CloseCircleFilled } from '@ant-design/icons-vue'
-import { MenuFoldOutlined,MenuUnfoldOutlined} from '@ant-design/icons-vue'
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
 import { Modal } from 'ant-design-vue';
 const router = useRouter()
 const base = useBaseStore()
 let { siteInfo } = storeToRefs(base)
 
 const store = useAuthStore()
-let { system,mods,actSystem,shortcuts } = storeToRefs(store)
+let { system, mods, actSystem, shortcuts } = storeToRefs(store)
 
 const collapsed = ref(true)
-const onsystemClick = (item)=>{
+const onsystemClick = (item) => {
   const targetPath = item?.modules?.[0]?.apps?.[0]?.path || ''
   if (actSystem.value?.systemid === item.systemid && router.currentRoute.value.path === targetPath) return
   actSystem.value = item
@@ -72,7 +72,7 @@ const onsystemClick = (item)=>{
     router.push({ path: targetPath })
   }
 }
-const onDeleteClick = async (systemappid)=>{
+const onDeleteClick = async (systemappid) => {
   Modal.confirm({
     title: '确认删除',
     content: '您确定要删除这个快捷方式吗？此操作不可撤销。',
@@ -82,9 +82,9 @@ const onDeleteClick = async (systemappid)=>{
       try {
         let res = await Api.requested({
           "id": 10017301,
-          "version":1,
-          "content": { 
-            "systemappid":systemappid
+          "version": 1,
+          "content": {
+            "systemappid": systemappid
           }
         })
         store.queryShortcuts()
@@ -97,11 +97,11 @@ const onDeleteClick = async (systemappid)=>{
     },
   })
 }
-const onCollapsed = ()=>{
+const onCollapsed = () => {
   collapsed.value = !collapsed.value
 }
-const n_appid=ref(null)
-const onAppClick = (item)=>{
+const n_appid = ref(null)
+const onAppClick = (item) => {
   // 根据快捷方式的systemid找到对应的系统对象
   const targetSystem = system.value.find(sys => sys.systemid === item.systemid)
   if (targetSystem) {
@@ -112,22 +112,23 @@ const onAppClick = (item)=>{
     router.push({ path: item.systemapp })
   }
 }
-const onLogoClick = ()=>{
-  router.push({path:'/landing'})
+const onLogoClick = () => {
+  router.push({ path: '/landing' })
 }
-onMounted (()=>{
+onMounted(() => {
   base.siteData()
   // store.queryShortcuts()
 })
 </script>
 <style less scoped>
-.asides{
+.asides {
   position: relative;
   width: 150px;
   background: #0e2851;
   transition: .1s ease-out all;
   overflow: hidden;
 }
+
 .aside-item {
   cursor: pointer;
   color: #fff;
@@ -137,40 +138,46 @@ onMounted (()=>{
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
 }
-.logo-panel{
+
+.logo-panel {
   padding: 10px;
-  margin-bottom:10px ;
-  border-bottom:1px solid #f1f2f3;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #f1f2f3;
   background: #fff;
 }
-.logo-panel h4{
+
+.logo-panel h4 {
   color: #333;
-  margin:0 0 0 10px;
+  margin: 0 0 0 10px;
 }
 
-.flex{
+.flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.showCollapse{
+
+.showCollapse {
   position: absolute;
   bottom: 0px;
   height: 40px;
   width: 56px;
   text-align: center;
 }
-.menu-icon{
+
+.menu-icon {
   display: inline-block;
-  padding:3px 0 3px 15px;
+  padding: 3px 0 3px 15px;
   width: 100%;
   font-size: 14px;
   line-height: 30px;
 }
-.collapsed{
+
+.collapsed {
   display: block;
   padding: 0px 20px;
 }
+
 .onSystem {
   position: relative;
   margin-left: 10px;
@@ -179,6 +186,7 @@ onMounted (()=>{
   border-bottom-left-radius: 30px;
   /* overflow: hidden; */
 }
+
 .onSystem::before {
   content: '';
   position: absolute;
@@ -204,10 +212,11 @@ onMounted (()=>{
   background: transparent;
 }
 
-.onSystem .uncollapsed{
- color:#333;
+.onSystem .uncollapsed {
+  color: #333;
 }
-.aside-menu-icon{
+
+.aside-menu-icon {
   position: relative;
   display: inline-block;
   height: 30px;
@@ -216,17 +225,20 @@ onMounted (()=>{
   transition: .3s linear;
   z-index: 999;
 }
-.onSystem .menu-icon{
+
+.onSystem .menu-icon {
   padding-left: 5px;
 }
-.onSystem .aside-menu-icon{
+
+.onSystem .aside-menu-icon {
   border-radius: 30px;
   width: 100%;
   padding-left: 10px;
   background: #283149;
-  color:#fff;
+  color: #fff;
 }
-.mt-2{
-  margin-top:-2px
+
+.mt-2 {
+  margin-top: -2px
 }
 </style>