From cb8259bd5e21f53263b1f7de2a55f4bcabe166bb Mon Sep 17 00:00:00 2001 From: ice breaker <1324318532@qq.com> Date: Mon, 15 Jul 2024 00:01:07 +0800 Subject: [PATCH] feat: commit codes --- apps/shell-vue-app/package.json | 3 + apps/shell-vue-app/postcss.config.js | 6 ++ apps/shell-vue-app/src/App.vue | 42 +++++++++++++- apps/shell-vue-app/src/style.css | 82 ++------------------------- apps/shell-vue-app/tailwind.config.js | 11 ++++ apps/vue-app/package.json | 4 +- apps/vue-app/vite.config.ts | 4 +- apps/vue2-app/package.json | 2 +- apps/vue2-app/tailwind.config.js | 4 +- apps/vue2-app/vite.config.ts | 4 +- eslint.config.js | 4 +- pnpm-lock.yaml | 11 ++++ 12 files changed, 87 insertions(+), 90 deletions(-) create mode 100644 apps/shell-vue-app/postcss.config.js create mode 100644 apps/shell-vue-app/tailwind.config.js diff --git a/apps/shell-vue-app/package.json b/apps/shell-vue-app/package.json index 44dc83b..263345a 100644 --- a/apps/shell-vue-app/package.json +++ b/apps/shell-vue-app/package.json @@ -14,6 +14,9 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", + "autoprefixer": "^10.4.19", + "postcss": "^8.4.39", + "tailwindcss": "^3.4.4", "typescript": "^5.2.2", "vite": "^5.3.1", "vue-tsc": "^2.0.26" diff --git a/apps/shell-vue-app/postcss.config.js b/apps/shell-vue-app/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/apps/shell-vue-app/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/apps/shell-vue-app/src/App.vue b/apps/shell-vue-app/src/App.vue index ca5382b..eab0bc8 100644 --- a/apps/shell-vue-app/src/App.vue +++ b/apps/shell-vue-app/src/App.vue @@ -1,11 +1,47 @@ <script setup lang="ts"> +import { reactive } from 'vue' + +const apps = reactive([ + { + name: 'vue3', + url: '//localhost:8001/', + visible: true + }, + { + name: 'vue2', + url: '//localhost:8002/', + visible: false + } +]) + +function createContext() { + + const windowMap = new Map() + + return { + + } +} + +function showApp(index: number) { + apps.forEach((x, idx) => { + x.visible = index === idx + }) +} </script> <template> - <div> - <WujieVue width="100%" height="100%" name="aaa" url="//localhost:9000/" :sync="true"></WujieVue> - <WujieVue width="100%" height="100%" name="bbb" url="//localhost:3000/" :sync="true"></WujieVue> + <div class="flex"> + <div class="w-72 border-r flex flex-col min-h-screen"> + <button @click="showApp(0)">切换到 Vue3 项目</button> + <button @click="showApp(1)">切换到 Vue2 项目</button> + </div> + <div class="grow"> + <WujieVue v-show="app.visible" :key="app.name" v-for="app in apps" width="100%" height="100%" :name="app.name" + :url="app.url" :sync="true"></WujieVue> + </div> + </div> </template> diff --git a/apps/shell-vue-app/src/style.css b/apps/shell-vue-app/src/style.css index bb131d6..b0895f8 100644 --- a/apps/shell-vue-app/src/style.css +++ b/apps/shell-vue-app/src/style.css @@ -1,79 +1,7 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; +@tailwind base; +@tailwind components; +@tailwind utilities; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } +html { + @apply bg-slate-900 text-white; } diff --git a/apps/shell-vue-app/tailwind.config.js b/apps/shell-vue-app/tailwind.config.js new file mode 100644 index 0000000..146cfe5 --- /dev/null +++ b/apps/shell-vue-app/tailwind.config.js @@ -0,0 +1,11 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + './index.html', + './src/**/*.{vue,js,ts,jsx,tsx}', + ], + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/apps/vue-app/package.json b/apps/vue-app/package.json index 052c287..99b81d0 100644 --- a/apps/vue-app/package.json +++ b/apps/vue-app/package.json @@ -1,8 +1,8 @@ { "name": "vue-app", - "private": true, - "version": "0.0.0", "type": "module", + "version": "0.0.0", + "private": true, "scripts": { "dev": "vite", "build": "vue-tsc -b && vite build", diff --git a/apps/vue-app/vite.config.ts b/apps/vue-app/vite.config.ts index 52b48d9..0c7cf4a 100644 --- a/apps/vue-app/vite.config.ts +++ b/apps/vue-app/vite.config.ts @@ -5,6 +5,6 @@ import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { - port: 8083 - } + port: 8001, + }, }) diff --git a/apps/vue2-app/package.json b/apps/vue2-app/package.json index a09f6db..a980790 100644 --- a/apps/vue2-app/package.json +++ b/apps/vue2-app/package.json @@ -25,4 +25,4 @@ "vite": "^5.3.3", "vue-tsc": "^2.0.26" } -} \ No newline at end of file +} diff --git a/apps/vue2-app/tailwind.config.js b/apps/vue2-app/tailwind.config.js index 2c057d7..c1da0e5 100644 --- a/apps/vue2-app/tailwind.config.js +++ b/apps/vue2-app/tailwind.config.js @@ -2,7 +2,7 @@ export default { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { - extend: {} + extend: {}, }, - plugins: [] + plugins: [], } diff --git a/apps/vue2-app/vite.config.ts b/apps/vue2-app/vite.config.ts index baaa102..5283c16 100644 --- a/apps/vue2-app/vite.config.ts +++ b/apps/vue2-app/vite.config.ts @@ -5,6 +5,6 @@ import vue from '@vitejs/plugin-vue2' export default defineConfig({ plugins: [vue()], server: { - port: 8084 - } + port: 8002, + }, }) diff --git a/eslint.config.js b/eslint.config.js index e030491..4411cc6 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,7 +1,9 @@ import { icebreaker } from '@icebreakers/eslint-config' export default icebreaker( - {}, + { + vue: true, + }, { ignores: ['**/fixtures/**'], }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6471dbe..bdcda87 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -93,6 +93,15 @@ importers: '@vitejs/plugin-vue': specifier: ^5.0.5 version: 5.0.5(vite@5.3.3(@types/node@20.14.10)(sass@1.77.8))(vue@3.4.31(typescript@5.5.3)) + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.39) + postcss: + specifier: ^8.4.39 + version: 8.4.39 + tailwindcss: + specifier: ^3.4.4 + version: 3.4.4(ts-node@10.9.2(@types/node@20.14.10)(typescript@5.5.3)) typescript: specifier: ^5.2.2 version: 5.5.3 @@ -2713,6 +2722,7 @@ packages: glob@8.1.0: resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} engines: {node: '>=12'} + deprecated: Glob versions prior to v9 are no longer supported global-directory@4.0.1: resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==} @@ -2857,6 +2867,7 @@ packages: inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} + deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}