refactor: 组件示例重构

src/components.d.ts

-// 全局组件类型声明
-import Pagination from '@/components/Pagination/index.vue';
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    Pagination: typeof Pagination;
-  }
-}
-export {};

src/components/IconSelect/index.vue

@@ -5,7 +5,7 @@ const props = defineProps({
     require: false
   },
   /**
-   * 选择器宽度
+   * 图标选择器宽度
    */
   width: {
     type: String,
@@ -36,9 +36,8 @@ function loadIcons() {
  * 筛选图标
  */
 function handleIconFilter() {
-  console.log('筛选关键字', filterValue.value);
   if (filterValue.value) {
-    filterIconNames.value = filterIconNames.value.filter(iconName =>
+    filterIconNames.value = iconNames.filter(iconName =>
       iconName.includes(filterValue.value)
     );
   } else {

src/env.d.ts

-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
-
-// 环境变量 TypeScript的智能提示
-interface ImportMetaEnv {
-  VITE_APP_TITLE: string;
-  VITE_APP_PORT: string;
-  VITE_APP_BASE_API: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}

src/types/components.d.ts

@@ -45,21 +45,16 @@ declare module '@vue/runtime-core' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpAddLocation: typeof import('~icons/ep/add-location')['default']
-    IEpAim: typeof import('~icons/ep/aim')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
-    IEpCircleCheckFilled: typeof import('~icons/ep/circle-check-filled')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
     IEpDownload: typeof import('~icons/ep/download')['default']
-    IEpEdit: typeof import('~icons/ep/edit')['default']
-    IEpIcon: typeof import('~icons/ep/icon')['default']
+    IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpTop: typeof import('~icons/ep/top')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']

src/views/component/editor.vue

-<script setup lang="ts">
-import Editor from '@/components/WangEditor/index.vue';
-import { ElForm } from 'element-plus';
-import { reactive, ref, toRefs } from 'vue';
-
-const dataFormRef = ref(ElForm);
-
-const state = reactive({
-  formData: {
-    content: '初始内容'
-  }
-});
-
-const { formData } = toRefs(state);
-</script>
-<template>
-  <div class="app-container">
-    <el-form ref="dataFormRef" :model="formData">
-      <editor v-model="formData.content" style="height: 600px" />
-    </el-form>
-  </div>
-</template>

src/views/demo/editor.vue

+<!-- wangEditor富文本编辑器示例 -->
+<script setup lang="ts">
+import Editor from '@/components/WangEditor/index.vue';
+const value = ref('初始内容');
+</script>
+
+<template>
+  <div class="app-container">
+    <editor v-model="value" style="height: 600px" />
+  </div>
+</template>

src/views/demo/icon-selector.vue

+<!-- 图标选择器 -->
+
+<script setup lang="ts">
+const value = ref('edit');
+</script>
+
+<template>
+  <div class="app-container">
+    <icon-select v-model="value" width="400px" />
+  </div>
+</template>

src/views/component/uploader.vue → src/views/demo/uploader.vue

+<!-- 文件上传组件(单图+多图)示例 -->
 <script setup lang="ts">
 import SingleUpload from '@/components/Upload/SingleUpload.vue';
 import MultiUpload from '@/components/Upload/MultiUpload.vue';
-import { ElForm } from 'element-plus';
-import { reactive, ref, toRefs } from 'vue';
 
-const dataFormRef = ref(ElForm);
+const singlePicUrl = ref(
+  'https://oss.youlai.tech/default/2022/11/20/18e206dae97b40329661537d1e433639.jpg'
+);
 
-const state = reactive({
-  formData: {
-    picUrl:
-      'https://oss.youlai.tech/default/2022/11/20/18e206dae97b40329661537d1e433639.jpg',
-    picUrls: [
-      'https://oss.youlai.tech/default/2022/11/20/8af5567816094545b53e76b38ae9c974.webp',
-      'https://oss.youlai.tech/default/2022/11/20/13dbfd7feaf848c2acec2b21675eb9d3.webp'
-    ]
-  }
-});
-
-const { formData } = toRefs(state);
+const multiPicUrls = ref([
+  'https://oss.youlai.tech/default/2022/11/20/8af5567816094545b53e76b38ae9c974.webp',
+  'https://oss.youlai.tech/default/2022/11/20/13dbfd7feaf848c2acec2b21675eb9d3.webp'
+]);
 </script>
 <template>
   <div class="app-container">
-    <el-form ref="dataFormRef" :model="formData">
+    <el-form>
       <el-form-item label="单图上传">
-        <single-upload v-model="formData.picUrl"></single-upload>
+        <single-upload v-model="singlePicUrl"></single-upload>
       </el-form-item>
       <el-form-item label="多图上传">
-        <multi-upload v-model="formData.picUrls"></multi-upload>
+        <multi-upload v-model="multiPicUrls"></multi-upload>
       </el-form-item>
     </el-form>
   </div>

src/views/system/menu/index.vue

@@ -252,8 +252,6 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRefs } from 'vue';
-
 import { Search, Plus, Refresh } from '@element-plus/icons-vue';
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
 
@@ -279,10 +277,6 @@ const state = reactive({
   loading: true,
   // 选中ID数组
   ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
   queryParams: {} as MenuQuery,
   menuList: [] as Menu[],
   dialog: { visible: false } as DialogType,
@@ -305,8 +299,6 @@ const state = reactive({
   },
   menuOptions: [] as OptionType[],
   currentRow: undefined,
-  // Icon选择器显示状态
-  iconSelectVisible: false,
   cacheData: {
     menuType: '',
     menuPath: ''
@@ -330,27 +322,24 @@ const {
 function handleQuery() {
   // 重置父组件
   emit('menuClick', null);
-  state.loading = true;
+  loading.value = true;
   listMenus(state.queryParams).then(({ data }) => {
-    state.menuList = data;
-    state.loading = false;
+    menuList.value = data;
+    loading.value = false;
   });
 }
 
 /**
- * 加载菜单下拉树
+ * 下拉菜单
  */
 async function loadMenuData() {
-  const menuOptions: any[] = [];
   await listMenuOptions().then(({ data }) => {
-    const menuOption = { value: '0', label: '顶级菜单', children: data };
-    menuOptions.push(menuOption);
-    state.menuOptions = menuOptions;
+    menuOptions.value = [{ value: '0', label: '顶级菜单', children: data }];
   });
 }
 
 /**
- * 重置查询
+ * 查询重置
  */
 function resetQuery() {
   queryFormRef.value.resetFields();
@@ -363,7 +352,7 @@ function handleRowClick(row: any) {
 }
 
 /**
- * 新增菜单打开
+ * 新增菜单
  */
 async function handleAdd(row: any) {
   formData.value.id = undefined;
@@ -375,11 +364,9 @@ async function handleAdd(row: any) {
 
   if (row.id) {
     // 行点击新增
-
     formData.value.parentId = row.id;
   } else {
     // 工具栏新增
-
     if (state.currentRow) {
       // 选择行
       formData.value.parentId = (state.currentRow as any).id;
@@ -395,7 +382,7 @@ async function handleAdd(row: any) {
  */
 async function handleUpdate(row: MenuForm) {
   await loadMenuData();
-  state.dialog = {
+  dialog.value = {
     title: '编辑菜单',
     visible: true
   };