refactor: 移除 Vue 宏转换并改造相关响应式写法

.eslintrc-auto-import.json

 {
   "globals": {
-    "$": true,
-    "$$": true,
-    "$computed": true,
-    "$customRef": true,
-    "$ref": true,
-    "$shallowRef": true,
-    "$toRef": true,
     "EffectScope": true,
     "asyncComputed": true,
     "autoResetRef": true,

auto-imports.d.ts

 // Generated by 'unplugin-auto-import'
 export {}
 declare global {
-  const $$: typeof import('vue/macros')['$$']
-  const $: typeof import('vue/macros')['$']
-  const $computed: typeof import('vue/macros')['$computed']
-  const $customRef: typeof import('vue/macros')['$customRef']
-  const $ref: typeof import('vue/macros')['$ref']
-  const $shallowRef: typeof import('vue/macros')['$shallowRef']
-  const $toRef: typeof import('vue/macros')['$toRef']
   const EffectScope: typeof import('vue')['EffectScope']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']

src/components/DataAccess.vue

@@ -34,7 +34,7 @@ onMounted(() => {
   //设置配置
   myEcharts.setOption(option)
 })
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     columns: [
       { label: '访问时间', prop: 'created_at', align: 'center' },

src/components/layout/Aside.vue

@@ -10,13 +10,13 @@ import type { IMenuItem } from '@/types'
 const router = useRouter()
 const route = useRoute()
 
-const menuList = $computed<IMenuItem[]>(() => {
+const menuList = computed<IMenuItem[]>(() => {
   const found = menus.find(item => route.fullPath.includes(item.path))
   return found?.children || []
 })
 const defaultActive = computed(() => {
   // 扁平菜单
-  const flatMenuList: IMenuItem[] = menuList.reduce((result: IMenuItem[], item) => {
+  const flatMenuList: IMenuItem[] = menuList.value.reduce((result: IMenuItem[], item) => {
     result.push(item)
     if (item.children) {
       result = result.concat(item.children)

src/modules/admin/category/views/List.vue

@@ -6,7 +6,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { checkPermission } from '@/utils/permission'
 import AddDialog from '../components/AddDialog.vue'
 import AppList from '@/components/base/AppList.vue'
-const appList = $ref<null | InstanceType<typeof AppList>>(null)
+const appList = ref<null | InstanceType<typeof AppList>>(null)
 
 const prevCategoryName = ref('')
 const title = ref('')
@@ -23,7 +23,7 @@ interface ICategory {
   status_name: string
   children?: ICategory[]
 }
-let tableData = $ref<ICategory[]>([])
+const tableData = ref<ICategory[]>([])
 const editData = ref({})
 const isEdit = ref(false)
 const handleEdit = (row: ICategory) => {
@@ -32,7 +32,7 @@ const handleEdit = (row: ICategory) => {
   dialogVisible.value = true
   editData.value = row
   if (row.depth > '0') {
-    prevCategoryName.value = getParent(row.id, tableData[0]).category_name
+    prevCategoryName.value = getParent(row.id, tableData.value[0]).category_name
   } else {
     prevCategoryName.value = ''
   }
@@ -64,8 +64,8 @@ const handleAddCategory = () => {
   isEdit.value = false
   dialogVisible.value = true
   title.value = '新增类别'
-  editData.value = tableData[0]
-  prevCategoryName.value = tableData[0].category_name
+  editData.value = tableData.value[0]
+  prevCategoryName.value = tableData.value[0].category_name
 }
 // 获取上级类别
 const getParent = (node: string, tree: any) => {
@@ -86,11 +86,11 @@ const getParent = (node: string, tree: any) => {
 
 // 获取分类列表
 const handleUpdate = () => {
-  appList?.refetch()
+  appList.value?.refetch()
 }
 
 // 扁平列表数据
-let tableDataList = $ref<ICategory[]>([])
+const tableDataList = ref<ICategory[]>([])
 // 列表配置
 const listOptions = computed(() => {
   return {
@@ -99,19 +99,19 @@ const listOptions = computed(() => {
       params: { type: 'tree', category_name: '' },
       callback(data: ICategory[], params: any) {
         const list = rebuildData(params.category_name, data)
-        tableData = list
-        tableDataList = flatten(list)
+        tableData.value = list
+        tableDataList.value = flatten(list)
         return { list }
-      }
+      },
     },
     filters: [{ type: 'input', prop: 'category_name', label: '类别名称：', placeholder: '请输入类别名称' }],
     columns: [
-      { label: '类别名称', prop: 'category_name', align: 'center' },
+      { label: '类别名称', prop: 'category_name' },
       { label: '层级', prop: 'depth', align: 'center' },
       { label: '状态', prop: 'status_name', align: 'center' },
-      { label: '操作', slots: 'table-operate', width: 230, align: 'center', fixed: 'right' }
+      { label: '操作', slots: 'table-operate', width: 230, align: 'center', fixed: 'right' },
     ],
-    data: tableData
+    data: tableData.value,
   }
 })
 // 数据扁平化
@@ -127,7 +127,7 @@ function flatten(data: any[], pid = '0') {
 }
 // 拖拽
 function useSortable() {
-  const el = appList?.$el.querySelector('.el-table__body-wrapper tbody')
+  const el = appList.value?.$el.querySelector('.el-table__body-wrapper tbody')
   if (!el) return
 
   Sortable.create(el, {
@@ -145,30 +145,30 @@ function useSortable() {
     onEnd(evt: SortableEvent) {
       const { oldIndex, newIndex } = evt
       if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) return
-      const draggedRow = tableDataList[oldIndex]
-      const relatedRow = tableDataList[newIndex]
+      const draggedRow = tableDataList.value[oldIndex]
+      const relatedRow = tableDataList.value[newIndex]
       moveCategory({
         id: draggedRow.id,
         brother_id: relatedRow.id,
-        type: newIndex > oldIndex ? 'after' : 'before'
+        type: newIndex > oldIndex ? 'after' : 'before',
       }).then(() => {
         // 修复拖拽后数据顺序不对的问题
         if (oldIndex < newIndex) {
-          tableData = []
+          tableData.value = []
         }
         handleUpdate()
       })
-    }
+    },
   })
 }
 
 // 展开行
-let expandRowKeys = $ref<string[]>([])
+const expandRowKeys = ref<string[]>([])
 function onExpandChange(row: ICategory, expanded: boolean) {
   if (expanded) {
-    expandRowKeys.push(row.id)
+    expandRowKeys.value.push(row.id)
   } else {
-    expandRowKeys = expandRowKeys.filter(id => id !== row.id)
+    expandRowKeys.value = expandRowKeys.value.filter((id) => id !== row.id)
   }
 }
 
@@ -188,7 +188,7 @@ const rebuildData = (value: any, arr: any) => {
       const ab = rebuildData(value, element.children)
       const obj = {
         ...element,
-        children: ab
+        children: ab,
       }
       newArr.push(obj)
     } else {
@@ -197,7 +197,7 @@ const rebuildData = (value: any, arr: any) => {
         const ab = rebuildData(value, element.children)
         const obj = {
           ...element,
-          children: ab
+          children: ab,
         }
         if (ab && ab.length > 0) {
           newArr.push(obj)
@@ -222,8 +222,7 @@ onMounted(() => {
       :expand-row-keys="expandRowKeys"
       @expand-change="onExpandChange"
       border
-      stripe
-    >
+      stripe>
       <el-button
         type="primary"
         @click="handleAddCategory"
@@ -257,6 +256,5 @@ onMounted(() => {
     :isEdit="isEdit"
     :title="title"
     :prevCategoryName="prevCategoryName"
-    v-if="dialogVisible"
-  />
+    v-if="dialogVisible" />
 </template>

src/modules/admin/class/components/AddStudentDialog.vue

@@ -18,7 +18,7 @@ interface Emits {
 
 const classInfo: any = ref({}) // 班级信息
 const multiSelection = ref([])
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getRelationClassStuList,

src/modules/admin/class/components/ClassStudents.vue

@@ -21,7 +21,7 @@ const isShowAddDialog = ref(false)
 const title = ref('')
 const id = ref('')
 const classInfo: any = ref({})
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getClassStuList,

src/modules/admin/class/components/RelatedTerm.vue

@@ -24,7 +24,7 @@ const props = defineProps({
 interface Emits {
   (e: 'update:isRelatingDialog', isRelatingDialog: boolean): void
 }
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getClassSemList,

src/modules/admin/class/views/List.vue

@@ -21,7 +21,7 @@ const isEdit = ref('')
 const isShowClassDialog = ref(false)
 const isShowClassStuDialog = ref(false)
 const isRelatingDialog = ref(false)
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: { httpRequest: getClassList, params: { name: '', organ_id: '' } },
     filters: [

src/modules/admin/pro/views/List.vue

@@ -12,7 +12,7 @@ const title = ref('')
 const id = ref('')
 const isEdit = ref('')
 const isShowProDialog = ref(false)
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: { httpRequest: getProList, params: { name: '' } },
     filters: [{ type: 'input', prop: 'name', label: '专业名称：', placeholder: '专业名称' }],

src/modules/admin/semester/components/AddSemCourse.vue

@@ -24,7 +24,7 @@ const multiSelection = ref([])
 let { list: selectTree }: any = useGetCategoryList()
 const defaultProps = { children: 'children', label: 'category_name', value: 'id' }
 
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getRelationSemCourse,

src/modules/admin/semester/components/SemesterCourse.vue

@@ -19,7 +19,7 @@ const appList = ref()
 const id: any = ref('')
 const isShowCourse = ref(false)
 const semInfo: any = ref({})
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getSemCourse,

src/modules/admin/semester/views/List.vue

@@ -16,7 +16,7 @@ const id = ref('')
 const isEdit = ref('')
 const isShowAddSemDialog = ref(false)
 const isShowSemCourseDialog = ref(false)
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: { httpRequest: getSemList, params: { name: '', organ_id: '' } },
     filters: [

src/modules/admin/staff/views/List.vue

@@ -20,7 +20,7 @@ const title = ref('') // 弹框标题
 const isEdit = ref('')
 const id = ref('')
 const isShowStaffDialog = ref(false)
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getStaffList,

src/modules/admin/teacher/views/Detail.vue

@@ -10,10 +10,10 @@ const store = useMapStore()
 const router = useRouter()
 const route = useRoute()
 const appList = ref()
-const levelList = $computed(() => {
+const levelList = computed(() => {
   return store.getMapValuesByKey('teacher_level')
 })
-const imgDefault = $ref('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')
+const imgDefault = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
 const courseList = ref([])
 const id = route.query.id as string
 const title = route.query.title as string

src/modules/admin/teacher/views/List.vue

@@ -5,7 +5,7 @@ import { useMapStore } from '@/stores/map'
 const store = useMapStore()
 const router = useRouter()
 const appList = ref()
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getTeacherList,

src/modules/course/create/components/stepOneComponents/AddCourseCover.vue

@@ -29,7 +29,7 @@ const changeCover = () => {
 // 封面
 const courseCover = ref('')
 // 课程封面图轮播
-let swiperCovers: [{ id: string; url: string }[]] = $ref([[]])
+const swiperCovers = ref<{ id: string; url: string }[][]>([[]])
 // 获取swiper 自定义左右切换按钮
 let swiper = ref()
 const swiperChange = (type?: string) => {
@@ -40,21 +40,21 @@ getCoverList({ type: '2' }).then(res => {
   const filtersData = res.data.list
   let index = 0
   while (index < filtersData.length) {
-    swiperCovers.push(filtersData.slice(index, (index += 8)))
+    swiperCovers.value.push(filtersData.slice(index, (index += 8)))
   }
-  swiperCovers.forEach((item: any, index: number) => {
+  swiperCovers.value.forEach((item: any, index: number) => {
     if (item.length === 0) {
-      swiperCovers.splice(index, 1)
+      swiperCovers.value.splice(index, 1)
     }
   })
 })
 
-let isSwiperBtn = $ref(0)
+const isSwiperBtn = ref(0)
 const watchSwiper = (index: number) => {
   if (!index) {
-    isSwiperBtn = 0
+    isSwiperBtn.value = 0
   } else {
-    swiperCovers.length === index + 1 ? (isSwiperBtn = 1) : (isSwiperBtn = 2)
+    swiperCovers.value.length === index + 1 ? (isSwiperBtn.value = 1) : (isSwiperBtn.value = 2)
   }
 }
 

src/modules/course/create/components/stepOneComponents/AddCourseData.vue

@@ -43,7 +43,7 @@ const handleAdd = (val: any) => {
   dataList.value.push({ id: val.id, name: val.name, can_download: val.can_download, url: val.url, type: val.type })
   emit('information', dataList.value)
 }
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     columns: [
       { label: '资料名称', prop: 'name', slots: 'table-name' },

src/modules/course/create/components/stepOneComponents/AddTextbook.vue

@@ -44,7 +44,7 @@ const handleAdd = (val: any) => {
   dataList.value = [val]
   emit('information', dataList.value)
 }
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     columns: [
       { label: '数字教材名称', prop: 'name' },

src/modules/course/create/components/stepOneComponents/UploadImg.vue

@@ -5,7 +5,9 @@ import type { UploadProps, UploadUserFile } from 'element-plus'
 import md5 from 'blueimp-md5'
 import { getSignature } from '@/api/base'
 
-const props = withDefaults(defineProps<{ modelValue: string | []; prefix?: string }>(), {
+type UploadFileItem = { name: string; url: string }
+
+const props = withDefaults(defineProps<{ modelValue: string | UploadFileItem[]; prefix?: string }>(), {
   prefix: 'upload/admin/'
 })
 const emit = defineEmits(['update:modelValue'])

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

@@ -9,7 +9,7 @@ const appList = ref()
 // 资源出处 tab触发
 const tabValue = ref('1')
 const path = ref('')
-let tableData: any = $ref({
+const tableData = ref<any>({
   list: [],
   title: '',
   total: '',
@@ -75,7 +75,7 @@ const listOptions = computed(() => {
       },
       callback(data: any) {
         data.list.forEach((item: any) => (item.check_status = false))
-        tableData = data
+        tableData.value = data
         return { list: data.list, total: data.total }
       },
       params: { tab: tabValue, status: '1', authorized: '', name: '', course_id: props.course_id || '' },
@@ -103,7 +103,7 @@ const listOptions = computed(() => {
       { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
       { label: '更新日期', prop: 'updated_time', align: 'center' },
     ],
-    data: tableData.list,
+    data: tableData.value.list,
   }
 })
 // tab切换
@@ -143,38 +143,38 @@ if (props.btnInfo.resource_type === '2') {
   path.value = '/resource/other/view'
 }
 
-let checkName = $ref('全选')
+const checkName = ref('全选')
 // 写到这了
 const checkboxAll = function () {
-  const data = tableData.list.reduce((a: any, b: any) => {
+  const data = tableData.value.list.reduce((a: any, b: any) => {
     if (b.check_status) a.push(b)
     return a
   }, [])
-  if (data.length === tableData.list.length) {
-    tableData.list.map((item: any) => {
+  if (data.length === tableData.value.list.length) {
+    tableData.value.list.map((item: any) => {
       item.check_status = false
       return item
     })
-    checkName = '全选'
+    checkName.value = '全选'
   } else {
-    tableData.list.map((item: any) => {
+    tableData.value.list.map((item: any) => {
       item.check_status = true
       return item
     })
-    checkName = '取消全选'
+    checkName.value = '取消全选'
   }
 }
 
 const checkboxSelect = function () {
-  const data = tableData.list.reduce((a: any, b: any) => {
+  const data = tableData.value.list.reduce((a: any, b: any) => {
     if (b.check_status) a.push(b)
     return a
   }, [])
-  data.length !== tableData.list.length ? (checkName = '全选') : (checkName = '取消全选')
+  data.length !== tableData.value.list.length ? (checkName.value = '全选') : (checkName.value = '取消全选')
 }
 
 const addVideo = function () {
-  const data = tableData.list.filter((item: any) => item.check_status === true)
+  const data = tableData.value.list.filter((item: any) => item.check_status === true)
   data.forEach((item: any, index: number) => {
     addRequest(item, index, data)
   })
@@ -208,14 +208,14 @@ const changeCard = () => {
   isCard.value = !isCard.value
 }
 
-let checkBox = $ref([])
+const checkBox = ref<any[]>([])
 const select = function (row: any) {
-  checkBox = row
+  checkBox.value = row
 }
 
 const addVideoList = function () {
-  checkBox.forEach((item: any, index: number) => {
-    addRequest(item, index, checkBox)
+  checkBox.value.forEach((item: any, index: number) => {
+    addRequest(item, index, checkBox.value)
   })
 }
 </script>

src/modules/course/create/views/StepOne.vue

@@ -33,7 +33,7 @@ const majorList: any = ref([])
 const allMajorList: any = ref([])
 
 // is 编辑 新建
-const isUpdate = $computed(() => {
+const isUpdate = computed(() => {
   return !!route.query.id
 })
 
@@ -42,8 +42,8 @@ interface ICourseList {
   value: string
 }
 
-const ruleFormRef = $ref<FormInstance>()
-const ruleFormRef2 = $ref<FormInstance>()
+const ruleFormRef = ref<FormInstance>()
+const ruleFormRef2 = ref<FormInstance>()
 
 // 课程类型
 const courseType = computed<ICourseList[]>(() => {
@@ -118,9 +118,9 @@ const information: any = ref([])
 const textbookInfo: any = ref([])
 
 // 获取详情
-let loading = $ref<boolean>(false)
+const loading = ref<boolean>(false)
 function fetchDetail() {
-  loading = true
+  loading.value = true
   getCourseDetails({ id }).then((res: any) => {
     Object.assign(form, res.data)
     examList.value = res.data.examinations
@@ -137,11 +137,13 @@ function fetchDetail() {
       })
       // res.data.books[0]?.book_id
     }
-    loading = false
+    loading.value = false
   })
 }
 onMounted(() => {
-  isUpdate && fetchDetail()
+  if (isUpdate.value) {
+    fetchDetail()
+  }
 })
 
 watchEffect(() => {
@@ -153,7 +155,7 @@ watchEffect(() => {
 watch(
   () => form.lecturer_id,
   () => {
-    ruleFormRef?.validateField('lecturer_id')
+    ruleFormRef.value?.validateField('lecturer_id')
   }
 )
 
@@ -163,9 +165,9 @@ function setDefaultData(data: any[] = []) {
 
 // 提交
 function handleSubmit() {
-  Promise.all([ruleFormRef.validate(), ruleFormRef2.validate()])
+  Promise.all([ruleFormRef.value!.validate(), ruleFormRef2.value!.validate()])
     .then(() => {
-      isUpdate ? handleUpdate() : handleCreate()
+      isUpdate.value ? handleUpdate() : handleCreate()
     })
     .catch(() => {
       ElMessage.error('请检查表单是否填写完整')

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

@@ -26,7 +26,7 @@ const getResourceData = (id: string) => {
 }
 
 // 切换视频
-let videoIndex = $ref(0)
+const videoIndex = ref(0)
 
 const videoOptions = computed(() => {
   return {
@@ -39,13 +39,15 @@ const videoOptions = computed(() => {
     ]
   }
 })
-const video = $computed<{ id: string }>(() => {
-  return props.data[videoIndex]
+const video = computed<{ id: string }>(() => {
+  return props.data[videoIndex.value]
 })
 watch(
-  () => videoIndex,
+  videoIndex,
   () => {
-    getResourceData(video.id)
+    if (video.value?.id) {
+      getResourceData(video.value.id)
+    }
   },
   { immediate: true }
 )
@@ -55,15 +57,17 @@ watch(
   () => {
     if (route.query.type === '2') {
       const index = props.data.findIndex((item: any) => item.id === route.query.resid)
-      videoIndex = index !== -1 ? index : 0
+      videoIndex.value = index !== -1 ? index : 0
+    }
+    if (video.value?.id) {
+      getResourceData(video.value.id)
     }
-    getResourceData(video.id)
   },
   { immediate: true }
 )
 
 const changeVideo = (index: number) => {
-  videoIndex = index
+  videoIndex.value = index
 }
 const chapterHeight: any = ref(0)
 const chapterWidth: any = ref(0)

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

@@ -13,7 +13,7 @@ const id = route.query.id as string
 
 const courseDetails: any = ref({})
 
-let chapters = $ref([])
+const chapters = ref<any[]>([])
 onMounted(() => {
   // 课程详情
   handleGetViewCourseDetails()
@@ -22,7 +22,7 @@ const handleGetViewCourseDetails = () => {
   getViewCourseDetails({ id: id }).then((res: any) => {
     courseDetails.value = res.data
     if (courseDetails.value.chapters[0]?.children) {
-      chapters = courseDetails.value.chapters[0].children.reduce((a: any, b: any) => {
+      chapters.value = courseDetails.value.chapters[0].children.reduce((a: any, b: any) => {
         b.children.map((item: any, index: number) => {
           index === 0 ? (item.show = true) : (item.show = false)
           return item

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

@@ -38,7 +38,7 @@ const tabChange = () => {
   appList.value.refetch()
 }
 
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   const columns = [
     {
       label: '课件标题',

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

@@ -13,14 +13,25 @@ const route = useRoute()
 const id = route.query.id as string
 
 // is 编辑 新建
-const isUpdate = $computed(() => {
+const isUpdate = computed(() => {
   return !!route.query.id
 })
 
+const form: any = reactive({
+  file: [],
+  name: '',
+  source: '2',
+  classification: '',
+  knowledge_points: '',
+  url: '',
+  type: '',
+  size: ''
+})
+
 // 编辑数据回显
-if (isUpdate) {
+if (isUpdate.value) {
   getCourseDetails({ id: id }).then((res: any) => {
-    form = res.data
+    Object.assign(form, res.data)
     form.file = [
       {
         name: res.data.name,
@@ -38,18 +49,6 @@ const defaultProps = {
   value: 'id'
 }
 
-// form表单
-let form: any = $ref({
-  file: [],
-  name: '',
-  source: '2',
-  classification: '',
-  knowledge_points: '',
-  url: '',
-  type: '',
-  size: ''
-})
-
 // 监听文件上传
 watch(
   () => form.file,
@@ -86,7 +85,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       form.size = size
       const params = Object.assign({}, form)
       delete params.file
-      if (isUpdate) {
+      if (isUpdate.value) {
         params.id = id
         updateResources(params)
       } else {

src/modules/resource/dashboard/views/Index.vue

@@ -4,7 +4,7 @@ import Newest from '../components/Newest.vue'
 import Hottest from '../components/Hottest.vue'
 import RecentLearning from '../components/RecentLearning.vue'
 import { getUtilData } from '../api'
-let flag = $ref(false)
+const flag = ref(false)
 const data = reactive<{ statistics: object[]; latest: object[]; hot: object[]; learn: object[] }>({
   statistics: [],
   latest: [],
@@ -14,7 +14,7 @@ const data = reactive<{ statistics: object[]; latest: object[]; hot: object[]; l
 
 // 所有数据
 getUtilData().then(res => {
-  flag = true
+  flag.value = true
   let { latest = [], hot = [], learn = [] }: { latest: object[]; hot: object[]; learn: object[] } = res.data
   if (learn === null) learn = []
   // 统计资源数据整合

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

@@ -38,7 +38,7 @@ const tabChange = () => {
   appList.value.refetch()
 }
 
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   const columns = [
     {
       label: '教案标题',

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

@@ -13,14 +13,25 @@ const route = useRoute()
 const id = route.query.id as string
 
 // is 编辑 新建
-const isUpdate = $computed(() => {
+const isUpdate = computed(() => {
   return !!route.query.id
 })
 
+const form: any = reactive({
+  file: [],
+  name: '',
+  source: '2',
+  classification: '',
+  knowledge_points: '',
+  url: '',
+  type: '',
+  size: ''
+})
+
 // 编辑数据回显
-if (isUpdate) {
+if (isUpdate.value) {
   getLessonDetails({ id: id }).then((res: any) => {
-    form = res.data
+    Object.assign(form, res.data)
     form.file = [
       {
         name: res.data.name,
@@ -38,18 +49,6 @@ const defaultProps = {
   value: 'id'
 }
 
-// form表单
-let form: any = $ref({
-  file: [],
-  name: '',
-  source: '2',
-  classification: '',
-  knowledge_points: '',
-  url: '',
-  type: '',
-  size: ''
-})
-
 // 监听文件上传
 watch(
   () => form.file,
@@ -87,7 +86,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       form.size = size
       const params = Object.assign({}, form)
       delete params.file
-      if (isUpdate) {
+      if (isUpdate.value) {
         params.id = id
         updateResources(params)
       } else {

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

@@ -39,7 +39,7 @@ const defaultProps = {
   value: 'id',
 }
 
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   const columns = [
     {
       label: '其他标题',

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

@@ -13,14 +13,25 @@ const route = useRoute()
 const id = route.query.id as string
 
 // is 编辑 新建
-const isUpdate = $computed(() => {
+const isUpdate = computed(() => {
   return !!route.query.id
 })
 
+const form: any = reactive({
+  file: [],
+  name: '',
+  source: '2',
+  classification: '',
+  knowledge_points: '',
+  url: '',
+  type: '',
+  size: ''
+})
+
 // 编辑数据回显
-if (isUpdate) {
+if (isUpdate.value) {
   getOtherDetails({ id: id }).then((res: any) => {
-    form = res.data
+    Object.assign(form, res.data)
     form.file = [
       {
         name: res.data.name,
@@ -38,18 +49,6 @@ const defaultProps = {
   value: 'id'
 }
 
-// form表单
-let form: any = $ref({
-  file: [],
-  name: '',
-  source: '2',
-  classification: '',
-  knowledge_points: '',
-  url: '',
-  type: '',
-  size: ''
-})
-
 // 监听文件上传
 watch(
   () => form.file,
@@ -89,7 +88,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       form.size = size
       const params = Object.assign({}, form)
       delete params.file
-      if (isUpdate) {
+      if (isUpdate.value) {
         params.id = id
         updateResources(params)
       } else {

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

@@ -17,13 +17,13 @@ interface Emits {
   (e: 'update:modelValue', modelValue: boolean): void
   (e: 'update'): void
 }
-const uploadMultipleVideoRef = $ref<InstanceType<typeof UploadMultipleVideo> | null>(null)
+const uploadMultipleVideoRef = ref<InstanceType<typeof UploadMultipleVideo> | null>(null)
 const handleConfirm = () => {
   emit('update:modelValue', false)
   emit('update')
 }
 const handleCancel = () => {
-  const fileList = uploadMultipleVideoRef?.uploader?._uploadList || []
+  const fileList = uploadMultipleVideoRef.value?.uploader?._uploadList || []
   if (fileList.length) {
     for (const item of fileList) {
       if (item.state === 'Uploading') {

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

@@ -5,7 +5,9 @@ import type { UploadProps, UploadUserFile } from 'element-plus'
 import md5 from 'blueimp-md5'
 import { getSignature } from '@/api/base'
 
-const props = withDefaults(defineProps<{ modelValue: string | []; prefix?: string }>(), {
+type UploadFileItem = { name: string; url: string }
+
+const props = withDefaults(defineProps<{ modelValue: string | UploadFileItem[]; prefix?: string }>(), {
   prefix: 'upload/admin/'
 })
 const emit = defineEmits(['update:modelValue'])

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

@@ -27,7 +27,7 @@ interface UploadInfo {
 const emit = defineEmits(['upload', 'canClose'])
 
 let uploader = createUploader()
-let fileList = $ref<UploadInfo[]>([])
+const fileList = ref<UploadInfo[]>([])
 
 const fileChange = (event: Event) => {
   const element = event.currentTarget as HTMLInputElement
@@ -35,18 +35,18 @@ const fileChange = (event: Event) => {
   if (!files) return
   for (const file of files) {
     // 是否重复上传
-    const hasRepeat = !!fileList.find(
+    const hasRepeat = !!fileList.value.find(
       item =>
         item.file.name === file.name && item.file.size === file.size && item.file.lastModified === file.lastModified
     )
     !hasRepeat && uploader.addFile(file, null, null, null, '{"Vod":{}}')
   }
   uploader.startUpload()
-  fileList = uploader._uploadList
+  fileList.value = uploader._uploadList
 }
 function updateFileList(uploadInfo: UploadInfo) {
   if (!uploadInfo) return
-  fileList = fileList.map(item => {
+  fileList.value = fileList.value.map(item => {
     if (item.ri === uploadInfo.ri) {
       return { ...item, ...uploadInfo }
     }
@@ -134,10 +134,10 @@ function percentage(value: number) {
 // 删除上传文件
 const deleteFile = function (index: number) {
   console.log(index, 'deleteFile', fileList)
-  fileList.splice(index, 1)
+  fileList.value.splice(index, 1)
   uploader.deleteFile(index)
 }
-defineExpose({ uploader, fileList: $$(fileList) })
+defineExpose({ uploader, fileList })
 </script>
 <template>
   <div class="upload-video" style="display: flex; flex-direction: column; align-items: flex-start">

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

@@ -12,7 +12,7 @@ interface IUpload {
   progress?: number
   videoId?: string
 }
-let uploadData = $ref<IUpload>({ code: -1 })
+const uploadData = ref<IUpload>({ code: -1 })
 
 const emit = defineEmits(['upload'])
 const form: any = reactive({
@@ -92,7 +92,7 @@ const createUploader: any = () => {
           })
         }
       }
-      uploadData = {
+      uploadData.value = {
         code: 1,
         name: uploadInfo.file.name,
         msg: '开始上传'
@@ -101,7 +101,7 @@ const createUploader: any = () => {
     // 文件上传成功
     onUploadSucceed: function (uploadInfo: any) {
       const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {}
-      uploadData = {
+      uploadData.value = {
         code: 0,
         name: uploadInfo.file.name,
         videoId: fileData.videoId,
@@ -112,7 +112,7 @@ const createUploader: any = () => {
     // 文件上传失败
     // code:any, message:any
     onUploadFailed: function (uploadInfo: any) {
-      uploadData = {
+      uploadData.value = {
         code: 2,
         name: uploadInfo.file.name,
         msg: '文件上传失败'
@@ -122,7 +122,7 @@ const createUploader: any = () => {
     onUploadProgress: function (uploadInfo: any, totalSize: any, progress: any) {
       let progressPercent = Math.ceil(progress * 100)
       form.authProgress = progressPercent
-      uploadData.progress = progressPercent
+      uploadData.value.progress = progressPercent
     },
     // 上传凭证超时
     onUploadTokenExpired: function (uploadInfo: any) {

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

 <script setup lang="ts">
 import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
 const props = defineProps(['data'])
-const videoOptions = $computed(() => {
+const videoOptions = computed(() => {
   return {
     sources: [
       {

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

@@ -21,7 +21,7 @@ const form = reactive({
 //   (e: 'update:modelValue', modelValue: boolean): void
 //   (e: 'update'): void
 // }
-const uploadMultipleVideoRef = $ref<InstanceType<typeof UploadMultipleVideo> | null>(null)
+const uploadMultipleVideoRef = ref<InstanceType<typeof UploadMultipleVideo> | null>(null)
 // const handleConfirm = () => {
 //   emit('update:modelValue', false)
 //   emit('update')

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

@@ -11,19 +11,19 @@ const appList = ref()
 
 const id = router.currentRoute.value.query.id as string
 // 获取视频详情、课件列表
-let videoDetails:any = $ref({})
-let videoPpt:any = $ref([])
+const videoDetails = ref<any>({})
+const videoPpt = ref<any[]>([])
 
 const listDetail = () => {
   getVideoPpt({ id: id }).then(res => {
-    videoDetails = res.data.video
-    videoPpt = res.data.ppts
+    videoDetails.value = res.data.video
+    videoPpt.value = res.data.ppts
   })
 }
 listDetail()
 
 // 视频课件列表
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     columns: [
       { label: '课程图片', slots: 'table-cover', align: 'center' },
@@ -31,18 +31,18 @@ const listOptions = $computed(() => {
       { label: '时码', prop: 'point', align: 'center' },
       { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
     ],
-    data: videoPpt
+    data: videoPpt.value
   }
 })
 
 // 新增弹窗
 const dialogFormVisible = ref(false)
-const covers:any = $ref([])
-const coverList: any = $ref([])
+const covers = ref<any[]>([])
+const coverList = ref<any[]>([])
 const coverRemove: any = []
 // 监听图片上传后 组合成table所用的数据
 watch(
-  () => covers,
+  covers,
   value => {
     coverRemove.map((item: any) => {
       const index = value.findIndex((i:any) => i.url === item )
@@ -51,9 +51,9 @@ watch(
       }
     })
     value.forEach((item: any, index: number) => {
-      const findItem = coverList.find((i:any) => i.url === item.url)
+      const findItem = coverList.value.find((i:any) => i.url === item.url)
       if (!findItem) {
-        coverList.push({
+        coverList.value.push({
           name: item.name,
           url: item.url,
           point: '',
@@ -64,7 +64,7 @@ watch(
   }
 )
 // 添加课程的列表
-const uploadList = $computed(() => {
+const uploadList = computed(() => {
   return {
     columns: [
       { label: '课程图片', slots: 'table-cover', align: 'center' },
@@ -72,13 +72,13 @@ const uploadList = $computed(() => {
       { label: '时码', slots: 'table-input', align: 'center' },
       { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
     ],
-    data: coverList
+    data: coverList.value
   }
 })
 // 提交课程列表
 const submitCourseList = () => {
   let flag = false
-  coverList.forEach((item: any) => {
+  coverList.value.forEach((item: any) => {
     if (item.point === '') {
       ElMessage('时间码不能为空')
       flag = true
@@ -86,7 +86,7 @@ const submitCourseList = () => {
     }
   })
   if (!flag) {
-    createPpt({ id: id, ppts: JSON.stringify(coverList) }).then((res:any) => {
+    createPpt({ id: id, ppts: JSON.stringify(coverList.value) }).then((res:any) => {
       if (res.code === 0) {
         listDetail()
         ElMessage({
@@ -101,7 +101,7 @@ const submitCourseList = () => {
 // 删除上传的列表
 const deleteUploadList = (index: number, url: string) => {
   coverRemove.push(url)
-  coverList.splice(index, 1)
+  coverList.value.splice(index, 1)
 }
 
 // 修改时间码

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

@@ -37,7 +37,7 @@ const tabChange = () => {
 // 列表切换
 const isCard = useStorage('isCard', true)
 // table 数据
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   const columns = [
     {
       label: '视频标题',

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

@@ -15,12 +15,12 @@ const route = useRoute()
 const id = route.query.id as string
 
 // is 编辑 新建
-const isUpdate = $computed(() => {
+const isUpdate = computed(() => {
   return !!route.query.id
 })
 
 // 编辑数据回显
-if (isUpdate) {
+if (isUpdate.value) {
   getVideoDetails({ id: id }).then((res: any) => {
     form.data = res.data
   })
@@ -35,17 +35,17 @@ const defaultProps = {
 }
 
 // 视频封面图轮播
-let swiperCovers: [{ id: string; url: string }[]] = $ref([[]])
+const swiperCovers = ref<{ id: string; url: string }[][]>([[]])
 // 获取封面
 getCoverList().then(res => {
   const filtersData = res.data.list.filter((i: any) => i.type === '1')
   let index = 0
   while (index < filtersData.length) {
-    swiperCovers.push(filtersData.slice(index, (index += 8)))
+    swiperCovers.value.push(filtersData.slice(index, (index += 8)))
   }
-  swiperCovers.forEach((item: any, index: number) => {
+  swiperCovers.value.forEach((item: any, index: number) => {
     if (item.length === 0) {
-      swiperCovers.splice(index, 1)
+      swiperCovers.value.splice(index, 1)
     }
   })
 })
@@ -81,7 +81,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         ElMessage('请勾选用户协议')
         return
       }
-      if (isUpdate) {
+      if (isUpdate.value) {
         updateResources()
       } else {
         createResources()
@@ -144,12 +144,12 @@ const uploadVideo = (data: any) => {
   form.data.name = name.slice(0, name.lastIndexOf('.'))
 }
 
-let isSwiperBtn = $ref(0)
+const isSwiperBtn = ref(0)
 const watchSwiper = (index: number) => {
   if (!index) {
-    isSwiperBtn = 0
+    isSwiperBtn.value = 0
   } else {
-    swiperCovers.length === index + 1 ? (isSwiperBtn = 1) : (isSwiperBtn = 2)
+    swiperCovers.value.length === index + 1 ? (isSwiperBtn.value = 1) : (isSwiperBtn.value = 2)
   }
 }
 

src/modules/system/cover/views/List.vue

@@ -8,7 +8,7 @@ const appList = ref()
 const isShowDialog = ref(false)
 const isEdit = ref(false)
 const editData = ref({})
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getCoverList,

src/modules/system/dictionary/views/List.vue

@@ -13,7 +13,7 @@ const store = useMapStore()
 
 // 状态
 //表单每行数据
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getDictionaryList,

src/modules/system/suggestion/views/List.vue

@@ -8,7 +8,7 @@ const status = ref('')
 // const userList: any = ref([])
 // 状态
 //表单每行数据
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getSuggestionList,

src/modules/teach/exam/components/QuestionItem.vue

@@ -24,8 +24,7 @@ const props = defineProps({
 })
 const showComment = ref(false) // 评论框显示状态
 const reviews = ref('') // 评语
-let questionData: any = $ref({}) // 题目数据
-questionData = Object.assign({}, props.question)
+const questionData: any = reactive(Object.assign({}, props.question)) // 题目数据
 // 题目类型
 const questionType = computed(() => {
   // 1单选，2多选，3简答，5案例题， 6判断， 7实操，8情景

src/modules/teach/exam/views/List.vue

@@ -4,7 +4,7 @@ import { getPaperList, getSearchList } from '../api'
 const router = useRouter()
 const appList = ref()
 const courseListCategory: any = ref([])
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: { httpRequest: getPaperList, params: { course_id: '', paper_name: '' } },
     filters: [

src/modules/teach/exam/views/StudentList.vue

@@ -8,7 +8,7 @@ const appList = ref()
 const classId = ref('')
 const classList: any = ref([])
 const stuList: any = ref([])
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getPaperStuList,

src/modules/teach/posts/components/AddPostDialog.vue

@@ -169,10 +169,10 @@ const handleChangeCourse = () => {
   form.chapter_id = ''
   chapterList.value = []
 }
-const videoLimit = $computed(() => {
+const videoLimit = computed(() => {
   return form.files.filter((item: any) => item.url.includes('.mp4'))
 })
-const imgLimit = $computed(() => {
+const imgLimit = computed(() => {
   return form.files.filter(
     (item: any) => item.url.includes('.png') || item.url.includes('.jpg') || item.url.includes('.jpeg')
   )
@@ -187,11 +187,11 @@ const beforeUploadFiles = (file: any) => {
     ElMessage.warning('图片大小不能超过2MB')
     return false
   }
-  if (imgLimit.length >= 10 && (file.url.includes('.png') || file.url.includes('.jpg') || file.url.includes('.jpeg'))) {
+  if (imgLimit.value.length >= 10 && (file.url.includes('.png') || file.url.includes('.jpg') || file.url.includes('.jpeg'))) {
     ElMessage.warning('最多只能上传10张图片')
     return false
   }
-  if (videoLimit.length >= 1 && file.url.includes('.mp4')) {
+  if (videoLimit.value.length >= 1 && file.url.includes('.mp4')) {
     ElMessage.warning('最多只能上传1个视频')
     return false
   }

src/modules/teach/posts/components/ReplyPostDialog.vue

@@ -28,10 +28,10 @@ const rules = reactive<FormRules>({
   content: [{ required: true, message: '请填写正文内容', trigger: 'blur' }]
 })
 
-const videoLimit = $computed(() => {
+const videoLimit = computed(() => {
   return form.files.filter((item: any) => item.url.includes('.mp4'))
 })
-const imgLimit = $computed(() => {
+const imgLimit = computed(() => {
   return form.files.filter(
     (item: any) => item.url.includes('.png') || item.url.includes('.jpg') || item.url.includes('.jpeg')
   )
@@ -47,11 +47,11 @@ const beforeUploadFiles = (file: any) => {
     ElMessage.warning('图片大小不能超过2MB')
     return false
   }
-  if (imgLimit.length >= 10 && (file.url.includes('.png') || file.url.includes('.jpg') || file.url.includes('.jpeg'))) {
+  if (imgLimit.value.length >= 10 && (file.url.includes('.png') || file.url.includes('.jpg') || file.url.includes('.jpeg'))) {
     ElMessage.warning('最多只能上传10张图片')
     return false
   }
-  if (videoLimit.length >= 1 && file.url.includes('.mp4')) {
+  if (videoLimit.value.length >= 1 && file.url.includes('.mp4')) {
     ElMessage.warning('最多只能上传1个视频')
     return false
   }

src/modules/teach/posts/views/List.vue

@@ -20,7 +20,7 @@ const semesterList: any = ref([])
 const classList: any = ref([])
 const courseList: any = ref([])
 const chapterList: any = ref([])
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       params: {

src/modules/teach/qa/views/List.vue

@@ -3,7 +3,7 @@
 import ReplyDialog from '../components/ReplyDialog.vue'
 const appList = ref()
 const isShowReplyDialog = ref(false)
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     // remote: { httpRequest: getProList, params: { name: '' } },
     filters: [

src/modules/teach/work/views/List.vue

@@ -9,7 +9,7 @@ const course_id = ref('')
 const searchCourseList: any = ref([])
 const searchClassList: any = ref([])
 
-const listOptions = $computed(() => {
+const listOptions = computed(() => {
   return {
     remote: {
       httpRequest: getWorkList,

vite.config.ts

@@ -11,9 +11,9 @@ import mkcert from 'vite-plugin-mkcert'
 export default defineConfig(({ mode }) => ({
   base: mode === 'prod' ? 'https://webapp-pub.ezijing.com/website/prod/center-resource/' : '/',
   plugins: [
-    vue({ reactivityTransform: true }),
+    vue(),
     AutoImport({
-      imports: ['vue', 'vue/macros', 'vue-router', '@vueuse/core'],
+      imports: ['vue', 'vue-router', '@vueuse/core'],
       dts: true,
       eslintrc: { enabled: true }
     }),