颜色定义加入样式页

src/components/devStyle/components/constStyle.vue

+<script setup>
+import { ElSpace, ElButton } from 'element-plus';
+import "@/styles/main.css"
+import { copyToClipboardThenTip } from '@/utils/systemUtils'
+
+const colors = [
+    { title: "黑色90% / 主标题文字颜色", name: "--text-primary-90-color" },
+    { title: "黑色80% / 小标题文字颜色", name: "--text-primary-80-color" },
+    { title: "黑色65% / 正文颜色", name: "--text-primary-65-color" },
+    { title: "黑色50%", name: "--text-primary-50-color" },
+    { title: "黑色10%", name: "--bg-black-10" },
+    { title: "黑色5% / 分割线颜色", name: "--bg-black-5" },
+    { title: "黑色2% / 灰色背景色", name: "--bg-black-2" },
+    { title: "白色主色", name: "--bg-white-100" },
+    { title: "主色", name: "--color-primary-100" },
+]
+function copyColorVar(item) {
+    const color = `var(${item.name})`
+    copyToClipboardThenTip(color)
+}
+</script>
+
+<template>
+    <el-space direction="vertical" alignment="flex-start">
+        <div class="text-title-2">颜色</div>
+        <el-space>
+            <el-button v-for="(item, index) in colors" :key="index" :color="`var(${item.name})`"
+                v-on:click="copyColorVar(item)">
+                {{ item.title }}
+            </el-button>
+        </el-space>
+    </el-space>
+</template>
+
+<style scoped></style>
\ No newline at end of file

src/components/devStyle/components/index.vue

 <script setup lang="ts">
 import "@/styles/container.scss"
 import TextStyle from './textStyle.vue';
-import { ElScrollbar } from "element-plus";
+import ConstStyle from './constStyle.vue';
+import { ElScrollbar, ElSpace } from "element-plus";
 
 </script>
 
 <template>
     <el-scrollbar>
         <div class="common-page">
-            <text-style></text-style>
+            <el-space direction="vertical" alignment="flex-start">
+                <div class="text-title-0-show">开发样式</div>
+                <div class="text-title-1-show">样式变量</div>
+                <const-style></const-style>
+                <div class="text-title-1-show">文字样式</div>
+                <text-style></text-style>
+            </el-space>
         </div>
     </el-scrollbar>
 </template>
\ No newline at end of file

src/components/devStyle/components/textStyle.vue

 <template>
-    <div>
-        <div class="text-title-1-show">文字样式</div>
-        <table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;margin-top: 10px;">
-            <!-- 表头 -->
-            <thead>
-                <tr>
-                    <th> 名称</th>
-                    <th> 类型名称</th>
-                    <th> 操作</th>
+    <table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;">
+        <!-- 表头 -->
+        <thead>
+            <tr class="text-title-2">
+                <th> 名称</th>
+                <th> 类型名称</th>
+                <th> 操作</th>
+            </tr>
+        </thead>
+
+        <!-- 表格内容 -->
+        <tbody>
+            <template v-for="(row, index) in tableData" :key="index">
+                <!-- 隔行变色效果 -->
+                <tr :style="{
+                    height: '60px',
+                    backgroundColor: index % 2 === 1 ? '#fafafa' : 'transparent'
+                }">
+                    <!-- 名称列 -->
+                    <td style="padding: 12px; border: 1px solid #ebeef5;">
+                        <div :class="row.className">
+                            {{ row.name }}
+                        </div>
+                    </td>
+
+                    <!-- 类型名称列（带复制功能） -->
+                    <td style="padding: 12px; border: 1px solid #ebeef5;">
+                        <div @click="copyToClipboardThenTip(row.className)" style="cursor: pointer;">
+                            <span>{{ row.className }}</span>
+                        </div>
+                    </td>
+
+                    <!-- 操作列 -->
+                    <td style="padding: 12px; border: 1px solid #ebeef5; text-align: center;">
+                        <el-button type="primary" link @click="copyToClipboardThenTip(row.className)">
+                            <el-icon>
+                                <DocumentCopy />
+                            </el-icon>
+                            复制
+                        </el-button>
+                    </td>
                 </tr>
