feat: 持久化卡片列表切换状态并优化卡片栅格布局

src/components/base/CardListItem.vue

@@ -63,11 +63,8 @@ const bytesToSize = (bytes: number) => {
 </template>
 <style lang="scss" scoped>
 .card-item {
-  width: 17%;
   border-radius: 6px;
   overflow: hidden;
-  margin-right: 20px;
-  margin-bottom: 20px;
   box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
   background: #fff;
   .card-item-top {

src/modules/course/create/components/stepTwoComponents/AddVideoDialog.vue

 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
 import { getVideoList, createCharacter, getCourseListSearch, getLessonList, getOtherList } from '../../api'
 import CardListItem from './CardListItem.vue'
 import { useGetCategoryList } from '@/composables/useGetCategoryList'
@@ -11,30 +12,30 @@ const path = ref('')
 let tableData: any = $ref({
   list: [],
   title: '',
-  total: ''
+  total: '',
 })
 const emit = defineEmits<Emits>()
 const props = defineProps({
   isShowAddDialog: {
     type: Boolean,
-    required: true
+    required: true,
   },
   course_id: {
     type: String,
-    required: true
+    required: true,
   },
   chapterName: {
     type: String,
-    required: true
+    required: true,
   },
   chapterID: {
     type: String,
-    required: true
+    required: true,
   },
   btnInfo: {
     type: Object,
-    required: true
-  }
+    required: true,
+  },
 })
 interface Emits {
   (e: 'update:isShowAddDialog', isShowVideoDialog: boolean): void
@@ -45,7 +46,7 @@ let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
-  value: 'id'
+  value: 'id',
 }
 const typeFilter = () => {
   appList.value.refetch()
@@ -77,11 +78,11 @@ const listOptions = computed(() => {
         tableData = data
         return { list: data.list, total: data.total }
       },
-      params: { tab: tabValue, status: '1', authorized: '', name: '', course_id: props.course_id || '' }
+      params: { tab: tabValue, status: '1', authorized: '', name: '', course_id: props.course_id || '' },
     },
     filters: [
       { prop: 'classification', label: '类别：', slots: 'filter-type' },
-      { type: 'input', prop: 'name', label: '标题：' }
+      { type: 'input', prop: 'name', label: '标题：' },
     ],
     columns: [
       { type: 'selection' },
@@ -91,7 +92,7 @@ const listOptions = computed(() => {
         align: 'center',
         computed({ row }: any) {
           return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
-        }
+        },
       },
       { label: '视频分类', prop: 'classification_name', align: 'center' },
       { label: '知识点', prop: 'knowledge_points', align: 'center' },
@@ -100,9 +101,9 @@ const listOptions = computed(() => {
       { label: '审核状态', prop: 'audit_status_name', align: 'center' },
       { label: '更新人', prop: 'updated_operator_name', align: 'center' },
       { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
-      { label: '更新日期', prop: 'updated_time', align: 'center' }
+      { label: '更新日期', prop: 'updated_time', align: 'center' },
     ],
-    data: tableData.list
+    data: tableData.list,
   }
 })
 // tab切换
@@ -124,7 +125,7 @@ const handleAdd = (val: any) => {
       course_id: props.course_id,
       resource_type: props.btnInfo.resource_type,
       parent_id: props.chapterID,
-      resource_id: val.id
+      resource_id: val.id,
     }
     createCharacter(params).then(() => {
       emit('update:isShowAddDialog', false)
@@ -189,7 +190,7 @@ const addRequest = function (item: any, index: number, data: any) {
       course_id: props.course_id,
       resource_type: props.btnInfo.resource_type,
       parent_id: props.chapterID,
-      resource_id: item.id
+      resource_id: item.id,
     }
     createCharacter(params).then(() => {
       if (index === data.length - 1) {
@@ -202,9 +203,9 @@ const addRequest = function (item: any, index: number, data: any) {
 }
 
 // 列表切换
-let isCard = $ref(true)
+const isCard = useStorage('isCard', true)
 const changeCard = () => {
-  isCard = !isCard
+  isCard.value = !isCard.value
 }
 
 let checkBox = $ref([])
@@ -225,8 +226,7 @@ const addVideoList = function () {
     draggable
     :before-close="handleCancel"
     size="60%"
-    :title="`添加${props.btnInfo.btn_name}`"
-  >
+    :title="`添加${props.btnInfo.btn_name}`">
     <div class="video-head">
       <el-tabs @tab-change="tabChange" v-model="tabValue">
         <el-tab-pane label="我的资源" name="1"></el-tab-pane>
@@ -251,8 +251,7 @@ const addVideoList = function () {
               display: block;
               height: 83px;
               background-size: cover;
-              background-image: url(${row.cover});`"
-          ></div>
+              background-image: url(${row.cover});`"></div>
         </div>
       </template>
       <template #filter-type="{ params }">
@@ -263,8 +262,7 @@ const addVideoList = function () {
           :props="defaultProps"
           v-model="params.classification"
           :data="selectTree"
-          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
-        />
+          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []" />
       </template>
       <template #body="{ data }" v-if="isCard">
         <div class="card-list" v-if="data.length">
@@ -279,8 +277,7 @@ const addVideoList = function () {
               :tabIndex="tabValue"
               :data="item"
               :path="path"
-              @add="handleAdd"
-            >
+              @add="handleAdd">
               <el-checkbox @change="checkboxSelect" v-model="item.check_status"></el-checkbox>
             </CardListItem>
           </div>
@@ -298,8 +295,9 @@ const addVideoList = function () {
 .card-list-con {
   background: #fafafa;
   padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
 }
 .video-head {
   position: relative;

src/modules/course/create/components/stepTwoComponents/CardListItem.vue

@@ -70,11 +70,8 @@ const bytesToSize = (bytes: number) => {
 </template>
 <style lang="scss" scoped>
 .card-item {
-  width: 265px;
   border-radius: 6px;
   overflow: hidden;
-  margin-right: 20px;
-  margin-bottom: 20px;
   .card-item-top {
     background: rgba(204, 204, 204, 0.5);
 

src/modules/course/my/components/CardListItem.vue

@@ -57,11 +57,9 @@ const copyCourse = () => {
 </template>
 <style lang="scss" scoped>
 .card-item {
-  width: 17%;
+  background-color: #fff;
   border-radius: 6px;
   overflow: hidden;
-  margin-right: 20px;
-  margin-bottom: 20px;
   .card-item-top {
     height: 170px;
     position: relative;

src/modules/course/my/views/List.vue

 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
 import { getCourseList } from '../api'
 import CardListItem from '../components/CardListItem.vue'
 import { PictureFilled } from '@element-plus/icons-vue'
@@ -23,7 +24,7 @@ const tabChange = () => {
 }
 
 // 列表切换
-let isCard = $ref(true)
+const isCard = useStorage('isCard', true)
 
 // table 数据
 const listOptions = computed(() => {
@@ -34,7 +35,7 @@ const listOptions = computed(() => {
       align: 'center',
       computed({ row }: any) {
         return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
-      }
+      },
     },
     { label: '课程分类', prop: 'classification_name', align: 'center' },
     { label: '封面', slots: 'table-cover', width: 150, align: 'center' },
@@ -43,7 +44,7 @@ const listOptions = computed(() => {
     { label: '更新人', prop: 'updated_operator_name', align: 'center' },
     { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新日期', prop: 'updated_time', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
+    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
   ]
   if (tabValue.value === '2') {
     columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
@@ -54,16 +55,16 @@ const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getCourseList,
-      params: { tab: tabValue, status: '', authorized: '', name: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' },
     },
     filters: [
       { type: 'input', prop: 'name', label: '名称：' },
       {
         prop: 'authorized',
-        slots: 'filter-department'
-      }
+        slots: 'filter-department',
+      },
     ],
-    columns
+    columns,
   }
 })
 
@@ -72,7 +73,7 @@ const typeFilter = () => {
 }
 
 const changeCard = () => {
-  isCard = !isCard
+  isCard.value = !isCard.value
 }
 </script>
 
@@ -144,9 +145,10 @@ const changeCard = () => {
 <style lang="scss" scoped>
 .card-list {
   background: #fafafa;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
   padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
 }
 .video-head {
   position: relative;

src/modules/resource/courseware/views/List.vue

 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
 import { getCourseList } from '../api'
 import CardListItem from '@/components/base/CardListItem.vue'
 import { useMapStore } from '@/stores/map'
@@ -20,15 +21,15 @@ let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
-  value: 'id'
+  value: 'id',
 }
 
 const appList = ref()
 
 // 列表切换
-let isCard = $ref(true)
+const isCard = useStorage('isCard', true)
 const changeCard = () => {
-  isCard = !isCard
+  isCard.value = !isCard.value
 }
 
 // 资源出处 tab触发
@@ -45,7 +46,7 @@ const listOptions = $computed(() => {
       align: 'center',
       computed({ row }: any) {
         return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
-      }
+      },
     },
     { label: '课件分类', prop: 'classification_name', align: 'center' },
     { label: '知识点', prop: 'knowledge_points', align: 'center' },
@@ -54,7 +55,7 @@ const listOptions = $computed(() => {
     { label: '更新人', prop: 'updated_operator_name', align: 'center' },
     { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新日期', prop: 'updated_time', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
+    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
   ]
   if (tabValue.value === '2') {
     columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
@@ -65,23 +66,23 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getCourseList,
-      params: { tab: tabValue, status: '', authorized: '', name: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' },
     },
     filters: [
       {
         type: 'select',
         prop: 'status',
         label: '状态：',
-        options: store.getMapValuesByKey('system_status')
+        options: store.getMapValuesByKey('system_status'),
       },
       { prop: 'classification', label: '类别：', slots: 'filter-type' },
       { type: 'input', prop: 'name', label: '标题：' },
       {
         prop: 'authorized',
-        slots: 'filter-department'
-      }
+        slots: 'filter-department',
+      },
     ],
-    columns
+    columns,
   }
 })
 
@@ -159,9 +160,10 @@ const typeFilter = () => {
 <style lang="scss" scoped>
 .card-list {
   background: #fafafa;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 20px;
   padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
 }
 .video-head {
   position: relative;

src/modules/resource/lessonplan/views/List.vue

 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
 import { getLessonList } from '../api'
 import CardListItem from '@/components/base/CardListItem.vue'
 import { useMapStore } from '@/stores/map'
@@ -15,9 +16,9 @@ const store = useMapStore()
 const appList = ref()
 
 // 列表切换
-let isCard = $ref(true)
+const isCard = useStorage('isCard', true)
 const changeCard = () => {
-  isCard = !isCard
+  isCard.value = !isCard.value
 }
 
 // 筛选部门列表
@@ -28,7 +29,7 @@ let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
-  value: 'id'
+  value: 'id',
 }
 
 // 资源出处 tab触发
@@ -45,7 +46,7 @@ const listOptions = $computed(() => {
       align: 'center',
       computed({ row }: any) {
         return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
-      }
+      },
     },
     { label: '教案分类', prop: 'classification_name', align: 'center' },
     { label: '知识点', prop: 'knowledge_points', align: 'center' },
@@ -54,7 +55,7 @@ const listOptions = $computed(() => {
     { label: '更新人', prop: 'updated_operator_name', align: 'center' },
     { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新日期', prop: 'updated_time', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
+    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
   ]
   if (tabValue.value === '2') {
     columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
@@ -65,23 +66,23 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getLessonList,
-      params: { tab: tabValue, status: '', authorized: '', name: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' },
     },
     filters: [
       {
         type: 'select',
         prop: 'status',
         label: '状态：',
-        options: store.getMapValuesByKey('system_status')
+        options: store.getMapValuesByKey('system_status'),
       },
       { prop: 'classification', label: '类别：', slots: 'filter-type' },
       { type: 'input', prop: 'name', label: '标题：' },
       {
         prop: 'authorized',
-        slots: 'filter-department'
-      }
+        slots: 'filter-department',
+      },
     ],
-    columns
+    columns,
   }
 })
 
@@ -159,9 +160,10 @@ const typeFilter = () => {
 <style lang="scss" scoped>
 .card-list {
   background: #fafafa;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 20px;
   padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
 }
 .video-head {
   position: relative;

src/modules/resource/other/views/List.vue

 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
 import { getOtherList } from '../api'
 import CardListItem from '@/components/base/CardListItem.vue'
 import { useMapStore } from '@/stores/map'
@@ -16,9 +17,9 @@ const store = useMapStore()
 const appList = ref()
 
 // 列表切换
-let isCard = $ref(true)
+const isCard = useStorage('isCard', true)
 const changeCard = () => {
-  isCard = !isCard
+  isCard.value = !isCard.value
 }
 
 // 资源出处 tab触发
@@ -35,7 +36,7 @@ let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
-  value: 'id'
+  value: 'id',
 }
 
 const listOptions = $computed(() => {
@@ -46,7 +47,7 @@ const listOptions = $computed(() => {
       align: 'center',
       computed({ row }: any) {
         return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
-      }
+      },
     },
     { label: '课件分类', prop: 'classification_name', align: 'center' },
     { label: '知识点', prop: 'knowledge_points', align: 'center' },
@@ -55,7 +56,7 @@ const listOptions = $computed(() => {
     { label: '更新人', prop: 'updated_operator_name', align: 'center' },
     { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新日期', prop: 'updated_time', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
+    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
   ]
   if (tabValue.value === '2') {
     columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
@@ -66,23 +67,23 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getOtherList,
-      params: { tab: tabValue, status: '', authorized: '', name: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' },
     },
     filters: [
       {
         type: 'select',
         prop: 'status',
         label: '状态：',
-        options: store.getMapValuesByKey('system_status')
+        options: store.getMapValuesByKey('system_status'),
       },
       { prop: 'classification', label: '类别：', slots: 'filter-type' },
       { type: 'input', prop: 'name', label: '标题：' },
       {
         prop: 'authorized',
-        slots: 'filter-department'
-      }
+        slots: 'filter-department',
+      },
     ],
-    columns
+    columns,
   }
 })
 
@@ -160,9 +161,10 @@ const typeFilter = () => {
 <style lang="scss" scoped>
 .card-list {
   background: #fafafa;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 20px;
   padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
 }
 .video-head {
   position: relative;

src/modules/resource/video/components/CardListItem.vue

@@ -44,11 +44,9 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
 </template>
 <style lang="scss" scoped>
 .card-item {
-  width: 18%;
+  background: #fff;
   border-radius: 6px;
   overflow: hidden;
-  margin-right: 10px;
-  margin-bottom: 20px;
   .card-item-top {
     height: 170px;
     position: relative;

src/modules/resource/video/views/List.vue

 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
 import { getVideoList } from '../api'
 import CardListItem from '../components/CardListItem.vue'
 import { PictureFilled } from '@element-plus/icons-vue'
@@ -24,7 +25,7 @@ let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = {
   children: 'children',
   label: 'category_name',
-  value: 'id'
+  value: 'id',
 }
 // 资源出处 tab触发
 const tabValue = ref('1')
@@ -34,7 +35,7 @@ const tabChange = () => {
   appList.value.refetch()
 }
 // 列表切换
-let isCard = $ref(true)
+const isCard = useStorage('isCard', true)
 // table 数据
 const listOptions = $computed(() => {
   const columns = [
@@ -44,7 +45,7 @@ const listOptions = $computed(() => {
       align: 'center',
       computed({ row }: any) {
         return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
-      }
+      },
     },
     { label: '视频分类', prop: 'classification_name', align: 'center' },
     { label: '知识点', prop: 'knowledge_points', align: 'center' },
@@ -54,7 +55,7 @@ const listOptions = $computed(() => {
     { label: '更新人', prop: 'updated_operator_name', align: 'center' },
     { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新日期', prop: 'updated_time', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
+    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
   ]
   if (tabValue.value === '2') {
     columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
@@ -65,23 +66,23 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getVideoList,
-      params: { tab: tabValue, status: '', authorized: '', name: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' },
     },
     filters: [
       {
         type: 'select',
         prop: 'status',
         label: '状态：',
-        options: store.getMapValuesByKey('system_status')
+        options: store.getMapValuesByKey('system_status'),
       },
       { prop: 'classification', label: '类别：', slots: 'filter-type' },
       { type: 'input', prop: 'name', label: '标题：' },
       {
         prop: 'authorized',
-        slots: 'filter-department'
-      }
+        slots: 'filter-department',
+      },
     ],
-    columns
+    columns,
   }
 })
 
@@ -90,7 +91,7 @@ const typeFilter = () => {
 }
 
 const changeCard = () => {
-  isCard = !isCard
+  isCard.value = !isCard.value
 }
 // 批量上传
 const handleBatchImport = () => {
@@ -182,9 +183,10 @@ const handleBatchImport = () => {
 <style lang="scss" scoped>
 .card-list {
   background: #fafafa;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 20px 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 20px;
+  padding: 20px;
 }
 .video-head {
   position: relative;