feature: 添加form表单，删除wincss

build/vite/plugin/index.ts

@@ -2,8 +2,6 @@ import vue from '@vitejs/plugin-vue';
 
 import vueJsx from '@vitejs/plugin-vue-jsx';
 
-import windiCSS from 'vite-plugin-windicss';
-
 import type { Plugin, ConfigEnv } from 'vite';
 
 // 按需加载样式配置
@@ -24,8 +22,6 @@ export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {
 
   vitePlugins.push(vueJsx());
 
-  vitePlugins.push(windiCSS());
-
   vitePlugins.push(configStylePlugin());
 
   vitePlugins.push(configThemePlugin());

package.json

@@ -88,7 +88,6 @@
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^1.4.0",
     "vite-plugin-svg-icons": "^1.0.5",
-    "vite-plugin-windicss": "^1.6.1",
     "vue-tsc": "^0.29.8"
   },
   "license": "MIT",

src/components/Form/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="page-container">
+    <el-form
+      ref="formRef"
+      :model="form"
+      :label-position="formOption.labelPosition"
+      label-width="120px"
+    >
+      <!-- <div class="">标题</div> -->
+      <el-row v-for="(f, fix) in formOption.formIten" :key="fix" :gutter="f.gutter || 30">
+        <el-col
+          v-for="(fItem, fItemIx) in f.itemList"
+          :key="fItemIx"
+          :xs="f.xs || 24"
+          :sm="f.sm || 24"
+          :md="f.md || 12"
+          :lg="f.lg || 8"
+          :xl="f.xl || 8"
+        >
+          <el-form-item :label="fItem.label" :prop="fItem.prop">
+            <!-- 输入框 -->
+            <el-input
+              v-if="fItem.type === 'input'"
+              v-model="form[fItem.prop]"
+              :type="fItem.inputType"
+            ></el-input>
+            <!-- 日期选择器 -->
+            <el-date-picker
+              v-else-if="fItem.type === 'dateTime'"
+              v-model="form[fItem.prop]"
+              type="datetimerange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+            >
+            </el-date-picker>
+            <!-- 单选框 -->
+            <el-radio-group v-else-if="fItem.type === 'radio'" v-model="form.resource">
+              <el-radio
+                v-for="(radio, radioIx) in fItem.options"
+                :key="radioIx"
+                :label="radio.label"
+              ></el-radio>
+            </el-radio-group>
+            <!-- 下拉选择框 -->
+            <el-select
+              v-else-if="fItem.type === 'select'"
+              v-model="form[fItem.prop]"
+              :placeholder="fItem.placeholder"
+            >
+              <el-option
+                v-for="(select, selectIx) in fItem.options"
+                :key="selectIx"
+                :label="select.label"
+                :value="select.value"
+              ></el-option>
+            </el-select>
+            <el-checkbox-group v-else-if="fItem.type === 'checkbox'" v-model="form[fItem.prop]">
+              <el-checkbox
+                v-for="(checkbox, checkboxIx) in fItem.options"
+                :key="checkboxIx"
+                :label="checkbox.label"
+                :name="form[fItem.prop]"
+              ></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm()">Create</el-button>
+        <el-button @click="resetForm()">Reset</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, reactive, PropType } from 'vue';
+  import { FormProps } from './types/from';
+  const props = defineProps({
+    formOption: {
+      type: Object as PropType<FormProps>,
+      default: () => {},
+    },
+  });
+
+  console.log(props);
+
+  const form = reactive<any>({});
+
+  onMounted(() => {});
+
+  const submitForm = () => {};
+  const resetForm = () => {};
+</script>
+
+<style scoped lang="scss">
+  .page-container {
+    padding: 20px;
+    background-color: #{$main-bg-color};
+  }
+</style>

src/components/Form/types/from.ts

@@ -0,0 +1,36 @@
+export interface FormProps {
+  labelPosition: string;
+  formIten: Array<FormItemProps>;
+}
+
+export interface FormItemProps {
+  gutter: number;
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  itemList: Array<FormItemListProps>;
+}
+
+/**
+ * @param(type) input：输入框、dataTime：日期选择器、radio：单选框、select：下拉选择框
+ * @param(label) 标签名
+ * @param(prop) form表单双向绑定字段
+ * @param(options) 选择项数据
+ * @param(inputType) input输入框类型 type为input生效
+ * @param(placeholder) 占位符
+ */
+export interface FormItemListProps {
+  type: string;
+  label: string;
+  prop: string;
+  options?: Array<FormSelectOptProps>;
+  inputType?: string;
+  placeholder?: string;
+}
+
+export interface FormSelectOptProps {
+  label: string;
+  value: string | number | boolean;
+}

src/locales/en/modules/route.ts