-            </thead>
-
-            <!-- 表格内容 -->
-            <tbody>
-                <template v-for="(row, index) in tableData" :key="index">
-                    <!-- 隔行变色效果 -->
-                    <tr :style="{
-                        height: '60px',
-                        backgroundColor: index % 2 === 1 ? '#fafafa' : 'transparent'
-                    }">
-                        <!-- 名称列 -->
-                        <td style="padding: 12px; border: 1px solid #ebeef5;">
-                            <div :class="row.className">
-                                {{ row.name }}
-                            </div>
-                        </td>
-
-                        <!-- 类型名称列（带复制功能） -->
-                        <td style="padding: 12px; border: 1px solid #ebeef5;">
-                            <div @click="copyClassName(row.className)" style="cursor: pointer;">
-                                <span>{{ row.className }}</span>
-                            </div>
-                        </td>
-
-                        <!-- 操作列 -->
-                        <td style="padding: 12px; border: 1px solid #ebeef5; text-align: center;">
-                            <el-button type="primary" link @click="copyClassName(row.className)">
-                                <el-icon>
-                                    <DocumentCopy />
-                                </el-icon>
-                                复制
-                            </el-button>
-                        </td>
-                    </tr>
-                </template>
-            </tbody>
-        </table>
-    </div>
+            </template>
+        </tbody>
+    </table>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { ElMessage, } from 'element-plus'
 import { DocumentCopy } from '@element-plus/icons-vue'
 import "@/styles/common.scss"
-import { copyToClipboard } from '@/utils/systemUtils'
+import { copyToClipboardThenTip } from '@/utils/systemUtils'
 
 // 表格数据
 const tableData = ref([
@@ -88,18 +84,6 @@ const tableData = ref([
 
     { name: '3级提示文字', className: 'text-tip-3' },
 ])
-
-
-// 复制类型名称到剪贴板
-const copyClassName = async (className) => {
-    const { status, message } = await copyToClipboard(className)
-    if (status) {
-        ElMessage.success(message)
-    } else {
-        ElMessage.error(message)
-    }
-}
-
 </script>
 
 <style scoped></style>
\ No newline at end of file

src/router/modules/company.js

 //企业主页
-const companyPages = () => import('@/views/companyPages/index.vue')
+
+const companyPages = () => import('@/views/companyPages2/index.vue')
+
 
 const companyPagesRoutes = [
   // 智库系统的主要路由
@@ -9,7 +11,7 @@ const companyPagesRoutes = [
     component: companyPages,
     meta: {
       title: "企业主页",
-      dynamicTitle: true 
+      dynamicTitle: true
     }
   },
 

src/router/modules/devStyle.js

 //样式主页
-import stylePages from "@/components/devStyle/components/index.vue";
+const StylePages = () => import("@/components/devStyle/components/index.vue");
 
 const stylePagesRoutes = [
     // 智库系统的主要路由
     {
         path: "/devStylePages",
         name: "devStylePages",
-        component: stylePages,
+        component: StylePages,
         meta: {
             title: "开发样式",
             dynamicTitle: true

src/styles/descriptions.scss

@@ -2,8 +2,10 @@
 
 /***没有nav下划线***/
 .common-descriptions  .el-descriptions__label{
-    @extend .text-header;
+    @extend .text-tip-1-bold;
 }
 .common-descriptions .el-descriptions__content{
-    @extend .text-base
+    @extend .text-tip-1;
+    color: var(--text-primary-80-color);
+    
 }
\ No newline at end of file

src/utils/systemUtils.ts

+import { ElMessage } from "element-plus";
+
 interface BaseReturn {
 	status: boolean;
 	message: string;
@@ -26,3 +28,13 @@ export async function copyToClipboard(txet: string): Promise<BaseReturn> {
 		return { status: false, message: "复制失败，请手动复制" };
 	}
 }
+
+// 复制类型名称到剪贴板
+export async function copyToClipboardThenTip(text: string): Promise<void> {
+	const { status, message } = await copyToClipboard(text);
+	if (status) {
+		ElMessage.success(message);
+	} else {
+		ElMessage.error(message);
+	}
+}