From 2fbb7edc52703de655660edb036d3ab6b65eb4ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Tue, 9 Apr 2024 20:07:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=81=87=E7=95=8C=E9=9D=A2=E5=AE=8C=E5=96=842?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   1 +
 src/components/Breadcrumb/index.vue           |   3 +-
 src/components/Hamburger/index.vue            |   1 +
 src/components/Screenfull/index.vue           |   1 +
 src/layout/components/Sidebar/SidebarItem.vue |   2 +-
 src/views/error-log/index.vue                 |  56 ++-
 src/views/tab/index.vue                       | 150 ++++----
 .../table/dynamic-table/EngageChildModule.vue | 137 +++++++
 .../dynamic-table/EngageChilldSystem.vue      | 203 +++++++++++
 src/views/table/dynamic-table/index.vue       | 124 +------
 src/views/theme/index.vue                     | 342 +++++++-----------
 11 files changed, 588 insertions(+), 432 deletions(-)
 create mode 100644 src/views/table/dynamic-table/EngageChildModule.vue
 create mode 100644 src/views/table/dynamic-table/EngageChilldSystem.vue

diff --git a/components.d.ts b/components.d.ts
index 5219735..a0ba6e2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -26,6 +26,7 @@ declare module '@vue/runtime-core' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 516f2e0..17e8bc4 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,9 +1,10 @@
 <template>
+
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
         <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
-            item.meta.title
+               item.meta.title
         }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 931fd91..af85fdf 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,4 +1,5 @@
 <template>
+<!--    顶部缩放侧边栏icon-->
   <div style="padding: 0 15px;" @click="toggleClick">
     <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
       width="64" height="64">
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index c7f173b..9a621c3 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,4 +1,5 @@
 <template>
+<!--    顶部全屏icon-->
   <div>
     <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
   </div>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 04afb68..c371274 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!isItemHidden" class="root-sidebar-item">
+  <div v-if="!isItemHidden" class="root-sidebar-item" >
     <template
       v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !(item.meta && item.meta.alwaysShow)">
       <app-link class="link" :to="resolvePath(onlyOneChild.path)">
diff --git a/src/views/error-log/index.vue b/src/views/error-log/index.vue
index 0dd42e2..24aafc1 100644
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@@ -3,7 +3,9 @@
 
     <div style=" width:100%">
         <el-card style="max-width: 100vw;margin: 1.5vw;">
-            <template #header><span>消息</span></template>
+            <template #header>
+                <span>消息</span>
+            </template>
             <div style="display:flex;flex-direction:row;justify-content: space-around ">
                 <div>
                     时间
@@ -11,11 +13,13 @@
                         v-model="value2"
                         type="daterange"
                         unlink-panels
-                        range-separator="To"
+                        range-separator="——"
                         start-placeholder="开始时间"
                         end-placeholder="结束时间"
                         :shortcuts="shortcuts"
                         :size="large"
+                        style="margin-left:0.5vw"
+
                     />
                 </div>
                 <div>
@@ -23,8 +27,8 @@
                     <el-select
                         v-model="value"
                         clearable
-                        placeholder="Select"
-                        style="width: 240px"
+                        placeholder="Status"
+                        style="width: 240px;margin-left:0.5vw"
                     >
                         <el-option
                             v-for="item in options"
@@ -37,13 +41,13 @@
                 </div>
 
                 <div>
-                    <el-button type="primary">查询</el-button>
-                    <el-button>重置</el-button>
+                    <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
 
                 </div>
             </div>
         </el-card>
-        <el-card style="max-width: 100vw;height:50vh;margin:1.3vw">
+        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
             <div style="display:flex;flex-direction: row;justify-content: space-between">
                 <el-button
                         text
@@ -63,15 +67,28 @@
                             <div>address: {{ row.address }}</div>
                 </div>
                 <div class="table-cell table-cell-right">
