jimmiewang-skills-v2 1.0.1

package/README.md

@@ -0,0 +1,18 @@
+# jimmiewang-skills
+
+A collection of skills and utilities.
+
+## Installation
+
+```bash
+npm install jimmiewang-skills
+```
+
+## Usage
+
+```javascript
+const { hello } = require('jimmiewang-skills');
+
+console.log(hello('User'));
+// Output: Hello, User from jimmiewang-skills!
+```

package/index.js

@@ -0,0 +1,7 @@
+function hello(name = 'World') {
+  return `Hello, ${name} from jimmiewang-skills!`;
+}
+
+module.exports = {
+  hello
+};

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "jimmiewang-skills-v2",
+  "version": "1.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "node test.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}

package/skills/create-list-page/README.md

@@ -0,0 +1,45 @@
+# Create List Page Skill
+
+此 Skill 用于自动生成符合项目架构（Vue + Element UI + Vuex + TableList）的列表页面。
+
+## 什么是 create-list-page？
+
+它是一个自动化生成器，能够一次性为您创建以下所有文件：
+1.  **View**: `src/views/<module>/<entity>/list.vue` (列表页面组件)
+2.  **API**: `src/api/<module>.js` (后端接口定义)
+3.  **Store**: `src/store/modules/<module>/<entity>.js` (Vuex 状态管理)
+4.  **Router**: `src/router/modules/<module>.js` (路由配置)
+
+## 如何使用
+
+您可以直接使用自然语言描述需求，但为了保证生成的准确性，建议包含以下 4 个关键要素：
+*   **模块 (Module)**: 代码中的大模块名（如 `businessManagement`, `systemAdmin`）
+*   **实体 (Entity)**: 功能名称（如 `OrderList`, `UserLog`）
+*   **字段 (Fields)**: 列表需要展示的列
+*   **API**: 后端接口地址
+
+## 示例指令
+
+您可以复制以下格式发送给 Trae：
+
+```text
+使用 skills: create-list-page
+
+- 模块 (Module): businessManagement
+  (说明: 这决定了文件将存放在 src/views/businessManagement/ 和 src/store/modules/businessManagement/)
+
+- 实体 (Entity): OrderList
+  (说明: 这决定了组件名和文件名为 OrderList)
+
+- 字段 (Fields): OrderId, CustomerName, Amount, Status
+  (说明: 这些字段将用于生成表格列)
+
+- API: /api/business/orders/list
+  (说明: 用于生成 src/api/businessManagement.js 中的 fetchOrderList 函数)
+```
+
+或者更简单的自然语言描述：
+
+> "请在 **systemAdmin** 模块下创建一个 **AuditLog**（审计日志）列表页。
+> 表格需要包含：**LogID、Operator、Time、Action**。
+> API 接口地址是 `/api/admin/audit/list`。"

package/skills/create-list-page/SKILL.md

