cmswork 1.0.9 → 1.1.2

package/Lit/src/my-element.ts

@@ -0,0 +1,144 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import litLogo from "./assets/lit.svg";
+import viteLogo from "/vite.svg";
+import "./child-element";
+import { store,incremented } from './store/redux'
+
+// 定义 DataObject 接口
+interface DataObject {
+  name: string;
+  age:Number
+}
+@customElement("my-element")
+export class MyElement extends LitElement {
+  static styles = [css``]
+ 
+  @property()
+  docsHint = "Click on the Vite and Lit logos to learn more";
+  @property({ type: Number })
+  count = 0;
+
+  @property({ type: Object})
+  dataObj:DataObject = {
+    name: "搜索",
+    age:90
+  };
+
+  @property({ type: Function })
+  externalFunction = (val: number) => {
+    console.log("默认方法", val);
+  };
+
+  arr: any[] = [
+    {
+      name: "一",
+      id: 1,
+    },
+    {
+      name: "二",
+      id: 2,
+    },
+  ];
+
+  renderListFn() {
+    if (this.count > 10) {
+      return html`<span style="color: ${this.count > 15 ? "red" : "green"}"
+        >当前count大于10</span
+      >`;
+    } else {
+      return html`<span>当前count小于10</span>`;
+    }
+  }
+  person:DataObject = {
+    name:'Forrest',
+    age:29
+  }
+  connectedCallback() {
+    super.connectedCallback();
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = '/src/styles/myelement.css'; 
+    if(this.shadowRoot)
+    this.shadowRoot.appendChild(link); 
+
+
+    console.log('dataObj',this.dataObj)
+  }
+
+  // 当属性变化时被调用的回调
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('arr')) {
+      console.log('arr changed:', this.arr);
+    }
+    if (changedProperties.has('dataObj')) {
+      console.log('dataObj changed:', this.dataObj);
+    }
+  }
+
+
+  callExternalFunction() {
+    if (this.externalFunction) {
+      this.externalFunction(this.count); // 调用外部函数
+    }
+  }
+
+ 
+  showMaterialUI:boolean = false
+  showMarkdown:boolean = false
+  addStore(){
+    store.dispatch(incremented(5))
+  }
+  render() {
+    return html`
+      <div>
+      <md-filled-button @click=${this.addStore}>ADDStore</md-filled-button>
+
+      <a href="https://vitejs.dev" target="_blank">
+          <img src=${viteLogo} class="logo" alt="Vite logo" />
+        </a>
+        <a href="https://lit.dev" target="_blank">
+          <img
+            src=${litLogo}
+            class="logo lit ${this.count > 20 && "big"}"
+            alt="Lit logo"
+          />
+        </a>
+    
+        
+        <child-element
+          textVal="${this.count > 20
+            ? "父组件的count大于20"
+            : "父组件引用子组件"}"
+        ></child-element>
+        ${this.arr.map((item) => html` <div>${item.name}</div> `)}
+        ${this.renderListFn()}
+      </div>
+      <slot></slot>
+      <div class="card">
+        <button @click=${this._onClick} part="button">
+          count is ${this.count}
+        </button>
+      </div>
+      <p class="read-the-docs">${this.docsHint}</p>
+      <p class="read-the-docs">${this.dataObj.name}${this.dataObj.age}</p>
+      <p class="read-the-docs">${this.person.name}${this.person.age}</p>
+      <button @click="${this.callExternalFunction}">
+        Call External Function
+      </button>
+          </div>
+    `;
+  }
+
+  private _onClick() {
+    this.count++;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "my-element": MyElement;
+  }
+}

package/Lit/src/nav-element.ts

@@ -0,0 +1,32 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('nav-element')
+export class NavElement extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-size: 1rem;
+      }
+      nav{
+        height:2rem;
+      }
+    `
+  ];
+  render() {
+    return html`
+      <nav>
+        <a href="/">Home</a>
+        <a href="/child">child</a>
+        <a href="/markdown">markdown</a>
+        <a href="/fetch/23">fetch</a>
+      </nav>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nav-element': NavElement;
+  }
+}

package/Lit/src/store/redux.ts

@@ -0,0 +1,34 @@
+import { createSlice, configureStore } from '@reduxjs/toolkit'
+
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0
+  },
+  reducers: {
+    incremented: (state, action) => {
+      state.value += action.payload; // 使用 action.payload 来获取传入的参数
+    },
+    decremented: state => {
+      state.value -= 1
+    }
+  }
+})
+
+export const { incremented, decremented } = counterSlice.actions
+
+ 
+export const store = configureStore({
+  reducer: counterSlice.reducer
+})
+
+// 可以订阅 store
+// store.subscribe(() => console.log(store.getState()))
+
+// 将我们所创建的 action 对象传递给 `dispatch`
+// store.dispatch(incremented())
+// {value: 1}
+// store.dispatch(incremented())
+// {value: 2}
+// store.dispatch(decremented())
+// {value: 1}

package/Lit/src/styles/myelement.css

@@ -0,0 +1,74 @@
+:host {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo .tips {
+  color: #888;
+}
+.big {
+  height: 12em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.lit:hover {
+  filter: drop-shadow(0 0 2em #325cffaa);
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}
+::slotted(h1) {
+  font-size: 2.2em;
+  line-height: 1.1;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+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;
+}
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+.ckl {
+  font-size: 12px;
+}
+.ckl .lk {
+  color: #fff;
+}

package/Lit/src/styles/myelement.less

@@ -0,0 +1,88 @@
+:host {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+  
+  
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+    .tips {
+      color: #888;
+
+    }
+  }
+  .big {
+    height: 12em;
+  }
+  
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  
+  .logo.lit:hover {
+    filter: drop-shadow(0 0 2em #325cffaa);
+  }
+  
+  
+  .card {
+    padding: 2em;
+  }
+
+  .read-the-docs {
+    color: #888;
+  }
+
+  ::slotted(h1) {
+    font-size: 2.2em;
+    line-height: 1.1;
+  }
+
+  a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+  }
+  a:hover {
+    color: #535bf2;
+  }
+// .ll
+  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;
+  }
+
+  @media (prefers-color-scheme: light) {
+    a:hover {
+      color: #747bff;
+    }
+    button {
+      background-color: #f9f9f9;
+    }
+  }
+
+  .ckl {
+    font-size: 12px;
+    .lk{
+      color: #fff;
+    }
+  }
+

package/Lit/src/vite-env.d.ts

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

package/Lit/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+      "target": "ES2020",
+      "experimentalDecorators": true,
+      "useDefineForClassFields": false,
+      "module": "ESNext",
+      "lib": ["ES2020", "DOM", "DOM.Iterable"],
+      "skipLibCheck": true,
+  
+      /* Bundler mode */
+      "moduleResolution": "bundler",
+      "allowImportingTsExtensions": true,
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": true,
+  
+      /* Linting */
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"]
+  }
+  

package/Lit/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+  ],
+  base: './',
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'h.f',
+    jsxInject: `import { h } from 'omi'`
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+  },
+  server: {
+    watch: {
+      usePolling: true, // 使用轮询来监视文件变化
+    },
+  },
+  resolve: {
+    alias: {
+      // "omi": resolve("./src/omi/index.ts"),
+      "@": resolve("./src/"),
+    },
+  },
+})