Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vue3

src/api/erp/product/category/index.ts

@@ -13,8 +13,8 @@ export interface ProductCategoryVO {
 // ERP 产品分类 API
 export const ProductCategoryApi = {
   // 查询产品分类列表
-  getProductCategoryList: async (params) => {
+  getProductCategoryList: async () => {
-    return await request.get({ url: `/erp/product-category/list`, params })
+    return await request.get({ url: `/erp/product-category/list` })
   },
 
   // 查询产品分类精简列表

src/api/infra/demo/demo02/index.ts

@@ -7,8 +7,8 @@ export interface Demo02CategoryVO {
 }
 
 // 查询示例分类列表
-export const getDemo02CategoryList = async (params) => {
+export const getDemo02CategoryList = async () => {
-  return await request.get({ url: `/infra/demo02-category/list`, params })
+  return await request.get({ url: `/infra/demo02-category/list` })
 }
 
 // 查询示例分类详情

src/api/mall/trade/order/index.ts

@@ -141,7 +141,7 @@ export const getExpressTrackList = async (id: number | null) => {
 }
 
 export interface DeliveryVO {
-  id: number // 订单编号
+  id?: number // 订单编号
   logisticsId: number | null // 物流公司编号
   logisticsNo: string // 物流编号
 }

src/components/DictSelect/index.ts

@@ -1,3 +0,0 @@
-import DictSelect from './src/DictSelect.vue'
-
-export { DictSelect }

src/components/DictSelect/src/DictSelect.vue

@@ -1,46 +0,0 @@
-<!-- 数据字典 Select 选择器 -->
-<template>
-  <el-select class="w-1/1" v-bind="attrs">
-    <template v-if="valueType === 'int'">
-      <el-option
-        v-for="(dict, index) in getIntDictOptions(dictType)"
-        :key="index"
-        :label="dict.label"
-        :value="dict.value"
-      />
-    </template>
-    <template v-if="valueType === 'str'">
-      <el-option
-        v-for="(dict, index) in getStrDictOptions(dictType)"
-        :key="index"
-        :label="dict.label"
-        :value="dict.value"
-      />
-    </template>
-    <template v-if="valueType === 'bool'">
-      <el-option
-        v-for="(dict, index) in getBoolDictOptions(dictType)"
-        :key="index"
-        :label="dict.label"
-        :value="dict.value"
-      />
-    </template>
-  </el-select>
-</template>
-
-<script lang="ts" setup>
-import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
-
-// 接受父组件参数
-interface Props {
-  dictType: string // 字典类型
-  valueType: string // 字典值类型
-}
-
-withDefaults(defineProps<Props>(), {
-  dictType: '',
-  valueType: 'str'
-})
-const attrs = useAttrs()
-defineOptions({ name: 'DictSelect' })
-</script>

src/components/FormCreate/index.ts

@@ -1,3 +1,4 @@
 import { useFormCreateDesigner } from './src/useFormCreateDesigner'
+import { useApiSelect } from './src/components/useApiSelect'
 
-export { useFormCreateDesigner }
+export { useFormCreateDesigner, useApiSelect }

src/components/FormCreate/src/components/DictSelect.vue

@@ -0,0 +1,59 @@
+<!-- 数据字典 Select 选择器 -->
+<template>
+  <el-select v-if="selectType === 'select'" class="w-1/1" v-bind="attrs">
+    <el-option
+      v-for="(dict, index) in getDictOptions"
+      :key="index"
+      :label="dict.label"
+      :value="dict.value"
+    />
+  </el-select>
+  <el-radio-group v-if="selectType === 'radio'" class="w-1/1" v-bind="attrs">
+    <el-radio v-for="(dict, index) in getDictOptions" :key="index" :value="dict.value">
+      {{ dict.label }}
+    </el-radio>
+  </el-radio-group>
+  <el-checkbox-group v-if="selectType === 'checkbox'" class="w-1/1" v-bind="attrs">
+    <el-checkbox
+      v-for="(dict, index) in getDictOptions"
+      :key="index"
+      :label="dict.label"
+      :value="dict.value"
+    />
+  </el-checkbox-group>
+</template>
+
+<script lang="ts" setup>
+import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+
+defineOptions({ name: 'DictSelect' })
+
+const attrs = useAttrs()
+
+// 接受父组件参数
+interface Props {
+  dictType: string // 字典类型
+  valueType?: 'str' | 'int' | 'bool' // 字典值类型
+  selectType?: 'select' | 'radio' | 'checkbox' // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
+  formCreateInject?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  valueType: 'str',
+  selectType: 'select'
+})
+
+// 获得字典配置
+const getDictOptions = computed(() => {
+  switch (props.valueType) {
+    case 'str':
+      return getStrDictOptions(props.dictType)
+    case 'int':
+      return getIntDictOptions(props.dictType)
+    case 'bool':
+      return getBoolDictOptions(props.dictType)
+    default:
+      return []
+  }
+})
+</script>

src/components/FormCreate/src/components/useApiSelect.tsx

@@ -0,0 +1,143 @@
+import request from '@/config/axios'
+import { isEmpty } from '@/utils/is'
+import { ApiSelectProps } from '@/components/FormCreate/src/type'
+import { jsonParse } from '@/utils'
+
+export const useApiSelect = (option: ApiSelectProps) => {
+  return defineComponent({
+    name: option.name,
+    props: {
+      // 选项标签
+      labelField: {
+        type: String,
+        default: () => option.labelField ?? 'label'
+      },
+      // 选项的值
+      valueField: {
+        type: String,
+        default: () => option.valueField ?? 'value'
+      },
+      // api 接口
+      url: {
+        type: String,
+        default: () => option.url ?? ''
+      },
+      // 请求类型
+      method: {
+        type: String,
+        default: 'GET'
+      },
+      // 请求参数
+      data: {
+        type: String,
+        default: ''
+      },
+      // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
+      selectType: {
+        type: String,
+        default: 'select'
+      },
+      // 是否多选
+      multiple: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup(props) {
+      const attrs = useAttrs()
+      const options = ref<any[]>([]) // 下拉数据
+      const getOptions = async () => {
+        options.value = []
+        // 接口选择器
+        if (isEmpty(props.url)) {
+          return
+        }
+        let data = []
+        switch (props.method) {
+          case 'GET':
+            data = await request.get({ url: props.url })
+            break
+          case 'POST':
+            data = await request.post({ url: props.url, data: jsonParse(props.data) })
+            break
+        }
+
+        if (Array.isArray(data)) {
+          options.value = data.map((item: any) => ({
+            label: item[props.labelField],
+            value: item[props.valueField]
+          }))
+          return
+        }
+        console.error(`接口[${props.url}] 返回结果不是一个数组`)
+      }
+
+      onMounted(async () => {
+        await getOptions()
+      })
+
+      const buildSelect = () => {
+        if (props.multiple) {
+          // fix：多写此步是为了解决 multiple 属性问题
+          return (
+            <el-select class="w-1/1" {...attrs} multiple>
+              {options.value.map((item, index) => (
+                <el-option key={index} label={item.label} value={item.value} />
+              ))}
+            </el-select>
+          )
+        }
+        return (
+          <el-select class="w-1/1" {...attrs}>
+            {options.value.map((item, index) => (
+              <el-option key={index} label={item.label} value={item.value} />
+            ))}
+          </el-select>
+        )
+      }
+      const buildCheckbox = () => {
+        if (isEmpty(options.value)) {
+          options.value = [
+            { label: '选项1', value: '选项1' },
+            { label: '选项2', value: '选项2' }
+          ]
+        }
+        return (
+          <el-checkbox-group class="w-1/1" {...attrs}>
+            {options.value.map((item, index) => (
+              <el-checkbox key={index} label={item.label} value={item.value} />
+            ))}
+          </el-checkbox-group>
+        )
+      }
+      const buildRadio = () => {
+        if (isEmpty(options.value)) {
+          options.value = [
+            { label: '选项1', value: '选项1' },
+            { label: '选项2', value: '选项2' }
+          ]
+        }
+        return (
+          <el-radio-group class="w-1/1" {...attrs}>
+            {options.value.map((item, index) => (
+              <el-radio key={index} value={item.value}>
+                {item.label}
+              </el-radio>
+            ))}
+          </el-radio-group>
+        )
+      }
+      return () => (
+        <>
+          {props.selectType === 'select'
+            ? buildSelect()
+            : props.selectType === 'radio'
+              ? buildRadio()
+              : props.selectType === 'checkbox'
+                ? buildCheckbox()
+                : buildSelect()}
+        </>
+      )
+    }
+  })
+}

src/components/FormCreate/src/config/index.ts

@@ -2,14 +2,14 @@ import { useUploadFileRule } from './useUploadFileRule'
 import { useUploadImgRule } from './useUploadImgRule'
 import { useUploadImgsRule } from './useUploadImgsRule'
 import { useDictSelectRule } from './useDictSelectRule'
-import { useUserSelectRule } from './useUserSelectRule'
 import { useEditorRule } from './useEditorRule'
+import { useSelectRule } from './useSelectRule'
 
 export {
   useUploadFileRule,
   useUploadImgRule,
   useUploadImgsRule,
   useDictSelectRule,
-  useUserSelectRule,
+  useEditorRule,
-  useEditorRule
+  useSelectRule
 }

src/components/FormCreate/src/config/selectRule.ts

@@ -1,4 +1,24 @@
 const selectRule = [
+  {
+    type: 'select',
+    field: 'selectType',
+    title: '选择器类型',
+    value: 'select',
+    options: [
+      { label: '下拉框', value: 'select' },
+      { label: '单选框', value: 'radio' },
+      { label: '多选框', value: 'checkbox' }
+    ],
+    // 参考 https://www.form-create.com/v3/guide/control 组件联动，单选框和多选框不需要多选属性
+    control: [
+      {
+        value: 'select',
+        condition: '=',
+        method: 'hidden',
+        rule: ['multiple']
+      }
+    ]
+  },
   { type: 'switch', field: 'multiple', title: '是否多选' },
   {
     type: 'switch',
@@ -68,4 +88,60 @@ const selectRule = [
   }
 ]
 
-export default selectRule
+const apiSelectRule = [
+  {
+    type: 'input',
+    field: 'url',
+    title: 'url 地址',
+    props: {
+      placeholder: '/system/user/simple-list'
+    }
+  },
+  {
+    type: 'select',
+    field: 'method',
+    title: '请求类型',
+    value: 'GET',
+    options: [
+      { label: 'GET', value: 'GET' },
+      { label: 'POST', value: 'POST' }
+    ],
+    control: [
+      {
+        value: 'GET',
+        condition: '!=',
+        method: 'hidden',
+        rule: [
+          {
+            type: 'input',
+            field: 'data',
+            title: '请求参数 JSON 格式',
+            props: {
+              autosize: true,
+              type: 'textarea',
+              placeholder: '{"type": 1}'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    type: 'input',
+    field: 'labelField',
+    title: 'label 属性',
+    props: {
+      placeholder: 'nickname'
+    }
+  },
+  {
+    type: 'input',
+    field: 'valueField',
+    title: 'value 属性',
+    props: {
+      placeholder: 'id'
+    }
+  }
+]
+
+export { selectRule, apiSelectRule }

src/components/FormCreate/src/config/useDictSelectRule.ts

@@ -1,8 +1,11 @@
 import { generateUUID } from '@/utils'
 import * as DictDataApi from '@/api/system/dict/dict.type'
 import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
-import selectRule from '@/components/FormCreate/src/config/selectRule'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
 
+/**
+ * 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
+ */
 export const useDictSelectRule = () => {
   const label = '字典选择器'
   const name = 'DictSelect'
@@ -19,7 +22,7 @@ export const useDictSelectRule = () => {
       })) ?? []
   })
   return {
-    icon: 'icon-select',
+    icon: 'icon-doc-text',
     label,
     name,
     rule() {
@@ -43,7 +46,7 @@ export const useDictSelectRule = () => {
         },
         {
           type: 'select',
-          field: 'valueType',
+          field: 'dictValueType',
           title: '字典值类型',
           value: 'str',
           options: [

src/components/FormCreate/src/config/useSelectRule.ts

@@ -0,0 +1,34 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
+import { SelectRuleOption } from '@/components/FormCreate/src/type'
+
+/**
+ * 通用选择器规则 hook
+ *
+ * @param option 规则配置
+ */
+export const useSelectRule = (option: SelectRuleOption) => {
+  const label = option.label
+  const name = option.name
+  return {
+    icon: option.icon,
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      if (!option.props) {
+        option.props = []
+      }
+      return localeProps(t, name + '.props', [makeRequiredRule(), ...option.props, ...selectRule])
+    }
+  }
+}

src/components/FormCreate/src/config/useUserSelectRule.ts

@@ -1,25 +0,0 @@
-import { generateUUID } from '@/utils'
-import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
-import selectRule from '@/components/FormCreate/src/config/selectRule'
-
-export const useUserSelectRule = () => {
-  const label = '用户选择器'
-  const name = 'UserSelect'
-  return {
-    icon: 'icon-select',
-    label,
-    name,
-    rule() {
-      return {
-        type: name,
-        field: generateUUID(),
-        title: label,
-        info: '',
-        $required: false
-      }
-    },
-    props(_, { t }) {
-      return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule])
-    }
-  }
-}

src/components/FormCreate/src/type/index.ts

@@ -0,0 +1,50 @@
+import { Rule } from '@form-create/element-ui' //左侧拖拽按钮
+
+// 左侧拖拽按钮
+export interface MenuItem {
+  label: string
+  name: string
+  icon: string
+}
+
+// 左侧拖拽按钮分类
+export interface Menu {
+  title: string
+  name: string
+  list: MenuItem[]
+}
+
+export interface MenuList extends Array<Menu> {}
+
+// 拖拽组件的规则
+export interface DragRule {
+  icon: string
+  name: string
+  label: string
+  children?: string
+  inside?: true
+  drag?: true | String
+  dragBtn?: false
+  mask?: false
+
+  rule(): Rule
+
+  props(v: any, v1: any): Rule[]
+}
+
+// 通用下拉组件 Props 类型
+export interface ApiSelectProps {
+  name: string // 组件名称
+  labelField?: string // 选项标签
+  valueField?: string // 选项的值
+  url?: string // url 接口
+  isDict?: boolean // 是否字典选择器
+}
+
+// 选择组件规则配置类型
+export interface SelectRuleOption {
+  label: string // label 名称
+  name: string // 组件名称
+  icon: string // 组件图标
+  props?: any[] // 组件规则
+}

src/components/FormCreate/src/useFormCreateDesigner.ts

@@ -1,12 +1,14 @@
 import {
   useDictSelectRule,
   useEditorRule,
+  useSelectRule,
   useUploadFileRule,
   useUploadImgRule,
-  useUploadImgsRule,
+  useUploadImgsRule
-  useUserSelectRule
 } from './config'
 import { Ref } from 'vue'
+import { Menu } from '@/components/FormCreate/src/type'
+import { apiSelectRule } from '@/components/FormCreate/src/config/selectRule'
 
 /**
  * 表单设计器增强 hook
@@ -15,30 +17,25 @@ import { Ref } from 'vue'
  * - 单图上传
  * - 多图上传
  * - 字典选择器
- * - 系统用户选择器
+ * - 用户选择器
+ * - 部门选择器
  * - 富文本
  */
-export const useFormCreateDesigner = (designer: Ref) => {
+export const useFormCreateDesigner = async (designer: Ref) => {
   const editorRule = useEditorRule()
   const uploadFileRule = useUploadFileRule()
   const uploadImgRule = useUploadImgRule()
   const uploadImgsRule = useUploadImgsRule()
-  const dictSelectRule = useDictSelectRule()
-  const userSelectRule = useUserSelectRule()
 
-  onMounted(() => {
+  /**
+   * 构建表单组件
+   */
+  const buildFormComponents = () => {
     // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
     designer.value?.removeMenuItem('upload')
     // 移除自带的富文本组件规则，使用 editorRule 替代
     designer.value?.removeMenuItem('fc-editor')
-    const components = [
+    const components = [editorRule, uploadFileRule, uploadImgRule, uploadImgsRule]
-      editorRule,
-      uploadFileRule,
-      uploadImgRule,
-      uploadImgsRule,
-      dictSelectRule,
-      userSelectRule
-    ]
     components.forEach((component) => {
       // 插入组件规则
       designer.value?.addComponent(component)
@@ -49,5 +46,55 @@ export const useFormCreateDesigner = (designer: Ref) => {
         label: component.label
       })
     })
+  }
+
+  const userSelectRule = useSelectRule({
+    name: 'UserSelect',
+    label: '用户选择器',
+    icon: 'icon-user-o'
+  })
+  const deptSelectRule = useSelectRule({
+    name: 'DeptSelect',
+    label: '部门选择器',
+    icon: 'icon-address-card-o'
+  })
+  const dictSelectRule = useDictSelectRule()
+  const apiSelectRule0 = useSelectRule({
+    name: 'ApiSelect',
+    label: '接口选择器',
+    icon: 'icon-server',
+    props: [...apiSelectRule]
+  })
+
+  /**
+   * 构建系统字段菜单
+   */
+  const buildSystemMenu = () => {
+    // 移除自带的下拉选择器组件，使用 currencySelectRule 替代
+    designer.value?.removeMenuItem('select')
+    designer.value?.removeMenuItem('radio')
+    designer.value?.removeMenuItem('checkbox')
+    const components = [userSelectRule, deptSelectRule, dictSelectRule, apiSelectRule0]
+    const menu: Menu = {
+      name: 'system',
+      title: '系统字段',
+      list: components.map((component) => {
+        // 插入组件规则
+        designer.value?.addComponent(component)
+        // 插入拖拽按钮到 `system` 分类下
+        return {
+          icon: component.icon,
+          name: component.name,
+          label: component.label
+        }
+      })
+    }
+    designer.value?.addMenu(menu)
+  }
+
+  onMounted(async () => {
+    await nextTick()
+    buildFormComponents()
+    buildSystemMenu()
   })
 }

src/plugins/formCreate/index.ts

@@ -17,11 +17,28 @@ import {
 import FcDesigner from '@form-create/designer'
 import formCreate from '@form-create/element-ui'
 import install from '@form-create/element-ui/auto-import'
+
 //======================= 自定义组件 =======================
 import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
-import { DictSelect } from '@/components/DictSelect'
+import { useApiSelect } from '@/components/FormCreate'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
 import { Editor } from '@/components/Editor'
+import DictSelect from '@/components/FormCreate/src/components/DictSelect.vue'
+
+const UserSelect = useApiSelect({
+  name: 'UserSelect',
+  labelField: 'nickname',
+  valueField: 'id',
+  url: '/system/user/simple-list'
+})
+const DeptSelect = useApiSelect({
+  name: 'DeptSelect',
+  labelField: 'name',
+  valueField: 'id',
+  url: '/system/dept/simple-list'
+})
+const ApiSelect = useApiSelect({
+  name: 'ApiSelect'
+})
 
 const components = [
   ElAside,
@@ -41,6 +58,8 @@ const components = [
   UploadFile,
   DictSelect,
   UserSelect,
+  DeptSelect,
+  ApiSelect,
   Editor
 ]
 

src/styles/FormCreate/index.scss

@@ -0,0 +1,22 @@
+// 使用字体图标来源 https://fontello.com/
+
+@font-face {
+  font-family: 'fc-icon';
+  src: url('@/styles/FormCreate/fonts/fontello.woff') format('woff');
+}
+
+.icon-doc-text:before {
+  content: '\f0f6';
+}
+
+.icon-server:before {
+  content: '\f233';
+}
+
+.icon-address-card-o:before {
+  content: '\f2bc';
+}
+
+.icon-user-o:before {
+  content: '\f2c0';
+}

src/styles/index.scss

@@ -1,4 +1,5 @@
 @import './var.css';
+@import './FormCreate/index.scss';
 @import 'element-plus/theme-chalk/dark/css-vars.css';
 
 .reset-margin [class*='el-icon'] + span {

src/utils/index.ts

@@ -435,3 +435,17 @@ export const areaReplace = (areaName: string) => {
     .replace('自治区', '')
     .replace('省', '')
 }
+
+/**
+ * 解析 JSON 字符串
+ *
+ * @param str
+ */
+export function jsonParse(str: string) {
+  try {
+    return JSON.parse(str)
+  } catch (e) {
+    console.error(`str[${str}] 不是一个 JSON 字符串`)
+    return ''
+  }
+}

src/views/ai/chat/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-container>
+    <!-- 左侧：会话列表 -->
+    <el-aside width="260px" class="conversation-container">
+      <!-- 左顶部：新建对话 -->
+      <el-button class="w-1/1" type="primary">
+        <Icon icon="ep:plus" class="mr-5px" />
+        新建对话
+      </el-button>
+      <!-- 左顶部：搜索对话 -->
+      <el-input
+        v-model="searchName"
+        class="mt-10px"
+        placeholder="搜索历史记录"
+        @keyup="searchConversation"
+      >
+        <template #prefix>
+          <Icon icon="ep:search" />
+        </template>
+      </el-input>
+      <!-- 左中间：对话列表 -->
+      <div class="conversation-list" :style="{ height: leftHeight + 'px' }">
+        <el-row v-for="conversation in conversationList" :key="conversation.id">
+          <div
+            :class="conversation.id === conversationId ? 'conversation active' : 'conversation'"
+            @click="changeConversation(conversation)"
+          >
+            <el-image :src="conversation.avatar" class="avatar" />
+            <span class="title">{{ conversation.title }}</span>
+            <span class="button">
+              <!-- TODO 芋艿：缺置顶按钮 -->
+              <el-icon title="编辑" @click="updateConversationTitle(conversation)">
+                <Icon icon="ep:edit" />
+              </el-icon>
+              <el-icon title="删除会话" @click="deleteConversationTitle(conversation)">
+                <Icon icon="ep:delete" />
+              </el-icon>
+            </span>
+          </div>
+        </el-row>
+      </div>
+      <!-- 左底部：工具栏 TODO 芋艿：50% 不太对 -->
+      <div class="tool-box">
+        <sapn class="w-1/2"> <Icon icon="ep:user" /> 角色仓库 </sapn>
+        <sapn class="w-1/2"> <Icon icon="ep:delete" />清空未置顶对话</sapn>
+      </div>
+    </el-aside>
+    <!-- 右侧：会话详情 -->
+    <el-container class="detail-container">
+      <!-- 右顶部 TODO 芋艿：右对齐 -->
+      <el-header class="header">
+        <el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button>
+        <el-button>
+          <Icon icon="ep:user" />
+        </el-button>
+        <el-button>
+          <Icon icon="ep:download" />
+        </el-button>
+        <el-button>
+          <Icon icon="ep:arrow-up" />
+        </el-button>
+      </el-header>
+      <el-main>对话列表</el-main>
+      <el-footer>发送消息框</el-footer>
+    </el-container>
+  </el-container>
+</template>
+<script setup lang="ts">
+const conversationList = [
+  {
+    id: 1,
+    title: '测试标题',
+    avatar:
+      'http://test.yudao.iocoder.cn/96c787a2ce88bf6d0ce3cd8b6cf5314e80e7703cd41bf4af8cd2e2909dbd6b6d.png'
+  },
+  {
+    id: 2,
+    title: '测试对话',
+    avatar:
+      'http://test.yudao.iocoder.cn/96c787a2ce88bf6d0ce3cd8b6cf5314e80e7703cd41bf4af8cd2e2909dbd6b6d.png'
+  }
+]
+const conversationId = ref(1)
+const searchName = ref('')
+const leftHeight = window.innerHeight - 240 // TODO 芋艿：这里还不太对
+
+const changeConversation = (conversation) => {
+  console.log(conversation)
+  conversationId.value = conversation.id
+  // TODO 芋艿：待实现
+}
+
+const updateConversationTitle = (conversation) => {
+  console.log(conversation)
+  // TODO 芋艿：待实现
+}
+
+const deleteConversationTitle = (conversation) => {
+  console.log(conversation)
+  // TODO 芋艿：待实现
+}
+
+const searchConversation = () => {
+  // TODO 芋艿：待实现
+}
+</script>
+<style lang="scss" scoped>
+.conversation-container {
+  .conversation-list {
+    .conversation {
+      display: flex;
+      justify-content: flex-start;
+      width: 100%;
+      padding: 5px 5px 0 0;
+      cursor: pointer;
+      &.active {
+        // TODO 芋艿：这里不太对
+        background-color: #343540;
+        .button {
+          display: inline;
+        }
+      }
+      .title {
+        padding: 5px 10px;
+        max-width: 220px;
+        font-size: 14px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .avatar {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+      }
+      .button {
+        position: absolute;
+        right: 2px;
+        top: 16px;
+        .el-icon {
+          margin-right: 5px;
+        }
+      }
+    }
+
+    .tool-box {
+      display: flex;
+      justify-content: flex-start;
+      padding: 0 20px 10px 20px;
+      border-top: 1px solid black;
+    }
+  }
+}
+
+.detail-container {
+  .header {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: 10px;
+  }
+}
+</style>

src/views/crm/business/status/BusinessStatusForm.vue

@@ -100,7 +100,7 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的组：create - 新增；update - 修改
 const formData = ref({
-  id: 0,
+  id: undefined,
   name: '',
   deptIds: [],
   statuses: []
@@ -168,7 +168,7 @@ const submitForm = async () => {
 const resetForm = () => {
   checkStrictly.value = true
   formData.value = {
-    id: 0,
+    id: undefined,
     name: '',
     deptIds: [],
     statuses: []

src/views/erp/product/category/ProductCategoryForm.vue

@@ -46,7 +46,7 @@
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-import { ProductCategoryApi } from '@/api/erp/product/category'
+import { ProductCategoryApi, ProductCategoryVO } from '@/api/erp/product/category'
 import { defaultProps, handleTree } from '@/utils/tree'
 import { CommonStatusEnum } from '@/utils/constants'
 
@@ -66,7 +66,7 @@ const formData = ref({
   name: undefined,
   code: undefined,
   sort: undefined,
-  status: undefined
+  status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive({
   parentId: [{ required: true, message: '上级编号不能为空', trigger: 'blur' }],
@@ -105,7 +105,7 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as ProductCategoryApi.ProductCategoryVO
+    const data = formData.value as unknown as ProductCategoryVO
     if (formType.value === 'create') {
       await ProductCategoryApi.createProductCategory(data)
       message.success(t('common.createSuccess'))

src/views/infra/build/index.vue

@@ -8,11 +8,9 @@
           <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
         </div>
       </el-col>
-      <!-- 表单设计器 -->
-      <el-col>
-        <FcDesigner ref="designer" height="780px" />
-      </el-col>
     </el-row>
+    <!-- 表单设计器 -->
+    <FcDesigner ref="designer" height="780px" />
   </ContentWrap>
 
   <!-- 弹窗：表单预览 -->

src/views/mall/trade/afterSale/form/AfterSaleDisagreeForm.vue

@@ -27,7 +27,7 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref({
-  id: 0, // 售后订单编号
+  id: undefined, // 售后订单编号
   auditReason: '' // 审批备注
 })
 const formRef = ref() // 表单 Ref
@@ -62,7 +62,7 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: 0, // 售后订单编号
+    id: undefined, // 售后订单编号
     auditReason: '' // 审批备注
   }
   formRef.value?.resetFields()

src/views/mall/trade/brokerage/user/UpdateBindUserForm.vue

@@ -103,7 +103,7 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: 0,
+    id: undefined,
     bindUserId: undefined
   }
   formRef.value?.resetFields()

src/views/mall/trade/order/form/OrderDeliveryForm.vue

@@ -43,7 +43,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const expressType = ref('express') // 如果值是 express，则是快递；none 则是无；未来做同城配送；
 const formData = ref<TradeOrderApi.DeliveryVO>({
-  id: 0, // 订单编号
+  id: undefined, // 订单编号
   logisticsId: null, // 物流公司编号
   logisticsNo: '' // 物流编号
 })
@@ -86,7 +86,7 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: 0, // 订单编号
+    id: undefined, // 订单编号
     logisticsId: null, // 物流公司编号
     logisticsNo: '' // 物流编号
   }

src/views/mall/trade/order/form/OrderUpdateAddressForm.vue

@@ -44,7 +44,7 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref({
-  id: 0, // 订单编号
+  id: undefined, // 订单编号
   receiverName: '', // 收件人名称
   receiverMobile: '', // 收件人手机
   receiverAreaId: null, //收件人地区编号
@@ -82,7 +82,7 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: 0, // 订单编号
+    id: undefined, // 订单编号
     receiverName: '', // 收件人名称
     receiverMobile: '', // 收件人手机
     receiverAreaId: null, //收件人地区编号

src/views/mall/trade/order/form/OrderUpdatePriceForm.vue

@@ -31,7 +31,7 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref({
-  id: 0, // 订单编号
+  id: undefined, // 订单编号
   adjustPrice: 0, // 订单调价
   payPrice: '', // 应付金额(总)
   newPayPrice: '' // 调价后应付金额(总)
@@ -85,7 +85,7 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: 0, // 订单编号
+    id: undefined, // 订单编号
     adjustPrice: 0, // 订单调价
     payPrice: '', // 应付金额(总)
     newPayPrice: '' // 调价后应付金额(总)

src/views/mall/trade/order/form/OrderUpdateRemarkForm.vue

@@ -27,7 +27,7 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref({
-  id: 0, // 订单编号
+  id: undefined, // 订单编号
   remark: '' // 订单备注
 })
 const formRef = ref() // 表单 Ref
@@ -62,7 +62,7 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: 0, // 订单编号
+    id: undefined, // 订单编号
     remark: '' // 订单备注
   }
   formRef.value?.resetFields()

src/views/system/role/RoleAssignMenuForm.vue

@@ -58,7 +58,7 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = reactive({
-  id: 0,
+  id: undefined,
   name: '',
   code: '',
   menuIds: []
@@ -126,7 +126,7 @@ const resetForm = () => {
   menuExpand.value = false
   // 重置表单
   formData.value = {
-    id: 0,
+    id: undefined,
     name: '',
     code: '',
     menuIds: []

src/views/system/role/RoleDataPermissionForm.vue

@@ -78,7 +78,7 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = reactive({
-  id: 0,
+  id: undefined,
   name: '',
   code: '',
   dataScope: undefined,
@@ -141,7 +141,7 @@ const resetForm = () => {
   checkStrictly.value = true
   // 重置表单
   formData.value = {
-    id: 0,
+    id: undefined,
     name: '',
     code: '',
     dataScope: undefined,

src/views/system/user/components/UserSelect.vue

@@ -1,28 +0,0 @@
-<!-- TODO puhui999: 先单独一个后面封装成通用选择组件 -->
-<template>
-  <el-select class="w-1/1" v-bind="attrs">
-    <el-option
-      v-for="(dict, index) in userOptions"
-      :key="index"
-      :label="dict.nickname"
-      :value="dict.id"
-    />
-  </el-select>
-</template>
-
-<script lang="ts" setup>
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'UserSelect' })
-
-const attrs = useAttrs()
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户下拉数据
-
-onMounted(async () => {
-  const data = await UserApi.getSimpleUserList()
-  if (!data || data.length === 0) {
-    return
-  }
-  userOptions.value = data
-})
-</script>