style: 修改样式

Author: kailong321200875

src/components/Editor/src/Editor.vue

@@ -99,7 +99,6 @@ const handleChange = (editor: IDomEditor) => {
 // 组件销毁时，及时销毁编辑器
 onBeforeUnmount(() => {
   const editor = unref(editorRef.value)
-  if (editor === null) return
 
   // 销毁，并移除 editor
   editor?.destroy()
@@ -121,7 +120,7 @@ defineExpose({
     <Toolbar
       :editor="editorRef"
       :editorId="editorId"
-      class="b-b-1 border-solid border-[var(--tags-view-border-color)]"
+      class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
     />
     <!-- 编辑器 -->
     <Editor

src/components/Form/src/Form.vue

@@ -182,41 +182,7 @@ export default defineComponent({
 
     // 渲染formItem
     const renderFormItem = (item: FormSchema) => {
-      // 单独给只有options属性的组件做判断
-      // const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer']
-
-      // if (
-      //   item?.component !== 'SelectV2' &&
-      //   item?.component !== 'Cascader' &&
-      //   item?.componentProps?.options
-      // ) {
-      //   slotsMap.default = () => renderOptions(item)
-      // }
-
-      // const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
-      // 如果有 labelMessage，自动使用插槽渲染
-      // if (item?.labelMessage) {
-      //   formItemSlots.label = () => {
-      //     return (
-      //       <>
-      //         <span>{item.label}</span>
-      //         <ElTooltip placement="right" raw-content>
-      //           {{
-      //             content: () => <span v-html={item.labelMessage}></span>,
-      //             default: () => (
-      //               <Icon
-      //                 icon="ep:warning"
-      //                 size={16}
-      //                 color="var(--el-color-primary)"
-      //                 class="ml-2px relative top-1px"
-      //               ></Icon>
-      //             )
-      //           }}
-      //         </ElTooltip>
-      //       </>
-      //     )
-      //   }
-      // }
+      const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
       return (
         <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
           {{
@@ -291,7 +257,8 @@ export default defineComponent({
                   </Com>
                 )
               }
-            }
+            },
+            ...formItemSlots
           }}
         </ElFormItem>
       )

src/components/Form/src/helper/index.ts

@@ -86,7 +86,7 @@ export const setGridProp = (col: ColProps = {}): ColProps => {
 export const setComponentProps = (item: FormSchema): Recordable => {
   // const notNeedClearable = ['ColorPicker']
   // 拆分事件并组合
-  const onEvents = item?.componentProps?.on || {}
+  const onEvents = (item?.componentProps as any)?.on || {}
   const newOnEvents: Recordable = {}
 
   for (const key in onEvents) {
@@ -165,13 +165,13 @@ export const initModel = (schema: FormSchema[], formModel: Recordable) => {
 export const setFormItemSlots = (slots: Slots, field: string): Recordable => {
   const slotObj: Recordable = {}
   if (slots[`${field}-error`]) {
-    slotObj['error'] = (data: Recordable) => {
-      return getSlot(slots, `${field}-error`, data)
+    slotObj['error'] = (...args: any[]) => {
+      return getSlot(slots, `${field}-error`, args)
     }
   }
   if (slots[`${field}-label`]) {
-    slotObj['label'] = (data: Recordable) => {
-      return getSlot(slots, `${field}-label`, data)
+    slotObj['label'] = (...args: any[]) => {
+      return getSlot(slots, `${field}-label`, args)
     }
   }
   return slotObj

src/components/Form/src/types/index.ts

@@ -5,9 +5,11 @@ import {
   InputNumberProps,
   CascaderProps,
   CascaderNode,
-  CascaderValue
+  CascaderValue,
+  FormItemRule
 } from 'element-plus'
 import type { AxiosPromise } from 'axios'
+import { IEditorConfig } from '@wangeditor/editor'
 
 export interface PlaceholderModel {
   placeholder?: string
@@ -731,6 +733,11 @@ export interface TimeSelectComponentProps {
   style?: CSSProperties
 }
 
+export interface EditorComponentProps {
+  editorConfig?: IEditorConfig
+  style?: CSSProperties
+}
+
 export interface ColProps {
   span?: number
   xs?: number
@@ -752,10 +759,13 @@ export type FormValueType = string | number | string[] | number[] | boolean | un
 export interface FormItemProps {
   labelWidth?: string | number
   required?: boolean
-  rules?: Recordable
+  rules?: FormItemRule | FormItemRule[]
   error?: string
   showMessage?: boolean
   inlineMessage?: boolean
+  size?: ElementPlusSize
+  for?: string
+  validateStatus?: '' | 'error' | 'validating' | 'success'
   style?: CSSProperties
 }
 
@@ -800,6 +810,7 @@ export interface FormSchema {
     | DatePickerComponentProps
     | DateTimePickerComponentProps
     | TimePickerComponentProps
+    | EditorComponentProps
 
   /**
    * formItem组件属性，具体可以查看element-plus文档

src/components/InputPassword/src/InputPassword.vue

@@ -53,19 +53,11 @@ const getPasswordStrength = computed(() => {
   const zxcvbnRef = zxcvbn(unref(valueRef)) as ZxcvbnResult
   return value ? zxcvbnRef.score : -1
 })
-
-const getIconName = computed(() =>
-  unref(textType) === 'password' ? 'ant-design:eye-invisible-outlined' : 'ant-design:eye-outlined'
-)
 </script>
 
 <template>
   <div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`]">
-    <ElInput v-bind="$attrs" v-model="valueRef" :type="textType">
-      <template #suffix>
-        <Icon class="el-input__icon cursor-pointer" :icon="getIconName" @click="changeTextType" />
-      </template>
-    </ElInput>
+    <ElInput v-bind="$attrs" v-model="valueRef" showPassword :type="textType" />
     <div
       v-if="strength"
       :class="`${prefixCls}__bar`"

src/locales/en.ts

@@ -280,7 +280,10 @@ export default {
     set: 'Set',
     subitem: 'Subitem',
     formValidation: 'Form validation',
-    verifyReset: 'Verify reset'
+    verifyReset: 'Verify reset',
+    // 富文本编辑器
+    richText: 'Rich text',
+    form: 'Form'
   },
   guideDemo: {
     guide: 'Guide',

src/locales/zh-CN.ts

@@ -279,7 +279,10 @@ export default {
     set: '设置',
     subitem: '子项',
     formValidation: '表单验证',
-    verifyReset: '验证重置'
+    verifyReset: '验证重置',
+    // 富文本编辑器
+    richText: '富文本编辑器',
+    form: '表单'
   },
   guideDemo: {
     guide: '引导页',

src/router/index.ts

@@ -166,7 +166,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
           //   }
           // }
         ]
-      }
+      },
       // {
       //   path: 'table',
       //   component: getParentLayout(),
@@ -203,26 +203,26 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       //     }
       //   ]
       // },
-      // {
-      //   path: 'editor-demo',
-      //   component: getParentLayout(),
-      //   redirect: '/components/editor-demo/editor',
-      //   name: 'EditorDemo',
-      //   meta: {
-      //     title: t('router.editor'),
-      //     alwaysShow: true
-      //   },
-      //   children: [
-      //     {
-      //       path: 'editor',
-      //       component: () => import('@/views/Components/Editor/Editor.vue'),
-      //       name: 'Editor',
-      //       meta: {
-      //         title: t('router.richText')
-      //       }
-      //     }
-      //   ]
-      // },
+      {
+        path: 'editor-demo',
+        component: getParentLayout(),
+        redirect: '/components/editor-demo/editor',
+        name: 'EditorDemo',
+        meta: {
+          title: t('router.editor'),
+          alwaysShow: true
+        },
+        children: [
+          {
+            path: 'editor',
+            component: () => import('@/views/Components/Editor/Editor.vue'),
+            name: 'Editor',
+            meta: {
+              title: t('router.richText')
+            }
+          }
+        ]
+      }
       // {
       //   path: 'search',
       //   component: () => import('@/views/Components/Search.vue'),

src/views/Components/Form/DefaultForm.vue

@@ -1343,7 +1343,50 @@ const schema = reactive<FormSchema[]>([
     field: 'field63',
     component: 'TimeSelect',
     label: t('formDemo.default')
-  }
+  },
+  {
+    field: 'field64',
+    component: 'Divider',
+    label: t('formDemo.richText')
+  },
+  {
+    field: 'field65',
+    component: 'Editor',
+    value: 'hello world',
+    label: t('formDemo.default'),
+    componentProps: {
+      editorConfig: {
+        placeholder: '请输入内容...'
+      }
+    },
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'field66',
+    component: 'Divider',
+    label: t('formDemo.inputPassword')
+  },
+  {
+    field: 'field67',
+    component: 'InputPassword',
+    label: t('formDemo.default'),
+    componentProps: {
+      strength: true
+    }
+  },
+  {
+    field: 'field68',
+    component: 'Divider',
+    label: `${t('formDemo.form')} t('formDemo.slot')}`,
+  },
+  {
+    field: 'field69',
+    component: 'Input',
+    value: 'test',
+    label: `default`,
+  },
 ])
 
 const { register, formRef, methods } = useForm({
@@ -1360,68 +1403,8 @@ const changeToggle = () => {
 <template>
   <button @click="changeToggle">测试</button>
   <ContentWrap :title="t('formDemo.defaultForm')" :message="t('formDemo.formDes')">
-    <!-- <Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'">
-      <template #field4-prefix>
-        <Icon icon="ep:calendar" class="el-input__icon" />
-      </template>
-      <template #field4-suffix>
-        <Icon icon="ep:calendar" class="el-input__icon" />
-      </template>
-
-      <template #field5-prepend> Http:// </template>
-      <template #field5-append> .com </template>
-
-      <template #field9-default="{ item }">
-        <div class="value">{{ item.value }}</div>
-        <span class="link">{{ item.link }}</span>
-      </template>
-
-      <template #field15-option="{ item }">
-        <span style="float: left">{{ item.label }}</span>
-        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
-          {{ item.value }}
-        </span>
-      </template>
-
-      <template #field17-option="{ item }">
-        <span style="float: left">{{ item.label }}</span>
-        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
-          {{ item.value }}
-        </span>
-      </template>
-
-      <template #field20-default="{ item }">
-        <span style="float: left">{{ item.label }}</span>
-        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
-          {{ item.value }}
-        </span>
-      </template>
-
-      <template #field22-default="{ item }">
-        <span style="float: left">{{ item.label }}</span>
-        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
-          {{ item.value }}
-        </span>
-      </template>
-
-      <template #field25-default="{ node, data }">
-        <span>{{ data.label }}</span>
-        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-      </template>
-
-      <template #field36-default="{ option }">
-        <span>{{ option.value }} - {{ option.desc }}</span>
-      </template>
-
-      <template #field55-default="cell">
-        <div class="cell" :class="{ current: cell.isCurrent }">
-          <span class="text">{{ cell.text }}</span>
-          <span v-if="isHoliday(cell)" class="holiday"></span>
-        </div>
-      </template>
-    </Form> -->
-
-    <Form @register="register" />
+    <Form @register="register" label-width="auto" :label-position="isMobile ? 'top' : 'right'">
+    </Form>
   </ContentWrap>
 </template>