btxui 1.0.1

package/composables/api.ts

@@ -0,0 +1,18 @@
+const fetchData = async (url: string) => {
+    const res = await $fetch(url);
+    const { datas, error } = JSON.parse(res as string);
+    if(error > 0) console.error(error);
+    return datas;
+}
+
+// 获取站点元信息
+export const getSiteInfo = async () => await fetchData("http://localhost/BTXphp/index.php/sea/App/get_site_info");
+
+// 获取友情链接
+export const getFriendLinks = async () => await fetchData("http://localhost/BTXphp/index.php/sea/Index/get_friend_links");
+
+// 获取静态文章
+export const getStatic = async () => await fetchData("http://localhost/BTXphp/index.php/sea/Index/get_static");
+
+// 获取文章列表
+export const getArticleList = async () => await fetchData("http://localhost/BTXphp/index.php/sea/Index/get_articles");

package/env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

package/main.js

@@ -0,0 +1,6 @@
+export default {
+    name: "btxui",
+    show() {
+        return "BTX",
+    }
+}

package/nuxt.config.ts

@@ -0,0 +1,51 @@
+import { resolve } from 'path'
+
+export default defineNuxtConfig({
+    app: {
+        head: {
+            htmlAttrs: {
+                lang: 'en'
+            },
+            meta: [
+                {charset: 'utf-8'},
+                {name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover'},
+                {name: 'format-detection', content: 'telephone=no'}
+            ],
+            link: [
+                {rel: 'icon', type: 'image/x-icon', href: '/favicon.gif'},
+            ]
+        }
+    },
+
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: '@import "./sass/btx.scss";',
+                }
+            }
+        },
+        build: {
+            cssCodeSplit: false,
+        },
+        resolve: {
+            alias: {
+                "@": resolve(__dirname, "./")
+            }
+        }
+    },
+
+    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+    plugins: [],
+
+    css: ["highlight.js/styles/monokai-sublime.css"],
+
+    // Auto import components: https://go.nuxtjs.dev/config-components
+    components: true,
+
+    // Modules: https://go.nuxtjs.dev/config-modules
+    modules: [],
+
+    // Build Configuration: https://go.nuxtjs.dev/config-build
+    build: {}
+})

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "btxui",
+  "private": false,
+  "version": "1.0.1",
+  "main": "main.js",
+  "scripts": {
+    "build": "nuxt build --dotenv .env.production",
+    "dev": "nuxt dev --dotenv .env.development",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "build:css": "npx sass ./sass/btx.scss ./cdn/css/btx.min.css --style compressed"
+  },
+  "devDependencies": {
+    "@types/node": "^18",
+    "nuxt": "^3.4.2",
+    "sass": "^1.69.3",
+    "typescript": "^5.0.2"
+  },
+  "dependencies": {
+    "vue-highlightjs": "^1.3.3"
+  }
+}

package/pages/article.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+      <p>{{ name }}</p>
+      <p><button @click="name = 'btx'">change</button></p>
+  </div>
+</template>
+
+<script setup>
+  useHead({
+    title: "最新文章"
+  })
+  const user = reactive({
+    name: "neo",
+    age: 34
+  })
+</script>

package/pages/download.vue

