Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| v20.12.2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export const appName = '内容清单' | ||
| export const appDescription = '内容清单' | ||
|
|
||
| export const DEFAULT_FONT_SIZE = '15px' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,13 @@ | ||
| <script setup lang="ts"> | ||
| import { appName } from '~/constants' | ||
| </script> | ||
|
|
||
| <template> | ||
| <main class="px10 py20"> | ||
| <slot /> | ||
| <Footer /> | ||
| <div class="mx-auto mt5 text-center text-sm opacity-35"> | ||
| {{ appName }} [<a href="https://cms.im">CMS.IM</a>] @ {{ new Date().getFullYear() }} | ||
| </div> | ||
| </main> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,7 +3,10 @@ | |
| "type": "module", | ||
| "version": "0.0.0", | ||
| "private": true, | ||
| "packageManager": "[email protected]", | ||
| "engines": { | ||
| "node": "20.12.2" | ||
| }, | ||
| "scripts": { | ||
| "build": "nuxi build", | ||
| "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev", | ||
|
|
@@ -17,21 +20,21 @@ | |
| "release": "bumpp" | ||
| }, | ||
| "devDependencies": { | ||
| "@antfu/eslint-config": "2.14.0", | ||
| "@dxhuii/eslint-config": "^2.1.0", | ||
| "@iconify-json/carbon": "^1.1.31", | ||
| "@iconify-json/twemoji": "^1.1.15", | ||
| "@nuxtjs/color-mode": "^3.4.0", | ||
| "@pinia/nuxt": "^0.5.1", | ||
| "@unocss/eslint-config": "^0.59.2", | ||
| "@unocss/nuxt": "^0.59.3", | ||
| "@vite-pwa/nuxt": "^0.6.0", | ||
| "@vueuse/nuxt": "^10.9.0", | ||
| "bumpp": "^9.4.0", | ||
| "eslint": "^9.0.0", | ||
| "nuxt": "^3.11.2", | ||
| "pinia": "^2.1.7", | ||
| "typescript": "^5.4.5", | ||
| "vue-tsc": "^2.0.13" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,82 @@ | ||
| <script setup lang="ts"> | ||
| const list = [{ | ||
| title: '备忘清单', | ||
| href: 'https://quickref.cms.im/', | ||
| icon: 'i-twemoji:blue-book', | ||
| desc: '开发人员分享快速参考备忘清单', | ||
| target: '_blank' | ||
| }, | ||
| { | ||
| title: 'JS框架对比', | ||
| href: 'https://component-party.cms.im/', | ||
| icon: 'i-twemoji:party-popper', | ||
| desc: 'JavaScript框架语法特性对比', | ||
| target: '_blank' | ||
| }, | ||
| { | ||
| title: 'IT工具箱', | ||
| href: 'https://tools.cms.im/', | ||
| icon: 'i-twemoji:toolbox', | ||
| desc: '助力开发人员和 IT 工作者', | ||
| target: '_blank' | ||
| }, | ||
| { | ||
| title: 'NPM下载统计', | ||
| href: 'https://npm-stat.link/', | ||
| icon: 'i-twemoji-chart-increasing', | ||
| desc: '查看使用包的各个版本的NPM下载统计', | ||
| target: '_blank' | ||
| }, | ||
| { | ||
| title: 'RGB转十六进制', | ||
| href: '/rgb2hex', | ||
| icon: 'i-twemoji:currency-exchange', | ||
| desc: 'RGB颜色值与十六进制颜色码转换工具' | ||
| }, | ||
| { | ||
| title: '批量删除微博博文', | ||
| href: 'https://github.com/dxhuii/delWeibo', | ||
| icon: 'i-twemoji-delivery-truck', | ||
| desc: '批量删除新浪微博的小工具', | ||
| target: '_blank' | ||
| } | ||
| ] | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div flex="~ col" items-center> | ||
| <h1 text="2xl"> | ||
| 内容清单 <sup text="base" bg-card border-base top--3 border rounded px1 text-3 tracking-0.5 style="">CMS.IM</sup> | ||
| </h1> | ||
| <div mt-4 text="base gray-500"> | ||
| 收集一些有用的内容 | ||
| </div> | ||
| </div> | ||
| <h2 class="mt4 flex"> | ||
| 项目目录 | ||
| </h2> | ||
| <div class="grid grid-cols-1 mt4 gap4 sm:grid-cols-2 md:sm:grid-cols-4"> | ||
| <NuxtLink | ||
| v-for="item in list" :key="item.href" | ||
| :to="item.href" | ||
| class="rounded-md bg-gray-100 px4 py3 decoration-none transition-colors dark:bg-gray-50/10 hover:bg-gray-200 dark:hover:bg-gray-50/20" | ||
| :target="item.target" | ||
| > | ||
| <div class="h-full flex items-center justify-center"> | ||
| <div flex-1> | ||
| <div font-medium leading-relaxed> | ||
| {{ item.title }} | ||
| </div> | ||
| <div text-sm font-normal op-50> | ||
| {{ item.desc }} | ||
| </div> | ||
| </div> | ||
| <div ml-4 text-4xl op-75> | ||
| <div :class="item.icon" /> | ||
| </div> | ||
| </div> | ||
| </NuxtLink> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| <script setup> | ||
| import { appName } from '~/constants' | ||
| useHead({ | ||
| title: `RGB颜色值与十六进制颜色码转换工具 - ${appName}` | ||
| }) | ||
| const r2h = ref({ r: 255, g: 180, b: 0 }) | ||
| const hex = ref('#ffb400') | ||
| const h = ref('#cc00ff') | ||
| const rgb = ref([204, 0, 255]) | ||
| // ------- // | ||
| // rgb2hex // | ||
| // ------- // | ||
| // one liner to convert rgb color (provided as a string) to hex | ||
| // const rgb2hex = rgb => `#${rgb.replace(/[^0-9,]/g, "").split(",").map(n => (n|0).toString(16).padStart(2, '0')).join("")}`; | ||
| // straight from array | ||
| // const rgb2hexArr = rgb => `#${rgb.map(n => (n|0).toString(16).padStart(2, '0')).join("")}`; | ||
| // ------- // | ||
| // hex2rgb // | ||
| // ------- // | ||
| // one liner to convert hex color to rgb (as a string) | ||
| // const hex2rgb = hex => `rgb(${hex.replace("#", "").match(/../g).map(n => parseInt(n, 16)).join(", ")})`; | ||
| // to array | ||
| // const hex2rgbArr = hex => hex.replace("#", "").match(/../g).map(n => parseInt(n, 16)); | ||
| /** | ||
| * rgb转16进制 | ||
| */ | ||
| function rgb2hex() { | ||
| const { r, g, b } = r2h.value | ||
| const rgb = (r << 16) | (g << 8) | b | ||
| hex.value = `#${rgb.toString(16).padStart(6, '0')}` | ||
| } | ||
| // 16进制转rgb | ||
| function hex2rgb() { | ||
| rgb.value = h.value.replace('#', '').match(/../g).map(n => Number.parseInt(n, 16)) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div flex="~ col" items-center> | ||
| <h1 flex="~"> | ||
| RGB颜色值转换成十六进制颜色码：<div mr4 inline-block w-10 px4 :style="{ backgroundColor: hex }" /> | ||
| <input v-model="hex" type="text" w-40 border border-base px2> | ||
| </h1> | ||
| <div flex="~ col" mt4> | ||
| <div flex="~ gap4"> | ||
| <input v-model="r2h.r" type="number" w-20 border border-base px2> | ||
| <input v-model="r2h.g" type="number" w-20 border border-base px2> | ||
| <input v-model="r2h.b" type="number" w-20 border border-base px2> | ||
| <button flex items-center justify-center rounded-full btn-primary @click="rgb2hex"> | ||
| 转换 | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <h1 flex="~" mt8> | ||
| 十六进制颜色码转换成RGB颜色值：<div mr4 inline-block w-10 px4 :style="{ backgroundColor: `rgb(${rgb})` }" /> | ||
| <input v-model="rgb" type="text" w-40 border border-base px2> | ||
| </h1> | ||
| <div flex="~ gap4" mt4> | ||
| <input v-model="h" type="text" border border-base px2> | ||
| <button flex items-center justify-center rounded-full btn-primary @click="hex2rgb"> | ||
| 转换 | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </template> |
Oops, something went wrong.