-                    <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
+                    <el-button size="small" type="danger" @click="handleDelete(index, row);centerDialogVisible = true">Delete</el-button>
+                    <el-dialog v-model="centerDialogVisible" title="删除" width="500"  :modal="false">
+    <span>
+是否确认删除此条信息？
+    </span>
+                        <template #footer>
+                            <div class="dialog-footer">
+                                <el-button @click="centerDialogVisible = false">取消</el-button>
+                                <el-button type="primary" @click="centerDialogVisible = false">
+                                    确认
+                                </el-button>
+                            </div>
+                        </template>
+                    </el-dialog>
                 </div>
             </div>
             <el-pagination
-
+                  size="large"
                 background
                 layout="prev, pager, next"
                 :total="50"
-                class="mt-[5vh]"
+                style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
             />
         </el-card>
 
@@ -80,6 +97,8 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+// 删除对话框
+const centerDialogVisible = ref(false);
 // 时间选择器
 
 const value2 = ref('');
@@ -120,23 +139,19 @@ const value = ref('');
 const options = [
   {
     value: 'Option1',
-    label: 'Option1'
+    label: '未开始'
   },
   {
     value: 'Option2',
-    label: 'Option2'
+    label: '进行中'
   },
   {
     value: 'Option3',
-    label: 'Option3'
+    label: '暂停'
   },
   {
     value: 'Option4',
-    label: 'Option4'
-  },
-  {
-    value: 'Option5',
-    label: 'Option5'
+    label: '已完成'
   }
 ];
 
