ads-fe 0.0.1

package/skills/element-plus-vue3/examples/components/select.md

@@ -0,0 +1,133 @@
+# Select Component
+
+**官方文档**: https://element-plus.org/en-US/component/select.html
+
+
+## Instructions
+
+This example demonstrates the Select component in Element Plus.
+
+### Key Concepts
+
+- Select options
+- Select multiple
+- Select filtering
+- Select events
+
+### Example: Basic Select
+
+```vue
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option label="Option 1" value="1" />
+    <el-option label="Option 2" value="2" />
+    <el-option label="Option 3" value="3" />
+  </el-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const value = ref('')
+</script>
+```
+
+### Example: Select with Options Array
+
+```vue
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const value = ref('')
+const options = ref([
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' }
+])
+</script>
+```
+
+### Example: Multiple Select
+
+```vue
+<template>
+  <el-select v-model="value" multiple placeholder="Select multiple">
+    <el-option label="Option 1" value="1" />
+    <el-option label="Option 2" value="2" />
+    <el-option label="Option 3" value="3" />
+  </el-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const value = ref([])
+</script>
+```
+
+### Example: Filterable Select
+
+```vue
+<template>
+  <el-select
+    v-model="value"
+    filterable
+    placeholder="Search and select"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+```
+
+### Example: Select Events
+
+```vue
+<template>
+  <el-select
+    v-model="value"
+    @change="handleChange"
+    @visible-change="handleVisibleChange"
+  >
+    <el-option label="Option 1" value="1" />
+    <el-option label="Option 2" value="2" />
+  </el-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const value = ref('')
+
+const handleChange = (val) => {
+  console.log('Changed:', val)
+}
+
+const handleVisibleChange = (visible) => {
+  console.log('Visible:', visible)
+}
+</script>
+```
+
+### Key Points
+
+- Use v-model for selected value
+- Use el-option for options
+- Support multiple selection
+- Enable filtering with filterable
+- Handle change and visible-change events

package/skills/element-plus-vue3/examples/components/table.md

@@ -0,0 +1,166 @@
+# Table Component
+
+**官方文档**: https://element-plus.org/en-US/component/table.html
+
+
+## Instructions
+
+This example demonstrates the Table component in Element Plus.
+
+### Key Concepts
+
+- Table data
+- Table columns
+- Table selection
+- Table sorting
+- Table filtering
+- Table pagination
+
+### Example: Basic Table
+
+```vue
+<template>
+  <el-table :data="tableData">
+    <el-table-column prop="name" label="Name" />
+    <el-table-column prop="email" label="Email" />
+    <el-table-column prop="age" label="Age" />
+  </el-table>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tableData = ref([
+  { name: 'John', email: 'john@example.com', age: 25 },
+  { name: 'Jane', email: 'jane@example.com', age: 30 }
+])
+</script>
+```
+
+### Example: Table with Selection
+
+```vue
+<template>
+  <el-table
+    :data="tableData"
+    @selection-change="handleSelectionChange"
+  >
+    <el-table-column type="selection" width="55" />
+    <el-table-column prop="name" label="Name" />
+    <el-table-column prop="email" label="Email" />
+  </el-table>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tableData = ref([
+  { name: 'John', email: 'john@example.com' },
+  { name: 'Jane', email: 'jane@example.com' }
+])
+
+const handleSelectionChange = (selection) => {
+  console.log('Selected:', selection)
+}
+</script>
+```
+
+### Example: Table with Sorting
+
+```vue
+<template>
+  <el-table :data="tableData" default-sort="{ prop: 'age', order: 'ascending' }">
+    <el-table-column prop="name" label="Name" sortable />
+    <el-table-column prop="age" label="Age" sortable />
+  </el-table>
+</template>
+```
+
+### Example: Table with Filtering
+
+```vue
+<template>
+  <el-table :data="tableData">
+    <el-table-column prop="status" label="Status" :filters="filters" :filter-method="filterMethod">
+      <template #default="{ row }">
+        <el-tag :type="row.status === 'active' ? 'success' : 'info'">
+          {{ row.status }}
+        </el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tableData = ref([
+  { name: 'John', status: 'active' },
+  { name: 'Jane', status: 'inactive' }
+])
+
+const filters = [
+  { text: 'Active', value: 'active' },
+  { text: 'Inactive', value: 'inactive' }
+]
+
+const filterMethod = (value, row) => {
+  return row.status === value
+}
+</script>
+```
+
+### Example: Table with Pagination
+
+```vue
+<template>
+  <el-table :data="paginatedData">
+    <el-table-column prop="name" label="Name" />
+    <el-table-column prop="email" label="Email" />
+  </el-table>
+  <el-pagination
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :total="total"
+    layout="total, sizes, prev, pager, next, jumper"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const tableData = ref([
+  { name: 'John', email: 'john@example.com' },
+  { name: 'Jane', email: 'jane@example.com' },
+  // ... more data
+])
+
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(100)
+
+const paginatedData = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return tableData.value.slice(start, end)
+})
+
+const handleSizeChange = (val) => {
+  pageSize.value = val
+}
+
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+}
+</script>
+```
+
+### Key Points
+
+- Use :data for table data
+- Define columns with el-table-column
+- Support selection, sorting, filtering
+- Use pagination for large datasets
+- Customize columns with slots

