feat: 【ele】新增 general 单表代码生成示例

apps/web-ele/src/components/content-wrap/content-wrap.vue

@@ -0,0 +1,53 @@
+<!--
+  参考自 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/ContentWrap/src/ContentWrap.vue
+  保证和 yudao-ui-admin-vue3 功能的一致性
+-->
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
+import { ShieldQuestion } from '@vben/icons';
+
+import { ElCard, ElTooltip } from 'element-plus';
+
+defineOptions({ name: 'ContentWrap' });
+
+withDefaults(
+  defineProps<{
+    bodyStyle?: CSSProperties;
+    message?: string;
+    title?: string;
+  }>(),
+  {
+    bodyStyle: () => ({ padding: '10px' }),
+    title: '',
+    message: '',
+  },
+);
+</script>
+
+<template>
+  <ElCard :body-style="bodyStyle" :header="title" class="mb-4">
+    <template v-if="title" #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <span class="text-4 font-[700]">{{ title }}</span>
+          <ElTooltip placement="right">
+            <template #content>
+              <div class="max-w-[200px]">{{ message }}</div>
+            </template>
+            <ShieldQuestion :size="14" class="ml-5px" />
+          </ElTooltip>
+          <div class="pl-20px flex flex-grow">
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div>
+          <slot name="extra"></slot>
+        </div>
+      </div>
+    </template>
+    <template #default>
+      <slot></slot>
+    </template>
+  </ElCard>
+</template>

apps/web-ele/src/components/content-wrap/index.ts

@@ -0,0 +1 @@
+export { default as ContentWrap } from './content-wrap.vue';

apps/web-ele/src/components/table-toolbar/index.ts

@@ -0,0 +1 @@
+export { default as TableToolbar } from './table-toolbar.vue';

apps/web-ele/src/components/table-toolbar/table-toolbar.vue

@@ -0,0 +1,79 @@
+<!-- add by puhui999：vxe table 工具栏二次封装，提供给 vxe 原生列表使用 -->
+<script setup lang="ts">
+import type { VxeToolbarInstance } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { useContentMaximize, useRefresh } from '@vben/hooks';
+import { Expand, MsRefresh, Search, TMinimize } from '@vben/icons';
+
+import { ElButton, ElTooltip } from 'element-plus';
+
+import { VxeToolbar } from '#/adapter/vxe-table';
+
+/** 列表工具栏封装 */
+defineOptions({ name: 'TableToolbar' });
+
+const props = defineProps<{
+  hiddenSearch: boolean;
+}>();
+
+const emits = defineEmits(['update:hiddenSearch']);
+
+const toolbarRef = ref<VxeToolbarInstance>();
+const { toggleMaximizeAndTabbarHidden, contentIsMaximize } =
+  useContentMaximize();
+const { refresh } = useRefresh();
+
+/** 隐藏搜索栏 */
+function onHiddenSearchBar() {
+  emits('update:hiddenSearch', !props.hiddenSearch);
+}
+
+defineExpose({
+  getToolbarRef: () => toolbarRef.value,
+});
+</script>
+
+<template>
+  <VxeToolbar ref="toolbarRef" custom>
+    <template #toolPrefix>
+      <slot></slot>
+      <ElTooltip placement="bottom">
+        <template #content>
+          <div class="max-w-[200px]">搜索</div>
+        </template>
+        <ElButton
+          class="ml-2 font-[8px]"
+          circle
+          @click="onHiddenSearchBar"
+        >
+          <Search :size="15" />
+        </ElButton>
+      </ElTooltip>
+      <ElTooltip placement="bottom">
+        <template #content>
+          <div class="max-w-[200px]">刷新</div>
+        </template>
+        <ElButton class="ml-2 font-[8px]" circle @click="refresh">
+          <MsRefresh :size="15" />
+        </ElButton>
+      </ElTooltip>
+      <ElTooltip placement="bottom">
+        <template #content>
+          <div class="max-w-[200px]">
+            {{ contentIsMaximize ? '还原' : '全屏' }}
+          </div>
+        </template>
+        <ElButton
+          class="ml-2 font-[8px]"
+          circle
+          @click="toggleMaximizeAndTabbarHidden"
+        >
+          <Expand v-if="!contentIsMaximize" :size="15" />
+          <TMinimize v-else :size="15" />
+        </ElButton>
+      </ElTooltip>
+    </template>
+  </VxeToolbar>
+</template>