diff --git a/.gitignore b/.gitignore
index 841c149..efdc120 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,25 @@ nbdist/
 !*/build/*.xml
 
 .flattened-pom.xml
+
+DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+package-lock.json
+yarn.lock
diff --git a/ruoyi-admin/src/main/resources/application.yml b/ruoyi-admin/src/main/resources/application.yml
index 94f84d1..3342d19 100644
--- a/ruoyi-admin/src/main/resources/application.yml
+++ b/ruoyi-admin/src/main/resources/application.yml
@@ -1,7 +1,7 @@
 # 项目相关配置
 ruoyi:
   # 名称
-  name: RuoYi-Flex
+  name: Ruoyi-Flex
   # 版本
   version: 4.1.6
   # 版权年份
@@ -217,6 +217,7 @@ security:
     - /**/*.html
     - /**/*.css
     - /**/*.js
+    - /profile/**
     # 公共路径
     - /favicon.ico
     - /error
diff --git a/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/config/RuoYiConfig.java b/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/config/RuoYiConfig.java
index 8b6fe87..7870827 100644
--- a/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/config/RuoYiConfig.java
+++ b/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/config/RuoYiConfig.java
@@ -10,7 +10,6 @@ import org.springframework.stereotype.Component;
  *
  * @author ruoyi
  */
-@Data
 @Component
 @ConfigurationProperties(prefix = "ruoyi")
 public class RuoYiConfig {
@@ -43,11 +42,46 @@ public class RuoYiConfig {
     /**
      * 获取地址开关
      */
-    @Getter
     private static boolean addressEnabled;
 
-    public void setAddressEnabled(boolean addressEnabled) {
-        RuoYiConfig.addressEnabled = addressEnabled;
+    public String getName()
+    {
+        return name;
+    }
+
+    public void setName(String name)
+    {
+        this.name = name;
+    }
+
+    public String getVersion()
+    {
+        return version;
+    }
+
+    public void setVersion(String version)
+    {
+        this.version = version;
+    }
+
+    public String getCopyrightYear()
+    {
+        return copyrightYear;
+    }
+
+    public void setCopyrightYear(String copyrightYear)
+    {
+        this.copyrightYear = copyrightYear;
+    }
+
+    public boolean isDemoEnabled()
+    {
+        return demoEnabled;
+    }
+
+    public void setDemoEnabled(boolean demoEnabled)
+    {
+        this.demoEnabled = demoEnabled;
     }
 
     public static String getProfile()
@@ -55,6 +89,22 @@ public class RuoYiConfig {
         return profile;
     }
 
+    public void setProfile(String profile)
+    {
+        RuoYiConfig.profile = profile;
+    }
+
+    public static boolean isAddressEnabled()
+    {
+        return addressEnabled;
+    }
+
+    public void setAddressEnabled(boolean addressEnabled)
+    {
+        RuoYiConfig.addressEnabled = addressEnabled;
+    }
+
+
     /**
      * 获取导入上传路径
      */
diff --git a/ruoyi-common/ruoyi-common-security/src/main/java/com/ruoyi/common/security/config/SecurityConfig.java b/ruoyi-common/ruoyi-common-security/src/main/java/com/ruoyi/common/security/config/SecurityConfig.java
index e2cf40e..3c50273 100644
--- a/ruoyi-common/ruoyi-common-security/src/main/java/com/ruoyi/common/security/config/SecurityConfig.java
+++ b/ruoyi-common/ruoyi-common-security/src/main/java/com/ruoyi/common/security/config/SecurityConfig.java
@@ -17,6 +17,8 @@ import org.springframework.boot.context.properties.EnableConfigurationProperties
 import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
+import java.util.Arrays;
+
 /**
  * 权限安全配置
  *
@@ -38,12 +40,32 @@ public class SecurityConfig implements WebMvcConfigurer {
     public void addInterceptors(InterceptorRegistry registry) {
         // 注册路由拦截器，自定义验证规则
         registry.addInterceptor(new SaInterceptor(handler -> {
-                AllUrlHandler allUrlHandler = SpringUtils.getBean(AllUrlHandler.class);
+                //AllUrlHandler allUrlHandler = SpringUtils.getBean(AllUrlHandler.class);
                 // 登录验证 -- 排除多个路径
                 SaRouter
                     // 获取所有的
-                    .match(allUrlHandler.getUrls())
-                    // 对未排除的路径进行检查
+                    //.match(allUrlHandler.getUrls())  // 拦截的 path 列表
+                    .match("/**")
+                    .notMatch(
+                        Arrays.asList(
+                                "/*.html",
+                                "/**/*.html",
+                                "/**/*.css",
+                                "/**/*.js",
+                                "/**/*.css",
+                                "/**/*.js",
+                                "/profile/**",
+                                "/favicon.ico",
+                                "/error",
+                                "/*/api-docs",
+                                "/*/api-docs/**",
+                                "/actuator",
+                                "/actuator/**",
+                                "/login",
+                                "/register",
+                                "/captchaImage",
+                                "/captcha/get",
+                                "/captcha/check"))
                     .check(() -> {
                         // 检查是否登录 是否有token
                         StpUtil.checkLogin();
@@ -51,9 +73,9 @@ public class SecurityConfig implements WebMvcConfigurer {
                         //TODO :以后完善多平台登录校验clientID功能
 
                     });
-            })).addPathPatterns("/**")
+            })).addPathPatterns("/**");
             // 排除不需要拦截的路径
-            .excludePathPatterns(securityProperties.getExcludes());
+            //.excludePathPatterns(securityProperties.getExcludes());
 
     }
 }
diff --git a/ruoyi-common/ruoyi-common-security/src/main/resources/META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports b/ruoyi-common/ruoyi-common-security/src/main/resources/META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports
index 5f8dc63..7e9c085 100644
--- a/ruoyi-common/ruoyi-common-security/src/main/resources/META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports
+++ b/ruoyi-common/ruoyi-common-security/src/main/resources/META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports
@@ -1,4 +1,4 @@
 com.ruoyi.common.security.config.SaTokenConfig
+com.ruoyi.common.security.config.SecurityConfig
 com.ruoyi.common.security.handler.GlobalExceptionHandler
 com.ruoyi.common.security.handler.AllUrlHandler
-com.ruoyi.common.security.config.SecurityConfig
\ No newline at end of file
diff --git a/ruoyi-extra/ruoyi-powerjob-server/src/main/resources/application.properties b/ruoyi-extra/ruoyi-powerjob-server/src/main/resources/application.properties
index 5735473..e59248b 100644
--- a/ruoyi-extra/ruoyi-powerjob-server/src/main/resources/application.properties
+++ b/ruoyi-extra/ruoyi-powerjob-server/src/main/resources/application.properties
@@ -26,7 +26,7 @@ oms.http.port=10010
 oms.table-prefix=pj_
 
 # Actuator 监控端点的配置项
-spring.application.name: ruoyi-powerjob-server
+spring.application.name: Ruoyi-Powerjob-Server
 management.endpoints.web.exposure.include=*
 management.endpoint.health.show-details=ALWAYS
 management.endpoint.logfile.external-file=./logs/ruoyi-powerjob-server.log
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm
index a4c64a0..ba12ebc 100644
--- a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm
+++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
 #foreach($column in $columns)
 #if($column.query)
 #set($dictType=$column.dictType)
@@ -17,14 +17,14 @@
           v-model="queryParams.${column.javaField}"
           placeholder="请输入${comment}"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
       <el-form-item label="${comment}" prop="${column.javaField}">
         <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
           <el-option
-            v-for="dict in dict.type.${dictType}"
+            v-for="dict in ${dictType}"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -42,16 +42,15 @@
         <el-date-picker clearable
           v-model="queryParams.${column.javaField}"
           type="date"
-          value-format="yyyy-MM-dd"
+          value-format="YYYY-MM-DD"
           placeholder="选择${comment}">
         </el-date-picker>
       </el-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      <el-form-item label="${comment}">
+      <el-form-item label="${comment}" style="width: 308px">
         <el-date-picker
           v-model="daterange${AttrName}"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
+          value-format="YYYY-MM-DD"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
@@ -62,8 +61,8 @@
 #end
 #end
       <el-form-item>
-	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -72,8 +71,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['${moduleName}:${businessName}:add']"
         >新增</el-button>
@@ -82,12 +80,11 @@
         <el-button
           type="info"
           plain
-          icon="el-icon-sort"
-          size="mini"
+          icon="Sort"
           @click="toggleExpandAll"
         >展开/折叠</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table
@@ -109,23 +106,23 @@
 #if($column.pk)
 #elseif($column.list && $column.htmlType == "datetime")
       <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
 #elseif($column.list && $column.htmlType == "imageUpload")
       <el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
-        <template slot-scope="scope">
+        <template #default="scope">
           <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
         </template>
       </el-table-column>
 #elseif($column.list && "" != $column.dictType)
       <el-table-column label="${comment}" align="center" prop="${javaField}">
-        <template slot-scope="scope">
+        <template #default="scope">
 #if($column.htmlType == "checkbox")
-          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
+          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
 #else
-          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField}"/>
+          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
 #end
         </template>
       </el-table-column>
@@ -138,35 +135,17 @@
 #end
 #end
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['${moduleName}:${businessName}:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
-            v-hasPermi="['${moduleName}:${businessName}:add']"
-          >新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['${moduleName}:${businessName}:remove']"
-          >删除</el-button>
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
+          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px">
 #foreach($column in $columns)
 #set($field=$column.javaField)
 #if($column.insert && !$column.pk)
@@ -180,7 +159,14 @@
 #set($dictType=$column.dictType)
 #if("" != $treeParentCode && $column.javaField == $treeParentCode)
         <el-form-item label="${comment}" prop="${treeParentCode}">
-          <treeselect v-model="form.${treeParentCode}" :options="${businessName}Options" :normalizer="normalizer" placeholder="请选择${comment}" />
+          <el-tree-select
+            v-model="form.${treeParentCode}"
+            :data="${businessName}Options"
+            :props="{ value: '${treeCode}', label: '${treeName}', children: 'children' }"
+            value-key="${treeCode}"
+            placeholder="请选择${comment}"
+            check-strictly
+          />
         </el-form-item>
 #elseif($column.htmlType == "input")
         <el-form-item label="${comment}" prop="${field}">
@@ -202,7 +188,7 @@
         <el-form-item label="${comment}" prop="${field}">
           <el-select v-model="form.${field}" placeholder="请选择${comment}">
             <el-option
-              v-for="dict in dict.type.${dictType}"
+              v-for="dict in ${dictType}"
               :key="dict.value"
               :label="dict.label"
 #if($column.javaType == "Integer" || $column.javaType == "Long")
@@ -223,7 +209,7 @@
         <el-form-item label="${comment}" prop="${field}">
           <el-checkbox-group v-model="form.${field}">
             <el-checkbox
-              v-for="dict in dict.type.${dictType}"
+              v-for="dict in ${dictType}"
               :key="dict.value"
               :label="dict.value">
               {{dict.label}}
@@ -240,7 +226,7 @@
         <el-form-item label="${comment}" prop="${field}">
           <el-radio-group v-model="form.${field}">
             <el-radio
-              v-for="dict in dict.type.${dictType}"
+              v-for="dict in ${dictType}"
               :key="dict.value"
 #if($column.javaType == "Integer" || $column.javaType == "Long")
               :label="parseInt(dict.value)"
@@ -261,7 +247,7 @@
           <el-date-picker clearable
             v-model="form.${field}"
             type="date"
-            value-format="yyyy-MM-dd"
+            value-format="YYYY-MM-DD"
             placeholder="选择${comment}">
           </el-date-picker>
         </el-form-item>
@@ -274,65 +260,59 @@
 #end
 #end
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup name="${BusinessName}">
 import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
-export default {
-  name: "${BusinessName}",
+const { proxy } = getCurrentInstance();
 #if(${dicts} != '')
-  dicts: [${dicts}],
+#set($dictsNoSymbol=$dicts.replace("'", ""))
+const { ${dictsNoSymbol} } = proxy.useDict(${dicts});
 #end
-  components: {
-    Treeselect
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 显示搜索条件
-      showSearch: true,
-      // ${functionName}表格数据
-      ${businessName}List: [],
-      // ${functionName}树选项
-      ${businessName}Options: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 是否展开，默认全部展开
-      isExpandAll: true,
-      // 重新渲染表格状态
-      refreshTable: true,
+
+// 树表表格数据
+const ${businessName}List = ref([]);
+// 树选项
+const ${businessName}Options = ref([]);
+// 是否显示弹出层
+const open = ref(false);
+// 遮罩层
+const loading = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 弹出层标题
+const title = ref("");
+// 是否展开，默认全部展开
+const isExpandAll = ref(true);
+// 重新渲染表格状态
+const refreshTable = ref(true);
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-      // $comment时间范围
-      daterange${AttrName}: [],
+const daterange${AttrName} = ref([]);
 #end
 #end
-      // 查询参数
-      queryParams: {
-#foreach ($column in $columns)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    #foreach ($column in $columns)
 #if($column.query)
-        $column.javaField: null#if($foreach.count != $columns.size()),#end
+    $column.javaField: null#if($foreach.count != $columns.size()),#end
 #end
 #end
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-#foreach ($column in $columns)
+  },
+  rules: {
+    #foreach ($column in $columns)
 #if($column.required)
 #set($parentheseIndex=$column.columnComment.indexOf("（"))
 #if($parentheseIndex != -1)
@@ -340,166 +320,157 @@ export default {
 #else
 #set($comment=$column.columnComment)
 #end
-        $column.javaField: [
-          { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
-        ]#if($foreach.count != $columns.size()),#end
+    $column.javaField: [
+      { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
+    ]#if($foreach.count != $columns.size()),#end
 #end
 #end
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询${functionName}列表 */
-    getList() {
-      this.loading = true;
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询${functionName}列表 */
+function getList() {
+  loading.value = true;
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      this.queryParams.params = {};
+  queryParams.value.params = {};
 #break
 #end
 #end
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-      if (null != this.daterange${AttrName} && '' != this.daterange${AttrName}) {
-        this.queryParams.params["begin${AttrName}"] = this.daterange${AttrName}[0];
-        this.queryParams.params["end${AttrName}"] = this.daterange${AttrName}[1];
-      }
+  if (null != daterange${AttrName} && '' != daterange${AttrName}) {
+    queryParams.value.params["begin${AttrName}"] = daterange${AttrName}.value[0];
+    queryParams.value.params["end${AttrName}"] = daterange${AttrName}.value[1];
+  }
 #end
 #end
-      list${BusinessName}(this.queryParams).then(response => {
-        this.${businessName}List = this.handleTree(response.data, "${treeCode}", "${treeParentCode}");
-        this.loading = false;
-      });
-    },
-    /** 转换${functionName}数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.${treeCode},
-        label: node.${treeName},
-        children: node.children
-      };
-    },
-	/** 查询${functionName}下拉树结构 */
-    getTreeselect() {
-      list${BusinessName}().then(response => {
-        this.${businessName}Options = [];
-        const data = { ${treeCode}: 0, ${treeName}: '顶级节点', children: [] };
-        data.children = this.handleTree(response.data, "${treeCode}", "${treeParentCode}");
-        this.${businessName}Options.push(data);
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
+  list${BusinessName}(queryParams.value).then(response => {
+    ${businessName}List.value = proxy.handleTree(response.data, "${treeCode}", "${treeParentCode}");
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
 #foreach ($column in $columns)
 #if($column.htmlType == "checkbox")
-        $column.javaField: []#if($foreach.count != $columns.size()),#end
+    $column.javaField: []#if($foreach.count != $columns.size()),#end
 #else
-        $column.javaField: null#if($foreach.count != $columns.size()),#end
+    $column.javaField: null#if($foreach.count != $columns.size()),#end
 #end
 #end
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
+  };
+  proxy.resetForm("${businessName}Ref");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-      this.daterange${AttrName} = [];
+  daterange${AttrName}.value = [];
 #end
 #end
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.reset();
-      this.getTreeselect();
-      if (row != null && row.${treeCode}) {
-        this.form.${treeParentCode} = row.${treeCode};
-      } else {
-        this.form.${treeParentCode} = 0;
-      }
-      this.open = true;
-      this.title = "添加${functionName}";
-    },
-    /** 展开/折叠操作 */
-    toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
-      this.$nextTick(() => {
-        this.refreshTable = true;
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      this.getTreeselect();
-      if (row != null) {
-        this.form.${treeParentCode} = row.${treeCode};
-      }
-      get${BusinessName}(row.${pkColumn.javaField}).then(response => {
-        this.form = response.data;
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-        this.form.$column.javaField = this.form.${column.javaField}.split(",");
-#end
-#end
-        this.open = true;
-        this.title = "修改${functionName}";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.#[[$]]#refs["form"].validate(valid => {
-        if (valid) {
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-          this.form.$column.javaField = this.form.${column.javaField}.join(",");
-#end
-#end
-          if (this.form.${pkColumn.javaField} != null) {
-            update${BusinessName}(this.form).then(response => {
-              this.#[[$modal]]#.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            add${BusinessName}(this.form).then(response => {
-              this.#[[$modal]]#.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + row.${pkColumn.javaField} + '"的数据项？').then(function() {
-        return del${BusinessName}(row.${pkColumn.javaField});
-      }).then(() => {
-        this.getList();
-        this.#[[$modal]]#.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 新增按钮操作 */
+async function handleAdd(row) {
+  reset();
+  await list${BusinessName}().then(response => {
+      ${businessName}Options.value = proxy.handleTree(response.data, "${treeCode}");
+  });
+  if (row != null && row.${treeCode}) {
+    form.value.${treeParentCode} = row.${treeCode};
+  } else {
+    form.value.${treeParentCode} = 0;
   }
-};
+  open.value = true;
+  title.value = "添加${functionName}";
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false;
+  isExpandAll.value = !isExpandAll.value;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset();
+  await listProduct().then(response => {
+      ${businessName}Options.value = proxy.handleTree(response.data, "${treeCode}");
+  });
+  if (row != null) {
+    form.value.${treeParentCode} = row.${treeCode};
+  }
+  get${BusinessName}(row.${pkColumn.javaField}).then(response => {
+    form.value = response.data;
+#foreach ($column in $columns)
+#if($column.htmlType == "checkbox")
+    form.value.$column.javaField = form.value.${column.javaField}.split(",");
+#end
+#end
+    open.value = true;
+    title.value = "修改${functionName}";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.#[[$]]#refs["${businessName}Ref"].validate(valid => {
+    if (valid) {
+#foreach ($column in $columns)
+#if($column.htmlType == "checkbox")
+      form.value.$column.javaField = form.value.${column.javaField}.join(",");
+#end
+#end
+      if (form.value.${pkColumn.javaField} != null) {
+        update${BusinessName}(form.value).then(response => {
+          proxy.#[[$modal]]#.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        add${BusinessName}(form.value).then(response => {
+          proxy.#[[$modal]]#.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + row.${pkColumn.javaField} + '"的数据项？').then(function() {
+    return del${BusinessName}(row.${pkColumn.javaField});
+  }).then(() => {
+    getList();
+    proxy.#[[$modal]]#.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 </script>
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm
index 6296014..1c44c24 100644
--- a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm
+++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
 #foreach($column in $columns)
 #if($column.query)
 #set($dictType=$column.dictType)
@@ -17,14 +17,14 @@
           v-model="queryParams.${column.javaField}"
           placeholder="请输入${comment}"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
       <el-form-item label="${comment}" prop="${column.javaField}">
         <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
           <el-option
-            v-for="dict in dict.type.${dictType}"
+            v-for="dict in ${dictType}"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -42,16 +42,15 @@
         <el-date-picker clearable
           v-model="queryParams.${column.javaField}"
           type="date"
-          value-format="yyyy-MM-dd"
+          value-format="YYYY-MM-DD"
           placeholder="请选择${comment}">
         </el-date-picker>
       </el-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      <el-form-item label="${comment}">
+      <el-form-item label="${comment}" style="width: 308px">
         <el-date-picker
           v-model="daterange${AttrName}"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
+          value-format="YYYY-MM-DD"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
@@ -62,8 +61,8 @@
 #end
 #end
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -72,8 +71,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['${moduleName}:${businessName}:add']"
         >新增</el-button>
@@ -82,8 +80,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['${moduleName}:${businessName}:edit']"
@@ -93,8 +90,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['${moduleName}:${businessName}:remove']"
@@ -104,13 +100,12 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['${moduleName}:${businessName}:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
@@ -127,23 +122,23 @@
       <el-table-column label="${comment}" align="center" prop="${javaField}" />
 #elseif($column.list && $column.htmlType == "datetime")
       <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
 #elseif($column.list && $column.htmlType == "imageUpload")
       <el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
-        <template slot-scope="scope">
+        <template #default="scope">
           <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
         </template>
       </el-table-column>
 #elseif($column.list && "" != $column.dictType)
       <el-table-column label="${comment}" align="center" prop="${javaField}">
-        <template slot-scope="scope">
+        <template #default="scope">
 #if($column.htmlType == "checkbox")
-          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
+          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
 #else
-          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField}"/>
+          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
 #end
         </template>
       </el-table-column>
@@ -152,36 +147,24 @@
 #end
 #end
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['${moduleName}:${businessName}:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['${moduleName}:${businessName}:remove']"
-          >删除</el-button>
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px">
 #foreach($column in $columns)
 #set($field=$column.javaField)
 #if($column.insert && !$column.pk)
@@ -213,7 +196,7 @@
         <el-form-item label="${comment}" prop="${field}">
           <el-select v-model="form.${field}" placeholder="请选择${comment}">
             <el-option
-              v-for="dict in dict.type.${dictType}"
+              v-for="dict in ${dictType}"
               :key="dict.value"
               :label="dict.label"
 #if($column.javaType == "Integer" || $column.javaType == "Long")
@@ -234,7 +217,7 @@
         <el-form-item label="${comment}" prop="${field}">
           <el-checkbox-group v-model="form.${field}">
             <el-checkbox
-              v-for="dict in dict.type.${dictType}"
+              v-for="dict in ${dictType}"
               :key="dict.value"
               :label="dict.value">
               {{dict.label}}
@@ -251,7 +234,7 @@
         <el-form-item label="${comment}" prop="${field}">
           <el-radio-group v-model="form.${field}">
             <el-radio
-              v-for="dict in dict.type.${dictType}"
+              v-for="dict in ${dictType}"
               :key="dict.value"
 #if($column.javaType == "Integer" || $column.javaType == "Long")
               :label="parseInt(dict.value)"
@@ -272,7 +255,7 @@
           <el-date-picker clearable
             v-model="form.${field}"
             type="date"
-            value-format="yyyy-MM-dd"
+            value-format="YYYY-MM-DD"
             placeholder="请选择${comment}">
           </el-date-picker>
         </el-form-item>
@@ -288,10 +271,10 @@
         <el-divider content-position="center">${subTable.functionName}信息</el-divider>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd${subClassName}">添加</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd${subClassName}">添加</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete${subClassName}">删除</el-button>
+            <el-button type="danger" icon="Delete" @click="handleDelete${subClassName}">删除</el-button>
           </el-col>
         </el-row>
         <el-table :data="${subclassName}List" :row-class-name="row${subClassName}Index" @selection-change="handle${subClassName}SelectionChange" ref="${subclassName}">
@@ -308,22 +291,27 @@
 #if($column.pk || $javaField == ${subTableFkclassName})
 #elseif($column.list && $column.htmlType == "input")
           <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.$javaField" placeholder="请输入$comment" />
             </template>
           </el-table-column>
 #elseif($column.list && $column.htmlType == "datetime")
           <el-table-column label="$comment" prop="${javaField}" width="240">
-            <template slot-scope="scope">
-              <el-date-picker clearable v-model="scope.row.$javaField" type="date" value-format="yyyy-MM-dd" placeholder="请选择$comment" />
+            <template #default="scope">
+              <el-date-picker clearable
+                v-model="scope.row.$javaField"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择$comment">
+              </el-date-picker>
             </template>
           </el-table-column>
 #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" != $column.dictType)
           <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
                 <el-option
-                  v-for="dict in dict.type.$column.dictType"
+                  v-for="dict in $column.dictType"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
@@ -333,7 +321,7 @@
           </el-table-column>
 #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" == $column.dictType)
           <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
                 <el-option label="请选择字典生成" value="" />
               </el-select>
@@ -344,72 +332,71 @@
         </el-table>
 #end
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup name="${BusinessName}">
 import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}";
 
-export default {
-  name: "${BusinessName}",
+const { proxy } = getCurrentInstance();
 #if(${dicts} != '')
-  dicts: [${dicts}],
+#set($dictsNoSymbol=$dicts.replace("'", ""))
+const { ${dictsNoSymbol} } = proxy.useDict(${dicts});
 #end
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
+
+// 表格数据
+const ${businessName}List = ref([]);
 #if($table.sub)
-      // 子表选中数据
-      checked${subClassName}: [],
+// 子表格数据
+const ${subclassName}List = ref([]);
 #end
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // ${functionName}表格数据
-      ${businessName}List: [],
+// 是否显示弹出层
+const open = ref(false);
+// 遮罩层
+const loading = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 选中数组
+const ids = ref([]);
 #if($table.sub)
-      // ${subTable.functionName}表格数据
-      ${subclassName}List: [],
+// 子表选中数据
+const checked${subClassName} = ref([]);
 #end
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 总条数
+const total = ref(0);
+// 弹出层标题
+const title = ref("");
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-      // $comment时间范围
-      daterange${AttrName}: [],
+const daterange${AttrName} = ref([]);
 #end
 #end
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-#foreach ($column in $columns)
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    #foreach ($column in $columns)
 #if($column.query)
-        $column.javaField: null#if($foreach.count != $columns.size()),#end
+    $column.javaField: null#if($foreach.count != $columns.size()),#end
 #end
 #end
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-#foreach ($column in $columns)
+  },
+  rules: {
+    #foreach ($column in $columns)
 #if($column.required)
 #set($parentheseIndex=$column.columnComment.indexOf("（"))
 #if($parentheseIndex != -1)
@@ -417,186 +404,198 @@ export default {
 #else
 #set($comment=$column.columnComment)
 #end
-        $column.javaField: [
-          { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
-        ]#if($foreach.count != $columns.size()),#end
+    $column.javaField: [
+      { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
+    ]#if($foreach.count != $columns.size()),#end
 #end
 #end
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询${functionName}列表 */
-    getList() {
-      this.loading = true;
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询${functionName}列表 */
+function getList() {
+  loading.value = true;
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      this.queryParams.params = {};
+  queryParams.value.params = {};
 #break
 #end
 #end
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-      if (null != this.daterange${AttrName} && '' != this.daterange${AttrName}) {
-        this.queryParams.params["begin${AttrName}"] = this.daterange${AttrName}[0];
-        this.queryParams.params["end${AttrName}"] = this.daterange${AttrName}[1];
-      }
+  if (null != daterange${AttrName} && '' != daterange${AttrName}) {
+    queryParams.value.params["begin${AttrName}"] = daterange${AttrName}.value[0];
+    queryParams.value.params["end${AttrName}"] = daterange${AttrName}.value[1];
+  }
 #end
 #end
-      list${BusinessName}(this.queryParams).then(response => {
-        this.${businessName}List = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
+  list${BusinessName}(queryParams.value).then(response => {
+    ${businessName}List.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
 #foreach ($column in $columns)
 #if($column.htmlType == "checkbox")
-        $column.javaField: []#if($foreach.count != $columns.size()),#end
+    $column.javaField: []#if($foreach.count != $columns.size()),#end
 #else
-        $column.javaField: null#if($foreach.count != $columns.size()),#end
+    $column.javaField: null#if($foreach.count != $columns.size()),#end
 #end
 #end
-      };
+  };
 #if($table.sub)
-      this.${subclassName}List = [];
+  ${subclassName}List.value = [];
 #end
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
+  proxy.resetForm("${businessName}Ref");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-      this.daterange${AttrName} = [];
+  daterange${AttrName}.value = [];
 #end
 #end
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.${pkColumn.javaField})
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加${functionName}";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const ${pkColumn.javaField} = row.${pkColumn.javaField} || this.ids
-      get${BusinessName}(${pkColumn.javaField}).then(response => {
-        this.form = response.data;
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.${pkColumn.javaField});
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加${functionName}";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _${pkColumn.javaField} = row.${pkColumn.javaField} || ids.value
+  get${BusinessName}(_${pkColumn.javaField}).then(response => {
+    form.value = response.data;
 #foreach ($column in $columns)
 #if($column.htmlType == "checkbox")
-        this.form.$column.javaField = this.form.${column.javaField}.split(",");
+    form.value.$column.javaField = form.value.${column.javaField}.split(",");
 #end
 #end
 #if($table.sub)
-        this.${subclassName}List = response.data.${subclassName}List;
+    ${subclassName}List.value = response.data.${subclassName}List;
 #end
-        this.open = true;
-        this.title = "修改${functionName}";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.#[[$]]#refs["form"].validate(valid => {
-        if (valid) {
+    open.value = true;
+    title.value = "修改${functionName}";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.#[[$]]#refs["${businessName}Ref"].validate(valid => {
+    if (valid) {
 #foreach ($column in $columns)
 #if($column.htmlType == "checkbox")
-          this.form.$column.javaField = this.form.${column.javaField}.join(",");
+      form.value.$column.javaField = form.value.${column.javaField}.join(",");
 #end
 #end
 #if($table.sub)
-          this.form.${subclassName}List = this.${subclassName}List;
+      form.value.${subclassName}List = ${subclassName}List.value;
 #end
-          if (this.form.${pkColumn.javaField} != null) {
-            update${BusinessName}(this.form).then(response => {
-              this.#[[$modal]]#.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            add${BusinessName}(this.form).then(response => {
-              this.#[[$modal]]#.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ${pkColumn.javaField}s = row.${pkColumn.javaField} || this.ids;
-      this.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + ${pkColumn.javaField}s + '"的数据项？').then(function() {
-        return del${BusinessName}(${pkColumn.javaField}s);
-      }).then(() => {
-        this.getList();
-        this.#[[$modal]]#.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
+      if (form.value.${pkColumn.javaField} != null) {
+        update${BusinessName}(form.value).then(response => {
+          proxy.#[[$modal]]#.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        add${BusinessName}(form.value).then(response => {
+          proxy.#[[$modal]]#.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _${pkColumn.javaField}s = row.${pkColumn.javaField} || ids.value;
+  proxy.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + _${pkColumn.javaField}s + '"的数据项？').then(function() {
+    return del${BusinessName}(_${pkColumn.javaField}s);
+  }).then(() => {
+    getList();
+    proxy.#[[$modal]]#.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
 #if($table.sub)
-	/** ${subTable.functionName}序号 */
-    row${subClassName}Index({ row, rowIndex }) {
-      row.index = rowIndex + 1;
-    },
-    /** ${subTable.functionName}添加按钮操作 */
-    handleAdd${subClassName}() {
-      let obj = {};
+/** ${subTable.functionName}序号 */
+function row${subClassName}Index({ row, rowIndex }) {
+  row.index = rowIndex + 1;
+}
+
+/** ${subTable.functionName}添加按钮操作 */
+function handleAdd${subClassName}() {
+  let obj = {};
 #foreach($column in $subTable.columns)
 #if($column.pk || $column.javaField == ${subTableFkclassName})
 #elseif($column.list && "" != $javaField)
-      obj.$column.javaField = "";
+  obj.$column.javaField = "";
 #end
 #end
-      this.${subclassName}List.push(obj);
-    },
-    /** ${subTable.functionName}删除按钮操作 */
-    handleDelete${subClassName}() {
-      if (this.checked${subClassName}.length == 0) {
-        this.#[[$modal]]#.msgError("请先选择要删除的${subTable.functionName}数据");
-      } else {
-        const ${subclassName}List = this.${subclassName}List;
-        const checked${subClassName} = this.checked${subClassName};
-        this.${subclassName}List = ${subclassName}List.filter(function(item) {
-          return checked${subClassName}.indexOf(item.index) == -1
-        });
-      }
-    },
-    /** 复选框选中数据 */
-    handle${subClassName}SelectionChange(selection) {
-      this.checked${subClassName} = selection.map(item => item.index)
-    },
-#end
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('${moduleName}/${businessName}/export', {
-        ...this.queryParams
-      }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
-    }
+  ${subclassName}List.value.push(obj);
+}
+
+/** ${subTable.functionName}删除按钮操作 */
+function handleDelete${subClassName}() {
+  if (checked${subClassName}.value.length == 0) {
+    proxy.#[[$modal]]#.msgError("请先选择要删除的${subTable.functionName}数据");
+  } else {
+    const ${subclassName}s = ${subclassName}List.value;
+    const checked${subClassName}s = checked${subClassName}.value;
+    ${subclassName}List.value = ${subclassName}s.filter(function(item) {
+      return checked${subClassName}s.indexOf(item.index) == -1
+    });
   }
-};
+}
+
+/** 复选框选中数据 */
+function handle${subClassName}SelectionChange(selection) {
+  checked${subClassName}.value = selection.map(item => item.index)
+}
+
+#end
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('${moduleName}/${businessName}/export', {
+    ...queryParams.value
+  }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
+}
+
+getList();
 </script>
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/v3/index-tree.vue.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/v3/index-tree.vue.vm
deleted file mode 100644
index 7bbd2fc..0000000
--- a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/v3/index-tree.vue.vm
+++ /dev/null
@@ -1,474 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-#foreach($column in $columns)
-#if($column.query)
-#set($dictType=$column.dictType)
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if($column.htmlType == "input")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-input
-          v-model="queryParams.${column.javaField}"
-          placeholder="请输入${comment}"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-          <el-option
-            v-for="dict in ${dictType}"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
-#elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-date-picker clearable
-          v-model="queryParams.${column.javaField}"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="选择${comment}">
-        </el-date-picker>
-      </el-form-item>
-#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      <el-form-item label="${comment}" style="width: 308px">
-        <el-date-picker
-          v-model="daterange${AttrName}"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-#end
-#end
-#end
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['${moduleName}:${businessName}:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="Sort"
-          @click="toggleExpandAll"
-        >展开/折叠</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="${businessName}List"
-      row-key="${treeCode}"
-      :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-    >
-#foreach($column in $columns)
-#set($javaField=$column.javaField)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if($column.pk)
-#elseif($column.list && $column.htmlType == "datetime")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-#elseif($column.list && $column.htmlType == "imageUpload")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
-        <template #default="scope">
-          <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
-        </template>
-      </el-table-column>
-#elseif($column.list && "" != $column.dictType)
-      <el-table-column label="${comment}" align="center" prop="${javaField}">
-        <template #default="scope">
-#if($column.htmlType == "checkbox")
-          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
-#else
-          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
-#end
-        </template>
-      </el-table-column>
-#elseif($column.list && "" != $javaField)
-#if(${foreach.index} == 1)
-      <el-table-column label="${comment}" prop="${javaField}" />
-#else
-      <el-table-column label="${comment}" align="center" prop="${javaField}" />
-#end
-#end
-#end
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
-          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px">
-#foreach($column in $columns)
-#set($field=$column.javaField)
-#if($column.insert && !$column.pk)
-#if(($column.usableColumn) || (!$column.superColumn))
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#set($dictType=$column.dictType)
-#if("" != $treeParentCode && $column.javaField == $treeParentCode)
-        <el-form-item label="${comment}" prop="${treeParentCode}">
-          <el-tree-select
-            v-model="form.${treeParentCode}"
-            :data="${businessName}Options"
-            :props="{ value: '${treeCode}', label: '${treeName}', children: 'children' }"
-            value-key="${treeCode}"
-            placeholder="请选择${comment}"
-            check-strictly
-          />
-        </el-form-item>
-#elseif($column.htmlType == "input")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" placeholder="请输入${comment}" />
-        </el-form-item>
-#elseif($column.htmlType == "imageUpload")
-        <el-form-item label="${comment}" prop="${field}">
-          <image-upload v-model="form.${field}"/>
-        </el-form-item>
-#elseif($column.htmlType == "fileUpload")
-        <el-form-item label="${comment}" prop="${field}">
-          <file-upload v-model="form.${field}"/>
-        </el-form-item>
-#elseif($column.htmlType == "editor")
-        <el-form-item label="${comment}">
-          <editor v-model="form.${field}" :min-height="192"/>
-        </el-form-item>
-#elseif($column.htmlType == "select" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option
-              v-for="dict in ${dictType}"
-              :key="dict.value"
-              :label="dict.label"
-#if($column.javaType == "Integer" || $column.javaType == "Long")
-              :value="parseInt(dict.value)"
-#else
-              :value="dict.value"
-#end
-            ></el-option>
-          </el-select>
-        </el-form-item>
-#elseif($column.htmlType == "select" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
-#elseif($column.htmlType == "checkbox" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox
-              v-for="dict in ${dictType}"
-              :key="dict.value"
-              :label="dict.value">
-              {{dict.label}}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-#elseif($column.htmlType == "checkbox" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox>请选择字典生成</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-#elseif($column.htmlType == "radio" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio
-              v-for="dict in ${dictType}"
-              :key="dict.value"
-#if($column.javaType == "Integer" || $column.javaType == "Long")
-              :label="parseInt(dict.value)"
-#else
-              :label="dict.value"
-#end
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-#elseif($column.htmlType == "radio" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-#elseif($column.htmlType == "datetime")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-date-picker clearable
-            v-model="form.${field}"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择${comment}">
-          </el-date-picker>
-        </el-form-item>
-#elseif($column.htmlType == "textarea")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-#end
-#end
-#end
-#end
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="${BusinessName}">
-import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}";
-
-const { proxy } = getCurrentInstance();
-#if(${dicts} != '')
-#set($dictsNoSymbol=$dicts.replace("'", ""))
-const { ${dictsNoSymbol} } = proxy.useDict(${dicts});
-#end
-
-const ${businessName}List = ref([]);
-const ${businessName}Options = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const title = ref("");
-const isExpandAll = ref(true);
-const refreshTable = ref(true);
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-const daterange${AttrName} = ref([]);
-#end
-#end
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    #foreach ($column in $columns)
-#if($column.query)
-    $column.javaField: null#if($foreach.count != $columns.size()),#end
-#end
-#end
-  },
-  rules: {
-    #foreach ($column in $columns)
-#if($column.required)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-    $column.javaField: [
-      { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
-    ]#if($foreach.count != $columns.size()),#end
-#end
-#end
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询${functionName}列表 */
-function getList() {
-  loading.value = true;
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-  queryParams.value.params = {};
-#break
-#end
-#end
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  if (null != daterange${AttrName} && '' != daterange${AttrName}) {
-    queryParams.value.params["begin${AttrName}"] = daterange${AttrName}.value[0];
-    queryParams.value.params["end${AttrName}"] = daterange${AttrName}.value[1];
-  }
-#end
-#end
-  list${BusinessName}(queryParams.value).then(response => {
-    ${businessName}List.value = proxy.handleTree(response.data, "${treeCode}", "${treeParentCode}");
-    loading.value = false;
-  });
-}
-
-/** 查询${functionName}下拉树结构 */
-function getTreeselect() {
-  list${BusinessName}().then(response => {
-    ${businessName}Options.value = [];
-    const data = { ${treeCode}: 0, ${treeName}: '顶级节点', children: [] };
-    data.children = proxy.handleTree(response.data, "${treeCode}", "${treeParentCode}");
-    ${businessName}Options.value.push(data);
-  });
-}
-	
-// 取消按钮
-function cancel() {
-  open.value = false;
-  reset();
-}
-
-// 表单重置
-function reset() {
-  form.value = {
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-    $column.javaField: []#if($foreach.count != $columns.size()),#end
-#else
-    $column.javaField: null#if($foreach.count != $columns.size()),#end
-#end
-#end
-  };
-  proxy.resetForm("${businessName}Ref");
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  daterange${AttrName}.value = [];
-#end
-#end
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-
-/** 新增按钮操作 */
-function handleAdd(row) {
-  reset();
-  getTreeselect();
-  if (row != null && row.${treeCode}) {
-    form.value.${treeParentCode} = row.${treeCode};
-  } else {
-    form.value.${treeParentCode} = 0;
-  }
-  open.value = true;
-  title.value = "添加${functionName}";
-}
-
-/** 展开/折叠操作 */
-function toggleExpandAll() {
-  refreshTable.value = false;
-  isExpandAll.value = !isExpandAll.value;
-  nextTick(() => {
-    refreshTable.value = true;
-  });
-}
-
-/** 修改按钮操作 */
-async function handleUpdate(row) {
-  reset();
-  await getTreeselect();
-  if (row != null) {
-    form.value.${treeParentCode} = row.${treeCode};
-  }
-  get${BusinessName}(row.${pkColumn.javaField}).then(response => {
-    form.value = response.data;
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-    form.value.$column.javaField = form.value.${column.javaField}.split(",");
-#end
-#end
-    open.value = true;
-    title.value = "修改${functionName}";
-  });
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.#[[$]]#refs["${businessName}Ref"].validate(valid => {
-    if (valid) {
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-      form.value.$column.javaField = form.value.${column.javaField}.join(",");
-#end
-#end
-      if (form.value.${pkColumn.javaField} != null) {
-        update${BusinessName}(form.value).then(response => {
-          proxy.#[[$modal]]#.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        add${BusinessName}(form.value).then(response => {
-          proxy.#[[$modal]]#.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  proxy.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + row.${pkColumn.javaField} + '"的数据项？').then(function() {
-    return del${BusinessName}(row.${pkColumn.javaField});
-  }).then(() => {
-    getList();
-    proxy.#[[$modal]]#.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-
-getList();
-</script>
diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/v3/index.vue.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/v3/index.vue.vm
deleted file mode 100644
index 8b25665..0000000
--- a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/v3/index.vue.vm
+++ /dev/null
@@ -1,590 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-#foreach($column in $columns)
-#if($column.query)
-#set($dictType=$column.dictType)
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if($column.htmlType == "input")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-input
-          v-model="queryParams.${column.javaField}"
-          placeholder="请输入${comment}"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-          <el-option
-            v-for="dict in ${dictType}"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
-#elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
-      <el-form-item label="${comment}" prop="${column.javaField}">
-        <el-date-picker clearable
-          v-model="queryParams.${column.javaField}"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="请选择${comment}">
-        </el-date-picker>
-      </el-form-item>
-#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-      <el-form-item label="${comment}" style="width: 308px">
-        <el-date-picker
-          v-model="daterange${AttrName}"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-#end
-#end
-#end
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['${moduleName}:${businessName}:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['${moduleName}:${businessName}:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['${moduleName}:${businessName}:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['${moduleName}:${businessName}:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-#foreach($column in $columns)
-#set($javaField=$column.javaField)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if($column.pk)
-      <el-table-column label="${comment}" align="center" prop="${javaField}" />
-#elseif($column.list && $column.htmlType == "datetime")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-#elseif($column.list && $column.htmlType == "imageUpload")
-      <el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
-        <template #default="scope">
-          <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
-        </template>
-      </el-table-column>
-#elseif($column.list && "" != $column.dictType)
-      <el-table-column label="${comment}" align="center" prop="${javaField}">
-        <template #default="scope">
-#if($column.htmlType == "checkbox")
-          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
-#else
-          <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
-#end
-        </template>
-      </el-table-column>
-#elseif($column.list && "" != $javaField)
-      <el-table-column label="${comment}" align="center" prop="${javaField}" />
-#end
-#end
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px">
-#foreach($column in $columns)
-#set($field=$column.javaField)
-#if($column.insert && !$column.pk)
-#if(($column.usableColumn) || (!$column.superColumn))
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#set($dictType=$column.dictType)
-#if($column.htmlType == "input")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" placeholder="请输入${comment}" />
-        </el-form-item>
-#elseif($column.htmlType == "imageUpload")
-        <el-form-item label="${comment}" prop="${field}">
-          <image-upload v-model="form.${field}"/>
-        </el-form-item>
-#elseif($column.htmlType == "fileUpload")
-        <el-form-item label="${comment}" prop="${field}">
-          <file-upload v-model="form.${field}"/>
-        </el-form-item>
-#elseif($column.htmlType == "editor")
-        <el-form-item label="${comment}">
-          <editor v-model="form.${field}" :min-height="192"/>
-        </el-form-item>
-#elseif($column.htmlType == "select" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option
-              v-for="dict in ${dictType}"
-              :key="dict.value"
-              :label="dict.label"
-#if($column.javaType == "Integer" || $column.javaType == "Long")
-              :value="parseInt(dict.value)"
-#else
-              :value="dict.value"
-#end
-            ></el-option>
-          </el-select>
-        </el-form-item>
-#elseif($column.htmlType == "select" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-select v-model="form.${field}" placeholder="请选择${comment}">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
-#elseif($column.htmlType == "checkbox" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox
-              v-for="dict in ${dictType}"
-              :key="dict.value"
-              :label="dict.value">
-              {{dict.label}}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-#elseif($column.htmlType == "checkbox" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-checkbox-group v-model="form.${field}">
-            <el-checkbox>请选择字典生成</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-#elseif($column.htmlType == "radio" && "" != $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio
-              v-for="dict in ${dictType}"
-              :key="dict.value"
-#if($column.javaType == "Integer" || $column.javaType == "Long")
-              :label="parseInt(dict.value)"
-#else
-              :label="dict.value"
-#end
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-#elseif($column.htmlType == "radio" && $dictType)
-        <el-form-item label="${comment}" prop="${field}">
-          <el-radio-group v-model="form.${field}">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-#elseif($column.htmlType == "datetime")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-date-picker clearable
-            v-model="form.${field}"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="请选择${comment}">
-          </el-date-picker>
-        </el-form-item>
-#elseif($column.htmlType == "textarea")
-        <el-form-item label="${comment}" prop="${field}">
-          <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-#end
-#end
-#end
-#end
-#if($table.sub)
-        <el-divider content-position="center">${subTable.functionName}信息</el-divider>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" icon="Plus" @click="handleAdd${subClassName}">添加</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" icon="Delete" @click="handleDelete${subClassName}">删除</el-button>
-          </el-col>
-        </el-row>
-        <el-table :data="${subclassName}List" :row-class-name="row${subClassName}Index" @selection-change="handle${subClassName}SelectionChange" ref="${subclassName}">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="序号" align="center" prop="index" width="50"/>
-#foreach($column in $subTable.columns)
-#set($javaField=$column.javaField)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-#if($column.pk || $javaField == ${subTableFkclassName})
-#elseif($column.list && $column.htmlType == "input")
-          <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template #default="scope">
-              <el-input v-model="scope.row.$javaField" placeholder="请输入$comment" />
-            </template>
-          </el-table-column>
-#elseif($column.list && $column.htmlType == "datetime")
-          <el-table-column label="$comment" prop="${javaField}" width="240">
-            <template #default="scope">
-              <el-date-picker clearable
-                v-model="scope.row.$javaField"
-                type="date"
-                value-format="YYYY-MM-DD"
-                placeholder="请选择$comment">
-              </el-date-picker>
-            </template>
-          </el-table-column>
-#elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" != $column.dictType)
-          <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template #default="scope">
-              <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
-                <el-option
-                  v-for="dict in $column.dictType"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                ></el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-#elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" == $column.dictType)
-          <el-table-column label="$comment" prop="${javaField}" width="150">
-            <template #default="scope">
-              <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
-                <el-option label="请选择字典生成" value="" />
-              </el-select>
-            </template>
-          </el-table-column>
-#end
-#end
-        </el-table>
-#end
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="${BusinessName}">
-import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}";
-
-const { proxy } = getCurrentInstance();
-#if(${dicts} != '')
-#set($dictsNoSymbol=$dicts.replace("'", ""))
-const { ${dictsNoSymbol} } = proxy.useDict(${dicts});
-#end
-
-const ${businessName}List = ref([]);
-#if($table.sub)
-const ${subclassName}List = ref([]);
-#end
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-#if($table.sub)
-const checked${subClassName} = ref([]);
-#end
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-const daterange${AttrName} = ref([]);
-#end
-#end
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    #foreach ($column in $columns)
-#if($column.query)
-    $column.javaField: null#if($foreach.count != $columns.size()),#end
-#end
-#end
-  },
-  rules: {
-    #foreach ($column in $columns)
-#if($column.required)
-#set($parentheseIndex=$column.columnComment.indexOf("（"))
-#if($parentheseIndex != -1)
-#set($comment=$column.columnComment.substring(0, $parentheseIndex))
-#else
-#set($comment=$column.columnComment)
-#end
-    $column.javaField: [
-      { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
-    ]#if($foreach.count != $columns.size()),#end
-#end
-#end
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询${functionName}列表 */
-function getList() {
-  loading.value = true;
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-  queryParams.value.params = {};
-#break
-#end
-#end
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  if (null != daterange${AttrName} && '' != daterange${AttrName}) {
-    queryParams.value.params["begin${AttrName}"] = daterange${AttrName}.value[0];
-    queryParams.value.params["end${AttrName}"] = daterange${AttrName}.value[1];
-  }
-#end
-#end
-  list${BusinessName}(queryParams.value).then(response => {
-    ${businessName}List.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-
-// 取消按钮
-function cancel() {
-  open.value = false;
-  reset();
-}
-
-// 表单重置
-function reset() {
-  form.value = {
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-    $column.javaField: []#if($foreach.count != $columns.size()),#end
-#else
-    $column.javaField: null#if($foreach.count != $columns.size()),#end
-#end
-#end
-  };
-#if($table.sub)
-  ${subclassName}List.value = [];
-#end
-  proxy.resetForm("${businessName}Ref");
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-#foreach ($column in $columns)
-#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  daterange${AttrName}.value = [];
-#end
-#end
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.${pkColumn.javaField});
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加${functionName}";
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const _${pkColumn.javaField} = row.${pkColumn.javaField} || ids.value
-  get${BusinessName}(_${pkColumn.javaField}).then(response => {
-    form.value = response.data;
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-    form.value.$column.javaField = form.value.${column.javaField}.split(",");
-#end
-#end
-#if($table.sub)
-    ${subclassName}List.value = response.data.${subclassName}List;
-#end
-    open.value = true;
-    title.value = "修改${functionName}";
-  });
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.#[[$]]#refs["${businessName}Ref"].validate(valid => {
-    if (valid) {
-#foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-      form.value.$column.javaField = form.value.${column.javaField}.join(",");
-#end
-#end
-#if($table.sub)
-      form.value.${subclassName}List = ${subclassName}List.value;
-#end
-      if (form.value.${pkColumn.javaField} != null) {
-        update${BusinessName}(form.value).then(response => {
-          proxy.#[[$modal]]#.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        add${BusinessName}(form.value).then(response => {
-          proxy.#[[$modal]]#.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const _${pkColumn.javaField}s = row.${pkColumn.javaField} || ids.value;
-  proxy.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + _${pkColumn.javaField}s + '"的数据项？').then(function() {
-    return del${BusinessName}(_${pkColumn.javaField}s);
-  }).then(() => {
-    getList();
-    proxy.#[[$modal]]#.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-
-#if($table.sub)
-/** ${subTable.functionName}序号 */
-function row${subClassName}Index({ row, rowIndex }) {
-  row.index = rowIndex + 1;
-}
-
-/** ${subTable.functionName}添加按钮操作 */
-function handleAdd${subClassName}() {
-  let obj = {};
-#foreach($column in $subTable.columns)
-#if($column.pk || $column.javaField == ${subTableFkclassName})
-#elseif($column.list && "" != $javaField)
-  obj.$column.javaField = "";
-#end
-#end
-  ${subclassName}List.value.push(obj);
-}
-
-/** ${subTable.functionName}删除按钮操作 */
-function handleDelete${subClassName}() {
-  if (checked${subClassName}.value.length == 0) {
-    proxy.#[[$modal]]#.msgError("请先选择要删除的${subTable.functionName}数据");
-  } else {
-    const ${subclassName}s = ${subclassName}List.value;
-    const checked${subClassName}s = checked${subClassName}.value;
-    ${subclassName}List.value = ${subclassName}s.filter(function(item) {
-      return checked${subClassName}s.indexOf(item.index) == -1
-    });
-  }
-}
-
-/** 复选框选中数据 */
-function handle${subClassName}SelectionChange(selection) {
-  checked${subClassName}.value = selection.map(item => item.index)
-}
-
-#end
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('${moduleName}/${businessName}/export', {
-    ...queryParams.value
-  }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
-}
-
-getList();
-</script>
diff --git a/ruoyi-modules/ruoyi-system/src/main/java/com/ruoyi/system/controller/monitor/SysLogininforController.java b/ruoyi-modules/ruoyi-system/src/main/java/com/ruoyi/system/controller/monitor/SysLogininforController.java
index 1b8e8de..a3149e2 100644
--- a/ruoyi-modules/ruoyi-system/src/main/java/com/ruoyi/system/controller/monitor/SysLogininforController.java
+++ b/ruoyi-modules/ruoyi-system/src/main/java/com/ruoyi/system/controller/monitor/SysLogininforController.java
@@ -68,6 +68,7 @@ public class SysLogininforController extends BaseController
      */
     @SaCheckPermission("monitor:logininfor:remove")
     @Log(title = "登录日志", businessType = BusinessType.DELETE)
+    @DeleteMapping("/{infoIds}")
     public AjaxResult remove(@PathVariable Long[] infoIds)
     {
         return toAjax(logininforService.deleteLogininforByIds(infoIds));
diff --git a/ruoyi-modules/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysDeptServiceImpl.java b/ruoyi-modules/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysDeptServiceImpl.java
index f9288de..658921b 100644
--- a/ruoyi-modules/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysDeptServiceImpl.java
+++ b/ruoyi-modules/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysDeptServiceImpl.java
@@ -48,7 +48,7 @@ public class SysDeptServiceImpl implements ISysDeptService, DeptService {
     @DataScope(deptAlias = "d")
     public List<SysDept> selectDeptList(SysDept dept) {
         // 只查询未禁用部门
-        dept.setStatus(UserConstants.DEPT_NORMAL);
+        //dept.setStatus(UserConstants.DEPT_NORMAL);
         return deptMapper.selectDeptList(dept);
     }
 
diff --git a/ruoyi-ui/.env.development b/ruoyi-ui/.env.development
index e1f0eba..993b04b 100644
--- a/ruoyi-ui/.env.development
+++ b/ruoyi-ui/.env.development
@@ -1,17 +1,17 @@
 # 页面标题
-VUE_APP_TITLE = Ruoyi-Flex管理系统
+VITE_APP_TITLE = Ruoyi-Flex管理系统
 
 # 开发环境配置
-ENV = 'development'
+VITE_APP_ENV = 'development'
 
 # 若依管理系统/开发环境
-VUE_APP_BASE_API = '/dev-api'
+VITE_APP_BASE_API = '/dev-api'
 
 # 监控地址
-VUE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/applications'
+VITE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/applications'
 
 # powerjob任务调度控制台地址
-VUE_APP_POWERJOB_ADMIN = 'http://localhost:7700/'
+VITE_APP_POWERJOB_ADMIN = 'http://localhost:7700/'
 
 # 路由懒加载
-VUE_CLI_BABEL_TRANSPILE_MODULES = true
+VITE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/ruoyi-ui/.env.production b/ruoyi-ui/.env.production
index 008b527..ec3c52e 100644
--- a/ruoyi-ui/.env.production
+++ b/ruoyi-ui/.env.production
@@ -1,14 +1,17 @@
 # 页面标题
-VUE_APP_TITLE = Ruoyi-Flex管理系统
+VITE_APP_TITLE = Ruoyi-Flex管理系统
 
 # 生产环境配置
-ENV = 'production'
+VITE_APP_ENV = 'production'
 
 # 若依管理系统/生产环境
-VUE_APP_BASE_API = '/prod-api'
+VITE_APP_BASE_API = '/prod-api'
 
 # 监控地址
-VUE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/applications'
+VITE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/applications'
 
 # powerjob任务调度控制台地址
-VUE_APP_POWERJOB_ADMIN = 'http://localhost:7700/'
+VITE_APP_POWERJOB_ADMIN = 'http://localhost:7700/'
+
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip
diff --git a/ruoyi-ui/.env.staging b/ruoyi-ui/.env.staging
index fcb4fb2..1b05fc2 100644
--- a/ruoyi-ui/.env.staging
+++ b/ruoyi-ui/.env.staging
@@ -1,10 +1,11 @@
 # 页面标题
-VUE_APP_TITLE = Ruoyi-Flex管理系统
+VITE_APP_TITLE = Ruoyi-Flex管理系统
 
-NODE_ENV = production
+# 生产环境配置
+VITE_APP_ENV = 'staging'
 
-# 测试环境配置
-ENV = 'staging'
+# 若依管理系统/生产环境
+VITE_APP_BASE_API = '/stage-api'
 
-# 若依管理系统/测试环境
-VUE_APP_BASE_API = '/stage-api'
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip
diff --git a/ruoyi-ui/.eslintignore b/ruoyi-ui/.eslintignore
deleted file mode 100644
index 89be6f6..0000000
--- a/ruoyi-ui/.eslintignore
+++ /dev/null
@@ -1,10 +0,0 @@
-# 忽略build目录下类型为js的文件的语法检查
-build/*.js
-# 忽略src/assets目录下文件的语法检查
-src/assets
-# 忽略public目录下文件的语法检查
-public
-# 忽略当前目录下为js的文件的语法检查
-*.js
-# 忽略当前目录下为vue的文件的语法检查
-*.vue
\ No newline at end of file
diff --git a/ruoyi-ui/.eslintrc.js b/ruoyi-ui/.eslintrc.js
deleted file mode 100644
index 82bbdee..0000000
--- a/ruoyi-ui/.eslintrc.js
+++ /dev/null
@@ -1,199 +0,0 @@
-// ESlint 检查配置
-module.exports = {
-  root: true,
-  parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
-  },
-  env: {
-    browser: true,
-    node: true,
-    es6: true,
-  },
-  extends: ['plugin:vue/recommended', 'eslint:recommended'],
-
-  // add your custom rules here
-  //it is base on https://github.com/vuejs/eslint-config-vue
-  rules: {
-    "vue/max-attributes-per-line": [2, {
-      "singleline": 10,
-      "multiline": {
-        "max": 1,
-        "allowFirstLine": false
-      }
-    }],
-    "vue/singleline-html-element-content-newline": "off",
-    "vue/multiline-html-element-content-newline":"off",
-    "vue/name-property-casing": ["error", "PascalCase"],
-    "vue/no-v-html": "off",
-    'accessor-pairs': 2,
-    'arrow-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
-      'allowSingleLine': true
-    }],
-    'camelcase': [0, {
-      'properties': 'always'
-    }],
-    'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'comma-style': [2, 'last'],
-    'constructor-super': 2,
-    'curly': [2, 'multi-line'],
-    'dot-location': [2, 'property'],
-    'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
-    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-console': 'off',
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 0,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
-    'no-lone-blocks': 2,
-    'no-mixed-spaces-and-tabs': 2,
-    'no-multi-spaces': 2,
-    'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-spaced-func': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-trailing-spaces': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
-    'no-useless-call': 2,
-    'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
-    'no-useless-escape': 0,
-    'no-whitespace-before-property': 2,
-    'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
-      }
-    }],
-    'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'never'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
-    'space-in-parens': [2, 'never'],
-    'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
-    'template-curly-spacing': [2, 'never'],
-    'use-isnan': 2,
-    'valid-typeof': 2,
-    'wrap-iife': [2, 'any'],
-    'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
-    'prefer-const': 2,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
-  }
-}
diff --git a/ruoyi-ui/README.md b/ruoyi-ui/README.md
index 00c0ab8..6b738ec 100644
--- a/ruoyi-ui/README.md
+++ b/ruoyi-ui/README.md
@@ -2,22 +2,18 @@
 
 ```bash
 # 克隆项目
-git clone https://gitee.com/y_project/RuoYi-Vue
+git clone https://gitee.com/dataprince/ruoyi-flex
 
 # 进入项目目录
 cd ruoyi-ui
 
 # 安装依赖
-npm install
-
-# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npmmirror.com
 
 # 启动服务
 npm run dev
-```
 
-浏览器访问 http://localhost:80
+前端浏览器访问 http://localhost:80
 
 ## 发布
 
diff --git a/ruoyi-ui/bin/build.bat b/ruoyi-ui/bin/build.bat
index dda590d..ac24da0 100644
--- a/ruoyi-ui/bin/build.bat
+++ b/ruoyi-ui/bin/build.bat
@@ -7,6 +7,6 @@ echo.
 cd %~dp0
 
 cd ..
-npm run build:prod
+yarn build:prod
 
-pause
\ No newline at end of file
+pause
diff --git a/ruoyi-ui/bin/package.bat b/ruoyi-ui/bin/package.bat
index 0e5bc0f..965883a 100644
--- a/ruoyi-ui/bin/package.bat
+++ b/ruoyi-ui/bin/package.bat
@@ -7,6 +7,6 @@ echo.
 cd %~dp0
 
 cd ..
-npm install --registry=https://registry.npmmirror.com
+yarn --registry=https://registry.npm.taobao.org
 
 pause
\ No newline at end of file
diff --git a/ruoyi-ui/bin/run-web.bat b/ruoyi-ui/bin/run-web.bat
index d30deae..d2fe397 100644
--- a/ruoyi-ui/bin/run-web.bat
+++ b/ruoyi-ui/bin/run-web.bat
@@ -1,12 +1,12 @@
 @echo off
 echo.
-echo [��Ϣ] ʹ�� Vue CLI �������� Web ���̡�
+echo [��Ϣ] ʹ�� Vite �������� Web ���̡�
 echo.
 
 %~d0
 cd %~dp0
 
 cd ..
-npm run dev
+yarn dev
 
 pause
\ No newline at end of file
diff --git a/ruoyi-ui/build/index.js b/ruoyi-ui/build/index.js
deleted file mode 100644
index 0c57de2..0000000
--- a/ruoyi-ui/build/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const { run } = require('runjs')
-const chalk = require('chalk')
-const config = require('../vue.config.js')
-const rawArgv = process.argv.slice(2)
-const args = rawArgv.join(' ')
-
-if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
-  const report = rawArgv.includes('--report')
-
-  run(`vue-cli-service build ${args}`)
-
-  const port = 9526
-  const publicPath = config.publicPath
-
-  var connect = require('connect')
-  var serveStatic = require('serve-static')
-  const app = connect()
-
-  app.use(
-    publicPath,
-    serveStatic('./dist', {
-      index: ['index.html', '/']
-    })
-  )
-
-  app.listen(port, function () {
-    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
-    if (report) {
-      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
-    }
-
-  })
-} else {
-  run(`vue-cli-service build ${args}`)
-}
diff --git a/ruoyi-ui/public/html/ie.html b/ruoyi-ui/html/ie.html
similarity index 100%
rename from ruoyi-ui/public/html/ie.html
rename to ruoyi-ui/html/ie.html
diff --git a/ruoyi-ui/public/index.html b/ruoyi-ui/index.html
similarity index 85%
rename from ruoyi-ui/public/index.html
rename to ruoyi-ui/index.html
index 925455c..47b6e45 100644
--- a/ruoyi-ui/public/index.html
+++ b/ruoyi-ui/index.html
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= webpackConfig.name %></title>
-    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-	  <style>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="renderer" content="webkit">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="icon" href="/favicon.ico">
+  <title>Ruoyi-Flex管理系统</title>
+  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+  <style>
     html,
     body,
     #app {
@@ -16,6 +17,7 @@
       margin: 0px;
       padding: 0px;
     }
+
     .chromeframe {
       margin: 0.2em 0;
       background: #ccc;
@@ -92,6 +94,7 @@
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
       }
+
       100% {
         -webkit-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
@@ -105,6 +108,7 @@
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
       }
+
       100% {
         -webkit-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
@@ -194,15 +198,18 @@
       opacity: 0.5;
     }
   </style>
-  </head>
-  <body>
-    <div id="app">
-	    <div id="loader-wrapper">
-		    <div id="loader"></div>
-		    <div class="loader-section section-left"></div>
-		    <div class="loader-section section-right"></div>
-		    <div class="load_title">正在加载系统资源，请耐心等待</div>
-        </div>
-	</div>
-  </body>
+</head>
+
+<body>
+  <div id="app">
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+      <div class="load_title">正在加载系统资源，请耐心等待</div>
+    </div>
+  </div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
 </html>
diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 90b7772..3a0500e 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -5,11 +5,10 @@
   "author": "数据小王子",
   "license": "MIT",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build --mode staging",
-    "preview": "node build/index.js --preview",
-    "lint": "eslint --ext .js,.vue src"
+    "dev": "vite serve --mode development",
+    "build:prod": "vite build --mode production &&vue-tsc --noEmit",
+    "build:stage": "vite build --mode staging",
+    "preview": "vite preview"
   },
   "husky": {
     "hooks": {
@@ -36,48 +35,49 @@
     "url": "https://gitee.com/dataprince/ruoyi-flex.git"
   },
   "dependencies": {
-    "@riophae/vue-treeselect": "0.4.0",
-    "axios": "0.24.0",
-    "clipboard": "2.0.8",
-    "core-js": "3.25.3",
+    "@element-plus/icons-vue": "2.0.10",
+    "@vueup/vue-quill": "1.1.0",
+    "@vueuse/core": "9.5.0",
+    "@zeronejs/utils": "^1.4.0",
+    "axios": "0.27.2",
     "echarts": "5.4.0",
-    "element-ui": "2.15.13",
+    "element-plus": "2.2.27",
     "file-saver": "2.0.5",
-    "fuse.js": "6.4.3",
-    "highlight.js": "9.18.5",
-    "js-beautify": "1.13.0",
+    "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",
-    "jsencrypt": "3.0.0-rc.1",
+    "jsencrypt": "3.3.1",
     "nprogress": "0.2.0",
-    "quill": "1.3.7",
-    "screenfull": "5.0.2",
-    "sortablejs": "1.10.2",
-    "vue": "2.6.12",
-    "vue-count-to": "1.0.13",
-    "vue-cropper": "0.5.5",
-    "vue-meta": "2.4.0",
-    "vue-router": "3.4.9",
-    "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vue": "3.2.45",
+    "vue-cropper": "1.0.3",
+    "vue-router": "4.1.4",
+    "vuex": "4.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.4.6",
-    "@vue/cli-plugin-eslint": "4.4.6",
-    "@vue/cli-service": "4.4.6",
-    "babel-eslint": "10.1.0",
-    "babel-plugin-dynamic-import-node": "2.3.3",
-    "chalk": "4.1.0",
-    "compression-webpack-plugin": "5.0.2",
-    "connect": "3.6.6",
-    "eslint": "7.15.0",
-    "eslint-plugin-vue": "7.2.0",
-    "lint-staged": "10.5.3",
-    "runjs": "4.4.2",
-    "sass": "1.32.13",
-    "sass-loader": "10.1.1",
-    "script-ext-html-webpack-plugin": "2.1.5",
-    "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12"
+    "@types/file-saver": "^2.0.5",
+    "@types/js-cookie": "^3.0.2",
+    "@types/node": "^18.7.15",
+    "@types/nprogress": "^0.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
+    "@vitejs/plugin-vue": "3.1.0",
+    "@vue/compiler-sfc": "3.2.22",
+    "autoprefixer": "^10.4.8",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "fast-glob": "^3.3.1",
+    "postcss": "^8.4.16",
+    "sass": "1.56.1",
+    "tailwindcss": "^3.1.8",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.1.0",
+    "typescript": "^4.8.2",
+    "unplugin-auto-import": "0.11.4",
+    "unplugin-vue-components": "^0.22.4",
+    "vite": "3.2.7",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0"
   },
   "engines": {
     "node": ">=8.9",
diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index 29de49f..98240ae 100644
--- a/ruoyi-ui/src/App.vue
+++ b/ruoyi-ui/src/App.vue
@@ -1,28 +1,3 @@
 <template>
-  <div id="app">
-    <router-view />
-    <theme-picker />
-  </div>
+  <router-view />
 </template>
-
-<script>
-import ThemePicker from "@/components/ThemePicker";
-
-export default {
-  name: "App",
-  components: { ThemePicker },
-    metaInfo() {
-        return {
-            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-            titleTemplate: title => {
-                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
-            }
-        }
-    }
-};
-</script>
-<style scoped>
-#app .theme-picker {
-  display: none;
-}
-</style>
diff --git a/ruoyi-ui/src/api/monitor/job.js b/ruoyi-ui/src/api/monitor/job.js
deleted file mode 100644
index 3815569..0000000
--- a/ruoyi-ui/src/api/monitor/job.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import request from '@/utils/request'
-
-// 查询定时任务调度列表
-export function listJob(query) {
-  return request({
-    url: '/monitor/job/list',
-    method: 'get',
-    params: query
-  })
-}
-
-// 查询定时任务调度详细
-export function getJob(jobId) {
-  return request({
-    url: '/monitor/job/' + jobId,
-    method: 'get'
-  })
-}
-
-// 新增定时任务调度
-export function addJob(data) {
-  return request({
-    url: '/monitor/job',
-    method: 'post',
-    data: data
-  })
-}
-
-// 修改定时任务调度
-export function updateJob(data) {
-  return request({
-    url: '/monitor/job',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除定时任务调度
-export function delJob(jobId) {
-  return request({
-    url: '/monitor/job/' + jobId,
-    method: 'delete'
-  })
-}
-
-// 任务状态修改
-export function changeJobStatus(jobId, status) {
-  const data = {
-    jobId,
-    status
-  }
-  return request({
-    url: '/monitor/job/changeStatus',
-    method: 'put',
-    data: data
-  })
-}
-
-
-// 定时任务立即执行一次
-export function runJob(jobId, jobGroup) {
-  const data = {
-    jobId,
-    jobGroup
-  }
-  return request({
-    url: '/monitor/job/run',
-    method: 'put',
-    data: data
-  })
-}
\ No newline at end of file
diff --git a/ruoyi-ui/src/api/monitor/server.js b/ruoyi-ui/src/api/monitor/server.js
deleted file mode 100644
index e1f9ca2..0000000
--- a/ruoyi-ui/src/api/monitor/server.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-
-// 获取服务信息
-export function getServer() {
-  return request({
-    url: '/monitor/server',
-    method: 'get'
-  })
-}
\ No newline at end of file
diff --git a/ruoyi-ui/src/assets/icons/svg/company.svg b/ruoyi-ui/src/assets/icons/svg/company.svg
new file mode 100644
index 0000000..fcf1394
--- /dev/null
+++ b/ruoyi-ui/src/assets/icons/svg/company.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1675914273096" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2417" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1001.7 969.6H890.4V399.4c0-27.7-17.4-52.8-43.3-62.5L580 236.7c-14.9-5.6-31.1-5.5-45.7-0.4V76.6c0-21.9-10.7-42.4-28.7-54.9s-41-15.3-61.5-7.6L176.9 114.3c-25.9 9.7-43.3 34.9-43.3 62.5v792.8H22.3C10 969.6 0 979.6 0 991.9s10 22.3 22.3 22.3H1001.8c12.3 0 22.3-10 22.3-22.3s-10.1-22.3-22.4-22.3zM178.1 176.8c0-9.2 5.8-17.6 14.4-20.8L459.7 55.8c7-2.6 14.4-1.7 20.5 2.5s9.6 10.9 9.6 18.3v893H178.1V176.8z m356.2 792.8V299.3c0-7.4 3.5-14.1 9.6-18.3 6.1-4.2 13.6-5.2 20.5-2.5l267.1 100.2c8.6 3.2 14.4 11.6 14.4 20.8v570.2H534.3z" p-id="2418"></path><path d="M391.8 346.3H258.2c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3h133.6c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3zM748 479.9H614.4c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3H748c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3zM748 613.4H614.4c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3H748c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3zM391.8 613.4H258.2c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3h133.6c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3z" p-id="2419"></path></svg>
\ No newline at end of file
diff --git a/ruoyi-ui/src/assets/icons/svg/gitee.svg b/ruoyi-ui/src/assets/icons/svg/gitee.svg
new file mode 100644
index 0000000..6324608
--- /dev/null
+++ b/ruoyi-ui/src/assets/icons/svg/gitee.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686919908144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 992C246.895625 992 32 777.104375 32 512S246.895625 32 512 32s480 214.895625 480 480-214.895625 480-480 480z m242.9521875-533.3278125h-272.56875a23.7121875 23.7121875 0 0 0-23.71125 23.7121875l-0.024375 59.255625c0 13.08 10.6078125 23.7121875 23.6878125 23.7121875h165.96c13.104375 0 23.7121875 10.6078125 23.7121875 23.6878125v11.855625a71.1121875 71.1121875 0 0 1-71.1121875 71.1121875h-225.215625a23.7121875 23.7121875 0 0 1-23.6878125-23.7121875V423.1278125a71.1121875 71.1121875 0 0 1 71.0878125-71.1121875h331.824375a23.7121875 23.7121875 0 0 0 23.6878125-23.71125l0.0721875-59.2565625a23.7121875 23.7121875 0 0 0-23.68875-23.7121875H423.08a177.76875 177.76875 0 0 0-177.76875 177.7921875V754.953125c0 13.1034375 10.60875 23.7121875 23.713125 23.7121875h349.63125a159.984375 159.984375 0 0 0 159.984375-159.984375V482.36a23.7121875 23.7121875 0 0 0-23.7121875-23.6878125z" fill="#515151" p-id="2522"></path></svg>
diff --git a/ruoyi-ui/src/assets/icons/svg/maxkey.svg b/ruoyi-ui/src/assets/icons/svg/maxkey.svg
new file mode 100644
index 0000000..f8f8a7d
--- /dev/null
+++ b/ruoyi-ui/src/assets/icons/svg/maxkey.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 256 256">
+  <image id="图层_1" data-name="图层 1" x="32" y="25" width="192" height="206" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADOCAYAAABo1g13AAAazklEQVR4nO2dS1NcR5bH/3kLYZl22OXdbCRdVtOoF4Zd9zxCsJudYNc7wScQRFvYO8Fmoo16AvgEwK53QquZHXjh3lJaWHinBH8AlxQdtiyZmxN5MqsooB6Z95V5b+UvQmGZKMGt4pw8jzwPhoA3xPFqPOxZON/h4beVL0EBCoaE+mJyFhBNMBYD4h4Ya0JACnuz548NbfrDhFIIAQ6wMwjB0ZBf+63F+U67np9ovgQFyImuoLMkBtgXAJuXX3b4SFJBWgBrQyTfIkIrKMZNggKkJI6/nEeCWbDoAQRmHQu7DS0wcCTiBRpocf6sVZHnLoSgAIbQCZ9MLGqBn4e92+Ir0n06JivR+HA8bnFGUIAhqFOeLQLsYYVO+GwwcQwhXiD67XAclCEowDV6hP5RjU75tLSA5KDOyhAUQLk3TSSTj8GwqP35wHWkZUhwgMaHwzoF0mOtAHTaC/YUgjI2ATPaADtE9OtmHazC2CmAOu0nlsGiR+G0z4i2CvzHZ/uVfQsePEMpdN0cYDX49rnDIcRmFRWh9goQBL9UKqcItVWAIPhOqYwi1FIB4vjJYyRsIwi+c7xXhFopgMrhR3tjc2lVFWSwzD6s+Jg1qoUCUJmCuLUX0pm+w/Z9S582PHiGTMR3159CNPYB9vsKv41xYRaisdj89N/etN/+w4sivMpagDh+MosLtg+GLzx4nIA1fliDSloAdeqzv4PhXzx4nEA6vLAGlbIAuunkMJz6dcOdNaiMBVCpzQl56ocMT/1Q1uDzP71st/9RqhJ4bwH0hdZTfaEVqD8b/Hxrs6x36bUCqC6syaOQ1x8zGA7B3q+V4RJ5qwDxnfVFMOyF29yxhSN6v1C0EkQ+frqU5WF4HoR/rJHW/4QOwgLxLgiO765vA/jag0cJuOc2GP7c/Ozf0X7z3bdFPI03CiCD3eZn//m/APuzB48T8Iv5opTACwXQ+f3/A9gfPXicgJ/MNz/7j7j95rsXeT6d8yA4ZHoClrTwdmqBtzdyacx3qgBB+AMpyU0JnClAEP5ARnJRAicKEIS/CwejSc+yc6rzi3xDA22vIGQ6+DOaKk1/vzJdepzJrASlK8AYCn+bhtEK8S0iObpc/rlo5XXBQ2XhSkFmIaIH9LmO17iXTEpQqgKMifC3AXGISLyUQ2ddTV+m9tCOUtRrmG8/UitBaQqgi9pOain8NFCWyRP+0Ndx492Zp4w9qKeFYPv8/JsV639VzMPcJL6z3qpVHT81eosXwCf7nOeTkiuLOP46RpIsg+GRjiVqAtvh59+sWf0ay3jjuryhDuXMUtB3fT7pbdGTNJYBPKrWkw/Eqpy6cAWgwjZgo+ifUygVPu1NIauACz0suOJWIcIy51sHJi8tVAF0SfPzIn9GoSjB3+T8b8eVfQ8piOMnyxVXhDai93MmmbbCFEBnfE4qmX0YU8G/TsUVgePt1NyozFAhClDZjI/M17NkZdwF/zqVVQTGjvnZNwtDX1LEz43vru9XLKii4JafbzmLVcRpV7gGCRmZczYDJ3N0dOZoo4LB8tCgOHcF0INpd/L+voVB7k5jhfO/FipY4jWa+BkxInk5hVlEuEf/FWiCWbqJgm6XW1RGIfASAi25LJv9AYVnpkgRRHJUKWsQJQuDrHquCqD9/td5fs8CaSPCCudbh0X8CBL4X+gGdh4Ryrl86iiGVAqGQzaDwly5+O66tAZPi/r+OTMwHshXAe6uv66E31/QqU9ujIDMfD0kwfcBOWFBQDaRHOftPlXKGjAc8rOtpZtfzokK5fvX+PlWbi6aPumXvRL6wUiLcMBmkOu8/gpZgxu/+1wUoBKuD2V4xFJeN7jiFPMQkDeoD619ePdwrQybeVkFyhQlbNvztPeN+4F8xqKoCk9/IZcnWshD+KXgi1PI93tEtTTVE35oN1Uq72txir2eDFRqOH+2jyiao4PGX5oQH+31Pl1mC+C/6yN2+fmzzHVIdOIrM1/PJRwqVljLahF0XPDc64pTgSX+o0p+ZFKACrg+m1lz+7UX/Jvs5+EaxXef7ADscUHPmJVuViibCyQmt314NwNYyyL8MrgVP2CbXJ3xEX70uEaZglptdUsbcmtJjE9/ofeX2gLEd54sg7E9g5eWTyRWyCdNifgBj5Fgo6L+fZ5IK7CS5T7B6wxRJObSWwDGfH1TqYVfBoMU4ArsBOEnZHB8JC0hpXtToK2wb5agTe4xf9ZKpQA68PXv8iOb8Mu05smYuTtmCKziHU7SZov8UgKxi2hquuMeW7tAHje2p77gIl9fhAUcRshM0X2k+pydukMDStztFcDPSs9U2R4y6++oYSec+jYw7LDfw6r3tkPp8kMXoFgbVPNlpQCepj3TCb8y52E4V1pU0d1SmnRpfG/9pIR7At2/PbUzrI11wupbJpN+XXgxcczPntkL//f04T8Pwp8BJcBH4hQL1krA3i8AkyfFFdHJrZNs06TY0dgCeHf6k2mT5Q12FZ0k/IzKGEKWJx/k52+tBLrBJt+W2RStrOZZIO9O/xTCf0q1O0H48yXWlsDqNKffXSRSxRF9aFMG8OzZwMaXQRhZAA99f+uMD538EaU5A8WQzhJkK5kw8vOHYRYDXNya92efJI3Asxd+Br8rVqtPnComiD5sQEw+tI4HcmpqMnOBfLn1lX5/xKwuVMg0R3ge3J5SUEpgcWvM+U5b9mkYPxzDS+rxJXcne0ffSAWgmh9fsiUU4Ji/6ZDqdEKs71aM0X0aow62Nrm+Z1uzeY6tGW0BIl8uvdh+ijKHwyD8TpjXlbTG0F0OGzTVolu+kPu0kaExgAp+mftbUkp5Wrs+0m2rzzTqqiGwKl7hzKpsgiVrENFlrEZ+vrzFLW4Q8dDQ1puyB8siN3FKNe1+lmqPE2pu0ZxNUExZIcYeljWhb5QL9KDoBxgJA7cU/rhC82rqjaBg2CoopqwQm5orazzlQBdIzY33wH9mie3Wj73g93tFjF/pQDK69KKsUIkMtgBqaYJjZOBrfhJQJ1eo7PQPGQ+c+vl7GeYCPSzxOfpjkfMn1yep+CKOerOXtqusSPoqQHznL4vuBxzJ09/iokOEHl7PkfcD3jUd9Y8BWGOx9Ce5TtTYNX2peEXzOKu844pTDjzBWXdxdofL6dH3ujuAq6roEb0HrxgUBLvN/sg6f/7f5rlfZnfp4gGcBtbKYVS30WLTsAr89BBeqQiL+nfle9CvxjD+a3HTqtNyQwG8yP4wGC04w2XO3/+sjyAhP8hjbLnOq3N9090Z3uXfpkf1njfT9hCXwY2LMOcTvWTe/2xr2vTl4hR+j2RXM/t3cRs7tie99Y9SdyC+bHHZLOM9Z+VmEOx6mTUTNpkf30//TXyMaTaDjTIEQVoGNkOfyTRZGzdI61bae87KFQugl9v95PSJomjaNPvj8en/EsCiq31eHXRyYLukzyjzFDkXXLUAFw3HlxXihbHwv6IA0D/hF9hlM5h1LfwSdp9ihIVCrYGgeh85VXq6asKPGwrAIrcKEMF8XxeDX5OHVcC3wu77levucYvyn8wmsEsunsdB7iiuKYBj/7/9OyMF0MGeT1frMq25kPfqoTyRPrlU0Jy+5TH1/97HahX8/GFcTYMKl7X/4sWord6XL8WqPz3Kuhn8D15vRiGkgopT+mvaUvFK+vnD6CqAzv+7w879cV+nhK7/u5SX8FMDEiZiXLCe2Ia10UjawG+tPColUylBiancsum1AI5X2jSMThV96eNL8LuSZTk1Zd0ubslMzQOALSLRJQ7XrVsiPdVJ2aDEAXYMIV50VvykQSuBWd9EhH0k+S3T841LBUiYO6FiaBkXvqk9vD6wqbMs1qhW01urSJjtkr0YEHIl67JSBuwjen/Qu/XQ+COfwYb4AV/Q59kfb8sX8uQyCHYZAAvxrfFr/XB/jnVQaYU88Wm3QjJ5om/bsxS1qVvfZPIovrueLvP0CwXFV5Wnk82aoaC+1sKPKwogmDsXKGKm7k/siftjnU2J4yezSvBJcfKs5pSfx7bc0q9iCHPYnBJ2+ge6bkffXHubzcobUgDyRV3W/7enTE8aH1Kf1v5wHD95jISdFKy8tLiEFM0CfcpvglHzeiXKF/JEW4AJd6e/9P/N05+u+xS4reujXB5W1kWRHGNzEsfrVsVwJPg1DXJHoRTgwmEALMSZ8WtdX9RZ3qbSye9iiXiCHVtLMK4oBWAOFQDMKI3ogf/PbXxj5fOXdvJfp4mEHdnGBONIJwh290FFhnl096v3jQvK9EQ9q/mYBdCE+CgMBxuBtgDCYa/mhJnvyZwrgHlmRC0TcX/6CjGfOkU6JigFEMxZBsi499etBTg2DRK12+FTa+LTuLkRpmUMwLULZLFIweFEAdnAbopvq6SkK/Tpz8EKDKCjAG5OCCbMFcBlo74wuxH18PTv4FfvhEdE+hLMDQJvTH6uOOnOxikfhrZxwZtcJeUnTar2DdwgAm479A8js/7jSaenv3m1pzfLRPqQMPfDzjxkAnjXlBLmBsNLsMhhmYagBveRqIECHiwTGQh7GMdfpi6hLvC52kUuwBjFBDARMgTDMYxTHJaTmBEjibzclEml3ZFYcqEI5ouyi0AYB8EuexXM6pRclpNUn1jdXJdfvuFWAaqB4UVdUICMNCGi0me8BgUI+IMQwQIExprS49GgAAF/kGtRSyYowGjMfHvzgD4wCIvByHnhVgFMA0fhsE1PGJrlxgdnuewa0EaEpbJWo/YyocqRXU7EMsA0FVkMptkdvy2A3LaflH/CjqQhLecnLc4N22JzZuCe4HJgphWe7oTLsA1TTm2L730lh1b5eRss2DH/cWtspj2YEgHv/J8C8M6hBbBpxLGZb1Q2kTAv6R4jorI3c1+BJUbuBc2vcRUHCDR1P/Joovd+jgmXa6d4+lGKdaYTBDsSLovbU5dxgOE4FjpMmNmQr1IRLAj/ANwqgF2Njzv3wmYcI7vwK9CUwW/EjHcujxudpnhnQWYcf+1/KhSYN13zT6k8lm5obiEIHFht3B8zOk3x5sOpcicxCzJZ+jHkuWCz5p+9X3FoVXueA5yfb/nWo+wVHRfI3Qlh3uvr1re22ElGsUB0kdc6orS0waIFx8/gPdoCuLzGZ0Z5dhpL4vhGWO8lNoLz/zksZDGdKRFWguszGm0BEofm2uriyHWeffRGlR60+1G+EkRiJaQ9zVAK0Ljl0r+OLQY3uU4xxuKV3RrUkpWgrYT/mdWNr7RsxncdNYMUQJtKd1ag+U/TQNj9qRbhqa2wkBJEF0uUkiwKSneKhRTCH+uFeUe2yl0HeqtBHQbCZiM79HhCt36tqg61HjpLMYEKSvPe2q42u7CpOdumcp3a7TTKx2DYFqd4bRPrVJ1eBTAa/1EILDKf+28zprA45tOcltLS8vOtZUTRdA6K0AbELqJoTlqYVNWUv1JMc92akUUQp/Sn9m5Rd99iHH+5iqT8puQub6c+N9kUo9ek+jLeI9MiOXUJeDEPgUeGS8rbYKIFJgvbPtnPUkIsfsBjCIyuXWLYgcBuXTfI9CrAvNO5MUKs8B/N/FfxCj85G5XYC6Mivbm8hEONLxRNgMkZPur9yRQ1Lcq+aKVZh9oP8YpWzdrsL+B6N1rtyql7FEBONps0G1VYzKPs8/NvjC6PxCmtHbJKSRYI15agEiek+B6zYDhKeYBwJLQZvzbdb90YQJdFO3xjYtE4HZp4VGujfOajKvjL5D6mF37Qe41wUqf44FpPsNOGjqZpOlSfQD6VHSsl+N75FpuBkM+PTMLfi8wSyWyRL1Y4NVcVQCRuhUo0bD5Q3/pbO6ejV0IhU53iB2wbBbz2bFQ9bcp6/8d9HIA23k5Nm+4Nlh++J5vjryIv7ATWXMcFZJEiClyLXy8rq3UFlqqWLbpiAdzHAbTOx+Y0yftSKR8EZVlOXN2sdk/9CCelCD+6O9xeVy0+6DMXyHljt/mSiXeUo/azqV/QVptSb1ZJ8KUL9gteQzgra1jWSYFKxAfs+hec3wdIomTBdEgSnbIM7i7wzOF61epB3m4CZXdU3/IjL+5HLvH+/uCGAkAtLPjJ2eI80MS4Y372jXEzh7exwGCOqaRD4DhNTp1qeN6Ry/EADIseLBEfjicxUT8GKcC+822HNlbAr/IIO6QLp9o9pXCc9RT7ce1GdQ4iqeD3aE6R7wI/mH02A9edclfoPxlOiGMw5lYBksYj01y/rMcRp/Ta6m1CVALe/7n7HU+i8CcqEoe95/3pPxy38eHQfVO3WNZ7d01Z8TYgDoAs2u1C7iIy0VcB9IAn9/Ue4iPjunvyLxnC/Bt/2WTT/h1Qg8ej+zDgSYh5mwXPbAYbzsenBG4Ske/vZSZoyH6A31pezLaxK4+QPvJScIW8gmMSa6YPRNUIJTJQAdStsHB/0yqtwJ0nxhdJOtXm3xz88WXByvVJJh/Hd9dfW8Z/qRm+ISYSfpQdM7ZtMTkC7L7qYir2oQIGbNrk/rXQb6i9wZOv47tf7RWtCEMVQM259GLacROf/mLnCv0a4gGnqDZKu7GMYvJal5pYVoqwXlhZxegdYezCk8UKYtUqIFY7BZa8X11UTzg+thP+OH7yeMgF3wa5RRausCl9b4KvPhiVSL92WhpxCcfbqTnTcmlkbwEM2GPdIkpuTjJ5YiRjcpUq+7CSV3/0SAugS6R98adjW1eIam0YWYJA8aTrj04mj4wPWDk9I8f4wGxNqlr940lqUbpC61ZlGnp0iVc1KLVDpZ6thV/79ykEmeKDo/jueqay75EuUIf47pMdgBmPCC+YNqL3c7ZmUNflW091C4z6YCneWrCtbI3vrNuOZxkEhxCbpmN1ejFXADnEKUle5/CweWEdDyAoQRGkGpWi/f6jfMvY2T6iXzdtDkbjTfF6gK5PLYgyHrBuhKEr+XBbnBfK57cX/mb+wo+etOlX26bxgbECqFdHnq3bEctpcsTsPg7BMBdSpJl4mXogmJjcK7aBSaxSfGCQNjV2gTp40SxzkzV+vmVdaqubtws4iWrPAW5jNU11pz6wyjxIOaJkZVBzlb0C+HUvcEmEZc63Urlo4hV2bHaAjTmb1je8GgfC30P/+MBaAaDeiE+zOTu09YKIVOUPeoTJ03BhNhApOCtpp2G7Ff4rbODt1G4neZJOAXy1AlmVILhE/ZFN7R9hJW1Di0fC36GbNk2lAPBhn8BgMikB/Js+7Q6VKVuhpEFKPBT+S6Jo2i4L1APnf9vxpFL0Ok0k7MT2trgX7ePmscWlushy8o8xXVvhl+P4+V95agVQ38ODtslBJNjPUkYr03tshi7NVsYsXXpM6c376bI8HbwWflooyDaRNgboxbMSiX5s8POtzIqqb5BT1q1UgmOd4clk1VV8+NE2XUr5Ss8q2ewKIN+wmDyB8FgwZBD3ZmrFtmyiHzVUhFwEH53yhotJeclYzkDeNDBxzM+edacOZnOBuiNUEr8rLeXczE9/PsmjfFaWUrAZTOtmGx9joNGoaXTSt5c3uZkW/XVQM2Unj7wWfloy2Lgiq5ktQIcKuEKgD0CItTRVg4Og1KmgAb0PK2AV1EzSj7Gf54wev4PdK9yoGMhPAargCnVh+3j78VoeLlEv3SnNfimDPN2/1XM5cw3myaKKW3uGK17dwnDIz7ZuNEblpgDwZbS6OUNrRLKiL9XmSRlUr2tZCsHplJcDAW7jsKhpbNTDm7ANDy9DbyKzPixa0BXNV8hVAeD3BdkA7GvI09Az0nye/GQ5+VlQv3JaAeJ6T7FcTfRSC3yr6PGDlTr1O0RY4nyr731G7gogie99dSQHWhXxvQsidUdRHmhr0WshrloLFbS2kchbbrRdzNnX5S8yxlutxKl/ySY/3xoYnxSjAJWKB65QqFtUVXTr4nblUr8ML/nZ1tBdCoUoAJSPOIuEmXf7e0U5bpHvUEwn2NNKuTsdhvj9V19WINWLB64znopQacHvEIk5k4LIQhUA1bkfGI4cxpSwXf5j/0CqDpDbenFrEREeVVrwFcYdgoUrACgoXn+utxhWHQqW0fhwXBeroF3VhxUMbgcxNOi9TjkKoILiowovd7uJLCVIxAu5TkpPz6sMKqMzsQzGHtbgtO9B7PLzZ1aDskpRAHTmConkqIKZodFcKoO3lkHN4ZlYrJ/QawwyPv3/WYnUWgkuadG2fcGO0XjfcqUQqjLz1jytVQWrQp1Sepi8CJya59y+tKVUBcD4KEEvnG5p5W2tvLVtCA584Hm5TWql0K0YF3SrPAvG7kHQ2tXxaO43THcO/ucOqPYdQW60lXIIWc4gf3lvAHapFEKoXyhjPQeFuKe+JitQ6evNsf4MMwo/XCkAghIEspKD8COPhpi00CVFFM3RGwkEbMhJ+OFSAdAZuMuihaAEAWMo4M1H+OHSBeplDAPjQBoyZHsG4YUC4FIJntfqsiyQJwf8fCv3SRNOXaBelDv0fkE3awcCvWwWIfzwyQL04unw3YAbUo2+N6Xh4y+1/ea74+bnf3oDwf7Lg8cJuICmtyVL/OzZ34v86V5agA4hOB5TVKZnMa9MzzC8VgBcKsF2TcqpAyOxr+jMgvcK0CHEBbVHNvyvDJreUBSVUQAEl6i+yI471lgpw+W5TqUUAN1mjlsblW+zDEAXBG4WmeUZReUUoINq3I72gjWoKA5P/V4qqwC4HNa0GmKDSuH81O+l0grQIcQGFUHe8rNozfWp30stFKBDHD9ZVvNsgiJ4BeX1k1UfJ+7VSgEQ3CLf8Mrd6UftFKADuUVJIu8OUm+LDKRGCv4uoqmdPEuXi6C2CtAhKEKpVEbwO9ReAToERSiUygl+h7FRgA6kCPhtESJ6HILlzLQQJQfAJ/tVE/wOY6cAvaisUS2GwZYLXWKJzTrsURhrBejQdY8YHgSrMBCZuz+oopszjKAA19CL/mT73cMws0j69uIAkTis69acoABDiOO/LCJpLI6ZZeCAeFFnoe8lKIAh2jLMg4kHNYsZ2mCiBSZeAL8djts2nKAAKYjjjSbwTznacVGtPGWzFXKXegReTrL+pFUnn96WoAA5QbNOgVkkNKXZF6XQk6nFmZpMXZ/NNnkRFKBAupYCoomkof4rlUOipjtniSva6jSXy7JFi6ZLR4LjgrXRkCf77/g4n+ymBAXwAFpm0WWij1LIsekftDA320GwcwLA/wMQTIdh+nm6rAAAAABJRU5ErkJggg=="/>
+</svg>
diff --git a/ruoyi-ui/src/assets/styles/variables.module.scss b/ruoyi-ui/src/assets/styles/variables.module.scss
new file mode 100644
index 0000000..3dbfaa7
--- /dev/null
+++ b/ruoyi-ui/src/assets/styles/variables.module.scss
@@ -0,0 +1,65 @@
+// base color
+$blue: #324157;
+$light-blue: #3A71A8;
+$red: #C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow: #FEC171;
+$panGreen: #30B08F;
+
+// 默认菜单主题风格
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #f4f4f5;
+$base-menu-background: #304156;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-background: #ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-hover: #001528;
+
+// 自定义暗色菜单风格
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+
+$--color-primary: #409EFF;
+$--color-success: #67C23A;
+$--color-warning: #E6A23C;
+$--color-danger: #F56C6C;
+$--color-info: #909399;
+
+$base-sidebar-width: 200px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuColor: $base-menu-color;
+  menuLightColor: $base-menu-light-color;
+  menuColorActive: $base-menu-color-active;
+  menuBackground: $base-menu-background;
+  menuLightBackground: $base-menu-light-background;
+  subMenuBackground: $base-sub-menu-background;
+  subMenuHover: $base-sub-menu-hover;
+  sideBarWidth: $base-sidebar-width;
+  logoTitleColor: $base-logo-title-color;
+  logoLightTitleColor: $base-logo-light-title-color;
+  primaryColor: $--color-primary;
+  successColor: $--color-success;
+  dangerColor: $--color-danger;
+  infoColor: $--color-info;
+  warningColor: $--color-warning;
+}
diff --git a/ruoyi-ui/src/components/Breadcrumb/index.vue b/ruoyi-ui/src/components/Breadcrumb/index.vue
index 1696f54..aeeaabc 100644
--- a/ruoyi-ui/src/components/Breadcrumb/index.vue
+++ b/ruoyi-ui/src/components/Breadcrumb/index.vue
@@ -9,54 +9,46 @@
   </el-breadcrumb>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      levelList: null
-    }
-  },
-  watch: {
-    $route(route) {
-      // if you go to the redirect page, do not update the breadcrumbs
-      if (route.path.startsWith('/redirect/')) {
-        return
-      }
-      this.getBreadcrumb()
-    }
-  },
-  created() {
-    this.getBreadcrumb()
-  },
-  methods: {
-    getBreadcrumb() {
-      // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
+<script setup>
+const route = useRoute();
+const router = useRouter();
+const levelList = ref([])
 
-      if (!this.isDashboard(first)) {
-        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
-      }
-
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
-    },
-    isDashboard(route) {
-      const name = route && route.name
-      if (!name) {
-        return false
-      }
-      return name.trim() === 'Index'
-    },
-    handleLink(item) {
-      const { redirect, path } = item
-      if (redirect) {
-        this.$router.push(redirect)
-        return
-      }
-      this.$router.push(path)
-    }
+function getBreadcrumb() {
+  // only show routes with meta.title
+  let matched = route.matched.filter(item => item.meta && item.meta.title);
+  const first = matched[0]
+  // 判断是否为首页
+  if (!isDashboard(first)) {
+    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
   }
+
+  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
 }
+function isDashboard(route) {
+  const name = route && route.name
+  if (!name) {
+    return false
+  }
+  return name.trim() === 'Index'
+}
+function handleLink(item) {
+  const { redirect, path } = item
+  if (redirect) {
+    router.push(redirect)
+    return
+  }
+  router.push(path)
+}
+
+watchEffect(() => {
+  // if you go to the redirect page, do not update the breadcrumbs
+  if (route.path.startsWith('/redirect/')) {
+    return
+  }
+  getBreadcrumb()
+})
+getBreadcrumb();
 </script>
 
 <style lang="scss" scoped>
diff --git a/ruoyi-ui/src/components/Crontab/index.vue b/ruoyi-ui/src/components/Crontab/index.vue
index 3963df2..9e1fa48 100644
--- a/ruoyi-ui/src/components/Crontab/index.vue
+++ b/ruoyi-ui/src/components/Crontab/index.vue
@@ -182,7 +182,6 @@ export default {
       "updateCrontabValue", name, value, from;
       this.crontabValueObj[name] = value;
       if (from && from !== name) {
-        console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
         this.changeRadio(name, value);
       }
     },
diff --git a/ruoyi-ui/src/components/DictTag/index.vue b/ruoyi-ui/src/components/DictTag/index.vue
index a0fd66f..9473c90 100644
--- a/ruoyi-ui/src/components/DictTag/index.vue
+++ b/ruoyi-ui/src/components/DictTag/index.vue
@@ -3,88 +3,45 @@
     <template v-for="(item, index) in options">
       <template v-if="values.includes(item.value)">
         <span
-          v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
+          v-if="item.elTagType == 'default' || item.elTagType == ''"
           :key="item.value"
           :index="index"
-          :class="item.raw.cssClass"
-          >{{ item.label + " " }}</span
-        >
+          :class="item.elTagType"
+        >{{ item.label }}</span>
         <el-tag
           v-else
           :disable-transitions="true"
-          :key="item.value"
+          :key="item.value + ''"
           :index="index"
-          :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
-          :class="item.raw.cssClass"
-        >
-          {{ item.label + " " }}
-        </el-tag>
+          :type="item.elTagType === 'primary' ? '' : item.elTagType"
+          :class="item.elTagType"
+        >{{ item.label }}</el-tag>
       </template>
     </template>
-    <template v-if="unmatch && showValue">
-      {{ unmatchArray | handleArray }}
-    </template>
   </div>
 </template>
 
-<script>
-export default {
-  name: "DictTag",
-  props: {
-    options: {
-      type: Array,
-      default: null,
-    },
-    value: [Number, String, Array],
-    // 当未找到匹配的数据时，显示value
-    showValue: {
-      type: Boolean,
-      default: true,
-    }
+<script setup>
+const props = defineProps({
+  // 数据
+  options: {
+    type: Array,
+    default: null,
   },
-  data() {
-    return {
-      unmatchArray: [], // 记录未匹配的项
-    }
-  },
-  computed: {
-    values() {
-      if (this.value !== null && typeof this.value !== "undefined") {
-        return Array.isArray(this.value) ? this.value : [String(this.value)];
-      } else {
-        return [];
-      }
-    },
-    unmatch() {
-      this.unmatchArray = [];
-      if (this.value !== null && typeof this.value !== "undefined") {
-        // 传入值为非数组
-        if (!Array.isArray(this.value)) {
-          if (this.options.some((v) => v.value == this.value)) return false;
-          this.unmatchArray.push(this.value);
-          return true;
-        }
-        // 传入值为Array
-        this.value.forEach((item) => {
-          if (!this.options.some((v) => v.value == item))
-            this.unmatchArray.push(item);
-        });
-        return true;
-      }
-      // 没有value不显示
-      return false;
-    },
-  },
-  filters: {
-    handleArray(array) {
-      if (array.length === 0) return "";
-      return array.reduce((pre, cur) => {
-        return pre + " " + cur;
-      })
-    }
+  // 当前的值
+  value: [Number, String, Array],
+})
+
+const values = computed(() => {
+  if (props.value !== null && typeof props.value !== 'undefined') {
+    return Array.isArray(props.value) ? props.value : [String(props.value)];
+  } else {
+    return [];
   }
-};
+})
+
 </script>
+
 <style scoped>
 .el-tag + .el-tag {
   margin-left: 10px;
diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue
index 6c583cf..1202aa6 100644
--- a/ruoyi-ui/src/components/FileUpload/index.vue
+++ b/ruoyi-ui/src/components/FileUpload/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="upload-file">
     <el-upload
-      multiple
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
@@ -12,12 +11,12 @@
       :show-file-list="false"
       :headers="headers"
       class="upload-file-uploader"
-      ref="fileUpload"
+      ref="upload"
     >
       <!-- 上传按钮 -->
-      <el-button size="mini" type="primary">选取文件</el-button>
+      <el-button type="primary">选取文件</el-button>
       <!-- 上传提示 -->
-      <div class="el-upload__tip" slot="tip" v-if="showTip">
+      <div class="el-upload__tip" v-if="showTip">
         请上传
         <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
         <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
@@ -27,7 +26,7 @@
 
     <!-- 文件列表 -->
     <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
         <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
@@ -39,158 +38,132 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { getToken } from "@/utils/auth";
 
-export default {
-  name: "FileUpload",
-  props: {
-    // 值
-    value: [String, Object, Array],
-    // 数量限制
-    limit: {
-      type: Number,
-      default: 5,
-    },
-    // 大小限制(MB)
-    fileSize: {
-      type: Number,
-      default: 5,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
-    },
-    // 是否显示提示
-    isShowTip: {
-      type: Boolean,
-      default: true
+const props = defineProps({
+  modelValue: [String, Object, Array],
+  // 数量限制
+  limit: {
+    type: Number,
+    default: 5,
+  },
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5,
+  },
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: {
+    type: Array,
+    default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+  },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
+const headers = ref({ Authorization: "Bearer " + getToken() });
+const fileList = ref([]);
+const showTip = computed(
+  () => props.isShowTip && (props.fileType || props.fileSize)
+);
+
+watch(() => props.modelValue, val => {
+  if (val) {
+    let temp = 1;
+    // 首先将值转为数组
+    const list = Array.isArray(val) ? val : props.modelValue.split(',');
+    // 然后将数组转为对象数组
+    fileList.value = list.map(item => {
+      if (typeof item === "string") {
+        item = { name: item, url: item };
+      }
+      item.uid = item.uid || new Date().getTime() + temp++;
+      return item;
+    });
+  } else {
+    fileList.value = [];
+    return [];
+  }
+});
+
+// 上传前校检格式和大小
+function handleBeforeUpload(file) {
+  // 校检文件类型
+  if (props.fileType.length) {
+    let fileExtension = "";
+    if (file.name.lastIndexOf(".") > -1) {
+      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
     }
-  },
-  data() {
-    return {
-      number: 0,
-      uploadList: [],
-      baseUrl: process.env.VUE_APP_BASE_API,
-      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: [],
-    };
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          let temp = 1;
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              item = { name: item, url: item };
-            }
-            item.uid = item.uid || new Date().getTime() + temp++;
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
-  },
-  methods: {
-    // 上传前校检格式和大小
-    handleBeforeUpload(file) {
-      // 校检文件类型
-      if (this.fileType) {
-        const fileName = file.name.split('.');
-        const fileExt = fileName[fileName.length - 1];
-        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
-        if (!isTypeOk) {
-          this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
-          return false;
-        }
-      }
-      // 校检文件大小
-      if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
-        if (!isLt) {
-          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
-          return false;
-        }
-      }
-      this.$modal.loading("正在上传文件，请稍候...");
-      this.number++;
-      return true;
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传失败
-    handleUploadError(err) {
-      this.$modal.msgError("上传文件失败，请重试");
-      this.$modal.closeLoading()
-    },
-    // 上传成功回调
-    handleUploadSuccess(res, file) {
-      if (res.code === 200) {
-        this.uploadList.push({ name: res.fileName, url: res.fileName });
-        this.uploadedSuccessfully();
-      } else {
-        this.number--;
-        this.$modal.closeLoading();
-        this.$modal.msgError(res.msg);
-        this.$refs.fileUpload.handleRemove(file);
-        this.uploadedSuccessfully();
-      }
-    },
-    // 删除文件
-    handleDelete(index) {
-      this.fileList.splice(index, 1);
-      this.$emit("input", this.listToString(this.fileList));
-    },
-    // 上传结束处理
-    uploadedSuccessfully() {
-      if (this.number > 0 && this.uploadList.length === this.number) {
-        this.fileList = this.fileList.concat(this.uploadList);
-        this.uploadList = [];
-        this.number = 0;
-        this.$emit("input", this.listToString(this.fileList));
-        this.$modal.closeLoading();
-      }
-    },
-    // 获取文件名称
-    getFileName(name) {
-      if (name.lastIndexOf("/") > -1) {
-        return name.slice(name.lastIndexOf("/") + 1);
-      } else {
-        return "";
-      }
-    },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url + separator;
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    const isTypeOk = props.fileType.some((type) => {
+      if (file.type.indexOf(type) > -1) return true;
+      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+      return false;
+    });
+    if (!isTypeOk) {
+      proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
+      return false;
     }
   }
-};
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  return true;
+}
+
+// 文件个数超出
+function handleExceed() {
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+}
+
+// 上传失败
+function handleUploadError(err) {
+  proxy.$modal.msgError("上传失败");
+}
+
+// 上传成功回调
+function handleUploadSuccess(res, file) {
+  proxy.$modal.msgSuccess("上传成功");
+  fileList.value.push({ name: res.fileName, url: res.fileName });
+  emit("update:modelValue", listToString(fileList.value));
+}
+
+// 删除文件
+function handleDelete(index) {
+  fileList.value.splice(index, 1);
+  emit("update:modelValue", listToString(fileList.value));
+}
+
+// 获取文件名称
+function getFileName(name) {
+  if (name.lastIndexOf("/") > -1) {
+    return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
+  } else {
+    return "";
+  }
+}
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+  let strs = "";
+  separator = separator || ",";
+  for (let i in list) {
+    strs += list[i].url + separator;
+  }
+  return strs != '' ? strs.substr(0, strs.length - 1) : '';
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/ruoyi-ui/src/components/Hamburger/index.vue b/ruoyi-ui/src/components/Hamburger/index.vue
index 368b002..18c201e 100644
--- a/ruoyi-ui/src/components/Hamburger/index.vue
+++ b/ruoyi-ui/src/components/Hamburger/index.vue
@@ -13,20 +13,17 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Hamburger',
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    toggleClick() {
-      this.$emit('toggleClick')
-    }
+<script setup>
+defineProps({
+  isActive: {
+    type: Boolean,
+    default: false
   }
+})
+
+const emit = defineEmits()
+const toggleClick = () => {
+  emit('toggleClick');
 }
 </script>
 
diff --git a/ruoyi-ui/src/components/HeaderSearch/index.vue b/ruoyi-ui/src/components/HeaderSearch/index.vue
index c4d76bb..af96bdc 100644
--- a/ruoyi-ui/src/components/HeaderSearch/index.vue
+++ b/ruoyi-ui/src/components/HeaderSearch/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div :class="{'show':show}" class="header-search">
+  <div :class="{ 'show': show }" class="header-search">
     <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
     <el-select
-      ref="headerSearchSelect"
+      ref="headerSearchSelectRef"
       v-model="search"
       :remote-method="querySearch"
       filterable
@@ -17,138 +17,129 @@
   </div>
 </template>
 
-<script>
-// fuse is a lightweight fuzzy-search module
-// make search results more in line with expectations
-import Fuse from 'fuse.js/dist/fuse.min.js'
-import path from 'path'
+<script setup>
+import Fuse from 'fuse.js'
+import { getNormalPath } from '@/utils/ruoyi'
+import { isHttp } from '@/utils/validate'
 
-export default {
-  name: 'HeaderSearch',
-  data() {
-    return {
-      search: '',
-      options: [],
-      searchPool: [],
-      show: false,
-      fuse: undefined
+const search = ref('');
+const options = ref([]);
+const searchPool = ref([]);
+const show = ref(false);
+const fuse = ref(undefined);
+const headerSearchSelectRef = ref(null);
+const store = useStore();
+const router = useRouter();
+const routes = computed(() => store.getters.permission_routes);
+
+function click() {
+  show.value = !show.value
+  if (show.value) {
+    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
+  }
+};
+function close() {
+  headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
+  options.value = []
+  show.value = false
+}
+function change(val) {
+  const path = val.path;
+  if (isHttp(path)) {
+    // http(s):// 路径新窗口打开
+    const pindex = path.indexOf("http");
+    window.open(path.substr(pindex, path.length), "_blank");
+  } else {
+    router.push(path)
+  }
+
+  search.value = ''
+  options.value = []
+  nextTick(() => {
+    show.value = false
+  })
+}
+function initFuse(list) {
+  fuse.value = new Fuse(list, {
+    shouldSort: true,
+    threshold: 0.4,
+    location: 0,
+    distance: 100,
+    maxPatternLength: 32,
+    minMatchCharLength: 1,
+    keys: [{
+      name: 'title',
+      weight: 0.7
+    }, {
+      name: 'path',
+      weight: 0.3
+    }]
+  })
+}
+// Filter out the routes that can be displayed in the sidebar
+// And generate the internationalized title
+function generateRoutes(routes, basePath = '', prefixTitle = []) {
+  let res = []
+
+  for (const r of routes) {
+    // skip hidden router
+    if (r.hidden) { continue }
+    const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+    const data = {
+      path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
+      title: [...prefixTitle]
     }
-  },
-  computed: {
-    routes() {
-      return this.$store.getters.permission_routes
-    }
-  },
-  watch: {
-    routes() {
-      this.searchPool = this.generateRoutes(this.routes)
-    },
-    searchPool(list) {
-      this.initFuse(list)
-    },
-    show(value) {
-      if (value) {
-        document.body.addEventListener('click', this.close)
-      } else {
-        document.body.removeEventListener('click', this.close)
+
+    if (r.meta && r.meta.title) {
+      data.title = [...data.title, r.meta.title]
+
+      if (r.redirect !== 'noRedirect') {
+        // only push the routes with title
+        // special case: need to exclude parent router without redirect
+        res.push(data)
       }
     }
-  },
-  mounted() {
-    this.searchPool = this.generateRoutes(this.routes)
-  },
-  methods: {
-    click() {
-      this.show = !this.show
-      if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+
+    // recursive child routes
+    if (r.children) {
+      const tempRoutes = generateRoutes(r.children, data.path, data.title)
+      if (tempRoutes.length >= 1) {
+        res = [...res, ...tempRoutes]
       }
-    },
-    close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-      this.options = []
-      this.show = false
-    },
-    change(val) {
-      const path = val.path;
-      if(this.ishttp(val.path)) {
-        // http(s):// 路径新窗口打开
-        const pindex = path.indexOf("http");
-        window.open(path.substr(pindex, path.length), "_blank");
-      } else {
-        this.$router.push(val.path)
-      }
-      this.search = ''
-      this.options = []
-      this.$nextTick(() => {
-        this.show = false
-      })
-    },
-    initFuse(list) {
-      this.fuse = new Fuse(list, {
-        shouldSort: true,
-        threshold: 0.4,
-        location: 0,
-        distance: 100,
-        minMatchCharLength: 1,
-        keys: [{
-          name: 'title',
-          weight: 0.7
-        }, {
-          name: 'path',
-          weight: 0.3
-        }]
-      })
-    },
-    // Filter out the routes that can be displayed in the sidebar
-    // And generate the internationalized title
-    generateRoutes(routes, basePath = '/', prefixTitle = []) {
-      let res = []
-
-      for (const router of routes) {
-        // skip hidden router
-        if (router.hidden) { continue }
-
-        const data = {
-          path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
-          title: [...prefixTitle]
-        }
-
-        if (router.meta && router.meta.title) {
-          data.title = [...data.title, router.meta.title]
-
-          if (router.redirect !== 'noRedirect') {
-            // only push the routes with title
-            // special case: need to exclude parent router without redirect
-            res.push(data)
-          }
-        }
-
-        // recursive child routes
-        if (router.children) {
-          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
-          if (tempRoutes.length >= 1) {
-            res = [...res, ...tempRoutes]
-          }
-        }
-      }
-      return res
-    },
-    querySearch(query) {
-      if (query !== '') {
-        this.options = this.fuse.search(query)
-      } else {
-        this.options = []
-      }
-    },
-    ishttp(url) {
-      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
     }
   }
+  return res
 }
+function querySearch(query) {
+  if (query !== '') {
+    options.value = fuse.value.search(query)
+  } else {
+    options.value = []
+  }
+}
+
+onMounted(() => {
+  searchPool.value = generateRoutes(routes.value);
+})
+
+watchEffect(() => {
+  searchPool.value = generateRoutes(routes.value)
+})
+
+watch(show, (value) => {
+  if (value) {
+    document.body.addEventListener('click', close)
+  } else {
+    document.body.removeEventListener('click', close)
+  }
+})
+
+watch(searchPool, (list) => {
+  initFuse(list)
+})
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .header-search {
   font-size: 0 !important;
 
@@ -168,7 +159,7 @@ export default {
     display: inline-block;
     vertical-align: middle;
 
-    ::v-deep .el-input__inner {
+    :deep(.el-input__inner) {
       border-radius: 0;
       border: 0;
       padding-left: 0;
diff --git a/ruoyi-ui/src/components/IconSelect/index.vue b/ruoyi-ui/src/components/IconSelect/index.vue
index 8dadc02..964c42d 100644
--- a/ruoyi-ui/src/components/IconSelect/index.vue
+++ b/ruoyi-ui/src/components/IconSelect/index.vue
@@ -1,104 +1,74 @@
-<!-- @author zhengjie -->
 <template>
   <div class="icon-body">
-    <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
-      <i slot="suffix" class="el-icon-search el-input__icon" />
+    <el-input
+      v-model="iconName"
+      style="position: relative;"
+      clearable
+      placeholder="请输入图标名称"
+      @clear="filterIcons"
+      @input="filterIcons"
+    >
+      <template #suffix><i class="el-icon-search el-input__icon" /></template>
     </el-input>
     <div class="icon-list">
-      <div class="list-container">
-        <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
-          <div :class="['icon-item', { active: activeIcon === item }]">
-            <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
-            <span>{{ item }}</span>
-          </div>
-        </div>
+      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
+        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
+        <span>{{ item }}</span>
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 import icons from './requireIcons'
-export default {
-  name: 'IconSelect',
-  props: {
-    activeIcon: {
-      type: String
+
+const iconName = ref('');
+const iconList = ref(icons);
+const emit = defineEmits(['selected']);
+
+function filterIcons() {
+  iconList.value = icons
+  if (iconName.value) {
+    iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
+  }
+}
+
+function selectedIcon(name) {
+  emit('selected', name)
+  document.body.click()
+}
+
+function reset() {
+  iconName.value = ''
+  iconList.value = icons
+}
+
+defineExpose({
+  reset
+})
+</script>
+
+<style lang='scss' scoped>
+.icon-body {
+  width: 100%;
+  padding: 10px;
+  .icon-list {
+    height: 200px;
+    overflow-y: scroll;
+    div {
+      height: 30px;
+      line-height: 30px;
+      margin-bottom: -5px;
+      cursor: pointer;
+      width: 33%;
+      float: left;
     }
-  },
-  data() {
-    return {
-      name: '',
-      iconList: icons
-    }
-  },
-  methods: {
-    filterIcons() {
-      this.iconList = icons
-      if (this.name) {
-        this.iconList = this.iconList.filter(item => item.includes(this.name))
-      }
-    },
-    selectedIcon(name) {
-      this.$emit('selected', name)
-      document.body.click()
-    },
-    reset() {
-      this.name = ''
-      this.iconList = icons
+    span {
+      display: inline-block;
+      vertical-align: -0.15em;
+      fill: currentColor;
+      overflow: hidden;
     }
   }
 }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .icon-body {
-    width: 100%;
-    padding: 10px;
-    .icon-search {
-      position: relative;
-      margin-bottom: 5px;
-    }
-    .icon-list {
-      height: 200px;
-      overflow: auto;
-      .list-container {
-        display: flex;
-        flex-wrap: wrap;
-        .icon-item-wrapper {
-          width: calc(100% / 3);
-          height: 25px;
-          line-height: 25px;
-          cursor: pointer;
-          display: flex;
-          .icon-item {
-            display: flex;
-            max-width: 100%;
-            height: 100%;
-            padding: 0 5px;
-            &:hover {
-              background: #ececec;
-              border-radius: 5px;
-            }
-            .icon {
-              flex-shrink: 0;
-            }
-            span {
-              display: inline-block;
-              vertical-align: -0.15em;
-              fill: currentColor;
-              padding-left: 2px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-          }
-          .icon-item.active {
-            background: #ececec;
-            border-radius: 5px;
-          }
-        }
-      }
-    }
-  }
 </style>
diff --git a/ruoyi-ui/src/components/IconSelect/requireIcons.js b/ruoyi-ui/src/components/IconSelect/requireIcons.js
index 99e5c54..eed9a09 100644
--- a/ruoyi-ui/src/components/IconSelect/requireIcons.js
+++ b/ruoyi-ui/src/components/IconSelect/requireIcons.js
@@ -1,11 +1,8 @@
-
-const req = require.context('../../assets/icons/svg', false, /\.svg$/)
-const requireAll = requireContext => requireContext.keys()
-
-const re = /\.\/(.*)\.svg/
-
-const icons = requireAll(req).map(i => {
-  return i.match(re)[1]
-})
+let icons = []
+const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
+for (const path in modules) {
+  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
+  icons.push(p);
+}
 
 export default icons
diff --git a/ruoyi-ui/src/components/ImagePreview/index.vue b/ruoyi-ui/src/components/ImagePreview/index.vue
index 3c770c7..30fd088 100644
--- a/ruoyi-ui/src/components/ImagePreview/index.vue
+++ b/ruoyi-ui/src/components/ImagePreview/index.vue
@@ -5,64 +5,59 @@
     :style="`width:${realWidth};height:${realHeight};`"
     :preview-src-list="realSrcList"
   >
-    <div slot="error" class="image-slot">
-      <i class="el-icon-picture-outline"></i>
-    </div>
+    <template #error>
+      <div class="image-slot">
+        <el-icon><picture-filled /></el-icon>
+      </div>
+    </template>
   </el-image>
 </template>
 
-<script>
+<script setup>
 import { isExternal } from "@/utils/validate";
 
-export default {
-  name: "ImagePreview",
-  props: {
-    src: {
-      type: String,
-      default: ""
-    },
-    width: {
-      type: [Number, String],
-      default: ""
-    },
-    height: {
-      type: [Number, String],
-      default: ""
-    }
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
   },
-  computed: {
-    realSrc() {
-      if (!this.src) {
-        return;
-      }
-      let real_src = this.src.split(",")[0];
-      if (isExternal(real_src)) {
-        return real_src;
-      }
-      return process.env.VUE_APP_BASE_API + real_src;
-    },
-    realSrcList() {
-      if (!this.src) {
-        return;
-      }
-      let real_src_list = this.src.split(",");
-      let srcList = [];
-      real_src_list.forEach(item => {
-        if (isExternal(item)) {
-          return srcList.push(item);
-        }
-        return srcList.push(process.env.VUE_APP_BASE_API + item);
-      });
-      return srcList;
-    },
-    realWidth() {
-      return typeof this.width == "string" ? this.width : `${this.width}px`;
-    },
-    realHeight() {
-      return typeof this.height == "string" ? this.height : `${this.height}px`;
-    }
+  width: {
+    type: [Number, String],
+    default: ""
   },
-};
+  height: {
+    type: [Number, String],
+    default: ""
+  }
+});
+
+const realSrc = computed(() => {
+  let real_src = props.src.split(",")[0];
+  if (isExternal(real_src)) {
+    return real_src;
+  }
+  return import.meta.env.VITE_APP_BASE_API + real_src;
+});
+
+const realSrcList = computed(() => {
+  let real_src_list = props.src.split(",");
+  let srcList = [];
+  real_src_list.forEach(item => {
+    if (isExternal(item)) {
+      return srcList.push(item);
+    }
+    return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
+  });
+  return srcList;
+});
+
+const realWidth = computed(() =>
+  typeof props.width == "string" ? props.width : `${props.width}px`
+);
+
+const realHeight = computed(() =>
+  typeof props.height == "string" ? props.height : `${props.height}px`
+);
 </script>
 
 <style lang="scss" scoped>
@@ -70,14 +65,14 @@ export default {
   border-radius: 5px;
   background-color: #ebeef5;
   box-shadow: 0 0 5px 1px #ccc;
-  ::v-deep .el-image__inner {
+  :deep(.el-image__inner) {
     transition: all 0.3s;
     cursor: pointer;
     &:hover {
       transform: scale(1.2);
     }
   }
-  ::v-deep .image-slot {
+  :deep(.image-slot) {
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue
index b57a15e..9aa919f 100644
--- a/ruoyi-ui/src/components/ImageUpload/index.vue
+++ b/ruoyi-ui/src/components/ImageUpload/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="component-upload-image">
     <el-upload
-      multiple
       :action="uploadImgUrl"
       list-type="picture-card"
       :on-success="handleUploadSuccess"
@@ -9,29 +8,32 @@
       :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
-      ref="imageUpload"
-      :on-remove="handleDelete"
+      name="file"
+      :on-remove="handleRemove"
       :show-file-list="true"
       :headers="headers"
       :file-list="fileList"
       :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
+      :class="{ hide: fileList.length >= limit }"
     >
-      <i class="el-icon-plus"></i>
+      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
     </el-upload>
-    
     <!-- 上传提示 -->
-    <div class="el-upload__tip" slot="tip" v-if="showTip">
+    <div class="el-upload__tip" v-if="showTip">
       请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      <template v-if="fileSize">
+        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+      </template>
       的文件
     </div>
 
     <el-dialog
-      :visible.sync="dialogVisible"
+      v-model="dialogVisible"
       title="预览"
-      width="800"
+      width="800px"
       append-to-body
     >
       <img
@@ -42,185 +44,154 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { getToken } from "@/utils/auth";
 
-export default {
-  props: {
-    value: [String, Object, Array],
-    // 图片数量限制
-    limit: {
-      type: Number,
-      default: 5,
-    },
-    // 大小限制(MB)
-    fileSize: {
-       type: Number,
-      default: 5,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["png", "jpg", "jpeg"],
-    },
-    // 是否显示提示
-    isShowTip: {
-      type: Boolean,
-      default: true
-    }
+const props = defineProps({
+  modelValue: [String, Object, Array],
+  // 图片数量限制
+  limit: {
+    type: Number,
+    default: 5,
   },
-  data() {
-    return {
-      number: 0,
-      uploadList: [],
-      dialogImageUrl: "",
-      dialogVisible: false,
-      hideUpload: false,
-      baseUrl: process.env.VUE_APP_BASE_API,
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: []
-    };
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5,
   },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: this.baseUrl + item, url: this.baseUrl + item };
-              } else {
-                  item = { name: item, url: item };
-              }
-            }
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: {
+    type: Array,
+    default: () => ["png", "jpg", "jpeg"],
   },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
   },
-  methods: {
-    // 上传前loading加载
-    handleBeforeUpload(file) {
-      let isImg = false;
-      if (this.fileType.length) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        isImg = this.fileType.some(type => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-      } else {
-        isImg = file.type.indexOf("image") > -1;
-      }
+});
 
-      if (!isImg) {
-        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
-        return false;
-      }
-      if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
-        if (!isLt) {
-          this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
-          return false;
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
+const headers = ref({ Authorization: "Bearer " + getToken() });
+const fileList = ref([]);
+const showTip = computed(
+  () => props.isShowTip && (props.fileType || props.fileSize)
+);
+
+watch(() => props.modelValue, val => {
+  if (val) {
+    // 首先将值转为数组
+    const list = Array.isArray(val) ? val : props.modelValue.split(",");
+    // 然后将数组转为对象数组
+    fileList.value = list.map(item => {
+      if (typeof item === "string") {
+        if (item.indexOf(baseUrl) === -1) {
+          item = { name: baseUrl + item, url: baseUrl + item };
+        } else {
+          item = { name: item, url: item };
         }
       }
-      this.$modal.loading("正在上传图片，请稍候...");
-      this.number++;
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传成功回调
-    handleUploadSuccess(res, file) {
-      if (res.code === 200) {
-        this.uploadList.push({ name: res.fileName, url: res.fileName });
-        this.uploadedSuccessfully();
-      } else {
-        this.number--;
-        this.$modal.closeLoading();
-        this.$modal.msgError(res.msg);
-        this.$refs.imageUpload.handleRemove(file);
-        this.uploadedSuccessfully();
-      }
-    },
-    // 删除图片
-    handleDelete(file) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
-        this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
-      }
-    },
-    // 上传失败
-    handleUploadError() {
-      this.$modal.msgError("上传图片失败，请重试");
-      this.$modal.closeLoading();
-    },
-    // 上传结束处理
-    uploadedSuccessfully() {
-      if (this.number > 0 && this.uploadList.length === this.number) {
-        this.fileList = this.fileList.concat(this.uploadList);
-        this.uploadList = [];
-        this.number = 0;
-        this.$emit("input", this.listToString(this.fileList));
-        this.$modal.closeLoading();
-      }
-    },
-    // 预览
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        if (list[i].url) {
-          strs += list[i].url.replace(this.baseUrl, "") + separator;
-        }
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+      return item;
+    });
+  } else {
+    fileList.value = [];
+    return [];
+  }
+});
+
+// 删除图片
+function handleRemove(file, files) {
+  const findex = fileList.value.map(f => f.name).indexOf(file.name);
+  if (findex > -1) {
+    fileList.value.splice(findex, 1);
+    emit("update:modelValue", listToString(fileList.value));
+  }
+}
+
+// 上传成功回调
+function handleUploadSuccess(res) {
+  fileList.value.push({ name: res.fileName, url: res.fileName });
+  emit("update:modelValue", listToString(fileList.value));
+  proxy.$modal.closeLoading();
+}
+
+// 上传前loading加载
+function handleBeforeUpload(file) {
+  let isImg = false;
+  if (props.fileType.length) {
+    let fileExtension = "";
+    if (file.name.lastIndexOf(".") > -1) {
+      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+    }
+    isImg = props.fileType.some(type => {
+      if (file.type.indexOf(type) > -1) return true;
+      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+      return false;
+    });
+  } else {
+    isImg = file.type.indexOf("image") > -1;
+  }
+  if (!isImg) {
+    proxy.$modal.msgError(
+      `文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
+    );
+    return false;
+  }
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
+      return false;
     }
   }
-};
+  proxy.$modal.loading("上传中");
+}
+
+// 文件个数超出
+function handleExceed() {
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+}
+
+// 上传失败
+function handleUploadError() {
+  proxy.$modal.msgError("上传失败");
+  proxy.$modal.closeLoading();
+}
+
+// 预览
+function handlePictureCardPreview(file) {
+  dialogImageUrl.value = file.url;
+  dialogVisible.value = true;
+}
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+  let strs = "";
+  separator = separator || ",";
+  for (let i in list) {
+    strs += list[i].url.replace(baseUrl, "") + separator;
+  }
+  return strs != "" ? strs.substr(0, strs.length - 1) : "";
+}
 </script>
+
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
-    display: none;
+:deep(.hide .el-upload--picture-card) {
+  display: none;
 }
 // 去掉动画效果
-::v-deep .el-list-enter-active,
-::v-deep .el-list-leave-active {
-    transition: all 0s;
+:deep(.el-list-enter-active),
+:deep(.el-list-leave-active) {
+  transition: all 0s;
 }
-
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
+:deep(.el-list-enter, .el-list-leave-active) {
+  opacity: 0;
+  transform: translateY(0);
 }
 </style>
-
diff --git a/ruoyi-ui/src/components/Pagination/index.vue b/ruoyi-ui/src/components/Pagination/index.vue
index 56f5a6b..e092a1d 100644
--- a/ruoyi-ui/src/components/Pagination/index.vue
+++ b/ruoyi-ui/src/components/Pagination/index.vue
@@ -1,106 +1,94 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
+  <div :class="{ 'hidden': hidden }" class="pagination-container">
     <el-pagination
       :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
       :layout="layout"
       :page-sizes="pageSizes"
       :pager-count="pagerCount"
       :total="total"
-      v-bind="$attrs"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
     />
   </div>
 </template>
 
-<script>
+<script setup>
 import { scrollTo } from '@/utils/scroll-to'
 
-export default {
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    limit: {
-      type: Number,
-      default: 20
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    // 移动端页码按钮的数量端默认值5
-    pagerCount: {
-      type: Number,
-      default: document.body.clientWidth < 992 ? 5 : 7
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
+const props = defineProps({
+  total: {
+    required: true,
+    type: Number
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  limit: {
+    type: Number,
+    default: 20
+  },
+  pageSizes: {
+    type: Array,
+    default() {
+      return [10, 20, 30, 50]
     }
   },
-  data() {
-    return {
-    };
+  // 移动端页码按钮的数量端默认值5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7
   },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page
-      },
-      set(val) {
-        this.$emit('update:page', val)
-      }
-    },
-    pageSize: {
-      get() {
-        return this.limit
-      },
-      set(val) {
-        this.$emit('update:limit', val)
-      }
-    }
+  layout: {
+    type: String,
+    default: 'total, sizes, prev, pager, next, jumper'
   },
-  methods: {
-    handleSizeChange(val) {
-      if (this.currentPage * val > this.total) {
-        this.currentPage = 1
-      }
-      this.$emit('pagination', { page: this.currentPage, limit: val })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    },
-    handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    }
+  background: {
+    type: Boolean,
+    default: true
+  },
+  autoScroll: {
+    type: Boolean,
+    default: true
+  },
+  hidden: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits();
+const currentPage = computed({
+  get() {
+    return props.page
+  },
+  set(val) {
+    emit('update:page', val)
+  }
+})
+const pageSize = computed({
+  get() {
+    return props.limit
+  },
+  set(val){
+    emit('update:limit', val)
+  }
+})
+function handleSizeChange(val) {
+  emit('pagination', { page: currentPage.value, limit: val })
+  if (props.autoScroll) {
+    scrollTo(0, 800)
   }
 }
+function handleCurrentChange(val) {
+  emit('pagination', { page: val, limit: pageSize.value })
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
+
 </script>
 
 <style scoped>
diff --git a/ruoyi-ui/src/components/RightToolbar/index.vue b/ruoyi-ui/src/components/RightToolbar/index.vue
index 527e07c..9063a3e 100644
--- a/ruoyi-ui/src/components/RightToolbar/index.vue
+++ b/ruoyi-ui/src/components/RightToolbar/index.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="top-right-btn" :style="style">
+  <div class="top-right-btn">
     <el-row>
-      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
-        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
+        <el-button circle icon="Search" @click="toggleSearch()" />
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
-        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+        <el-button circle icon="Refresh" @click="refresh()" />
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
+        <el-button circle icon="Menu" @click="showColumn()" />
       </el-tooltip>
     </el-row>
-    <el-dialog :title="title" :visible.sync="open" append-to-body>
+    <el-dialog :title="title" v-model="open" append-to-body>
       <el-transfer
         :titles="['显示', '隐藏']"
         v-model="value"
@@ -21,84 +21,69 @@
     </el-dialog>
   </div>
 </template>
-<script>
-export default {
-  name: "RightToolbar",
-  data() {
-    return {
-      // 显隐数据
-      value: [],
-      // 弹出层标题
-      title: "显示/隐藏",
-      // 是否显示弹出层
-      open: false,
-    };
+
+<script setup>
+const props = defineProps({
+  showSearch: {
+    type: Boolean,
+    default: true,
   },
-  props: {
-    showSearch: {
-      type: Boolean,
-      default: true,
-    },
-    columns: {
-      type: Array,
-    },
-    search: {
-      type: Boolean,
-      default: true,
-    },
-    gutter: {
-      type: Number,
-      default: 10,
-    },
+  columns: {
+    type: Array,
   },
-  computed: {
-    style() {
-      const ret = {};
-      if (this.gutter) {
-        ret.marginRight = `${this.gutter / 2}px`;
-      }
-      return ret;
-    }
-  },
-  created() {
-    // 显隐列初始默认隐藏列
-    for (let item in this.columns) {
-      if (this.columns[item].visible === false) {
-        this.value.push(parseInt(item));
-      }
-    }
-  },
-  methods: {
-    // 搜索
-    toggleSearch() {
-      this.$emit("update:showSearch", !this.showSearch);
-    },
-    // 刷新
-    refresh() {
-      this.$emit("queryTable");
-    },
-    // 右侧列表元素变化
-    dataChange(data) {
-      for (let item in this.columns) {
-        const key = this.columns[item].key;
-        this.columns[item].visible = !data.includes(key);
-      }
-    },
-    // 打开显隐列dialog
-    showColumn() {
-      this.open = true;
-    },
-  },
-};
+})
+
+const emits = defineEmits(['update:showSearch', 'queryTable']);
+
+// 显隐数据
+const value = ref([]);
+// 弹出层标题
+const title = ref("显示/隐藏");
+// 是否显示弹出层
+const open = ref(false);
+
+// 搜索
+function toggleSearch() {
+  emits("update:showSearch", !props.showSearch);
+}
+
+// 刷新
+function refresh() {
+  emits("queryTable");
+}
+
+// 右侧列表元素变化
+function dataChange(data) {
+  for (let item in props.columns) {
+    const key = props.columns[item].key;
+    props.columns[item].visible = !data.includes(key);
+  }
+}
+
+// 打开显隐列dialog
+function showColumn() {
+  open.value = true;
+}
+
+// 显隐列初始默认隐藏列
+for (let item in props.columns) {
+  if (props.columns[item].visible === false) {
+    value.value.push(parseInt(item));
+  }
+}
 </script>
-<style lang="scss" scoped>
-::v-deep .el-transfer__button {
+
+<style lang='scss' scoped>
+:deep(.el-transfer__button) {
   border-radius: 50%;
-  padding: 12px;
   display: block;
   margin-left: 0px;
 }
-::v-deep .el-transfer__button:first-child {
+:deep(.el-transfer__button:first-child) {
   margin-bottom: 10px;
 }
+
+.my-el-transfer {
+  text-align: center;
+}
 </style>
diff --git a/ruoyi-ui/src/components/RuoYi/Doc/index.vue b/ruoyi-ui/src/components/RuoYi/Doc/index.vue
index 75fa864..cd0389d 100644
--- a/ruoyi-ui/src/components/RuoYi/Doc/index.vue
+++ b/ruoyi-ui/src/components/RuoYi/Doc/index.vue
@@ -4,18 +4,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'RuoYiDoc',
-  data() {
-    return {
-      url: 'http://doc.ruoyi.vip/ruoyi-vue'
-    }
-  },
-  methods: {
-    goto() {
-      window.open(this.url)
-    }
-  }
+<script setup>
+const url = ref('http://doc.ruoyi.vip/ruoyi-vue');
+
+function goto() {
+  window.open(url.value)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/ruoyi-ui/src/components/RuoYi/Git/index.vue b/ruoyi-ui/src/components/RuoYi/Git/index.vue
index bdafbae..b4459f3 100644
--- a/ruoyi-ui/src/components/RuoYi/Git/index.vue
+++ b/ruoyi-ui/src/components/RuoYi/Git/index.vue
@@ -4,18 +4,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'RuoYiGit',
-  data() {
-    return {
-      url: 'https://gitee.com/y_project/RuoYi-Vue'
-    }
-  },
-  methods: {
-    goto() {
-      window.open(this.url)
-    }
-  }
+<script setup>
+const url = ref('https://gitee.com/y_project/RuoYi-Vue');
+
+function goto() {
+  window.open(url.value)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/ruoyi-ui/src/components/Screenfull/index.vue b/ruoyi-ui/src/components/Screenfull/index.vue
index d4e539c..9c9f980 100644
--- a/ruoyi-ui/src/components/Screenfull/index.vue
+++ b/ruoyi-ui/src/components/Screenfull/index.vue
@@ -1,55 +1,20 @@
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
   </div>
 </template>
 
-<script>
-import screenfull from 'screenfull'
+<script setup>
+import { useFullscreen } from '@vueuse/core'
 
-export default {
-  name: 'Screenfull',
-  data() {
-    return {
-      isFullscreen: false
-    }
-  },
-  mounted() {
-    this.init()
-  },
-  beforeDestroy() {
-    this.destroy()
-  },
-  methods: {
-    click() {
-      if (!screenfull.isEnabled) {
-        this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
-        return false
-      }
-      screenfull.toggle()
-    },
-    change() {
-      this.isFullscreen = screenfull.isFullscreen
-    },
-    init() {
-      if (screenfull.isEnabled) {
-        screenfull.on('change', this.change)
-      }
-    },
-    destroy() {
-      if (screenfull.isEnabled) {
-        screenfull.off('change', this.change)
-      }
-    }
-  }
-}
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
 .screenfull-svg {
   display: inline-block;
   cursor: pointer;
-  fill: #5a5e66;;
+  fill: #5a5e66;
   width: 20px;
   height: 20px;
   vertical-align: 10px;
diff --git a/ruoyi-ui/src/components/SizeSelect/index.vue b/ruoyi-ui/src/components/SizeSelect/index.vue
index 069b5de..2380fbb 100644
--- a/ruoyi-ui/src/components/SizeSelect/index.vue
+++ b/ruoyi-ui/src/components/SizeSelect/index.vue
@@ -1,56 +1,57 @@
 <template>
-  <el-dropdown trigger="click" @command="handleSetSize">
-    <div>
-      <svg-icon class-name="size-icon" icon-class="size" />
-    </div>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-        {{ item.label }}
-      </el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
+  <div>
+    <el-dropdown trigger="click" @command="handleSetSize">
+      <div class="size-icon--style">
+        <svg-icon class-name="size-icon" icon-class="size" />
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
+            {{ item.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
-      ]
-    }
-  },
-  computed: {
-    size() {
-      return this.$store.getters.size
-    }
-  },
-  methods: {
-    handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('app/setSize', size)
-      this.refreshView()
-      this.$message({
-        message: 'Switch Size Success',
-        type: 'success'
-      })
-    },
-    refreshView() {
-      // In order to make the cached page re-rendered
-      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
+<script setup>
+import { ElMessage } from 'element-plus'
 
-      const { fullPath } = this.$route
+const store = useStore();
+const size = computed(() => store.getters.size);
+const route = useRoute();
+const router = useRouter();
+const {proxy} = getCurrentInstance();
+const sizeOptions = ref([
+  { label: '较大', value: 'large' },
+  { label: '默认', value: 'default' },
+  { label: '稍小', value: 'small' },
+])
 
-      this.$nextTick(() => {
-        this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
-    }
-  }
+function refreshView() {
+  // In order to make the cached page re-rendered
+  store.dispatch('tagsView/delAllCachedViews', route)
 
+  const { fullPath } = route
+
+  nextTick(() => {
+    router.replace({
+      path: '/redirect' + fullPath
+    })
+  })
 }
+function handleSetSize(size) {
+  proxy.$modal.loading("正在设置布局大小，请稍候...");
+  store.dispatch('app/setSize', size)
+  setTimeout("window.location.reload()", 1000)
+};
 </script>
+
+<style lang='scss' scoped>
+.size-icon--style {
+  font-size: 18px;
+  line-height: 50px;
+  padding-right: 7px;
+}
+</style>
diff --git a/ruoyi-ui/src/components/SvgIcon/index.vue b/ruoyi-ui/src/components/SvgIcon/index.vue
index e4bf5ad..8c101f6 100644
--- a/ruoyi-ui/src/components/SvgIcon/index.vue
+++ b/ruoyi-ui/src/components/SvgIcon/index.vue
@@ -1,15 +1,11 @@
 <template>
-  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :xlink:href="iconName" />
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName" :fill="color" />
   </svg>
 </template>
 
 <script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  name: 'SvgIcon',
+export default defineComponent({
   props: {
     iconClass: {
       type: String,
@@ -18,44 +14,40 @@ export default {
     className: {
       type: String,
       default: ''
-    }
+    },
+    color: {
+      type: String,
+      default: ''
+    },
   },
-  computed: {
-    isExternal() {
-      return isExternal(this.iconClass)
-    },
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
+  setup(props) {
+    return {
+      iconName: computed(() => `#icon-${props.iconClass}`),
+      svgClass: computed(() => {
+        if (props.className) {
+          return `svg-icon ${props.className}`
+        }
         return 'svg-icon'
-      }
-    },
-    styleExternalIcon() {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
-      }
+      })
     }
   }
-}
+})
 </script>
 
-<style scoped>
+<style scope lang="scss">
+.sub-el-icon,
+.nav-icon {
+  display: inline-block;
+  font-size: 15px;
+  margin-right: 12px;
+  position: relative;
+}
+
 .svg-icon {
   width: 1em;
   height: 1em;
-  vertical-align: -0.15em;
+  position: relative;
   fill: currentColor;
-  overflow: hidden;
-}
-
-.svg-external-icon {
-  background-color: currentColor;
-  mask-size: cover!important;
-  display: inline-block;
+  vertical-align: -2px;
 }
 </style>
diff --git a/ruoyi-ui/src/components/SvgIcon/svgicon.js b/ruoyi-ui/src/components/SvgIcon/svgicon.js
new file mode 100644
index 0000000..4431719
--- /dev/null
+++ b/ruoyi-ui/src/components/SvgIcon/svgicon.js
@@ -0,0 +1,10 @@
+import * as components from '@element-plus/icons-vue'
+
+export default {
+    install: (app) => {
+        for (const key in components) {
+            const componentConfig = components[key];
+            app.component(componentConfig.name, componentConfig);
+        }
+    },
+};
diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue
index 9fb8dd8..3435d50 100644
--- a/ruoyi-ui/src/components/TopNav/index.vue
+++ b/ruoyi-ui/src/components/TopNav/index.vue
@@ -6,162 +6,157 @@
   >
     <template v-for="(item, index) in topMenus">
       <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
-        ><svg-icon :icon-class="item.meta.icon" />
+      ><svg-icon :icon-class="item.meta.icon" />
         {{ item.meta.title }}</el-menu-item
       >
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
-      <template slot="title">更多菜单</template>
+    <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+      <template #title>更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item
           :index="item.path"
           :key="index"
           v-if="index >= visibleNumber"
-          ><svg-icon :icon-class="item.meta.icon" />
+        ><svg-icon :icon-class="item.meta.icon" />
           {{ item.meta.title }}</el-menu-item
         >
       </template>
-    </el-submenu>
+    </el-sub-menu>
   </el-menu>
 </template>
 
-<script>
-import { constantRoutes } from "@/router";
+<script setup>
+import { constantRoutes } from "@/router"
+import { isHttp } from '@/utils/validate'
 
-// 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile'];
+// 顶部栏初始数
+const visibleNumber = ref(null);
+// 是否为首次加载
+const isFrist = ref(null);
+// 当前激活菜单的 index
+const currentIndex = ref(null);
 
-export default {
-  data() {
-    return {
-      // 顶部栏初始数
-      visibleNumber: 5,
-      // 当前激活菜单的 index
-      currentIndex: undefined
-    };
-  },
-  computed: {
-    theme() {
-      return this.$store.state.settings.theme;
-    },
-    // 顶部显示菜单
-    topMenus() {
-      let topMenus = [];
-      this.routers.map((menu) => {
-        if (menu.hidden !== true) {
-          // 兼容顶部栏一级菜单内部跳转
-          if (menu.path === "/") {
-              topMenus.push(menu.children[0]);
-          } else {
-              topMenus.push(menu);
-          }
-        }
-      });
-      return topMenus;
-    },
-    // 所有的路由信息
-    routers() {
-      return this.$store.state.permission.topbarRouters;
-    },
-    // 设置子路由
-    childrenMenus() {
-      var childrenMenus = [];
-      this.routers.map((router) => {
-        for (var item in router.children) {
-          if (router.children[item].parentPath === undefined) {
-            if(router.path === "/") {
-              router.children[item].path = "/" + router.children[item].path;
-            } else {
-              if(!this.ishttp(router.children[item].path)) {
-                router.children[item].path = router.path + "/" + router.children[item].path;
-              }
-            }
-            router.children[item].parentPath = router.path;
-          }
-          childrenMenus.push(router.children[item]);
-        }
-      });
-      return constantRoutes.concat(childrenMenus);
-    },
-    // 默认激活的菜单
-    activeMenu() {
-      const path = this.$route.path;
-      let activePath = path;
-      if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
-        const tmpPath = path.substring(1, path.length);
-        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
-        if (!this.$route.meta.link) {
-          this.$store.dispatch('app/toggleSideBarHide', false);
-        }
-      } else if(!this.$route.children) {
-        activePath = path;
-        this.$store.dispatch('app/toggleSideBarHide', true);
-      }
-      this.activeRoutes(activePath);
-      return activePath;
-    },
-  },
-  beforeMount() {
-    window.addEventListener('resize', this.setVisibleNumber)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.setVisibleNumber)
-  },
-  mounted() {
-    this.setVisibleNumber();
-  },
-  methods: {
-    // 根据宽度计算设置显示栏数
-    setVisibleNumber() {
-      const width = document.body.getBoundingClientRect().width / 3;
-      this.visibleNumber = parseInt(width / 85);
-    },
-    // 菜单选择事件
-    handleSelect(key, keyPath) {
-      this.currentIndex = key;
-      const route = this.routers.find(item => item.path === key);
-      if (this.ishttp(key)) {
-        // http(s):// 路径新窗口打开
-        window.open(key, "_blank");
-      } else if (!route || !route.children) {
-        // 没有子路由路径内部打开
-        const routeMenu = this.childrenMenus.find(item => item.path === key);
-        if (routeMenu && routeMenu.query) {
-          let query = JSON.parse(routeMenu.query);
-          this.$router.push({ path: key, query: query });
-        } else {
-          this.$router.push({ path: key });
-        }
-        this.$store.dispatch('app/toggleSideBarHide', true);
+const store = useStore();
+const route = useRoute();
+
+// 主题颜色
+const theme = computed(() => store.state.settings.theme);
+// 所有的路由信息
+const routers = computed(() => store.state.permission.topbarRouters);
+
+// 顶部显示菜单
+const topMenus = computed(() => {
+  let topMenus = [];
+  routers.value.map((menu) => {
+    if (menu.hidden !== true) {
+      // 兼容顶部栏一级菜单内部跳转
+      if (menu.path === "/") {
+        topMenus.push(menu.children[0]);
       } else {
-        // 显示左侧联动菜单
-        this.activeRoutes(key);
-        this.$store.dispatch('app/toggleSideBarHide', false);
+        topMenus.push(menu);
       }
-    },
-    // 当前激活的路由
-    activeRoutes(key) {
-      var routes = [];
-      if (this.childrenMenus && this.childrenMenus.length > 0) {
-        this.childrenMenus.map((item) => {
-          if (key == item.parentPath || (key == "index" && "" == item.path)) {
-            routes.push(item);
-          }
-        });
-      }
-      if(routes.length > 0) {
-        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
-      } else {
-        this.$store.dispatch('app/toggleSideBarHide', true);
-      }
-    },
-    ishttp(url) {
-      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
     }
-  },
-};
+  })
+  return topMenus;
+})
+
+// 设置子路由
+const childrenMenus = computed(() => {
+  let childrenMenus = [];
+  routers.value.map((router) => {
+    for (let item in router.children) {
+      if (router.children[item].parentPath === undefined) {
+        if(router.path === "/") {
+          router.children[item].path = "/redirect/" + router.children[item].path;
+        } else {
+          if(!isHttp(router.children[item].path)) {
+            router.children[item].path = router.path + "/" + router.children[item].path;
+          }
+        }
+        router.children[item].parentPath = router.path;
+      }
+      childrenMenus.push(router.children[item]);
+    }
+  })
+  return constantRoutes.concat(childrenMenus);
+})
+
+// 默认激活的菜单
+const activeMenu = computed(() => {
+  const path = route.path;
+  let activePath = defaultRouter.value;
+  if (path !== undefined && path.lastIndexOf("/") > 0) {
+    const tmpPath = path.substring(1, path.length);
+    activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
+  } else if ("/index" == path || "" == path) {
+    if (!isFrist.value) {
+      isFrist.value = true;
+    } else {
+      activePath = "index";
+    }
+  }
+  let routes = activeRoutes(activePath);
+  if (routes.length === 0) {
+    activePath = currentIndex.value || defaultRouter.value
+    activeRoutes(activePath);
+  }
+  return activePath;
+})
+// 默认激活的路由
+const defaultRouter = computed(() => {
+  let router;
+  Object.keys(routers.value).some((key) => {
+    if (!routers.value[key].hidden) {
+      router = routers.value[key].path;
+      return true;
+    }
+  });
+  return router;
+})
+function setVisibleNumber() {
+  const width = document.body.getBoundingClientRect().width / 3;
+  visibleNumber.value = parseInt(width / 85);
+}
+function handleSelect(key, keyPath) {
+  currentIndex.value = key;
+  if (isHttp(key)) {
+    // http(s):// 路径新窗口打开
+    window.open(key, "_blank");
+  } else if (key.indexOf("/redirect") !== -1) {
+    // /redirect 路径内部打开
+    router.push({ path: key.replace("/redirect", "") });
+  } else {
+    // 显示左侧联动菜单
+    activeRoutes(key);
+  }
+}
+function activeRoutes(key) {
+  let routes = [];
+  if (childrenMenus.value && childrenMenus.value.length > 0) {
+    childrenMenus.value.map((item) => {
+      if (key == item.parentPath || (key == "index" && "" == item.path)) {
+        routes.push(item);
+      }
+    });
+  }
+  if(routes.length > 0) {
+    store.commit("SET_SIDEBAR_ROUTERS", routes);
+  }
+  return routes;
+}
+
+onMounted(() => {
+  window.addEventListener('resize', setVisibleNumber)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', setVisibleNumber)
+})
+
+onMounted(() => {
+  setVisibleNumber()
+})
 </script>
 
 <style lang="scss">
@@ -174,13 +169,13 @@ export default {
   margin: 0 10px !important;
 }
 
-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
   border-bottom: 2px solid #{'var(--theme)'} !important;
   color: #303133;
 }
 
-/* submenu item */
-.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
+/* sub-menu item */
+.topmenu-container.el-menu--horizontal > .el-sub-menu .el-submenu__title {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
diff --git a/ruoyi-ui/src/components/TreeSelect/index.vue b/ruoyi-ui/src/components/TreeSelect/index.vue
new file mode 100644
index 0000000..b9197ff
--- /dev/null
+++ b/ruoyi-ui/src/components/TreeSelect/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="el-tree-select">
+    <el-select
+      style="width: 100%"
+      v-model="valueId"
+      ref="treeSelect"
+      :filterable="true"
+      :clearable="true"
+      @clear="clearHandle"
+      :filter-method="selectFilterData"
+      :placeholder="placeholder"
+    >
+      <el-option :value="valueId" :label="valueTitle">
+        <el-tree
+          id="tree-option"
+          ref="selectTree"
+          :accordion="accordion"
+          :data="options"
+          :props="objMap"
+          :node-key="objMap.value"
+          :expand-on-click-node="false"
+          :default-expanded-keys="defaultExpandedKey"
+          :filter-node-method="filterNode"
+          @node-click="handleNodeClick"
+        ></el-tree>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+
+const { proxy } = getCurrentInstance();
+
+const props = defineProps({
+  /* 配置项 */
+  objMap: {
+    type: Object,
+    default: () => {
+      return {
+        value: 'id', // ID字段名
+        label: 'label', // 显示名称
+        children: 'children' // 子级字段名
+      }
+    }
+  },
+  /* 自动收起 */
+  accordion: {
+    type: Boolean,
+    default: () => {
+      return false
+    }
+  },
+  /**当前双向数据绑定的值 */
+  value: {
+    type: [String, Number],
+    default: ''
+  },
+  /**当前的数据 */
+  options: {
+    type: Array,
+    default: () => []
+  },
+  /**输入框内部的文字 */
+  placeholder: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:value']);
+
+const valueId = computed({
+  get: () => props.value,
+  set: (val) => {
+    emit('update:value', val)
+  }
+});
+const valueTitle = ref('');
+const defaultExpandedKey = ref([]);
+
+function initHandle() {
+  nextTick(() => {
+    const selectedValue = valueId.value;
+    if(selectedValue && selectedValue !== null && typeof (selectedValue) !== "undefined"){
+      const node = proxy.$refs.selectTree.getNode(selectedValue)
+      if (node) {
+        valueTitle.value = node.data[props.objMap.label]
+        proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
+        defaultExpandedKey.value = [selectedValue] // 设置默认展开
+      }
+    } else {
+      clearHandle()
+    }
+  })
+}
+function handleNodeClick(node) {
+  valueTitle.value = node[props.objMap.label]
+  valueId.value = node[props.objMap.value];
+  defaultExpandedKey.value = [];
+  proxy.$refs.treeSelect.blur()
+  selectFilterData('')
+}
+function selectFilterData(val) {
+  proxy.$refs.selectTree.filter(val)
+}
+function filterNode(value, data) {
+  if (!value) return true
+  return data[props.objMap['label']].indexOf(value) !== -1
+}
+function clearHandle() {
+  valueTitle.value = ''
+  valueId.value = ''
+  defaultExpandedKey.value = [];
+  clearSelected()
+}
+function clearSelected() {
+  const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+  allNode.forEach((element) => element.classList.remove('is-current'))
+}
+
+onMounted(() => {
+  initHandle()
+})
+
+watch(valueId, () => {
+  initHandle();
+})
+</script>
+
+<style lang='scss' scoped>
+@import "@/assets/styles/variables.module.scss";
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  padding: 0;
+  background-color: #fff;
+  height: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li  .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+:deep(.el-tree-node__content:hover),
+:deep(.el-tree-node__content:active),
+:deep(.is-current > div:first-child),
+:deep(.el-tree-node__content:focus) {
+  background-color: mix(#fff, $--color-primary, 90%);
+  color: $--color-primary;
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/components/iFrame/index.vue b/ruoyi-ui/src/components/iFrame/index.vue
index c7ba3a6..f42d4ac 100644
--- a/ruoyi-ui/src/components/iFrame/index.vue
+++ b/ruoyi-ui/src/components/iFrame/index.vue
@@ -4,33 +4,28 @@
       :src="url"
       frameborder="no"
       style="width: 100%; height: 100%"
-      scrolling="auto"
-    />
+      scrolling="auto" />
   </div>
 </template>
-<script>
-export default {
-  props: {
-    src: {
-      type: String,
-      default:"/"
-    }
-  },
-  data() {
-    return {
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true,
-      url:this.src
-    };
-  },
-  mounted: function () {
-    setTimeout(() => {
-      this.loading = false;
-    }, 300);
-    const that = this;
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
+
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
   }
-};
+})
+
+const height = ref(document.documentElement.clientHeight - 94.5 + "px;")
+const loading = ref(true)
+const url = computed(() => props.src)
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+  window.onresize = function temp() {
+    height.value = document.documentElement.clientHeight - 94.5 + "px;";
+  };
+})
 </script>
diff --git a/ruoyi-ui/src/directive/index.js b/ruoyi-ui/src/directive/index.js
index b9b07da..5421018 100644
--- a/ruoyi-ui/src/directive/index.js
+++ b/ruoyi-ui/src/directive/index.js
@@ -1,23 +1,30 @@
+// import hasRole from './permission/hasRole'
+// import hasPermi from './permission/hasPermi'
+// import dialogDrag from './dialog/drag'
+// import dialogDragWidth from './dialog/dragWidth'
+// import dialogDragHeight from './dialog/dragHeight'
+// import clipboard from './module/clipboard'
+//
+// const install = function(Vue) {
+//   Vue.directive('hasRole', hasRole)
+//   Vue.directive('hasPermi', hasPermi)
+//   Vue.directive('clipboard', clipboard)
+//   Vue.directive('dialogDrag', dialogDrag)
+//   Vue.directive('dialogDragWidth', dialogDragWidth)
+//   Vue.directive('dialogDragHeight', dialogDragHeight)
+// }
+//
+// if (window.Vue) {
+//   window['hasRole'] = hasRole
+//   window['hasPermi'] = hasPermi
+//   Vue.use(install); // eslint-disable-line
+// }
+//
+// export default install
 import hasRole from './permission/hasRole'
 import hasPermi from './permission/hasPermi'
-import dialogDrag from './dialog/drag'
-import dialogDragWidth from './dialog/dragWidth'
-import dialogDragHeight from './dialog/dragHeight'
-import clipboard from './module/clipboard'
 
-const install = function(Vue) {
-  Vue.directive('hasRole', hasRole)
-  Vue.directive('hasPermi', hasPermi)
-  Vue.directive('clipboard', clipboard)
-  Vue.directive('dialogDrag', dialogDrag)
-  Vue.directive('dialogDragWidth', dialogDragWidth)
-  Vue.directive('dialogDragHeight', dialogDragHeight)
+export default function directive(app){
+  app.directive('hasRole', hasRole)
+  app.directive('hasPermi', hasPermi)
 }
-
-if (window.Vue) {
-  window['hasRole'] = hasRole
-  window['hasPermi'] = hasPermi
-  Vue.use(install); // eslint-disable-line
-}
-
-export default install
diff --git a/ruoyi-ui/src/layout/components/AppMain.vue b/ruoyi-ui/src/layout/components/AppMain.vue
index a25c562..3f00dfa 100644
--- a/ruoyi-ui/src/layout/components/AppMain.vue
+++ b/ruoyi-ui/src/layout/components/AppMain.vue
@@ -1,29 +1,22 @@
 <template>
   <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <keep-alive :include="cachedViews">
-        <router-view v-if="!$route.meta.link" :key="key" />
-      </keep-alive>
-    </transition>
-    <iframe-toggle />
+    <router-view v-slot="{ Component, route }">
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive :include="cachedViews">
+          <component :is="Component" :key="route.path"/>
+        </keep-alive>
+      </transition>
+    </router-view>
   </section>
 </template>
 
-<script>
-import iframeToggle from "./IframeToggle/index"
-
-export default {
-  name: 'AppMain',
-  components: { iframeToggle },
-  computed: {
-    cachedViews() {
-      return this.$store.state.tagsView.cachedViews
-    },
-    key() {
-      return this.$route.path
-    }
-  }
-}
+<script setup>
+let store = useStore()
+const route = useRoute()
+store.dispatch('tagsView/addCachedView', route)
+const cachedViews = computed(() => {
+  return store.state.tagsView.cachedViews
+})
 </script>
 
 <style lang="scss" scoped>
@@ -55,21 +48,7 @@ export default {
 // fix css style bug in open el-dialog
 .el-popup-parent--hidden {
   .fixed-header {
-    padding-right: 6px;
+    padding-right: 17px;
   }
 }
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #c0c0c0;
-  border-radius: 3px;
-}
 </style>
diff --git a/ruoyi-ui/src/layout/components/IframeToggle/index.vue b/ruoyi-ui/src/layout/components/IframeToggle/index.vue
index 26e17c1..eb538cc 100644
--- a/ruoyi-ui/src/layout/components/IframeToggle/index.vue
+++ b/ruoyi-ui/src/layout/components/IframeToggle/index.vue
@@ -1,24 +1,20 @@
 <template>
   <transition-group name="fade-transform" mode="out-in">
     <inner-link
-      v-for="(item, index) in iframeViews"
+      v-for="(item, index) in tagsViewStore.iframeViews"
       :key="item.path"
       :iframeId="'iframe' + index"
-      v-show="$route.path === item.path"
+      v-show="route.path === item.path"
       :src="item.meta.link"
     ></inner-link>
   </transition-group>
 </template>
 
-<script>
-import InnerLink from "../InnerLink/index"
+<script setup>
+import InnerLink from "../InnerLink/index.vue";
+import useTagsViewStore from '@/store/modules/tagsView';
+
+const route = useRoute();
+const tagsViewStore = useTagsViewStore()
 
-export default {
-  components: { InnerLink },
-  computed: {
-    iframeViews() {
-      return this.$store.state.tagsView.iframeViews
-    }
-  }
-}
 </script>
diff --git a/ruoyi-ui/src/layout/components/InnerLink/index.vue b/ruoyi-ui/src/layout/components/InnerLink/index.vue
index badefc5..dbfa128 100644
--- a/ruoyi-ui/src/layout/components/InnerLink/index.vue
+++ b/ruoyi-ui/src/layout/components/InnerLink/index.vue
@@ -1,47 +1,30 @@
-<template>
-  <div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！">
-    <iframe
-      :id="iframeId"
-      style="width: 100%; height: 100%"
-      :src="src"
-      frameborder="no"
-    ></iframe>
-  </div>
-</template>
-
 <script>
 export default {
-  props: {
-    src: {
-      type: String,
-      default: "/"
-    },
-    iframeId: {
-      type: String
+  setup() {
+    const route = useRoute();
+    const link = route.meta.link;
+    if (link === "") {
+      return "404";
     }
+    let url = link;
+    const height = document.documentElement.clientHeight - 94.5 + "px";
+    const style = { height: height };
+
+    // 返回渲染函数
+    return () =>
+      h(
+        "div",
+        {
+          style: style,
+        },
+        h("iframe", {
+          src: url,
+          frameborder: "no",
+          width: "100%",
+          height: "100%",
+          scrolling: "auto",
+        })
+      );
   },
-  data() {
-    return {
-      loading: false,
-      height: document.documentElement.clientHeight - 94.5 + "px;"
-    };
-  },
-  mounted() {
-    var _this = this;
-    const iframeId = ("#" + this.iframeId).replace(/\//g, "\\/");
-    const iframe = document.querySelector(iframeId);
-    // iframe页面loading控制
-    if (iframe.attachEvent) {
-      this.loading = true;
-      iframe.attachEvent("onload", function () {
-        _this.loading = false;
-      });
-    } else {
-      this.loading = true;
-      iframe.onload = function () {
-        _this.loading = false;
-      };
-    }
-  }
 };
 </script>
diff --git a/ruoyi-ui/src/layout/components/Navbar.vue b/ruoyi-ui/src/layout/components/Navbar.vue
index 39b3dad..aa70d8e 100644
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -1,14 +1,13 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+    <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
-        
+      <template v-if="getters.device !== 'mobile'">
+        <header-search id="header-search" class="right-menu-item" />
+
         <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
@@ -22,112 +21,99 @@
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
-
       </template>
-
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-        <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
-        </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link to="/user/profile">
-            <el-dropdown-item>个人中心</el-dropdown-item>
-          </router-link>
-          <el-dropdown-item @click.native="setting = true">
-            <span>布局设置</span>
-          </el-dropdown-item>
-          <el-dropdown-item divided @click.native="logout">
-            <span>退出登录</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+      <div class="avatar-container">
+        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+          <div class="avatar-wrapper">
+            <img :src="getters.avatar" class="user-avatar" />
+            <el-icon><caret-bottom /></el-icon>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <router-link to="/user/profile">
+                <el-dropdown-item>个人中心</el-dropdown-item>
+              </router-link>
+              <el-dropdown-item command="setLayout">
+                <span>布局设置</span>
+              </el-dropdown-item>
+              <el-dropdown-item divided command="logout">
+                <span>退出登录</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { ElMessageBox } from 'element-plus'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+import HeaderSearch from '@/components/HeaderSearch'
 import RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
 
-export default {
-  components: {
-    Breadcrumb,
-    TopNav,
-    Hamburger,
-    Screenfull,
-    SizeSelect,
-    Search,
-    RuoYiGit,
-    RuoYiDoc
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ]),
-    setting: {
-      get() {
-        return this.$store.state.settings.showSettings
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'showSettings',
-          value: val
-        })
-      }
-    },
-    topNav: {
-      get() {
-        return this.$store.state.settings.topNav
-      }
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
-    async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
-        })
-      }).catch(() => {});
-    }
+const store = useStore();
+const getters = computed(() => store.getters);
+
+function toggleSideBar() {
+  store.dispatch('app/toggleSideBar')
+}
+
+function handleCommand(command) {
+  switch (command) {
+    case "setLayout":
+      setLayout();
+      break;
+    case "logout":
+      logout();
+      break;
+    default:
+      break;
   }
 }
+
+function logout() {
+  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    store.dispatch('LogOut').then(() => {
+      location.href = '/index';
+    })
+  }).catch(() => { });
+}
+
+const emits = defineEmits(['setLayout'])
+function setLayout() {
+  emits('setLayout');
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .navbar {
   height: 50px;
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -149,6 +135,7 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
+    display: flex;
 
     &:focus {
       outline: none;
@@ -164,16 +151,16 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 40px;
 
       .avatar-wrapper {
         margin-top: 5px;
@@ -186,7 +173,7 @@ export default {
           border-radius: 10px;
         }
 
-        .el-icon-caret-bottom {
+        i {
           cursor: pointer;
           position: absolute;
           right: -20px;
diff --git a/ruoyi-ui/src/layout/components/Settings/index.vue b/ruoyi-ui/src/layout/components/Settings/index.vue
index 8b49842..6a5515d 100644
--- a/ruoyi-ui/src/layout/components/Settings/index.vue
+++ b/ruoyi-ui/src/layout/components/Settings/index.vue
@@ -1,260 +1,254 @@
 <template>
-  <el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
-    <div class="drawer-container">
-      <div>
-        <div class="setting-drawer-content">
-          <div class="setting-drawer-title">
-            <h3 class="drawer-title">主题风格设置</h3>
-          </div>
-          <div class="setting-drawer-block-checbox">
-            <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
-              <img src="@/assets/images/dark.svg" alt="dark">
-              <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
-                <i aria-label="图标: check" class="anticon anticon-check">
-                  <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
-                    <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
-                  </svg>
-                </i>
-              </div>
-            </div>
-            <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
-              <img src="@/assets/images/light.svg" alt="light">
-              <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
-                <i aria-label="图标: check" class="anticon anticon-check">
-                  <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
-                    <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
-                  </svg>
-                </i>
-              </div>
-            </div>
-          </div>
-
-          <div class="drawer-item">
-            <span>主题颜色</span>
-            <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-          </div>
+  <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
+    <div class="setting-drawer-title">
+      <h3 class="drawer-title">主题风格设置</h3>
+    </div>
+    <div class="setting-drawer-block-checbox">
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
+        <img src="@/assets/images/dark.svg" alt="dark" />
+        <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+          <i aria-label="图标: check" class="anticon anticon-check">
+            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
+              <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
+            </svg>
+          </i>
         </div>
-
-        <el-divider/>
-
-        <h3 class="drawer-title">系统布局配置</h3>
-      
-        <div class="drawer-item">
-          <span>开启 TopNav</span>
-          <el-switch v-model="topNav" class="drawer-switch" />
+      </div>
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
+        <img src="@/assets/images/light.svg" alt="light" />
+        <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+          <i aria-label="图标: check" class="anticon anticon-check">
+            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
+              <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
+            </svg>
+          </i>
         </div>
-
-        <div class="drawer-item">
-          <span>开启 Tags-Views</span>
-          <el-switch v-model="tagsView" class="drawer-switch" />
-        </div>
-
-        <div class="drawer-item">
-          <span>固定 Header</span>
-          <el-switch v-model="fixedHeader" class="drawer-switch" />
-        </div>
-
-        <div class="drawer-item">
-          <span>显示 Logo</span>
-          <el-switch v-model="sidebarLogo" class="drawer-switch" />
-        </div>
-
-        <div class="drawer-item">
-          <span>动态标题</span>
-          <el-switch v-model="dynamicTitle" class="drawer-switch" />
-        </div>
-
-        <el-divider/>
-
-        <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
-        <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
       </div>
     </div>
+    <div class="drawer-item">
+      <span>主题颜色</span>
+      <span class="comp-style">
+        <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange"/>
+      </span>
+    </div>
+    <el-divider />
+
+    <h3 class="drawer-title">系统布局配置</h3>
+
+    <div class="drawer-item">
+      <span>开启 TopNav</span>
+      <span class="comp-style">
+        <el-switch v-model="topNav" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>开启 Tags-Views</span>
+      <span class="comp-style">
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>固定 Header</span>
+      <span class="comp-style">
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>显示 Logo</span>
+      <span class="comp-style">
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>动态标题</span>
+      <span class="comp-style">
+        <el-switch v-model="dynamicTitle" class="drawer-switch" />
+      </span>
+    </div>
+
+    <el-divider />
+
+    <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
+    <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
   </el-drawer>
+
 </template>
 
-<script>
-import ThemePicker from '@/components/ThemePicker'
+<script setup>
+import variables from '@/assets/styles/variables.module.scss'
+import originElementPlus from 'element-plus/theme-chalk/index.css'
+import axios from 'axios'
+import { ElLoading, ElMessage } from 'element-plus'
+import { useDynamicTitle } from '@/utils/dynamicTitle'
 
-export default {
-  components: { ThemePicker },
-  data() {
-    return {
-      theme: this.$store.state.settings.theme,
-      sideTheme: this.$store.state.settings.sideTheme
-    };
-  },
-  computed: {
-    visible: {
-      get() {
-        return this.$store.state.settings.showSettings
-      }
-    },
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    topNav: {
-      get() {
-        return this.$store.state.settings.topNav
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'topNav',
-          value: val
-        })
-        if (!val) {
-          this.$store.dispatch('app/toggleSideBarHide', false);
-          this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes);
-        }
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    },
-    dynamicTitle: {
-      get() {
-        return this.$store.state.settings.dynamicTitle
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'dynamicTitle',
-          value: val
-        })
-      }
-    },
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-      this.theme = val;
-    },
-    handleTheme(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'sideTheme',
-        value: val
-      })
-      this.sideTheme = val;
-    },
-    saveSetting() {
-      this.$modal.loading("正在保存到本地，请稍候...");
-      this.$cache.local.set(
-        "layout-setting",
-        `{
-            "topNav":${this.topNav},
-            "tagsView":${this.tagsView},
-            "fixedHeader":${this.fixedHeader},
-            "sidebarLogo":${this.sidebarLogo},
-            "dynamicTitle":${this.dynamicTitle},
-            "sideTheme":"${this.sideTheme}",
-            "theme":"${this.theme}"
-          }`
-      );
-      setTimeout(this.$modal.closeLoading(), 1000)
-    },
-    resetSetting() {
-      this.$modal.loading("正在清除设置缓存并刷新，请稍候...");
-      this.$cache.local.remove("layout-setting")
-      setTimeout("window.location.reload()", 1000)
+const { proxy } = getCurrentInstance();
+const store = useStore();
+const showSettings = ref(false);
+const theme = ref(store.state.settings.theme);
+const sideTheme = ref(store.state.settings.sideTheme);
+const storeSettings = computed(() => store.state.settings);
+const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
+
+/** 是否需要topnav */
+const topNav = computed({
+  get: () => storeSettings.value.topNav,
+  set: (val) => {
+    store.dispatch('settings/changeSetting', {
+      key: 'topNav',
+      value: val
+    })
+    if (!val) {
+      store.commit("SET_SIDEBAR_ROUTERS", store.state.permission.defaultRoutes);
+    }
+  }
+})
+/** 是否需要tagview */
+const tagsView = computed({
+  get: () => storeSettings.value.tagsView,
+  set: (val) => {
+    store.dispatch('settings/changeSetting', {
+      key: 'tagsView',
+      value: val
+    })
+  }
+})
+/**是否需要固定头部 */
+const fixedHeader = computed({
+  get: () => storeSettings.value.fixedHeader,
+  set: (val) => {
+    store.dispatch('settings/changeSetting', {
+      key: 'fixedHeader',
+      value: val
+    })
+  }
+})
+/**是否需要侧边栏的logo */
+const sidebarLogo = computed({
+  get: () => storeSettings.value.sidebarLogo,
+  set: (val) => {
+    store.dispatch('settings/changeSetting', {
+      key: 'sidebarLogo',
+      value: val
+    })
+  }
+})
+/**是否需要侧边栏的动态网页的title */
+const dynamicTitle = computed({
+  get: () => storeSettings.value.dynamicTitle,
+  set: (val) => {
+    store.dispatch('settings/changeSetting', {
+      key: 'dynamicTitle',
+      value: val
+    })
+    // 动态设置网页标题
+    useDynamicTitle()
+  }
+})
+
+function themeChange(val) {
+  store.dispatch('settings/changeSetting', {
+    key: 'theme',
+    value: val
+  })
+  theme.value = val;
+}
+function handleTheme(val) {
+  store.dispatch('settings/changeSetting', {
+    key: 'sideTheme',
+    value: val
+  })
+  sideTheme.value = val;
+}
+function saveSetting() {
+  proxy.$modal.loading("正在保存到本地，请稍候...");
+  let layoutSetting = {
+    "topNav": storeSettings.value.topNav,
+    "tagsView": storeSettings.value.tagsView,
+    "fixedHeader": storeSettings.value.fixedHeader,
+    "sidebarLogo": storeSettings.value.sidebarLogo,
+    "dynamicTitle": storeSettings.value.dynamicTitle,
+    "sideTheme": storeSettings.value.sideTheme,
+    "theme": storeSettings.value.theme
+  };
+  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
+  setTimeout(proxy.$modal.closeLoading(), 1000)
+}
+function resetSetting() {
+  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");
+  localStorage.removeItem("layout-setting")
+  setTimeout("window.location.reload()", 1000)
+}
+function openSetting() {
+  showSettings.value = true;
+}
+
+defineExpose({
+  openSetting,
+})
+</script>
+
+<style lang='scss' scoped>
+.setting-drawer-title {
+  margin-bottom: 12px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 22px;
+  font-weight: bold;
+  .drawer-title {
+    font-size: 14px;
+  }
+}
+.setting-drawer-block-checbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+
+  .setting-drawer-block-checbox-item {
+    position: relative;
+    margin-right: 16px;
+    border-radius: 2px;
+    cursor: pointer;
+
+    img {
+      width: 48px;
+      height: 48px;
+    }
+
+    .custom-img {
+      width: 48px;
+      height: 38px;
+      border-radius: 5px;
+      box-shadow: 1px 1px 2px #898484;
+    }
+
+    .setting-drawer-block-checbox-selectIcon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      color: #1890ff;
+      font-weight: 700;
+      font-size: 14px;
     }
   }
 }
-</script>
 
-<style lang="scss" scoped>
-  .setting-drawer-content {
-    .setting-drawer-title {
-      margin-bottom: 12px;
-      color: rgba(0, 0, 0, .85);
-      font-size: 14px;
-      line-height: 22px;
-      font-weight: bold;
-    }
+.drawer-item {
+  color: rgba(0, 0, 0, 0.65);
+  padding: 12px 0;
+  font-size: 14px;
 
-    .setting-drawer-block-checbox {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      margin-top: 10px;
-      margin-bottom: 20px;
-
-      .setting-drawer-block-checbox-item {
-        position: relative;
-        margin-right: 16px;
-        border-radius: 2px;
-        cursor: pointer;
-
-        img {
-          width: 48px;
-          height: 48px;
-        }
-
-        .setting-drawer-block-checbox-selectIcon {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 100%;
-          height: 100%;
-          padding-top: 15px;
-          padding-left: 24px;
-          color: #1890ff;
-          font-weight: 700;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-
-  .drawer-container {
-    padding: 20px;
-    font-size: 14px;
-    line-height: 1.5;
-    word-wrap: break-word;
-
-    .drawer-title {
-      margin-bottom: 12px;
-      color: rgba(0, 0, 0, .85);
-      font-size: 14px;
-      line-height: 22px;
-    }
-
-    .drawer-item {
-      color: rgba(0, 0, 0, .65);
-      font-size: 14px;
-      padding: 12px 0;
-    }
-
-    .drawer-switch {
-      float: right
-    }
+  .comp-style {
+    float: right;
+    margin: -3px 8px 0px 0px;
   }
+}
 </style>
diff --git a/ruoyi-ui/src/layout/components/Sidebar/Item.vue b/ruoyi-ui/src/layout/components/Sidebar/Item.vue
deleted file mode 100644
index be3285d..0000000
--- a/ruoyi-ui/src/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    }
-
-    if (title) {
-      if (title.length > 5) {
-        vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
-      } else {
-        vnodes.push(<span slot='title'>{(title)}</span>)
-      }
-    }
-    return vnodes
-  }
-}
-</script>
diff --git a/ruoyi-ui/src/layout/components/Sidebar/Link.vue b/ruoyi-ui/src/layout/components/Sidebar/Link.vue
index 8b0bc93..8011431 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/Link.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/Link.vue
@@ -1,43 +1,40 @@
 <template>
-  <component :is="type" v-bind="linkProps(to)">
+  <component :is="type" v-bind="linkProps()">
     <slot />
   </component>
 </template>
 
-<script>
+<script setup>
 import { isExternal } from '@/utils/validate'
 
-export default {
-  props: {
-    to: {
-      type: [String, Object],
-      required: true
-    }
-  },
-  computed: {
-    isExternal() {
-      return isExternal(this.to)
-    },
-    type() {
-      if (this.isExternal) {
-        return 'a'
-      }
-      return 'router-link'
-    }
-  },
-  methods: {
-    linkProps(to) {
-      if (this.isExternal) {
-        return {
-          href: to,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        to: to
-      }
+const props = defineProps({
+  to: {
+    type: [String, Object],
+    required: true
+  }
+})
+
+const isExt = computed(() => {
+  return isExternal(props.to)
+})
+
+const type = computed(() => {
+  if (isExt.value) {
+    return 'a'
+  }
+  return 'router-link'
+})
+
+function linkProps() {
+  if (isExt.value) {
+    return {
+      href: props.to,
+      target: '_blank',
+      rel: 'noopener'
     }
   }
+  return {
+    to: props.to
+  }
 }
 </script>
diff --git a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
index 2774cc8..25fb799 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
@@ -1,45 +1,32 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
       </router-link>
     </transition>
   </div>
 </template>
 
-<script>
-import logoImg from '@/assets/logo/logo.png'
-import variables from '@/assets/styles/variables.scss'
+<script setup>
+import variables from '@/assets/styles/variables.module.scss'
+import logo from '@/assets/logo/logo.png'
 
-export default {
-  name: 'SidebarLogo',
-  props: {
-    collapse: {
-      type: Boolean,
-      required: true
-    }
-  },
-  computed: {
-    variables() {
-      return variables;
-    },
-    sideTheme() {
-      return this.$store.state.settings.sideTheme
-    }
-  },
-  data() {
-    return {
-      title: process.env.VUE_APP_TITLE,
-      logo: logoImg
-    }
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true
   }
-}
+})
+
+const title = ref('Ruoyi-Flex管理系统');
+const store = useStore();
+const sideTheme = computed(() => store.state.settings.sideTheme);
 </script>
 
 <style lang="scss" scoped>
diff --git a/ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue b/ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue
index 4853fbb..3b8d8aa 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,17 +1,20 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
+          <template #title>{{ onlyOneChild.meta.title }}</template>
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
-      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <template v-if="item.meta" #title>
+        <svg-icon :icon-class="item.meta && item.meta.icon" />
+        <span>{{ item.meta.title }}</span>
       </template>
+
       <sidebar-item
         v-for="child in item.children"
         :key="child.path"
@@ -20,81 +23,72 @@
         :base-path="resolvePath(child.path)"
         class="nest-menu"
       />
-    </el-submenu>
+    </el-sub-menu>
   </div>
 </template>
 
-<script>
-import path from 'path'
+<script setup>
 import { isExternal } from '@/utils/validate'
-import Item from './Item'
 import AppLink from './Link'
-import FixiOSBug from './FixiOSBug'
+import { getNormalPath } from '@/utils/ruoyi'
 
-export default {
-  name: 'SidebarItem',
-  components: { Item, AppLink },
-  mixins: [FixiOSBug],
-  props: {
-    // route object
-    item: {
-      type: Object,
-      required: true
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    },
-    basePath: {
-      type: String,
-      default: ''
-    }
+const props = defineProps({
+  // route object
+  item: {
+    type: Object,
+    required: true
   },
-  data() {
-    this.onlyOneChild = null
-    return {}
+  isNest: {
+    type: Boolean,
+    default: false
   },
-  methods: {
-    hasOneShowingChild(children = [], parent) {
-      if (!children) {
-        children = [];
-      }
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath, routeQuery) {
-      if (isExternal(routePath)) {
-        return routePath
-      }
-      if (isExternal(this.basePath)) {
-        return this.basePath
-      }
-      if (routeQuery) {
-        let query = JSON.parse(routeQuery);
-        return { path: path.resolve(this.basePath, routePath), query: query }
-      }
-      return path.resolve(this.basePath, routePath)
-    }
+  basePath: {
+    type: String,
+    default: ''
   }
+})
+
+const onlyOneChild = ref({});
+
+function hasOneShowingChild(children = [], parent) {
+  if (!children) {
+    children = [];
+  }
+  const showingChildren = children.filter(item => {
+    if (item.hidden) {
+      return false
+    } else {
+      // Temp set(will be used if only has one showing child)
+      onlyOneChild.value = item
+      return true
+    }
+  })
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return true
+  }
+
+  // Show parent if there are no child router to display
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return true
+  }
+
+  return false
+};
+
+function resolvePath(routePath, routeQuery) {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath
+  }
+  if (routeQuery) {
+    let query = JSON.parse(routeQuery);
+    return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
+  }
+  return getNormalPath(props.basePath + '/' + routePath)
 }
 </script>
diff --git a/ruoyi-ui/src/layout/components/Sidebar/index.vue b/ruoyi-ui/src/layout/components/Sidebar/index.vue
index 51d0839..af5555b 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/index.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/index.vue
@@ -1,57 +1,49 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
-        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-            <el-menu
-                :default-active="activeMenu"
-                :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
-                :unique-opened="true"
-                :active-text-color="settings.theme"
-                :collapse-transition="false"
-                mode="vertical"
-            >
-                <sidebar-item
-                    v-for="(route, index) in sidebarRouters"
-                    :key="route.path  + index"
-                    :item="route"
-                    :base-path="route.path"
-                />
-            </el-menu>
-        </el-scrollbar>
-    </div>
+  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+        :unique-opened="true"
+        :active-text-color="theme"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item
+          v-for="(route, index) in sidebarRouters"
+          :key="route.path + index"
+          :item="route"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
 </template>
 
-<script>
-import { mapGetters, mapState } from "vuex";
-import Logo from "./Logo";
-import SidebarItem from "./SidebarItem";
-import variables from "@/assets/styles/variables.scss";
+<script setup>
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/assets/styles/variables.module.scss'
+
+const route = useRoute();
+const store = useStore();
+
+const sidebarRouters =  computed(() => store.getters.sidebarRouters);
+const showLogo = computed(() => store.state.settings.sidebarLogo);
+const sideTheme = computed(() => store.state.settings.sideTheme);
+const theme = computed(() => store.state.settings.theme);
+const isCollapse = computed(() => !store.state.app.sidebar.opened);
+
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  // if set path, the sidebar will highlight the path you set
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+})
 
-export default {
-    components: { SidebarItem, Logo },
-    computed: {
-        ...mapState(["settings"]),
-        ...mapGetters(["sidebarRouters", "sidebar"]),
-        activeMenu() {
-            const route = this.$route;
-            const { meta, path } = route;
-            // if set path, the sidebar will highlight the path you set
-            if (meta.activeMenu) {
-                return meta.activeMenu;
-            }
-            return path;
-        },
-        showLogo() {
-            return this.$store.state.settings.sidebarLogo;
-        },
-        variables() {
-            return variables;
-        },
-        isCollapse() {
-            return !this.sidebar.opened;
-        }
-    }
-};
 </script>
diff --git a/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue b/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
index bb753a1..fd9bfc0 100644
--- a/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
+++ b/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
@@ -1,94 +1,112 @@
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+  <el-scrollbar
+    ref="scrollContainer"
+    :vertical="false"
+    class="scroll-container"
+    @wheel.prevent="handleScroll"
+  >
     <slot />
   </el-scrollbar>
 </template>
 
-<script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
+<script setup>
+import {
+  ref,
+  getCurrentInstance,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue';
+import {useStore} from "vuex";
 
-export default {
-  name: 'ScrollPane',
-  data() {
-    return {
-      left: 0
-    }
-  },
-  computed: {
-    scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
-  },
-  mounted() {
-    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
-  },
-  beforeDestroy() {
-    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    emitScroll() {
-      this.$emit('scroll')
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
+const tagAndTagSpacing = ref(4);
+const { proxy } = getCurrentInstance();
 
-      let firstTag = null
-      let lastTag = null
+const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef);
 
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
+onMounted(() => {
+  scrollWrapper.value.addEventListener('scroll', emitScroll, true)
+})
+onBeforeUnmount(() => {
+  scrollWrapper.value.removeEventListener('scroll', emitScroll)
+})
 
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
+function handleScroll(e) {
+  const eventDelta = e.wheelDelta || -e.deltaY * 40
+  const $scrollWrapper = scrollWrapper.value;
+  $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+}
+const emits = defineEmits()
+const emitScroll = () => {
+  emits('scroll')
+}
 
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+const store = useStore();
+const visitedViews = computed(() => store.state.tagsView.visitedViews);
 
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+function moveToTarget(currentTag) {
+  const $container = proxy.$refs.scrollContainer.$el
+  const $containerWidth = $container.offsetWidth
+  const $scrollWrapper = scrollWrapper.value;
 
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+  let firstTag = null
+  let lastTag = null
+
+  // find first tag and last tag
+  if (visitedViews.value.length > 0) {
+    firstTag = visitedViews.value[0]
+    lastTag = visitedViews.value[visitedViews.value.length - 1]
+  }
+
+  if (firstTag === currentTag) {
+    $scrollWrapper.scrollLeft = 0
+  } else if (lastTag === currentTag) {
+    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+  } else {
+    const tagListDom = document.getElementsByClassName('tags-view-item');
+    const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
+    let prevTag = null
+    let nextTag = null
+    for (const k in tagListDom) {
+      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
+          prevTag = tagListDom[k];
+        }
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
+          nextTag = tagListDom[k];
         }
       }
     }
+
+    // the tag's offsetLeft after of nextTag
+    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
+
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
+    if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+      $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+    } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+      $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+    }
   }
 }
+
+defineExpose({
+  moveToTarget,
+})
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .scroll-container {
   white-space: nowrap;
   position: relative;
   overflow: hidden;
   width: 100%;
-  ::v-deep {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
+  :deep(.el-scrollbar__bar) {
+    bottom: 0px;
+  }
+  :deep(.el-scrollbar__wrap) {
+    height: 49px;
   }
 }
 </style>
diff --git a/ruoyi-ui/src/layout/components/TagsView/index.vue b/ruoyi-ui/src/layout/components/TagsView/index.vue
index 96585a5..2fff4ae 100644
--- a/ruoyi-ui/src/layout/components/TagsView/index.vue
+++ b/ruoyi-ui/src/layout/components/TagsView/index.vue
@@ -1,249 +1,245 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
-        ref="tag"
         :key="tag.path"
-        :class="isActive(tag)?'active':''"
+        :data-path="tag.path"
+        :class="isActive(tag) ? 'active' : ''"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
         class="tags-view-item"
         :style="activeStyle(tag)"
-        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
+        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+        @contextmenu.prevent="openMenu(tag, $event)"
       >
         {{ tag.title }}
-        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
+        </span>
       </router-link>
     </scroll-pane>
-    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li>
-      <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>
-      <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li>
-      <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
-      <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
+    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">
+        <refresh-right style="width: 1em; height: 1em;" /> 刷新页面
+      </li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+        <close style="width: 1em; height: 1em;" /> 关闭当前
+      </li>
+      <li @click="closeOthersTags">
+        <circle-close style="width: 1em; height: 1em;" /> 关闭其他
+      </li>
+      <li v-if="!isFirstView()" @click="closeLeftTags">
+        <back style="width: 1em; height: 1em;" /> 关闭左侧
+      </li>
+      <li v-if="!isLastView()" @click="closeRightTags">
+        <right style="width: 1em; height: 1em;" /> 关闭右侧
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        <circle-close style="width: 1em; height: 1em;" /> 全部关闭
+      </li>
     </ul>
   </div>
 </template>
 
-<script>
+<script setup>
 import ScrollPane from './ScrollPane'
-import path from 'path'
+import { getNormalPath } from '@/utils/ruoyi'
 
-export default {
-  components: { ScrollPane },
-  data() {
-    return {
-      visible: false,
-      top: 0,
-      left: 0,
-      selectedTag: {},
-      affixTags: []
+const visible = ref(false);
+const top = ref(0);
+const left = ref(0);
+const selectedTag = ref({});
+const affixTags = ref([]);
+const scrollPaneRef = ref(null);
+
+const { proxy } = getCurrentInstance();
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const visitedViews = computed(() => store.state.tagsView.visitedViews);
+const routes = computed(() => store.state.permission.routes);
+const theme = computed(() => store.state.settings.theme);
+
+watch(route, () => {
+  addTags()
+  moveToCurrentTag()
+})
+watch(visible, (value) => {
+  if (value) {
+    document.body.addEventListener('click', closeMenu)
+  } else {
+    document.body.removeEventListener('click', closeMenu)
+  }
+})
+onMounted(() => {
+  initTags()
+  addTags()
+})
+
+function isActive(r) {
+  return r.path === route.path
+}
+function activeStyle(tag) {
+  if (!isActive(tag)) return {};
+  return {
+    "background-color": theme.value,
+    "border-color": theme.value
+  };
+}
+function isAffix(tag) {
+  return tag.meta && tag.meta.affix
+}
+function isFirstView() {
+  try {
+    return selectedTag.value.fullPath === visitedViews.value[1].fullPath || selectedTag.value.fullPath === '/index'
+  } catch (err) {
+    return false
+  }
+}
+function isLastView() {
+  try {
+    return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath
+  } catch (err) {
+    return false
+  }
+}
+function filterAffixTags(routes, basePath = '') {
+  let tags = []
+  routes.forEach(route => {
+    if (route.meta && route.meta.affix) {
+      const tagPath = getNormalPath(basePath + '/' + route.path)
+      tags.push({
+        fullPath: tagPath,
+        path: tagPath,
+        name: route.name,
+        meta: { ...route.meta }
+      })
     }
-  },
-  computed: {
-    visitedViews() {
-      return this.$store.state.tagsView.visitedViews
-    },
-    routes() {
-      return this.$store.state.permission.routes
-    },
-    theme() {
-      return this.$store.state.settings.theme;
-    }
-  },
-  watch: {
-    $route() {
-      this.addTags()
-      this.moveToCurrentTag()
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener('click', this.closeMenu)
-      } else {
-        document.body.removeEventListener('click', this.closeMenu)
+    if (route.children) {
+      const tempTags = filterAffixTags(route.children, route.path)
+      if (tempTags.length >= 1) {
+        tags = [...tags, ...tempTags]
       }
     }
-  },
-  mounted() {
-    this.initTags()
-    this.addTags()
-  },
-  methods: {
-    isActive(route) {
-      return route.path === this.$route.path
-    },
-    activeStyle(tag) {
-      if (!this.isActive(tag)) return {};
-      return {
-        "background-color": this.theme,
-        "border-color": this.theme
-      };
-    },
-    isAffix(tag) {
-      return tag.meta && tag.meta.affix
-    },
-    isFirstView() {
-      try {
-        return this.selectedTag.fullPath === '/index' || this.selectedTag.fullPath === this.visitedViews[1].fullPath
-      } catch (err) {
-        return false
-      }
-    },
-    isLastView() {
-      try {
-        return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
-      } catch (err) {
-        return false
-      }
-    },
-    filterAffixTags(routes, basePath = '/') {
-      let tags = []
-      routes.forEach(route => {
-        if (route.meta && route.meta.affix) {
-          const tagPath = path.resolve(basePath, route.path)
-          tags.push({
-            fullPath: tagPath,
-            path: tagPath,
-            name: route.name,
-            meta: { ...route.meta }
-          })
-        }
-        if (route.children) {
-          const tempTags = this.filterAffixTags(route.children, route.path)
-          if (tempTags.length >= 1) {
-            tags = [...tags, ...tempTags]
-          }
-        }
-      })
-      return tags
-    },
-    initTags() {
-      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
-      for (const tag of affixTags) {
-        // Must have tag name
-        if (tag.name) {
-          this.$store.dispatch('tagsView/addVisitedView', tag)
-        }
-      }
-    },
-    addTags() {
-      const { name } = this.$route
-      if (name) {
-        this.$store.dispatch('tagsView/addView', this.$route)
-        if (this.$route.meta.link) {
-          this.$store.dispatch('tagsView/addIframeView', this.$route)
-        }
-      }
-      return false
-    },
-    moveToCurrentTag() {
-      const tags = this.$refs.tag
-      this.$nextTick(() => {
-        for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
-            // when query is different then update
-            if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
-            }
-            break
-          }
-        }
-      })
-    },
-    refreshSelectedTag(view) {
-      this.$tab.refreshPage(view);
-      if (this.$route.meta.link) {
-        this.$store.dispatch('tagsView/delIframeView', this.$route)
-      }
-    },
-    closeSelectedTag(view) {
-      this.$tab.closePage(view).then(({ visitedViews }) => {
-        if (this.isActive(view)) {
-          this.toLastView(visitedViews, view)
-        }
-      })
-    },
-    closeRightTags() {
-      this.$tab.closeRightPage(this.selectedTag).then(visitedViews => {
-        if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
-          this.toLastView(visitedViews)
-        }
-      })
-    },
-    closeLeftTags() {
-      this.$tab.closeLeftPage(this.selectedTag).then(visitedViews => {
-        if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
-          this.toLastView(visitedViews)
-        }
-      })
-    },
-    closeOthersTags() {
-      this.$router.push(this.selectedTag.fullPath).catch(()=>{});
-      this.$tab.closeOtherPage(this.selectedTag).then(() => {
-        this.moveToCurrentTag()
-      })
-    },
-    closeAllTags(view) {
-      this.$tab.closeAllPage().then(({ visitedViews }) => {
-        if (this.affixTags.some(tag => tag.path === this.$route.path)) {
-          return
-        }
-        this.toLastView(visitedViews, view)
-      })
-    },
-    toLastView(visitedViews, view) {
-      const latestView = visitedViews.slice(-1)[0]
-      if (latestView) {
-        this.$router.push(latestView.fullPath)
-      } else {
-        // now the default is to redirect to the home page if there is no tags-view,
-        // you can adjust it according to your needs.
-        if (view.name === 'Dashboard') {
-          // to reload home page
-          this.$router.replace({ path: '/redirect' + view.fullPath })
-        } else {
-          this.$router.push('/')
-        }
-      }
-    },
-    openMenu(tag, e) {
-      const menuMinWidth = 105
-      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
-      const offsetWidth = this.$el.offsetWidth // container width
-      const maxLeft = offsetWidth - menuMinWidth // left boundary
-      const left = e.clientX - offsetLeft + 15 // 15: margin right
-
-      if (left > maxLeft) {
-        this.left = maxLeft
-      } else {
-        this.left = left
-      }
-
-      this.top = e.clientY
-      this.visible = true
-      this.selectedTag = tag
-    },
-    closeMenu() {
-      this.visible = false
-    },
-    handleScroll() {
-      this.closeMenu()
+  })
+  return tags
+}
+function initTags() {
+  const res = filterAffixTags(routes.value);
+  affixTags.value = res;
+  for (const tag of res) {
+    // Must have tag name
+    if (tag.name) {
+      store.dispatch('tagsView/addVisitedView', tag)
     }
   }
 }
+function addTags() {
+  const { name } = route
+  if (name) {
+    store.dispatch('tagsView/addView', route)
+  }
+  return false
+}
+function moveToCurrentTag() {
+  nextTick(() => {
+    for (const r of visitedViews.value) {
+      if (r.path === route.path) {
+        scrollPaneRef.value.moveToTarget(r);
+        // when query is different then update
+        if (r.fullPath !== route.fullPath) {
+          store.dispatch('tagsView/updateVisitedView', route)
+        }
+      }
+    }
+  })
+}
+function refreshSelectedTag(view) {
+  proxy.$tab.refreshPage(view);
+}
+function closeSelectedTag(view) {
+  proxy.$tab.closePage(view).then(({ visitedViews }) => {
+    if (isActive(view)) {
+      toLastView(visitedViews, view)
+    }
+  })
+}
+function closeRightTags() {
+  proxy.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
+    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews)
+    }
+  })
+}
+function closeLeftTags() {
+  proxy.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {
+    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews)
+    }
+  })
+}
+function closeOthersTags() {
+  router.push(selectedTag.value).catch(() => { });
+  proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
+    moveToCurrentTag()
+  })
+}
+function closeAllTags(view) {
+  proxy.$tab.closeAllPage().then(({ visitedViews }) => {
+    if (affixTags.value.some(tag => tag.path === route.path)) {
+      return
+    }
+    toLastView(visitedViews, view)
+  })
+}
+function toLastView(visitedViews, view) {
+  const latestView = visitedViews.slice(-1)[0]
+  if (latestView) {
+    router.push(latestView.fullPath)
+  } else {
+    // now the default is to redirect to the home page if there is no tags-view,
+    // you can adjust it according to your needs.
+    if (view.name === 'Dashboard') {
+      // to reload home page
+      router.replace({ path: '/redirect' + view.fullPath })
+    } else {
+      router.push('/')
+    }
+  }
+}
+function openMenu(tag, e) {
+  const menuMinWidth = 105
+  const offsetLeft = proxy.$el.getBoundingClientRect().left // container margin left
+  const offsetWidth = proxy.$el.offsetWidth // container width
+  const maxLeft = offsetWidth - menuMinWidth // left boundary
+  const l = e.clientX - offsetLeft + 15 // 15: margin right
+
+  if (l > maxLeft) {
+    left.value = maxLeft
+  } else {
+    left.value = l
+  }
+
+  top.value = e.clientY
+  visible.value = true
+  selectedTag.value = tag
+}
+function closeMenu() {
+  visible.value = false
+}
+function handleScroll() {
+  closeMenu()
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .tags-view-container {
   height: 34px;
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -269,7 +265,7 @@ export default {
         color: #fff;
         border-color: #42b983;
         &::before {
-          content: '';
+          content: "";
           background: #fff;
           display: inline-block;
           width: 8px;
@@ -292,7 +288,7 @@ export default {
     font-size: 12px;
     font-weight: 400;
     color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
     li {
       margin: 0;
       padding: 7px 16px;
@@ -315,16 +311,18 @@ export default {
       vertical-align: 2px;
       border-radius: 50%;
       text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       transform-origin: 100% 50%;
       &:before {
-        transform: scale(.6);
+        transform: scale(0.6);
         display: inline-block;
         vertical-align: -3px;
       }
       &:hover {
         background-color: #b4bccc;
         color: #fff;
+        width: 12px !important;
+        height: 12px !important;
       }
     }
   }
diff --git a/ruoyi-ui/src/layout/components/index.js b/ruoyi-ui/src/layout/components/index.js
index 104bd3a..fd57731 100644
--- a/ruoyi-ui/src/layout/components/index.js
+++ b/ruoyi-ui/src/layout/components/index.js
@@ -1,5 +1,4 @@
 export { default as AppMain } from './AppMain'
 export { default as Navbar } from './Navbar'
 export { default as Settings } from './Settings'
-export { default as Sidebar } from './Sidebar/index.vue'
 export { default as TagsView } from './TagsView/index.vue'
diff --git a/ruoyi-ui/src/layout/index.vue b/ruoyi-ui/src/layout/index.vue
index dba4393..97cdaab 100644
--- a/ruoyi-ui/src/layout/index.vue
+++ b/ruoyi-ui/src/layout/index.vue
@@ -1,111 +1,105 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar/>
-        <tags-view v-if="needTagsView"/>
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <sidebar class="sidebar-container" />
+    <div :class="{ hasTagsView: needTagsView }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <navbar @setLayout="setLayout" />
+        <tags-view v-if="needTagsView" />
       </div>
-      <app-main/>
-      <right-panel>
-        <settings/>
-      </right-panel>
+      <app-main />
+      <settings ref="settingRef" />
     </div>
   </div>
 </template>
 
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
-import variables from '@/assets/styles/variables.scss'
+<script setup>
+import { useWindowSize } from '@vueuse/core'
+import Sidebar from './components/Sidebar/index.vue'
+import { AppMain, Navbar, Settings, TagsView } from './components'
+import defaultSettings from '@/settings'
 
-export default {
-  name: 'Layout',
-  components: {
-    AppMain,
-    Navbar,
-    RightPanel,
-    Settings,
-    Sidebar,
-    TagsView
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      theme: state => state.settings.theme,
-      sideTheme: state => state.settings.sideTheme,
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    },
-    variables() {
-      return variables;
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
-    }
+const store = useStore();
+const theme = computed(() => store.state.settings.theme);
+const sideTheme = computed(() => store.state.settings.sideTheme);
+const sidebar = computed(() => store.state.app.sidebar);
+const device = computed(() => store.state.app.device);
+const needTagsView = computed(() => store.state.settings.tagsView);
+const fixedHeader = computed(() => store.state.settings.fixedHeader);
+
+const classObj = computed(() => ({
+  hideSidebar: !sidebar.value.opened,
+  openSidebar: sidebar.value.opened,
+  withoutAnimation: sidebar.value.withoutAnimation,
+  mobile: device.value === 'mobile'
+}))
+
+const { width, height } = useWindowSize();
+const WIDTH = 992; // refer to Bootstrap's responsive design
+
+watchEffect(() => {
+  if (device.value === 'mobile' && sidebar.value.opened) {
+    store.dispatch('app/closeSideBar', { withoutAnimation: false })
   }
+  if (width.value - 1 < WIDTH) {
+    store.dispatch('app/toggleDevice', 'mobile')
+    store.dispatch('app/closeSideBar', { withoutAnimation: true })
+  } else {
+    store.dispatch('app/toggleDevice', 'desktop')
+  }
+})
+
+function handleClickOutside() {
+  store.dispatch('app/closeSideBar', { withoutAnimation: false })
+}
+
+const settingRef = ref(null);
+function setLayout() {
+  settingRef.value.openSetting();
 }
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
+@import "@/assets/styles/mixin.scss";
+@import "@/assets/styles/variables.module.scss";
 
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .sidebarHide .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>
diff --git a/ruoyi-ui/src/layout/mixin/ResizeHandler.js b/ruoyi-ui/src/layout/mixin/ResizeHandler.js
deleted file mode 100644
index e8d0df8..0000000
--- a/ruoyi-ui/src/layout/mixin/ResizeHandler.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import store from '@/store'
-
-const { body } = document
-const WIDTH = 992 // refer to Bootstrap's responsive design
-
-export default {
-  watch: {
-    $route(route) {
-      if (this.device === 'mobile' && this.sidebar.opened) {
-        store.dispatch('app/closeSideBar', { withoutAnimation: false })
-      }
-    }
-  },
-  beforeMount() {
-    window.addEventListener('resize', this.$_resizeHandler)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.$_resizeHandler)
-  },
-  mounted() {
-    const isMobile = this.$_isMobile()
-    if (isMobile) {
-      store.dispatch('app/toggleDevice', 'mobile')
-      store.dispatch('app/closeSideBar', { withoutAnimation: true })
-    }
-  },
-  methods: {
-    // use $_ for mixins properties
-    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_isMobile() {
-      const rect = body.getBoundingClientRect()
-      return rect.width - 1 < WIDTH
-    },
-    $_resizeHandler() {
-      if (!document.hidden) {
-        const isMobile = this.$_isMobile()
-        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
-
-        if (isMobile) {
-          store.dispatch('app/closeSideBar', { withoutAnimation: true })
-        }
-      }
-    }
-  }
-}
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index 13c6cf2..2c8866f 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -1,86 +1,86 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 import Cookies from 'js-cookie'
 
-import Element from 'element-ui'
-import './assets/styles/element-variables.scss'
+import ElementPlus from 'element-plus'
+import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
 
 import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
+// element css
+import 'element-plus/es/components/message/style/css';
+import 'element-plus/es/components/message-box/style/css';
+import 'element-plus/es/components/notification/style/css';
+import 'element-plus/es/components/loading/style/css';
+
 import App from './App'
 import store from './store'
 import router from './router'
 import directive from './directive' // directive
+
+
+// 注册指令
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
 
-import './assets/icons' // icon
+// svg图标
+import 'virtual:svg-icons-register'; // 引入svg icon注册脚本
+import SvgIcon from '@/components/SvgIcon'
+import elementIcons from '@/components/SvgIcon/svgicon'
+
 import './permission' // permission control
-import { getDicts } from "@/api/system/dict/data";
-import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+
+import { useDict } from '@/utils/dict'
+import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel } from '@/utils/ruoyi'
+
 // 分页组件
-import Pagination from "@/components/Pagination";
+import Pagination from '@/components/Pagination'
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
-// 富文本组件
-import Editor from "@/components/Editor"
+import RightToolbar from '@/components/RightToolbar'
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
+// 自定义树选择组件
+import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
-// 头部标签组件
-import VueMeta from 'vue-meta'
-// 字典数据组件
-import DictData from '@/components/DictData'
+
+const app = createApp(App)
 
 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
-Vue.prototype.getConfigKey = getConfigKey
-Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
-Vue.prototype.addDateRange = addDateRange
-Vue.prototype.selectDictLabel = selectDictLabel
-Vue.prototype.selectDictLabels = selectDictLabels
-Vue.prototype.download = download
-Vue.prototype.handleTree = handleTree
+app.config.globalProperties.useDict = useDict
+app.config.globalProperties.download = download
+app.config.globalProperties.parseTime = parseTime
+app.config.globalProperties.resetForm = resetForm
+app.config.globalProperties.handleTree = handleTree
+app.config.globalProperties.addDateRange = addDateRange
+app.config.globalProperties.selectDictLabel = selectDictLabel
 
 // 全局组件挂载
-Vue.component('DictTag', DictTag)
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
-Vue.component('Editor', Editor)
-Vue.component('FileUpload', FileUpload)
-Vue.component('ImageUpload', ImageUpload)
-Vue.component('ImagePreview', ImagePreview)
+app.component('DictTag', DictTag)
+app.component('Pagination', Pagination)
+app.component('TreeSelect', TreeSelect)
+app.component('FileUpload', FileUpload)
+app.component('ImageUpload', ImageUpload)
+app.component('ImagePreview', ImagePreview)
+app.component('RightToolbar', RightToolbar)
 
-Vue.use(directive)
-Vue.use(plugins)
-Vue.use(VueMeta)
-DictData.install()
+app.use(router)
+app.use(store)
+app.use(plugins)
+app.use(elementIcons)
+//app.component('svg-icon', SvgIcon)
+app.component('SvgIcon', SvgIcon)
 
-/**
- * If you don't want to use mock-server
- * you want to use MockJs for mock api
- * you can execute: mockXHR()
- *
- * Currently MockJs will be used in the production environment,
- * please remove it before going online! ! !
- */
+directive(app)
 
-Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
+// 使用element-plus 并且设置全局的大小
+app.use(ElementPlus, {
+  locale: locale,
+  // 支持 large、default、small
+  size: Cookies.get('size') || 'default'
 })
 
-Vue.config.productionTip = false
-
-new Vue({
-  el: '#app',
-  router,
-  store,
-  render: h => h(App)
-})
+app.mount('#app')
diff --git a/ruoyi-ui/src/permission.js b/ruoyi-ui/src/permission.js
index 609d215..b54f12a 100644
--- a/ruoyi-ui/src/permission.js
+++ b/ruoyi-ui/src/permission.js
@@ -1,14 +1,14 @@
 import router from './router'
 import store from './store'
-import { Message } from 'element-ui'
+import { ElMessage } from 'element-plus'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { getToken } from '@/utils/auth'
-import { isRelogin } from '@/utils/request'
+import { isHttp } from '@/utils/validate'
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
@@ -20,21 +20,23 @@ router.beforeEach((to, from, next) => {
       NProgress.done()
     } else {
       if (store.getters.roles.length === 0) {
-        isRelogin.show = true
         // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetInfo').then(() => {
-          isRelogin.show = false
           store.dispatch('GenerateRoutes').then(accessRoutes => {
             // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
+            accessRoutes.forEach(route => {
+              if (!isHttp(route.path)) {
+                router.addRoute(route) // 动态添加可访问路由表
+              }
+            })
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
           })
         }).catch(err => {
-            store.dispatch('LogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
+          store.dispatch('LogOut').then(() => {
+            ElMessage.error(err)
+            next({ path: '/' })
           })
+        })
       } else {
         next()
       }
diff --git a/ruoyi-ui/src/plugins/download.js b/ruoyi-ui/src/plugins/download.js
index ffb8c14..c31a064 100644
--- a/ruoyi-ui/src/plugins/download.js
+++ b/ruoyi-ui/src/plugins/download.js
@@ -1,42 +1,42 @@
 import axios from 'axios'
-import { Message } from 'element-ui'
+import { ElMessage } from 'element-plus'
 import { saveAs } from 'file-saver'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
-import { blobValidate } from "@/utils/ruoyi";
+import { blobValidate } from '@/utils/ruoyi'
 
-const baseURL = process.env.VUE_APP_BASE_API
+const baseURL = import.meta.env.VITE_APP_BASE_API
 
 export default {
   name(name, isDelete = true) {
-    var url = baseURL + "/common/download?fileName=" + encodeURIComponent(name) + "&delete=" + isDelete
+    var url = baseURL + "/common/download?fileName=" + encodeURI(name) + "&delete=" + isDelete
     axios({
       method: 'get',
       url: url,
       responseType: 'blob',
       headers: { 'Authorization': 'Bearer ' + getToken() }
-    }).then((res) => {
-      const isBlob = blobValidate(res.data);
-      if (isBlob) {
+    }).then(async (res) => {
+      const isLogin = await blobValidate(res.data);
+      if (isLogin) {
         const blob = new Blob([res.data])
-        this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))
+        this.saveAs(blob, decodeURI(res.headers['download-filename']))
       } else {
         this.printErrMsg(res.data);
       }
     })
   },
   resource(resource) {
-    var url = baseURL + "/common/download/resource?resource=" + encodeURIComponent(resource);
+    var url = baseURL + "/common/download/resource?resource=" + encodeURI(resource);
     axios({
       method: 'get',
       url: url,
       responseType: 'blob',
       headers: { 'Authorization': 'Bearer ' + getToken() }
-    }).then((res) => {
-      const isBlob = blobValidate(res.data);
-      if (isBlob) {
+    }).then(async (res) => {
+      const isLogin = await blobValidate(res.data);
+      if (isLogin) {
         const blob = new Blob([res.data])
-        this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))
+        this.saveAs(blob, decodeURI(res.headers['download-filename']))
       } else {
         this.printErrMsg(res.data);
       }
@@ -49,9 +49,9 @@ export default {
       url: url,
       responseType: 'blob',
       headers: { 'Authorization': 'Bearer ' + getToken() }
-    }).then((res) => {
-      const isBlob = blobValidate(res.data);
-      if (isBlob) {
+    }).then(async (res) => {
+      const isLogin = await blobValidate(res.data);
+      if (isLogin) {
         const blob = new Blob([res.data], { type: 'application/zip' })
         this.saveAs(blob, name)
       } else {
@@ -66,7 +66,7 @@ export default {
     const resText = await data.text();
     const rspObj = JSON.parse(resText);
     const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-    Message.error(errMsg);
+    ElMessage.error(errMsg);
   }
 }
 
diff --git a/ruoyi-ui/src/plugins/index.js b/ruoyi-ui/src/plugins/index.js
index d000f2d..47d1b41 100644
--- a/ruoyi-ui/src/plugins/index.js
+++ b/ruoyi-ui/src/plugins/index.js
@@ -4,17 +4,15 @@ import cache from './cache'
 import modal from './modal'
 import download from './download'
 
-export default {
-  install(Vue) {
-    // 页签操作
-    Vue.prototype.$tab = tab
-    // 认证对象
-    Vue.prototype.$auth = auth
-    // 缓存对象
-    Vue.prototype.$cache = cache
-    // 模态框对象
-    Vue.prototype.$modal = modal
-    // 下载文件
-    Vue.prototype.$download = download
-  }
+export default function installPlugins(app){
+  // 页签操作
+  app.config.globalProperties.$tab = tab
+  // 认证对象
+  app.config.globalProperties.$auth = auth
+  // 缓存对象
+  app.config.globalProperties.$cache = cache
+  // 模态框对象
+  app.config.globalProperties.$modal = modal
+  // 下载文件
+  app.config.globalProperties.$download = download
 }
diff --git a/ruoyi-ui/src/plugins/modal.js b/ruoyi-ui/src/plugins/modal.js
index b37ca14..b59e14d 100644
--- a/ruoyi-ui/src/plugins/modal.js
+++ b/ruoyi-ui/src/plugins/modal.js
@@ -1,59 +1,59 @@
-import { Message, MessageBox, Notification, Loading } from 'element-ui'
+import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
 
 let loadingInstance;
 
 export default {
   // 消息提示
   msg(content) {
-    Message.info(content)
+    ElMessage.info(content)
   },
   // 错误消息
   msgError(content) {
-    Message.error(content)
+    ElMessage.error(content)
   },
   // 成功消息
   msgSuccess(content) {
-    Message.success(content)
+    ElMessage.success(content)
   },
   // 警告消息
   msgWarning(content) {
-    Message.warning(content)
+    ElMessage.warning(content)
   },
   // 弹出提示
   alert(content) {
-    MessageBox.alert(content, "系统提示")
+    ElMessageBox.alert(content, "系统提示")
   },
   // 错误提示
   alertError(content) {
-    MessageBox.alert(content, "系统提示", { type: 'error' })
+    ElMessageBox.alert(content, "系统提示", { type: 'error' })
   },
   // 成功提示
   alertSuccess(content) {
-    MessageBox.alert(content, "系统提示", { type: 'success' })
+    ElMessageBox.alert(content, "系统提示", { type: 'success' })
   },
   // 警告提示
   alertWarning(content) {
-    MessageBox.alert(content, "系统提示", { type: 'warning' })
+    ElMessageBox.alert(content, "系统提示", { type: 'warning' })
   },
   // 通知提示
   notify(content) {
-    Notification.info(content)
+    ElNotification.info(content)
   },
   // 错误通知
   notifyError(content) {
-    Notification.error(content);
+    ElNotification.error(content);
   },
   // 成功通知
   notifySuccess(content) {
-    Notification.success(content)
+    ElNotification.success(content)
   },
   // 警告通知
   notifyWarning(content) {
-    Notification.warning(content)
+    ElNotification.warning(content)
   },
   // 确认窗体
   confirm(content) {
-    return MessageBox.confirm(content, "系统提示", {
+    return ElMessageBox.confirm(content, "系统提示", {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: "warning",
@@ -61,7 +61,7 @@ export default {
   },
   // 提交内容
   prompt(content) {
-    return MessageBox.prompt(content, "系统提示", {
+    return ElMessageBox.prompt(content, "系统提示", {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: "warning",
@@ -69,10 +69,9 @@ export default {
   },
   // 打开遮罩层
   loading(content) {
-    loadingInstance = Loading.service({
+    loadingInstance = ElLoading.service({
       lock: true,
       text: content,
-      spinner: "el-icon-loading",
       background: "rgba(0, 0, 0, 0.7)",
     })
   },
diff --git a/ruoyi-ui/src/plugins/tab.js b/ruoyi-ui/src/plugins/tab.js
index b029c0e..7e71a68 100644
--- a/ruoyi-ui/src/plugins/tab.js
+++ b/ruoyi-ui/src/plugins/tab.js
@@ -1,10 +1,10 @@
 import store from '@/store'
-import router from '@/router';
+import router from '@/router'
 
 export default {
   // 刷新当前tab页签
   refreshPage(obj) {
-    const { path, query, matched } = router.currentRoute;
+    const { path, query, matched } = router.currentRoute.value;
     if (obj === undefined) {
       matched.forEach((m) => {
         if (m.components && m.components.default && m.components.default.name) {
@@ -24,7 +24,7 @@ export default {
   },
   // 关闭当前tab页签，打开新页签
   closeOpenPage(obj) {
-    store.dispatch("tagsView/delView", router.currentRoute);
+    store.dispatch("tagsView/delView", router.currentRoute.value);
     if (obj !== undefined) {
       return router.push(obj);
     }
@@ -32,12 +32,8 @@ export default {
   // 关闭指定tab页签
   closePage(obj) {
     if (obj === undefined) {
-      return store.dispatch('tagsView/delView', router.currentRoute).then(({ visitedViews }) => {
-        const latestView = visitedViews.slice(-1)[0]
-        if (latestView) {
-            return router.push(latestView.fullPath)
-        }
-        return router.push('/');
+      return store.dispatch('tagsView/delView', router.currentRoute.value).then(({ lastPath }) => {
+        return router.push(lastPath || '/index');
       });
     }
     return store.dispatch('tagsView/delView', obj);
@@ -48,21 +44,19 @@ export default {
   },
   // 关闭左侧tab页签
   closeLeftPage(obj) {
-    return store.dispatch('tagsView/delLeftTags', obj || router.currentRoute);
+    return store.dispatch('tagsView/delLeftTags', obj || router.currentRoute.value);
   },
   // 关闭右侧tab页签
   closeRightPage(obj) {
-    return store.dispatch('tagsView/delRightTags', obj || router.currentRoute);
+    return store.dispatch('tagsView/delRightTags', obj || router.currentRoute.value);
   },
   // 关闭其他tab页签
   closeOtherPage(obj) {
-    return store.dispatch('tagsView/delOthersViews', obj || router.currentRoute);
+    return store.dispatch('tagsView/delOthersViews', obj || router.currentRoute.value);
   },
-  // 添加tab页签
-  openPage(title, url, params) {
-    var obj = { path: url, meta: { title: title } }
-    store.dispatch('tagsView/addView', obj);
-    return router.push({ path: url, query: params });
+  // 打开tab页签
+  openPage(url) {
+    return router.push(url);
   },
   // 修改tab页签
   updatePage(obj) {
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 446dae3..cccaf67 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -1,9 +1,4 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-/* Layout */
+import { createWebHistory, createRouter } from 'vue-router'
 import Layout from '@/layout'
 
 /**
@@ -17,8 +12,6 @@ import Layout from '@/layout'
  * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
  * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
  * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
- * roles: ['admin', 'common']       // 访问路由的角色权限
- * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
  * meta : {
     noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
     title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
@@ -37,7 +30,7 @@ export const constantRoutes = [
     children: [
       {
         path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
+        component: () => import('@/views/redirect/index.vue')
       }
     ]
   },
@@ -52,7 +45,7 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/404',
+    path: "/:pathMatch(.*)*",
     component: () => import('@/views/error/404'),
     hidden: true
   },
@@ -64,10 +57,10 @@ export const constantRoutes = [
   {
     path: '',
     component: Layout,
-    redirect: 'index',
+    redirect: '/index',
     children: [
       {
-        path: 'index',
+        path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
@@ -87,16 +80,11 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
-]
-
-// 动态路由，基于用户权限动态去加载
-export const dynamicRoutes = [
+  },
   {
     path: '/system/user-auth',
     component: Layout,
     hidden: true,
-    permissions: ['system:user:edit'],
     children: [
       {
         path: 'role/:userId(\\d+)',
@@ -110,7 +98,6 @@ export const dynamicRoutes = [
     path: '/system/role-auth',
     component: Layout,
     hidden: true,
-    permissions: ['system:role:edit'],
     children: [
       {
         path: 'user/:roleId(\\d+)',
@@ -124,7 +111,6 @@ export const dynamicRoutes = [
     path: '/system/dict-data',
     component: Layout,
     hidden: true,
-    permissions: ['system:dict:list'],
     children: [
       {
         path: 'index/:dictId(\\d+)',
@@ -138,32 +124,91 @@ export const dynamicRoutes = [
     path: '/tool/gen-edit',
     component: Layout,
     hidden: true,
-    permissions: ['tool:gen:edit'],
     children: [
       {
-        path: 'index/:tableId(\\d+)',
+        path: 'index',
         component: () => import('@/views/tool/gen/editTable'),
         name: 'GenEdit',
         meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
       }
     ]
   }
-]
+];
 
-// 防止连续点击多次路由报错
-let routerPush = Router.prototype.push;
-let routerReplace = Router.prototype.replace;
-// push
-Router.prototype.push = function push(location) {
-  return routerPush.call(this, location).catch(err => err)
-}
-// replace
-Router.prototype.replace = function push(location) {
-  return routerReplace.call(this, location).catch(err => err)
-}
+// 动态路由，基于用户权限动态去加载
+export const dynamicRoutes= [
+  {
+    path: '/system/user-auth',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:user:edit'],
+    children: [
+      {
+        path: 'role/:userId(\\d+)',
+        component: () => import('@/views/system/user/authRole.vue'),
+        name: 'AuthRole',
+        meta: { title: '分配角色', activeMenu: '/system/user', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/system/role-auth',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:role:edit'],
+    children: [
+      {
+        path: 'user/:roleId(\\d+)',
+        component: () => import('@/views/system/role/authUser.vue'),
+        name: 'AuthUser',
+        meta: { title: '分配用户', activeMenu: '/system/role', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/system/dict-data',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:dict:list'],
+    children: [
+      {
+        path: 'index/:dictId(\\d+)',
+        component: () => import('@/views/system/dict/data.vue'),
+        name: 'Data',
+        meta: { title: '字典数据', activeMenu: '/system/dict', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/tool/gen-edit',
+    component: Layout,
+    hidden: true,
+    permissions: ['tool:gen:edit'],
+    children: [
+      {
+        path: 'index/:tableId(\\d+)',
+        component: () => import('@/views/tool/gen/editTable.vue'),
+        name: 'GenEdit',
+        meta: { title: '修改生成配置', activeMenu: '/tool/gen', icon: '' }
+      }
+    ]
+  }
+];
 
-export default new Router({
-  mode: 'history', // 去掉url中的#
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
+/**
+ * 创建路由
+ */
+const router = createRouter({
+  history: createWebHistory(import.meta.env.VITE_APP_CONTEXT_PATH),
+  routes: constantRoutes,
+  // 刷新时，滚动条位置还原
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  },
+});
+
+export default router;
diff --git a/ruoyi-ui/src/settings.js b/ruoyi-ui/src/settings.js
index 6a0b09f..10e1db4 100644
--- a/ruoyi-ui/src/settings.js
+++ b/ruoyi-ui/src/settings.js
@@ -1,9 +1,12 @@
-module.exports = {
+export default {
+  /**
+   * 网页标题
+   */
+  title: import.meta.env.VITE_APP_TITLE,
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
   sideTheme: 'theme-dark',
-
   /**
    * 是否系统布局配置
    */
diff --git a/ruoyi-ui/src/store/getters.js b/ruoyi-ui/src/store/getters.js
index 8adb1b6..da6ab39 100644
--- a/ruoyi-ui/src/store/getters.js
+++ b/ruoyi-ui/src/store/getters.js
@@ -2,7 +2,6 @@ const getters = {
   sidebar: state => state.app.sidebar,
   size: state => state.app.size,
   device: state => state.app.device,
-  dict: state => state.dict.dict,
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
diff --git a/ruoyi-ui/src/store/index.js b/ruoyi-ui/src/store/index.js
index 97aaef8..f66972b 100644
--- a/ruoyi-ui/src/store/index.js
+++ b/ruoyi-ui/src/store/index.js
@@ -1,25 +1,21 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import app from './modules/app'
-import dict from './modules/dict'
 import user from './modules/user'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
 
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
+const store = createStore({
   modules: {
     app,
-    dict,
     user,
     tagsView,
     permission,
     settings
   },
   getters
-})
+});
+
 
 export default store
diff --git a/ruoyi-ui/src/store/modules/permission.js b/ruoyi-ui/src/store/modules/permission.js
index 2287665..c6fd30d 100644
--- a/ruoyi-ui/src/store/modules/permission.js
+++ b/ruoyi-ui/src/store/modules/permission.js
@@ -1,10 +1,12 @@
-import auth from '@/plugins/auth'
 import router, { constantRoutes, dynamicRoutes } from '@/router'
 import { getRouters } from '@/api/menu'
 import Layout from '@/layout/index'
 import ParentView from '@/components/ParentView'
 import InnerLink from '@/layout/components/InnerLink'
 
+// 匹配views里面所有的.vue文件
+const modules = import.meta.glob('./../../views/**/*.vue')
+
 const permission = {
   state: {
     routes: [],
@@ -36,15 +38,14 @@ const permission = {
         getRouters().then(res => {
           const sdata = JSON.parse(JSON.stringify(res.data))
           const rdata = JSON.parse(JSON.stringify(res.data))
+          const defaultData = JSON.parse(JSON.stringify(res.data))
           const sidebarRoutes = filterAsyncRouter(sdata)
           const rewriteRoutes = filterAsyncRouter(rdata, false, true)
-          const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
-          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
-          router.addRoutes(asyncRoutes);
+          const defaultRoutes = filterAsyncRouter(defaultData)
           commit('SET_ROUTES', rewriteRoutes)
           commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
           commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
+          commit('SET_TOPBAR_ROUTES', defaultRoutes)
           resolve(rewriteRoutes)
         })
       })
@@ -122,12 +123,14 @@ export function filterDynamicRoutes(routes) {
 }
 
 export const loadView = (view) => {
-  if (process.env.NODE_ENV === 'development') {
-    return (resolve) => require([`@/views/${view}`], resolve)
-  } else {
-    // 使用 import 实现生产环境的路由懒加载
-    return () => import(`@/views/${view}`)
+  let res;
+  for (const path in modules) {
+    const dir = path.split('views/')[1].split('.vue')[0];
+    if (dir === view) {
+      res = () => modules[path]();
+    }
   }
+  return res;
 }
 
 export default permission
diff --git a/ruoyi-ui/src/store/modules/user.js b/ruoyi-ui/src/store/modules/user.js
index 4f20423..d74ae18 100644
--- a/ruoyi-ui/src/store/modules/user.js
+++ b/ruoyi-ui/src/store/modules/user.js
@@ -1,5 +1,6 @@
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import defAva from '@/assets/images/profile.jpg'
 
 const user = {
   state: {
@@ -52,7 +53,7 @@ const user = {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
           const user = res.user
-          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
+          const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
           if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
             commit('SET_ROLES', res.roles)
             commit('SET_PERMISSIONS', res.permissions)
diff --git a/ruoyi-ui/src/utils/dict.js b/ruoyi-ui/src/utils/dict.js
new file mode 100644
index 0000000..373da05
--- /dev/null
+++ b/ruoyi-ui/src/utils/dict.js
@@ -0,0 +1,17 @@
+import { getDicts } from '@/api/system/dict/data'
+
+/**
+ * 获取字典数据
+ */
+export function useDict(...args) {
+  const res = ref({});
+  return (() => {
+    args.forEach((d, index) => {
+      res.value[d] = [];
+      getDicts(d).then(resp => {
+        res.value[d] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass }))
+      })
+    })
+    return toRefs(res.value);
+  })()
+}
\ No newline at end of file
diff --git a/ruoyi-ui/src/utils/dict/Dict.js b/ruoyi-ui/src/utils/dict/Dict.js
deleted file mode 100644
index 104bd6e..0000000
--- a/ruoyi-ui/src/utils/dict/Dict.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import Vue from 'vue'
-import { mergeRecursive } from "@/utils/ruoyi";
-import DictMeta from './DictMeta'
-import DictData from './DictData'
-
-const DEFAULT_DICT_OPTIONS = {
-  types: [],
-}
-
-/**
- * @classdesc 字典
- * @property {Object} label 标签对象，内部属性名为字典类型名称
- * @property {Object} dict 字段数组，内部属性名为字典类型名称
- * @property {Array.<DictMeta>} _dictMetas 字典元数据数组
- */
-export default class Dict {
-  constructor() {
-    this.owner = null
-    this.label = {}
-    this.type = {}
-  }
-
-  init(options) {
-    if (options instanceof Array) {
-      options = { types: options }
-    }
-    const opts = mergeRecursive(DEFAULT_DICT_OPTIONS, options)
-    if (opts.types === undefined) {
-      throw new Error('need dict types')
-    }
-    const ps = []
-    this._dictMetas = opts.types.map(t => DictMeta.parse(t))
-    this._dictMetas.forEach(dictMeta => {
-      const type = dictMeta.type
-      Vue.set(this.label, type, {})
-      Vue.set(this.type, type, [])
-      if (dictMeta.lazy) {
-        return
-      }
-      ps.push(loadDict(this, dictMeta))
-    })
-    return Promise.all(ps)
-  }
-
-  /**
-   * 重新加载字典
-   * @param {String} type 字典类型
-   */
-  reloadDict(type) {
-    const dictMeta = this._dictMetas.find(e => e.type === type)
-    if (dictMeta === undefined) {
-      return Promise.reject(`the dict meta of ${type} was not found`)
-    }
-    return loadDict(this, dictMeta)
-  }
-}
-
-/**
- * 加载字典
- * @param {Dict} dict 字典
- * @param {DictMeta} dictMeta 字典元数据
- * @returns {Promise}
- */
-function loadDict(dict, dictMeta) {
-  return dictMeta.request(dictMeta)
-    .then(response => {
-      const type = dictMeta.type
-      let dicts = dictMeta.responseConverter(response, dictMeta)
-      if (!(dicts instanceof Array)) {
-        console.error('the return of responseConverter must be Array.<DictData>')
-        dicts = []
-      } else if (dicts.filter(d => d instanceof DictData).length !== dicts.length) {
-        console.error('the type of elements in dicts must be DictData')
-        dicts = []
-      }
-      dict.type[type].splice(0, Number.MAX_SAFE_INTEGER, ...dicts)
-      dicts.forEach(d => {
-        Vue.set(dict.label[type], d.value, d.label)
-      })
-      return dicts
-    })
-}
diff --git a/ruoyi-ui/src/utils/dict/DictConverter.js b/ruoyi-ui/src/utils/dict/DictConverter.js
deleted file mode 100644
index 0cf5df8..0000000
--- a/ruoyi-ui/src/utils/dict/DictConverter.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import DictOptions from './DictOptions'
-import DictData from './DictData'
-
-export default function(dict, dictMeta) {
-  const label = determineDictField(dict, dictMeta.labelField, ...DictOptions.DEFAULT_LABEL_FIELDS)
-  const value = determineDictField(dict, dictMeta.valueField, ...DictOptions.DEFAULT_VALUE_FIELDS)
-  return new DictData(dict[label], dict[value], dict)
-}
-
-/**
- * 确定字典字段
- * @param {DictData} dict
- * @param  {...String} fields
- */
-function determineDictField(dict, ...fields) {
-  return fields.find(f => Object.prototype.hasOwnProperty.call(dict, f))
-}
diff --git a/ruoyi-ui/src/utils/dict/DictData.js b/ruoyi-ui/src/utils/dict/DictData.js
deleted file mode 100644
index afc763e..0000000
--- a/ruoyi-ui/src/utils/dict/DictData.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @classdesc 字典数据
- * @property {String} label 标签
- * @property {*} value 标签
- * @property {Object} raw 原始数据
- */
-export default class DictData {
-  constructor(label, value, raw) {
-    this.label = label
-    this.value = value
-    this.raw = raw
-  }
-}
diff --git a/ruoyi-ui/src/utils/dict/DictMeta.js b/ruoyi-ui/src/utils/dict/DictMeta.js
deleted file mode 100644
index 9779daa..0000000
--- a/ruoyi-ui/src/utils/dict/DictMeta.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mergeRecursive } from "@/utils/ruoyi";
-import DictOptions from './DictOptions'
-
-/**
- * @classdesc 字典元数据
- * @property {String} type 类型
- * @property {Function} request 请求
- * @property {String} label 标签字段
- * @property {String} value 值字段
- */
-export default class DictMeta {
-  constructor(options) {
-    this.type = options.type
-    this.request = options.request
-    this.responseConverter = options.responseConverter
-    this.labelField = options.labelField
-    this.valueField = options.valueField
-    this.lazy = options.lazy === true
-  }
-}
-
-
-/**
- * 解析字典元数据
- * @param {Object} options
- * @returns {DictMeta}
- */
-DictMeta.parse= function(options) {
-  let opts = null
-  if (typeof options === 'string') {
-    opts = DictOptions.metas[options] || {}
-    opts.type = options
-  } else if (typeof options === 'object') {
-    opts = options
-  }
-  opts = mergeRecursive(DictOptions.metas['*'], opts)
-  return new DictMeta(opts)
-}
diff --git a/ruoyi-ui/src/utils/dict/DictOptions.js b/ruoyi-ui/src/utils/dict/DictOptions.js
deleted file mode 100644
index 338a94e..0000000
--- a/ruoyi-ui/src/utils/dict/DictOptions.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { mergeRecursive } from "@/utils/ruoyi";
-import dictConverter from './DictConverter'
-
-export const options = {
-  metas: {
-    '*': {
-      /**
-       * 字典请求，方法签名为function(dictMeta: DictMeta): Promise
-       */
-      request: (dictMeta) => {
-        console.log(`load dict ${dictMeta.type}`)
-        return Promise.resolve([])
-      },
-      /**
-       * 字典响应数据转换器，方法签名为function(response: Object, dictMeta: DictMeta): DictData
-       */
-      responseConverter,
-      labelField: 'label',
-      valueField: 'value',
-    },
-  },
-  /**
-   * 默认标签字段
-   */
-  DEFAULT_LABEL_FIELDS: ['label', 'name', 'title'],
-  /**
-   * 默认值字段
-   */
-  DEFAULT_VALUE_FIELDS: ['value', 'id', 'uid', 'key'],
-}
-
-/**
- * 映射字典
- * @param {Object} response 字典数据
- * @param {DictMeta} dictMeta 字典元数据
- * @returns {DictData}
- */
-function responseConverter(response, dictMeta) {
-  const dicts = response.content instanceof Array ? response.content : response
-  if (dicts === undefined) {
-    console.warn(`no dict data of "${dictMeta.type}" found in the response`)
-    return []
-  }
-  return dicts.map(d => dictConverter(d, dictMeta))
-}
-
-export function mergeOptions(src) {
-  mergeRecursive(options, src)
-}
-
-export default options
diff --git a/ruoyi-ui/src/utils/dict/index.js b/ruoyi-ui/src/utils/dict/index.js
deleted file mode 100644
index 215eb9e..0000000
--- a/ruoyi-ui/src/utils/dict/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Dict from './Dict'
-import { mergeOptions } from './DictOptions'
-
-export default function(Vue, options) {
-  mergeOptions(options)
-  Vue.mixin({
-    data() {
-      if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) {
-        return {}
-      }
-      const dict = new Dict()
-      dict.owner = this
-      return {
-        dict
-      }
-    },
-    created() {
-      if (!(this.dict instanceof Dict)) {
-        return
-      }
-      options.onCreated && options.onCreated(this.dict)
-      this.dict.init(this.$options.dicts).then(() => {
-        options.onReady && options.onReady(this.dict)
-        this.$nextTick(() => {
-          this.$emit('dictReady', this.dict)
-          if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) {
-            this.$options.methods.onDictReady.call(this, this.dict)
-          }
-        })
-      })
-    },
-  })
-}
diff --git a/ruoyi-ui/src/utils/dynamicTitle.js b/ruoyi-ui/src/utils/dynamicTitle.js
new file mode 100644
index 0000000..768583e
--- /dev/null
+++ b/ruoyi-ui/src/utils/dynamicTitle.js
@@ -0,0 +1,13 @@
+import store from '@/store'
+import defaultSettings from '@/settings'
+
+/**
+ * 动态修改标题
+ */
+export function useDynamicTitle() {
+  if (store.state.settings.dynamicTitle) {
+    document.title = store.state.settings.title + ' - ' + defaultSettings.title;
+  } else {
+    document.title = defaultSettings.title;
+  }
+}
\ No newline at end of file
diff --git a/ruoyi-ui/src/utils/index.js b/ruoyi-ui/src/utils/index.js
index 4e65504..b686edd 100644
--- a/ruoyi-ui/src/utils/index.js
+++ b/ruoyi-ui/src/utils/index.js
@@ -1,16 +1,16 @@
-import { parseTime } from './ruoyi'
+import { parseTime } from '@/ruoyi'
 
 /**
  * 表格时间格式化
  */
 export function formatDate(cellValue) {
   if (cellValue == null || cellValue == "") return "";
-  var date = new Date(cellValue) 
+  var date = new Date(cellValue)
   var year = date.getFullYear()
   var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
-  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
-  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
+  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
   var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
   return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
 }
@@ -330,7 +330,7 @@ export function makeMap(str, expectsLowerCase) {
     ? val => map[val.toLowerCase()]
     : val => map[val]
 }
- 
+
 export const exportDefault = 'export default '
 
 export const beautifierConf = {
@@ -387,4 +387,4 @@ export function camelCase(str) {
 export function isNumberStr(str) {
   return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
 }
- 
+
diff --git a/ruoyi-ui/src/utils/request.js b/ruoyi-ui/src/utils/request.js
index 8797e3f..838de7e 100644
--- a/ruoyi-ui/src/utils/request.js
+++ b/ruoyi-ui/src/utils/request.js
@@ -1,21 +1,21 @@
 import axios from 'axios'
-import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
-import { tansParams, blobValidate } from "@/utils/ruoyi";
+import { tansParams, blobValidate } from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
 
 let downloadLoadingInstance;
 // 是否显示重新登录
-export let isRelogin = { show: false };
+let isReloginShow;
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: process.env.VUE_APP_BASE_API,
+  baseURL: import.meta.env.VITE_APP_BASE_API,
   // 超时
   timeout: 10000
 })
@@ -46,10 +46,10 @@ service.interceptors.request.use(config => {
     if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
       cache.session.setJSON('sessionObj', requestObj)
     } else {
-      const s_url = sessionObj.url;                  // 请求地址
-      const s_data = sessionObj.data;                // 请求数据
-      const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+      const s_url = sessionObj.url;                // 请求地址
+      const s_data = sessionObj.data;              // 请求数据
+      const s_time = sessionObj.time;              // 请求时间
+      const interval = 1000;                       // 间隔时间(ms)，小于此时间视为重复提交
       if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
         const message = '数据正在处理，请勿重复提交';
         console.warn(`[${s_url}]: ` + message)
@@ -61,8 +61,7 @@ service.interceptors.request.use(config => {
   }
   return config
 }, error => {
-    console.log(error)
-    Promise.reject(error)
+  Promise.reject(error)
 })
 
 // 响应拦截器
@@ -72,73 +71,84 @@ service.interceptors.response.use(res => {
     // 获取错误信息
     const msg = errorCode[code] || res.data.msg || errorCode['default']
     // 二进制数据则直接返回
-    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
+    if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){
       return res.data
     }
     if (code === 401) {
-      if (!isRelogin.show) {
-        isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-          isRelogin.show = false;
+      if (!isReloginShow) {
+        isReloginShow = true;
+        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+            confirmButtonText: '重新登录',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
+          isReloginShow = false;
           store.dispatch('LogOut').then(() => {
-            location.href = '/index';
+            location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
           })
-      }).catch(() => {
-        isRelogin.show = false;
-      });
-    }
+        }).catch(() => {
+          isReloginShow = false;
+        });
+      }
       return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
     } else if (code === 500) {
-      Message({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
-    } else if (code === 601) {
-      Message({ message: msg, type: 'warning' })
-      return Promise.reject('error')
+      ElMessage({
+        message: msg,
+        type: 'error'
+      });
+      return Promise.reject(new Error(msg));
     } else if (code !== 200) {
-      Notification.error({ title: msg })
+      ElNotification.error({
+        title: msg
+      })
       return Promise.reject('error')
     } else {
-      return res.data
+      return  Promise.resolve(res.data)
     }
   },
   error => {
-    console.log('err' + error)
     let { message } = error;
     if (message == "Network Error") {
       message = "后端接口连接异常";
-    } else if (message.includes("timeout")) {
+    }
+    else if (message.includes("timeout")) {
       message = "系统接口请求超时";
-    } else if (message.includes("Request failed with status code")) {
+    }
+    else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    Message({ message: message, type: 'error', duration: 5 * 1000 })
+    ElMessage({
+      message: message,
+      type: 'error',
+      duration: 5 * 1000
+    })
     return Promise.reject(error)
   }
 )
 
 // 通用下载方法
-export function download(url, params, filename, config) {
-  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+export function download(url, params, filename) {
+  downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
   return service.post(url, params, {
     transformRequest: [(params) => { return tansParams(params) }],
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    responseType: 'blob',
-    ...config
+    responseType: 'blob'
   }).then(async (data) => {
-    const isBlob = blobValidate(data);
-    if (isBlob) {
+    const isLogin = await blobValidate(data);
+    if (isLogin) {
       const blob = new Blob([data])
       saveAs(blob, filename)
     } else {
       const resText = await data.text();
       const rspObj = JSON.parse(resText);
       const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      Message.error(errMsg);
+      ElMessage.error(errMsg);
     }
     downloadLoadingInstance.close();
   }).catch((r) => {
     console.error(r)
-    Message.error('下载文件出现错误，请联系管理员！')
+    ElMessage.error('下载文件出现错误，请联系管理员！')
     downloadLoadingInstance.close();
   })
 }
diff --git a/ruoyi-ui/src/utils/ruoyi.js b/ruoyi-ui/src/utils/ruoyi.js
index 44bf9c4..7b47355 100644
--- a/ruoyi-ui/src/utils/ruoyi.js
+++ b/ruoyi-ui/src/utils/ruoyi.js
@@ -227,7 +227,28 @@ export function tansParams(params) {
   return result
 }
 
-// 验证是否为blob格式
-export function blobValidate(data) {
-  return data.type !== 'application/json'
+// 返回项目路径
+export function getNormalPath(p) {
+  if (p.length === 0 || !p || p == 'undefined') {
+    return p
+  };
+  let res = p.replace('//', '/')
+  if (res[res.length - 1] === '/') {
+    return res.slice(0, res.length - 1)
+  }
+  return res;
+}
+
+// 验证是否为blob格式
+// export function blobValidate(data) {
+//   return data.type !== 'application/json'
+// }
+export async function blobValidate(data) {
+  try {
+    const text = await data.text();
+    JSON.parse(text);
+    return false;
+  } catch (error) {
+    return true;
+  }
 }
diff --git a/ruoyi-ui/src/utils/validate.js b/ruoyi-ui/src/utils/validate.js
index adfa254..b5a640a 100644
--- a/ruoyi-ui/src/utils/validate.js
+++ b/ruoyi-ui/src/utils/validate.js
@@ -1,3 +1,12 @@
+/**
+ * 判断url是否是http或https
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isHttp(url) {
+  return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+}
+
 /**
  * @param {string} path
  * @returns {Boolean}
diff --git a/ruoyi-ui/src/views/dashboard/BarChart.vue b/ruoyi-ui/src/views/dashboard/BarChart.vue
deleted file mode 100644
index cd33d2d..0000000
--- a/ruoyi-ui/src/views/dashboard/BarChart.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
-          }
-        }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          }
-        }],
-        series: [{
-          name: 'pageA',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageB',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageC',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }]
-      })
-    }
-  }
-}
-</script>
diff --git a/ruoyi-ui/src/views/dashboard/LineChart.vue b/ruoyi-ui/src/views/dashboard/LineChart.vue
deleted file mode 100644
index ddd1063..0000000
--- a/ruoyi-ui/src/views/dashboard/LineChart.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    chartData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false
-          }
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
-    }
-  }
-}
-</script>
diff --git a/ruoyi-ui/src/views/dashboard/PanelGroup.vue b/ruoyi-ui/src/views/dashboard/PanelGroup.vue
deleted file mode 100644
index 1a1081f..0000000
--- a/ruoyi-ui/src/views/dashboard/PanelGroup.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-  <el-row :gutter="40" class="panel-group">
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
-        <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            访客
-          </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            消息
-          </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
-        <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            金额
-          </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            订单
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import CountTo from 'vue-count-to'
-
-export default {
-  components: {
-    CountTo
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.$emit('handleSetLineChartData', type)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.panel-group {
-  margin-top: 18px;
-
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
-
-  .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-      }
-    }
-  }
-}
-
-@media (max-width:550px) {
-  .card-panel-description {
-    display: none;
-  }
-
-  .card-panel-icon-wrapper {
-    float: none !important;
-    width: 100%;
-    height: 100%;
-    margin: 0 !important;
-
-    .svg-icon {
-      display: block;
-      margin: 14px auto !important;
-      float: none !important;
-    }
-  }
-}
-</style>
diff --git a/ruoyi-ui/src/views/dashboard/PieChart.vue b/ruoyi-ui/src/views/dashboard/PieChart.vue
deleted file mode 100644
index c360057..0000000
--- a/ruoyi-ui/src/views/dashboard/PieChart.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
-        },
-        series: [
-          {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
-            radius: [15, 95],
-            center: ['50%', '38%'],
-            data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
-            ],
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
-      })
-    }
-  }
-}
-</script>
diff --git a/ruoyi-ui/src/views/dashboard/RaddarChart.vue b/ruoyi-ui/src/views/dashboard/RaddarChart.vue
deleted file mode 100644
index b1790ca..0000000
--- a/ruoyi-ui/src/views/dashboard/RaddarChart.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 3000
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        radar: {
-          radius: '66%',
-          center: ['50%', '42%'],
-          splitNumber: 8,
-          splitArea: {
-            areaStyle: {
-              color: 'rgba(127,95,132,.3)',
-              opacity: 1,
-              shadowBlur: 45,
-              shadowColor: 'rgba(0,0,0,.5)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 15
-            }
-          },
-          indicator: [
-            { name: 'Sales', max: 10000 },
-            { name: 'Administration', max: 20000 },
-            { name: 'Information Techology', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
-            { name: 'Development', max: 20000 },
-            { name: 'Marketing', max: 20000 }
-          ]
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
-        },
-        series: [{
-          type: 'radar',
-          symbolSize: 0,
-          areaStyle: {
-            normal: {
-              shadowBlur: 13,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1
-            }
-          },
-          data: [
-            {
-              value: [5000, 7000, 12000, 11000, 15000, 14000],
-              name: 'Allocated Budget'
-            },
-            {
-              value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
-            },
-            {
-              value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
-            }
-          ],
-          animationDuration: animationDuration
-        }]
-      })
-    }
-  }
-}
-</script>
diff --git a/ruoyi-ui/src/views/dashboard/mixins/resize.js b/ruoyi-ui/src/views/dashboard/mixins/resize.js
deleted file mode 100644
index b1e76e9..0000000
--- a/ruoyi-ui/src/views/dashboard/mixins/resize.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { debounce } from '@/utils'
-
-export default {
-  data() {
-    return {
-      $_sidebarElm: null,
-      $_resizeHandler: null
-    }
-  },
-  mounted() {
-    this.initListener()
-  },
-  activated() {
-    if (!this.$_resizeHandler) {
-      // avoid duplication init
-      this.initListener()
-    }
-
-    // when keep-alive chart activated, auto resize
-    this.resize()
-  },
-  beforeDestroy() {
-    this.destroyListener()
-  },
-  deactivated() {
-    this.destroyListener()
-  },
-  methods: {
-    // use $_ for mixins properties
-    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.$_resizeHandler()
-      }
-    },
-    initListener() {
-      this.$_resizeHandler = debounce(() => {
-        this.resize()
-      }, 100)
-      window.addEventListener('resize', this.$_resizeHandler)
-
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    destroyListener() {
-      window.removeEventListener('resize', this.$_resizeHandler)
-      this.$_resizeHandler = null
-
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    resize() {
-      const { chart } = this
-      chart && chart.resize()
-    }
-  }
-}
diff --git a/ruoyi-ui/src/views/demo/customer/index.vue b/ruoyi-ui/src/views/demo/customer/index.vue
index 70a88a0..0f11545 100644
--- a/ruoyi-ui/src/views/demo/customer/index.vue
+++ b/ruoyi-ui/src/views/demo/customer/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryFormRef"  :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="客户姓名" prop="customerName">
         <el-input
           v-model="queryParams.customerName"
@@ -20,7 +20,7 @@
       <el-form-item label="客户性别" prop="sex">
         <el-select v-model="queryParams.sex" placeholder="请选择客户性别" clearable>
           <el-option
-            v-for="dict in dict.type.sys_user_sex"
+            v-for="dict in sys_user_sex"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -31,13 +31,14 @@
         <el-date-picker clearable
           v-model="queryParams.birthday"
           type="date"
-          value-format="yyyy-MM-dd"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
           placeholder="请选择客户生日">
         </el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -46,8 +47,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['demo:customer:add']"
         >新增</el-button>
@@ -56,8 +56,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['demo:customer:edit']"
@@ -67,8 +66,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['demo:customer:remove']"
@@ -78,13 +76,12 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['demo:customer:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar  v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
@@ -93,47 +90,45 @@
       <el-table-column label="客户姓名" align="center" prop="customerName" />
       <el-table-column label="手机号码" align="center" prop="phonenumber" />
       <el-table-column label="客户性别" align="center" prop="sex">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
+        <template #default="scope">
+          <dict-tag :options="sys_user_sex" :value="scope.row.sex"/>
         </template>
       </el-table-column>
       <el-table-column label="客户生日" align="center" prop="birthday" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="客户描述" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['demo:customer:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['demo:customer:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改客户主表(mb)对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="customerRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="客户姓名" prop="customerName">
           <el-input v-model="form.customerName" placeholder="请输入客户姓名" />
         </el-form-item>
@@ -143,7 +138,7 @@
         <el-form-item label="客户性别" prop="sex">
           <el-select v-model="form.sex" placeholder="请选择客户性别">
             <el-option
-              v-for="dict in dict.type.sys_user_sex"
+              v-for="dict in sys_user_sex"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
@@ -154,7 +149,8 @@
           <el-date-picker clearable
             v-model="form.birthday"
             type="date"
-            value-format="yyyy-MM-dd"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
             placeholder="请选择客户生日">
           </el-date-picker>
         </el-form-item>
@@ -164,40 +160,40 @@
         <el-divider content-position="center">商品子信息</el-divider>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDemoGoods">添加</el-button>
+            <el-button type="primary" icon="Plus"  @click="handleAddDemoGoods">添加</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteDemoGoods">删除</el-button>
+            <el-button type="danger" icon="Delete"  @click="handleDeleteDemoGoods">删除</el-button>
           </el-col>
         </el-row>
         <el-table :data="demoGoodsList" :row-class-name="rowDemoGoodsIndex" @selection-change="handleDemoGoodsSelectionChange" ref="demoGoods">
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column label="序号" align="center" prop="index" width="50"/>
           <el-table-column label="商品名称" prop="name" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.name" placeholder="请输入商品名称" />
             </template>
           </el-table-column>
           <el-table-column label="商品重量" prop="weight" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.weight" placeholder="请输入商品重量" />
             </template>
           </el-table-column>
           <el-table-column label="商品价格" prop="price" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.price" placeholder="请输入商品价格" />
             </template>
           </el-table-column>
           <el-table-column label="商品时间" prop="date" width="240">
-            <template slot-scope="scope">
-              <el-date-picker clearable v-model="scope.row.date" type="date" value-format="yyyy-MM-dd" placeholder="请选择商品时间" />
+            <template #default="scope">
+              <el-date-picker clearable v-model="scope.row.date" type="date" value-format="YYYY-MM-DD" placeholder="请选择商品时间" />
             </template>
           </el-table-column>
           <el-table-column label="商品种类" prop="type" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.type" placeholder="请选择商品种类">
                 <el-option
-                  v-for="dict in dict.type.sys_goods_type"
+                  v-for="dict in sys_goods_type"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
@@ -207,191 +203,196 @@
           </el-table-column>
         </el-table>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
 import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/demo/customer";
+const { proxy } = getCurrentInstance();
+const {sys_goods_type, sys_user_sex } = proxy.useDict('sys_goods_type', 'sys_user_sex');
 
-export default {
-  name: "Customer",
-  dicts: ['sys_goods_type', 'sys_user_sex'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 子表选中数据
-      checkedDemoGoods: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 客户主表(mb)表格数据
-      customerList: [],
-      // 商品子表格数据
-      demoGoodsList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        customerName: null,
-        phonenumber: null,
-        sex: null,
-        birthday: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      }
-    };
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref([]);
+// 子表选中数据
+const checkedDemoGoods= ref([])
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 总条数
+const total = ref(0);
+// 是否显示弹出层
+const open = ref(false);
+// 弹出层标题
+const title = ref("");
+// 显示搜索条件
+const showSearch = ref(true);
+// 客户主表(mb)表格数据
+const customerList = ref([]);
+// 商品子表格数据
+const demoGoodsList = ref([]);
+
+const data = reactive({
+  // 表单参数
+  form: {},
+  // 查询参数
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    customerName: undefined,
+    phonenumber: undefined,
+    sex: undefined,
+    birthday: undefined
   },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询客户主表(mb)列表 */
-    getList() {
-      this.loading = true;
-      listCustomer(this.queryParams).then(response => {
-        this.customerList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        customerId: null,
-        customerName: null,
-        phonenumber: null,
-        sex: null,
-        birthday: null,
-        remark: null
-      };
-      this.demoGoodsList = [];
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.customerId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加客户主表(mb)";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const customerId = row.customerId || this.ids
-      getCustomer(customerId).then(response => {
-        this.form = response.data;
-        this.demoGoodsList = response.data.demoGoodsList;
-        this.open = true;
-        this.title = "修改客户主表(mb)";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.form.demoGoodsList = this.demoGoodsList;
-          if (this.form.customerId != null) {
-            updateCustomer(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addCustomer(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const customerIds = row.customerId || this.ids;
-      this.$modal.confirm('是否确认删除客户主表(mb)编号为"' + customerIds + '"的数据项？').then(function() {
-        return delCustomer(customerIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-	/** 商品子序号 */
-    rowDemoGoodsIndex({ row, rowIndex }) {
-      row.index = rowIndex + 1;
-    },
-    /** 商品子添加按钮操作 */
-    handleAddDemoGoods() {
-      let obj = {};
-      obj.name = "";
-      obj.weight = "";
-      obj.price = "";
-      obj.date = "";
-      obj.type = "";
-      this.demoGoodsList.push(obj);
-    },
-    /** 商品子删除按钮操作 */
-    handleDeleteDemoGoods() {
-      if (this.checkedDemoGoods.length == 0) {
-        this.$modal.msgError("请先选择要删除的商品子数据");
+  // 表单校验
+  rules: {
+    customerName: [{ required: true, message: "客户姓名不能为空", trigger: "blur" }],
+    phonenumber: [{required: true, message: "手机号码不能为空", trigger: "blur" }],
+    sex: [{ required: true, message: "性别不能为空", trigger: "change" }],
+    birthday: [{ required: true, message: "生日不能为空", trigger: "blur" }]
+  }
+});
+
+const { form, queryParams, rules } = toRefs(data);
+
+/** 查询客户主表(mb)列表 */
+function getList() {
+  loading.value = true;
+  listCustomer(queryParams.value).then(response => {
+    customerList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+// 表单重置
+function reset() {
+  form.value = {
+    customerId: undefined,
+    customerName: undefined,
+    phonenumber: undefined,
+    sex: undefined,
+    birthday: undefined,
+    remark: undefined
+  };
+  demoGoodsList.value = [];
+  proxy.resetForm("customerRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryFormRef");
+  handleQuery();
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.customerId)
+  single.value = selection.length!==1
+  multiple.value = !selection.length
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加客户主表(mb)";
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const customerId = row.customerId || ids.value
+  getCustomer(customerId).then(response => {
+    form.value = response.data;
+    demoGoodsList.value = response.data.demoGoodsList;
+    open.value = true;
+    title.value = "修改客户主表(mb)";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const customerIds = row.customerId || ids.value;
+  proxy.$modal.confirm('是否确认删除客户主表(mb)编号为"' + customerIds + '"的数据项？').then(function() {
+    return delCustomer(customerIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["customerRef"].validate(valid => {
+    if (valid) {
+      form.value.demoGoodsList = demoGoodsList;
+      if (form.value.customerId != null) {
+        updateCustomer(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
       } else {
-        const demoGoodsList = this.demoGoodsList;
-        const checkedDemoGoods = this.checkedDemoGoods;
-        this.demoGoodsList = demoGoodsList.filter(function(item) {
-          return checkedDemoGoods.indexOf(item.index) == -1
+        addCustomer(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
         });
       }
-    },
-    /** 复选框选中数据 */
-    handleDemoGoodsSelectionChange(selection) {
-      this.checkedDemoGoods = selection.map(item => item.index)
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('demo/customer/export', {
-        ...this.queryParams
-      }, `customer_${new Date().getTime()}.xlsx`)
     }
+  });
+}
+/** 商品子序号 */
+function rowDemoGoodsIndex({ row, rowIndex }) {
+  row.index = rowIndex + 1;
+}
+/** 商品子添加按钮操作 */
+function handleAddDemoGoods() {
+  let obj = {};
+  obj.name = "";
+  obj.weight = 1;
+  obj.price = 0.0;
+  obj.date = "";
+  obj.type = "";
+  demoGoodsList.value.push(obj);
+}
+/** 商品子删除按钮操作 */
+function handleDeleteDemoGoods() {
+  if (checkedDemoGoods.value.length == 0) {
+    proxy.$modal.msgError("请先选择要删除的商品子数据");
+  } else {
+    const goodsList = demoGoodsList.value;
+    const checkedGoods = checkedDemoGoods.value;
+    demoGoodsList.value = goodsList.filter(function(item) {
+      return checkedGoods.indexOf(item.index) == -1
+    });
   }
-};
+}
+/** 复选框选中数据 */
+function handleDemoGoodsSelectionChange(selection) {
+  checkedDemoGoods.value = selection.map(item => item.index)
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('demo/customer/export', {
+    ...queryParams.value
+  }, `customer_${new Date().getTime()}.xlsx`)
+}
+
+getList();
+
 </script>
diff --git a/ruoyi-ui/src/views/demo/product/index.vue b/ruoyi-ui/src/views/demo/product/index.vue
index 34701e6..d7c01f6 100644
--- a/ruoyi-ui/src/views/demo/product/index.vue
+++ b/ruoyi-ui/src/views/demo/product/index.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="产品名称" prop="productName">
         <el-input
           v-model="queryParams.productName"
           placeholder="请输入产品名称"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="产品状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择产品状态" clearable>
           <el-option
-            v-for="dict in dict.type.sys_common_status"
+            v-for="dict in sys_common_status"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -20,8 +20,8 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -30,8 +30,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['demo:product:add']"
         >新增</el-button>
@@ -40,12 +39,11 @@
         <el-button
           type="info"
           plain
-          icon="el-icon-sort"
-          size="mini"
+          icon="Sort"
           @click="toggleExpandAll"
         >展开/折叠</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table
@@ -58,42 +56,31 @@
     >
       <el-table-column label="产品名称" align="center" prop="productName" />
       <el-table-column label="产品状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
+        <template #default="scope">
+          <dict-tag :options="sys_common_status" :value="scope.row.status"/>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['demo:product:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
-            v-hasPermi="['demo:product:add']"
-          >新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['demo:product:remove']"
-          >删除</el-button>
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['demo:product:edit']">修改</el-button>
+          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['demo:product:add']">新增</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:product:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 添加或修改产品树表（mb）对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="productRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="父产品id" prop="parentId">
-          <treeselect v-model="form.parentId" :options="productOptions" :normalizer="normalizer" placeholder="请选择父产品id" />
+          <el-tree-select
+            v-model="form.parentId"
+            :data="productOptions"
+            :props="{ value: 'productId', label: 'productName', children: 'children' }"
+            value-key="productId"
+            placeholder="请选择父产品id"
+            check-strictly
+          />
         </el-form-item>
         <el-form-item label="产品名称" prop="productName">
           <el-input v-model="form.productName" placeholder="请输入产品名称" />
@@ -104,7 +91,7 @@
         <el-form-item label="产品状态" prop="status">
           <el-select v-model="form.status" placeholder="请选择产品状态">
             <el-option
-              v-for="dict in dict.type.sys_common_status"
+              v-for="dict in sys_common_status"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
@@ -112,174 +99,159 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup name="Product">
 import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/demo/product";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
-export default {
-  name: "Product",
-  dicts: ['sys_common_status'],
-  components: {
-    Treeselect
+const { proxy } = getCurrentInstance();
+const { sys_common_status } = proxy.useDict('sys_common_status');
+
+// 树表表格数据
+const productList = ref([]);
+// 树选项
+const productOptions = ref([]);
+// 是否显示弹出层
+const open = ref(false);
+// 遮罩层
+const loading = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 弹出层标题
+const title = ref("");
+// 是否展开，默认全部展开
+const isExpandAll = ref(true);
+// 重新渲染表格状态
+const refreshTable = ref(true);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    productName: null,
+    status: null
   },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 产品树表（mb）表格数据
-      productList: [],
-      // 产品树表（mb）树选项
-      productOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 是否展开，默认全部展开
-      isExpandAll: true,
-      // 重新渲染表格状态
-      refreshTable: true,
-      // 查询参数
-      queryParams: {
-        productName: null,
-        status: null
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询产品树表（mb）列表 */
-    getList() {
-      this.loading = true;
-      listProduct(this.queryParams).then(response => {
-        this.productList = this.handleTree(response.data, "productId", "parentId");
-        this.loading = false;
-      });
-    },
-    /** 转换产品树表（mb）数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.productId,
-        label: node.productName,
-        children: node.children
-      };
-    },
-	/** 查询产品树表（mb）下拉树结构 */
-    getTreeselect() {
-      listProduct().then(response => {
-        this.productOptions = [];
-        const data = { productId: 0, productName: '顶级节点', children: [] };
-        data.children = this.handleTree(response.data, "productId", "parentId");
-        this.productOptions.push(data);
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        productId: null,
-        parentId: null,
-        productName: null,
-        orderNum: null,
-        status: null
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.reset();
-      this.getTreeselect();
-      if (row != null && row.productId) {
-        this.form.parentId = row.productId;
-      } else {
-        this.form.parentId = 0;
-      }
-      this.open = true;
-      this.title = "添加产品树表（mb）";
-    },
-    /** 展开/折叠操作 */
-    toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
-      this.$nextTick(() => {
-        this.refreshTable = true;
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      this.getTreeselect();
-      if (row != null) {
-        this.form.parentId = row.productId;
-      }
-      getProduct(row.productId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改产品树表（mb）";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.productId != null) {
-            updateProduct(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addProduct(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.$modal.confirm('是否确认删除产品树表（mb）编号为"' + row.productId + '"的数据项？').then(function() {
-        return delProduct(row.productId);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
+  rules: {
   }
-};
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询产品树表（mb）列表 */
+function getList() {
+  loading.value = true;
+  listProduct(queryParams.value).then(response => {
+    productList.value = proxy.handleTree(response.data, "productId", "parentId");
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    productId: null,
+    parentId: null,
+    productName: null,
+    orderNum: null,
+    status: null
+  };
+  proxy.resetForm("productRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 新增按钮操作 */
+async function handleAdd(row) {
+  reset();
+  await listProduct().then(response => {
+    productOptions.value = proxy.handleTree(response.data, "productId");
+  });
+  if (row != null && row.productId) {
+    form.value.parentId = row.productId;
+  } else {
+    form.value.parentId = 0;
+  }
+  open.value = true;
+  title.value = "添加产品树表（mb）";
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false;
+  isExpandAll.value = !isExpandAll.value;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset();
+  await listProduct().then(response => {
+    productOptions.value = proxy.handleTree(response.data, "productId");
+  });
+  if (row != null) {
+    form.value.parentId = row.productId;
+  }
+  getProduct(row.productId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改产品树表（mb）";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["productRef"].validate(valid => {
+    if (valid) {
+      if (form.value.productId != null) {
+        updateProduct(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addProduct(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除产品树表（mb）编号为"' + row.productId + '"的数据项？').then(function() {
+    return delProduct(row.productId);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 </script>
diff --git a/ruoyi-ui/src/views/demo/student/index.vue b/ruoyi-ui/src/views/demo/student/index.vue
index 3407e16..cff7aad 100644
--- a/ruoyi-ui/src/views/demo/student/index.vue
+++ b/ruoyi-ui/src/views/demo/student/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="学生名称" prop="studentName">
         <el-input
           v-model="queryParams.studentName"
@@ -18,8 +18,8 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -28,8 +28,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['demo:student:add']"
         >新增</el-button>
@@ -38,8 +37,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['demo:student:edit']"
@@ -49,8 +47,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['demo:student:remove']"
@@ -60,13 +57,12 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['demo:student:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
@@ -75,56 +71,54 @@
       <el-table-column label="学生名称" align="center" prop="studentName" />
       <el-table-column label="年龄" align="center" prop="studentAge" />
       <el-table-column label="爱好" align="center" prop="studentHobby">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_student_hobby" :value="scope.row.studentHobby"/>
+        <template #default="scope">
+          <dict-tag :options="sys_student_hobby" :value="scope.row.studentHobby"/>
         </template>
       </el-table-column>
       <el-table-column label="性别" align="center" prop="studentSex">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.studentSex"/>
+        <template #default="scope">
+          <dict-tag :options="sys_user_sex" :value="scope.row.studentSex"/>
         </template>
       </el-table-column>
       <el-table-column label="状态" align="center" prop="studentStatus">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_student_status" :value="scope.row.studentStatus"/>
+        <template #default="scope">
+          <dict-tag :options="sys_student_status" :value="scope.row.studentStatus" />
         </template>
       </el-table-column>
       <el-table-column label="生日" align="center" prop="studentBirthday" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.studentBirthday, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['demo:student:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['demo:student:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改学生信息单表(mb)对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="studentRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="学生名称" prop="studentName">
           <el-input v-model="form.studentName" placeholder="请输入学生名称" />
         </el-form-item>
@@ -134,7 +128,7 @@
         <el-form-item label="爱好" prop="studentHobby">
           <el-select v-model="form.studentHobby" placeholder="请选择爱好">
             <el-option
-              v-for="dict in dict.type.sys_student_hobby"
+              v-for="dict in sys_student_hobby"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
@@ -144,7 +138,7 @@
         <el-form-item label="性别" prop="studentSex">
           <el-select v-model="form.studentSex" placeholder="请选择性别">
             <el-option
-              v-for="dict in dict.type.sys_user_sex"
+              v-for="dict in sys_user_sex"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
@@ -154,7 +148,7 @@
         <el-form-item label="状态" prop="studentStatus">
           <el-radio-group v-model="form.studentStatus">
             <el-radio
-              v-for="dict in dict.type.sys_student_status"
+              v-for="dict in sys_student_status"
               :key="dict.value"
               :label="dict.value"
             >{{dict.label}}</el-radio>
@@ -164,176 +158,171 @@
           <el-date-picker clearable
             v-model="form.studentBirthday"
             type="date"
-            value-format="yyyy-MM-dd"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
             placeholder="请选择生日">
           </el-date-picker>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
 import { listStudent, getStudent, delStudent, addStudent, updateStudent } from "@/api/demo/student";
 
-export default {
-  name: "Student",
-  dicts: ['sys_user_sex', 'sys_student_status', 'sys_student_hobby'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 学生信息单表(mb)表格数据
-      studentList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        studentName: null,
-        studentAge: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        studentName: [
-          { required: true, message: "学生名称不能为空", trigger: "blur" }
-        ],
-        studentAge: [
-          { required: true, message: "年龄不能为空", trigger: "blur" }
-        ],
-        studentHobby: [
-          { required: true, message: "爱好不能为空", trigger: "change" }
-        ],
-        studentSex: [
-          { required: true, message: "性别不能为空", trigger: "change" }
-        ],
-        studentStatus: [
-          { required: true, message: "状态不能为空", trigger: "change" }
-        ],
-        studentBirthday: [
-          { required: true, message: "生日不能为空", trigger: "blur" }
-        ]
-      }
-    };
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+const { sys_student_hobby, sys_user_sex, sys_student_status } = proxy.useDict("sys_student_hobby", "sys_user_sex","sys_student_status");
+
+
+// 是否显示弹出层
+const open = ref(false);
+// 遮罩层
+const loading = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 选中数组
+const ids = ref([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 总条数
+const total = ref(0);
+// 弹出层标题
+const title = ref("");
+// 学生信息单表(mb)表格数据
+const studentList = ref([]);
+
+const data = reactive({
+  // 表单参数
+  form: {},
+  // 查询参数
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    studentName: undefined,
+    studentAge: undefined
   },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询学生信息单表(mb)列表 */
-    getList() {
-      this.loading = true;
-      listStudent(this.queryParams).then(response => {
-        this.studentList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        studentId: null,
-        studentName: null,
-        studentAge: null,
-        studentHobby: null,
-        studentSex: null,
-        studentStatus: null,
-        studentBirthday: null
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.studentId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加学生信息单表(mb)";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const studentId = row.studentId || this.ids
-      getStudent(studentId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改学生信息单表(mb)";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.studentId != null) {
-            updateStudent(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addStudent(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const studentIds = row.studentId || this.ids;
-      this.$modal.confirm('是否确认删除学生信息单表(mb)编号为"' + studentIds + '"的数据项？').then(function() {
-        return delStudent(studentIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('demo/student/export', {
-        ...this.queryParams
-      }, `student_${new Date().getTime()}.xlsx`)
-    }
+  // 表单校验
+  rules: {
+    studentName: [{ required: true, message: "学生名称不能为空", trigger: "blur" }],
+    studentAge: [{required: true, message: "年龄不能为空", trigger: "blur" }],
+    studentHobby: [{ required: true, message: "爱好不能为空", trigger: "change" }],
+    studentSex: [{ required: true, message: "性别不能为空", trigger: "change" }],
+    studentStatus: [{ required: true, message: "状态不能为空", trigger: "change" }],
+    studentBirthday: [{ required: true, message: "生日不能为空", trigger: "blur" }]
   }
-};
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询学生信息单表(mb)列表 */
+function getList() {
+  loading.value = true;
+  listStudent(queryParams.value).then(response => {
+    studentList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    studentId: undefined,
+    studentName: undefined,
+    studentAge: undefined,
+    studentHobby: undefined,
+    studentSex: undefined,
+    studentStatus: undefined,
+    studentBirthday: undefined
+  };
+  proxy.resetForm("studentRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.studentId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加学生信息单表(mb)";
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const studentId = row.studentId || ids.value;
+  getStudent(studentId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改学生信息单表(mb)";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["studentRef"].validate(valid => {
+    if (valid) {
+      if (form.value.studentId != null) {
+        updateStudent(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addStudent(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const studentIds = row.studentId || ids.value;
+  proxy.$modal.confirm('是否确认删除学生信息单表(mb)编号为"' + studentIds + '"的数据项？').then(function() {
+    return delStudent(studentIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('demo/student/export', {
+    ...queryParams.value
+  }, `student_${new Date().getTime()}.xlsx`)
+}
+
+getList();
 </script>
diff --git a/ruoyi-ui/src/views/error/401.vue b/ruoyi-ui/src/views/error/401.vue
index 448b6ec..903d899 100644
--- a/ruoyi-ui/src/views/error/401.vue
+++ b/ruoyi-ui/src/views/error/401.vue
@@ -25,24 +25,18 @@
   </div>
 </template>
 
-<script>
-import errGif from '@/assets/401_images/401.gif'
+<script setup>
+import errImage from "@/assets/401_images/401.gif";
 
-export default {
-  name: 'Page401',
-  data() {
-    return {
-      errGif: errGif + '?' + +new Date()
-    }
-  },
-  methods: {
-    back() {
-      if (this.$route.query.noGoBack) {
-        this.$router.push({ path: '/' })
-      } else {
-        this.$router.go(-1)
-      }
-    }
+let { proxy } = getCurrentInstance();
+
+const errGif = ref(errImage + "?" + +new Date());
+
+function back() {
+  if (proxy.$route.query.noGoBack) {
+    proxy.$router.push({ path: "/" });
+  } else {
+    proxy.$router.go(-1);
   }
 }
 </script>
diff --git a/ruoyi-ui/src/views/error/404.vue b/ruoyi-ui/src/views/error/404.vue
index 96f075c..d10d8b5 100644
--- a/ruoyi-ui/src/views/error/404.vue
+++ b/ruoyi-ui/src/views/error/404.vue
@@ -25,16 +25,10 @@
   </div>
 </template>
 
-<script>
-
-export default {
-  name: 'Page404',
-  computed: {
-    message() {
-      return '找不到网页！'
-    }
-  }
-}
+<script setup>
+let message = computed(() => {
+  return '找不到网页！'
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index c4873f1..008e5c2 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -41,7 +41,7 @@
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
         <h2>Ruoyi-Flex后台管理框架</h2>
         <p>
-          Ruoyi-Flex是基于RuoYi-Vue v3.8.6、RuoYi-Vue-Plus进行的扩展，集成MyBatis-Flex、JDK17、SpringBootV3、Lombok、Sa-Token、Hutool、SpringBoot Admin等优秀开源软件，准备作为未来5年软件开发的底座。本系统可以用于所有的Web应用程序，如网站管理后台、网站会员中心、CMS、CRM、OA、ERP等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
+          Ruoyi-Flex是基于RuoYi-Vue v3.8.6、RuoYi-Vue-Plus进行的扩展，集成MyBatis-Flex、JDK17、SpringBootV3、Lombok、Sa-Token、Hutool、SpringBoot Admin、PowerJob、Vue3等优秀开源软件，准备作为未来5年软件开发的底座。本系统可以用于所有的Web应用程序，如网站管理后台、网站会员中心、CMS、CRM、OA、ERP等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
         </p>
         <p>
           <b>当前版本:</b> <span>v{{ version }}</span>
@@ -52,10 +52,9 @@
         <p>
           <el-button
             type="primary"
-            size="mini"
             icon="el-icon-cloudy"
             plain
-            @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"
+            @click="goTarget('https://gitee.com/dataprince/ruoyi-flex')"
             >访问码云</el-button
           >
 
@@ -83,9 +82,9 @@
           <el-col :span="6">
             <h4>前端技术</h4>
             <ul>
-              <li>Vue</li>
+              <li>Vue3</li>
               <li>Vuex</li>
-              <li>Element-ui</li>
+              <li>Element-Plus</li>
               <li>Axios</li>
               <li>Sass</li>
               <li>Quill</li>
@@ -99,9 +98,11 @@
     <el-row :gutter="20">
       <el-col :xs="24" :sm="24" :md="12" :lg="8">
         <el-card class="update-log">
-          <div slot="header" class="clearfix">
-            <span>联系信息</span>
-          </div>
+          <template v-slot:header>
+            <div class="clearfix">
+              <span>联系信息</span>
+            </div>
+          </template>
           <div class="body">
             <p>
               <i class="el-icon-s-promotion"></i> 官网：<el-link
@@ -111,7 +112,7 @@
               >
             </p>
             <p>
-              <i class="el-icon-user-solid"></i> QQ群：<s> 100953531 </s>
+              <i class="el-icon-user-solid"></i> QQ群：<a href="https://jq.qq.com/?_wv=1027&k=EI9an8lJ" target="_blank">100953531</a>
             </p>
             <p>
               <i class="el-icon-chat-dot-round"></i> 微信：<a
@@ -131,9 +132,11 @@
       </el-col>
       <el-col :xs="24" :sm="24" :md="12" :lg="8">
         <el-card class="update-log">
-          <div slot="header" class="clearfix">
-            <span>更新日志</span>
-          </div>
+          <template v-slot:header>
+            <div class="clearfix">
+              <span>更新日志</span>
+            </div>
+          </template>
           <el-collapse accordion>
 
             <el-collapse-item title="v4.1.6 - 2023-08-26">
@@ -224,21 +227,12 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Index",
-  data() {
-    return {
-      // 版本号
-      version: "4.1.5"
-    };
-  },
-  methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
-    }
-  }
-};
+<script setup>
+const version = ref('4.1.6')
+
+function goTarget(url) {
+  window.open(url, '__blank')
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/ruoyi-ui/src/views/index_v1.vue b/ruoyi-ui/src/views/index_v1.vue
deleted file mode 100644
index d2d2ec6..0000000
--- a/ruoyi-ui/src/views/index_v1.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div class="dashboard-editor-container">
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    
-  </div>
-</template>
-
-<script>
-import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
-export default {
-  name: 'Index',
-  components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart
-  },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>
diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index 862f96e..a79b717 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
       <h3 class="title">RuoYi-Flex多租户管理系统</h3>
       <el-form-item prop="tenantId">
         <el-input
@@ -33,7 +33,7 @@
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
+      <el-form-item prop="code" v-if="captchaOnOff">
         <el-input
           v-model="loginForm.code"
           auto-complete="off"
@@ -51,7 +51,7 @@
       <el-form-item style="width:100%;">
         <el-button
           :loading="loading"
-          size="medium"
+          size="large"
           type="primary"
           style="width:100%;"
           @click.native.prevent="handleLogin"
@@ -71,106 +71,97 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {getCodeImg} from "@/api/login";
 import Cookies from "js-cookie";
-import {encrypt, decrypt} from '@/utils/jsencrypt'
+import {encrypt, decrypt} from '@/utils/jsencrypt';
 
-export default {
-  name: "Login",
-  data() {
-    return {
-      codeUrl: "",
-      loginForm: {
-        tenantId: "1",
-        username: "admin",
-        password: "admin123",
-        rememberMe: false,
-        code: "",
-        uuid: ""
-      },
-      loginRules: {
-        tenantId: [{required: true, trigger: "blur", message: "请输入您的租户编号"}],
-        username: [
-          {required: true, trigger: "blur", message: "请输入您的账号"}
-        ],
-        password: [
-          {required: true, trigger: "blur", message: "请输入您的密码"}
-        ],
-        code: [{required: true, trigger: "change", message: "请输入验证码"}]
-      },
-      loading: false,
-      // 验证码开关
-      captchaEnabled: true,
-      // 注册开关
-      register: false,
-      redirect: undefined
-    };
-  },
-  watch: {
-    $route: {
-      handler: function (route) {
-        this.redirect = route.query && route.query.redirect;
-      },
-      immediate: true
-    }
-  },
-  created() {
-    this.getCode();
-    this.getCookie();
-  },
-  methods: {
-    getCode() {
-      getCodeImg().then(res => {
-        const resData = res.data;
-        this.captchaEnabled = resData.captchaEnabled === undefined ? true : resData.captchaEnabled;
-        if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + resData.img;
-          this.loginForm.uuid = resData.uuid;
-        }
-      });
-    },
-    getCookie() {
-      const tenantId = Cookies.get("tenantId");
-      const username = Cookies.get("username");
-      const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
-      this.loginForm = {
-        tenantId: tenantId === undefined ? this.loginForm.tenantId : tenantId,
-        username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-      };
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true;
-          if (this.loginForm.rememberMe) {
-            Cookies.set("tenantId", this.loginForm.tenantId, { expires: 30 });
-            Cookies.set("username", this.loginForm.username, {expires: 30});
-            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
-            Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
-          } else {
-            Cookies.remove("tenantId");
-            Cookies.remove("username");
-            Cookies.remove("password");
-            Cookies.remove('rememberMe');
-          }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({path: this.redirect || "/"}).catch(() => {
-            });
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
-        }
-      });
-    }
-  }
+const store = useStore();
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+
+const loginForm = ref({
+  tenantId: "1",
+  username: "admin",
+  password: "admin123",
+  rememberMe: false,
+  code: "",
+  uuid: ""
+});
+
+const loginRules = {
+  tenantId: [{required: true, trigger: "blur", message: "请输入您的租户编号"}],
+  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
 };
+
+const codeUrl = ref("");
+const loading = ref(false);
+// 验证码开关
+const captchaOnOff = ref(true);
+// 注册开关
+const register = ref(false);
+const redirect = ref(undefined);
+
+function getCode() {
+  getCodeImg().then(res => {
+    const resData = res.data;
+    captchaOnOff.value = resData.captchaEnabled === undefined ? true : resData.captchaEnabled;
+    if (captchaOnOff.value) {
+      codeUrl.value = "data:image/gif;base64," + resData.img;
+      loginForm.value.uuid = resData.uuid;
+    }
+  });
+}
+
+function getCookie() {
+  const tenantId = Cookies.get("tenantId");
+  const username = Cookies.get("username");
+  const password = Cookies.get("password");
+  const rememberMe = Cookies.get("rememberMe");
+  loginForm.value = {
+    tenantId: tenantId === undefined ? loginForm.value.tenantId : tenantId,
+    username: username === undefined ? loginForm.value.username : username,
+    password: password === undefined ? loginForm.value.password : decrypt(password),
+    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+  };
+}
+
+function handleLogin() {
+  proxy.$refs.loginRef.validate(valid => {
+    if (valid) {
+      loading.value = true;
+      // 勾选了需要记住密码设置在cookie中设置记住用户明和名命
+      if (loginForm.value.rememberMe) {
+        Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 });
+        Cookies.set("username", loginForm.value.username, { expires: 30 });
+        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
+        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
+      } else {
+        // 否则移除
+        Cookies.remove("tenantId");
+        Cookies.remove("username");
+        Cookies.remove("password");
+        Cookies.remove("rememberMe");
+      }
+      // 调用action的登录方法
+      store.dispatch("Login", loginForm.value).then(() => {
+        router.push({ path: redirect.value || "/" });
+      }).catch(() => {
+        loading.value = false;
+        // 重新获取验证码
+        if (captchaOnOff.value) {
+          getCode();
+        }
+      });
+    }
+  });
+}
+
+getCode();
+getCookie();
+
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
diff --git a/ruoyi-ui/src/views/monitor/admin/index.vue b/ruoyi-ui/src/views/monitor/admin/index.vue
index 526f864..1c6058f 100644
--- a/ruoyi-ui/src/views/monitor/admin/index.vue
+++ b/ruoyi-ui/src/views/monitor/admin/index.vue
@@ -4,19 +4,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import IFrame from "@/components/iFrame/index.vue";
 
-export default {
-  name: "admin",
-  components: {IFrame},
-  data() {
-    return {
-      url: String
-    };
-  },
-  created() {
-    this.url = process.env.VUE_APP_MONITRO_ADMIN;
-  }
-};
+const url = ref(import.meta.env.VITE_APP_MONITRO_ADMIN);
+
 </script>
diff --git a/ruoyi-ui/src/views/monitor/cache/index.vue b/ruoyi-ui/src/views/monitor/cache/index.vue
index e81da2e..fb9d41c 100644
--- a/ruoyi-ui/src/views/monitor/cache/index.vue
+++ b/ruoyi-ui/src/views/monitor/cache/index.vue
@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="24" class="card-box">
         <el-card>
-          <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>
+          <template #header><span>基本信息</span></template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
             <table cellspacing="0" style="width: 100%">
               <tbody>
@@ -54,7 +54,7 @@
 
       <el-col :span="12" class="card-box">
         <el-card>
-          <div slot="header"><span><i class="el-icon-odometer"></i> 内存信息</span></div>
+          <template #header><span>命令统计</span></template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
             <div ref="usedmemory" style="height: 420px" />
           </div>
@@ -64,81 +64,67 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { getCache } from "@/api/monitor/cache";
 import * as echarts from "echarts";
 
-export default {
-  name: "Cache",
-  data() {
-    return {
-      // 统计命令信息
-      commandstats: null,
-      // 使用内存
-      usedmemory: null,
-      // cache信息
-      cache: []
-    }
-  },
-  created() {
-    this.getList();
-    this.openLoading();
-  },
-  methods: {
-    /** 查缓存询信息 */
-    getList() {
-      getCache().then((response) => {
-        this.cache = response.data;
-        this.$modal.closeLoading();
+const cache = ref([]);
+const commandstats = ref(null);
+const usedmemory = ref(null);
+const { proxy } = getCurrentInstance();
 
-        this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
-        this.commandstats.setOption({
-          tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)",
+function getList() {
+  proxy.$modal.loading("正在加载缓存监控数据，请稍候！");
+  getCache().then(response => {
+    proxy.$modal.closeLoading();
+    cache.value = response.data;
+
+    const commandstatsIntance = echarts.init(commandstats.value, "macarons");
+    commandstatsIntance.setOption({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)"
+      },
+      series: [
+        {
+          name: "命令",
+          type: "pie",
+          roseType: "radius",
+          radius: [15, 95],
+          center: ["50%", "38%"],
+          data: response.data.commandStats,
+          animationEasing: "cubicInOut",
+          animationDuration: 1000
+        }
+      ],
+    });
+
+    const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
+    usedmemoryInstance.setOption({
+      tooltip: {
+        formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
+      },
+      series: [
+        {
+          name: "峰值",
+          type: "gauge",
+          min: 0,
+          max: 1000,
+          detail: {
+            formatter: cache.value.info.used_memory_human
           },
-          series: [
+          data: [
             {
-              name: "命令",
-              type: "pie",
-              roseType: "radius",
-              radius: [15, 95],
-              center: ["50%", "38%"],
-              data: response.data.commandStats,
-              animationEasing: "cubicInOut",
-              animationDuration: 1000,
+              value: parseFloat(cache.value.info.used_memory_human),
+              name: "内存消耗"
             }
           ]
-        });
-        this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
-        this.usedmemory.setOption({
-          tooltip: {
-            formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,
-          },
-          series: [
-            {
-              name: "峰值",
-              type: "gauge",
-              min: 0,
-              max: 1000,
-              detail: {
-                formatter: this.cache.info.used_memory_human,
-              },
-              data: [
-                {
-                  value: parseFloat(this.cache.info.used_memory_human),
-                  name: "内存消耗",
-                }
-              ]
-            }
-          ]
-        });
-      });
-    },
-    // 打开加载层
-    openLoading() {
-      this.$modal.loading("正在加载缓存监控数据，请稍候！");
-    }
-  }
-};
+        }
+      ],
+    })
+  })
+}
+
+getList();
+
 </script>
diff --git a/ruoyi-ui/src/views/monitor/cache/list.vue b/ruoyi-ui/src/views/monitor/cache/list.vue
deleted file mode 100644
index 29a7c74..0000000
--- a/ruoyi-ui/src/views/monitor/cache/list.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="10">
-      <el-col :span="8">
-        <el-card style="height: calc(100vh - 125px)">
-          <div slot="header">
-            <span><i class="el-icon-collection"></i> 缓存列表</span>
-            <el-button
-              style="float: right; padding: 3px 0"
-              type="text"
-              icon="el-icon-refresh-right"
-              @click="refreshCacheNames()"
-            ></el-button>
-          </div>
-          <el-table
-            v-loading="loading"
-            :data="cacheNames"
-            :height="tableHeight"
-            highlight-current-row
-            @row-click="getCacheKeys"
-            style="width: 100%"
-          >
-            <el-table-column
-              label="序号"
-              width="60"
-              type="index"
-            ></el-table-column>
-
-            <el-table-column
-              label="缓存名称"
-              align="center"
-              prop="cacheName"
-              :show-overflow-tooltip="true"
-              :formatter="nameFormatter"
-            ></el-table-column>
-
-            <el-table-column
-              label="备注"
-              align="center"
-              prop="remark"
-              :show-overflow-tooltip="true"
-            />
-            <el-table-column
-              label="操作"
-              width="60"
-              align="center"
-              class-name="small-padding fixed-width"
-            >
-              <template slot-scope="scope">
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleClearCacheName(scope.row)"
-                ></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-
-      <el-col :span="8">
-        <el-card style="height: calc(100vh - 125px)">
-          <div slot="header">
-            <span><i class="el-icon-key"></i> 键名列表</span>
-            <el-button
-              style="float: right; padding: 3px 0"
-              type="text"
-              icon="el-icon-refresh-right"
-              @click="refreshCacheKeys()"
-            ></el-button>
-          </div>
-          <el-table
-            v-loading="subLoading"
-            :data="cacheKeys"
-            :height="tableHeight"
-            highlight-current-row
-            @row-click="handleCacheValue"
-            style="width: 100%"
-          >
-            <el-table-column
-              label="序号"
-              width="60"
-              type="index"
-            ></el-table-column>
-            <el-table-column
-              label="缓存键名"
-              align="center"
-              :show-overflow-tooltip="true"
-              :formatter="keyFormatter"
-            >
-            </el-table-column>
-            <el-table-column
-              label="操作"
-              width="60"
-              align="center"
-              class-name="small-padding fixed-width"
-            >
-              <template slot-scope="scope">
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleClearCacheKey(scope.row)"
-                ></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-
-      <el-col :span="8">
-        <el-card :bordered="false" style="height: calc(100vh - 125px)">
-          <div slot="header">
-            <span><i class="el-icon-document"></i> 缓存内容</span>
-            <el-button
-              style="float: right; padding: 3px 0"
-              type="text"
-              icon="el-icon-refresh-right"
-              @click="handleClearCacheAll()"
-              >清理全部</el-button
-            >
-          </div>
-          <el-form :model="cacheForm">
-            <el-row :gutter="32">
-              <el-col :offset="1" :span="22">
-                <el-form-item label="缓存名称:" prop="cacheName">
-                  <el-input v-model="cacheForm.cacheName" :readOnly="true" />
-                </el-form-item>
-              </el-col>
-              <el-col :offset="1" :span="22">
-                <el-form-item label="缓存键名:" prop="cacheKey">
-                  <el-input v-model="cacheForm.cacheKey" :readOnly="true" />
-                </el-form-item>
-              </el-col>
-              <el-col :offset="1" :span="22">
-                <el-form-item label="缓存内容:" prop="cacheValue">
-                  <el-input
-                    v-model="cacheForm.cacheValue"
-                    type="textarea"
-                    :rows="8"
-                    :readOnly="true"
-                  />
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache";
-
-export default {
-  name: "CacheList",
-  data() {
-    return {
-      cacheNames: [],
-      cacheKeys: [],
-      cacheForm: {},
-      loading: true,
-      subLoading: false,
-      nowCacheName: "",
-      tableHeight: window.innerHeight - 200
-    };
-  },
-  created() {
-    this.getCacheNames();
-  },
-  methods: {
-    /** 查询缓存名称列表 */
-    getCacheNames() {
-      this.loading = true;
-      listCacheName().then(response => {
-        this.cacheNames = response.data;
-        this.loading = false;
-      });
-    },
-    /** 刷新缓存名称列表 */
-    refreshCacheNames() {
-      this.getCacheNames();
-      this.$modal.msgSuccess("刷新缓存列表成功");
-    },
-    /** 清理指定名称缓存 */
-    handleClearCacheName(row) {
-      clearCacheName(row.cacheName).then(response => {
-        this.$modal.msgSuccess("清理缓存名称[" + row.cacheName + "]成功");
-        this.getCacheKeys();
-      });
-    },
-    /** 查询缓存键名列表 */
-    getCacheKeys(row) {
-      const cacheName = row !== undefined ? row.cacheName : this.nowCacheName;
-      if (cacheName === "") {
-        return;
-      }
-      this.subLoading = true;
-      listCacheKey(cacheName).then(response => {
-        this.cacheKeys = response.data;
-        this.subLoading = false;
-        this.nowCacheName = cacheName;
-      });
-    },
-    /** 刷新缓存键名列表 */
-    refreshCacheKeys() {
-      this.getCacheKeys();
-      this.$modal.msgSuccess("刷新键名列表成功");
-    },
-    /** 清理指定键名缓存 */
-    handleClearCacheKey(cacheKey) {
-      clearCacheKey(cacheKey).then(response => {
-        this.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功");
-        this.getCacheKeys();
-      });
-    },
-    /** 列表前缀去除 */
-    nameFormatter(row) {
-      return row.cacheName.replace(":", "");
-    },
-    /** 键名前缀去除 */
-    keyFormatter(cacheKey) {
-      return cacheKey.replace(this.nowCacheName, "");
-    },
-    /** 查询缓存内容详细 */
-    handleCacheValue(cacheKey) {
-      getCacheValue(this.nowCacheName, cacheKey).then(response => {
-        this.cacheForm = response.data;
-      });
-    },
-    /** 清理全部缓存 */
-    handleClearCacheAll() {
-      clearCacheAll().then(response => {
-        this.$modal.msgSuccess("清理全部缓存成功");
-      });
-    }
-  },
-};
-</script>
diff --git a/ruoyi-ui/src/views/monitor/logininfor/index.vue b/ruoyi-ui/src/views/monitor/logininfor/index.vue
index d6af834..f21eeee 100644
--- a/ruoyi-ui/src/views/monitor/logininfor/index.vue
+++ b/ruoyi-ui/src/views/monitor/logininfor/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef"  :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="登录地址" prop="ipaddr">
         <el-input
           v-model="queryParams.ipaddr"
@@ -27,7 +27,7 @@
           style="width: 240px"
         >
           <el-option
-            v-for="dict in dict.type.sys_common_status"
+            v-for="dict in sys_common_status"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -47,8 +47,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search"  @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -57,8 +57,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['monitor:logininfor:remove']"
@@ -68,8 +67,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           @click="handleClean"
           v-hasPermi="['monitor:logininfor:remove']"
         >清空</el-button>
@@ -78,8 +76,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-unlock"
-          size="mini"
+          icon="Unlock"
           :disabled="single"
           @click="handleUnlock"
           v-hasPermi="['monitor:logininfor:unlock']"
@@ -89,31 +86,30 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['monitor:logininfor:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+    <el-table ref="logininforRef" v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="访问编号" align="center" prop="infoId" />
-      <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+      <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true"  />
       <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
       <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
       <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
       <el-table-column label="操作系统" align="center" prop="os" />
       <el-table-column label="登录状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
+        <template #default="scope">
+          <dict-tag :options="sys_common_status" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="操作信息" align="center" prop="msg" :show-overflow-tooltip="true" />
-      <el-table-column label="登录日期" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
-        <template slot-scope="scope">
+      <el-table-column label="登录日期" align="center" prop="loginTime" width="180">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.loginTime) }}</span>
         </template>
       </el-table-column>
@@ -122,125 +118,120 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
   </div>
 </template>
 
-<script>
+<script setup>
 import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor";
 
-export default {
-  name: "Logininfor",
-  dicts: ['sys_common_status'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 选择用户名
-      selectName: "",
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 表格数据
-      list: [],
-      // 日期范围
-      dateRange: [],
-      // 默认排序
-      defaultSort: {prop: 'loginTime', order: 'descending'},
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        ipaddr: undefined,
-        userName: undefined,
-        status: undefined
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询登录日志列表 */
-    getList() {
-      this.loading = true;
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.list = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.queryParams.pageNum = 1;
-      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
-    },
-    /** 多选框选中数据 */
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.infoId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-      this.selectName = selection.map(item => item.userName);
-    },
-    /** 排序触发事件 */
-    handleSortChange(column, prop, order) {
-      this.queryParams.orderByColumn = column.prop;
-      this.queryParams.isAsc = column.order;
-      this.getList();
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const infoIds = row.infoId || this.ids;
-      this.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项？').then(function() {
-        return delLogininfor(infoIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 清空按钮操作 */
-    handleClean() {
-      this.$modal.confirm('是否确认清空所有登录日志数据项？').then(function() {
-        return cleanLogininfor();
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("清空成功");
-      }).catch(() => {});
-    },
-    /** 解锁按钮操作 */
-    handleUnlock() {
-      const username = this.selectName;
-      this.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function() {
-        return unlockLogininfor(username);
-      }).then(() => {
-        this.$modal.msgSuccess("用户" + username + "解锁成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('monitor/logininfor/export', {
-        ...this.queryParams
-      }, `logininfor_${new Date().getTime()}.xlsx`)
-    }
-  }
-};
+const { proxy } = getCurrentInstance();
+const { sys_common_status } = proxy.useDict("sys_common_status");
+
+// 表格数据
+const logininforList = ref([]);
+// 遮罩层
+const loading = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 选中数组
+const ids = ref([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+//选中用户
+const selectName = ref([]);
+// 总条数
+const total = ref(0);
+// 日期范围
+const dateRange = ref([]);
+// 默认排序
+const defaultSort = ref({ prop: "loginTime", order: "descending" });
+// 查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  ipaddr: undefined,
+  userName: undefined,
+  status: undefined,
+  orderByColumn: undefined,
+  isAsc: undefined
+});
+
+/** 查询登录日志列表 */
+function getList() {
+  loading.value = true;
+  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    logininforList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  //proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order);
+  handleQuery();
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.infoId);
+  multiple.value = !selection.length;
+  single.value = selection.length != 1;
+  selectName.value = selection.map(item => item.userName);
+}
+/** 排序触发事件 */
+function handleSortChange(column, prop, order) {
+  queryParams.value.orderByColumn = column.prop;
+  queryParams.value.isAsc = column.order;
+  getList();
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const infoIds = row.infoId || ids.value;
+  proxy.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function () {
+    return delLogininfor(infoIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal.confirm("是否确认清空所有登录日志数据项?").then(function () {
+    return cleanLogininfor();
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("清空成功");
+  }).catch(() => {});
+}
+/** 解锁按钮操作 */
+function handleUnlock() {
+  const username = selectName.value;
+  proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function() {
+    return unlockLogininfor(username);
+  }).then(() => {
+    proxy.$modal.msgSuccess("用户" + username + "解锁成功");
+  }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/logininfor/export", {
+    ...queryParams.value,
+  }, `logininfor_${new Date().getTime()}.xlsx`);
+}
+
+getList();
+
 </script>
 
diff --git a/ruoyi-ui/src/views/monitor/online/index.vue b/ruoyi-ui/src/views/monitor/online/index.vue
index ad613c9..e3b3432 100644
--- a/ruoyi-ui/src/views/monitor/online/index.vue
+++ b/ruoyi-ui/src/views/monitor/online/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
       <el-form-item label="登录地址" prop="ipaddr">
         <el-input
           v-model="queryParams.ipaddr"
@@ -18,39 +18,38 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search"  @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
       </el-form-item>
 
     </el-form>
     <el-table
       v-loading="loading"
-      :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
+      :data="onlineList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
       style="width: 100%;"
     >
       <el-table-column label="序号" type="index" align="center">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
         </template>
       </el-table-column>
       <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
       <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
       <el-table-column label="部门名称" align="center" prop="deptName" />
-      <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+      <el-table-column label="主机IP" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
       <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
       <el-table-column label="浏览器" align="center" prop="browser" />
       <el-table-column label="操作系统" align="center" prop="os" />
       <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.loginTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleForceLogout(scope.row)"
             v-hasPermi="['monitor:online:forceLogout']"
           >强退</el-button>
@@ -58,65 +57,58 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+    <pagination v-show="total>0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
   </div>
 </template>
 
-<script>
-import { list, forceLogout } from "@/api/monitor/online";
+<script setup>
+import { list as initData, forceLogout } from "@/api/monitor/online";
+
+const { proxy } = getCurrentInstance();
+// 表格数据
+const onlineList = ref([]);
+// 遮罩层
+const loading = ref(true);
+// 总条数
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+
+const queryParams = ref({
+  ipaddr: undefined,
+  userName: undefined
+});
+
+/** 查询登录日志列表 */
+function getList() {
+  loading.value = true;
+  initData(queryParams.value).then(response => {
+    onlineList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  pageNum.value = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryFormRef");
+  handleQuery();
+}
+/** 强退按钮操作 */
+function handleForceLogout(row) {
+  proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
+    return forceLogout(row.tokenId);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 
-export default {
-  name: "Online",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 总条数
-      total: 0,
-      // 表格数据
-      list: [],
-      pageNum: 1,
-      pageSize: 10,
-      // 查询参数
-      queryParams: {
-        ipaddr: undefined,
-        userName: undefined
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询登录日志列表 */
-    getList() {
-      this.loading = true;
-      list(this.queryParams).then(response => {
-        this.list = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 强退按钮操作 */
-    handleForceLogout(row) {
-      this.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户？').then(function() {
-        return forceLogout(row.tokenId);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("强退成功");
-      }).catch(() => {});
-    }
-  }
-};
 </script>
 
diff --git a/ruoyi-ui/src/views/monitor/operlog/index.vue b/ruoyi-ui/src/views/monitor/operlog/index.vue
index 34a3ce3..fcf3e42 100644
--- a/ruoyi-ui/src/views/monitor/operlog/index.vue
+++ b/ruoyi-ui/src/views/monitor/operlog/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef"  :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="系统模块" prop="title">
         <el-input
           v-model="queryParams.title"
@@ -27,7 +27,7 @@
           style="width: 240px"
         >
           <el-option
-            v-for="dict in dict.type.sys_oper_type"
+            v-for="dict in sys_oper_type"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -42,7 +42,7 @@
           style="width: 240px"
         >
           <el-option
-            v-for="dict in dict.type.sys_common_status"
+            v-for="dict in sys_common_status"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -62,8 +62,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search"  @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -72,8 +72,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['monitor:operlog:remove']"
@@ -83,8 +82,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           @click="handleClean"
           v-hasPermi="['monitor:operlog:remove']"
         >清空</el-button>
@@ -93,48 +91,46 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['monitor:operlog:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+    <el-table ref="operlogRef" v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
       <el-table-column type="selection" width="50" align="center" />
       <el-table-column label="日志编号" align="center" prop="operId" />
       <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
       <el-table-column label="操作类型" align="center" prop="businessType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType"/>
+        <template #default="scope">
+          <dict-tag :options="sys_oper_type" :value="scope.row.businessType"/>
         </template>
       </el-table-column>
       <el-table-column label="操作人员" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
-      <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
+      <el-table-column label="操作IP" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
       <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
       <el-table-column label="操作状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
+        <template #default="scope">
+          <dict-tag :options="sys_common_status" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="操作日期" align="center" prop="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.operTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ scope.row.costTime }}毫秒</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-view"
+            icon="View"
             @click="handleView(scope.row,scope.index)"
             v-hasPermi="['monitor:operlog:query']"
           >详细</el-button>
@@ -145,14 +141,14 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 操作日志详细 -->
     <el-dialog title="操作日志详细" :visible.sync="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
+      <el-form ref="form" :model="form" label-width="100px" >
         <el-row>
           <el-col :span="12">
             <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
@@ -197,117 +193,106 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
+import {getCurrentInstance, reactive, ref, toRefs} from "vue";
+const { proxy } = getCurrentInstance();
+const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type","sys_common_status");
 
-export default {
-  name: "Operlog",
-  dicts: ['sys_oper_type', 'sys_common_status'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 表格数据
-      list: [],
-      // 是否显示弹出层
-      open: false,
-      // 日期范围
-      dateRange: [],
-      // 默认排序
-      defaultSort: {prop: 'operTime', order: 'descending'},
-      // 表单参数
-      form: {},
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        title: undefined,
-        operName: undefined,
-        businessType: undefined,
-        status: undefined
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询登录日志 */
-    getList() {
-      this.loading = true;
-      list(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
-          this.list = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    // 操作日志类型字典翻译
-    typeFormat(row, column) {
-      return this.selectDictLabel(this.dict.type.sys_oper_type, row.businessType);
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.queryParams.pageNum = 1;
-      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
-    },
-    /** 多选框选中数据 */
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.operId)
-      this.multiple = !selection.length
-    },
-    /** 排序触发事件 */
-    handleSortChange(column, prop, order) {
-      this.queryParams.orderByColumn = column.prop;
-      this.queryParams.isAsc = column.order;
-      this.getList();
-    },
-    /** 详细按钮操作 */
-    handleView(row) {
-      this.open = true;
-      this.form = row;
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const operIds = row.operId || this.ids;
-      this.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项？').then(function() {
-        return delOperlog(operIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 清空按钮操作 */
-    handleClean() {
-      this.$modal.confirm('是否确认清空所有操作日志数据项？').then(function() {
-        return cleanOperlog();
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("清空成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('monitor/operlog/export', {
-        ...this.queryParams
-      }, `operlog_${new Date().getTime()}.xlsx`)
-    }
+const operlogList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+const defaultSort = ref({ prop: "operTime", order: "descending" });
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    title: undefined,
+    operName: undefined,
+    businessType: undefined,
+    status: undefined
   }
-};
+});
+
+const { queryParams, form } = toRefs(data);
+
+/** 查询登录日志 */
+function getList() {
+  loading.value = true;
+  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    operlogList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 操作日志类型字典翻译 */
+function typeFormat(row, column) {
+  return proxy.selectDictLabel(sys_oper_type.value, row.businessType);
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order);
+  handleQuery();
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.operId);
+  multiple.value = !selection.length;
+}
+/** 排序触发事件 */
+function handleSortChange(column, prop, order) {
+  queryParams.value.orderByColumn = column.prop;
+  queryParams.value.isAsc = column.order;
+  getList();
+}
+/** 详细按钮操作 */
+function handleView(row) {
+  open.value = true;
+  form.value = row;
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const operIds = row.operId || ids.value;
+  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
+    return delOperlog(operIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
+    return cleanOperlog();
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("清空成功");
+  }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("monitor/operlog/export",{
+    ...queryParams.value,
+  }, `operlog_${new Date().getTime()}.xlsx`);
+}
+
+getList();
+
 </script>
 
diff --git a/ruoyi-ui/src/views/monitor/powerjob/index.vue b/ruoyi-ui/src/views/monitor/powerjob/index.vue
index b2076f4..eaaf804 100644
--- a/ruoyi-ui/src/views/monitor/powerjob/index.vue
+++ b/ruoyi-ui/src/views/monitor/powerjob/index.vue
@@ -4,19 +4,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import IFrame from "@/components/iFrame/index.vue";
 
-export default {
-  name: "poweriob",
-  components: {IFrame},
-  data() {
-    return {
-      url: String
-    };
-  },
-  created() {
-    this.url = process.env.VUE_APP_POWERJOB_ADMIN;
-  }
-};
+const url = ref(import.meta.env.VITE_APP_POWERJOB_ADMIN);
+
 </script>
diff --git a/ruoyi-ui/src/views/monitor/server/index.vue b/ruoyi-ui/src/views/monitor/server/index.vue
deleted file mode 100644
index 15ffc9a..0000000
--- a/ruoyi-ui/src/views/monitor/server/index.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-row>
-      <el-col :span="12" class="card-box">
-        <el-card>
-          <div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
-              <thead>
-                <tr>
-                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="12" class="card-box">
-        <el-card>
-          <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
-              <thead>
-                <tr>
-                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="24" class="card-box">
-        <el-card>
-          <div slot="header">
-            <span><i class="el-icon-monitor"></i> 服务器信息</span>
-          </div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
-              <tbody>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="24" class="card-box">
-        <el-card>
-          <div slot="header">
-            <span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span>
-          </div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;table-layout:fixed;">
-              <tbody>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
-                </tr>
-                <tr>
-                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
-                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
-                </tr>
-                <tr>
-                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
-                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
-                </tr>
-                <tr>
-                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
-                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col :span="24" class="card-box">
-        <el-card>
-          <div slot="header">
-            <span><i class="el-icon-receiving"></i> 磁盘状态</span>
-          </div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
-              <thead>
-                <tr>
-                  <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
-                  <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
-                </tr>
-              </thead>
-              <tbody v-if="server.sysFiles">
-                <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
-                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { getServer } from "@/api/monitor/server";
-
-export default {
-  name: "Server",
-  data() {
-    return {
-      // 服务器信息
-      server: []
-    };
-  },
-  created() {
-    this.getList();
-    this.openLoading();
-  },
-  methods: {
-    /** 查询服务器信息 */
-    getList() {
-      getServer().then(response => {
-        this.server = response.data;
-        this.$modal.closeLoading();
-      });
-    },
-    // 打开加载层
-    openLoading() {
-      this.$modal.loading("正在加载服务监控数据，请稍候！");
-    }
-  }
-};
-</script>
diff --git a/ruoyi-ui/src/views/redirect/index.vue b/ruoyi-ui/src/views/redirect/index.vue
new file mode 100644
index 0000000..a469960
--- /dev/null
+++ b/ruoyi-ui/src/views/redirect/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute();
+const router = useRouter();
+const { params, query } = route
+const { path } = params
+
+router.replace({ path: '/' + path, query })
+</script>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/register.vue b/ruoyi-ui/src/views/register.vue
index 396d582..c123c8f 100644
--- a/ruoyi-ui/src/views/register.vue
+++ b/ruoyi-ui/src/views/register.vue
@@ -1,43 +1,52 @@
 <template>
   <div class="register">
-    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">若依后台管理系统</h3>
+    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
+      <h3 class="title">Ruoyi-Flex后台管理系统</h3>
       <el-form-item prop="username">
-        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+        <el-input
+          v-model="registerForm.username"
+          type="text"
+          size="large"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
         <el-input
           v-model="registerForm.password"
           type="password"
+          size="large"
           auto-complete="off"
           placeholder="密码"
-          @keyup.enter.native="handleRegister"
+          @keyup.enter="handleRegister"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
         </el-input>
       </el-form-item>
       <el-form-item prop="confirmPassword">
         <el-input
           v-model="registerForm.confirmPassword"
           type="password"
+          size="large"
           auto-complete="off"
           placeholder="确认密码"
-          @keyup.enter.native="handleRegister"
+          @keyup.enter="handleRegister"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
+      <el-form-item prop="code" v-if="captchaOnOff">
         <el-input
+          size="large"
           v-model="registerForm.code"
           auto-complete="off"
           placeholder="验证码"
           style="width: 63%"
-          @keyup.enter.native="handleRegister"
+          @keyup.enter="handleRegister"
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
         </el-input>
         <div class="register-code">
           <img :src="codeUrl" @click="getCode" class="register-code-img"/>
@@ -46,10 +55,10 @@
       <el-form-item style="width:100%;">
         <el-button
           :loading="loading"
-          size="medium"
+          size="large"
           type="primary"
           style="width:100%;"
-          @click.native.prevent="handleRegister"
+          @click.prevent="handleRegister"
         >
           <span v-if="!loading">注 册</span>
           <span v-else>注 册 中...</span>
@@ -61,91 +70,90 @@
     </el-form>
     <!--  底部  -->
     <div class="el-register-footer">
-      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
+      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ElMessageBox } from "element-plus";
 import { getCodeImg, register } from "@/api/login";
 
-export default {
-  name: "Register",
-  data() {
-    const equalToPassword = (rule, value, callback) => {
-      if (this.registerForm.password !== value) {
-        callback(new Error("两次输入的密码不一致"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      codeUrl: "",
-      registerForm: {
-        username: "",
-        password: "",
-        confirmPassword: "",
-        code: "",
-        uuid: ""
-      },
-      registerRules: {
-        username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" },
-          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
-        ],
-        confirmPassword: [
-          { required: true, trigger: "blur", message: "请再次输入您的密码" },
-          { required: true, validator: equalToPassword, trigger: "blur" }
-        ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
-      },
-      loading: false,
-      captchaEnabled: true
-    };
-  },
-  created() {
-    this.getCode();
-  },
-  methods: {
-    getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-        if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.registerForm.uuid = res.uuid;
-        }
-      });
-    },
-    handleRegister() {
-      this.$refs.registerForm.validate(valid => {
-        if (valid) {
-          this.loading = true;
-          register(this.registerForm).then(res => {
-            const username = this.registerForm.username;
-            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
-              dangerouslyUseHTMLString: true,
-              type: 'success'
-            }).then(() => {
-              this.$router.push("/login");
-            }).catch(() => {});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          })
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+
+const registerForm = ref({
+  username: "",
+  password: "",
+  confirmPassword: "",
+  code: "",
+  uuid: ""
+});
+
+const equalToPassword = (rule, value, callback) => {
+  if (registerForm.value.password !== value) {
+    callback(new Error("两次输入的密码不一致"));
+  } else {
+    callback();
+  }
+};
+
+const registerRules = {
+  username: [
+    { required: true, trigger: "blur", message: "请输入您的账号" },
+    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
+  ],
+  password: [
+    { required: true, trigger: "blur", message: "请输入您的密码" },
+    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
+  ],
+  confirmPassword: [
+    { required: true, trigger: "blur", message: "请再次输入您的密码" },
+    { required: true, validator: equalToPassword, trigger: "blur" }
+  ],
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+};
+
+const codeUrl = ref("");
+const loading = ref(false);
+const captchaOnOff = ref(true);
+
+function handleRegister() {
+  proxy.$refs.registerRef.validate(valid => {
+    if (valid) {
+      loading.value = true;
+      register(registerForm.value).then(res => {
+        const username = registerForm.value.username;
+        ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
+          dangerouslyUseHTMLString: true,
+          type: "success",
+        }).then(() => {
+          router.push("/login");
+        }).catch(() => {});
+      }).catch(() => {
+        loading.value = false;
+        if (captchaOnOff) {
+          getCode();
         }
       });
     }
-  }
-};
+  });
+}
+
+function getCode() {
+  getCodeImg().then(res => {
+    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
+    if (captchaOnOff.value) {
+      codeUrl.value = "data:image/gif;base64," + res.img;
+      registerForm.value.uuid = res.uuid;
+    }
+  });
+}
+
+getCode();
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang='scss' scoped>
 .register {
   display: flex;
   justify-content: center;
@@ -166,15 +174,15 @@ export default {
   width: 400px;
   padding: 25px 25px 5px 25px;
   .el-input {
-    height: 38px;
+    height: 40px;
     input {
-      height: 38px;
+      height: 40px;
     }
   }
   .input-icon {
     height: 39px;
     width: 14px;
-    margin-left: 2px;
+    margin-left: 0px;
   }
 }
 .register-tip {
@@ -184,7 +192,7 @@ export default {
 }
 .register-code {
   width: 33%;
-  height: 38px;
+  height: 40px;
   float: right;
   img {
     cursor: pointer;
@@ -204,6 +212,7 @@ export default {
   letter-spacing: 1px;
 }
 .register-code-img {
-  height: 38px;
+  height: 40px;
+  padding-left: 12px;
 }
 </style>
diff --git a/ruoyi-ui/src/views/system/config/index.vue b/ruoyi-ui/src/views/system/config/index.vue
index 3ab81fc..926d41b 100644
--- a/ruoyi-ui/src/views/system/config/index.vue
+++ b/ruoyi-ui/src/views/system/config/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="参数名称" prop="configName">
         <el-input
           v-model="queryParams.configName"
@@ -22,7 +22,7 @@
       <el-form-item label="系统内置" prop="configType">
         <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
           <el-option
-            v-for="dict in dict.type.sys_yes_no"
+            v-for="dict in sys_yes_no"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -41,8 +41,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search"  @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -51,8 +51,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:config:add']"
         >新增</el-button>
@@ -61,8 +60,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:config:edit']"
@@ -72,8 +70,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:config:remove']"
@@ -83,8 +80,7 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['system:config:export']"
         >导出</el-button>
@@ -93,13 +89,12 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-refresh"
-          size="mini"
+          icon="Refresh"
           @click="handleRefreshCache"
           v-hasPermi="['system:config:remove']"
         >刷新缓存</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
@@ -109,29 +104,27 @@
       <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
       <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
       <el-table-column label="系统内置" align="center" prop="configType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType"/>
+        <template #default="scope">
+          <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:config:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:config:remove']"
           >删除</el-button>
@@ -142,14 +135,14 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open"  width="500px" append-to-body>
+      <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="参数名称" prop="configName">
           <el-input v-model="form.configName" placeholder="请输入参数名称" />
         </el-form-item>
@@ -162,7 +155,7 @@
         <el-form-item label="系统内置" prop="configType">
           <el-radio-group v-model="form.configType">
             <el-radio
-              v-for="dict in dict.type.sys_yes_no"
+              v-for="dict in sys_yes_no"
               :key="dict.value"
               :label="dict.value"
             >{{dict.label}}</el-radio>
@@ -172,172 +165,155 @@
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+/* eslint-disable camelcase */
 import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
+import { parseTime } from '@/utils/ruoyi';
+import { getCurrentInstance, ref, reactive, toRefs } from 'vue';
 
-export default {
-  name: "Config",
-  dicts: ['sys_yes_no'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 参数表格数据
-      configList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 日期范围
-      dateRange: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        configName: undefined,
-        configKey: undefined,
-        configType: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        configName: [
-          { required: true, message: "参数名称不能为空", trigger: "blur" }
-        ],
-        configKey: [
-          { required: true, message: "参数键名不能为空", trigger: "blur" }
-        ],
-        configValue: [
-          { required: true, message: "参数键值不能为空", trigger: "blur" }
-        ]
-      }
-    };
+const { proxy } = getCurrentInstance();
+const { sys_yes_no } = proxy.useDict("sys_yes_no");
+
+const configList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    configName: undefined,
+    configKey: undefined,
+    configType: undefined
   },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询参数列表 */
-    getList() {
-      this.loading = true;
-      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.configList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        configId: undefined,
-        configName: undefined,
-        configKey: undefined,
-        configValue: undefined,
-        configType: "Y",
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加参数";
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.configId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const configId = row.configId || this.ids
-      getConfig(configId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改参数";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.configId != undefined) {
-            updateConfig(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addConfig(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const configIds = row.configId || this.ids;
-      this.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function() {
-          return delConfig(configIds);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/config/export', {
-        ...this.queryParams
-      }, `config_${new Date().getTime()}.xlsx`)
-    },
-    /** 刷新缓存按钮操作 */
-    handleRefreshCache() {
-      refreshCache().then(() => {
-        this.$modal.msgSuccess("刷新成功");
-      });
-    }
+  rules: {
+    configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
+    configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
+    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
   }
-};
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询参数列表 */
+function getList() {
+  loading.value = true;
+  listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    configList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    configId: undefined,
+    configName: undefined,
+    configKey: undefined,
+    configValue: undefined,
+    configType: "Y",
+    remark: undefined
+  };
+  proxy.resetForm("configRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.configId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加参数";
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const configId = row.configId || ids.value;
+  getConfig(configId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改参数";
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["configRef"].validate(valid => {
+    if (valid) {
+      if (form.value.configId != undefined) {
+        updateConfig(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addConfig(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const configIds = row.configId || ids.value;
+  proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
+    return delConfig(configIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/config/export", {
+    ...queryParams.value
+  }, `config_${new Date().getTime()}.xlsx`);
+}
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+  refreshCache().then(() => {
+    proxy.$modal.msgSuccess("刷新缓存成功");
+  });
+}
+
+getList();
 </script>
diff --git a/ruoyi-ui/src/views/system/dept/index.vue b/ruoyi-ui/src/views/system/dept/index.vue
index e502b4e..bd13c48 100644
--- a/ruoyi-ui/src/views/system/dept/index.vue
+++ b/ruoyi-ui/src/views/system/dept/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form :model="queryParams" ref="queryRef"  :inline="true" v-show="showSearch">
       <el-form-item label="部门名称" prop="deptName">
         <el-input
           v-model="queryParams.deptName"
@@ -12,7 +12,7 @@
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
           <el-option
-            v-for="dict in dict.type.sys_normal_disable"
+            v-for="dict in sys_normal_disable"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -20,8 +20,8 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -30,8 +30,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:dept:add']"
         >新增</el-button>
@@ -40,12 +39,11 @@
         <el-button
           type="info"
           plain
-          icon="el-icon-sort"
-          size="mini"
+          icon="Sort"
           @click="toggleExpandAll"
         >展开/折叠</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table
@@ -59,36 +57,33 @@
       <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
       <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
       <el-table-column prop="status" label="状态" width="100">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        <template #default="scope">
+          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="200">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dept:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-plus"
+            icon="Plus"
             @click="handleAdd(scope.row)"
             v-hasPermi="['system:dept:add']"
           >新增</el-button>
           <el-button
             v-if="scope.row.parentId != 0"
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dept:remove']"
           >删除</el-button>
@@ -97,12 +92,17 @@
     </el-table>
 
     <!-- 添加或修改部门对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+      <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
             <el-form-item label="上级部门" prop="parentId">
-              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+              <tree-select
+                v-model:value="form.parentId"
+                :options="deptOptions"
+                :objMap="{ value: 'deptId', label: 'deptName', children: 'children' }"
+                placeholder="选择上级部门"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -140,7 +140,7 @@
             <el-form-item label="部门状态">
               <el-radio-group v-model="form.status">
                 <el-radio
-                  v-for="dict in dict.type.sys_normal_disable"
+                  v-for="dict in sys_normal_disable"
                   :key="dict.value"
                   :label="dict.value"
                 >{{dict.label}}</el-radio>
@@ -149,192 +149,145 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
 import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
-export default {
-  name: "Dept",
-  dicts: ['sys_normal_disable'],
-  components: { Treeselect },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 表格树数据
-      deptList: [],
-      // 部门树选项
-      deptOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 是否展开，默认全部展开
-      isExpandAll: true,
-      // 重新渲染表格状态
-      refreshTable: true,
-      // 查询参数
-      queryParams: {
-        deptName: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        parentId: [
-          { required: true, message: "上级部门不能为空", trigger: "blur" }
-        ],
-        deptName: [
-          { required: true, message: "部门名称不能为空", trigger: "blur" }
-        ],
-        orderNum: [
-          { required: true, message: "显示排序不能为空", trigger: "blur" }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phone: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
-    };
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+
+const deptList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const title = ref("");
+const deptOptions = ref([]);
+const isExpandAll = ref(true);
+const refreshTable = ref(true);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    deptName: undefined,
+    status: undefined
   },
-  created() {
-    this.getList();
+  rules: {
+    parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
+    deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
+    orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
+    email: [{ type: "email", message: "'请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
   },
-  methods: {
-    /** 查询部门列表 */
-    getList() {
-      this.loading = true;
-      listDept(this.queryParams).then(response => {
-        this.deptList = this.handleTree(response.data, "deptId");
-        this.loading = false;
-      });
-    },
-    /** 转换部门数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.deptId,
-        label: node.deptName,
-        children: node.children
-      };
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        deptId: undefined,
-        parentId: undefined,
-        deptName: undefined,
-        orderNum: undefined,
-        leader: undefined,
-        phone: undefined,
-        email: undefined,
-        status: "0"
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.reset();
-      if (row != undefined) {
-        this.form.parentId = row.deptId;
-      }
-      this.open = true;
-      this.title = "添加部门";
-      listDept().then(response => {
-        this.deptOptions = this.handleTree(response.data, "deptId");
-      });
-    },
-    /** 展开/折叠操作 */
-    toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
-      this.$nextTick(() => {
-        this.refreshTable = true;
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      getDept(row.deptId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改部门";
-        listDeptExcludeChild(row.deptId).then(response => {
-          this.deptOptions = this.handleTree(response.data, "deptId");
-          if (this.deptOptions.length == 0) {
-            const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
-            this.deptOptions.push(noResultsOptions);
-          }
-        });
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.deptId != undefined) {
-            updateDept(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addDept(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
-        return delDept(row.deptId);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询部门列表 */
+function getList() {
+  loading.value = true;
+  listDept(queryParams.value).then(response => {
+    deptList.value = proxy.handleTree(response.data, "deptId");
+    loading.value = false;
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    deptId: undefined,
+    parentId: undefined,
+    deptName: undefined,
+    orderNum: 0,
+    leader: undefined,
+    phone: undefined,
+    email: undefined,
+    status: "0"
+  };
+  proxy.resetForm("deptRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 新增按钮操作 */
+async function handleAdd(row) {
+  reset();
+  await listDept().then(response => {
+    deptOptions.value = proxy.handleTree(response.data, "deptId");
+  });
+  if (row != undefined) {
+    form.value.parentId = row.deptId;
   }
-};
+  open.value = true;
+  title.value = "添加部门";
+}
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false;
+  isExpandAll.value = !isExpandAll.value;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+}
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset();
+  await listDeptExcludeChild(row.deptId).then(response => {
+    deptOptions.value = proxy.handleTree(response.data, "deptId");
+  });
+  getDept(row.deptId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改部门";
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["deptRef"].validate(valid => {
+    if (valid) {
+      if (form.value.deptId != undefined) {
+        updateDept(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addDept(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
+    return delDept(row.deptId);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 </script>
diff --git a/ruoyi-ui/src/views/system/dict/data.vue b/ruoyi-ui/src/views/system/dict/data.vue
index 324bb64..b34afa9 100644
--- a/ruoyi-ui/src/views/system/dict/data.vue
+++ b/ruoyi-ui/src/views/system/dict/data.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef"  :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="字典名称" prop="dictType">
         <el-select v-model="queryParams.dictType">
           <el-option
@@ -19,19 +19,9 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -40,8 +30,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:dict:add']"
         >新增</el-button>
@@ -50,8 +39,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:dict:edit']"
@@ -61,8 +49,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:dict:remove']"
@@ -72,8 +59,7 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['system:dict:export']"
         >导出</el-button>
@@ -82,49 +68,41 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-close"
-          size="mini"
+          icon="Close"
           @click="handleClose"
         >关闭</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="字典编码" align="center" prop="dictCode" />
       <el-table-column label="字典标签" align="center" prop="dictLabel">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>
           <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="字典键值" align="center" prop="dictValue" />
       <el-table-column label="字典排序" align="center" prop="dictSort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dict:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dict:remove']"
           >删除</el-button>
@@ -135,14 +113,14 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典类型">
           <el-input v-model="form.dictType" :disabled="true" />
         </el-form-item>
@@ -163,240 +141,190 @@
             <el-option
               v-for="item in listClassOptions"
               :key="item.value"
-              :label="item.label + '(' + item.value + ')'"
+              :label="item.label"
               :value="item.value"
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in dict.type.sys_normal_disable"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { listType, getType } from "@/api/system/dict/type";
 import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
-import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
 
-export default {
-  name: "Data",
-  dicts: ['sys_normal_disable'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 字典表格数据
-      dataList: [],
-      // 默认字典类型
-      defaultDictType: "",
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 数据标签回显样式
-      listClassOptions: [
-        {
-          value: "default",
-          label: "默认"
-        },
-        {
-          value: "primary",
-          label: "主要"
-        },
-        {
-          value: "success",
-          label: "成功"
-        },
-        {
-          value: "info",
-          label: "信息"
-        },
-        {
-          value: "warning",
-          label: "警告"
-        },
-        {
-          value: "danger",
-          label: "危险"
-        }
-      ],
-      // 类型数据字典
-      typeOptions: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        dictName: undefined,
-        dictType: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        dictLabel: [
-          { required: true, message: "数据标签不能为空", trigger: "blur" }
-        ],
-        dictValue: [
-          { required: true, message: "数据键值不能为空", trigger: "blur" }
-        ],
-        dictSort: [
-          { required: true, message: "数据顺序不能为空", trigger: "blur" }
-        ]
-      }
-    };
+const { proxy } = getCurrentInstance();
+
+const dataList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const defaultDictType = ref("");
+const typeOptions = ref([]);
+const route = useRoute();
+// 数据标签回显样式
+const listClassOptions = ref([
+  { value: "default", label: "默认" },
+  { value: "primary", label: "主要" },
+  { value: "success", label: "成功" },
+  { value: "info", label: "信息" },
+  { value: "warning", label: "警告" },
+  { value: "danger", label: "危险" }
+]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictName: undefined,
+    dictType: undefined,
+    status: undefined
   },
-  created() {
-    const dictId = this.$route.params && this.$route.params.dictId;
-    this.getType(dictId);
-    this.getTypeList();
-  },
-  methods: {
-    /** 查询字典类型详细 */
-    getType(dictId) {
-      getType(dictId).then(response => {
-        this.queryParams.dictType = response.data.dictType;
-        this.defaultDictType = response.data.dictType;
-        this.getList();
-      });
-    },
-    /** 查询字典类型列表 */
-    getTypeList() {
-      getDictOptionselect().then(response => {
-        this.typeOptions = response.data;
-      });
-    },
-    /** 查询字典数据列表 */
-    getList() {
-      this.loading = true;
-      listData(this.queryParams).then(response => {
-        this.dataList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        dictCode: undefined,
-        dictLabel: undefined,
-        dictValue: undefined,
-        cssClass: undefined,
-        listClass: 'default',
-        dictSort: 0,
-        status: "0",
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 返回按钮操作 */
-    handleClose() {
-      const obj = { path: "/system/dict" };
-      this.$tab.closeOpenPage(obj);
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.queryParams.dictType = this.defaultDictType;
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加字典数据";
-      this.form.dictType = this.queryParams.dictType;
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.dictCode)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const dictCode = row.dictCode || this.ids
-      getData(dictCode).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改字典数据";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.dictCode != undefined) {
-            updateData(this.form).then(response => {
-              this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addData(this.form).then(response => {
-              this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const dictCodes = row.dictCode || this.ids;
-      this.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
-        return delData(dictCodes);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-        this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/dict/data/export', {
-        ...this.queryParams
-      }, `data_${new Date().getTime()}.xlsx`)
-    }
+  rules: {
+    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
+    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
+    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
   }
-};
-</script>
\ No newline at end of file
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询字典类型详细 */
+function getTypes(dictId) {
+  getType(dictId).then(response => {
+    queryParams.value.dictType = response.data.dictType;
+    defaultDictType.value = response.data.dictType;
+    getList();
+  });
+}
+
+/** 查询字典类型列表 */
+function getTypeList() {
+  listType().then(response => {
+    typeOptions.value = response.rows;
+  });
+}
+/** 查询字典数据列表 */
+function getList() {
+  loading.value = true;
+  listData(queryParams.value).then(response => {
+    dataList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    dictCode: undefined,
+    dictLabel: undefined,
+    dictValue: undefined,
+    cssClass: undefined,
+    listClass: "default",
+    dictSort: 0,
+    status: "0",
+    remark: undefined
+  };
+  proxy.resetForm("dataRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 返回按钮操作 */
+function handleClose() {
+  const obj = { path: "/system/dict" };
+  proxy.$tab.closeOpenPage(obj);
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  queryParams.value.dictType = defaultDictType;
+  handleQuery();
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加字典数据";
+  form.value.dictType = queryParams.value.dictType;
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.dictCode);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const dictCode = row.dictCode || ids.value;
+  getData(dictCode).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改字典数据";
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["dataRef"].validate(valid => {
+    if (valid) {
+      if (form.value.dictCode != undefined) {
+        updateData(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addData(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const dictCodes = row.dictCode || ids.value;
+  proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
+    return delData(dictCodes);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/dict/data/export", {
+    ...queryParams.value
+  }, `dict_data_${new Date().getTime()}.xlsx`);
+}
+
+getTypes(route.params && route.params.dictId);
+getTypeList();
+</script>
diff --git a/ruoyi-ui/src/views/system/dict/index.vue b/ruoyi-ui/src/views/system/dict/index.vue
index 6ca5457..b16925f 100644
--- a/ruoyi-ui/src/views/system/dict/index.vue
+++ b/ruoyi-ui/src/views/system/dict/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="字典名称" prop="dictName">
         <el-input
           v-model="queryParams.dictName"
@@ -19,21 +19,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="字典状态"
-          clearable
-          style="width: 240px"
-        >
-          <el-option
-            v-for="dict in dict.type.sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="创建时间">
         <el-date-picker
           v-model="dateRange"
@@ -46,8 +31,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search"  @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -56,8 +41,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:dict:add']"
         >新增</el-button>
@@ -66,8 +50,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:dict:edit']"
@@ -77,8 +60,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:dict:remove']"
@@ -88,8 +70,7 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['system:dict:export']"
         >导出</el-button>
@@ -98,13 +79,12 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-refresh"
-          size="mini"
+          icon="Refresh"
           @click="handleRefreshCache"
           v-hasPermi="['system:dict:remove']"
         >刷新缓存</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
@@ -112,36 +92,29 @@
       <el-table-column label="字典编号" align="center" prop="dictId" />
       <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
       <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
+        <template #default="scope">
           <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
             <span>{{ scope.row.dictType }}</span>
           </router-link>
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dict:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dict:remove']"
           >删除</el-button>
@@ -152,196 +125,165 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="dictName">
           <el-input v-model="form.dictName" placeholder="请输入字典名称" />
         </el-form-item>
         <el-form-item label="字典类型" prop="dictType">
           <el-input v-model="form.dictType" placeholder="请输入字典类型" />
         </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in dict.type.sys_normal_disable"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
 import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
 
-export default {
-  name: "Dict",
-  dicts: ['sys_normal_disable'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 字典表格数据
-      typeList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 日期范围
-      dateRange: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        dictName: undefined,
-        dictType: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        dictName: [
-          { required: true, message: "字典名称不能为空", trigger: "blur" }
-        ],
-        dictType: [
-          { required: true, message: "字典类型不能为空", trigger: "blur" }
-        ]
+const { proxy } = getCurrentInstance();
+
+const typeList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictName: undefined,
+    dictType: undefined
+  },
+  rules: {
+    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
+    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询字典类型列表 */
+function getList() {
+  loading.value = true;
+  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    typeList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    dictId: undefined,
+    dictName: undefined,
+    dictType: undefined,
+    remark: undefined
+  };
+  proxy.resetForm("dictRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加字典类型";
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.dictId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const dictId = row.dictId || ids.value;
+  getType(dictId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改字典类型";
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["dictRef"].validate(valid => {
+    if (valid) {
+      if (form.value.dictId != undefined) {
+        updateType(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addType(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
       }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询字典类型列表 */
-    getList() {
-      this.loading = true;
-      listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.typeList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        dictId: undefined,
-        dictName: undefined,
-        dictType: undefined,
-        status: "0",
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加字典类型";
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.dictId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const dictId = row.dictId || this.ids
-      getType(dictId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改字典类型";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.dictId != undefined) {
-            updateType(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addType(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const dictIds = row.dictId || this.ids;
-      this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
-        return delType(dictIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/dict/type/export', {
-        ...this.queryParams
-      }, `type_${new Date().getTime()}.xlsx`)
-    },
-    /** 刷新缓存按钮操作 */
-    handleRefreshCache() {
-      refreshCache().then(() => {
-        this.$modal.msgSuccess("刷新成功");
-        this.$store.dispatch('dict/cleanDict');
-      });
     }
-  }
-};
-</script>
\ No newline at end of file
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const dictIds = row.dictId || ids.value;
+  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
+    return delType(dictIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/dict/type/export", {
+    ...queryParams.value
+  }, `dict_${new Date().getTime()}.xlsx`);
+}
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+  refreshCache().then(() => {
+    proxy.$modal.msgSuccess("刷新成功");
+  });
+}
+
+getList();
+</script>
diff --git a/ruoyi-ui/src/views/system/menu/index.vue b/ruoyi-ui/src/views/system/menu/index.vue
index 2a83f9e..eb23924 100644
--- a/ruoyi-ui/src/views/system/menu/index.vue
+++ b/ruoyi-ui/src/views/system/menu/index.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
       <el-form-item label="菜单名称" prop="menuName">
         <el-input
           v-model="queryParams.menuName"
           placeholder="请输入菜单名称"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
           <el-option
-            v-for="dict in dict.type.sys_normal_disable"
+            v-for="dict in sys_normal_disable"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -20,8 +20,8 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -30,8 +30,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:menu:add']"
         >新增</el-button>
@@ -40,12 +39,11 @@
         <el-button
           type="info"
           plain
-          icon="el-icon-sort"
-          size="mini"
+          icon="Sort"
           @click="toggleExpandAll"
         >展开/折叠</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table
@@ -54,11 +52,11 @@
       :data="menuList"
       row-key="menuId"
       :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
       <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="100">
-        <template slot-scope="scope">
+        <template #default="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
@@ -66,35 +64,32 @@
       <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="status" label="状态" width="80">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        <template #default="scope">
+          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:menu:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-plus"
+            icon="Plus"
             @click="handleAdd(scope.row)"
             v-hasPermi="['system:menu:add']"
           >新增</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:menu:remove']"
           >删除</el-button>
@@ -103,16 +98,15 @@
     </el-table>
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+    <el-dialog :title="title" v-model="open" width="680px" append-to-body>
+      <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
-            <el-form-item label="上级菜单" prop="parentId">
-              <treeselect
-                v-model="form.parentId"
+            <el-form-item label="上级菜单">
+              <tree-select
+                v-model:value="form.parentId"
                 :options="menuOptions"
-                :normalizer="normalizer"
-                :show-count="true"
+                :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
                 placeholder="选择上级菜单"
               />
             </el-form-item>
@@ -130,20 +124,25 @@
             <el-form-item label="菜单图标" prop="icon">
               <el-popover
                 placement="bottom-start"
-                width="460"
+                :width="540"
+                v-model:visible="showChooseIcon"
                 trigger="click"
-                @show="$refs['iconSelect'].reset()"
+                @show="showSelectIcon"
               >
-                <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
-                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                  <svg-icon
-                    v-if="form.icon"
-                    slot="prefix"
-                    :icon-class="form.icon"
-                    style="width: 25px;"
-                  />
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                </el-input>
+                <template #reference>
+                  <el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
+                    <template #prefix>
+                      <svg-icon
+                        v-if="form.icon"
+                        :icon-class="form.icon"
+                        class="el-input__icon"
+                        style="height: 32px;width: 16px;"
+                      />
+                      <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
+                    </template>
+                  </el-input>
+                </template>
+                <icon-select ref="iconSelectRef" @selected="selected" />
               </el-popover>
             </el-form-item>
           </el-col>
@@ -158,13 +157,14 @@
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item prop="isFrame">
-              <span slot="label">
-                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                是否外链
-              </span>
+            <el-form-item>
+              <template #label>
+                        <span>
+                           <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                              <i class="el-icon-question"></i>
+                           </el-tooltip>是否外链
+                        </span>
+              </template>
               <el-radio-group v-model="form.isFrame">
                 <el-radio label="0">是</el-radio>
                 <el-radio label="1">否</el-radio>
@@ -173,56 +173,66 @@
           </el-col>
           <el-col :span="12" v-if="form.menuType != 'F'">
             <el-form-item prop="path">
-              <span slot="label">
-                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                路由地址
-              </span>
+              <template #label>
+                        <span>
+                           <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
+                              <i class="el-icon-question"></i>
+                           </el-tooltip>
+                           路由地址
+                        </span>
+              </template>
               <el-input v-model="form.path" placeholder="请输入路由地址" />
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType == 'C'">
             <el-form-item prop="component">
-              <span slot="label">
-                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                组件路径
-              </span>
+              <template #label>
+                        <span>
+                           <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+                              <i class="el-icon-question"></i>
+                           </el-tooltip>
+                           组件路径
+                        </span>
+              </template>
               <el-input v-model="form.component" placeholder="请输入组件路径" />
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType != 'M'">
-            <el-form-item prop="perms">
+            <el-form-item>
               <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
-              <span slot="label">
-                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                权限字符
-              </span>
+              <template #label>
+                        <span>
+                           <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
+                              <i class="el-icon-question"></i>
+                           </el-tooltip>
+                           权限字符
+                        </span>
+              </template>
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType == 'C'">
-            <el-form-item prop="query">
+            <el-form-item>
               <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
-              <span slot="label">
-                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                路由参数
-              </span>
+              <template #label>
+                        <span>
+                           <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
+                              <i class="el-icon-question"></i>
+                           </el-tooltip>
+                           路由参数
+                        </span>
+              </template>
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType == 'C'">
-            <el-form-item prop="isCache">
-              <span slot="label">
-                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                是否缓存
-              </span>
+            <el-form-item>
+              <template #label>
+                        <span>
+                           <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
+                              <i class="el-icon-question"></i>
+                           </el-tooltip>
+                           是否缓存
+                        </span>
+              </template>
               <el-radio-group v-model="form.isCache">
                 <el-radio label="0">缓存</el-radio>
                 <el-radio label="1">不缓存</el-radio>
@@ -230,223 +240,205 @@
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item prop="visible">
-              <span slot="label">
-                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                显示状态
-              </span>
+            <el-form-item>
+              <template #label>
+                        <span>
+                           <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                              <i class="el-icon-question"></i>
+                           </el-tooltip>
+                           显示状态
+                        </span>
+              </template>
               <el-radio-group v-model="form.visible">
                 <el-radio
-                  v-for="dict in dict.type.sys_show_hide"
+                  v-for="dict in sys_show_hide"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                >{{ dict.label }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item prop="status">
-              <span slot="label">
-                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                菜单状态
-              </span>
+            <el-form-item>
+              <template #label>
+                        <span>
+                           <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
+                              <i class="el-icon-question"></i>
+                           </el-tooltip>
+                           菜单状态
+                        </span>
+              </template>
               <el-radio-group v-model="form.status">
                 <el-radio
-                  v-for="dict in dict.type.sys_normal_disable"
+                  v-for="dict in sys_normal_disable"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                >{{ dict.label }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+<script setup name="Menu">
+import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
+import SvgIcon from "@/components/SvgIcon";
 import IconSelect from "@/components/IconSelect";
 
-export default {
-  name: "Menu",
-  dicts: ['sys_show_hide', 'sys_normal_disable'],
-  components: { Treeselect, IconSelect },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 菜单表格树数据
-      menuList: [],
-      // 菜单树选项
-      menuOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 是否展开，默认全部折叠
-      isExpandAll: false,
-      // 重新渲染表格状态
-      refreshTable: true,
-      // 查询参数
-      queryParams: {
-        menuName: undefined,
-        visible: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        menuName: [
-          { required: true, message: "菜单名称不能为空", trigger: "blur" }
-        ],
-        orderNum: [
-          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
-        ],
-        path: [
-          { required: true, message: "路由地址不能为空", trigger: "blur" }
-        ]
-      }
-    };
+const { proxy } = getCurrentInstance();
+const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
+
+const menuList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const title = ref("");
+const menuOptions = ref([]);
+const isExpandAll = ref(false);
+const refreshTable = ref(true);
+const showChooseIcon = ref(false);
+const iconSelectRef = ref(null);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    menuName: undefined,
+    visible: undefined
   },
-  created() {
-    this.getList();
+  rules: {
+    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
+    orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
+    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
   },
-  methods: {
-    // 选择图标
-    selected(name) {
-      this.form.icon = name;
-    },
-    /** 查询菜单列表 */
-    getList() {
-      this.loading = true;
-      listMenu(this.queryParams).then(response => {
-        this.menuList = this.handleTree(response.data, "menuId");
-        this.loading = false;
-      });
-    },
-    /** 转换菜单数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.menuId,
-        label: node.menuName,
-        children: node.children
-      };
-    },
-    /** 查询菜单下拉树结构 */
-    getTreeselect() {
-      listMenu().then(response => {
-        this.menuOptions = [];
-        const menu = { menuId: 0, menuName: '主类目', children: [] };
-        menu.children = this.handleTree(response.data, "menuId");
-        this.menuOptions.push(menu);
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        menuId: undefined,
-        parentId: 0,
-        menuName: undefined,
-        icon: undefined,
-        menuType: "M",
-        orderNum: undefined,
-        isFrame: "1",
-        isCache: "0",
-        visible: "0",
-        status: "0"
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.reset();
-      this.getTreeselect();
-      if (row != null && row.menuId) {
-        this.form.parentId = row.menuId;
-      } else {
-        this.form.parentId = 0;
-      }
-      this.open = true;
-      this.title = "添加菜单";
-    },
-    /** 展开/折叠操作 */
-    toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
-      this.$nextTick(() => {
-        this.refreshTable = true;
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      this.getTreeselect();
-      getMenu(row.menuId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改菜单";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.menuId != undefined) {
-            updateMenu(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addMenu(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
-        return delMenu(row.menuId);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询菜单列表 */
+function getList() {
+  loading.value = true;
+  listMenu(queryParams.value).then(response => {
+    menuList.value = proxy.handleTree(response.data, "menuId");
+    loading.value = false;
+  });
+}
+/** 查询菜单下拉树结构 */
+async function getTreeselect() {
+  menuOptions.value = [];
+  await listMenu().then(response => {
+    const menu = { menuId: 0, menuName: "主类目", children: [] };
+    menu.children = proxy.handleTree(response.data, "menuId");
+    menuOptions.value.push(menu);
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    menuId: undefined,
+    parentId: 0,
+    menuName: undefined,
+    icon: undefined,
+    menuType: "M",
+    orderNum: undefined,
+    isFrame: "1",
+    isCache: "0",
+    visible: "0",
+    status: "0"
+  };
+  proxy.resetForm("menuRef");
+}
+/** 展示下拉图标 */
+function showSelectIcon() {
+  iconSelectRef.value.reset();
+  showChooseIcon.value = true;
+}
+/** 选择图标 */
+function selected(name) {
+  form.value.icon = name;
+  showChooseIcon.value = false;
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 新增按钮操作 */
+async function handleAdd(row) {
+  reset();
+  await getTreeselect();
+  if (row != null && row.menuId) {
+    form.value.parentId = row.menuId;
+  } else {
+    form.value.parentId = 0;
   }
-};
+  open.value = true;
+  title.value = "添加菜单";
+}
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false;
+  isExpandAll.value = !isExpandAll.value;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+}
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset();
+  await getTreeselect();
+  getMenu(row.menuId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改菜单";
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["menuRef"].validate(valid => {
+    if (valid) {
+      if (form.value.menuId != undefined) {
+        updateMenu(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addMenu(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {
+    return delMenu(row.menuId);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 </script>
diff --git a/ruoyi-ui/src/views/system/notice/index.vue b/ruoyi-ui/src/views/system/notice/index.vue
index 7982b54..9f64409 100644
--- a/ruoyi-ui/src/views/system/notice/index.vue
+++ b/ruoyi-ui/src/views/system/notice/index.vue
@@ -1,26 +1,19 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="公告标题" prop="noticeTitle">
         <el-input
           v-model="queryParams.noticeTitle"
           placeholder="请输入公告标题"
           clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="操作人员" prop="createBy">
-        <el-input
-          v-model="queryParams.createBy"
-          placeholder="请输入操作人员"
-          clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
+
       <el-form-item label="类型" prop="noticeType">
         <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>
           <el-option
-            v-for="dict in dict.type.sys_notice_type"
+            v-for="dict in sys_notice_type"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -28,8 +21,8 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -38,8 +31,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:notice:add']"
         >新增</el-button>
@@ -48,8 +40,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:notice:edit']"
@@ -59,14 +50,13 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:notice:remove']"
         >删除</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
@@ -79,34 +69,32 @@
         :show-overflow-tooltip="true"
       />
       <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
+        <template #default="scope">
+          <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
         </template>
       </el-table-column>
       <el-table-column label="状态" align="center" prop="status" width="100">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
+        <template #default="scope">
+          <dict-tag :options="sys_notice_status" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="创建者" align="center" prop="createBy" width="100" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="100">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:notice:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:notice:remove']"
           >删除</el-button>
@@ -115,16 +103,16 @@
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改公告对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="780px" append-to-body>
+      <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="公告标题" prop="noticeTitle">
@@ -133,9 +121,9 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="公告类型" prop="noticeType">
-              <el-select v-model="form.noticeType" placeholder="请选择公告类型">
+              <el-select v-model="form.noticeType" placeholder="请选择">
                 <el-option
-                  v-for="dict in dict.type.sys_notice_type"
+                  v-for="dict in sys_notice_type"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
@@ -147,166 +135,155 @@
             <el-form-item label="状态">
               <el-radio-group v-model="form.status">
                 <el-radio
-                  v-for="dict in dict.type.sys_notice_status"
+                  v-for="dict in sys_notice_status"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                >{{ dict.label }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="内容">
-              <editor v-model="form.noticeContent" :min-height="192"/>
+              <el-input
+                :rows="6"
+                type="textarea"
+                placeholder="请输入内容"
+                v-model="form.noticeContent"
+              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup name="Notice">
 import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
+import {reactive, ref, toRefs} from "vue";
 
-export default {
-  name: "Notice",
-  dicts: ['sys_notice_status', 'sys_notice_type'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 公告表格数据
-      noticeList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        noticeTitle: undefined,
-        createBy: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        noticeTitle: [
-          { required: true, message: "公告标题不能为空", trigger: "blur" }
-        ],
-        noticeType: [
-          { required: true, message: "公告类型不能为空", trigger: "change" }
-        ]
+const { proxy } = getCurrentInstance();
+const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type");
+
+const noticeList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    noticeTitle: undefined,
+    status: undefined
+  },
+  rules: {
+    noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
+    noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询公告列表 */
+function getList() {
+  loading.value = true;
+  listNotice(queryParams.value).then(response => {
+    noticeList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    noticeId: undefined,
+    noticeTitle: undefined,
+    noticeType: undefined,
+    noticeContent: undefined,
+    status: "0"
+  };
+  proxy.resetForm("noticeRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.noticeId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加公告";
+}
+/**修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const noticeId = row.noticeId || ids.value;
+  getNotice(noticeId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改公告";
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["noticeRef"].validate(valid => {
+    if (valid) {
+      if (form.value.noticeId != undefined) {
+        updateNotice(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addNotice(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
       }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询公告列表 */
-    getList() {
-      this.loading = true;
-      listNotice(this.queryParams).then(response => {
-        this.noticeList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        noticeId: undefined,
-        noticeTitle: undefined,
-        noticeType: undefined,
-        noticeContent: undefined,
-        status: "0"
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.noticeId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加公告";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const noticeId = row.noticeId || this.ids
-      getNotice(noticeId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改公告";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.noticeId != undefined) {
-            updateNotice(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addNotice(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const noticeIds = row.noticeId || this.ids
-      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
-        return delNotice(noticeIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
     }
-  }
-};
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const noticeIds = row.noticeId || ids.value
+  proxy.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
+    return delNotice(noticeIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 </script>
diff --git a/ruoyi-ui/src/views/system/post/index.vue b/ruoyi-ui/src/views/system/post/index.vue
index 444bf63..484a070 100644
--- a/ruoyi-ui/src/views/system/post/index.vue
+++ b/ruoyi-ui/src/views/system/post/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef"  :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="岗位编码" prop="postCode">
         <el-input
           v-model="queryParams.postCode"
@@ -20,7 +20,7 @@
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
           <el-option
-            v-for="dict in dict.type.sys_normal_disable"
+            v-for="dict in sys_normal_disable"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -28,8 +28,8 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -38,8 +38,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:post:add']"
         >新增</el-button>
@@ -48,8 +47,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:post:edit']"
@@ -59,8 +57,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:post:remove']"
@@ -70,13 +67,12 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['system:post:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
@@ -86,28 +82,26 @@
       <el-table-column label="岗位名称" align="center" prop="postName" />
       <el-table-column label="岗位排序" align="center" prop="postSort" />
       <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        <template #default="scope">
+          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:post:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:post:remove']"
           >删除</el-button>
@@ -118,14 +112,14 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open"  width="500px" append-to-body>
+      <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="岗位名称" prop="postName">
           <el-input v-model="form.postName" placeholder="请输入岗位名称" />
         </el-form-item>
@@ -138,7 +132,7 @@
         <el-form-item label="岗位状态" prop="status">
           <el-radio-group v-model="form.status">
             <el-radio
-              v-for="dict in dict.type.sys_normal_disable"
+              v-for="dict in sys_normal_disable"
               :key="dict.value"
               :label="dict.value"
             >{{dict.label}}</el-radio>
@@ -148,162 +142,144 @@
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
+<script setup>
+import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
 
-export default {
-  name: "Post",
-  dicts: ['sys_normal_disable'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 岗位表格数据
-      postList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        postCode: undefined,
-        postName: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        postName: [
-          { required: true, message: "岗位名称不能为空", trigger: "blur" }
-        ],
-        postCode: [
-          { required: true, message: "岗位编码不能为空", trigger: "blur" }
-        ],
-        postSort: [
-          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
-        ]
-      }
-    };
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+
+const postList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    postCode: undefined,
+    postName: undefined,
+    status: undefined
   },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询岗位列表 */
-    getList() {
-      this.loading = true;
-      listPost(this.queryParams).then(response => {
-        this.postList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        postId: undefined,
-        postCode: undefined,
-        postName: undefined,
-        postSort: 0,
-        status: "0",
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.postId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加岗位";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const postId = row.postId || this.ids
-      getPost(postId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改岗位";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.postId != undefined) {
-            updatePost(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPost(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const postIds = row.postId || this.ids;
-      this.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
-        return delPost(postIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/post/export', {
-        ...this.queryParams
-      }, `post_${new Date().getTime()}.xlsx`)
-    }
+  rules: {
+    postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
+    postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
+    postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
   }
-};
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询岗位列表 */
+function getList() {
+  loading.value = true;
+  listPost(queryParams.value).then(response => {
+    postList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 表单重置 */
+function reset() {
+  form.value = {
+    postId: undefined,
+    postCode: undefined,
+    postName: undefined,
+    postSort: 0,
+    status: "0",
+    remark: undefined
+  };
+  proxy.resetForm("postRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.postId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加岗位";
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const postId = row.postId || ids.value;
+  getPost(postId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改岗位";
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["postRef"].validate(valid => {
+    if (valid) {
+      if (form.value.postId != undefined) {
+        updatePost(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addPost(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const postIds = row.postId || ids.value;
+  proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
+    return delPost(postIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/post/export", {
+    ...queryParams.value
+  }, `post_${new Date().getTime()}.xlsx`);
+}
+
+getList();
 </script>
diff --git a/ruoyi-ui/src/views/system/role/authUser.vue b/ruoyi-ui/src/views/system/role/authUser.vue
index 147aa33..a699f34 100644
--- a/ruoyi-ui/src/views/system/role/authUser.vue
+++ b/ruoyi-ui/src/views/system/role/authUser.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+     <el-form :model="queryParams" ref="queryRef"  :inline="true" v-show="showSearch">
       <el-form-item label="用户名称" prop="userName">
         <el-input
           v-model="queryParams.userName"
@@ -20,8 +20,8 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -30,8 +30,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="openSelectUser"
           v-hasPermi="['system:role:add']"
         >添加用户</el-button>
@@ -40,8 +39,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-circle-close"
-          size="mini"
+          icon="CircleClose"
           :disabled="multiple"
           @click="cancelAuthUserAll"
           v-hasPermi="['system:role:remove']"
@@ -51,12 +49,11 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-close"
-          size="mini"
+          icon="Close"
           @click="handleClose"
         >关闭</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
@@ -66,21 +63,20 @@
       <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
       <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
       <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        <template #default="scope">
+          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
-            size="mini"
             type="text"
-            icon="el-icon-circle-close"
+            icon="CircleClose"
             @click="cancelAuthUser(scope.row)"
             v-hasPermi="['system:role:remove']"
           >取消授权</el-button>
@@ -91,109 +87,90 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-    <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
+    <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
   </div>
 </template>
 
-<script>
-import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
+<script setup>
 import selectUser from "./selectUser";
+import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
 
-export default {
-  name: "AuthUser",
-  dicts: ['sys_normal_disable'],
-  components: { selectUser },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中用户组
-      userIds: [],
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 用户表格数据
-      userList: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        roleId: undefined,
-        userName: undefined,
-        phonenumber: undefined
-      }
-    };
-  },
-  created() {
-    const roleId = this.$route.params && this.$route.params.roleId;
-    if (roleId) {
-      this.queryParams.roleId = roleId;
-      this.getList();
-    }
-  },
-  methods: {
-    /** 查询授权用户列表 */
-    getList() {
-      this.loading = true;
-      allocatedUserList(this.queryParams).then(response => {
-          this.userList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    // 返回按钮
-    handleClose() {
-      const obj = { path: "/system/role" };
-      this.$tab.closeOpenPage(obj);
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.userIds = selection.map(item => item.userId)
-      this.multiple = !selection.length
-    },
-    /** 打开授权用户表弹窗 */
-    openSelectUser() {
-      this.$refs.select.show();
-    },
-    /** 取消授权按钮操作 */
-    cancelAuthUser(row) {
-      const roleId = this.queryParams.roleId;
-      this.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function() {
-        return authUserCancel({ userId: row.userId, roleId: roleId });
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("取消授权成功");
-      }).catch(() => {});
-    },
-    /** 批量取消授权按钮操作 */
-    cancelAuthUserAll(row) {
-      const roleId = this.queryParams.roleId;
-      const userIds = this.userIds.join(",");
-      this.$modal.confirm('是否取消选中用户授权数据项？').then(function() {
-        return authUserCancelAll({ roleId: roleId, userIds: userIds });
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("取消授权成功");
-      }).catch(() => {});
-    }
-  }
-};
-</script>
\ No newline at end of file
+const route = useRoute();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+
+const userList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const userIds = ref([]);
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  roleId: route.params.roleId,
+  userName: undefined,
+  phonenumber: undefined,
+});
+
+/** 查询授权用户列表 */
+function getList() {
+  loading.value = true;
+  allocatedUserList(queryParams).then(response => {
+    userList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+// 返回按钮
+function handleClose() {
+  const obj = { path: "/system/role" };
+  proxy.$tab.closeOpenPage(obj);
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  userIds.value = selection.map(item => item.userId);
+  multiple.value = !selection.length;
+}
+/** 打开授权用户表弹窗 */
+function openSelectUser() {
+  proxy.$refs["selectRef"].show();
+}
+/** 取消授权按钮操作 */
+function cancelAuthUser(row) {
+  proxy.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
+    return authUserCancel({ userId: row.userId, roleId: queryParams.roleId });
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("取消授权成功");
+  }).catch(() => {});
+}
+/** 批量取消授权按钮操作 */
+function cancelAuthUserAll(row) {
+  const roleId = queryParams.roleId;
+  const uIds = userIds.value.join(",");
+  proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
+    return authUserCancelAll({ roleId: roleId, userIds: uIds });
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("取消授权成功");
+  }).catch(() => {});
+}
+
+getList();
+</script>
diff --git a/ruoyi-ui/src/views/system/role/index.vue b/ruoyi-ui/src/views/system/role/index.vue
index fb3b5ef..690b4dd 100644
--- a/ruoyi-ui/src/views/system/role/index.vue
+++ b/ruoyi-ui/src/views/system/role/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form :model="queryParams" ref="queryRef"  :inline="true" v-show="showSearch">
       <el-form-item label="角色名称" prop="roleName">
         <el-input
           v-model="queryParams.roleName"
@@ -27,7 +27,7 @@
           style="width: 240px"
         >
           <el-option
-            v-for="dict in dict.type.sys_normal_disable"
+            v-for="dict in sys_normal_disable"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -46,8 +46,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -56,8 +56,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
-          size="mini"
+          icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:role:add']"
         >新增</el-button>
@@ -66,8 +65,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:role:edit']"
@@ -77,8 +75,7 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:role:remove']"
@@ -88,13 +85,12 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleExport"
           v-hasPermi="['system:role:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
@@ -104,7 +100,7 @@
       <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
       <el-table-column label="显示顺序" prop="roleSort" width="100" />
       <el-table-column label="状态" align="center" width="100">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-switch
             v-model="scope.row.status"
             active-value="0"
@@ -113,36 +109,49 @@
           ></el-switch>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
+      <el-table-column label="创建时间" align="center" prop="createTime">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:role:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:role:remove']"
-          >删除</el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
-                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
-              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
-                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+        <template #default="scope">
+          <el-tooltip content="修改" placement="top">
+            <el-button
+              v-if="scope.row.roleId !== 1"
+              type="text"
+              icon="Edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:role:edit']"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip content="删除" placement="top">
+            <el-button
+              v-if="scope.row.roleId !== 1"
+              type="text"
+              icon="Delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['system:role:remove']"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip content="数据权限" placement="top">
+            <el-button
+              v-if="scope.row.roleId !== 1"
+              type="text"
+              icon="CircleCheck"
+              @click="handleDataScope(scope.row)"
+              v-hasPermi="['system:role:edit']"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip content="分配用户" placement="top">
+            <el-button
+              v-if="scope.row.roleId !== 1"
+              type="text"
+              icon="User"
+              @click="handleAuthUser(scope.row)"
+              v-hasPermi="['system:role:edit']"
+            ></el-button>
+          </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
@@ -150,24 +159,26 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
         </el-form-item>
         <el-form-item prop="roleKey">
-          <span slot="label">
-            <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-            权限字符
-          </span>
+          <template #label>
+                  <span>
+                     <el-tooltip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" placement="top">
+                        <i class="el-icon-question"></i>
+                     </el-tooltip>
+                     权限字符
+                  </span>
+          </template>
           <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
         </el-form-item>
         <el-form-item label="角色顺序" prop="roleSort">
@@ -176,10 +187,10 @@
         <el-form-item label="状态">
           <el-radio-group v-model="form.status">
             <el-radio
-              v-for="dict in dict.type.sys_normal_disable"
+              v-for="dict in sys_normal_disable"
               :key="dict.value"
               :label="dict.value"
-            >{{dict.label}}</el-radio>
+            >{{ dict.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="菜单权限">
@@ -190,25 +201,27 @@
             class="tree-border"
             :data="menuOptions"
             show-checkbox
-            ref="menu"
+            ref="menuRef"
             node-key="id"
             :check-strictly="!form.menuCheckStrictly"
             empty-text="加载中，请稍候"
-            :props="defaultProps"
+            :props="{ label: 'label', children: 'children' }"
           ></el-tree>
         </el-form-item>
         <el-form-item label="备注">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
+    <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
       <el-form :model="form" label-width="80px">
         <el-form-item label="角色名称">
           <el-input v-model="form.roleName" :disabled="true" />
@@ -226,7 +239,7 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="数据权限" v-show="form.dataScope == 2">
+        <el-form-item label="数据权限" v-show="form.dataScope == '2'">
           <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
           <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
           <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
@@ -235,371 +248,338 @@
             :data="deptOptions"
             show-checkbox
             default-expand-all
-            ref="dept"
+            ref="deptRef"
             node-key="id"
             :check-strictly="!form.deptCheckStrictly"
             empty-text="加载中，请稍候"
-            :props="defaultProps"
+            :props="{ label: 'label', children: 'children' }"
           ></el-tree>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitDataScope">确 定</el-button>
-        <el-button @click="cancelDataScope">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitDataScope">确 定</el-button>
+          <el-button @click="cancelDataScope">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
 import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
 import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
+//import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole } from "@/api/system/role";
+//import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
-export default {
-  name: "Role",
-  dicts: ['sys_normal_disable'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 角色表格数据
-      roleList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 是否显示弹出层（数据权限）
-      openDataScope: false,
-      menuExpand: false,
-      menuNodeAll: false,
-      deptExpand: true,
-      deptNodeAll: false,
-      // 日期范围
-      dateRange: [],
-      // 数据范围选项
-      dataScopeOptions: [
-        {
-          value: "1",
-          label: "全部数据权限"
-        },
-        {
-          value: "2",
-          label: "自定数据权限"
-        },
-        {
-          value: "3",
-          label: "本部门数据权限"
-        },
-        {
-          value: "4",
-          label: "本部门及以下数据权限"
-        },
-        {
-          value: "5",
-          label: "仅本人数据权限"
-        }
-      ],
-      // 菜单列表
-      menuOptions: [],
-      // 部门列表
-      deptOptions: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        roleName: undefined,
-        roleKey: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 表单校验
-      rules: {
-        roleName: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" }
-        ],
-        roleKey: [
-          { required: true, message: "权限字符不能为空", trigger: "blur" }
-        ],
-        roleSort: [
-          { required: true, message: "角色顺序不能为空", trigger: "blur" }
-        ]
-      }
-    };
+const roleList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+const menuOptions = ref([]);
+const menuExpand = ref(false);
+const menuNodeAll = ref(false);
+const deptExpand = ref(true);
+const deptNodeAll = ref(false);
+const deptOptions = ref([]);
+const openDataScope = ref(false);
+const menuRef = ref(null);
+const deptRef = ref(null);
+
+/** 数据范围选项*/
+const dataScopeOptions = ref([
+  { value: "1", label: "全部数据权限" },
+  { value: "2", label: "自定数据权限" },
+  { value: "3", label: "本部门数据权限" },
+  { value: "4", label: "本部门及以下数据权限" },
+  { value: "5", label: "仅本人数据权限" }
+]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    roleName: undefined,
+    roleKey: undefined,
+    status: undefined
   },
-  created() {
-    this.getList();
+  rules: {
+    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
+    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
+    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
   },
-  methods: {
-    /** 查询角色列表 */
-    getList() {
-      this.loading = true;
-      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.roleList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    /** 查询菜单树结构 */
-    getMenuTreeselect() {
-      menuTreeselect().then(response => {
-        this.menuOptions = response.data;
-      });
-    },
-    // 所有菜单节点数据
-    getMenuAllCheckedKeys() {
-      // 目前被选中的菜单节点
-      let checkedKeys = this.$refs.menu.getCheckedKeys();
-      // 半选中的菜单节点
-      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-      return checkedKeys;
-    },
-    // 所有部门节点数据
-    getDeptAllCheckedKeys() {
-      // 目前被选中的部门节点
-      let checkedKeys = this.$refs.dept.getCheckedKeys();
-      // 半选中的部门节点
-      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-      return checkedKeys;
-    },
-    /** 根据角色ID查询菜单树结构 */
-    getRoleMenuTreeselect(roleId) {
-      return roleMenuTreeselect(roleId).then(response => {
-        this.menuOptions = response.menus;
-        return response;
-      });
-    },
-    /** 根据角色ID查询部门树结构 */
-    getDeptTree(roleId) {
-      return deptTreeSelect(roleId).then(response => {
-        this.deptOptions = response.depts;
-        return response;
-      });
-    },
-    // 角色状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
-        return changeRoleStatus(row.roleId, row.status);
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0";
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 取消按钮（数据权限）
-    cancelDataScope() {
-      this.openDataScope = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      if (this.$refs.menu != undefined) {
-        this.$refs.menu.setCheckedKeys([]);
-      }
-      this.menuExpand = false,
-      this.menuNodeAll = false,
-      this.deptExpand = true,
-      this.deptNodeAll = false,
-      this.form = {
-        roleId: undefined,
-        roleName: undefined,
-        roleKey: undefined,
-        roleSort: 0,
-        status: "0",
-        menuIds: [],
-        deptIds: [],
-        menuCheckStrictly: true,
-        deptCheckStrictly: true,
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.roleId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleDataScope":
-          this.handleDataScope(row);
-          break;
-        case "handleAuthUser":
-          this.handleAuthUser(row);
-          break;
-        default:
-          break;
-      }
-    },
-    // 树权限（展开/折叠）
-    handleCheckedTreeExpand(value, type) {
-      if (type == 'menu') {
-        let treeList = this.menuOptions;
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
-        }
-      } else if (type == 'dept') {
-        let treeList = this.deptOptions;
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
-        }
-      }
-    },
-    // 树权限（全选/全不选）
-    handleCheckedTreeNodeAll(value, type) {
-      if (type == 'menu') {
-        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
-      } else if (type == 'dept') {
-        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
-      }
-    },
-    // 树权限（父子联动）
-    handleCheckedTreeConnect(value, type) {
-      if (type == 'menu') {
-        this.form.menuCheckStrictly = value ? true: false;
-      } else if (type == 'dept') {
-        this.form.deptCheckStrictly = value ? true: false;
-      }
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.getMenuTreeselect();
-      this.open = true;
-      this.title = "添加角色";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const roleId = row.roleId || this.ids
-      const roleMenu = this.getRoleMenuTreeselect(roleId);
-      getRole(roleId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.$nextTick(() => {
-          roleMenu.then(res => {
-            let checkedKeys = res.checkedKeys
-            checkedKeys.forEach((v) => {
-                this.$nextTick(()=>{
-                    this.$refs.menu.setChecked(v, true ,false);
-                })
-            })
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询角色列表 */
+function getList() {
+  loading.value = true;
+  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    roleList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const roleIds = row.roleId || ids.value;
+  proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
+    return delRole(roleIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/role/export", {
+    ...queryParams.value,
+  }, `role_${new Date().getTime()}.xlsx`);
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.roleId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 角色状态修改 */
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用";
+  proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
+    return changeRoleStatus(row.roleId, row.status);
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功");
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0";
+  });
+}
+/** 更多操作 */
+function handleCommand(command, row) {
+  switch (command) {
+    case "handleDataScope":
+      handleDataScope(row);
+      break;
+    case "handleAuthUser":
+      handleAuthUser(row);
+      break;
+    default:
+      break;
+  }
+}
+/** 分配用户 */
+function handleAuthUser(row) {
+  router.push("/system/role-auth/user/" + row.roleId);
+}
+/** 查询菜单树结构 */
+function getMenuTreeselect() {
+  menuTreeselect().then(response => {
+    menuOptions.value = response.data;
+  });
+}
+/** 所有部门节点数据 */
+function getDeptAllCheckedKeys() {
+  // 目前被选中的部门节点
+  let checkedKeys = deptRef.value.getCheckedKeys();
+  // 半选中的部门节点
+  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  return checkedKeys;
+}
+/** 重置新增的表单以及其他数据  */
+function reset() {
+  if (menuRef.value != undefined) {
+    menuRef.value.setCheckedKeys([]);
+  }
+  menuExpand.value = false;
+  menuNodeAll.value = false;
+  deptExpand.value = true;
+  deptNodeAll.value = false;
+  form.value = {
+    roleId: undefined,
+    roleName: undefined,
+    roleKey: undefined,
+    roleSort: 0,
+    status: "0",
+    menuIds: [],
+    deptIds: [],
+    menuCheckStrictly: true,
+    deptCheckStrictly: true,
+    remark: undefined
+  };
+  proxy.resetForm("roleRef");
+}
+/** 添加角色 */
+function handleAdd() {
+  reset();
+  getMenuTreeselect();
+  open.value = true;
+  title.value = "添加角色";
+}
+/** 修改角色 */
+function handleUpdate(row) {
+  reset();
+  const roleId = row.roleId || ids.value;
+  const roleMenu = getRoleMenuTreeselect(roleId);
+  getRole(roleId).then(response => {
+    form.value = response.data;
+    form.value.roleSort = Number(form.value.roleSort);
+    open.value = true;
+    nextTick(() => {
+      roleMenu.then((res) => {
+        let checkedKeys = res.checkedKeys;
+        checkedKeys.forEach((v) => {
+          nextTick(() => {
+            menuRef.value.setChecked(v, true, false);
           });
         });
-        this.title = "修改角色";
       });
-    },
-    /** 选择角色权限范围触发 */
-    dataScopeSelectChange(value) {
-      if(value !== '2') {
-        this.$refs.dept.setCheckedKeys([]);
-      }
-    },
-    /** 分配数据权限操作 */
-    handleDataScope(row) {
-      this.reset();
-      const deptTreeSelect = this.getDeptTree(row.roleId);
-      getRole(row.roleId).then(response => {
-        this.form = response.data;
-        this.openDataScope = true;
-        this.$nextTick(() => {
-          deptTreeSelect.then(res => {
-            this.$refs.dept.setCheckedKeys(res.checkedKeys);
-          });
-        });
-        this.title = "分配数据权限";
-      });
-    },
-    /** 分配用户操作 */
-    handleAuthUser: function(row) {
-      const roleId = row.roleId;
-      this.$router.push("/system/role-auth/user/" + roleId);
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.roleId != undefined) {
-            this.form.menuIds = this.getMenuAllCheckedKeys();
-            updateRole(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            this.form.menuIds = this.getMenuAllCheckedKeys();
-            addRole(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 提交按钮（数据权限） */
-    submitDataScope: function() {
-      if (this.form.roleId != undefined) {
-        this.form.deptIds = this.getDeptAllCheckedKeys();
-        dataScope(this.form).then(response => {
-          this.$modal.msgSuccess("修改成功");
-          this.openDataScope = false;
-          this.getList();
-        });
-      }
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const roleIds = row.roleId || this.ids;
-      this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
-        return delRole(roleIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/role/export', {
-        ...this.queryParams
-      }, `role_${new Date().getTime()}.xlsx`)
+    });
+    title.value = "修改角色";
+  });
+}
+/** 根据角色ID查询菜单树结构 */
+function getRoleMenuTreeselect(roleId) {
+  return roleMenuTreeselect(roleId).then(response => {
+    menuOptions.value = response.menus;
+    return response;
+  });
+}
+/** 根据角色ID查询部门树结构 */
+function getRoleDeptTreeselect(roleId) {
+  return deptTreeSelect(roleId).then(response => {
+    deptOptions.value = response.depts;
+    return response;
+  });
+}
+/** 树权限（展开/折叠）*/
+function handleCheckedTreeExpand(value, type) {
+  if (type == "menu") {
+    let treeList = menuOptions.value;
+    for (let i = 0; i < treeList.length; i++) {
+      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+    }
+  } else if (type == "dept") {
+    let treeList = deptOptions.value;
+    for (let i = 0; i < treeList.length; i++) {
+      deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
     }
   }
-};
-</script>
\ No newline at end of file
+}
+/** 树权限（全选/全不选） */
+function handleCheckedTreeNodeAll(value, type) {
+  if (type == "menu") {
+    menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
+  } else if (type == "dept") {
+    deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
+  }
+}
+/** 树权限（父子联动） */
+function handleCheckedTreeConnect(value, type) {
+  if (type == "menu") {
+    form.value.menuCheckStrictly = value ? true : false;
+  } else if (type == "dept") {
+    form.value.deptCheckStrictly = value ? true : false;
+  }
+}
+/** 所有菜单节点数据 */
+function getMenuAllCheckedKeys() {
+  // 目前被选中的菜单节点
+  let checkedKeys = menuRef.value.getCheckedKeys();
+  // 半选中的菜单节点
+  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  return checkedKeys;
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["roleRef"].validate(valid => {
+    if (valid) {
+      if (form.value.roleId != undefined) {
+        form.value.menuIds = getMenuAllCheckedKeys();
+        updateRole(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        form.value.menuIds = getMenuAllCheckedKeys();
+        addRole(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+/** 选择角色权限范围触发 */
+function dataScopeSelectChange(value) {
+  if (value !== "2") {
+    deptRef.value.setCheckedKeys([]);
+  }
+}
+/** 分配数据权限操作 */
+function handleDataScope(row) {
+  reset();
+  const roleDeptTreeselect = getRoleDeptTreeselect(row.roleId);
+  getRole(row.roleId).then(response => {
+    form.value = response.data;
+    openDataScope.value = true;
+    nextTick(() => {
+      roleDeptTreeselect.then(res => {
+        nextTick(() => {
+          if (deptRef.value) {
+            deptRef.value.setCheckedKeys(res.checkedKeys);
+          }
+        });
+      });
+    });
+    title.value = "分配数据权限";
+  });
+}
+/** 提交按钮（数据权限） */
+function submitDataScope() {
+  if (form.value.roleId != undefined) {
+    form.value.deptIds = getDeptAllCheckedKeys();
+    dataScope(form.value).then(response => {
+      proxy.$modal.msgSuccess("修改成功");
+      openDataScope.value = false;
+      getList();
+    });
+  }
+}
+/** 取消按钮（数据权限）*/
+function cancelDataScope() {
+  openDataScope.value = false;
+  reset();
+}
+
+getList();
+</script>
diff --git a/ruoyi-ui/src/views/system/role/selectUser.vue b/ruoyi-ui/src/views/system/role/selectUser.vue
index b2b072f..b545b3a 100644
--- a/ruoyi-ui/src/views/system/role/selectUser.vue
+++ b/ruoyi-ui/src/views/system/role/selectUser.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 授权用户 -->
-  <el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+  <el-dialog title="选择用户" v-model="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryRef" :inline="true">
       <el-form-item label="用户名称" prop="userName">
         <el-input
           v-model="queryParams.userName"
@@ -19,24 +19,24 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
     <el-row>
-      <el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
+      <el-table @row-click="clickRow" ref="refTable" :data="userList" @selection-change="handleSelectionChange" height="260px">
         <el-table-column type="selection" width="55"></el-table-column>
         <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
         <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
         <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
         <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
         <el-table-column label="状态" align="center" prop="status">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          <template #default="scope">
+            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
           </template>
         </el-table-column>
         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ parseTime(scope.row.createTime) }}</span>
           </template>
         </el-table-column>
@@ -44,95 +44,95 @@
       <pagination
         v-show="total>0"
         :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
         @pagination="getList"
       />
     </el-row>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="handleSelectUser">确 定</el-button>
-      <el-button @click="visible = false">取 消</el-button>
-    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleSelectUser">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
-<script>
-import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";
-export default {
-  dicts: ['sys_normal_disable'],
-  props: {
-    // 角色编号
-    roleId: {
-      type: [Number, String]
-    }
-  },
-  data() {
-    return {
-      // 遮罩层
-      visible: false,
-      // 选中数组值
-      userIds: [],
-      // 总条数
-      total: 0,
-      // 未授权用户数据
-      userList: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        roleId: undefined,
-        userName: undefined,
-        phonenumber: undefined
-      }
-    };
-  },
-  methods: {
-    // 显示弹框
-    show() {
-      this.queryParams.roleId = this.roleId;
-      this.getList();
-      this.visible = true;
-    },
-    clickRow(row) {
-      this.$refs.table.toggleRowSelection(row);
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.userIds = selection.map(item => item.userId);
-    },
-    // 查询表数据
-    getList() {
-      unallocatedUserList(this.queryParams).then(res => {
-        this.userList = res.rows;
-        this.total = res.total;
-      });
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 选择授权用户操作 */
-    handleSelectUser() {
-      const roleId = this.queryParams.roleId;
-      const userIds = this.userIds.join(",");
-      if (userIds == "") {
-        this.$modal.msgError("请选择要分配的用户");
-        return;
-      }
-      authUserSelectAll({ roleId: roleId, userIds: userIds }).then(res => {
-        this.$modal.msgSuccess(res.msg);
-        if (res.code === 200) {
-          this.visible = false;
-          this.$emit("ok");
-        }
-      });
-    }
+<script setup>
+import { authUserSelectAll, unallocatedUserList } from "@/api/system/role";
+
+const props = defineProps({
+  roleId: {
+    type: [Number, String]
   }
-};
+});
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+
+const userList = ref([]);
+const visible = ref(false);
+const total = ref(0);
+const userIds = ref([]);
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  roleId: undefined,
+  userName: undefined,
+  phonenumber: undefined
+});
+
+// 显示弹框
+function show() {
+  queryParams.roleId = props.roleId;
+  getList();
+  visible.value = true;
+}
+/**选择行 */
+function clickRow(row) {
+  proxy.$refs["refTable"].toggleRowSelection(row);
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  userIds.value = selection.map(item => item.userId);
+}
+// 查询表数据
+function getList() {
+  unallocatedUserList(queryParams).then(res => {
+    userList.value = res.rows;
+    total.value = res.total;
+  });
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+const emit = defineEmits(["ok"]);
+/** 选择授权用户操作 */
+function handleSelectUser() {
+  const roleId = queryParams.roleId;
+  const uIds = userIds.value.join(",");
+  if (uIds == "") {
+    proxy.$modal.msgError("请选择要分配的用户");
+    return;
+  }
+  authUserSelectAll({ roleId: roleId, userIds: uIds }).then(res => {
+    proxy.$modal.msgSuccess(res.msg);
+    if (res.code === 200) {
+      visible.value = false;
+      emit("ok");
+    }
+  });
+}
+
+defineExpose({
+  show,
+});
 </script>
diff --git a/ruoyi-ui/src/views/system/user/authRole.vue b/ruoyi-ui/src/views/system/user/authRole.vue
index ab5e72f..cdb45e6 100644
--- a/ruoyi-ui/src/views/system/user/authRole.vue
+++ b/ruoyi-ui/src/views/system/user/authRole.vue
@@ -17,9 +17,9 @@
     </el-form>
 
     <h4 class="form-header h4">角色信息</h4>
-    <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
+    <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="roleRef" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
       <el-table-column label="序号" type="index" align="center">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
         </template>
       </el-table-column>
@@ -28,90 +28,101 @@
       <el-table-column label="角色名称" align="center" prop="roleName" />
       <el-table-column label="权限字符" align="center" prop="roleKey" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
     </el-table>
-    
-    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+
+    <pagination v-show="total>0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
 
     <el-form label-width="100px">
-      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
+      <div style="text-align: center;margin-left:-120px;margin-top:30px;">
         <el-button type="primary" @click="submitForm()">提交</el-button>
         <el-button @click="close()">返回</el-button>
-      </el-form-item>
+      </div>
     </el-form>
   </div>
 </template>
 
-<script>
+<script setup>
 import { getAuthRole, updateAuthRole } from "@/api/system/user";
+import {getCurrentInstance, reactive, ref, toRefs} from "vue";
+import {useRoute} from "vue-router";
+const route = useRoute();
+const { proxy } = getCurrentInstance();
 
-export default {
-  name: "AuthRole",
-  data() {
-    return {
-       // 遮罩层
-      loading: true,
-      // 分页信息
-      total: 0,
-      pageNum: 1,
-      pageSize: 10,
-      // 选中角色编号
-      roleIds:[],
-      // 角色信息
-      roles: [],
-      // 用户信息
-      form: {}
-    };
-  },
-  created() {
-    const userId = this.$route.params && this.$route.params.userId;
-    if (userId) {
-      this.loading = true;
-      getAuthRole(userId).then((response) => {
-        this.form = response.user;
-        this.roles = response.roles;
-        this.total = this.roles.length;
-        this.$nextTick(() => {
-          this.roles.forEach((row) => {
-            if (row.flag) {
-              this.$refs.table.toggleRowSelection(row);
-            }
-          });
+const loading = ref(true);
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const roleIds = ref([]);
+const roles = ref([]);
+const form = ref({
+  nickName: undefined,
+  userName: undefined,
+  userId: undefined
+});
+
+// const data = reactive({
+//   form: {
+//     nickName: undefined,
+//     userName: undefined,
+//     userId: undefined
+//   }});
+//
+// const {  form } = toRefs(data);
+
+
+/** 单击选中行数据 */
+function clickRow(row) {
+  proxy.$refs["roleRef"].toggleRowSelection(row);
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  roleIds.value = selection.map(item => item.roleId);
+}
+/** 保存选中的数据编号 */
+function getRowKey(row) {
+  return row.roleId;
+}
+/** 关闭按钮 */
+function close() {
+  const obj = { path: "/system/user" };
+  proxy.$tab.closeOpenPage(obj);
+}
+/** 提交按钮 */
+function submitForm() {
+  //console.log("form.value.userId="+form.value.userId)
+  const userId = form.value.userId;
+  const rIds = roleIds.value.join(",");
+  updateAuthRole({ userId: userId, roleIds: rIds }).then(response => {
+    proxy.$modal.msgSuccess("授权成功");
+    close();
+  });
+}
+
+(() => {
+  const userId = route.params && route.params.userId;
+  if (userId) {
+    loading.value = true;
+    getAuthRole(userId).then(response => {
+      Object.assign(form.value, response.user);
+      Object.assign(roles.value, response.roles);
+      //form.value = response.user;
+      //console.log("form.value.userName ="+form.value.userName );
+     // roles.value = response.roles;
+      total.value = roles.value.length;
+      nextTick(() => {
+        roles.value.forEach(row => {
+          if (row.flag) {
+            proxy.$refs["roleRef"].toggleRowSelection(row);
+          }
         });
-        this.loading = false;
       });
-    }
-  },
-  methods: {
-    /** 单击选中行数据 */
-    clickRow(row) {
-      this.$refs.table.toggleRowSelection(row);
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.roleIds = selection.map((item) => item.roleId);
-    },
-    // 保存选中的数据编号
-    getRowKey(row) {
-      return row.roleId;
-    },
-    /** 提交按钮 */
-    submitForm() {
-      const userId = this.form.userId;
-      const roleIds = this.roleIds.join(",");
-      updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
-        this.$modal.msgSuccess("授权成功");
-        this.close();
-      });
-    },
-    /** 关闭按钮 */
-    close() {
-      const obj = { path: "/system/user" };
-      this.$tab.closeOpenPage(obj);
-    },
-  },
-};
-</script>
\ No newline at end of file
+      loading.value = false;
+    });
+  }
+})();
+
+</script>
diff --git a/ruoyi-ui/src/views/system/user/index.vue b/ruoyi-ui/src/views/system/user/index.vue
index ae87fe4..51e360d 100644
--- a/ruoyi-ui/src/views/system/user/index.vue
+++ b/ruoyi-ui/src/views/system/user/index.vue
@@ -8,7 +8,6 @@
             v-model="deptName"
             placeholder="请输入部门名称"
             clearable
-            size="small"
             prefix-icon="el-icon-search"
             style="margin-bottom: 20px"
           />
@@ -16,27 +15,25 @@
         <div class="head-container">
           <el-tree
             :data="deptOptions"
-            :props="defaultProps"
+            :props="{ label: 'label', children: 'children' }"
             :expand-on-click-node="false"
             :filter-node-method="filterNode"
-            ref="tree"
-            node-key="id"
+            ref="deptTreeRef"
             default-expand-all
-            highlight-current
             @node-click="handleNodeClick"
           />
         </div>
       </el-col>
       <!--用户数据-->
       <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
           <el-form-item label="用户名称" prop="userName">
             <el-input
               v-model="queryParams.userName"
               placeholder="请输入用户名称"
               clearable
               style="width: 240px"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="手机号码" prop="phonenumber">
@@ -45,7 +42,7 @@
               placeholder="请输入手机号码"
               clearable
               style="width: 240px"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="状态" prop="status">
@@ -56,18 +53,17 @@
               style="width: 240px"
             >
               <el-option
-                v-for="dict in dict.type.sys_normal_disable"
+                v-for="dict in sys_normal_disable"
                 :key="dict.value"
                 :label="dict.label"
                 :value="dict.value"
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="创建时间">
+          <el-form-item label="创建时间" style="width: 308px;">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
-              value-format="yyyy-MM-dd"
+              value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
@@ -75,8 +71,8 @@
             ></el-date-picker>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
@@ -85,8 +81,7 @@
             <el-button
               type="primary"
               plain
-              icon="el-icon-plus"
-              size="mini"
+              icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:user:add']"
             >新增</el-button>
@@ -95,8 +90,7 @@
             <el-button
               type="success"
               plain
-              icon="el-icon-edit"
-              size="mini"
+              icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:user:edit']"
@@ -106,8 +100,7 @@
             <el-button
               type="danger"
               plain
-              icon="el-icon-delete"
-              size="mini"
+              icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['system:user:remove']"
@@ -117,8 +110,7 @@
             <el-button
               type="info"
               plain
-              icon="el-icon-upload2"
-              size="mini"
+              icon="Upload"
               @click="handleImport"
               v-hasPermi="['system:user:import']"
             >导入</el-button>
@@ -127,13 +119,12 @@
             <el-button
               type="warning"
               plain
-              icon="el-icon-download"
-              size="mini"
+              icon="Download"
               @click="handleExport"
               v-hasPermi="['system:user:export']"
             >导出</el-button>
           </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
         </el-row>
 
         <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
@@ -144,7 +135,7 @@
           <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
           <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
           <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-switch
                 v-model="scope.row.status"
                 active-value="0"
@@ -154,57 +145,64 @@
             </template>
           </el-table-column>
           <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column
-            label="操作"
-            align="center"
-            width="160"
-            class-name="small-padding fixed-width"
-          >
-            <template slot-scope="scope" v-if="scope.row.userId !== 1">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']"
-              >修改</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:remove']"
-              >删除</el-button>
-              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
-                  <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
-                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-tooltip content="修改" placement="top">
+                <el-button
+                  v-if="scope.row.userId !== 1"
+                  type="text"
+                  icon="Edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['system:user:edit']"
+                ></el-button>
+              </el-tooltip>
+              <el-tooltip content="删除" placement="top">
+                <el-button
+                  v-if="scope.row.userId !== 1"
+                  type="text"
+                  icon="Delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['system:user:remove']"
+                ></el-button>
+              </el-tooltip>
+              <el-tooltip content="重置密码" placement="top">
+                <el-button
+                  v-if="scope.row.userId !== 1"
+                  type="text"
+                  icon="Key"
+                  @click="handleResetPwd(scope.row)"
+                  v-hasPermi="['system:user:resetPwd']"
+                ></el-button>
+              </el-tooltip>
+              <el-tooltip content="分配角色" placement="top">
+                <el-button
+                  v-if="scope.row.userId !== 1"
+                  type="text"
+                  icon="CircleCheck"
+                  @click="handleAuthRole(scope.row)"
+                  v-hasPermi="['system:user:edit']"
+                ></el-button>
+              </el-tooltip>
             </template>
           </el-table-column>
         </el-table>
-
         <pagination
-          v-show="total>0"
+          v-show="total > 0"
           :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
           @pagination="getList"
         />
       </el-col>
     </el-row>
 
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="用户昵称" prop="nickName">
@@ -213,7 +211,12 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="归属部门" prop="deptId">
-              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+              <tree-select
+                v-model:value="form.deptId"
+                :options="deptOptions"
+                placeholder="请选择归属部门"
+                :objMap="{ value: 'id', label: 'label', children: 'children' }"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -237,16 +240,16 @@
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择性别">
+              <el-select v-model="form.sex" placeholder="请选择">
                 <el-option
-                  v-for="dict in dict.type.sys_user_sex"
+                  v-for="dict in sys_user_sex"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
@@ -258,10 +261,10 @@
             <el-form-item label="状态">
               <el-radio-group v-model="form.status">
                 <el-radio
-                  v-for="dict in dict.type.sys_normal_disable"
+                  v-for="dict in sys_normal_disable"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                >{{ dict.label }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -269,7 +272,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
+              <el-select v-model="form.postIds" multiple placeholder="请选择">
                 <el-option
                   v-for="item in postOptions"
                   :key="item.postId"
@@ -282,7 +285,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
+              <el-select v-model="form.roleIds" multiple placeholder="请选择">
                 <el-option
                   v-for="item in roleOptions"
                   :key="item.roleId"
@@ -302,16 +305,18 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
 
     <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
       <el-upload
-        ref="upload"
+        ref="uploadRef"
         :limit="1"
         accept=".xlsx, .xls"
         :headers="upload.headers"
@@ -322,349 +327,316 @@
         :auto-upload="false"
         drag
       >
-        <i class="el-icon-upload"></i>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <div class="el-upload__tip">
+              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+            </div>
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
           </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
-        </div>
+        </template>
       </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
 import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
 import { getToken } from "@/utils/auth";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
-export default {
-  name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: { Treeselect },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 用户表格数据
-      userList: null,
-      // 弹出层标题
-      title: "",
-      // 部门树选项
-      deptOptions: undefined,
-      // 是否显示弹出层
-      open: false,
-      // 部门名称
-      deptName: undefined,
-      // 默认密码
-      initPassword: undefined,
-      // 日期范围
-      dateRange: [],
-      // 岗位选项
-      postOptions: [],
-      // 角色选项
-      roleOptions: [],
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 用户导入参数
-      upload: {
-        // 是否显示弹出层（用户导入）
-        open: false,
-        // 弹出层标题（用户导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
-      },
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        userName: undefined,
-        phonenumber: undefined,
-        status: undefined,
-        deptId: undefined
-      },
-      // 列信息
-      columns: [
-        { key: 0, label: `用户编号`, visible: true },
-        { key: 1, label: `用户名称`, visible: true },
-        { key: 2, label: `用户昵称`, visible: true },
-        { key: 3, label: `部门`, visible: true },
-        { key: 4, label: `手机号码`, visible: true },
-        { key: 5, label: `状态`, visible: true },
-        { key: 6, label: `创建时间`, visible: true }
-      ],
-      // 表单校验
-      rules: {
-        userName: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ],
-        nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
-        ],
-        password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
-    };
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");
+
+const userList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+const deptName = ref("");
+const deptOptions = ref(undefined);
+const initPassword = ref('123456');//TODO:修改默认密码的加载方式，允许终端用户自定义
+const postOptions = ref([]);
+const roleOptions = ref([]);
+/*** 用户导入参数 */
+const upload = reactive({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: "",
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  updateSupport: 0,
+  // 设置上传的请求头部
+  headers: { Authorization: "Bearer " + getToken() },
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + "system/user/importData"
+});
+// 列显隐信息
+const columns = ref([
+  { key: 0, label: `用户编号`, visible: true },
+  { key: 1, label: `用户名称`, visible: true },
+  { key: 2, label: `用户昵称`, visible: true },
+  { key: 3, label: `部门`, visible: true },
+  { key: 4, label: `手机号码`, visible: true },
+  { key: 5, label: `状态`, visible: true },
+  { key: 6, label: `创建时间`, visible: true }
+]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined
   },
-  watch: {
-    // 根据名称筛选部门树
-    deptName(val) {
-      this.$refs.tree.filter(val);
-    }
-  },
-  created() {
-    this.getList();
-    this.getDeptTree();
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg;
-    });
-  },
-  methods: {
-    /** 查询用户列表 */
-    getList() {
-      this.loading = true;
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    /** 查询部门下拉树结构 */
-    getDeptTree() {
-      deptTreeSelect().then(response => {
-        this.deptOptions = response.data;
-      });
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id;
-      this.handleQuery();
-    },
-    // 用户状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
-        return changeUserStatus(row.userId, row.status);
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0";
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        userId: undefined,
-        deptId: undefined,
-        userName: undefined,
-        nickName: undefined,
-        password: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.queryParams.deptId = undefined;
-      this.$refs.tree.setCurrentKey(null);
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleResetPwd":
-          this.handleResetPwd(row);
-          break;
-        case "handleAuthRole":
-          this.handleAuthRole(row);
-          break;
-        default:
-          break;
-      }
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      getUser().then(response => {
-        this.postOptions = response.posts;
-        this.roleOptions = response.roles;
-        this.open = true;
-        this.title = "添加用户";
-        this.form.password = this.initPassword;
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const userId = row.userId || this.ids;
-      getUser(userId).then(response => {
-        this.form = response.data;
-        this.postOptions = response.posts;
-        this.roleOptions = response.roles;
-        this.$set(this.form, "postIds", response.postIds);
-        this.$set(this.form, "roleIds", response.roleIds);
-        this.open = true;
-        this.title = "修改用户";
-        this.form.password = "";
-      });
-    },
-    /** 重置密码按钮操作 */
-    handleResetPwd(row) {
-      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
-      }).then(({ value }) => {
-          resetUserPwd(row.userId, value).then(response => {
-            this.$modal.msgSuccess("修改成功，新密码是：" + value);
-          });
-        }).catch(() => {});
-    },
-    /** 分配角色操作 */
-    handleAuthRole: function(row) {
-      const userId = row.userId;
-      this.$router.push("/system/user-auth/role/" + userId);
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.userId != undefined) {
-            updateUser(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addUser(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const userIds = row.userId || this.ids;
-      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
-        return delUser(userIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/user/export', {
-        ...this.queryParams
-      }, `user_${new Date().getTime()}.xlsx`)
-    },
-    /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "用户导入";
-      this.upload.open = true;
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      this.download('system/user/importTemplate', {
-      }, `user_template_${new Date().getTime()}.xlsx`)
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
-      this.getList();
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit();
-    }
+  rules: {
+    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
+    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }],
+    email: [{ type: "email", message: "'请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 通过条件过滤节点  */
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watch(deptName, val => {
+  proxy.$refs["deptTreeRef"].filter(val);
+});
+/** 查询部门下拉树结构 */
+function getTreeselect() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data;
+  });
+};
+/** 查询用户列表 */
+function getList() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false;
+    userList.value = res.rows;
+    total.value = res.total;
+  });
+};
+/** 节点单击事件 */
+function handleNodeClick(data) {
+  queryParams.value.deptId = data.id;
+  handleQuery();
+};
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+};
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+};
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/user/export", {
+    ...queryParams.value,
+  },`user_${new Date().getTime()}.xlsx`);
+};
+/** 用户状态修改  */
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用";
+  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
+    return changeUserStatus(row.userId, row.status);
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功");
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0";
+  });
+};
+/** 更多操作 */
+function handleCommand(command, row) {
+  switch (command) {
+    case "handleResetPwd":
+      handleResetPwd(row);
+      break;
+    case "handleAuthRole":
+      handleAuthRole(row);
+      break;
+    default:
+      break;
   }
 };
-</script>
\ No newline at end of file
+/** 跳转角色分配 */
+function handleAuthRole(row) {
+  const userId = row.userId;
+  //console.log("userId ="+userId);
+  router.push("/system/user-auth/role/" + userId);
+};
+/** 重置密码按钮操作 */
+function handleResetPwd(row) {
+  proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    closeOnClickModal: false,
+    inputPattern: /^.{5,20}$/,
+    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
+  }).then(({ value }) => {
+    resetUserPwd(row.userId, value).then(response => {
+      proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
+    });
+  }).catch(() => {});
+};
+/** 选择条数  */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.userId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+/** 导入按钮操作 */
+function handleImport() {
+  upload.title = "用户导入";
+  upload.open = true;
+};
+/** 下载模板操作 */
+function importTemplate() {
+  proxy.download("system/user/importTemplate", {
+  }, `user_template_${new Date().getTime()}.xlsx`);
+};
+/**文件上传中处理 */
+const handleFileUploadProgress = (event, file, fileList) => {
+  upload.isUploading = true;
+};
+/** 文件上传成功处理 */
+const handleFileSuccess = (response, file, fileList) => {
+  upload.open = false;
+  upload.isUploading = false;
+  proxy.$refs["uploadRef"].clearFiles();
+  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+  getList();
+};
+/** 提交上传文件 */
+function submitFileForm() {
+  proxy.$refs["uploadRef"].submit();
+};
+/** 初始化部门数据 */
+function initTreeData() {
+  // 判断部门的数据是否存在，存在不获取，不存在则获取
+  if (deptOptions.value === undefined) {
+    treeselect().then(response => {
+      deptOptions.value = response.data;
+    });
+  }
+};
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  };
+  proxy.resetForm("userRef");
+};
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+};
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  initTreeData();
+  getUser().then(response => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    open.value = true;
+    title.value = "添加用户";
+    form.password.value = initPassword.value;
+  });
+};
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  initTreeData();
+  const userId = row.userId || ids.value;
+  getUser(userId).then(response => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    open.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+};
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["userRef"].validate(valid => {
+    if (valid) {
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+};
+
+getTreeselect();
+getList();
+//TODO:加载终端用户自定义的默认密码
+// proxy.getConfigKey("sys.user.initPassword").then(response => {
+//   this.initPassword = response.msg;
+// });
+
+</script>
diff --git a/ruoyi-ui/src/views/system/user/profile/index.vue b/ruoyi-ui/src/views/system/user/profile/index.vue
index ad530f9..e5aeef0 100644
--- a/ruoyi-ui/src/views/system/user/profile/index.vue
+++ b/ruoyi-ui/src/views/system/user/profile/index.vue
@@ -3,37 +3,39 @@
     <el-row :gutter="20">
       <el-col :span="6" :xs="24">
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>个人信息</span>
-          </div>
+          <template v-slot:header>
+            <div class="clearfix">
+              <span>个人信息</span>
+            </div>
+          </template>
           <div>
             <div class="text-center">
-              <userAvatar :user="user" />
+              <userAvatar :user="state.user" />
             </div>
             <ul class="list-group list-group-striped">
               <li class="list-group-item">
                 <svg-icon icon-class="user" />用户名称
-                <div class="pull-right">{{ user.userName }}</div>
+                <div class="pull-right">{{ state.user.userName }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="phone" />手机号码
-                <div class="pull-right">{{ user.phonenumber }}</div>
+                <div class="pull-right">{{ state.user.phonenumber }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="email" />用户邮箱
-                <div class="pull-right">{{ user.email }}</div>
+                <div class="pull-right">{{ state.user.email }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="tree" />所属部门
-                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
+                <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="peoples" />所属角色
-                <div class="pull-right">{{ roleGroup }}</div>
+                <div class="pull-right">{{ state.roleGroup }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="date" />创建日期
-                <div class="pull-right">{{ user.createTime }}</div>
+                <div class="pull-right">{{ state.user.createTime }}</div>
               </li>
             </ul>
           </div>
@@ -41,15 +43,17 @@
       </el-col>
       <el-col :span="18" :xs="24">
         <el-card>
-          <div slot="header" class="clearfix">
-            <span>基本资料</span>
-          </div>
+          <template v-slot:header>
+            <div class="clearfix">
+              <span>基本资料</span>
+            </div>
+          </template>
           <el-tabs v-model="activeTab">
             <el-tab-pane label="基本资料" name="userinfo">
-              <userInfo :user="user" />
+              <userInfo :user="state.user" />
             </el-tab-pane>
             <el-tab-pane label="修改密码" name="resetPwd">
-              <resetPwd />
+              <resetPwd :user="state.user" />
             </el-tab-pane>
           </el-tabs>
         </el-card>
@@ -58,34 +62,26 @@
   </div>
 </template>
 
-<script>
-import userAvatar from "./userAvatar";
-import userInfo from "./userInfo";
-import resetPwd from "./resetPwd";
+<script setup>
+import userAvatar from "./userAvatar.vue";
+import userInfo from "./userInfo.vue";
+import resetPwd from "./resetPwd.vue";
 import { getUserProfile } from "@/api/system/user";
 
-export default {
-  name: "Profile",
-  components: { userAvatar, userInfo, resetPwd },
-  data() {
-    return {
-      user: {},
-      roleGroup: {},
-      postGroup: {},
-      activeTab: "userinfo"
-    };
-  },
-  created() {
-    this.getUser();
-  },
-  methods: {
-    getUser() {
-      getUserProfile().then(response => {
-        this.user = response.data;
-        this.roleGroup = response.roleGroup;
-        this.postGroup = response.postGroup;
-      });
-    }
-  }
+const activeTab = ref("userinfo");
+const state = reactive({
+  user: {},
+  roleGroup: {},
+  postGroup: {}
+});
+
+function getUser() {
+  getUserProfile().then(response => {
+    state.user = response.data;
+    state.roleGroup = response.roleGroup;
+    state.postGroup = response.postGroup;
+  });
 };
+
+getUser();
 </script>
diff --git a/ruoyi-ui/src/views/system/user/profile/resetPwd.vue b/ruoyi-ui/src/views/system/user/profile/resetPwd.vue
index 64e8f8c..f6fafb4 100644
--- a/ruoyi-ui/src/views/system/user/profile/resetPwd.vue
+++ b/ruoyi-ui/src/views/system/user/profile/resetPwd.vue
@@ -1,68 +1,57 @@
 <template>
-  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+  <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
     <el-form-item label="旧密码" prop="oldPassword">
-      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
+      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
     </el-form-item>
     <el-form-item label="新密码" prop="newPassword">
-      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
+      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
     </el-form-item>
     <el-form-item label="确认密码" prop="confirmPassword">
-      <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
+      <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" show-password/>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" size="mini" @click="submit">保存</el-button>
-      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button type="danger" @click="close">关闭</el-button>
     </el-form-item>
   </el-form>
 </template>
 
-<script>
-import { updateUserPwd } from "@/api/system/user";
+<script setup>
+import { updateUserPwd } from "@/api/system/user"
 
-export default {
-  data() {
-    const equalToPassword = (rule, value, callback) => {
-      if (this.user.newPassword !== value) {
-        callback(new Error("两次输入的密码不一致"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      user: {
-        oldPassword: undefined,
-        newPassword: undefined,
-        confirmPassword: undefined
-      },
-      // 表单校验
-      rules: {
-        oldPassword: [
-          { required: true, message: "旧密码不能为空", trigger: "blur" }
-        ],
-        newPassword: [
-          { required: true, message: "新密码不能为空", trigger: "blur" },
-          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
-        ],
-        confirmPassword: [
-          { required: true, message: "确认密码不能为空", trigger: "blur" },
-          { required: true, validator: equalToPassword, trigger: "blur" }
-        ]
-      }
-    };
-  },
-  methods: {
-    submit() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
-            this.$modal.msgSuccess("修改成功");
-          });
-        }
-      });
-    },
-    close() {
-      this.$tab.closePage();
-    }
+const { proxy } = getCurrentInstance()
+
+const user = reactive({
+  oldPassword: undefined,
+  newPassword: undefined,
+  confirmPassword: undefined
+})
+
+const equalToPassword = (rule, value, callback) => {
+  if (user.newPassword !== value) {
+    callback(new Error("两次输入的密码不一致"));
+  } else {
+    callback();
   }
-};
+}
+const rules = ref({
+  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
+  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],
+  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
+})
+
+/** 提交按钮 */
+function submit() {
+  proxy.$refs.pwdRef.validate(valid => {
+    if (valid) {
+      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
+        proxy.$modal.msgSuccess("修改成功");
+      });
+    }
+  });
+}
+/** 关闭按钮 */
+function close() {
+  proxy.$tab.closePage();
+}
 </script>
diff --git a/ruoyi-ui/src/views/system/user/profile/userAvatar.vue b/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
index 70d8487..f225840 100644
--- a/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
+++ b/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
@@ -1,166 +1,139 @@
 <template>
-  <div>
-    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
-      <el-row>
-        <el-col :xs="24" :md="12" :style="{height: '350px'}">
-          <vue-cropper
-            ref="cropper"
-            :img="options.img"
-            :info="true"
-            :autoCrop="options.autoCrop"
-            :autoCropWidth="options.autoCropWidth"
-            :autoCropHeight="options.autoCropHeight"
-            :fixedBox="options.fixedBox"
-            :outputType="options.outputType"
-            @realTime="realTime"
-            v-if="visible"
-          />
-        </el-col>
-        <el-col :xs="24" :md="12" :style="{height: '350px'}">
-          <div class="avatar-upload-preview">
-            <img :src="previews.url" :style="previews.img" />
-          </div>
-        </el-col>
-      </el-row>
-      <br />
-      <el-row>
-        <el-col :lg="2" :sm="3" :xs="3">
-          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
-            <el-button size="small">
-              选择
-              <i class="el-icon-upload el-icon--right"></i>
-            </el-button>
-          </el-upload>
-        </el-col>
-        <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
-          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
-        </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
-          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
-        </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
-          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
-        </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
-          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
-        </el-col>
-        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
-          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
-        </el-col>
-      </el-row>
-    </el-dialog>
-  </div>
+  <div class="user-info-head" @click="editCropper()"><img :src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
+  <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
+    <el-row>
+      <el-col :xs="24" :md="12" :style="{height: '350px'}">
+        <vue-cropper
+          ref="cropper"
+          :img="options.img"
+          :info="true"
+          :autoCrop="options.autoCrop"
+          :autoCropWidth="options.autoCropWidth"
+          :autoCropHeight="options.autoCropHeight"
+          :fixedBox="options.fixedBox"
+          @realTime="realTime"
+          v-if="visible"
+        />
+      </el-col>
+      <el-col :xs="24" :md="12" :style="{height: '350px'}">
+        <div class="avatar-upload-preview">
+          <img :src="options.previews.url" :style="options.previews.img"/>
+        </div>
+      </el-col>
+    </el-row>
+    <br/>
+    <el-row>
+      <el-col :lg="2" :md="2">
+        <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+          <el-button>
+            选择
+            <el-icon class="el-icon--right"><Upload /></el-icon>
+          </el-button>
+        </el-upload>
+      </el-col>
+      <el-col :lg="{span: 1, offset: 2}" :md="2">
+        <el-button icon="Plus" @click="changeScale(1)"></el-button>
+      </el-col>
+      <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-button icon="Minus" @click="changeScale(-1)"></el-button>
+      </el-col>
+      <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
+      </el-col>
+      <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
+      </el-col>
+      <el-col :lg="{span: 2, offset: 6}" :md="2">
+        <el-button type="primary" @click="uploadImg()">提 交</el-button>
+      </el-col>
+    </el-row>
+  </el-dialog>
 </template>
 
-<script>
-import store from "@/store";
+<script setup>
+import "vue-cropper/dist/index.css";
 import { VueCropper } from "vue-cropper";
 import { uploadAvatar } from "@/api/system/user";
-import { debounce } from '@/utils'
 
-export default {
-  components: { VueCropper },
-  props: {
-    user: {
-      type: Object
-    }
-  },
-  data() {
-    return {
-      // 是否显示弹出层
-      open: false,
-      // 是否显示cropper
-      visible: false,
-      // 弹出层标题
-      title: "修改头像",
-      options: {
-        img: store.getters.avatar, //裁剪图片的地址
-        autoCrop: true, // 是否默认生成截图框
-        autoCropWidth: 200, // 默认生成截图框宽度
-        autoCropHeight: 200, // 默认生成截图框高度
-        fixedBox: true, // 固定截图框大小 不允许改变
-        outputType:"png" // 默认生成截图为PNG格式
-      },
-      previews: {},
-      resizeHandler: null
+const store = useStore();
+const { proxy } = getCurrentInstance();
+
+const open = ref(false);
+const visible = ref(false);
+const title = ref("修改头像");
+
+//图片裁剪数据
+const options = reactive({
+  img: store.getters.avatar, // 裁剪图片的地址
+  autoCrop: true, // 是否默认生成截图框
+  autoCropWidth: 200, // 默认生成截图框宽度
+  autoCropHeight: 200, // 默认生成截图框高度
+  fixedBox: true, // 固定截图框大小 不允许改变
+  previews: {} //预览数据
+});
+
+/** 编辑头像 */
+function editCropper() {
+  open.value = true;
+};
+/** 打开弹出层结束时的回调 */
+function modalOpened() {
+  visible.value = true;
+};
+/** 覆盖默认上传行为 */
+function requestUpload() {
+};
+/** 向左旋转 */
+function rotateLeft() {
+  proxy.$refs.cropper.rotateLeft();
+};
+/** 向右旋转 */
+function rotateRight() {
+  proxy.$refs.cropper.rotateRight();
+};
+/** 图片缩放 */
+function changeScale(num) {
+  num = num || 1;
+  proxy.$refs.cropper.changeScale(num);
+};
+/** 上传预处理 */
+function beforeUpload(file) {
+  if (file.type.indexOf("image/") == -1) {
+    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+  } else {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      options.img = reader.result;
     };
-  },
-  methods: {
-    // 编辑头像
-    editCropper() {
-      this.open = true;
-    },
-    // 打开弹出层结束时的回调
-    modalOpened() {
-      this.visible = true;
-      if (!this.resizeHandler) {
-        this.resizeHandler = debounce(() => {
-          this.refresh()
-        }, 100)
-      }
-      window.addEventListener("resize", this.resizeHandler)
-    },
-    // 刷新组件
-    refresh() {
-      this.$refs.cropper.refresh();
-    },
-    // 覆盖默认的上传行为
-    requestUpload() {
-    },
-    // 向左旋转
-    rotateLeft() {
-      this.$refs.cropper.rotateLeft();
-    },
-    // 向右旋转
-    rotateRight() {
-      this.$refs.cropper.rotateRight();
-    },
-    // 图片缩放
-    changeScale(num) {
-      num = num || 1;
-      this.$refs.cropper.changeScale(num);
-    },
-    // 上传预处理
-    beforeUpload(file) {
-      if (file.type.indexOf("image/") == -1) {
-        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
-      } else {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = () => {
-          this.options.img = reader.result;
-        };
-      }
-    },
-    // 上传图片
-    uploadImg() {
-      this.$refs.cropper.getCropBlob(data => {
-        let formData = new FormData();
-        formData.append("avatarfile", data);
-        uploadAvatar(formData).then(response => {
-          this.open = false;
-          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
-          store.commit('SET_AVATAR', this.options.img);
-          this.$modal.msgSuccess("修改成功");
-          this.visible = false;
-        });
-      });
-    },
-    // 实时预览
-    realTime(data) {
-      this.previews = data;
-    },
-    // 关闭窗口
-    closeDialog() {
-      this.options.img = store.getters.avatar
-      this.visible = false;
-      window.removeEventListener("resize", this.resizeHandler)
-    }
   }
 };
+/** 上传图片 */
+function uploadImg() {
+  proxy.$refs.cropper.getCropBlob(data => {
+    let formData = new FormData();
+    formData.append("avatarfile", data);
+    uploadAvatar(formData).then(response => {
+      open.value = false;
+      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;
+      store.commit("SET_AVATAR", options.img);
+      proxy.$modal.msgSuccess("修改成功");
+      visible.value = false;
+    });
+  });
+};
+/** 实时预览 */
+function realTime(data) {
+  options.previews = data;
+};
+/** 关闭窗口 */
+function closeDialog() {
+  options.img = store.getters.avatar;
+  options.visible = false;
+};
 </script>
-<style scoped lang="scss">
+
+<style lang='scss' scoped>
 .user-info-head {
   position: relative;
   display: inline-block;
@@ -168,7 +141,7 @@ export default {
 }
 
 .user-info-head:hover:after {
-  content: '+';
+  content: "+";
   position: absolute;
   left: 0;
   right: 0;
diff --git a/ruoyi-ui/src/views/system/user/profile/userInfo.vue b/ruoyi-ui/src/views/system/user/profile/userInfo.vue
index c09a20b..06d1433 100644
--- a/ruoyi-ui/src/views/system/user/profile/userInfo.vue
+++ b/ruoyi-ui/src/views/system/user/profile/userInfo.vue
@@ -1,8 +1,8 @@
 <template>
-  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+  <el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
     <el-form-item label="用户昵称" prop="nickName">
       <el-input v-model="user.nickName" maxlength="30" />
-    </el-form-item> 
+    </el-form-item>
     <el-form-item label="手机号码" prop="phonenumber">
       <el-input v-model="user.phonenumber" maxlength="11" />
     </el-form-item>
@@ -16,60 +16,41 @@
       </el-radio-group>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" size="mini" @click="submit">保存</el-button>
-      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button type="danger" @click="close">关闭</el-button>
     </el-form-item>
   </el-form>
 </template>
 
-<script>
+<script setup>
 import { updateUserProfile } from "@/api/system/user";
 
-export default {
-  props: {
-    user: {
-      type: Object
-    }
-  },
-  data() {
-    return {
-      // 表单校验
-      rules: {
-        nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
-        ],
-        email: [
-          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          { required: true, message: "手机号码不能为空", trigger: "blur" },
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
-    };
-  },
-  methods: {
-    submit() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          updateUserProfile(this.user).then(response => {
-            this.$modal.msgSuccess("修改成功");
-          });
-        }
-      });
-    },
-    close() {
-      this.$tab.closePage();
-    }
+const props = defineProps({
+  user: {
+    type: Object
   }
+});
+
+const { proxy } = getCurrentInstance();
+
+const rules = ref({
+  nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+  email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "'请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+  phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
+});
+
+/** 提交按钮 */
+function submit() {
+  proxy.$refs.userRef.validate(valid => {
+    if (valid) {
+      updateUserProfile(props.user).then(response => {
+        proxy.$modal.msgSuccess("修改成功");
+      });
+    }
+  });
+};
+/** 关闭按钮 */
+function close() {
+  proxy.$tab.closePage();
 };
 </script>
diff --git a/ruoyi-ui/src/views/tool/build/CodeTypeDialog.vue b/ruoyi-ui/src/views/tool/build/CodeTypeDialog.vue
deleted file mode 100644
index b5c2e2e..0000000
--- a/ruoyi-ui/src/views/tool/build/CodeTypeDialog.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <div>
-    <el-dialog
-      v-bind="$attrs"
-      width="500px"
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      v-on="$listeners"
-      @open="onOpen"
-      @close="onClose"
-    >
-      <el-row :gutter="15">
-        <el-form
-          ref="elForm"
-          :model="formData"
-          :rules="rules"
-          size="medium"
-          label-width="100px"
-        >
-          <el-col :span="24">
-            <el-form-item label="生成类型" prop="type">
-              <el-radio-group v-model="formData.type">
-                <el-radio-button
-                  v-for="(item, index) in typeOptions"
-                  :key="index"
-                  :label="item.value"
-                  :disabled="item.disabled"
-                >
-                  {{ item.label }}
-                </el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item v-if="showFileName" label="文件名" prop="fileName">
-              <el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
-            </el-form-item>
-          </el-col>
-        </el-form>
-      </el-row>
-
-      <div slot="footer">
-        <el-button @click="close">
-          取消
-        </el-button>
-        <el-button type="primary" @click="handleConfirm">
-          确定
-        </el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-export default {
-  inheritAttrs: false,
-  props: ['showFileName'],
-  data() {
-    return {
-      formData: {
-        fileName: undefined,
-        type: 'file'
-      },
-      rules: {
-        fileName: [{
-          required: true,
-          message: '请输入文件名',
-          trigger: 'blur'
-        }],
-        type: [{
-          required: true,
-          message: '生成类型不能为空',
-          trigger: 'change'
-        }]
-      },
-      typeOptions: [{
-        label: '页面',
-        value: 'file'
-      }, {
-        label: '弹窗',
-        value: 'dialog'
-      }]
-    }
-  },
-  computed: {
-  },
-  watch: {},
-  mounted() {},
-  methods: {
-    onOpen() {
-      if (this.showFileName) {
-        this.formData.fileName = `${+new Date()}.vue`
-      }
-    },
-    onClose() {
-    },
-    close(e) {
-      this.$emit('update:visible', false)
-    },
-    handleConfirm() {
-      this.$refs.elForm.validate(valid => {
-        if (!valid) return
-        this.$emit('confirm', { ...this.formData })
-        this.close()
-      })
-    }
-  }
-}
-</script>
diff --git a/ruoyi-ui/src/views/tool/build/DraggableItem.vue b/ruoyi-ui/src/views/tool/build/DraggableItem.vue
deleted file mode 100644
index e881778..0000000
--- a/ruoyi-ui/src/views/tool/build/DraggableItem.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script>
-import draggable from 'vuedraggable'
-import render from '@/utils/generator/render'
-
-const components = {
-  itemBtns(h, element, index, parent) {
-    const { copyItem, deleteItem } = this.$listeners
-    return [
-      <span class="drawing-item-copy" title="复制" onClick={event => {
-        copyItem(element, parent); event.stopPropagation()
-      }}>
-        <i class="el-icon-copy-document" />
-      </span>,
-      <span class="drawing-item-delete" title="删除" onClick={event => {
-        deleteItem(index, parent); event.stopPropagation()
-      }}>
-        <i class="el-icon-delete" />
-      </span>
-    ]
-  }
-}
-const layouts = {
-  colFormItem(h, element, index, parent) {
-    const { activeItem } = this.$listeners
-    let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
-    if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
-    return (
-      <el-col span={element.span} class={className}
-        nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
-        <el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null}
-          label={element.label} required={element.required}>
-          <render key={element.renderKey} conf={element} onInput={ event => {
-            this.$set(element, 'defaultValue', event)
-          }} />
-        </el-form-item>
-        {components.itemBtns.apply(this, arguments)}
-      </el-col>
-    )
-  },
-  rowFormItem(h, element, index, parent) {
-    const { activeItem } = this.$listeners
-    const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item'
-    let child = renderChildren.apply(this, arguments)
-    if (element.type === 'flex') {
-      child = <el-row type={element.type} justify={element.justify} align={element.align}>
-              {child}
-            </el-row>
-    }
-    return (
-      <el-col span={element.span}>
-        <el-row gutter={element.gutter} class={className}
-          nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
-          <span class="component-name">{element.componentName}</span>
-          <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
-            {child}
-          </draggable>
-          {components.itemBtns.apply(this, arguments)}
-        </el-row>
-      </el-col>
-    )
-  }
-}
-
-function renderChildren(h, element, index, parent) {
-  if (!Array.isArray(element.children)) return null
-  return element.children.map((el, i) => {
-    const layout = layouts[el.layout]
-    if (layout) {
-      return layout.call(this, h, el, i, element.children)
-    }
-    return layoutIsNotFound()
-  })
-}
-
-function layoutIsNotFound() {
-  throw new Error(`没有与${this.element.layout}匹配的layout`)
-}
-
-export default {
-  components: {
-    render,
-    draggable
-  },
-  props: [
-    'element',
-    'index',
-    'drawingList',
-    'activeId',
-    'formConf'
-  ],
-  render(h) {
-    const layout = layouts[this.element.layout]
-
-    if (layout) {
-      return layout.call(this, h, this.element, this.index, this.drawingList)
-    }
-    return layoutIsNotFound()
-  }
-}
-</script>
diff --git a/ruoyi-ui/src/views/tool/build/IconsDialog.vue b/ruoyi-ui/src/views/tool/build/IconsDialog.vue
deleted file mode 100644
index 958be50..0000000
--- a/ruoyi-ui/src/views/tool/build/IconsDialog.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <div class="icon-dialog">
-    <el-dialog
-      v-bind="$attrs"
-      width="980px"
-      :modal-append-to-body="false"
-      v-on="$listeners"
-      @open="onOpen"
-      @close="onClose"
-    >
-      <div slot="title">
-        选择图标
-        <el-input
-          v-model="key"
-          size="mini"
-          :style="{width: '260px'}"
-          placeholder="请输入图标名称"
-          prefix-icon="el-icon-search"
-          clearable
-        />
-      </div>
-      <ul class="icon-ul">
-        <li
-          v-for="icon in iconList"
-          :key="icon"
-          :class="active===icon?'active-item':''"
-          @click="onSelect(icon)"
-        >
-          <i :class="icon" />
-          <div>{{ icon }}</div>
-        </li>
-      </ul>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import iconList from '@/utils/generator/icon.json'
-
-const originList = iconList.map(name => `el-icon-${name}`)
-
-export default {
-  inheritAttrs: false,
-  props: ['current'],
-  data() {
-    return {
-      iconList: originList,
-      active: null,
-      key: ''
-    }
-  },
-  watch: {
-    key(val) {
-      if (val) {
-        this.iconList = originList.filter(name => name.indexOf(val) > -1)
-      } else {
-        this.iconList = originList
-      }
-    }
-  },
-  methods: {
-    onOpen() {
-      this.active = this.current
-      this.key = ''
-    },
-    onClose() {},
-    onSelect(icon) {
-      this.active = icon
-      this.$emit('select', icon)
-      this.$emit('update:visible', false)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.icon-ul {
-  margin: 0;
-  padding: 0;
-  font-size: 0;
-  li {
-    list-style-type: none;
-    text-align: center;
-    font-size: 14px;
-    display: inline-block;
-    width: 16.66%;
-    box-sizing: border-box;
-    height: 108px;
-    padding: 15px 6px 6px 6px;
-    cursor: pointer;
-    overflow: hidden;
-    &:hover {
-      background: #f2f2f2;
-    }
-    &.active-item{
-      background: #e1f3fb;
-      color: #7a6df0
-    }
-    > i {
-      font-size: 30px;
-      line-height: 50px;
-    }
-  }
-}
-.icon-dialog {
-  ::v-deep .el-dialog {
-    border-radius: 8px;
-    margin-bottom: 0;
-    margin-top: 4vh !important;
-    display: flex;
-    flex-direction: column;
-    max-height: 92vh;
-    overflow: hidden;
-    box-sizing: border-box;
-    .el-dialog__header {
-      padding-top: 14px;
-    }
-    .el-dialog__body {
-      margin: 0 20px 20px 20px;
-      padding: 0;
-      overflow: auto;
-    }
-  }
-}
-</style>
diff --git a/ruoyi-ui/src/views/tool/build/RightPanel.vue b/ruoyi-ui/src/views/tool/build/RightPanel.vue
deleted file mode 100644
index c2760eb..0000000
--- a/ruoyi-ui/src/views/tool/build/RightPanel.vue
+++ /dev/null
@@ -1,946 +0,0 @@
-<template>
-  <div class="right-board">
-    <el-tabs v-model="currentTab" class="center-tabs">
-      <el-tab-pane label="组件属性" name="field" />
-      <el-tab-pane label="表单属性" name="form" />
-    </el-tabs>
-    <div class="field-box">
-      <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
-        <i class="el-icon-link" />
-      </a>
-      <el-scrollbar class="right-scrollbar">
-        <!-- 组件属性 -->
-        <el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
-          <el-form-item v-if="activeData.changeTag" label="组件类型">
-            <el-select
-              v-model="activeData.tagIcon"
-              placeholder="请选择组件类型"
-              :style="{width: '100%'}"
-              @change="tagChange"
-            >
-              <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
-                <el-option
-                  v-for="item in group.options"
-                  :key="item.label"
-                  :label="item.label"
-                  :value="item.tagIcon"
-                >
-                  <svg-icon class="node-icon" :icon-class="item.tagIcon" />
-                  <span> {{ item.label }}</span>
-                </el-option>
-              </el-option-group>
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="activeData.vModel!==undefined" label="字段名">
-            <el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
-          </el-form-item>
-          <el-form-item v-if="activeData.componentName!==undefined" label="组件名">
-            {{ activeData.componentName }}
-          </el-form-item>
-          <el-form-item v-if="activeData.label!==undefined" label="标题">
-            <el-input v-model="activeData.label" placeholder="请输入标题" />
-          </el-form-item>
-          <el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
-            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
-          </el-form-item>
-          <el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
-            <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
-          </el-form-item>
-          <el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
-            <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
-          </el-form-item>
-          <el-form-item v-if="activeData.span!==undefined" label="表单栅格">
-            <el-slider v-model="activeData.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
-          </el-form-item>
-          <el-form-item v-if="activeData.layout==='rowFormItem'" label="栅格间隔">
-            <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
-          </el-form-item>
-          <el-form-item v-if="activeData.layout==='rowFormItem'" label="布局模式">
-            <el-radio-group v-model="activeData.type">
-              <el-radio-button label="default" />
-              <el-radio-button label="flex" />
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
-            <el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{width: '100%'}">
-              <el-option
-                v-for="(item, index) in justifyOptions"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
-            <el-radio-group v-model="activeData.align">
-              <el-radio-button label="top" />
-              <el-radio-button label="middle" />
-              <el-radio-button label="bottom" />
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="activeData.labelWidth!==undefined" label="标签宽度">
-            <el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
-          </el-form-item>
-          <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
-            <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
-          </el-form-item>
-          <el-form-item v-if="activeData.vModel!==undefined" label="默认值">
-            <el-input
-              :value="setDefaultValue(activeData.defaultValue)"
-              placeholder="请输入默认值"
-              @input="onDefaultValueInput"
-            />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="至少应选">
-            <el-input-number
-              :value="activeData.min"
-              :min="0"
-              placeholder="至少应选"
-              @input="$set(activeData, 'min', $event?$event:undefined)"
-            />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="最多可选">
-            <el-input-number
-              :value="activeData.max"
-              :min="0"
-              placeholder="最多可选"
-              @input="$set(activeData, 'max', $event?$event:undefined)"
-            />
-          </el-form-item>
-          <el-form-item v-if="activeData.prepend!==undefined" label="前缀">
-            <el-input v-model="activeData.prepend" placeholder="请输入前缀" />
-          </el-form-item>
-          <el-form-item v-if="activeData.append!==undefined" label="后缀">
-            <el-input v-model="activeData.append" placeholder="请输入后缀" />
-          </el-form-item>
-          <el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
-            <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
-              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('prefix-icon')">
-                选择
-              </el-button>
-            </el-input>
-          </el-form-item>
-          <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
-            <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
-              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('suffix-icon')">
-                选择
-              </el-button>
-            </el-input>
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
-            <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
-          </el-form-item>
-          <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
-            <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
-          </el-form-item>
-          <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
-            <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
-          </el-form-item>
-          <el-form-item v-if="activeData.min !== undefined" label="最小值">
-            <el-input-number v-model="activeData.min" placeholder="最小值" />
-          </el-form-item>
-          <el-form-item v-if="activeData.max !== undefined" label="最大值">
-            <el-input-number v-model="activeData.max" placeholder="最大值" />
-          </el-form-item>
-          <el-form-item v-if="activeData.step !== undefined" label="步长">
-            <el-input-number v-model="activeData.step" placeholder="步数" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
-            <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
-            <el-radio-group v-model="activeData['controls-position']">
-              <el-radio-button label="">
-                默认
-              </el-radio-button>
-              <el-radio-button label="right">
-                右侧
-              </el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
-            <el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
-              <template slot="append">
-                个字符
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
-            <el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
-          </el-form-item>
-          <el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
-            <el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
-          </el-form-item>
-          <el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
-            <el-input
-              :value="setDefaultValue(activeData['active-value'])"
-              placeholder="请输入开启值"
-              @input="onSwitchValueInput($event, 'active-value')"
-            />
-          </el-form-item>
-          <el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
-            <el-input
-              :value="setDefaultValue(activeData['inactive-value'])"
-              placeholder="请输入关闭值"
-              @input="onSwitchValueInput($event, 'inactive-value')"
-            />
-          </el-form-item>
-          <el-form-item
-            v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
-            label="时间类型"
-          >
-            <el-select
-              v-model="activeData.type"
-              placeholder="请选择时间类型"
-              :style="{ width: '100%' }"
-              @change="dateTypeChange"
-            >
-              <el-option
-                v-for="(item, index) in dateOptions"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="activeData.name !== undefined" label="文件字段名">
-            <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
-          </el-form-item>
-          <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
-            <el-select
-              v-model="activeData.accept"
-              placeholder="请选择文件类型"
-              :style="{ width: '100%' }"
-              clearable
-            >
-              <el-option label="图片" value="image/*" />
-              <el-option label="视频" value="video/*" />
-              <el-option label="音频" value="audio/*" />
-              <el-option label="excel" value=".xls,.xlsx" />
-              <el-option label="word" value=".doc,.docx" />
-              <el-option label="pdf" value=".pdf" />
-              <el-option label="txt" value=".txt" />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
-            <el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
-              <el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
-                <el-option label="KB" value="KB" />
-                <el-option label="MB" value="MB" />
-                <el-option label="GB" value="GB" />
-              </el-select>
-            </el-input>
-          </el-form-item>
-          <el-form-item v-if="activeData.action !== undefined" label="上传地址">
-            <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />
-          </el-form-item>
-          <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
-            <el-radio-group v-model="activeData['list-type']" size="small">
-              <el-radio-button label="text">
-                text
-              </el-radio-button>
-              <el-radio-button label="picture">
-                picture
-              </el-radio-button>
-              <el-radio-button label="picture-card">
-                picture-card
-              </el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item
-            v-if="activeData.buttonText !== undefined"
-            v-show="'picture-card' !== activeData['list-type']"
-            label="按钮文字"
-          >
-            <el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
-          </el-form-item>
-          <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
-            <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
-          </el-form-item>
-          <el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
-            <el-input
-              v-model="activeData['picker-options'].selectableRange"
-              placeholder="请输入时间段"
-            />
-          </el-form-item>
-          <el-form-item v-if="activeData.format !== undefined" label="时间格式">
-            <el-input
-              :value="activeData.format"
-              placeholder="请输入时间格式"
-              @input="setTimeValue($event)"
-            />
-          </el-form-item>
-          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
-            <el-divider>选项</el-divider>
-            <draggable
-              :list="activeData.options"
-              :animation="340"
-              group="selectItem"
-              handle=".option-drag"
-            >
-              <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
-                <div class="select-line-icon option-drag">
-                  <i class="el-icon-s-operation" />
-                </div>
-                <el-input v-model="item.label" placeholder="选项名" size="small" />
-                <el-input
-                  placeholder="选项值"
-                  size="small"
-                  :value="item.value"
-                  @input="setOptionValue(item, $event)"
-                />
-                <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
-                  <i class="el-icon-remove-outline" />
-                </div>
-              </div>
-            </draggable>
-            <div style="margin-left: 20px;">
-              <el-button
-                style="padding-bottom: 0"
-                icon="el-icon-circle-plus-outline"
-                type="text"
-                @click="addSelectItem"
-              >
-                添加选项
-              </el-button>
-            </div>
-            <el-divider />
-          </template>
-
-          <template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
-            <el-divider>选项</el-divider>
-            <el-form-item label="数据类型">
-              <el-radio-group v-model="activeData.dataType" size="small">
-                <el-radio-button label="dynamic">
-                  动态数据
-                </el-radio-button>
-                <el-radio-button label="static">
-                  静态数据
-                </el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-
-            <template v-if="activeData.dataType === 'dynamic'">
-              <el-form-item label="标签键名">
-                <el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
-              </el-form-item>
-              <el-form-item label="值键名">
-                <el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
-              </el-form-item>
-              <el-form-item label="子级键名">
-                <el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
-              </el-form-item>
-            </template>
-
-            <el-tree
-              v-if="activeData.dataType === 'static'"
-              draggable
-              :data="activeData.options"
-              node-key="id"
-              :expand-on-click-node="false"
-              :render-content="renderContent"
-            />
-            <div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
-              <el-button
-                style="padding-bottom: 0"
-                icon="el-icon-circle-plus-outline"
-                type="text"
-                @click="addTreeItem"
-              >
-                添加父级
-              </el-button>
-            </div>
-            <el-divider />
-          </template>
-
-          <el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
-            <el-radio-group v-model="activeData.optionType">
-              <el-radio-button label="default">
-                默认
-              </el-radio-button>
-              <el-radio-button label="button">
-                按钮
-              </el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
-            <el-color-picker v-model="activeData['active-color']" />
-          </el-form-item>
-          <el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
-            <el-color-picker v-model="activeData['inactive-color']" />
-          </el-form-item>
-
-          <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
-            <el-switch v-model="activeData['allow-half']" />
-          </el-form-item>
-          <el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
-            <el-switch v-model="activeData['show-text']" @change="rateTextChange" />
-          </el-form-item>
-          <el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
-            <el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
-          </el-form-item>
-          <el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
-            <el-switch v-model="activeData['show-stops']" />
-          </el-form-item>
-          <el-form-item v-if="activeData.range !== undefined" label="范围选择">
-            <el-switch v-model="activeData.range" @change="rangeChange" />
-          </el-form-item>
-          <el-form-item
-            v-if="activeData.border !== undefined && activeData.optionType === 'default'"
-            label="是否带边框"
-          >
-            <el-switch v-model="activeData.border" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
-            <el-select
-              v-model="activeData['color-format']"
-              placeholder="请选择颜色格式"
-              :style="{ width: '100%' }"
-              @change="colorFormatChange"
-            >
-              <el-option
-                v-for="(item, index) in colorFormatOptions"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            v-if="activeData.size !== undefined &&
-              (activeData.optionType === 'button' ||
-                activeData.border ||
-                activeData.tag === 'el-color-picker')"
-            label="选项尺寸"
-          >
-            <el-radio-group v-model="activeData.size">
-              <el-radio-button label="medium">
-                中等
-              </el-radio-button>
-              <el-radio-button label="small">
-                较小
-              </el-radio-button>
-              <el-radio-button label="mini">
-                迷你
-              </el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
-            <el-switch v-model="activeData['show-word-limit']" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
-            <el-switch v-model="activeData['step-strictly']" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
-            <el-switch v-model="activeData.props.props.multiple" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
-            <el-switch v-model="activeData['show-all-levels']" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
-            <el-switch v-model="activeData.filterable" />
-          </el-form-item>
-          <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
-            <el-switch v-model="activeData.clearable" />
-          </el-form-item>
-          <el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
-            <el-switch v-model="activeData.showTip" />
-          </el-form-item>
-          <el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
-            <el-switch v-model="activeData.multiple" />
-          </el-form-item>
-          <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
-            <el-switch v-model="activeData['auto-upload']" />
-          </el-form-item>
-          <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
-            <el-switch v-model="activeData.readonly" />
-          </el-form-item>
-          <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
-            <el-switch v-model="activeData.disabled" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
-            <el-switch v-model="activeData.filterable" />
-          </el-form-item>
-          <el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
-            <el-switch v-model="activeData.multiple" @change="multipleChange" />
-          </el-form-item>
-          <el-form-item v-if="activeData.required !== undefined" label="是否必填">
-            <el-switch v-model="activeData.required" />
-          </el-form-item>
-
-          <template v-if="activeData.layoutTree">
-            <el-divider>布局结构树</el-divider>
-            <el-tree
-              :data="[activeData]"
-              :props="layoutTreeProps"
-              node-key="renderKey"
-              default-expand-all
-              draggable
-            >
-              <span slot-scope="{ node, data }">
-                <span class="node-label">
-                  <svg-icon class="node-icon" :icon-class="data.tagIcon" />
-                  {{ node.label }}
-                </span>
-              </span>
-            </el-tree>
-          </template>
-
-          <template v-if="activeData.layout === 'colFormItem' && activeData.tag !== 'el-button'">
-            <el-divider>正则校验</el-divider>
-            <div
-              v-for="(item, index) in activeData.regList"
-              :key="index"
-              class="reg-item"
-            >
-              <span class="close-btn" @click="activeData.regList.splice(index, 1)">
-                <i class="el-icon-close" />
-              </span>
-              <el-form-item label="表达式">
-                <el-input v-model="item.pattern" placeholder="请输入正则" />
-              </el-form-item>
-              <el-form-item label="错误提示" style="margin-bottom:0">
-                <el-input v-model="item.message" placeholder="请输入错误提示" />
-              </el-form-item>
-            </div>
-            <div style="margin-left: 20px">
-              <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
-                添加规则
-              </el-button>
-            </div>
-          </template>
-        </el-form>
-        <!-- 表单属性 -->
-        <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
-          <el-form-item label="表单名">
-            <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
-          </el-form-item>
-          <el-form-item label="表单模型">
-            <el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
-          </el-form-item>
-          <el-form-item label="校验模型">
-            <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
-          </el-form-item>
-          <el-form-item label="表单尺寸">
-            <el-radio-group v-model="formConf.size">
-              <el-radio-button label="medium">
-                中等
-              </el-radio-button>
-              <el-radio-button label="small">
-                较小
-              </el-radio-button>
-              <el-radio-button label="mini">
-                迷你
-              </el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="标签对齐">
-            <el-radio-group v-model="formConf.labelPosition">
-              <el-radio-button label="left">
-                左对齐
-              </el-radio-button>
-              <el-radio-button label="right">
-                右对齐
-              </el-radio-button>
-              <el-radio-button label="top">
-                顶部对齐
-              </el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="标签宽度">
-            <el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
-          </el-form-item>
-          <el-form-item label="栅格间隔">
-            <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
-          </el-form-item>
-          <el-form-item label="禁用表单">
-            <el-switch v-model="formConf.disabled" />
-          </el-form-item>
-          <el-form-item label="表单按钮">
-            <el-switch v-model="formConf.formBtns" />
-          </el-form-item>
-          <el-form-item label="显示未选中组件边框">
-            <el-switch v-model="formConf.unFocusedComponentBorder" />
-          </el-form-item>
-        </el-form>
-      </el-scrollbar>
-    </div>
-
-    <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
-    <icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
-  </div>
-</template>
-
-<script>
-import { isArray } from 'util'
-import draggable from 'vuedraggable'
-import TreeNodeDialog from './TreeNodeDialog'
-import { isNumberStr } from '@/utils/index'
-import IconsDialog from './IconsDialog'
-import {
-  inputComponents,
-  selectComponents,
-  layoutComponents
-} from '@/utils/generator/config'
-
-const dateTimeFormat = {
-  date: 'yyyy-MM-dd',
-  week: 'yyyy 第 WW 周',
-  month: 'yyyy-MM',
-  year: 'yyyy',
-  datetime: 'yyyy-MM-dd HH:mm:ss',
-  daterange: 'yyyy-MM-dd',
-  monthrange: 'yyyy-MM',
-  datetimerange: 'yyyy-MM-dd HH:mm:ss'
-}
-
-export default {
-  components: {
-    draggable,
-    TreeNodeDialog,
-    IconsDialog
-  },
-  props: ['showField', 'activeData', 'formConf'],
-  data() {
-    return {
-      currentTab: 'field',
-      currentNode: null,
-      dialogVisible: false,
-      iconsVisible: false,
-      currentIconModel: null,
-      dateTypeOptions: [
-        {
-          label: '日(date)',
-          value: 'date'
-        },
-        {
-          label: '周(week)',
-          value: 'week'
-        },
-        {
-          label: '月(month)',
-          value: 'month'
-        },
-        {
-          label: '年(year)',
-          value: 'year'
-        },
-        {
-          label: '日期时间(datetime)',
-          value: 'datetime'
-        }
-      ],
-      dateRangeTypeOptions: [
-        {
-          label: '日期范围(daterange)',
-          value: 'daterange'
-        },
-        {
-          label: '月范围(monthrange)',
-          value: 'monthrange'
-        },
-        {
-          label: '日期时间范围(datetimerange)',
-          value: 'datetimerange'
-        }
-      ],
-      colorFormatOptions: [
-        {
-          label: 'hex',
-          value: 'hex'
-        },
-        {
-          label: 'rgb',
-          value: 'rgb'
-        },
-        {
-          label: 'rgba',
-          value: 'rgba'
-        },
-        {
-          label: 'hsv',
-          value: 'hsv'
-        },
-        {
-          label: 'hsl',
-          value: 'hsl'
-        }
-      ],
-      justifyOptions: [
-        {
-          label: 'start',
-          value: 'start'
-        },
-        {
-          label: 'end',
-          value: 'end'
-        },
-        {
-          label: 'center',
-          value: 'center'
-        },
-        {
-          label: 'space-around',
-          value: 'space-around'
-        },
-        {
-          label: 'space-between',
-          value: 'space-between'
-        }
-      ],
-      layoutTreeProps: {
-        label(data, node) {
-          return data.componentName || `${data.label}: ${data.vModel}`
-        }
-      }
-    }
-  },
-  computed: {
-    documentLink() {
-      return (
-        this.activeData.document
-        || 'https://element.eleme.cn/#/zh-CN/component/installation'
-      )
-    },
-    dateOptions() {
-      if (
-        this.activeData.type !== undefined
-        && this.activeData.tag === 'el-date-picker'
-      ) {
-        if (this.activeData['start-placeholder'] === undefined) {
-          return this.dateTypeOptions
-        }
-        return this.dateRangeTypeOptions
-      }
-      return []
-    },
-    tagList() {
-      return [
-        {
-          label: '输入型组件',
-          options: inputComponents
-        },
-        {
-          label: '选择型组件',
-          options: selectComponents
-        }
-      ]
-    }
-  },
-  methods: {
-    addReg() {
-      this.activeData.regList.push({
-        pattern: '',
-        message: ''
-      })
-    },
-    addSelectItem() {
-      this.activeData.options.push({
-        label: '',
-        value: ''
-      })
-    },
-    addTreeItem() {
-      ++this.idGlobal
-      this.dialogVisible = true
-      this.currentNode = this.activeData.options
-    },
-    renderContent(h, { node, data, store }) {
-      return (
-        <div class="custom-tree-node">
-          <span>{node.label}</span>
-          <span class="node-operation">
-            <i on-click={() => this.append(data)}
-              class="el-icon-plus"
-              title="添加"
-            ></i>
-            <i on-click={() => this.remove(node, data)}
-              class="el-icon-delete"
-              title="删除"
-            ></i>
-          </span>
-        </div>
-      )
-    },
-    append(data) {
-      if (!data.children) {
-        this.$set(data, 'children', [])
-      }
-      this.dialogVisible = true
-      this.currentNode = data.children
-    },
-    remove(node, data) {
-      const { parent } = node
-      const children = parent.data.children || parent.data
-      const index = children.findIndex(d => d.id === data.id)
-      children.splice(index, 1)
-    },
-    addNode(data) {
-      this.currentNode.push(data)
-    },
-    setOptionValue(item, val) {
-      item.value = isNumberStr(val) ? +val : val
-    },
-    setDefaultValue(val) {
-      if (Array.isArray(val)) {
-        return val.join(',')
-      }
-      if (['string', 'number'].indexOf(val) > -1) {
-        return val
-      }
-      if (typeof val === 'boolean') {
-        return `${val}`
-      }
-      return val
-    },
-    onDefaultValueInput(str) {
-      if (isArray(this.activeData.defaultValue)) {
-        // 数组
-        this.$set(
-          this.activeData,
-          'defaultValue',
-          str.split(',').map(val => (isNumberStr(val) ? +val : val))
-        )
-      } else if (['true', 'false'].indexOf(str) > -1) {
-        // 布尔
-        this.$set(this.activeData, 'defaultValue', JSON.parse(str))
-      } else {
-        // 字符串和数字
-        this.$set(
-          this.activeData,
-          'defaultValue',
-          isNumberStr(str) ? +str : str
-        )
-      }
-    },
-    onSwitchValueInput(val, name) {
-      if (['true', 'false'].indexOf(val) > -1) {
-        this.$set(this.activeData, name, JSON.parse(val))
-      } else {
-        this.$set(this.activeData, name, isNumberStr(val) ? +val : val)
-      }
-    },
-    setTimeValue(val, type) {
-      const valueFormat = type === 'week' ? dateTimeFormat.date : val
-      this.$set(this.activeData, 'defaultValue', null)
-      this.$set(this.activeData, 'value-format', valueFormat)
-      this.$set(this.activeData, 'format', val)
-    },
-    spanChange(val) {
-      this.formConf.span = val
-    },
-    multipleChange(val) {
-      this.$set(this.activeData, 'defaultValue', val ? [] : '')
-    },
-    dateTypeChange(val) {
-      this.setTimeValue(dateTimeFormat[val], val)
-    },
-    rangeChange(val) {
-      this.$set(
-        this.activeData,
-        'defaultValue',
-        val ? [this.activeData.min, this.activeData.max] : this.activeData.min
-      )
-    },
-    rateTextChange(val) {
-      if (val) this.activeData['show-score'] = false
-    },
-    rateScoreChange(val) {
-      if (val) this.activeData['show-text'] = false
-    },
-    colorFormatChange(val) {
-      this.activeData.defaultValue = null
-      this.activeData['show-alpha'] = val.indexOf('a') > -1
-      this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
-    },
-    openIconsDialog(model) {
-      this.iconsVisible = true
-      this.currentIconModel = model
-    },
-    setIcon(val) {
-      this.activeData[this.currentIconModel] = val
-    },
-    tagChange(tagIcon) {
-      let target = inputComponents.find(item => item.tagIcon === tagIcon)
-      if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
-      this.$emit('tag-change', target)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.right-board {
-  width: 350px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding-top: 3px;
-  .field-box {
-    position: relative;
-    height: calc(100vh - 42px);
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-  .el-scrollbar {
-    height: 100%;
-  }
-}
-.select-item {
-  display: flex;
-  border: 1px dashed #fff;
-  box-sizing: border-box;
-  & .close-btn {
-    cursor: pointer;
-    color: #f56c6c;
-  }
-  & .el-input + .el-input {
-    margin-left: 4px;
-  }
-}
-.select-item + .select-item {
-  margin-top: 4px;
-}
-.select-item.sortable-chosen {
-  border: 1px dashed #409eff;
-}
-.select-line-icon {
-  line-height: 32px;
-  font-size: 22px;
-  padding: 0 4px;
-  color: #777;
-}
-.option-drag {
-  cursor: move;
-}
-.time-range {
-  .el-date-editor {
-    width: 227px;
-  }
-  ::v-deep .el-icon-time {
-    display: none;
-  }
-}
-.document-link {
-  position: absolute;
-  display: block;
-  width: 26px;
-  height: 26px;
-  top: 0;
-  left: 0;
-  cursor: pointer;
-  background: #409eff;
-  z-index: 1;
-  border-radius: 0 0 6px 0;
-  text-align: center;
-  line-height: 26px;
-  color: #fff;
-  font-size: 18px;
-}
-.node-label{
-  font-size: 14px;
-}
-.node-icon{
-  color: #bebfc3;
-}
-</style>
diff --git a/ruoyi-ui/src/views/tool/build/TreeNodeDialog.vue b/ruoyi-ui/src/views/tool/build/TreeNodeDialog.vue
deleted file mode 100644
index fa7f0b2..0000000
--- a/ruoyi-ui/src/views/tool/build/TreeNodeDialog.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-  <div>
-    <el-dialog
-      v-bind="$attrs"
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      v-on="$listeners"
-      @open="onOpen"
-      @close="onClose"
-    >
-      <el-row :gutter="0">
-        <el-form
-          ref="elForm"
-          :model="formData"
-          :rules="rules"
-          size="small"
-          label-width="100px"
-        >
-          <el-col :span="24">
-            <el-form-item
-              label="选项名"
-              prop="label"
-            >
-              <el-input
-                v-model="formData.label"
-                placeholder="请输入选项名"
-                clearable
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item
-              label="选项值"
-              prop="value"
-            >
-              <el-input
-                v-model="formData.value"
-                placeholder="请输入选项值"
-                clearable
-              >
-                <el-select
-                  slot="append"
-                  v-model="dataType"
-                  :style="{width: '100px'}"
-                >
-                  <el-option
-                    v-for="(item, index) in dataTypeOptions"
-                    :key="index"
-                    :label="item.label"
-                    :value="item.value"
-                    :disabled="item.disabled"
-                  />
-                </el-select>
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-form>
-      </el-row>
-      <div slot="footer">
-        <el-button
-          type="primary"
-          @click="handleConfirm"
-        >
-          确定
-        </el-button>
-        <el-button @click="close">
-          取消
-        </el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import { isNumberStr } from '@/utils/index'
-
-export default {
-  components: {},
-  inheritAttrs: false,
-  props: [],
-  data() {
-    return {
-      id: 100,
-      formData: {
-        label: undefined,
-        value: undefined
-      },
-      rules: {
-        label: [
-          {
-            required: true,
-            message: '请输入选项名',
-            trigger: 'blur'
-          }
-        ],
-        value: [
-          {
-            required: true,
-            message: '请输入选项值',
-            trigger: 'blur'
-          }
-        ]
-      },
-      dataType: 'string',
-      dataTypeOptions: [
-        {
-          label: '字符串',
-          value: 'string'
-        },
-        {
-          label: '数字',
-          value: 'number'
-        }
-      ]
-    }
-  },
-  computed: {},
-  watch: {
-    // eslint-disable-next-line func-names
-    'formData.value': function (val) {
-      this.dataType = isNumberStr(val) ? 'number' : 'string'
-    }
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    onOpen() {
-      this.formData = {
-        label: undefined,
-        value: undefined
-      }
-    },
-    onClose() {},
-    close() {
-      this.$emit('update:visible', false)
-    },
-    handleConfirm() {
-      this.$refs.elForm.validate(valid => {
-        if (!valid) return
-        if (this.dataType === 'number') {
-          this.formData.value = parseFloat(this.formData.value)
-        }
-        this.formData.id = this.id++
-        this.$emit('commit', this.formData)
-        this.close()
-      })
-    }
-  }
-}
-</script>
diff --git a/ruoyi-ui/src/views/tool/build/index.vue b/ruoyi-ui/src/views/tool/build/index.vue
index 2bd298b..4a8b9f5 100644
--- a/ruoyi-ui/src/views/tool/build/index.vue
+++ b/ruoyi-ui/src/views/tool/build/index.vue
@@ -1,768 +1,3 @@
 <template>
-  <div class="container">
-    <div class="left-board">
-      <div class="logo-wrapper">
-        <div class="logo">
-          <img :src="logo" alt="logo"> Form Generator
-        </div>
-      </div>
-      <el-scrollbar class="left-scrollbar">
-        <div class="components-list">
-          <div class="components-title">
-            <svg-icon icon-class="component" />输入型组件
-          </div>
-          <draggable
-            class="components-draggable"
-            :list="inputComponents"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            :clone="cloneComponent"
-            draggable=".components-item"
-            :sort="false"
-            @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in inputComponents" :key="index" class="components-item"
-              @click="addComponent(element)"
-            >
-              <div class="components-body">
-                <svg-icon :icon-class="element.tagIcon" />
-                {{ element.label }}
-              </div>
-            </div>
-          </draggable>
-          <div class="components-title">
-            <svg-icon icon-class="component" />选择型组件
-          </div>
-          <draggable
-            class="components-draggable"
-            :list="selectComponents"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            :clone="cloneComponent"
-            draggable=".components-item"
-            :sort="false"
-            @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in selectComponents"
-              :key="index"
-              class="components-item"
-              @click="addComponent(element)"
-            >
-              <div class="components-body">
-                <svg-icon :icon-class="element.tagIcon" />
-                {{ element.label }}
-              </div>
-            </div>
-          </draggable>
-          <div class="components-title">
-            <svg-icon icon-class="component" /> 布局型组件
-          </div>
-          <draggable
-            class="components-draggable" :list="layoutComponents"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in layoutComponents" :key="index" class="components-item"
-              @click="addComponent(element)"
-            >
-              <div class="components-body">
-                <svg-icon :icon-class="element.tagIcon" />
-                {{ element.label }}
-              </div>
-            </div>
-          </draggable>
-        </div>
-      </el-scrollbar>
-    </div>
-
-    <div class="center-board">
-      <div class="action-bar">
-        <el-button icon="el-icon-download" type="text" @click="download">
-          导出vue文件
-        </el-button>
-        <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
-          复制代码
-        </el-button>
-        <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
-          清空
-        </el-button>
-      </div>
-      <el-scrollbar class="center-scrollbar">
-        <el-row class="center-board-row" :gutter="formConf.gutter">
-          <el-form
-            :size="formConf.size"
-            :label-position="formConf.labelPosition"
-            :disabled="formConf.disabled"
-            :label-width="formConf.labelWidth + 'px'"
-          >
-            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
-              <draggable-item
-                v-for="(element, index) in drawingList"
-                :key="element.renderKey"
-                :drawing-list="drawingList"
-                :element="element"
-                :index="index"
-                :active-id="activeId"
-                :form-conf="formConf"
-                @activeItem="activeFormItem"
-                @copyItem="drawingItemCopy"
-                @deleteItem="drawingItemDelete"
-              />
-            </draggable>
-            <div v-show="!drawingList.length" class="empty-info">
-              从左侧拖入或点选组件进行表单设计
-            </div>
-          </el-form>
-        </el-row>
-      </el-scrollbar>
-    </div>
-
-    <right-panel
-      :active-data="activeData"
-      :form-conf="formConf"
-      :show-field="!!drawingList.length"
-      @tag-change="tagChange"
-    />
-
-    <code-type-dialog
-      :visible.sync="dialogVisible"
-      title="选择生成类型"
-      :show-file-name="showFileName"
-      @confirm="generate"
-    />
-    <input id="copyNode" type="hidden">
-  </div>
+  <div> 表单构建 <svg-icon icon-class="build" /> </div>
 </template>
-
-<script>
-import draggable from 'vuedraggable'
-import beautifier from 'js-beautify'
-import ClipboardJS from 'clipboard'
-import render from '@/utils/generator/render'
-import RightPanel from './RightPanel'
-import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
-import { beautifierConf, titleCase } from '@/utils/index'
-import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
-import { makeUpJs } from '@/utils/generator/js'
-import { makeUpCss } from '@/utils/generator/css'
-import drawingDefault from '@/utils/generator/drawingDefault'
-import logo from '@/assets/logo/logo.png'
-import CodeTypeDialog from './CodeTypeDialog'
-import DraggableItem from './DraggableItem'
-
-let oldActiveId
-let tempActiveData
-
-export default {
-  components: {
-    draggable,
-    render,
-    RightPanel,
-    CodeTypeDialog,
-    DraggableItem
-  },
-  data() {
-    return {
-      logo,
-      idGlobal: 100,
-      formConf,
-      inputComponents,
-      selectComponents,
-      layoutComponents,
-      labelWidth: 100,
-      drawingList: drawingDefault,
-      drawingData: {},
-      activeId: drawingDefault[0].formId,
-      drawerVisible: false,
-      formData: {},
-      dialogVisible: false,
-      generateConf: null,
-      showFileName: false,
-      activeData: drawingDefault[0]
-    }
-  },
-  created() {
-    // 防止 firefox 下 拖拽 会新打卡一个选项卡
-    document.body.ondrop = event => {
-      event.preventDefault()
-      event.stopPropagation()
-    }
-  },
-  watch: {
-    // eslint-disable-next-line func-names
-    'activeData.label': function (val, oldVal) {
-      if (
-        this.activeData.placeholder === undefined
-        || !this.activeData.tag
-        || oldActiveId !== this.activeId
-      ) {
-        return
-      }
-      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
-    },
-    activeId: {
-      handler(val) {
-        oldActiveId = val
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    const clipboard = new ClipboardJS('#copyNode', {
-      text: trigger => {
-        const codeStr = this.generateCode()
-        this.$notify({
-          title: '成功',
-          message: '代码已复制到剪切板，可粘贴。',
-          type: 'success'
-        })
-        return codeStr
-      }
-    })
-    clipboard.on('error', e => {
-      this.$message.error('代码复制失败')
-    })
-  },
-  methods: {
-    activeFormItem(element) {
-      this.activeData = element
-      this.activeId = element.formId
-    },
-    onEnd(obj, a) {
-      if (obj.from !== obj.to) {
-        this.activeData = tempActiveData
-        this.activeId = this.idGlobal
-      }
-    },
-    addComponent(item) {
-      const clone = this.cloneComponent(item)
-      this.drawingList.push(clone)
-      this.activeFormItem(clone)
-    },
-    cloneComponent(origin) {
-      const clone = JSON.parse(JSON.stringify(origin))
-      clone.formId = ++this.idGlobal
-      clone.span = formConf.span
-      clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
-      if (!clone.layout) clone.layout = 'colFormItem'
-      if (clone.layout === 'colFormItem') {
-        clone.vModel = `field${this.idGlobal}`
-        clone.placeholder !== undefined && (clone.placeholder += clone.label)
-        tempActiveData = clone
-      } else if (clone.layout === 'rowFormItem') {
-        delete clone.label
-        clone.componentName = `row${this.idGlobal}`
-        clone.gutter = this.formConf.gutter
-        tempActiveData = clone
-      }
-      return tempActiveData
-    },
-    AssembleFormData() {
-      this.formData = {
-        fields: JSON.parse(JSON.stringify(this.drawingList)),
-        ...this.formConf
-      }
-    },
-    generate(data) {
-      const func = this[`exec${titleCase(this.operationType)}`]
-      this.generateConf = data
-      func && func(data)
-    },
-    execRun(data) {
-      this.AssembleFormData()
-      this.drawerVisible = true
-    },
-    execDownload(data) {
-      const codeStr = this.generateCode()
-      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
-      this.$download.saveAs(blob, data.fileName)
-    },
-    execCopy(data) {
-      document.getElementById('copyNode').click()
-    },
-    empty() {
-      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
-        () => {
-          this.drawingList = []
-        }
-      )
-    },
-    drawingItemCopy(item, parent) {
-      let clone = JSON.parse(JSON.stringify(item))
-      clone = this.createIdAndKey(clone)
-      parent.push(clone)
-      this.activeFormItem(clone)
-    },
-    createIdAndKey(item) {
-      item.formId = ++this.idGlobal
-      item.renderKey = +new Date()
-      if (item.layout === 'colFormItem') {
-        item.vModel = `field${this.idGlobal}`
-      } else if (item.layout === 'rowFormItem') {
-        item.componentName = `row${this.idGlobal}`
-      }
-      if (Array.isArray(item.children)) {
-        item.children = item.children.map(childItem => this.createIdAndKey(childItem))
-      }
-      return item
-    },
-    drawingItemDelete(index, parent) {
-      parent.splice(index, 1)
-      this.$nextTick(() => {
-        const len = this.drawingList.length
-        if (len) {
-          this.activeFormItem(this.drawingList[len - 1])
-        }
-      })
-    },
-    generateCode() {
-      const { type } = this.generateConf
-      this.AssembleFormData()
-      const script = vueScript(makeUpJs(this.formData, type))
-      const html = vueTemplate(makeUpHtml(this.formData, type))
-      const css = cssStyle(makeUpCss(this.formData))
-      return beautifier.html(html + script + css, beautifierConf.html)
-    },
-    download() {
-      this.dialogVisible = true
-      this.showFileName = true
-      this.operationType = 'download'
-    },
-    run() {
-      this.dialogVisible = true
-      this.showFileName = false
-      this.operationType = 'run'
-    },
-    copy() {
-      this.dialogVisible = true
-      this.showFileName = false
-      this.operationType = 'copy'
-    },
-    tagChange(newTag) {
-      newTag = this.cloneComponent(newTag)
-      newTag.vModel = this.activeData.vModel
-      newTag.formId = this.activeId
-      newTag.span = this.activeData.span
-      delete this.activeData.tag
-      delete this.activeData.tagIcon
-      delete this.activeData.document
-      Object.keys(newTag).forEach(key => {
-        if (this.activeData[key] !== undefined
-          && typeof this.activeData[key] === typeof newTag[key]) {
-          newTag[key] = this.activeData[key]
-        }
-      })
-      this.activeData = newTag
-      this.updateDrawingList(newTag, this.drawingList)
-    },
-    updateDrawingList(newTag, list) {
-      const index = list.findIndex(item => item.formId === this.activeId)
-      if (index > -1) {
-        list.splice(index, 1, newTag)
-      } else {
-        list.forEach(item => {
-          if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style lang='scss'>
-.editor-tabs{
-  background: #121315;
-  .el-tabs__header{
-    margin: 0;
-    border-bottom-color: #121315;
-    .el-tabs__nav{
-      border-color: #121315;
-    }
-  }
-  .el-tabs__item{
-    height: 32px;
-    line-height: 32px;
-    color: #888a8e;
-    border-left: 1px solid #121315 !important;
-    background: #363636;
-    margin-right: 5px;
-    user-select: none;
-  }
-  .el-tabs__item.is-active{
-    background: #1e1e1e;
-    border-bottom-color: #1e1e1e!important;
-    color: #fff;
-  }
-  .el-icon-edit{
-    color: #f1fa8c;
-  }
-  .el-icon-document{
-    color: #a95812;
-  }
-}
-
-// home
-.right-scrollbar {
-  .el-scrollbar__view {
-    padding: 12px 18px 15px 15px;
-  }
-}
-.left-scrollbar .el-scrollbar__wrap {
-  box-sizing: border-box;
-  overflow-x: hidden !important;
-  margin-bottom: 0 !important;
-}
-.center-tabs{
-  .el-tabs__header{
-    margin-bottom: 0!important;
-  }
-  .el-tabs__item{
-    width: 50%;
-    text-align: center;
-  }
-  .el-tabs__nav{
-    width: 100%;
-  }
-}
-.reg-item{
-  padding: 12px 6px;
-  background: #f8f8f8;
-  position: relative;
-  border-radius: 4px;
-  .close-btn{
-    position: absolute;
-    right: -6px;
-    top: -6px;
-    display: block;
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 50%;
-    color: #fff;
-    text-align: center;
-    z-index: 1;
-    cursor: pointer;
-    font-size: 12px;
-    &:hover{
-      background: rgba(210, 23, 23, 0.5)
-    }
-  }
-  & + .reg-item{
-    margin-top: 18px;
-  }
-}
-.action-bar{
-  & .el-button+.el-button {
-    margin-left: 15px;
-  }
-  & i {
-    font-size: 20px;
-    vertical-align: middle;
-    position: relative;
-    top: -1px;
-  }
-}
-
-.custom-tree-node{
-  width: 100%;
-  font-size: 14px;
-  .node-operation{
-    float: right;
-  }
-  i[class*="el-icon"] + i[class*="el-icon"]{
-    margin-left: 6px;
-  }
-  .el-icon-plus{
-    color: #409EFF;
-  }
-  .el-icon-delete{
-    color: #157a0c;
-  }
-}
-
-.left-scrollbar .el-scrollbar__view{
-  overflow-x: hidden;
-}
-
-.el-rate{
-  display: inline-block;
-  vertical-align: text-top;
-}
-.el-upload__tip{
-  line-height: 1.2;
-}
-
-$selectedColor: #f6f7ff;
-$lighterBlue: #409EFF;
-
-.container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.components-list {
-  padding: 8px;
-  box-sizing: border-box;
-  height: 100%;
-  .components-item {
-    display: inline-block;
-    width: 48%;
-    margin: 1%;
-    transition: transform 0ms !important;
-  }
-}
-.components-draggable{
-  padding-bottom: 20px;
-}
-.components-title{
-  font-size: 14px;
-  color: #222;
-  margin: 6px 2px;
-  .svg-icon{
-    color: #666;
-    font-size: 18px;
-  }
-}
-
-.components-body {
-  padding: 8px 10px;
-  background: $selectedColor;
-  font-size: 12px;
-  cursor: move;
-  border: 1px dashed $selectedColor;
-  border-radius: 3px;
-  .svg-icon{
-    color: #777;
-    font-size: 15px;
-  }
-  &:hover {
-    border: 1px dashed #787be8;
-    color: #787be8;
-    .svg-icon {
-      color: #787be8;
-    }
-  }
-}
-
-.left-board {
-  width: 260px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100vh;
-}
-.left-scrollbar{
-  height: calc(100vh - 42px);
-  overflow: hidden;
-}
-.center-scrollbar {
-  height: calc(100vh - 42px);
-  overflow: hidden;
-  border-left: 1px solid #f1e8e8;
-  border-right: 1px solid #f1e8e8;
-  box-sizing: border-box;
-}
-.center-board {
-  height: 100vh;
-  width: auto;
-  margin: 0 350px 0 260px;
-  box-sizing: border-box;
-}
-.empty-info{
-  position: absolute;
-  top: 46%;
-  left: 0;
-  right: 0;
-  text-align: center;
-  font-size: 18px;
-  color: #ccb1ea;
-  letter-spacing: 4px;
-}
-.action-bar{
-  position: relative;
-  height: 42px;
-  text-align: right;
-  padding: 0 15px;
-  box-sizing: border-box;;
-  border: 1px solid #f1e8e8;
-  border-top: none;
-  border-left: none;
-  .delete-btn{
-    color: #F56C6C;
-  }
-}
-.logo-wrapper{
-  position: relative;
-  height: 42px;
-  background: #fff;
-  border-bottom: 1px solid #f1e8e8;
-  box-sizing: border-box;
-}
-.logo{
-  position: absolute;
-  left: 12px;
-  top: 6px;
-  line-height: 30px;
-  color: #00afff;
-  font-weight: 600;
-  font-size: 17px;
-  white-space: nowrap;
-  > img{
-    width: 30px;
-    height: 30px;
-    vertical-align: top;
-  }
-  .github{
-    display: inline-block;
-    vertical-align: sub;
-    margin-left: 15px;
-    > img{
-      height: 22px;
-    }
-  }
-}
-
-.center-board-row {
-  padding: 12px 12px 15px 12px;
-  box-sizing: border-box;
-  & > .el-form {
-    // 69 = 12+15+42
-    height: calc(100vh - 69px);
-  }
-}
-.drawing-board {
-  height: 100%;
-  position: relative;
-  .components-body {
-    padding: 0;
-    margin: 0;
-    font-size: 0;
-  }
-  .sortable-ghost {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    &::before {
-      content: " ";
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      height: 3px;
-      background: rgb(89, 89, 223);
-      z-index: 2;
-    }
-  }
-  .components-item.sortable-ghost {
-    width: 100%;
-    height: 60px;
-    background-color: $selectedColor;
-  }
-  .active-from-item {
-    & > .el-form-item{
-      background: $selectedColor;
-      border-radius: 6px;
-    }
-    & > .drawing-item-copy, & > .drawing-item-delete{
-      display: initial;
-    }
-    & > .component-name{
-      color: $lighterBlue;
-    }
-  }
-  .el-form-item{
-    margin-bottom: 15px;
-  }
-}
-.drawing-item{
-  position: relative;
-  cursor: move;
-  &.unfocus-bordered:not(.activeFromItem) > div:first-child  {
-    border: 1px dashed #ccc;
-  }
-  .el-form-item{
-    padding: 12px 10px;
-  }
-}
-.drawing-row-item{
-  position: relative;
-  cursor: move;
-  box-sizing: border-box;
-  border: 1px dashed #ccc;
-  border-radius: 3px;
-  padding: 0 2px;
-  margin-bottom: 15px;
-  .drawing-row-item {
-    margin-bottom: 2px;
-  }
-  .el-col{
-    margin-top: 22px;
-  }
-  .el-form-item{
-    margin-bottom: 0;
-  }
-  .drag-wrapper{
-    min-height: 80px;
-  }
-  &.active-from-item{
-    border: 1px dashed $lighterBlue;
-  }
-  .component-name{
-    position: absolute;
-    top: 0;
-    left: 0;
-    font-size: 12px;
-    color: #bbb;
-    display: inline-block;
-    padding: 0 6px;
-  }
-}
-.drawing-item, .drawing-row-item{
-  &:hover {
-    & > .el-form-item{
-      background: $selectedColor;
-      border-radius: 6px;
-    }
-    & > .drawing-item-copy, & > .drawing-item-delete{
-      display: initial;
-    }
-  }
-  & > .drawing-item-copy, & > .drawing-item-delete{
-    display: none;
-    position: absolute;
-    top: -10px;
-    width: 22px;
-    height: 22px;
-    line-height: 22px;
-    text-align: center;
-    border-radius: 50%;
-    font-size: 12px;
-    border: 1px solid;
-    cursor: pointer;
-    z-index: 1;
-  }
-  & > .drawing-item-copy{
-    right: 56px;
-    border-color: $lighterBlue;
-    color: $lighterBlue;
-    background: #fff;
-    &:hover{
-      background: $lighterBlue;
-      color: #fff;
-    }
-  }
-  & > .drawing-item-delete{
-    right: 24px;
-    border-color: #F56C6C;
-    color: #F56C6C;
-    background: #fff;
-    &:hover{
-      background: #F56C6C;
-      color: #fff;
-    }
-  }
-}
-</style>
diff --git a/ruoyi-ui/src/views/tool/gen/basicInfoForm.vue b/ruoyi-ui/src/views/tool/gen/basicInfoForm.vue
index 7029529..39c8515 100644
--- a/ruoyi-ui/src/views/tool/gen/basicInfoForm.vue
+++ b/ruoyi-ui/src/views/tool/gen/basicInfoForm.vue
@@ -30,31 +30,19 @@
   </el-form>
 </template>
 
-<script>
-export default {
-  props: {
-    info: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      rules: {
-        tableName: [
-          { required: true, message: "请输入表名称", trigger: "blur" }
-        ],
-        tableComment: [
-          { required: true, message: "请输入表描述", trigger: "blur" }
-        ],
-        className: [
-          { required: true, message: "请输入实体类名称", trigger: "blur" }
-        ],
-        functionAuthor: [
-          { required: true, message: "请输入作者", trigger: "blur" }
-        ]
-      }
-    };
+<script setup>
+defineProps({
+  info: {
+    type: Object,
+    default: null
   }
-};
+});
+
+// 表单校验
+const rules = ref({
+  tableName: [{ required: true, message: "请输入表名称", trigger: "blur" }],
+  tableComment: [{ required: true, message: "请输入表描述", trigger: "blur" }],
+  className: [{ required: true, message: "请输入实体类名称", trigger: "blur" }],
+  functionAuthor: [{ required: true, message: "请输入作者", trigger: "blur" }]
+});
 </script>
diff --git a/ruoyi-ui/src/views/tool/gen/editTable.vue b/ruoyi-ui/src/views/tool/gen/editTable.vue
index 951497a..f112770 100644
--- a/ruoyi-ui/src/views/tool/gen/editTable.vue
+++ b/ruoyi-ui/src/views/tool/gen/editTable.vue
@@ -6,7 +6,7 @@
       </el-tab-pane>
       <el-tab-pane label="字段信息" name="columnInfo">
         <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
-          <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
+          <el-table-column label="序号" type="index" min-width="5%"/>
           <el-table-column
             label="字段列名"
             prop="columnName"
@@ -14,7 +14,7 @@
             :show-overflow-tooltip="true"
           />
           <el-table-column label="字段描述" min-width="10%">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.columnComment"></el-input>
             </template>
           </el-table-column>
@@ -25,7 +25,7 @@
             :show-overflow-tooltip="true"
           />
           <el-table-column label="Java类型" min-width="11%">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.javaType">
                 <el-option label="Long" value="Long" />
                 <el-option label="String" value="String" />
@@ -38,33 +38,33 @@
             </template>
           </el-table-column>
           <el-table-column label="java属性" min-width="10%">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.javaField"></el-input>
             </template>
           </el-table-column>
 
           <el-table-column label="插入" min-width="5%">
-            <template slot-scope="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
+            <template #default="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isInsert"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="编辑" min-width="5%">
-            <template slot-scope="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
+            <template #default="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isEdit"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="列表" min-width="5%">
-            <template slot-scope="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
+            <template #default="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="查询" min-width="5%">
-            <template slot-scope="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
+            <template #default="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="查询方式" min-width="10%">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.queryType">
                 <el-option label="=" value="EQ" />
                 <el-option label="!=" value="NE" />
@@ -78,12 +78,12 @@
             </template>
           </el-table-column>
           <el-table-column label="必填" min-width="5%">
-            <template slot-scope="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
+            <template #default="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isRequired"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="显示类型" min-width="12%">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.htmlType">
                 <el-option label="文本框" value="input" />
                 <el-option label="文本域" value="textarea" />
@@ -98,7 +98,7 @@
             </template>
           </el-table-column>
           <el-table-column label="字典类型" min-width="12%">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                 <el-option
                   v-for="dict in dictOptions"
@@ -107,128 +107,92 @@
                   :value="dict.dictType">
                   <span style="float: left">{{ dict.dictName }}</span>
                   <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
-              </el-option>
+                </el-option>
               </el-select>
             </template>
           </el-table-column>
         </el-table>
       </el-tab-pane>
       <el-tab-pane label="生成信息" name="genInfo">
-        <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"/>
+        <gen-info-form ref="genInfo" :info="info" :tables="tables" />
       </el-tab-pane>
     </el-tabs>
     <el-form label-width="100px">
-      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
+      <div style="text-align: center;margin-left:-100px;margin-top:10px;">
         <el-button type="primary" @click="submitForm()">提交</el-button>
         <el-button @click="close()">返回</el-button>
-      </el-form-item>
+      </div>
     </el-form>
   </el-card>
 </template>
 
-<script>
+<script setup name="GenEdit">
 import { getGenTable, updateGenTable } from "@/api/tool/gen";
 import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
-import { listMenu as getMenuTreeselect } from "@/api/system/menu";
 import basicInfoForm from "./basicInfoForm";
 import genInfoForm from "./genInfoForm";
-import Sortable from 'sortablejs'
 
-export default {
-  name: "GenEdit",
-  components: {
-    basicInfoForm,
-    genInfoForm
-  },
-  data() {
-    return {
-      // 选中选项卡的 name
-      activeName: "columnInfo",
-      // 表格的高度
-      tableHeight: document.documentElement.scrollHeight - 245 + "px",
-      // 表信息
-      tables: [],
-      // 表列信息
-      columns: [],
-      // 字典信息
-      dictOptions: [],
-      // 菜单信息
-      menus: [],
-      // 表详细信息
-      info: {}
-    };
-  },
-  created() {
-    const tableId = this.$route.params && this.$route.params.tableId;
-    if (tableId) {
-      // 获取表详细信息
-      getGenTable(tableId).then(res => {
-        this.columns = res.data.rows;
-        this.info = res.data.info;
-        this.tables = res.data.tables;
-      });
-      /** 查询字典下拉列表 */
-      getDictOptionselect().then(response => {
-        this.dictOptions = response.data;
-      });
-      /** 查询菜单下拉列表 */
-      getMenuTreeselect().then(response => {
-        this.menus = this.handleTree(response.data, "menuId");
-      });
-    }
-  },
-  methods: {
-    /** 提交按钮 */
-    submitForm() {
-      const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
-      const genForm = this.$refs.genInfo.$refs.genInfoForm;
-      Promise.all([basicForm, genForm].map(this.getFormPromise)).then(res => {
-        const validateResult = res.every(item => !!item);
-        if (validateResult) {
-          const genTable = Object.assign({}, basicForm.model, genForm.model);
-          genTable.columns = this.columns;
-          genTable.params = {
-            treeCode: genTable.treeCode,
-            treeName: genTable.treeName,
-            treeParentCode: genTable.treeParentCode,
-            parentMenuId: genTable.parentMenuId
-          };
-          updateGenTable(genTable).then(res => {
-            this.$modal.msgSuccess(res.msg);
-            if (res.code === 200) {
-              this.close();
-            }
-          });
-        } else {
-          this.$modal.msgError("表单校验未通过，请重新检查提交内容");
+const route = useRoute();
+const { proxy } = getCurrentInstance();
+
+const activeName = ref("columnInfo");
+const tableHeight = ref(document.documentElement.scrollHeight - 245 + "px");
+const tables = ref([]);
+const columns = ref([]);
+const dictOptions = ref([]);
+const info = ref({});
+
+/** 提交按钮 */
+function submitForm() {
+  const basicForm = proxy.$refs.basicInfo.$refs.basicInfoForm;
+  const genForm = proxy.$refs.genInfo.$refs.genInfoForm;
+  Promise.all([basicForm, genForm].map(getFormPromise)).then(res => {
+    const validateResult = res.every(item => !!item);
+    if (validateResult) {
+      const genTable = Object.assign({}, basicForm.model, genForm.model);
+      genTable.columns = columns.value;
+      genTable.params = {
+        treeCode: genTable.treeCode,
+        treeName: genTable.treeName,
+        treeParentCode: genTable.treeParentCode,
+        parentMenuId: genTable.parentMenuId
+      };
+      updateGenTable(genTable).then(res => {
+        proxy.$modal.msgSuccess(res.msg);
+        if (res.code === 200) {
+          close();
         }
       });
-    },
-    getFormPromise(form) {
-      return new Promise(resolve => {
-        form.validate(res => {
-          resolve(res);
-        });
-      });
-    },
-    /** 关闭按钮 */
-    close() {
-      const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
-      this.$tab.closeOpenPage(obj);
+    } else {
+      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
     }
-  },
-  mounted() {
-    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
-    const sortable = Sortable.create(el, {
-      handle: ".allowDrag",
-      onEnd: evt => {
-        const targetRow = this.columns.splice(evt.oldIndex, 1)[0];
-        this.columns.splice(evt.newIndex, 0, targetRow);
-        for (let index in this.columns) {
-          this.columns[index].sort = parseInt(index) + 1;
-        }
-      }
+  });
+}
+function getFormPromise(form) {
+  return new Promise(resolve => {
+    form.validate(res => {
+      resolve(res);
+    });
+  });
+}
+function close() {
+  const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: route.query.pageNum } };
+  proxy.$tab.closeOpenPage(obj);
+}
+
+(() => {
+  const tableId = route.query && route.query.tableId;
+  if (tableId) {
+    // 获取表详细信息
+    getGenTable(tableId).then(res => {
+      columns.value = res.data.rows;
+      info.value = res.data.info;
+      tables.value = res.data.tables;
+    });
+    /** 查询字典下拉列表 */
+    getDictOptionselect().then(response => {
+      dictOptions.value = response.data;
     });
   }
-};
+})();
 </script>
diff --git a/ruoyi-ui/src/views/tool/gen/genInfoForm.vue b/ruoyi-ui/src/views/tool/gen/genInfoForm.vue
index 3f8d67f..abd71fa 100644
--- a/ruoyi-ui/src/views/tool/gen/genInfoForm.vue
+++ b/ruoyi-ui/src/views/tool/gen/genInfoForm.vue
@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="12">
         <el-form-item prop="tplCategory">
-          <span slot="label">生成模板</span>
+          <template #label>生成模板</template>
           <el-select v-model="info.tplCategory" @change="tplSelectChange">
             <el-option label="单表（增删改查）" value="crud" />
             <el-option label="树表（增删改查）" value="tree" />
@@ -11,68 +11,67 @@
           </el-select>
         </el-form-item>
       </el-col>
+
       <el-col :span="12">
         <el-form-item prop="packageName">
-          <span slot="label">
+          <template #label>
             生成包路径
             <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
               <i class="el-icon-question"></i>
             </el-tooltip>
-          </span>
+          </template>
           <el-input v-model="info.packageName" />
         </el-form-item>
       </el-col>
 
       <el-col :span="12">
         <el-form-item prop="moduleName">
-          <span slot="label">
+          <template #label>
             生成模块名
             <el-tooltip content="可理解为子系统名，例如 system" placement="top">
               <i class="el-icon-question"></i>
             </el-tooltip>
-          </span>
+          </template>
           <el-input v-model="info.moduleName" />
         </el-form-item>
       </el-col>
 
       <el-col :span="12">
         <el-form-item prop="businessName">
-          <span slot="label">
+          <template #label>
             生成业务名
             <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
               <i class="el-icon-question"></i>
             </el-tooltip>
-          </span>
+          </template>
           <el-input v-model="info.businessName" />
         </el-form-item>
       </el-col>
 
       <el-col :span="12">
         <el-form-item prop="functionName">
-          <span slot="label">
+          <template #label>
             生成功能名
             <el-tooltip content="用作类描述，例如 用户" placement="top">
               <i class="el-icon-question"></i>
             </el-tooltip>
-          </span>
+          </template>
           <el-input v-model="info.functionName" />
         </el-form-item>
       </el-col>
 
       <el-col :span="12">
         <el-form-item>
-          <span slot="label">
+          <template #label>
             上级菜单
             <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
               <i class="el-icon-question"></i>
             </el-tooltip>
-          </span>
-          <treeselect
-            :append-to-body="true"
-            v-model="info.parentMenuId"
-            :options="menus"
-            :normalizer="normalizer"
-            :show-count="true"
+          </template>
+          <tree-select
+            v-model:value="info.parentMenuId"
+            :options="menuOptions"
+            :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
             placeholder="请选择系统菜单"
           />
         </el-form-item>
@@ -80,12 +79,12 @@
 
       <el-col :span="12">
         <el-form-item prop="genType">
-          <span slot="label">
+          <template #label>
             生成代码方式
             <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
               <i class="el-icon-question"></i>
             </el-tooltip>
-          </span>
+          </template>
           <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
           <el-radio v-model="info.genType" label="1">自定义路径</el-radio>
         </el-form-item>
@@ -93,207 +92,190 @@
 
       <el-col :span="24" v-if="info.genType == '1'">
         <el-form-item prop="genPath">
-          <span slot="label">
+          <template #label>
             自定义路径
             <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
               <i class="el-icon-question"></i>
             </el-tooltip>
-          </span>
+          </template>
           <el-input v-model="info.genPath">
-            <el-dropdown slot="append">
-              <el-button type="primary">
-                最近路径快速选择
-                <i class="el-icon-arrow-down el-icon--right"></i>
-              </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
+            <template #append>
+              <el-dropdown>
+                <el-button type="primary">
+                  最近路径快速选择
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
           </el-input>
         </el-form-item>
       </el-col>
     </el-row>
 
-    <el-row v-show="info.tplCategory == 'tree'">
+    <template v-if="info.tplCategory == 'tree'">
       <h4 class="form-header">其他信息</h4>
-      <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            树编码字段
-            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeCode" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in info.columns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            树父编码字段
-            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeParentCode" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in info.columns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            树名称字段
-            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeName" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in info.columns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row v-show="info.tplCategory == 'sub'">
+      <el-row v-show="info.tplCategory == 'tree'">
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树编码字段
+              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeCode" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树父编码字段
+              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeParentCode" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树名称字段
+              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeName" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
+    <template v-if="info.tplCategory == 'sub'">
       <h4 class="form-header">关联信息</h4>
-      <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            关联子表的表名
-            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
-            <el-option
-              v-for="(table, index) in tables"
-              :key="index"
-              :label="table.tableName + '：' + table.tableComment"
-              :value="table.tableName"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item>
-          <span slot="label">
-            子表关联的外键名
-            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.subTableFkName" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in subColumns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              关联子表的表名
+              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
+              <el-option
+                v-for="(table, index) in tables"
+                :key="index"
+                :label="table.tableName + '：' + table.tableComment"
+                :value="table.tableName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              子表关联的外键名
+              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.subTableFkName" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in subColumns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
   </el-form>
 </template>
 
-<script>
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+<script setup>
+import { listMenu } from "@/api/system/menu";
 
-export default {
-  components: { Treeselect },
-  props: {
-    info: {
-      type: Object,
-      default: null
-    },
-    tables: {
-      type: Array,
-      default: null
-    },
-    menus: {
-      type: Array,
-      default: []
-    },
+const subColumns = ref([]);
+const menuOptions = ref({});
+const { proxy } = getCurrentInstance();
+
+const props = defineProps({
+  info: {
+    type: Object,
+    default: null
   },
-  data() {
-    return {
-      subColumns: [],
-      rules: {
-        tplCategory: [
-          { required: true, message: "请选择生成模板", trigger: "blur" }
-        ],
-        packageName: [
-          { required: true, message: "请输入生成包路径", trigger: "blur" }
-        ],
-        moduleName: [
-          { required: true, message: "请输入生成模块名", trigger: "blur" }
-        ],
-        businessName: [
-          { required: true, message: "请输入生成业务名", trigger: "blur" }
-        ],
-        functionName: [
-          { required: true, message: "请输入生成功能名", trigger: "blur" }
-        ],
-      }
-    };
-  },
-  created() {},
-  watch: {
-    'info.subTableName': function(val) {
-      this.setSubTableColumns(val);
-    }
-  },
-  methods: {
-    /** 转换菜单数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.menuId,
-        label: node.menuName,
-        children: node.children
-      };
-    },
-    /** 选择子表名触发 */
-    subSelectChange(value) {
-      this.info.subTableFkName = '';
-    },
-    /** 选择生成模板触发 */
-    tplSelectChange(value) {
-      if(value !== 'sub') {
-        this.info.subTableName = '';
-        this.info.subTableFkName = '';
-      }
-    },
-    /** 设置关联外键 */
-    setSubTableColumns(value) {
-      for (var item in this.tables) {
-        const name = this.tables[item].tableName;
-        if (value === name) {
-          this.subColumns = this.tables[item].columns;
-          break;
-        }
-      }
+  tables: {
+    type: Array,
+    default: null
+  }
+});
+
+// 表单校验
+const rules = ref({
+  tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
+  packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }],
+  moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }],
+  businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
+  functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }]
+});
+function subSelectChange(value) {
+  props.info.subTableFkName = "";
+}
+function tplSelectChange(value) {
+  if (value !== "sub") {
+    props.info.subTableName = "";
+    props.info.subTableFkName = "";
+  }
+}
+function setSubTableColumns(value) {
+  for (var item in props.tables) {
+    const name = props.tables[item].tableName;
+    if (value === name) {
+      subColumns.value = props.tables[item].columns;
+      break;
     }
   }
-};
+}
+/** 查询菜单下拉树结构 */
+function getMenuTreeselect() {
+  listMenu().then(response => {
+    menuOptions.value = proxy.handleTree(response.data, "menuId");
+  });
+}
+
+watch(() => props.info.subTableName, val => {
+  setSubTableColumns(val);
+});
+
+getMenuTreeselect();
 </script>
diff --git a/ruoyi-ui/src/views/tool/gen/importTable.vue b/ruoyi-ui/src/views/tool/gen/importTable.vue
index 3ea9532..457042c 100644
--- a/ruoyi-ui/src/views/tool/gen/importTable.vue
+++ b/ruoyi-ui/src/views/tool/gen/importTable.vue
@@ -1,13 +1,13 @@
 <template>
   <!-- 导入表 -->
-  <el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+  <el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryRef" :inline="true">
       <el-form-item label="表名称" prop="tableName">
         <el-input
           v-model="queryParams.tableName"
           placeholder="请输入表名称"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="表描述" prop="tableComment">
@@ -15,12 +15,12 @@
           v-model="queryParams.tableComment"
           placeholder="请输入表描述"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
     <el-row>
@@ -34,87 +34,85 @@
       <pagination
         v-show="total>0"
         :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
         @pagination="getList"
       />
     </el-row>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="handleImportTable">确 定</el-button>
-      <el-button @click="visible = false">取 消</el-button>
-    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleImportTable">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
-<script>
+<script setup>
 import { listDbTable, importTable } from "@/api/tool/gen";
-export default {
-  data() {
-    return {
-      // 遮罩层
-      visible: false,
-      // 选中数组值
-      tables: [],
-      // 总条数
-      total: 0,
-      // 表数据
-      dbTableList: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        tableName: undefined,
-        tableComment: undefined
-      }
-    };
-  },
-  methods: {
-    // 显示弹框
-    show() {
-      this.getList();
-      this.visible = true;
-    },
-    clickRow(row) {
-      this.$refs.table.toggleRowSelection(row);
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.tables = selection.map(item => item.tableName);
-    },
-    // 查询表数据
-    getList() {
-      listDbTable(this.queryParams).then(res => {
-        if (res.code === 200) {
-          this.dbTableList = res.rows;
-          this.total = res.total;
-        }
-      });
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 导入按钮操作 */
-    handleImportTable() {
-      const tableNames = this.tables.join(",");
-      if (tableNames == "") {
-        this.$modal.msgError("请选择要导入的表");
-        return;
-      }
-      importTable({ tables: tableNames }).then(res => {
-        this.$modal.msgSuccess(res.msg);
-        if (res.code === 200) {
-          this.visible = false;
-          this.$emit("ok");
-        }
-      });
-    }
+
+const total = ref(0);
+const visible = ref(false);
+const tables = ref([]);
+const dbTableList = ref([]);
+const { proxy } = getCurrentInstance();
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  tableName: undefined,
+  tableComment: undefined
+});
+
+const emit = defineEmits(["ok"]);
+
+/** 查询参数列表 */
+function show() {
+  getList();
+  visible.value = true;
+}
+/** 单击选择行 */
+function clickRow(row) {
+  proxy.$refs.table.toggleRowSelection(row);
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  tables.value = selection.map(item => item.tableName);
+}
+/** 查询表数据 */
+function getList() {
+  listDbTable(queryParams).then(res => {
+    dbTableList.value = res.rows;
+    total.value = res.total;
+  });
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 导入按钮操作 */
+function handleImportTable() {
+  const tableNames = tables.value.join(",");
+  if (tableNames == "") {
+    proxy.$modal.msgError("请选择要导入的表");
+    return;
   }
-};
+  importTable({ tables: tableNames }).then(res => {
+    proxy.$modal.msgSuccess(res.msg);
+    if (res.code === 200) {
+      visible.value = false;
+      emit("ok");
+    }
+  });
+}
+
+defineExpose({
+  show
+})
 </script>
diff --git a/ruoyi-ui/src/views/tool/gen/index.vue b/ruoyi-ui/src/views/tool/gen/index.vue
index 3f1f930..5350cdb 100644
--- a/ruoyi-ui/src/views/tool/gen/index.vue
+++ b/ruoyi-ui/src/views/tool/gen/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="表名称" prop="tableName">
         <el-input
           v-model="queryParams.tableName"
           placeholder="请输入表名称"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="表描述" prop="tableComment">
@@ -14,14 +14,13 @@
           v-model="queryParams.tableComment"
           placeholder="请输入表描述"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="创建时间">
+      <el-form-item label="创建时间" style="width: 308px">
         <el-date-picker
           v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
+          value-format="YYYY-MM-DD"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
@@ -29,8 +28,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -39,8 +38,7 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-download"
-          size="mini"
+          icon="Download"
           @click="handleGenTable"
           v-hasPermi="['tool:gen:code']"
         >生成</el-button>
@@ -49,8 +47,7 @@
         <el-button
           type="info"
           plain
-          icon="el-icon-upload"
-          size="mini"
+          icon="Upload"
           @click="openImportTable"
           v-hasPermi="['tool:gen:import']"
         >导入</el-button>
@@ -59,8 +56,7 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
-          size="mini"
+          icon="Edit"
           :disabled="single"
           @click="handleEditTable"
           v-hasPermi="['tool:gen:edit']"
@@ -70,20 +66,19 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
-          size="mini"
+          icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['tool:gen:remove']"
         >删除</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" align="center" width="55"></el-table-column>
       <el-table-column label="序号" type="index" width="50" align="center">
-        <template slot-scope="scope">
+        <template #default="scope">
           <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
         </template>
       </el-table-column>
@@ -92,73 +87,75 @@
         align="center"
         prop="tableName"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column
         label="表描述"
         align="center"
         prop="tableComment"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column
         label="实体"
         align="center"
         prop="className"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
       <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-view"
-            @click="handlePreview(scope.row)"
-            v-hasPermi="['tool:gen:preview']"
-          >预览</el-button>
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-edit"
-            @click="handleEditTable(scope.row)"
-            v-hasPermi="['tool:gen:edit']"
-          >编辑</el-button>
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['tool:gen:remove']"
-          >删除</el-button>
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-refresh"
-            @click="handleSynchDb(scope.row)"
-            v-hasPermi="['tool:gen:edit']"
-          >同步</el-button>
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-download"
-            @click="handleGenTable(scope.row)"
-            v-hasPermi="['tool:gen:code']"
-          >生成代码</el-button>
+      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="预览" placement="top">
+            <el-button
+              type="text"
+              icon="View"
+              @click="handlePreview(scope.row)"
+              v-hasPermi="['tool:gen:preview']"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip content="编辑" placement="top">
+            <el-button
+              type="text"
+              icon="Edit"
+              @click="handleEditTable(scope.row)"
+              v-hasPermi="['tool:gen:edit']"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip content="删除" placement="top">
+            <el-button
+              type="text"
+              icon="Delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['tool:gen:remove']"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip content="同步" placement="top">
+            <el-button
+              type="text"
+              icon="Refresh"
+              @click="handleSynchDb(scope.row)"
+              v-hasPermi="['tool:gen:edit']"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip content="生成代码" placement="top">
+            <el-button
+              type="text"
+              icon="Download"
+              @click="handleGenTable(scope.row)"
+              v-hasPermi="['tool:gen:code']"
+            ></el-button>
+          </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
     <!-- 预览界面 -->
-    <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
+    <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body custom-class="scrollbar">
       <el-tabs v-model="preview.activeName">
         <el-tab-pane
           v-for="(value, key) in preview.data"
@@ -166,172 +163,126 @@
           :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
           :key="key"
         >
-          <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float:right">复制</el-link>
-          <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
+          <pre>{{ value }}</pre>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
-    <import-table ref="import" @ok="handleQuery" />
+    <import-table ref="importRef" @ok="handleQuery" />
   </div>
 </template>
 
-<script>
+<script setup name="Gen">
 import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen";
+import router from "@/router";
 import importTable from "./importTable";
-import hljs from "highlight.js/lib/highlight";
-import "highlight.js/styles/github-gist.css";
-hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
-hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
-hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
-hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
-hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
-hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
 
-export default {
-  name: "Gen",
-  components: { importTable },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 唯一标识符
-      uniqueId: "",
-      // 选中数组
-      ids: [],
-      // 选中表数组
-      tableNames: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 表数据
-      tableList: [],
-      // 日期范围
-      dateRange: "",
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        tableName: undefined,
-        tableComment: undefined
-      },
-      // 预览参数
-      preview: {
-        open: false,
-        title: "代码预览",
-        data: {},
-        activeName: "domain.java"
-      }
-    };
+const { proxy } = getCurrentInstance();
+
+const tableList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const tableNames = ref([]);
+const dateRange = ref([]);
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    tableName: undefined,
+    tableComment: undefined
   },
-  created() {
-    this.getList();
-  },
-  activated() {
-    const time = this.$route.query.t;
-    if (time != null && time != this.uniqueId) {
-      this.uniqueId = time;
-      this.queryParams.pageNum = Number(this.$route.query.pageNum);
-      this.getList();
-    }
-  },
-  methods: {
-    /** 查询表集合 */
-    getList() {
-      this.loading = true;
-      listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.tableList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 生成代码操作 */
-    handleGenTable(row) {
-      const tableNames = row.tableName || this.tableNames;
-      if (tableNames == "") {
-        this.$modal.msgError("请选择要生成的数据");
-        return;
-      }
-      if(row.genType === "1") {
-        genCode(row.tableName).then(response => {
-          this.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
-        });
-      } else {
-        this.$download.zip("/tool/gen/batchGenCode?tables=" + tableNames, "ruoyi.zip");
-      }
-    },
-    /** 同步数据库操作 */
-    handleSynchDb(row) {
-      const tableName = row.tableName;
-      this.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function() {
-        return synchDb(tableName);
-      }).then(() => {
-        this.$modal.msgSuccess("同步成功");
-      }).catch(() => {});
-    },
-    /** 打开导入表弹窗 */
-    openImportTable() {
-      this.$refs.import.show();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 预览按钮 */
-    handlePreview(row) {
-      previewTable(row.tableId).then(response => {
-        this.preview.data = response.data;
-        this.preview.open = true;
-        this.preview.activeName = "domain.java";
-      });
-    },
-    /** 高亮显示 */
-    highlightedCode(code, key) {
-      const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"));
-      var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
-      const result = hljs.highlight(language, code || "", true);
-      return result.value || '&nbsp;';
-    },
-    /** 复制代码成功 */
-    clipboardSuccess() {
-      this.$modal.msgSuccess("复制成功");
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.tableId);
-      this.tableNames = selection.map(item => item.tableName);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    /** 修改按钮操作 */
-    handleEditTable(row) {
-      const tableId = row.tableId || this.ids[0];
-      const tableName = row.tableName || this.tableNames[0];
-      const params = { pageNum: this.queryParams.pageNum };
-      this.$tab.openPage("修改[" + tableName + "]生成配置", '/tool/gen-edit/index/' + tableId, params);
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const tableIds = row.tableId || this.ids;
-      this.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function() {
-        return delTable(tableIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
+  preview: {
+    open: false,
+    title: "代码预览",
+    data: {},
+    activeName: "domain.java"
   }
-};
+});
+
+const { queryParams, preview } = toRefs(data);
+
+/** 查询表集合 */
+function getList() {
+  loading.value = true;
+  listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    tableList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 生成代码操作 */
+function handleGenTable(row) {
+  const tbNames = row.tableName || tableNames.value;
+  if (tbNames == "") {
+    proxy.$modal.msgError("请选择要生成的数据");
+    return;
+  }
+  if (row.genType === "1") {
+    genCode(row.tableName).then(response => {
+      proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
+    });
+  } else {
+    proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, "ruoyi");
+  }
+}
+/** 同步数据库操作 */
+function handleSynchDb(row) {
+  const tableName = row.tableName;
+  proxy.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function () {
+    return synchDb(tableName);
+  }).then(() => {
+    proxy.$modal.msgSuccess("同步成功");
+  }).catch(() => {});
+}
+/** 打开导入表弹窗 */
+function openImportTable() {
+  proxy.$refs["importRef"].show();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+/** 预览按钮 */
+function handlePreview(row) {
+  previewTable(row.tableId).then(response => {
+    preview.value.data = response.data;
+    preview.value.open = true;
+    preview.value.activeName = "domain.java";
+  });
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.tableId);
+  tableNames.value = selection.map(item => item.tableName);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+/** 修改按钮操作 */
+function handleEditTable(row) {
+  const tableId = row.tableId || ids.value[0];
+  router.push({ path: "/tool/gen-edit/index", query: { tableId: tableId, pageNum: queryParams.value.pageNum } });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const tableIds = row.tableId || ids.value;
+  proxy.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function () {
+    return delTable(tableIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 </script>
diff --git a/ruoyi-ui/vite.config.js b/ruoyi-ui/vite.config.js
new file mode 100644
index 0000000..614d69c
--- /dev/null
+++ b/ruoyi-ui/vite.config.js
@@ -0,0 +1,52 @@
+import { defineConfig, loadEnv } from 'vite'
+import  createVitePlugins  from './vite/plugins'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd());
+  const { VITE_APP_ENV } = env;
+  return {
+    plugins: createVitePlugins(env, command === 'build'),
+    // 部署生产环境和开发环境下的URL。
+    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
+    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+    base: VITE_APP_ENV === 'production' ? '/' : '/',
+    // vite 相关配置
+    server: {
+      port: 80,
+      host: true,
+      open: true,
+      proxy: {
+        // https://cn.vitejs.dev/config/#server-proxy
+        '/dev-api': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          rewrite: (p) => p.replace(/^\/dev-api/, '')
+        }
+      },
+    },
+    resolve: {
+      // https://cn.vitejs.dev/config/#resolve-alias
+      alias: {
+        // 设置路径
+        '~': path.resolve(__dirname, './'),
+        // 设置别名
+        '@': path.resolve(__dirname, './src')
+      },
+      // https://cn.vitejs.dev/config/#resolve-extensions
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    },
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (id.includes('element-plus/theme')) {
+              return 'ele';
+            }
+          },
+        },
+      },
+    }
+  }
+})
diff --git a/ruoyi-ui/vite/plugins/auto-import.js b/ruoyi-ui/vite/plugins/auto-import.js
new file mode 100644
index 0000000..da03640
--- /dev/null
+++ b/ruoyi-ui/vite/plugins/auto-import.js
@@ -0,0 +1,16 @@
+import autoImport from 'unplugin-auto-import/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+
+export default function createAutoImport() {
+    return autoImport({
+        resolvers: [ElementPlusResolver()],
+        imports: [
+            'vue',
+            'vue-router',
+            {
+                'vuex': ['useStore']
+            }
+        ],
+        dts: false
+    })
+}
diff --git a/ruoyi-ui/vite/plugins/compression.js b/ruoyi-ui/vite/plugins/compression.js
new file mode 100644
index 0000000..369d7a1
--- /dev/null
+++ b/ruoyi-ui/vite/plugins/compression.js
@@ -0,0 +1,27 @@
+import { PluginOption } from 'vite';
+import compression from 'vite-plugin-compression'
+
+export default function createCompression(env) {
+    const { VITE_BUILD_COMPRESS } = env
+    const compressList = VITE_BUILD_COMPRESS.split(',')
+    const plugin = []
+    if (compressList.includes('gzip')) {
+        // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
+        plugin.push(
+            compression({
+                ext: '.gz',
+                deleteOriginFile: false
+            })
+        )
+    }
+    if (compressList.includes('brotli')) {
+        plugin.push(
+            compression({
+                ext: '.br',
+                algorithm: 'brotliCompress',
+                deleteOriginFile: false
+            })
+        )
+    }
+    return plugin
+}
diff --git a/ruoyi-ui/vite/plugins/index.js b/ruoyi-ui/vite/plugins/index.js
new file mode 100644
index 0000000..1c312dd
--- /dev/null
+++ b/ruoyi-ui/vite/plugins/index.js
@@ -0,0 +1,15 @@
+import vue from '@vitejs/plugin-vue'
+
+import createAutoImport from './auto-import'
+import createSvgIcon from './svg-icon'
+import createCompression from './compression'
+import createSetupExtend from './setup-extend'
+
+export default function createVitePlugins(viteEnv, isBuild = false) {
+    const vitePlugins = [vue()]
+    vitePlugins.push(createAutoImport())
+	  vitePlugins.push(createSetupExtend())
+    vitePlugins.push(createSvgIcon(isBuild))
+	  isBuild && vitePlugins.push(...createCompression(viteEnv))
+    return vitePlugins
+}
diff --git a/ruoyi-ui/vite/plugins/setup-extend.js b/ruoyi-ui/vite/plugins/setup-extend.js
new file mode 100644
index 0000000..a4980f3
--- /dev/null
+++ b/ruoyi-ui/vite/plugins/setup-extend.js
@@ -0,0 +1,5 @@
+import setupExtend from 'vite-plugin-vue-setup-extend'
+
+export default function createSetupExtend() {
+    return setupExtend()
+}
diff --git a/ruoyi-ui/vite/plugins/svg-icon.js b/ruoyi-ui/vite/plugins/svg-icon.js
new file mode 100644
index 0000000..88204aa
--- /dev/null
+++ b/ruoyi-ui/vite/plugins/svg-icon.js
@@ -0,0 +1,10 @@
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'path'
+
+export default function createSvgIcon(isBuild) {
+    return createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
+      symbolId: 'icon-[dir]-[name]',
+      svgoOptions: isBuild,
+    })
+}
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
deleted file mode 100644
index f0cff54..0000000
--- a/ruoyi-ui/vue.config.js
+++ /dev/null
@@ -1,134 +0,0 @@
-'use strict'
-const path = require('path')
-
-function resolve(dir) {
-  return path.join(__dirname, dir)
-}
-
-const CompressionPlugin = require('compression-webpack-plugin')
-
-const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
-
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
-
-// vue.config.js 配置说明
-//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
-// 这里只列一部分，具体配置参考文档
-module.exports = {
-  // 部署生产环境和开发环境下的URL。
-  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
-  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
-  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-  outputDir: 'dist',
-  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
-  assetsDir: 'static',
-  // 是否开启eslint保存检测，有效值：ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === 'development',
-  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
-  productionSourceMap: false,
-  // webpack-dev-server 相关配置
-  devServer: {
-    host: '0.0.0.0',
-    port: port,
-    open: true,
-    proxy: {
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
-      [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
-        changeOrigin: true,
-        pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
-        }
-      }
-    },
-    disableHostCheck: true
-  },
-  css: {
-    loaderOptions: {
-      sass: {
-        sassOptions: { outputStyle: "expanded" }
-      }
-    }
-  },
-  configureWebpack: {
-    name: name,
-    resolve: {
-      alias: {
-        '@': resolve('src')
-      }
-    },
-    plugins: [
-      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
-      new CompressionPlugin({
-        cache: false,                   // 不启用文件缓存
-        test: /\.(js|css|html)?$/i,     // 压缩文件格式
-        filename: '[path].gz[query]',   // 压缩后的文件名
-        algorithm: 'gzip',              // 使用gzip压缩
-        minRatio: 0.8                   // 压缩率小于1才会压缩
-      })
-    ],
-  },
-  chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
-
-    // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/assets/icons'))
-      .end()
-    config.module
-      .rule('icons')
-      .test(/\.svg$/)
-      .include.add(resolve('src/assets/icons'))
-      .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
-      .options({
-        symbolId: 'icon-[name]'
-      })
-      .end()
-
-    config.when(process.env.NODE_ENV !== 'development', config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
-
-          config.optimization.splitChunks({
-            chunks: 'all',
-            cacheGroups: {
-              libs: {
-                name: 'chunk-libs',
-                test: /[\\/]node_modules[\\/]/,
-                priority: 10,
-                chunks: 'initial' // only package third parties that are initially dependent
-              },
-              elementUI: {
-                name: 'chunk-elementUI', // split elementUI into a single package
-                test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
-                priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
-              },
-              commons: {
-                name: 'chunk-commons',
-                test: resolve('src/components'), // can customize your rules
-                minChunks: 3, //  minimum common number
-                priority: 5,
-                reuseExistingChunk: true
-              }
-            }
-          })
-
-          config.optimization.runtimeChunk('single'),
-          {
-             from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
-             to: './' //到根目录下
-          }
-    })
-  }
-}