package/skills/element-plus-vue3/examples/guide/design.md

@@ -0,0 +1,68 @@
+# Design Guidelines
+
+## Instructions
+
+This example covers Element Plus design guidelines and principles.
+
+### Key Concepts
+
+- Design principles
+- Color system
+- Typography
+- Spacing
+- Components
+
+### Example: Design Principles
+
+Element Plus follows Element Design principles:
+- **Consistency**: Consistent design language
+- **Feedback**: Clear user feedback
+- **Efficiency**: Efficient user experience
+- **Controllability**: User control
+
+### Example: Color System
+
+```css
+/* Primary Color */
+--el-color-primary: #409eff;
+
+/* Success Color */
+--el-color-success: #67c23a;
+
+/* Warning Color */
+--el-color-warning: #e6a23c;
+
+/* Danger Color */
+--el-color-danger: #f56c6c;
+
+/* Info Color */
+--el-color-info: #909399;
+```
+
+### Example: Typography
+
+```vue
+<template>
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <p>Body text</p>
+</template>
+```
+
+### Example: Spacing
+
+Element Plus uses consistent spacing scale:
+- xs: 4px
+- sm: 8px
+- md: 16px
+- lg: 24px
+- xl: 32px
+
+### Key Points
+
+- Follow Element Design principles
+- Use consistent colors
+- Apply proper typography
+- Use spacing scale
+- Maintain design consistency

package/skills/element-plus-vue3/examples/guide/global-config.md

