rebase1

package.json

@@ -43,7 +43,7 @@
     "postcss-url": "^10.1.3",
     "postcss-viewport-units": "^0.1.6",
     "postcss-write-svg": "^3.0.1",
-    "tailwindcss": "^4.0.12",
+    "tailwindcss": "^4.1.4",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "ws": "^8.18.1"

src/assets/styles/element.scss

@@ -1,10 +1,12 @@
 :root {
-  --el-font-size-base: 14px;
-  --el-button-size: 30px;
+  // --el-font-size-base: 50px;
+  // --el-button-size: 80px;
 
-  --el-color-primary:  #1989FA;
+
+
+  // --el-color-primary:  #26509C;
   //--el-button-active-bg-color: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);
-  //--text-color-primary: #17213c;
+  --text-color-primary: #17213c;
   //--el-color-success: rgba(88, 162, 95, 1);
   //--text-color-info: #838b99;
   //--el-input-border: #dae0f2;

src/assets/styles/tailwind.css

@@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+	.btn-dark {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: var(--primaryColor);
+		border: solid 1px var(--primaryColor);
+		border-radius: 4px;
+		color: white;
+	}
+	.btn-light {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: transparent;
+		border-radius: 4px;
+		color: var(--primaryColor);
+		border: solid 1px var(--primaryColor);
+	}
+	.btn-light:active {
+		background-color: #e5e5e5;
+	}
+	.btn-light-disabled {
+		color: #d6d6d6;
+		border: solid 1px #d6d6d6;
+	}
+	.component-page {
+		height: calc(100vh - var(--headerHeight) - var(--footerHeight));
+		width: calc(100vw - var(--menuAreaWidth));
+		background-color: #fff;
+	}
+}

src/main.ts

@@ -10,6 +10,7 @@ import { createApp } from 'vue'
 import App from './app.vue'
 import router from './router'
 import 'element-plus/dist/index.css'
+import 'assets/styles/main.scss'
 
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/views/craft/index.vue

@@ -1,11 +1,23 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+const onAddCraft = () => {
 
+}
+
+const onEditCraft = () => {
+
+}
+
+const onDelCraft = () => {
+
+}
 </script>
 
 <template>
-  <div>工艺</div>
+  <div class="component-page">
+    <section class="flex items-center h-20 gap-3 pl-3">
+      <el-button type="primary" @click="onAddCraft">添加工艺</el-button>
+      <el-button type="primary" @click="onEditCraft">编辑工艺</el-button>
+      <el-button type="primary" @click="onDelCraft">编辑工艺</el-button>
+    </section>
+  </div>
 </template>
-
-<style scoped lang="scss">
-
-</style>