在Vue和Element UI的环境下，要实现一个可以选择尖峰平谷时间段的组件，可以使用el-time-picker组件来选择开始和结束时间，并使用一些逻辑来限制时间的选择。以下是一个简化的实现：

<template>
  <div>
    <el-time-picker
      v-model="startTime"
      :picker-options="startPickerOptions"
      placeholder="选择开始时间"
      @change="checkTime"
    >
    </el-time-picker>
    <el-time-picker
      v-model="endTime"
      :picker-options="endPickerOptions"
      placeholder="选择结束时间"
      @change="checkTime"
    >
    </el-time-picker>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      startPickerOptions: {
        selectableRange: '06:00:00 - 17:00:00' // 或者根据实际情况设置可选时间段
      },
      endPickerOptions: {
        selectableRange: '06:00:00 - 17:00:00'
      }
    };
  },
  methods: {
    checkTime() {
      if (this.startTime && this.endTime) {
        // 这里可以添加更多的校验逻辑，例如确保时间间隔是合理的等
        if (this.endTime < this.startTime) {
          this.$message.error('结束时间不能早于开始时间');
          this.endTime = ''; // 重置结束时间
        }
      }
    }
  }
};
</script>

在这个例子中，我们定义了两个el-time-picker组件，分别用于选择开始时间和结束时间。我们还设置了startPickerOptions和endPickerOptions来限制时间选择范围，例如，只允许用户选择上午6点到下午5点之间的时间。通过监听change事件，我们可以在用户选择时间时进行校验，确保结束时间不早于开始时间。

在Vue中，可以通过创建一个组件来封装弹窗功能。以下是一个简单的弹窗组件示例：

<template>
  <div class="modal" v-if="isVisible">
    <div class="modal-content">
      <header class="modal-header">
        <slot name="header">默认标题</slot>
      </header>
      <main class="modal-body">
        <slot>默认内容</slot>
      </main>
      <footer class="modal-footer">
        <button @click="closeModal">关闭</button>
      </footer>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isVisible: false,
    };
  },
  methods: {
    openModal() {
      this.isVisible = true;
    },
    closeModal() {
      this.isVisible = false;
    },
  },
};
</script>
 
<style scoped>
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  min-width: 300px;
}
 
.modal-header, .modal-footer {
  padding: 10px 0;
  text-align: right;
}
 
.modal-body {
  padding: 20px 0;
}
</style>

使用该组件时，可以通过以下方式调用：

<template>
  <div id="app">
    <button @click="showModal">打开弹窗</button>
    <modal-component ref="modal">
      <!-- 自定义标题 -->
      <template slot="header">自定义标题</template>
      <!-- 自定义内容 -->
      <p>这是一个自定义内容的弹窗。</p>
    </modal-component>
  </div>
</template>
 
<script>
import ModalComponent from './components/ModalComponent.vue';
 
export default {
  components: {
    ModalComponent
  },
  methods: {
    showModal() {
      this.$refs.modal.openModal();
    }
  }
};
</script>

在这个例子中，ModalComponent是一个封装了弹窗逻辑的组件，它有打开和关闭弹窗的方法。父组件通过ref属性引用弹窗组件，并通过openModal方法打开弹窗。通过插槽，可以方便地在弹窗中插入自定义的标题和内容。

这是一个基于Vue 3、Vite、Pinia、Element UI和Axios的后台管理系统的简单框架设置。以下是一个简单的实例代码：

1. 安装依赖：

npm install

2. 项目结构可能如下所示：

src
|-- api
|   |-- index.js
|-- assets
|-- components
|-- store
|   |-- index.js
|-- styles
|-- views
|-- App.vue
|-- main.js
|-- vite-env.d.ts

3. vite-env.d.ts 文件用于声明环境变量：

/// <summary> Declares environment variables. </summary>
 
interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string;
}

4. main.js 是 Vue 应用程序的入口点：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import './styles/index.css';
import router from './router';
import store from './store';
import './api/index';
 
const app = createApp(App);
 
app.use(ElementPlus);
app.use(store);
app.use(router);
 
app.mount('#app');

5. api/index.js 用于集中管理 API 请求：

import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
});
 
export default apiClient;

6. store/index.js 用于使用 Pinia 管理状态：

import { createPinia } from 'pinia';
 
const store = createPinia();
 
export default store;

7. App.vue 是根组件：

<template>
  <div id="app">
    <el-button @click="fetchData">Fetch Data</el-button>
  </div>
</template>
 
