ci: add UI ant design vue and ci

.env.development

@@ -0,0 +1,2 @@
+# .env.development
+VITE_BASE_URL=/dev

.env.production

@@ -0,0 +1,2 @@
+# .env.production
+VITE_BASE_URL=/prod

components.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+  }
+}

package.json

@@ -10,6 +10,8 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "ant-design-vue": "^4.2.3",
     "js-cookie": "^3.0.5",
     "vue": "^3.4.37"
   },
@@ -30,6 +32,7 @@
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.1.0",
+    "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.1",
     "vue-tsc": "^2.0.29"
   }

src/App.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
+
+console.log(import.meta.env.VITE_APP_TITLE);
+
 </script>
 
 <template>

src/components/HelloWorld.vue

@@ -1,44 +1,47 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { h, ref } from 'vue'
+import {
+  Space,
+  Button,
+  Popconfirm
+} from 'ant-design-vue'
+import {
+  SettingOutlined,
+  SettingFilled,
+  createFromIconfontCN
+} from '@ant-design/icons-vue';
+
+const IconFont = createFromIconfontCN({
+  // symbol 引用
+  // https://www.iconfont.cn/help/detail?helptype=code
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+})
 
 defineProps<{ msg: string }>()
 
 const count = ref(0)
 </script>
 
 <template>
-  <div class="text-red-500 bg-blue-500">
-    Test
-  </div>
-  <h1>{{ msg }}</h1>
+
+  <Space class="bg-slate-300">
+    Space
+    <Button type="primary" loading>测试按钮</Button>
+    <Button danger ghost :icon="h(SettingOutlined)">Danger</Button>
+    <Popconfirm title="Are you sure delete this task?">
+      <Button type="dashed" :icon="h(SettingFilled)">Confirm</Button>
+    </Popconfirm>
+    <IconFont type="icon-twitter" class="red" />
+  </Space>
 
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
+  <div class="custom-card">
+    Tailwind css 自定义组件样式
   </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+  <h1>{{ msg }}</h1>
 </template>
 
-<style scoped>
-.read-the-docs {
-  color: #888;
+<style scoped lang="scss">
+:deep(.red) {
+  @apply text-red-600;
 }
 </style>

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import 'ant-design-vue/dist/reset.css'
 import './styles/main.css'
 import App from './App.vue'
 

src/styles/main.css

@@ -1,10 +1,36 @@
 @import "tailwindcss/base";
-@import "./base-styles.css";
+@import "./tailwind/base.css";
 
 @import "tailwindcss/components";
-@import "./custom-components.css";
+@import "./tailwind/components.css";
 
 @import "tailwindcss/utilities";
-@import "./custom-utilities.css";
+@import "./tailwind/utilities.css";
 
-@import "./demo.css";
+@import "./sass/_main.scss";
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.anticon {
+  svg {
+    vertical-align: unset;
+  }
+}

src/styles/sass/_main.scss

@@ -0,0 +1,4 @@
+@use 'scrollbar';
+@use 'transition';
+
+

src/styles/sass/_scrollbar.scss

@@ -0,0 +1,35 @@
+/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+  width: 8px; /*对垂直流动条有效*/
+  height: 8px; /*对水平流动条有效*/
+}
+
+/*定义滚动条的轨道颜色、内阴影及圆角*/
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px #c3cad5;
+  background-color: #f0f2f5;
+  border-radius: 3px;
+}
+
+/*定义滑块颜色、内阴影及圆角*/
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 5px #c2cad6;
+  border-radius: 7px;
+  background-color: #b3bdcc;
+  box-shadow: inset 0 0 5px #c2cad6;
+
+  &:hover {
+    background-color: #c3cad5
+  }
+}
+
+/*定义两端按钮的样式*/
+::-webkit-scrollbar-button {
+  background-color: #eef0f3;
+  visibility: hidden;
+}
+
+/*定义右下角汇合处的样式*/
+::-webkit-scrollbar-corner {
+  background: #f0f2f5;
+}

src/styles/sass/_transition.scss

@@ -0,0 +1,13 @@
+// global transition css
+
+/* fade */
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

src/styles/tailwind/base.css

@@ -0,0 +1,3 @@
+@layer base {
+
+}

src/styles/tailwind/components.css

@@ -0,0 +1,5 @@
+@layer components {
+  .custom-card {
+    @apply flex shrink-0 mx-auto p-4 text-orange-700;
+  }
+}

src/styles/custom-utilities.css.css → src/styles/tailwind/utilities.css

@@ -2,8 +2,4 @@
   .content-auto {
     content-visibility: auto;
   }
-
-  .filter-none {
-    filter: none;
-  }
 }

src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />