yg-yygl 0.0.1

package/src/views/demo-case/color/index.vue

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import { convertToRgb } from '@udp/utils';
+
+const rootStyles = getComputedStyle(document.documentElement);
+
+const getCssVariableValueRaw = (variable: string) => {
+  return rootStyles.getPropertyValue(variable);
+};
+const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+  const value = getCssVariableValueRaw(variable);
+  return isColor ? convertToRgb(`hsl(${value})`) : value;
+};
+
+// 中性色数据
+const neutralColors = [
+  { name: '边框色', value: getCssVariableValue('--border'), desc: '用于边框、分割线' },
+  { name: '背景色', value: getCssVariableValue('--background'), desc: '用于页面背景' },
+];
+
+// 复制颜色值
+const copyColor = (value: string) => {
+  navigator.clipboard.writeText(value);
+  // 这里可以添加提示信息
+};
+
+// 解析颜色值，返回 rgb 数组
+const parseColor = (color: string): [number, number, number] => {
+  // HEX 格式: #RRGGBB 或 #RGB
+  if (color.startsWith('#')) {
+    const hex = color.slice(1);
+    if (hex.length === 3) {
+      // #RGB 格式
+      return [
+        Number.parseInt(hex[0] + hex[0], 16),
+        Number.parseInt(hex[1] + hex[1], 16),
+        Number.parseInt(hex[2] + hex[2], 16),
+      ];
+    }
+    // #RRGGBB 格式
+    return [
+      Number.parseInt(hex.slice(0, 2), 16),
+      Number.parseInt(hex.slice(2, 4), 16),
+      Number.parseInt(hex.slice(4, 6), 16),
+    ];
+  }
+
+  // RGB/RGBA 格式: rgb(r, g, b) 或 rgba(r, g, b, a)
+  const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (rgbMatch) {
+    return [
+      Number.parseInt(rgbMatch[1], 10),
+      Number.parseInt(rgbMatch[2], 10),
+      Number.parseInt(rgbMatch[3], 10),
+    ];
+  }
+
+  // 默认返回黑色
+  return [0, 0, 0];
+};
+
+// 计算对比色（用于文字颜色）
+const getContrastColor = (color: string) => {
+  const [r, g, b] = parseColor(color);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness > 128 ? '#000000' : '#FFFFFF';
+};
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Color 色彩
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-regular))]">
+        为前端视觉保持统一的规范，可帮助快速完成整套视觉规范的理解和掌握，为商业所搭建的产品提供统一一致的视觉体验与品牌形象
+      </p>
+    </div>
+
+    <!-- 区域1：颜色规则 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-2">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        颜色规则
+      </h3>
+      <p class="text-sm text-[hsl(var(--foreground-regular))]">
+        标准：100%，浅色：8%，禁用：40%，悬停：80%，点击：+20%#000000
+      </p>
+    </div>
+
+    <!-- 区域2：标准色 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        标准色 Brand Color
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        翼构品牌标准色是纯净、高效的蓝色。
+      </p>
+      <div
+        class="max-w-[690px] w-full h-[200px] rounded-lg cursor-pointer transition-transform hover:scale-[1.01] shadow-sm overflow-hidden"
+      >
+        <div class="h-[128px] w-full text-2xl font-bold bg-primary p-4">
+          <div class="text-2xl font-bold mb-2 text-white" >
+            primary
+          </div>
+          <div class="text-sm text-white">
+            主题色
+          </div>
+        </div>
+        <div class="w-full h-[72px] flex items-center">
+          <div class="flex-1 h-full bg-[var(--el-color-primary-dark-2)]"></div>
+          <div class="flex-1 h-full bg-[var(--el-color-primary-light-3)]"></div>
+          <div class="flex-1 h-full bg-[var(--el-color-primary-light-5)]"></div>
+          <div class="flex-1 h-full bg-[var(--el-color-primary-light-7)]"></div>
+          <div class="flex-1 h-full bg-[var(--el-color-primary-light-8)]"></div>
+          <div class="flex-1 h-full bg-[var(--el-color-primary-light-9)]"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域3：辅助色 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3
+        class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        辅助色
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        辅助色需覆盖层级、引导用户放置 ——
+        依据层级的不同功能模块（如数据展示类色、表单类色），按优先级排序分类（如次要提示色、高亮提醒），或对特殊场景（如弹窗、浮层）
+      </p>
+      <div class="grid grid-cols-2 gap-4">
+        <!--   成功色     -->
+        <div
+          class="max-w-[690px] w-full h-[140px] rounded-lg cursor-pointer transition-transform hover:scale-[1.01] shadow-sm overflow-hidden"
+        >
+          <div class="h-[88px] w-full text-2xl font-bold bg-success p-4">
+            <div class="text-2xl font-bold mb-2 text-white">
+              success
+            </div>
+            <div class="text-sm text-white">
+              成功色
+            </div>
+          </div>
+          <div class="w-full h-[52px] flex items-center">
+            <div class="flex-1 h-full bg-[var(--el-color-success-dark-2)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-success-light-3)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-success-light-5)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-success-light-7)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-success-light-8)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-success-light-9)]"></div>
+          </div>
+        </div>
+        <!--   信息色     -->
+        <div
+          class="max-w-[690px] w-full h-[140px] rounded-lg cursor-pointer transition-transform hover:scale-[1.01] shadow-sm overflow-hidden"
+        >
+          <div class="h-[88px] w-full text-2xl font-bold bg-[var(--el-color-info)] p-4">
+            <div class="text-2xl font-bold mb-2 text-white">
+              info
+            </div>
+            <div class="text-sm text-white">
+              信息色
+            </div>
+          </div>
+          <div class="w-full h-[52px] flex items-center">
+            <div class="flex-1 h-full bg-[var(--el-color-info-dark-2)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-info-light-3)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-info-light-5)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-info-light-7)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-info-light-8)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-info-light-9)]"></div>
+          </div>
+        </div>
+        <!--   警告色     -->
+        <div
+          class="max-w-[690px] w-full h-[140px] rounded-lg cursor-pointer transition-transform hover:scale-[1.01] shadow-sm overflow-hidden"
+        >
+          <div class="h-[88px] w-full text-2xl font-bold bg-warning p-4">
+            <div class="text-2xl font-bold mb-2 text-white">
+              warning
+            </div>
+            <div class="text-sm text-white">
+              警告色
+            </div>
+          </div>
+          <div class="w-full h-[52px] flex items-center">
+            <div class="flex-1 h-full bg-[var(--el-color-warning-dark-2)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-warning-light-3)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-warning-light-5)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-warning-light-7)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-warning-light-8)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-warning-light-9)]"></div>
+          </div>
+        </div>
+        <!--   危险色    -->
+        <div
+          class="max-w-[690px] w-full h-[140px] rounded-lg cursor-pointer transition-transform hover:scale-[1.01] shadow-sm overflow-hidden"
+        >
+          <div class="h-[88px] w-full text-2xl font-bold bg-[var(--el-color-danger)] p-4">
+            <div class="text-2xl font-bold mb-2 text-white">
+              danger
+            </div>
+            <div class="text-sm text-white">
+              危险色
+            </div>
+          </div>
+          <div class="w-full h-[52px] flex items-center">
+            <div class="flex-1 h-full bg-[var(--el-color-danger-dark-2)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-danger-light-3)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-danger-light-5)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-danger-light-7)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-danger-light-8)]"></div>
+            <div class="flex-1 h-full bg-[var(--el-color-danger-light-9)]"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        中性色
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        用于边框、背景、分割线等场景
+      </p>
+      <div class="flex gap-4 flex-wrap">
+        <div
+          v-for="item in neutralColors"
+          :key="item.value"
+          class="cursor-pointer group"
+          @click="copyColor(item.value)"
+        >
+          <div
+            class="w-32 h-20 rounded-lg flex flex-col items-center justify-center mb-2 transition-transform group-hover:scale-105 shadow-sm border"
+            :style="{ backgroundColor: item.value, borderColor: '#DCDFE6' }"
+          >
+            <span class="text-sm font-medium text-[hsl(var(--foreground))]">{{ item.value }}</span>
+          </div>
+          <div class="text-center">
+            <div class="text-sm font-medium text-[hsl(var(--foreground))]">{{ item.name }}</div>
+            <div class="text-xs text-[hsl(var(--foreground-regular))]">{{ item.desc }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域6：色阶展示 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        色阶展示
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        标准色的不同深浅变化
+      </p>
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="(color, index) in [
+            getCssVariableValue('--primary-900'),
+            getCssVariableValue('--primary-700'),
+            getCssVariableValue('--primary-500'),
+            getCssVariableValue('--primary-400'),
+            getCssVariableValue('--primary-300'),
+            getCssVariableValue('--primary-200'),
+          ]"
+          :key="color"
+          class="flex items-center justify-between px-4 py-3 rounded-lg cursor-pointer hover:scale-[1.01] transition-transform"
+          :style="{ backgroundColor: color }"
+          @click="copyColor(color)"
+        >
+          <span
+            class="text-sm font-medium"
+            :style="{ color: getContrastColor(color) }"
+          >
+            {{ ['900', '700', '500', '400', '300', '200'][index] }}
+          </span>
+          <span
+            class="text-sm font-medium"
+            :style="{ color: getContrastColor(color) }"
+          >
+            {{ color }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域7：CSS 变量说明 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        CSS 变量说明
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-regular))]">
+        Element Plus 色彩相关 CSS 变量
+      </p>
+      <div class="grid grid-cols-2 gap-4 text-sm">
+        <div class="flex flex-col gap-1">
+          <div class="font-medium text-[hsl(var(--foreground))]">主色</div>
+          <div class="text-xs text-[hsl(var(--foreground-regular))] font-mono">
+            --el-color-primary: {{ getCssVariableValue('--el-color-primary') }}
+          </div>
+          <div class="text-xs text-[hsl(var(--foreground-secondary))] font-mono">
+            --el-color-primary-dark-2: {{ getCssVariableValue('--el-color-primary-dark-2') }}
+          </div>
+          <div class="text-xs text-[hsl(var(--foreground-secondary))] font-mono">
+            --el-color-primary-light-3: {{ getCssVariableValue('--el-color-primary-light-3') }}
+          </div>
+          <div class="text-xs text-[hsl(var(--foreground-secondary))] font-mono">
+            --el-color-primary-light-5: {{ getCssVariableValue('--el-color-primary-light-5') }}
+          </div>
+        </div>
+        <div class="flex flex-col gap-1">
+          <div class="font-medium text-[hsl(var(--foreground))]">功能色</div>
+          <div class="text-xs text-[hsl(var(--foreground-secondary))] font-mono">
+            --el-color-success: {{ getCssVariableValue('--el-color-success') }}
+          </div>
+          <div class="text-xs text-[hsl(var(--foreground-secondary))] font-mono">
+            --el-color-info: {{ getCssVariableValue('--el-color-info') }}
+          </div>
+          <div class="text-xs text-[hsl(var(--foreground-secondary))] font-mono">
+            --el-color-warning: {{ getCssVariableValue('--el-color-warning') }}
+          </div>
+          <div class="text-xs text-[hsl(var(--foreground-secondary))] font-mono">
+            --el-color-danger: {{ getCssVariableValue('--el-color-danger') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/views/demo-case/container/index.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Container 布局容器
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-regular))]">
+        用于布局的容器组件，方便快速搭建页面的基本结构
+      </p>
+    </div>
+
+    <!-- 区域1：Header + Main -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-[var(--el-color-primary)] pl-3">
+        Header + Main 布局
+      </h3>
+      <div
+        class="bg-primary-50 rounded-md overflow-hidden cursor-pointer transition-all hover:shadow-md"
+      >
+        <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+          Header
+        </div>
+        <div class="bg-primary-50 p-12 text-center text-sm text-[hsl(var(--foreground))]">
+          Main
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域2：Header + Main + Footer -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-[var(--el-color-primary)] pl-3">
+        Header + Main + Footer 布局
+      </h3>
+      <div
+        class="bg-primary-50 rounded-md overflow-hidden cursor-pointer transition-all hover:shadow-md"
+      >
+        <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+          Header
+        </div>
+        <div class="bg-primary-50 p-12 text-center text-sm text-[hsl(var(--foreground))]">
+          Main
+        </div>
+        <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+          Footer
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域3：Aside + Main + Aside（三栏布局） -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-[var(--el-color-primary)] pl-3">
+        Aside + Main + Aside 三栏布局
+      </h3>
+      <div
+        class="bg-primary-50 rounded-md overflow-hidden cursor-pointer transition-all hover:shadow-md"
+      >
+        <div class="flex">
+          <div class="bg-primary-100 p-16 text-center text-sm text-[hsl(var(--foreground))] font-medium w-[20%]">
+            Aside
+          </div>
+          <div class="bg-primary-50 p-16 text-center text-sm text-[hsl(var(--foreground))] flex-1">
+            Main
+          </div>
+          <div class="bg-primary-100 p-16 text-center text-sm text-[hsl(var(--foreground))] font-medium w-[20%]">
+            Aside
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域4：Header + Aside + Main（布局） -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-[var(--el-color-primary)] pl-3">
+        Header + Aside + Main 两栏布局
+      </h3>
+      <div
+        class="bg-primary-50 rounded-md overflow-hidden cursor-pointer transition-all hover:shadow-md"
+      >
+        <div class="w-full">
+          <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+            Header
+          </div>
+          <div class="flex">
+            <div class="bg-primary-100 p-16 text-center text-sm text-[hsl(var(--foreground))] font-medium w-[20%]">
+              Aside
+            </div>
+            <div class="bg-primary-50 p-16 text-center text-sm text-[hsl(var(--foreground))] flex-[2]">
+              Main
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域5：Header + Aside + Main + Footer（布局） -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-[var(--el-color-primary)] pl-3">
+        Header + Aside + Main + Footer 布局
+      </h3>
+      <div
+        class="bg-primary-50 rounded-md overflow-hidden cursor-pointer transition-all hover:shadow-md"
+      >
+        <div class="w-full">
+          <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+            Header
+          </div>
+          <div class="flex">
+            <div class="w-[20%] bg-primary-100 p-14 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+              Aside
+            </div>
+            <div class="flex-1">
+              <div class="bg-primary-50 p-10 text-center text-sm text-[hsl(var(--foreground))] flex-[2]">
+                Main
+              </div>
+              <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+                Footer
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域6：Aside + Header + Main（两栏布局） -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-[var(--el-color-primary)] pl-3">
+        Header + Aside + Main 两栏布局
+      </h3>
+      <div
+        class="bg-primary-50 rounded-md overflow-hidden cursor-pointer transition-all hover:shadow-md"
+      >
+        <div class="flex">
+          <div class="bg-primary-100 p-16 text-center text-sm text-[hsl(var(--foreground))] font-medium w-[20%]">
+            Aside
+          </div>
+          <div class="flex-1 flex flex-col">
+            <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+              Header
+            </div>
+            <div class="bg-primary-50 p-12 text-center text-sm text-[hsl(var(--foreground))] flex-1">
+              Main
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域7：Header + Aside + Main + Footer（完整布局） -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-[var(--el-color-primary)] pl-3">
+        Aside + Header + Main + Footer 完整布局
+      </h3>
+      <div
+        class="bg-primary-50 rounded-md overflow-hidden cursor-pointer transition-all hover:shadow-md"
+      >
+        <div class="w-full flex">
+          <div class="bg-primary-100 p-16 text-center text-sm text-[hsl(var(--foreground))] font-medium w-[20%]">
+            Aside
+          </div>
+          <div class="flex flex-col flex-1">
+            <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+              Header
+            </div>
+            <div class="bg-primary-50 p-10 text-center text-sm text-[hsl(var(--foreground))] flex-[2]">
+              Main
+            </div>
+            <div class="bg-primary-200 p-3 text-center text-sm text-[hsl(var(--foreground))] font-medium">
+              Footer
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域8：响应式布局说明 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-[var(--el-color-primary)] pl-3">
+        布局说明
+      </h3>
+      <div class="text-sm text-[hsl(var(--foreground-regular))] space-y-2">
+        <p>• <strong>Header</strong>：页面头部区域，通常用于放置导航栏、标题等内容</p>
+        <p>• <strong>Main</strong>：主体内容区域，占据页面主要空间</p>
+        <p>• <strong>Aside</strong>：侧边栏区域，通常用于放置菜单、辅助信息等</p>
+        <p>• <strong>Footer</strong>：页面底部区域，通常用于放置版权信息、友情链接等</p>
+      </div>
+    </div>
+  </div>
+</template>