refactor: rename code

src/router/index.ts

@@ -7,9 +7,9 @@ import type { RouteRecordRaw } from 'vue-router'
 const routes: RouteRecordRaw[] = [
   { path: '/sign-in', name: 'signin', component: () => import('@/views/sign-in/index.vue') },
   {
-    name: 'notfound',
+    name: 'errorPage',
     path: '/:pathMatch(.*)*',
-    component: () => import('@/views/not-found/index.vue'),
+    component: () => import('@/views/error-page/index.vue'),
   },
 ]
 

src/router/record.ts

@@ -195,10 +195,10 @@ export const routeRecordRaw: MergeMenuMixedOption[] = [
     meta: {
       componentName: 'notfoundPage404',
     },
-    component: 'not-found/404',
+    component: 'error-page/404',
   },
   {
-    path: '/about/:id?/:name?',
+    path: '/about',
     key: 'about',
     name: 'about',
     icon: 'iconify-[ph--info]',

src/views/about/index.vue

@@ -13,7 +13,7 @@ const { isDark } = usePersonalization()
 
 const { dependencies, devDependencies } = packageJson
 
-const directoryStructure = ref(``)
+const directoryStructureHighlight = ref(``)
 const dependenciesCodeHighlight = ref('')
 const devDependenciesCodeHighlight = ref('')
 
@@ -150,7 +150,7 @@ const dir = `📂 lithe-admin
 watch(
   isDark,
   async (isDark) => {
-    directoryStructure.value = await codeToHtml(dir, {
+    directoryStructureHighlight.value = await codeToHtml(dir, {
       lang: 'markdown',
       theme: isDark ? 'dark-plus' : 'min-light',
     })
@@ -247,7 +247,7 @@ watch(
     <div class="flex gap-x-2">
       <NCard title="目录结构">
         <NScrollbar container-style="max-height: 1100px;">
-          <div v-html="directoryStructure"></div>
+          <div v-html="directoryStructureHighlight"></div>
         </NScrollbar>
       </NCard>
       <NCard title="依赖信息">

src/views/data-show/data-form/index.vue

@@ -79,7 +79,7 @@ const rules: FormRules = {
   name: { required: true, message: '请输入用户名' },
 }
 
-const hobbyList = [
+const hobbyOptions = [
   {
     value: '唱',
     label: '唱',
@@ -352,7 +352,7 @@ watch(
                     <NCheckboxGroup v-model:value="form.hobby">
                       <div>
                         <NCheckbox
-                          v-for="{ value, label } in hobbyList"
+                          v-for="{ value, label } in hobbyOptions"
                           :key="value"
                           :value="value"
                           :label="label"

src/views/data-show/data-table/index.vue

@@ -79,15 +79,15 @@ const sexOptions = [
   { label: '女', value: '女' },
 ]
 
-const loading = ref(false)
-const striped = ref(false)
-const scrollX = ref(true)
-const singleLine = ref(true)
-const showDropdown = ref(false)
+const isRequestLoading = ref(false)
+const enableStriped = ref(false)
+const enableScrollX = ref(true)
+const enableSingleLine = ref(true)
 const enableContextmenu = ref(true)
+const showDropdown = ref(false)
 const contextmenuId = ref<number | string | null>(null)
 
-const userList = ref<UserInfo[]>([])
+const dataList = ref<UserInfo[]>([])
 
 const checkedRowKeys = ref<Array<number | string>>([])
 
@@ -97,7 +97,7 @@ const CellActions = (row: UserInfo) => (
       secondary
       type='primary'
       size='small'
-      onClick={() => createOrEditUser(row)}
+      onClick={() => createOrEditData(row)}
     >
       编辑
     </NButton>
@@ -218,7 +218,7 @@ const columns: DataTableColumns<UserInfo> = [
       <ShowOrEdit
         value={row.fullName}
         onUpdateValue={(value) => {
-          userList.value[index].fullName = value
+          dataList.value[index].fullName = value
         }}
       />
     ),
@@ -315,16 +315,16 @@ const pagination = reactive<PaginationProps>({
   showQuickJumpDropdown: true,
   onUpdatePage: (page: number) => {
     pagination.page = page
-    getUserList()
+    getDataList()
   },
   onUpdatePageSize: (pageSize: number) => {
     pagination.pageSize = pageSize
     pagination.page = 1
-    getUserList()
+    getDataList()
   },
 })
 
-const prevItemCount = ref(0)
+const prevUserListTotal = ref(0)
 
 const paginationPrefix: PaginationProps['prefix'] = (info) => {
   const { itemCount } = info
@@ -333,10 +333,10 @@ const paginationPrefix: PaginationProps['prefix'] = (info) => {
       <div>
         <span>总&nbsp;</span>
         <NNumberAnimation
-          from={prevItemCount.value}
+          from={prevUserListTotal.value}
           to={itemCount}
           onFinish={() => {
-            prevItemCount.value = itemCount
+            prevUserListTotal.value = itemCount
           }}
         />
         <span>&nbsp;条</span>
@@ -377,7 +377,7 @@ function inputOnlyAllowNumber(value: string) {
   return !value || /^\d+$/.test(value)
 }
 
-function createOrEditUser(data?: UserInfo) {
+function createOrEditData(data?: UserInfo) {
   const title = data ? '编辑数据' : '新增数据'
 
   const handleSubmitClick = () => {
@@ -415,7 +415,7 @@ function createOrEditUser(data?: UserInfo) {
 const handleQueryClick = () => {
   formRef.value?.validate((errors) => {
     if (!errors) {
-      getUserList()
+      getDataList()
     }
   })
 }
@@ -425,18 +425,18 @@ function handleDownloadCsvClick() {
   dataTableRef.value.downloadCsv()
 }
 
-async function getUserList() {
-  loading.value = true
+async function getDataList() {
+  isRequestLoading.value = true
   const pageSize = pagination.pageSize || 10
   const res = await request(pageSize).finally(() => {
-    loading.value = false
+    isRequestLoading.value = false
   })
 
-  userList.value = res.data
+  dataList.value = res.data
   pagination.itemCount = 300
 }
 
-getUserList()
+getDataList()
 </script>
 <template>
   <div class="main-wrap flex flex-col gap-y-2 p-4">
@@ -500,7 +500,7 @@ getUserList()
         <div class="flex gap-2">
           <NButton
             type="success"
-            @click="createOrEditUser()"
+            @click="createOrEditData()"
           >
             <template #icon>
               <span class="iconify ph--plus-circle" />
@@ -510,8 +510,8 @@ getUserList()
           <NButton
             type="info"
             @click="handleQueryClick"
-            :loading="loading"
-            :disabled="loading"
+            :loading="isRequestLoading"
+            :disabled="isRequestLoading"
           >
             <template #icon>
               <span class="iconify ph--magnifying-glass" />
@@ -535,15 +535,15 @@ getUserList()
           v-model:checked-row-keys="checkedRowKeys"
           :remote="true"
           :max-height="maxHeight"
-          :scroll-x="scrollX ? 1800 : 0"
+          :scroll-x="enableScrollX ? 1800 : 0"
           :min-height="166.6"
           :columns="columns"
-          :data="userList"
+          :data="dataList"
           :row-key="(row) => row.id"
-          :loading="loading"
-          :striped="striped"
+          :loading="isRequestLoading"
+          :striped="enableStriped"
           :row-props="rowProps"
-          :single-line="singleLine"
+          :single-line="enableSingleLine"
         />
         <div class="mt-3 flex items-end justify-between">
           <div class="flex items-center gap-x-3">
@@ -553,22 +553,22 @@ getUserList()
               :ghost="true"
             >
               <NButton
-                @click="striped = !striped"
-                :type="striped ? 'primary' : 'default'"
+                @click="enableStriped = !enableStriped"
+                :type="enableStriped ? 'primary' : 'default'"
                 secondary
               >
                 条纹风格
               </NButton>
               <NButton
-                @click="singleLine = !singleLine"
-                :type="!singleLine ? 'primary' : 'default'"
+                @click="enableSingleLine = !enableSingleLine"
+                :type="!enableSingleLine ? 'primary' : 'default'"
                 secondary
               >
                 单线风格
               </NButton>
               <NButton
-                @click="scrollX = !scrollX"
-                :type="scrollX ? 'primary' : 'default'"
+                @click="enableScrollX = !enableScrollX"
+                :type="enableScrollX ? 'primary' : 'default'"
                 secondary
               >
                 横向滚动

src/views/draggable/index.vue

@@ -34,21 +34,21 @@ const gridList = ref(
   })),
 )
 
-const cloneList = ref(
+const taskList = ref(
   Object.keys(Array.from({ length: 5 }).fill(0)).map((item) => ({
     name: `任务-${item}`,
     id: `任务-${item}`,
   })),
 )
 
-const cloneList2 = ref<{ name: string; id: string; key: string }[]>([])
+const cloneTaskList = ref<{ name: string; id: string; key: string }[]>([])
 
 const baseDragRef = ref<UseDraggableReturn>()
 const gridDragRef = ref<UseDraggableReturn>()
-const cloneDragRef = ref<UseDraggableReturn>()
-const cloneDragRef2 = ref<UseDraggableReturn>()
+const taskDragRef = ref<UseDraggableReturn>()
+const cloneTaskListDragRef = ref<UseDraggableReturn>()
 
-function clone(element: Record<'name' | 'id', string>) {
+function cloneTask(element: Record<'name' | 'id', string>) {
   return {
     name: `${element.name}`,
     id: `${element.id}`,
@@ -56,15 +56,15 @@ function clone(element: Record<'name' | 'id', string>) {
   }
 }
 
-function remove(element: Record<'name' | 'id' | 'key', string>) {
-  const find = cloneList2.value.find((item) => item.key === element.key)
+function removeTask(element: Record<'name' | 'id' | 'key', string>) {
+  const find = cloneTaskList.value.find((item) => item.key === element.key)
   if (find) {
-    cloneList2.value = cloneList2.value.filter((item) => item.key !== element.key)
+    cloneTaskList.value = cloneTaskList.value.filter((item) => item.key !== element.key)
   }
 }
 
 watch(
-  [baseList, gridList, cloneList2, isDark],
+  [baseList, gridList, cloneTaskList, isDark],
   async (newVal) => {
     const [baseList, gridList, cloneList2, isDark] = newVal
     baseListCodeHighlight.value = await codeToHtml(JSON.stringify(baseList, null, 2), {
@@ -189,17 +189,17 @@ watch(
           <div class="flex h-full gap-x-4">
             <NScrollbar>
               <VueDraggable
-                ref="cloneDragRef"
-                v-model="cloneList"
+                ref="taskDragRef"
+                v-model="taskList"
                 :animation="150"
                 :scrollSensitivity="100"
                 ghostClass="ghost"
                 :group="{ name: 'clone', pull: 'clone', put: false }"
                 class="flex flex-col gap-2 rounded bg-neutral-500/5 p-4 select-none"
-                :clone="clone"
+                :clone="cloneTask"
               >
                 <div
-                  v-for="item in cloneList"
+                  v-for="item in taskList"
                   :key="item.id"
                   class="flex h-14 cursor-move items-center justify-center rounded bg-neutral-500/8 p-3"
                 >
@@ -209,13 +209,13 @@ watch(
             </NScrollbar>
             <NScrollbar>
               <EmptyPlaceholder
-                :show="cloneList2.length <= 0"
+                :show="cloneTaskList.length <= 0"
                 description="把左边的任务拖拽到这里"
               >
                 <template #content>
                   <VueDraggable
-                    ref="cloneDragRef2"
-                    v-model="cloneList2"
+                    ref="cloneTaskListDragRef"
+                    v-model="cloneTaskList"
                     :animation="150"
                     :scrollSensitivity="100"
                     ghostClass="ghost"
@@ -224,7 +224,7 @@ watch(
                     style="min-height: 300px"
                   >
                     <div
-                      v-for="item in cloneList2"
+                      v-for="item in cloneTaskList"
                       :key="item.key"
                       class="flex h-14 cursor-move items-center justify-between rounded bg-neutral-500/8 px-4 py-3"
                     >
@@ -233,7 +233,7 @@ watch(
                         quaternary
                         circle
                         size="small"
-                        @click="remove(item)"
+                        @click="removeTask(item)"
                       >
                         <template #icon>
                           <span class="iconify ph--x"></span>

src/views/not-found/404.vue → src/views/error-page/404.vue

@@ -4,7 +4,7 @@ import { reactive } from 'vue'
 
 import router from '@/router'
 
-import NotFound from './index.vue'
+import ErrorPage from './index.vue'
 
 const errorState = reactive({
   code: 404,
@@ -49,7 +49,7 @@ const changeStateCode200 = () => {
       class="absolute flex h-screen w-full items-center justify-center"
       style="padding-bottom: 240px"
     >
-      <NotFound
+      <ErrorPage
         v-bind="errorState"
         container-class="w-full"
         container-style="width: 500px"
@@ -60,7 +60,7 @@ const changeStateCode200 = () => {
           @click="router.push('/404')"
           >路由显示</NButton
         >
-      </NotFound>
+      </ErrorPage>
     </div>
   </div>
 </template>

src/views/not-found/index.vue → src/views/error-page/index.vue

@@ -4,19 +4,23 @@ import { ref, type StyleValue } from 'vue'
 
 import router from '@/router'
 
-interface ErrorProps {
+interface ErrorPageProps {
   code?: number
   content?: string
   containerClass?: string
   containerStyle?: StyleValue
 }
 
+defineOptions({
+  name: 'ErrorPage',
+})
+
 const {
   code = 404,
   content = 'Not Found',
   containerClass,
   containerStyle,
-} = defineProps<ErrorProps>()
+} = defineProps<ErrorPageProps>()
 
 const prevCode = ref(0)
 </script>

src/views/feedback/index.vue

@@ -18,12 +18,12 @@ const { getModalModifier } = useComponentModifier()
 
 const notification = useNotification()
 
-const handleSwitchMessageStateType = () => {
+const handleChangeMessageStateType = () => {
   let counter = 5
 
   let timer: any = null
 
-  const messageInstance = message.create('5秒后 根据状态类型切换图标', {
+  const messageInstance = message.create('5秒后 根据状态类更换换图标', {
     type: 'info',
     duration: 0,
     closable: true,
@@ -37,7 +37,7 @@ const handleSwitchMessageStateType = () => {
       messageInstance.content = `切换图标了`
       return
     }
-    messageInstance.content = `${counter}秒后 根据状态类型切换图标`
+    messageInstance.content = `${counter}秒后 根据状态类更换图标`
   }, 1000)
 }
 
@@ -130,7 +130,7 @@ const handleCreateDialogApi = (type: ModalProps['type'] = 'success') => {
         >
           加载Message
         </NButton>
-        <NButton @click="handleSwitchMessageStateType"> 根据状态切换图标 </NButton>
+        <NButton @click="handleChangeMessageStateType"> 根据状态切换图标 </NButton>
         <NCard
           size="small"
           title="Setup 外使用"