@@ -4,6 +4,7 @@ const route = {
     components: 'Components',
     dragCpts: 'DragComponents',
     countTo: 'DigitalAnimation',
+    form: 'Form',
     userInfo: 'UserInfo',
     userList: 'UserList',
     userDateil: 'UserDateil',

src/locales/zh-ch/modules/route.ts

@@ -4,6 +4,7 @@ const route = {
     components: '组件',
     dragCpts: '拖拽组件',
     countTo: '数字动画',
+    form: '表单',
     userInfo: '用户管理',
     userList: '用户列表',
     userDateil: '用户详情',

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 
 import App from './App.vue';
 
-import 'virtual:windi-base.css';
+// import 'virtual:windi-base.css';
 // import 'virtual:windi-components.css'
 // import 'virtual:windi-utilities.css'
 // Register icon sprite

src/router/modules/otherRoute/otherRoute.ts

@@ -44,6 +44,12 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
         component: () => import('@/views/components/count-to/index.vue'),
         meta: { title: t('route.pathName.countTo') },
       },
+      {
+        path: 'form',
+        name: 'RtForm',
+        component: () => import('@/views/components/form/index.vue'),
+        meta: { title: t('route.pathName.form') },
+      },
     ],
   },
   {

src/styles/el-theme.scss

@@ -1,16 +1,61 @@
 // 修改element主题
 :root {
   --el-border-color-lighter: #{$text-color-placeholder};
+  --el-datepicker-border-color: #{$text-color-placeholder};
   --el-text-color-primary: #{$text-color-primary};
   --el-text-color-regular: #{$text-color-regular};
   --el-text-color-secondary: #{$text-color-secondary};
   --el-text-color-placeholder: #{$text-color-placeholder};
+  --el-input-bg-color: #{$main-bg-color};
+  --el-disabled-bg-color: #{$main-bg-color};
+  // --el-disabled-border-color: #{$text-color-placeholder};
+}
+
+// input
+.el-input {
+  --el-input-bg-color: #{$main-bg-color};
+}
+.el-textarea {
+  --el-input-bg-color: #{$main-bg-color};
+}
+// button
+.el-button {
+  --el-button-bg-color: #{$main-bg-color};
 }
 
 .el-drawer {
   --el-drawer-bg-color: #{$main-bg-color};
 }
 
+.el-scrollbar {
+  --el-scrollbar-bg-color: #{$main-bg-color};
+}
+
+// 时间选择器
+.el-date-range-picker {
+  --el-datepicker-inner-border-color: #{$text-color-placeholder};
+  --el-datepicker-inrange-bg-color: #{$sub-main-bg-content};
+  --el-datepicker-inrange-hover-bg-color: #{$sub-main-bg-content};
+}
+.el-picker-panel {
+  background-color: #{$main-bg-color};
+}
+.el-picker-panel__footer {
+  background-color: #{$main-bg-color};
+}
+
+// select颜色
+.el-select__popper.el-popper {
+  background-color: #{$main-bg-color};
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: #{$sub-main-bg-content};
+}
+.el-popper.is-light .el-popper__arrow::before {
+  background-color: #{$main-bg-color};
+}
+
 .el-card {
   --el-card-bg-color: #{$main-bg-color};
   --el-card-border-color: #{$text-color-placeholder};

src/styles/index.scss

@@ -64,53 +64,66 @@ div:focus {
   }
 }
 
-// main-container global css
-.app-container {
-  padding: 20px;
-}
-
 .title {
   display: inline-block;
   font-size: 18px;
   font-weight: 700;
   // margin: 10px 0;
 }
 
-.checkbtn {
-  width: 90px;
-  height: 36px;
-  margin: 15px 0 0 10px;
-  font-size: 14px;
-  color: #fff;
-  background: inherit;
-  background-color: rgba(64, 158, 255, 1);
-  border: none;
-  border-width: 0;
-  border-radius: 4px;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+.page-container {
+  width: 100%;
+  min-height: 100%;
+  border-radius: 10px;
 }
 
-.bigselect {
-  width: 400px;
+ul {
+  list-style-type: none;
+  padding: 0;
 }
 
-.paging {
-  display: flex;
-  justify-content: flex-end;
-}
+@for $i from 1 to 6 {
+  * > .enter-x:nth-child(#{$i}) {
+    transform: translateX(50px);
+  }
+  * > .-enter-x:nth-child(#{$i}) {
+    transform: translateX(-50px);
+  }
+  * > .enter-x:nth-child(#{$i}),
+  * > .-enter-x:nth-child(#{$i}) {
+    z-index: 10 - $i;
+    opacity: 0;
+    animation: enter-x-animation 0.4s ease-in-out 0.3s;
+    animation-fill-mode: forwards;
+    animation-delay: calc(($i * 1s) / 10);
+  }
 
-.tablecontent {
-  margin-bottom: 40px;
+  * > .enter-y:nth-child(#{$i}) {
+    transform: translateY(50px);
+  }
+  * > .-enter-y:nth-child(#{$i}) {
+    transform: translatey(-50px);
+  }
+  * > .enter-y:nth-child(#{$i}),
+  * > .-enter-y:nth-child(#{$i}) {
+    z-index: 10 - $i;
+    opacity: 0;
+    animation: enter-x-animation 0.4s ease-in-out 0.3s;
+    animation-fill-mode: forwards;
+    animation-delay: calc(($i * 1s) / 5);
+  }
 }
 
-.el-dialog__body {
-  padding: 0;
+@keyframes enter-x-animation {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
-.page-container {
-  width: 100%;
-  min-height: 100%;
-  border-radius: 10px;
+@keyframes enter-y-animation {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }