ads-fe 0.0.1

package/skills/element-plus-vue3/examples/components/date-picker.md

@@ -0,0 +1,115 @@
+# DatePicker Component
+
+**官方文档**: https://element-plus.org/en-US/component/date-picker.html
+
+
+## Instructions
+
+This example demonstrates the DatePicker component in Element Plus.
+
+### Key Concepts
+
+- Date selection
+- Date range
+- Date format
+- Date picker types
+
+### Example: Basic DatePicker
+
+```vue
+<template>
+  <el-date-picker v-model="date" type="date" placeholder="Select date" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const date = ref('')
+</script>
+```
+
+### Example: Date Range
+
+```vue
+<template>
+  <el-date-picker
+    v-model="dateRange"
+    type="daterange"
+    range-separator="To"
+    start-placeholder="Start date"
+    end-placeholder="End date"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dateRange = ref([])
+</script>
+```
+
+### Example: Date Picker Types
+
+```vue
+<template>
+  <el-date-picker v-model="date" type="date" />
+  <el-date-picker v-model="datetime" type="datetime" />
+  <el-date-picker v-model="daterange" type="daterange" />
+  <el-date-picker v-model="datetimerange" type="datetimerange" />
+  <el-date-picker v-model="month" type="month" />
+  <el-date-picker v-model="year" type="year" />
+</template>
+```
+
+### Example: Date Format
+
+```vue
+<template>
+  <el-date-picker
+    v-model="date"
+    type="date"
+    format="YYYY-MM-DD"
+    value-format="YYYY-MM-DD"
+  />
+</template>
+```
+
+### Example: Date Picker with Shortcuts
+
+```vue
+<template>
+  <el-date-picker
+    v-model="date"
+    type="date"
+    :shortcuts="shortcuts"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const date = ref('')
+const shortcuts = [
+  {
+    text: 'Today',
+    value: new Date()
+  },
+  {
+    text: 'Yesterday',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24)
+      return date
+    }
+  }
+]
+</script>
+```
+
+### Key Points
+
+- Use v-model for selected date
+- Multiple types: date, datetime, daterange, etc.
+- Configure format and value-format
+- Support shortcuts
+- Use Day.js for date handling

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

@@ -0,0 +1,106 @@
+# Dialog Component
+
+**官方文档**: https://element-plus.org/en-US/component/dialog.html
+
+
+## Instructions
+
+This example demonstrates the Dialog component in Element Plus.
+
+### Key Concepts
+
+- Dialog visibility
+- Dialog content
+- Dialog actions
+- Dialog events
+- Dialog methods
+
+### Example: Basic Dialog
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">Open Dialog</el-button>
+  <el-dialog v-model="dialogVisible" title="Dialog Title">
+    <span>Dialog Content</span>
+    <template #footer>
+      <el-button @click="dialogVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>
+```
+
+### Example: Dialog with Form
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">Open Dialog</el-button>
+  <el-dialog v-model="dialogVisible" title="Form Dialog" width="500px">
+    <el-form :model="form" label-width="100px">
+      <el-form-item label="Name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="Email">
+        <el-input v-model="form.email" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="handleSubmit">Submit</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+const form = ref({
+  name: '',
+  email: ''
+})
+
+const handleSubmit = () => {
+  console.log('Form:', form.value)
+  dialogVisible.value = false
+}
+</script>
+```
+
+### Example: Dialog Methods
+
+```vue
+<template>
+  <el-button @click="openDialog">Open Dialog</el-button>
+</template>
+
+<script setup>
+import { ElMessageBox } from 'element-plus'
+
+const openDialog = () => {
+  ElMessageBox.confirm('Are you sure?', 'Confirm', {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    type: 'warning'
+  }).then(() => {
+    console.log('Confirmed')
+  }).catch(() => {
+    console.log('Cancelled')
+  })
+}
+</script>
+```
+
+### Key Points
+
+- Control visibility with v-model
+- Use title prop for dialog title
+- Customize footer with footer slot
+- Support form inside dialog
+- Use ElMessageBox for programmatic dialogs

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

