diff --git a/bun.lock b/bun.lock index a6d3386..51f5aee 100644 --- a/bun.lock +++ b/bun.lock @@ -25,6 +25,8 @@ "vue-router": "^4.5.1", }, "devDependencies": { + "@iconify-json/material-symbols": "^1.2.55", + "@iconify/tailwind4": "^1.2.1", "@tailwindcss/vite": "^4.1.11", "@types/node": "^24.1.0", "@vitejs/plugin-vue": "^6.0.0", @@ -106,6 +108,8 @@ "@ctrl/tinycolor": ["@ctrl/tinycolor@3.6.1", "", {}, "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="], + "@cyberalien/svg-utils": ["@cyberalien/svg-utils@1.1.4", "", { "dependencies": { "@iconify/types": "^2.0.0" } }, "sha512-LlBw+9nsQPMO1QNJMuJSgXGWK1/r4D0PohTK0Uq1ehyGE420Qxq4+LVYkA9W0xkrNOCVYvRegbSy5By4f30W7w=="], + "@docsearch/css": ["@docsearch/css@4.5.3", "", {}, "sha512-kUpHaxn0AgI3LQfyzTYkNUuaFY4uEz/Ym9/N/FvyDE+PzSgZsCyDH9jE49B6N6f1eLCm9Yp64J9wENd6vypdxA=="], "@docsearch/js": ["@docsearch/js@4.5.3", "", {}, "sha512-rcBiUMCXbZLqrLIT6F6FDcrG/tyvM2WM0zum6NPbIiQNDQxbSgmNc+/bToS0rxBsXaxiU64esiWoS02WqrWLsg=="], @@ -200,10 +204,16 @@ "@iconify-json/logos": ["@iconify-json/logos@1.2.10", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-qxaXKJ6fu8jzTMPQdHtNxlfx6tBQ0jXRbHZIYy5Ilh8Lx9US9FsAdzZWUR8MXV8PnWTKGDFO4ZZee9VwerCyMA=="], + "@iconify-json/material-symbols": ["@iconify-json/material-symbols@1.2.55", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-9EHfqSpzXxQb5neA5/n5GcF15rccKG+oBJDwh/s8mmxfYswY1A4dKYPOWXCqrWMe/J3CmHb0tXFloscVarrqkQ=="], + "@iconify-json/simple-icons": ["@iconify-json/simple-icons@1.2.68", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-bQPl1zuZlX6AnofreA1v7J+hoPncrFMppqGboe/SH54jZO37meiBUGBqNOxEpc0HKfZGxJaVVJwZd4gdMYu3hw=="], "@iconify-json/vscode-icons": ["@iconify-json/vscode-icons@1.2.40", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-Q7JIWAxENwmcRg4EGRY+u16gBwrAj6mWeuSmuyuPvNvoTJHh8Ss8qoeDhrFYNgtWqNkzH5hSf4b2T9XLK5MsrA=="], + "@iconify/tailwind4": ["@iconify/tailwind4@1.2.1", "", { "dependencies": { "@iconify/tools": "^5.0.2", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.0" }, "peerDependencies": { "tailwindcss": ">= 4.0.0" } }, "sha512-Hd7k8y7uzT3hk8ltw0jGku0r0wA8sc3d2iMvVTYv/9tMxBb+frZtWZGD9hDMU3EYuE+lMn58wi2lS8R2ZbwFcQ=="], + + "@iconify/tools": ["@iconify/tools@5.0.3", "", { "dependencies": { "@cyberalien/svg-utils": "^1.1.1", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.0", "fflate": "^0.8.2", "modern-tar": "^0.7.3", "pathe": "^2.0.3", "svgo": "^4.0.0" } }, "sha512-W5nbH5fNv20TvU49Al19Foos/ViAnmppbCNV9ieGl6/dRMDRzxeFol6peXX/NAgaOytQwZZxTTJRq/Kxd4eWsA=="], + "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="], "@iconify/utils": ["@iconify/utils@3.1.0", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "mlly": "^1.8.0" } }, "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw=="], @@ -518,6 +528,8 @@ "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="], + "commander": ["commander@11.1.0", "", {}, "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="], + "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="], "confbox": ["confbox@0.2.2", "", {}, "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ=="], @@ -528,8 +540,16 @@ "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], + "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="], + + "css-tree": ["css-tree@3.1.0", "", { "dependencies": { "mdn-data": "2.12.2", "source-map-js": "^1.0.1" } }, "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w=="], + + "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="], + "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="], + "csso": ["csso@5.0.5", "", { "dependencies": { "css-tree": "~2.2.0" } }, "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="], + "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="], "daisyui": ["daisyui@5.1.10", "", {}, "sha512-p1J/HME2WmaSiy6u2alIbeP3gd5PNVft3+6Bdll0BRSm/UdI4084+pD01LxFug/5wGexNewWqbcEL6nB2n2o+Q=="], @@ -568,6 +588,14 @@ "doctrine": ["doctrine@2.1.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="], + "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="], + + "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="], + + "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="], + + "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="], + "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="], "echarts": ["echarts@6.0.0", "", { "dependencies": { "tslib": "2.3.0", "zrender": "6.0.0" } }, "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ=="], @@ -640,6 +668,8 @@ "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="], + "fflate": ["fflate@0.8.2", "", {}, "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="], + "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="], "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="], @@ -850,6 +880,8 @@ "mdast-util-to-hast": ["mdast-util-to-hast@13.2.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA=="], + "mdn-data": ["mdn-data@2.12.2", "", {}, "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="], + "memoize-one": ["memoize-one@6.0.0", "", {}, "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="], "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="], @@ -884,6 +916,8 @@ "mlly": ["mlly@1.8.0", "", { "dependencies": { "acorn": "^8.15.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.1" } }, "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g=="], + "modern-tar": ["modern-tar@0.7.3", "", {}, "sha512-4W79zekKGyYU4JXVmB78DOscMFaJth2gGhgfTl2alWE4rNe3nf4N2pqenQ0rEtIewrnD79M687Ouba3YGTLOvg=="], + "motion-dom": ["motion-dom@12.23.12", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw=="], "motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="], @@ -1018,6 +1052,8 @@ "safe-regex-test": ["safe-regex-test@1.1.0", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-regex": "^1.2.1" } }, "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw=="], + "sax": ["sax@1.4.4", "", {}, "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw=="], + "scule": ["scule@1.3.0", "", {}, "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="], "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="], @@ -1072,6 +1108,8 @@ "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="], + "svgo": ["svgo@4.0.0", "", { "dependencies": { "commander": "^11.1.0", "css-select": "^5.1.0", "css-tree": "^3.0.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.1.1", "sax": "^1.4.1" }, "bin": "./bin/svgo.js" }, "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw=="], + "tabbable": ["tabbable@6.4.0", "", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="], "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="], @@ -1224,6 +1262,8 @@ "aria-hidden/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="], + "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="], + "element-plus/@vueuse/core": ["@vueuse/core@10.11.1", "", { "dependencies": { "@types/web-bluetooth": "^0.0.20", "@vueuse/metadata": "10.11.1", "@vueuse/shared": "10.11.1", "vue-demi": ">=0.14.8" } }, "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww=="], "eslint-plugin-vue/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="], @@ -1284,6 +1324,8 @@ "@vue/language-core/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="], + "csso/css-tree/mdn-data": ["mdn-data@2.0.28", "", {}, "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="], + "element-plus/@vueuse/core/@types/web-bluetooth": ["@types/web-bluetooth@0.0.20", "", {}, "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="], "element-plus/@vueuse/core/@vueuse/metadata": ["@vueuse/metadata@10.11.1", "", {}, "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="], diff --git a/components.d.ts b/components.d.ts index 9750a76..75fc332 100644 --- a/components.d.ts +++ b/components.d.ts @@ -13,6 +13,7 @@ export {} declare module 'vue' { export interface GlobalComponents { AnimatePresence: typeof import('motion-v')['AnimatePresence'] + AuthDialog: typeof import('./src/components/dialog/AuthDialog.vue')['default'] Button: typeof import('./src/components/ui/button/Button.vue')['default'] Calendar: typeof import('./src/components/ui/calendar/Calendar.vue')['default'] CalendarCell: typeof import('./src/components/ui/calendar/CalendarCell.vue')['default'] @@ -44,12 +45,14 @@ declare module 'vue' { PopoverTrigger: typeof import('./src/components/ui/popover/PopoverTrigger.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + UserAuthNavButton: typeof import('./src/components/button/UserAuthNavButton.vue')['default'] } } // For TSX support declare global { const AnimatePresence: typeof import('motion-v')['AnimatePresence'] + const AuthDialog: typeof import('./src/components/dialog/AuthDialog.vue')['default'] const Button: typeof import('./src/components/ui/button/Button.vue')['default'] const Calendar: typeof import('./src/components/ui/calendar/Calendar.vue')['default'] const CalendarCell: typeof import('./src/components/ui/calendar/CalendarCell.vue')['default'] @@ -81,4 +84,5 @@ declare global { const PopoverTrigger: typeof import('./src/components/ui/popover/PopoverTrigger.vue')['default'] const RouterLink: typeof import('vue-router')['RouterLink'] const RouterView: typeof import('vue-router')['RouterView'] + const UserAuthNavButton: typeof import('./src/components/button/UserAuthNavButton.vue')['default'] } \ No newline at end of file diff --git a/docs/cli-feature/icon.md b/docs/cli-feature/icon.md new file mode 100644 index 0000000..2a991f0 --- /dev/null +++ b/docs/cli-feature/icon.md @@ -0,0 +1,41 @@ +# 图标 + +## 使用图标 + +可以通过 tailwindcss 中的图标 class 来直接使用图标，例如 + +```html + +``` + +而你需要的图标可以在 [Iconify Material 图标库](https://icon-sets.iconify.design/material-symbols/) 中搜索。 + +通过点击图标库中的某个图标，你需要在详情栏中选择 CSS - Tailwind Css 栏，其中会告知你该图标对应的 class 名称。 + +## 调整图标 + +如果您需要调整颜色，您可以在 class 中添加 `text-` 来调整图标颜色，例如 + +```html + +``` + +如果您需要调整图标大小，您可以在 class 中添加 `text-` 来调整图标大小，例如 + +```html + +``` + +更多的调整方法可以参考 [Iconify 图标库调整](https://iconify.design/docs/usage/css/tailwind/tailwind4/size-color.html) + +## 需要更多图标 + +您可以在 [Iconify 图标库](https://icon-sets.iconify.design/) 中搜索更多图标。 + +我们为您预装的是 Material Symbols 图标库。如果您需要使用别的图标库，可以通过 `@iconify-json/{prefix}` 来 install，注意 {prefix} 的名称要改成中划线模式，例如您需要安装名为 Material Symbols Light 的图标库 + +```bash +bun add -D @iconify-json/material-symbols-light +``` + +更多的安装方法可以参考 [Iconify 图标库安装](https://iconify.design/docs/usage/css/tailwind/tailwind4/) diff --git a/package.json b/package.json index 11cf7f9..46a104d 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,8 @@ "vue-router": "^4.5.1" }, "devDependencies": { + "@iconify-json/material-symbols": "^1.2.55", + "@iconify/tailwind4": "^1.2.1", "@tailwindcss/vite": "^4.1.11", "@types/node": "^24.1.0", "@vitejs/plugin-vue": "^6.0.0", diff --git a/src/components/button/ChangeLanguageDropdownButton.vue b/src/components/button/ChangeLanguageDropdownButton.vue index 245e8ab..7fdd723 100644 --- a/src/components/button/ChangeLanguageDropdownButton.vue +++ b/src/components/button/ChangeLanguageDropdownButton.vue @@ -18,8 +18,6 @@ const onClickChangeLocal = (newLanguage: string) => { tabindex="0" role="button" class="btn btn-sm btn-ghost gap-1 px-1.5 font-bold" - aria-label="Language" - title="Change Language" > +import { renderAuthDialog } from "@/hooks/dialog/renderAuthDialog"; + +const dropdownVisible = ref(true); + +const closeDropdown = () => { + dropdownVisible.value = false; + setTimeout(() => { + dropdownVisible.value = true; + }, 300); +}; + + +
+
+ {{ $t("nav.login") }} +
+
    +
    +
    +

    现在加入!

    +

    登录我们的系统

    +
    + + +
    +
    +
    +
+ + + +
+

Hello!

+

Press ESC key or click outside to close

+
+
+ +
+ +
+ + + diff --git a/src/components/dialog/AuthDialog.vue b/src/components/dialog/AuthDialog.vue new file mode 100644 index 0000000..2044962 --- /dev/null +++ b/src/components/dialog/AuthDialog.vue @@ -0,0 +1,336 @@ + + + + + diff --git a/src/components/menu/NavBar.vue b/src/components/menu/NavBar.vue index dd252d3..2a4f6f2 100644 --- a/src/components/menu/NavBar.vue +++ b/src/components/menu/NavBar.vue @@ -5,6 +5,7 @@ import { useI18n } from "vue-i18n"; import { throttle } from "radash"; import { AnimatePresence, motion } from "motion-v"; import { navigateTo } from "@/utils/navigator"; +import UserAuthNavButton from "../button/UserAuthNavButton.vue"; const { t } = useI18n(); @@ -82,6 +83,7 @@ window.addEventListener("scroll", handleThrottleScroll);
+
diff --git a/src/hooks/dialog/renderAuthDialog.ts b/src/hooks/dialog/renderAuthDialog.ts new file mode 100644 index 0000000..7e69119 --- /dev/null +++ b/src/hooks/dialog/renderAuthDialog.ts @@ -0,0 +1,22 @@ +import AuthDialog from "@/components/dialog/AuthDialog.vue"; +import i18n from "@/i18n"; + +export const renderAuthDialog = (defaultAuthFormType: "login" | "register") => { + const authDialogContainer = document.createElement("div"); + authDialogContainer.id = "auth-dialog-container"; + + document.body.appendChild(authDialogContainer); + + createApp(AuthDialog, { + defaultAuthFormType, + }) + .use(i18n) + .mount(authDialogContainer); +}; + +export const closeAuthDialog = () => { + const authDialogContainer = document.getElementById("auth-dialog-container"); + if (authDialogContainer) { + authDialogContainer.remove(); + } +}; diff --git a/src/i18n/en_US.ts b/src/i18n/en_US.ts index 390abe5..f49828d 100644 --- a/src/i18n/en_US.ts +++ b/src/i18n/en_US.ts @@ -6,5 +6,18 @@ export const en_USMessages: messagesInterface = { about: "About", theme: "Theme", locale: "Locale", + login: "Login", + register: "Register", + }, + auth: { + login: "Login", + register: "Register", + email: "Email", + password: "Password", + remember_me: "Remember Me", + forget_password: "Forget Password", + no_account: "Don't have an account?", + agree_terms: "Agree to the Terms & Conditions", + have_account: "Already have an account?", }, }; diff --git a/src/i18n/index.ts b/src/i18n/index.ts index ad1944b..dc32e13 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -8,6 +8,19 @@ export interface messagesInterface { about: string; theme: string; locale: string; + login: string; + register: string; + }; + auth: { + login: string; + register: string; + email: string; + password: string; + remember_me: string; + forget_password: string; + no_account: string; + agree_terms: string; + have_account: string; }; } diff --git a/src/i18n/zh_CN.ts b/src/i18n/zh_CN.ts index d74bf14..e5d06aa 100644 --- a/src/i18n/zh_CN.ts +++ b/src/i18n/zh_CN.ts @@ -6,5 +6,18 @@ export const zh_CNMessages: messagesInterface = { about: "关于", theme: "主题", locale: "语言", + login: "登录", + register: "注册", + }, + auth: { + login: "登录", + register: "注册", + email: "邮箱", + password: "密码", + remember_me: "记住我", + forget_password: "忘记密码", + no_account: "没有账号？", + agree_terms: "同意条款和条件", + have_account: "已经有账号？", }, }; diff --git a/src/style.css b/src/style.css index 63bfbe7..fb4678f 100644 --- a/src/style.css +++ b/src/style.css @@ -1,5 +1,6 @@ @import "tailwindcss"; @import "tw-animate-css"; +@plugin "@iconify/tailwind4"; @custom-variant dark (&:is(.dark *)); @plugin "daisyui" {