@@ -0,0 +1,182 @@
+---
+name: "create-list-page"
+description: "Generates a Vue.js list page including View, API, Store, and Router updates based on requirements. Invoke when user wants to create a new list page or table view."
+---
+
+# Create List Page
+
+This skill generates a new list page following the project's architecture (Vue + Element UI + Vuex + TableList component).
+
+## Usage
+Provide the requirement or data structure for the list page.
+The skill will:
+1.  Define the API function in `src/api/`.
+2.  Create the Vuex Store module in `src/store/modules/<module>/<entity>.js`.
+3.  Register the Store module in `src/store/modules/<module>/index.js` (converting file to folder if needed).
+4.  Create the Vue component in `src/views/`.
+5.  Add the route in `src/router/`.
+
+## Code Templates
+
+### 1. API (`src/api/<module>.js`)
+Append this to the module's API file.
+```javascript
+export const fetch<Entity>List = (params) => {
+  return service.get('/api/path/to/resource', { params: params })
+}
+```
+
+### 2. Store (`src/store/modules/<module>/<entity>.js`)
+Create this file.
+
+```javascript
+import { fetch<Entity>List } from '@/api/<module>'
+
+const <entity> = {
+  namespaced: true,
+  state: {
+    paging: {
+      total: 0,
+      currentPage: 1,
+      pageSize: 10
+    },
+    searchForm: {
+      // Define fields here
+      name: ''
+    },
+    selectedData: null
+  },
+  mutations: {
+    updatePaging(state, data) {
+      state.paging = { ...state.paging, ...data }
+    },
+    updateSearchForm(state, data) {
+      state.searchForm = { ...state.searchForm, ...data }
+    },
+    setSelectedData(state, data) {
+      state.selectedData = { ...state.selectedData, ...data }
+    }
+  },
+  actions: {
+    async get<Entity>List({ commit, state }, params) {
+      const searchParams = { ...state.searchForm, ...params.search }
+      const apiParams = {
+        ...searchParams,
+        page: state.paging.currentPage,
+        pageSize: state.paging.pageSize,
+        ...params
+      }
+      
+      try {
+        const res = await fetch<Entity>List(apiParams)
+        if (!res.statusCode) {
+            commit('updatePaging', { total: res.total || 0 })
+            return res.list || res.data || []
+        }
+        return []
+      } catch (e) {
+          console.error(e)
+          return []
+      }
+    }
+  }
+}
+
+export default <entity>
+```
+
+### 3. View (`src/views/<module>/<entity>/list.vue`)
+Use the `TableList` component pattern with Vuex.
+
+```vue
+<template>
+  <div>
+    <CollapsePanel :panel-title="$t('<module>.searchTitle')">
+      <el-form ref="searchForm" :inline="true" :model="<module>.<entity>.searchForm">
+        <!-- Add search fields here, bind to store state -->
+        <el-form-item label="Name" prop="name">
+          <el-input v-model="<module>.<entity>.searchForm.name"/>
+        </el-form-item>
+        <div class="btn-area">
+          <el-button type="primary" @click="handleSearch">{{ $t('common.query') }}</el-button>
+          <el-button type="primary" plain @click="resetForm('searchForm')">{{ $t('common.clear') }}</el-button>
+        </div>
+      </el-form>
+    </CollapsePanel>
+
+    <TableList
+      ref="tableList"
+      :table-columns="tableColumns"
+      :search-form="<module>.<entity>.searchForm"
+      :page-obj="<module>.<entity>.paging"
+      :use-data-request="true"
+      :query-data-list="getTableData"
+      @addHandler="goToAdd"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import CollapsePanel from '@/components/CollapsePanel'
+import TableList from '@/components/TableList'
+
+export default {
+  name: '<Entity>List',
+  components: { CollapsePanel, TableList },
+  data() {
+    return {
+      tableColumns: [
+        { label: 'Name', prop: 'name', isShow: true, width: 200 },
+        { label: 'Status', prop: 'status', isShow: true, width: 150 }
+        // Add more columns based on requirements
+      ]
+    }
+  },
+  computed: {
+    ...mapState(['<module>'])
+  },
+  methods: {
+    async getTableData(params) {
+      this.$store.commit('<module>/<entity>/updatePaging', params.paging)
+      return await this.$store.dispatch('<module>/<entity>/get<Entity>List', params)
+    },
+    handleSearch() {
+      const searchData = this.<module>.<entity>.searchForm
+      this.$refs.tableList.searchData({ search: searchData })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    },
+    goToAdd() {
+      this.$router.push({ path: '/<module>/<entity>/add' })
+    }
+  }
+}
+</script>
+```
+
+### 4. Router (`src/router/modules/<module>.js`)
+Add the new route to the children array.
+
+```javascript
+{
+  path: '<entity>/list',
+  component: () => import('@/views/<module>/<entity>/list'),
+  name: '<Entity>List',
+  meta: { title: '<entity>.list' }
+}
+```
+
+## Instructions for AI
+1.  **Analyze the Request**: Identify the module, entity name, fields, and API endpoint.
+2.  **Check Existing Files**: Check API, Router, and Store structure.
+3.  **Store Handling**:
+    -   If `src/store/modules/<module>.js` is a file, rename it to `src/store/modules/<module>/index.js` and ensure it exports the module with `modules` property.
+    -   Create the new store file in `src/store/modules/<module>/<entity>.js`.
+    -   Register `<entity>` in `src/store/modules/<module>/index.js`.
+4.  **Generate Code**:
+    -   Update API file.
+    -   Create View file (referencing store state correctly).
+    -   Update Router file.
+5.  **Verify**: Ensure all paths and namespaced store calls are correct.

package/test.js

@@ -0,0 +1,12 @@
+const { hello } = require('./index');
+
+console.log('Testing jimmiewang-skills...');
+const result = hello('Tester');
+console.log(result);
+
+if (result === 'Hello, Tester from jimmiewang-skills!') {
+  console.log('Test Passed!');
+} else {
+  console.error('Test Failed!');
+  process.exit(1);
+}