@@ -0,0 +1,50 @@
+<template>
+    <article>
+        <p>BTX·UI 不支持 IE8 及以下版本，因为 BTX·UI 是基于 Vue2.0 开发的，使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。</p>
+        <p></p>
+
+        <!--更新日志-->
+        <section>
+            <h5>更新日志</h5>
+            <p>最新稳定版本：1.0.0</p>
+            <p>每个版本的更新日志见 <a href="https://github.com/btxstudio/BTXUI" class="color-blue" target="_blank">GitHub</a>。</p>
+            <p></p>
+        </section>
+
+        <!--全局样式-->
+        <section>
+            <h5>全局样式</h5>
+            <p>全局样式的使用方式和 bootstrap 类似，可以直接通过 <code>&lt;script&gt;</code> 标签引入。分为 "开发版本" 和 "生产版本"，开发版本采用 scss 进行源码构建：</p>
+            <p>生产版本中 <code>btx.min.css</code> 提供基础样式库；<code>btx.pad.min.css</code> 提供基于平板（ipadPro 标准）的样式库，建议宽度分段为：740px - 1367px；<code>btx.mob.min.css</code> 提供基于手机端（iPhone6|7|8 PLUS 标准）的样式库，建议宽度分段为：0 - 740px；<code>btx.webapp.min</code> 提供基于 webapp 的基础样式初始化库。</p>
+            <p><b>CDN：</b></p>
+            <p>基础适配版：<code>&lt;link rel="stylesheet" src="http://www.75sea.com/cdn/css/v2/btx.min.css"&gt;&lt;/script&gt;</code></p>
+            <p>平板适配版：<code>&lt;link rel="stylesheet" src="http://www.75sea.com/cdn/css/v2/btx.pad.min.css"&gt;&lt;/script&gt;</code></p>
+            <p>手机适配版：<code>&lt;link rel="stylesheet" src="http://www.75sea.com/cdn/css/v2/btx.mob.min.css"&gt;&lt;/script&gt;</code></p>
+            <p>webapp 适配版：<code>&lt;link rel="stylesheet" src="http://www.75sea.com/cdn/css/v2/btx.webapp.min"&gt;&lt;/script&gt;</code></p>
+            <p><b>版本下载：</b></p>
+            <div class="flex pcenter color-light">
+                <a href="http://75sea.com/cdn/css/v2/scss_download" class="bg-color-green round-lg pad-v-d5 w-15 max-w-s" download="scss_download.zip">
+                    <i class="ico-download mrg-r-1"></i>开发版本
+                </a>
+                <a href="http://75sea.com/cdn/css/v2/min_download" class="bg-color-green round-lg pad-v-d5 w-15 mrg-l-2 max-w-s" download="min_download.zip">
+                    <i class="ico-download mrg-r-1"></i>生产版本
+                </a>
+            </div>
+            <p></p>
+        </section>
+
+        <!--NPM-->
+        <section>
+            <h5>NPM</h5>
+            <P>在用 BTX·UI 构建大型应用时推荐使用 NPM 安装 webapp 版本，除了全局样式更提供了丰富的组件，以便更为灵活且轻松的完成界面及交互的开发工作。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。</P>
+            <p><b>最新稳定版：</b></p>
+            <p><code>$ npm install btx-ui -S</code></P>
+        </section>
+    </article>
+</template>
+
+<script>
+    export default {
+        name: "download"
+    }
+</script>

package/pages/example/app_wid/app/data_demo.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="pad-2 color-sub">data demo</div>
+</template>
+
+<script>
+    export default {
+        name: "data_demo"
+    }
+</script>

package/pages/example/app_wid/app/download_demo.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="pad-2 color-sub">download demo</div>
+</template>
+
+<script>
+    export default {
+        name: "download_demo"
+    }
+</script>

package/pages/example/app_wid/app/list_demo.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="pad-2 pleft color-sub">
+        <div v-for="i of 40" :key="i">list demo {{i}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "list_demo"
+    }
+</script>

package/pages/example/app_wid/app/system_demo.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="pad-2 color-sub">system demo</div>
+</template>
+
+<script>
+    export default {
+        name: "system_demo"
+    }
+</script>

package/pages/example/app_wid/app_wid_demo.vue