<script>
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
import api from '@/api';
 
export default defineComponent({
  setup() {
    const store = useStore();
 
    const fetchData = async () => {
      try {
        const response = await api.get('/some-endpoint');
        store.dispatch('updateData', response.data);
      } catch (error) {
        console.error('An error occurred while fetching data:', error);
      }
    };
 
    return {
      fetchData,
    };
  },
});
</script>

8. 在 views 目录下可以包含更多的 Vue 组件，它们将由 Vue Router 在 main.js 中定义和使用。

这个框架提供了一个基础，您可以根据自己的需求进行扩展和定制。记得在实际应用中，您还需要设置 Vue Router、Vuex 或 Pinia 的状态管理，并且要处理权限、国际化等其他常见的后台管理系统需求。

<template>
  <el-select
    v-model="selectedValues"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择标签"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script>
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
 
export default {
  components: {
    ElSelect,
    ElOption
  },
  setup() {
    const options = ref([
      { label: 'Vue.js', value: 'Vue' },
      { label: 'JavaScript', value: 'JavaScript' },
      // 更多选项...
    ]);
    const selectedValues = ref([]);
 
    return {
      options,
      selectedValues
    };
  }
};
</script>

这段代码定义了一个Vue组件，使用了Element Plus的el-select和el-option组件来创建一个多选下拉框。用户可以从预设的选项中进行选择，也可以输入新的选项并自动创建它。selectedValues是一个数组，包含了用户选择的所有值。

由于提出的查询涉及到数据库文件和后端源代码，因此直接提供源代码或数据库文件不合适。但是，我可以提供一个简化的Vue前端项目框架和ASP.NET Core Web API后端项目框架，以及如何将它们连接的指导。

1. 前端Vue项目:

# 安装Vue CLI
npm install -g @vue/cli
 
# 创建新的Vue项目
vue create my-enterprise-website
 
# 进入项目目录
cd my-enterprise-website
 
# 添加Element UI
vue add element
 
# 运行项目
npm run serve

2. 后端ASP.NET Core Web API项目:

# 使用.NET CLI创建新的Web API项目
dotnet new webapi -o MyEnterpriseWebApi
 
# 进入项目目录
cd MyEnterpriseWebApi
 
# 运行项目
dotnet run

3. 连接前端和后端:

• 在Vue项目中，您可以通过axios或fetch API发送HTTP请求到后端API。
• 在Web API项目中，您可以定义控制器并处理来自前端的请求。

4. 数据库连接:

• 在后端项目中，您可以使用Entity Framework Core来设置数据库连接并进行迁移。

示例代码:

前端Vue部分:

// 在Vue组件中发送请求
export default {
  name: 'ExampleComponent',
  data() {
    return {
      data: null
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('http://localhost:5000/api/values');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};

后端ASP.NET Core部分:

// 在Controller中处理请求
[ApiController]
[Route("[controller]")]
public class ValuesController : ControllerBase
{
    // GET api/values
    [HttpGet]
    public ActionResult<IEnumerable<string>> Get()
    {
        // 假设的数据库调用或其他业务逻辑
        return new string[] { "value1", "value2" };
    }
}

请注意，您需要根据您的具体需求进行相应的路由定义、数据库配置和安全设置等。这只是一个简单的示例，展示了如何将Vue前端与ASP.NET Core Web API后端连接起来。

在Vue项目中使用SM4国密算法进行加密和解密，你需要引入sm-crypto库。以下是一个简单的例子：

1. 安装sm-crypto库：

npm install sm-crypto

2. 在Vue组件中使用sm-crypto进行加密和解密：

<template>
  <div>
    <el-input v-model="plaintext" placeholder="请输入明文"></el-input>
    <el-button @click="encrypt">加密</el-button>
    <el-input v-model="ciphertext" placeholder="显示加密结果"></el-input>
    <el-button @click="decrypt">解密</el-button>
    <el-input v-model="decryptedtext" placeholder="显示解密结果"></el-input>
  </div>
</template>
 
<script>
import { SM4 } from 'sm-crypto';
 
export default {
  data() {
    return {
      plaintext: '',
      ciphertext: '',
      decryptedtext: ''
    };
  },
  methods: {
    encrypt() {
      const sm4 = new SM4();
      this.ciphertext = sm4.encryptHex(this.plaintext, '密钥'); // 密钥需要替换为实际的密钥
    },
    decrypt() {
      const sm4 = new SM4();
      this.decryptedtext = sm4.decryptHex(this.ciphertext, '密钥'); // 密钥需要替换为实际的密钥
    }
  }
};
</script>

在这个例子中，我们定义了一个Vue组件，其中包含了加密和解密的逻辑。用户可以在输入框中输入明文，然后使用按钮进行加密，加密结果会显示在另一个输入框中。解密过程类似。

注意：在实际应用中，密钥应该是动态的，并且应该安全地管理和存储。上述代码中的密钥是硬编码的，仅用于演示目的。

<template>
  <el-row>
    <audio
      ref="audio"
      :src="audioSrc"
      @timeupdate="onTimeUpdate"
      @loadedmetadata="onLoadedMetadata"
    ></audio>
    <el-slider
      :max="duration"
      v-model="currentTime"
      @change="onSliderChange"
      @mousedown.native="onSliderMouseDown"
      @mouseup.native="onSliderMouseUp"
    ></el-slider>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      audioSrc: 'your-audio-url.mp3',
      duration: 0,
      currentTime: 0,
      isDragging: false
    };
  },
  methods: {
    onTimeUpdate(event) {
      this.currentTime = event.target.currentTime;
    },
    onLoadedMetadata(event) {
      this.duration = event.target.duration;
    },
    onSliderChange(value) {
      if (this.isDragging) {
        this.$refs.audio.currentTime = value;
      }
    },
    onSliderMouseDown() {
      this.isDragging = true;
    },
    onSliderMouseUp() {
      this.isDragging = false;
    }
  }
};
</script>

