diff --git a/cutejava-front/src/views/components/advanced/CuteDragTable.vue b/cutejava-front/src/views/components/advanced/CuteDragTable.vue
index 91bbd956..f74f21cd 100644
--- a/cutejava-front/src/views/components/advanced/CuteDragTable.vue
+++ b/cutejava-front/src/views/components/advanced/CuteDragTable.vue
@@ -127,7 +127,7 @@ export default {
   },
   methods: {
     refresh() {
-      this.crud.orderBy = ''
+      // this.crud.orderBy = null
       this.crud.selection = []
       this.initData()
       this.initDragTable()
diff --git a/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue b/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
index bf812750..5adc611f 100644
--- a/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
+++ b/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
@@ -134,7 +134,7 @@ export default {
   },
   methods: {
     refresh() {
-      this.crud.orderBy = ''
+      // this.crud.orderBy = null
       this.crud.selection = []
       this.initData()
     },
diff --git a/cutejava-front/src/views/components/dev/CuteScreenShot.vue b/cutejava-front/src/views/components/dev/CuteScreenShot.vue
index f7a57ff3..d3da455d 100644
--- a/cutejava-front/src/views/components/dev/CuteScreenShot.vue
+++ b/cutejava-front/src/views/components/dev/CuteScreenShot.vue
@@ -17,7 +17,7 @@
         截屏
       </el-button>
     </div>
-    <div :id="key" style="padding: 15px">
+    <div id="CuteScreenShot" style="padding: 15px">
       <slot />
     </div>
   </div>
@@ -28,16 +28,8 @@
 import KitMessage from '@/utils/elementui/KitMessage'
 import { FormatDateTimeShortStr } from '@/utils/KitUtil'
 import html2canvas from 'html2canvas'
-
 export default {
   name: 'CuteScreenShot',
-  props: {
-    key: {
-      type: String,
-      required: true,
-      default: 'elementIdSelector'
-    }
-  },
   data() {
     return {
       capturing: false
@@ -46,7 +38,7 @@ export default {
   methods: {
     async capture() {
       this.capturing = true
-      const element = document.querySelector('#elementIdSelector')
+      const element = document.querySelector('#CuteScreenShot')
       if (!element) {
         KitMessage.Error('未找到匹配的元素，请检查选择器是否正确')
         this.capturing = false
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteScreenShotDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteScreenShotDemo.vue
index 92e94118..9d41517a 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteScreenShotDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteScreenShotDemo.vue
@@ -7,7 +7,7 @@
       <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
     </ul>
     <h4>基础用法</h4>
-    <cute-screen-shot key="test">
+    <cute-screen-shot>
       <cute-page>
         测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
       </cute-page>
diff --git a/cutejava-front/src/views/componentsDemo/dev/index.vue b/cutejava-front/src/views/componentsDemo/dev/index.vue
new file mode 100644
index 00000000..56b65e8a
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <el-tabs v-model="activeName" type="border-card">
+    <el-tab-pane label="按钮 CuteButton" name="CuteButton">
+      <CuteButtonDemo />
+    </el-tab-pane>
+    <el-tab-pane label="文字链接 CuteLink" name="CuteLink">
+      <CuteLinkDemo />
+    </el-tab-pane>
+    <el-tab-pane label="页面 CutePage" name="CutePage">
+      <CutePageDemo />
+    </el-tab-pane>
+    <el-tab-pane label="空状态 CuteNoData" name="CuteNoData">
+      <CuteNoDataDemo />
+    </el-tab-pane>
+    <el-tab-pane label="多行输入文本 CuteTextAreaInput" name="CuteTextAreaInput">
+      <CuteTextAreaInputDemo />
+    </el-tab-pane>
+    <el-tab-pane label="段落标题 CuteSectionTitle" name="CuteSectionTitle">
+      <CuteSectionTitleDemo />
+    </el-tab-pane>
+    <el-tab-pane label="横向滚动区域 CuteHorizontalScrollBar" name="CuteHorizontalScrollBar">
+      <CuteHorizontalScrollBarDemo />
+    </el-tab-pane>
+    <el-tab-pane label="纵向滚动区域 CuteVerticalScrollBar" name="CuteVerticalScrollBar">
+      <CuteVerticalScrollBarDemo />
+    </el-tab-pane>
+    <el-tab-pane label="一键复制 CuteOneKeyCopy" name="CuteOneKeyCopy">
+      <CuteOneKeyCopyDemo />
+    </el-tab-pane>
+    <el-tab-pane label="Markdown编辑框 CuteMarkdown" name="CuteMarkdown">
+      <CuteMarkdownDemo />
+    </el-tab-pane>
+    <el-tab-pane label="代码编辑框 CuteCodeEditor" name="CuteCodeEditor">
+      <CuteCodeEditorDemo />
+    </el-tab-pane>
+    <el-tab-pane label="富文本框 CuteRichTextEditor" name="CuteRichTextEditor">
+      <CuteRichTextEditorDemo />
+    </el-tab-pane>
+    <el-tab-pane label="截图工具 CuteScreenShot" name="CuteScreenShot">
+      <CuteScreenShotDemo />
+    </el-tab-pane>
+    <el-tab-pane label="预览抽屉 CutePreviewDrawer" name="CutePreviewDrawer">
+      <CutePreviewDrawerDemo />
+    </el-tab-pane>
+    <el-tab-pane label="穿梭框 CuteTransfer" name="CuteTransfer">
+      <CuteTransferDemo />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+
+import CuteButtonDemo from '@/views/componentsDemo/dev/CuteButtonDemo.vue'
+import CuteOneKeyCopyDemo from '@/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue'
+import CuteScreenShotDemo from '@/views/componentsDemo/dev/CuteScreenShotDemo.vue'
+import CuteRichTextEditorDemo from '@/views/componentsDemo/dev/CuteRichTextEditorDemo.vue'
+import CuteTransferDemo from '@/views/componentsDemo/dev/CuteTransferDemo.vue'
+import CuteMarkdownDemo from '@/views/componentsDemo/dev/CuteMarkdownDemo.vue'
+import CutePageDemo from '@/views/componentsDemo/dev/CutePageDemo.vue'
+import CuteNoDataDemo from '@/views/componentsDemo/dev/CuteNoDataDemo.vue'
+import CutePreviewDrawerDemo from '@/views/componentsDemo/dev/CutePreviewDrawerDemo.vue'
+import CuteTextAreaInputDemo from '@/views/componentsDemo/dev/CuteTextAreaInputDemo.vue'
+import CuteSectionTitleDemo from '@/views/componentsDemo/dev/CuteSectionTitleDemo.vue'
+import CuteVerticalScrollBarDemo from '@/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue'
+import CuteHorizontalScrollBarDemo from '@/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue'
+import CuteLinkDemo from '@/views/componentsDemo/dev/CuteLinkDemo.vue'
+import CuteCodeEditorDemo from '@/views/componentsDemo/dev/CuteCodeEditorDemo.vue'
+
+export default {
+  name: 'ComponentsDemoDev',
+  components: {
+    CuteCodeEditorDemo,
+    CuteLinkDemo,
+    CuteHorizontalScrollBarDemo,
+    CuteVerticalScrollBarDemo,
+    CuteSectionTitleDemo,
+    CuteTextAreaInputDemo,
+    CutePreviewDrawerDemo,
+    CuteNoDataDemo,
+    CutePageDemo,
+    CuteMarkdownDemo,
+    CuteTransferDemo,
+    CuteRichTextEditorDemo,
+    CuteScreenShotDemo,
+    CuteOneKeyCopyDemo,
+    CuteButtonDemo
+  },
+  data() {
+    return {
+      activeName: 'CuteButton'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>