@@ -0,0 +1,198 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <p>通过 <code>spread</code> 属性来设置常规分布导航按钮；通过 <code>center</code> 属性则可设置居中主导航按钮；此外 <code>colors</code> 属性可设置组件色彩风格，导航按钮会基于当前路由进行高亮样式显示。</p>
+            <p>通过组件 API <code>on_toggle</code> 事件可以响应点击按钮回调，自变量参数为按钮索引。</p>
+            <p>【exp】：</p>
+            <div class="grid pcenter resize">
+                <div class="col-6 pad-h-1">
+                    <div class="h-20 line line-main thick-1">
+                        <app-wid v-bind="data_1.props1" />
+                    </div>
+                    <div class="mrg-t-1">默认深色，不含中间按钮</div>
+                </div>
+                <div class="col-6 pad-h-1">
+                    <div class="h-20 line line-lgray thick-1">
+                        <app-wid v-bind="data_1.props2" @on_toggle="show_name1" />
+                    </div>
+                    <div class="mrg-t-1">自定义浅色，含中间按钮及点击回调</div>
+                </div>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--图标按钮-->
+        <section>
+            <h5>图标按钮</h5>
+            <p>通过 <code>spread</code> 属性 <b>icon_data</b> 字段即可配置图标按钮。</p>
+            <div class="resize">
+                <div class="h-20 line line-main thick-1">
+                    <app-wid v-bind="data_2" />
+                </div>
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import AppWid from "@/components/BTXUI/app/app-wid"
+
+    export default {
+        name: "app_wid_demo",
+        components: {
+            HeaderInfo,
+            AppWid,
+        },
+        data(){
+            const spread = [
+                {
+                    nav_id: "data",
+                    icon_data: {
+                        icon: "data"
+                    },
+                    hot_data: {
+                        link: "/app_wid_demo/data"
+                    },
+                    text: "data",
+                },
+                {
+                    nav_id: "download",
+                    icon_data: {
+                        icon: "download"
+                    },
+                    hot_data: {
+                        link: "/app_wid_demo/download"
+                    },
+                    text: "download",
+                },
+                {
+                    nav_id: "list",
+                    icon_data: {
+                        icon: "list"
+                    },
+                    hot_data: {
+                        link: "/app_wid_demo/list"
+                    },
+                    text: "list",
+                },
+                {
+                    nav_id: "system",
+                    icon_data: {
+                        icon: "system"
+                    },
+                    hot_data: {
+                        link: "/app_wid_demo/system"
+                    },
+                    text: "system",
+                },
+            ];
+
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: AppWid.name,
+                    ...AppWid.introduce,
+                },
+
+                data_1: {
+                    props1: {
+                        spread,
+                        colors: {
+                            bg: "main"
+                        },
+                        goTopBtn: {
+                            show_distance: false
+                        }
+                    },
+                    props2: {
+                        center: {
+                            nav_id: "",
+                            icon_data: {
+                                icon: "home"
+                            },
+                            hot_data: {
+                                link: "http://www.75sea.com"
+                            }
+                        },
+                        spread,
+                        round: false,
+                        colors: {
+                            bg: "lgray",
+                            bar: "light",
+                            center: {
+                                bg: "blue",
+                                line: "light"
+                            },
+                            text: {
+                                normal: "mgray",
+                                act: "blue"
+                            }
+                        },
+                        goTopBtn: {
+                            show_distance: false
+                        }
+                    }
+                },
+
+                data_2: {
+                    center: {
+                        nav_id: "",
+                        icon_data: {
+                            bgImg: require("@/assets/img/icons.svg")
+                        },
+                        bg_styles: {
+                            normal: "bg-size-500% bg-pos-25%|65%"
+                        }
+                    },
+                    spread: [
+                        {
+                            nav_id: "data",
+                            icon_data: {
+                                bgImg: require("@/assets/img/icons.svg")
+                            },
+                            bg_styles: {
+                                normal: "bg-size-500% bg-pos-0|0",
+                                act: "bg-size-500% bg-pos-0|32%"
+                            },
+                            hot_data: {
+                                link: "/app_wid_demo/list"
+                            },
+                            text: "Home",
+                        },
+                        {
+                            nav_id: "download",
+                            icon_data: {
+                                bgImg: require("@/assets/img/icons.svg")
+                            },
+                            bg_styles: {
+                                normal: "bg-size-500% bg-pos-100%|0",
+                                act: "bg-size-500% bg-pos-100%|32%"
+                            },
+                            hot_data: {
+                                link: "/app_wid_demo/download"
+                            },
+                            text: "About",
+                        }
+                    ],
+                    colors: {
+                        bg: "main"
+                    }
+                }
+
+            }
+        },
+        methods: {
+            show_name1(nav_id){
+                nav_id && this.$confirm.toast(nav_id, 2000);
+            }
+        }
+    }
+</script>

package/pages/example/app_wid/btn_wid_demo.vue