@@ -0,0 +1,127 @@
+# Form Component
+
+**官方文档**: https://element-plus.org/en-US/component/form.html
+
+
+## Instructions
+
+This example demonstrates the Form component in Element Plus.
+
+### Key Concepts
+
+- Form structure
+- Form validation
+- Form rules
+- Form submission
+- Form fields
+
+### Example: Basic Form
+
+```vue
+<template>
+  <el-form :model="form" label-width="120px">
+    <el-form-item label="Name">
+      <el-input v-model="form.name" />
+    </el-form-item>
+    <el-form-item label="Email">
+      <el-input v-model="form.email" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="handleSubmit">Submit</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const form = ref({
+  name: '',
+  email: ''
+})
+
+const handleSubmit = () => {
+  console.log('Form:', form.value)
+}
+</script>
+```
+
+### Example: Form Validation
+
+```vue
+<template>
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    label-width="120px"
+  >
+    <el-form-item label="Name" prop="name">
+      <el-input v-model="form.name" />
+    </el-form-item>
+    <el-form-item label="Email" prop="email">
+      <el-input v-model="form.email" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="handleSubmit">Submit</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const formRef = ref()
+const form = ref({
+  name: '',
+  email: ''
+})
+
+const rules = {
+  name: [
+    { required: true, message: 'Please input name', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: 'Please input email', trigger: 'blur' },
+    { type: 'email', message: 'Please input valid email', trigger: 'blur' }
+  ]
+}
+
+const handleSubmit = async () => {
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      console.log('Form valid:', form.value)
+    }
+  })
+}
+</script>
+```
+
+### Example: Form Layout
+
+```vue
+<template>
+  <el-form :model="form" label-position="top">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="Name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="Email">
+          <el-input v-model="form.email" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+```
+
+### Key Points
+
+- Use :model for form data
+- Configure :rules for validation
+- Use prop for form-item validation
+- Handle form submission
+- Support multiple layouts

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

@@ -0,0 +1,123 @@
+# Input Component
+
+**官方文档**: https://element-plus.org/en-US/component/input.html
+
+
+## Instructions
+
+This example demonstrates the Input component in Element Plus.
+
+### Key Concepts
+
+- Input types
+- Input sizes
+- Input states
+- Input events
+- Input validation
+
+### Example: Basic Input
+
+```vue
+<template>
+  <el-input v-model="input" placeholder="Please input" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const input = ref('')
+</script>
+```
+
+### Example: Input Types
+
+```vue
+<template>
+  <el-input v-model="text" type="text" />
+  <el-input v-model="password" type="password" show-password />
+  <el-input v-model="textarea" type="textarea" :rows="4" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const text = ref('')
+const password = ref('')
+const textarea = ref('')
+</script>
+```
+
+### Example: Input Sizes
+
+```vue
+<template>
+  <el-input v-model="input1" size="large" />
+  <el-input v-model="input2" size="default" />
+  <el-input v-model="input3" size="small" />
+</template>
+```
+
+### Example: Input States
+
+```vue
+<template>
+  <el-input v-model="input" disabled />
+  <el-input v-model="input" readonly />
+  <el-input v-model="input" clearable />
+</template>
+```
+
+### Example: Input with Prefix/Suffix
+
+```vue
+<template>
+  <el-input v-model="input1">
+    <template #prefix>
+      <el-icon><Search /></el-icon>
+    </template>
+  </el-input>
+  <el-input v-model="input2">
+    <template #suffix>
+      <el-icon><Calendar /></el-icon>
+    </template>
+  </el-input>
+</template>
+```
+
+### Example: Input Events
+
+```vue
+<template>
+  <el-input
+    v-model="input"
+    @input="handleInput"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const input = ref('')
+
+const handleInput = (value) => {
+  console.log('Input:', value)
+}
+const handleChange = (value) => {
+  console.log('Change:', value)
+}
+const handleFocus = () => {
+  console.log('Focus')
+}
+const handleBlur = () => {
+  console.log('Blur')
+}
+</script>
+```
+
+### Key Points
+
+- Use v-model for two-way binding
+- Support multiple input types
+- Support disabled, readonly, clearable
+- Prefix and suffix slots
+- Multiple event handlers

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

