refactor: 组件示例重构

Former-commit-id: 039dc1ce505489c4d1b360fd50771a10b5476227

src/views/component/editor.vue

@@ -1,22 +0,0 @@
-<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/component/uploader.vue

@@ -1,33 +0,0 @@
-<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 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);
-</script>
-<template>
-  <div class="app-container">
-    <el-form ref="dataFormRef" :model="formData">
-      <el-form-item label="单图上传">
-        <single-upload v-model="formData.picUrl"></single-upload>
-      </el-form-item>
-      <el-form-item label="多图上传">
-        <multi-upload v-model="formData.picUrls"></multi-upload>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>

src/views/demo/editor.vue

@@ -0,0 +1,11 @@
+<!-- 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

@@ -0,0 +1,11 @@
+<!-- 图标选择器 -->
+
+<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/demo/uploader.vue

@@ -0,0 +1,26 @@
+<!-- 文件上传组件(单图+多图)示例 -->
+<script setup lang="ts">
+import SingleUpload from '@/components/Upload/SingleUpload.vue';
+import MultiUpload from '@/components/Upload/MultiUpload.vue';
+
+const singlePicUrl = ref(
+  'https://oss.youlai.tech/default/2022/11/20/18e206dae97b40329661537d1e433639.jpg'
+);
+
+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>
+      <el-form-item label="单图上传">
+        <single-upload v-model="singlePicUrl"></single-upload>
+      </el-form-item>
+      <el-form-item label="多图上传">
+        <multi-upload v-model="multiPicUrls"></multi-upload>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>

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
   };