feat: add Claude AI skills for shadcn theming and image generation tools

This commit introduces comprehensive Claude AI skill configurations for:
- shadcn/ui theming with OKLCH color space support
- Gemini API integration for image generation and chat capabilities
- Batch processing and multi-turn conversation features
- File handling utilities for image processing workflows

frontend/app/web-gold/src/views/system/task-management/components/TaskPageLayout.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="task-page">
+    <!-- 筛选条件区域 -->
+    <div v-if="$slots.filters" class="task-page__filters">
+      <slot name="filters" />
+    </div>
+
+    <!-- 任务列表内容区域 -->
+    <div class="task-page__content">
+      <!-- 批量操作栏 -->
+      <div v-if="$slots['batch-actions']" class="batch-actions">
+        <slot name="batch-actions" />
+      </div>
+
+      <!-- 表格区域 -->
+      <div class="task-page__table">
+        <!-- 加载状态 -->
+        <div v-if="loading" class="task-page__loading">
+          <Spinner class="size-8" />
+        </div>
+
+        <!-- 表格内容 -->
+        <div class="task-page__table-wrapper">
+          <slot name="table" />
+        </div>
+
+        <!-- 分页 -->
+        <TablePagination
+          v-if="showPagination && total > 0"
+          :current="current"
+          :page-size="pageSize"
+          :total="total"
+          @change="$emit('page-change', $event)"
+        />
+      </div>
+    </div>
+
+    <!-- 弹窗插槽 -->
+    <slot name="modals" />
+  </div>
+</template>
+
+<script setup>
+import { Spinner } from '@/components/ui/spinner'
+import { TablePagination } from '@/components/ui/pagination'
+
+defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  showPagination: {
+    type: Boolean,
+    default: true
+  },
+  current: {
+    type: Number,
+    default: 1
+  },
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  total: {
+    type: Number,
+    default: 0
+  }
+})
+
+defineEmits(['page-change'])
+</script>
+
+<style scoped lang="less">
+.task-page {
+  padding: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.task-page__filters {
+  flex-shrink: 0;
+  padding: var(--space-5);
+  background: var(--card);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+}
+
+.task-page__content {
+  flex: 1;
+  overflow: hidden;
+  background: var(--card);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+}
+
+.batch-actions {
+  flex-shrink: 0;
+  margin-bottom: var(--space-4);
+}
+
+.task-page__table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-height: 0;
+}
+
+.task-page__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background);
+  opacity: 0.5;
+  z-index: 10;
+}
+
+.task-page__table-wrapper {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+</style>