@@ -0,0 +1,93 @@
+# Message Component
+
+**官方文档**: https://element-plus.org/en-US/component/message.html
+
+
+## Instructions
+
+This example demonstrates the Message component in Element Plus.
+
+### Key Concepts
+
+- Message types
+- Message duration
+- Message positioning
+- Message methods
+
+### Example: Message API
+
+```vue
+<template>
+  <el-button @click="showMessage">Show Message</el-button>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+
+const showMessage = () => {
+  ElMessage.success('Success message')
+}
+</script>
+```
+
+### Example: Message Types
+
+```vue
+<script setup>
+import { ElMessage } from 'element-plus'
+
+// Success
+ElMessage.success('Success message')
+
+// Warning
+ElMessage.warning('Warning message')
+
+// Error
+ElMessage.error('Error message')
+
+// Info
+ElMessage.info('Info message')
+</script>
+```
+
+### Example: Message Options
+
+```vue
+<script setup>
+import { ElMessage } from 'element-plus'
+
+ElMessage({
+  message: 'Custom message',
+  type: 'success',
+  duration: 3000,
+  showClose: true,
+  center: true
+})
+</script>
+```
+
+### Example: Message Positioning
+
+```vue
+<script setup>
+import { ElMessage } from 'element-plus'
+
+ElMessage({
+  message: 'Top message',
+  position: 'top'
+})
+
+ElMessage({
+  message: 'Top-right message',
+  position: 'top-right'
+})
+</script>
+```
+
+### Key Points
+
+- Use ElMessage API for programmatic messages
+- Multiple types: success, warning, error, info
+- Configure duration and position
+- Auto-close by default
+- Support custom message content

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

@@ -0,0 +1,59 @@
+# Components Overview
+
+**官方文档**: https://element-plus.org/en-US/component/overview.html
+
+
+## Instructions
+
+This example provides an overview of Element Plus components.
+
+### Key Concepts
+
+- Component categories
+- Component list
+- Component usage
+- Component features
+
+### Example: Component Categories
+
+**Basic Components (基础组件)**:
+- Button, Link, Icon
+
+**Form Components (表单组件)**:
+- Input, Textarea, Select, Switch, Checkbox, Radio, DatePicker, TimePicker, Upload, Rate, ColorPicker, Transfer, Form
+
+**Data Display (数据展示)**:
+- Table, Tag, Progress, Tree, Pagination, Badge, Avatar, Skeleton, Empty, Descriptions, Result, Statistic
+
+**Navigation (导航)**:
+- NavMenu, Tabs, Breadcrumb, PageHeader, Affix, Backtop
+
+**Feedback (反馈)**:
+- Alert, Loading, Message, MessageBox, Notification, Popover, Tooltip, Popconfirm, Drawer, Dialog
+
+**Layout (布局)**:
+- Row, Col, Container, Aside, Main, Header, Footer
+
+**Others (其他)**:
+- Divider, Calendar, Image, Timeline, Card, Carousel, Collapse, InfiniteScroll
+
+### Example: Component Registration
+
+```javascript
+// Full import
+import ElementPlus from 'element-plus'
+app.use(ElementPlus)
+
+// On-demand import
+import { ElButton, ElInput } from 'element-plus'
+app.component(ElButton.name, ElButton)
+app.component(ElInput.name, ElInput)
+```
+
+### Key Points
+
+- 60+ components available
+- Organized by category
+- Support full import and on-demand import
+- TypeScript support
+- Consistent API design