feat:移动devStyle的组件目录到styles

src/router/modules/devStyle.js

 //样式主页
-const StylePages = () => import("@/components/devStyle/components/index.vue");
+const StylePages = () => import("@/styles/components/index.vue");
 
 const stylePagesRoutes = [
     // 智库系统的主要路由

src/styles/components/CommonPage/index.vue

+<script setup lang="ts">
+import { ElRow, ElCol } from 'element-plus';
+import '@/styles/common.scss'
+const span = 12
+</script>
+
+<template>
+    <el-row class="wrapper">
+        <el-col :span="span">
+            <pre>
+{{ `import '@/styles/common.scss';
+<template>
+    <div class="background-as-card"></div>
+</template>
+`}}
+</pre>
+            <div class="background-as-card">
+                <div v-for="item in [1, 2, 3, 4]" :key="item">
+                    {{ item }}
+                </div>
+            </div>
+        </el-col>
+    </el-row>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+    background-color: rgba(0, 0, 0, 0.068);
+    padding: 10px;
+}
+</style>
\ No newline at end of file

src/components/devStyle/components/index.vue → src/styles/components/index.vue

@@ -7,8 +7,11 @@
                 <ConstStyle />
                 <div class="text-title-1-show">文字样式</div>
                 <TextStyle />
-                <div class="text-title-1-show">通用组件</div>
+                <div class="text-title-1-show">通用样式/组件</div>
                 <el-tabs tabPosition="left">
+                    <el-tab-pane label="通用" lazy>
+                        <common-page />
+                    </el-tab-pane>
                     <el-tab-pane label="单选框" lazy>
                         <radio-page />
                     </el-tab-pane>
@@ -28,6 +31,7 @@ import ConstStyle from './constStyle.vue';
 import { ElTabs, ElTabPane, ElSpace } from "element-plus";
 import RadioPage from './RadioPage/index.vue';
 import TabsPage from './TabsPage/index.vue';
+import CommonPage from './CommonPage/index.vue';
 </script>
 
 <style lang="scss" scoped></style>
\ No newline at end of file