@templmf/temp-solf-lmf 0.0.27 → 0.0.29

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

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