Element Plus Transfer 提供可用列表和目标列表，并配有用于移动已勾选项的控件。模块工作台使用实际的 2.14.7 Vue 组件。其 v-model 包含目标键，初始值为 catalog 和 tokens。勾选列表中的复选框，是为下一步 Transfer 操作标记项目；这并不表示该项目已经属于目标列表。
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
已通过 Vue 3 和 Element Plus 2.14.7 验证。App.vue 提供英文版 ConfigProvider 和显式组件导入。所有状态均为本地状态。
javascript
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
适用于你项目的提示词
Agent 提示词
使用原生 ElTransfer 扩展提供的 Element Plus 2.14.7 工作区模块选择器。保留六个带键模块、禁用的 Audit 项、筛选行为以及受控的选中键数组。点击应用时，应捕获当前模块选项；之后若有编辑，应以可见方式标示该快照已过期；恢复操作则应还原初始选项。保留响应式双面板布局和禁用项语义，不要将 Transfer 重建为互不相关的列表。先加载原生样式表，再加载原有布局 CSS。
05
Element Plus 设计系统来源与范围
Element Plus 2.14.7 原生参考。模块名称和权限为原创示例；本地选项操作不会安装模块，也不会更改权限。
