feat(projects): 新增主题配置：页面功能

build/plugins/iconify.ts

@@ -1,16 +1,17 @@
-import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'; // iconify图标
-import Components from 'vite-plugin-components'; // 从指定目录自动导入组件
+import Icons from 'unplugin-icons/vite'; // iconify图标
+import IconsResolver from 'unplugin-icons/resolver';
+import Components from 'unplugin-vue-components/vite'; // 从指定目录自动导入组件
 
 export default [
   Components({
-    customComponentResolvers: ViteIconsResolver({ componentPrefix: 'icon' }) // 组件名前缀
+    resolvers: [IconsResolver({ componentPrefix: 'icon' })]
   }),
-  ViteIcons()
+  Icons()
 ];
 
 /**
  * iconify用法(安装对应的vscode智能提示的插件: Iconify IntelliSense)
  * 找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件
- * 确定图标名字：找到图标后复制名字 如：mdi:ab-testing 组件为: <icon-mdi-ab-testing />
+ * 确定图标名字：找到图标后复制名字 如：mdi:ab-testing 组件为: <icon-mdi:ab-testing />
  * 样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小
  */

build/plugins/index.ts

@@ -1,8 +1,7 @@
 import WindiCSS from 'vite-plugin-windicss';
 import html from './html';
 import iconify from './iconify';
-import styleImport from './style-import';
 
-const plugins = [...html, ...iconify, ...styleImport, WindiCSS()];
+const plugins = [...html, ...iconify, WindiCSS()];
 
 export default plugins;

build/plugins/style-import.ts

@@ -1,20 +0,0 @@
-import styleImport from 'vite-plugin-style-import'; // 按需加载UI框架的组件样式
-
-export default [
-  styleImport({
-    libs: [
-      {
-        libraryName: 'element-plus',
-        esModule: true,
-        ensureStyleFile: true,
-        resolveStyle: name => {
-          const formatName = name.slice(3);
-          return `element-plus/packages/theme-chalk/src/${formatName}.scss`;
-        },
-        resolveComponent: name => {
-          return `element-plus/lib/${name}`;
-        }
-      }
-    ]
-  })
-];