feat: d new layout components including FullWidthLayout, LayoutHeader, TabLayout, CardLayout, FormLayout, BasicLayout, and a Copywriting view.

frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+import LayoutHeader from './LayoutHeader.vue'
 
 defineOptions({ name: 'FullWidthLayout' })
 
@@ -26,23 +27,20 @@ const handleBack = () => {
 
 <template>
   <div class="full-width-layout">
-    <!-- 页面头部 -->
-    <div v-if="$slots.header || showBack" class="full-width-layout__header">
-      <div class="header-left">
-        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
-          <template #icon>
-            <ArrowLeftOutlined />
-          </template>
-        </a-button>
-        <div class="header-content">
-          <slot name="header"></slot>
-        </div>
-      </div>
-      <div class="header-right">
-        <slot name="extra"></slot>
-      </div>
+    <div v-if="$slots.header || showBack" class="full-width-layout__header-wrapper">
+       <LayoutHeader 
+        :show-back="showBack" 
+        @back="handleBack"
+      >
+        <template #header v-if="$slots.header">
+           <slot name="header"></slot>
+        </template>
+        <template #extra>
+          <slot name="extra"></slot>
+        </template>
+      </LayoutHeader>
     </div>
-
+   
     <!-- 全宽内容 -->
     <div
       class="full-width-layout__content"
@@ -62,51 +60,7 @@ const handleBack = () => {
   background: var(--bg-primary);
 }
 
-.full-width-layout__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-primary);
-  flex-shrink: 0;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  flex: 1;
-  min-width: 0;
-}
-
-.back-btn {
-  padding: var(--space-xs);
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-size: 16px;
-  line-height: 1;
-
-  &:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-}
-
-.header-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
+.full-width-layout__header-wrapper {
   flex-shrink: 0;
 }