Merge pull request #222 from DevDengChao/codex/lint-components

fix: lint src components

src/components/DiyEditor/components/ComponentContainer.vue

@@ -165,8 +165,8 @@ $toolbar-position: -55px;
       width: 80px;
       height: 25px;
       font-size: 12px;
-      color: #6a6a6a;
       line-height: 25px;
+      color: #6a6a6a;
       text-align: center;
       background: #fff;
       box-shadow:

src/components/DiyEditor/components/ComponentLibrary.vue

@@ -94,9 +94,9 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 <style scoped lang="scss">
 .editor-left {
   z-index: 1;
-  flex-shrink: 0;
-  user-select: none;
   box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
+  user-select: none;
+  flex-shrink: 0;
 
   :deep(.el-collapse) {
     border-top: none;

src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue

@@ -55,12 +55,12 @@ const handleToggleFab = () => {
 /* 模态背景 */
 .modal-bg {
   position: absolute;
-  left: calc(50% - 375px / 2);
   top: 0;
+  left: calc(50% - 375px / 2);
   z-index: 11;
   width: 375px;
   height: 100%;
-  background-color: rgba(#000000, 0.4);
+  background-color: rgb(0 0 0 / 40%);
 }
 
 .fab-icon {

src/components/DiyEditor/components/mobile/HotZone/components/HotZoneEditDialog/index.vue

@@ -192,39 +192,39 @@ const handleAppLinkChange = (appLink: AppLink) => {
 <style scoped lang="scss">
 .hot-zone {
   position: absolute;
-  background: var(--el-color-primary-light-7);
+  z-index: 10;
-  opacity: 0.8;
-  border: 1px solid var(--el-color-primary);
-  color: var(--el-color-primary);
-  font-size: 16px;
   display: flex;
+  font-size: 16px;
+  color: var(--el-color-primary);
+  cursor: move;
+  background: var(--el-color-primary-light-7);
+  border: 1px solid var(--el-color-primary);
+  opacity: 0.8;
   align-items: center;
   justify-content: center;
-  cursor: move;
-  z-index: 10;
 
   /* 控制点 */
   .ctrl-dot {
     position: absolute;
+    z-index: 11;
     width: 8px;
     height: 8px;
-    border-radius: 50%;
-    border: inherit;
     background-color: #fff;
-    z-index: 11;
+    border: inherit;
+    border-radius: 50%;
   }
 
   .delete {
-    display: none;
     position: absolute;
     top: 0;
     right: 0;
+    display: none;
     padding: 2px 2px 6px 6px;
-    background-color: var(--el-color-primary);
-    border-radius: 0 0 0 80%;
-    cursor: pointer;
     color: #fff;
     text-align: right;
+    cursor: pointer;
+    background-color: var(--el-color-primary);
+    border-radius: 0 0 0 80%;
   }
 
   &:hover {

src/components/DiyEditor/components/mobile/HotZone/index.vue

@@ -28,15 +28,15 @@ const props = defineProps<{ property: HotZoneProperty }>()
 <style scoped lang="scss">
 .hot-zone {
   position: absolute;
-  background: var(--el-color-primary-light-7);
+  z-index: 10;
-  opacity: 0.8;
-  border: 1px solid var(--el-color-primary);
-  color: var(--el-color-primary);
-  font-size: 14px;
   display: flex;
+  font-size: 14px;
+  color: var(--el-color-primary);
+  cursor: move;
+  background: var(--el-color-primary-light-7);
+  border: 1px solid var(--el-color-primary);
+  opacity: 0.8;
   align-items: center;
   justify-content: center;
-  cursor: move;
-  z-index: 10;
 }
 </style>

src/components/DiyEditor/components/mobile/HotZone/property.vue

@@ -42,22 +42,22 @@ const handleOpenEditDialog = () => {
 <style scoped lang="scss">
 .hot-zone {
   position: absolute;
+  display: flex;
+  font-size: 12px;
+  color: #fff;
+  cursor: move;
   background: #409effbf;
   border: 1px solid var(--el-color-primary);
-  color: #fff;
-  font-size: 12px;
-  display: flex;
   align-items: center;
   justify-content: center;
-  cursor: move;
 
   /* 控制点 */
   .ctrl-dot {
     position: absolute;
     width: 4px;
     height: 4px;
-    border-radius: 50%;
     background-color: #fff;
+    border-radius: 50%;
   }
 }
 </style>

src/components/DiyEditor/components/mobile/MenuSwiper/index.vue

@@ -103,13 +103,16 @@ watch(
   .el-carousel__indicator {
     padding-top: 0;
     padding-bottom: 0;
+
     .el-carousel__button {
       --el-carousel-indicator-height: 6px;
       --el-carousel-indicator-width: 6px;
       --el-carousel-indicator-out-color: #ff6000;
+
       border-radius: 6px;
     }
   }
+
   .el-carousel__indicator.is-active {
     .el-carousel__button {
       --el-carousel-indicator-width: 12px;

src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue

@@ -93,8 +93,8 @@ defineOptions({ name: 'NavigationBarCellProperty' })
 
 const props = withDefaults(
   defineProps<{
-    modelValue: NavigationBarCellProperty[]
+    modelValue?: NavigationBarCellProperty[]
-    isMp: boolean
+    isMp?: boolean
   }>(),
   {
     modelValue: () => [],

src/components/DiyEditor/components/mobile/NavigationBar/index.vue

@@ -67,10 +67,10 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
 .navigation-bar {
   display: flex;
   height: 50px;
+  padding: 0 6px;
   background: #fff;
   justify-content: space-between;
   align-items: center;
-  padding: 0 6px;
 
   /* 左边 */
   .left {

src/components/DiyEditor/index.vue

@@ -583,12 +583,12 @@ $toolbar-height: 42px;
         gap: 8px;
 
         :deep(.el-tag) {
-          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
           border: none;
+          box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
 
           .el-tag__content {
-            width: 100%;
             display: flex;
+            width: 100%;
             align-items: center;
             justify-content: flex-start;
 

src/components/Form/src/Form.vue

@@ -27,7 +27,7 @@ const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('form')
 
 export default defineComponent({
-  // eslint-disable-next-line vue/no-reserved-component-names
+
   name: 'Form',
   props: {
     // 生成Form的布局结构数组

src/components/FormCreate/src/components/IframeComponent.vue

@@ -64,9 +64,9 @@ const showPreview = computed(() => {
 }
 
 .iframe-preview {
+  overflow: hidden;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
-  overflow: hidden;
 }
 
 .iframe-content {
@@ -76,11 +76,11 @@ const showPreview = computed(() => {
 
 .iframe-placeholder {
   display: flex;
-  align-items: center;
-  justify-content: center;
   min-height: 200px;
+  background-color: #fafafa;
   border: 1px dashed #dcdfe6;
   border-radius: 4px;
-  background-color: #fafafa;
+  align-items: center;
+  justify-content: center;
 }
 </style>

src/components/Infotip/src/Infotip.vue

@@ -14,7 +14,6 @@ defineProps({
   title: propTypes.string.def(''),
   schema: {
     type: Array as PropType<Array<string | TipSchema>>,
-    required: true,
     default: () => []
   },
   showIndex: propTypes.bool.def(true),

src/components/InputWithColor/index.vue

@@ -26,6 +26,7 @@ const { modelValue, color } = useVModels(props, emit)
 <style scoped lang="scss">
 :deep(.el-input-group__append) {
   padding: 0;
+
   .el-color-picker__trigger {
     padding: 0;
     border-left: none;

src/components/MagicCubeEditor/index.vue

@@ -225,15 +225,16 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
 <style lang="scss" scoped>
 .cube-table {
   position: relative;
-  border-spacing: 0;
   border-collapse: collapse;
+  border-spacing: 0;
 
   .cube {
-    border: 1px solid var(--el-border-color);
-    text-align: center;
     color: var(--el-text-color-secondary);
+    text-align: center;
     cursor: pointer;
+    border: 1px solid var(--el-border-color);
     box-sizing: border-box;
+
     &.active {
       background: var(--el-color-primary-light-9);
     }
@@ -242,28 +243,28 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
   .hot-area {
     position: absolute;
     display: flex;
+    color: var(--el-color-primary);
+    cursor: pointer;
+    background: var(--el-color-primary-light-8);
+    border: 1px solid var(--el-color-primary);
+    border-collapse: collapse;
+    border-spacing: 0;
+    box-sizing: border-box;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--el-color-primary);
-    background: var(--el-color-primary-light-8);
-    color: var(--el-color-primary);
-    box-sizing: border-box;
-    border-spacing: 0;
-    border-collapse: collapse;
-    cursor: pointer;
 
     .btn-delete {
-      z-index: 1;
       position: absolute;
       top: -8px;
       right: -8px;
-      height: 16px;
+      z-index: 1;
-      width: 16px;
       display: flex;
+      width: 16px;
+      height: 16px;
+      background-color: #fff;
+      border-radius: 50%;
       align-items: center;
       justify-content: center;
-      border-radius: 50%;
-      background-color: #fff;
     }
   }
 }

src/components/MarkdownView/index.vue

@@ -51,14 +51,14 @@ onMounted(async () => {
 
 <style lang="scss">
 .markdown-view {
-  font-family: PingFang SC;
+  max-width: 100%;
+  font-family: "PingFang SC";
   font-size: 0.95rem;
   font-weight: 400;
   line-height: 1.6rem;
-  letter-spacing: 0em;
+  letter-spacing: 0;
-  text-align: left;
   color: #3b3e55;
-  max-width: 100%;
+  text-align: left;
 
   pre {
     position: relative;
@@ -69,22 +69,23 @@ onMounted(async () => {
   }
 
   code.hljs {
-    border-radius: 6px;
-    padding-top: 20px;
     width: auto;
-    @media screen and (min-width: 1536px) {
+    padding-top: 20px;
+    border-radius: 6px;
+
+    @media screen and (width >= 1536px) {
       width: 960px;
     }
 
-    @media screen and (max-width: 1536px) and (min-width: 1024px) {
+    @media screen and (width <= 1536px) and (width >= 1024px) {
       width: calc(100vw - 400px - 64px - 32px * 2);
     }
 
-    @media screen and (max-width: 1024px) and (min-width: 768px) {
+    @media screen and (width <= 1024px) and (width >= 768px) {
       width: calc(100vw - 32px * 2);
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       width: calc(100vw - 16px * 2);
     }
   }
@@ -107,9 +108,9 @@ onMounted(async () => {
   h4,
   h5,
   h6 {
-    color: var(--color-G900);
     margin: 24px 0 8px;
     font-weight: 600;
+    color: #3b3e55;
   }
 
   h1 {
@@ -145,8 +146,8 @@ onMounted(async () => {
   /* 列表（有序，无序） */
   ul,
   ol {
-    margin: 0 0 8px 0;
     padding: 0;
+    margin: 0 0 8px;
     font-size: 16px;
     line-height: 24px;
     color: #3b3e55; // var(--color-CG600);
@@ -158,8 +159,8 @@ onMounted(async () => {
   }
 
   ol > li {
-    list-style-type: decimal;
     margin-bottom: 1rem;
+    list-style-type: decimal;
     // 表达式,修复有序列表序号展示不全的问题
     // &:nth-child(n + 10) {
     //     margin-left: 30px;
@@ -171,23 +172,23 @@ onMounted(async () => {
   }
 
   ul > li {
-    list-style-type: disc;
-    font-size: 16px;
-    line-height: 24px;
     margin-right: 11px;
     margin-bottom: 1rem;
+    font-size: 16px;
+    line-height: 24px;
     color: #3b3e55; // var(--color-G900);
+    list-style-type: disc;
   }
 
   ol ul,
   ol ul > li,
   ul ul,
   ul ul li {
+    margin-bottom: 1rem;
+    margin-left: 6px;
     // list-style: circle;
     font-size: 16px;
     list-style: none;
-    margin-left: 6px;
-    margin-bottom: 1rem;
   }
 
   ul ul ul,

src/components/OperateLogV2/src/OperateLogV2.vue

@@ -31,7 +31,7 @@ import { ElTag } from 'element-plus'
 defineOptions({ name: 'OperateLogV2' })
 
 interface Props {
-  logList: OperateLogVO[] // 操作日志列表
+  logList?: OperateLogVO[] // 操作日志列表
 }
 
 withDefaults(defineProps<Props>(), {

src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue

@@ -246,9 +246,9 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .simple-process-model-container {
+  position: relative;
   width: 100%;
   height: 100%;
-  position: relative;
   overflow: hidden;
   user-select: none; // 禁用文本选择
 }

src/components/Table/src/Table.vue

@@ -9,7 +9,7 @@ import { set } from 'lodash-es'
 import { Pagination, TableColumn, TableSetPropsType, TableSlotDefault } from '@/types/table'
 
 export default defineComponent({
-  // eslint-disable-next-line vue/no-reserved-component-names
+
   name: 'Table',
   props: {
     pageSize: propTypes.number.def(10),

src/components/Table/src/TableSelectForm.vue

@@ -33,8 +33,8 @@ import { ElTable } from 'element-plus'
 defineOptions({ name: 'TableSelectForm' })
 withDefaults(
   defineProps<{
-    modelValue: any[]
+    modelValue?: any[]
-    title: string
+    title?: string
   }>(),
   { modelValue: () => [], title: '选择' }
 )

src/components/UploadFile/src/UploadImg.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="upload-box">
+  <div class="upload-box" :style="uploadStyle">
     <el-upload
       :id="uuid"
       :accept="fileType.join(',')"
@@ -82,6 +82,13 @@ const props = defineProps({
   showBtnText: propTypes.bool.def(true), // 是否显示按钮文字
   directory: propTypes.string.def(undefined) // 上传目录 ==> 非必传（默认为 undefined）
 })
+
+const uploadStyle = computed(() => ({
+  '--upload-width': props.width,
+  '--upload-height': props.height,
+  '--upload-border-radius': props.borderradius
+}))
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 生成组件唯一id
@@ -167,11 +174,11 @@ const uploadError = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: v-bind(width);
+      width: var(--upload-width);
-      height: v-bind(height);
+      height: var(--upload-height);
       overflow: hidden;
       border: 1px dashed var(--el-border-color-darker);
-      border-radius: v-bind(borderradius);
+      border-radius: var(--upload-border-radius);
       transition: var(--el-transition-duration-fast);
 
       &:hover {
@@ -192,7 +199,7 @@ const uploadError = () => {
         overflow: hidden;
         background-color: transparent;
         border: 1px dashed var(--el-border-color-darker);
-        border-radius: v-bind(borderradius);
+        border-radius: var(--upload-border-radius);
 
         &:hover {
           border: 1px dashed var(--el-color-primary);

src/components/UploadFile/src/UploadImgs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="upload-box">
+  <div class="upload-box" :style="uploadStyle">
     <el-upload
       v-model:file-list="fileList"
       :accept="fileType.join(',')"
@@ -85,6 +85,12 @@ const props = defineProps({
   directory: propTypes.string.def(undefined) // 上传目录 ==> 非必传（默认为 undefined）
 })
 
+const uploadStyle = computed(() => ({
+  '--upload-width': props.width,
+  '--upload-height': props.height,
+  '--upload-border-radius': props.borderradius
+}))
+
 const { uploadUrl, httpRequest } = useUpload(props.directory)
 
 const fileList = ref<UploadUserFile[]>([])
@@ -238,7 +244,7 @@ const handleExceed = () => {
       padding: 0;
       overflow: hidden;
       border: 1px dashed var(--el-border-color-darker);
-      border-radius: v-bind(borderradius);
+      border-radius: var(--upload-border-radius);
 
       &:hover {
         border: 1px dashed var(--el-color-primary);
@@ -252,10 +258,10 @@ const handleExceed = () => {
 
     .el-upload-list__item,
     .el-upload--picture-card {
-      width: v-bind(width);
+      width: var(--upload-width);
-      height: v-bind(height);
+      height: var(--upload-height);
       background-color: transparent;
-      border-radius: v-bind(borderradius);
+      border-radius: var(--upload-border-radius);
     }
 
     .upload-image {

src/components/UserSelectForm/index.vue

@@ -158,11 +158,13 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
   .el-transfer {
     display: flex;
   }
+
   .el-transfer__buttons {
     display: flex !important;
     flex-direction: column-reverse;
     justify-content: center;
     gap: 20px;
+
     .el-transfer__button:nth-child(2) {
       margin: 0;
     }

src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js

@@ -12,7 +12,7 @@ import { isFunction, isObject, some } from 'min-dash'
 const WILDCARD = '*'
 
 function CamundaModdleExtension(eventBus) {
-  // eslint-disable-next-line @typescript-eslint/no-this-alias
+
   const self = this
 
   eventBus.on('moddleCopy.canCopyProperty', function (context) {

src/components/bpmnProcessDesigner/package/penal/task/task-components/HttpHeaderEditor.vue

@@ -141,8 +141,8 @@ watch(
 .header-editor {
   .header-list {
     max-height: 400px;
-    overflow-y: auto;
     margin-bottom: 16px;
+    overflow-y: auto;
   }
 
   .header-item {
@@ -156,8 +156,8 @@ watch(
     }
 
     .separator {
-      color: #606266;
       font-weight: 500;
+      color: #606266;
     }
 
     .header-value {

src/components/bpmnProcessDesigner/package/penal/time-event-config/TimeEventConfig.vue

@@ -18,7 +18,7 @@
       </el-button-group>
       <el-icon v-if="valid" color="green" style="margin-left: 8px"><CircleCheckFilled /></el-icon>
     </div>
-    <div style="margin-top: 10px; display: flex; align-items: center">
+    <div style=" display: flex;margin-top: 10px; align-items: center">
       <span>条件：</span>
       <el-input
         v-model="condition"