@@ -167,6 +182,11 @@ const tableData: User[] = [
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles'
   },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
   {
     date: '2016-05-01',
     name: 'Tom',
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index d801994..767b449 100644
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@@ -1,62 +1,3 @@
-<!--<template>-->
-<!--  <div class="tab-container">-->
-<!--&lt;!&ndash;    <el-tag>mounted times ：{{ createdTimes }}</el-tag>&ndash;&gt;-->
-<!--&lt;!&ndash;    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />&ndash;&gt;-->
-<!--    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">-->
-<!--      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">-->
-<!--        <keep-alive>-->
-<!--          <tab-pane  v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />-->
-<!--        </keep-alive>-->
-<!--      </el-tab-pane>-->
-<!--    </el-tabs>-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--import { defineComponent } from 'vue';-->
-<!--import TabPane from './components/TabPane';-->
-
-<!--export default defineComponent({-->
-<!--  name: 'Tab',-->
-<!--  components: { TabPane },-->
-<!--  data() {-->
-<!--    return {-->
-<!--      tabMapOptions: [-->
-<!--        { label: 'China', key: 'CN' },-->
-<!--        { label: 'USA', key: 'US' },-->
-<!--        { label: 'Japan', key: 'JP' },-->
-<!--        { label: 'Eurozone', key: 'EU' }-->
-<!--      ],-->
-<!--      activeName: 'CN',-->
-<!--      createdTimes: 0-->
-<!--    };-->
-<!--  },-->
-<!--  // watch: {-->
-<!--  //   activeName(val) { // url变化会导致渲染异常。因此这里注释掉了-->
-<!--  //     this.$router.push(`${this.$route.path}?tab=${val}`);-->
-<!--  //   }-->
-<!--  // },-->
-<!--  created() {-->
-<!--    // init the default selected tab-->
-<!--    const tab = this.$route.query.tab;-->
-<!--    if (tab) {-->
-<!--      this.activeName = tab;-->
-<!--    }-->
-<!--  },-->
-<!--  methods: {-->
-<!--    showCreatedTimes() {-->
-<!--      this.createdTimes = this.createdTimes + 1;-->
-<!--    }-->
-<!--  }-->
-<!--});-->
-<!--</script>-->
-
-<!--<style scoped>-->
-<!--  .tab-container {-->
-<!--    margin: 30px;-->
-<!--  }-->
-<!--</style>-->
-
 <template>
 
     <div style=" width:100%">
@@ -71,10 +12,11 @@
                     popper-class="my-autocomplete"
                     placeholder="Please input"
                     @select="handleSelect"
+                    style="margin-left:0.5vw"
                 >
                     <template #suffix>
                         <el-icon class="el-input__icon" @click="handleIconClick">
-                            <edit />
+                            <ArrowDownBold />
                         </el-icon>
                     </template>
                     <template #default="{ item }">
@@ -89,16 +31,16 @@
                    v-model="value2"
                    type="daterange"
                    unlink-panels
-                   range-separator="To"
+                   range-separator="——"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :shortcuts="shortcuts"
-                   :size="large"
+                   style="margin-left:0.5vw"
                />
            </div>
            <div>
-               <el-button type="primary">查询</el-button>
-               <el-button>重置</el-button>
+               <el-button type="primary" style="width: 80px">查询</el-button>
+               <el-button style="width: 80px">重置</el-button>
 
            </div>
             </div>
@@ -107,10 +49,54 @@
             <div style="display:flex;flex-direction: row;justify-content: space-between">
                 <el-button
                     text
-                    type=''
                 >历史记录</el-button
                 >
-                <el-button type="primary">新建</el-button>
+                <el-button type="primary" @click="AddDialogVisible=true">新建</el-button>
+                    <el-dialog v-model="AddDialogVisible"  width="500" center :modal="false" :show-close="false">
+                        <template #header>
+                         <div style="display:flex;flex-direction: row;justify-content: flex-start;color:red;font-size:large" >新增日报</div>
+                            <el-divider content-position="left" style="background:red"><el-icon><CaretTop /></el-icon></el-divider>
+                        </template>
+
+                        <div>
+                            <div style="margin-top:-4vh ">
+                                <span style="color:red">项目名称：</span>
+                                <el-input
+                                    v-model="input"
+                                    style="width: 200px"
+                                    placeholder="请输入"
+                                />
+                            </div>
+                            <div style="margin-top:2vh ">
+                               <span style="color:red"> 工作时间：</span>
+                                <el-date-picker
+                                    v-model="value1"
+                                    type="date"
+                                    placeholder="请选择日期"
+                                    style="width: 200px"
+                                    :default-value="new Date(2010, 9, 1)"
+                                />
+                            </div>
+                            <div style="margin-top:2vh ;display:flex;flex-direction:row;">
+                                <span style="color: red">日报内容：</span>
+                                <el-input
+                                    v-model="textarea"
+                                    style="width: 300px;"
+                                    :rows="4"
+                                    type="textarea"
+                                    placeholder="请输入"
+                                />
+                            </div>
+                        </div>
+                    <template #footer>
+                        <div class="dialog-footer">
+                            <el-button @click="AddDialogVisible = false" type="info" style="width: 80px">取消  </el-button>
+                            <el-button type="danger" style="width:80px" @click="AddDialogVisible = false">
+                                新增
+                            </el-button>
+                        </div>
+                    </template>
+                </el-dialog>
             </div>
     <el-table
             ref="multipleTableRef"
@@ -128,7 +114,19 @@
         <el-table-column property="address" label="日报填写者"  />
         <el-table-column property="address" label="填写时间"  />
         <el-table-column property="address" label="工作时间"  />
-        <el-table-column property="address" label="操作"  />
+        <el-table-column property="address" label="操作" >
+            <el-button size="small" text style="color:deepskyblue" @click="EditDialogVisible = true">修改</el-button>
+            <el-dialog v-model="EditDialogVisible" title="删除" width="500"  :modal="false">
+                <template #footer>
+                    <div class="dialog-footer">
+                        <el-button @click="EditDialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="EditDialogVisible = false">
+                            确认
+                        </el-button>
+                    </div>
+                </template>
+            </el-dialog>
+        </el-table-column>
     </el-table>
             <el-pagination
                 larger
@@ -136,22 +134,21 @@
                 layout="prev, pager, next"
                 :total="50"
                 class="mt-4"
-                style="margin-top:2vh"
+                style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
             />
         </el-card>
-<!--    <div style="margin-top: 20px">-->
-<!--        <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
-<!--        >Toggle selection status of second and third rows</el-button-->
-<!--        >-->
-<!--        <el-button @click="toggleSelection()">Clear selection</el-button>-->
-<!--    </div>-->
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ElTable } from 'element-plus';
-
+import { ArrowDownBold, CaretTop } from '@element-plus/icons-vue';
+const value1 = ref('');
+// 修改对话框
+const EditDialogVisible = ref(false);
+// 新建对话框
+const AddDialogVisible = ref(false);
 interface User {
     date: string
     name: string
@@ -191,8 +188,6 @@ const tableData: User[] = [
 
 // 输入框1
 import { onMounted } from 'vue';
-import { Edit } from '@element-plus/icons-vue';
-
 interface LinkItem {
     value: string
     link: string
@@ -238,7 +233,6 @@ onMounted(() => {
 });
 
 // 时间选择器
-const value1 = ref('');
 const value2 = ref('');
 
 const shortcuts = [
diff --git a/src/views/table/dynamic-table/EngageChildModule.vue b/src/views/table/dynamic-table/EngageChildModule.vue
new file mode 100644
index 0000000..519c6f7
--- /dev/null
+++ b/src/views/table/dynamic-table/EngageChildModule.vue
@@ -0,0 +1,137 @@
+
+<template>
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;max-height:100vh;height:80vh ">
+            <template #header>
+                <strong>子模块1</strong>
+            </template>
+
+            <!--            <div  style=" display: flex;flex-direction: column;justify-content: center">-->
+            <div class="ModuleData" style="margin-left: 30vw;width: 24vw;height: 55vh;display: flex;flex-direction: column;justify-content: space-around;
+">
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>01.模块名称 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>02.模块周期</strong>
+                    <span  style="width: 250px">13天</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>03.工作量 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>04.负责人 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>05.状态 </strong>
+                    <el-autocomplete
+                            v-model="state"
+                            :fetch-suggestions="querySearch"
+                            popper-class="my-autocomplete"
+                            placeholder="Please input"
+                            @select="handleSelect"
+                            style="width: 250px"
+                    >
+                        <template #suffix>
+                            <el-icon class="el-input__icon" @click="handleIconClick">
+                                <edit />
+                            </el-icon>
+                        </template>
+                        <template #default="{ item }">
+                            <div class="value">{{ item.value }}</div>
+                            <span class="link">{{ item.link }}</span>
+                        </template>
+                    </el-autocomplete>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>06.截止时间 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>07.简介 </strong>
+                    <el-input
+                            v-model="textarea2"
+                            style="width: 250px"
+                            :autosize="{ minRows: 4, maxRows: 6 }"
+                            type="textarea"
+                            placeholder="Please input"
+                            :row="4"
+                    />
+                </div>
+            </div>
+            <!--            </div>-->
+        </el-card>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+    const results = queryString
+        ? links.value.filter(createFilter(queryString))
+        : links.value;
+    // call callback function to return suggestion objects
+    cb(results);
+};
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        );
+    };
+};
+const loadAll = () => {
+    return [
+        { value: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' }
+    ];
+};
+const handleSelect = (item: LinkItem) => {
+    console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+    console.log(ev);
+};
+
+onMounted(() => {
+    links.value = loadAll();
+});
+</script>
+
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>
diff --git a/src/views/table/dynamic-table/EngageChilldSystem.vue b/src/views/table/dynamic-table/EngageChilldSystem.vue
new file mode 100644
index 0000000..236ec40
--- /dev/null
+++ b/src/views/table/dynamic-table/EngageChilldSystem.vue
@@ -0,0 +1,203 @@
+
+<template>
+
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
+            <template #header><strong >子系统1</strong></template>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+                <div>
+                    名称
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+                </div>
+                <div>
+                    状态
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+                </div>
+                <div>
+                    <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
+
+                </div>
+            </div>
+        </el-card>
+        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+            <div style="display:flex;flex-direction: row;justify-content: space-between">
+                <el-button
+                        text
+                        type=''
+                >子模块列表</el-button
+                >
+            </div>
+            <el-table
+                    ref="multipleTableRef"
+                    :data="tableData"
+                    style="max-width: 100vw;"
+                    @selection-change="handleSelectionChange"
+            >
+                <!--                <el-table-column type="selection" width="55" />-->
+                <el-table-column label="序号" width="120">
+                    <template #default="scope">{{ scope.row.date }}</template>
+                </el-table-column>
+                <el-table-column property="name" label="子模块名称" width="120" />
+                <el-table-column property="address" label="工作量" show-overflow-tooltip />
+                <el-table-column property="address" label="周期"  />
+                <el-table-column property="address" label="负责人"  />
+                <el-table-column property="address" label="状态"  />
+                <el-table-column property="address" label="子模块简介"  />
+                <el-table-column property="address" label="截止时间"  />
+                <el-table-column property="address" label="操作"  >
+                    <el-button
+                            link
+                            style="color:deepskyblue"
+                    >查看详情</el-button
+                    >
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                    larger
+                    background
+                    layout="prev, pager, next"
+                    :total="50"
+                    class="mt-4"
+                    style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+            />
+        </el-card>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+
+interface User {
+    date: string
+    name: string
+    address: string
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+  multipleSelection.value = val;
+};
+
+const tableData: User[] = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+
+];
+
+// 输入框1
+import { onMounted } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+  const results = queryString
+    ? links.value.filter(createFilter(queryString))
+    : links.value;
+    // call callback function to return suggestion objects
+  cb(results);
+};
+const createFilter = (queryString) => {
+  return (restaurant) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    );
+  };
+};
+const loadAll = () => {
+  return [
+    { value: '1' },
+    { value: '2' },
+    { value: '3' },
+    { value: '4' },
+    { value: '5' }
+
+  ];
+};
+const handleSelect = (item: LinkItem) => {
+  console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+  console.log(ev);
+};
+
+// 时间选择器
+const value1 = ref('');
+const value2 = ref('');
+
+const shortcuts = [
+  {
+    text: 'Last week',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+</script>
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>
diff --git a/src/views/table/dynamic-table/index.vue b/src/views/table/dynamic-table/index.vue
index fa5f2bc..e7e28c8 100644
--- a/src/views/table/dynamic-table/index.vue
+++ b/src/views/table/dynamic-table/index.vue
@@ -1,46 +1,20 @@
-<!--<template>-->
-<!--    -->
-<!--  <div class="app-container">-->
-<!--    <div style="margin:0 0 5px 20px">-->
-<!--      Fixed header, sorted by header order,-->
-<!--    </div>-->
-<!--    <fixed-thead />-->
-
-<!--    <div style="margin:30px 0 5px 20px">-->
-<!--      Not fixed header, sorted by click order-->
-<!--    </div>-->
-<!--    <unfixed-thead />-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--import { defineComponent } from 'vue';-->
-<!--import FixedThead from './components/FixedThead';-->
-<!--import UnfixedThead from './components/UnfixedThead';-->
-
-<!--export default defineComponent({-->
-<!--  name: 'DynamicTable',-->
-<!--  components: { FixedThead, UnfixedThead }-->
-<!--});-->
-<!--</script>-->
-
 <template>
 
     <div style=" width:100%">
         <el-card style="max-width: 100vw;margin: 1.5vw;">
-            <template #header><span>项目1</span></template>
+            <template #header><strong >项目1</strong></template>
             <div style="display:flex;flex-direction:row;justify-content: space-around ">
                 <div>
                     名称
-                    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
                 </div>
                 <div>
                     状态
-                    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
                 </div>
                 <div>
-                    <el-button type="primary">查询</el-button>
-                    <el-button>重置</el-button>
+                    <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
 
                 </div>
             </div>
@@ -84,15 +58,9 @@
                     layout="prev, pager, next"
                     :total="50"
                     class="mt-4"
-                    style="margin-top:2vh"
+                    style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
             />
         </el-card>
-        <!--    <div style="margin-top: 20px">-->
-        <!--        <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
-        <!--        >Toggle selection status of second and third rows</el-button-->
-        <!--        >-->
-        <!--        <el-button @click="toggleSelection()">Clear selection</el-button>-->
-        <!--    </div>-->
     </div>
 </template>
 
@@ -137,87 +105,7 @@ const tableData: User[] = [
 
 ];
 
-// 输入框1
-import { onMounted } from 'vue';
-import { Edit } from '@element-plus/icons-vue';
 
-interface LinkItem {
-    value: string
-    link: string
-}
-
-const state = ref('');
-const links = ref<LinkItem[]>([]);
-
-const querySearch = (queryString: string, cb) => {
-  const results = queryString
-    ? links.value.filter(createFilter(queryString))
-    : links.value;
-    // call callback function to return suggestion objects
-  cb(results);
-};
-const createFilter = (queryString) => {
-  return (restaurant) => {
-    return (
-      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    );
-  };
-};
-const loadAll = () => {
-  return [
-    { value: '1' },
-    { value: '2' },
-    { value: '3' },
-    { value: '4' },
-    { value: '5' }
-
-  ];
-};
-const handleSelect = (item: LinkItem) => {
-  console.log(item);
-};
-
-const handleIconClick = (ev: Event) => {
-  console.log(ev);
-};
-
-onMounted(() => {
-  links.value = loadAll();
-});
-
-// 时间选择器
-const value1 = ref('');
-const value2 = ref('');
-
-const shortcuts = [
-  {
-    text: 'Last week',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-      return [start, end];
-    }
-  },
-  {
-    text: 'Last month',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-      return [start, end];
-    }
-  },
-  {
-    text: 'Last 3 months',
-    value: () => {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-      return [start, end];
-    }
-  }
-];
 </script>
 <style>
 .my-autocomplete li {
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index 2c9c369..3701da8 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -1,227 +1,137 @@
-<!--<template>-->
-<!--  <div class="app-container">-->
-<!--    <el-card class="box-card">-->
-<!--      <template #header>-->
-<!--        <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">-->
-<!--          Theme documentation-->
-<!--        </a>-->
-<!--      </template>-->
-<!--      <div class="box-item">-->
-<!--        <span class="field-label">Change Theme : </span>-->
-<!--        <el-switch v-model="theme" />-->
-<!--        <aside style="margin-top:15px;">-->
-<!--          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.-->
-<!--        </aside>-->
-<!--      </div>-->
-<!--    </el-card>-->
-
-<!--    <div class="block">-->
-<!--      <el-button type="primary">-->
-<!--        Primary-->
-<!--      </el-button>-->
-<!--      <el-button type="success">-->
-<!--        Success-->
-<!--      </el-button>-->
-<!--      <el-button type="info">-->
-<!--        Info-->
-<!--      </el-button>-->
-<!--      <el-button type="warning">-->
-<!--        Warning-->
-<!--      </el-button>-->
-<!--      <el-button type="danger">-->
-<!--        Danger-->
-<!--      </el-button>-->
-<!--    </div>-->
-
-<!--    <div class="block">-->
-<!--      <el-button type="primary" :icon="IconEdit" />-->
-<!--      <el-button type="primary" :icon="IconShare" />-->
-<!--      <el-button type="primary" :icon="IconDelete" />-->
-<!--      <el-button type="primary" :icon="IconSearch">-->
-<!--        Search-->
-<!--      </el-button>-->
-<!--      <el-button type="primary">-->
-<!--        Upload <el-icon><icon-upload /></el-icon>-->
-<!--      </el-button>-->
-<!--    </div>-->
-
-<!--    <div class="block">-->
-<!--      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">-->
-<!--        {{ tag.name }}-->
-<!--      </el-tag>-->
-<!--    </div>-->
-
-<!--    <div class="block">-->
-<!--      <el-radio-group v-model="radio">-->
-<!--        <el-radio :label="3">-->
-<!--          Option A-->
-<!--        </el-radio>-->
-<!--        <el-radio :label="6">-->
-<!--          Option B-->
-<!--        </el-radio>-->
-<!--        <el-radio :label="9">-->
-<!--          Option C-->
-<!--        </el-radio>-->
-<!--      </el-radio-group>-->
-<!--    </div>-->
-
-<!--    <div class="block">-->
-<!--      <el-slider v-model="slideValue" />-->
-<!--    </div>-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--import { defineComponent, markRaw } from 'vue';-->
-<!--import {-->
-<!--  Edit as IconEdit,-->
-<!--  Share as IconShare,-->
-<!--  Delete as IconDelete,-->
-<!--  Search as IconSearch,-->
-<!--  Upload as IconUpload-->
-<!--} from '@element-plus/icons-vue';-->
-
-<!--export default defineComponent({-->
-<!--  name: 'Theme',-->
-<!--  components: { IconUpload },-->
-<!--  data() {-->
-<!--    return {-->
-<!--      IconEdit: markRaw(IconEdit),-->
-<!--      IconShare: markRaw(IconShare),-->
-<!--      IconDelete: markRaw(IconDelete),-->
-<!--      IconSearch: markRaw(IconSearch),-->
-<!--      theme: false,-->
-<!--      tags: [-->
-<!--        { name: 'Tag One', type: '' },-->
-<!--        { name: 'Tag Two', type: 'info' },-->
-<!--        { name: 'Tag Three', type: 'success' },-->
-<!--        { name: 'Tag Four', type: 'warning' },-->
-<!--        { name: 'Tag Five', type: 'danger' }-->
-<!--      ],-->
-<!--      slideValue: 50,-->
-<!--      radio: 3-->
-<!--    };-->
-<!--  },-->
-<!--  watch: {-->
-<!--    theme() {-->
-<!--      console.log('watch theme', this.theme);-->
-<!--      // toggleClass(document.body, 'custom-theme');-->
-<!--      const htmlTag = document.querySelector('html');-->
-<!--      if (this.theme) {-->
-<!--        htmlTag.classList.add('dark');-->
-<!--      } else {-->
-<!--        htmlTag.classList.remove('dark');-->
-<!--      }-->
-<!--    }-->
-<!--  }-->
-<!--});-->
-<!--</script>-->
-
-<!--<style scoped>-->
-<!--.field-label{-->
-<!--  vertical-align: middle;-->
-<!--}-->
-<!--.box-card {-->
-<!--  width: 400px;-->
-<!--  max-width: 100%;-->
-<!--  margin: 20px auto;-->
-<!--}-->
-
-<!--.block {-->
-<!--  padding: 30px 24px;-->
-<!--}-->
-
-<!--.tag-item {-->
-<!--  margin-right: 15px;-->
-<!--}-->
-<!--</style>-->
-
 <template>
-    <div>
-        <div v-for="(row, index) in tableData" :key="index" class="table-row">
-            <div class="table-cell">
-                <div class="date">
-                    <el-icon><timer /></el-icon>
-                    <span>{{ row.date }}</span>
-                </div>
-            </div>
-            <div class="table-cell">
-                <el-popover effect="light" trigger="hover" placement="top" width="auto">
-                    <template #default>
-                        <div>name: {{ row.name }}</div>
-                        <div>address: {{ row.address }}</div>
-                    </template>
-                    <template #reference>
-                        <el-tag>{{ row.name }}</el-tag>
-                    </template>
-                </el-popover>
-            </div>
-            <div class="table-cell">
-                <el-button size="small" @click="handleEdit(index, row)">Edit</el-button>
-                <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
-            </div>
-        </div>
+  <div class="app-container">
+    <el-card class="box-card">
+      <template #header>
+        <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">
+          Theme documentation
+        </a>
+      </template>
+      <div class="box-item">
+        <span class="field-label">Change Theme : </span>
+        <el-switch v-model="theme" />
+        <aside style="margin-top:15px;">
+          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
+        </aside>
+      </div>
+    </el-card>
+
+    <div class="block">
+      <el-button type="primary">
+        Primary
+      </el-button>
+      <el-button type="success">
+        Success
+      </el-button>
+      <el-button type="info">
+        Info
+      </el-button>
+      <el-button type="warning">
+        Warning
+      </el-button>
+      <el-button type="danger">
+        Danger
+      </el-button>
     </div>
+
+    <div class="block">
+      <el-button type="primary" :icon="IconEdit" />
+      <el-button type="primary" :icon="IconShare" />
+      <el-button type="primary" :icon="IconDelete" />
+      <el-button type="primary" :icon="IconSearch">
+        Search
+      </el-button>
+      <el-button type="primary">
+        Upload <el-icon><icon-upload /></el-icon>
+      </el-button>
+    </div>
+
+    <div class="block">
+      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
+        {{ tag.name }}
+      </el-tag>
+    </div>
+
+    <div class="block">
+      <el-radio-group v-model="radio">
+        <el-radio :label="3">
+          Option A
+        </el-radio>
+        <el-radio :label="6">
+          Option B
+        </el-radio>
+        <el-radio :label="9">
+          Option C
+        </el-radio>
+      </el-radio-group>
+    </div>
+
+    <div class="block">
+      <el-slider v-model="slideValue" />
+    </div>
+  </div>
 </template>
 
+<script>
+import { defineComponent, markRaw } from 'vue';
+import {
+  Edit as IconEdit,
+  Share as IconShare,
+  Delete as IconDelete,
+  Search as IconSearch,
+  Upload as IconUpload
+} from '@element-plus/icons-vue';
+
+export default defineComponent({
+  name: 'Theme',
+  components: { IconUpload },
+  data() {
+    return {
+      IconEdit: markRaw(IconEdit),
+      IconShare: markRaw(IconShare),
+      IconDelete: markRaw(IconDelete),
+      IconSearch: markRaw(IconSearch),
+      theme: false,
+      tags: [
+        { name: 'Tag One', type: '' },
+        { name: 'Tag Two', type: 'info' },
+        { name: 'Tag Three', type: 'success' },
+        { name: 'Tag Four', type: 'warning' },
+        { name: 'Tag Five', type: 'danger' }
+      ],
+      slideValue: 50,
+      radio: 3
+    };
+  },
+  watch: {
+    theme() {
+      console.log('watch theme', this.theme);
+      // toggleClass(document.body, 'custom-theme');
+      const htmlTag = document.querySelector('html');
+      if (this.theme) {
+        htmlTag.classList.add('dark');
+      } else {
+        htmlTag.classList.remove('dark');
+      }
+    }
+  }
+});
+</script>
+
 <style scoped>
-.table-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
+.field-label{
+  vertical-align: middle;
+}
+.box-card {
+  width: 400px;
+  max-width: 100%;
+  margin: 20px auto;
 }
 
-.table-cell {
-    flex: 1;
-    padding: 5px;
+.block {
+  padding: 30px 24px;
 }
 
-.date {
-    display: flex;
-    align-items: center;
-}
-
-.date el-icon {
-    margin-right: 10px;
+.tag-item {
+  margin-right: 15px;
 }
 </style>
-
-<script lang="ts" setup>
-import { Timer } from '@element-plus/icons-vue'
-
-interface User {
-    date: string
-    name: string
-    address: string
-}
-
-const handleEdit = (index: number, row: User) => {
-    console.log(index, row)
-}
-const handleDelete = (index: number, row: User) => {
-    console.log(index, row)
-}
-
-const tableData: User[] = [
-    {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-]
-</script>
\ No newline at end of file