这段代码使用了Vue 2和Element UI来创建一个带有拖拽进度条的音频播放器。它包括一个<audio>标签和一个<el-slider>组件，用于控制音频的播放进度。代码中的onTimeUpdate方法会在音频播放时更新当前播放时间，onLoadedMetadata会在音频元数据加载完成时获取音频总时长，onSliderChange方法在滑块拖动时更新音频播放位置，并在拖动开始和结束时设置isDragging标志。

在Vue 3中，您可以使用navigator.clipboard.writeText函数来实现复制文本到剪贴板的功能。以下是一个简单的示例：

<template>
  <button @click="copyText">复制文本</button>
</template>
 
<script setup>
import { ref } from 'vue';
 
const textToCopy = ref('要复制的文本内容');
 
async function copyText() {
  try {
    await navigator.clipboard.writeText(textToCopy.value);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制到剪贴板失败', err);
  }
}
</script>

在这个示例中，我们创建了一个按钮，当点击时，会调用copyText函数。这个函数使用navigator.clipboard.writeText方法将textToCopy的值复制到剪贴板。如果复制成功，会在控制台输出一条成功的消息，如果失败，会捕获错误并在控制台输出错误信息。

在使用Element Plus的Table组件时，可以通过自定义列模板来实现单行文本超出显示省略的Tooltip效果。以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #default="{ row }">
        <el-tooltip :content="row.name" placement="top" effect="dark">
          <div class="ellipsis" :style="{ maxWidth: '100px' }">{{ row.name }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎1234567890' },
        // 其他数据...
      ],
    };
  },
};
</script>
 
<style>
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

在这个示例中，我们定义了一个带有tooltip的列模板，.ellipsis 类用于确保当文本超出指定宽度时显示省略符号。el-tooltip 组件的 content 属性绑定了单元格的实际内容，并且 placement 和 effect 属性分别设置了提示框的位置和样式。

这个问题通常是由于Element Plus的样式没有正确加载或者是CSS的选择器优先级不足以覆盖折叠状态下的图标样式。

解决方法：

1. 确保Element Plus样式文件已正确引入。如果你是通过CDN或者npm安装的，检查你的index.html或main.js文件中是否有正确的样式链接。
2. 检查是否有全局样式覆盖了折叠状态下的图标样式。如果有，提高选择器的优先级或者调整覆盖的样式。
3. 如果以上方法都不行，可以尝试手动为折叠状态下的图标设置样式，确保它们可见。

示例代码：

/* 确保在折叠状态下菜单图标也可见 */
.el-menu--collapse .el-submenu__icon-arrow {
  display: block !important;
}
 
/* 针对Element Plus 1.x版本，如果是2.x版本，可能需要调整选择器 */
.el-menu--vertical .el-submenu .el-submenu__icon-arrow {
  display: block !important;
}

确保将这段CSS添加到你的全局样式文件中，并确保它在Element Plus的样式之后加载，以保证优先级。如果你使用的是Vue单文件组件（.vue），可以在<style>标签中添加上述CSS规则。