@@ -0,0 +1,95 @@
+# Global Configuration
+
+## Instructions
+
+This example demonstrates how to configure Element Plus globally.
+
+### Key Concepts
+
+- Global config options
+- ConfigProvider
+- Size configuration
+- z-index configuration
+
+### Example: Global Config
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus, {
+  size: 'large',
+  zIndex: 3000,
+  locale: zhCn
+})
+app.mount('#app')
+```
+
+### Example: Using ConfigProvider
+
+```vue
+<template>
+  <el-config-provider :size="size" :z-index="zIndex" :locale="locale">
+    <el-button>Button</el-button>
+    <el-input v-model="input" />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+const size = ref('default')
+const zIndex = ref(3000)
+const locale = ref(zhCn)
+const input = ref('')
+</script>
+```
+
+### Example: Size Configuration
+
+```vue
+<template>
+  <el-config-provider :size="size">
+    <el-button>Button</el-button>
+    <el-input v-model="input" />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const size = ref('default') // 'large' | 'default' | 'small'
+</script>
+```
+
+### Example: z-index Configuration
+
+```vue
+<template>
+  <el-config-provider :z-index="zIndex">
+    <el-dialog v-model="visible" title="Dialog">
+      Content
+    </el-dialog>
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const zIndex = ref(3000)
+const visible = ref(false)
+</script>
+```
+
+### Key Points
+
+- Configure globally via app.use()
+- Use ConfigProvider for component-level config
+- Size: 'large' | 'default' | 'small'
+- z-index: number (default: 3000)
+- Locale: locale object

package/skills/element-plus-vue3/examples/guide/i18n.md

@@ -0,0 +1,95 @@
+# Internationalization (i18n)
+
+## Instructions
+
+This example demonstrates how to configure internationalization in Element Plus.
+
+### Key Concepts
+
+- Locale configuration
+- Language switching
+- DatePicker locale
+- ConfigProvider
+
+### Example: Basic i18n Setup
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus, {
+  locale: zhCn
+})
+app.mount('#app')
+```
+
+### Example: Using ConfigProvider
+
+```vue
+<template>
+  <el-config-provider :locale="locale">
+    <el-date-picker v-model="date" />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+
+const locale = ref(zhCn)
+const date = ref('')
+</script>
+```
+
+### Example: Language Switching
+
+```vue
+<template>
+  <el-config-provider :locale="currentLocale">
+    <el-select v-model="language" @change="handleLanguageChange">
+      <el-option label="中文" value="zh-cn" />
+      <el-option label="English" value="en" />
+    </el-select>
+    <el-date-picker v-model="date" />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+
+const language = ref('zh-cn')
+const currentLocale = ref(zhCn)
+const date = ref('')
+
+const handleLanguageChange = (value) => {
+  currentLocale.value = value === 'zh-cn' ? zhCn : en
+}
+</script>
+```
+
+### Example: Available Locales
+
+```javascript
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+import es from 'element-plus/dist/locale/es.mjs'
+import fr from 'element-plus/dist/locale/fr.mjs'
+import ja from 'element-plus/dist/locale/ja.mjs'
+import ko from 'element-plus/dist/locale/ko.mjs'
+```
+
+### Key Points
+
+- Import locale files
+- Configure locale globally or per component
+- Use ConfigProvider for locale
+- Support multiple languages
+- DatePicker uses Day.js locale

package/skills/element-plus-vue3/examples/guide/installation.md

@@ -0,0 +1,110 @@
+# Installation
+
+## Instructions
+
+This example demonstrates how to install Element Plus in a Vue 3 project.
+
+### Key Concepts
+
+- Package installation
+- Full import
+- On-demand import
+- CDN import
+- Compatibility
+
+### Example: Package Installation
+
+```bash
+# Using npm
+npm install element-plus
+
+# Using yarn
+yarn add element-plus
+
+# Using pnpm
+pnpm add element-plus
+```
+
+### Example: Full Import
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')
+```
+
+### Example: On-Demand Import
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import { ElButton, ElInput } from 'element-plus'
+import 'element-plus/es/components/button/style/css'
+import 'element-plus/es/components/input/style/css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.component(ElButton.name, ElButton)
+app.component(ElInput.name, ElInput)
+app.mount('#app')
+```
+
+### Example: CDN Import
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
+</head>
+<body>
+  <div id="app"></div>
+  <script src="https://unpkg.com/vue@next"></script>
+  <script src="https://unpkg.com/element-plus"></script>
+  <script>
+    const { createApp } = Vue
+    const app = createApp({})
+    app.use(ElementPlus)
+    app.mount('#app')
+  </script>
+</body>
+</html>
+```
+
+### Example: Auto Import with unplugin-vue-components
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
+})
+```
+
+### Key Points
+
+- Install element-plus package
+- Choose between full import or on-demand import
+- Import CSS styles
+- Use app.use() for full import
+- Use auto-import plugins for better DX
+- Element Plus requires Vue 3