@@ -0,0 +1,179 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础按钮-->
+        <section>
+            <h5>基础按钮</h5>
+            <p>通过 <code>btn-text</code> 属性实现按钮文字。通过 <b>on_click</b> 事件实现点击回调。</p>
+            <div class="resize flex">
+                <btn-wid btn-text="点击加一" @on_click="$_click1" />
+            </div>
+            <p>点击次数：<code>{{data_1.click_count}}</code></p>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--自定义配色按钮-->
+        <section>
+            <h5>自定义配色按钮</h5>
+            <p>通过 <code>btn-color</code> 属性设置按钮颜色风格。其值参数顺序为：["文字色", "背景色", "描边色", "hover文字色", "hover背景色", "hover描边色"]。该属性可缺省，默认风格为：["dgray", "neutral", "neutral", "light", "blue", "blue"]。</p>
+            <div class="resize flex">
+                <btn-wid btn-text="自定义风格按钮" :btn-color="data_2.btn_color" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--大圆角按钮-->
+        <section>
+            <h5>大圆角按钮</h5>
+            <p>通过 <code>btn-round</code> 属性可设置按钮为大圆角效果。</p>
+            <div class="resize flex">
+                <btn-wid btn-text="大圆角按钮" :btn-round="data_3.btn_round" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--定宽按钮-->
+        <section>
+            <h5>定宽按钮</h5>
+            <p>通过 <code>btn-width</code> 属性可设置按钮固定宽度，其默认单位为 rem。</p>
+            <div class="resize">
+                <btn-wid btn-text="定宽按钮" :btn-width="data_4.btn_width" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--渐变按钮-->
+        <section>
+            <h5>渐变按钮</h5>
+            <p>通过 <code>btn-color</code> 属性设置背景色时可以使用数组结构传入多个色值来实现由左向右的线性渐变效果，一旦使用渐变色背景其 hover 样式也必须保持渐变背景色，此时纯色背景会失效。</p>
+            <div class="resize">
+                <btn-wid btn-text="渐变按钮" :btn-color="data_5.btn_color" :btn-round="data_5.btn_round" :btn-width="data_5.btn_width" />
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--链接按钮-->
+        <section>
+            <h5>链接按钮</h5>
+            <p>通过 <code>hotData</code> 属性的 <b>link</b> 字段可设置按钮链接效果，<b>forbid</b> 字段实现点击禁用。</p>
+            <div class="resize flex">
+                <div class="mrg-r-1">
+                    <btn-wid btn-text="跳转七武海官网" :hot-data="data_7.hot_data1" />
+                </div>
+                <div>
+                    <btn-wid btn-text="禁用链接" :hot-data="data_7.hot_data2" />
+                </div>
+            </div>
+            <hr>
+            <p></p>
+        </section>
+
+        <!--含图标按钮-->
+        <section>
+            <h5>含图标按钮</h5>
+            <p>通过 <code>iconData</code> 属性可以为按钮插入图标。</p>
+            <div class="resize flex">
+                <btn-wid v-bind="data_8" />
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import BtnWid from "@/components/BTXUI/btn/btn-wid"
+
+    export default {
+        name: "btn_wid_demo",
+        components: {
+            HeaderInfo,
+            BtnWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: BtnWid.name,
+                    ...BtnWid.introduce,
+                },
+
+                data_1: {
+                    click_count: 0
+                },
+
+                data_2: {
+                    btn_color: {
+                        normal: {
+                            text: "light",
+                            bg: "red",
+                            line: "#b7072c",
+                        },
+                        hover: {
+                            text: "#ffcc00",
+                            bg: "#444",
+                            line: "#222",
+                        },
+                    }
+                },
+
+                data_3: {
+                    btn_round: true
+                },
+
+                data_4: {
+                    btn_width: 17
+                },
+
+                data_5: {
+                    btn_round: true,
+                    btn_width: 14,
+                    btn_color: {
+                        normal: {
+                            text: "light",
+                            bg: ["blue", "green"],
+                            line: "none",
+                        },
+                        hover: {
+                            text: "#ffcc00",
+                            bg: ["#222", "#555"],
+                            line: "none",
+                        },
+                    }
+                },
+
+                data_7: {
+                    hot_data1: {
+                        link: "http://www.75sea.com",
+                    },
+                    hot_data2: {
+                        forbid: true
+                    }
+                },
+
+                data_8: {
+                    btnText: "删除",
+                    iconData: {
+                        icon: "del"
+                    }
+                }
+
+            }
+        },
+        methods: {
+
+            //点击递增
+            $_click1(){
+                this.data_1.click_count++;
+            }
+
+        }
+    }
+</script>