颜色定义加入样式页

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">
+            <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;">
+    <table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;">
         <!-- 表头 -->
         <thead>
-                <tr>
+            <tr class="text-title-2">
                 <th> 名称</th>
                 <th> 类型名称</th>
                 <th> 操作</th>
@@ -28,14 +26,14 @@
 
                     <!-- 类型名称列（带复制功能） -->
                     <td style="padding: 12px; border: 1px solid #ebeef5;">
-                            <div @click="copyClassName(row.className)" style="cursor: pointer;">
+                        <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="copyClassName(row.className)">
+                        <el-button type="primary" link @click="copyToClipboardThenTip(row.className)">
                             <el-icon>
                                 <DocumentCopy />
                             </el-icon>
@@ -46,15 +44,13 @@
             </template>
         </tbody>
     </table>
-    </div>
 </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 = [
   // 智库系统的主要路由

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);
+	}
+}